/* ══════════════════════════════════════════════════════════════
   Codigo Atomico v2 (ATOMICO-4 V1). Toda la piel del tracker vive aqui:
   el <style> inline de index.html se retiro, y atomico-skin.css y
   atomico-tipo.css ya no se cargan. auth-shell.css se queda para la puerta.

   FUENTES LOCALES, las mismas @font-face del Boton Rojo (boton-rojo.html),
   servidas desde /fonts/ para que la app pinte igual sin internet.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-400-normal-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-ext-400-normal-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-600-normal-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-ext-600-normal-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-400-italic-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-ext-400-italic-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-500-italic-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-ext-500-italic-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/zen-kaku-gothic-new-latin-400-normal-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/zen-kaku-gothic-new-latin-ext-400-normal-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/zen-kaku-gothic-new-latin-500-normal-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/zen-kaku-gothic-new-latin-ext-500-normal-v1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ══════════════════════════════════════════════════════════════
   TOKENS. Fuente: referencias/atomico-v1/ (Main, Madre, Nueva y
   Escritorio .dc.html). Cada valor sale de esas maquetas; si una
   maqueta cambia, se cambia aqui y en ningun otro lado.
   ══════════════════════════════════════════════════════════════ */
:root {
  --azul: #1b3a63;
  --tinta: #1a2332;
  --texto: rgba(26,35,50,.82);
  --tenue: rgba(26,35,50,.64);
  --muy-tenue: rgba(26,35,50,.32);
  --previo: rgba(26,35,50,.4);
  --oro: #e0c48a;
  --papel: #f6f5f1;
  --tinte: #e4e7ec;
  --blanco: #ffffff;
  --linea: rgba(26,35,50,.11);
  --borde: rgba(26,35,50,.24);
  --punteada: rgba(26,35,50,.45);
  --velo: rgba(26,35,50,.52);
  --sombra: 0 12px 34px rgba(27,58,99,.10);
  --sombra-hoja: 0 26px 60px rgba(27,58,99,.26);
  --sombra-cinturon: 0 12px 34px rgba(0,0,0,.25);
  --en-azul: rgba(255,255,255,.78);
  --en-azul-letra: rgba(255,255,255,.6);
  --en-azul-tenue: rgba(255,255,255,.4);
  --en-azul-borde: rgba(255,255,255,.14);
  --en-azul-pista: rgba(255,255,255,.18);
  --relleno-oro: rgba(224,196,138,.28);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--blanco);
  font-family: var(--sans);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); }
a:hover { color: var(--tinta); }
button { font: inherit; color: inherit; }

/* La app nunca se ve detras del login. Vivia en el <style> inline con la
   nota "NO MOVER": ahora vive aqui porque el inline se retiro. */
#authScreen {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--blanco);
  overflow-y: auto;
}
#authScreen.hidden { display: none; }
/* El atributo hidden gana siempre: la hoja y las secciones usan display:flex. */
[hidden] { display: none !important; }
#trackerApp.hidden { display: none; }
.hidden { display: none; }

/* ── Pantalla de carga ─────────────────────────────────────── */
.carga {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanco);
}
.carga-caja { text-align: center; }
.carga-kana { font-size: 11px; letter-spacing: .4em; color: var(--tenue); margin-bottom: 14px; text-transform: uppercase; }
.carga-marca { font-family: var(--serif); font-size: 36px; font-weight: 400; color: var(--tinta); line-height: 1; }
.carga-marca em { color: var(--azul); font-style: italic; }
.carga-app { font-size: 12px; letter-spacing: .35em; color: var(--tenue); margin-top: 18px; text-transform: uppercase; }

/* ── Aviso de carga incompleta y estado de guardado ────────── */
.aviso-carga {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 11px 16px; background: var(--azul); color: var(--blanco);
  font-size: 13px; line-height: 1.4; text-align: center;
}
.aviso-carga[hidden] { display: none; }
.aviso-carga button {
  flex-shrink: 0; background: var(--blanco); color: var(--azul);
  border: 0; border-radius: 0; padding: 6px 14px; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
}
/* El bloqueo de verdad vive en _puedeEscribir(); esto es la senal visual. */
body.carga-incompleta .hoy-marca,
body.carga-incompleta .cal-dia,
body.carga-incompleta .hoja-marca,
body.carga-incompleta .btn-oro {
  pointer-events: none !important;
  opacity: .5 !important;
}
body.carga-incompleta .app { padding-top: 44px; }
/* Un cero sin datos detras se lee como "perdi todo": se oculta. */
body.carga-incompleta .mes-cifra-num,
body.carga-incompleta .mes-cifras,
body.carga-incompleta .tumes-num,
body.carga-incompleta .hoy-racha { visibility: hidden; }

/* A6 · Renglon propio arriba de la banda, del mismo alto con o sin texto. */
.save-status {
  font-size: 11px; letter-spacing: .08em; line-height: 14px; height: 14px; color: var(--en-azul);
  text-align: right; margin: -8px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-status.is-saving { color: var(--blanco); }
.save-status.is-err { color: #f2b8b8; }
.save-status.is-offline { color: var(--blanco); }
/* E1 · El aviso de sin senal cabe en el renglon sin moverlo: sin espaciado de letra. */
.save-status.is-sin-senal { letter-spacing: 0; color: var(--blanco); }

.toast-aviso {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: var(--blanco);
  padding: 12px 20px; border-radius: 0;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  z-index: 99999; pointer-events: none; transition: opacity .3s ease;
  max-width: 80%; text-align: center; box-shadow: var(--sombra-hoja);
}

/* ── App ───────────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--blanco); }

/* Banda de progreso */
.banda { background: var(--azul); padding: 20px var(--gutter) 28px; }
.banda-grid { display: flex; flex-direction: column; gap: 22px; }
.banda-izq { display: flex; flex-direction: column; gap: 22px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--blanco); }
.marca svg { width: 22px; height: 19px; }
.marca span { font-size: 14px; letter-spacing: .22em; font-variant-caps: small-caps; text-transform: lowercase; font-weight: 500; }
.progreso { display: flex; flex-direction: column; gap: 12px; }
.cinturon-fila { display: flex; align-items: center; gap: 12px; }
.cinturon-barra { width: 44px; height: 10px; flex-shrink: 0; background: var(--blanco); box-shadow: var(--sombra-cinturon); }
.cinturon-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.progreso-cinturon { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--blanco); }
.progreso-nivel { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: rgba(255,255,255,.78); }
.progreso-pista { height: 4px; background: var(--en-azul-pista); position: relative; }
.progreso-lleno { height: 4px; background: var(--oro); }
.progreso-falta { font-size: 14px; letter-spacing: .06em; color: var(--en-azul); }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.semana-dia { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.semana-letra { font-size: 12px; letter-spacing: .1em; color: var(--en-azul-letra); }
.semana-num {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px;
  border: 1px solid var(--en-azul-borde); color: var(--en-azul);
}
.semana-num.is-hoy { border: 2px solid var(--oro); color: var(--blanco); }
.semana-num.is-futuro { color: var(--en-azul-tenue); }
.semana-num.is-perfecto { border-color: var(--oro); background: var(--oro); color: var(--tinta); }

/* Cuerpo */
.cuerpo { display: flex; flex-direction: column; flex-grow: 1; }
.col-der { display: flex; flex-direction: column; flex-grow: 1; }

/* Hoy */
.hoy { padding: 28px var(--gutter) 24px; display: flex; flex-direction: column; }
.hoy-cabeza { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; gap: 12px; }
.hoy-titulo { font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--azul); font-variant-caps: small-caps; text-transform: lowercase; }
.hoy-fecha { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--tinta); }
.hoy-perfecto { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; line-height: 24px; height: 24px; color: var(--azul); margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-perfecto::before { content: '★ '; color: var(--oro); }
.hoy-perfecto.is-logro::before { content: none; }
/* A6 · Vacio conserva su alto: la lista no salta al completar el dia. */
.hoy-perfecto.is-vacio { visibility: hidden; }
.hoy-perfecto .star-icon { color: var(--oro); margin: 0 6px; }

.madre {
  background: var(--papel); margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter);
  display: flex; align-items: center; gap: 16px; box-shadow: var(--sombra);
}
.madre-info { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.madre-etiqueta { font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--azul); font-variant-caps: small-caps; text-transform: lowercase; }
.madre-nombre { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.08; color: var(--tinta); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.madre-racha { display: flex; align-items: center; gap: 8px; }
.regla { width: 2.5rem; height: 1px; background: var(--oro); flex-shrink: 0; }
.madre-racha .hoy-racha { font-family: var(--serif); font-size: 18px; color: var(--azul); }
.madre-dormida { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.madre-dormida-nota { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--tenue); }

.fila { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.fila-info { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-nombre { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--tinta); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 1.2em; }
.fila-nota { font-size: 14px; letter-spacing: .06em; color: var(--tenue); }
.fila .hoy-racha { font-family: var(--serif); font-size: 17px; color: var(--azul); white-space: nowrap; }

.hoy-marca {
  width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--borde); background: var(--blanco);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--tinta); font-size: 20px; border-radius: 0; padding: 0;
}
.madre .hoy-marca { width: 60px; height: 60px; font-size: 24px; }
.hoy-marca[data-state="done"] { border: 0; background: var(--oro); }
.hoy-marca[data-state="skip"] { border: 0; background: var(--tinte); }
.hoy-marca[data-state="skip"]::before { content: ''; display: block; width: 14px; height: 2px; background: var(--tinta); }
.hoy-marca svg { width: 20px; height: 20px; }

.hoy-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 22px; }
.hoy-ayuda { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: .06em; color: var(--tenue); }

/* Boton oro de esquina recta */
.btn-oro {
  display: inline-block; font-family: var(--serif); font-weight: 600; font-size: 16px;
  letter-spacing: .14em; line-height: 1; padding: 16px 28px;
  background: var(--oro); color: var(--tinta); text-decoration: none; border: 0; border-radius: 0;
  font-variant-caps: small-caps; text-transform: lowercase; cursor: pointer;
}
.btn-oro.is-grande { padding: 18px 42px; }
.btn-oro.is-chico { padding: 12px 18px; }

/* Nueva (usuaria sin Habito Madre) */
.hoy.is-nueva { padding: 0; }
.nueva { flex-grow: 1; background: var(--papel); padding: 44px var(--gutter); display: flex; flex-direction: column; gap: 22px; }
.nueva-titulo { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.08; letter-spacing: -.012em; color: var(--tinta); }
.nueva-titulo i, .hoja-titulo i { font-weight: 500; }
.texto-p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--texto); }
.campo {
  width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 0;
  font-family: var(--serif); font-size: 22px; color: var(--tinta); background: var(--blanco); outline: none;
}
.nueva .campo { box-shadow: var(--sombra); }
.nueva-siguiente { margin: 12px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: .06em; color: var(--tenue); }
.campo-error { margin: 0; font-size: 14px; letter-spacing: .06em; color: #8b3a3a; }
.campo-error:empty { display: none; }

/* El mes */
.mes { background: var(--papel); padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 18px; }
.mes-cabeza { display: flex; flex-direction: column; gap: 6px; }
.mes-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mes-titulo { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.08; letter-spacing: -.012em; color: var(--tinta); }
.mes-nav { display: flex; gap: 8px; }
.mes-nav button {
  width: 40px; height: 40px; border: 1px solid var(--borde); background: var(--blanco); border-radius: 0;
  font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--azul); cursor: pointer; padding: 0;
}
.mes-cifras { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.mes-cifras span { font-family: var(--serif); font-size: 20px; color: var(--tinta); }
.mes-comparar { display: flex; flex-direction: column; gap: 12px; }
.mes-vs-bloque { display: flex; flex-direction: column; gap: 10px; }
.mes-vs { font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--azul); font-variant-caps: small-caps; }
.mes-cifras-grandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.mes-cifra { display: flex; flex-direction: column; gap: 4px; }
.mes-cifra-fila { display: flex; align-items: flex-start; gap: 8px; }
.mes-leyenda { display: flex; align-items: center; gap: 8px; }
.mes-leyenda .muestra { display: block; width: 18px; height: 2px; background: var(--azul); }
.mes-leyenda .muestra.is-previo { height: 0; background: none; border-top: 2px dashed var(--punteada); }
.mes-leyenda span:last-child { font-size: 13px; letter-spacing: .06em; color: var(--tenue); }
.mes-cifra-num { font-family: var(--serif); font-weight: 600; font-size: 48px; line-height: 1; color: var(--azul); }
.mes-cifra-num.is-previo { color: var(--previo); }
.mes-ficha { background: var(--azul); color: var(--blanco); padding: 4px 8px; font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1; }
.mes-ficha.is-abajo { background: var(--tinte); color: var(--tinta); }
.grafica { background: var(--blanco); box-shadow: var(--sombra); padding: 14px 14px 8px; }
.grafica-lienzo { position: relative; }
.grafica svg { display: block; width: 100%; height: 120px; }
.grafica-punto {
  position: absolute; width: 7.5px; height: 7.5px; margin: -3.75px 0 0 -3.75px; box-sizing: border-box;
  border-radius: 50%; background: var(--azul); border: 1.5px solid var(--blanco);
}
.grafica-ejes { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; color: var(--tenue); padding-top: 4px; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-letra { text-align: center; font-size: 12px; letter-spacing: .1em; color: var(--tenue); }
.cal-dia {
  height: 42px; display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-family: var(--serif); font-size: 16px; line-height: 1; color: var(--muy-tenue);
  background: none; border: 0; border-radius: 0; padding: 0;
}
.cal-dia[data-estado="perfecto"] { background: var(--oro); color: var(--tinta); }
.cal-dia[data-estado="perfecto"] .estrella { font-size: 10px; }
.cal-dia[data-estado="parcial"] { background: var(--tinte); color: var(--tinta); }
.cal-dia[data-estado="cero"] { border: 1px solid var(--borde); background: var(--blanco); color: var(--tenue); }
.cal-dia[data-estado="hoy"] { border: 2px solid var(--azul); background: var(--blanco); color: var(--azul); font-weight: 600; }
/* A8 · Hoy perfecto: en oro, con su borde de hoy. */
.cal-dia[data-estado="perfecto"][data-hoy] { border: 2px solid var(--azul); font-weight: 600; }
button.cal-dia { cursor: pointer; }
/* A3 · El aviso del Dominus de un dia pasado, dentro de su fila. */
.fila-aviso { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.3; color: var(--tinta); }
/* A9 · Dias anteriores al registro: tinte, numero legible; no son futuros. */
.cal-dia[data-estado="antes"] { background: none; border: 1px dotted var(--borde); color: var(--tenue); }
/* A2 · Mes pasado sin datos o anterior al registro: dias sin marcar. */
.cal-dia[data-estado="sindatos"] { border: 1px solid var(--linea); background: var(--blanco); color: var(--tenue); }
/* A2 · La flecha al mes siguiente no existe en el mes en curso. */
.mes-nav button:disabled { opacity: .3; cursor: default; }

/* Tu mes */
.tumes {
  padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 18px;
  background-color: var(--blanco);
  background-image: repeating-linear-gradient(135deg, rgba(27,58,99,.05) 0, rgba(27,58,99,.05) 1px, transparent 1px, transparent 10px);
}
.tumes-tarjeta { background: var(--blanco); box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tumes-celda { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.tumes-celda + .tumes-celda { border-left: 1px solid var(--linea); }
.tumes-etiqueta { font-size: 13px; letter-spacing: .06em; color: var(--tenue); }
.tumes-num { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--azul); }
.tumes-record { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--tinta); }

/* Pie azul */
.pie { flex-grow: 1; background: var(--azul); padding: 28px var(--gutter); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pie a, .pie button { color: var(--en-azul); font-size: 16px; letter-spacing: .06em; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pie a { color: var(--blanco); }
.version-tag { font-size: 10px; letter-spacing: .1em; color: var(--en-azul-tenue); }

/* Hojas */
.hoja-velo { position: fixed; inset: 0; background: var(--velo); z-index: 800; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 801;
  background: var(--blanco); padding: 32px var(--gutter) 40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 20px; box-shadow: var(--sombra-hoja);
  /* D6 · Cabe en la pantalla, tambien en escritorio; lo de adentro desplaza. */
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.hoja-cabeza { display: flex; flex-direction: column; gap: 10px; }
.hoja-titulo { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.08; letter-spacing: -.012em; color: var(--tinta); }
.hoja-acciones { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-texto { background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; letter-spacing: .06em; color: var(--texto); }
.hoja-dia { display: flex; flex-direction: column; }

/* Celebraciones */
.celebration-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; }
.celebration-overlay.perfect-flash {
  background: radial-gradient(circle at center, rgba(224,196,138,.45) 0%, rgba(224,196,138,.12) 35%, transparent 70%);
  animation: destello 1.6s ease-out forwards;
}
.celebration-overlay.levelup-flash {
  background: radial-gradient(circle at center, rgba(224,196,138,.6) 0%, rgba(27,58,99,.18) 45%, transparent 70%);
  animation: destello 2.4s ease-out forwards;
}
@keyframes destello { 0% { opacity: 0; } 12% { opacity: 1; } 40% { opacity: .6; } 100% { opacity: 0; } }

/* Respiracion del Dominus */
.resp-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel);
  padding: 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom));
  opacity: 0; transition: opacity .5s ease;
}
.resp-overlay.visible { opacity: 1; }
.resp-cerrar {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 18px;
  width: 44px; height: 44px; border-radius: 0; background: none; border: 1px solid var(--borde);
  color: var(--tenue); font-size: 16px; cursor: pointer;
}
.resp-inner { max-width: 380px; width: 100%; text-align: center; }
.resp-kicker { font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--azul); font-variant-caps: small-caps; text-transform: lowercase; margin-bottom: 10px; }
.resp-sub { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--tinta); margin: 0 0 26px; }
.resp-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 0 0 14px;
  padding: 18px 42px; background: var(--oro); color: var(--tinta); border: 0; border-radius: 0;
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .14em;
  font-variant-caps: small-caps; text-transform: lowercase; cursor: pointer;
}
.resp-btn span { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .06em; font-variant-caps: normal; text-transform: none; color: var(--tinta); opacity: .75; }
.resp-tip { font-size: 13px; color: var(--tenue); margin-top: 10px; line-height: 1.5; }
.resp-cuadro-wrap { height: 220px; display: flex; align-items: center; justify-content: center; margin: 8px 0 22px; }
.resp-svg { width: 190px; height: 190px; overflow: visible; }
.resp-svg .base { fill: var(--blanco); stroke: var(--borde); stroke-width: 2; }
.resp-svg .lado { stroke: var(--azul); stroke-width: 5; stroke-linecap: square; fill: none; }
.resp-svg .punto { fill: var(--oro); stroke: var(--blanco); stroke-width: 2; }
.resp-svg.ganado .lado { stroke: var(--oro); }
.resp-svg.quieto { opacity: .35; transition: opacity 1.2s ease; }
.resp-fase { font-family: var(--serif); font-size: 34px; color: var(--tinta); min-height: 44px; }
.resp-meta { font-size: 13px; letter-spacing: .06em; color: var(--tenue); margin-top: 6px; }
.resp-crono {
  font-family: var(--serif); font-size: 54px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 2px; transition: color .6s ease;
}
.resp-crono.ganado { color: var(--azul); }
.resp-record { font-size: 13px; letter-spacing: .06em; color: var(--tenue); margin: -16px 0 20px; }
.resp-terminar {
  margin-top: 20px; padding: 18px 42px; border: 0; border-radius: 0; background: var(--oro); color: var(--tinta);
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .14em;
  font-variant-caps: small-caps; text-transform: lowercase; cursor: pointer;
}
.resp-fin-star { font-size: 44px; color: var(--oro); margin-bottom: 10px; }
.resp-fin-txt { font-family: var(--serif); font-size: 28px; color: var(--tinta); }
.resp-fin-tiempo { font-size: 13px; letter-spacing: .06em; color: var(--tenue); margin-top: 8px; }
.resp-fin-atomos { display: block; font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--azul); margin-bottom: 4px; }
.resp-fin-unidad { display: block; font-size: 13px; letter-spacing: .06em; color: var(--tenue); }
.resp-fin-molecula, .resp-fin-record { display: block; margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--azul); }
/* D1 · El tope del dia y el aviso de Dominus ya ganado. */
.resp-fin-tope { display: block; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--azul); }
.resp-ya { font-size: 14px; letter-spacing: .04em; line-height: 1.5; color: var(--tinta); margin: -14px 0 18px; }
.resp-fin-total { display: block; margin-top: 12px; font-size: 13px; letter-spacing: .06em; color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .resp-overlay { transition: none; } }

/* ── Escritorio, desde 1024 px (Escritorio.dc.html) ────────── */
@media (min-width: 1024px) {
  .banda { padding: 28px 80px 32px; }
  .banda-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: end; }
  .banda-izq { gap: 18px; }
  .marca svg { width: 24px; height: 21px; }
  .marca span { font-size: 15px; }
  .progreso { gap: 18px; }
  .cinturon-fila { gap: 14px; }
  .cinturon-barra { width: 52px; height: 12px; }
  .progreso-cinturon { font-size: 30px; }
  .progreso-nivel { font-size: 22px; }
  .semana { gap: 8px; }
  .semana-num { width: 52px; height: 52px; font-size: 20px; }

  .cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; padding: 40px 80px; }
  /* E2 · El mes vive siempre en la segunda columna, se vea o no Hoy. */
  .col-der { gap: 20px; grid-column: 2; }
  /* E2 · Las flechas van pegadas al titulo: el titulo mide lo del mes mas
     largo ("Septiembre", 4.4 em) para que no se muevan al cambiar de mes. */
  .mes-titulo { min-width: 4.5em; }
  .hoy { padding: 0; }
  .hoy-fecha { font-size: 22px; }
  .madre { margin: 0; padding: 18px 24px; }
  .madre-nombre { font-size: 30px; }
  .fila { padding: 16px 0; }
  .hoy-pie { flex-direction: row; align-items: center; gap: 24px; }

  .mes { padding: 24px; gap: 16px; }
  .mes-cabeza { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .mes-cifras { gap: 0; }
  .mes-cifras span + span::before { content: ' · '; white-space: pre; }
  .grafica svg { height: 130px; }
  .cal-dia { height: 44px; }

  .tumes { padding: 0; background: var(--blanco); box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .tumes-tarjeta { display: contents; }
  .tumes-celda { padding: 18px 20px; }
  .tumes-num { font-size: 30px; }
  .tumes-record { padding: 18px 20px; font-size: 17px; line-height: 1.3; display: flex; align-items: center; border-left: 1px solid var(--linea); }

  .pie { flex-grow: 0; background: none; padding: 0; flex-direction: row; gap: 28px; flex-wrap: wrap; align-items: baseline; }
  .pie a { color: var(--azul); font-size: 15px; }
  .pie button { color: var(--texto); font-size: 15px; }
  .version-tag { color: var(--muy-tenue); }

  .hoja { left: 50%; right: auto; bottom: 0; width: 560px; transform: translateX(-50%); }
}

/* ── A10 · Cajas de toque de 44 x 44 px como minimo ─────────────
   Los nombres de los habitos, las flechas del mes, los dias del
   calendario, el pie, los botones de texto de las hojas y los
   enlaces de la puerta (que viven en auth-shell.css y aqui se
   ajustan solo en su area de toque). */
.madre-nombre, .fila-nombre { min-height: 44px; display: inline-flex; align-items: center; }
.mes-nav button { width: 44px; height: 44px; }
.calendario { gap: 4px; }
.cal-dia { height: 44px; }
.pie { gap: 0; }
.pie a, .pie button { min-height: 44px; display: inline-flex; align-items: center; }
.btn-texto { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.mh-door .pl-foot a, .mh-door .pl-show, .mh-door .auth-back, .mh-door .auth-forgot, .mh-door .pl-note a {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* D6 · El pie en escritorio: 28 px entre enlaces, como la maqueta (el gap 0
   de A10 es solo para el celular, donde cada enlace mide 44 px de alto). */
@media (min-width: 1024px) { .pie { gap: 28px; } }

/* ═════════════════════════════════════════════════════════════
   PIEL NEGRA · App única (DopaminAPP). Mismo motor y mismas clases:
   solo se redefinen los tokens y lo que no sale de ellos.
   Fondo #0c0c0c, acento #e5483b, estrellas #e0c48a solo en días perfectos.
   ═════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --azul: #e5483b;
  --rojo: #e5483b;
  --tinta: #f4f4f4;
  --texto: rgba(244,244,244,.82);
  --tenue: rgba(244,244,244,.58);
  --muy-tenue: rgba(244,244,244,.3);
  --previo: rgba(244,244,244,.4);
  --papel: #161616;
  --tinte: #262626;
  --blanco: #0c0c0c;
  --linea: rgba(255,255,255,.1);
  --borde: rgba(255,255,255,.26);
  --punteada: rgba(255,255,255,.4);
  --velo: rgba(0,0,0,.72);
  --sombra: none;
  --sombra-hoja: 0 26px 60px rgba(0,0,0,.6);
  --sombra-cinturon: none;
  --serif: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}
body, .app { background: #0c0c0c; }
.banda, .pie { background: #0c0c0c; }
.marca, .progreso-cinturon, .semana-num.is-hoy, .mes-ficha, .pie a,
.save-status.is-saving, .save-status.is-offline, .save-status.is-sin-senal { color: #fff; }
.cinturon-barra { background: #fff; }
.progreso-cinturon { font-weight: 400; font-size: 32px; letter-spacing: .02em; text-transform: uppercase; }
.progreso-nivel { font-family: var(--sans); font-size: 15px; color: #fff; }
.progreso-pista { background: #2a2a2a; }
.progreso-lleno { background: var(--rojo); }
.progreso-falta { font-size: 13px; letter-spacing: 0; color: var(--tenue); }
.semana-letra { color: var(--tenue); }
.semana-num { font-family: var(--sans); font-size: 15px; border: 1px solid var(--borde); color: var(--tenue); }
.semana-num.is-hoy { border: 1px solid #fff; color: #fff; }
.semana-num.is-futuro { color: var(--muy-tenue); border-color: var(--linea); }
.semana-num.is-perfecto { border-color: var(--ama, #e0c48a); background: #e0c48a; color: #0c0c0c; }
.hoy-titulo, .madre-etiqueta, .mes-vs, .resp-kicker { font-variant-caps: normal; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--tenue); }
.hoy-fecha, .hoy-perfecto, .madre-dormida-nota { font-family: var(--sans); font-style: normal; font-weight: 400; }
.hoy-fecha { font-size: 15px; color: var(--tenue); }
.madre { margin: 0 calc(-1 * var(--gutter)); }
.madre-nombre, .fila-nombre { font-weight: 400; letter-spacing: .02em; }
.madre-nombre { font-size: 34px; }
.fila-nombre { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: 0; }
.hoy-racha, .madre-racha .hoy-racha, .fila .hoy-racha { font-family: var(--sans); font-size: 14px; color: var(--tenue); }
.madre-dormida-nota { font-size: 14px; color: var(--texto); }
.hoy-marca[data-state="done"] { background: var(--rojo); color: #fff; }
.hoy-marca[data-state="skip"] { background: var(--tinte); }
.btn-oro { background: var(--rojo); color: #fff; font-family: var(--serif); font-weight: 400; font-variant-caps: normal; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; }
.fila-nota { letter-spacing: 0; }
.hoy-ayuda, .nueva-siguiente { letter-spacing: 0; }
.campo-error { color: #ff8a80; }
.mes-ficha { background: var(--rojo); }
.mes-ficha.is-abajo { background: var(--tinte); color: #fff; }
.grafica { background: #161616; }
.aviso-carga { color: #fff; }
.aviso-carga button { background: #fff; color: #0c0c0c; }

/* ── Perfil ───────────────────────────────────────────────── */
.perfil-btn { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1d1d1d; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.perfil-btn svg, .perfil-avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perfil { position: fixed; inset: 0; z-index: 240; background: #0c0c0c; overflow-y: auto; padding: 24px var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px)); }
.perfil[hidden] { display: none; }
body.perfil-abierto { overflow: hidden; }
.perfil-cabeza { display: flex; align-items: center; gap: 14px; padding: 8px 0 20px; }
.perfil-titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: .03em; color: #fff; text-transform: uppercase; }
.perfil-volver { background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; padding: 0 8px 4px 0; cursor: pointer; }
.perfil-ficha { display: flex; align-items: center; gap: 16px; background: var(--papel); padding: 20px 16px; margin: 0 0 24px; }
.perfil-avatar { width: 56px; height: 56px; border-radius: 50%; background: #262626; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.perfil-datos { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.perfil-nombre { font-family: var(--sans); font-weight: 700; font-size: 20px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-rango { font-size: 14px; color: var(--tenue); }
.perfil-seccion { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); padding: 18px 0 6px; }
.perfil-fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea); padding: 18px 0; color: #fff; font-family: var(--sans); font-size: 17px; text-decoration: none; cursor: pointer; }
.perfil-fila-etiqueta { flex-grow: 1; }
.perfil-fila-valor { color: var(--tenue); }
.perfil-fila-flecha { color: var(--tenue); font-size: 22px; }
.perfil-aviso { cursor: default; }
.perfil-aviso-textos { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perfil-aviso-nota { font-size: 13px; color: var(--tenue); }
.perfil-hora { color: var(--tenue); font-size: 15px; white-space: nowrap; }
.perfil-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; border: 0; border-radius: 0; background: #333; cursor: pointer; padding: 0; }
.perfil-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; transition: transform .15s; }
.perfil-switch[aria-checked="true"] { background: var(--rojo); }
.perfil-switch[aria-checked="true"]::after { transform: translateX(20px); }
.perfil-reset { color: var(--rojo); border-bottom-color: var(--linea); }
.hoja-velo { z-index: 800; }
@media (min-width: 1024px) { .perfil { left: var(--shell-lateral, 232px); padding-bottom: 40px; } }

/* Dominus con Chispa */
.resp-chispa { display: flex; justify-content: center; margin: 18px 0; }
.resp-chispa img { height: 200px; width: auto; max-width: 70%; }
.resp-overlay { background: #0c0c0c; }
.resp-kicker { color: var(--rojo); }
.resp-sub { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 44px; line-height: 1.02; text-transform: uppercase; color: #fff; text-align: left; letter-spacing: .01em; }
.resp-btn { background: var(--rojo); color: #fff; }
.resp-btn span { color: rgba(255,255,255,.85); }
.resp-fin-txt { font-family: var(--serif); font-style: normal; font-weight: 400; text-transform: uppercase; color: #fff; }
.hoja-desde-etiqueta { display: block; margin: 14px 0 6px; }
.hoja-desde { color-scheme: dark; }
.hoja-desde-ayuda { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }