/* ===== Yo Soy — declaraciones bíblicas ===== */
:root {
  --fondo: #0f1729;
  --fondo-2: #1b2540;
  --texto: #f4f1ea;
  --texto-2: rgba(244,241,234,.62);
  --linea: rgba(244,241,234,.14);
  --borde: rgba(244,241,234,.34);
  --acento: #d8b46a;
  --panel: #131c31;
  --campo: rgba(255,255,255,.07);
  --tam-dec: clamp(1.9rem, calc(1.1rem + 4.4vw), 3.2rem);
  --tam-ver: clamp(.95rem, calc(.6rem + 1.5vw), 1.12rem);
  --seguro-sup: env(safe-area-inset-top, 0px);
  --seguro-inf: env(safe-area-inset-bottom, 0px);
}
html[data-tema="claro"] {
  --fondo: #f6f2ea;
  --fondo-2: #e7dfd0;
  --texto: #1d2233;
  --texto-2: rgba(29,34,51,.72);
  --linea: rgba(29,34,51,.14);
  --borde: rgba(29,34,51,.34);
  --acento: #9a6b1f;
  --panel: #fffdf9;
  --campo: rgba(0,0,0,.05);
}
/* el tamaño de letra mueve la raíz: así escala también el ciclo, las listas y el menú */
html[data-tamano="s"] { font-size: 92%;  --tam-dec: clamp(1.6rem, calc(1rem + 3.6vw), 2.6rem);   --tam-ver: clamp(.85rem, calc(.55rem + 1.3vw), 1rem); }
html[data-tamano="l"] { font-size: 116%; --tam-dec: clamp(2.2rem, calc(1.3rem + 5.2vw), 3.9rem); --tam-ver: clamp(1.05rem, calc(.7rem + 1.7vw), 1.28rem); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  overflow: hidden;
  overscroll-behavior: none;
  transition: background .6s ease, color .3s ease;
}
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }

/* ---- estructura ---- */
.vista { position: fixed; inset: 0; display: none; flex-direction: column; }
.vista.activa { display: flex; }

.barra-sup, .barra-inf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .55rem .8rem; flex: 0 0 auto;
}
.barra-sup { padding-top: calc(.55rem + var(--seguro-sup)); }
.barra-inf { padding-bottom: calc(.6rem + var(--seguro-inf)); }

.icono {
  background: none; border: 0; color: var(--texto-2); cursor: pointer;
  padding: .55rem; border-radius: 50%; display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  transition: color .2s, background .2s, transform .15s;
}
.icono:hover { color: var(--texto); background: var(--linea); }
.icono:active { transform: scale(.9); }
.icono.placeholder { pointer-events: none; opacity: 0; }
.icono.marcado { color: var(--acento); }
.icono.marcado svg { fill: var(--acento); }

.titulo-ctx {
  flex: 1; text-align: center; font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-2);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-width: 0;
}
#ctx-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.racha { color: var(--acento); letter-spacing: .04em; flex: 0 0 auto; }

/* ---- tarjeta ---- */
.tarjeta {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 1.6rem; padding: 1.2rem 1.6rem; text-align: center;
  cursor: pointer; overflow-y: auto;
  background: radial-gradient(120% 80% at 50% 0%, var(--fondo-2) 0%, var(--fondo) 62%);
  transition: background .7s ease;
}
.tarjeta > * { animation: entrar .5s ease both; }
.tarjeta.saliendo > * { animation: salir .18s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes salir  { to { opacity: 0; transform: translateY(-10px); } }

.categoria {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento); font-weight: 600;
}
.declaracion {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  font-size: var(--tam-dec); font-weight: 600; line-height: 1.22;
  letter-spacing: -.015em; text-wrap: balance; max-width: 18ch; margin: 0 auto;
}
.versiculo {
  max-width: 42ch; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linea);
}
.versiculo p { font-size: var(--tam-ver); line-height: 1.62; color: var(--texto-2); }
.referencia {
  font: inherit; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--acento); font-weight: 600;
  background: none; border: 0; padding: .5rem 1rem; margin: 0 auto;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer; transition: background .2s;
}
.referencia:hover { background: var(--linea); }
.referencia:active { transform: scale(.97); }
.sigla { font-weight: 400; letter-spacing: .06em; color: var(--texto-2); }

.siguiente {
  flex: 1; max-width: 15rem; margin: 0 auto; padding: .85rem 1rem;
  background: var(--linea); border: 0; border-radius: 999px;
  color: var(--texto); font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: transform .15s, background .2s;
}
.siguiente:hover { background: var(--acento); color: var(--fondo); }
.siguiente:active { transform: scale(.97); }

.pista {
  text-align: center; font-size: .72rem; color: var(--texto-2);
  padding-bottom: calc(.5rem + var(--seguro-inf)); transition: opacity .5s;
}
.pista.oculta { opacity: 0; }

.tarjeta:focus-visible { outline: 3px solid var(--acento); outline-offset: -5px; }
:where(button, a, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--acento); outline-offset: 2px; border-radius: .4rem;
}

/* ---- panel ---- */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 20;
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.velo.abierto { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
@keyframes aparecer { from { opacity: 0 } }
.panel {
  position: fixed; inset: 0 auto 0 0; z-index: 21; width: min(21rem, 86vw);
  background: var(--panel); border-right: 1px solid var(--linea);
  padding: calc(1.4rem + var(--seguro-sup)) 1.3rem calc(2rem + var(--seguro-inf));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), visibility 0s .28s;
}
.panel.abierto {
  transform: none; visibility: visible;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), visibility 0s;
}
.panel-titulo {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.5rem; margin-bottom: 1.2rem; color: var(--acento);
}
.panel-sub {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-2); margin: 1.7rem 0 .6rem; font-weight: 600;
}
.fila {
  width: 100%; display: flex; align-items: center; gap: .8rem;
  padding: .8rem .3rem; background: none; border: 0;
  border-bottom: 1px solid var(--linea); color: var(--texto);
  font: inherit; font-size: .96rem; text-align: left; cursor: pointer;
  border-radius: .5rem; min-height: 44px;
}
.fila:hover { color: var(--acento); background: var(--campo); }
.fila svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .75; }
.fila:hover svg { opacity: 1; }
.fila span { flex: 1; min-width: 0; }
.fila em {
  font-style: normal; font-size: .76rem; color: var(--acento);
  font-weight: 600; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.categorias { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem .1rem .2rem; }
.chip {
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--borde);
  background: none; color: var(--texto-2); font: inherit; font-size: .82rem;
  cursor: pointer; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; gap: .35rem;
}
.chip:hover, .chip.activo { border-color: var(--acento); color: var(--acento); }
.ajuste { display: flex; align-items: center; justify-content: space-between;
          gap: .8rem; padding: .6rem 0; font-size: .9rem; }
.ajuste select, .ajuste input {
  background: var(--campo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: .5rem; padding: .55rem; min-height: 44px; font: inherit; font-size: .85rem;
  max-width: 10.5rem; min-width: 0;
}
.nota { font-size: .76rem; line-height: 1.6; color: var(--texto-2); margin-bottom: .6rem; }
.nota b { color: var(--texto); font-weight: 600; }

.desplegable { border-bottom: 1px solid var(--linea); }
.desplegable summary {
  padding: .8rem .3rem; cursor: pointer; font-size: .88rem; color: var(--texto-2);
  list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::before {
  content: '›'; font-size: 1.1rem; color: var(--acento);
  transition: transform .2s; display: inline-block;
}
.desplegable[open] summary::before { transform: rotate(90deg); }
.desplegable summary:hover { color: var(--acento); }
.desplegable .nota { padding: 0 .3rem .8rem 1.4rem; }
.desplegable.categorias-caja { border-bottom: 1px solid var(--linea); }
.desplegable.categorias-caja summary { color: var(--texto); font-size: .96rem; }
.desplegable summary em {
  margin-left: auto; font-style: normal; font-size: .76rem;
  color: var(--acento); font-weight: 600;
}

.constancia {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin-bottom: 1.2rem; padding: .9rem .6rem;
  background: var(--campo); border-radius: .8rem;
}
.dato { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.dato-n {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.5rem; font-weight: 600; color: var(--acento);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dato-t {
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2); text-align: center;
}
.ajuste input.tilde {
  width: 44px; height: 44px; min-height: 44px; accent-color: var(--acento);
  cursor: pointer; padding: 0; border: 0; background: none;
}

/* ---- lista ---- */
.lista { background: var(--fondo); }
.items { flex: 1; overflow-y: auto; padding: 0 1rem calc(2rem + var(--seguro-inf));
         -webkit-overflow-scrolling: touch; }
.item {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--linea); padding: 1rem .3rem;
  color: var(--texto); font: inherit; cursor: pointer; display: block;
}
.item:hover { background: var(--linea); }
.item .d {
  display: block;
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.05rem; line-height: 1.35; margin-bottom: .3rem;
}
.item .r { display: block; font-size: .72rem; letter-spacing: .1em;
           text-transform: uppercase; color: var(--acento); }
.vacio { text-align: center; color: var(--texto-2); padding: 3rem 1rem; font-size: .9rem; line-height: 1.7; }

/* ---- aviso ---- */
.aviso {
  position: fixed; left: 50%; bottom: calc(5.5rem + var(--seguro-inf));
  transform: translateX(-50%); z-index: 40;
  background: var(--texto); color: var(--fondo);
  padding: .6rem 1.1rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: aparecer .2s ease;
  max-width: 90vw; text-align: center;
}
@media (min-width: 900px) {
  .tarjeta { padding: 2rem 3rem; }
  .pista { padding-bottom: 1rem; }
}

/* ===== hoja de versiones ===== */
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 22;
  background: var(--panel); border-top: 1px solid var(--linea);
  border-radius: 1.1rem 1.1rem 0 0;
  padding: 1.3rem 1.3rem calc(1.6rem + var(--seguro-inf));
  max-height: 80vh; overflow-y: auto;
  transform: translateY(105%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), visibility 0s .3s;
}
.hoja.abierto {
  transform: none; visibility: visible;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), visibility 0s;
}
.hoja-titulo {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem;
}
.hoja-titulo span { color: var(--acento); }
.hoja-sub {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-2); margin: 1rem 0 .55rem; font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }


/* ===== ciclo de 21 días ===== */
.ciclo { padding: .4rem 0 1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.ciclo p { font-size: .92rem; line-height: 1.65; color: var(--texto-2); }
.ciclo h3 {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.25rem; font-weight: 600; line-height: 1.3;
}
.ciclo label { display: block; font-size: .78rem; letter-spacing: .1em;
               text-transform: uppercase; color: var(--acento);
               font-weight: 600; margin-bottom: .45rem; }
.ciclo textarea, .ciclo input[type="text"] {
  width: 100%; background: var(--campo); color: var(--texto);
  border: 1px solid var(--linea); border-radius: .6rem; padding: .7rem .8rem;
  font: inherit; font-size: .95rem; line-height: 1.55; resize: vertical;
}
.ciclo textarea:focus, .ciclo input:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.ciclo .primario {
  width: 100%; padding: .95rem 1rem; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--fondo); font: inherit;
  font-size: .95rem; font-weight: 700; cursor: pointer;
}
.ciclo .primario:disabled { opacity: .4; cursor: default; }
.ciclo .secundario {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--linea);
  border-radius: 999px; background: none; color: var(--texto-2);
  font: inherit; font-size: .88rem; cursor: pointer;
}

.puntos { display: flex; flex-wrap: wrap; gap: .34rem; margin: .2rem 0 .4rem; }
.punto { width: .68rem; height: .68rem; border-radius: 50%;
         border: 1px solid var(--borde); }
.punto.hecho { background: var(--acento); border-color: var(--acento); }
.punto.hoy { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }

.foco {
  border: 1px solid var(--linea); border-radius: .8rem; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .8rem; background: var(--campo);
}
.foco .par { display: flex; flex-direction: column; gap: .3rem; }
.foco .clave { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.foco .valor { font-size: .95rem; line-height: 1.5; }
.foco .valor.declaracion-foco {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.1rem; color: var(--acento);
}

.paso { border-top: 1px solid var(--linea); padding-top: 1.1rem;
        display: flex; flex-direction: column; gap: .6rem; }
.paso-enc { display: flex; align-items: baseline; gap: .6rem; }
.paso-n {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--acento); color: var(--fondo); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
}
.paso-t { font-family: "Iowan Old Style", Georgia, ui-serif, serif;
          font-size: 1.1rem; font-weight: 600; }
.paso-guia { font-size: .89rem; line-height: 1.6; color: var(--texto-2); }
.paso-vers {
  font-size: .82rem; line-height: 1.55; color: var(--texto-2);
  border-left: 2px solid var(--acento); padding-left: .8rem; font-style: italic;
}
.paso-vers b { display: block; font-style: normal; font-size: .7rem;
               letter-spacing: .1em; text-transform: uppercase;
               color: var(--acento); margin-top: .35rem; font-weight: 600; }

.repes { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.repes .cuenta { font-size: .82rem; color: var(--texto-2); }
.repe-punto { width: 44px; height: 44px; border-radius: 50%;
              border: 1px solid var(--borde); background: none; cursor: pointer;
              display: grid; place-items: center; color: var(--acento); font-size: .95rem; }
.repe-punto.hecho { background: var(--acento); border-color: var(--acento); color: var(--fondo); }

/* ===== quien pidió menos movimiento, recibe menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* aviso de que quedó trabajo sin cerrar de otro día */
.retomado {
  border-left: 2px solid var(--acento); padding-left: .8rem;
  font-size: .88rem !important; line-height: 1.55;
}

/* ===== hoja de voz ===== */
.hoja-dec {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 1.15rem; line-height: 1.35; color: var(--acento);
  margin-bottom: 1rem;
}
.chip.grabando {
  border-color: #e0574a; color: #e0574a;
  animation: latir 1.2s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: .5 } }

/* ===== respiración guiada ===== */
.respirar {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: 1.4rem 0; cursor: pointer; user-select: none;
}
.circulo {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  border: 2px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  transition: transform 4s ease-in-out;
}
.circulo.inhala   { transform: scale(1.55); transition-duration: 4s; }
.circulo.sostiene { transform: scale(1.55); transition-duration: 2s; }
.circulo.exhala   { transform: scale(1);    transition-duration: 6s; }
.respirar-texto {
  font-size: .95rem !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento) !important; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .circulo { transition: none; }
}

/* ===== bienvenida (una sola vez) ===== */
.bienvenida {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: 1.5rem; background: var(--fondo); overflow-y: auto;
}
.bienvenida-caja { max-width: 26rem; display: flex; flex-direction: column; gap: 1.1rem; }
.bienvenida h1 {
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-size: 2.4rem; color: var(--acento); font-weight: 600;
}
.bienvenida-sub { font-size: 1rem; line-height: 1.55; color: var(--texto); }
.bienvenida-lista { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.bienvenida-lista li {
  font-size: .92rem; line-height: 1.6; color: var(--texto-2);
  padding-left: 1rem; border-left: 2px solid var(--linea);
}
.bienvenida-lista b { color: var(--texto); font-weight: 600; }
.bienvenida .primario {
  padding: .95rem 1rem; border: 0; border-radius: 999px; background: var(--acento);
  color: var(--fondo); font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; min-height: 44px;
}

/* ===== barra de instalación ===== */
.barra-instalar {
  position: fixed; left: .8rem; right: .8rem; bottom: calc(.8rem + var(--seguro-inf));
  z-index: 45; background: var(--panel); border: 1px solid var(--borde);
  border-radius: .9rem; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.barra-instalar p { font-size: .84rem; line-height: 1.55; color: var(--texto-2); }
.barra-instalar b { color: var(--texto); }
.barra-instalar-botones { display: flex; gap: .5rem; justify-content: flex-end; }

/* ===== buscador ===== */
.buscador-caja { padding: 0 1rem .7rem; flex: 0 0 auto; }
#buscador {
  width: 100%; min-height: 44px; padding: .6rem .9rem;
  background: var(--campo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px;
  font: inherit; font-size: .92rem;
}
#buscador::placeholder { color: var(--texto-2); }