/* ═══════════════════════════════════════════════════════════════════════════
   Vettia · portada.css — el "armazón" común de las DOS portadas (T-Portada2):
   paleta, menú lateral, barra de celular, columna de contenido y bloque de usuario.
   Reglas movidas TAL CUAL desde el <style> de index.html (la portada 1 no cambia);
   lo único nuevo es el pie del menú con el ícono "Cambiar de portada" (.side-pie).
   Va después de vertice-theme.css y antes del <style> propio de cada portada.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --side:#152250; --accent-lt:#5b8cf5; --accent-soft:#E9F0FE; --gold:#C9A961;
  --bg:#F3F5F9; --card:#fff; --text:#1a2340; --nav:#152250; --gray:#5B6576; /* Lote FG: la portada conserva su gris propio a propósito — 5.39 sobre su fondo #F3F5F9, mejor que --text-soft (4.97); más oscuro y frío para su paleta navy */ --border:#E6EAF2;
  --green:#0F9D58; --amber:#C7891F; --red:#DC2626; --shadow:0 8px 26px rgba(20,40,90,.10);
  --sw:322px; --cols:4; --cpy:17px; --cpx:19px;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
.hidden{display:none !important}

/* Barra superior — solo pantallas chicas (portada móvil futura) */
.mtop{display:none;align-items:center;gap:14px;position:sticky;top:0;z-index:20;background:var(--side);color:#fff;padding:12px 16px}
.ham{background:transparent;border:none;color:#fff;font-size:23px;line-height:1;cursor:pointer;padding:4px}
.mbrand{display:flex;align-items:center;gap:9px;flex:1}
.mbrand .mv{width:32px;height:32px;border-radius:8px;background:var(--gold);color:var(--side);display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:19px}
.mbrand b{font-family:'DM Serif Display',serif;font-size:19px;font-weight:400}
.mav{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(10,15,40,.45);z-index:9;opacity:0;pointer-events:none;transition:.2s}
.overlay.on{opacity:1;pointer-events:auto}

/* Scroll ÚNICO: el menú es una columna del layout (baja con la página, sin barra propia) */
.stage{display:grid;grid-template-columns:var(--sw) 1fr;min-height:100vh}
.side{display:flex;flex-direction:column;background:var(--side);color:#eaeefb}
.side-logo{display:flex;align-items:center;gap:15px;padding:24px 26px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-logo .vbox{width:54px;height:54px;border-radius:14px;background:var(--gold);color:var(--side);display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:32px;flex-shrink:0}
.side-logo .sb{display:flex;flex-direction:column}
.side-logo .vt{font-family:'DM Serif Display',serif;font-size:29px;color:#fff;line-height:1}
.side-logo .vs{font-size:11.5px;font-weight:300;color:#9fabd8;margin-top:5px}
.side-nav{flex:1;padding:16px}
.side-sec-l{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8a97c8;padding:16px 16px 7px}
.side-item{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:11px;color:#c3cbe6;font-size:14px;font-weight:500;cursor:pointer;border-left:3px solid transparent;transition:.13s}
.side-item:hover{background:rgba(255,255,255,.06);color:#fff}
.side-item .si{width:20px;height:20px;color:#9aa6d0;display:inline-flex}
.side-item .sl{flex:1}
.side-item .ext{opacity:.45;display:inline-flex}
.side-item.bloq{opacity:.4;cursor:not-allowed}
.side-item.bloq:hover{background:transparent;color:#c3cbe6}
/* T-Portada2: pie del menú — ícono discreto (dos flechas opuestas, color apagado, sin texto)
   abajo a la derecha que lleva a la otra portada. */
.side-pie{display:flex;justify-content:flex-end;align-items:center;gap:2px;padding:6px 14px 14px}
.side-cambio{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:#6f7cae;cursor:pointer;opacity:.7;transition:.13s}
.side-cambio:hover,.side-cambio:focus-visible{opacity:1;color:#c3cbe6;background:rgba(255,255,255,.06)}
.side-cambio svg{width:17px;height:17px}
/* T-Portadas-Cache: "Actualizado HH:MM" y el botón de recargar, mismo tono apagado que el ícono. */
.side-hora{margin-right:auto;font-size:11px;color:#6f7cae;white-space:nowrap}
.side-cambio.girando svg{animation:sidegira .8s linear infinite}
.side-cambio:disabled{cursor:progress}
@keyframes sidegira{to{transform:rotate(360deg)}}

.content{padding:32px 40px 40px 32px}
.c-hi{font-family:'DM Serif Display',serif;font-size:34px;color:var(--nav);letter-spacing:-.01em}
/* T3 tanda 4 (validación): el usuario y "Cerrar sesión" suben a la fila superior,
   a la altura de la marca Vettia del menú (a la derecha). */
.c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.c-user{display:flex;align-items:center;gap:11px;flex-shrink:0;margin-top:4px}
.c-user .fav{width:37px;height:37px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.c-user .fn{font-size:13.5px;font-weight:600;color:var(--nav);line-height:1.2;max-width:220px}
.c-user .fn small{display:block;font-weight:400;font-size:11px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-salir{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;flex-shrink:0;transition:.15s}
.btn-salir svg{width:19px;height:19px}
.c-user .btn-salir{background:#eef0f8;color:var(--nav)}
.c-user .btn-salir:hover{background:var(--accent);color:#fff}
.mtop .btn-salir{width:34px;height:34px;background:rgba(255,255,255,.1);color:#fff}
@media (max-width:899px){ .c-user{display:none} }
.c-hi small{display:block;font-family:'Outfit';font-size:15px;font-weight:400;color:var(--gray);margin-top:8px}

/* Adaptación (la portada móvil se implementa aparte; acá solo por si se fuerza ?portada=1) */
@media (max-width:900px){
  .mtop{display:flex}
  .stage{display:block}
  .side{position:fixed;top:0;left:0;height:100vh;width:86vw;max-width:330px;transform:translateX(-100%);transition:.25s;z-index:10;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .side.open{transform:translateX(0)}
  .side-nav{overflow-y:auto}
  .content{padding:24px 20px 46px}
  .c-hi{font-size:29px}
}
@media (max-width:600px){ .content{padding:20px 15px 40px} .c-hi{font-size:26px} }