/* ============================================================
   PÁGINAS PÚBLICAS · sistema "CÉDULA OFICIAL" (v2.0)
   ------------------------------------------------------------
   El esqueleto que comparten dashboard, rankings, premios, guía,
   novedades, mensajes, perfil y legales: cabecera del sitio,
   envoltorio, encabezado de página y pie.

   Las clases viejas (.cab, .marca, .titulo-pagina, .acceso…) se
   conservan y se re-estilan: las páginas que todavía no se
   migraron al shell siguen viéndose bien mientras tanto.
   ============================================================ */

body.pagina {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--fondo);
  background-image: var(--textura-papel);
  background-size: var(--trama-escala);
  background-attachment: fixed;
  color: var(--tinta);
}

/* La franja vieja sigue existiendo para las páginas sin migrar */
.franja-tricolor {
  height: 4px;
  background: var(--hilo);
  flex-shrink: 0;
}

/* ============================================================
   1 · CABECERA DEL SITIO
   Pegajosa y de vidrio: el guilloche se sigue viendo detrás.
   ============================================================ */
.cab-sitio {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.cab-sitio-int {
  max-width: var(--ancho-pagina, 1080px);
  margin: 0 auto;
  padding: var(--e-2) var(--e-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3);
}

.marca {
  display: flex; align-items: center; gap: var(--e-2);
  min-width: 0;
  text-decoration: none; color: var(--tinta);
  font-family: var(--f-titulo); font-weight: 700;
}
.marca img {
  width: 36px; height: 36px; flex-shrink: 0;
  transition: transform var(--vel-media) var(--ease-sello);
}
.marca:hover img { transform: rotate(-7deg) scale(1.07); }
.marca-txt { min-width: 0; line-height: 1.05; }
.marca-txt strong {
  display: block;
  font-size: var(--t-sm); letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca-txt small {
  display: block;
  font-family: var(--f-dato);
  font-size: 10px; letter-spacing: .1em; color: var(--py-oro);
}

.cab-sitio-acciones { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; }
.cab-sitio-acciones .btn { text-decoration: none; }

/* En teléfono, los botones sueltos de la cabecera se van: todo lo
   que había ahí vive ahora dentro del cajón, con nombre y
   descripción, en vez de seis íconos apretados sin rótulo. */
@media (max-width: 639px) {
  .oculto-movil { display: none !important; }
  .cab-sitio-int { padding: var(--e-2) var(--e-3); }
}

/* ============================================================
   2 · ENVOLTORIO Y ENCABEZADO DE PÁGINA
   ============================================================ */
.envoltorio {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-pagina, 1080px);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4) var(--e-7);
}
@media (max-width: 639px) {
  .envoltorio { padding: var(--e-4) var(--e-3) var(--e-6); }
}

.pagina-cab { margin-bottom: var(--e-5); }
.titulo-pagina {
  position: relative;
  font-family: var(--f-titulo);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  padding-bottom: var(--e-3);
  margin-bottom: 0;
}
.titulo-pagina .ico { color: var(--py-oro); width: .8em; height: .8em; flex-shrink: 0; }
/* El hilo tricolor bajo el título: la firma de que esto es una
   página del mismo documento. Se dibuja al entrar. */
.titulo-pagina::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 116px; height: 3px;
  background: var(--hilo);
  transform-origin: left;
  animation: hilo-dibuja var(--vel-lenta) var(--ease) both;
}
@keyframes hilo-dibuja { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pagina-sub {
  margin-top: var(--e-3);
  color: var(--tinta-2);
  font-size: var(--t-md);
  max-width: 62ch;
}

/* Cabecera vieja (páginas sin migrar) */
.cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) 0; margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}
.cab .marca img { width: 32px; height: 32px; }
.cab-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cab-acciones .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* Encabezado de sección */
.seccion-titulo {
  font-family: var(--f-titulo); font-size: var(--t-md); color: var(--tinta);
  margin: var(--e-5) 0 var(--e-3); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
}
.seccion-titulo .ico { flex-shrink: 0; color: var(--py-oro); }

/* ============================================================
   3 · PIE DEL SITIO
   ============================================================ */
.pie-sitio {
  flex-shrink: 0;
  margin-top: var(--e-7);
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  border-top: 1px solid var(--borde);
  position: relative;
}
.pie-sitio::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--hilo);
  opacity: .8;
}
.pie-sitio-int {
  max-width: var(--ancho-pagina, 1080px);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4);
  padding-bottom: max(var(--e-5), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--e-3);
}
.pie-marca {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em;
}
.pie-marca img { width: 28px; height: 28px; opacity: .9; }
.pie-marca em { color: var(--py-oro); font-style: normal; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pie-enlaces a {
  color: var(--tinta-2); text-decoration: none;
  font-size: var(--t-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
.pie-enlaces a:hover { color: var(--tinta); border-bottom-color: var(--py-oro); }
.pie-nota {
  font-size: var(--t-xs); color: var(--tinta-3);
  max-width: 70ch; line-height: 1.5;
  border-top: 1px dashed var(--borde);
  padding-top: var(--e-3);
}
/* La firma del autor. Va debajo del descargo y no arriba a proposito: lo
   primero que tiene que leerse es que esto es satira, y recien despues quien
   la firma. */
.pie-firma {
  font-size: var(--t-xs); color: var(--tinta-3);
  max-width: 70ch; line-height: 1.5; margin-top: 6px;
}
.pie-firma a { color: var(--tinta-2); border-bottom: 1px solid transparent; }
.pie-firma a:hover { color: var(--tinta); border-bottom-color: var(--py-oro); }

/* ============================================================
   4 · ANIMACIONES DE ENTRADA
   .entra  → al cargar, con animation-delay en línea (patrón viejo)
   .revelar → cuando el bloque se acerca a la pantalla (ui.js)
   ============================================================ */
@keyframes entra-arriba { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.entra { opacity: 0; animation: entra-arriba var(--vel-lenta) var(--ease) forwards; }

.revelar {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--vel-lenta) var(--ease), transform var(--vel-lenta) var(--ease);
}
.revelar.visible { opacity: 1; transform: none; }

@keyframes girar-lento { to { transform: rotate(360deg); } }
@keyframes flama { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(-3deg); } }
@keyframes pulso-nl { 0%,100% { box-shadow: 0 0 0 0 rgba(200,36,26,.55); } 70% { box-shadow: 0 0 0 6px rgba(200,36,26,0); } }
@keyframes aparece-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   5 · SELLOS DE GOMA
   ============================================================ */
.sello-mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 11px; border: 2px double currentColor; border-radius: var(--r-sm);
  font-size: var(--t-xs); transform: rotate(-2deg); opacity: .95;
}
.sello-mini svg { width: 13px; height: 13px; }
.sello-admin { color: var(--peligro); }
.sello-verificado { color: var(--ok); }
.sello-dorado { color: var(--py-oro); }

/* ============================================================
   6 · TARJETAS ESTÁNDAR
   ============================================================ */
.tarjeta-p {
  position: relative;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-4);
  box-shadow: var(--sombra-1);
}
.tarjeta-p.tarjeta-oro { border-top: 3px solid var(--py-oro); box-shadow: var(--sombra-2); }
.tarjeta-hover { transition: transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease); }
.tarjeta-hover:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--py-oro-claro); }

/* ============================================================
   7 · CHIPS DE DATO
   ============================================================ */
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: 7px 13px;
  font-size: var(--t-sm); font-weight: 700; color: var(--tinta-2);
  transition: transform var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
.stat-chip:hover { transform: translateY(-2px); border-color: var(--py-oro); }
.stat-chip svg { width: 17px; height: 17px; color: var(--py-oro); flex-shrink: 0; }
.stat-chip strong { color: var(--tinta); font-family: var(--f-dato); }

/* ============================================================
   8 · ACCESOS EN GRILLA · las fichas del archivador
   ------------------------------------------------------------
   Cada acceso es una ficha con pestaña: la barra de color arriba
   se estira al pasar por encima, como sacar la ficha del cajón.
   ============================================================ */
.grid-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.acceso {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e-4) var(--e-3); text-align: center;
  font-family: var(--f-titulo);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .03em;
  transition: transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
.acceso::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--py-oro);
  transform: scaleX(0);
  transition: transform var(--vel-media) var(--ease);
}
.acceso:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.acceso:hover::before { transform: scaleX(1); }
.acceso:active { transform: translateY(-1px) scale(.985); }
.acceso-ico {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-3); color: var(--py-oro);
  transition: background var(--vel-rapida) var(--ease), transform var(--vel-media) var(--ease-sello);
}
.acceso:hover .acceso-ico { background: var(--alerta-suave); transform: scale(1.08) rotate(-5deg); }
.acceso-ico svg { width: 24px; height: 24px; }
.acceso.destacado::before { background: var(--acento); transform: scaleX(1); }
.acceso.destacado .acceso-ico { background: var(--peligro-suave); color: var(--peligro); }

/* ============================================================
   9 · GLOBITO DE NO-LEÍDOS
   ============================================================ */
.badge-nl {
  position: absolute; top: 8px; right: 10px;
  background: var(--acento); color: var(--acento-txt);
  font-family: var(--f-dato);
  font-size: var(--t-xs); font-weight: 800; border-radius: var(--r-full);
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  animation: pulso-nl 2s ease-in-out infinite;
}

/* ============================================================
   10 · TABLA ESTÁNDAR DE DATOS · la planilla
   ============================================================ */
.tabla-p { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla-p th {
  text-align: left; padding: var(--e-3); color: var(--tinta-2);
  border-bottom: 2px solid var(--borde-fuerte); white-space: nowrap;
  font-family: var(--f-titulo);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
}
.tabla-p td { padding: var(--e-3); border-bottom: 1px dashed var(--borde); white-space: nowrap; }
.tabla-p tr:last-child td { border-bottom: none; }
.tabla-p tbody tr { transition: background var(--vel-rapida) var(--ease); }
.tabla-p tbody tr:hover { background: var(--superficie-2); }

/* Fila de persona (avatar + nombre + @usuario) reutilizable */
.fila-persona { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.fila-persona img.av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--borde-fuerte); }
.fila-persona:hover strong { color: var(--py-oro); }
.fila-persona strong { transition: color var(--vel-rapida) var(--ease); }
.fila-persona .sub { color: var(--tinta-3); font-size: var(--t-xs); }

/* ============================================================
   11 · AVATAR CON ANILLO (héroes de perfil)
   ============================================================ */
.avatar-marco { position: relative; margin: 0 auto var(--e-3); }
.avatar-marco::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px dashed var(--py-oro-claro); opacity: .6;
  animation: girar-lento 40s linear infinite;
}
.avatar-marco img {
  border-radius: 50%; border: 3px solid var(--py-oro);
  background: var(--superficie-2); box-shadow: var(--sombra-2);
  position: relative; z-index: 1; width: 100%; height: 100%;
}

/* ============================================================
   12 · PRESENCIA (tiempo real)
   ============================================================ */
.punto-presencia { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); display: inline-block; flex-shrink: 0; transition: background .2s; }
.punto-presencia.en-linea { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }

/* ============================================================
   13 · MISCELÁNEAS
   ============================================================ */
.ico { vertical-align: -3px; }
.vacio {
  padding: var(--e-6); text-align: center; color: var(--tinta-3);
  border: 1px dashed var(--borde); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--superficie) 55%, transparent);
}
.esqueleto-fila { height: 46px; margin-bottom: 8px; }
.nota-p { color: var(--tinta-3); font-size: var(--t-sm); line-height: 1.55; }

table tr.yo td { background: var(--ok-suave); font-weight: 600; }