/* Tema del panel · XV años de Helen
 * Valores por defecto = paleta de la invitación (azul marino, dorado y beige). js/theme.js los reemplaza
 * con los colores elegidos en Ajustes → Apariencia y deriva los tonos oscuros y suaves. */
:root {
  --xv-primary: #24407a;
  --xv-primary-rgb: 36, 64, 122;
  --xv-primary-dark: #1c3260;
  --xv-primary-soft: #e4e8ef;
  --xv-gold: #c5a46d;
  --xv-bg: #f6f1e8;
  --xv-surface-alt: #ebe7e2;

  --bs-primary: var(--xv-primary);
  --bs-primary-rgb: var(--xv-primary-rgb);
  --bs-link-color: var(--xv-primary);
  --bs-link-color-rgb: var(--xv-primary-rgb);
  --bs-link-hover-color: var(--xv-primary-dark);
  --bs-body-bg: var(--xv-bg);
  --bs-border-radius: .6rem;
}

body { min-height: 100vh; }
[x-cloak] { display: none !important; }
/* x-show oculta con style="display: none"; las utilidades de Bootstrap (.d-flex,
   .navbar-collapse…) usan !important y lo anularían. Selector repetido para
   igualar su especificidad; al cargarse después de Bootstrap, gana. */
[style*="display: none"][style*="display: none"] { display: none !important; }

/* Botones y controles con el color del evento */
.btn-primary {
  --bs-btn-bg: var(--xv-primary);
  --bs-btn-border-color: var(--xv-primary);
  --bs-btn-hover-bg: var(--xv-primary-dark);
  --bs-btn-hover-border-color: var(--xv-primary-dark);
  --bs-btn-active-bg: var(--xv-primary-dark);
  --bs-btn-active-border-color: var(--xv-primary-dark);
  --bs-btn-disabled-bg: var(--xv-primary);
  --bs-btn-disabled-border-color: var(--xv-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--xv-primary);
  --bs-btn-border-color: var(--xv-primary);
  --bs-btn-hover-bg: var(--xv-primary);
  --bs-btn-hover-border-color: var(--xv-primary);
  --bs-btn-active-bg: var(--xv-primary);
  --bs-btn-active-border-color: var(--xv-primary);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--xv-primary-rgb), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--xv-primary-rgb), .15);
}
.form-check-input:checked { background-color: var(--xv-primary); border-color: var(--xv-primary); }
.nav-pills .nav-link.active { background-color: var(--xv-primary); }
.nav-tabs .nav-link.active { color: var(--xv-primary); font-weight: 600; }
.page-link { color: var(--xv-primary); }
.active > .page-link { background-color: var(--xv-primary); border-color: var(--xv-primary); }
.text-primary { color: var(--xv-primary) !important; }
.bg-primary { background-color: var(--xv-primary) !important; }

/* Barra superior */
.app-navbar { background: var(--xv-primary); }
.app-navbar .navbar-brand { font-weight: 700; letter-spacing: .02em; }
.app-navbar .navbar-brand .bi { color: var(--xv-gold); }
.app-navbar .nav-link { color: rgba(255, 255, 255, .85); }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color: #fff; }
.app-navbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -3px 0 var(--xv-gold); }

/* Contenido */
.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; color: var(--xv-primary); font-weight: 700; }
.card { border: 0; box-shadow: 0 2px 12px rgba(var(--xv-primary-rgb), .07); }
.card-header { background: #fff; font-weight: 600; }

.kpi { padding: 1rem 1.1rem; }
.kpi .kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.kpi .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-icon { font-size: 1.6rem; opacity: .35; }

.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; white-space: nowrap; }
.table td { vertical-align: middle; }
/* Contiene elementos .visually-hidden (position:absolute) para que no ensanchen la página. */
.table-responsive { position: relative; }
.table-hover tbody tr { cursor: default; }

.badge-status { font-weight: 600; }
.badge-pending { background: #fff3cd; color: #7a5b00; }
.badge-confirmed { background: #d1e7dd; color: #0f5132; }
.badge-declined { background: #e9ecef; color: #495057; }

.empty-state { padding: 3rem 1rem; text-align: center; color: #6c757d; }
.empty-state .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* Login */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { max-width: 400px; width: 100%; border-top: 4px solid var(--xv-primary); }
.login-card .brand { color: var(--xv-primary); font-weight: 700; }

/* Notificaciones */
.toast-container { z-index: 1090; }

/* Editor de la base de conocimientos */
#kb-editor { background: #fff; border-radius: var(--bs-border-radius); }
.toastui-editor-defaultUI { border-radius: var(--bs-border-radius); }
.version-item.active { background: var(--xv-primary-soft); }

@media (max-width: 575.98px) {
  .page-header h1 { font-size: 1.25rem; }
  .kpi .kpi-value { font-size: 1.6rem; }
}

/* Conversaciones */
.conv-list { max-height: 70vh; overflow-y: auto; }
.list-group-item.active-conv { background: var(--xv-primary-soft); }
.chat-body { height: 70vh; overflow-y: auto; padding: 1rem; background: var(--xv-surface-alt); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); }
.bubble { max-width: 80%; padding: .5rem .75rem; border-radius: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bubble-in { background: #fff; border-top-left-radius: .2rem; }
.bubble-out { background: var(--xv-primary-soft); border-top-right-radius: .2rem; }
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-meta { font-size: .72rem; color: #6c757d; text-align: right; margin-top: .15rem; }
.bubble-error { font-size: .75rem; color: #b02a37; margin-top: .25rem; }
.bubble-llm { font-size: .75rem; color: var(--xv-primary); margin-top: .3rem; border-top: 1px dashed rgba(var(--xv-primary-rgb), .25); padding-top: .25rem; }
@media (max-width: 991.98px) { .chat-body { height: 65vh; } .conv-list { max-height: none; } }

/* Campañas: imagen y vista previa estilo WhatsApp */
.campaign-image { max-height: 320px; }
.cursor-pointer { cursor: pointer; }
.wa-preview { background: #efeae2; border-radius: .75rem; padding: 1rem; max-width: 380px; }
.wa-preview-bubble { max-width: 100%; }
.wa-preview-bubble img { width: 100%; height: auto; }
.wa-preview-button { background: #fff; border-radius: .6rem; margin-top: .3rem; padding: .45rem; text-align: center;
  color: #00a5f4; font-size: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Apariencia (Ajustes) */
.theme-swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; }
.theme-preset { text-align: left; }
.theme-preset.theme-preset-selected { background: #fff; color: var(--bs-body-color); border-color: var(--xv-primary); box-shadow: 0 0 0 .15rem rgba(var(--xv-primary-rgb), .3); font-weight: 600; }
.form-control-color { width: 3rem; padding: .25rem; }

/* Control de acceso (celular) */
.checkin-page { max-width: 560px; }
.qr-reader { width: 100%; max-width: 360px; border-radius: var(--bs-border-radius); overflow: hidden; }
.qr-reader video { width: 100% !important; border-radius: var(--bs-border-radius); }
.people-stepper input { font-size: 1.6rem; font-weight: 700; }
.checkin-page .progress { --bs-progress-bar-bg: var(--xv-primary); }
.seating-box { background: var(--xv-primary-soft); border-radius: var(--bs-border-radius); padding: .6rem .75rem; }
.seating-box-lg { font-size: 1.15rem; }