/* ============================================================
   polish.css — Estudio Vivo · Fase 8
   Micro-animaciones, texturas SVG por skin, mapa de capítulo,
   scrollbars premium y estado vacío
   ============================================================ */

/* ── 1. MICRO-ANIMACIONES AL CARGAR VERSÍCULOS ─────────────── */

@keyframes verse-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.verse.verse-visible {
  animation: verse-enter 0.35s ease both;
}

/* Delays escalonados (0–20, 30ms incremento) */
.verse.verse-visible:nth-child(1)  { animation-delay:   0ms; }
.verse.verse-visible:nth-child(2)  { animation-delay:  30ms; }
.verse.verse-visible:nth-child(3)  { animation-delay:  60ms; }
.verse.verse-visible:nth-child(4)  { animation-delay:  90ms; }
.verse.verse-visible:nth-child(5)  { animation-delay: 120ms; }
.verse.verse-visible:nth-child(6)  { animation-delay: 150ms; }
.verse.verse-visible:nth-child(7)  { animation-delay: 180ms; }
.verse.verse-visible:nth-child(8)  { animation-delay: 210ms; }
.verse.verse-visible:nth-child(9)  { animation-delay: 240ms; }
.verse.verse-visible:nth-child(10) { animation-delay: 270ms; }
.verse.verse-visible:nth-child(11) { animation-delay: 300ms; }
.verse.verse-visible:nth-child(12) { animation-delay: 330ms; }
.verse.verse-visible:nth-child(13) { animation-delay: 360ms; }
.verse.verse-visible:nth-child(14) { animation-delay: 390ms; }
.verse.verse-visible:nth-child(15) { animation-delay: 420ms; }
.verse.verse-visible:nth-child(16) { animation-delay: 450ms; }
.verse.verse-visible:nth-child(17) { animation-delay: 480ms; }
.verse.verse-visible:nth-child(18) { animation-delay: 510ms; }
.verse.verse-visible:nth-child(19) { animation-delay: 540ms; }
.verse.verse-visible:nth-child(20) { animation-delay: 570ms; }

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .verse.verse-visible {
    animation: none;
  }
}

/* ── 2. MICRO-ANIMACIONES EN BOTONES ────────────────────────── */

.mode-tab,
.btn-search,
.verse-action-btn,
.tablet-tool-btn {
  transform-origin: center;
}

.mode-tab:active,
.btn-search:active,
.verse-action-btn:active,
.tablet-tool-btn:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}

/* ── 3. SCROLLBARS PREMIUM ──────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--studio-accent, #d4a530) 35%, transparent)
    transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: color-mix(
    in srgb,
    var(--studio-accent, #d4a530) 35%,
    var(--studio-line, rgba(128, 128, 128, 0.3))
  );
  border-radius: 99px;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--studio-accent, #d4a530) 55%,
    var(--studio-line, rgba(128, 128, 128, 0.3))
  );
}

/* ── 4. ESTADO VACÍO DE #CONTENT ────────────────────────────── */

.content-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
  text-align: center;
  color: var(--studio-muted, rgba(128, 128, 128, 0.7));
}

.content-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.25;
}

.content-empty-title {
  font-family: var(--font-title, 'Playfair Display', serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--studio-ink, currentColor);
  margin-bottom: 8px;
  opacity: 0.6;
}

.content-empty-sub {
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 280px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

@keyframes empty-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content-empty-state {
  animation: empty-fade-in 0.4s ease both;
}

/* ── 5. MAPA DE CAPÍTULO #chapterMap ────────────────────────── */

#chapterMap {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#chapterMap.visible {
  opacity: 1;
  pointer-events: all;
}

/* Solo visible en ≥601px */
@media (max-width: 600px) {
  #chapterMap {
    display: none !important;
  }
}

/* ── Marcador individual ── */
.map-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--studio-line, rgba(128, 128, 128, 0.4));
  border: 1.5px solid var(--studio-panel, rgba(0, 0, 0, 0.1));
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.map-marker:hover {
  transform: scale(1.4);
}

.map-marker.has-note {
  background: var(--studio-accent, #d4a530);
}

.map-marker.has-highlight {
  background: color-mix(in srgb, #fbbf24 70%, var(--studio-accent, #d4a530));
}

.map-marker.current {
  width: 10px;
  height: 10px;
  background: var(--studio-accent, #d4a530);
  box-shadow: 0 0 0 2px color-mix(
    in srgb,
    var(--studio-accent, #d4a530) 30%,
    transparent
  );
  transform: scale(1.1);
}

/* ── Tooltip del marcador ── */
.map-marker-tooltip {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--studio-panel, rgba(20, 20, 20, 0.9));
  border: 1px solid var(--studio-line, rgba(128, 128, 128, 0.3));
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: var(--studio-shadow, 0 4px 16px rgba(0, 0, 0, 0.2));
  color: var(--studio-ink, currentColor);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 600;
  z-index: 10;
}

.map-marker:hover .map-marker-tooltip {
  opacity: 1;
}

/* ── 6. TEXTURAS SVG POR SKIN ───────────────────────────────── */

/* Base: .content necesita position relative para el ::before */
.content,
#content {
  position: relative;
}

/* El pseudo-elemento lleva la textura */
.content::before,
#content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.85; /* Dark mode — ya son SVGs con opacidad muy baja */
}

/* Los versículos deben estar sobre la textura */
.content .verse,
#content .verse {
  position: relative;
  z-index: 1;
}

/* El estado vacío también por encima */
.content .content-empty-state,
#content .content-empty-state {
  position: relative;
  z-index: 1;
}

/* En modo claro, textura más suave */
[data-theme="light"] .content::before,
[data-theme="light"] #content::before {
  opacity: 0.55;
}

/* ── scriptorium: pergamino, líneas diagonales ── */
[data-skin="scriptorium"] .content::before,
[data-skin="scriptorium"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='0' y1='20' x2='20' y2='0' stroke='%23c4a35a' stroke-width='0.4' opacity='0.18'/%3E%3Cline x1='-10' y1='20' x2='10' y2='0' stroke='%23c4a35a' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");
}

/* ── ocean: ondas suaves horizontales ── */
[data-skin="ocean"] .content::before,
[data-skin="ocean"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 5 Q15 2 30 5 Q45 8 60 5' fill='none' stroke='%2300a8cc' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
}

/* ── forest: puntos orgánicos ── */
[data-skin="forest"] .content::before,
[data-skin="forest"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='4' cy='4' r='1.2' fill='%2328a060' opacity='0.1'/%3E%3Ccircle cx='16' cy='14' r='0.8' fill='%2328a060' opacity='0.08'/%3E%3Ccircle cx='20' cy='4' r='0.6' fill='%2328a060' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── fire: líneas ascendentes irregulares ── */
[data-skin="fire"] .content::before,
[data-skin="fire"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 28 Q12 20 15 14 Q18 8 15 2' fill='none' stroke='%23ff6420' stroke-width='0.6' opacity='0.1'/%3E%3C/svg%3E");
}

/* ── lavanda: diamantes pequeños ── */
[data-skin="lavanda"] .content::before,
[data-skin="lavanda"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 2 L18 10 L10 18 L2 10 Z' fill='none' stroke='%238264dc' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

/* ── blossom: flores / pétalos ── */
[data-skin="blossom"] .content::before,
[data-skin="blossom"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='12' r='3' fill='none' stroke='%23e0608a' stroke-width='0.5' opacity='0.12'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23e0608a' opacity='0.1'/%3E%3Ccircle cx='4' cy='28' r='1.5' fill='none' stroke='%23e0608a' stroke-width='0.4' opacity='0.07'/%3E%3C/svg%3E");
}

/* ── sunset: rayos radiales suaves ── */
[data-skin="sunset"] .content::before,
[data-skin="sunset"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='20' y1='20' x2='40' y2='0' stroke='%23f06438' stroke-width='0.5' opacity='0.09'/%3E%3Cline x1='20' y1='20' x2='40' y2='40' stroke='%23f06438' stroke-width='0.5' opacity='0.07'/%3E%3Cline x1='20' y1='20' x2='0' y2='30' stroke='%23f06438' stroke-width='0.4' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── classic: herringbone / espiga ── */
[data-skin="classic"] .content::before,
[data-skin="classic"] #content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 0 L10 10 L20 0' fill='none' stroke='%23c59a3a' stroke-width='0.4' opacity='0.1'/%3E%3C/svg%3E");
}

/* ── 7. GLOW POR SKIN EN ACENTO ACTIVO ──────────────────────── */

[data-skin="fire"] .mode-tab.active,
[data-skin="fire"] .verse.selected {
  box-shadow: 0 0 12px color-mix(
    in srgb,
    var(--studio-accent, #ff6420) 30%,
    transparent
  );
}

[data-skin="ocean"] .mode-tab.active,
[data-skin="ocean"] .verse.selected {
  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--studio-accent, #00a8cc) 25%,
    transparent
  );
}

[data-skin="forest"] .mode-tab.active,
[data-skin="forest"] .verse.selected {
  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--studio-accent, #28a060) 25%,
    transparent
  );
}

[data-skin="blossom"] .mode-tab.active,
[data-skin="blossom"] .verse.selected {
  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--studio-accent, #e0608a) 28%,
    transparent
  );
}

[data-skin="lavanda"] .mode-tab.active,
[data-skin="lavanda"] .verse.selected {
  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--studio-accent, #8264dc) 28%,
    transparent
  );
}

[data-skin="sunset"] .mode-tab.active,
[data-skin="sunset"] .verse.selected {
  box-shadow: 0 0 12px color-mix(
    in srgb,
    var(--studio-accent, #f06438) 28%,
    transparent
  );
}

[data-skin="scriptorium"] .mode-tab.active,
[data-skin="scriptorium"] .verse.selected {
  box-shadow: 0 0 8px color-mix(
    in srgb,
    var(--studio-accent, #c4a35a) 30%,
    transparent
  );
}

[data-skin="classic"] .mode-tab.active,
[data-skin="classic"] .verse.selected {
  box-shadow: 0 0 8px color-mix(
    in srgb,
    var(--studio-accent, #c59a3a) 25%,
    transparent
  );
}

/* ── 8. ANIMACIÓN DE REFERENCIA ACTIVA #reference ───────────── */

@keyframes ref-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

#reference.loading {
  animation: ref-pulse 1.2s ease infinite;
}

/* ── 9. FOCUS RING ACCESIBLE ────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--studio-accent, #d4a530);
  outline-offset: 3px;
  border-radius: var(--studio-radius-md, 6px);
}

/* ── 10. MEJORAS DE SELECCIÓN DE TEXTO ──────────────────────── */

::selection {
  background: color-mix(
    in srgb,
    var(--studio-accent, #d4a530) 22%,
    transparent
  );
  color: inherit;
}