/* ══════════════════════════════════════════════════════════════════════════
tema.css · estética Gótica para las páginas del alumno
Dos temas por atributo en :
[data-tema="familia"] (o sin atributo) papel dominante, sin color de acento
[data-tema="fomo"] revista sobre negro, fucsia con medida
Lo pone tema.js antes de que pinte la página, según el plan guardado.
Cómo se usa: cada página carga, en este orden y dentro de ,
Los tokens tienen los MISMOS nombres que el :root de las páginas (--paper,
--ink, --line...). Acá van con más especificidad que ":root", así que pisan
los de la página aunque la página los siga declarando: todo lo que ya usa
var(--paper) se adapta solo. Los materiales (.hoja-oscura, .hoja-crema,
.ficha-papel, .ticket, .plastificada) redefinen los mismos tokens adentro
suyo, como las hojas de la revista de FOMO.
Fuente de verdad: FAMILIA-Landing/design-system-record.md y FAMILIA-Landing/
index.html (Familia), FOMO-CLUB-Landing/revista-site/index.html y
landing/materiales.html (FOMO). La guía corta para aplicarlo está en
TEMA-GUIA.md (la tiene quien arma cada página).
══════════════════════════════════════════════════════════════════════════ */
/* ═══════════ FUENTES ═══════════
Neue Haas Grotesk son archivos TRIAL (ver fonts/README.md): hay que
licenciarlos, igual que en las landings. Los trial no traen tildes, ñ, ¿, ( ) : /
%, ·, ®, — ni →: esos caracteres salen en el respaldo (Helvetica Neue / Arial).
NHG Text no trae bold: el 600-900 de "NHG Text" sale de NHG Display Bold,
así no hay negrita falsa. */
@font-face{font-family:"NHG Disp";src:url("fonts/nhg-disp-medium.otf") format("opentype");font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Disp";src:url("fonts/nhg-disp-bold.otf") format("opentype");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Disp";src:url("fonts/nhg-disp-black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Text";src:url("fonts/nhg-text-roman.otf") format("opentype");font-weight:100 400;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Text";src:url("fonts/nhg-text-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Text";src:url("fonts/nhg-disp-bold.otf") format("opentype");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
/* ═══════════ TOKENS COMUNES (iguales en los dos temas) ═══════════
html:root le gana a ":root" de la página. */
html:root{
--font: "NHG Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
--display: "NHG Disp", "Helvetica Neue", Helvetica, Arial, sans-serif;
--serif: "Instrument Serif", Georgia, serif;
--r: 4px;
--ease: cubic-bezier(.2,.7,.2,1);
--gutter: clamp(18px, 4vw, 56px);
/* constantes de material, por si una pieza las necesita sueltas */
--hoja-oscura: #141418;
--tinta-sobre-oscura: #ffffff;
--crema: #efe9db;
--renglon-alto: 32px;
--pestanas-ancho: 11rem;
--tilde-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c2.1 1.7 4.2 3.7 6.2 5.8 2.8-5 6.3-9.6 10.8-14.1' fill='none' stroke='%23000' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--grano-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E");
}
/* ═══════════ TOKENS DEL TEMA (fondo de página, cinta, velo, anillas) ═══════════ */
:root:not([data-tema="fomo"]){
--terrazzo: #e6e0d2; /* el nombre viejo quedó: hoy es el FONDO de la página (papel de carpeta) */
--cinta-fondo: #12100e;
--cinta-tinta: #f6f2ea;
--velo: rgba(18,16,14,.58);
/* papelitos del premio al aplicar una tarea (index.html): papel y tinta */
--papelito-1: #12100e;
--papelito-2: #f6f2ea;
--papelito-3: #77716a;
--papelito-4: #d6d0c3;
--papelito-borde: rgba(18,16,14,.4);
--anilla-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Ccircle cx='32' cy='12' r='5.5' fill='%23d9d2c2' stroke='%23000' stroke-opacity='.2'/%3E%3Cpath d='M32 8.4H10.2a3.6 3.6 0 0 0 0 7.2H32' fill='none' stroke='%2377716a' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M29.5 7.8H10.6' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-tema="fomo"]{
--terrazzo: #0b0b0d;
--cinta-fondo: #f45fb0;
--cinta-tinta: #0b0b0d;
--velo: rgba(0,0,0,.74);
/* papelitos del premio: negro y fucsia (el negro y el crema llevan borde fucsia para verse sobre el negro) */
--papelito-1: #f45fb0;
--papelito-2: #efe9db;
--papelito-3: #0b0b0d;
--papelito-4: #ffffff;
--papelito-borde: rgba(244,95,176,.75);
--anilla-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Ccircle cx='32' cy='12' r='5.5' fill='%23050507' stroke='%23fff' stroke-opacity='.12'/%3E%3Cpath d='M32 8.4H10.2a3.6 3.6 0 0 0 0 7.2H32' fill='none' stroke='%238f8a82' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M29.5 7.8H10.6' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ═══════════ MATERIAL · PAPEL (Familia) ═══════════
Es el default de Familia y también la hoja crema, la ficha, el ticket y la
hoja plastificada de Familia. Sin acento de color: lo que sería acento es tinta. */
:root:not([data-tema="fomo"]),
:root:not([data-tema="fomo"]) :is(.hoja-crema, .ficha-papel, .ticket, .plastificada){
--paper: #f6f2ea; /* hoja */
--paper-2: #ece6d9; /* hover sobre la hoja */
--paper-3: #ddd6c7; /* riel de barras de avance */
--ink: #12100e;
--ink-2: rgba(18,16,14,.68); /* 6,3:1 sobre la hoja */
--ink-3: rgba(18,16,14,.62); /* 4,9:1 (el mute de 46% del record no llega a AA en texto chico) */
--line: rgba(18,16,14,.14);
--line-2: rgba(18,16,14,.28);
--hoja-borde: rgba(18,16,14,.12);
--campo: #fffdf8;
--superficie: #fbf8f1;
--hoja-interna: #fffdf8;
--chip-rojo: #a8271b;
--chip-verde: #2f5d46;
--acento: #12100e;
--acento-tinta: #f6f2ea;
--acento-texto: #12100e;
--acento-grande: #12100e;
--resalte: rgba(18,16,14,.05);
--resalte-borde: rgba(18,16,14,.30);
--resaltado: rgba(18,16,14,.12);
--focus: #12100e;
--foco-anillo: rgba(18,16,14,.14);
--sombra: rgba(18,16,14,.45);
--btn-fondo: #12100e;
--btn-tinta: #f6f2ea;
--btn-esquina: #f6f2ea;
--btn-hover: #2b2824;
--btn-apagado-fondo: #d6d0c3;
--btn-apagado-tinta: #5a554d;
--btn-apagado-esquina: #a8a296;
--renglon: rgba(18,16,14,.085);
--renglon-suave: rgba(18,16,14,.05);
--margen-linea: rgba(18,16,14,.2);
--grano-opacidad: .16;
--grano-mezcla: multiply;
--clip-metal: #6d665c;
--subrayado-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 3, 120 12, 180 6 S 270 4, 297 8' fill='none' stroke='%2312100e' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
--pestana-1: #e9e2d3;
--pestana-2: #ddd5c4;
--pestana-3: #d0c7b4;
--pestana-tinta: #12100e;
--pestana-negra: #141418;
--pestana-negra-tinta: #ffffff;
--pestana-negra-borde: transparent;
--pestana-activa-borde: rgba(18,16,14,.12);
color-scheme: light;
}
/* tonos propios dentro de Familia */
:root:not([data-tema="fomo"]) .hoja-crema{
--paper: #efe9db; --paper-2: #e6dfd0; --paper-3: #d6cebd; --hoja-interna: #f8f5ee; --campo: #f8f5ee; --superficie: #f4efe4;
--pestana-1: #e2d9c6; --pestana-2: #d6ccb7; --pestana-3: #cabfa8;
}
:root:not([data-tema="fomo"]) :is(.ficha-papel, .ticket, .plastificada){
--paper: #fffdf8; --paper-2: #f4f0e7; --paper-3: #e6e0d2; --hoja-interna: #f6f2ea; --campo: #ffffff; --superficie: #f9f6ef;
}
/* ═══════════ MATERIAL · HOJA OSCURA ═══════════
Es el default de FOMO (la lámina de revista sobre el negro) y la hoja negra
de Familia. El acento cambia por tema, abajo. */
.hoja-oscura,
:root[data-tema="fomo"]{
--paper: #141418;
--paper-2: #1c1c22;
--paper-3: #2a2a32;
--ink: #ffffff;
--ink-2: rgba(255,255,255,.66); /* 8,4:1 */
--ink-3: rgba(255,255,255,.52); /* 5,5:1 */
--line: rgba(255,255,255,.13);
--line-2: rgba(255,255,255,.26);
--hoja-borde: rgba(255,255,255,.08);
--campo: #1a1a20;
--superficie: #1a1a20;
--hoja-interna: #1b1b21;
--chip-rojo: #ff8a8a;
--chip-verde: #7fd1a8;
--sombra: rgba(0,0,0,.9);
--btn-fondo: #efe9db;
--btn-tinta: #111111;
--btn-hover: #f6f2ea;
--btn-apagado-fondo: #2a2a32;
--btn-apagado-tinta: rgba(255,255,255,.55);
--btn-apagado-esquina: #4a4a54;
--renglon: rgba(255,255,255,.05);
--renglon-suave: rgba(255,255,255,.035);
--grano-opacidad: .13;
--grano-mezcla: screen;
--clip-metal: #9a948a;
--pestana-1: #efe9db;
--pestana-2: #e4dccb;
--pestana-3: #d8cfbc;
--pestana-tinta: #12100e;
color-scheme: dark;
}
/* hoja negra de Familia: el acento es papel */
:root:not([data-tema="fomo"]) .hoja-oscura{
--acento: #f6f2ea;
--acento-tinta: #12100e;
--acento-texto: #f6f2ea;
--acento-grande: #f6f2ea;
--resalte: rgba(255,255,255,.06);
--resalte-borde: rgba(255,255,255,.30);
--resaltado: rgba(255,255,255,.2);
--focus: #f6f2ea;
--foco-anillo: rgba(246,242,234,.22);
--btn-esquina: #12100e;
--margen-linea: rgba(255,255,255,.14);
--subrayado-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 3, 120 12, 180 6 S 270 4, 297 8' fill='none' stroke='%23f6f2ea' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
--pestana-negra: #0b0b0d;
--pestana-negra-tinta: #ffffff;
--pestana-activa-borde: rgba(255,255,255,.14);
}
/* FOMO sobre negro: el fucsia (6,2:1 sobre la hoja) va con medida */
:root[data-tema="fomo"],
:root[data-tema="fomo"] .hoja-oscura{
--acento: #f45fb0;
--acento-tinta: #160510;
--acento-texto: #f45fb0;
--acento-grande: #f45fb0;
--resalte: rgba(244,95,176,.10);
--resalte-borde: rgba(244,95,176,.45);
--resaltado: rgba(244,95,176,.34);
--focus: #f45fb0;
--foco-anillo: rgba(244,95,176,.30);
--btn-esquina: #f45fb0;
--margen-linea: rgba(244,95,176,.3);
--subrayado-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 3, 120 12, 180 6 S 270 4, 297 8' fill='none' stroke='%23f45fb0' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
/* en FOMO no hay pestaña negra: "Todo" es crema, pero un tono más hondo que la
hoja crema (#efe9db) y con borde como las demás, para que inactiva quede
detrás y no parezca la elegida. El fucsia es solo de la activa */
--pestana-negra: #d8cfbc;
--pestana-negra-tinta: #12100e;
--pestana-negra-borde: rgba(18,16,14,.14);
--pestana-activa-borde: #f45fb0;
}
/* ═══════════ MATERIAL · CREMA (FOMO) ═══════════
La hoja crema que alterna con las oscuras, y la ficha, el ticket y la hoja
plastificada de FOMO. Sobre crema el fucsia no lee como texto (2,4:1):
el texto en acento va en --acento-texto (#a3286f, 5,6:1). */
:root[data-tema="fomo"] :is(.hoja-crema, .ficha-papel, .ticket, .plastificada){
--paper: #efe9db;
--paper-2: #e6dfd0;
--paper-3: #d6cebd;
--ink: #12100e;
--ink-2: rgba(18,16,14,.70);
--ink-3: rgba(18,16,14,.62);
--line: rgba(18,16,14,.16);
--line-2: rgba(18,16,14,.30);
--hoja-borde: rgba(18,16,14,.12);
--campo: #f8f5ee;
--superficie: #f4efe4;
--hoja-interna: #f8f5ee;
--chip-rojo: #a8271b;
--chip-verde: #2f5d46;
--sombra: rgba(0,0,0,.55);
--acento: #f45fb0;
--acento-tinta: #160510;
--acento-texto: #a3286f;
--acento-grande: #cf4a95;
--resalte: rgba(207,74,149,.09);
--resalte-borde: rgba(207,74,149,.42);
--resaltado: rgba(207,74,149,.22);
--focus: #a3286f;
--foco-anillo: rgba(207,74,149,.25);
--btn-fondo: #12100e; /* el botón crema desaparecería sobre crema: pasa a tinta */
--btn-tinta: #f2ede2;
--btn-esquina: #f45fb0;
--btn-hover: #2b2824;
--btn-apagado-fondo: #d6cebd;
--btn-apagado-tinta: #5d584f;
--btn-apagado-esquina: #a8a08f;
--renglon: rgba(18,16,14,.08);
--renglon-suave: rgba(18,16,14,.05);
--margen-linea: rgba(207,74,149,.35);
--grano-opacidad: .3;
--grano-mezcla: multiply;
--clip-metal: #6d665c;
--subrayado-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 3, 120 12, 180 6 S 270 4, 297 8' fill='none' stroke='%23cf4a95' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
--pestana-1: #e2d9c6;
--pestana-2: #d6ccb7;
--pestana-3: #cabfa8;
--pestana-tinta: #12100e;
--pestana-negra: #cabfa8; /* "Todo": el crema más hondo de la escala, distinto de la hoja y de la pestaña 2 */
--pestana-negra-tinta: #12100e;
--pestana-negra-borde: rgba(18,16,14,.14);
--pestana-activa-borde: #cf4a95;
color-scheme: light;
}
/* ═══════════ ALIAS ═══════════
Nombres viejos de las páginas que ahora apuntan a un token del tema. Se
declaran en cada material para que se recalculen adentro de cada hoja. */
html:root, .hoja-oscura, .hoja-crema, .ficha-papel, .ticket, .plastificada{
--chip-ocre: var(--acento);
--ocre: var(--acento);
--chip-negro: var(--ink);
--ok: var(--ink);
}
/* ═══════════ BASE ═══════════ */
html:root{background-color:var(--terrazzo)}
::selection{background:var(--acento); color:var(--acento-tinta)}
/* solo en un tema (para alguna pieza que cambia entre Familia y FOMO) */
:root[data-tema="fomo"] .solo-familia,
:root:not([data-tema="fomo"]) .solo-fomo{display:none !important}
/* ═══════════ MATERIALES (clases) ═══════════ */
.hoja{
position:relative;
background-color:var(--paper); color:var(--ink);
border:1px solid var(--hoja-borde); border-radius:4px;
}
.hoja-oscura, .hoja-crema, .ficha-papel, .ticket, .plastificada{
background-color:var(--paper); color:var(--ink);
}
.hoja-oscura.hoja, .hoja-crema.hoja{border-color:var(--hoja-borde)}
/* ═══════════ CINTA ═══════════
arriba de todo. El texto lo
pone tema.js (12 veces, dos tandas, para que el loop no tenga costura). */
.cinta{
position:relative; z-index:3;
display:flex; align-items:center; height:36px; overflow:hidden;
background:var(--cinta-fondo); color:var(--cinta-tinta);
user-select:none; -webkit-user-select:none; pointer-events:none;
}
.cinta-pista{display:flex; flex:none; width:max-content; animation:tema-cinta 42s linear infinite; will-change:transform}
.cinta-pista span{
font-family:var(--display); font-weight:900; font-size:.8rem; line-height:1;
letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding-inline:.9rem;
}
@keyframes tema-cinta{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* ═══════════ MARCA ═══════════
. El contenido lo pone tema.js:
Familia "GÓTICA · FAMILIA" · FOMO "FOMO CLUB · GÓTICA®". */
.marca{
display:inline-flex; align-items:baseline; gap:.42rem;
font-family:var(--display); font-weight:900; font-size:1.15rem; line-height:1;
letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap;
color:var(--ink); text-decoration:none;
}
.marca-sep{font-size:.9em; color:var(--acento-texto)}
.marca small{font-family:var(--display); font-weight:700; font-size:.62em; letter-spacing:.14em; color:var(--ink-2)}
.marca sup{font-size:.62em; line-height:0; margin-left:1px}
.marca:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:2px}
/* ═══════════ TITULARES ═══════════ */
.titular{
font-family:var(--display); font-weight:900; line-height:1.04;
letter-spacing:-.015em; word-spacing:.1em; text-wrap:balance;
}
/* el remate: la palabra o la línea final en serif itálico */
.remate{
font-family:var(--serif); font-style:italic; font-weight:400;
letter-spacing:0; word-spacing:normal; text-transform:none;
}
.titular .remate{font-size:1.04em; line-height:.95}
.remate.bloque{display:block}
/* una palabra en acento: tinta en Familia, fucsia en FOMO */
.acento{color:var(--acento-texto)}
.titular .acento, .acento.grande{color:var(--acento-grande)}
/* subrayado a mano en fibrón, debajo de una palabra. Va como fondo del span:
si la frase se parte, cada renglón tiene su trazo.
El fondo se apoya en la caja de la letra (ascendente + descendente de la
fuente), no en el renglón: con titulares de interlineado 1.15 o menos, un
trazo que baja de la caja pisa las astas del renglón de abajo. Por eso es
finito y queda casi entero dentro de la caja, justo debajo de la base:
NHG (descendente .18em): de +.05 a +.21em bajo la base
Instrument Serif (descendente .31em): de +.06 a +.22em
Así entra en un renglón de 1.04 seguido de otro (las astas del de abajo
empiezan a +.29em en el peor caso: "Prueba." + el remate en serif). */
.subrayado-mano{
padding-bottom:max(.03em, 1.5px);
-webkit-box-decoration-break:clone; box-decoration-break:clone;
background-image:var(--subrayado-url); background-repeat:no-repeat;
background-size:100% max(.16em, 4px); background-position:0 100%;
}
/* en serif la caja baja más (.31em): el trazo se sube para quedar en el mismo lugar */
.remate .subrayado-mano, .subrayado-mano.remate{
padding-bottom:0; background-position:0 calc(100% - .09em);
}
/* ═══════════ FOLIO ═══════════
rótulo en versalitas + número en serif itálico. */
.folio{display:inline-flex; align-items:baseline; gap:.6rem; margin:0; color:var(--ink-2)}
.folio-rot{font-family:var(--font); font-weight:500; font-size:.72rem; line-height:1.2; letter-spacing:.18em; text-transform:uppercase}
.folio-num{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.2rem; line-height:1; letter-spacing:0}
.folio.ancho{display:flex; justify-content:space-between}
.folio.alt{flex-direction:row-reverse}
/* el rótulo como solapa apoyada sobre la hoja que sigue (Familia v08) */
.folio.solapa{align-items:flex-end; margin-bottom:-1px; position:relative; z-index:1}
.folio.solapa .folio-rot{
display:inline-block; position:relative; top:1px;
background:var(--paper); color:var(--ink); border:1px solid var(--hoja-borde); border-bottom:0;
border-radius:6px 9px 0 0; padding:.58rem 1.1rem .52rem; font-family:var(--display); font-weight:700;
}
/* ═══════════ BOTÓN · FICHA DE PAPEL ═══════════
Va con ":root" adelante para ganarle a un ".btn" viejo de la página. */
:root .btn-ficha{
position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.08rem;
min-height:44px; margin:0; padding:.7rem 1.65rem .72rem 1.05rem;
font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.12; letter-spacing:0;
text-align:left; text-decoration:none; white-space:normal;
color:var(--btn-tinta); background:var(--btn-fondo); border:0; border-radius:4px;
box-shadow:0 14px 26px -16px var(--sombra);
cursor:pointer; -webkit-tap-highlight-color:transparent;
transition:transform .16s var(--ease), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
:root .btn-ficha::before{
content:""; position:absolute; top:7px; right:7px; width:10px; height:10px; border-radius:2px;
background:var(--btn-esquina); pointer-events:none;
}
:root .btn-ficha:hover{background:var(--btn-hover); transform:translateY(-2px) rotate(-.5deg); box-shadow:0 20px 32px -18px var(--sombra)}
:root .btn-ficha:active{transform:translateY(0) rotate(0)}
:root .btn-ficha:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.btn-rot{
display:block; font-family:var(--font); font-weight:500; font-size:.66rem; line-height:1.2;
letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}
/* secundario: ficha sin relleno, con borde y esquina en tinta */
:root .btn-ficha.sec{background:transparent; color:var(--ink); border:1px solid var(--line-2); box-shadow:none}
:root .btn-ficha.sec::before{background:var(--ink)}
:root .btn-ficha.sec:hover{background:transparent; border-color:var(--ink); transform:translateY(-2px) rotate(.5deg)}
:root .btn-ficha.chica{min-height:38px; padding:.5rem 1.3rem .52rem .8rem; font-size:.88rem}
:root .btn-ficha.chica::before{top:6px; right:6px; width:7px; height:7px}
:root .btn-ficha.en-linea{flex-direction:row; align-items:center; gap:.5rem}
:root .btn-ficha:disabled, :root .btn-ficha[aria-disabled="true"]{
background:var(--btn-apagado-fondo); color:var(--btn-apagado-tinta); box-shadow:none; cursor:not-allowed; transform:none;
}
:root .btn-ficha:disabled::before, :root .btn-ficha[aria-disabled="true"]::before{background:var(--btn-apagado-esquina)}
:root .btn-ficha.sec:disabled, :root .btn-ficha.sec[aria-disabled="true"]{background:transparent; color:var(--ink-3); border-color:var(--line)}
/* ═══════════ CASILLA TILDADA A MANO ═══════════
real: el tilde se sale del cuadro.
El tilde toma el color del texto de la casilla (por defecto --ink). */
:root .casilla{
appearance:none; -webkit-appearance:none;
position:relative; flex:none; display:inline-block; vertical-align:middle;
width:20px; height:20px; margin:0; padding:0;
border:2px solid var(--ink); border-radius:2px; background:var(--campo); color:var(--ink);
cursor:pointer; transition:border-color .15s ease;
}
:root .casilla::after{
content:""; position:absolute; left:1px; top:-9px; width:23px; height:23px; pointer-events:none;
background:currentColor;
-webkit-mask:var(--tilde-url) center / contain no-repeat; mask:var(--tilde-url) center / contain no-repeat;
transform:rotate(-7deg) scale(.55); transform-origin:30% 75%; opacity:0;
transition:opacity .12s ease, transform .2s var(--ease);
}
:root .casilla:checked::after{opacity:1; transform:rotate(-7deg)}
:root .casilla:hover{border-color:var(--acento-texto)}
:root .casilla:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
:root .casilla:disabled{opacity:.45; cursor:not-allowed}
@media (forced-colors:active){
:root .casilla{appearance:auto; -webkit-appearance:checkbox}
:root .casilla::after{display:none}
}
/* ═══════════ RECURSOS DE PAPELERÍA (atmósfera: nunca tapan texto) ═══════════ */
/* grano de papel. En : capa fija arriba de todo. En una hoja: queda
entre el fondo de la hoja y su contenido. Usa ::before (no combinar con .clip) */
.grano::before{
content:""; pointer-events:none;
background-image:var(--grano-url); background-size:120px;
opacity:var(--grano-opacidad); mix-blend-mode:var(--grano-mezcla);
}
body.grano::before{position:fixed; inset:0; z-index:90}
:where(.grano:not(body)){position:relative; isolation:isolate} /* :where = la página puede cambiarle el position (sticky, absolute) */
.grano:not(body)::before{position:absolute; inset:0; z-index:-1; border-radius:inherit}
/* hoja rayada: renglones cada 32px. .suaves = más tenues; .margen = línea de
margen (≥1100px). Con ":root" adelante para ganarle a un background: de la página */
:root .renglones{
--_renglon: var(--renglon);
background-image:repeating-linear-gradient(180deg, transparent 0 calc(var(--renglon-alto) - 1px), var(--_renglon) calc(var(--renglon-alto) - 1px) var(--renglon-alto));
}
:root .renglones.suaves{--_renglon: var(--renglon-suave)}
@media (min-width:1100px){
:root .renglones.margen{
background-image:
linear-gradient(90deg, transparent 0 calc(var(--margen-x, 72px) - 1px), var(--margen-linea) calc(var(--margen-x, 72px) - 1px) var(--margen-x, 72px), transparent var(--margen-x, 72px)),
repeating-linear-gradient(180deg, transparent 0 calc(var(--renglon-alto) - 1px), var(--_renglon) calc(var(--renglon-alto) - 1px) var(--renglon-alto));
}
}
/* 3 anillas a la izquierda de una hoja: perforación + aro de metal que sale
18px por el borde. Sólo ≥1100px (con .desde-900, ≥900px). Usa ::after.
La hoja necesita ≥32px de relleno a la izquierda y no tener overflow:hidden. */
.anillas{position:relative}
.anillas::after{
content:""; display:none; position:absolute; top:0; bottom:0; left:-18px; width:56px; pointer-events:none; z-index:2;
background:
var(--anilla-url) 0 18% / 56px 24px no-repeat,
var(--anilla-url) 0 50% / 56px 24px no-repeat,
var(--anilla-url) 0 82% / 56px 24px no-repeat;
}
@media (min-width:900px){ .anillas.desde-900::after{display:block} }
@media (min-width:1100px){ .anillas::after{display:block} }
/* clip de papel arriba a la derecha (.izq: a la izquierda). Usa ::before */
.clip{position:relative}
.clip::before{
content:""; position:absolute; top:-12px; right:1.2rem; z-index:2; pointer-events:none;
width:15px; height:40px; border-radius:8px; transform:rotate(7deg);
box-shadow:inset 0 0 0 2.5px var(--clip-metal), inset 0 0 0 5px var(--paper), inset 0 0 0 7px var(--clip-metal);
}
.clip.izq::before{right:auto; left:1.2rem; transform:rotate(-7deg)}
/* ═══════════ FICHA, TICKET Y HOJA PLASTIFICADA (siempre papel) ═══════════
Son material propio: papel en Familia, crema en FOMO, vivan en la hoja que vivan. */
/* ficha de papel con esquina de color (tareas, avisos) */
.ficha-papel{
position:relative; border:1px solid var(--line); border-radius:3px;
padding:14px 34px 16px 16px; box-shadow:0 16px 28px -20px var(--sombra);
}
.ficha-papel::after{
content:""; position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:2px;
background:var(--acento); pointer-events:none;
}
/* ticket con muescas a los costados (cortes reales, se ve lo de atrás) */
.ticket{
position:relative; border:1px solid var(--line); border-radius:3px; padding:1.25rem 1.5rem;
-webkit-mask:radial-gradient(circle 10px at 0 50%, #0000 96%, #000 100%) 0 0 / 51% 100% no-repeat,
radial-gradient(circle 10px at 100% 50%, #0000 96%, #000 100%) 100% 0 / 51% 100% no-repeat;
mask:radial-gradient(circle 10px at 0 50%, #0000 96%, #000 100%) 0 0 / 51% 100% no-repeat,
radial-gradient(circle 10px at 100% 50%, #0000 96%, #000 100%) 100% 0 / 51% 100% no-repeat;
}
.ticket-barras{
height:34px; margin-top:1rem;
background-image:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 10px, var(--ink) 10px 11px, transparent 11px 14px);
}
.ticket-codigo{margin-top:.4rem; font-family:var(--font); font-size:.66rem; letter-spacing:.3em; color:var(--ink-2); text-align:center}
/* hoja plastificada (M2): brillo de laminado sobre el fondo, debajo del texto */
.plastificada{
position:relative; isolation:isolate; border-radius:10px; padding:1.4rem 1.5rem;
box-shadow:0 22px 40px -24px var(--sombra);
outline:1px solid rgba(0,0,0,.06); outline-offset:-7px;
}
.plastificada::after{
content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
background:linear-gradient(115deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 60%, rgba(255,255,255,.5) 78%, rgba(255,255,255,0) 92%);
mix-blend-mode:screen; opacity:.5;
}
/* ═══════════ CARPETA CON PESTAÑAS DE COSTADO ═══════════
← el material (.hoja-crema/.hoja-oscura) va acá
...
…
Las pestañas van primero en el HTML (orden de foco) y se ven a la DERECHA. */
.carpeta{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch}
.carpeta:is(.hoja-oscura, .hoja-crema){background-color:transparent}
.carpeta > .pestanas{grid-column:2; grid-row:1}
.carpeta > .carpeta-hoja{grid-column:1; grid-row:1}
.carpeta-hoja{
position:relative; z-index:1; min-width:0;
background-color:var(--paper); color:var(--ink);
border:1px solid var(--hoja-borde); border-radius:4px;
}
.carpeta-hoja:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.pestanas{
position:sticky; top:16px; align-self:start; z-index:2;
display:flex; flex-direction:column; gap:4px;
width:var(--pestanas-ancho); min-width:0; padding:24px 0 16px;
}
.pestana{
position:relative; display:flex; align-items:center; gap:.45rem;
width:calc(100% - 8px); min-height:44px; margin:0; padding:.55rem 1.15rem .55rem .7rem;
font-family:var(--font); font-weight:500; font-size:.82rem; line-height:1.2; text-align:left;
color:var(--pestana-tinta); background:var(--pestana-1);
border:1px solid rgba(18,16,14,.14); border-left:0; border-radius:0 8px 8px 0;
box-shadow:inset 7px 0 8px -7px rgba(0,0,0,.3); /* sale de atrás de la hoja */
cursor:pointer; -webkit-tap-highlight-color:transparent;
transition:transform .16s var(--ease), background-color .16s ease;
}
.pestana:nth-child(3n+2){background:var(--pestana-2)}
.pestana:nth-child(3n+3){background:var(--pestana-3)}
.pestana.negra{background:var(--pestana-negra); color:var(--pestana-negra-tinta); border-color:var(--pestana-negra-borde, transparent)}
.pestana:hover{transform:translateX(3px)}
.pestana:focus-visible{outline:2px solid currentColor; outline-offset:-5px}
/* la activa se funde con la hoja: mismo papel y sin borde del lado de la hoja */
.pestana[aria-selected="true"]{
z-index:1; width:calc(100% + 1px); margin-left:-1px;
background:var(--paper); color:var(--ink);
border-color:var(--pestana-activa-borde); box-shadow:none; transform:none; cursor:default;
}
.pestana[aria-selected="true"]::after{
content:""; position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:2px;
background:var(--acento); pointer-events:none;
}
.pestana-num{flex:none; min-width:1.05em; font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.18rem; line-height:1}
.pestana-nom{flex:1 1 auto; min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere}
.pestana-cant{
flex:none; min-width:1.7em; padding:.12em .42em;
font-size:.72rem; font-weight:500; line-height:1.1; text-align:center; font-variant-numeric:tabular-nums;
border:1px solid currentColor; border-radius:999px; opacity:.75;
}
.pestana-cant:empty{display:none}
.pestana[aria-selected="true"]:hover{transform:none}
/* celular: fila horizontal arriba de la hoja, con scroll propio */
@media (max-width:759.98px){
.carpeta{grid-template-columns:minmax(0,1fr)}
.carpeta > .pestanas{grid-column:1; grid-row:1}
.carpeta > .carpeta-hoja{grid-column:1; grid-row:2}
.pestanas{
position:relative; top:auto; align-self:stretch;
flex-direction:row; align-items:flex-end; gap:4px;
width:auto; max-width:100%; padding:8px 10px 0; margin:0 0 -1px;
overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pestanas::-webkit-scrollbar{display:none}
.pestana{
flex:none; width:auto; max-width:13rem; margin:6px 0 1px;
border:1px solid rgba(18,16,14,.14); border-bottom:0; border-radius:8px 8px 0 0;
box-shadow:inset 0 -7px 8px -7px rgba(0,0,0,.3);
}
.pestana.negra{border-color:var(--pestana-negra-borde, transparent)}
.pestana-nom{display:block; white-space:nowrap; text-overflow:ellipsis}
.pestana:hover{transform:translateY(-2px)}
.pestana[aria-selected="true"]{width:auto; margin:0; padding-bottom:calc(.55rem + 6px); border-color:var(--pestana-activa-borde); border-bottom:0}
}
/* ═══════════ APARTADO ═══════════
Una nota para leer dentro de una clase de la ruta, antes de sus tareas. No es tarea: sin casilla
ni esquina de ficha, y nada de lo que tiene cuenta para el avance. Hoja interna con un filete de
acento a la izquierda (tinta en Familia, fucsia hondo en la hoja crema de FOMO).