/* ==========================================================================
   TechCool BL — Design System
   Línea gráfica oficial de marca. Fuente de verdad de color/tipografía.
   Se carga DESPUÉS de argon-dashboard.css para sobreescribir sus tokens
   (Bootstrap 5 expone casi todos sus componentes como custom properties
   con scope local, --bs-btn-bg, --bs-card-bg, etc. así que redefinirlas
   aquí re-skinea el dashboard entero sin tocar cada plantilla).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens de marca
   -------------------------------------------------------------------------- */
:root {
  /* Paleta de marca (valores exactos de la guía TechCool BL) */
  --color-primary: #1A2B3C;        /* Deep Sapphire Blue */
  --color-primary-rgb: 26, 43, 60;
  --color-primary-dark: #101B26;
  --color-primary-light: #2E4459;

  --color-secondary: #C0C8D1;      /* Ice Grey */
  --color-secondary-rgb: 192, 200, 209;
  --color-secondary-dark: #A2ADBC;
  --color-secondary-tint: #F4F6F8;

  --color-surface: #FFFFFF;        /* Pure White */
  --color-surface-rgb: 255, 255, 255;

  --color-accent: #E3C096;         /* Champagne Gold — SOLO acentos puntuales */
  --color-accent-rgb: 227, 192, 150;
  /* #C9A15F original solo cumple AA sobre fondos oscuros (~6.8:1); como
     texto/ícono sobre superficies claras (a:hover, theme-toggle, check de
     Select2) apenas llega a 2.4:1. Se oscurece aquí para el caso claro y
     se restaura el tono original dentro del bloque de modo oscuro. */
  --color-accent-dark: #957032;
  --color-accent-contrast: #1A2B3C;

  /* Fondo de página vs. superficie de tarjeta */
  --color-bg: var(--color-secondary-tint);

  /* Texto */
  --color-text: var(--color-primary);
  --color-text-muted: #5C6B79;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent: var(--color-accent-contrast);
  /* Color de enlaces — separado de --color-primary porque en modo oscuro
     necesita un tono más claro para cumplir contraste (ver bloque oscuro). */
  --color-link: var(--color-primary);

  /* Bordes */
  --color-border: var(--color-secondary);
  --color-border-soft: #E3E8ED;

  /* Semánticos — desaturados para no competir con la paleta de marca.
     Se usan tal cual como fondo de badges/alerts/botones (con texto blanco
     encima); --color-*-text son variantes ajustadas específicamente para
     cuando el color se usa como texto plano sobre la superficie (ej. las
     utilidades .text-success/.text-danger/etc. de Bootstrap). */
  --color-success: #3F8F6B;
  --color-warning: #D9A441;
  --color-danger: #C0524A;
  --color-info: #5C7A99;
  --color-success-text: #3A8463;
  --color-warning-text: #966C1E;
  --color-danger-text: var(--color-danger);
  --color-info-text: #5A7796;

  /* Tipografía */
  --font-heading: 'Plus Jakarta Sans', 'Open Sans', -apple-system, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radios — formas suaves, sin esquinas duras */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 50rem;

  /* Sombras — deliberadamente livianas, nada de "heavy shadows" */
  --shadow-sm: 0 1px 2px rgba(var(--color-primary-rgb), 0.06);
  --shadow-md: 0 4px 16px rgba(var(--color-primary-rgb), 0.08);
  --shadow-lg: 0 8px 28px rgba(var(--color-primary-rgb), 0.10);
  --shadow-gold: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);

  --transition-base: all 0.2s ease;

  /* Alinea las variables globales de Bootstrap/Argon (--bs-*) con la marca,
     para que componentes que las consumen directamente (SweetAlert2 toasts
     vía .swal-success-toast/.swal-error-toast/etc., focus rings, utilidades
     text-bg-*) hereden la paleta sin tener que tocar cada plantilla. */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary-dark);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-success: var(--color-success);
  --bs-success-rgb: 63, 143, 107;
  --bs-info: var(--color-info);
  --bs-info-rgb: 92, 122, 153;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 164, 65;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 192, 82, 74;
  --bs-dark: var(--color-primary);
  --bs-dark-rgb: var(--color-primary-rgb);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
}

/* --------------------------------------------------------------------------
   2. Modo oscuro
   Explícito vía [data-theme="dark"] (toggle) y automático vía
   prefers-color-scheme cuando el usuario no eligió nada manualmente.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg: #0E1620;
  --color-surface: #16212C;
  --color-surface-rgb: 22, 33, 44;
  --color-secondary-tint: #1B2733;
  --color-secondary-dark: #2A3947;

  --color-primary: #3E5872;        /* sapphire aclarado: visible sobre fondo oscuro */
  --color-primary-dark: #2E4459;
  --color-primary-light: #547093;

  --color-text: #E9EDF1;
  --color-text-muted: #A2ADBC;     /* reutiliza Ice Grey como texto secundario */
  --color-text-on-primary: #FFFFFF;
  /* --color-primary aclarado (#3E5872) da solo ~2.2-2.5:1 contra fondos
     oscuros — insuficiente para texto de enlaces; se usa un tono más claro
     dedicado solo a --color-link. */
  --color-link: #698BAD;
  /* El dorado oscurecido de modo claro (#957032) pierde contraste sobre
     fondos oscuros (~3.6:1); el tono original (#C9A15F) ya cumple AA aquí. */
  --color-accent-dark: #C9A15F;

  --color-border: rgba(192, 200, 209, 0.16);
  --color-border-soft: rgba(192, 200, 209, 0.10);

  /* Semánticos atenuados — en modo oscuro los tonos "de día" resultan
     demasiado saturados/contrastados contra el fondo casi negro */
  --color-success: #2F6B4F;
  --color-warning: #B8863A;
  --color-danger: #A34840;
  --color-info: #4C6883;
  /* Como texto plano sobre superficie oscura estos mismos tonos no llegan
     a AA (2.6-2.8:1); variantes aclaradas solo para ese uso. */
  --color-success-text: #42966E;
  --color-warning-text: var(--color-warning);
  --color-danger-text: #C5726B;
  --color-info-text: #6C8CAA;
  --bs-success: var(--color-success);
  --bs-success-rgb: 47, 107, 79;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 184, 134, 58;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 163, 72, 64;
  --bs-info: var(--color-info);
  --bs-info-rgb: 76, 104, 131;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #0E1620;
    --color-surface: #16212C;
    --color-surface-rgb: 22, 33, 44;
    --color-secondary-tint: #1B2733;
    --color-secondary-dark: #2A3947;

    --color-primary: #3E5872;
    --color-primary-dark: #2E4459;
    --color-primary-light: #547093;

    --color-text: #E9EDF1;
    --color-text-muted: #A2ADBC;
    --color-link: #698BAD;
    --color-accent-dark: #C9A15F;

    --color-border: rgba(192, 200, 209, 0.16);
    --color-border-soft: rgba(192, 200, 209, 0.10);

    --color-success: #2F6B4F;
    --color-warning: #B8863A;
    --color-danger: #A34840;
    --color-info: #4C6883;
    --color-success-text: #42966E;
    --color-warning-text: var(--color-warning);
    --color-danger-text: #C5726B;
    --color-info-text: #6C8CAA;
    --bs-success: var(--color-success);
    --bs-success-rgb: 47, 107, 79;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 184, 134, 58;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 163, 72, 64;
    --bs-info: var(--color-info);
    --bs-info-rgb: 76, 104, 131;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.40);
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6,
.font-weight-bolder,
.card-title,
.navbar-brand {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--color-text);
}

a {
  color: var(--color-link);
  transition: var(--transition-base);
}
a:hover {
  color: var(--color-accent-dark);
}

::selection {
  background: rgba(var(--color-accent-rgb), 0.35);
  color: var(--color-primary);
}

/* Scrollbar fino, discreto — coherente con "líneas finas, sin nada pesado" */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary-dark) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background-color: var(--color-secondary-dark);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   4. Botones — primario / secundario / acento
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  box-shadow: none !important;
  transition: var(--transition-base);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--shadow-gold) !important; }

.btn-primary,
.btn-tc {
  --bs-btn-color: var(--color-text-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-on-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-color: var(--color-text-on-primary);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  border-width: 1px;
}
.btn-tc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
}
.btn-primary:hover, .btn-tc:hover { color: var(--color-text-on-primary) !important; }

/* Secundario ("Cancelar", etc.) — borde marcado en vez de relleno claro,
   para que sea visible sobre cualquier superficie (clara u oscura) */
/* Nota: Argon trae ".btn:not([class*=\"btn-outline-\"]) { border: 0; }"
   con más especificidad que ".btn-secondary" sola — anula ancho y estilo
   del borde aunque el color gane por !important. Por eso acá se fuerzan
   ambos explícitamente. */
.btn-secondary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-primary);
  /* Tono distinto al primario en hover/active, para que "Cancelar" no
     se confunda con "Guardar" (modo claro únicamente). */
  --bs-btn-hover-color: var(--color-text-on-primary);
  --bs-btn-hover-bg: #5E7387;
  --bs-btn-hover-border-color: #5E7387;
  --bs-btn-active-color: var(--color-text-on-primary);
  --bs-btn-active-bg: #5E7387;
  --bs-btn-active-border-color: #5E7387;
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
}
/* El !important sobre background-color/border-color de arriba también
   ganaba en :hover (no solo en reposo), dejando el fondo transparente
   fijo mientras el texto pasaba a blanco — texto blanco invisible sobre
   fondo transparente. Se fuerza también el fondo/borde en :hover. */
.btn-secondary:hover {
  color: var(--color-text-on-primary) !important;
  background-color: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
}

:root[data-theme="dark"] .btn-secondary {
  --bs-btn-color: var(--color-text);
  --bs-btn-border-color: var(--color-secondary-dark);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-secondary-dark);
  --bs-btn-hover-border-color: var(--color-secondary-dark);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-secondary-dark);
}
:root[data-theme="dark"] .btn-secondary:hover { color: var(--color-primary) !important; }

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--color-text-muted);
  --bs-btn-border-color: var(--color-secondary-dark);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-secondary-tint);
  --bs-btn-hover-border-color: var(--color-secondary-dark);
}

/* Acento dorado — reservado a CTAs puntuales, no botonera general */
.btn-accent,
.btn-gold {
  --bs-btn-color: var(--color-text-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-text-on-accent);
  --bs-btn-hover-bg: var(--color-accent-dark);
  --bs-btn-hover-border-color: var(--color-accent-dark);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

/* Reskin de contextuales Bootstrap/Argon usadas en CRUDs existentes,
   para que todo el sistema quede visualmente unificado sin renombrar
   clases en cada plantilla. */
.btn-dark {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
}
.btn-info {
  --bs-btn-color: var(--color-text-on-primary);
  --bs-btn-bg: var(--color-info);
  --bs-btn-border-color: var(--color-info);
  --bs-btn-hover-color: var(--color-text-on-primary);
}
.btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); }
.btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); }
.btn-danger  { --bs-btn-bg: var(--color-danger);  --bs-btn-border-color: var(--color-danger); }

/* --------------------------------------------------------------------------
   5. Tarjetas
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border-soft);
  --bs-card-border-width: 1px;
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-lg);
  --bs-card-box-shadow: var(--shadow-sm);
  border: 1px solid var(--bs-card-border-color);
  box-shadow: var(--bs-card-box-shadow);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border-soft);
}

.card-footer {
  background-color: var(--color-secondary-tint);
  border-top: 1px solid var(--color-border-soft);
}

/* Detalle premium: filete dorado fino en tarjetas "primarias" */
.card-primary {
  position: relative;
  border-top: 2px solid var(--color-accent);
}

.card-hover { transition: var(--transition-base); }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary-dark);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.875rem;
  transition: var(--transition-base);
  height: 100%;
}
.feature-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 4rem;
  height: 4rem;
  background: var(--color-secondary-tint);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  transition: var(--transition-base);
}
.feature-card:hover .feature-icon {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* --------------------------------------------------------------------------
   6. Navbar (topbar) y Sidebar (sidenav)
   -------------------------------------------------------------------------- */
.navbar-main {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border-soft);
}
.navbar-main .breadcrumb-item a,
.navbar-main .breadcrumb-item.active {
  color: var(--color-text);
}
.navbar-main .nav-link i,
.navbar-main .text-dark { color: var(--color-primary) !important; }

/* Sidebar — sapphire de marca, con acento dorado en el ítem activo */
.sidenav.bg-sapphire,
.sidenav.bg-info {
  background-color: var(--color-primary) !important;
}
.sidenav .navbar-brand span { color: var(--color-text-on-primary) !important; }
.sidenav hr.horizontal.dark { border-color: rgba(255, 255, 255, 0.12); opacity: 1; }

.sidenav .nav-link {
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.72) !important;
  transition: var(--transition-base);
}
.sidenav .nav-link .nav-link-text,
.sidenav .nav-link span { color: inherit; }
.sidenav .nav-link:hover {
  background: rgba(var(--color-accent-rgb), 0.10);
  color: #fff !important;
}
.sidenav .nav-link.active {
  background: rgba(var(--color-accent-rgb), 0.14);
  border-left-color: var(--color-accent);
  color: #fff !important;
}
.sidenav .nav-link.active i,
.sidenav .nav-link.active .icon i {
  color: var(--color-accent) !important;
  opacity: 1 !important;
}
.sidenav .nav-link .icon.icon-shape {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}

/* Botón hamburguesa / toggler líneas finas */
.sidenav-toggler-line { background-color: var(--color-primary); }
.navbar-main .sidenav-toggler-line { background-color: var(--color-primary); }

/* Argon deja 1.5rem de separación entre el sidenav y el main-content
   (margin-left mayor al ancho real del sidenav), lo que se ve como un
   "corte" entre la barra lateral y la barra superior. La pegamos. */
@media (min-width: 1200px) {
  .sidenav.fixed-start + .main-content {
    margin-left: 15.625rem;
  }
  .g-sidenav-hidden .navbar-vertical.fixed-start + .main-content {
    margin-left: 6rem;
  }
}

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */
.form-label,
label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-control,
.form-select {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0.6rem 0.9rem;
  transition: var(--transition-base);
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-gold);
  background-color: var(--color-surface);
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-danger);
}

.input-group-text {
  background-color: var(--color-secondary-tint);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.input-group-merge .input-group-text { border-right: 0; }
.input-group-merge .form-control { border-left: 0; }

.form-check-input {
  border-color: var(--color-secondary-dark);
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-switch .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   8. Badges
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 0.35em 0.75em;
}
.badge.bg-primary { background-color: var(--color-primary) !important; }
.badge.bg-secondary {
  background-color: var(--color-secondary-tint) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border);
}
.badge.bg-info { background-color: var(--color-info) !important; }
.badge.bg-success { background-color: var(--color-success) !important; }
.badge.bg-warning { background-color: var(--color-warning) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--color-danger) !important; }

/* Badge dorado — uso puntual (destacados, "premium", "nuevo") */
.badge-accent,
.badge-gold {
  background-color: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
}

/* Utilidades .text-success/.text-warning/.text-danger/.text-info de
   Bootstrap/Argon nunca se re-temaron: usaban los verdes/rojos/celestes
   saturados originales, ajenos a la marca y varios por debajo de AA sobre
   blanco (ej. .text-success ~2:1). Se atan a los tokens de marca. */
.text-success { color: var(--color-success-text) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-danger  { color: var(--color-danger-text) !important; }
.text-info    { color: var(--color-info-text) !important; }

/* --------------------------------------------------------------------------
   9. Tablas
   -------------------------------------------------------------------------- */
.table thead th {
  background-color: var(--color-secondary-tint);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}
.table td, .table th {
  border-color: var(--color-border-soft);
  vertical-align: middle;
}
.table tbody tr:hover {
  background-color: rgba(var(--color-primary-rgb), 0.03);
}

/* --------------------------------------------------------------------------
   10. Modales
   -------------------------------------------------------------------------- */
.modal-content {
  --bs-modal-bg: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.modal-header {
  border-bottom: 1px solid var(--color-border-soft);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.modal-footer {
  background-color: var(--color-secondary-tint);
  border-top: 1px solid var(--color-border-soft);
}

/* --------------------------------------------------------------------------
   11. Overlay de fotografía (hero / carrusel) — oscuro semitransparente
        + texto blanco encima, sin gradientes llamativos
   -------------------------------------------------------------------------- */
.photo-overlay {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.photo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.25) 0%, rgba(var(--color-primary-rgb), 0.78) 100%);
  z-index: 1;
}
.photo-overlay > * { position: relative; z-index: 2; }

.carousel-item.photo-overlay .carousel-caption,
.photo-overlay .carousel-caption { color: #fff; }

/* --------------------------------------------------------------------------
   12. Iconografía fine-line (Tabler Icons)
   -------------------------------------------------------------------------- */
.ti {
  vertical-align: -0.125em;
  line-height: 1;
}
.icon-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   13. Toggle de modo oscuro
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-base);
}
.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.theme-toggle .ti-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-moon { display: inline-block; }

/* --------------------------------------------------------------------------
   14. Superficies oscuras — asegurar contraste de componentes Argon
        que usan fondos fijos en el HTML compilado
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] body.bg-gray-100 { background-color: var(--color-bg) !important; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface) !important;
  color: var(--color-text);
}
:root[data-theme="dark"] .table { color: var(--color-text); }
:root[data-theme="dark"] .table thead th { background-color: var(--color-secondary-tint); }
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .bg-gradient-faded-light {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border-soft);
}
:root[data-theme="dark"] .text-dark { color: var(--color-text) !important; }
:root[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
:root[data-theme="dark"] .breadcrumb-item a,
:root[data-theme="dark"] .navbar-main .text-dark { color: var(--color-text) !important; }
:root[data-theme="dark"] hr.horizontal.dark { border-color: var(--color-border); }

/* --------------------------------------------------------------------------
   15. Responsive (mobile-first)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .btn-tc { width: 100%; justify-content: center; }
  .card-body { padding: 1rem; }
  .feature-card { padding: 1.75rem 1.25rem; }
}

@media (max-width: 991.98px) {
  .hero { padding-top: 6rem; padding-bottom: 3rem; }
}

/* --------------------------------------------------------------------------
   16. Iconos de estado (stat cards) — planos, sin gradientes llamativos
   -------------------------------------------------------------------------- */
.bg-gradient-primary   { background-image: none !important; background-color: var(--color-primary) !important; }
.bg-gradient-secondary { background-image: none !important; background-color: var(--color-secondary-dark) !important; }
.bg-gradient-success   { background-image: none !important; background-color: var(--color-success) !important; }
.bg-gradient-info      { background-image: none !important; background-color: var(--color-info) !important; }
.bg-gradient-warning   { background-image: none !important; background-color: var(--color-warning) !important; }
.bg-gradient-danger    { background-image: none !important; background-color: var(--color-danger) !important; }
.bg-gradient-dark      { background-image: none !important; background-color: var(--color-primary-dark) !important; }
.bg-gradient-faded-light,
.bg-gradient-faded-primary,
.bg-gradient-faded-secondary {
  background-image: none !important;
  background-color: var(--color-secondary-tint) !important;
}

.icon-shape {
  border: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.icon-shape.bg-white,
.icon-shape.bg-gradient-light {
  border-color: var(--color-border-soft);
}
.icon-shape i {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   17. Alertas (Bootstrap .alert — usadas en login/registro/formularios)
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  background-image: none !important;
}
.alert-danger  { background-color: var(--color-danger);  border-color: var(--color-danger); }
.alert-success { background-color: var(--color-success); border-color: var(--color-success); }
.alert-warning { background-color: var(--color-warning); border-color: var(--color-warning); }
.alert-info    { background-color: var(--color-info);    border-color: var(--color-info); }
.alert-light   { background-color: var(--color-secondary-tint); border-color: var(--color-border); color: var(--color-text); }
.alert-dark    { background-color: var(--color-primary); border-color: var(--color-primary); }

/* --------------------------------------------------------------------------
   18. Dropdowns
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--color-surface);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--color-secondary-tint);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-secondary-tint);
  color: var(--color-primary);
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-secondary-tint);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   19. Avatar
   -------------------------------------------------------------------------- */
.avatar {
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border-soft);
}
.avatar-group .avatar { box-shadow: 0 0 0 2px var(--color-surface); }

/* --------------------------------------------------------------------------
   20. Estado vacío (empty state) — patrón reutilizable
   -------------------------------------------------------------------------- */
.tc-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--color-text-muted);
}
.tc-empty-state i {
  font-size: 2.25rem;
  color: var(--color-secondary-dark);
  margin-bottom: 0.75rem;
  display: block;
}
.tc-empty-state p { margin: 0; }

/* --------------------------------------------------------------------------
   21. Paginación (estructura real de shared_template/paginator.html)
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.pagination .step-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pagination .step-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition-base);
}
.pagination .step-links a:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.pagination .step-links .current {
  margin: 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
/* En móvil los botones "Primera/Anterior/Siguiente/Última" muestran solo el
   ícono (el texto se oculta vía d-none d-sm-inline en paginator.html) —
   se ajusta el padding para que no queden más anchos de lo necesario. */
@media (max-width: 575.98px) {
  .pagination .step-links a {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.55rem;
  }
}

/* Pagination Bootstrap estándar, por si se usa en desarrollos futuros */
.page-link {
  color: var(--color-primary);
  border-color: var(--color-border);
}
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.page-link:hover {
  background-color: var(--color-secondary-tint);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   22. Calendario (patrón custom usado en client_template/calendar/view.html)
   -------------------------------------------------------------------------- */
.tc-calendar-container { max-width: 100%; }
.tc-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}
.tc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.tc-calendar-grid .day-name {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  padding-bottom: 0.25rem;
}
.tc-calendar-grid .day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-tint);
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-base);
}
.tc-calendar-grid .day:hover { background: var(--color-primary); color: #fff; }
.tc-calendar-grid .day.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--color-accent);
}
.tc-calendar-grid .day.today { border: 1px solid var(--color-accent); }
.tc-calendar-grid .day.disabled {
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}

.tc-time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.tc-time-slots .slot {
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-base);
}
.tc-time-slots .slot:hover { border-color: var(--color-primary); }
.tc-time-slots .slot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.tc-time-slots .slot.disabled {
  background: var(--color-secondary-tint);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

/* FullCalendar (personcalendar/view.html) — variables nativas de fc v6 */
.fc {
  --fc-border-color: var(--color-border-soft);
  --fc-button-bg-color: var(--color-primary);
  --fc-button-border-color: var(--color-primary);
  --fc-button-hover-bg-color: var(--color-primary-dark);
  --fc-button-hover-border-color: var(--color-primary-dark);
  --fc-button-active-bg-color: var(--color-primary-dark);
  --fc-today-bg-color: rgba(var(--color-accent-rgb), 0.14);
  --fc-neutral-bg-color: var(--color-secondary-tint);
  --fc-page-bg-color: var(--color-surface);
  --fc-event-bg-color: var(--color-primary);
  --fc-event-border-color: var(--color-primary);
  --fc-list-event-hover-bg-color: var(--color-secondary-tint);
  color: var(--color-text);
}
.fc .fc-toolbar-title { font-family: var(--font-heading); color: var(--color-primary); }
:root[data-theme="dark"] .fc .fc-toolbar-title { color: var(--color-text); }

/* --------------------------------------------------------------------------
   23. Wizard / Stepper (multi-step) — patrón nuevo para formularios largos
   -------------------------------------------------------------------------- */
.tc-wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.tc-wizard-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.tc-wizard-step:not(:first-child)::before,
.tc-wizard-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.tc-wizard-step:not(:first-child)::before { left: 0; right: 50%; }
.tc-wizard-step:not(:last-child)::after { left: 50%; right: 0; }
.tc-wizard-step.completed::before,
.tc-wizard-step.completed::after,
.tc-wizard-step.active::before {
  background: var(--color-accent);
}
.tc-wizard-circle {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  transition: var(--transition-base);
}
.tc-wizard-step.active .tc-wizard-circle {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.tc-wizard-step.completed .tc-wizard-circle {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.tc-wizard-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}
.tc-wizard-step.active .tc-wizard-label,
.tc-wizard-step.completed .tc-wizard-label { color: var(--color-primary); }
:root[data-theme="dark"] .tc-wizard-step.active .tc-wizard-label,
:root[data-theme="dark"] .tc-wizard-step.completed .tc-wizard-label { color: var(--color-text); }

.tc-wizard-panel { display: none; }
.tc-wizard-panel.active { display: block; }

/* --------------------------------------------------------------------------
   24. Select2 (usado en modales con búsqueda AJAX de personas)
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  min-height: calc(1.5em + 1.2rem) !important;
}
.select2-container--open .select2-dropdown {
  border-color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
}
:root[data-theme="dark"] .select2-container .select2-selection,
:root[data-theme="dark"] .select2-dropdown {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .select2-results__option,
:root[data-theme="dark"] .select2-selection__rendered {
  color: var(--color-text) !important;
}

/* --------------------------------------------------------------------------
   25. Dropify (input de archivo)
   -------------------------------------------------------------------------- */
.dropify-wrapper {
  border: 1px dashed var(--color-secondary-dark) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-secondary-tint) !important;
  color: var(--color-text-muted) !important;
}
.dropify-wrapper:hover { border-color: var(--color-accent) !important; }
.dropify-wrapper .dropify-preview { background-color: var(--color-surface) !important; }

/* --------------------------------------------------------------------------
   26. Select2 — dropdown personalizado (reemplaza el <select> nativo genérico)
   -------------------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  min-height: calc(1.5em + 1.2rem) !important;
  padding: 0.6rem 0.9rem !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-gold) !important;
}
.select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--color-text-muted) !important; }

.select2-dropdown {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  font-family: var(--font-body);
}
.select2-search--dropdown { padding: 0.6rem !important; }
.select2-search__field {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.45rem 0.7rem !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}
.select2-results__options { padding: 0.35rem; }
.select2-results__option {
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem !important;
  color: var(--color-text);
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
}
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: rgba(var(--color-accent-rgb), 0.16) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true]::after {
  content: "\2713";
  float: right;
  color: var(--color-accent-dark);
  font-weight: 700;
}
.select2-results__message { color: var(--color-text-muted); padding: 0.6rem 0.75rem; }

:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-search__field {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .select2-results__option { color: var(--color-text); }

/* Compatibilidad con la validación existente: baseform.html agrega
   .is-invalid al <select> original, que Select2 oculta — el estado de
   error se refleja igual en el widget visible mediante el selector
   de hermano adyacente (Select2 inserta su contenedor justo después). */
select.is-invalid + .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--color-danger) !important;
}

/* --------------------------------------------------------------------------
   27. Modal rediseñado — encabezado con ícono, cierre circular, pie con
        botones tipo pill
   -------------------------------------------------------------------------- */
.modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
}
.modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  flex: 1;
}
:root[data-theme="dark"] .modal-header .modal-title { color: var(--color-text); }
/* Modales con fondo oscuro explícito (.modal-content.text-white, p. ej. el
   capturador de cámara) deben conservar el título en blanco sin importar
   el tema activo — la regla anterior, más específica que .text-white
   heredado, lo dejaba casi invisible. */
.modal-content.text-white .modal-header .modal-title { color: #fff; }

.tc-modal-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
:root[data-theme="dark"] .tc-modal-icon { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }

.tc-modal-close,
.modal-header .btn-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary) !important;
  opacity: 1 !important;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 !important;
  transition: var(--transition-base);
}
.tc-modal-close:hover,
.modal-header .btn-close:hover { background: var(--color-primary-dark) !important; }
/* Neutraliza el ícono SVG por defecto de Bootstrap para usar nuestro ti-x */
.modal-header .btn-close { background-image: none !important; position: relative; }
.modal-header .btn-close::before {
  content: "\eb55"; /* ti-x */
  font-family: "tabler-icons" !important;
  font-size: 0.9rem;
  line-height: 1;
}

.modal-body { padding: 1.25rem; }
.modal-footer {
  padding: 1rem 1.25rem;
  gap: 0.6rem;
}
.modal-footer .btn,
.modal-body .card-footer .btn {
  border-radius: var(--radius-pill) !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* basemodal.html arma su propio pie de acciones (Guardar/Cancelar) como
   .card-footer DENTRO del .modal-body (con #ModalBaseFooter/.modal-footer
   oculto por defecto) — se le da el mismo tratamiento visual que un
   .modal-footer real: separación, fondo y espaciado, no solo los botones. */
.modal-body .card-footer {
  background-color: var(--color-secondary-tint);
  border-top: 1px solid var(--color-border-soft);
  margin: 1.25rem -1.25rem -1.25rem;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* Etiqueta de campo requerido */
.required-mark { color: var(--color-danger); margin-left: 0.15rem; }

/* --------------------------------------------------------------------------
   28. Encabezado de página (shared_template/basebody.html) — barra de
        acento + título + subtítulo opcional, fuera de cualquier tarjeta
   -------------------------------------------------------------------------- */
.tc-page-heading {
  position: relative;
  padding-left: 1rem;
}
.tc-page-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}
.tc-page-heading p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   29. Superficies de sección (reemplazan bg-light/bg-white hardcodeados
        en páginas públicas — landing, login — para que respondan al tema)
   -------------------------------------------------------------------------- */
.tc-section-alt { background-color: var(--color-secondary-tint); }
.tc-surface { background-color: var(--color-surface); }

/* --------------------------------------------------------------------------
   30. Tira "por qué elegirnos" / trust bar
   -------------------------------------------------------------------------- */
.tc-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.tc-trust-item .feature-icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.tc-trust-item h6 { margin-bottom: 0.15rem; }
.tc-trust-item p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   31. Lista de notificaciones (panel de inicio)
   -------------------------------------------------------------------------- */
.tc-notification-item {
  background-color: var(--color-secondary-tint);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--color-accent);
}
.tc-notification-item h6 {
  color: var(--color-text);
}
.tc-notification-item .text-xs {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   32. SweetAlert2 — usa sus propias clases (swal2-*), fuera del sistema
        de modales de Bootstrap; sin esto sus popups quedan blancos fijos
        sin importar el tema.
   -------------------------------------------------------------------------- */
.swal2-popup {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body);
  border-radius: var(--radius-lg) !important;
}
.swal2-title {
  color: var(--color-primary) !important;
  font-family: var(--font-heading);
}
:root[data-theme="dark"] .swal2-title { color: var(--color-text) !important; }
.swal2-html-container { color: var(--color-text) !important; }
.swal2-close { color: var(--color-text-muted) !important; }
.swal2-close:hover { color: var(--color-text) !important; }
.swal2-input,
.swal2-textarea,
.swal2-select {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
.swal2-styled.swal2-confirm {
  background-color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
}
.swal2-styled.swal2-cancel {
  background-color: var(--color-secondary-tint) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
}
.swal2-timer-progress-bar { background: var(--color-accent) !important; }

/* --------------------------------------------------------------------------
   33. Dropify — input de archivo con vista previa (reemplaza el <input
        type="file"> plano en formularios de baseform.html y register.html)
   -------------------------------------------------------------------------- */
.dropify-wrapper {
  height: 160px;
  background-color: var(--color-secondary-tint);
  background-image: none !important;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  animation: none !important;
  transition: var(--transition-base);
}
.dropify-wrapper:hover {
  border-color: var(--color-accent);
  background-image: none !important;
  animation: none !important;
}
.dropify-wrapper .dropify-message {
  font-family: var(--font-body);
}
/* Con vista previa, el mensaje "Arrastra un archivo..." queda solo si el
   navegador se detecta como touch (.touch-fallback); en desktop, sin este
   ajuste, el mensaje se superpone sobre la imagen todo el tiempo — se oculta
   siempre con preview, y el nombre del archivo aparece al pasar el mouse. */
.dropify-wrapper.has-preview .dropify-message { display: none; }
.dropify-wrapper .dropify-message .file-icon:before {
  color: var(--color-primary);
}
.dropify-wrapper .dropify-message p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.dropify-wrapper .dropify-preview {
  background-color: var(--color-surface);
}
.dropify-wrapper .dropify-infos {
  background-color: rgba(var(--color-primary-rgb), 0.85);
}
.dropify-wrapper .dropify-infos .dropify-infos-inner p.dropify-infos-message {
  color: var(--color-text-on-primary);
}
.dropify-wrapper .dropify-clear {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: 0;
  border-radius: var(--radius-sm);
  opacity: 1;
  text-transform: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
}
.dropify-wrapper .dropify-clear:hover { background: var(--color-primary-dark); }
.dropify-wrapper.has-error { border-color: var(--color-danger); }
.dropify-errors-container { color: var(--color-danger); }
:root[data-theme="dark"] .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon:before,
:root[data-theme="dark"] .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename .dropify-extension {
  color: var(--color-text);
}