:root {
    --bs-body-bg: #0a0e1a;
    --bs-body-color: #e5e7eb;
    --bs-dark-rgb: 17, 24, 39;
    --bs-border-color: #2a3352;
    --purple: #9333ea;
    --purple-hover: #a855f7;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

a { color: #a78bfa; }
a:hover { color: #c4b5fd; }

.text-secondary-custom { color: #9ca3af; }
.text-tertiary { color: #6b7280; }
.icon-muted { color: #4b5563; }
.section-title { font-size: .9rem; font-weight: 600; color: #d1d5db; }

/* ─── Navbar ──────────────────────────── */
.navbar { background-color: #111827 !important; border-bottom: 1px solid #2a3352; }
.dropdown-menu { background-color: #111827; border-color: #2a3352; }
.dropdown-item { color: #d1d5db; }
.dropdown-item:hover { background-color: rgba(147,51,234,.15); color: #c4b5fd; }
.dropdown-divider { border-color: #2a3352; }

/* ─── Cards ──────────────────────────── */
.card-event { background-color: #111827; border-color: #2a3352; transition: transform .2s ease, box-shadow .2s ease; }
.card-event:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.card-event .card-img-top { aspect-ratio: 4/5; object-fit: cover; }
.card-form { background-color: #111827; border-color: #2a3352; }
.card, .table, .modal-content { background-color: #111827; border-color: #2a3352; }

/* ─── Form sections ─────────────────────── */
.form-section + .form-section { border-top: 1px solid rgba(42,51,82,.5); margin-top: 1.25rem; padding-top: 1.25rem; }
.form-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: 1rem; }

/* ─── Forms ──────────────────────────── */
.form-control, .form-select { background-color: #0a0e1a; border-color: #2a3352; color: #e5e7eb; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.form-control:focus, .form-select:focus { background-color: #0f1525; border-color: var(--purple); color: #e5e7eb; box-shadow: 0 0 0 .2rem rgba(147,51,234,.2); }
.form-control::placeholder { color: #4b5563; }
.form-control:disabled { background-color: #1a2035; opacity: .5; cursor: not-allowed; }

/* ─── MC field ──────────────────────────── */
.field-mc .form-control { font-style: italic; border-color: rgba(147,51,234,.35); background-color: rgba(147,51,234,.04); }
.field-mc .form-control:focus { border-color: var(--purple); background-color: rgba(147,51,234,.08); box-shadow: 0 0 0 .2rem rgba(147,51,234,.15); }
.field-mc .form-control::placeholder { color: #6b21a8; font-style: italic; }

/* ─── Optional tag ──────────────────────── */
.form-label-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.optional-tag { font-size: .65rem; font-weight: 400; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }

/* ─── WhatsApp country selector ──────────── */
.whatsapp-group { display: flex; gap: .5rem; }
.whatsapp-group .form-select { flex: 4 0 0; min-width: 0; }
.whatsapp-group .form-control { flex: 6 0 0; min-width: 0; }

/* ─── Password toggle ──────────────────── */
.password-toggle { position: relative; }
.password-toggle .form-control { padding-right: 2.25rem; }
.password-toggle-btn { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); background: none; border: none; color: #6b7280; cursor: pointer; padding: .25rem; line-height: 1; font-size: .9rem; z-index: 5; }
.password-toggle-btn:hover { color: #a78bfa; }
.password-toggle-btn:focus { outline: none; color: #a78bfa; }
.form-control.is-valid, .was-validated .form-control:valid { border-color: #10b981; background-image: none; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #ef4444; background-image: none; }
.form-select.is-valid, .was-validated .form-select:valid { border-color: #10b981; background-image: none; }
.form-select.is-invalid, .was-validated .form-select:invalid { border-color: #ef4444; background-image: none; }
.valid-feedback { color: #6ee7b7; }
.invalid-feedback { color: #fca5a5; }

/* ─── City input disabled state ──────────── */
.city-input-muted { opacity: .4; }
.city-input-muted::placeholder { color: #374151 !important; }

/* ─── Autocomplete suggestions ──────────── */
.suggestions-dropdown { background: #0f1525; border: 1px solid #2a3352; border-top: none; max-height: 180px; overflow-y: auto; }
.suggestion-item { display: block; width: 100%; background: transparent; color: #d1d5db; border: none; cursor: pointer; font-size: .8rem; padding: .45rem .75rem; text-align: left; transition: background .1s ease; }
.suggestion-item + .suggestion-item { border-top: 1px solid rgba(42,51,82,.25); }
.suggestion-item:hover, .suggestion-item:focus { background: rgba(147,51,234,.12); color: #e5e7eb; outline: none; }
.suggestion-item .match-highlight { color: #c4b5fd; font-weight: 500; }

/* ─── Buttons ──────────────────────────── */
.btn-purple { background-color: var(--purple); border-color: var(--purple); color: #fff; position: relative; overflow: hidden; transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.btn-purple:hover { background-color: var(--purple-hover); border-color: var(--purple-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(147,51,234,.35); }
.btn-purple:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(147,51,234,.25); }
.btn-purple:disabled { opacity: .65; transform: none; box-shadow: none; }
.btn-purple-outline { color: #a78bfa; border-color: var(--purple); transition: background-color .2s ease, color .2s ease; }
.btn-purple-outline:hover { background-color: var(--purple); color: #fff; }
.btn-danger-soft { color: #fca5a5; border-color: rgba(239,68,68,.3); }
.btn-danger-soft:hover { background-color: rgba(239,68,68,.15); color: #fca5a5; }
.btn-purple-soft { background-color: #1a2035; border-color: #2a3352; color: #9ca3af; }
.btn-purple-soft:hover { background-color: #2a3352; color: #e5e7eb; }

/* ─── Badges ──────────────────────────── */
.badge-rango-plaza { background-color: rgba(107,114,128,.15); color: #d1d5db; border: 1px solid rgba(107,114,128,.3); }
.badge-rango-regional { background-color: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.badge-rango-nacional { background-color: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.badge-rango-internacional { background-color: rgba(147,51,234,.15); color: #c4b5fd; border: 1px solid rgba(147,51,234,.3); }
.badge-estado-abiertas { background-color: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.badge-estado-cerradas { background-color: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.badge-estado-proximamente { background-color: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }

/* ─── Filters ──────────────────────────── */
.filter-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Alerts ──────────────────────────── */
.alert-success { background-color: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.alert-danger { background-color: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); color: #fca5a5; }

/* ─── Footer ──────────────────────────── */
footer { border-top: 1px solid rgba(42,51,82,.3); }

/* ─── Admin extras ──────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,0.03); --bs-table-color: #e5e7eb; }
.table th { color: #9ca3af; font-weight: 500; border-color: #2a3352; }
.table td { border-color: rgba(42,51,82,0.3); }
.page-link { background-color: #1a2035; border-color: #2a3352; color: #9ca3af; }
.page-link:hover { background-color: #2a3352; color: #e5e7eb; }
.page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); }
.alert-warning { background-color: rgba(245,158,11,.15); border-color: rgba(245,158,11,.3); color: #fcd34d; }
.alert .btn-close { filter: invert(1); }
code { background-color: #1a2035; color: #9ca3af; padding: 2px 6px; border-radius: 4px; }

/* ─── Share URL display ──────────────────── */
.share-url-display {
    display: flex; align-items: center; gap: .5rem;
    padding: .625rem .875rem;
    background: #0a0e1a; border: 1px solid #2a3352; border-radius: .5rem;
    font-size: .8125rem; color: #c4b5fd; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ─── Toast copied ────────────────────── */
.toast-copied {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
    color: #6ee7b7; padding: .625rem 1.25rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 500; z-index: 9999;
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
    pointer-events: none; white-space: nowrap;
}
.toast-copied.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-copied i { margin-right: .375rem; }

/* ─── Responsive ──────────────────────── */
@media (max-width: 575.98px) {
    .whatsapp-group { flex-direction: column; gap: .35rem; }
    .whatsapp-group .form-select { width: 100%; min-width: 0; max-width: 160px; }
}
