/* Lecturas — pensado para leer en el celular, de noche, un rato largo. */

:root {
  --papel: #faf8f4;
  --papel-hondo: #f2eee6;
  --tinta: #23201b;
  --tinta-suave: #6b6459;
  --linea: #e2dbcd;
  --acento: #8a5a2b;
  --acento-claro: #f0e4d6;
  --marca-sel: #f7e2b8;
  --peligro: #9b3126;
  --radio: 14px;
  --sombra: 0 8px 30px rgb(35 32 27 / 0.13);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14120f;
    --papel-hondo: #1d1a16;
    --tinta: #ece6dc;
    --tinta-suave: #9d958a;
    --linea: #302b24;
    --acento: #d9a566;
    --acento-claro: #2b231a;
    --marca-sel: #4a3a1c;
    --peligro: #e0796c;
    --sombra: 0 8px 30px rgb(0 0 0 / 0.5);
  }
}

* { box-sizing: border-box; }

/* Sin esto, cualquier regla con display: (el panel, por ejemplo) le gana al
   atributo hidden y el elemento aparece igual. */
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

.pantalla { display: none; min-height: 100dvh; flex-direction: column; }
.pantalla.activa { display: flex; }

/* ── La puerta ───────────────────────────────────────────────────────────── */

#puerta { align-items: center; justify-content: center; padding: 24px; }

.puerta-caja { width: 100%; max-width: 340px; text-align: center; }

.marca {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.marca.chica { font-size: 1.25rem; margin: 0; }

.bajada { color: var(--tinta-suave); font-size: 0.95rem; margin: 0 0 28px; }

#form-codigo { display: flex; flex-direction: column; gap: 10px; }

input[type="password"], input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-align: center;
}
input:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.btn-primario {
  padding: 14px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--papel);
  background: var(--tinta);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
}
.btn-primario:disabled { opacity: 0.5; cursor: progress; }

.error { color: var(--peligro); font-size: 0.9rem; margin: 14px 0 0; }

/* ── Barras ──────────────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.barra-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barra-titulo strong { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-titulo span { font-size: 0.78rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.medidor {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 4px 9px;
  border: 1px solid var(--linea);
  border-radius: 99px;
}
.medidor.alerta { color: var(--peligro); border-color: currentColor; }

.btn-icono {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 50%;
  cursor: pointer;
}
.btn-icono:disabled { opacity: 0.35; cursor: default; }

.contenido { flex: 1; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); max-width: 720px; width: 100%; margin: 0 auto; }

/* ── Agregar un libro ────────────────────────────────────────────────────── */

.soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.soltar:hover, .soltar.encima { border-color: var(--acento); background: var(--acento-claro); }
.soltar-icono { font-size: 1.8rem; color: var(--acento); line-height: 1; }
.soltar-titulo { font-weight: 600; }
.soltar-ayuda { font-size: 0.82rem; color: var(--tinta-suave); line-height: 1.45; }

.progreso { margin: 16px 0 0; font-size: 0.9rem; color: var(--tinta-suave); text-align: center; }

/* ── El estante ──────────────────────────────────────────────────────────── */

.estante { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.libro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.libro-datos { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.libro-titulo { display: block; font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; }
.libro-pie { display: block; font-size: 0.78rem; color: var(--tinta-suave); margin-top: 3px; }
.libro-borrar { flex-shrink: 0; width: 32px; height: 32px; font-size: 1rem; color: var(--tinta-suave); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.libro-borrar:hover { color: var(--peligro); background: var(--acento-claro); }

.vacio { color: var(--tinta-suave); font-size: 0.9rem; text-align: center; margin: 28px 0; }

/* ── El lector ───────────────────────────────────────────────────────────── */

.tramos { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; max-width: 720px; width: 100%; margin: 0 auto; }

#selector-tramo {
  flex: 1;
  min-width: 0;
  /* 44px de alto: lo mínimo para acertarle con el dedo sin pelear. */
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--tinta);
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.acciones {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.acciones::-webkit-scrollbar { display: none; }

.btn-accion {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--acento);
  background: var(--acento-claro);
  border: 1px solid transparent;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-accion.suave { color: var(--tinta-suave); background: transparent; border-color: var(--linea); }
.btn-accion:disabled { opacity: 0.5; cursor: progress; }

.texto {
  flex: 1;
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 20px calc(80px + env(safe-area-inset-bottom));
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.72;
  hyphens: auto;
}
.texto p { margin: 0 0 1.1em; }
.texto h2 { font-size: 1.4rem; font-weight: 400; margin: 0 0 0.9em; }
.texto ::selection { background: var(--marca-sel); }

@media (min-width: 700px) { .texto { font-size: 1.24rem; } }

/* ── El botón flotante ───────────────────────────────────────────────────── */

.flotante {
  position: fixed;
  z-index: 30;
  padding: 11px 18px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--papel);
  background: var(--tinta);
  border: 0;
  border-radius: 99px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transform: translate(-50%, -100%);
}

/* ── El panel ────────────────────────────────────────────────────────────── */

.fondo-panel { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.35); }

.panel {
  position: fixed;
  z-index: 41;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-top: 1px solid var(--linea);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--sombra);
  animation: subir 0.22s ease-out;
}
@keyframes subir { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

@media (min-width: 900px) {
  .panel { top: 0; left: auto; width: 440px; max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--linea); animation: entrar 0.22s ease-out; }
  @keyframes entrar { from { transform: translateX(100%); } }
}

.panel-barra { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.panel-barra strong { flex: 1; font-size: 0.95rem; }

.panel-cuerpo { flex: 1; overflow-y: auto; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }

.panel-cuerpo h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; margin: 1.5em 0 0.5em; color: var(--acento); }
.panel-cuerpo h2:first-child { margin-top: 0; }
.panel-cuerpo p { margin: 0 0 1em; }
.panel-cuerpo ul { margin: 0 0 1em; padding-left: 1.2em; }
.panel-cuerpo li { margin-bottom: 0.5em; }
.panel-cuerpo blockquote {
  margin: 0 0 0.9em;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--acento);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.55;
}
.panel-cuerpo strong { font-weight: 600; }
.panel-cuerpo em { font-style: italic; }

.citado {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  background: var(--papel-hondo);
  border-radius: 10px;
  max-height: 8.5em;
  overflow: hidden;
}

.pensando { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: 0.92rem; }
.pensando::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid var(--linea);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pensando::before { animation-duration: 2.4s; } }

.pie-costo { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 0.75rem; color: var(--tinta-suave); }

/* ── Análisis guardados ──────────────────────────────────────────────────── */

.guardado { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.guardado:last-child { border-bottom: 0; }
.guardado-cabeza { display: flex; align-items: baseline; gap: 8px; }
.guardado-abrir { flex: 1; text-align: left; padding: 0; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--tinta); background: none; border: 0; cursor: pointer; }
.guardado-fecha { font-size: 0.72rem; color: var(--tinta-suave); }
.guardado-borrar { padding: 0 4px; font-size: 0.85rem; color: var(--tinta-suave); background: none; border: 0; cursor: pointer; }
.guardado-borrar:hover { color: var(--peligro); }
.guardado-pico { margin: 5px 0 0; font-size: 0.84rem; color: var(--tinta-suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }