/* ============================================================================
   Zeus — sistema de diseño
   Base de datos abierta de natación de carreras en México.
   Paleta: blanco, negro, azul, verde, naranja. Todos los pares de texto en AA+.
   Espaciado en múltiplos de 8. Reglas completas en docs/DISENO.md.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* superficies */
  --blanco:#FFFFFF;
  --papel:#F5F7F9;
  --hover:#EFF2F5;
  --fila:#FAFBFC;

  /* texto */
  --negro:#111413;        /* 18.5:1 AAA */
  --gris-1:#454A48;       /*  9.0:1 AAA */
  --gris-2:#68706D;       /*  5.2:1 AA  */

  /* líneas */
  --linea:#E2E6EA;
  --linea-fuerte:#C8CFD5;

  /* acentos semánticos */
  --azul:#0A57C2;         /* 6.7:1  acción, enlaces */
  --azul-osc:#08419A;
  --azul-fondo:#EAF1FD;
  --verde:#0B7238;        /* 6.0:1  verificado, récord, mejora */
  --verde-fondo:#E6F4EC;
  --naranja:#B84A05;      /* 5.2:1  mejor marca, aportes */
  --naranja-fondo:#FEF0E4;
  --naranja-luz:#FFF3D6;
  --rojo:#B3261E;         /* 6.4:1  error, descalificación */
  --rojo-fondo:#FCEBE9;

  /* marca (del logo): marino + oro, solo para el hero oscuro y acentos puntuales */
  --marino:#052447;
  --marino-2:#0C3B73;
  --marino-3:#0A2E5C;
  --oro:#E8B84B;
  --oro-claro:#F6D68A;

  /* espaciado: múltiplos de 8 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  /* forma */
  --r-s:8px; --r:10px; --r-l:12px; --r-full:999px;
  --sombra:0 1px 2px rgba(17,20,19,.05), 0 1px 3px rgba(17,20,19,.04);
  --sombra-alta:0 4px 14px rgba(17,20,19,.09), 0 1px 3px rgba(17,20,19,.05);
  --foco:0 0 0 3px var(--blanco), 0 0 0 5px var(--azul);

  --ancho:1360px;
  --nav-h:60px;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ------------------------------------------------------------- 2. BASE */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  overflow-x:hidden;
  font-family:var(--sans);background:var(--papel);color:var(--negro);
  line-height:1.55;letter-spacing:-.008em;font-variation-settings:"wght" 400;
  min-height:100vh;
}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-osc);text-decoration:underline;text-underline-offset:2px}
img,svg{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--r-s);position:relative;z-index:1}
[hidden]{display:none!important}

h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.25}
h1{font-size:1.75rem;font-variation-settings:"wght" 700}
h2{font-size:1.25rem;font-variation-settings:"wght" 660}
h3{font-size:1rem;font-variation-settings:"wght" 640}

/* texto solo para lectores de pantalla */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.saltar{
  position:absolute;left:-9999px;top:var(--e2);z-index:200;background:var(--azul);color:var(--blanco);
  padding:var(--e2) var(--e4);border-radius:var(--r-s);
}
.saltar:focus{left:var(--e4)}

.env{max-width:var(--ancho);margin:0 auto;padding:0 var(--e5)}
@media(max-width:720px){.env{padding:0 var(--e4)}}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1}

/* ------------------------------------------------- 3. NAVEGACIÓN */
.nav{
  background:var(--blanco);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:60;
}
.nav .in{display:flex;align-items:center;gap:var(--e2);height:var(--nav-h)}

.marca{display:flex;align-items:center;gap:var(--e2);margin-right:var(--e4);flex:none}
.marca:hover{text-decoration:none}
.marca .ico{width:30px;height:auto;object-fit:contain;flex:none}
.marca .txt{font-size:1.125rem;font-variation-settings:"wght" 700;letter-spacing:-.035em;color:var(--negro)}

.menu{display:flex;gap:2px;flex:none}
.menu a{
  padding:var(--e2) var(--e3);border-radius:var(--r-s);color:var(--gris-1);
  font-size:.9375rem;font-variation-settings:"wght" 500;white-space:nowrap;
}
.menu a:hover{background:var(--hover);color:var(--negro);text-decoration:none}
.menu a[aria-current="page"]{color:var(--azul);background:var(--azul-fondo)}

/* buscador compacto en la barra */
.nav-buscar{flex:1;max-width:380px;margin:0 var(--e3);position:relative}
.nav-buscar input[type=search]{
  width:100%;height:36px;min-height:36px;padding:0 var(--e3) 0 40px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r-full);background:var(--papel);font-family:inherit;font-size:.875rem;color:var(--negro);
}
.nav-buscar input[type=search]:focus{outline:none;box-shadow:var(--foco);background:var(--blanco);border-color:var(--azul)}
.nav-buscar .lupa{position:absolute;left:13px;top:10px;width:16px;height:16px;opacity:.45;pointer-events:none}

.nav-der{margin-left:auto;display:flex;align-items:center;gap:var(--e2);flex:none}
/* el botón hamburguesa abre el sidebar con el menú completo: siempre visible,
   no solo en móvil, para que el header quede corto y todo lo demás viva ahí. */
.hamb{display:flex;width:40px;height:40px;border:1px solid var(--linea-fuerte);background:var(--blanco);
  border-radius:var(--r-s);cursor:pointer;align-items:center;justify-content:center;flex:none}
.hamb:hover{background:var(--hover)}
.hamb span{display:block;width:16px;height:2px;background:var(--negro);border-radius:2px;position:relative}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--negro);border-radius:2px}
.hamb span::before{top:-5px} .hamb span::after{top:5px}

@media(max-width:1080px){.nav-buscar{display:none}}
@media(max-width:640px){.menu{display:none}}

/* sidebar: el menú completo, se abre con el botón hamburguesa en cualquier tamaño */
.cajon{
  position:fixed;inset:0;z-index:90;display:none;
}
.cajon.abierto{display:block}
.cajon .velo{position:absolute;inset:0;background:rgba(17,20,19,.45)}
.cajon .hoja{
  position:absolute;top:0;left:0;bottom:0;width:min(300px,86vw);background:var(--blanco);
  padding:var(--e3);overflow-y:auto;display:flex;flex-direction:column;gap:var(--e1);
  box-shadow:var(--sombra-alta);
}
.hoja-cab{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e2) var(--e3);margin-bottom:var(--e2);border-bottom:1px solid var(--linea)}
.hoja-cab img{width:26px;height:auto}
.hoja-cab .txt{font-size:1.0625rem;font-variation-settings:"wght" 700;letter-spacing:-.035em;color:var(--negro)}
.hoja-cab .cerrar{margin-left:auto}
.cajon .hoja a{padding:var(--e3);border-radius:var(--r-s);color:var(--negro);font-variation-settings:"wght" 500}
.cajon .hoja a:hover{background:var(--hover);text-decoration:none}
.cajon .hoja a[aria-current="page"]{color:var(--azul);background:var(--azul-fondo)}

/* menú de perfil */
.perfil{position:relative}
.perfil-b{
  display:flex;align-items:center;gap:var(--e2);padding:var(--e1) var(--e2) var(--e1) var(--e1);
  border:1px solid var(--linea-fuerte);background:var(--blanco);border-radius:var(--r-full);cursor:pointer;
  font-family:inherit;font-size:.875rem;color:var(--negro);min-height:38px;
}
.perfil-b:hover{background:var(--hover)}
.perfil-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra-alta);
  padding:var(--e1);display:none;z-index:70;
}
.perfil-menu.abierto{display:block}
.perfil-menu .cab{padding:var(--e3);border-bottom:1px solid var(--linea);margin-bottom:var(--e1)}
.perfil-menu .cab .n{font-variation-settings:"wght" 600;font-size:.9375rem}
.perfil-menu .cab .m{font-family:var(--mono);color:var(--naranja);font-size:.8125rem;font-weight:600;margin-top:2px}
.perfil-menu a,.perfil-menu button{
  display:block;width:100%;text-align:left;padding:var(--e2) var(--e3);border:none;background:none;
  font-family:inherit;font-size:.875rem;color:var(--negro);border-radius:var(--r-s);cursor:pointer;
}
.perfil-menu a:hover,.perfil-menu button:hover{background:var(--hover);text-decoration:none}
.perfil-menu .sep{height:1px;background:var(--linea);margin:var(--e1) 0}

/* -------------------------------------------------------- 4. CONTROLES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:inherit;font-size:.9375rem;font-variation-settings:"wght" 560;
  min-height:40px;padding:var(--e2) var(--e4);border-radius:var(--r-s);
  border:1px solid var(--linea-fuerte);background:var(--blanco);color:var(--negro);
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn:hover{background:var(--hover);text-decoration:none;color:var(--negro)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pri{background:var(--azul);border-color:var(--azul);color:var(--blanco)}
.btn.pri:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:var(--blanco)}
.btn.verde{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.btn.verde:hover{background:#095C2D;border-color:#095C2D;color:var(--blanco)}
.btn.g{min-height:48px;padding:var(--e3) var(--e5);font-size:1rem}
.btn.ch{min-height:32px;padding:var(--e1) var(--e3);font-size:.8125rem}
.btn.ancho{width:100%}
.btn-ico{
  width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--linea-fuerte);background:var(--blanco);
  border-radius:var(--r-s);cursor:pointer;color:var(--gris-1);font-family:inherit;font-size:1.125rem;
}
.btn-ico:hover{background:var(--hover);color:var(--negro)}

label{display:block;font-size:.875rem;color:var(--negro);margin-bottom:var(--e1);font-variation-settings:"wght" 550}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;background:var(--blanco);border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
  padding:var(--e2) var(--e3);color:var(--negro);font-family:inherit;font-size:.9375rem;min-height:42px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gris-2) 50%),linear-gradient(135deg,var(--gris-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--e6)}
.campo{margin-bottom:var(--e4)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
@media(max-width:560px){.g2{grid-template-columns:1fr}}
.ayuda{font-size:.8125rem;color:var(--gris-2);margin-top:var(--e1)}
.err-campo{font-size:.8125rem;color:var(--rojo);margin-top:var(--e1);font-variation-settings:"wght" 500}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rojo)}

/* casillas */
.check{display:flex;align-items:center;gap:var(--e2);cursor:pointer;font-size:.875rem;
  font-variation-settings:"wght" 400;margin-bottom:0;padding:var(--e1) 0;min-height:32px}
.check input{width:16px;height:16px;min-height:0;accent-color:var(--azul);cursor:pointer;flex:none}
.check .cuenta{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--gris-2)}

/* ---------------------------------------------------- 5. BÚSQUEDA GLOBAL */
.buscador{position:relative;max-width:660px}
.buscador .caja{
  display:flex;background:var(--blanco);border:1px solid var(--linea-fuerte);
  border-radius:var(--r-full);overflow:hidden;box-shadow:var(--sombra);
}
.buscador .caja:focus-within{border-color:var(--azul);box-shadow:var(--foco)}
.buscador input{
  flex:1;border:none;background:none;padding:var(--e3) var(--e5);font-size:1rem;min-height:52px;
  color:var(--negro);border-radius:0;
}
.buscador input:focus{box-shadow:none}
.buscador .limpiar{
  border:none;background:none;padding:0 var(--e3);cursor:pointer;color:var(--gris-2);font-size:1.125rem;
  display:none;
}
.buscador .limpiar:hover{color:var(--negro)}
.buscador .caja.con-texto .limpiar{display:block}
.buscador .ir{
  border:none;background:var(--azul);color:var(--blanco);padding:0 var(--e5);cursor:pointer;
  font-family:inherit;font-size:.9375rem;font-variation-settings:"wght" 600;
}
.buscador .ir:hover{background:var(--azul-osc)}

.cats{display:flex;gap:var(--e2);margin-top:var(--e3);flex-wrap:wrap}
.cat{
  padding:var(--e1) var(--e3);border-radius:var(--r-full);border:1px solid var(--linea-fuerte);
  background:var(--blanco);font-family:inherit;font-size:.875rem;color:var(--gris-1);cursor:pointer;min-height:32px;
}
.cat:hover{background:var(--hover);color:var(--negro)}
.cat[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:var(--blanco)}

.sugerencias{
  position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra-alta);
  max-height:min(460px,70vh);overflow-y:auto;z-index:65;display:none;padding:var(--e1);
}
.sugerencias.abierto{display:block}
.sug-grupo{padding:var(--e2) var(--e3) var(--e1);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris-2);font-variation-settings:"wght" 650}
.sug{
  display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e3);border-radius:var(--r-s);
  cursor:pointer;color:var(--negro);
}
.sug:hover,.sug.sel{background:var(--azul-fondo);text-decoration:none}
.sug .txt{min-width:0;flex:1}
.sug .n{font-variation-settings:"wght" 550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug .d{font-size:.8125rem;color:var(--gris-2)}
.sug .tipo{font-size:.75rem;color:var(--gris-2);font-family:var(--mono)}
.sug-vacio{padding:var(--e5);text-align:center;color:var(--gris-2);font-size:.9375rem}
.ejemplos{margin-top:var(--e3);font-size:.875rem;color:var(--gris-2)}
.ejemplos a{margin-right:var(--e3);white-space:nowrap}

/* ------------------------------------------------------- 6. AVATARES */
.av{
  width:36px;height:36px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  font-size:.75rem;font-variation-settings:"wght" 650;background:var(--azul-fondo);color:var(--azul);
}
.av.v{background:var(--verde-fondo);color:var(--verde)}
.av.n{background:var(--naranja-fondo);color:var(--naranja)}
.av.g{width:72px;height:72px;font-size:1.375rem}
.escudo{
  width:26px;height:26px;border-radius:var(--r-s);flex:none;display:grid;place-items:center;
  font-size:.625rem;font-variation-settings:"wght" 700;background:var(--hover);color:var(--gris-1);
}
.escudo.g{width:64px;height:64px;font-size:1.125rem;border-radius:var(--r)}
.persona{display:flex;align-items:center;gap:var(--e3);min-width:0}
.persona > span:not([class]){min-width:0}          /* columna de texto */
.persona .nm{display:block;font-variation-settings:"wght" 550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona .sub{display:block;font-size:.8125rem;color:var(--gris-2);line-height:1.35}

/* ------------------------------------------------- 7. INSIGNIAS DE ESTADO */
/* nunca solo color: siempre llevan texto, y las de verificación llevan glifo */
.ins{
  display:inline-flex;align-items:center;gap:var(--e1);font-size:.75rem;
  font-variation-settings:"wght" 620;padding:2px var(--e2);border-radius:var(--r-full);white-space:nowrap;
}
.ins .g{font-family:var(--mono);font-size:.6875rem}
.ins.oficial{background:var(--azul-fondo);color:var(--azul)}
.ins.verificado{background:var(--verde-fondo);color:var(--verde)}
.ins.manual{background:var(--hover);color:var(--gris-1)}
.ins.pendiente{background:var(--naranja-fondo);color:var(--naranja)}
.ins.corregido{background:var(--azul-fondo);color:var(--azul)}
.ins.duplicado{background:var(--naranja-luz);color:var(--naranja)}
.ins.dq{background:var(--rojo-fondo);color:var(--rojo)}
.ins.record{background:var(--verde-fondo);color:var(--verde)}
.ins.pb{background:var(--naranja-fondo);color:var(--naranja)}

/* ------------------------------------------------------- 8. TARJETAS */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;min-width:0;
}
.tarjeta > .cab{
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
}
.tarjeta > .cab h2,.tarjeta > .cab h3{font-size:1rem;font-variation-settings:"wght" 640}
.tarjeta > .cab .der{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}
.tarjeta > .cuerpo{padding:var(--e4)}
.tarjeta > .pie{padding:var(--e3) var(--e4);border-top:1px solid var(--linea);background:var(--fila);
  font-size:.8125rem;color:var(--gris-2)}

/* Un ancestro con overflow:hidden convierte al elemento en contenedor de scroll
   y anula position:sticky. Las tarjetas con encabezado adherente usan esta
   variante y redondean el thead a mano para conservar la esquina. */
.tarjeta.sin-recorte{overflow:visible}
.tarjeta.sin-recorte thead th:first-child{border-top-left-radius:var(--r)}
.tarjeta.sin-recorte thead th:last-child{border-top-right-radius:var(--r)}

.seccion{padding:var(--e6) 0}
.seccion-cab{display:flex;align-items:baseline;gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}
.seccion-cab .mas{margin-left:auto;font-size:.9375rem;font-variation-settings:"wght" 550}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:var(--e3)}
.tarjeta-enlace{display:block;color:inherit;transition:box-shadow .14s,transform .14s}
.tarjeta-enlace:hover{box-shadow:var(--sombra-alta);transform:translateY(-1px);text-decoration:none;color:inherit}

/* métricas */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr));gap:var(--e3)}
.metrica{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e3) var(--e4)}
.metrica .v{font-family:var(--mono);font-size:1.5rem;font-weight:600;line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metrica .l{font-size:.8125rem;color:var(--gris-2);margin-top:var(--e1)}
.metrica.a .v{color:var(--azul)} .metrica.v .v{color:var(--verde)} .metrica.n .v{color:var(--naranja)}

/* ---------------------------------------------------------- 9. TABLAS */
.tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* sin scroll propio en escritorio: así el thead adherente se ancla a la página */
@media(min-width:841px){.tabla-env{overflow-x:visible}}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
caption{text-align:left;padding:0 0 var(--e2);color:var(--gris-2);font-size:.875rem}
thead th{
  font-size:.75rem;font-variation-settings:"wght" 620;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris-2);text-align:left;padding:var(--e3) var(--e4);background:var(--fila);
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
.tabla-sticky thead th{position:sticky;top:var(--nav-h);z-index:10}
th.num,td.num{text-align:right}
tbody td{padding:var(--e2) var(--e4);height:52px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)}
tr.clic{cursor:pointer}
tr.destacada td{background:var(--naranja-luz)}
tr.destacada:hover td{background:#FFEBBE}
td .tiempo{font-family:var(--mono);font-size:1rem;font-variation-settings:"wght" 620;font-variant-numeric:tabular-nums}
td .tiempo .cs{color:var(--gris-2)}
.pos{width:48px;text-align:center;color:var(--gris-2);font-family:var(--mono);font-weight:600}
.compacta tbody td{height:44px;padding-top:var(--e1);padding-bottom:var(--e1)}
.sort{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;display:inline-flex;gap:var(--e1);align-items:center;text-transform:inherit;letter-spacing:inherit}
.sort:hover{color:var(--negro)}
.sort .fl{font-family:var(--mono);opacity:.4;font-size:.625rem}
.sort[aria-sort] .fl{opacity:1;color:var(--azul)}

/* tarjetas de resultado en móvil */
.res-cards{display:none;flex-direction:column;gap:var(--e2)}
.res-card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e3) var(--e4)}
.res-card .l1{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e2)}
.res-card .l1 .tiempo{margin-left:auto;font-family:var(--mono);font-size:1.125rem;font-variation-settings:"wght" 650}
.res-card .l2{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);font-size:.8125rem;color:var(--gris-2)}
.res-card details{margin-top:var(--e2);border-top:1px solid var(--linea);padding-top:var(--e2)}
.res-card summary{font-size:.8125rem;color:var(--azul);cursor:pointer;min-height:32px;display:flex;align-items:center}
.res-card dl{display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e3);font-size:.8125rem;margin-top:var(--e2)}
.res-card dt{color:var(--gris-2)}
@media(max-width:840px){
  .ocultar-movil{display:none}
  .res-cards{display:flex}
  /* con tarjetas visibles la tabla sobra: ocultarla evita el scroll lateral */
  .con-tarjetas .tabla-env{display:none}
}

/* --------------------------------------------------- 10. EXPLORADOR */
.explorador{display:grid;grid-template-columns:264px minmax(0,1fr);gap:var(--e5);align-items:start}
.explorador.sin-filtros{grid-template-columns:1fr}
@media(max-width:1000px){.explorador{grid-template-columns:minmax(0,1fr)}}

.filtros{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  position:sticky;top:calc(var(--nav-h) + var(--e4));max-height:calc(100vh - var(--nav-h) - var(--e6));
  overflow-y:auto;
}
.filtros .cab{padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:var(--e2)}
.filtros .cab h2{font-size:.9375rem}
.filtros .cab .limpiar{margin-left:auto;font-size:.8125rem;background:none;border:none;color:var(--azul);cursor:pointer;font-family:inherit}
.f-grupo{border-bottom:1px solid var(--linea)}
.f-grupo:last-child{border-bottom:0}
.f-grupo > summary{
  padding:var(--e3) var(--e4);cursor:pointer;font-size:.875rem;font-variation-settings:"wght" 580;
  display:flex;align-items:center;gap:var(--e2);list-style:none;min-height:44px;
}
.f-grupo > summary::-webkit-details-marker{display:none}
.f-grupo > summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--gris-2)}
.f-grupo[open] > summary::after{content:"–"}
.f-grupo > summary:hover{background:var(--fila)}
.f-cuerpo{padding:0 var(--e4) var(--e3);max-height:230px;overflow-y:auto}
.chips{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e3)}
.chip{
  display:inline-flex;align-items:center;gap:var(--e2);padding:var(--e1) var(--e2) var(--e1) var(--e3);
  background:var(--azul-fondo);color:var(--azul);border-radius:var(--r-full);font-size:.8125rem;
  font-variation-settings:"wght" 550;
}
.chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 var(--e1);border-radius:var(--r-full)}
.chip button:hover{background:rgba(10,87,194,.15)}

.barra-res{
  display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3);
}
.barra-res .cuenta{font-size:.9375rem;color:var(--gris-1)}
.barra-res .cuenta b{font-variation-settings:"wght" 650;color:var(--negro)}
.barra-res .der{margin-left:auto;display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;min-width:0}
@media(max-width:640px){
  .barra-res{flex-direction:column;align-items:stretch}
  .barra-res .der{margin-left:0;justify-content:space-between}
  .barra-res select{flex:1;min-width:0}
}
.barra-res select{min-height:36px;font-size:.875rem;padding-top:0;padding-bottom:0;width:auto}
.vista{display:flex;border:1px solid var(--linea-fuerte);border-radius:var(--r-s);overflow:hidden}
.vista button{border:none;background:var(--blanco);padding:0 var(--e3);min-height:36px;cursor:pointer;
  font-family:inherit;font-size:.8125rem;color:var(--gris-1)}
.vista button[aria-pressed="true"]{background:var(--azul);color:var(--blanco)}

.paginacion{display:flex;align-items:center;gap:var(--e2);justify-content:center;padding:var(--e4);flex-wrap:wrap}
.paginacion .info{color:var(--gris-2);font-size:.875rem;margin:0 var(--e3)}
.pag-b{min-width:38px;min-height:38px;border:1px solid var(--linea-fuerte);background:var(--blanco);
  border-radius:var(--r-s);cursor:pointer;font-family:var(--mono);font-size:.875rem;color:var(--negro)}
.pag-b:hover:not(:disabled){background:var(--hover)}
.pag-b[aria-current="true"]{background:var(--azul);border-color:var(--azul);color:var(--blanco)}
.pag-b:disabled{opacity:.4;cursor:not-allowed}

/* botón flotante de filtros en móvil */
.filtros-movil{display:none}
@media(max-width:1000px){
  .filtros{
    position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;z-index:80;border-radius:var(--r-l) var(--r-l) 0 0;
    transform:translateY(100%);transition:transform .18s;box-shadow:var(--sombra-alta);
  }
  .filtros.abierto{transform:translateY(0)}
  .filtros-movil{display:flex;position:sticky;bottom:var(--e4);justify-content:center;z-index:50;pointer-events:none}
  .filtros-movil .btn{pointer-events:auto;box-shadow:var(--sombra-alta)}
}

/* ------------------------------------------------------- 11. PESTAÑAS */
.pestanas{display:flex;gap:var(--e1);border-bottom:1px solid var(--linea);overflow-x:auto;margin-bottom:var(--e4)}
.pestanas button{
  border:none;background:none;padding:var(--e3) var(--e4);font-family:inherit;font-size:.9375rem;
  color:var(--gris-2);cursor:pointer;font-variation-settings:"wght" 550;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;min-height:44px;
}
.pestanas button:hover{color:var(--negro)}
.pestanas button[aria-selected="true"]{color:var(--azul);border-color:var(--azul)}

/* --------------------------------------------------- 12. PERFILES */
.perfil-cab{background:var(--blanco);border-bottom:1px solid var(--linea);padding:var(--e5) 0 0}
.perfil-top{display:flex;gap:var(--e4);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--e4)}
.perfil-top .datos{flex:1;min-width:220px}
.perfil-top h1{margin-bottom:var(--e1)}
.perfil-meta{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);color:var(--gris-1);font-size:.9375rem;align-items:center}
.perfil-meta .sep{color:var(--linea-fuerte)}
.perfil-acc{display:flex;gap:var(--e2);flex-wrap:wrap}
.migas{font-size:.875rem;color:var(--gris-2);margin-bottom:var(--e3)}
.migas a{color:var(--gris-2)}
.migas .s{margin:0 var(--e2)}

/* progreso simple en SVG */
.grafica{width:100%;height:200px;background:var(--blanco)}
.grafica .eje{stroke:var(--linea);stroke-width:1}
.grafica .rejilla-l{stroke:var(--linea);stroke-width:1;stroke-dasharray:3 3}
.grafica .linea{fill:none;stroke:var(--azul);stroke-width:2}
.grafica .punto{fill:var(--blanco);stroke:var(--azul);stroke-width:2}
.grafica .punto.mejor{fill:var(--verde);stroke:var(--verde)}
.grafica text{font-size:11px;fill:var(--gris-2);font-family:var(--mono)}

/* ------------------------------------------------------- 13. ESTADOS */
.estado{padding:var(--e7) var(--e5);text-align:center;color:var(--gris-2)}
.estado .t{font-size:1.0625rem;color:var(--negro);font-variation-settings:"wght" 620;margin-bottom:var(--e2)}
.estado .d{font-size:.9375rem;max-width:44ch;margin:0 auto var(--e4)}
.estado.error .t{color:var(--rojo)}

.esqueleto{background:linear-gradient(90deg,var(--hover) 25%,var(--fila) 37%,var(--hover) 63%);
  background-size:400% 100%;animation:brillo 1.3s ease infinite;border-radius:var(--r-s);height:14px}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
.esq-fila{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea)}

.aviso{
  display:flex;gap:var(--e3);padding:var(--e3) var(--e4);border-radius:var(--r-s);font-size:.875rem;
  border-left:3px solid;margin-bottom:var(--e4);
}
.aviso.info{background:var(--azul-fondo);border-color:var(--azul);color:var(--azul-osc)}
.aviso.ok{background:var(--verde-fondo);border-color:var(--verde);color:var(--verde)}
.aviso.alerta{background:var(--naranja-fondo);border-color:var(--naranja);color:var(--naranja)}
.aviso.error{background:var(--rojo-fondo);border-color:var(--rojo);color:var(--rojo)}

/* avisos flotantes */
.tostadas{position:fixed;right:var(--e4);bottom:var(--e4);z-index:120;display:flex;flex-direction:column;gap:var(--e2);max-width:min(400px,90vw)}
.tostada{
  background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--azul);
  border-radius:var(--r-s);box-shadow:var(--sombra-alta);padding:var(--e3) var(--e4);
  display:flex;gap:var(--e3);align-items:flex-start;animation:entra .16s ease-out;
}
.tostada.ok{border-left-color:var(--verde)}
.tostada.error{border-left-color:var(--rojo)}
.tostada.alerta{border-left-color:var(--naranja)}
.tostada .c{flex:1;font-size:.875rem}
.tostada .c b{display:block;font-variation-settings:"wght" 620;margin-bottom:2px}
.tostada button{background:none;border:none;cursor:pointer;color:var(--gris-2);font-size:1rem;padding:0 var(--e1)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- 14. MODAL */
.modal{
  position:fixed;inset:0;background:rgba(17,20,19,.5);z-index:110;display:none;
  align-items:flex-start;justify-content:center;padding:var(--e7) var(--e4);overflow-y:auto;
}
.modal.abierto{display:flex}
.modal .panel{
  background:var(--blanco);border-radius:var(--r-l);box-shadow:var(--sombra-alta);
  padding:var(--e5);max-width:440px;width:100%;position:relative;
}
.modal .x{position:absolute;top:var(--e3);right:var(--e3);width:36px;height:36px;border:none;background:none;
  border-radius:var(--r-full);cursor:pointer;color:var(--gris-2);font-size:1.25rem;line-height:1}
.modal .x:hover{background:var(--hover);color:var(--negro)}
.modal h2{margin-bottom:var(--e4)}
.mtabs{display:flex;gap:var(--e4);border-bottom:1px solid var(--linea);margin-bottom:var(--e4)}
.mtabs button{background:none;border:none;border-bottom:2px solid transparent;padding:0 0 var(--e3);
  font-family:inherit;font-size:1rem;color:var(--gris-2);cursor:pointer;font-variation-settings:"wght" 570;margin-bottom:-1px}
.mtabs button[aria-selected="true"]{color:var(--azul);border-color:var(--azul)}

/* ------------------------------------------------------- 15. APORTAR */
.pasos{display:flex;gap:var(--e2);margin-bottom:var(--e5);flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:var(--e2);font-size:.875rem;color:var(--gris-2);flex:1;min-width:120px}
.paso .n{
  width:26px;height:26px;border-radius:var(--r-full);background:var(--hover);color:var(--gris-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:.75rem;font-weight:600;flex:none;
}
.paso.act{color:var(--negro);font-variation-settings:"wght" 600}
.paso.act .n{background:var(--azul);color:var(--blanco)}
.paso.hecho .n{background:var(--verde);color:var(--blanco)}
.paso.hecho{color:var(--gris-1)}

.zona{
  border:2px dashed var(--linea-fuerte);border-radius:var(--r);padding:var(--e7) var(--e4);text-align:center;
  cursor:pointer;background:var(--fila);transition:background .14s,border-color .14s;
}
.zona:hover,.zona.on{background:var(--azul-fondo);border-color:var(--azul)}
.zona .t{font-size:1rem;color:var(--azul);font-variation-settings:"wght" 600}
.zona .d{color:var(--gris-2);font-size:.875rem;margin-top:var(--e1)}
.lista-arch{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e3)}
.arch{
  display:flex;align-items:center;gap:var(--e3);padding:var(--e3);border:1px solid var(--linea);
  border-radius:var(--r-s);background:var(--blanco);
}
.arch .n{flex:1;min-width:0;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch .p{font-family:var(--mono);font-size:.75rem;color:var(--gris-2)}
.barra{height:4px;background:var(--hover);border-radius:var(--r-full);overflow:hidden;margin-top:var(--e1)}
.barra i{display:block;height:100%;background:var(--azul);border-radius:var(--r-full);transition:width .2s}
.barra i.ok{background:var(--verde)}

.escala{width:100%;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--blanco)}
.escala td,.escala th{padding:var(--e3) var(--e4);height:auto;font-size:.9375rem;color:var(--gris-1)}
.escala th{background:none;text-transform:none;letter-spacing:normal;font-variation-settings:"wght" 450;
  border-bottom:1px solid var(--linea);text-align:left}
.escala td.m{font-family:var(--mono);text-align:right;color:var(--naranja);font-weight:600;width:100px}
.escala td.m.z{color:var(--gris-2);font-weight:400}
.rangos{display:flex;gap:var(--e1);flex-wrap:wrap}
.rango{flex:1;min-width:52px;padding:var(--e2) var(--e1);text-align:center;border-radius:var(--r-s);
  background:var(--blanco);border:1px solid var(--linea);font-family:var(--mono);font-size:.8125rem;
  font-weight:600;color:var(--gris-2)}
.rango.act{background:var(--verde);border-color:var(--verde);color:var(--blanco)}

/* -------------------------------------------------------- 16. PIE */
.pie{background:var(--blanco);border-top:1px solid var(--linea);padding:var(--e6) 0;margin-top:var(--e7)}
.pie .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--e5)}
@media(max-width:820px){.pie .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie .cols{grid-template-columns:1fr}}
.pie h3{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-2);margin-bottom:var(--e3)}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:var(--e2)}
.pie a{color:var(--gris-1);font-size:.9375rem}
.pie .nota{color:var(--gris-2);font-size:.875rem;line-height:1.7;margin-top:var(--e3)}
.pie .legal{border-top:1px solid var(--linea);margin-top:var(--e5);padding-top:var(--e4);color:var(--gris-2);font-size:.8125rem}

/* -------------------------------------------------- 17. UTILIDADES */
.pila{display:flex;flex-direction:column}
.pila.g2{gap:var(--e2)} .pila.g3{gap:var(--e3)} .pila.g4{gap:var(--e4)} .pila.g5{gap:var(--e5)}
.fila{display:flex;align-items:center}
.fila.g2{gap:var(--e2)} .fila.g3{gap:var(--e3)} .fila.g4{gap:var(--e4)}
.env-2col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--e5);align-items:start}
@media(max-width:1000px){.env-2col{grid-template-columns:minmax(0,1fr)}}
.txt-2{color:var(--gris-1)} .txt-3{color:var(--gris-2)}
.peq{font-size:.875rem} .mini{font-size:.8125rem}
.mt-4{margin-top:var(--e4)} .mt-5{margin-top:var(--e5)} .mb-4{margin-bottom:var(--e4)}
.centro{text-align:center}

/* -------------------------------------------- 18. OAUTH Y VISTA PREVIA */
.oauth{margin-bottom:var(--e4)}
.oauth-b{gap:var(--e2);font-size:.875rem}
.separador{display:flex;align-items:center;gap:var(--e3);margin:var(--e4) 0;color:var(--gris-2);font-size:.8125rem}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}

.vista-previa{position:relative;border-radius:var(--r);overflow:hidden;min-height:220px}
.vp-borroso{filter:blur(5px);user-select:none;pointer-events:none}
.vp-borroso table{width:100%}
.vp-muro{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--e5);
  background:linear-gradient(to bottom, rgba(245,247,249,.3) 0%, var(--papel) 58%);
}
.vp-muro .t{font-size:1.0625rem;color:var(--negro);font-variation-settings:"wght" 640;margin-bottom:var(--e2)}
.vp-muro .d{font-size:.9375rem;color:var(--gris-2);max-width:40ch}

/* -------------------------------------------- 19. PORTADA: MARKETING */

.beneficios{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
@media(max-width:820px){.beneficios{grid-template-columns:1fr}}
.beneficio{padding:var(--e4)}
.beneficio .ico{
  width:40px;height:40px;border-radius:var(--r-s);background:var(--verde-fondo);color:var(--verde);
  display:grid;place-items:center;font-size:1.125rem;margin-bottom:var(--e3);
}
.beneficio h3{font-size:.9375rem;margin-bottom:var(--e1)}
.beneficio p{font-size:.875rem;color:var(--gris-2);line-height:1.55}

.precio-cta{
  background:linear-gradient(175deg, var(--marino) 0%, var(--marino-3) 100%);
  color:var(--blanco);border-radius:var(--r-l);padding:var(--e6) var(--e5);
  text-align:center;
}
.precio-cta h2{
  color:transparent;margin-bottom:var(--e2);display:inline-block;font-size:1.5rem;
  background:linear-gradient(100deg,#fff 8%,var(--oro-claro) 60%,var(--oro) 95%);
  -webkit-background-clip:text;background-clip:text;
}
.precio-cta p{color:#C6D2E4;max-width:56ch;margin:0 auto var(--e4);font-size:.9375rem;line-height:1.6}
.precio-cta p.mini{color:#93A5BE;margin-bottom:0}
.costos{display:flex;gap:var(--e4) var(--e5);justify-content:center;flex-wrap:wrap;margin:0 auto var(--e4);max-width:56ch}
.costos .item{display:inline-flex;align-items:center;gap:var(--e2);font-size:.8125rem;color:#C6D2E4;font-variation-settings:"wght" 550}
.costos .ico{font-size:1rem}
.precio-cta .btn.pri{
  min-height:48px;padding:var(--e3) var(--e5);font-size:1rem;
  background:var(--oro);border-color:var(--oro);color:var(--marino);
}
.precio-cta .btn.pri:hover{background:var(--oro-claro);border-color:var(--oro-claro)}

/* -------------------------------------------- 20. PORTADA: HERO OSCURO */
.hero-osc{
  position:relative;overflow:hidden;color:#fff;
  padding:var(--e7) 0 0;
  background:
    radial-gradient(1100px 560px at 12% -12%, var(--marino-2) 0%, transparent 62%),
    radial-gradient(820px 460px at 104% 4%, rgba(232,184,75,.16) 0%, transparent 58%),
    linear-gradient(175deg, var(--marino) 0%, var(--marino-3) 100%);
}
.hero-osc .env{position:relative;z-index:2}
.hero-osc h1{
  font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:"wght" 700;max-width:19ch;margin:0;
  background:linear-gradient(100deg,#fff 8%,var(--oro-claro) 55%,var(--oro) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-osc .sub{color:#C6D2E4;font-size:1.0625rem;max-width:58ch;line-height:1.65}
.hero-osc .buscador .caja{box-shadow:0 16px 40px rgba(2,10,25,.45)}
.hero-osc .cats .cat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#E4EAF3}
.hero-osc .cats .cat:hover{background:rgba(255,255,255,.15);color:#fff}
.hero-osc .cats .cat[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:var(--marino)}
.hero-osc .ejemplos{color:#93A5BE}
.hero-osc .ejemplos a{color:var(--oro-claro)}

.hero-marca{
  position:absolute;top:-8%;right:-6%;width:min(440px,42vw);height:auto;opacity:.12;pointer-events:none;z-index:1;
}
@media(max-width:720px){.hero-marca{display:none}}

.metricas-hero{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--e3);
  margin-top:var(--e6);
}
.metricas-hero .metrica{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);
  padding:var(--e4) var(--e3);
}
.metricas-hero .metrica .v{
  font-family:var(--mono);font-size:clamp(1.375rem,2.6vw,2.125rem);font-variation-settings:"wght" 650;
  letter-spacing:-.02em;color:var(--oro-claro);text-shadow:0 0 26px rgba(232,184,75,.4);
  font-variant-numeric:tabular-nums;
}
.metricas-hero .metrica .l{font-size:.8125rem;color:#AFBFD6;margin-top:var(--e1)}

.hero-ola{display:block;width:100%;height:auto;position:relative;z-index:2;margin-top:var(--e7)}
.hero-ola path{fill:var(--papel)}

/* -------------------------------------------- 21. PORTADA: SERVICIOS */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
@media(max-width:900px){.servicios{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.servicios{grid-template-columns:1fr}}
.servicio{padding:var(--e5) var(--e4)}
.servicio .ico{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  font-size:1.25rem;margin-bottom:var(--e3);
}
.servicio.a .ico{background:var(--azul-fondo);color:var(--azul)}
.servicio.v .ico{background:var(--verde-fondo);color:var(--verde)}
.servicio.n .ico{background:var(--naranja-fondo);color:var(--naranja)}
.servicio h3{font-size:1rem;margin-bottom:var(--e2)}
.servicio p{font-size:.875rem;color:var(--gris-2);line-height:1.6}

/* -------------------------------------------- 22. PORTADA: HECHO PARA */
.personas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
@media(max-width:900px){.personas{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.personas{grid-template-columns:1fr}}
.persona-card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e4)}
.persona-card .emo{
  width:38px;height:38px;border-radius:var(--r-full);background:var(--marino);color:var(--oro-claro);
  display:grid;place-items:center;font-size:1.0625rem;margin-bottom:var(--e3);font-variation-settings:"wght" 650;
}
.persona-card h3{font-size:.9375rem;margin-bottom:var(--e1)}
.persona-card p{font-size:.8125rem;color:var(--gris-2);line-height:1.55}

/* -------------------------------------------- 23. PORTADA: METROS/RECOMPENSAS */
.escalera{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e3);margin-top:var(--e5)}
@media(max-width:900px){.escalera{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.escalera{grid-template-columns:1fr 1fr}}
.escalon{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e4) var(--e3);text-align:center}
.escalon .m{font-family:var(--mono);font-size:1.0625rem;color:var(--marino);font-variation-settings:"wght" 650;font-variant-numeric:tabular-nums}
.escalon .b{font-size:.8125rem;color:var(--gris-2);margin-top:var(--e2);line-height:1.4;min-height:2.7em}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}