/* Paleta de lectura: papel crema, verde salvia y tinta cálida */
:root {
  --verde: #3f7d6b;
  --verde-osc: #2e5f50;
  --lima: #c9a45c;
  --teal: #36808a;
  --marino: #2c2b29;
  --azul: #2c4a63;
  --gris: #838694;
  --fondo: #f6f1e7;
  --papel: #fffdf8;
  --linea: #e4dac7;
  --suave: #ece4d2;
  --tinta: #2c2b29;          /* color del texto */
  --campo: #fffdf8;          /* fondo de campos y botones claros */
  --campo-ro: #f6f0e3;
  --verde-txt: #2e5f50;      /* verde para texto (más claro en el tema oscuro) */
  --hl-amarillo: #fff176;
  --hl-verde: #b9f6ca;
  --hl-azul: #b3e5fc;
  --hl-rosa: #f8bbd0;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(44, 43, 41, .10);
  --titulo: "Lora", Georgia, "Times New Roman", serif;
  --texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  line-height: 1.65;
  background: var(--fondo);
}

.wrap { width: min(920px, 100% - 32px); margin-inline: auto; }

/* ---------- Barra superior ---------- */
.topbar { background: var(--papel); border-bottom: 4px solid var(--verde); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0; }
.topbar__title {
  margin: 0;
  font: 800 clamp(1.3rem, 4.5vw, 2rem)/1.1 var(--titulo);
  color: var(--tinta);
}
.topbar__title span { color: var(--verde); }
.brush {
  font-family: var(--titulo);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  color: var(--tinta);
  border-bottom: 4px solid var(--lima);
  line-height: 1.1;
}

/* ---------- Pestañas de días ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 18px 2px 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  min-width: 76px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  font: 800 1.35rem/1.1 var(--titulo);
  padding: 8px 14px;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.tab small { display: block; font: 600 .6rem/1.2 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.tab:hover { border-color: var(--verde); }
.tab[aria-current="true"] { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: 0 6px 14px rgba(63, 125, 107, .35); }
.tab[aria-current="true"] small { color: rgba(255, 255, 255, .85); }
.tab.hecho::after {
  content: "✓";
  position: absolute; top: -7px; right: -5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #fff; font: 700 .8rem/22px var(--texto); text-align: center;
  box-shadow: 0 0 0 2px var(--fondo);
}

/* ---------- Tarjeta del día ---------- */
.dia { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }

.hero { position: relative; min-height: 240px; height: clamp(240px, 42vw, 380px); background: var(--marino); overflow: hidden; border-radius: var(--radio) var(--radio) 0 0; }
.hero--sin-imagen { background: linear-gradient(135deg, var(--marino) 0%, var(--teal) 70%, var(--verde) 100%); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,31,46,.88) 0%, rgba(27,31,46,.4) 45%, transparent 75%); }
.hero__txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 20px clamp(16px, 4vw, 32px); color: #fff; }
.hero__dia { font: 700 .75rem/1 var(--texto); letter-spacing: .16em; background: var(--verde); display: inline-block; padding: 7px 14px; border-radius: 999px; margin-bottom: 10px; }
.hero__titulo { margin: 0; font: 800 clamp(1.7rem, 6vw, 3rem)/1.1 var(--titulo); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero__ref { margin: 6px 0 0; font-weight: 500; opacity: .95; }

.cuerpo { padding: clamp(16px, 4vw, 32px); }

.meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.meta li { background: var(--suave); border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 500; }
.meta b { color: var(--verde-txt); font-weight: 700; }

.titulo-seccion {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font: 800 1.35rem/1.2 var(--titulo);
  color: var(--tinta);
}
.titulo-seccion::before { content: ""; width: 6px; height: 1.4em; background: var(--verde); border-radius: 3px; }
.titulo-seccion::after { content: ""; flex: 1; height: 2px; background: var(--linea); }

section.bloque { margin-top: 34px; }
section.bloque:first-of-type { margin-top: 0; }

/* lectura */
.lectura {
  font-size: calc(1.02rem * var(--zoom-lectura, 1));
  background: var(--suave);
  border-left: 6px solid var(--verde);
  border-radius: 16px;
  padding: 24px clamp(18px, 4vw, 32px);
}
.lectura p { margin: 0 0 1em; }
.lectura p:last-child { margin-bottom: 0; }
.lectura h3 { margin: 1.6em 0 .6em; font: 800 calc(1.2rem * var(--zoom-lectura, 1))/1.25 var(--titulo); color: var(--tinta); }
.lectura h3:first-child { margin-top: 0; }
.lectura > h3:first-child + p::first-letter {
  float: left; font: 800 3.6rem/.85 var(--titulo); color: var(--verde); padding: 6px 10px 0 0;
}
.lectura .poema { margin: 1em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--lima); font-style: italic; }
.lectura .poema p { margin: 0; }

/* avisos */
.aviso { padding: 10px 14px; border-radius: 10px; font-size: .88rem; margin-bottom: 16px; border: 1px solid transparent; }
.aviso--info { background: #eaf3fb; border-color: #bcd6ee; color: #1d4466; }
.aviso--error { background: #fdecea; border-color: #f2b8b2; color: #7a1f17; }
.aviso--ok { background: var(--suave); border-color: #bfdcb8; color: #1e5a1b; }
.cargando { color: var(--gris); }

/* tarjetas y formularios */
.tarjeta { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(16px, 4vw, 32px); }
.tarjeta--centrada { max-width: 460px; margin: 28px auto; }
.formulario { display: grid; gap: 14px; }
.formulario label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.formulario input, .formulario select {
  font: inherit; padding: 12px 14px; border: 2px solid var(--linea); border-radius: 10px; background: var(--campo); color: var(--tinta); width: 100%;
}
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(63, 125, 107, .18); }

/* barra de usuario y selectores */
.barra-usuario { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 0 0 12px; font-size: .85rem; }
.barra-usuario__acc { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--teal); cursor: pointer; text-decoration: underline; }
.btn-link:hover { color: var(--verde-txt); }
.pastillas { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0 0; }
.pastillas--semanas { padding-top: 10px; }
.pastilla { border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); font: 700 .85rem/1.2 var(--texto); border-radius: 999px; padding: 8px 16px; cursor: pointer; text-align: left; }
.pastilla small { display: block; font-weight: 500; font-size: .68rem; color: var(--gris); }
.pastilla--chica { padding: 6px 14px; font-size: .8rem; }
.pastilla:hover { border-color: var(--verde); }
.pastilla.activa { background: var(--marino); border-color: var(--marino); color: #fff; }
.pastilla.activa small { color: #c9ccd8; }
.guardado--error { color: #b03a2e; }
textarea[readonly] { background-color: var(--campo-ro); color: #4a4f60; }
.btn[disabled] { opacity: .6; cursor: wait; }
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.enlace { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--teal); }
.enlace:hover { color: var(--verde-txt); }

/* notas y preguntas */
textarea {
  width: 100%; min-height: 130px; resize: vertical;
  font: inherit; color: inherit;
  padding: 12px 14px;
  background: var(--campo);
  border: 2px solid var(--linea);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(63, 125, 107, .18); }
.notas textarea {
  min-height: 170px;
  background-image: repeating-linear-gradient(transparent 0 27px, var(--linea) 27px 28px);
  background-color: var(--campo);
  line-height: 28px;
  padding-top: 4px;
}

.pregunta { margin-bottom: 10px; background: var(--campo); border: 2px solid var(--linea); border-radius: 12px; overflow: hidden; }
.pregunta[open] { border-color: var(--verde); }
.pregunta summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 0;
  font-weight: 600;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "＋"; margin-left: auto; color: var(--verde); font-size: 1.3rem; line-height: 1; }
.pregunta[open] summary::after { content: "−"; }
.num {
  flex: none; width: 46px; align-self: stretch; display: grid; place-items: center;
  background: var(--marino); color: #fff; font: 800 1.4rem/1 var(--titulo);
  border-radius: 0 40px 0 0;
  margin: -10px 0;
}
.pregunta summary em { color: var(--verde-txt); font-style: normal; font-weight: 700; }
.pregunta.con-resp .num { background: var(--verde); }
.pregunta .resp { padding: 0 14px 14px; }
.ayuda { font-size: .85rem; color: var(--gris); margin: -6px 0 14px; }

/* estado + botones */
.guardado { font-size: .8rem; color: var(--verde-txt); font-weight: 600; min-height: 1.2em; text-align: right; margin-top: 4px; }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn {
  font: 600 .88rem/1 var(--texto);
  border: 2px solid var(--verde); background: var(--verde); color: #fff;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  transition: transform .1s, background .15s, color .15s;
}
.btn:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--verde-txt); }
.btn--ghost:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--ok { background: var(--lima); border-color: var(--lima); color: var(--marino); }
.btn--ok:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

.acciones--extra { margin-top: 10px; }
.acciones--extra .btn { font-size: .78rem; padding: 10px 16px; }

.nav-dias { display: flex; justify-content: space-between; gap: 10px; padding: 0 clamp(16px, 4vw, 32px) clamp(16px, 4vw, 28px); }

.footer { text-align: center; background: var(--marino); color: #c9ccd8; font-size: .8rem; padding: 26px 16px; margin-top: 44px; border-top: 4px solid var(--verde); }
.footer p { margin: 0; }
.footer strong { color: #fff; }

/* móvil */
@media (max-width: 640px) {
  .tab { min-width: 64px; padding-inline: 10px; }
}

/* imprimir */
@media print {
  body { background: var(--campo); }
  .topbar, .tabs, .acciones, .nav-dias, .footer, .enlace { display: none !important; }
  .dia { box-shadow: none; }
  .hero { height: 160px; min-height: 0; }
  .pregunta, details { break-inside: avoid; }
  details:not([open]) > .resp { display: block; }
  textarea { border: 1px solid #ccc; min-height: 80px; }
}

.tarjeta .ayuda { margin: 16px 0 0; }
.formulario + .ayuda { margin-top: 16px; }

/* =========================================================
   Panel de notas y preguntas
   - celular: hoja que sube desde abajo (+ botones flotantes)
   - tableta: cajón lateral
   - escritorio: panel fijo a la derecha de la lectura
   ========================================================= */
body.sin-scroll { overflow: hidden; }
body.pagina-lector main { padding-bottom: 120px; }

.panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 85vh; height: 85dvh;
  z-index: 60; display: flex; flex-direction: column;
  background: var(--papel); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(44, 43, 41, .28);
  transform: translateY(105%); visibility: hidden;
  transition: transform .26s ease, visibility 0s linear .26s;
}
.lector--abierto .panel { transform: none; visibility: visible; transition: transform .26s ease; }

.panel-fondo {
  position: fixed; inset: 0; z-index: 55; background: rgba(44, 43, 41, .5);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.lector--abierto .panel-fondo { opacity: 1; pointer-events: auto; }

.panel__cab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 12px 10px 14px; border-bottom: 1px solid var(--linea); }
.panel__asa { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #cfd6c9; }
.panel__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.panel__tab { border: 2px solid var(--linea); background: var(--campo); color: var(--tinta); font: 700 .82rem/1 var(--texto); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.panel__tab[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.panel__tab.con-datos::after { content: " •"; }
.panel__cuenta { font-weight: 600; opacity: .85; }
.panel__cerrar { flex: none; border: 0; background: #efe8d9; width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.panel__cerrar:hover { background: #dfe7d9; }

.panel__cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
.panel__ref { margin: 0 0 10px; font-size: .78rem; font-weight: 600; color: var(--gris); }
.panel__sec--notas { flex: 1; display: flex; flex-direction: column; }
.panel__sec--notas textarea { flex: 1; min-height: 180px; }
.lector[data-tab="notas"] .panel__sec--preg { display: none; }
.lector[data-tab="preguntas"] .panel__sec--notas { display: none; }
.lector[data-tab="resaltados"] .panel__sec--notas, .lector[data-tab="resaltados"] .panel__sec--preg { display: none; }
.lector:not([data-tab="resaltados"]) .panel__sec--res { display: none; }
.panel .guardado { margin: 0; padding: 4px 16px 12px; min-height: 1.7em; }
.panel .pregunta summary { font-size: .88rem; }

.fabs { position: fixed; right: 14px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lector--abierto + .fabs { display: none; }
.fab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 38px;
  border: 0; border-radius: 999px; padding: 11px 16px;
  font: 700 .85rem/1 var(--texto); color: #fff; background: var(--verde);
  box-shadow: 0 6px 18px rgba(44, 43, 41, .32); cursor: pointer;
}
.fab:active { transform: scale(.97); }
#fabPreguntas { background: var(--marino); }
.fab__punto { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--lima); border: 2px solid #fff; }
.fab__punto[hidden] { display: none; }
.fab__cuenta { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 2px 8px; font-size: .72rem; }
.fab__cuenta:empty { display: none; }

.panel-borde { display: none; }

/* tableta: cajón lateral */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .panel { left: auto; top: 0; bottom: 0; right: 0; width: min(430px, 92vw); height: 100vh; height: 100dvh; border-radius: 20px 0 0 20px; transform: translateX(105%); }
  .lector--abierto .panel { transform: none; }
  .panel__asa { display: none; }
  .panel__cab { padding-top: 14px; }
}

/* escritorio: panel fijo al lado de la lectura */
@media (min-width: 1100px) {
  body.pagina-lector .wrap { width: min(1360px, 100% - 32px); }
  body.pagina-lector main { padding-bottom: 0; }
  .lector { display: grid; grid-template-columns: minmax(0, 960px); gap: 22px; align-items: start; }
  .lector--abierto { grid-template-columns: minmax(0, 1fr) 390px; }
  .panel {
    position: sticky; top: 14px; left: auto; right: auto; bottom: auto;
    height: calc(100vh - 28px); z-index: 1;
    transform: none; visibility: visible; transition: none;
    border-radius: var(--radio); box-shadow: var(--sombra); display: none;
  }
  .lector--abierto .panel { display: flex; }
  .panel__asa, .panel-fondo, .fabs { display: none; }
  .lector:not(.lector--abierto) .panel-borde {
    display: block; position: fixed; right: 0; top: 38%; z-index: 40;
    writing-mode: vertical-rl; padding: 18px 10px;
    background: var(--verde); color: #fff; border: 0; border-radius: 12px 0 0 12px;
    font: 700 .85rem/1 var(--texto); cursor: pointer; box-shadow: var(--sombra);
  }
  .lector:not(.lector--abierto) .panel-borde:hover { background: var(--verde-osc); }
}

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

@media print {
  .lector { display: block; }
  .panel { position: static; display: block !important; visibility: visible; transform: none; height: auto !important; box-shadow: none; border-radius: 0; }
  .panel__cab, .panel-fondo, .panel-borde, .fabs, .panel .guardado, .panel__ref { display: none !important; }
  .lector .panel__sec--res { display: none !important; }
  .lector .panel__sec--preg, .lector .panel__sec--notas { display: block !important; }
  .panel__cuerpo { overflow: visible; padding: 14px 0 0; }
  body.sin-scroll { overflow: visible; }
}

/* =========================================================
   Lectura en voz alta y citas
   ========================================================= */
.voz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; padding: 8px 10px;
  background: var(--campo); border: 2px solid var(--linea); border-radius: 12px;
  z-index: 30;
}
.voz[hidden] { display: none; }
.voz.activa { border-color: var(--verde); box-shadow: var(--sombra); }
.voz--oculta { display: none; }
.voz__ajustes { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.voz__ajustes[hidden], .voz__btn[hidden] { display: none; }
.voz__ajustes .voz__lbl { justify-content: flex-start; }
.voz__ajustes select { flex: 1; max-width: 320px; }
.voz__btn { border: 0; border-radius: 999px; padding: 10px 16px; font: 700 .82rem/1 var(--texto); cursor: pointer; background: var(--suave); color: var(--verde-txt); }
.voz__btn--main { background: var(--verde); color: #fff; }
.voz__btn:hover { filter: brightness(.95); }
.voz__lbl { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--gris); }
.voz select { font: inherit; font-size: .8rem; padding: 6px 8px; border: 2px solid var(--linea); border-radius: 8px; background: var(--campo); color: var(--tinta); max-width: 190px; }

.toast {
  position: fixed; z-index: 80; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: var(--marino); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; box-shadow: 0 8px 22px rgba(44, 43, 41, .4);
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
}
.toast[hidden] { display: none; }
.toast button { background: none; border: 0; padding: 0; color: var(--lima); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (min-width: 1100px) { .toast { bottom: 28px; } }

@media print { .voz, .menu-sel, .toast, .herramientas .ctl-lectura { display: none !important; } mark.leyendo-frase { background: none; box-shadow: none; } }

/* =========================================================
   Barra de semana / páginas y controles flotantes de la voz
   ========================================================= */
.fila-semana { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 0 0; }
.fila-semana[hidden] { display: none; }
.semana-sel { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.semana-sel select {
  font: 800 1.15rem/1 var(--titulo); padding: 8px 10px; min-width: 64px;
  border: 2px solid var(--linea); border-radius: 12px; background: var(--campo); color: var(--tinta);
}
.semana-sel select:focus { outline: none; border-color: var(--verde); }
.pastillas-semana { display: none; flex-wrap: wrap; gap: 8px; }
.chip-pag, .chip-grupo { background: var(--suave); border-radius: 999px; font-weight: 500; }
.chip-pag { padding: 7px 14px; font-size: .85rem; }
.chip-pag b, .chip-grupo b { color: var(--verde-txt); font-weight: 700; }
.chip-grupo { display: inline-block; padding: 3px 10px; font-size: .78rem; margin-left: 4px; vertical-align: middle; }
@media (min-width: 700px) {
  .semana-sel { display: none; }
  .pastillas-semana { display: flex; }
  .chip-pag { margin-left: auto; }
}

/* Los botones flotantes de voz (izquierda) y de Notas/Preguntas (derecha) comparten medidas para quedar alineados fila por fila */
.voz-flot { position: fixed; left: 14px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.voz-flot__fila { display: flex; gap: 10px; }
.voz-flot[hidden] { display: none; }
.fab-voz {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 38px;
  border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer;
  font: 700 .85rem/1 var(--texto); background: var(--verde); color: #fff;
  box-shadow: 0 6px 18px rgba(44, 43, 41, .32);
}
.fab-voz--sec { background: var(--campo); color: var(--verde-txt); }
.fab-voz--ico { padding: 11px 14px; font-size: .95rem; min-width: 38px; }
.fab-voz:active { transform: scale(.97); }
.voz-flot__aj {
  display: grid; gap: 8px; padding: 12px 14px; background: var(--campo); border: 2px solid var(--linea); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(44, 43, 41, .3); max-width: min(310px, calc(100vw - 28px));
}
.voz-flot__aj[hidden] { display: none; }
.voz-flot__aj label { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; color: var(--gris); }
.voz-flot__aj label[hidden] { display: none; }
.voz-flot__aj select { flex: 1; min-width: 0; font: inherit; font-size: .82rem; padding: 6px 8px; border: 2px solid var(--linea); border-radius: 8px; background: var(--campo); color: var(--tinta); }

@media print { .voz-flot { display: none !important; } }


/* =========================================================
   Herramientas de la lectura, resaltado y menú de selección
   ========================================================= */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; }
.herramientas .voz { margin: 0; flex: 1 1 auto; }
.ctl-lectura { display: flex; gap: 6px; }
.ctl {
  min-width: 42px; padding: 9px 12px; border: 2px solid var(--linea); border-radius: 999px;
  background: var(--campo); color: var(--tinta); font: 700 .85rem/1 var(--texto); cursor: pointer;
}
.ctl:hover:not(:disabled) { border-color: var(--verde); }
.ctl:disabled { opacity: .4; cursor: default; }
.voz-flot__aj .ctl-lectura { justify-content: flex-start; margin-top: 2px; }

mark.hl { color: #2c2b29; border-radius: 3px; padding: 1px 0; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl--amarillo { background: var(--hl-amarillo); }
mark.hl--verde { background: var(--hl-verde); }
mark.hl--azul { background: var(--hl-azul); }
mark.hl--rosa { background: var(--hl-rosa); }
mark.leyendo-frase {
  background: #c6ec6a; color: #2c2b29; border-radius: 4px; box-shadow: 0 0 0 3px #c6ec6a;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.menu-sel {
  position: fixed; z-index: 70; top: 0; left: 0;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #262d40; color: #fff; border-radius: 999px; box-shadow: 0 8px 22px rgba(44, 43, 41, .45); white-space: nowrap;
}
.menu-sel[hidden] { display: none; }
.sw { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.sw--amarillo { background: #fff176; }
.sw--verde { background: #b9f6ca; }
.sw--azul { background: #b3e5fc; }
.sw--rosa { background: #f8bbd0; }
.menu-sel__btn { border: 0; background: none; color: #fff; font: 700 .8rem/1 var(--texto); padding: 8px 6px; cursor: pointer; }
.menu-sel__btn[hidden] { display: none; }
.menu-sel__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .3); }

/* =========================================================
   Tema oscuro (se activa con data-tema="oscuro" en <html>)
   ========================================================= */
html { color-scheme: light; }
html[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #1a1814;
  --papel: #24211c;
  --suave: #28332d;
  --linea: #3a352c;
  --campo: #2b2721;
  --campo-ro: #211e19;
  --tinta: #ece6d9;
  --gris: #a39d8f;
  --verde-txt: #8fc9b3;
  --sombra: 0 6px 24px rgba(0, 0, 0, .5);
}
html[data-tema="oscuro"] .aviso--info { background: #16283a; border-color: #27496b; color: #b8d8f5; }
html[data-tema="oscuro"] .aviso--error { background: #3a1c1c; border-color: #6b2f2f; color: #f4b8b2; }
html[data-tema="oscuro"] .aviso--ok { background: #17301f; border-color: #2d5a3a; color: #a8e6b4; }
html[data-tema="oscuro"] .pastilla.activa { background: var(--verde); border-color: var(--verde); color: #fff; }
html[data-tema="oscuro"] .pastilla.activa small { color: rgba(255, 255, 255, .85); }
html[data-tema="oscuro"] .num,
html[data-tema="oscuro"] #fabPreguntas { background: #3a342a; }
html[data-tema="oscuro"] .pregunta.con-resp .num { background: var(--verde); }
html[data-tema="oscuro"] .toast { background: #3a342a; }
html[data-tema="oscuro"] .panel__asa { background: #4a4336; }
html[data-tema="oscuro"] .panel__cerrar { background: #3a352c; color: var(--tinta); }
html[data-tema="oscuro"] .panel__cerrar:hover { background: #403a2e; }
html[data-tema="oscuro"] .footer { background: #12100d; }
html[data-tema="oscuro"] .guardado--error { color: #f08a80; }
html[data-tema="oscuro"] .lectura { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }

@media print {
  html[data-tema="oscuro"] {
    color-scheme: light;
    --fondo: #fff; --papel: #fff; --suave: #ece4d2; --linea: #e4dac7; --campo: #fff; --campo-ro: #f6f0e3;
    --tinta: #2c2b29; --gris: #838694; --verde-txt: #2e5f50; --sombra: none;
  }
  mark.hl--amarillo, mark.hl--verde, mark.hl--azul, mark.hl--rosa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* =========================================================
   Dictado por voz
   ========================================================= */
.campo-voz { position: relative; display: flex; flex-direction: column; flex: 1; }
.campo-voz textarea { padding-bottom: 56px; }
.panel .resp .campo-voz { flex: none; }
.mic {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--verde); color: #fff;
  font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(44, 43, 41, .3);
}
.mic:hover { background: var(--verde-osc); }
.mic--activo { background: #d93025; animation: pulso-mic 1.3s ease-in-out infinite; }
.mic--activo:hover { background: #b3261e; }
@keyframes pulso-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, .55); } 50% { box-shadow: 0 0 0 10px rgba(217, 48, 37, 0); } }
.mic-estado { position: absolute; left: 14px; bottom: 20px; font-size: .78rem; font-weight: 700; color: #d93025; }
.mic-estado[hidden] { display: none; }
html[data-tema="oscuro"] .mic-estado { color: #ff8a80; }
.ayuda--voz { margin: 0 0 10px; font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .mic--activo { animation: none; } }
@media print { .mic, .mic-estado, .ayuda--voz { display: none !important; } }

/* =========================================================
   Imagen completa (visor) y fondo de la pantalla de ingreso
   ========================================================= */
.hero--ampliable { cursor: zoom-in; }
.hero--ampliable:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
.hero__ampliar {
  position: absolute; z-index: 1; top: 12px; right: 12px;
  background: rgba(44, 43, 41, .62); color: #fff; font: 600 .75rem/1 var(--texto);
  padding: 8px 12px; border-radius: 999px; pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.visor {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 16, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}
.visor[hidden] { display: none; }
.visor__img { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0, 0, 0, .6); }
.visor__pie { margin: 12px 0 0; color: #e6e8f0; font-size: .85rem; text-align: center; }
.visor__x {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.visor__x:hover { background: rgba(255, 255, 255, .28); }
@media print { .visor, .hero__ampliar, .fondo-login { display: none !important; } }

.fondo-login {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--marino); background-size: cover; background-repeat: no-repeat;
}
.fondo-login::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(44, 43, 41, 0), rgba(44, 43, 41, .18)); }
body.con-fondo .topbar { background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.con-fondo .tarjeta--centrada {
  max-width: 380px; padding: clamp(14px, 3.5vw, 24px);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
body.con-fondo .tarjeta--centrada .ayuda { color: #3b4050; }
html[data-tema="oscuro"] body.con-fondo .topbar { background: rgba(36, 33, 28, .78); }
html[data-tema="oscuro"] body.con-fondo .tarjeta--centrada { background: rgba(36, 33, 28, .74); }
html[data-tema="oscuro"] body.con-fondo .tarjeta--centrada .ayuda { color: var(--gris); }
.ayuda--priv { margin: 0 0 10px; font-size: .75rem; }
@media print { .ayuda--priv { display: none; } }

/* =========================================================
   Barra de avance de la lectura y punto donde quedó la persona
   ========================================================= */
.avance-lectura {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 80; overflow: hidden;
  background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.avance-lectura[hidden] { display: none; }
.avance-lectura__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(63, 125, 107, .28); box-shadow: inset 0 -3px 0 var(--verde); transition: width .15s linear; }
.avance-lectura.completo .avance-lectura__fill { background: rgba(149, 193, 31, .4); box-shadow: inset 0 -3px 0 var(--lima); }
.avance-lectura__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(920px, 100% - 24px); height: 100%; margin-inline: auto; }
.avance-lectura__txt { font: 700 .78rem/1 var(--texto); color: var(--tinta); }
.avance-lectura__fijar {
  pointer-events: auto; border: 1px solid var(--linea); border-radius: 999px; padding: 4px 10px;
  background: var(--campo); color: var(--verde-txt); font: 700 .72rem/1 var(--texto); cursor: pointer;
}
.avance-lectura__fijar[hidden] { display: none; }
html[data-tema="oscuro"] .avance-lectura { background: rgba(36, 33, 28, .92); }
@media print { .avance-lectura, .retomar { display: none !important; } }

.retomar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 12px;
  padding: 10px 34px 10px 12px; border-radius: 12px; background: var(--suave); border: 1px solid var(--linea);
  font-size: .85rem; font-weight: 600;
}
.retomar[hidden] { display: none; }
.retomar__txt { flex: 1 1 200px; }
.retomar .ctl { min-width: 0; padding: 8px 12px; font-size: .8rem; }
.retomar__x { position: absolute; top: 4px; right: 4px; border: 0; background: none; color: var(--gris); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
#lectura > .punto-lectura { position: relative; box-shadow: -6px 0 0 var(--lima); border-radius: 2px; }
#lectura > .punto-lectura::before {
  content: "📍 Vas por aquí"; display: block; margin-bottom: 4px;
  font: 700 .72rem/1.2 var(--texto); letter-spacing: .04em; color: var(--verde-txt);
}

/* =========================================================
   Pestaña "Resaltados" del panel (tabla de lo resaltado + nota de cada uno)
   ========================================================= */
.res-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.res-chip {
  display: inline-flex; align-items: center; gap: 5px; border: 2px solid var(--linea); background: var(--campo); color: var(--tinta);
  font: 700 .75rem/1 var(--texto); padding: 7px 10px; border-radius: 999px; cursor: pointer;
}
.res-chip.activo { border-color: var(--verde); background: var(--suave); }
.res-solo { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--gris); display: inline-flex; align-items: center; gap: 5px; }
.res-color { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); vertical-align: middle; }
.res-color--amarillo { background: #fff176; }
.res-color--verde { background: #b9f6ca; }
.res-color--azul { background: #b3e5fc; }
.res-color--rosa { background: #f8bbd0; }
.res-vacio { margin: 8px 0; font-size: .88rem; color: var(--gris); }
.res-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.res-tabla th { text-align: left; font: 700 .68rem/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 4px 6px 6px; border-bottom: 2px solid var(--linea); }
.res-tabla td { padding: 8px 6px 4px; vertical-align: top; }
.res-fila td { border-top: 1px solid var(--linea); }
.res-dia { white-space: nowrap; }
.res-dia small { display: block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; color: var(--gris); font-size: .72rem; }
.res-texto q { quotes: "«" "»"; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }
.res-ir { font-size: .78rem; }
.res-fila-nota td { padding: 0 6px 10px; }
.res-nota-lbl { display: block; margin-bottom: 3px; font-size: .72rem; font-weight: 700; color: var(--gris); }
.res-nota { width: 100%; box-sizing: border-box; min-height: 52px; resize: vertical; }
.res-fila-nota .campo-voz { flex: none; }
.res-fila-nota .campo-voz .res-nota { padding-bottom: 46px; }
.res-fila-nota .mic { width: 36px; height: 36px; right: 8px; bottom: 8px; font-size: 1rem; }
.res-fila-nota .mic-estado { left: 12px; bottom: 16px; }
@media (max-width: 420px) { .panel__tab { padding: 9px 11px; } }

/* =========================================================
   Bienvenida al entrar: saludo + dónde quedó, con la imagen de ese día de fondo
   ========================================================= */
.bienvenida {
  position: relative; display: flex; align-items: flex-end; overflow: hidden; margin: 14px 0 20px;
  min-height: min(520px, 78vh); border-radius: var(--radio); background: var(--marino); color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.bienvenida--sin-imagen { background: linear-gradient(135deg, var(--marino) 0%, var(--teal) 70%, var(--verde) 100%); }
.bienvenida__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bienvenida::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(44, 43, 41, .94) 0%, rgba(44, 43, 41, .72) 45%, rgba(44, 43, 41, .3) 100%);
}
.bienvenida__txt { position: relative; z-index: 1; width: 100%; padding: clamp(18px, 4vw, 36px); max-width: 720px; }
.bienvenida__sup { margin: 0 0 6px; font: 700 .72rem/1.2 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--lima); }
.bienvenida__titulo { margin: 0; font: 800 clamp(1.7rem, 6vw, 2.8rem)/1.1 var(--titulo); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.bienvenida__sub { margin: 8px 0 16px; font-size: 1rem; opacity: .95; }
.bienvenida__punto {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 600; line-height: 1.4;
}
.bienvenida__punto small { font-weight: 500; opacity: .9; }
.bienvenida__acc { display: flex; flex-wrap: wrap; gap: 10px; }
.bienvenida__btn {
  border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; min-height: 44px;
  background: var(--verde); color: #fff; font: 700 .95rem/1 var(--texto);
}
.bienvenida__btn:hover { filter: brightness(1.08); }
.bienvenida__btn--sec { background: rgba(255, 255, 255, .92); color: var(--marino); }
.bienvenida__btn:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
@media (max-width: 699px) { .bienvenida { min-height: min(440px, 74vh); } .bienvenida__btn { flex: 1 1 100%; } }
@media print { .bienvenida { display: none; } }

/* =========================================================
   Certificado al completar el ciclo e instalación en el celular
   ========================================================= */
.cert-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; padding: 12px 14px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(149, 193, 31, .28), rgba(63, 125, 107, .2));
  border: 1px solid var(--lima); font-size: .9rem;
}
.cert-aviso[hidden] { display: none; }
.cert-aviso__ico { font-size: 1.6rem; line-height: 1; }
.cert-aviso__txt { flex: 1 1 220px; }
@media print { .cert-aviso, .guia-instalar { display: none !important; } }

.guia-instalar { position: fixed; inset: 0; z-index: 210; background: rgba(8, 10, 16, .75); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.guia-instalar__caja { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--papel); color: var(--tinta); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.guia-instalar__caja h3 { margin: 0 0 8px; font: 800 1.2rem/1.2 var(--titulo); }
.guia-instalar__caja ol { padding-left: 1.2rem; line-height: 1.6; }