/* ==========================================================================
Invokard — Zona privada (login · vault · admin)
--------------------------------------------------------------------------
SE CARGA SIEMPRE DESPUÉS de css/styles.css, nunca en su lugar:
: aquí se
repone explícitamente en cada diálogo.
· Los hijos de grid llevan min-width:0 o desbordan en móvil.
· Banderas de idioma: se reutilizan .flag / .fl / .fl-es / .fl-en de
styles.css. Nunca emoji.
· Cero border-radius. El bisel es --chamfer vía .chamfer o clip-path.
Convención de color de mazo: el JS pone --d en el elemento
(style="--d:var(--deck-dev)"), como ya hace la landing. Aquí se lee --d.
========================================================================== */
/* ══ 1 · TOKENS ═══════════════════════════════════════════════════════════
Superficies semánticas propias de la app. Se definen ENTERAS en :root
(nada existe solo dentro de un media query) y luego se reasignan para el
tema oscuro en los dos selectores: preferencia del sistema e interruptor. */
:root{
/* superficies */
--v-bg: #FFFFFF;
--v-surface: #FFFFFF;
--v-surface-2: #F7F7F9;
--v-surface-3: #EFEFF3;
--v-text: #0C0F16;
--v-text-2: #565C6B;
/* #7A8090 daba 3.95:1 sobre blanco y 3.69:1 sobre --v-surface-2: por debajo
de AA en el nombre de un mazo bloqueado y en el estado de cada carta, que
son texto de verdad, no adorno. #676D7D da 5.2:1 y 4.8:1 y mantiene la
jerarquía con --v-text-2. El valor oscuro ya pasaba y no se toca. */
--v-text-3: #676D7D;
--v-line: #D6D8DE;
--v-line-soft: #E6E7EB;
/* bloques invertidos (héroe del login, modal de carta, cabeceras oscuras) */
--v-inv-bg: #0C0F16;
--v-inv-text: #FFFFFF;
--v-inv-text-2: rgba(255,255,255,.68);
--v-inv-text-3: rgba(255,255,255,.46);
--v-inv-line: rgba(255,255,255,.16);
--v-inv-surface: #141822;
/* acentos — --accent y --gold vienen de styles.css y no se tocan */
--v-accent-text: #C4351F; /* = --accent-ink, 5.4:1 sobre blanco */
--v-btn-fg: #FFFFFF;
/* semáforo de estado (ok / aviso / error) */
--v-ok: #0F7A4F;
--v-ok-bg: #E7F5EE;
--v-warn: #8A5A00;
--v-warn-bg: #FCF2DC;
--v-err: #B3271A;
--v-err-bg: #FBEAE8;
--v-info: #12667A;
--v-info-bg: #E4F4F8;
/* trama de puntos Ben-Day sobre fondo claro y sobre fondo oscuro */
--v-dots: rgba(12,15,22,.09);
--v-dots-inv: rgba(255,255,255,.14);
/* esqueleto de carga */
--v-skel: #E9EAEE;
--v-skel-hi: #F5F5F8;
/* sombras */
--v-shadow: 0 12px 28px -16px rgba(12,15,22,.42);
--v-shadow-up: 0 26px 52px -20px rgba(12,15,22,.55);
/* métrica propia de la app */
--topbar-h: 60px;
--v-maxw: 1320px;
--v-stroke: 1px; /* trazo fino de retícula */
--v-stroke-2: 2px; /* trazo grueso de énfasis */
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--v-bg: #0C0F16;
--v-surface: #12161F;
--v-surface-2: #171C27;
--v-surface-3: #1E2431;
--v-text: #F2F3F6;
--v-text-2: #A3A9B8;
--v-text-3: #838A9A;
--v-line: #2A3040;
--v-line-soft: #212734;
--v-inv-bg: #060810;
--v-inv-text: #FFFFFF;
--v-inv-text-2: rgba(255,255,255,.68);
--v-inv-text-3: rgba(255,255,255,.46);
--v-inv-line: rgba(255,255,255,.16);
--v-inv-surface: #10141D;
--v-accent-text: #FF7A5E; /* 5.6:1 sobre #12161F */
--v-btn-fg: #FFFFFF;
--v-ok: #4FD69C;
--v-ok-bg: rgba(79,214,156,.12);
--v-warn: #F0B958;
--v-warn-bg: rgba(240,185,88,.12);
--v-err: #FF8B7A;
--v-err-bg: rgba(255,139,122,.12);
--v-info: #5FCEE4;
--v-info-bg: rgba(95,206,228,.12);
--v-dots: rgba(255,255,255,.10);
--v-dots-inv: rgba(255,255,255,.14);
--v-skel: #1C222E;
--v-skel-hi: #262D3B;
--v-shadow: 0 12px 28px -16px rgba(0,0,0,.75);
--v-shadow-up: 0 26px 52px -20px rgba(0,0,0,.85);
}
}
:root[data-theme="dark"]{
--v-bg: #0C0F16;
--v-surface: #12161F;
--v-surface-2: #171C27;
--v-surface-3: #1E2431;
--v-text: #F2F3F6;
--v-text-2: #A3A9B8;
--v-text-3: #838A9A;
--v-line: #2A3040;
--v-line-soft: #212734;
--v-inv-bg: #060810;
--v-inv-text: #FFFFFF;
--v-inv-text-2: rgba(255,255,255,.68);
--v-inv-text-3: rgba(255,255,255,.46);
--v-inv-line: rgba(255,255,255,.16);
--v-inv-surface: #10141D;
--v-accent-text: #FF7A5E;
--v-btn-fg: #FFFFFF;
--v-ok: #4FD69C;
--v-ok-bg: rgba(79,214,156,.12);
--v-warn: #F0B958;
--v-warn-bg: rgba(240,185,88,.12);
--v-err: #FF8B7A;
--v-err-bg: rgba(255,139,122,.12);
--v-info: #5FCEE4;
--v-info-bg: rgba(95,206,228,.12);
--v-dots: rgba(255,255,255,.10);
--v-dots-inv: rgba(255,255,255,.14);
--v-skel: #1C222E;
--v-skel-hi: #262D3B;
--v-shadow: 0 12px 28px -16px rgba(0,0,0,.75);
--v-shadow-up: 0 26px 52px -20px rgba(0,0,0,.85);
}
/* ══ 2 · ARMAZÓN DE PÁGINA ════════════════════════════════════════════════ */
/* La landing hace scroll-snap por bloques de pantalla completa. La zona
privada es una aplicación: se lee de arriba abajo sin imanes. El
de login.html / dashboard.html / admin.html lleva class="app". */
html.app{ scroll-snap-type:none; scroll-padding-top:var(--topbar-h); }
/* [hidden] es una regla del NAVEGADOR y pierde contra CUALQUIER regla de autor
que declare display. Sin esta línea `el.hidden = true` no oculta nada dentro
de .v-pill{display:inline-flex}, .v-msg.is-on{display:flex},
.adm-inline-actions{display:flex} ni .vd-actions — y los cuatro casos existen
hoy en el código. Va en el armazón porque afecta a las tres páginas. */
[hidden]{ display:none !important; }
body.app{
background:var(--v-bg);
color:var(--v-text);
font-size:16.5px;
min-height:100vh; min-height:100svh;
display:flex; flex-direction:column;
}
/* Único sitio con padding lateral. Nunca lo pongas en un hijo. */
.vault-in,.auth-in{
width:100%;
max-width:calc(var(--v-maxw) + var(--s4) * 2);
margin-inline:auto;
padding-inline:var(--s4);
}
.vault-main{ flex:1 0 auto; padding-block:var(--s5) var(--s7); }
/* El `background` es OBLIGATORIO aquí: styles.css:310 trae
`footer{ background:var(--ink) }`, un selector de elemento que alcanza a