/* ==========================================================================
   Base — reset, tipografía y estructura de página
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}

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

body{
  font-family:var(--fuente);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
body.auth-pendiente{overflow:hidden;}
body.auth-pendiente main,body.auth-pendiente .pie,body.auth-pendiente .barra-nav,
body.auth-pendiente .barra-menu{display:none!important;}
body.auth-pendiente .barra-inner{justify-content:space-between;}

h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:650;letter-spacing:-.011em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;height:auto;}

a{color:var(--azul-700);text-decoration:none;}
a:hover{text-decoration:underline;}

button{font:inherit;color:inherit;}

/* Foco visible y consistente en todo el portal: requisito de accesibilidad,
   no adorno. Nunca se elimina sin reemplazarlo por otro indicador. */
:focus-visible{
  outline:3px solid var(--azul-500);
  outline-offset:2px;
  border-radius:var(--radio-sm);
}

/* Salto directo al contenido para quien navega con teclado o lector. */
.saltar{
  position:absolute;left:-9999px;top:0;
  background:var(--azul-900);color:var(--blanco);
  padding:var(--e3) var(--e4);border-radius:0 0 var(--radio) 0;
  z-index:100;
}
.saltar:focus{left:0;}

.contenedor{
  width:100%;
  max-width:var(--ancho-max);
  margin:0 auto;
  padding:0 var(--e5);
}

/* Sólo 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;
}

/* --- Vistas -------------------------------------------------------------
   El router alterna .activa; sólo una vista se muestra a la vez. */
.vista{display:none;}
.vista.activa{display:block;}

/* --- Barra superior ---------------------------------------------------- */
.barra{
  position:sticky;top:0;z-index:40;
  background:var(--azul-900);
  color:var(--blanco);
  box-shadow:var(--sombra);
}
.barra-inner{
  display:flex;align-items:center;gap:var(--e5);
  min-height:60px;
}
.barra-marca{
  display:flex;align-items:center;gap:var(--e3);
  font-weight:650;font-size:var(--t-small);
  letter-spacing:.01em;color:var(--blanco);
  background:none;border:0;padding:0;cursor:pointer;
  text-align:left;
}
.barra-marca:hover{text-decoration:none;opacity:.9;}
.barra-marca .escudo{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--radio-sm);
  background:var(--acento);color:var(--azul-900);
  font-weight:800;font-size:13px;
}
.barra-menu{
  display:none;margin-left:auto;width:42px;height:42px;
  align-items:center;justify-content:center;
  color:var(--blanco);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radio-sm);
  cursor:pointer;
}
.barra-menu:hover{background:rgba(255,255,255,.14);}
.barra-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.barra-nav{display:flex;gap:var(--e1);margin-left:auto;flex-wrap:wrap;}
.barra-nav button{
  background:transparent;border:0;color:var(--azul-100);
  padding:var(--e2) var(--e3);border-radius:var(--radio-sm);
  font-size:var(--t-small);cursor:pointer;
  transition:background var(--transicion),color var(--transicion);
}
.barra-nav button:hover{background:rgba(255,255,255,.1);color:var(--blanco);}
.barra-nav button[aria-current="page"]{
  background:rgba(255,255,255,.14);color:var(--blanco);font-weight:600;
}
.conexion-estado{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:7px 10px;border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radio-pill);background:rgba(255,255,255,.08);
  color:var(--azul-100);font-size:var(--t-micro);cursor:pointer;
}
.conexion-estado:hover{background:rgba(255,255,255,.14);color:var(--blanco);}
.conexion-punto{width:8px;height:8px;border-radius:50%;background:var(--gris-400);}
.conexion-estado[data-modo="vivo"] .conexion-punto{background:#58d68d;box-shadow:0 0 0 3px rgba(88,214,141,.18);}
.conexion-estado[data-modo="conectando"] .conexion-punto{background:var(--acento);}
.conexion-dialogo{
  width:min(520px,calc(100% - 32px));border:0;border-radius:var(--radio);
  padding:var(--e6);color:var(--texto);box-shadow:var(--sombra-xl);
}
.conexion-dialogo[open]{
  position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  z-index:100;margin:0;
}
body.auth-pendiente::after{
  content:"";position:fixed;inset:0;z-index:90;
  background:rgba(9,30,56,.72);backdrop-filter:blur(3px);
}
.conexion-dialogo::backdrop{background:rgba(9,30,56,.72);backdrop-filter:blur(3px);}
.conexion-dialogo h2{font-size:var(--t-h2);color:var(--azul-900);margin-bottom:var(--e3);}
.conexion-dialogo > p{color:var(--texto-medio);font-size:var(--t-small);}
.conexion-cerrar{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;color:var(--texto-suave);cursor:pointer;}
.conexion-codigo{margin:var(--e5) 0;padding:var(--e4);text-align:center;background:var(--azul-50);border:1px solid var(--azul-100);border-radius:var(--radio);}
.conexion-codigo span{display:block;font-size:var(--t-micro);text-transform:uppercase;color:var(--texto-suave);}
.conexion-codigo strong{display:block;margin:8px 0 14px;font-size:30px;letter-spacing:.12em;color:var(--azul-900);}
.conexion-ayuda{margin-top:var(--e4);font-size:var(--t-micro)!important;}

/* --- Pie ---------------------------------------------------------------- */
.pie{
  margin-top:var(--e8);
  padding:var(--e5) 0;
  border-top:1px solid var(--borde);
  color:var(--texto-suave);
  font-size:var(--t-meta);
  text-align:center;
}

/* --- Estados de carga y vacío ------------------------------------------ */
.cargando,.vacio{
  padding:var(--e7) var(--e5);
  text-align:center;
  color:var(--texto-suave);
  font-size:var(--t-small);
}
.vacio strong{display:block;color:var(--texto);font-size:var(--t-lead);margin-bottom:var(--e2);}

@media (max-width:720px){
  .contenedor{padding:0 var(--e4);}
  .barra-inner{min-height:60px;padding:var(--e2) 0;flex-wrap:wrap;gap:var(--e2);}
  .barra-menu{display:inline-flex;}
  .conexion-estado{order:2;margin-left:auto;}
  .barra-nav{
    display:none;margin-left:0;width:100%;padding:var(--e2) 0 var(--e3);
    border-top:1px solid rgba(255,255,255,.14);
  }
  .barra-nav.abierta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .barra-nav button{text-align:left;padding:10px var(--e3);}
  .barra-nav button[aria-current="page"]{box-shadow:inset 3px 0 0 var(--acento);}
}

@media (min-width:721px){
  .barra-nav{display:flex !important;}
}

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