/* =========================================================
   CLAREEX — Sistema Olivo
   Tokens y componentes del handoff de marca (Ruta A · Olivo),
   verificado WCAG 2.1 AA. Radio del sistema: 6px.

   Este archivo es la FUENTE del estilo. Los alias de la sección
   "compatibilidad" existen porque las 26 plantillas del producto ya
   referencian los nombres del sistema anterior (--azul, --rojo, .pill…);
   apuntarlos a los tokens nuevos re-viste todo sin reescribir cada vista.
   Al escribir plantillas NUEVAS usar los nombres del sistema, no los alias.
   ========================================================= */

:root{
  /* --- color: 58% papel · 22% olivo profundo · 14% olivo · 6% cobre --- */
  --papel:          #F5F6F0;
  --olivo-profundo: #2A3318;
  --olivo:          #4A6220;
  --cobre:          #A64B18;   /* SOLO sobre fondo claro  (5.31:1) */
  --cobre-claro:    #E09A66;   /* SOLO sobre fondo oscuro (5.67:1) */
  --apagado-claro:  #62684F;
  --apagado-oscuro: #9CA888;
  --borde-oscuro:   #4A5537;   /* SOLO bordes en oscuro. Nunca texto */
  --borde-claro:    #dfe1d4;
  --blanco:         #ffffff;

  /* --- estados: se colorea solo lo que requiere acción --- */
  --por-vencer-txt: #8A5A0B; --por-vencer-bg: #FBEDD2;
  --incumple-txt:   #A62F29; --incumple-bg:   #FADEDC;
  --noverif-txt:    #4A4A46; --noverif-bg:    #E8E8E4;

  --radius: 6px;
  /* Tintes derivados: el lavado de olivo para destacar un bloque sin
     pintarlo, y los bordes suaves. Viven aqui para que no vuelvan a
     aparecer como hex sueltos en las plantillas. */
  --lavado: #EDF1E3; --borde-suave: #c9cdb9;
  --borde-olivo: #CBD9AC; --borde-ambar: #e6c68a;

  /* --- compatibilidad con las plantillas existentes -------------------
     No son colores nuevos: son los nombres viejos apuntando a los tokens.
     --verde era el "cumple" del sistema anterior; en el sistema Olivo
     "en regla" NO lleva color, así que apunta a la tinta, no a un verde. */
  --azul:  var(--olivo);
  --azul-d: var(--olivo-profundo);
  --verde: var(--olivo-profundo);
  --amber: var(--por-vencer-txt);
  --rojo:  var(--incumple-txt);
  --gris:  var(--apagado-claro);
  --borde: var(--borde-claro);
  --bg:    var(--papel);
  --card:  var(--blanco);
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--papel); color:var(--olivo-profundo);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:700; letter-spacing:-0.02em; margin:0;
  color:var(--olivo-profundo);
}
h1{ font-size:26px; margin:.2em 0 .6em; }
h2{ font-size:19px; margin:.2em 0 .5em; }
h3{ font-size:16px; }
.mono, .num{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; }

a{ color:var(--olivo); text-decoration:none; }
a:hover{ color:var(--olivo-profundo); text-decoration:underline; }

/* Un solo anillo de foco para todo control interactivo. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cobre-claro); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important;
     transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   DOCK — barra de sesión. El grupo que colapsa es SOLO el de marca;
   la información de sesión (usuario, salir) nunca se esconde.
   ========================================================= */
.dock-wrap{
  position:sticky; top:0; z-index:20; display:flex; justify-content:center;
  padding:16px 18px 4px; pointer-events:none;
}
.dock{
  pointer-events:auto; display:flex; align-items:center; gap:14px;
  max-width:100%; flex-wrap:wrap; row-gap:8px;
  background:var(--olivo-profundo); border:1px solid rgba(245,246,240,.09);
  border-radius:999px; padding:9px 18px;
  box-shadow:0 14px 34px -16px rgba(15,20,8,.55);
}
.dock-mark{
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.dock-mark .node{ transform-origin:34.075px 14.509px; }
@media (prefers-reduced-motion: no-preference){
  .dock-mark .node{ animation:node-breathe 3.4s ease-in-out infinite; }
}
@keyframes node-breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.16);} }

.dock-word{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:17px;
  color:var(--papel); letter-spacing:-0.01em; white-space:nowrap;
}
.dock-inst{
  font-size:13px; color:var(--apagado-oscuro); white-space:nowrap;
  max-width:230px; overflow:hidden; text-overflow:ellipsis;
  border-left:1px solid var(--borde-oscuro); padding-left:14px;
}
.dock-links{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; row-gap:6px;
  flex:1 1 auto; min-width:0;
}
.dock-links a{ font-size:14px; font-weight:500; color:var(--apagado-oscuro); white-space:nowrap; }
.dock-links a:hover{ color:var(--papel); text-decoration:none; }
.dock-sesion{
  display:flex; align-items:center; gap:14px; flex:none; margin-left:auto;
  padding-left:14px; border-left:1px solid var(--borde-oscuro);
}
.dock-sesion .quien{
  font-size:12.5px; color:var(--apagado-oscuro); white-space:nowrap;
  max-width:220px; overflow:hidden; text-overflow:ellipsis;
}
.dock-sesion a{ font-size:13.5px; font-weight:500; color:var(--apagado-oscuro); white-space:nowrap; }
.dock-sesion a:hover{ color:var(--papel); text-decoration:none; }

@media (max-width:900px){
  .dock{ border-radius:var(--radius); }
  .dock-sesion{ margin-left:0; border-left:none; padding-left:0; }
  .dock-inst{ border-left:none; padding-left:0; }
}

.wrap{ max-width:1100px; margin:22px auto; padding:0 20px; }

/* =========================================================
   SUPERFICIES
   ========================================================= */
.card{
  background:var(--blanco); border:1px solid var(--borde-claro);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
}
.muted{ color:var(--apagado-claro); font-size:13px; }
.eyebrow{
  font-family:'Archivo',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cobre);
}

.kpis{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.kpi{
  flex:1; min-width:150px; background:var(--papel);
  border:1px solid var(--borde-claro); border-radius:var(--radius); padding:14px 16px;
}
.kpi .lbl{
  font-size:11.5px; color:var(--apagado-claro); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
}
.kpi .val{
  font-family:'Archivo',sans-serif; font-size:28px; font-weight:700;
  margin-top:2px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}

/* =========================================================
   TABLAS — cifras alineadas, encabezado en versalitas
   ========================================================= */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{
  text-align:left; padding:10px 11px;
  border-bottom:1px solid var(--borde-claro); vertical-align:top;
}
th{
  font-family:'Archivo',sans-serif; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--apagado-claro);
}
td.num, th.num{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

/* =========================================================
   CHIPS DE ESTADO — nunca solo color: siempre llevan texto.
   `.pill` es el nombre que usan las plantillas actuales; `.chip` el del
   sistema. Los cuatro estados son los mismos objetos.
   ========================================================= */
.pill, .chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:500;
  padding:4px 9px; border-radius:5px; white-space:nowrap;
}
/* "En regla" NO lleva fondo de color: es la disciplina del sistema. */
.p-verde, .chip-ok{ color:var(--olivo-profundo); background:transparent; }
.p-amber, .chip-vence{ color:var(--por-vencer-txt); background:var(--por-vencer-bg); }
.p-rojo,  .chip-incumple{ color:var(--incumple-txt); background:var(--incumple-bg); }
.p-gris,  .chip-noverif{ color:var(--noverif-txt); background:var(--noverif-bg); }

.badge-n{
  background:var(--incumple-bg); color:var(--incumple-txt);
  font-family:'JetBrains Mono',monospace; border-radius:5px;
  padding:1px 6px; font-size:11.5px; margin-left:4px;
}

/* Pulso SOLO para lo que requiere acción inmediata. */
.chip-urgent{ position:relative; }
.chip-urgent::after{
  content:""; position:absolute; inset:0; border-radius:5px;
  border:1px solid var(--por-vencer-txt); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .chip-urgent::after{ animation:urgent-pulse 2.2s ease-out infinite; }
}
@keyframes urgent-pulse{ 0%{opacity:.55;transform:scale(1);} 100%{opacity:0;transform:scale(1.35);} }

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:-0.01em; padding:10px 18px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  background:var(--olivo); color:var(--papel);
  transition:background-color .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{
  background:var(--olivo-profundo); color:var(--papel); text-decoration:none;
  transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(42,51,24,.4);
}
.btn:active{ transform:translateY(1px); box-shadow:none; }

.btn.sec, .btn-secondary-light{
  background:transparent; color:var(--olivo-profundo); border-color:#c9cdb9;
}
.btn.sec:hover, .btn-secondary-light:hover{
  background:rgba(74,98,32,.06); border-color:var(--olivo); color:var(--olivo-profundo);
}
/* Acción destructiva: el rojo es del estado "incumple", no un color nuevo. */
.btn.danger{ background:var(--incumple-txt); color:var(--papel); }
.btn.danger:hover{ background:#8d2723; }
/* `.ok` era el verde del sistema anterior; aquí es la acción primaria. */
.btn.ok{ background:var(--olivo); color:var(--papel); }
.btn.ok:hover{ background:var(--olivo-profundo); }

.btn-primary-dark{ background:var(--cobre-claro); color:var(--olivo-profundo); }
.btn-primary-dark:hover{ background:#e8ab7d; color:var(--olivo-profundo); }
.btn-secondary-dark{ background:transparent; color:var(--papel); border-color:var(--borde-oscuro); }
.btn-secondary-dark:hover{ border-color:var(--apagado-oscuro); background:rgba(245,246,240,.06); }

/* =========================================================
   FORMULARIOS
   ========================================================= */
input, select, textarea{
  font-family:'Inter',sans-serif; font-size:13.5px; padding:9px 11px;
  border:1px solid var(--borde-suave); border-radius:var(--radius);
  background:var(--blanco); color:var(--olivo-profundo); width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--cobre-claro); outline-offset:1px; border-color:var(--olivo);
}
label{ font-size:12px; font-weight:600; color:var(--olivo-profundo); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field .hint{ font-size:11.5px; color:var(--apagado-claro); }
.field .errmsg{ font-size:11.5px; color:var(--incumple-txt); }

/* Barra de avance */
.bar{ height:8px; border-radius:var(--radius); background:var(--noverif-bg); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--olivo); }

form.inline{ display:inline; }

/* Aviso — recuadro de contexto dentro de una vista */
.aviso{
  background:#EDF1E3; border:1px solid #CBD9AC;
  border-radius:var(--radius); padding:14px 18px; margin-bottom:16px;
}
.aviso.ojo{ background:var(--por-vencer-bg); border-color:#e6c68a; }
.aviso.mal{ background:var(--incumple-bg); border-color:#e9b3af; }