/* Estilos del Módulo de Guión Interactivo (Capa 1) */

/* Contenedor del visor */
#guion-viewer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#guion-content {
  width: 100%;
}

/* Agrupador de escena */
.guion-scene {
  margin: 1.5rem 0;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: rgba(30, 41, 59, 0.2); /* bg-slate-800/20 */
  border: 1px solid rgba(148, 163, 184, 0.05); /* border-slate-400/5 */
  transition: all 0.2s ease-in-out;
}

.guion-scene:hover {
  background-color: rgba(30, 41, 59, 0.4);
  border-color: rgba(148, 163, 184, 0.1);
}

/* Encabezados de escena (Sluglines) */
.guion-slugline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem 0;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  border-left-width: 4px;
}

/* Códigos de color de sluglines (INT/EXT + DÍA/NOCHE) */
/* INT / DÍA: Blanco */
.slugline-int-dia {
  background-color: rgba(248, 250, 252, 0.08); /* slate-50/8% */
  border-left-color: #f8fafc; /* slate-50 */
  color: #f1f5f9; /* slate-100 */
}

/* INT / NOCHE: Azul */
.slugline-int-noche {
  background-color: rgba(59, 130, 246, 0.1); /* blue-500/10% */
  border-left-color: #3b82f6; /* blue-500 */
  color: #93c5fd; /* blue-300 */
}

/* EXT / DÍA: Amarillo */
.slugline-ext-dia {
  background-color: rgba(245, 158, 11, 0.1); /* amber-500/10% */
  border-left-color: #f59e0b; /* amber-500 */
  color: #fde047; /* yellow-300 */
}

/* EXT / NOCHE: Verde */
.slugline-ext-noche {
  background-color: rgba(16, 185, 129, 0.1); /* emerald-500/10% */
  border-left-color: #10b981; /* emerald-500 */
  color: #6ee7b7; /* emerald-300 */
}

/* Inferencias de WGA */
.slugline-inferred {
  border-style: dashed !important;
  border-width: 1px 1px 1px 4px !important;
  border-color: rgba(239, 68, 68, 0.5) rgba(239, 68, 68, 0.3) rgba(239, 68, 68, 0.3) rgba(239, 68, 68, 0.8) !important; /* red-500 tones */
  background-color: rgba(239, 68, 68, 0.05) !important;
}

.inferred-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 9px;
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5; /* red-300 */
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}

/* Bifurcaciones A/B y ramificaciones */
.alternative-branch-container {
  border-left: 2px dashed rgba(99, 102, 241, 0.4); /* indigo-500/40% */
  margin: 1.5rem 0;
  padding-left: 1rem;
  background-color: rgba(99, 102, 241, 0.02);
  border-radius: 0 0.5rem 0.5rem 0;
}

.branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 9px;
  font-family: monospace;
  background-color: rgba(99, 102, 241, 0.2);
  color: #c7d2fe; /* indigo-200 */
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Elementos estándar del guión (Screenplay View) */
.block-title {
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.875rem; /* text-sm */
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.block-chapter {
  text-align: center;
  color: #818cf8; /* indigo-400 */
  font-weight: 900;
  font-size: 0.75rem; /* text-xs */
  letter-spacing: 0.1em;
  margin: 1.5rem 0;
  text-transform: uppercase;
}

.block-character {
  text-align: center;
  color: #fbbf24; /* amber-400 */
  font-weight: 700;
  font-size: 0.75rem; /* text-xs */
  letter-spacing: 0.1em;
  margin-top: 0.75rem;
  margin-bottom: 0.125rem;
  text-transform: uppercase;
}

.block-dialogue {
  text-align: center;
  color: #7dd3fc; /* sky-300 */
  font-size: 0.75rem; /* text-xs */
  line-height: 1.625;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 0.125rem;
}

.block-parenthetical {
  text-align: center;
  color: #64748b; /* slate-500 */
  font-style: italic;
  font-size: 0.75rem; /* text-xs */
  padding-left: 3rem;
  padding-right: 3rem;
  margin-bottom: 0.125rem;
}

.block-transition {
  text-align: right;
  color: #64748b; /* slate-500 */
  font-style: italic;
  font-size: 0.75rem; /* text-xs */
  margin: 0.5rem 0;
  padding-right: 0.5rem;
  text-transform: uppercase;
}

.block-action {
  color: #94a3b8; /* slate-400 */
  font-size: 0.75rem; /* text-xs */
  line-height: 1.625;
  margin: 0.125rem 0;
}

.block-empty {
  height: 0.5rem;
}

/* AV Script styling overrides/additions */
.av-production-note {
  font-size: 10px;
  color: #f87171; /* rose-400 */
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.25rem;
  background-color: rgba(248, 113, 113, 0.05);
  border-radius: 0.25rem;
}

.av-gfx-cierre {
  font-size: 10px;
  color: #34d399; /* emerald-400 */
  font-weight: 700;
  margin-top: 0.25rem;
  padding: 0.25rem;
}

.av-header-custom {
  font-size: 10px;
  color: #fbbf24; /* amber-400 */
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

/* ============================================================
   MODO CLARO — Overrides para #guion-viewer.guion-theme-light
   Pisan los colores oscuros hardcodeados del CSS base.
   El modo oscuro no se toca — sigue funcionando igual.
   ============================================================ */

/* Fondo y borde de las cards de escena */
#guion-viewer.guion-theme-light .guion-scene {
  background-color: #f8fafc !important; /* slate-50 — gris muy suave */
  border-color: #e2e8f0 !important; /* slate-200 */
}

#guion-viewer.guion-theme-light .guion-scene:hover {
  background-color: #f1f5f9 !important; /* slate-100 */
}

/* Sluglines — todos los tipos: fondo limpio, texto negro, borde izquierdo */
#guion-viewer.guion-theme-light .guion-slugline {
  background-color: #f1f5f9 !important; /* slate-100 */
  color: #0f172a !important; /* slate-900 */
}

#guion-viewer.guion-theme-light .slugline-int-dia {
  background-color: #f1f5f9 !important;
  border-left-color: #475569 !important; /* slate-600 */
  color: #0f172a !important;
}

#guion-viewer.guion-theme-light .slugline-int-noche {
  background-color: #eff6ff !important; /* blue-50 */
  border-left-color: #3b82f6 !important;
  color: #1e3a5f !important;
}

#guion-viewer.guion-theme-light .slugline-ext-dia {
  background-color: #fffbeb !important; /* amber-50 */
  border-left-color: #d97706 !important;
  color: #78350f !important;
}

#guion-viewer.guion-theme-light .slugline-ext-noche {
  background-color: #f0fdf4 !important; /* green-50 */
  border-left-color: #059669 !important;
  color: #064e3b !important;
}

/* Título */
#guion-viewer.guion-theme-light .block-title {
  color: #0f172a !important;
}

/* Capítulo */
#guion-viewer.guion-theme-light .block-chapter {
  color: #4338ca !important; /* indigo-700 */
}

/* Personaje */
#guion-viewer.guion-theme-light .block-character {
  color: #6d28d9 !important; /* purple-700 */
}

/* Diálogo */
#guion-viewer.guion-theme-light .block-dialogue {
  color: #0f172a !important;
}

/* Acción */
#guion-viewer.guion-theme-light .block-action {
  color: #1e293b !important; /* slate-800 */
}

/* Acotación */
#guion-viewer.guion-theme-light .block-parenthetical {
  color: #64748b !important; /* slate-500 */
}

/* Transición */
#guion-viewer.guion-theme-light .block-transition {
  color: #94a3b8 !important; /* slate-400 */
}

/* Ramas alternativas */
#guion-viewer.guion-theme-light .alternative-branch-container {
  border-left-color: rgba(99, 102, 241, 0.3) !important;
  background-color: rgba(99, 102, 241, 0.02) !important;
}

#guion-viewer.guion-theme-light .branch-badge {
  background-color: rgba(99, 102, 241, 0.1) !important;
  color: #4338ca !important;
}