/* 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 ---------- */
#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);
}
#reader ::selection { background: rgba(99, 102, 241, .35); }

/* 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; }
}
.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; }