/* ==========================================================================
   KONTEO · la app en pergamino (06-app-naturalista) · 1 de 3: la base, el armazón y Hoy
   Manda la lámina (kneo/marca/sistema.html). Los colores, las letras y los
   tiempos se IMPORTAN de tokens-naturalista.css (las variables de marca/tokens.css
   con los papeles cambiados: tinta sobre pergamino, como la web): aquí no
   se escribe ni un valor de marca a mano. Lo disruptivo sale del movimiento y
   del detalle, nunca de la paleta.
   Movimiento: cuatro gestos (constelación, anillos, arco, estrella fugaz), una
   curva (--k-curva) y tres tiempos (180 / 420 / 2600 ms).
   Las otras dos hojas: pantallas.css (Facturas, Ventas, Asesoría, la gestoría)
   y capas.css (la cámara, las hojas que suben y la voz).
   ========================================================================== */
@import url("tokens-naturalista.css");

/* --p mueve a la vez el relleno y la marca del termómetro (01-shell) */
@property --p { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

:root {
  /* el aire de la lámina: cinco medidas y ninguna más */
  --e1: 6px; --e2: 12px; --e3: 18px; --e4: 26px; --e5: 40px;
  --k-escalon: 45ms;
  /* la estrella fugaz, UNA en toda la app: vuelo de 1.050 ms con la curva de la marca y 400 ms de destello al
     posarse (COHERENCIA.md, choque 3; propuesta para tokens.css). La cifra que la recibe se enciende 900 ms */
  --t-fugaz: 2100ms; --t-recibe: 1200ms;   /* 11-sep, Roman: «un poco más lenta»: vuelo 1.400 ms + posarse 700 ms */
  /* lo que ocupa abajo la barra, para que nada quede debajo */
  --barra: calc(73px + env(safe-area-inset-bottom));
  /* lo que asoma el disparador por encima de la barra (26 px, su aro de 6 y 1 de la raya de la barra) y 3 de aire: las
     pantallas acaban encima y no tapa nada (a 32 px lo pisaba medio píxel, medido). Hasta el 11-sep era la franja del
     asistente (66 px); la K subió a la cabecera */
  --franja: 36px;
  color-scheme: light;
}

/* ---------- como una app del iPhone, no como una web ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { touch-action: manipulation; }                       /* sin el retardo ni el zoom del doble toque */
html {
  overscroll-behavior: none;                            /* la página no rebota: rebota solo la lista que rueda */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;             /* sin la sombra gris de Safari al tocar */
}
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--k-tinta); color: var(--k-crema);
  font-family: var(--k-texto); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
p, h2, h3, h4, ul, ol, figure { margin: 0; padding: 0; }
h2, h3, h4 { font-family: var(--k-display); font-weight: 400; line-height: 1.06; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }                  /* [hidden] no pierde contra un display propio */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px solid var(--k-oro-luz); outline-offset: 3px; }
/* los mandos no se seleccionan como texto al dejar el dedo encima */
button, .cab, .barra, .rejilla { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- el escenario: en el móvil la app ES la pantalla; en el ordenador, un iPhone ---------- */
.escenario { min-height: 100%; }
.app {
  position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate;
  background: var(--k-tinta);      /* el papel, liso: las tarjetas son las que van un punto más claras */
  display: flex; flex-direction: column; font-size: 15px; line-height: 1.45;
}
.rotulo { display: none; }
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  body { background: var(--k-mesa); }
  .escenario { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 0; }
  .app { width: 390px; height: min(844px, calc(100vh - 80px)); border: 1px solid var(--k-oro-linea); border-radius: 44px; box-shadow: var(--k-sombra); }
  .rotulo { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--k-apagado); font-weight: 600; }
}

/* ---------- piezas de la lámina ---------- */
.etq { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; }
.btn {
  font-family: var(--k-texto); font-size: 15px; font-weight: 600; letter-spacing: .02em;
  min-height: 48px; padding: 0 22px; border: 1px solid var(--k-oro); background: transparent; color: var(--k-oro-luz);
  cursor: pointer; transition: background var(--k-t-rapido) var(--k-curva), transform var(--k-t-rapido) var(--k-curva);
}
.btn:active { transform: scale(.97); }
.btn.solido { background: var(--k-oro); border-color: var(--k-oro); color: var(--k-tinta); }       /* lámina, .btn.solido: papel sobre negro */
.btn.suave { border-color: var(--k-filete); color: var(--k-crema-2); }
.btn.chico { font-size: 13px; min-height: 44px; padding: 0 14px; }
.btn.ancho { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5px 11px; border: 1px solid currentColor; border-radius: var(--k-r-full); white-space: nowrap; }
.chip.bien { color: var(--k-bien); } .chip.ojo { color: var(--k-ojo); } .chip.mal { color: var(--k-mal); } .chip.neutro { color: var(--k-apagado); }
/* la cifra grande: 46 px de fábrica (COHERENCIA.md, choque 5) */
.cifra-xl { font-family: var(--k-display); font-weight: 400; font-size: 46px; line-height: 1; color: var(--k-crema); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 10px; }
.delta { font-size: 12px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; color: var(--k-apagado); margin-top: 10px; }
.delta.sube-d { color: var(--k-bien); } .delta.baja-d { color: var(--k-mal); } .delta.ojo-d { color: var(--k-ojo); }
.filas { border-top: 1px solid var(--k-filete); }
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--k-filete-2); }
.fila .l { color: var(--k-crema-2); }
.fila .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fila .v .ok { color: var(--k-bien); font-size: 11px; letter-spacing: .06em; margin-left: 8px; font-weight: 600; }
.aviso { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--k-filete); border-left-color: var(--k-oro); padding: 13px 15px; font-size: 13.5px; color: var(--k-crema-2); background: var(--k-tinta-2); }
.aviso .ic { color: var(--k-oro); flex: none; margin-top: 1px; }
.aviso b { color: var(--k-crema); display: block; margin-bottom: 2px; font-weight: 600; }
.aviso .btn { margin-top: 12px; }
.aviso.hecho { border-left-color: var(--k-bien); background: none; }                        /* el aviso resuelto (01-shell) */
.aviso.hecho .ic { color: var(--k-bien); }
.aviso.mal { border-left-color: var(--k-mal); } .aviso.mal .ic { color: var(--k-mal); }    /* rojo solo si algo falló de verdad */
.aviso.ojo { border-left-color: var(--k-ojo); } .aviso.ojo .ic { color: var(--k-ojo); }    /* ocre: dinero que vence o sin contar */
.aviso .acciones-linea .btn { margin-top: 0; }
.avisos { display: flex; flex-direction: column; gap: 10px; }
/* el termómetro (arreglado en 01-shell): el degradado ocupa toda la barra y el color bajo la marca dice cómo vas */
.term { position: relative; height: 4px; background: rgba(var(--k-texto-rgb), .1); margin-top: 16px; --p: 0%; }
.term i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--k-mal), var(--k-ojo) 45%, var(--k-bien)); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
/* la marca es una raya de ancho cero puesta en su sitio (left). En 01-shell era una caja del ancho de la barra
   desplazada con transform: sobresalía por la derecha y la pantalla entera se arrastraba de lado en el iPhone */
.term b { position: absolute; left: var(--p); top: -6px; width: 0; height: 16px; pointer-events: none; }
.term b::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 16px; background: var(--k-crema); }
.term.anda { transition: --p var(--k-t-lento) var(--k-curva); }
.term.cambia { transition: --p var(--k-t-medio) var(--k-curva); }
.tarjeta-f { position: relative; border: 1px solid var(--k-filete); border-top: 2px solid var(--k-oro); padding: 18px 16px 16px; background: var(--k-tinta-2); }
.tarjeta-f .folio { position: absolute; top: 9px; right: 13px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-crema-2); }
.sello-prov { width: 42px; height: 42px; flex: none; border: 1px solid var(--k-oro); border-radius: 50%; display: grid; place-items: center; font-family: var(--k-display); font-size: 19px; color: var(--k-oro-luz); position: relative; }
.sello-prov::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(var(--k-linea-rgb), .35); border-radius: 50%; }
.cab-f { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; min-width: 0; }
.cab-f .nom { font-family: var(--k-display); font-size: 21px; color: var(--k-crema); line-height: 1.1; min-width: 0; }
.cab-f .imp { font-family: var(--k-display); font-size: 24px; color: var(--k-oro-luz); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.campo { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: 13.5px; }
.campo .k { color: var(--k-crema-2); flex: 0 1 auto; min-width: 0; }
.campo .guia { flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted rgba(var(--k-linea-rgb), .3); transform: translateY(-3px); }
.campo .v { color: var(--k-crema); flex: none; font-variant-numeric: tabular-nums; text-align: right; }
.campo .v.apagada { color: var(--k-apagado); }
.vacio { border: 1px dashed var(--k-filete); padding: var(--e5) var(--e3); text-align: center; }
.vacio svg { width: 52px; height: 52px; color: var(--k-oro); opacity: .5; margin: 0 auto var(--e2); display: block; }
.vacio b { display: block; font-family: var(--k-display); font-weight: 400; font-size: 20px; color: var(--k-crema); margin-bottom: 5px; }
.vacio p { font-size: 13.5px; color: var(--k-crema-2); max-width: 34ch; margin: 0 auto; }

/* ========================================================================== */
/*  EL ARMAZÓN (01-shell)                                                      */
/* ========================================================================== */
/* la cabecera, por debajo de la isla del iPhone (Roman, 11-sep): a la izquierda el día y el bar y, debajo, LO QUE PIDE
   ATENCIÓN (atencion.js); a la derecha la K astral, que abre el asistente. El nombre de la sección se quitó: repetía
   la barra de abajo */
.cab { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 10px) 12px 6px 20px; min-height: 70px; }
.cab-izq { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.cab .fecha { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-crema-2); font-weight: 600; white-space: nowrap; }
.cab-der { flex: none; display: flex; align-items: center; }
/* lo que pide atención: una línea con lo más urgente y cuántas cosas más; al tocarla, su hoja. Lleva el color del
   semáforo solo si es dinero (la vencida en rojo; lo que vence y el cierre que falta, en ocre); lo demás, en tinta */
.atencion { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; min-height: 36px; padding: 0; border: 0; background: none;
  color: var(--k-crema-2); font: 400 13px/1.25 var(--k-texto); text-align: left; cursor: pointer; }
/* el sello de lacre (Roman, 14:40): cuántas cosas te piden atención, en dorado —el color de «míralo»—, que se estampa
   al entrar en la app y cada vez que entra una nueva. El color del semáforo va en la palabra, y solo si es dinero */
.sello-at { position: relative; flex: none; width: 34px; height: 34px; transform: rotate(-6deg); filter: drop-shadow(0 1px 1.5px rgba(var(--k-sombra-rgb), .35)); }
.sello-at svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sello-at .cera { fill: url(#g-cera); }                                       /* la cera, en el metal dorado de la web */
.sello-at .huella { fill: none; stroke: var(--k-tinta-2); stroke-width: .8; opacity: .55; }
.sello-at .num { font-family: var(--k-display); font-size: 19px; fill: var(--k-crema); }                /* la cifra en tinta sobre el oro: de 4,55 a 5,18:1 en todo su alto (medido) */
.sello-at::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--k-dorado); opacity: 0; pointer-events: none; }
.sello-at.estampa { animation: estampa 640ms var(--k-curva) both; }
.sello-at.estampa::after { animation: onda-sello 720ms var(--k-curva) 240ms both; }
@keyframes estampa { 0% { transform: scale(1.8) rotate(-22deg); opacity: 0; } 42% { transform: scale(.88) rotate(-4deg); opacity: 1; } 68% { transform: scale(1.05) rotate(-7deg); } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes onda-sello { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.at-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-txt b { font-weight: 600; color: var(--k-crema); }
.atencion[data-tono="mal"] .at-txt b { color: var(--k-mal); }
.atencion[data-tono="ojo"] .at-txt b { color: var(--k-ojo); }
/* los mandos de la demo: discretos, un punto de tinta apagado, junto a la K. En el producto no existen */
.mandos-btn { width: 32px; height: 44px; padding: 0; border: 0; background: none; color: var(--k-oro); opacity: .45; font-size: 12px; cursor: pointer; }

/* el lienzo y las pantallas: la que entra llega desde 24 px, la que sale se va 16 px. El lienzo acaba encima de lo que
   asoma el disparador: ni él ni la barra tapan nunca una cifra ni un botón. Arriba y abajo, la pantalla se funde */
.lienzo { position: relative; flex: 1; min-height: 0; margin-bottom: calc(var(--barra) + var(--franja)); }
.pant {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 12px 20px var(--e4); display: flex; flex-direction: column; gap: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 14px), transparent);
  opacity: 0; pointer-events: none; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 24px));
}
.pant > * { flex-shrink: 0; min-width: 0; }
.pant::-webkit-scrollbar { display: none; }
.pant.activa { opacity: 1; pointer-events: auto; visibility: visible; transform: none;
  transition: opacity var(--k-t-medio) var(--k-curva), transform var(--k-t-medio) var(--k-curva); }
.pant.sale { visibility: visible; opacity: 0; transform: translateX(calc(var(--dir, 1) * -16px));
  transition: opacity var(--k-t-rapido) var(--k-curva), transform var(--k-t-rapido) var(--k-curva); }
/* la llegada escalonada: cada bloque sube 12 px y aparece, 45 ms detrás del anterior */
.pant.entra > .sube { animation: sube var(--k-t-medio) var(--k-curva) both; animation-delay: calc(var(--i, 0) * var(--k-escalon)); }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.firma-demo { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-apagado); text-align: center; margin-top: 4px; }

/* la barra, por encima de la raya de inicio: 4 pestañas y el disparador en medio */
.barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 0 4px calc(env(safe-area-inset-bottom) + 12px);
  border-top: 1px solid var(--k-filete); background: var(--k-tinta);    /* opaca: a contraluz, nada se trasluce */
}
.pest {
  position: relative; min-height: 60px; padding: 12px 0 6px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  color: var(--k-apagado); transition: color var(--k-t-medio) var(--k-curva);
}
.pest svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--k-t-medio) var(--k-curva); }
.pest span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.pest.activa { color: var(--k-oro); }
.pest.activa svg { transform: translateY(-1px); }
.pest:active svg { transform: scale(.92); }
.disparo {
  position: relative; justify-self: center; align-self: start;
  width: 66px; height: 66px; margin-top: -26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--k-tinta); color: var(--k-oro);
  box-shadow: 0 0 0 6px var(--k-tinta), 0 6px 14px rgba(var(--k-sombra-rgb), .16);    /* sobre papel, la sombra es suave */
  transition: transform var(--k-t-rapido) var(--k-curva);
}
.disparo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.disparo:active { transform: scale(.94); }
.aro-disp { transform-origin: 40px 40px; transition: transform var(--k-t-medio) var(--k-curva); }
@media (hover: hover) { .disparo:hover .aro-disp { transform: rotate(30deg); } }
.disparo .badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--k-oro); color: var(--k-tinta);
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
/* el meridiano: al cambiar de sección cruza una estrella por el filete de la barra */
.meridiano { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--k-oro); }
/* sobre papel, la estrella del meridiano es de tinta: sin brillo, un halo muy suave (nucleo.js le da la opacidad) */
#halo { fill: rgba(var(--k-linea-rgb), .4); } #astro { fill: var(--k-oro); }
.ge0 { stop-color: var(--k-oro); stop-opacity: 0; } .ge1 { stop-color: var(--k-oro); }

/* ========================================================================== */
/*  HOY: el mes manda (01-shell)                                               */
/* ========================================================================== */
.heroe { padding-top: 6px; }
.heroe-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.heroe-txt { min-width: 0; flex: 1 1 auto; }
/* el arco del mes: 96 px de fábrica (COHERENCIA.md, choque 5) */
.arco { width: 96px; height: 96px; flex: none; color: var(--k-oro); margin-top: 2px; }
.arco svg { width: 100%; height: 100%; overflow: visible; }
.arco .arco-mes { transition: none; }
.arco .arco-mes.anda { transition: stroke-dashoffset var(--k-t-lento) var(--k-curva); }
.arco .arco-mes.cambia { transition: stroke-dashoffset var(--k-t-medio) var(--k-curva); }
.arco .t-dia { font-family: var(--k-display); font-size: 23px; fill: var(--k-crema); }
.arco .t-de { font-family: var(--k-texto); font-size: 8px; letter-spacing: 2px; fill: currentColor; font-weight: 600; }
.lectura { margin-top: 12px; font-size: 14px; color: var(--k-crema-2); line-height: 1.5; }
.lectura b { font-weight: 600; }
.lectura .estado { color: var(--k-crema); }
.heroe[data-tono="bien"] .lectura .estado { color: var(--k-bien); }
.heroe[data-tono="ojo"] .lectura .estado { color: var(--k-ojo); }
.heroe[data-tono="mal"] .lectura .estado { color: var(--k-mal); }
/* el mes cubierto: el único momento en que el arco se pone de fiesta, en dorado: el color de la estrella que se posa */
.heroe[data-cara="cubierto"] .arco, .heroe[data-cara="cubierto"] .etq { color: var(--k-dorado); }
#estrella-mes { fill: var(--k-dorado); }
.heroe[data-cara="cubierto"] .arco-mes { stroke: url(#g-oro); }             /* el mes cubierto, en el metal dorado de la web */
.metal-1 { stop-color: var(--k-metal-1); } .metal-2 { stop-color: var(--k-metal-2); } .metal-3 { stop-color: var(--k-metal-3); }

/* HOY EN CARRIL (Roman, 11-sep): páginas enteras que pasan de una en una. A la izquierda, los días de antes (deslizar
   es viajar en el tiempo); a la derecha, más datos de tu bar. Cada página rueda por dentro, en vertical */
.pant.pant-carril { padding: 0; overflow: hidden; }
.carril { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.pagina { flex: 0 0 100%; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always;
  padding: 12px 22px var(--e4); display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
.pagina::-webkit-scrollbar { display: none; }
.pagina > * { flex-shrink: 0; min-width: 0; }
.pant.entra #pg-hoy > .sube { animation: sube var(--k-t-medio) var(--k-curva) both; animation-delay: calc(var(--i, 0) * var(--k-escalon)); }
/* Hoy, a pantalla entera (Roman, 14:40, «sí» a llenarla sin añadir datos): la esfera del mes en grande y centrada, y la
   cifra debajo, más grande. Lo demás, como estaba. Si sobra alto, el bloque se centra; si falta, la página rueda */
#pg-hoy > :first-child { margin-top: auto; }
#pg-hoy > :last-child { margin-bottom: auto; }
#pg-hoy .heroe-cab { flex-direction: column-reverse; align-items: center; gap: 16px; text-align: center; }
#pg-hoy .heroe-txt { flex: none; width: 100%; }
#pg-hoy .arco { width: clamp(168px, min(58vw, 30vh), 236px); height: clamp(168px, min(58vw, 30vh), 236px); margin-top: 0; }
#pg-hoy .arco .arco-mes { stroke-width: 1.9; }
#pg-hoy .cifra-xl { font-size: clamp(50px, 15.5vw, 66px); }
#pg-hoy .delta { justify-content: center; }
/* los bordes dicen qué hay a cada lado, en vertical como el lomo de un libro; tocarlos también pasa la página */
.borde { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 20px; min-height: 132px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--k-crema-2); font: 600 9.5px/1 var(--k-texto); letter-spacing: .2em; text-transform: uppercase; }
.borde i { font-style: normal; font-size: 15px; letter-spacing: 0; color: var(--k-oro); }
.borde span { writing-mode: vertical-rl; white-space: nowrap; }
.borde.izq { left: 0; } .borde.izq span { transform: rotate(180deg); }
.borde.der { right: 0; }
.borde[data-tono="ojo"], .borde[data-tono="ojo"] i { color: var(--k-ojo); }
/* el día a día, en Más datos (Roman, 14:00: en Hoy, nada que se repita): la fila con su tendencia debajo, pequeña;
   el color, solo si es dinero */
.fila .l small { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--k-apagado); margin-top: 3px; }
.fila .l small.bien { color: var(--k-bien); } .fila .l small.mal { color: var(--k-mal); }
.prevision { font-size: 14px; line-height: 1.5; color: var(--k-crema-2); margin-top: 12px; }
.prevision b { color: var(--k-crema); font-weight: 600; }
/* la página de un día: su cierre en grande y lo que dice de él */
.dia-estado { font-family: var(--k-display); font-size: 40px; line-height: 1; margin-top: 10px; color: var(--k-crema); }
.pagina.dia.falta .dia-estado { color: var(--k-ojo); }
.pagina.dia.cerrado .dia-estado { color: var(--k-apagado); }
.fila .v.bien-t { color: var(--k-bien); } .fila .v.mal-t { color: var(--k-mal); }
/* más datos: las barras empiezan y acaban a la misma altura en cada lista, se lea el nombre que se lea */
#pg-datos .barras li { grid-template-columns: 6.6rem minmax(0, 1fr) 4.4rem; }
#pg-datos .barras + .nota { margin-top: 10px; line-height: 1.45; }
.metricas { display: grid; grid-template-columns: .8fr 1fr 1.3fr; gap: 10px; margin-top: 12px; border-top: 1px solid var(--k-filete-2); padding-top: 11px; }
.metricas div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.metricas b { font-family: var(--k-display); font-size: 19px; font-weight: 400; color: var(--k-crema); line-height: 1; font-variant-numeric: tabular-nums; }
.metricas span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-crema-2); }

/* ========================================================================== */
/*  AL ABRIR (lámina, .bienv)                                                  */
/* ========================================================================== */
.bienvenida { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse 70% 50% at 50% 42%, var(--k-tinta-2), var(--k-tinta)); cursor: pointer;
  transition: opacity var(--k-t-medio) var(--k-curva), visibility 0s linear var(--k-t-medio); }
.bienvenida.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.bienvenida.fuera .sello-grande { transform: scale(1.08); }
.bienv-centro { padding: 0 28px; }
.sello-grande { width: 148px; height: 148px; margin: 0 auto; color: var(--k-oro); transition: transform var(--k-t-medio) var(--k-curva); }
.sello-grande svg { width: 100%; height: 100%; }
.saludo-b { font-family: var(--k-display); font-size: 29px; color: var(--k-crema); margin-top: 22px; line-height: 1.15; }
.cita { font-family: var(--k-display); font-style: italic; font-size: 15px; color: var(--k-crema-2); margin-top: 14px; line-height: 1.45; }
.autor { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; margin-top: 8px; }
.toca { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 30px); left: 0; right: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-crema-2); font-weight: 600; }

/* ---------- los anillos giran solos: lo único que se mueve sin que lo toques ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gira-l { transform-origin: 64px 64px; animation: gira 30s linear infinite; }
  .gira-r { transform-origin: 64px 64px; animation: gira 46s linear infinite reverse; }
  @keyframes gira { to { transform: rotate(360deg); } }
  .bienvenida:not(.fuera) .sello-grande { animation: apK var(--k-t-lento) var(--k-curva) both; }
  .bienvenida:not(.fuera) .saludo-b { animation: apT var(--k-t-medio) var(--k-curva) .5s both; }
  .bienvenida:not(.fuera) .cita, .bienvenida:not(.fuera) .autor { animation: apT var(--k-t-medio) var(--k-curva) .85s both; }
  .bienvenida:not(.fuera) .toca { animation: apT var(--k-t-medio) var(--k-curva) 1.5s both; }
  @keyframes apK { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
  @keyframes apT { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}
/* reducir movimiento: todo quieto y en su sitio, con la cifra ya puesta */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
/* ?quieto: igual, para capturas deterministas · ?lenta: diez veces más lento, para ver una transición a medias */
.quieto *, .quieto *::before, .quieto *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
.lenta { --k-t-rapido: 1800ms; --k-t-medio: 4200ms; --k-t-lento: 26000ms; --k-escalon: 450ms; --t-fugaz: 21000ms; --t-recibe: 12000ms; }