/* ==========================================================================
   Festival Coral de Medellín — Hoja de estilos compartida del panel
   administrativo (gestion.corpoensamble.org). Centraliza los tokens de
   marca y los componentes que hoy se duplican en cada página HTML.
   ========================================================================== */

:root {
  /* Paleta de marca (ya en uso en todas las páginas) */
  --festival-primary: #8B1A2B;
  --festival-gold: #C9A84C;
  --festival-dark: #1a1a2e;
  --festival-light: #F8F6F0;
  --festival-ink: #23313c;
  --festival-muted: #6c757d;

  /* Escala de radios y sombras (lenguaje visual moderno) */
  --festival-radius-sm: 8px;
  --festival-radius-md: 16px;
  --festival-radius-lg: 20px;
  --festival-radius-xl: 24px;
  --festival-radius-pill: 999px;

  --festival-shadow-sm: 0 4px 12px rgba(26, 26, 46, 0.06);
  --festival-shadow-md: 0 12px 28px rgba(26, 26, 46, 0.1);
  --festival-shadow-lg: 0 24px 48px rgba(26, 26, 46, 0.16);

  --festival-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --festival-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --festival-transition-fast: 0.2s var(--festival-ease-out);
  --festival-transition-smooth: 0.4s var(--festival-ease-out);
}

/* --------------------------------------------------------------------
   Bootstrap 5.3: remapear variables para que los componentes nativos
   (botones, badges, formularios) hereden la marca sin tocar cada página.
   Bootstrap 5.3 lee variables por-componente, así que --bs-primary por sí
   solo NO repinta .btn-primary — hace falta el bloque .btn-primary abajo.
   -------------------------------------------------------------------- */
:root {
  --bs-primary: var(--festival-primary);
  --bs-primary-rgb: 139, 26, 43;
  --bs-link-color: var(--festival-primary);
  --bs-link-hover-color: #6d1422;
  --bs-border-radius: var(--festival-radius-sm);
  --bs-border-radius-lg: var(--festival-radius-md);
  --bs-border-radius-pill: var(--festival-radius-pill);
  --bs-focus-ring-color: rgba(139, 26, 43, 0.25);
  --bs-body-font-family: 'Open Sans', sans-serif;
}

.btn-primary {
  --bs-btn-bg: var(--festival-primary);
  --bs-btn-border-color: var(--festival-primary);
  --bs-btn-hover-bg: #6d1422;
  --bs-btn-hover-border-color: #6d1422;
  --bs-btn-active-bg: #5a1019;
  --bs-btn-active-border-color: #5a1019;
  --bs-btn-focus-shadow-rgb: 139, 26, 43;
  border-radius: var(--festival-radius-pill);
}

.badge.bg-primary { background-color: var(--festival-primary) !important; }

.form-control:focus,
.form-select:focus {
  border-color: var(--festival-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* --------------------------------------------------------------------
   Accesibilidad: foco visible consistente con la marca.
   -------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--festival-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------
   Navbar — vidrio + sticky. Selector combinado para no depender de que
   cada página use exactamente la misma clase.
   -------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 5px solid var(--festival-primary);
  box-shadow: var(--festival-shadow-sm);
  transition: box-shadow var(--festival-transition-fast);
}

.navbar-brand span {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--festival-dark);
}

/* --------------------------------------------------------------------
   Encabezado de página — cubre .page-header (admin) y las variantes
   públicas .form-header / .profile-header / .directory-header, que hoy
   son la misma regla con nombre distinto por página.
   -------------------------------------------------------------------- */
.page-header,
.form-header,
.profile-header,
.directory-header {
  background: linear-gradient(135deg, var(--festival-dark) 0%, var(--festival-primary) 70%, var(--festival-gold) 100%);
  color: #fff;
  padding: 2rem 0;
  border-radius: 0 0 var(--festival-radius-xl) var(--festival-radius-xl);
  margin-bottom: 2rem;
  box-shadow: var(--festival-shadow-md);
}

.page-header h1, .page-header h2,
.form-header h1, .form-header h2,
.profile-header h1, .profile-header h2,
.directory-header h1, .directory-header h2 {
  font-family: 'Playfair Display', serif;
}

/* --------------------------------------------------------------------
   Tarjetas contenedoras de tabla — cubre .table-container y la variante
   .table-shell (cronograma.html).
   -------------------------------------------------------------------- */
.table-container,
.table-shell {
  background: #fff;
  border-radius: var(--festival-radius-md);
  box-shadow: var(--festival-shadow-md);
  overflow: hidden;
  transition: box-shadow var(--festival-transition-fast);
}

.table thead {
  background: var(--festival-dark);
  color: #fff;
}

/* --------------------------------------------------------------------
   Botones de marca — .btn-festival (mayoría de páginas), .btn-gold
   (acento secundario), .btn-submit (registro_espectador.html).
   -------------------------------------------------------------------- */
.btn-festival,
.btn-gold,
.btn-submit {
  border: none;
  border-radius: var(--festival-radius-pill);
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  transition: transform var(--festival-transition-fast), box-shadow var(--festival-transition-fast), background-color var(--festival-transition-fast);
}

.btn-festival,
.btn-submit {
  background: var(--festival-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(139, 26, 43, 0.25);
}

.btn-festival:hover,
.btn-submit:hover {
  background: #6d1422;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(139, 26, 43, 0.35);
}

.btn-gold {
  background: var(--festival-gold);
  color: var(--festival-dark);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.25);
}

.btn-gold:hover {
  background: #b8963f;
  color: var(--festival-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(201, 168, 76, 0.35);
}

.btn-festival:disabled, .btn-gold:disabled, .btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------
   Tarjetas de resumen (stat tiles).
   -------------------------------------------------------------------- */
.summary-card {
  background: #fff;
  border-radius: var(--festival-radius-md);
  box-shadow: var(--festival-shadow-sm);
  padding: 1.25rem;
  height: 100%;
  transition: transform var(--festival-transition-fast), box-shadow var(--festival-transition-fast);
}

.summary-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--festival-shadow-md);
}

.summary-card .value {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--festival-primary);
}

.summary-card .label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--festival-muted);
}

/* --------------------------------------------------------------------
   Reconciliación ligera de Quill (solo comunicaciones.html). Ajusta
   únicamente el borde/radio/fondo del wrapper visible — no toca los
   íconos SVG internos ni los popups (.ql-tooltip, .ql-picker-options)
   para no interferir con el posicionamiento propio de Quill.
   -------------------------------------------------------------------- */
.ql-toolbar.ql-snow {
  border-color: #E2E8F0;
  border-radius: var(--festival-radius-sm) var(--festival-radius-sm) 0 0;
  background: var(--festival-light);
}

.ql-container.ql-snow {
  border-color: #E2E8F0;
  border-radius: 0 0 var(--festival-radius-sm) var(--festival-radius-sm);
  font-family: 'Open Sans', sans-serif;
}

/* --------------------------------------------------------------------
   Movimiento reducido.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}