/* =====================================================================
   SISTEMA DE DISEÑO — ORDEN DE CABALLEROS TEMPLARIOS
   Paleta: azul profundo · rojo templario · dorado · blanco hueso · metal
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root {
  /* Azul profundo — color institucional */
  --azul-900: #071228;
  --azul-800: #0B1B3A;
  --azul-700: #12274E;
  --azul-600: #16305E;
  --azul-500: #1D3E76;
  --azul-300: #4B6698;
  --azul-100: #B9C6DC;

  /* Rojo templario */
  --rojo-700: #7E1019;
  --rojo-600: #A31621;
  --rojo-500: #C1272D;
  --rojo-300: #E08A8E;
  --rojo-100: #F7DDDE;

  /* Dorado */
  --oro-700: #6E5518;
  --oro-600: #8A6D1F;
  --oro-500: #C9A227;
  --oro-400: #D9B84A;
  --oro-300: #E8C766;
  --oro-100: #F6EBC8;

  /* Blanco hueso y pergamino */
  --hueso-50:  #FFFFFF;
  --hueso-100: #FBFAF6;
  --hueso-200: #F2F1EC;
  --hueso-300: #E8E3D6;
  --hueso-400: #D7D1C1;

  /* Metálicos */
  --metal-600: #6C7480;
  --metal-500: #8A929E;
  --metal-400: #B8BEC9;
  --metal-200: #DDE1E7;

  /* Semánticos */
  --exito:   #1F7A4C;
  --exito-bg:#E4F3EA;
  --aviso:   #B87503;
  --aviso-bg:#FDF1DC;
  --peligro: #B3261E;
  --peligro-bg:#FBE4E2;
  --info:    #17567E;
  --info-bg: #E2F0F9;

  /* Tipografía */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Escala */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;

  --header-h: 62px;
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 74px;

  --trans: 180ms cubic-bezier(.4,0,.2,1);
}

/* --------------------------- Tema claro ----------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--hueso-200);
  --bg-alt:        var(--hueso-100);
  --surface:       var(--hueso-50);
  --surface-2:     var(--hueso-100);
  --surface-3:     var(--hueso-200);
  --surface-inset: #F6F5F0;

  --texto:      #1B2130;
  --texto-2:    #4A5262;
  --texto-3:    #767E8E;
  --texto-inv:  #FFFFFF;

  --borde:      #E4E0D5;
  --borde-2:    #D3CEC0;
  --borde-fuerte: #B9B2A0;

  --marca:      var(--azul-800);
  --marca-alt:  var(--azul-600);
  --acento:     var(--oro-600);
  --acento-vivo:var(--oro-500);
  --sello:      var(--rojo-600);

  --sidebar-bg:      var(--azul-900);
  --sidebar-texto:   #C4CEE0;
  --sidebar-activo:  var(--oro-300);
  --sidebar-hover:   rgba(201,162,39,.10);
  --sidebar-borde:   rgba(201,162,39,.16);

  --sombra-sm: 0 1px 2px rgba(11,27,58,.06), 0 1px 3px rgba(11,27,58,.05);
  --sombra:    0 2px 6px rgba(11,27,58,.06), 0 6px 16px rgba(11,27,58,.06);
  --sombra-lg: 0 10px 34px rgba(11,27,58,.13), 0 3px 10px rgba(11,27,58,.07);
  --sombra-oro:0 2px 14px rgba(201,162,39,.26);

  --trama: rgba(11,27,58,.035);
}

/* --------------------------- Tema oscuro ---------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #070C18;
  --bg-alt:        #0A1122;
  --surface:       #101A30;
  --surface-2:     #14203A;
  --surface-3:     #1A2845;
  --surface-inset: #0C1526;

  --texto:      #E7EBF3;
  --texto-2:    #A9B4C8;
  --texto-3:    #7C8799;
  --texto-inv:  #0B1B3A;

  --borde:      #22304F;
  --borde-2:    #2C3D62;
  --borde-fuerte: #3A4E78;

  --marca:      #16305E;
  --marca-alt:  var(--azul-500);
  --acento:     var(--oro-300);
  --acento-vivo:var(--oro-400);
  --sello:      #D0353C;

  --sidebar-bg:      #060B16;
  --sidebar-texto:   #A8B4CC;
  --sidebar-activo:  var(--oro-300);
  --sidebar-hover:   rgba(201,162,39,.12);
  --sidebar-borde:   rgba(201,162,39,.14);

  --hueso-50:  #101A30;
  --hueso-100: #14203A;
  --hueso-200: #0A1122;
  --hueso-300: #22304F;

  --exito-bg:  rgba(31,122,76,.17);
  --aviso-bg:  rgba(184,117,3,.17);
  --peligro-bg:rgba(179,38,30,.18);
  --info-bg:   rgba(23,86,126,.20);
  --exito:  #56C68C;
  --aviso:  #E3A63C;
  --peligro:#F0736C;
  --info:   #62B4E8;

  --sombra-sm: 0 1px 2px rgba(0,0,0,.4);
  --sombra:    0 2px 8px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.3);
  --sombra-lg: 0 14px 40px rgba(0,0,0,.55);
  --sombra-oro:0 2px 16px rgba(201,162,39,.22);

  --trama: rgba(255,255,255,.028);
}

/* Preferencia del sistema cuando el usuario no ha elegido tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070C18; --bg-alt: #0A1122;
    --surface: #101A30; --surface-2: #14203A; --surface-3: #1A2845; --surface-inset: #0C1526;
    --texto: #E7EBF3; --texto-2: #A9B4C8; --texto-3: #7C8799; --texto-inv: #0B1B3A;
    --borde: #22304F; --borde-2: #2C3D62; --borde-fuerte: #3A4E78;
    --marca: #16305E; --marca-alt: #1D3E76; --acento: #E8C766; --acento-vivo: #D9B84A; --sello: #D0353C;
    --sidebar-bg: #060B16;
    --hueso-50: #101A30; --hueso-100: #14203A; --hueso-200: #0A1122; --hueso-300: #22304F;
    --exito-bg: rgba(31,122,76,.17); --aviso-bg: rgba(184,117,3,.17);
    --peligro-bg: rgba(179,38,30,.18); --info-bg: rgba(23,86,126,.20);
    --exito: #56C68C; --aviso: #E3A63C; --peligro: #F0736C; --info: #62B4E8;
    --sombra-sm: 0 1px 2px rgba(0,0,0,.4);
    --sombra: 0 2px 8px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.3);
    --sombra-lg: 0 14px 40px rgba(0,0,0,.55);
    --trama: rgba(255,255,255,.028);
  }
}

/* ------------------------------ Base -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texto);
  margin: 0 0 var(--sp-3);
  letter-spacing: .01em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--sp-3); }

a { color: var(--marca-alt); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--acento-vivo); }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: none; border-top: 1px solid var(--borde); margin: var(--sp-6) 0; }

code, pre, .mono { font-family: var(--font-mono); font-size: .88em; }

::selection { background: var(--oro-300); color: var(--azul-900); }

:focus-visible {
  outline: 2px solid var(--acento-vivo);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Barras de desplazamiento */
* { scrollbar-width: thin; scrollbar-color: var(--borde-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--metal-500); }

/* --------------------------- Utilidades ----------------------------- */
.ic { flex-shrink: 0; vertical-align: middle; }

.display   { font-family: var(--font-display); }
.serif     { font-family: var(--font-serif); }
.versalita { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 600; }

.t-1 { color: var(--texto); }
.t-2 { color: var(--texto-2); }
.t-3 { color: var(--texto-3); }
.t-oro { color: var(--acento); }
.t-sello { color: var(--sello); }
.t-exito { color: var(--exito); }
.t-peligro { color: var(--peligro); }
.t-aviso { color: var(--aviso); }

.xs { font-size: .74rem; }
.sm { font-size: .82rem; }
.md { font-size: .9rem; }
.lg { font-size: 1.05rem; }
.xl { font-size: 1.3rem; }
.b   { font-weight: 600; }
.bb  { font-weight: 700; }
.center { text-align: center; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono-num { font-variant-numeric: tabular-nums; }

.flex   { display: flex; }
.between{ justify-content: space-between; }
.middle { align-items: center; }
.wrap   { flex-wrap: wrap; }
.col    { flex-direction: column; }
.grow   { flex: 1 1 auto; min-width: 0; }
.g-1 { gap: var(--sp-1); } .g-2 { gap: var(--sp-2); } .g-3 { gap: var(--sp-3); }
.g-4 { gap: var(--sp-4); } .g-5 { gap: var(--sp-5); } .g-6 { gap: var(--sp-6); }

.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}
.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}
.ml-auto{margin-left:auto} .mr-auto{margin-right:auto}
.hidden { display: none !important; }
.w-full { width: 100%; }

/* Filete dorado decorativo */
.filete {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acento) 18%, var(--acento) 82%, transparent);
  border: none;
  margin: var(--sp-4) 0;
  opacity: .55;
}
.filete-corto {
  width: 62px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro-600), var(--oro-300));
}

/* ---------------------------- Botones ------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-color: var(--texto);
  --btn-borde: var(--borde-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 17px;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.2;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-sm); color: var(--btn-color); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primario {
  --btn-bg: linear-gradient(160deg, var(--azul-700), var(--azul-800));
  --btn-color: #F3E8C6;
  --btn-borde: var(--azul-600);
}
.btn-primario:hover { --btn-bg: linear-gradient(160deg, var(--azul-600), var(--azul-700)); box-shadow: var(--sombra); }

.btn-oro {
  --btn-bg: linear-gradient(160deg, var(--oro-400), var(--oro-600));
  --btn-color: #2A1F05;
  --btn-borde: var(--oro-600);
  font-weight: 600;
}
.btn-oro:hover { --btn-bg: linear-gradient(160deg, var(--oro-300), var(--oro-500)); box-shadow: var(--sombra-oro); }

.btn-sello {
  --btn-bg: linear-gradient(160deg, var(--rojo-500), var(--rojo-600));
  --btn-color: #fff;
  --btn-borde: var(--rojo-600);
}
.btn-sello:hover { --btn-bg: linear-gradient(160deg, #CE3037, var(--rojo-500)); }

.btn-fantasma { --btn-bg: transparent; --btn-borde: var(--borde-2); }
.btn-fantasma:hover { --btn-bg: var(--surface-2); --btn-borde: var(--acento); }

.btn-plano { --btn-bg: transparent; --btn-borde: transparent; --btn-color: var(--texto-2); padding: 7px 11px; }
.btn-plano:hover { --btn-bg: var(--surface-2); --btn-color: var(--texto); transform: none; box-shadow: none; }

.btn-peligro { --btn-bg: var(--peligro-bg); --btn-color: var(--peligro); --btn-borde: transparent; }
.btn-peligro:hover { --btn-bg: var(--peligro); --btn-color: #fff; }

.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 26px; font-size: .95rem; }
.btn-icono { padding: 8px; border-radius: var(--r-md); }
.btn-bloque { width: 100%; }

.btn-grupo { display: inline-flex; }
.btn-grupo .btn { border-radius: 0; margin-left: -1px; }
.btn-grupo .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-grupo .btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-grupo .btn.activo { --btn-bg: var(--marca); --btn-color: var(--oro-300); --btn-borde: var(--marca); z-index: 1; }

/* --------------------------- Tarjetas ------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--borde);
  background: var(--surface-2);
}
.card-header h2, .card-header h3 { margin: 0; font-size: 1rem; }
.card-body { padding: var(--sp-5); }
.card-body.compacto { padding: var(--sp-4); }
.card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--borde);
  background: var(--surface-2);
}
.card-sin-relleno .card-body { padding: 0; }

/* Tarjeta con filo dorado superior */
.card-realce { position: relative; }
.card-realce::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--oro-600), var(--oro-300), var(--oro-600));
}

/* --------------------------- Indicadores ---------------------------- */
.stat {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; right: -28px; top: -28px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--stat-tinte, var(--trama));
  opacity: .5; pointer-events: none;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--borde-2); }
.stat-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stat-titulo {
  font-size: .7rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}
.stat-icono {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--stat-icono-bg, var(--surface-3));
  color: var(--stat-icono-color, var(--marca-alt));
  position: relative; z-index: 1;
}
.stat-valor {
  font-family: var(--font-display); font-size: 1.95rem; font-weight: 600;
  line-height: 1.05; color: var(--texto); font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.stat-pie { font-size: .78rem; color: var(--texto-3); display: flex; align-items: center; gap: 5px; }

.stat.tono-oro    { --stat-icono-bg: var(--oro-100); --stat-icono-color: var(--oro-600); --stat-tinte: rgba(201,162,39,.09); }
.stat.tono-azul   { --stat-icono-bg: #E3E9F5; --stat-icono-color: var(--azul-600); --stat-tinte: rgba(22,48,94,.07); }
.stat.tono-sello  { --stat-icono-bg: var(--rojo-100); --stat-icono-color: var(--rojo-600); --stat-tinte: rgba(163,22,33,.07); }
.stat.tono-exito  { --stat-icono-bg: var(--exito-bg); --stat-icono-color: var(--exito); --stat-tinte: rgba(31,122,76,.07); }
.stat.tono-aviso  { --stat-icono-bg: var(--aviso-bg); --stat-icono-color: var(--aviso); --stat-tinte: rgba(184,117,3,.08); }
.stat.tono-info   { --stat-icono-bg: var(--info-bg); --stat-icono-color: var(--info); --stat-tinte: rgba(23,86,126,.07); }

[data-theme="dark"] .stat.tono-azul { --stat-icono-bg: rgba(29,62,118,.3); --stat-icono-color: #8FB0E4; }
[data-theme="dark"] .stat.tono-oro  { --stat-icono-bg: rgba(201,162,39,.16); --stat-icono-color: var(--oro-300); }
[data-theme="dark"] .stat.tono-sello{ --stat-icono-bg: rgba(163,22,33,.2); --stat-icono-color: #E8797F; }

/* ---------------------------- Insignias ----------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: .74rem; font-weight: 600; line-height: 1.5;
  border-radius: var(--r-full);
  background: var(--surface-3); color: var(--texto-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-success { background: var(--exito-bg);   color: var(--exito); }
.badge-warning { background: var(--aviso-bg);   color: var(--aviso); }
.badge-danger  { background: var(--peligro-bg); color: var(--peligro); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-gold    { background: var(--oro-100);    color: var(--oro-700); border-color: rgba(201,162,39,.35); }
.badge-dark    { background: var(--azul-800);   color: var(--oro-300); }
.badge-muted   { background: var(--surface-3);  color: var(--texto-3); }
[data-theme="dark"] .badge-gold { background: rgba(201,162,39,.15); color: var(--oro-300); }

.badge-punto::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* Distintivo de grado */
.grado-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 8px;
  border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(201,162,39,.14), rgba(201,162,39,.05));
  border: 1px solid rgba(201,162,39,.32);
  color: var(--oro-700);
}
[data-theme="dark"] .grado-chip { color: var(--oro-300); }
.grado-chip .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--grado-color, var(--oro-500)); }

/* ----------------------------- Avatar ------------------------------- */
.avatar {
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--azul-600), var(--azul-800));
  color: var(--oro-300);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  overflow: hidden;
  border: 1.5px solid var(--borde);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 26px; height: 26px; font-size: .62rem; }
.avatar-sm { width: 32px; height: 32px; font-size: .7rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.9rem; border-width: 3px; border-color: var(--oro-500); }
.avatar-oro { border-color: var(--oro-500); box-shadow: 0 0 0 1px rgba(201,162,39,.25); }

.avatar-pila { display: flex; }
.avatar-pila .avatar { margin-left: -10px; border: 2px solid var(--surface); }
.avatar-pila .avatar:first-child { margin-left: 0; }

/* ---------------------------- Tablas -------------------------------- */
.tabla-envoltura {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}
.tabla thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 11px var(--sp-4);
  text-align: left;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--borde-2);
  white-space: nowrap;
}
.tabla tbody td {
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
  color: var(--texto);
}
.tabla tbody tr { transition: background var(--trans); }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla-compacta tbody td, .tabla-compacta thead th { padding: 7px var(--sp-3); }
.tabla a { color: var(--texto); font-weight: 550; }
.tabla a:hover { color: var(--marca-alt); }

.celda-persona { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.celda-persona .datos { min-width: 0; }
.celda-persona .nombre { font-weight: 600; color: var(--texto); display: block; }
.celda-persona .meta { font-size: .76rem; color: var(--texto-3); }

/* Estado vacío */
.vacio {
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--texto-3);
}
.vacio .ic-vacio {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--texto-3);
}
.vacio h3 { color: var(--texto-2); font-size: 1.05rem; margin-bottom: var(--sp-2); }
.vacio p { max-width: 380px; margin: 0 auto var(--sp-4); font-size: .88rem; }

/* --------------------------- Formularios ---------------------------- */
.campo { margin-bottom: var(--sp-4); }
.campo > label, .etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem; font-weight: 600;
  color: var(--texto-2);
}
.etiqueta .req { color: var(--sello); margin-left: 2px; }

.control {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--texto);
  background: var(--surface);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-md);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
  appearance: none;
}
.control::placeholder { color: var(--texto-3); opacity: .75; }
.control:hover:not(:disabled) { border-color: var(--borde-fuerte); }
.control:focus {
  outline: none;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 3px rgba(201,162,39,.15);
  background: var(--surface);
}
.control:disabled, .control[readonly] {
  background: var(--surface-inset);
  color: var(--texto-3);
  cursor: not-allowed;
}
.control.error { border-color: var(--peligro); }
.control.error:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.14); }

textarea.control { min-height: 96px; resize: vertical; line-height: 1.6; }

select.control {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.ayuda { display: block; margin-top: 5px; font-size: .76rem; color: var(--texto-3); }
.error-campo { display: block; margin-top: 5px; font-size: .76rem; color: var(--peligro); font-weight: 500; }

.campo-icono { position: relative; }
.campo-icono .control { padding-left: 38px; }
.campo-icono > .ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); pointer-events: none;
}
.campo-icono .btn-ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--texto-3); border-radius: var(--r-sm);
}
.campo-icono .btn-ojo:hover { color: var(--texto); background: var(--surface-2); }

.rejilla-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
.rejilla-form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-4); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* Casilla y opción */
.check { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: .87rem; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: var(--oro-600);
  cursor: pointer; flex-shrink: 0;
}
.check span { color: var(--texto-2); }

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .pista {
  position: relative; width: 42px; height: 23px; flex-shrink: 0;
  background: var(--metal-400); border-radius: var(--r-full);
  transition: background var(--trans);
}
.switch .pista::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--trans);
}
.switch input:checked + .pista { background: var(--oro-600); }
.switch input:checked + .pista::after { transform: translateX(19px); }
.switch input:focus-visible + .pista { box-shadow: 0 0 0 3px rgba(201,162,39,.25); }

/* Grupo de archivos */
.zona-archivo {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1.5px dashed var(--borde-2);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
  color: var(--texto-3);
  text-align: center;
  cursor: pointer;
  transition: all var(--trans);
}
.zona-archivo:hover, .zona-archivo.arrastrando {
  border-color: var(--acento-vivo);
  background: var(--oro-100);
  color: var(--oro-700);
}
[data-theme="dark"] .zona-archivo:hover { background: rgba(201,162,39,.08); }

/* ----------------------------- Alertas ------------------------------ */
.alerta {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  border-left-width: 3px;
  font-size: .875rem;
  margin-bottom: var(--sp-4);
}
.alerta .ic { margin-top: 1px; }
.alerta-success { background: var(--exito-bg);   color: var(--exito);   border-left-color: var(--exito); }
.alerta-warning { background: var(--aviso-bg);   color: var(--aviso);   border-left-color: var(--aviso); }
.alerta-error   { background: var(--peligro-bg); color: var(--peligro); border-left-color: var(--peligro); }
.alerta-info    { background: var(--info-bg);    color: var(--info);    border-left-color: var(--info); }
.alerta strong { font-weight: 650; }
.alerta .cerrar { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; padding: 2px; }
.alerta .cerrar:hover { opacity: 1; }

/* --------------------------- Pestañas ------------------------------- */
.tabs {
  display: flex; gap: var(--sp-1);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px var(--sp-4);
  font-size: .87rem; font-weight: 550;
  color: var(--texto-3);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: all var(--trans);
  margin-bottom: -1px;
}
.tab:hover { color: var(--texto); }
.tab.activo { color: var(--marca-alt); border-bottom-color: var(--acento-vivo); font-weight: 650; }
[data-theme="dark"] .tab.activo { color: var(--acento); }
.tab .cuenta {
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--surface-3); font-size: .7rem; font-weight: 700;
}
.panel-tab { display: none; padding-top: var(--sp-5); }
.panel-tab.activo { display: block; animation: aparecer .22s ease; }

@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------- Modales ------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7,12,24,.62);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--trans), visibility var(--trans);
}
.modal-fondo.abierto { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  transform: translateY(14px) scale(.98);
  transition: transform var(--trans);
}
.modal-fondo.abierto .modal { transform: none; }
.modal-lg { max-width: 820px; }
.modal-sm { max-width: 420px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--borde);
}
.modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--borde);
  background: var(--surface-2);
}

/* -------------------------- Desplegables ---------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 300;
  min-width: 208px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--trans);
}
.dropdown-menu.abierto { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu.izq { right: auto; left: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: 8px 11px;
  font-size: .855rem; text-align: left;
  color: var(--texto-2);
  background: none; border: none; border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--trans);
}
.dropdown-item:hover { background: var(--surface-2); color: var(--texto); }
.dropdown-item.peligro { color: var(--peligro); }
.dropdown-item.peligro:hover { background: var(--peligro-bg); }
.dropdown-sep { height: 1px; background: var(--borde); margin: 5px 0; }
.dropdown-titulo {
  padding: 7px 11px 5px; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3);
}

/* --------------------------- Paginación ----------------------------- */
.paginacion { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.paginacion a, .paginacion span {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 9px;
  font-size: .84rem; font-weight: 550;
  color: var(--texto-2);
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  transition: all var(--trans);
}
.paginacion a:hover { border-color: var(--acento); color: var(--acento-vivo); }
.paginacion .activo { background: var(--marca); border-color: var(--marca); color: var(--oro-300); }
.paginacion .inactivo { opacity: .4; pointer-events: none; }

/* ---------------------------- Progreso ------------------------------ */
.progreso {
  height: 7px; border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.progreso .barra {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--oro-600), var(--oro-400));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progreso.fina { height: 4px; }
.progreso .barra.exito   { background: linear-gradient(90deg, #1a6b42, var(--exito)); }
.progreso .barra.peligro { background: linear-gradient(90deg, #92201a, var(--peligro)); }
.progreso .barra.azul    { background: linear-gradient(90deg, var(--azul-700), var(--azul-500)); }

/* ----------------------------- Línea de tiempo ---------------------- */
.linea-tiempo { position: relative; padding-left: 28px; }
.linea-tiempo::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 1.5px; background: linear-gradient(180deg, var(--oro-500), var(--borde) 70%);
}
.lt-item { position: relative; padding-bottom: var(--sp-5); }
.lt-item:last-child { padding-bottom: 0; }
.lt-item::before {
  content: ''; position: absolute; left: -24px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--lt-color, var(--oro-500));
  box-shadow: 0 0 0 3px var(--surface);
}
.lt-fecha { font-size: .72rem; color: var(--texto-3); font-weight: 600; letter-spacing: .04em; }
.lt-titulo { font-weight: 600; color: var(--texto); margin: 2px 0 3px; }
.lt-cuerpo { font-size: .84rem; color: var(--texto-2); }

/* ----------------------------- Tooltip ------------------------------ */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 5px 9px;
  font-size: .74rem; font-weight: 500; white-space: nowrap;
  color: #fff; background: var(--azul-900);
  border-radius: var(--r-sm);
  opacity: 0; pointer-events: none;
  transition: all var(--trans);
  z-index: 400;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%); }

/* ------------------------- Cargando / esqueleto --------------------- */
.esqueleto {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: brillo 1.3s infinite;
  border-radius: var(--r-sm);
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--borde-2);
  border-top-color: var(--acento-vivo);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --------------------------- Impresión ------------------------------ */
@media print {
  .no-imprimir, .sidebar, .topbar, .btn, .tabs { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .contenido { padding: 0 !important; margin: 0 !important; }
  a { color: #000; text-decoration: none; }
}

/* ------------------- Preferencia de menos movimiento ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}