/* Estilos propios que complementan Tailwind */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Espacio para la barra inferior en celular */
@media (max-width: 767px) {
  body.con-nav-inferior { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}
.nav-inferior { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- Lector ---------- */
/* Barra superior del lector: fondo sólido y sombra sutil para separarla del texto */
.barra-lector { box-shadow: 0 1px 3px rgba(28, 25, 23, .06); }
.dark .barra-lector { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
/* Selector de modo de la barra: el activo en el color principal */
.modo-seg { color: #57534e; }
.modo-seg:hover { background: rgba(120, 113, 108, .12); }
.modo-seg.activo, .modo-seg.activo:hover { background: #4f46e5; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.dark .modo-seg { color: #a8a29e; }
.dark .modo-seg.activo { background: #6366f1; color: #fff; }
#menu-ajustes kbd { font: 600 .7rem ui-monospace, monospace; padding: 0 .3em; border: 1px solid currentColor; border-radius: 4px; }

/* Barra compacta: depende del ancho de la barra (no de la ventana), así también se adapta
   con el panel derecho abierto. Quedan: volver, modo (solo íconos), Traducir (N), ajustes y Preguntar (ícono). */
.barra-lector { container-type: inline-size; }
.solo-compacto { display: none; }
@container (max-width: 559px) {
  .barra-lector .seg-txt, .barra-lector .solo-ancho { display: none !important; }
  .barra-lector .solo-compacto { display: flex; }
}
@container (min-width: 560px) {
  .barra-lector .preguntar-ancho { padding-left: .75rem; padding-right: .75rem; }
}
@container (max-width: 340px) {
  .barra-lector #titulo { display: none; }
  .barra-lector [role="tablist"] { margin-left: auto; } /* sin título: los controles van a la derecha */
}

/* En el lector los avisos salen debajo de la barra, para no tapar sus botones */
body:has(#barra-lector) #toasts { top: 3.75rem; }

/* Al ir a una palabra no queda debajo de la barra (48px) */
#reader .w, #reader mark.hl { scroll-margin-top: 4.5rem; }

#reader {
  line-height: 1.85;
  hyphens: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#reader p { margin: 0 0 1.15em; }
#reader .w { cursor: pointer; border-radius: 3px; }
@media (hover: hover) {
  #reader .w:hover { background: rgba(99, 102, 241, .12); }
}
#reader .w.w-activa { background: rgba(99, 102, 241, .28); }

#reader mark.hl {
  background: rgba(250, 204, 21, .28);
  color: inherit;
  border-radius: 3px;
  box-shadow: 0 1.5px 0 rgba(202, 138, 4, .55);
  padding: 0 1px;
  cursor: pointer;
}
.dark #reader mark.hl {
  background: rgba(250, 204, 21, .16);
  box-shadow: 0 1.5px 0 rgba(250, 204, 21, .45);
}
/* Palabra consultada: subrayado marcado (se distingue aunque esté dentro de una frase amarilla) */
#reader .w.w-consultada {
  text-decoration: underline;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(79, 70, 229, .85);
  text-decoration-skip-ink: none;
}
.dark #reader .w.w-consultada { text-decoration-color: rgba(165, 180, 252, .9); }
/* Palabra del diccionario del texto: punteado verde (independiente del subrayado índigo y del amarillo) */
#reader .w.w-dicc {
  border-bottom: 2px dotted #16a34a;
  border-radius: 0;
}
.dark #reader .w.w-dicc { border-bottom-color: #4ade80; }
#reader .w.w-dicc-pend { border-bottom-color: rgba(22, 163, 74, .5); }

/* Modo "Marcar palabras": cursor y hover verdes */
#reader.modo-marcar .w { cursor: copy; }
@media (hover: hover) {
  #reader.modo-marcar .w:hover { background: rgba(22, 163, 74, .14); }
}

/* Traducción sobre la palabra (interlineal). No cambia el ancho del texto. */
#reader.con-ruby { line-height: 2.45; }
#reader.con-ruby .w-dicc[data-tr] { position: relative; }
#reader.con-ruby .w-dicc[data-tr]::after {
  content: attr(data-tr);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: -.1em;
  font: 500 .5em/1 ui-sans-serif, system-ui, sans-serif;
  color: #15803d;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.dark #reader.con-ruby .w-dicc[data-tr]::after { color: #86efac; }

/* Iluminar la palabra al ir desde el diccionario */
@keyframes destello { 0%, 60% { background: rgba(22, 163, 74, .45); } 100% { background: transparent; } }
#reader .w.w-destello { animation: destello 1.2s ease-out; }

/* Selector de modo y pestañas del panel */
.modo-btn { color: #57534e; }
.modo-btn.activo { background: #fff; color: #1c1917; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.dark .modo-btn { color: #a8a29e; }
.dark .modo-btn.activo { background: #44403c; color: #fafaf9; }
.panel-tab { color: #78716c; font-weight: 500; }
.panel-tab:hover { background: rgba(120, 113, 108, .1); }
.panel-tab.activo { color: #1c1917; background: rgba(120, 113, 108, .14); font-weight: 600; }
.dark .panel-tab { color: #a8a29e; }
.dark .panel-tab.activo { color: #fafaf9; background: rgba(168, 162, 158, .16); }

/* Celular: el diccionario es un panel inferior bajo (~42%) que deja leer; se puede agrandar */
@media (max-width: 767px) {
  .panel.panel-bajo { height: 42vh; max-height: 42vh; }
  .panel.panel-bajo.expandido { height: 80vh; max-height: 80vh; }
  .panel.expandido #panel-expandir svg { transform: rotate(180deg); }
  body.dicc-abajo main { padding-bottom: 45vh; }
}
#reader ::selection { background: rgba(99, 102, 241, .35); }

/* Oración que se está leyendo en voz alta (CSS Custom Highlight; si el navegador no lo soporta, no se ve) */
::highlight(lectura) { background-color: rgba(14, 165, 233, .22); }
.dark ::highlight(lectura) { background-color: rgba(56, 189, 248, .22); }

/* Barra flotante de selección */
#sel-bar { transition: opacity .12s ease; }
#sel-bar.oculta { opacity: 0; pointer-events: none; }

/* ---------- Panel de explicación: abajo en celular, a la derecha en escritorio ---------- */
.panel {
  transition: transform .25s ease;
  transform: translateY(105%);
}
.panel.abierto { transform: translateY(0); }
@media (min-width: 768px) {
  .panel { transform: translateX(105%); }
  .panel.abierto { transform: translateX(0); }
  body.panel-abierto .lector-wrap { margin-right: 420px; }
  /* Arranca debajo del header y sube con él al hacer scroll (leer.js actualiza --panel-top) */
  #panel { top: var(--panel-top, 3.5rem); }
}
.lector-wrap { transition: margin-right .25s ease; }

/* Spinner */
.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: girar .7s linear infinite;
  display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Tarjetas de repaso */
.flip-in { animation: aparecer .2s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Texto de respuestas de la IA */
.respuesta-ia p + p { margin-top: .6em; }
.respuesta-ia ul { list-style: disc; padding-left: 1.25rem; margin: .4em 0; }

/* Toasts */
#toasts > div { animation: aparecer .2s ease; }

/* Scroll del panel en iOS */
.scroll-suave { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }