/* Tema visual Exafan — reskin de Bootstrap 5.3 vía variables CSS (sin build/Sass), fundamentado en
   el Design System de marca (Brandbook 2025-2026): tipografía Causten, morado #882CB1, gris #444242. */

@font-face{font-family:'Causten';src:url('../fonts/causten/Causten-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Causten';src:url('../fonts/causten/Causten-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Causten';src:url('../fonts/causten/Causten-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Causten';src:url('../fonts/causten/Causten-Extra-Bold.ttf') format('truetype');font-weight:600 800;font-style:normal;font-display:swap}

:root{
  /* Tokens de marca */
  --exafan-purple-900:#3c1050;
  --exafan-purple-800:#55187a;
  --exafan-purple-700:#6e2094;
  --exafan-purple-600:#882cb1;
  --exafan-purple-500:#a04ec4;
  --exafan-purple-400:#b674d3;
  --exafan-purple-300:#cc9de1;
  --exafan-purple-200:#e0c4ee;
  --exafan-purple-100:#f0e2f8;
  --exafan-purple-50:#f9f2fc;
  --exafan-gray-900:#2b2b2b;
  --exafan-gray-800:#444242;
  --exafan-gray-600:#626262;
  --exafan-gray-400:#9a9a9a;
  --exafan-gray-300:#c9c9c9;
  --exafan-gray-200:#e2e2e2;
  --exafan-gray-100:#f1f1f1;
  --exafan-gray-50:#f8f8f8;
  --exafan-accent-red:#e63c22;
  --exafan-accent-orange:#fea012;
  --exafan-accent-yellow:#febc10;
  --exafan-accent-green:#7ab929;
  --exafan-accent-green-dark:#1e7a34;
  --exafan-accent-blue:#50b1e0;
  --exafan-accent-blue-dark:#2a7fc1;
  --exafan-accent-violet:#652a9f;
  --exafan-radius-sm:4px;
  --exafan-radius-md:8px;
  --exafan-radius-lg:12px;
  --exafan-shadow-sm:0 1px 2px rgba(59,59,59,.08);
  --exafan-shadow-md:0 2px 8px rgba(59,59,59,.10);
  --exafan-shadow-lg:0 8px 24px rgba(75,18,104,.14);
  --exafan-transition-fast:120ms ease;
  --exafan-transition-base:180ms ease;
  --exafan-navbar-h:56px;

  /* Reskin de Bootstrap: variables de :root que sus propios componentes ya consumen internamente */
  --bs-body-font-family:'Causten',system-ui,'Segoe UI',sans-serif;
  --bs-body-color:var(--exafan-gray-800);
  --bs-body-bg:#fdfbfe;
  --bs-emphasis-color:var(--exafan-gray-900);
  --bs-secondary-color:var(--exafan-gray-600);
  --bs-border-radius:var(--exafan-radius-md);
  --bs-border-radius-sm:var(--exafan-radius-sm);
  --bs-border-radius-lg:var(--exafan-radius-lg);
  --bs-border-color:var(--exafan-gray-200);
  --bs-link-color:var(--exafan-purple-600);
  --bs-link-color-rgb:136,44,177;
  --bs-link-hover-color:var(--exafan-purple-800);
  --bs-link-hover-color-rgb:85,24,122;
  --bs-primary:var(--exafan-purple-600);
  --bs-primary-rgb:136,44,177;
  --bs-primary-text-emphasis:var(--exafan-purple-700);
  --bs-primary-bg-subtle:var(--exafan-purple-100);
  --bs-primary-border-subtle:var(--exafan-purple-200);
  --bs-secondary:var(--exafan-gray-600);
  --bs-secondary-rgb:98,98,98;
  --bs-success:var(--exafan-accent-green-dark);
  --bs-success-rgb:30,122,52;
  --bs-danger:var(--exafan-accent-red);
  --bs-danger-rgb:230,60,34;
  --bs-warning:var(--exafan-accent-orange);
  --bs-warning-rgb:254,160,18;
  --bs-info:var(--exafan-accent-blue-dark);
  --bs-info-rgb:42,127,193;
  --bs-focus-ring-color:rgba(136,44,177,.25);
}

body{ letter-spacing:.01em; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:'Causten',sans-serif; font-weight:600; color:var(--exafan-purple-700); }
strong,.fw-semibold,.fw-bold{ font-family:'Causten',sans-serif; }
a{ transition:color var(--exafan-transition-fast); }

/* Botones — Bootstrap 5.3 expone --bs-btn-* por variante, pensado para reskin sin recompilar Sass */
.btn{ font-weight:500; border-radius:var(--exafan-radius-md); }
.btn-primary{
  --bs-btn-bg:var(--exafan-purple-600); --bs-btn-border-color:var(--exafan-purple-600);
  --bs-btn-hover-bg:var(--exafan-purple-700); --bs-btn-hover-border-color:var(--exafan-purple-700);
  --bs-btn-active-bg:var(--exafan-purple-800); --bs-btn-active-border-color:var(--exafan-purple-800);
  --bs-btn-disabled-bg:var(--exafan-purple-300); --bs-btn-disabled-border-color:var(--exafan-purple-300);
  --bs-btn-focus-shadow-rgb:136,44,177;
}
.btn-outline-primary{
  --bs-btn-color:var(--exafan-purple-600); --bs-btn-border-color:var(--exafan-purple-600);
  --bs-btn-hover-bg:var(--exafan-purple-600); --bs-btn-hover-border-color:var(--exafan-purple-600);
  --bs-btn-active-bg:var(--exafan-purple-700); --bs-btn-active-border-color:var(--exafan-purple-700);
  --bs-btn-focus-shadow-rgb:136,44,177;
}
.btn-outline-secondary{ --bs-btn-focus-shadow-rgb:98,98,98; }
.btn-link{ --bs-btn-color:var(--exafan-purple-600); --bs-btn-hover-color:var(--exafan-purple-800); }

/* Barra superior e menú lateral */
.navbar-exafan{
  background:linear-gradient(135deg,var(--exafan-purple-900),var(--exafan-purple-800));
  box-shadow:var(--exafan-shadow-md);
  min-height:var(--exafan-navbar-h);
  z-index:1035;
}
.navbar-usuario{ color:rgba(255,255,255,.85); }
.btn-icon-light{
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border-radius:var(--exafan-radius-md); transition:background var(--exafan-transition-fast);
}
.btn-icon-light:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-icon-light svg{ width:19px; height:19px; }

.offcanvas{ --bs-offcanvas-width:280px; }
.offcanvas-header{ border-bottom:1px solid var(--exafan-gray-200); }
.offcanvas .list-group-item{
  border:none; padding:.55rem 1.1rem; color:var(--exafan-gray-800);
  transition:background var(--exafan-transition-fast), color var(--exafan-transition-fast);
}
.offcanvas .list-group-item-action:hover{ background:var(--exafan-purple-50); color:var(--exafan-purple-700); }
.offcanvas .list-group-item.bg-body-tertiary{
  background:var(--exafan-gray-50) !important; color:var(--exafan-purple-700) !important;
  letter-spacing:.06em; font-size:.72rem; padding-top:.8rem; padding-bottom:.3rem;
}
.offcanvas .list-group-item-action.activo{
  background:var(--exafan-purple-50); color:var(--exafan-purple-700); font-weight:600;
  box-shadow:inset 3px 0 0 var(--exafan-purple-600);
}

/* Tarjetas, alertas, modales, formularios */
.card{ border-color:var(--exafan-gray-200); border-radius:var(--exafan-radius-lg); }
.card-header{ background:var(--exafan-gray-50); border-color:var(--exafan-gray-200); font-weight:600; color:var(--exafan-purple-700); }

.alert{ border:none; border-left:4px solid transparent; border-radius:var(--exafan-radius-md); }
.alert-success{ border-left-color:var(--exafan-accent-green-dark); }
.alert-danger{ border-left-color:var(--exafan-accent-red); }
.alert-warning{ border-left-color:var(--exafan-accent-orange); }
.alert-info{ border-left-color:var(--exafan-accent-blue-dark); }

.modal-content{ border:none; border-radius:var(--exafan-radius-lg); box-shadow:var(--exafan-shadow-lg); }
.modal-header{ border-color:var(--exafan-gray-200); }
.modal-header .modal-title{ color:var(--exafan-purple-700); font-weight:600; }
.modal-footer{ border-color:var(--exafan-gray-200); }

.form-label{ font-weight:500; font-size:.9rem; }
.form-control,.form-select{ border-color:var(--exafan-gray-300); }
.form-control:focus,.form-select:focus{
  border-color:var(--exafan-purple-400);
  box-shadow:0 0 0 .2rem rgba(136,44,177,.15);
}
.form-check-input:checked{ background-color:var(--exafan-purple-600); border-color:var(--exafan-purple-600); }
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(136,44,177,.15); }

.nav-pills .nav-link{ color:var(--exafan-gray-600); border-radius:var(--exafan-radius-md); }
.nav-pills .nav-link.active{ background:var(--exafan-purple-600); }

/* Tablas — apariencia base (además del motor de tablas mejoradas en exafan-tablas.css) */
.table{
  --bs-table-striped-bg:var(--exafan-purple-50);
  --bs-table-hover-bg:var(--exafan-purple-100);
  --bs-table-hover-color:var(--exafan-gray-900);
  --bs-table-border-color:var(--exafan-gray-200);
}
.table thead th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  color:var(--exafan-purple-700); background:var(--exafan-gray-50);
  border-bottom-width:1px; white-space:nowrap;
}
.table td,.table th{ vertical-align:middle; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--exafan-gray-300); border-radius:var(--exafan-radius-pill,999px); }
::-webkit-scrollbar-thumb:hover{ background:var(--exafan-gray-400); }