/* ═══════════════════════════════════════════════════════════
Expedición Atlas — styles.css
═══════════════════════════════════════════════════════════ */
/* ── Tipografía propia ──
Se sirve desde fonts/ y no desde un CDN: en un colegio la red puede
bloquearlo o caerse, y la app tiene que verse igual sin conexión.
`font-display: swap` evita el texto invisible mientras carga. */
@font-face {
font-family: 'Bree Serif';
src: url('../fonts/bree-serif-latin.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('../fonts/nunito-latin.woff2') format('woff2');
font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('../fonts/nunito-italic-latin.woff2') format('woff2');
font-weight: 400 800; font-style: italic; font-display: swap;
}
:root {
/* ── Superficies ──
Cuatro niveles, no uno: página, panel, tarjeta y hueco. Antes casi todo
compartía el mismo crema y las jerarquías se leían solo por el borde. */
--paper: #f2e5cb; /* fondo de la página */
--paper-deep: #e8d8b8; /* zonas hundidas, huecos, pistas */
--surface: #fffdf7; /* tarjeta */
--surface-raised: #ffffff; /* tarjeta destacada / diálogo */
--surface-sunken: #f0e4ca; /* barras y campos dentro de una tarjeta */
/* ── Tinta ── */
--ink: #33240f;
--ink-soft: #6b5638;
/* Medido: #8a7350 daba 3,62:1 sobre el papel y 4,44:1 sobre la tarjeta,
los dos por debajo del mínimo. Este llega a 5,27:1 y 6,45:1. */
--ink-faint: #6f5a3a;
/* ── Marca ── */
--brass: #8a5a0b;
--brass-light: #e6b93f;
--brass-tint: #f6e7c4;
--leather: #7a4a21;
--leather-dark: #4a2c12;
--jungle: #37622f;
--jungle-light: #6f9e59;
--jungle-tint: #e6f0d9;
--danger: #a83a25;
--danger-tint: #f8e3dd;
--gold: #f0c33c;
/* compatibilidad con las reglas que aún nombran los tokens antiguos */
--parchment: var(--paper);
--parchment-dark: var(--paper-deep);
--card: var(--surface);
/* ── Tipografía ──
Escala de quinta mayor recortada; cada paso se nota sin dar saltos. */
--font-display: "Bree Serif", "Georgia", "Times New Roman", serif;
--font-text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
--t-xs: 0.78rem;
--t-sm: 0.88rem;
--t-base: 1rem;
--t-md: 1.12rem;
--t-lg: 1.32rem;
--t-xl: 1.65rem;
--t-2xl: 2.1rem;
--t-3xl: 2.9rem;
/* ── Espaciado ── */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
/* ── Radios ──
Un solo radio para todo aplanaba la jerarquía: ahora el contenedor es
más redondo que lo que lleva dentro, como en el papel real. */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 26px;
--r-pill: 999px;
--radius: var(--r-lg); /* compatibilidad */
/* ── Elevación ──
Sombras cálidas (tinte de la tinta), no grises: sobre pergamino un gris
puro se ve sucio. */
--e-1: 0 1px 2px rgba(51, 36, 15, .07), 0 1px 1px rgba(51, 36, 15, .04);
--e-2: 0 2px 4px rgba(51, 36, 15, .08), 0 4px 12px rgba(51, 36, 15, .07);
--e-3: 0 6px 14px rgba(51, 36, 15, .10), 0 14px 34px rgba(51, 36, 15, .10);
--e-inset: inset 0 1px 2px rgba(51, 36, 15, .10);
--shadow: var(--e-2); /* compatibilidad */
/* Filete: separa sin pesar. Casi todo el orden de la interfaz sale de aquí. */
--line: 1px solid rgba(122, 74, 33, .18);
--line-strong: 1px solid rgba(122, 74, 33, .32);
/* Anchos de contenido: sin esto, en una pantalla de 1000 px la columna se
quedaba flotando arriba a la izquierda con medio lienzo vacío. */
--w-narrow: 44rem;
--w-content: 60rem;
--w-wide: 76rem;
--tap: 44px; /* objetivo táctil mínimo */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-text);
font-size: var(--t-base);
background-color: var(--paper);
/* Grano de papel: dos capas de ruido muy suave más un viñeteado cálido.
Todo en CSS, sin imágenes que descargar. */
background-image:
radial-gradient(circle at 18% 8%, rgba(138, 90, 11, .07), transparent 45%),
radial-gradient(circle at 82% 92%, rgba(55, 98, 47, .07), transparent 45%),
repeating-linear-gradient(0deg, rgba(122, 74, 33, .022) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(122, 74, 33, .022) 0 1px, transparent 1px 3px);
background-attachment: fixed;
color: var(--ink);
min-height: 100vh;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ── Titulares ──
La serif solo en los titulares: en texto corrido a 8 años cansa. */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400; /* Bree Serif solo tiene un grosor y ya es robusta */
line-height: 1.2;
color: var(--leather-dark);
letter-spacing: -.01em;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
/* Si Bree Serif no carga, la reserva es Georgia: se compensa el grosor */
@supports not (font-variation-settings: normal) { }
/* Ojo tipográfico: los números de las estadísticas alineados en columna */
.num, .kpi-value, .hud-coins, .student-num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.big-emoji { font-size: 3.2rem; text-align: center; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
/* ── Foco por teclado ──
El contorno de 1 px del navegador se pierde sobre el pergamino. Este anillo
se ve sobre cualquiera de las superficies y solo aparece al navegar con
teclado, no al tocar con el dedo. */
:focus-visible {
outline: 3px solid var(--brass);
outline-offset: 2px;
border-radius: var(--r-sm);
}
#hud :focus-visible, #tabbar :focus-visible { outline-color: var(--gold); }
/* ── Botones ──
Tres pesos reales: acción principal, secundaria y terciaria (sin fondo).
Antes casi todo era «secundario» y la mirada no sabía dónde ir. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
border: none; border-radius: var(--r-md);
padding: .7rem 1.3rem;
font-family: var(--font-text);
font-size: var(--t-base); font-weight: 700; line-height: 1.2;
min-height: var(--tap);
box-shadow: var(--e-1);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { box-shadow: var(--e-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--e-1); }
.btn-primary { background: var(--jungle); color: #fff; }
.btn-primary:hover { background: #2e5327; }
.btn-secondary { background: var(--brass); color: #fff; }
.btn-secondary:hover { background: #744a08; }
/* 44 px es el objetivo táctil mínimo recomendado, y aquí son dedos de seis
años sobre una tablet: fallar el toque en la tienda frustra justo en el
momento de recompensa. */
.btn-small { padding: .4rem .85rem; font-size: var(--t-sm); min-height: var(--tap); }
/* Terciarios: el peso más ligero de los tres, pero botones al fin y al cabo.
Sin fondo eran letra suelta: el «Volver a la portada» de la sala de mapas
cae justo encima de las dunas y la pirámide del horizonte, y ahí un texto
marrón sobre arena marrón no se lee ni se ve que se pueda tocar. Llevan
papel y un filete propios, que es lo que los despega de cualquier fondo
sin subirlos al rango de acción principal. */
.btn-back, .btn-quit {
background: var(--surface);
color: var(--leather-dark);
border: var(--line-strong);
box-shadow: var(--e-1);
padding-left: 1rem; padding-right: 1rem;
}
.btn-back { font-size: var(--t-sm); margin-bottom: var(--s-3); }
.btn-back:hover, .btn-quit:hover {
background: var(--brass-tint); border-color: var(--brass); box-shadow: var(--e-1);
}
.btn-quit { color: var(--ink); font-size: var(--t-sm); }
.btn-hint { background: var(--brass-tint); color: var(--leather-dark); box-shadow: var(--e-inset); }
/* Un retrato metido en mitad de una frase, en el sitio del emoji que
sustituye. Alto de línea y medio como mucho: más grande empuja el renglón
y se ve como algo pegado encima del texto en vez de dentro. */
.linea-retrato {
width: 1.5rem; height: 1.5rem; vertical-align: -.4em;
object-fit: contain; margin-left: .3rem;
}
.btn-hint:hover { background: #f0dcb0; box-shadow: var(--e-inset); }
.btn-restore { background: var(--brass-light); color: var(--leather-dark); margin-bottom: var(--s-3); }
/* ── Onboarding ── */
#screen-onboarding, #screen-auth {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: var(--s-5);
}
.onboarding-card {
background: var(--surface-raised); border-radius: var(--r-xl); box-shadow: var(--e-3);
border-top: 4px solid var(--brass);
padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 32rem; width: 100%;
text-align: center;
}
.onboarding-card h1 { font-size: var(--t-2xl); color: var(--leather-dark); }
.subtitle { color: var(--brass); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: var(--s-5); }
#onboarding-form { display: flex; flex-direction: column; gap: .8rem; margin-top: var(--s-5); }
/* ── Diálogos de personajes ──
Bocadillo con el retrato en un medallón: antes era una losa lisa que
competía con la tarjeta que lo contenía. */
.dialog {
display: flex; gap: .85rem; align-items: flex-start; text-align: left;
background: var(--paper); border-radius: var(--r-lg);
border-left: 4px solid var(--brass);
padding: .95rem 1.1rem; margin: var(--s-4) 0;
}
.dialog-avatar {
font-size: 1.5rem; line-height: 1; flex-shrink: 0;
width: 2.7rem; height: 2.7rem;
display: grid; place-items: center;
background: var(--surface); border-radius: var(--r-pill);
box-shadow: var(--e-1);
}
/* ── Los retratos de los compañeros ──
`contain` y no `cover`: son dibujos con fondo transparente, y recortarlos
para llenar un círculo le cortaría a Bruno el sombrero. Y `object-position`
los sube porque los tres tienen la cara arriba: centrados, el hueco enseñaría
medio pecho.
OJO con el tamaño: aquí NO se pone. El retrato lleva dos clases —la suya y la
del sitio donde va— y si esta declarara un ancho, ganaría por ir después en
la hoja y reventaría el tamaño de cada sitio. Pasó: Bruno salía a pantalla
completa en la ficha de resultado. Cada sitio pone su medida. */
.retrato { object-fit: contain; object-position: 50% 16%; }
/* ── Los dibujos de las cosas ──
Mismo trato que los retratos y por la misma razón: `.icono-dibujo` solo
dice CÓMO se dibuja dentro de su hueco, y el tamaño lo pone cada sitio.
La primera vez que esto no se separó, la carta de resultado se llenó con
un Bruno a pantalla completa. */
.icono-dibujo { display: block; width: 100%; height: 100%; object-fit: contain; }
.icono-emoji { line-height: 1; }
/* En la burbuja de diálogo, el retrato ES el avatar: mismo hueco redondo que
tenía el emoji, y el dibujo dentro. */
img.dialog-avatar {
display: block; width: 2.7rem; height: 2.7rem; padding: 0;
border-radius: var(--r-pill); overflow: hidden;
}
/* Solo el nombre del personaje va en su propia línea. Con el selector
descendiente, cualquier negrita dentro del párrafo se volvía bloque y
partía la frase por la mitad. */
.dialog-text > strong {
color: var(--brass); display: block; margin-bottom: .2rem;
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
}
.dialog-text p strong { color: inherit; }
.dialog-text p { font-size: var(--t-base); line-height: 1.6; }
.dialog.kira { background: var(--jungle-tint); border-left-color: var(--jungle); }
.dialog.kira .dialog-text > strong { color: var(--jungle); }
/* ── Horizonte ──
La mitad de abajo de casi todas las pantallas se quedaba vacía: pergamino
y nada más. En lugar de estirar el contenido para taparlo, el fondo pasa a
tener paisaje —un templo lejano y tres crestas de duna— tan bajo de
contraste que nunca compite con el texto que pase por encima. Va fijo al
pie de la ventana y detrás de todo. */
body::after {
content: '';
position: fixed; left: 0; right: 0; bottom: 0;
height: min(46vh, 27rem);
z-index: -1;
pointer-events: none;
/* Dos capas: el paisaje recortado y, debajo, la arena en la que el papel
se va posando. Sin ese degradado las dunas flotaban sobre el pergamino
y parecían una mancha de impresión. */
background-image:
url("data:image/svg+xml, "),
linear-gradient(180deg,
rgba(200, 160, 96, 0) 0%,
rgba(200, 160, 96, .10) 46%,
rgba(184, 141, 78, .22) 100%);
background-repeat: no-repeat, no-repeat;
background-position: bottom center, bottom center;
background-size: 100% 100%, 100% 100%;
}
/* ── El fondo del reto ──
La cámara por dentro, detrás de todo. Va aquí y no en `#screen-mission`
porque esa pantalla es una columna estrecha centrada y el fondo tiene que
ocupar el ancho entero de la ventana.
Se queda en un cuarto de opacidad a propósito: es el sitio donde está el
niño, no lo que tiene que mirar. Lo que tiene que mirar es el enunciado, y
un fondo a plena tinta detrás de un texto es lo contrario de eso. */
body::before {
content: '';
position: fixed; inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--fondo-reto, none);
background-size: cover;
/* Anclado arriba y no al centro: la cámara es apaisada y la pantalla de una
tablet en vertical es todo lo contrario, así que `cover` se come los
lados, que es donde están los engranajes y las estanterías. Subiendo el
encuadre se salva la parte que dice dónde estás: el arco, la bóveda y el
haz de luz. */
background-position: 50% 18%;
opacity: 0;
transition: opacity .45s ease;
}
body.en-mision::before { opacity: .5; }
/* En misión el horizonte estorba: el reto se queda solo con el pergamino, y
si detrás hay una cámara dibujada, las dunas sobran del todo. */
body.en-mision::after { opacity: .35; }
/* Y del todo cuando de verdad hay cámara: dos paisajes superpuestos no son
un sitio, son un borrón. La clase la pone el guion al elegir el fondo. */
body.con-camara.en-mision::after { opacity: 0; }
/* ── Iconos dibujados ──
Un solo trazo, `currentColor` y tamaño en `em`: el mismo símbolo sirve
sobre cuero, sobre papel y dentro de un botón sin declararlo tres veces.
`fill`/`stroke` se heredan hacia dentro del , que es la única vía
que atraviesa el árbol en sombra de un símbolo. */
.ico {
width: 1.15em; height: 1.15em;
flex-shrink: 0;
vertical-align: -.18em;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* En una caja grande el trazo fino se rompe; en una pequeña, engorda. */
.ico-lg { stroke-width: 1.5; }
.ico-sm { stroke-width: 2; }
/* ── HUD ──
Barra de estado permanente. Se le da profundidad con un degradado corto y
un filete dorado inferior: sin él, el marrón plano chocaba con el papel. */
#hud {
position: sticky; top: 0; z-index: 20;
display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
background-color: var(--leather-dark);
/* Cuero curtido: una luz cenital, una veta cálida cruzada y el fondo
hundido abajo. Un marrón plano se leía como una barra de navegación
cualquiera; esto se lee como material. */
background-image:
linear-gradient(180deg, rgba(255, 226, 170, .13) 0%, rgba(255, 226, 170, 0) 42%),
linear-gradient(96deg, #6a4019 0%, #52310f 46%, #3f2409 100%);
color: #fdf3dd;
padding: .5rem clamp(.9rem, 4vw, 2rem);
/* El filete de latón va como sombra y no como borde: así no suma altura
ni desplaza el contenido pegajoso del principio. */
box-shadow:
inset 0 -2px 0 rgba(240, 195, 60, .40),
inset 0 -3px 0 rgba(0, 0, 0, .35),
0 3px 10px rgba(30, 17, 4, .30);
}
.hud-left { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.hud-avatar {
position: relative;
font-size: 1.45rem; line-height: 1;
width: 2.5rem; height: 2.5rem; flex-shrink: 0;
display: grid; place-items: center;
border-radius: var(--r-pill);
/* Medallón: hueco por dentro, con un aro de latón que le da grosor. */
background:
radial-gradient(circle at 50% 22%, rgba(255, 240, 205, .22), rgba(0, 0, 0, .30) 78%);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, .45),
0 0 0 1.5px rgba(240, 195, 60, .45),
0 1px 0 rgba(255, 235, 190, .18);
}
.hud-identity { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#hud-name {
font-family: var(--font-display); font-size: var(--t-md);
letter-spacing: .01em;
/* Grabado: una luz por debajo, como letras hundidas en el cuero. */
text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 225, 170, .10);
}
.hud-rank-line { display: flex; align-items: center; gap: .3rem; min-width: 0; }
/* La medalla del rango, del tamaño de la letra de al lado. Es pequeña a
propósito: acompaña al nombre, no compite con el anillo de nivel. */
.hud-medal {
width: 1.35rem; height: 1.35rem; flex-shrink: 0;
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.hud-rank {
font-size: var(--t-xs); color: var(--gold);
text-transform: uppercase; letter-spacing: .09em; font-weight: 800;
}
.hud-right { display: flex; gap: .55rem; align-items: center; }
/* Los indicadores viven en cajetines hundidos, como los herrajes de una
caja de instrumentos. Antes eran texto suelto sobre el marrón. */
.hud-stat {
display: flex; align-items: center; gap: .45rem;
font-weight: 800; line-height: 1;
padding: .3rem .6rem; border-radius: var(--r-pill);
background: rgba(0, 0, 0, .26);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .40), 0 1px 0 rgba(255, 235, 190, .10);
}
.hud-stat-icon { display: grid; place-items: center; color: var(--gold); }
.hud-stat-icon .ico { width: 1.25rem; height: 1.25rem; }
.hud-num { font-variant-numeric: tabular-nums; font-size: var(--t-md); }
/* Anillo de nivel: el número dentro y los PE cerrando la vuelta. */
.hud-stat-level { gap: .5rem; padding-left: .32rem; }
.lvl-ring { position: relative; width: 2.3rem; height: 2.3rem; display: block; }
.lvl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.lvl-ring circle { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.lvl-track { stroke: rgba(255, 236, 200, .22); }
.lvl-fill {
stroke: var(--gold);
transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .3, 1);
filter: drop-shadow(0 0 3px rgba(240, 195, 60, .55));
}
.lvl-ring b {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-display); font-size: var(--t-md); color: #fff6e2;
font-weight: 400; font-variant-numeric: tabular-nums;
}
.hud-stat-label {
font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .09em; color: var(--brass-light);
}
/* Al subir de nivel, el aro da un golpe de luz. */
@keyframes sube-nivel {
0% { box-shadow: inset 0 1px 3px rgba(0,0,0,.40), 0 0 0 0 rgba(240, 195, 60, .75); }
60% { box-shadow: inset 0 1px 3px rgba(0,0,0,.40), 0 0 0 12px rgba(240, 195, 60, 0); }
100% { box-shadow: inset 0 1px 3px rgba(0,0,0,.40), 0 0 0 0 rgba(240, 195, 60, 0); }
}
.hud-stat-level.lvl-up { animation: sube-nivel 1s ease-out; }
.hud-stat-level.lvl-up .lvl-ring b { animation: late 1s ease-out; }
@keyframes late { 0%,100% { transform: scale(1); } 35% { transform: scale(1.28); } }
/* ── Layout ──
La columna era de 680 px fijos: en una tablet apaisada o un portátil
dejaba media pantalla vacía. Ahora crece con el hueco disponible y cada
pantalla declara cuánto quiere ocupar. */
#main {
width: 100%;
max-width: var(--w-content);
margin: 0 auto;
padding: var(--s-5) clamp(1rem, 3vw, 2rem) 6rem;
}
.screen { animation: aparece .22s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.screen { animation: none; }
* { transition-duration: .01ms !important; }
}
/* Encabezado de pantalla: título y una línea que explica de qué va. El icono
va en un medallón de latón —no suelto junto al texto— para que el titular
tenga peso de portada de capítulo y no de encabezado de formulario. */
.screen > h2, #screen-home h2 {
margin-bottom: var(--s-2);
display: flex; align-items: center; gap: .7rem;
}
.screen > h2 > .ico, #screen-home h2 > .ico {
width: 2.6rem; height: 2.6rem; padding: .45rem;
flex-shrink: 0; stroke-width: 1.5;
color: var(--brass); border-radius: var(--r-md);
background-color: var(--brass-tint);
background-image: linear-gradient(158deg, #fdf1d2, var(--brass-tint));
box-shadow:
inset 0 0 0 1px rgba(138, 90, 11, .26),
inset 0 -2px 4px rgba(138, 90, 11, .12),
0 1px 0 rgba(255, 255, 255, .7);
}
.screen h3 {
color: var(--leather); margin: var(--s-5) 0 var(--s-3);
display: flex; align-items: baseline; gap: .5rem;
}
/* Filete que continúa después del titular: ordena la página sin ruido */
.screen h3::after {
content: ''; flex: 1; height: 1px;
background: rgba(122, 74, 33, .18);
}
/* En misión no hay tabbar: el reto se queda solo en pantalla */
body.en-mision #tabbar { display: none; }
body.en-mision #main { padding-bottom: var(--s-5); }
/* ── Tabbar ── */
#tabbar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
display: flex; justify-content: center; gap: .15rem;
background-color: #3b230e;
background-image: linear-gradient(180deg, #4a2c12 0%, #3b230e 100%);
border-top: 1px solid rgba(240, 195, 60, .22);
padding: .3rem clamp(.4rem, 2vw, 1rem) calc(.3rem + env(safe-area-inset-bottom));
box-shadow: 0 -4px 18px rgba(0, 0, 0, .22);
}
.tab {
flex: 1 1 0; max-width: 8rem;
background: transparent; border: none; color: #e0cda8;
display: flex; flex-direction: column; align-items: center; gap: .18rem;
font-family: var(--font-text);
font-size: var(--t-xs); font-weight: 700; padding: .3rem .2rem .35rem;
border-radius: var(--r-md);
transition: color .16s ease, transform .16s ease;
}
.tab-ico {
display: grid; place-items: center;
width: 2.15rem; height: 2.15rem; border-radius: var(--r-md);
transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.tab-ico .ico { width: 1.4rem; height: 1.4rem; }
.tab-label { line-height: 1.1; }
.tab:hover { color: #fff4de; }
.tab:hover .tab-ico { background: rgba(255, 255, 255, .09); }
.tab:active { transform: translateY(1px); }
/* El realce claro dejaba el dorado en 4,33:1 sobre sí mismo. Sobre el hueco
oscuro llega a 8:1, y ahora además el icono se enciende: la pestaña
elegida parece una lámpara, no un rectángulo pintado. */
.tab.active { color: var(--gold); }
.tab.active .tab-ico {
color: #2a1806;
background-image: linear-gradient(180deg, var(--gold) 0%, var(--brass-light) 100%);
background-color: var(--gold);
box-shadow:
0 2px 7px rgba(240, 195, 60, .40),
inset 0 1px 0 rgba(255, 250, 230, .70),
inset 0 -2px 0 rgba(122, 74, 33, .30);
}
/* ── Mapa ── */
.map-header { margin-bottom: var(--s-5); }
.map-reveal { margin-top: var(--s-3); }
.map-reveal-bar {
height: 12px; background: rgba(122, 74, 33, .14); border-radius: var(--r-pill);
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(51, 36, 15, .22), 0 1px 0 rgba(255, 255, 255, .5);
}
#map-reveal-fill {
height: 100%; width: 0; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--jungle-light), var(--gold));
transition: width .6s cubic-bezier(.2, .8, .3, 1);
}
#map-reveal-pct {
display: block; margin-top: .35rem;
font-size: var(--t-sm); color: var(--ink-soft);
}
/* Avisos del día: mismo esqueleto, distinto color según lo que sea */
.daily-banner, .fatigue-banner {
display: flex; gap: .6rem; align-items: flex-start;
line-height: 1.55;
border-radius: var(--r-md); padding: .75rem 1rem;
margin-bottom: var(--s-4); font-size: var(--t-sm);
box-shadow: var(--e-1);
}
.daily-banner {
background: var(--jungle-tint); border-left: 4px solid var(--jungle);
animation: slide-in .4s ease;
}
.fatigue-banner { background: var(--brass-tint); border-left: 4px solid var(--brass); }
/* Cabecera de yacimiento: banda de cuero, no otra tarjeta crema. Así se
distingue de un golpe de vista el continente del contenido. */
.site-header {
position: relative;
display: flex; gap: .9rem; align-items: center;
background-color: var(--leather-dark);
/* Piedra tallada: luz cenital, veta diagonal y sombra en el canto. Una
banda de color plano se leía como el encabezado de una tabla. */
background-image:
linear-gradient(180deg, rgba(255, 225, 170, .14) 0%, rgba(255, 225, 170, 0) 38%),
linear-gradient(118deg, #6f441e 0%, #56340f 52%, #402508 100%);
color: #f7ead2;
border-radius: var(--r-lg);
padding: .9rem 1.15rem;
margin: var(--s-6) 0 var(--s-3);
box-shadow:
inset 0 1px 0 rgba(255, 235, 190, .16),
inset 0 -2px 0 rgba(0, 0, 0, .30),
var(--e-2);
}
/* Filete de latón al pie, como el metal que remata una placa grabada. */
.site-header::after {
content: ''; position: absolute; left: 1.15rem; right: 1.15rem; bottom: 0;
height: 2px; border-radius: var(--r-pill);
background: linear-gradient(90deg,
transparent, rgba(240, 195, 60, .55) 22%, rgba(240, 195, 60, .55) 78%, transparent);
}
.site-header:first-child { margin-top: 0; }
.site-icon {
font-size: 1.85rem; line-height: 1;
width: 3.1rem; height: 3.1rem; flex-shrink: 0;
display: grid; place-items: center;
border-radius: var(--r-md);
background:
radial-gradient(circle at 50% 20%, rgba(255, 240, 205, .20), rgba(0, 0, 0, .26) 80%);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, .40),
0 0 0 1.5px rgba(240, 195, 60, .38);
}
/* Con dibujo, el hueco del icono lo ocupa la ilustración entera: se posa
dentro sin fondo ni recorte, que son piezas con silueta propia. */
img.site-icon.site-img {
width: 5.4rem; height: 4.2rem; padding: 0;
background: none; box-shadow: none; border-radius: 0;
object-fit: contain; object-position: 50% 100%;
}
.site-header h3 { margin: 0; color: #fff6e2; font-size: var(--t-lg); }
.site-header h3::after { display: none; } /* el filete es para las secciones */
.site-header p { font-size: var(--t-sm); color: rgba(247, 234, 210, .82); }
/* ── El color de cada yacimiento ──
Seis tarjetas del mismo beige se leen como una sola lista. Un filete de
color por yacimiento las convierte en sitios distintos, que es lo que son.
Es un filete y un fondo de icono, no un baño de color: el pergamino sigue
mandando y el texto no pierde contraste en ninguna de las seis. */
.site-header { border-left: 5px solid var(--acento, var(--brass)); }
.site-header .site-icon { box-shadow: inset 0 0 0 2px var(--acento, transparent); }
/* ── La carta de expedición ──
Lo que hace que esta pantalla sea un mapa. El terreno se abre alrededor de
cada yacimiento y la arena se queda donde no se ha excavado, así que la carta
dice de un vistazo algo que la barra de porcentaje no podía decir: dónde has
estado y dónde no. */
.map-carta { margin: 0 0 var(--s-4); }
/* La proporción es la del dibujo, y `meet` en vez de `slice`: los bordes rotos
del pergamino son la mitad de su gracia y recortarlos sería tirarlos. */
.carta {
display: block; width: 100%; aspect-ratio: 11 / 6;
filter: drop-shadow(0 2px 6px rgba(51, 36, 15, .18));
}
/* El punto de cada yacimiento se puede tocar y se puede tabular: es un botón,
aunque esté dibujado. */
.carta-sitio { cursor: pointer; }
.carta-sitio .sitio-tela, .carta-sitio .sitio-asta { transition: stroke-width .12s ease; }
.carta-sitio:hover .sitio-tela, .carta-sitio:focus-visible .sitio-tela { stroke-width: 1.2; }
.carta-sitio:hover .sitio-asta, .carta-sitio:focus-visible .sitio-asta { stroke-width: 1.1; }
/* Al pasar por encima, el banderín se levanta un pelo: lo justo para que se
note que se puede tocar, sin que parezca que se ha despegado del suelo. */
.carta-sitio { transform-box: fill-box; transform-origin: 50% 100%; }
.carta-sitio:hover, .carta-sitio:focus-visible { transform: translateY(-.4px); }
/* La leyenda es la que se toca de verdad. En una tablet el dedo acierta más en
una etiqueta con nombre que en un punto de doce píxeles, y de paso pone el
número: cuántos estratos de ese sitio están dominados. */
.carta-leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.carta-chip {
display: inline-flex; align-items: center; gap: .4rem;
font-family: inherit; font-size: var(--t-sm); color: var(--leather-dark);
background: var(--surface); border: 0; cursor: pointer;
border-radius: var(--r-pill); padding: .3rem .9rem .3rem .7rem;
box-shadow: inset 0 0 0 1px rgba(122, 74, 33, .2);
/* 44 px, como todo lo que se toca en esta casa. Medían 29 y eran el único
sitio de la app por debajo del mínimo: el comentario de aquí arriba ya
decía que son «las que se tocan de verdad», pero el relleno no daba. */
min-height: var(--tap);
}
.carta-chip b { font-variant-numeric: tabular-nums; color: var(--acento, var(--brass)); }
.carta-chip-punto {
width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0;
background: var(--acento-suave, var(--paper-deep));
box-shadow: inset 0 0 0 2px var(--acento, var(--brass));
}
.carta-chip:hover { box-shadow: inset 0 0 0 2px var(--acento, var(--brass)); }
/* ── «Sigue por aquí» ──
Lo primero que se ve al abrir el mapa, y lo único con este peso: si todo
grita, no grita nada. Contesta la pregunta que se hace un niño de ocho años
al abrir la app, que antes había que deducir de seis tarjetas iguales. */
.seguir-card {
position: relative;
margin: 0 0 var(--s-4);
padding: var(--s-4);
border-radius: var(--r-lg);
background-image: linear-gradient(180deg, #fffefa 0%, var(--surface) 60%, #fbf5e6 100%);
background-color: var(--surface);
border-left: 6px solid var(--acento, var(--brass));
box-shadow: inset 0 1px 0 #fff, var(--e-3);
}
.seguir-eyebrow {
font-family: var(--font-display);
font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
color: var(--acento, var(--brass)); margin-bottom: .55rem;
}
.seguir-cuerpo { display: flex; align-items: center; gap: .9rem; }
.seguir-icono {
font-size: 2.1rem; line-height: 1; flex-shrink: 0;
width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
border-radius: var(--r-md);
background: var(--acento-suave, var(--paper-deep));
box-shadow: inset 0 0 0 2px var(--acento, transparent);
}
/* ── Los pozos dibujados ──
El hueco estaba hecho para un emoji, que trae su propio margen dentro. Un
dibujo no lo trae, así que se le pone aquí: sin margen, el objeto toca los
bordes del cuadradito y parece recortado. */
.pozo-img { width: 100%; height: 100%; padding: .18rem; }
.seguir-icono .pozo-img { padding: .22rem; }
.seguir-texto { min-width: 0; flex: 1; }
.seguir-texto strong { display: block; font-size: var(--t-lg); color: var(--leather-dark); }
.seguir-texto p { margin: .1rem 0 .4rem; font-size: var(--t-sm); color: var(--ink-soft); }
.seguir-texto small { font-size: var(--t-xs); color: var(--ink-soft); }
.seguir-barra {
height: .5rem; border-radius: var(--r-pill); overflow: hidden;
background: var(--paper-deep); margin-bottom: .2rem;
}
.seguir-barra i {
display: block; height: 100%; border-radius: var(--r-pill);
background: var(--acento, var(--brass));
transition: width .6s cubic-bezier(.2, .8, .3, 1);
}
.seguir-btn { width: 100%; margin-top: var(--s-3); }
/* El pozo al que apunta la tarjeta se reconoce, sin robarle protagonismo:
quien prefiera elegir por su cuenta ve dónde está lo que le proponen. */
.branch-card.branch-aqui { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 2px var(--acento, var(--brass)), var(--e-2); }
/* Los pozos se reparten en rejilla: en una tablet apaisada caben dos por
fila y se acaba la columna solitaria con medio lienzo vacío al lado. */
.site-branches {
display: grid; gap: var(--s-3);
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
margin-bottom: var(--s-3);
}
.branch-card {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: .85rem; width: 100%;
background-color: var(--surface);
/* Papel grueso: una luz en el canto de arriba y sombra caliente debajo.
El borde de 1 px que había antes lo dejaba plano como un formulario. */
background-image: linear-gradient(180deg, #fffefa 0%, var(--surface) 58%, #fbf5e6 100%);
border: none;
border-radius: var(--r-lg);
box-shadow:
inset 0 1px 0 #fff,
inset 0 0 0 1px rgba(122, 74, 33, .16),
var(--e-1);
padding: .9rem 1rem; text-align: left; font-size: var(--t-base);
font-family: var(--font-text); color: var(--ink);
transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease;
}
.branch-card:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 #fff,
inset 0 0 0 1px rgba(138, 90, 11, .45),
var(--e-3);
}
.branch-card:active { transform: translateY(-1px); }
/* Hueco de icono de tamaño fijo: los emoji tienen anchos distintos y sin
esto los títulos de cada fila empezaban en una x diferente. */
.branch-icon {
font-size: 1.55rem; line-height: 1;
width: 3rem; height: 3rem; flex-shrink: 0;
display: grid; place-items: center;
border-radius: var(--r-md);
background-color: var(--brass-tint);
background-image: linear-gradient(158deg, #fdf0cf 0%, var(--brass-tint) 100%);
box-shadow: inset 0 0 0 1px rgba(138, 90, 11, .22), inset 0 -2px 4px rgba(138, 90, 11, .12);
}
.branch-info { flex: 1; min-width: 0; }
.branch-info strong { display: block; color: var(--ink); font-size: var(--t-md); font-weight: 800; }
.branch-info small { color: var(--ink-soft); font-size: var(--t-xs); }
/* Los cuatro estratos, en vertical y a escala: es el testigo de un sondeo.
Cuatro puntos sueltos no decían de qué profundidad hablaban. */
.branch-strata-dots {
display: flex; gap: 3px; margin: .4rem 0 .3rem;
padding: 3px; border-radius: 5px; width: max-content;
background: rgba(122, 74, 33, .10);
box-shadow: inset 0 1px 2px rgba(51, 36, 15, .14);
}
.dot { width: 15px; height: 9px; border-radius: 2px; }
.dot-mastered {
background-image: linear-gradient(180deg, var(--gold), var(--brass-light));
background-color: var(--gold);
box-shadow: inset 0 1px 0 rgba(255, 250, 225, .8), 0 0 5px rgba(240, 195, 60, .55);
}
.dot-open { background: var(--jungle-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.dot-locked { background: rgba(107, 86, 56, .22); }
.branch-go { color: var(--brass); opacity: .45; transition: opacity .16s ease, transform .16s ease; }
.branch-go .ico { width: 1.5rem; height: 1.5rem; }
.branch-card:hover .branch-go { opacity: 1; transform: rotate(-14deg); }
.bazar-card { margin-top: var(--s-6); }
.bazar-inner {
display: flex; gap: .85rem; align-items: center;
background: #f6eaf2; border-left: 4px solid #8d5c82;
border-radius: var(--r-lg);
padding: .9rem 1.1rem; box-shadow: var(--e-1);
}
.bazar-icon {
width: 2.9rem; height: 2.9rem; flex-shrink: 0;
display: grid; place-items: center;
color: #7a4c70;
background: rgba(141, 92, 130, .14); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px rgba(141, 92, 130, .28);
}
.bazar-icon .ico { width: 1.6rem; height: 1.6rem; }
.bazar-inner strong { font-size: var(--t-md); }
.bazar-inner p { font-size: var(--t-sm); color: var(--ink-soft); }
.bazar-inner div { flex: 1; min-width: 0; }
/* ── Estratos ── */
.branch-desc { color: var(--ink-soft); font-size: var(--t-base); margin-bottom: var(--s-5); max-width: var(--w-narrow); }
/* El pozo se dibuja como un corte del terreno visto de perfil: cada estrato
es una capa de tierra con su propio tono, más clara arriba (arena de la
superficie) y más oscura y arcillosa según se baja. Antes eran cuatro
filas blancas iguales y la palabra «estrato» no significaba nada. */
/* ── La boca del pozo ──
Una franja de superficie con el borde roto, encima de la primera capa. Es lo
que convierte la lista en un corte de terreno: sin ella, la capa de arriba
flota y no se sabe desde dónde se baja. */
.strata-boca {
height: 1.5rem; border-radius: var(--r-lg) var(--r-lg) 0 0;
background-color: #cdae7c;
background-image: linear-gradient(180deg, #e0c79b 0%, #cdae7c 100%);
position: relative; box-shadow: inset 0 0 0 1px rgba(122, 74, 33, .18);
}
.strata-boca::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px;
background: repeating-linear-gradient(90deg,
#cdae7c 0 6px, transparent 6px 9px, #cdae7c 9px 17px, transparent 17px 21px);
}
.strata-boca i {
position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
font-style: normal; font-size: .62rem; font-weight: 800;
letter-spacing: .12em; text-transform: uppercase; color: #5e451f;
}
.strata-list {
display: flex; flex-direction: column;
border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden;
background: var(--surface);
box-shadow:
var(--e-3),
inset 0 0 0 1px rgba(122, 74, 33, .18);
}
.stratum-row {
position: relative;
display: flex; align-items: center; gap: .85rem; width: 100%;
border: none;
padding: .95rem 1rem; text-align: left;
font-family: var(--font-text); font-size: var(--t-base); color: var(--ink);
transition: background-color .16s ease, transform .16s ease;
}
/* Línea de sedimento entre capas: irregular, no un filete de tabla. */
.stratum-row + .stratum-row::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background:
linear-gradient(90deg,
rgba(122, 74, 33, .26) 0%, rgba(122, 74, 33, .10) 18%,
rgba(122, 74, 33, .30) 37%, rgba(122, 74, 33, .12) 58%,
rgba(122, 74, 33, .28) 76%, rgba(122, 74, 33, .13) 100%);
}
/* ── Tonos de tierra por profundidad ──
Eran cuatro blancos casi iguales: la palabra «estrato» hacía todo el trabajo
y el dibujo no decía nada. Ahora bajan de arena de superficie a arcilla
profunda, con bastante recorrido para que se vea la caída de un vistazo. El
más oscuro sigue por encima de 7:1 con la tinta, que es lo que marca el
límite de cuánto se puede oscurecer: la legibilidad manda sobre el efecto.
Y cada capa tiene su GRANO, no solo su tono. Arena fina arriba, gravilla
suelta en medio, arcilla veteada abajo: cuatro materiales distintos, que es
lo que hace que una pared de excavación se lea como capas y no como rayas. */
.stratum-row:nth-child(1) {
background-color: #fbf0d8;
background-image: radial-gradient(circle at 12% 30%, rgba(160, 125, 70, .10) 0 1px, transparent 1px),
radial-gradient(circle at 62% 72%, rgba(160, 125, 70, .09) 0 1px, transparent 1px);
background-size: 14px 14px, 19px 19px;
}
.stratum-row:nth-child(2) {
background-color: #f2e0bd;
background-image: radial-gradient(circle at 30% 40%, rgba(140, 104, 54, .13) 0 1.6px, transparent 1.6px),
radial-gradient(circle at 78% 18%, rgba(140, 104, 54, .10) 0 1.2px, transparent 1.2px);
background-size: 17px 17px, 23px 23px;
}
.stratum-row:nth-child(3) {
background-color: #e7cfa1;
background-image: repeating-linear-gradient(102deg,
rgba(120, 88, 44, .10) 0 2px, transparent 2px 9px),
radial-gradient(circle at 45% 60%, rgba(120, 88, 44, .13) 0 2px, transparent 2px);
background-size: auto, 21px 21px;
}
.stratum-row:nth-child(4) {
background-color: #d9bf94;
background-image: repeating-linear-gradient(96deg,
rgba(104, 74, 36, .13) 0 3px, transparent 3px 11px),
repeating-linear-gradient(-84deg,
rgba(104, 74, 36, .07) 0 2px, transparent 2px 14px);
}
/* Una capa aún enterrada: apagada y con grano grueso, como tierra sin tocar.
No se aclara —lo enterrado no está más limpio, está más compacto— así que
se le echa una veladura de sombra por encima. */
.stratum-row.locked {
color: var(--ink-soft);
background-image:
repeating-linear-gradient(114deg,
rgba(107, 86, 56, .10) 0 3px, transparent 3px 7px);
}
/* La veladura va en una capa aparte y no en `box-shadow`: ahí pisaría el filo
de latón de lo excavado y el del frente, que son la misma propiedad. */
.stratum-row.locked::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: rgba(96, 74, 44, .10);
}
.stratum-row.locked .stratum-icon { color: var(--ink-faint); }
/* ── El frente de excavación ──
El estrato que la app propone en «Sigue por aquí». Antes las dos capas
abiertas se veían igual y no había forma de saber por dónde entrar: dos
puertas idénticas son media puerta. Se marca con el filo del pico a la
izquierda y una capa de polvo levantado. */
.stratum-row.frente {
box-shadow: inset 5px 0 0 var(--jungle-light);
}
/* El título deja sitio a la chapa para no pasar por debajo. */
.stratum-row.frente .stratum-info strong { padding-right: 3.4rem; }
.stratum-row.frente::after {
content: 'Aquí'; position: absolute; right: .8rem; top: .55rem;
font-family: var(--font-display); font-size: var(--t-xs);
letter-spacing: .07em; text-transform: uppercase;
color: #2c4f25; background: var(--jungle-tint);
padding: .1rem .45rem; border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px rgba(55, 98, 47, .35);
}
/* Si además está dominado manda el latón: ya no es por donde hay que entrar. */
.stratum-row.frente.excavado { box-shadow: inset 5px 0 0 var(--gold); }
.stratum-row.frente.excavado::after { display: none; }
/* Una capa excavada: limpia, con el filo de latón a la izquierda. */
.stratum-row.excavado { box-shadow: inset 4px 0 0 var(--gold); }
.stratum-row.excavado .stratum-icon {
color: var(--brass);
background-image: linear-gradient(160deg, #fdeec3, var(--brass-tint));
box-shadow: inset 0 0 0 1px rgba(138, 90, 11, .30), var(--e-1);
}
.stratum-row:not(:disabled):hover { background-color: #fff9ea; }
.stratum-row:not(:disabled):active { transform: translateY(1px); }
/* Regla de profundidad: la palabra pequeña arriba y el número grande
debajo, como la cota de una pared de excavación. En una sola línea el
texto se salía de la columna. */
.stratum-depth {
position: relative;
flex-shrink: 0; width: 3.1rem;
display: flex; flex-direction: column; align-items: center; line-height: 1;
color: var(--brass);
}
/* La cota de la pared: una marca a la izquierda de cada número, como en el
dibujo de sección de una excavación de verdad. */
.stratum-depth::before {
content: ''; position: absolute; left: -.55rem; top: 50%; width: .42rem; height: 1px;
background: currentColor; opacity: .55;
}
.stratum-depth i {
font-style: normal; font-size: .6rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ink-faint);
}
.stratum-depth b {
font-family: var(--font-display); font-weight: 400;
font-size: var(--t-lg); line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.stratum-row.locked .stratum-depth { color: var(--ink-faint); }
.stratum-icon {
width: 2.7rem; height: 2.7rem; flex-shrink: 0;
display: grid; place-items: center;
color: var(--leather);
background-color: var(--surface-sunken); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px rgba(122, 74, 33, .16), var(--e-inset);
transition: color .16s ease, box-shadow .16s ease;
}
.stratum-icon .ico { width: 1.5rem; height: 1.5rem; }
/* El estrato dibujado. El candado y la caja siguen siendo iconos de línea:
no son un estrato, son el estado en que está. */
.estrato-img { width: 2.2rem; height: 2.2rem; }
/* El dibujo del pozo delante de su nombre, a la altura del título. */
#branch-title { display: flex; align-items: center; gap: .5rem; }
.titulo-img { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
.stratum-info { flex: 1; min-width: 0; }
/* título en su propia línea: en los estratos bloqueados no hay barra de
dominio que lo separe del texto de ayuda y quedaban pegados */
.stratum-info strong { display: block; font-size: var(--t-base); font-weight: 800; }
.stratum-info small { color: var(--ink-soft); font-size: var(--t-xs); display: block; }
.stratum-go {
color: var(--brass); opacity: .45;
transition: opacity .16s ease, transform .16s ease;
}
.stratum-go .ico { width: 1.45rem; height: 1.45rem; }
/* El pico se hunde un poco al pasar por encima: el gesto de picar. */
.stratum-row:not(:disabled):hover .stratum-go { opacity: 1; transform: rotate(-14deg) translateY(1px); }
/* La barra de dominio cruzaba la fila entera de lado a lado y se leía como
un separador. Acotada y más gruesa, vuelve a ser un medidor. */
.mastery-bar {
height: 9px; max-width: 15rem;
background: rgba(122, 74, 33, .13); border-radius: var(--r-pill);
overflow: hidden; margin: .4rem 0 .25rem;
box-shadow: inset 0 1px 3px rgba(51, 36, 15, .20);
}
.mastery-fill {
height: 100%; border-radius: var(--r-pill);
background-color: var(--jungle-light);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(0, 0, 0, .06));
transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.mastery-fill.gold {
background-color: var(--gold);
background-image:
linear-gradient(180deg, rgba(255, 252, 235, .55), rgba(138, 90, 11, .18)),
linear-gradient(90deg, var(--brass-light), var(--gold));
box-shadow: 0 0 7px rgba(240, 195, 60, .55);
}
/* ── Misión ──
La pantalla donde más rato pasa un niño. Antes la tarjeta flotaba arriba
y quedaba el 80 % de pergamino vacío debajo. Ahora ocupa el alto de la
ventana y el reto queda centrado, a la altura de los ojos. */
#screen-mission {
/* ── Dónde empieza el reto ──
Estaba centrado dentro de una banda fija de 42 rem. En una tablet eso
dejaba 160 px de nada por arriba y 440 px por abajo: el reto se hundía a
media página con medio lienzo vacío debajo.
Ahora arranca arriba, siempre a la misma altura. No es solo por aprovechar
el sitio: un enunciado que sube y baja de un reto a otro obliga a
BUSCARLO cada vez, y son seis veces por expedición. Que esté siempre donde
estaba es lo que deja pensar en la pregunta en vez de en la pantalla. */
min-height: calc(100vh - 10rem);
min-height: calc(100svh - 10rem); /* móviles con barra que aparece y se va */
display: flex; flex-direction: column; justify-content: flex-start;
padding-top: clamp(.25rem, 2vh, 1.25rem);
max-width: var(--w-narrow); margin: 0 auto;
}
/* Cartela de misión: dónde se está excavando y cuánto queda. Va sobre una
banda de piedra clara, no suelta sobre el papel, para que se lea como el
marco del reto y no como una migaja de navegación. */
.mission-header {
display: flex; justify-content: space-between; align-items: center; gap: .8rem;
margin-bottom: var(--s-4); flex-wrap: wrap;
font-weight: 800; color: var(--leather);
font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em;
padding: .5rem .9rem; border-radius: var(--r-pill);
background: rgba(255, 253, 247, .72);
box-shadow: inset 0 0 0 1px rgba(122, 74, 33, .16);
}
#mission-title { display: flex; align-items: center; gap: .45rem; min-width: 0; }
#mission-title .ico { width: 1.15rem; height: 1.15rem; }
.mh-site { display: inline-flex; align-items: center; gap: .35rem; }
.mh-img { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
/* Separador en forma de rombo: marca el salto de yacimiento a estrato sin
meter otro punto medio en una línea que ya lleva dos. */
.mh-sep {
width: 5px; height: 5px; flex-shrink: 0;
background: var(--brass); transform: rotate(45deg); opacity: .55;
}
.mission-progress { display: flex; gap: .35rem; }
/* ── La racha ──
Aparece a los tres aciertos seguidos, late cuando el número sube, y al
fallar se va sin ruido: en esta app el error no penaliza, y una racha que se
rompe con estruendo es exactamente lo contrario. */
.mission-racha {
display: inline-flex; align-items: center; gap: .35rem;
font-size: var(--t-sm); font-weight: 800; letter-spacing: .04em;
color: #8a3d12; padding: .25rem .6rem; border-radius: var(--r-pill);
background: linear-gradient(135deg, #ffe9c2, #ffd79a);
box-shadow: inset 0 0 0 1px rgba(168, 90, 20, .35);
}
.racha-llama { font-size: 1rem; line-height: 1; }
.racha-late { animation: racha-sube .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes racha-sube {
0% { transform: scale(1); }
40% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .racha-late { animation: none; } }
.qdot {
width: 11px; height: 11px; border-radius: 50%;
background: rgba(122, 74, 33, .14);
box-shadow: inset 0 1px 2px rgba(51, 36, 15, .25);
transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.qdot-ok {
background: var(--jungle-light);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1.5px var(--jungle);
}
.qdot-fail {
background: var(--danger);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 1.5px var(--danger);
}
.qdot-current {
background: var(--gold); transform: scale(1.35);
box-shadow: 0 0 0 1.5px var(--brass), 0 0 7px rgba(240, 195, 60, .8);
}
.question-card, .feedback-card, .result-card {
position: relative;
background-color: var(--surface-raised);
/* Ficha de excavación: papel grueso con luz arriba y peso abajo. */
background-image: linear-gradient(180deg, #ffffff 0%, #fffdf7 62%, #fdf7ea 100%);
border-radius: var(--r-xl);
border: none;
box-shadow:
inset 0 1px 0 #fff,
inset 0 0 0 1px rgba(122, 74, 33, .14),
var(--e-3);
padding: clamp(1.2rem, 3vw, 2rem);
}
/* Cinta de latón en el canto superior: remata la tarjeta y le da un frente. */
.question-card::before, .result-card::before {
content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 3px;
border-radius: var(--r-pill);
background: linear-gradient(90deg,
transparent, var(--brass-light) 25%, var(--gold) 50%, var(--brass-light) 75%, transparent);
}
.question-text {
font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; line-height: 1.4;
margin-bottom: var(--s-5); white-space: pre-line; color: var(--ink);
}
/* Dos columnas cuando el hueco lo permite: cuatro opciones cortas apiladas
obligaban a barrer toda la pantalla con la vista. */
.options { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* Cada opción es una losa: canto claro arriba, base oscura abajo y un
desplazamiento real al pulsar, como una tecla que se hunde. Antes eran
rectángulos planos y responder no se notaba en la mano. */
.option {
display: flex; align-items: center; gap: .75rem;
padding: .9rem 1rem; font-family: var(--font-text);
font-size: var(--t-md); font-weight: 600; text-align: left; color: var(--ink);
background-color: var(--paper);
background-image: linear-gradient(180deg, #f8ecd6 0%, var(--paper) 100%);
border: 2px solid transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .75),
0 3px 0 rgba(122, 74, 33, .22),
var(--e-1);
border-radius: var(--r-md); min-height: 3.4rem;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
/* Letra de la opción: da un asidero para leerlas y nombrarlas en voz alta
(«la C»), y de paso alinea todos los textos en la misma x. */
/* La letra lleva la tinta del yacimiento donde se está excavando. No dice
nada de la respuesta —las cuatro llevan la misma, y diferenciarlas sería
filtrar cuál es la buena— pero ata el reto a su sitio: se está en Kaldros,
no en un formulario. */
.option::before {
content: attr(data-letra);
flex-shrink: 0; width: 2rem; height: 2rem;
display: grid; place-items: center;
background-color: var(--acento-suave, var(--brass-tint));
background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
color: var(--acento, var(--leather-dark));
border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px rgba(138, 90, 11, .28), 0 1px 0 rgba(255, 255, 255, .6);
font-family: var(--font-display); font-size: var(--t-sm);
transition: background-color .12s ease, color .12s ease;
}
.option:not(:disabled):hover {
border-color: var(--brass); background-color: #fffdf6;
background-image: linear-gradient(180deg, #fffdf6 0%, #fdf6e6 100%);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 #fff,
0 5px 0 rgba(122, 74, 33, .22),
var(--e-2);
}
/* Se hunde de verdad: baja los 3 px que tenía de canto. */
.option:not(:disabled):active {
transform: translateY(3px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 rgba(122, 74, 33, .22), var(--e-1);
}
/* Al corregir, las opciones se deshabilitan; la opacidad general de
:disabled dejaba el acierto y el fallo casi ilegibles justo cuando hay que
mirarlos. Se devuelve la opacidad a las tres marcadas y se atenúan solo
las que no dicen nada. */
.option:disabled { opacity: 1; }
.option:disabled:not(.option-correct):not(.option-wrong):not(.option-reveal) { opacity: .5; }
.option-correct { background: var(--jungle-tint) !important; border-color: var(--jungle) !important; }
.option-correct::before { background: var(--jungle); color: #fff; }
.option-wrong { background: var(--danger-tint) !important; border-color: var(--danger) !important; }
.option-wrong::before { background: var(--danger); color: #fff; }
.option-reveal { border-color: var(--jungle) !important; border-style: dashed !important; }
/* Pista, escuchar y abandonar. Se envuelven: son tres botones, y con la letra
grande de 1.º —o con el de voz visible— no caben en una fila de 390 px. Sin
envolver, «Abandonar» se salía 40 px de la pantalla. */
.mission-tools {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .5rem;
margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--line);
}
.feedback-card { text-align: center; animation: slide-in .3s ease; }
.feedback-title { font-family: var(--font-display); font-size: var(--t-xl); color: var(--leather-dark); margin: var(--s-3) 0; }
.feedback-explain { color: var(--ink-soft); margin-bottom: var(--s-5); font-size: var(--t-md); }
.feedback-card .btn { margin-top: .3rem; }
/* Quien habla se ve. El emoji va delante del titular, en su tamaño, para que
se sepa si celebra Kira o acompaña Tobías. */
/* Quien habla, delante del titular. Va en línea con el texto: es quien lo
dice, no una ilustración aparte. */
img.feedback-quien {
display: inline-block; width: 3rem; height: 3rem;
margin-right: .45rem; vertical-align: -.85em;
}
/* Al fallar, lo que hay que leer es la explicación. Era el texto más pequeño y
más gris de la pantalla, justo al revés de lo que hace falta. */
.feedback-card.feedback-ensena .feedback-title { font-size: var(--t-lg); }
.feedback-card.feedback-ensena .feedback-explain {
font-size: var(--t-lg); color: var(--ink); line-height: 1.5;
background: var(--paper); border-radius: var(--r-md);
padding: .8rem 1rem; text-align: left;
border-left: 4px solid var(--brass);
}
/* ── Resultado ──
Mismo centrado que la misión: es el momento de celebrar, y celebrarlo en
la esquina de arriba de una pantalla vacía no celebra nada. */
#screen-result {
max-width: var(--w-narrow); margin: 0 auto;
min-height: min(calc(100vh - 13rem), 42rem);
display: flex; flex-direction: column; justify-content: center;
}
.result-card { text-align: center; }
.big-emoji { font-size: 3.4rem; text-align: center; line-height: 1; margin-bottom: var(--s-3); }
/* Sello de expedición. Un emoji de 3,4 rem hacía de trofeo, y a ese tamaño
se ve el estilo de cada sistema operativo, no el del juego. Esto es un
disco de latón que se estampa al llegar. */
.sello {
width: 5.4rem; height: 5.4rem; margin: 0 auto var(--s-4);
display: grid; place-items: center;
border-radius: var(--r-pill);
color: var(--ink-soft);
background-color: var(--surface-sunken);
background-image: radial-gradient(circle at 50% 26%, #fffdf5, var(--surface-sunken) 78%);
box-shadow:
inset 0 0 0 2px rgba(122, 74, 33, .28),
inset 0 0 0 5px rgba(255, 255, 255, .55),
inset 0 -3px 6px rgba(122, 74, 33, .16),
var(--e-2);
animation: estampa .5s cubic-bezier(.2, 1.4, .4, 1);
}
.sello .ico { width: 2.5rem; height: 2.5rem; }
/* Cuando se ha logrado, el sello es de latón encendido. */
.sello-logro {
color: var(--leather-dark);
background-color: var(--gold);
background-image: radial-gradient(circle at 50% 24%, #fff3c8, var(--brass-light) 62%, #d9a520 100%);
box-shadow:
inset 0 0 0 2px rgba(138, 90, 11, .55),
inset 0 0 0 5px rgba(255, 250, 225, .60),
inset 0 -3px 8px rgba(138, 90, 11, .30),
0 0 22px rgba(240, 195, 60, .55),
var(--e-2);
}
/* Los tres tonos del aviso inmediato. El acierto y el fallo ya no dependen
de qué emoji tocara: cada uno tiene su color y su símbolo fijos. */
.sello-bien {
color: #2b5024;
background-color: var(--jungle-tint);
background-image: radial-gradient(circle at 50% 24%, #f3fbe9, var(--jungle-tint) 76%);
box-shadow:
inset 0 0 0 2px rgba(55, 98, 47, .45),
inset 0 0 0 5px rgba(255, 255, 255, .60),
0 0 20px rgba(111, 158, 89, .40),
var(--e-2);
}
.sello-mal {
color: #8d2f1e;
background-color: var(--danger-tint);
background-image: radial-gradient(circle at 50% 24%, #fdf0ec, var(--danger-tint) 76%);
box-shadow:
inset 0 0 0 2px rgba(168, 58, 37, .42),
inset 0 0 0 5px rgba(255, 255, 255, .60),
var(--e-2);
}
.sello-bien .ico, .sello-mal .ico { stroke-width: 2.6; }
/* El sello del fallo no rebota: llega de lado, sin celebrarse. */
.sello-mal { animation: llega-mal .34s ease-out; }
@keyframes llega-mal {
from { transform: translateX(-10px); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sello-mal { animation: none; } }
/* Cae y se asienta, como un cuño sobre el papel. */
@keyframes estampa {
0% { transform: scale(1.7) rotate(-9deg); opacity: 0; }
55% { opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sello { animation: none; } }
/* Los iconos dentro de las filas de recompensa van en su tono de marca. */
.reward-row .ico { color: var(--brass); }
.result-card h2 { margin-bottom: var(--s-4); }
.result-rewards {
margin: var(--s-5) 0; text-align: left;
background: var(--paper); border-radius: var(--r-lg); padding: .4rem 1rem;
}
.reward-row {
display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
padding: .55rem 0; border-bottom: var(--line); font-size: var(--t-base);
}
.reward-row:last-child { border-bottom: none; }
.reward-row span { color: var(--ink-soft); }
.reward-row strong { font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.reward-note {
font-size: var(--t-sm); color: var(--ink-soft); padding: .55rem 0;
border-top: var(--line); line-height: 1.5;
}
.reward-levelup {
background-color: #fff2c9;
background-image: linear-gradient(135deg, #fff6d9, #ffeeb8);
border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(138, 90, 11, .3);
padding: .7rem .9rem; margin-top: var(--s-3); font-weight: 700; text-align: center;
color: var(--leather-dark);
}
/* Subir de rango con la medalla al lado: la frase sola se leía como una fila
más de números y lo que acaba de pasar es lo mejor de la pantalla. */
.reward-rango {
display: flex; align-items: center; justify-content: center;
gap: .75rem; text-align: left;
}
.reward-rango p { margin: 0; }
.medalla-subida {
width: 3.4rem; height: 3.4rem; flex-shrink: 0; object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(90, 60, 20, .4));
}
/* El fragmento del Atlas, que es el premio de verdad de la Cámara. Grande y
centrado: se ha ganado el sitio. */
.reward-trofeo {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
margin-top: var(--s-3); padding: .8rem;
background-color: #fff2c9;
background-image: linear-gradient(135deg, #fff6d9, #ffeeb8);
border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(138, 90, 11, .3);
color: var(--leather-dark); font-weight: 700; text-align: center;
}
.reward-trofeo p { margin: 0; }
.trofeo-img {
width: min(11rem, 60%); height: auto; object-fit: contain;
filter: drop-shadow(0 3px 5px rgba(90, 60, 20, .35));
}
/* El trofeo aparece: no estaba y ahora está, que es justo lo que pasó. */
@media (prefers-reduced-motion: no-preference) {
.trofeo-img { animation: aparece .5s cubic-bezier(.2, .8, .3, 1) both; }
}
/* ── Campamento ── */
/* Avatar y equipo en fila: en columna, el bloque era una losa blanca casi
vacía que ocupaba media pantalla antes de llegar al almacén. */
.camp-avatar-zone {
display: flex; align-items: center; gap: var(--s-5);
background-color: var(--surface);
background-image: linear-gradient(135deg, var(--surface-raised), var(--surface));
border-radius: var(--r-xl); box-shadow: var(--e-2);
padding: var(--s-4) var(--s-5);
}
.camp-gear-equipped { flex: 1; justify-content: flex-start; }
.camp-gear-equipped small { color: var(--ink-soft); font-size: var(--t-sm); }
.camp-avatar {
position: relative;
font-size: 2.8rem; line-height: 1; flex-shrink: 0;
width: 4.4rem; height: 4.4rem; display: grid; place-items: center;
background: var(--brass-tint); border-radius: var(--r-pill);
box-shadow: var(--e-inset);
}
.camp-gear-equipped { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; min-height: 2.2rem; align-items: center; }
.gear-chip {
font-size: 1.4rem; background: var(--paper); border-radius: var(--r-sm);
padding: .2rem .45rem; box-shadow: 0 0 0 1px rgba(138, 90, 11, .25);
}
/* Lo que lleva puesto, dibujado y no en emoji: es lo que ha comprado con su
trabajo y donde antes había un icono de teclado ahora hay una cosa suya. */
.gear-chip .icono-dibujo { width: 2.2rem; height: 2.2rem; }
/* ── El campamento dibujado ──
Era una línea de emoji sueltos que no se distinguía de un texto cualquiera.
Ahora es un SITIO: cielo, dos dunas y suelo, y lo comprado puesto encima en
su lugar de siempre. La proporción es ancha y baja, como un horizonte, y se
estira con la pantalla sin que nada se salga. */
.camp-scene { margin-top: var(--s-4); }
.escena {
position: relative; width: 100%; aspect-ratio: 5 / 2; min-height: 9rem;
border-radius: var(--r-lg); overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(122, 74, 33, .22), var(--e-inset);
}
/* El paisaje. Antes eran tres elipses de CSS; ahora es el dibujo, recortado
por abajo para que el primer plano quede despejado: ahí es donde se posan la
tienda, el jeep y el explorador. */
.escena-fondo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 62%;
}
/* Cada cosa comprada, en su sitio. La sombra bajo el emoji es lo que la posa
en el suelo en vez de dejarla flotando encima del dibujo. */
.escena-cosa, .escena-yo, .escena-perro {
position: absolute; line-height: 1;
filter: drop-shadow(0 2px 2px rgba(90, 60, 20, .35));
}
/* La cosa del campamento se coloca por su ANCHO, no por el tamaño de letra:
con dibujo el emoji ya no manda, y la tienda y el jeep tienen que guardar
entre sí la proporción que tienen en la vida. El `font-size` sigue puesto
desde el guion para lo que no tenga dibujo. */
.escena-cosa .icono-dibujo { width: 100%; height: auto; }
.escena-cosa:has(.icono-emoji) { width: auto !important; }
.escena-yo {
left: 44%; bottom: 12%; font-size: 2.6rem; z-index: 6;
display: grid; place-items: center;
}
/* El avatar de rol trae su propio medallón: aquí se queda a la escala de la
escena, que si no tapa media duna. */
.escena-yo .rol-medallon { width: 2.6rem; height: 2.6rem; }
.escena-perro { left: 55%; bottom: 9%; width: 3rem; z-index: 7; }
.escena-perro .retrato { display: block; width: 100%; height: auto; object-position: center; }
.escena-pie {
margin: .5rem 0 0; font-size: var(--t-sm); color: var(--ink-soft); text-align: center;
}
.escena-pie .ico { width: 1rem; height: 1rem; vertical-align: -.15em; }
/* En pantallas estrechas el horizonte se hace más alto para que las cosas no
se amontonen: es la misma escena, con más aire entre pieza y pieza. */
@media (max-width: 30rem) {
.escena { aspect-ratio: 2 / 1; }
}
.camp-prefs { margin-top: var(--s-4); }
/* La casilla se iba al extremo derecho de una tarjeta muy ancha y perdía la
relación con su etiqueta. */
.camp-prefs .cfg-field-inline { max-width: 22rem; }
/* Toda la fila es la zona de toque, no la casilla de 28 px: la pulsa un niño
con el dedo, y son los dos ajustes de accesibilidad de la app. La casilla ya
viene a 28 px de `.cfg-field-inline`; lo que faltaba era la altura de fila. */
.camp-prefs .cfg-field-inline { min-height: 2.75rem; align-items: center; cursor: pointer; }
.shop-note { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s-4); max-width: var(--w-narrow); }
/* El almacén en rejilla: en columna única cada artículo ocupaba una fila
entera y había que hacer scroll para ver el catálogo completo. */
.shop-list {
display: grid; gap: .6rem;
/* 19 rem y no 17: desde que cada artículo enseña su dibujo, el hueco de la
izquierda ocupa lo suyo y a 17 los nombres se partían en tres renglones
—«Jeep / de la / expedición»— con el botón encima. */
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.shop-item {
display: flex; align-items: center; gap: .75rem;
background: var(--surface); border-radius: var(--r-lg); padding: .7rem .85rem;
box-shadow: var(--e-1); border: var(--line);
}
.shop-icon {
font-size: 1.5rem; line-height: 1;
width: 2.7rem; height: 2.7rem; flex-shrink: 0;
display: grid; place-items: center;
background: var(--surface-sunken); border-radius: var(--r-md);
}
/* Con dibujo el hueco crece un poco y se le quita el relleno: la mercancía
es lo que hay que ver, y a 2,7 rem con margen el catalejo era una raya. */
.shop-icon:has(.icono-dibujo) {
width: 3.4rem; height: 3.4rem; padding: .15rem;
background: transparent;
}
.shop-icon .icono-dibujo { filter: drop-shadow(0 1px 1px rgba(90, 60, 20, .3)); }
.shop-info { flex: 1; min-width: 0; }
/* Nombre y precio en líneas distintas: pegados se leía «Sombrero de ala
ancha80 🪙». Mismo arreglo que ya tenían los estratos. */
.shop-info strong { display: block; font-size: var(--t-sm); font-weight: 800; line-height: 1.3; }
/* El precio como ficha: doce botones marrones seguidos gritaban más que la
mercancía, y lo que hay que comparar es el precio. */
.shop-info small {
display: inline-block; margin-top: .2rem;
background: var(--brass-tint); color: var(--leather-dark);
border-radius: var(--r-sm); padding: .05rem .4rem;
font-weight: 800; font-size: var(--t-xs);
}
/* Botón de compra terciario: el protagonista es el objeto, no el botón */
.shop-item .btn-secondary {
background: transparent; color: var(--brass);
box-shadow: inset 0 0 0 2px rgba(138, 90, 11, .35);
flex-shrink: 0; white-space: nowrap;
}
.shop-item .btn-secondary:hover:not(:disabled) { background: var(--brass); color: #fff; box-shadow: var(--e-1); }
.shop-item .btn-secondary:disabled { box-shadow: inset 0 0 0 2px rgba(107, 86, 56, .25); color: var(--ink-soft); }
/* ── Fondo de la Sociedad ── */
.fund-block {
margin-top: var(--s-6); padding: var(--s-5);
background: var(--surface); border-radius: var(--r-xl);
box-shadow: var(--e-2); border-top: 4px solid var(--brass);
}
.fund-block h3 { margin: 0 0 .2rem; }
.fund-block h3::after { display: none; }
.fund-bar {
height: 14px; background: var(--surface-sunken); border-radius: var(--r-pill);
overflow: hidden; box-shadow: var(--e-inset); margin-top: var(--s-4);
}
.fund-bar-fill {
height: 100%; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--jungle-light), var(--gold));
transition: width .6s cubic-bezier(.2, .8, .3, 1);
}
.fund-bar-legend {
display: flex; flex-wrap: wrap; gap: .1rem .6rem;
font-size: var(--t-sm); color: var(--ink-soft); margin-top: .45rem;
}
.fund-milestones {
display: grid; gap: .5rem; margin: var(--s-5) 0;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.fund-milestone {
display: flex; align-items: center; gap: .7rem;
padding: .55rem .7rem; border-radius: var(--r-md);
background: var(--paper-deep); color: var(--ink-soft);
}
.fund-milestone.fund-done {
background: var(--jungle-tint); color: var(--ink);
border-left: 4px solid var(--jungle-light);
}
.fund-milestone .fund-icon {
font-size: 1.3rem; line-height: 1;
width: 2.4rem; height: 2.4rem; flex-shrink: 0;
display: grid; place-items: center;
background: rgba(255, 255, 255, .55); border-radius: var(--r-sm);
}
/* Un hito conseguido crece y pierde el cajetín: lo que la clase ha ganado se
ve, y lo que sigue bajo llave se queda en su candado pequeño. */
.fund-milestone .fund-icon:has(.hito-img) {
width: 3.4rem; height: 3.4rem; background: none;
}
.hito-img { width: 100%; height: 100%; }
/* El hito que viene, dentro de una frase: a la altura de la letra. */
.hito-linea { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -.4em; }
.fund-milestone strong { display: block; font-size: var(--t-sm); font-weight: 800; color: var(--ink); }
.fund-milestone small { color: var(--ink-soft); font-size: var(--t-xs); }
.fund-donate {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
padding-top: var(--s-4); border-top: var(--line);
}
.fund-donate-label { font-weight: 800; font-size: var(--t-sm); }
.fund-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.fund-mine { font-size: var(--t-xs); color: var(--ink-soft); margin-top: .6rem; }
/* ── Bitácora ── */
/* ── La semana en curso ──
Va la primera y dibujada. Tres días es el sello, así que son tres casillas:
es lo único de esta pantalla que el niño puede cambiar hoy, y lo que
convierte «0 sellos» en «te falta un día». */
.logbook-semana {
background-color: var(--surface);
background-image: linear-gradient(180deg, #fffdf7, var(--surface));
border-radius: var(--r-lg); border-left: 5px solid var(--brass);
padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
box-shadow: inset 0 1px 0 #fff, var(--e-1);
}
.logbook-semana.semana-lograda { border-left-color: var(--jungle); background-image: linear-gradient(180deg, #fbfff5, var(--jungle-tint)); }
.semana-titulo {
margin: 0 0 .6rem; font-family: var(--font-display);
font-size: var(--t-lg); color: var(--leather-dark);
}
.semana-dias { display: flex; gap: .45rem; margin-bottom: .5rem; }
/* Una casilla por día: hueca la que falta, sellada la que está. El hueco tiene
el mismo tamaño que la marca, para que se vea CUÁNTO falta y no solo que
falta algo. */
.semana-dia {
width: 2.3rem; height: 2.3rem; border-radius: var(--r-md);
background: var(--paper-deep);
box-shadow: inset 0 0 0 2px rgba(122, 74, 33, .22);
}
/* El día conseguido lleva el sello dibujado. La casilla se queda sin fondo ni
borde: el sello ya tiene silueta propia y encerrarlo en un cuadrado le
quitaría lo que lo hace un sello. */
.semana-dia.dia-hecho {
background: none; box-shadow: none;
display: grid; place-items: center;
}
.semana-dia.dia-hecho img { width: 100%; height: 100%; object-fit: contain; display: block; }
.semana-dice { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
/* auto-FILL y no auto-fit: ahora las cifras aparecen según hay algo que
contar, y con una sola tarjeta `auto-fit` la estiraba de lado a lado.
Con `auto-fill` los carriles vacíos siguen ahí y la tarjeta conserva su
tamaño de tarjeta. */
.logbook-summary {
display: grid; gap: .6rem; margin-bottom: var(--s-5);
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.logbook-stat {
display: flex; flex-direction: column; gap: .1rem;
background: var(--surface); border-radius: var(--r-lg);
padding: .85rem 1rem; box-shadow: var(--e-1); border: var(--line);
}
.logbook-stat strong {
font-family: var(--font-display); font-size: var(--t-xl);
color: var(--leather-dark); font-variant-numeric: tabular-nums;
}
.logbook-stat span { font-size: var(--t-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
/* La ruta se ciñe a los sellos que hay: estirada a todo lo ancho con un
solo sello parecía una tira en blanco. */
.stamps-route {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: .1rem;
background: var(--surface); border-radius: var(--r-pill);
padding: .5rem .9rem; box-shadow: var(--e-1); border: var(--line);
}
.logbook-note {
font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6;
max-width: var(--w-narrow); margin-top: var(--s-4);
}
.dashboard-note { font-size: var(--t-base); color: var(--ink-soft); max-width: var(--w-narrow); margin-bottom: var(--s-5); }
.merits-summary .logbook-stat strong { font-size: var(--t-lg); }
.stamp {
font-size: 1.3rem; width: 2rem; height: 2rem;
display: grid; place-items: center; border-radius: var(--r-pill);
}
.stamp-earned { background: none; }
.sello-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stamp-protected { background: #e2ecf5; }
.stamp-missed { color: var(--ink-faint); }
.stamp-current { background: var(--jungle-tint); box-shadow: 0 0 0 2px var(--jungle-light); }
.stamp-current:has(.sello-img) { background: none; box-shadow: none; }
.route-line { flex: 0 0 12px; height: 2px; background: rgba(122, 74, 33, .25); }
/* ── Cuaderno del docente ── */
.dash-intro { color: var(--ink-soft); margin-bottom: var(--s-5); max-width: var(--w-narrow); }
/* auto-fit, no un número fijo de columnas: con 5 tarjetas quedaba una sola
huérfana en la segunda fila. */
.kpi-grid {
display: grid; gap: .7rem; margin-bottom: var(--s-5);
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
/* Etiqueta arriba en versalitas, cifra grande debajo, matiz al pie: antes la
cifra y la etiqueta competían las dos en negrita y no se sabía qué leer. */
.kpi-card {
display: flex; flex-direction: column; gap: .15rem;
background: var(--surface); border-radius: var(--r-lg);
padding: .9rem 1rem; box-shadow: var(--e-1); border: var(--line);
border-top: 3px solid var(--brass-light);
}
.kpi-label {
order: -1;
font-size: var(--t-xs); color: var(--ink-soft);
text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
line-height: 1.3;
}
.kpi-value {
font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1;
color: var(--leather-dark);
}
.kpi-card small { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.35; }
/* Dominio por estrato: columna de etiquetas de ancho fijo para que todas
las barras arranquen en la misma x. */
.dash-branch {
background: var(--surface); border-radius: var(--r-lg);
padding: var(--s-4); box-shadow: var(--e-1); border: var(--line);
margin-bottom: .6rem;
}
.dash-branch h4 { margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.dash-row {
display: grid; grid-template-columns: 7.5rem 1fr auto;
align-items: center; gap: .7rem; padding: .22rem 0;
font-size: var(--t-sm);
}
.dash-row-label { color: var(--ink-soft); }
.dash-row-num { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--t-xs); white-space: nowrap; }
/* ── Toast ── */
.toast {
position: fixed; bottom: 5.4rem; left: 50%; transform: translateX(-50%);
background: var(--leather-dark); color: #fdf3dd; border-radius: var(--r-md);
padding: .75rem 1.2rem; font-size: var(--t-sm); font-weight: 600; z-index: 50;
box-shadow: var(--e-3); max-width: min(90vw, 30rem); text-align: center;
border: 1px solid rgba(240, 195, 60, .3);
}
/* Con cara, el aviso deja de ser un rótulo centrado y pasa a ser alguien
diciendo algo: el retrato a la izquierda y el texto alineado a su lado. */
.toast-con-cara {
display: flex; align-items: center; gap: .6rem; text-align: left;
padding: .55rem 1rem .55rem .6rem;
}
.toast-retrato {
width: 2.4rem; height: 2.4rem; flex-shrink: 0;
border-radius: var(--r-pill); background: rgba(255, 245, 220, .12);
object-fit: cover; object-position: 50% 12%;
}
/* ── Animaciones ── */
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast { animation: toast-in .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ══════════ ACCESO ══════════ */
.auth-tabs { display: flex; gap: .4rem; margin: var(--s-5) 0 0; }
.auth-tab {
flex: 1; padding: .65rem; border: none;
background: var(--paper-deep); color: var(--ink-soft);
border-radius: var(--r-md); font-family: var(--font-text);
font-weight: 700; font-size: var(--t-sm); min-height: var(--tap);
}
.auth-tab.active { background: var(--leather-dark); color: var(--gold); }
#login-form, #register-form { display: flex; flex-direction: column; gap: .7rem; margin-top: var(--s-4); }
#login-form input, #register-form input, #onboarding-form input {
padding: .8rem 1rem; font-size: var(--t-md); font-family: var(--font-text);
border-radius: var(--r-md);
border: 2px solid rgba(122, 74, 33, .28); background: var(--paper); color: var(--ink);
text-align: center; min-height: var(--tap);
transition: border-color .15s ease, box-shadow .15s ease;
}
#login-form input:focus, #register-form input:focus, #onboarding-form input:focus {
outline: none; border-color: var(--brass);
box-shadow: 0 0 0 3px rgba(138, 90, 11, .18);
}
.auth-error {
background: var(--danger-tint); border-left: 4px solid var(--danger); color: #7d2d1c;
border-radius: var(--r-md); padding: .7rem .9rem; margin-top: var(--s-4); font-size: var(--t-sm);
}
.auth-note { font-size: var(--t-xs); color: var(--ink-soft); margin-top: var(--s-4); }
.hud-logout {
background: transparent; border: none; font-size: 1.15rem; color: inherit;
padding: .3rem .4rem; border-radius: var(--r-sm); line-height: 1;
}
.hud-logout:hover { background: rgba(255,255,255,.12); }
/* ══════════ MÉRITOS DE CAMPAMENTO ══════════ */
.merits-intro { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s-5); max-width: var(--w-narrow); }
.merits-summary {
display: grid; gap: .6rem; margin-bottom: var(--s-4);
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.merits-today { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.merit-row {
display: flex; align-items: center; gap: .75rem;
background: var(--surface); border-radius: var(--r-lg); padding: .65rem .85rem;
box-shadow: var(--e-1); border: var(--line); border-left: 4px solid transparent;
}
.merit-row.merit-earned { border-left-color: var(--gold); }
.merit-icon {
font-size: 1.4rem; line-height: 1;
width: 2.6rem; height: 2.6rem; flex-shrink: 0;
display: grid; place-items: center;
background: var(--surface-sunken); border-radius: var(--r-md);
}
.merit-icon:has(.icono-dibujo) { background: transparent; padding: .1rem; }
.merit-info { flex: 1; min-width: 0; }
.merit-info strong { display: block; font-size: var(--t-sm); font-weight: 800; }
.merit-info small { color: var(--ink-soft); font-size: var(--t-xs); }
.merit-count { font-size: .9rem; letter-spacing: -2px; }
.merits-history { display: flex; flex-direction: column; gap: .35rem; }
.history-day {
display: flex; align-items: center; gap: .9rem;
background: var(--surface); border-radius: var(--r-md); padding: .5rem .85rem;
box-shadow: var(--e-1); border: var(--line);
}
.history-date {
font-size: var(--t-xs); font-weight: 700; color: var(--brass);
min-width: 3.4rem; text-transform: uppercase; letter-spacing: .04em;
}
.history-icons { font-size: 1.2rem; letter-spacing: .15rem; }
/* El historial: los méritos del día en fila, del tamaño de la letra. */
.history-icons { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.history-uno { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1; }
/* ── Los dibujos de espera ──
Una pantalla que todavía no tiene nada no puede ser media pantalla de
beige con una frase encima: se lee como una avería. Con el dibujo se lee
como lo que es, que la expedición no ha empezado. */
.espera {
display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
padding: var(--s-5) var(--s-4); text-align: center;
/* Centrado por sí mismo: se planta dentro de contenedores que están
alineados a la izquierda y con el ancho tasado, y ahí un dibujo pegado a
un lado se lee como un fallo de maquetación. */
width: 100%; max-width: 34rem; margin-inline: auto;
}
.espera-img { width: min(15rem, 60%); height: auto; opacity: .92; }
.espera p {
margin: 0; max-width: 26rem;
color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55;
}
.empty-note {
color: var(--ink-soft); font-size: var(--t-sm); padding: var(--s-4);
background: var(--paper-deep); border-radius: var(--r-md); text-align: center;
}
/* Una pantalla vacía con la cara de quien te está esperando se lee muy
distinta de una pantalla vacía con una frase. */
.nota-con-cara {
display: flex; align-items: center; justify-content: center;
gap: .7rem; text-align: left;
}
.nota-retrato {
width: 3rem; height: 3rem; flex-shrink: 0;
border-radius: var(--r-pill); background: var(--surface);
box-shadow: var(--e-1); object-fit: cover; object-position: 50% 10%;
}
/* Panel del docente (méritos) */
#pin-form { display: flex; gap: .5rem; }
#pin-input {
flex: 1; max-width: 150px; padding: .55rem .8rem; font-size: var(--t-base);
font-family: var(--font-text); min-height: var(--tap);
border-radius: var(--r-md); border: 2px solid rgba(122, 74, 33, .28);
background: var(--paper); color: var(--ink); text-align: center;
}
.award-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; margin-bottom: var(--s-4); }
.award-btn {
display: flex; flex-direction: column; align-items: center; gap: .25rem;
background: var(--surface); border: none;
border-radius: var(--r-lg); padding: .8rem .5rem; box-shadow: var(--e-1);
border-top: 3px solid var(--jungle-light);
font-family: var(--font-text); color: var(--ink);
text-align: center; transition: transform .12s ease, box-shadow .12s ease;
}
.award-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.award-btn:not(:disabled):active { transform: translateY(0); }
.award-btn.award-full { border-top-color: rgba(107, 86, 56, .3); background: var(--paper-deep); }
.award-icon { font-size: 1.6rem; line-height: 1; }
.award-icon .icono-dibujo { width: 2.4rem; height: 2.4rem; }
.award-name { font-size: var(--t-sm); font-weight: 800; line-height: 1.25; }
.award-meta { font-size: var(--t-xs); color: var(--ink-soft); }
/* ══════════ EL CURSO POR TRIMESTRES ══════════ */
.course-label {
font-size: var(--t-sm); color: var(--brass); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--s-3);
}
.tri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; margin-bottom: var(--s-4); }
.tri-card {
background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-1);
padding: .9rem 1rem; border-top: 3px solid rgba(122, 74, 33, .2); border-right: var(--line);
border-bottom: var(--line); border-left: var(--line);
}
.tri-card.tri-current { border-top-color: var(--gold); box-shadow: var(--e-2); }
/* El rótulo de estado iba en la misma línea que el título y se partía en dos
sobre el nombre del trimestre; ahora va encima, como etiqueta. */
.tri-head { display: flex; flex-direction: column-reverse; gap: .1rem; }
.tri-head strong { color: var(--leather-dark); font-family: var(--font-display); font-size: var(--t-md); font-weight: 400; }
.tri-state {
font-size: var(--t-xs); color: var(--ink-faint);
text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.tri-card.tri-current .tri-state { color: var(--brass); }
.tri-dates { font-size: var(--t-xs); color: var(--ink-soft); margin: .3rem 0 .6rem; }
.tri-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .7rem;
font-size: var(--t-sm); padding-top: .5rem; border-top: var(--line);
}
.tri-stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Aviso: configurado para la nube pero sin poder alcanzarla */
.cloud-warning {
position: relative; z-index: 40;
background: var(--brass-tint); border-bottom: 2px solid var(--danger);
color: #7d2d1c; padding: .75rem 1rem; font-size: var(--t-sm); text-align: center;
}
/* No poder guardar es peor que no tener nube: sin nube el diario al menos
está en la tablet, y sin poder escribir no está en ninguna parte. */
.cloud-warning-grave {
background: #fbe3dd; border-bottom-width: 3px; font-weight: 600;
}
/* ══════════ CUADRILLA ══════════ */
.team-banner {
display: flex; gap: 1rem; align-items: center;
background-color: var(--leather-dark);
background-image: linear-gradient(135deg, #6d421d, var(--leather-dark)); color: #f7ead2;
border-radius: var(--r-xl); box-shadow: var(--e-2);
padding: 1.1rem 1.3rem; margin-bottom: var(--s-5);
}
.team-icon {
font-size: 2.2rem; line-height: 1;
width: 3.6rem; height: 3.6rem; flex-shrink: 0;
display: grid; place-items: center;
background: rgba(255,255,255,.12); border-radius: var(--r-lg);
border: 1px solid rgba(240, 195, 60, .3);
overflow: hidden;
}
/* El emblema dibujado llena el medallón; el emoji se queda como estaba. Un
pelo de relleno para que el animal no toque el filete de latón. */
.team-icon .icono-dibujo { width: 100%; height: 100%; padding: .18rem; }
/* El mismo emblema, en pequeño, en los sitios donde solo acompaña al nombre. */
.icono-cuadrilla { width: 1.35em; height: 1.35em; vertical-align: -.3em; }
.aula-grupo-icono .icono-dibujo,
.amg-icono .icono-dibujo,
.team-other-icon .icono-dibujo {
width: 1.5em; height: 1.5em; display: inline-block; vertical-align: -.35em;
}
.team-banner h3 { margin: 0; color: #fff6e2; }
.team-banner h3::after { display: none; }
.team-banner p { font-size: var(--t-sm); color: rgba(247, 234, 210, .82); }
.team-goal {
background: var(--surface); border-left: 4px solid var(--jungle);
border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e-1);
}
.team-goal > strong { color: var(--leather-dark); font-size: var(--t-md); }
.team-goal-note { font-size: var(--t-sm); color: var(--ink-soft); margin: .35rem 0 .7rem; }
.team-goal-nums { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--t-sm); margin-top: .45rem; flex-wrap: wrap; }
.team-goal-nums strong { font-variant-numeric: tabular-nums; }
.team-members { display: flex; flex-wrap: wrap; gap: .4rem; }
.team-member {
display: inline-flex; align-items: center; gap: .45rem;
background: var(--surface); border: var(--line);
border-radius: var(--r-pill); padding: .4rem .9rem; font-size: var(--t-sm);
box-shadow: var(--e-1);
}
.team-member.team-me { border-color: var(--brass); background: var(--brass-tint); font-weight: 800; }
.team-member-quien { display: flex; flex-direction: column; line-height: 1.2; }
.team-member-quien small { font-weight: 600; font-size: var(--t-xs); color: var(--ink-soft); }
/* El rol propio del explorador: lo primero que quiere ver al abrir Cuadrilla */
.team-rol-mio {
display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
background: var(--surface); border: var(--line); border-left: 4px solid var(--brass);
border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
box-shadow: var(--e-1); margin-bottom: var(--s-4);
}
.team-rol-mio h3 { margin: .1rem 0; }
.team-rol-eti {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-soft); font-weight: 800;
}
.team-rol-que { font-size: var(--t-sm); font-weight: 700; color: var(--leather-dark); margin: 0; }
.team-rol-desc { font-size: var(--t-sm); color: var(--ink-soft); margin: .25rem 0 0; }
/* Avatar de un rol: emoji mientras no haya ilustración,