/* ============================================================
   COMPONENTS — Reusable UI primitives
   ============================================================ */

/* ========== BUTTONS ========== */
.btn-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 12px; cursor: pointer; transition: all 0.2s; border: none; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-outline { background: transparent; border: 1.5px solid var(--gold); color: var(--gold); }
.btn-outline:hover:not(:disabled) { background: var(--gold-bg); }
.btn-gold { background: var(--gold); color: white; box-shadow: 0 4px 16px rgba(184,150,11,0.25); }
.btn-gold:hover:not(:disabled) { background: var(--gold-hover); box-shadow: 0 6px 24px rgba(184,150,11,0.35); }
.btn-charcoal { background: var(--charcoal); color: white; }
.btn-charcoal:hover:not(:disabled) { background: #3a3533; }

/* ========== TOAST ========== */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: 320px; }
.toast { padding: 14px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; display: flex; align-items: start; gap: 10px; animation: toastSlide 0.3s ease-out; border: 1px solid; }
.toast.success { background: var(--green-bg); border-color: #c0dcc2; color: #2d5a30; }
.toast.error { background: var(--red-bg); border-color: #f0c4c1; color: #8b3530; }
.toast.out { animation: toastOut 0.3s ease-in forwards; }
.toast-close { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 16px; line-height: 1; margin-left: auto; }
.toast-close:hover { opacity: 1; }
@keyframes toastSlide { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(80px); } }

/* ========== CONFIRM MODAL ========== */
.modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(74,69,67,0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
/* Confirmation modal always sits ABOVE any other modal — e.g. cancelar evento
   triggered from the detalle modal needs to render on top. */
#confirmModal { z-index: 110; }
/* Lock body scroll while any modal is open. The class is toggled from main.js
   via a MutationObserver that watches every .modal-overlay's class list, so no
   call site needs to change. */
body.modal-open { overflow: hidden; }
.modal { background: var(--white); border-radius: 20px; padding: 32px; max-width: 380px; width: 100%; text-align: center; animation: modalIn 0.25s ease-out; box-sizing: border-box; max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-icon { font-size: 36px; margin-bottom: 12px; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.modal-text { font-size: 13px; color: var(--muted); font-weight: 300; margin-bottom: 24px; line-height: 1.5; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns .btn { flex: 1; padding: 12px; font-size: 11px; }

/* ========== LOADING SPINNER ========== */
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== EMPTY STATE ========== */
.empty-state { text-align: center; padding: 40px; }
.empty-state-narrow { text-align: center; padding: 40px 20px; }
.empty-state-icon { font-size: 28px; opacity: 0.3; margin-bottom: 10px; }

/* ========== STATUS BADGES ========== */
.badge-active { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--green-bg); color: var(--green); }
.badge-inactive { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--cream-dark); color: var(--muted); }
.duration-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; background: var(--cream-dark); color: var(--muted); letter-spacing: 0.02em; vertical-align: middle; }

/* ========== CHIPS / TAGS ========== */
.chips-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1.5px solid var(--border); min-height: 42px; align-items: center; transition: border-color 0.2s; }
.chips-container:focus-within { border-color: var(--gold); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--gold-bg); border: 1px solid var(--gold-pale); border-radius: 20px; font-size: 12px; color: var(--charcoal); white-space: nowrap; }
.chip-remove { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted); line-height: 1; padding: 0 2px; }
.chip-remove:hover { color: var(--red); }
.chips-input { border: none; outline: none; font-family: 'Outfit', sans-serif; font-size: 14px; color: var(--charcoal); background: transparent; flex: 1; min-width: 140px; padding: 6px 0; }
.chips-input::placeholder { color: var(--border); font-weight: 300; }

/* ============================================================
   VERSION BADGE (bottom-left corner)
   ============================================================ */
.app-version {
    position: fixed;
    left: 12px;
    bottom: 10px;
    font-size: 13px;
    color: var(--charcoal);
    opacity: 0.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    pointer-events: none;
    user-select: none;
    z-index: 10;
}