/* WINPRO — componentes del portal. Todo color sale de tokens.css.
   NINGUN valor de color escrito a mano en este archivo. */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--color-fondo); color:var(--color-texto);
  font-family:var(--font-sans); font-size:var(--letra-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--color-acento); }
.cifra{ font-family:var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.rotulo{ font-size:var(--letra-rotulo); letter-spacing:.13em; text-transform:uppercase;
         font-weight:500; color:var(--color-texto-suave); margin:0; }
.apoyo{ font-size:var(--letra-apoyo); color:var(--color-texto-suave); }
.num{ text-align:right; font-family:var(--font-display); font-variant-numeric:tabular-nums; }

/* ── Estructura ─────────────────────────────────────────────── */
.marco{ display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.lateral{
  background:var(--color-fondo-2); border-right:1px solid var(--color-borde);
  display:flex; flex-direction:column; gap:26px; padding:20px 16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.logo{ width:132px; height:64px; background-image:var(--logo); background-size:contain;
       background-repeat:no-repeat; background-position:left center; flex:none; }

/* NINGUNA CAJA en la navegacion: ni fondo, ni borde, ni al pasar el mouse,
   ni en el item activo. Solo color y peso. (kit 03-DISENO §8) */
.menu{ display:flex; flex-direction:column; gap:2px; }
.menu a{
  display:flex; align-items:center; gap:10px; padding:8px 4px;
  color:var(--color-lateral-texto); text-decoration:none; font-size:var(--letra-base);
  border-radius:0; transition:color .18s cubic-bezier(.3,.8,.3,1);
}
.menu a:hover{ color:var(--color-texto); }
.menu a[aria-current="page"]{ color:var(--color-acento); font-weight:600; }
.menu a:focus-visible{ outline:2px solid var(--color-acento); outline-offset:2px; }
.menu .marca{ width:2px; height:16px; border-radius:2px; background:transparent; flex:none; }
.menu a[aria-current="page"] .marca{ background:var(--color-acento); }
.solo-ver{ font-size:11.5px; font-weight:600; letter-spacing:.02em; margin-left:auto;
           color:var(--color-neutro); }

.quien{ margin-top:auto; display:flex; flex-direction:column; gap:6px;
        border-top:1px solid var(--color-borde); padding-top:14px; }

.contenido{ display:flex; flex-direction:column; min-width:0; }
.barra{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 28px; border-bottom:1px solid var(--color-borde);
  background:var(--color-fondo-2); position:sticky; top:0; z-index:10;
}
.barra::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,#99753C,#B8A580 28%,#F2E0A5 50%,#B8A580 72%,#99753C);
  opacity:.85;
}
.barra h1{ font-size:var(--letra-destaca); font-weight:600; }
.ejes{ display:flex; gap:22px; flex-wrap:wrap; margin-left:auto; }
.eje{ display:flex; flex-direction:column; gap:6px; }
.opciones{ display:flex; gap:6px; flex-wrap:wrap; }
.opcion{
  font:500 var(--letra-apoyo)/1 var(--font-sans); color:var(--color-texto-suave);
  background:none; border:1px solid transparent; border-radius:999px;
  padding:6px 12px; cursor:pointer; transition:color .18s cubic-bezier(.3,.8,.3,1);
}
.opcion:hover{ color:var(--color-texto); }
.opcion[aria-pressed="true"]{ color:var(--color-acento); border-color:var(--color-acento); }
.opcion:focus-visible{ outline:2px solid var(--color-acento); outline-offset:2px; }

.hoja{
  flex:1; padding:28px; display:flex; flex-direction:column; gap:26px;
  background-image:
    linear-gradient(var(--color-borde-celda) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-borde-celda) 1px,transparent 1px);
  background-size:var(--trama-paso) var(--trama-paso);
}
.seccion{ display:flex; flex-direction:column; gap:16px; }
.seccion-cabeza{ display:flex; flex-direction:column; gap:6px; }
.seccion-cabeza h2{ font-size:20px; font-weight:600; }
.seccion-cabeza .apoyo{ max-width:70ch; }

/* ── Tarjetas ───────────────────────────────────────────────── */
.tarjeta{ border:1px solid var(--color-borde); padding:18px;
          background:var(--color-superficie); border-radius:var(--radio-solido); }
.rejilla-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rejilla-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pila{ display:flex; flex-direction:column; gap:12px; }

.ind{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ind-cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.explica{ flex:none; width:17px; height:17px; border-radius:999px;
  border:1px solid var(--color-borde); background:var(--color-campo);
  color:var(--color-texto-suave); font:600 11px/15px var(--font-sans);
  text-align:center; cursor:help; }
.explica:focus-visible{ outline:2px solid var(--color-acento); outline-offset:2px; }
.ind-cifra{ font-size:31px; font-weight:300; line-height:1; }
.ind-cifra.chica{ font-size:24px; }
.ind-ref{ font-size:var(--letra-rotulo); color:var(--color-texto-suave); line-height:1.45; }

/* ── Pildoras y huecos ──────────────────────────────────────── */
.pildora{ display:inline-block; font-size:12px; font-weight:600; border-radius:999px;
          padding:2px 9px; white-space:nowrap; }
.p-bien{ background:color-mix(in srgb,var(--color-ok) 17%,transparent);     color:var(--color-ok); }
.p-ojo{  background:color-mix(in srgb,var(--color-alerta) 17%,transparent); color:var(--color-alerta); }
.p-mal{  background:color-mix(in srgb,var(--color-mal) 17%,transparent);    color:var(--color-mal); }
.p-sin{  background:color-mix(in srgb,var(--color-neutro) 16%,transparent); color:var(--color-neutro); }

/* Un hueco NO es una tarjeta que desaparece, y NUNCA es un cero. */
.sin-dato{
  border:1px dashed var(--color-borde-celda); border-radius:8px; color:var(--color-neutro);
  background-image:repeating-linear-gradient(45deg,var(--color-borde-celda) 0 1px,transparent 1px 7px);
  padding:13px 15px; font-size:var(--letra-apoyo);
}
.sin-dato strong{ color:var(--color-texto-suave); font-weight:600; }

/* ── Tablas ─────────────────────────────────────────────────── */
.marco-tabla{ overflow-x:auto; border:1px solid var(--color-borde); border-radius:10px;
              background:var(--color-superficie); }
table{ border-collapse:collapse; width:100%; min-width:600px; }
caption{ text-align:left; padding:14px 16px 0; }
th,td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--color-borde-celda); }
thead th{ font-size:var(--letra-rotulo); letter-spacing:.11em; text-transform:uppercase;
          font-weight:500; color:var(--color-texto-suave); background:var(--color-celda); }
tbody tr:hover{ background:var(--color-realce); }
tbody tr:last-child td{ border-bottom:none; }
tfoot td{ border-top:1px solid var(--color-borde); font-weight:600; background:var(--color-celda); }
.unidad{ display:flex; align-items:center; gap:10px; }
.marca-area{ width:3px; height:19px; border-radius:2px; flex:none; }

/* ── Formularios y botones ──────────────────────────────────── */
.campo{ display:flex; flex-direction:column; gap:6px; }
input[type=email],input[type=password],input[type=text]{
  font:400 var(--letra-base)/1.4 var(--font-sans);
  background:var(--color-campo); color:var(--color-texto);
  border:1px solid var(--color-borde); border-radius:var(--radio-interno);
  padding:11px 13px; width:100%;
}
input:focus-visible{ outline:2px solid var(--color-acento); outline-offset:1px; }
/* Cada boton lleva su NOMBRE escrito. Nada de iconos solos. */
.boton{
  font:600 var(--letra-base)/1 var(--font-sans); cursor:pointer;
  background:var(--color-acento); color:var(--color-tinta);
  border:1px solid var(--color-acento); border-radius:var(--radio-interno);
  padding:12px 18px;
}
.boton.secundario{ background:none; color:var(--color-texto); border-color:var(--color-borde); }
.boton:focus-visible{ outline:2px solid var(--color-acento); outline-offset:3px; }
.aviso{ border-left:2px solid var(--color-mal); padding:2px 0 2px 14px;
        font-size:var(--letra-apoyo); color:var(--color-mal); }
.nota{ border-left:2px solid var(--color-acento); padding:2px 0 2px 15px;
       font-size:var(--letra-apoyo); color:var(--color-texto-suave); max-width:72ch; }

/* ── Entrar ─────────────────────────────────────────────────── */
.puerta{ min-height:100vh; display:grid; place-items:center; padding:24px;
  background-image:
    linear-gradient(var(--color-borde-celda) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-borde-celda) 1px,transparent 1px);
  background-size:var(--trama-paso) var(--trama-paso); }
.puerta form{ width:100%; max-width:392px; display:flex; flex-direction:column; gap:16px; }
.puerta .logo{ width:170px; height:82px; margin:0 auto 4px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
/* La adaptacion a pantallas chicas va AL FINAL, no pantalla por pantalla. */
@media (max-width:1000px){ .rejilla-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:820px){
  .marco{ grid-template-columns:1fr; }
  .lateral{ position:static; height:auto; flex-direction:row; align-items:center;
            flex-wrap:wrap; gap:14px; border-right:none;
            border-bottom:1px solid var(--color-borde); }
  .menu{ flex-direction:row; flex-wrap:wrap; gap:2px 14px; }
  .quien{ margin-top:0; border-top:none; padding-top:0; }
  .rejilla-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .rejilla-4{ grid-template-columns:1fr; }
  .hoja,.barra{ padding-left:16px; padding-right:16px; }
}