/* ============================================================
   GESTIONAR EVENTOS — header, chips, table, column filter
   popover and modals (detalle + modificar).
   Loaded only for this tab; isolated from admin.css.
   ============================================================ */

.ev-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.ev-breadcrumb { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }

/* Toolbar (search + chips) lives INSIDE the card on top of the table.
   Border-bottom separates it visually from the rows. */
.ev-table-toolbar { display: flex; gap: 12px; align-items: center; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border-light); }
.ev-search-bar { display: flex; gap: 8px; flex: 1; min-width: 280px; max-width: 480px; }
.ev-search-input { flex: 1; padding: 10px 14px !important; font-size: 13px; }
.ev-search-btn { padding: 10px 18px; font-size: 11px; }

.ev-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: var(--charcoal-light); background: var(--white); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em; }
.ev-chip:hover { border-color: var(--gold); color: var(--gold); }
.ev-chip.active { background: var(--gold-bg); border-color: var(--gold-pale); color: var(--gold); }
.ev-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; font-size: 10.5px; font-weight: 600; color: var(--charcoal-light); background: var(--cream); border-radius: 999px; line-height: 1; }
.ev-chip.active .ev-chip-count { background: #fff; color: var(--gold); }

/* Export button in the eventos toolbar. The popover itself is styled
   generically in css/export-csv.css so other CRUDs can reuse it. */
.ev-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: var(--charcoal-light); background: #fff; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.15s; letter-spacing: 0.02em; }
.ev-export-btn:hover { border-color: var(--gold); color: var(--gold); }
.ev-export-btn svg { width: 14px; height: 14px; }

/* Active column filters bar — also lives inside the card. */
.ev-active-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--gold-bg); border-bottom: 1px solid var(--gold-pale); }
.ev-active-filters-label { font-size: 11px; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; }
.ev-active-filters-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ev-active-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11.5px; color: var(--charcoal); background: #fff; border: 1px solid var(--gold-pale); border-radius: 999px; }
.ev-active-filter-pill button { width: 16px; height: 16px; border: none; background: transparent; color: var(--charcoal-light); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.ev-active-filter-pill button:hover { color: #c44; }
.btn-link { background: none; border: none; color: var(--gold); font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline; }
.btn-link:hover { color: var(--gold-hover); }

/* "Limpiar todos" — pill con icono, más visible que un link plano */
.ev-clear-filters { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; font-family: 'Outfit', sans-serif; font-size: 11.5px; font-weight: 500; color: var(--gold); background: #fff; border: 1px solid var(--gold-pale); border-radius: 999px; cursor: pointer; letter-spacing: 0.02em; transition: all 0.15s; flex-shrink: 0; }
.ev-clear-filters svg { width: 10px; height: 10px; }
.ev-clear-filters:hover { background: var(--gold-bg); color: var(--gold-hover); border-color: var(--gold); }

/* Card holds toolbar + filters + body (loading/empty/table) all in one. */
.ev-table-card { padding: 0; overflow: visible; }
/* Inside the card, only the table area scrolls horizontally if needed; toolbar
   and filters keep their full width. */
.ev-table-scroll { overflow-x: auto; }
.ev-card-loading { padding: 48px 24px; text-align: center; }
.ev-card-empty { padding: 40px 24px; text-align: center; }
.ev-card-empty .empty-state-icon { font-size: 28px; opacity: 0.3; margin-bottom: 10px; }
/* Table — compact padding so the 10 columns fit inside the default .main width
   (1100px) without horizontal scroll or the actions column overflowing the card. */
.ev-table { width: 100%; }
.ev-table th, .ev-table td { padding-left: 10px; padding-right: 10px; }
.ev-table th { position: relative; padding-right: 24px; }
.ev-table th:first-child, .ev-table td:first-child { padding-left: 16px; }
.ev-table th:last-child,  .ev-table td:last-child  { padding-right: 12px; }
.ev-th-filterable { user-select: none; }
.ev-th-label { display: inline-block; }
.ev-th-right { text-align: right; }
/* Actions column: enough room for 3 buttons (32 + 6 + 32 + 6 + 32 = 108px)
   plus the 16+16 padding of `.admin-table td`. White-space:nowrap keeps the
   trio on a single line if the browser tries to shrink the column. */
.ev-th-actions { width: 1%; white-space: nowrap; padding-right: 16px; }
.ev-table td:last-child { white-space: nowrap; }
.ev-table .admin-actions { justify-content: flex-end; }
.ev-col-filter-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.15s; }
.ev-col-filter-btn:hover { color: var(--gold); background: var(--gold-bg); }
.ev-col-filter-btn.has-filter { color: var(--gold); background: var(--gold-bg); }
.ev-col-filter-btn svg { width: 10px; height: 10px; }

.ev-folio-cell { font-family: 'Courier New', monospace; font-size: 12px; color: var(--charcoal-light); font-weight: 500; }
.ev-cliente-cell { display: flex; align-items: center; gap: 10px; }
.ev-cliente-name { font-weight: 500; color: var(--charcoal); }
.ev-cliente-id { font-size: 11px; color: var(--muted); font-family: monospace; }
.ev-tel-cell { font-family: monospace; font-size: 12px; color: var(--charcoal-light); }
.ev-fecha-cell { white-space: nowrap; }
.ev-fecha-day { font-weight: 500; color: var(--charcoal); }
.ev-fecha-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ev-categoria-pill { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 500; color: var(--charcoal); background: var(--cream); border: 1px solid var(--border-light); border-radius: 999px; }
.ev-num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.ev-total-cell { text-align: right; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Estado badge */
.ev-estado-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 999px; letter-spacing: 0.02em; }
.ev-estado-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ev-estado-badge.confirmado { background: #e8f5ec; color: #2d8a4a; }
.ev-estado-badge.cancelado { background: #fdecec; color: #c44; }
.ev-estado-badge.cotizacion,
.ev-estado-badge.pendiente_pago { background: #fff4d6; color: #b88a00; }
.ev-estado-badge.completado { background: #eee5f7; color: #6b4ca8; }

/* Pagination */
.ev-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; flex-wrap: wrap; gap: 12px; }
.ev-pagination-info { font-size: 12px; color: var(--muted); }
.ev-pagination-controls { display: flex; align-items: center; gap: 10px; }
.ev-pagination-current { font-size: 12px; color: var(--charcoal-light); min-width: 110px; text-align: center; }
.ev-page-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--charcoal-light); font-size: 14px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.ev-page-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.ev-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   Column filter popover (anchored to header buttons)
   ============================================================ */
.ev-col-filter-popover { position: fixed; z-index: 100; min-width: 240px; max-width: 320px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(74,69,67,0.18); padding: 0; }
.ev-col-filter-popover[hidden] { display: none; }
.ev-col-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--border-light); font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: var(--charcoal); letter-spacing: 0.03em; }
.ev-col-filter-close { width: 22px; height: 22px; border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; padding: 0; }
.ev-col-filter-close:hover { background: var(--cream); color: var(--charcoal); }
.ev-col-filter-body { padding: 12px 14px; }
.ev-col-filter-body .field { margin: 0; }
.ev-col-filter-body .field + .field { margin-top: 10px; }
.ev-col-filter-body .field-label { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; }
.ev-col-filter-input { width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; box-sizing: border-box; color: var(--charcoal); background: #fff; }
.ev-col-filter-input:focus { outline: none; border-color: var(--gold); }
.ev-col-filter-row { display: flex; gap: 8px; align-items: center; }
.ev-col-filter-row > * { flex: 1; }
.ev-col-filter-checkboxes { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.ev-col-filter-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; color: var(--charcoal); border-radius: 6px; cursor: pointer; user-select: none; }
.ev-col-filter-checkbox-item:hover { background: var(--cream); }
.ev-col-filter-checkbox-item input[type=checkbox] { accent-color: var(--gold); }
.ev-col-filter-footer { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border-light); }
.ev-col-filter-footer .btn { flex: 1; }
.btn-sm { padding: 8px 14px !important; font-size: 11px !important; }

/* ============================================================
   Evento detalle modal
   ============================================================ */
.modal-wide { max-width: 720px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: all 0.15s; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--cream); color: var(--charcoal); }
.modal-evento-detalle { position: relative; text-align: left; padding: 28px 32px; max-width: 720px; }
.ev-detalle-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-right: 36px; }
.ev-detalle-header .modal-title { margin: 0; text-align: left; }
.ev-detalle-folio { font-family: monospace; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.ev-detalle-body { margin-bottom: 24px; }
.ev-detalle-section { margin-top: 22px; }
.ev-detalle-section:first-child { margin-top: 0; }
.ev-detalle-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.ev-detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ev-detalle-field { display: flex; flex-direction: column; gap: 4px; }
.ev-detalle-field-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ev-detalle-field-value { font-size: 13.5px; color: var(--charcoal); font-weight: 500; word-break: break-word; }
.ev-detalle-field-value.empty { color: var(--muted); font-style: italic; font-weight: 400; }
.ev-detalle-field-value.money { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-detalle-servicios { display: flex; flex-direction: column; gap: 8px; }
.ev-detalle-servicio { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--cream); border-radius: 10px; gap: 12px; }
.ev-detalle-servicio-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ev-detalle-servicio-nombre { font-size: 13px; color: var(--charcoal); font-weight: 500; }
.ev-detalle-servicio-notas { font-size: 11px; color: var(--muted); }
.ev-detalle-servicio-precio { font-size: 13px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-detalle-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--muted); background: var(--cream); border-radius: 10px; }
/* Same footer style as the modificar modal: 50/50 buttons with a top divider. */
.ev-detalle-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); }
.ev-servicios-badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 500; color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-pale); border-radius: 999px; cursor: help; }
.ev-servicios-badge.empty { color: var(--muted); background: var(--cream); border-color: var(--border-light); }

/* Avatar in tabla (local class para no acoplarse con usuarios) */
.ev-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; letter-spacing: 0.02em; }

/* ============================================================
   Evento modificar modal — sections + servicios inline
   ============================================================ */
.modal-evento-modificar { position: relative; text-align: left; padding: 28px 32px; max-width: 720px; }
.ev-modificar-header { margin-bottom: 18px; padding-right: 36px; }
.ev-modificar-header .modal-title { margin: 0; text-align: left; }
.ev-modificar-folio { font-family: monospace; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }

.ev-modificar-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.ev-modificar-section:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.ev-modificar-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.ev-modificar-section-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ev-modificar-section-row .ev-modificar-section-title { margin-bottom: 0; }

.ev-modificar-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.ev-modificar-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.ev-modificar-section .field { margin: 0; }
.ev-modificar-section .field + .field { margin-top: 10px; }
/* Inside a grid the row-gap already handles vertical spacing — kill the
   adjacent-field margin so a 2nd cell isn't pushed down vs the 1st. */
.ev-modificar-grid-2 .field + .field,
.ev-modificar-grid-3 .field + .field { margin-top: 0; }
.ev-modificar-section .field-label { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; display: block; }
/* Inputs en formato caja dentro del modal (vs underline-only del .input base).
   El override es local al modal, no afecta otros formularios.
   Usamos background-color (no background) para no pisar el background-image del select. */
.ev-modificar-section .input { padding: 9px 12px; font-size: 13px; border: 1.5px solid var(--border); border-radius: 8px; background-color: #fff; }
.ev-modificar-section .input:focus { border-color: var(--gold); }
.ev-modificar-section select.input { padding-right: 30px; background-position: right 8px center; }

.ev-modificar-hint { font-size: 11.5px; color: var(--muted); padding: 8px 12px; background: var(--cream); border-left: 3px solid var(--gold-pale); border-radius: 6px; margin-top: 4px; line-height: 1.4; }
.ev-modificar-hint strong { color: var(--charcoal); font-weight: 600; }

/* Admin-only override block: forzar buffer al modificar evento */
.ev-modificar-override-box { margin-top: 18px; padding: 12px 14px; background: #fff8ec; border: 1px solid var(--gold-pale); border-radius: 10px; }
.ev-modificar-override-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--charcoal); cursor: pointer; user-select: none; }
.ev-modificar-override-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.ev-modificar-override-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; margin-left: 26px; line-height: 1.4; }
.ev-modificar-override-hint strong { color: var(--charcoal); font-weight: 600; }

/* Servicios list inside modal */
.ev-add-servicio-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-family: 'Outfit', sans-serif; font-size: 11.5px; font-weight: 500; color: var(--gold); background: #fff; border: 1px dashed var(--gold-pale); border-radius: 999px; cursor: pointer; transition: all 0.15s; }
.ev-add-servicio-btn:hover { background: var(--gold-bg); border-color: var(--gold); border-style: solid; }
.ev-add-servicio-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ev-servicios-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ev-servicios-list:empty { display: none; }
.ev-servicio-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; gap: 10px; }
.ev-servicio-item.new { border-color: var(--gold-pale); background: var(--gold-bg); }
.ev-servicio-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ev-servicio-nombre { font-size: 13px; color: var(--charcoal); font-weight: 500; }
.ev-servicio-meta { font-size: 11px; color: var(--muted); }
.ev-servicio-precio { font-size: 12.5px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; text-align: right; }
.ev-servicio-precio.calc { color: var(--muted); font-style: italic; font-weight: 400; }
.ev-servicio-actions { display: flex; gap: 4px; }
.ev-servicio-action-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--charcoal-light); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.ev-servicio-action-btn svg { width: 13px; height: 13px; }
.ev-servicio-action-btn:hover { border-color: var(--gold); color: var(--gold); }
.ev-servicio-action-btn.delete:hover { border-color: #c44; color: #c44; }
.ev-servicios-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted); background: var(--cream); border: 1px dashed var(--border-light); border-radius: 10px; margin-bottom: 12px; }

/* Inline form to add/edit a servicio */
.ev-add-servicio-form { padding: 14px; background: #fffbf0; border: 1px solid var(--gold-pale); border-radius: 10px; margin-bottom: 12px; }
.ev-add-servicio-form[hidden] { display: none; }
.ev-add-servicio-form-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.ev-add-servicio-info { font-size: 11.5px; color: var(--muted); padding: 6px 10px; background: var(--cream); border-radius: 6px; margin-top: 8px; }
.ev-add-servicio-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ev-add-servicio-buttons .btn { flex: 0 0 auto; min-width: 110px; }

.ev-modificar-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); }

@media (max-width: 640px) {
    .ev-modificar-grid-2 { grid-template-columns: 1fr; }
    .ev-modificar-grid-3 { grid-template-columns: 1fr; }
    .modal-evento-modificar { padding: 22px 18px; }
}

/* Responsive */
@media (max-width: 900px) {
    .ev-detalle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ev-table-toolbar { flex-direction: column; align-items: stretch; }
    .ev-search-bar { max-width: 100%; }
    .ev-pagination { flex-direction: column; align-items: center; }
    .ev-table th { padding-right: 24px; }
    .modal-evento-detalle { padding: 22px 18px; }
}