<!--
========================================================================
SISTEMA:   Master Breakdown & Plan de Rodaje Interactivo
PROYECTO:  "Apasionada del Padre de mi Hijo, que no es mi Esposo"
PARA:      Enrique Arango — 1st AD & Line Producer Operativo
AUTOR:     Andrés Jaramillo / Built with Claude (Anthropic)
LICENCIA:  Uso Comercial Exclusivo de Producción (CC BY-NC-ND 4.0)

VERSIÓN:   v10.12
FECHA:     25 de mayo de 2026

CAMBIOS v10.12 (sobre v10.11):
  · NUEVO: Sistema de carpetas (crear, renombrar, eliminar, navegar)
  · NUEVO: Drag & drop entre carpetas y al home
  · NUEVO: Menú contextual en carpetas
  · FIX-09: Doble-click para abrir carpetas (single-click selecciona)
  · FIX-10: Cache bust v10.12 para forzar recarga de JS

CAMBIOS v10.11 (sobre v10.10):
  · FIX-01: Fuga de setInterval en initCloud()
  · FIX-02: Merge seguro de metadata al importar proyectos
  · FIX-03: selectedFrameIds se limpia tras recalcular IDs
  · FIX-04: XSS en renderUserList() — escapeHTML en emails
  · FIX-05: renderProjectSettings() ejecutado con datos reales del servidor
  · FIX-06: API_URL eliminada de Auth (usa scope externo)
  · FIX-07: Guard null/undefined en scene.characters
  · FIX-08: Dead code ieColor eliminado
  · FIX-09: Listener zombi en NotesSystem — AbortController
  · FIX-10: resetProjectSettings usa DEFAULT_PROJECT.metadata
  · FIX-11: Backoff exponencial en pollServer (suspende tras 5 fallos)
  · OPT-01: createElement en lugar de innerHTML+= en populateFilters
  · OPT-02: Selección de frame individual sin re-render completo
  · OPT-03: clearBatchSelection sin re-render completo

------------------------------------------------------------------------
DESCRIPCIÓN GENERAL
------------------------------------------------------------------------
Aplicación HTML de archivo único (single-file) para la gestión integral
de producción de una serie vertical. No requiere servidor para funcionar
— toda la persistencia es local vía localStorage. Opcionalmente sincroniza
con un servidor via api.php en el mismo directorio.

Módulos principales:
  · Dashboard        — métricas de producción en tiempo real
  · Master Breakdown — tabla detallada de escenas con filtros
  · Stripboard       — tablero kanban / tabla de tiras de producción
  · Plan de Rodaje   — cronograma por jornada de rodaje
  · Shooting Board   — storyboard con soporte multi-formato de aspecto
  · Manual & Glosario — documentación interna de la app

Claves de localStorage (NO renombrar — rompe datos en producción):
  SK.frames    → Array de planos del Shooting Board
  SK.settings     → Configuración de impresión/visualización
  SK.scenes             → Overrides de metadata de escenas
  SK.meta   → Título, versión y config del proyecto

------------------------------------------------------------------------
CHANGELOG
------------------------------------------------------------------------
v2.3.1  Bugfixes: inicialización síncrona de shootingFrames,
        copia profunda de scenes en activeProject, compatibilidad
        de localStorage hacia atrás (migración desde v2.1.x).

v2.3.2  Bugfix: changeSceneDay() no persistía en localStorage.
        Se añadió setItem(SK.scenes) al flujo de guardado.

v2.3.3  Feature: Shooting Board multi-formato. Soporte para aspect
        ratios 9:16, 16:9, 1:1, 4:3 y 2.39:1 por proyecto y por plano.
        Placeholder con ícono cámara + label del formato activo.
        object-contain + fondo negro para letterbox/pillarbox automático.

v2.4.0  Refactor Fase 2: 68 funciones agrupadas en 9 módulos lógicos
        (history, data-init, storage, ui, render, frames, data,
        dragdrop, batch) mediante delimitadores de comentario.

v2.5.0  Refactor Fase 3: estilos separados en #app-styles y
        #print-styles (con las 5 clases de aspect ratio para PDF).
        39 onclick="" estáticos migrados a addEventListener en
        DOMContentLoaded. Versión en header HTML sincronizada.

v2.6.0  Refactor Fase 4: consolidación de lógica duplicada.
        · commitChange(opts) — reemplaza el trío recurrente
          recalculate + saveFramesToStorage + renderShootingBoard
          en 11 puntos del código.
        · saveScenes() — punto único de persistencia de escenas
          y metadata del proyecto en localStorage.
        · _batchGuard() — extrae el boilerplate compartido de las
          5 operaciones en lote (guard + saveStateToHistory).
v2.7.0  Refactor Fase 5: documentación. JSDoc en 9 funciones clave
        (commitChange, saveScenes, saveFramesToStorage, pollServer,
        switchTab, renderShootingBoard, getFrameCardHTML,
        recalculateShotIDsAndScenes, changeSceneDay, showToast,
        exportProject, importProject, initCloud).
        Encabezado expandido con descripción general, claves de
        localStorage y CHANGELOG completo desde v2.3.1.
========================================================================
-->

<!DOCTYPE html>
<html lang="es" class="h-full bg-slate-950">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Master Breakdown & Plan de Rodaje - Sistema Multi-Guión</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <link rel="stylesheet" href="src/css/app-styles.css?v=10.17">
  <link rel="stylesheet" href="src/css/script-editor.css?v=10.17">

  <!-- ============================================================
       ESTILOS GENERALES DE LA APLICACIÓN
       ============================================================ -->
  <style id="app-styles">
    .pm-drag-over { outline: 2px solid #6366f1 !important; background: rgba(99,102,241,0.1) !important; }
    .pm-dragging { opacity: 0.4 !important; }

    body {
      font-family: 'Inter', sans-serif;
    }

    /* ── Material Symbols config ── */
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      line-height: 1;
      display: inline-block;
      vertical-align: middle;
      user-select: none;
    }

    /* ── SideNavBar ── */
    #side-nav {
      width: 240px;
      min-width: 240px;
      background: #080b12;
      border-right: 1px solid #1e2330;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 40;
      overflow: hidden;
    }

    /* Header del sidebar: nombre de proyecto activo */
    #side-nav .nav-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px 14px;
      border-bottom: 1px solid #1e2330;
      flex-shrink: 0;
    }

    #side-nav .nav-project-title {
      font-size: 19px; /* Increased for maximum readability */
      font-weight: 700;
      color: #ffffff; /* White text */
      letter-spacing: -0.015em;
      line-height: 1.3;
      text-align: left;
    }

    /* Items de navegación */
    #side-nav .nav-body {
      flex: 1;
      padding: 8px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }

    #side-nav .nav-item {
      width: 100%;
      height: 36px;
      border-radius: 7px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 9px;
      padding: 0 10px;
      cursor: pointer;
      color: #e2e8f0; /* White/slate-200 text */
      border: none;
      background: transparent;
      transition: background 0.12s, color 0.12s;
      position: relative;
      text-align: left;
      white-space: nowrap;
    }

    #side-nav .nav-item:hover {
      background: #1e1b4b; /* Dark indigo hover */
      color: #ffffff;
    }

    #side-nav .nav-item.active {
      background: rgba(99, 102, 241, 0.12); /* Indigo active background */
      color: #a5b4fc; /* Indigo active text */
    }

    #side-nav .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 18px;
      background: #6366f1; /* Indigo indicator */
      border-radius: 0 2px 2px 0;
    }

    #side-nav .nav-item .nav-label {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #side-nav .nav-item .material-symbols-outlined {
      font-size: 18px;
      flex-shrink: 0;
    }

    #side-nav .nav-divider {
      height: 1px;
      background: #1e2330;
      margin: 4px 8px;
      flex-shrink: 0;
    }

    #side-nav .nav-section-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #475569;
      padding: 4px 10px 2px;
    }

    #side-nav .nav-footer {
      padding: 8px;
      border-top: 1px solid #1e2330;
      flex-shrink: 0;
    }

    /* ── TopBar ── */
    #top-nav {
      height: 52px;
      background: #080b12;
      border-bottom: 1px solid #1e2330;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      flex-shrink: 0;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 30;
    }

    /* ── App shell con sidebar ── */
    #app-shell {
      margin-left: 240px;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
    }

    /* Efecto de Hoja Carta (Letter) para previsualización digital */
    .letter-sheet {
      background: #0f172a;
      border: 1px solid #334155;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    /* Scrollbars personalizadas para un look premium oscuro */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #0f172a;
    }

    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #475569;
    }

    /* Encabezados sticky de módulos — primer hijo directo de cada sección */
    #pane-breakdown > div:first-child,
    #pane-stripboard > div:first-child,
    #pane-schedule > div:first-child,
    #pane-shootingboard > div:first-child,
    #pane-glossary > div:first-child {
      position: sticky;
      top: -24px; /* compensa el padding del main (p-6 = 24px) */
      z-index: 10;
      background-color: #080b12;
      padding-top: 8px;
      margin-top: -8px;
    }

    /* Inspector global — transición suave */
    #global-inspector {
      transition: width 0.2s ease, opacity 0.2s ease;
    }

    /* ================================================================
       AUTENTICACIÓN — Login Overlay & Role Restrictions
       ================================================================ */

    /* Overlay de login: cubre toda la pantalla */
    #login-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: radial-gradient(ellipse at 60% 30%, rgba(79,70,229,0.18) 0%, transparent 70%),
                  radial-gradient(ellipse at 20% 80%, rgba(99,102,241,0.10) 0%, transparent 60%),
                  #020617;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #login-overlay.hidden { display: none; }

    /* Animación de entrada del card de login */
    @keyframes loginCardIn {
      from { opacity: 0; transform: translateY(24px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)   scale(1);    }
    }
    #login-card {
      animation: loginCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Pulso suave del logo en el login */
    @keyframes logoPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
      50%       { box-shadow: 0 0 0 12px rgba(99,102,241,0); }
    }
    #login-logo { animation: logoPulse 2.5s ease-in-out infinite; }

    /* Banner offline: barra roja fija arriba */
    #offline-banner {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9998;
      background: #7f1d1d;
      border-bottom: 1px solid #991b1b;
      color: #fca5a5;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      padding: 6px 16px;
      letter-spacing: 0.03em;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }
    #offline-banner.visible { transform: translateY(0); }

    /* Banner de re-autenticación: barra amarilla fija arriba */
    #reauth-banner {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9998;
      background: #78350f;
      border-bottom: 1px solid #92400e;
      color: #fde68a;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      padding: 6px 16px;
      letter-spacing: 0.03em;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }
    #reauth-banner.visible { transform: translateY(0); }

    /* ── Rol read-only: ocultar controles de edición ── */
    /* Botones de edición/eliminación en tarjetas de planos */
    body.role-readonly .actionsOverlay-edit-btn,
    body.role-readonly .actionsOverlay-delete-btn { display: none !important; }

    /* Drag handle de tarjetas */
    body.role-readonly [title="Arrastra desde aquí para reordenar"] { display: none !important; }
    body.role-readonly [draggable="true"] { pointer-events: none !important; cursor: default !important; }

    /* Botones de acción en toolbar y header */
    body.role-readonly #btn-add-shot,
    body.role-readonly #btn-undo,
    body.role-readonly #btn-redo,
    body.role-readonly #btn-batch-delete,
    body.role-readonly #btn-batch-move,
    body.role-readonly #btn-batch-scene,
    body.role-readonly #btn-batch-tag,
    body.role-readonly #btn-batch-clone,
    body.role-readonly #btn-import-json,
    body.role-readonly #btn-paste-guion,
    body.role-readonly #btn-formatear-ia,
    body.role-readonly #btn-desglose-ia,
    body.role-readonly #btn-desglose-reglas,
    body.role-readonly #btn-sync-breakdown,
    body.role-readonly #btn-clear-guion,
    body.role-readonly label[for="guion-file-input"] { display: none !important; }

    /* Botón Nuevo en header */
    body.role-readonly button[onclick="resetearProyecto()"] { display: none !important; }

    /* Inspector: campos del proyecto no editables */
    body.role-readonly #insp-content-proyecto input,
    body.role-readonly #insp-content-proyecto textarea,
    body.role-readonly #insp-content-proyecto select,
    body.role-readonly #insp-content-proyecto button:not(#btn-close-inspector) {
      pointer-events: none !important;
      opacity: 0.5 !important;
    }

    /* Opciones peligrosas del menú */
    body.role-readonly .danger-zone-option { display: none !important; }

    #global-inspector .insp-tab-active {
      background-color: rgba(79, 70, 229, 0.3);
      color: #a5b4fc;
      border-color: rgba(99, 102, 241, 0.4);
    }

    #global-inspector .insp-tab-inactive {
      color: #94a3b8;
    }

    #global-inspector .insp-tab-inactive:hover {
      color: #e2e8f0;
      background-color: #1e293b;
    }

    /* Encabezados sticky de las columnas del módulo Guión */
    #guion-col-header,
    #desglose-col-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: #0f172a; /* slate-900 */
    }
    /* Tab activo del visor de guión (Screenplay / AV Script) */
    #btn-vista-screenplay.active, #btn-vista-avscript.active {
      border-color: #6366f1 !important;
      color: #a5b4fc !important;
      background-color: #0f172a;
    }
  </style>

  <!-- ============================================================
       ESTILOS DE IMPRESIÓN Y PDF
       Reglas estrictas para fondo blanco al imprimir/exportar PDF.
       ⚠️  No mezclar con estilos generales — estas reglas usan
           !important extensivamente para forzar colores sobre
           Tailwind y los estilos oscuros de la app.
       El tamaño y orientación de @page se sobreescribe
       dinámicamente en applyPrintConfig() via #dynamic-print-style.
       ============================================================ -->
  <style id="print-styles">
    @media print {
      @page {
        size: letter portrait;
        margin: 10mm 10mm 10mm 10mm;
      }

      html,
      body {
        background: #ffffff !important;
        color: #000000 !important;
        height: auto !important;
        overflow: visible !important;
      }

      header,
      nav,
      #toast-container,
      .bg-slate-900,
      .bg-slate-800\/50,
      .no-print,
      #global-inspector {
        display: none !important;
      }

      main {
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
      }

      section {
        display: none !important;
      }

      #pane-shootingboard {
        display: block !important;
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
      }

      .print-page-break {
        page-break-after: always !important;
        break-after: page !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
      }

      .print-grid {
        display: grid !important;
        background: #ffffff !important;
        gap: 8mm !important;
      }

      .print-grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      .print-grid.grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      .print-page-break .shot-card-print {
        background: #ffffff !important;
        border: 0.5px solid #94a3b8 !important;
        color: #000000 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      /* Aspect ratios en impresión — uno por cada formato soportado */
      .print-page-break .aspect-ratio-9-16-print {
        background: #f8fafc !important;
        border-bottom: 0.5px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .print-page-break .aspect-ratio-16-9-print {
        background: #f8fafc !important;
        border-bottom: 0.5px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .print-page-break .aspect-ratio-1-1-print {
        background: #f8fafc !important;
        border-bottom: 0.5px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .print-page-break .aspect-ratio-4-3-print {
        background: #f8fafc !important;
        border-bottom: 0.5px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .print-page-break .aspect-ratio-scope-print {
        background: #f8fafc !important;
        border-bottom: 0.5px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .badge-print-indigo {
        background: #e0e7ff !important;
        color: #4338ca !important;
        border: 1px solid #c7d2fe !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .badge-print-slate {
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }

    /* Garantizar que los modales y overlays con la clase 'hidden' estén realmente ocultos */
    #pm-overlay.hidden,
    #pm-create-panel.hidden,
    #users-modal.hidden,
    #login-overlay.hidden,
    #rate-limit-banner.hidden {
      display: none !important;
    }

    /* Garantizar que los modales y overlays principales se posicionen
       y visualicen correctamente sin importar las clases de Tailwind cargadas */
    #pm-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 80 !important;
      background: #1a1a1a !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #pm-create-panel {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 90 !important;
      background: rgba(0,0,0,0.7) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    #users-modal {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 9000 !important;
      background: rgba(0,0,0,0.7) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 1rem !important;
    }
    #login-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 9999 !important;
      background: radial-gradient(ellipse at 60% 30%, rgba(79,70,229,0.18) 0%, transparent 70%),
                  radial-gradient(ellipse at 20% 80%, rgba(99,102,241,0.10) 0%, transparent 60%),
                  #020617 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
  </style>

  <!-- Tag dinámico: applyPrintConfig() sobreescribe @page orientation aquí -->
  <style id="dynamic-print-style"></style>

</head>

<body class="h-full text-slate-100 antialiased" style="background:#080b12">

  <!-- Banners de Estado Offline-First -->
  <div id="offline-banner" style="left: 240px;">
    ⚠️ TRABAJANDO SIN CONEXIÓN – Los cambios se guardarán localmente
  </div>
  <div id="reauth-banner" style="left: 240px;">
    ⚠️ SESIÓN EXPIRADA – <button onclick="Auth.showLoginOverlay('Inicia sesión para sincronizar tus cambios con la nube.', true)" class="underline font-bold hover:text-white transition-colors">Inicia sesión para sincronizar</button>
  </div>

  <!-- ============================================================
       SIDE NAV BAR — navegación vertical fija izquierda
       ============================================================ -->
  <aside id="side-nav" class="no-print">

    <!-- Header: Nombre del proyecto activo -->
    <div class="nav-header">
      <div class="nav-project-title" id="sidebar-project-name" style="width: 100%; white-space: normal; line-height: 1.3;">&ldquo;Cargando...&rdquo;</div>
    </div>

    <!-- Nav body -->
    <div class="nav-body">

      <button id="tab-proyectos" class="nav-item" title="Proyectos">
        <span class="material-symbols-outlined">folder_open</span>
        <span class="nav-label">Proyectos</span>
      </button>

      <button id="tab-guion" class="nav-item active" title="Guión">
        <span class="material-symbols-outlined">description</span>
        <span class="nav-label">Guión</span>
        <span id="ollama-status-dot" style="position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:#475569;" title="Verificando Ollama..."></span>
      </button>

      <button id="tab-dashboard" class="nav-item" title="Panel de Producción">
        <span class="material-symbols-outlined">dashboard</span>
        <span class="nav-label">Panel de Producción</span>
      </button>

      <button id="tab-breakdown" class="nav-item" title="Master Breakdown">
        <span class="material-symbols-outlined">format_list_bulleted</span>
        <span class="nav-label">Master Breakdown</span>
      </button>

      <button id="tab-stripboard" class="nav-item" title="Stripboard">
        <span class="material-symbols-outlined">view_column</span>
        <span class="nav-label">Stripboard</span>
      </button>

      <button id="tab-schedule" class="nav-item" title="Plan Horario">
        <span class="material-symbols-outlined">today</span>
        <span class="nav-label">Plan Horario</span>
      </button>

      <button id="tab-shootingboard" class="nav-item" title="Shooting Board">
        <span class="material-symbols-outlined">movie</span>
        <span class="nav-label">Shooting Board (<span id="tab-aspect-label">16:9</span>)</span>
      </button>

      <button id="tab-references" class="nav-item" title="Referencias">
        <span class="material-symbols-outlined">collections</span>
        <span class="nav-label">Referencias</span>
      </button>

      <button id="tab-glossary" class="nav-item" title="Manual &amp; Glosario">
        <span class="material-symbols-outlined">menu_book</span>
        <span class="nav-label">Manual &amp; Glosario</span>
      </button>

    </div>

    <!-- Footer del sidebar -->
    <div class="nav-footer">
      <button id="btn-toggle-inspector" class="nav-item" title="Abrir/Cerrar Inspector">
        <span class="material-symbols-outlined">right_panel_open</span>
        <span class="nav-label">Inspector</span>
      </button>
    </div>

  </aside>

  <!-- ============================================================
       APP SHELL — todo lo que está a la derecha del sidebar
       ============================================================ -->
  <div id="app-shell">

    <!-- TOP NAV BAR: nombre de la app + acciones globales -->
    <header id="top-nav" class="no-print">
      <!-- Izquierda: todo en una sola línea -->
      <div style="display:flex;align-items:center;gap:10px;min-width:0">
        <div style="width: 28px; height: 28px; min-width: 28px; background: linear-gradient(135deg, #6366f1, #4f46e5); border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(99,102,241,0.35);">
          <svg xmlns="http://www.w3.org/2000/svg" style="width:16px; height:16px; color:white;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4"/>
          </svg>
        </div>
        <span style="font-size:19px;font-weight:900;color:#ffffff;letter-spacing:-0.015em;white-space:nowrap">Master Breakdown</span>
        <span style="font-size:9px;font-weight:600;color:#818cf8;font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;margin-left:4px;white-space:nowrap">v10.12 • Production</span>
        <span style="color:#1e2330;font-size:14px;line-height:1">|</span>
        <span id="sync-status" style="font-size:10px;color:#34d399;font-family:'JetBrains Mono',monospace;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap">
          <span style="width:5px;height:5px;border-radius:50%;background:#10b981;display:inline-block;flex-shrink:0"></span>Nube Activa
        </span>
      </div>

      <!-- Derecha: acciones -->
      <div class="flex items-center gap-1.5 shrink-0">
        <input type="file" id="import-json-file" accept=".json" class="hidden">

        <button id="btn-import-json"
          class="flex items-center gap-1.5 px-2.5 py-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors text-xs border border-transparent hover:border-slate-700"
          title="Cargar Proyecto (.json) desde disco">
          <span class="material-symbols-outlined" style="font-size:16px">download</span>
          <span class="hidden sm:inline">Importar</span>
        </button>

        <button id="btn-export-json"
          class="flex items-center gap-1.5 px-2.5 py-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors text-xs border border-transparent hover:border-slate-700"
          title="Guardar Respaldo (.json) en disco">
          <span class="material-symbols-outlined" style="font-size:16px">upload</span>
          <span class="hidden sm:inline">Respaldo</span>
        </button>

        <button id="btn-export-csv"
          class="flex items-center gap-1.5 px-2.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-md text-xs font-semibold transition-colors">
          <span class="material-symbols-outlined" style="font-size:16px">table_chart</span>
          CSV
        </button>

        <button id="btn-copy-csv"
          class="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors border border-transparent hover:border-slate-700"
          title="Copiar CSV al portapapeles">
          <span class="material-symbols-outlined" style="font-size:16px">content_copy</span>
        </button>

        <div class="w-px h-5 bg-slate-800 mx-1"></div>

        <!-- Menú de usuario -->
        <div class="relative z-[200]" id="menu-peligroso-wrapper">
          <button id="btn-menu-peligroso"
            class="flex items-center gap-2 px-2 py-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors border border-transparent hover:border-slate-700"
            title="Perfil y más opciones">
            <div class="w-6 h-6 rounded-full bg-blue-600/40 border border-blue-500/50 flex items-center justify-center">
              <span class="material-symbols-outlined" style="font-size:14px;color:#93c5fd">person</span>
            </div>
            <span class="material-symbols-outlined" style="font-size:16px">expand_more</span>
          </button>

          <!-- Menú desplegable -->
          <div id="menu-peligroso"
            class="hidden absolute text-xs"
            style="position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; width: 240px !important; z-index: 500 !important; background: #0c0f18; border: 1px solid #1e2330; border-radius: 10px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); overflow: hidden;">

            <!-- Info del usuario autenticado -->
            <div id="menu-user-info" class="px-3 py-2.5 border-b border-slate-800 flex items-center gap-2">
              <div class="w-7 h-7 rounded-full bg-blue-600/40 border border-blue-500/50 flex items-center justify-center shrink-0">
                <span class="material-symbols-outlined" style="font-size:16px;color:#93c5fd">person</span>
              </div>
              <div class="min-w-0">
                <div id="menu-user-email" class="text-slate-200 font-semibold truncate text-[11px]">—</div>
                <div id="menu-user-role" class="text-[9px] font-bold uppercase tracking-wider mt-0.5">—</div>
              </div>
            </div>

            <div class="px-3 py-2 text-slate-600 font-bold uppercase tracking-wider text-[9px] border-b border-slate-800">Acciones del proyecto</div>
            <button id="btn-renombrar"
              class="w-full text-left px-4 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white transition-colors flex items-center gap-2 danger-zone-option">
              <span class="material-symbols-outlined" style="font-size:16px;color:#64748b">edit</span>
              Renombrar proyecto
            </button>
            <div class="border-t border-slate-800 my-1"></div>
            <div class="px-3 py-1.5 text-slate-500 font-bold uppercase tracking-wider text-[9px]">Proyectos</div>
            <button id="btn-cambiar-proyecto"
              class="w-full text-left px-4 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white transition-colors flex items-center gap-2">
              <span class="material-symbols-outlined" style="font-size:16px;color:#64748b">swap_horiz</span>
              Cambiar de proyecto
            </button>
            <div class="border-t border-slate-800 my-1 danger-zone-option"></div>
            <div class="px-3 py-1.5 text-rose-600 font-bold uppercase tracking-wider text-[9px] danger-zone-option">Zona de peligro</div>
            <button id="btn-vaciar-proyecto"
              class="w-full text-left px-4 py-2.5 text-rose-400 hover:bg-rose-950 hover:text-rose-300 transition-colors flex items-center gap-2 danger-zone-option">
              <span class="material-symbols-outlined" style="font-size:16px">delete</span>
              Vaciar proyecto activo
            </button>
            <button id="btn-reset-ia"
              class="w-full text-left px-4 py-2.5 text-amber-400 hover:bg-amber-950 hover:text-amber-300 transition-colors flex items-center gap-2 danger-zone-option">
              <span class="material-symbols-outlined" style="font-size:16px">refresh</span>
              Resetear configuración de IA
            </button>
            <div class="border-t border-slate-800 mt-1 danger-zone-option"></div>
            <button id="btn-user-manager"
              class="w-full text-left px-4 py-2.5 text-blue-400 hover:bg-blue-950 hover:text-blue-300 transition-colors flex items-center gap-2 danger-zone-option">
              <span class="material-symbols-outlined" style="font-size:16px">manage_accounts</span>
              Gestión de usuarios
            </button>
            <div class="border-t border-slate-800 mt-1"></div>
            <button id="btn-logout-menu"
              class="w-full text-left px-4 py-2.5 text-slate-400 hover:bg-slate-800 hover:text-rose-400 transition-colors flex items-center gap-2 mb-1">
              <span class="material-symbols-outlined" style="font-size:16px">logout</span>
              Cerrar sesión
            </button>
          </div>
        </div>
      </div>
    </header>

  <!-- badge de escenas, oculto, actualizado por JS -->
  <span id="total-scenes-tab-badge" class="hidden">73</span>


  <div id="toast-container" class="fixed bottom-5 right-5 z-50 flex flex-col gap-2 font-semibold no-print"></div>

  <!-- Modal confirmación WGA Transcriptor -->
  <div id="modal-wga-confirm"
    class="fixed inset-0 bg-slate-950/85 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-sm p-6 space-y-4 shadow-2xl">
      <div class="flex items-center gap-3">
        <div class="p-2 bg-amber-500/20 rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        </div>
        <h4 class="text-base font-black text-white">WGA Transcriptor</h4>
      </div>
      <p id="modal-wga-msg" class="text-sm text-slate-400 leading-relaxed"></p>
      <div class="flex gap-3 pt-1">
        <button id="btn-wga-cancel"
          class="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-sm font-semibold transition-colors">
          Cancelar
        </button>
        <button id="btn-wga-confirm"
          class="flex-1 px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-lg text-sm font-bold transition-colors">
          Transcribir
        </button>
      </div>
    </div>
  </div>

  <div id="shot-modal"
    class="fixed inset-0 bg-slate-950/85 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden no-print">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 space-y-4 shadow-2xl">
      <div class="flex items-center justify-between border-b border-slate-800 pb-3">
        <h4 id="modal-title" class="text-base font-black text-white">Agregar Plano de Cámara</h4>
        <button id="btn-close-shot-modal-top"
          class="text-slate-400 hover:text-white font-extrabold text-xl transition-colors">&times;</button>
      </div>
      <div class="space-y-3 text-xs">
        <input type="hidden" id="edit-frame-id" value="">
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-slate-400 font-semibold mb-1">ID del Plano (Ej: 1A)</label>
            <input type="text" id="shot-id" placeholder="Ej: 27A"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100">
          </div>
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Escena Asociada</label>
            <select id="shot-scene"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-semibold">
            </select>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Locación</label>
            <input type="text" id="shot-loc" placeholder="Ej: Habitación"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100">
          </div>
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Etiqueta (Badge)</label>
            <input type="text" id="shot-badge" placeholder="Ej: Revelación"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Tipo de Plano</label>
            <select id="shot-type"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100">
              <option value="Plano General (Vertical)">Plano General (Vertical)</option>
              <option value="Plano Entero">Plano Entero</option>
              <option value="Plano Americano">Plano Americano</option>
              <option value="Plano Medio Largo (Vertical)">Plano Medio Largo (Vertical)</option>
              <option value="Plano Conjunto Comprimido">Plano Conjunto Comprimido</option>
              <option value="Plano Medio">Plano Medio</option>
              <option value="Plano Medio Corto en Picado">Plano Medio Corto en Picado</option>
              <option value="Primer Plano (Cerrado)">Primer Plano (Cerrado)</option>
              <option value="Primerísimo Primer Plano">Primerísimo Primer Plano</option>
              <option value="Plano Detalle / Inserto">Plano Detalle / Inserto</option>
            </select>
          </div>
          <div>
            <label class="block text-slate-400 font-semibold mb-1 text-emerald-400">Talento / Cast</label>
            <input type="text" id="shot-cast" placeholder="Ej: 1, 2, 4"
              class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-emerald-500 focus:outline-none text-slate-100 font-mono text-sm">
          </div>
        </div>

        <div>
          <label class="block text-slate-400 font-semibold mb-1">Formato de Aspecto
            <span class="text-slate-600 font-normal">(override del proyecto)</span>
          </label>
          <select id="shot-aspect-ratio"
            class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 text-xs">
            <option value="__inherit__">↳ Heredar del proyecto</option>
            <option value="9:16">9:16 — Vertical (Redes / Short)</option>
            <option value="16:9">16:9 — Horizontal (Cine / TV)</option>
            <option value="1:1">1:1 — Cuadrado (Instagram)</option>
            <option value="4:3">4:3 — Clásico / Retro</option>
            <option value="2.39:1">2.39:1 — Cinemascope</option>
          </select>
        </div>

        <div>
          <label class="block text-slate-400 font-semibold mb-1">Descripción / Notas Visuales</label>
          <textarea id="shot-desc" rows="3" placeholder="Describe los movimientos de cámara y actores..."
            class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none resize-none text-slate-100"></textarea>
        </div>

        <div class="space-y-2 border-t border-slate-800 pt-3">
          <label class="block text-slate-300 font-bold mb-1">Importar Boceto o Ilustración</label>

          <div id="modal-dropzone" ondragover="handleModalDragOver(event)" ondragleave="handleModalDragLeave(event)"
            ondrop="handleModalDrop(event)"
            class="border-2 border-dashed border-slate-700 hover:border-indigo-500 rounded-xl p-4 text-center cursor-pointer transition-all relative bg-slate-950/40">

            <input type="file" id="shot-file" accept="image/*"
              class="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10">

            <div id="dropzone-prompt" class="space-y-1 relative z-0">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-slate-500" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <p class="text-slate-300 font-bold text-[11px]">Arrastra tu imagen aquí o <span
                  class="text-indigo-400 hover:underline">búscala</span></p>
              <p class="text-[9px] text-slate-500">Soporta PNG, JPG, GIF</p>
            </div>

            <div id="dropzone-preview" class="hidden flex items-center justify-between gap-3 relative z-20">
              <div class="flex items-center gap-2">
                <img id="img-thumb-preview" src=""
                  class="h-12 w-8 object-cover rounded border border-slate-700 shadow-inner">
                <div class="text-left">
                  <span id="file-name-preview"
                    class="text-slate-300 text-[11px] font-bold block truncate max-w-[180px]">boceto_plano.png</span>
                  <span class="text-[9px] text-emerald-400 font-bold block">✓ Listo para guardar</span>
                </div>
              </div>
              <button id="btn-remove-file"
                class="p-1 text-slate-400 hover:text-rose-500 font-black text-sm hover:bg-rose-500/10 rounded transition-colors">&times;
                Remover</button>
            </div>
          </div>

          <div class="text-center text-slate-500 font-bold text-[9px] uppercase tracking-widest py-0.5">- Ó -</div>
          <input type="text" id="shot-url" placeholder="Pegar enlace URL de la imagen externa..."
            class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 text-xs">
        </div>
      </div>
      <div class="flex items-center justify-between border-t border-slate-800 pt-3 text-xs font-semibold">
        <div id="modal-clone-controls" class="flex gap-2 hidden">
          <button id="btn-clone-before" class="px-3 py-2 bg-emerald-600/20 hover:bg-emerald-600 text-emerald-400 hover:text-white rounded transition-colors border border-emerald-500/30" title="Clonar e insertar ANTES">Clonar Antes</button>
          <button id="btn-clone-after" class="px-3 py-2 bg-emerald-600/20 hover:bg-emerald-600 text-emerald-400 hover:text-white rounded transition-colors border border-emerald-500/30" title="Clonar e insertar DESPUÉS">Clonar Después</button>
        </div>
        <div class="flex items-center gap-2 ml-auto">
          <button id="btn-close-shot-modal"
            class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition-colors">Cancelar</button>
          <button id="btn-save-shot"
            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors shadow-lg">Guardar
            Plano</button>
        </div>
      </div>
    </div>
  </div>

  <div id="delete-modal"
    class="fixed inset-0 bg-slate-950/85 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden no-print">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-sm p-6 space-y-4 shadow-2xl text-center">
      <div class="p-3 bg-rose-500/10 text-rose-400 rounded-full w-12 h-12 mx-auto flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
      </div>
      <div class="space-y-1">
        <h4 class="text-base font-bold text-white">¿Eliminar este plano del Shooting?</h4>
        <p class="text-xs text-slate-400">Esta acción removerá permanentemente la toma del Shooting Board.</p>
      </div>
      <input type="hidden" id="delete-frame-id" value="">
      <div class="flex items-center justify-center gap-2 pt-2 text-xs font-semibold">
        <button id="btn-cancel-delete"
          class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors w-full">Cancelar</button>
        <button id="btn-confirm-delete"
          class="px-5 py-2.5 bg-rose-600 hover:bg-rose-500 text-white rounded-lg transition-colors w-full shadow-lg shadow-rose-600/20">Eliminar</button>
      </div>
    </div>
  </div>

  <div id="print-config-modal"
    class="fixed inset-0 bg-slate-950/85 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden no-print">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 space-y-4 shadow-2xl">
      <div class="flex items-center justify-between border-b border-slate-800 pb-3">
        <h4 class="text-base font-black text-white">Configuración del Shooting Board (Carta)</h4>
        <button id="btn-close-print-config"
          class="text-slate-400 hover:text-white font-extrabold text-xl transition-colors">&times;</button>
      </div>
      <div class="space-y-4 text-xs">
        <div>
          <label class="block text-slate-300 font-bold mb-1.5">Orientación de la Página (Impresión)</label>
          <div class="grid grid-cols-2 gap-3 font-semibold">
            <button id="btn-opt-portrait"
              class="p-3 border border-indigo-500 bg-indigo-600/20 text-indigo-400 rounded-xl text-center flex flex-col items-center gap-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
              </svg>
              <span>Carta Vertical (Portrait)</span>
            </button>
            <button id="btn-opt-landscape"
              class="p-3 border border-slate-700 bg-slate-950 text-slate-400 rounded-xl text-center flex flex-col items-center gap-1 hover:border-slate-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 18h.01M7 21h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span>Carta Horizontal (Landscape)</span>
            </button>
          </div>
        </div>

        <div>
          <label class="block text-slate-300 font-bold mb-1">Distribución de Cuadros por Página (PDF)</label>
          <p class="text-[11px] text-slate-400 mb-2">Selecciona la grilla deseada. Soporta combinaciones recíprocas
            (Ancho x Alto).</p>
          <select id="config-frames-per-page"
            class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 text-xs font-semibold">
            <option value="4-2">4 Cuadros (2 Columnas x 2 Filas - Simétrico)</option>
            <option value="6-3">6 Cuadros (3 Columnas x 2 Filas - Apaisado)</option>
            <option value="6-2">6 Cuadros (2 Columnas x 3 Filas - Alargado INVERSO)</option>
            <option value="8-4">8 Cuadros (4 Columnas x 2 Filas - Apaisado)</option>
            <option value="8-2">8 Cuadros (2 Columnas x 4 Filas - Alargado INVERSO)</option>
            <option value="9-3">9 Cuadros (3 Columnas x 3 Filas - Cuadrante Vertical)</option>
            <option value="12-4">12 Cuadros (4 Columnas x 3 Filas - Horizontal Estándar)</option>
            <option value="12-3">12 Cuadros (3 Columnas x 4 Filas - Vertical Estándar INVERSO)</option>
            <option value="15-5">15 Cuadros (5 Columnas x 3 Filas - Apaisado Compacto)</option>
            <option value="15-3">15 Cuadros (3 Columnas x 5 Filas - Vertical Compacto INVERSO)</option>
            <option value="16-4">16 Cuadros (4 Columnas x 4 Filas - Súper Grid)</option>
          </select>
        </div>
      </div>
      <div class="flex items-center justify-end gap-2 border-t border-slate-800 pt-3 text-xs font-semibold">
        <button id="btn-cancel-print-config"
          class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition-colors">Cerrar</button>
        <button id="btn-apply-print-config"
          class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors shadow-lg">Aplicar
          Cambios</button>
      </div>
    </div>
  </div>

  <!-- content wrapper inside app-shell -->
  <div id="app-layout" class="flex-1 overflow-hidden flex" style="background:#080b12">

  <main class="flex-1 overflow-hidden flex flex-col">

    <section id="pane-dashboard" class="flex flex-col flex-1 overflow-hidden hidden">
      <div class="flex-1 overflow-y-auto p-6 space-y-6">
      <div
        class="bg-gradient-to-r from-indigo-900/30 via-slate-900 to-slate-900 border border-indigo-500/20 p-6 rounded-2xl relative overflow-hidden">
        <div class="absolute -right-10 -bottom-10 opacity-10 w-60 h-60 bg-indigo-500 rounded-full blur-3xl"></div>
        <div class="relative z-10 space-y-2">
          <span class="text-xs font-semibold uppercase tracking-wider text-indigo-400">Control de Producción</span>
          <h2 class="text-2xl font-black text-white">Master Breakdown & Plan de Rodaje</h2>
          <p class="text-slate-300 max-w-3xl text-sm leading-relaxed">
            Importá un guión para comenzar. El sistema analizará las escenas, locaciones y personajes para generar un <strong class="text-indigo-400">plan de rodaje optimizado</strong> por jornadas, minimizando movimientos de cámara y maximizando la eficiencia del crew.
          </p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl flex items-center gap-4 shadow-sm">
          <div class="p-3 bg-indigo-500/10 text-indigo-400 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 112-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <div>
            <div id="dashboard-scenes-count" class="text-2xl font-black text-white">0</div>
            <div class="text-xs text-slate-400 font-medium uppercase tracking-wider">Escenas Totales</div>
          </div>
        </div>

        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl flex items-center gap-4 shadow-sm">
          <div class="p-3 bg-emerald-500/10 text-emerald-400 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
          <div>
            <div id="dashboard-days-count" class="text-2xl font-black text-white">-- Días</div>
            <div class="text-xs text-slate-400 font-medium uppercase tracking-wider">Plan de Rodaje</div>
          </div>
        </div>

        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl flex items-center gap-4 shadow-sm">
          <div class="p-3 bg-amber-500/10 text-amber-400 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <div>
            <div id="dashboard-main-loc" class="text-lg font-black text-white truncate max-w-[180px]">--</div>
            <div class="text-xs text-slate-400 font-medium uppercase tracking-wider">Locación Principal</div>
          </div>
        </div>

        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl flex items-center gap-4 shadow-sm">
          <div class="p-3 bg-pink-500/10 text-pink-400 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
          </div>
          <div>
            <div id="dashboard-cast-count" class="text-2xl font-black text-white">0 Actores</div>
            <div class="text-xs text-slate-400 font-medium uppercase tracking-wider">Elenco con Créditos</div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4 lg:col-span-2">
          <h3 class="text-base font-bold text-white flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            Estrategia de Agrupación de Rodaje (Fórmula de Éxito)
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div
              class="bg-slate-950 border border-slate-800 p-4 rounded-xl space-y-2 hover:border-indigo-500/30 transition-all">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-indigo-400 uppercase">Día 1</span>
                <span id="d1-count"
                  class="text-xs font-semibold bg-indigo-500/10 text-indigo-300 px-2 py-0.5 rounded-full">-- Escenas</span>
              </div>
              <p class="text-xs font-bold text-slate-200">INTERIORES DÍA</p>
              <p class="text-[11px] text-slate-400 leading-relaxed">
                Agrupa las extensas escenas interiores con luz de día. Máxima cantidad de páginas resueltas optimizando setups de iluminación fijos.
              </p>
            </div>
            <div
              class="bg-slate-950 border border-slate-800 p-4 rounded-xl space-y-2 hover:border-pink-500/30 transition-all">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-pink-400 uppercase">Día 2</span>
                <span id="d2-count"
                  class="text-xs font-semibold bg-pink-500/10 text-pink-300 px-2 py-0.5 rounded-full">-- Escenas</span>
              </div>
              <p class="text-xs font-bold text-slate-200">HABITACIONES + TRANSICIONES</p>
              <p class="text-[11px] text-slate-400 leading-relaxed">
                Jornada densa enfocada en habitaciones privadas, diálogos de alta emotividad e íntimos, y transiciones con blackouts de luz controlada.
              </p>
            </div>
            <div
              class="bg-slate-950 border border-slate-800 p-4 rounded-xl space-y-2 hover:border-emerald-500/30 transition-all">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-emerald-400 uppercase">Día 3</span>
                <span id="d3-count"
                  class="text-xs font-semibold bg-emerald-500/10 text-emerald-300 px-2 py-0.5 rounded-full">-- Escenas</span>
              </div>
              <p class="text-xs font-bold text-slate-200">EXTERIORES JARDINES + CLIMA</p>
              <p class="text-[11px] text-slate-400 leading-relaxed">
                Sensible al clima exterior. Concentra la mayor parte del trabajo físico y secuencias que requieren iluminación natural solar directa.
              </p>
            </div>
          </div>
        </div>

        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl space-y-4">
          <h3 class="text-base font-bold text-white flex items-center gap-2 text-rose-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            Alertas Críticas del Plan
          </h3>
          <ul id="dashboard-alerts" class="space-y-3 text-xs leading-relaxed">
            <li class="flex gap-2.5 items-start bg-slate-800/30 p-2 rounded-lg border border-slate-700/30 text-slate-500">
              <span class="font-bold">Sin alertas:</span>
              <span>Importá un guión y sincronizá al Master Breakdown para generar alertas de producción automáticamente.</span>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- fin scroll dashboard -->
    </section>

    <section id="pane-breakdown" class="flex flex-col flex-1 overflow-hidden hidden">
      <!-- Encabezado fijo: filtros -->
      <div class="flex-shrink-0 px-6 pt-4 pb-3 bg-slate-950 border-b border-slate-800">
        <div class="bg-slate-900 border border-slate-800 p-4 rounded-xl flex flex-wrap gap-4 items-center justify-between">
        <div class="flex flex-wrap gap-3 items-center flex-1">
          <div class="relative w-full max-w-xs">
            <input type="text" id="filter-search"
              placeholder="Buscar por locación o personaje..."
              class="w-full bg-slate-950 border border-slate-700 text-slate-100 placeholder-slate-500 text-xs px-3.5 py-2 pl-9 rounded-lg focus:outline-none focus:border-indigo-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500 absolute left-3 top-2.5" fill="none"
              viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <select id="filter-loc"
            class="bg-slate-950 border border-slate-700 text-slate-300 text-xs px-3 py-2 rounded-lg focus:outline-none focus:border-indigo-500">
            <option value="">Todas las Locaciones</option>
          </select>
          <select id="filter-cast"
            class="bg-slate-950 border border-slate-700 text-slate-300 text-xs px-3 py-2 rounded-lg focus:outline-none focus:border-indigo-500">
            <option value="">Todos los Personajes</option>
          </select>
          <select id="filter-day"
            class="bg-slate-950 border border-slate-700 text-slate-300 text-xs px-3 py-2 rounded-lg focus:outline-none focus:border-indigo-500">
            <option value="">Todos los Días de Rodaje</option>
            <option value="1">Día 1</option>
            <option value="2">Día 2</option>
            <option value="3">Día 3</option>
          </select>
        </div>

        <div class="text-xs text-slate-400 font-semibold">
          Mostrando <span id="filtered-count" class="text-indigo-400 font-bold">73</span> escenas
        </div>
      </div>
      </div><!-- fin encabezado fijo breakdown -->

      <!-- Área scrollable -->
      <div class="flex-1 overflow-y-auto p-6 pt-4">
        <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-lg">
        <div class="overflow-x-auto">
          <table class="w-full text-left border-collapse">
            <thead>
              <tr
                class="bg-slate-950 border-b border-slate-800 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                <th class="py-3.5 px-4 w-12 text-center">Esc</th>
                <th class="py-3.5 px-4 w-12 text-center">Cap</th>
                <th class="py-3.5 px-4">Locación</th>
                <th class="py-3.5 px-4 w-16 text-center">I/E</th>
                <th class="py-3.5 px-4 w-16 text-center">D/N</th>
                <th class="py-3.5 px-4">Personajes (Cast)</th>
                <th class="py-3.5 px-4">Utilería / Props</th>
                <th class="py-3.5 px-4">Alertas / FX</th>
                <th class="py-3.5 px-4 w-28 text-center">Complejidad</th>
                <th class="py-3.5 px-4 w-28 text-center">Día Rodaje</th>
              </tr>
            </thead>
            <tbody id="breakdown-tbody" class="divide-y divide-slate-800 text-xs text-slate-300">
            </tbody>
          </table>
        </div>
      </div>
      </div><!-- fin scroll breakdown -->
    </section>

    <section id="pane-stripboard" class="flex flex-col flex-1 overflow-hidden hidden">
      <div class="flex-1 overflow-y-auto p-6 space-y-6">
        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-base font-bold text-white flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
            </svg>
            Diseño del Stripboard (Orden Logístico)
          </h3>
          
          <div class="flex items-center gap-2 bg-slate-950 p-1 rounded-lg border border-slate-800">
            <button id="btn-mode-kanban" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-xs font-semibold shadow-sm flex items-center gap-1.5 transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
              </svg>
              Columnas (Kanban)
            </button>
            <button id="btn-mode-table" class="px-3 py-1.5 text-slate-400 hover:text-slate-200 rounded text-xs font-semibold transition-all flex items-center gap-1.5">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
              </svg>
              Tabla Densa (MMS)
            </button>
          </div>
        </div>
        <p class="text-xs text-slate-400 max-w-4xl leading-relaxed">
          Alterna entre el modo <strong>Columnas</strong> para visualizar comparativamente la carga de trabajo de cada jornada, y el modo <strong>Tabla Densa</strong> para ver detalles técnicos de todos los planos en un flujo continuo (estilo Excel).
        </p>
      </div>

      <div class="flex items-start gap-6 relative">
        
        <div class="flex-1 w-full overflow-hidden space-y-4">
          <div id="stripboard-kanban-view" class="flex gap-6 overflow-x-auto pb-4 snap-x">
            </div>

          <div id="stripboard-table-view" class="hidden bg-slate-900/50 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl">
            <div class="overflow-x-auto">
              <table class="w-full text-left border-collapse">
                <thead>
                  <tr class="bg-slate-950 text-slate-400 text-[10px] uppercase tracking-wider border-b border-slate-800">
                    <th class="py-3 px-4 font-semibold w-16">ID</th>
                    <th class="py-3 px-4 font-semibold w-20">Escena</th>
                    <th class="py-3 px-4 font-semibold w-40">Locación</th>
                    <th class="py-3 px-4 font-semibold w-48">Tipo de Plano</th>
                    <th class="py-3 px-4 font-semibold">Descripción / Acción</th>
                    <th class="py-3 px-4 font-semibold w-32">Elenco (Cast)</th>
                    <th class="py-3 px-4 font-semibold w-32">Etiqueta</th>
                  </tr>
                </thead>
                <tbody id="stripboard-table-body" class="divide-y divide-slate-800/50 text-xs text-slate-300">
                  </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      </div><!-- fin scroll stripboard -->
    </section>

    <section id="pane-schedule" class="flex flex-col flex-1 overflow-hidden hidden">
      <div class="flex-1 overflow-y-auto p-6 space-y-6">
        <div class="bg-slate-900 border border-slate-800 p-5 rounded-xl space-y-2">
        <h3 class="text-base font-bold text-white flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Planificación Horaria de las Jornadas de Grabación (12 Horas/Día)
        </h3>
        <p class="text-xs text-slate-400 max-w-4xl leading-relaxed">
          Para exprimir los días sin penalizaciones de horas extras, cada bloque está rigurosamente asignado por locación y setup de cámara. El tiempo promedio por setup es de 20-30 minutos en producciones de formato corto.
        </p>
      </div>

      <div id="schedule-container" class="space-y-6">
        <div class="flex flex-col items-center justify-center py-16 text-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-slate-700 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          <p class="text-slate-500 text-sm font-semibold">Sin plan de rodaje generado</p>
          <p class="text-slate-600 text-xs mt-1">Importá un guión y sincronizá al Master Breakdown para generar el plan horario automáticamente.</p>
        </div>
      </div>
      </div><!-- fin scroll schedule -->
    </section>

    <section id="pane-shootingboard" class="flex flex-col flex-1 overflow-hidden hidden">
      <!-- Encabezado fijo: toolbar del shooting board -->
      <div class="flex-shrink-0 px-6 pt-4 pb-3 bg-slate-950 border-b border-slate-800 no-print">
        <div
          class="bg-slate-900 border border-slate-800 p-5 rounded-xl flex flex-wrap items-center justify-between gap-4">
        <div class="space-y-1">
          <h3 class="text-base font-bold text-white flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            Shooting Board Interactivo <span id="shooting-board-aspect-label">16:9</span>
          </h3>
          <p class="text-xs text-slate-400">
            Cada escena del libreto cuenta con un frame interactivo. Vista digital de 12 cuadros por página. PDF configurable: <span id="lbl-page-orientation" class="font-bold text-indigo-400">Vertical (9 por pág.)</span>
          </p>
        </div>

        <div class="flex flex-wrap items-center gap-3 font-mono font-bold text-xs">
          <button id="btn-undo" disabled
            class="flex items-center gap-1.5 px-2.5 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 disabled:opacity-30 disabled:pointer-events-none transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
            </svg>
          </button>

          <button id="btn-redo" disabled
            class="flex items-center gap-1.5 px-2.5 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 disabled:opacity-30 disabled:pointer-events-none transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10h-10a8 8 0 00-8 8v2M21 10l-6 6m6-6l-6-6" />
            </svg>
          </button>

          <button id="btn-add-shot"
            class="flex items-center gap-1.5 px-3 py-2 bg-indigo-600/35 hover:bg-indigo-600/50 text-indigo-300 rounded-lg border border-indigo-500/40 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            <span>Agregar Plano</span>
          </button>

          <button id="btn-print-config"
            class="flex items-center gap-1.5 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg border border-slate-700 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31(-2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span>Configurar PDF</span>
          </button>

          <button id="btn-print-board"
            class="flex items-center gap-1.5 px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition-all shadow-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
            </svg>
            <span>Imprimir PDF</span>
          </button>
        </div>
      </div>
      </div><!-- fin encabezado fijo shooting board -->

      <!-- Área scrollable del shooting board -->
      <div class="flex-1 overflow-y-auto px-4 pb-4 space-y-4 w-full">
        <div
          class="flex items-center justify-between bg-slate-900 border border-slate-800 p-3 rounded-lg no-print font-mono text-xs">
        <button id="btn-prev-page" ondragover="handlePaginationDragOver(event, 'prev')" ondragleave="handlePaginationDragLeave()" ondrop="handlePaginationDragLeave()"
          class="px-4 py-2 bg-slate-850 hover:bg-slate-700 active:bg-slate-900 text-slate-200 rounded disabled:opacity-30 disabled:pointer-events-none transition-colors">
          &larr; Anterior
        </button>
        <div id="numeric-pagination-container" class="flex items-center gap-1.5 mx-4" ondragover="handlePaginationDragOver(event, 'auto')" ondragleave="handlePaginationDragLeave()" ondrop="handlePaginationDragLeave()">
          </div>
        <button id="btn-next-page" ondragover="handlePaginationDragOver(event, 'next')" ondragleave="handlePaginationDragLeave()" ondrop="handlePaginationDragLeave()"
          class="px-4 py-2 bg-slate-850 hover:bg-slate-700 active:bg-slate-900 text-slate-200 rounded disabled:opacity-30 disabled:pointer-events-none transition-colors">
          Siguiente &rarr;
        </button>
      </div>

      <div id="shooting-board-pages-container" class="w-full space-y-12">
        </div>
      </div><!-- fin scroll shooting board -->
    </section>

    <!-- ============================================================
         MÓDULO: GUIÓN
         Importa PDF/DOCX, visualiza el guión y genera desglose
         automático usando Ollama (IA local) o detección por reglas.
         ============================================================ -->
    <section id="pane-guion" class="flex flex-col flex-1 overflow-hidden">

      <!-- ENCABEZADO FIJO del módulo Guión -->
      <div class="flex-shrink-0 px-6 pt-4 pb-3 bg-slate-950 space-y-3 border-b border-slate-800 relative z-20">

        <!-- Banner de estado Ollama -->
        <div id="ollama-banner" class="rounded-xl border px-5 py-3 flex items-center justify-between gap-4 text-xs font-semibold transition-all">
          <div class="flex items-center gap-3">
            <span id="ollama-banner-dot" class="w-3 h-3 rounded-full bg-slate-600 flex-shrink-0"></span>
            <span id="ollama-banner-text" class="text-slate-400">Verificando conexión con Ollama en localhost:11434…</span>
          </div>
          <div class="flex items-center gap-2">
            <button id="btn-ollama-retry" class="text-indigo-400 hover:text-indigo-200 underline underline-offset-2 font-bold shrink-0">Reintentar</button>
            <button id="btn-ollama-config"
              class="p-1.5 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white rounded-lg border border-slate-700 transition-all"
              title="Configuración de IA">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </button>
          </div>
        </div>

        <!-- Toolbar del módulo -->
        <div class="flex flex-wrap items-center gap-3">
          <label class="flex items-center gap-2 px-3 py-2 bg-indigo-600/30 hover:bg-indigo-600/50 text-indigo-300 rounded-lg border border-indigo-500/40 cursor-pointer transition-all text-xs font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
            </svg>
            Importar Guión (PDF / DOCX / PPTX)
            <input type="file" id="guion-file-input" accept=".pdf,.docx,.pptx,.txt" class="hidden">
          </label>

          <!-- Pegar desde portapapeles -->
          <button id="btn-paste-guion"
            class="flex items-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 cursor-pointer transition-all text-xs font-bold">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            Pegar texto
          </button>
          <button id="btn-formatear-ia" disabled
            class="flex items-center gap-2 px-3 py-2 bg-amber-600/20 text-amber-400 rounded-lg border border-amber-500/30 text-xs font-bold cursor-not-allowed opacity-50 transition-all"
            title="Requiere Ollama o OpenRouter configurado">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            WGA Transcriptor
          </button>
          <button id="btn-desglose-ia" disabled
            class="flex items-center gap-2 px-3 py-2 bg-emerald-600/20 text-emerald-500 rounded-lg border border-emerald-500/30 text-xs font-bold cursor-not-allowed opacity-50 transition-all"
            title="Requiere Ollama corriendo en localhost:11434">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            Desglose con IA
          </button>
          <button id="btn-desglose-reglas" disabled
            class="flex items-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 text-xs font-bold transition-all opacity-50 cursor-not-allowed">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
            </svg>
            Desglose por Reglas
          </button>
          <button id="btn-cancelar-ia" class="hidden items-center gap-2 px-3 py-2 bg-rose-600/20 text-rose-400 rounded-lg border border-rose-500/30 text-xs font-bold transition-all hover:bg-rose-600/40 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
            Cancelar
          </button>
          <button id="btn-sync-breakdown" disabled
            class="flex items-center gap-2 px-3 py-2 bg-amber-600/20 text-amber-400 rounded-lg border border-amber-500/30 text-xs font-bold transition-all opacity-50 cursor-not-allowed ml-auto">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Sincronizar al Master Breakdown
          </button>
          <button id="btn-export-desglose-pdf" disabled
            class="flex items-center gap-2 px-3 py-2 bg-indigo-600/20 text-indigo-400 rounded-lg border border-indigo-500/30 text-xs font-bold transition-all opacity-50 cursor-not-allowed"
            title="Exportar desglose como PDF estilo Filmustage">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Exportar PDF
          </button>
        </div>

        <!-- Panel de configuración de IA (oculto por defecto) -->
        <div id="ollama-config-panel" class="hidden absolute top-full left-6 right-6 bg-slate-900 border border-slate-700 rounded-xl p-4 space-y-4 text-xs shadow-2xl z-30">
          <h4 class="font-bold text-slate-200">Configuración de IA</h4>

          <!-- Sección Gemini — MÁS RÁPIDO -->
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span id="gemini-config-dot" class="w-2 h-2 rounded-full bg-slate-600"></span>
                <h5 class="font-bold text-blue-300 uppercase tracking-wider text-[10px]">Gemini ⚡⚡ Más Rápido</h5>
                <span class="text-slate-600 text-[9px]">gratis con Google One · sin rate limits</span>
              </div>
              <button id="toggle-gemini"
                class="px-3 py-1 rounded-full text-[10px] font-bold transition-all border border-slate-600 text-slate-400 hover:border-blue-500 hover:text-blue-400">
                OFF
              </button>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-slate-400 font-semibold block mb-1">API Key <a href="https://aistudio.google.com/apikey" target="_blank" class="text-blue-400 hover:text-blue-300 underline ml-1">aistudio.google.com →</a></label>
                <input id="gemini-key-input" type="password" placeholder="AIza..." autocomplete="new-password" data-lpignore="true" data-form-type="other"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-blue-500 focus:outline-none">
              </div>
              <div>
                <label class="text-slate-400 font-semibold block mb-1 flex items-center justify-between">
                  Modelo
                  <button id="btn-load-gemini-models" class="text-blue-400 hover:text-blue-200 text-[9px] font-bold underline underline-offset-2">Cargar modelos</button>
                </label>
                <select id="gemini-model-select"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-blue-500 focus:outline-none">
                  <option value="gemini-2.5-flash">Gemini 2.0 Flash — Rápido ⚡⚡</option>
                  <option value="gemini-2.5-flash-lite">Gemini 2.5 Flash — Más inteligente</option>
                  <option value="gemini-3.5-flash">Gemini 3.5 Flash (nuevo)</option>
                  <option value="gemini-1.5-flash">Gemini 1.5 Flash (legacy)</option>
                </select>
              </div>
            </div>
          </div>

          <div class="border-t border-slate-700/50"></div>

          <!-- Sección Groq — RECOMENDADO -->
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span id="groq-config-dot" class="w-2 h-2 rounded-full bg-slate-600"></span>
                <h5 class="font-bold text-orange-300 uppercase tracking-wider text-[10px]">Groq ⚡ Recomendado</h5>
                <span class="text-slate-600 text-[9px]">gratis · 10x más rápido · sin tarjeta</span>
              </div>
              <button id="toggle-groq"
                class="px-3 py-1 rounded-full text-[10px] font-bold transition-all border border-slate-600 text-slate-400 hover:border-orange-500 hover:text-orange-400">
                OFF
              </button>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-slate-400 font-semibold block mb-1">API Key <a href="https://console.groq.com" target="_blank" class="text-orange-400 hover:text-orange-300 underline ml-1">console.groq.com →</a></label>
                <input id="groq-key-input" type="password" placeholder="gsk_..." autocomplete="new-password" data-lpignore="true" data-form-type="other"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-orange-500 focus:outline-none">
              </div>
              <div>
                <label class="text-slate-400 font-semibold block mb-1 flex items-center justify-between">
                  Modelo
                  <button id="btn-load-groq-models" class="text-orange-400 hover:text-orange-200 text-[9px] font-bold underline underline-offset-2">Cargar modelos</button>
                </label>
                <select id="groq-model-select"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-orange-500 focus:outline-none">
                  <option value="llama-3.3-70b-versatile">Llama 3.3 70B — Gratis ⚡</option>
                  <option value="llama-3.1-8b-instant">Llama 3.1 8B Instant — Gratis ⚡⚡</option>
                  <option value="mixtral-8x7b-32768">Mixtral 8x7B — Gratis</option>
                  <option value="gemma2-9b-it">Gemma 2 9B — Gratis</option>
                </select>
              </div>
            </div>
          </div>

          <div class="border-t border-slate-700/50"></div>

          <!-- Sección Ollama -->
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span id="ollama-config-dot" class="w-2 h-2 rounded-full bg-slate-600"></span>
                <h5 class="font-bold text-slate-300 uppercase tracking-wider text-[10px]">IA Local — Ollama</h5>
                <span class="text-slate-600 text-[9px]">sin internet · más lento</span>
              </div>
              <!-- Toggle ON/OFF Ollama -->
              <button id="toggle-ollama"
                class="px-3 py-1 rounded-full text-[10px] font-bold transition-all border border-slate-600 text-slate-400 hover:border-emerald-500 hover:text-emerald-400">
                OFF
              </button>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-slate-400 font-semibold block mb-1">URL del servidor</label>
                <input id="ollama-url-input" type="text" value="http://localhost:11434"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-indigo-500 focus:outline-none">
              </div>
              <div>
                <label class="text-slate-400 font-semibold block mb-1 flex items-center justify-between">
                  Modelo
                  <button id="btn-load-ollama-models" class="text-emerald-400 hover:text-emerald-200 text-[9px] font-bold underline underline-offset-2">
                    Detectar modelos
                  </button>
                </label>
                <select id="ollama-model-select"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-indigo-500 focus:outline-none">
                  <option value="qwen2.5:14b">qwen2.5:14b</option>
                  <option value="qwen2.5:7b">qwen2.5:7b</option>
                  <option value="custom-ollama">Personalizado…</option>
                </select>
                <input id="ollama-model-input" type="text" value="qwen2.5:14b" placeholder="ej: qwen2.5:7b"
                  class="hidden w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-indigo-500 focus:outline-none mt-1">
              </div>
            </div>
          </div>

          <div class="border-t border-slate-700/50"></div>

          <!-- Sección OpenRouter -->
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span id="openrouter-config-dot" class="w-2 h-2 rounded-full bg-slate-600"></span>
                <h5 class="font-bold text-slate-300 uppercase tracking-wider text-[10px]">IA en la Nube — OpenRouter</h5>
                <span class="text-slate-600 text-[9px]">requiere internet · rápido</span>
              </div>
              <!-- Toggle ON/OFF OpenRouter -->
              <button id="toggle-openrouter"
                class="px-3 py-1 rounded-full text-[10px] font-bold transition-all border border-slate-600 text-slate-400 hover:border-sky-500 hover:text-sky-400">
                OFF
              </button>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-slate-400 font-semibold block mb-1">API Key</label>
                <input id="openrouter-key-input" type="password" placeholder="sk-or-v1-..." autocomplete="new-password" data-lpignore="true" data-form-type="other"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-sky-500 focus:outline-none">
              </div>
              <div>
                <label class="text-slate-400 font-semibold block mb-1 flex items-center justify-between">
                  Modelo
                  <button id="btn-load-models" class="text-sky-400 hover:text-sky-200 text-[9px] font-bold underline underline-offset-2">
                    Cargar modelos disponibles
                  </button>
                </label>
                <select id="openrouter-model-select"
                  class="w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 focus:border-sky-500 focus:outline-none">
                  <option value="">— Cargá los modelos disponibles →</option>
                  <option value="meta-llama/llama-4-maverick:free">Llama 4 Maverick — Gratis ⭐ (1M ctx)</option>
                  <option value="openai/gpt-oss-120b:free">GPT-OSS 120B — Gratis ⭐</option>
                  <option value="meta-llama/llama-3.3-70b-instruct:free">Llama 3.3 70B — Gratis</option>
                  <option value="deepseek/deepseek-v4-flash:free">DeepSeek V4 Flash — Gratis</option>
                  <option value="google/gemma-4-31b-it:free">Gemma 4 31B — Gratis</option>
                  <option value="custom">Personalizado…</option>
                </select>
              </div>
            </div>
            <input id="openrouter-model-custom" type="text" placeholder="nombre/del-modelo"
              class="hidden w-full bg-slate-950 border border-slate-700 rounded p-2 text-slate-100 font-mono focus:border-sky-500 focus:outline-none">
          </div>

          <div class="flex items-center gap-2 pt-1">
            <button id="btn-ollama-save-config"
              class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded font-bold transition-colors">
              Guardar
            </button>
            <button id="btn-reset-ia-config"
              class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded font-bold transition-colors text-[10px]">
              Reset config IA
            </button>
          </div>
        </div>

      </div><!-- FIN ENCABEZADO FIJO -->

      <!-- ÁREA PRINCIPAL SCROLLABLE: dos columnas -->
      <div class="flex flex-1 overflow-hidden gap-4 p-4">

        <!-- Columna izquierda: visor del guión -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl flex flex-col overflow-hidden flex-1">
          <!-- Header fijo de la tarjeta -->
          <div class="flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-slate-800 bg-slate-900 rounded-t-xl">
            <h3 class="text-xs font-bold text-slate-300 flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              Guión
            </h3>
            <div class="flex items-center gap-2">
             <!-- Toggle vista -->
              <div class="flex items-center bg-slate-800 rounded-lg border border-slate-700 overflow-hidden text-[9px] font-bold">
                <button id="btn-vista-screenplay"
                  class="px-2 py-1 text-indigo-400 bg-indigo-500/20 transition-colors">Screenplay</button>
                <button id="btn-vista-avscript"
                  class="px-2 py-1 text-slate-500 hover:text-slate-300 transition-colors">AV Script</button>
              </div>
              <!-- Toggle tema claro/oscuro del visor -->
              <div class="flex items-center bg-slate-800 rounded-lg border border-slate-700 overflow-hidden" title="Tema del visor">
                <button id="btn-tema-claro"
                  class="px-2 py-1 text-amber-500 bg-amber-500/10 transition-colors flex items-center"
                  title="Modo claro">
                  <span class="material-symbols-outlined" style="font-size:13px">light_mode</span>
                </button>
                <button id="btn-tema-oscuro"
                  class="px-2 py-1 text-slate-500 hover:text-slate-300 transition-colors flex items-center"
                  title="Modo oscuro">
                  <span class="material-symbols-outlined" style="font-size:13px">dark_mode</span>
                </button>
              </div>
              <span id="guion-filename" class="text-[10px] text-slate-500 font-mono truncate max-w-[180px]">Sin archivo cargado</span>
              <button id="btn-copy-guion" class="hidden p-1 text-slate-600 hover:text-sky-400 transition-colors rounded" title="Copiar guión al portapapeles">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
              </button>
              <button id="btn-print-guion" class="hidden p-1 text-slate-600 hover:text-emerald-400 transition-colors rounded" title="Imprimir guión">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                </svg>
              </button>
              <button id="btn-clear-guion" class="hidden p-1 text-slate-600 hover:text-rose-400 transition-colors rounded" title="Vaciar guión">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
          <div id="guion-viewer"
            class="flex-1 overflow-y-auto p-5 font-mono text-sm leading-relaxed text-slate-300 transition-colors"
            style="min-height: 460px; user-select: text; -webkit-user-select: text;"
            tabindex="-1"
            onkeydown="if(event.key==='z'||event.key==='y'||event.key==='Delete'||event.key==='Backspace') event.stopPropagation();">
            <div class="flex flex-col items-center justify-center h-full gap-4 text-center" id="guion-empty-state">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <div>
                <p class="text-slate-400 text-xs font-semibold">Arrastrá un guión aquí</p>
                <p class="text-slate-600 text-[10px] mt-1">PDF · DOCX · PPTX · TXT · o usá el botón Importar</p>
              </div>
              <div id="guion-drop-hint" class="hidden absolute inset-0 flex items-center justify-center bg-indigo-500/10 rounded-xl pointer-events-none">
                <p class="text-indigo-300 font-bold text-sm">Soltá para importar</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Columna derecha: resultado del desglose -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl flex flex-col overflow-hidden flex-1">
          <!-- Header fijo de la tarjeta -->
          <div class="flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-slate-800 bg-slate-900 rounded-t-xl">
            <h3 class="text-sm font-bold text-slate-300 flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
              </svg>
              Desglose detectado
            </h3>
            <div class="flex items-center gap-2">
              <span id="desglose-count" class="text-[13px] text-slate-500">0 escenas</span>
              <button id="btn-clear-desglose" class="hidden p-1 text-slate-600 hover:text-rose-400 transition-colors rounded" title="Limpiar desglose">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
          <div id="desglose-viewer" class="flex-1 overflow-y-auto p-4 space-y-3">
            <div class="flex flex-col items-center justify-center h-full gap-4 text-center opacity-40" id="desglose-empty-state">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <p class="text-slate-500 text-sm">El desglose aparecerá aquí<br>después de analizar el guión</p>
            </div>
          </div>
        </div>

      </div><!-- FIN ÁREA PRINCIPAL -->

    </section>

    <section id="pane-glossary" class="flex flex-col flex-1 overflow-hidden hidden">
      <div class="flex-1 overflow-y-auto p-6 space-y-6">

      <!-- Header del manual -->
      <div class="bg-slate-900 border border-slate-800 rounded-xl p-5">
        <div class="flex items-start justify-between">
          <div>
            <h2 class="text-base font-bold text-white">Manual de Usuario & Glosario de Producción</h2>
            <p class="text-slate-400 text-xs mt-1">Master Breakdown & Plan de Rodaje · v10.12 · Mayo 2026</p>
          </div>
          <span class="bg-indigo-500/20 text-indigo-300 text-[10px] font-bold px-2 py-1 rounded-full border border-indigo-500/30">v10.12</span>
        </div>
        <p class="text-slate-400 text-xs mt-3 leading-relaxed">
          Aplicación de archivo único (single-file HTML) para la gestión integral de producción de series verticales y comerciales. Sin servidor requerido — toda la persistencia es local vía localStorage, con sincronización opcional a api.php.
        </p>
      </div>

      <!-- Grid principal: 2 columnas -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- COL 1: Módulos de la app -->
        <div class="space-y-4">

          <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">
            <h3 class="text-sm font-bold text-white flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" /></svg>
              Módulos de la aplicación
            </h3>
            <div class="space-y-3 text-xs">
              <div class="p-3 bg-slate-800/60 rounded-lg">
                <h4 class="font-bold text-slate-200 mb-1">Dashboard</h4>
                <p class="text-slate-400 leading-relaxed">Métricas de producción en tiempo real: total de escenas, distribución por jornada, locaciones y personajes. Vista ejecutiva para el productor.</p>
              </div>
              <div class="p-3 bg-slate-800/60 rounded-lg">
                <h4 class="font-bold text-slate-200 mb-1">Master Breakdown</h4>
                <p class="text-slate-400 leading-relaxed">Tabla filtrable de todas las escenas del guión. Incluye locación, INT/EXT, DÍA/NOCHE, personajes, props, alertas de producción y complejidad. Base para el desglose técnico.</p>
              </div>
              <div class="p-3 bg-slate-800/60 rounded-lg">
                <h4 class="font-bold text-slate-200 mb-1">Stripboard</h4>
                <p class="text-slate-400 leading-relaxed">Vista kanban (por días) y tabla densa del orden de rodaje. Permite reasignar escenas a diferentes jornadas. Refleja el orden de producción, no el orden narrativo.</p>
              </div>
              <div class="p-3 bg-slate-800/60 rounded-lg">
                <h4 class="font-bold text-slate-200 mb-1">Plan de Rodaje</h4>
                <p class="text-slate-400 leading-relaxed">Cronograma detallado por jornada. Muestra escenas del día con sus llamados, locaciones y observaciones de producción.</p>
              </div>
              <div class="p-3 bg-slate-800/60 rounded-lg">
                <h4 class="font-bold text-slate-200 mb-1">Shooting Board</h4>
                <p class="text-slate-400 leading-relaxed">Storyboard dinámico con soporte multi-formato (9:16, 16:9, 1:1, 4:3, 2.39:1). Cada plano es una tarjeta con boceto, tipo de toma, descripción técnica y badge de categoría. Soporta drag-and-drop, clonación, operaciones en lote y exportación a PDF.</p>
              </div>
            </div>
          </div>

          <!-- Shortcuts -->
          <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-3">
            <h3 class="text-sm font-bold text-white flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" /></svg>
              Atajos de teclado
            </h3>
            <div class="space-y-2 text-xs font-mono">
              <div class="flex justify-between items-center py-1.5 border-b border-slate-800">
                <span class="text-slate-400">Deshacer acción</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Ctrl + Z</span>
              </div>
              <div class="flex justify-between items-center py-1.5 border-b border-slate-800">
                <span class="text-slate-400">Rehacer acción</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Ctrl + Y</span>
              </div>
              <div class="flex justify-between items-center py-1.5 border-b border-slate-800">
                <span class="text-slate-400">Cerrar selección batch</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Escape</span>
              </div>
              <div class="flex justify-between items-center py-1.5 border-b border-slate-800">
                <span class="text-slate-400">Selección múltiple de planos</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Shift + Click</span>
              </div>
              <div class="flex justify-between items-center py-1.5 border-b border-slate-800">
                <span class="text-slate-400">Clonar plano al arrastrarlo</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Alt + Drag</span>
              </div>
              <div class="flex justify-between items-center py-1.5">
                <span class="text-slate-400">Cerrar inspector</span>
                <span class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]">Escape</span>
              </div>
            </div>
          </div>

        </div>

        <!-- COL 2: Glosario técnico + flujos -->
        <div class="space-y-4">

          <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">
            <h3 class="text-sm font-bold text-white flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
              Glosario de producción
            </h3>
            <div class="space-y-3 text-xs">
              <div>
                <h4 class="font-bold text-slate-200">Desglose técnico (Script Breakdown)</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Lectura quirúrgica del guión para identificar todos los elementos físicos necesarios: actores, vestuario, utilería, locaciones, efectos especiales, etc. Es el insumo base del Master Breakdown.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Stripboard</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Orden visual de producción. Cada escena es una tira móvil que se organiza por día de rodaje según eficiencia logística, no por orden narrativo del guión.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Day Out of Days (DOOD)</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Tabla que muestra qué días específicos trabaja cada actor o recurso. Herramienta crítica para controlar costos: evita pagar días de inactividad a talento contratado por día.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Llamado (Call time)</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Hora a la que cada departamento debe estar en el set. Los llamados son escalonados: Producción y Arte llegan primero, el Director llega último, el Cliente/Agencia aún después.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Ready to Shoot</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Hito del día de rodaje que marca el momento en que la cámara está lista para grabar. Todo debe estar resuelto antes de este punto: luz, arte, talento, producto.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Aspect Ratio (Formato de aspecto)</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Proporción ancho:alto del cuadro de cámara. 9:16 es vertical (series/redes sociales), 16:9 es horizontal (TV/cine), 1:1 es cuadrado (Instagram), 2.39:1 es cinemascope. Cada plano en el Shooting Board puede tener su propio formato.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Batch operations</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Operaciones en lote sobre múltiples planos seleccionados a la vez: eliminar, clonar, mover de página, reasignar escena o cambiar etiqueta. Se activan seleccionando planos con Shift+Click.</p>
              </div>
              <div>
                <h4 class="font-bold text-slate-200">Badge (Etiqueta de plano)</h4>
                <p class="text-slate-400 mt-1 leading-relaxed">Categoría visual de un plano en el Shooting Board. Ejemplos: "Establecimiento", "Reacción", "Inserto", "VFX", "Pendiente". Permite filtrar y agrupar planos por tipo en producción.</p>
              </div>
            </div>
          </div>

          <!-- Reglas de producción -->
          <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-3">
            <h3 class="text-sm font-bold text-white flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
              Reglas de oro de producción
            </h3>
            <div class="space-y-3 text-xs">
              <div class="p-3 bg-indigo-500/10 rounded-lg border border-indigo-500/20">
                <strong class="text-indigo-200 font-bold block mb-1">Regla de la luz</strong>
                <p class="text-indigo-300 leading-relaxed">Si un espacio de luz cambia, se rueda todo lo de ese espacio junto — sin importar que las escenas pertenezcan al inicio, al medio o al final del guión narrativo.</p>
              </div>
              <div class="p-3 bg-emerald-500/10 rounded-lg border border-emerald-500/20">
                <strong class="text-emerald-200 font-bold block mb-1">Regla del vestuario</strong>
                <p class="text-emerald-300 leading-relaxed">En guiones con alternativas de decisión, los actores deben mantener el mismo vestuario para que las rutas alternativas se puedan editar juntas. Agrupar escenas del mismo look.</p>
              </div>
              <div class="p-3 bg-amber-500/10 rounded-lg border border-amber-500/20">
                <strong class="text-amber-200 font-bold block mb-1">Regla del DOOD</strong>
                <p class="text-amber-300 leading-relaxed">Nunca dejar huecos de días inactivos entre las apariciones de un actor contratado por día. Un actor que trabaja el lunes y el miércoles, pero no el martes, cuesta tres días aunque ruede dos.</p>
              </div>
              <div class="p-3 bg-rose-500/10 rounded-lg border border-rose-500/20">
                <strong class="text-rose-200 font-bold block mb-1">Regla del respaldo</strong>
                <p class="text-rose-300 leading-relaxed">Exportar el proyecto a JSON antes de cada día de rodaje. El archivo HTML guarda todo en el navegador — si se borra el caché, se pierden los datos. La copia JSON es el seguro.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Fila completa: Persistencia y arquitectura técnica -->
      <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">
        <h3 class="text-sm font-bold text-white flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 3 8 3s8-.79 8-3V7M4 7c0 2.21 3.582 3 8 3s8-.79 8-3M4 7c0-2.21 3.582 3-8 3m0 5c0 2.21 3.582 3 8 3s8-.79 8-3" /></svg>
          Arquitectura técnica & persistencia
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
          <div>
            <h4 class="font-bold text-slate-200 mb-2">Claves de localStorage</h4>
            <div class="space-y-2 font-mono">
              <div class="p-2 bg-slate-800 rounded">
                <span class="text-indigo-400">shooting_frames_enrique</span>
                <p class="text-slate-500 mt-0.5 font-sans">Array de planos del Shooting Board</p>
              </div>
              <div class="p-2 bg-slate-800 rounded">
                <span class="text-indigo-400">board_settings_enrique</span>
                <p class="text-slate-500 mt-0.5 font-sans">Config de impresión y paginación</p>
              </div>
              <div class="p-2 bg-slate-800 rounded">
                <span class="text-indigo-400">scenes_enrique</span>
                <p class="text-slate-500 mt-0.5 font-sans">Overrides de metadata de escenas</p>
              </div>
              <div class="p-2 bg-slate-800 rounded">
                <span class="text-indigo-400">project_metadata_enrique</span>
                <p class="text-slate-500 mt-0.5 font-sans">Título, versión y config del proyecto</p>
              </div>
            </div>
            <p class="text-rose-400 mt-2 font-sans">⚠ No renombrar estas claves — rompe datos en producción.</p>
          </div>
          <div>
            <h4 class="font-bold text-slate-200 mb-2">Flujo de datos</h4>
            <div class="space-y-2 text-slate-400 leading-relaxed">
              <p><span class="text-slate-300 font-bold">Al abrir:</span> initCloud() carga escenas y metadata desde localStorage. Si no existen, usa DEFAULT_PROJECT. Luego intenta sincronizar con api.php.</p>
              <p><span class="text-slate-300 font-bold">Al modificar:</span> commitChange() guarda en localStorage y renderiza. Si hay servidor, lo sincroniza.</p>
              <p><span class="text-slate-300 font-bold">Al exportar JSON:</span> exportProject() serializa todo el estado actual a un archivo descargable.</p>
              <p><span class="text-slate-300 font-bold">Polling:</span> La app consulta api.php cada pocos segundos para detectar cambios de otro usuario en tiempo real.</p>
            </div>
          </div>
          <div>
            <h4 class="font-bold text-slate-200 mb-2">Formatos de aspecto soportados</h4>
            <div class="space-y-2">
              <div class="flex items-center gap-2 p-2 bg-slate-800 rounded">
                <div class="w-6 h-10 bg-indigo-500/30 border border-indigo-500/50 rounded-sm flex-shrink-0"></div>
                <div><span class="text-slate-200 font-bold">9:16</span><span class="text-slate-500 ml-2">Vertical · Series · Redes</span></div>
              </div>
              <div class="flex items-center gap-2 p-2 bg-slate-800 rounded">
                <div class="w-10 h-6 bg-indigo-500/30 border border-indigo-500/50 rounded-sm flex-shrink-0"></div>
                <div><span class="text-slate-200 font-bold">16:9</span><span class="text-slate-500 ml-2">Horizontal · TV · Cine</span></div>
              </div>
              <div class="flex items-center gap-2 p-2 bg-slate-800 rounded">
                <div class="w-7 h-7 bg-indigo-500/30 border border-indigo-500/50 rounded-sm flex-shrink-0"></div>
                <div><span class="text-slate-200 font-bold">1:1</span><span class="text-slate-500 ml-2">Cuadrado · Instagram</span></div>
              </div>
              <div class="flex items-center gap-2 p-2 bg-slate-800 rounded">
                <div class="w-9 h-7 bg-indigo-500/30 border border-indigo-500/50 rounded-sm flex-shrink-0"></div>
                <div><span class="text-slate-200 font-bold">4:3</span><span class="text-slate-500 ml-2">Clásico · Retro</span></div>
              </div>
              <div class="flex items-center gap-2 p-2 bg-slate-800 rounded">
                <div class="w-12 h-5 bg-indigo-500/30 border border-indigo-500/50 rounded-sm flex-shrink-0"></div>
                <div><span class="text-slate-200 font-bold">2.39:1</span><span class="text-slate-500 ml-2">Cinemascope</span></div>
              </div>
            </div>
            <p class="text-slate-500 mt-2">El formato se hereda del proyecto. Cada plano puede tener su propio override.</p>
          </div>
        </div>
      </div>
      </div><!-- fin scroll glossary -->

    </section>

    <!-- PANE REFERENCIAS -->
    <section id="pane-references" class="flex flex-col flex-1 overflow-hidden hidden text-white">
      <div class="flex-1 overflow-y-auto p-6 space-y-6">

        <!-- Header de referencias -->
        <div class="bg-gradient-to-r from-indigo-950/20 via-slate-900 to-slate-900 border border-slate-800 p-6 rounded-2xl relative overflow-hidden">
          <div class="absolute -right-10 -bottom-10 opacity-10 w-60 h-60 bg-indigo-500 rounded-full blur-3xl"></div>
          <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="space-y-1">
              <span class="text-xs font-semibold uppercase tracking-wider text-indigo-400">Inspiración de Producción</span>
              <h2 class="text-2xl font-black text-white">Referencias y Galería de Arte</h2>
              <p class="text-slate-300 max-w-3xl text-sm leading-relaxed">
                Organiza imágenes, videos o enlaces web para la construcción visual y el tono estético de tu proyecto por departamentos de arte, casting, locaciones y cámara.
              </p>
            </div>
            <button id="btn-add-reference" class="shrink-0 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-sm font-bold rounded-xl transition-all shadow-lg flex items-center gap-2 border border-indigo-500/20 hover:scale-[1.02] active:scale-95">
              <span class="material-symbols-outlined text-[20px]">add</span>
              Agregar Referencia
            </button>
          </div>
        </div>

        <!-- Filtros y estadísticas -->
        <div class="flex flex-col gap-4 border-b border-slate-800 pb-4">
          <!-- Filtro por Tipo -->
          <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap items-center gap-1.5">
              <span class="text-xs text-slate-500 font-semibold uppercase mr-2 tracking-wider">Tipo:</span>
              <button id="ref-filter-all" class="ref-filter-btn px-3 py-1 bg-indigo-600 text-white text-xs font-bold rounded-lg hover:bg-indigo-500 transition-colors shadow">Todos</button>
              <button id="ref-filter-image" class="ref-filter-btn px-3 py-1 bg-slate-900 border border-slate-800 text-slate-400 text-xs font-bold rounded-lg hover:bg-slate-800 hover:text-white transition-colors flex items-center gap-1">
                <span class="material-symbols-outlined text-[16px]">image</span> Imágenes
              </button>
              <button id="ref-filter-video" class="ref-filter-btn px-3 py-1 bg-slate-900 border border-slate-800 text-slate-400 text-xs font-bold rounded-lg hover:bg-slate-800 hover:text-white transition-colors flex items-center gap-1">
                <span class="material-symbols-outlined text-[16px]">movie</span> Videos
              </button>
              <button id="ref-filter-link" class="ref-filter-btn px-3 py-1 bg-slate-900 border border-slate-800 text-slate-400 text-xs font-bold rounded-lg hover:bg-slate-800 hover:text-white transition-colors flex items-center gap-1">
                <span class="material-symbols-outlined text-[16px]">link</span> Enlaces
              </button>
            </div>
            <span id="ref-counter" class="text-xs text-slate-400 font-semibold bg-slate-900 border border-slate-800 px-3 py-1 rounded-lg">0 referencias</span>
          </div>

          <!-- Filtro por Categoría (Departamentos Filmustage) -->
          <div class="flex flex-wrap items-center gap-1.5">
            <span class="text-xs text-slate-500 font-semibold uppercase mr-2 tracking-wider">Categoría:</span>
            <button id="ref-cat-all" class="ref-cat-btn px-3 py-1 bg-slate-800 text-slate-200 text-xs font-bold rounded-md hover:bg-slate-700 transition-colors">Todas</button>
            <button id="ref-cat-inspiration" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Inspiración / Estilo</button>
            <button id="ref-cat-casting" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Personajes / Casting</button>
            <button id="ref-cat-locations" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Locaciones</button>
            <button id="ref-cat-camera" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Cámara / Storyboard</button>
            <button id="ref-cat-props" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Utilería / Props</button>
            <button id="ref-cat-other" class="ref-cat-btn px-3 py-1 bg-transparent border border-slate-800 text-slate-400 hover:text-slate-200 text-xs font-bold rounded-md hover:bg-slate-800 transition-colors">Otros</button>
          </div>
        </div>

        <!-- Grid de Referencias -->
        <div id="references-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <!-- Se poblará dinámicamente -->
        </div>

        <!-- Vista vacía -->
        <div id="references-empty" class="flex flex-col items-center justify-center p-16 bg-slate-900/40 border border-dashed border-slate-800 rounded-2xl text-center space-y-4">
          <div class="w-16 h-16 bg-indigo-500/10 border border-indigo-500/20 rounded-full flex items-center justify-center">
            <span class="material-symbols-outlined text-indigo-400 text-3xl">collections</span>
          </div>
          <div>
            <h3 class="text-base font-bold text-slate-200">Sin referencias</h3>
            <p class="text-xs text-slate-400 mt-1 max-w-sm">Agrega imágenes de ambientación, enlaces a videos (como YouTube o Vimeo) o sitios web de inspiración para la producción.</p>
          </div>
          <button id="btn-add-reference-empty" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-xs font-bold rounded-lg shadow-md transition-colors border border-indigo-500/20">
            Cargar primera referencia
          </button>
        </div>

      </div>
    </section>

  </main>


  <!-- ============================================================
       INSPECTOR GLOBAL — Toggleable, estilo DaVinci Resolve
       Tabs contextuales según módulo + tab Proyecto siempre visible
       ============================================================ -->
  <aside id="global-inspector" class="w-80 shrink-0 bg-slate-900 border-l border-slate-800 flex flex-col transition-all">
    <!-- Header con tabs -->
    <div class="flex-shrink-0 p-2 border-b border-slate-800 bg-slate-950">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-bold text-indigo-400 uppercase tracking-wider flex items-center gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Inspector
        </span>
        <button id="btn-close-inspector" class="text-slate-500 hover:text-rose-400 transition-colors p-1" title="Cerrar Inspector (ESC)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div id="inspector-tabs" class="flex gap-1">
        <button id="insp-tab-proyecto" data-tab="proyecto"
          class="flex-1 px-2 py-1.5 text-[10px] font-bold rounded transition-all bg-indigo-600/30 text-indigo-300 border border-indigo-500/40">
          ⚙️ Proyecto
        </button>
        <button id="insp-tab-toma" data-tab="toma"
          class="hidden flex-1 px-2 py-1.5 text-[10px] font-bold rounded transition-all text-slate-400 hover:text-slate-200 hover:bg-slate-800">
          🎬 Toma
        </button>
        <button id="insp-tab-escena" data-tab="escena"
          class="hidden flex-1 px-2 py-1.5 text-[10px] font-bold rounded transition-all text-slate-400 hover:text-slate-200 hover:bg-slate-800">
          📋 Escena
        </button>
        <button id="insp-tab-notas" data-tab="notas"
          class="hidden flex-1 px-2 py-1.5 text-[10px] font-bold rounded transition-all text-slate-400 hover:text-slate-200 hover:bg-slate-800">
          📝 Notas
        </button>
      </div>
    </div>

    <!-- Contenido dinámico -->
    <div id="inspector-content" class="flex-1 overflow-y-auto">

      <!-- TAB: PROYECTO (siempre visible) -->
      <div id="insp-content-proyecto" class="p-4 space-y-5">

        <!-- Info del Proyecto -->
        <div>
          <h5 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
            Información del Proyecto
          </h5>
          <div class="space-y-2.5">
            <div>
              <label class="block text-[10px] text-slate-500 font-semibold mb-1">Título del Proyecto</label>
              <input type="text" id="proj-title" placeholder="Mi Proyecto"
                class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-[10px] text-slate-500 font-semibold mb-1">Director</label>
              <input type="text" id="proj-director" placeholder="Nombre del Director"
                class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-[10px] text-slate-500 font-semibold mb-1">Productora</label>
              <input type="text" id="proj-productora" placeholder="Nombre de la Productora"
                class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Fecha de Inicio</label>
                <input type="date" id="proj-fecha-inicio"
                  class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none cursor-pointer"
                  style="color-scheme: dark;">
              </div>
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Fecha Final</label>
                <input type="date" id="proj-fecha-final"
                  class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none cursor-pointer"
                  style="color-scheme: dark;">
              </div>
            </div>
          </div>
        </div>

        <!-- Configuración de Rodaje -->
        <div>
          <h5 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Configuración de Rodaje
          </h5>
          <div class="space-y-2.5">
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Días de Grabación</label>
                <div class="flex items-center gap-1">
                  <button id="btn-days-down" class="px-1.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-xs transition-colors">−</button>
                  <input type="number" id="proj-days" min="1" max="30" value="3"
                    class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 text-center focus:border-indigo-500 focus:outline-none">
                  <button id="btn-days-up" class="px-1.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-xs transition-colors">+</button>
                </div>
              </div>
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Horas/Jornada</label>
                <input type="number" id="proj-horas" min="1" max="24" value="12"
                  class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 text-center focus:border-indigo-500 focus:outline-none">
              </div>
            </div>
            <div>
              <label class="block text-[10px] text-slate-500 font-semibold mb-1">Formato de Aspecto</label>
              <select id="proj-aspect"
                class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none font-semibold">
                <option value="16:9">16:9 — Horizontal (Estándar)</option>
                <option value="9:16">9:16 — Vertical (Shorts/Reels)</option>
                <option value="1:1">1:1 — Cuadrado</option>
                <option value="4:3">4:3 — Clásico</option>
                <option value="2.39:1">2.39:1 — CinemaScope</option>
              </select>
            </div>
            <div>
              <label class="block text-[10px] text-slate-500 font-semibold mb-1">Locación Principal</label>
              <input type="text" id="proj-locacion" placeholder="Ej: Mansión, Estudio A..."
                class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
            </div>
          </div>
        </div>

        <!-- Sinopsis -->
        <div>
          <h5 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
            Sinopsis
          </h5>
          <textarea id="proj-sinopsis" rows="4" placeholder="Breve descripción del proyecto..."
            class="w-full bg-slate-950 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none resize-none leading-relaxed"></textarea>
        </div>

        <!-- Importar / Exportar -->
        <div>
          <h5 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
            Datos del Proyecto
          </h5>
          <div class="space-y-2">
            <button id="btn-insp-import-json"
              class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-xs font-semibold transition-colors border border-slate-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
              </svg>
              Importar JSON
            </button>
            <input type="file" id="insp-import-file" accept=".json" class="hidden">
            <div class="grid grid-cols-2 gap-2">
              <button id="btn-insp-export-json"
                class="flex items-center justify-center gap-1.5 px-3 py-2 bg-indigo-600/20 hover:bg-indigo-600 text-indigo-300 hover:text-white rounded text-xs font-semibold transition-colors border border-indigo-500/30">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                Exportar
              </button>
              <button id="btn-insp-export-csv"
                class="flex items-center justify-center gap-1.5 px-3 py-2 bg-emerald-600/20 hover:bg-emerald-600 text-emerald-300 hover:text-white rounded text-xs font-semibold transition-colors border border-emerald-500/30">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                CSV
              </button>
            </div>
            <button id="btn-insp-reset-project"
              class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 rounded text-xs font-semibold transition-colors border border-rose-500/20">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              Reset a Default
            </button>
          </div>
        </div>

        <!-- Botón Guardar -->
        <button id="btn-save-project"
          class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-xs font-bold transition-colors shadow-lg shadow-indigo-500/20">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
          Guardar Configuración
        </button>
      </div>

      <!-- TAB: TOMA (contextual — Stripboard / Shooting Board) -->
      <div id="insp-content-toma" class="hidden p-4 space-y-4">
        <div class="aspect-video bg-slate-950 rounded-lg border border-slate-800 flex items-center justify-center overflow-hidden relative">
          <img id="inspector-image" src="" class="object-cover w-full h-full hidden" alt="Referencia Visual">
          <span id="inspector-no-image" class="text-[10px] font-mono text-slate-600">Sin imagen</span>
        </div>
        <div class="space-y-3">
          <div>
            <span class="text-[10px] text-slate-500 font-bold uppercase">ID / Escena</span>
            <div id="inspector-title" class="text-white font-mono font-bold text-sm"></div>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <span class="text-[10px] text-slate-500 font-bold uppercase">Tipo de Plano</span>
              <div id="inspector-type" class="text-indigo-300 font-semibold text-xs truncate" title=""></div>
            </div>
            <div>
              <span class="text-[10px] text-slate-500 font-bold uppercase">Locación</span>
              <div id="inspector-loc" class="text-slate-300 text-xs truncate" title=""></div>
            </div>
          </div>
          <div>
            <span class="text-[10px] text-slate-500 font-bold uppercase">Descripción de la Acción</span>
            <div id="inspector-desc" class="text-slate-300 text-xs leading-relaxed bg-slate-950 p-2 rounded border border-slate-800"></div>
          </div>
          <div>
            <span class="text-[10px] text-slate-500 font-bold uppercase">Talento (Cast)</span>
            <div id="inspector-cast" class="text-emerald-400 font-mono text-[10px] truncate" title=""></div>
          </div>
          <div>
            <span class="text-[10px] text-slate-500 font-bold uppercase">Etiqueta</span>
            <div>
              <span id="inspector-badge" class="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px] border border-slate-700 inline-block mt-1"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- TAB: ESCENA (contextual — Breakdown) -->
      <div id="insp-content-escena" class="hidden p-4 space-y-4">
        <div id="escena-inspector-content" class="space-y-3">
          <p class="text-slate-500 text-xs text-center py-8">Seleccioná una escena en el Master Breakdown para ver sus detalles aquí.</p>
        </div>
      </div>

      <!-- TAB: NOTAS (notas de producción) -->
      <div id="insp-content-notas" class="hidden p-4 space-y-4">
        <div id="notas-inspector-content" class="space-y-3">
          <p class="text-slate-500 text-xs text-center py-8">Sin notas de producción para esta escena.</p>
        </div>
      </div>

    </div>
  </aside>

  </div><!-- fin app-layout -->

  <!-- ============================================================
       PROJECT MANAGER — Estilo DaVinci Resolve (pantalla completa)
       ============================================================ -->
  <div id="pm-overlay" class="hidden fixed inset-0 z-[80] flex flex-col overflow-y-auto" style="background: #1a1a1a;">

    <!-- Barra de navegación superior -->
    <div class="flex items-center border-b border-slate-800/80 px-4 h-12 gap-4 shrink-0" style="background: #232323;">
      <!-- Botón cerrar (solo visible cuando hay proyecto activo) -->
      <button id="pm-close-btn" class="hidden w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-colors" onclick="ProjectManager.hide()">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>

      <!-- Logo centrado -->
      <div class="flex-1 flex items-center justify-center gap-2">
        <div class="w-5 h-5 bg-indigo-600 rounded flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4"/>
          </svg>
        </div>
        <span class="text-sm font-bold text-slate-300 tracking-tight">Master Breakdown</span>
      </div>

      <!-- Controles derecha: vista grilla/lista + búsqueda + perfil -->
      <div class="flex items-center gap-2">
        <div class="flex items-center bg-slate-800 rounded overflow-hidden border border-slate-700">
          <button id="pm-view-grid" onclick="ProjectManager.setView('grid')"
            class="p-1.5 text-white transition-colors" style="background: rgba(99,102,241,0.3);" title="Vista grilla">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
            </svg>
          </button>
          <button id="pm-view-list" onclick="ProjectManager.setView('list')"
            class="p-1.5 text-slate-500 hover:text-slate-300 transition-colors" title="Vista lista">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
            </svg>
          </button>
        </div>
        <div class="flex items-center gap-1.5 bg-slate-800 border border-slate-700 rounded px-2 py-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
          <input id="pm-search" type="text" placeholder="Buscar…"
            class="bg-transparent text-xs text-slate-300 placeholder-slate-600 focus:outline-none w-28"
            oninput="ProjectManager.filterList(this.value)">
        </div>

        <!-- Menú 3 puntos de usuario -->
        <div class="relative">
          <button id="pm-menu-btn"
            class="w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
            </svg>
          </button>
          <div id="pm-menu-dropdown" class="hidden absolute right-0 top-8 w-48 bg-slate-800 border border-slate-700 rounded-lg shadow-xl z-50 py-1">
            <div class="px-3 py-2 border-b border-slate-700">
              <p id="pm-user-email" class="text-[11px] text-slate-200 font-semibold truncate"></p>
              <p id="pm-user-role" class="text-[10px] text-slate-400 capitalize"></p>
            </div>
            <button id="btn-pm-logout"
              class="w-full text-left px-3 py-2 text-xs text-rose-400 hover:bg-slate-700 flex items-center gap-2 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
              </svg>
              Cerrar sesión
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Contenido principal con barra lateral -->
    <div class="flex-1 flex overflow-hidden">
      <!-- BARRA LATERAL IZQUIERDA: Árbol de Carpetas -->
      <aside id="pm-sidebar" class="w-64 border-r border-slate-800/80 p-5 flex flex-col shrink-0 overflow-y-auto no-print" style="background:#1d1d1d;">
        <div id="pm-sidebar-tree" class="flex-1 space-y-1 text-xs select-none">
          <!-- Árbol de carpetas generado dinámicamente -->
        </div>
      </aside>

      <!-- Panel de Contenido Derecho -->
      <div class="flex-1 overflow-y-auto px-6 py-8">

        <!-- Header: Título + Acciones -->
        <div class="flex items-center justify-between mb-6">
          <h1 class="text-xl font-bold text-white tracking-tight">Lista de proyectos</h1>
          <div class="flex items-center gap-2">
            <span id="pm-footer-info" class="text-[10px] text-slate-600 mr-1"></span>
            <div id="pm-header-actions" class="flex items-center gap-2">
              <!-- Botones de acción inyectados dinámicamente por JS según la pestaña activa -->
            </div>
          </div>
        </div>

        <!-- Tabs: Activos / Archivados -->
        <div class="flex items-center border-b border-slate-800/60 mb-6">
          <div class="flex items-center">
            <button id="pm-tab-active"
              onclick="ProjectManager.switchTab('active')"
              class="px-4 py-2.5 text-xs font-bold border-b-2 border-indigo-500 transition-all"
              style="color: #fff;">
              Proyectos Activos
            </button>
            <button id="pm-tab-archived"
              onclick="ProjectManager.switchTab('archived')"
              class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent transition-all"
              style="color: #666;">
              Archivados (Histórico)
            </button>
          </div>
          <div id="pm-breadcrumb" class="flex items-center gap-1 text-xs text-slate-400 ml-4">
            <!-- generado dinámicamente por JS -->
          </div>
        </div>

        <!-- Grid de proyectos -->
        <div id="pm-project-list" class="grid gap-5" style="grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));">
          <div class="col-span-full flex items-center justify-center py-20 gap-2 text-slate-600 text-sm">
            <svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
            Cargando proyectos…
          </div>
        </div>

      </div>
    </div>

    <!-- Input oculto para subida de imagen de portada -->
    <input type="file" id="pm-cover-upload-input" class="hidden" accept="image/*">

    <!-- Footer vacío (eliminado) -->
    <!-- Los botones de footer-left y footer-right se mantienen como contenedores ocultos
         para no romper los event listeners existentes en notes-projects.js -->
    <div id="pm-footer-left" class="hidden"></div>
    <div id="pm-footer-right" class="hidden"></div>

    <!-- Panel crear proyecto (oculto por defecto) -->
    <div id="pm-create-panel" class="hidden fixed inset-0 z-[90] flex items-center justify-center" style="background: rgba(0,0,0,0.7);">
      <div class="w-full max-w-sm rounded-xl border border-slate-700 p-6 flex flex-col gap-4 shadow-2xl" style="background: #2a2a2a;">
        <h3 class="text-sm font-bold text-white">Crear nuevo proyecto</h3>
        <input id="pm-new-title" type="text" placeholder="Nombre del proyecto…"
          class="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none transition-all w-full"
          onkeydown="if(event.key==='Enter') ProjectManager.create(); if(event.key==='Escape') ProjectManager.hideCreateForm()">
        <div class="flex gap-2 justify-end">
          <button onclick="ProjectManager.hideCreateForm()"
            class="px-4 py-2 text-xs font-semibold rounded border border-slate-600 text-slate-400 hover:text-white transition-colors" style="background: #333;">
            Cancelar
          </button>
          <button onclick="ProjectManager.create()"
            class="px-5 py-2 text-xs font-bold rounded text-white transition-all" style="background: #4f46e5;">
            Crear
          </button>
        </div>
      </div>
    </div>

    <!-- Panel crear carpeta (oculto por defecto) -->
    <div id="pm-create-folder-panel" class="hidden fixed inset-0 z-[90] flex items-center justify-center" style="background: rgba(0,0,0,0.7);">
      <div class="w-full max-w-sm rounded-xl border border-slate-700 p-6 flex flex-col gap-4 shadow-2xl" style="background: #2a2a2a;">
        <h3 class="text-sm font-bold text-white">Crear nueva carpeta</h3>
        <input id="pm-new-folder-name" type="text" placeholder="Nombre de la carpeta…"
          class="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none transition-all w-full"
          onkeydown="if(event.key==='Enter') ProjectManager.createFolder(); if(event.key==='Escape') ProjectManager.hideCreateFolderForm()">
        
        <!-- Selector de color premium -->
        <div class="flex flex-col gap-1.5">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Color de carpeta</label>
          <div class="flex gap-2" id="pm-folder-color-choices">
            <button onclick="ProjectManager.setNewFolderColor('#6366f1', this)" class="w-6 h-6 rounded-full border-2 border-white" style="background:#6366f1;" title="Indigo"></button>
            <button onclick="ProjectManager.setNewFolderColor('#10b981', this)" class="w-6 h-6 rounded-full border-2 border-transparent" style="background:#10b981;" title="Emerald"></button>
            <button onclick="ProjectManager.setNewFolderColor('#f59e0b', this)" class="w-6 h-6 rounded-full border-2 border-transparent" style="background:#f59e0b;" title="Amber"></button>
            <button onclick="ProjectManager.setNewFolderColor('#ef4444', this)" class="w-6 h-6 rounded-full border-2 border-transparent" style="background:#ef4444;" title="Rose"></button>
            <button onclick="ProjectManager.setNewFolderColor('#8b5cf6', this)" class="w-6 h-6 rounded-full border-2 border-transparent" style="background:#8b5cf6;" title="Violet"></button>
            <button onclick="ProjectManager.setNewFolderColor('#ec4899', this)" class="w-6 h-6 rounded-full border-2 border-transparent" style="background:#ec4899;" title="Pink"></button>
          </div>
        </div>

        <div class="flex gap-2 justify-end">
          <button onclick="ProjectManager.hideCreateFolderForm()"
            class="px-4 py-2 text-xs font-semibold rounded border border-slate-600 text-slate-400 hover:text-white transition-colors" style="background: #333;">
            Cancelar
          </button>
          <button onclick="ProjectManager.createFolder()"
            class="px-5 py-2 text-xs font-bold rounded text-white transition-all" style="background: #4f46e5;">
            Crear
          </button>
        </div>
      </div>
    </div>

  </div><!-- /#app-layout -->
  </div><!-- /#app-shell -->

  <div id="login-overlay" class="hidden">
    <div id="login-card"
      class="w-full max-w-sm mx-4 bg-slate-900 border border-slate-700/80 rounded-2xl shadow-[0_30px_80px_rgba(0,0,0,0.8)] p-8 flex flex-col gap-6 relative">

      <!-- Botón de cerrar para Grace Mode -->
      <button id="login-close-btn" onclick="Auth.hideLoginOverlay()" class="hidden absolute top-4 right-4 text-slate-500 hover:text-slate-300 transition-colors p-1" title="Continuar en modo local">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <!-- Logo + título -->
      <div class="flex flex-col items-center gap-3">
        <div id="login-logo"
          class="w-14 h-14 bg-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
          </svg>
        </div>
        <div class="text-center">
          <h2 class="text-lg font-black text-white tracking-tight">Master Breakdown</h2>
          <p id="auth-subtitle" class="text-xs text-slate-500 font-medium mt-0.5">Plan de Rodaje · Acceso Seguro</p>
        </div>
      </div>

      <!-- Alerta de error / info -->
      <div id="login-alert"
        class="hidden text-xs font-semibold px-3 py-2.5 rounded-lg border">
      </div>

      <!-- VISTA 1: INICIAR SESIÓN -->
      <div id="auth-view-login" class="flex flex-col gap-4">
        <form id="login-form" class="flex flex-col gap-4" onsubmit="Auth.handleLoginSubmit(event)">
          <div class="flex flex-col gap-1.5">
            <label for="login-email" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Correo electrónico</label>
            <input
              id="login-email"
              type="email"
              autocomplete="email"
              placeholder="tu@correo.com"
              required
              class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
            >
          </div>

          <div class="flex flex-col gap-1.5">
            <div class="flex justify-between items-center">
              <label for="login-password" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Contraseña</label>
              <button type="button" onclick="Auth.showView('forgot')" class="text-[11px] text-indigo-400 hover:text-indigo-300 font-semibold focus:outline-none">¿Olvidaste tu contraseña?</button>
            </div>
            <div class="relative w-full">
              <input
                id="login-password"
                type="password"
                autocomplete="current-password"
                placeholder="••••••••"
                required
                class="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
              >
              <button 
                type="button"
                onclick="const inp = document.getElementById('login-password'); const eyeOpen = this.querySelector('.eye-open'); const eyeClosed = this.querySelector('.eye-closed'); if(inp.type==='password'){inp.type='text'; eyeOpen.classList.add('hidden'); eyeClosed.classList.remove('hidden');}else{inp.type='password'; eyeOpen.classList.remove('hidden'); eyeClosed.classList.add('hidden');}" 
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-300 focus:outline-none"
              >
                <svg class="w-5 h-5 eye-open" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="w-5 h-5 eye-closed hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
              </button>
            </div>
          </div>

          <button
            id="login-submit-btn"
            type="submit"
            class="w-full flex items-center justify-center gap-2 mt-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-bold text-sm rounded-lg shadow-md shadow-indigo-500/20 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 disabled:opacity-60 disabled:cursor-not-allowed">
            <span id="login-btn-text">Ingresar</span>
            <svg id="login-spinner" class="hidden h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
          </button>
        </form>

        <div class="text-center text-xs text-slate-400 mt-2">
          ¿No tienes una cuenta? 
          <button onclick="Auth.showView('register')" class="text-indigo-400 hover:text-indigo-300 font-semibold focus:outline-none">Crea una</button>
        </div>
      </div>

      <!-- VISTA 2: REGISTRO (CREAR CUENTA) -->
      <div id="auth-view-register" class="hidden flex flex-col gap-4">
        <form id="register-form" class="flex flex-col gap-4" onsubmit="Auth.handleRegisterSubmit(event)">
          <div class="flex flex-col gap-1.5">
            <label for="register-email" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Correo electrónico</label>
            <input
              id="register-email"
              type="email"
              autocomplete="email"
              placeholder="tu@correo.com"
              required
              class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
            >
          </div>

          <div class="flex flex-col gap-1.5">
            <label for="register-password" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Contraseña (Mín. 6 caracteres)</label>
            <div class="relative w-full">
              <input
                id="register-password"
                type="password"
                autocomplete="new-password"
                placeholder="••••••••"
                required
                minlength="6"
                class="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
              >
              <button 
                type="button"
                onclick="const inp = document.getElementById('register-password'); const eyeOpen = this.querySelector('.eye-open'); const eyeClosed = this.querySelector('.eye-closed'); if(inp.type==='password'){inp.type='text'; eyeOpen.classList.add('hidden'); eyeClosed.classList.remove('hidden');}else{inp.type='password'; eyeOpen.classList.remove('hidden'); eyeClosed.classList.add('hidden');}" 
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-300 focus:outline-none"
              >
                <svg class="w-5 h-5 eye-open" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="w-5 h-5 eye-closed hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
              </button>
            </div>
          </div>

          <div class="flex flex-col gap-1.5">
            <label for="register-confirm-password" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Confirmar contraseña</label>
            <div class="relative w-full">
              <input
                id="register-confirm-password"
                type="password"
                autocomplete="new-password"
                placeholder="••••••••"
                required
                minlength="6"
                class="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
              >
              <button 
                type="button"
                onclick="const inp = document.getElementById('register-confirm-password'); const eyeOpen = this.querySelector('.eye-open'); const eyeClosed = this.querySelector('.eye-closed'); if(inp.type==='password'){inp.type='text'; eyeOpen.classList.add('hidden'); eyeClosed.classList.remove('hidden');}else{inp.type='password'; eyeOpen.classList.remove('hidden'); eyeClosed.classList.add('hidden');}" 
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-300 focus:outline-none"
              >
                <svg class="w-5 h-5 eye-open" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="w-5 h-5 eye-closed hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
              </button>
            </div>
          </div>

          <button
            id="register-submit-btn"
            type="submit"
            class="w-full flex items-center justify-center gap-2 mt-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-bold text-sm rounded-lg shadow-md shadow-indigo-500/20 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 disabled:opacity-60 disabled:cursor-not-allowed">
            <span id="register-btn-text">Registrarse</span>
            <svg id="register-spinner" class="hidden h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
          </button>
        </form>

        <div class="text-center text-xs text-slate-400 mt-2">
          ¿Ya tienes una cuenta? 
          <button onclick="Auth.showView('login')" class="text-indigo-400 hover:text-indigo-300 font-semibold focus:outline-none">Ingresa</button>
        </div>
      </div>

      <!-- VISTA 3: RECUPERAR CONTRASEÑA -->
      <div id="auth-view-forgot" class="hidden flex flex-col gap-4">
        <form id="forgot-form" class="flex flex-col gap-4" onsubmit="Auth.handleForgotSubmit(event)">
          <div class="flex flex-col gap-1.5">
            <label for="forgot-email" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Correo electrónico</label>
            <input
              id="forgot-email"
              type="email"
              autocomplete="email"
              placeholder="tu@correo.com"
              required
              class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
            >
          </div>

          <button
            id="forgot-submit-btn"
            type="submit"
            class="w-full flex items-center justify-center gap-2 mt-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-bold text-sm rounded-lg shadow-md shadow-indigo-500/20 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 disabled:opacity-60 disabled:cursor-not-allowed">
            <span id="forgot-btn-text">Enviar instrucciones</span>
            <svg id="forgot-spinner" class="hidden h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
          </button>
        </form>

        <div class="text-center text-xs text-slate-400 mt-2">
          <button onclick="Auth.showView('login')" class="text-indigo-400 hover:text-indigo-300 font-semibold focus:outline-none">Volver a Iniciar Sesión</button>
        </div>
      </div>

      <!-- VISTA 4: RESTABLECER CONTRASEÑA -->
      <div id="auth-view-reset" class="hidden flex flex-col gap-4">
        <form id="reset-form" class="flex flex-col gap-4" onsubmit="Auth.handleResetSubmit(event)">
          <input type="hidden" id="reset-token-input">

          <div class="flex flex-col gap-1.5">
            <label for="reset-password" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Nueva Contraseña (Mín. 6 caracteres)</label>
            <div class="relative w-full">
              <input
                id="reset-password"
                type="password"
                autocomplete="new-password"
                placeholder="••••••••"
                required
                minlength="6"
                class="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
              >
              <button 
                type="button"
                onclick="const inp = document.getElementById('reset-password'); const eyeOpen = this.querySelector('.eye-open'); const eyeClosed = this.querySelector('.eye-closed'); if(inp.type==='password'){inp.type='text'; eyeOpen.classList.add('hidden'); eyeClosed.classList.remove('hidden');}else{inp.type='password'; eyeOpen.classList.remove('hidden'); eyeClosed.classList.add('hidden');}" 
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-300 focus:outline-none"
              >
                <svg class="w-5 h-5 eye-open" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="w-5 h-5 eye-closed hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
              </button>
            </div>
          </div>

          <div class="flex flex-col gap-1.5">
            <label for="reset-confirm-password" class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Confirmar nueva contraseña</label>
            <div class="relative w-full">
              <input
                id="reset-confirm-password"
                type="password"
                autocomplete="new-password"
                placeholder="••••••••"
                required
                minlength="6"
                class="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2.5 text-sm text-slate-100 placeholder-slate-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 transition-all"
              >
              <button 
                type="button"
                onclick="const inp = document.getElementById('reset-confirm-password'); const eyeOpen = this.querySelector('.eye-open'); const eyeClosed = this.querySelector('.eye-closed'); if(inp.type==='password'){inp.type='text'; eyeOpen.classList.add('hidden'); eyeClosed.classList.remove('hidden');}else{inp.type='password'; eyeOpen.classList.remove('hidden'); eyeClosed.classList.add('hidden');}" 
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-300 focus:outline-none"
              >
                <svg class="w-5 h-5 eye-open" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="w-5 h-5 eye-closed hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
              </button>
            </div>
          </div>

          <button
            id="reset-submit-btn"
            type="submit"
            class="w-full flex items-center justify-center gap-2 mt-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-bold text-sm rounded-lg shadow-md shadow-indigo-500/20 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 disabled:opacity-60 disabled:cursor-not-allowed">
            <span id="reset-btn-text">Establecer contraseña</span>
            <svg id="reset-spinner" class="hidden h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
          </button>
        </form>

        <div class="text-center text-xs text-slate-400 mt-2">
          <button onclick="Auth.showView('login')" class="text-indigo-400 hover:text-indigo-300 font-semibold focus:outline-none">Volver a Iniciar Sesión</button>
        </div>
      </div>

      <!-- Footer -->
      <p class="text-center text-[10px] text-slate-600">
        CC BY-NC-ND 4.0 &nbsp;·&nbsp; Uso Comercial Exclusivo de Producción
      </p>
    </div>
  </div>

  <!-- ============================================================
       MODAL: GESTIÓN DE USUARIOS (solo producer)
       ============================================================ -->
  <div id="users-modal"
    class="hidden fixed inset-0 z-[9000] flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
    <div class="w-full max-w-lg bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl flex flex-col max-h-[85vh] overflow-hidden">

      <!-- Header -->
      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 shrink-0">
        <div class="flex items-center gap-2">
          <div class="w-7 h-7 bg-indigo-600/30 border border-indigo-500/40 rounded-lg flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
          </div>
          <h3 class="text-sm font-black text-white">Gestión de Usuarios</h3>
        </div>
        <button onclick="UserManager.close()" class="text-slate-500 hover:text-rose-400 transition-colors p-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- Contenido scrollable -->
      <div class="flex-1 overflow-y-auto p-6 space-y-6">

        <!-- Alerta interna -->
        <div id="um-alert" class="hidden text-xs font-semibold px-3 py-2.5 rounded-lg border"></div>

        <!-- Lista de usuarios -->
        <div>
          <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
            Usuarios del sistema
          </h4>
          <div id="um-user-list" class="space-y-2">
            <div class="text-xs text-slate-600 italic">Cargando...</div>
          </div>
        </div>

        <!-- Formulario: nuevo usuario -->
        <div class="border-t border-slate-800 pt-5">
          <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Crear nuevo usuario
          </h4>
          <form id="um-create-form" class="space-y-3" onsubmit="UserManager.createUser(event)">
            <div class="grid grid-cols-2 gap-3">
              <div class="col-span-2">
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Email</label>
                <input id="um-new-email" type="email" required placeholder="usuario@email.com"
                  class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
              </div>
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Contraseña</label>
                <input id="um-new-password" type="password" required placeholder="Mín. 6 caracteres" minlength="6"
                  class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none">
              </div>
              <div>
                <label class="block text-[10px] text-slate-500 font-semibold mb-1">Rol</label>
                <select id="um-new-role"
                  class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none cursor-pointer">
                  <option value="read-only">👁 Solo Lectura</option>
                  <option value="producer">🎬 Productor</option>
                </select>
              </div>
            </div>
            <button type="submit"
              class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-lg transition-colors shadow-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
              Crear usuario
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>

  <script type="module" src="src/js/script-editor.js?v=10.17"></script>
  <script type="module" src="src/js/app.js?v=10.17"></script>
  <script type="module" src="src/js/auth.js?v=10.17"></script>
  <script type="module" src="src/js/notes-projects.js?v=10.17"></script>
  <script>
    if ('serviceWorker' in navigator) {
      const isLocalHost = window.location.hostname === 'localhost' ||
                          window.location.hostname === '127.0.0.1' ||
                          window.location.hostname.startsWith('192.168.') ||
                          window.location.hostname.startsWith('10.') ||
                          window.location.hostname.startsWith('172.') ||
                          window.location.hostname === '[::1]';

      if (isLocalHost) {
        navigator.serviceWorker.getRegistrations().then(registrations => {
          for (const registration of registrations) {
            registration.unregister().then(() => {
              console.log('Stale local Service Worker unregistered successfully.');
            });
          }
        });
        if (window.caches) {
          caches.keys().then(keys => {
            keys.forEach(key => {
              caches.delete(key).then(() => {
                console.log('Local Cache Storage cleared:', key);
              });
            });
          });
        }
      } else {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('sw.js?v=10.16').catch(err => {
            console.error('SW registration failed:', err);
          });
        });
      }
    }
  </script>

  <!-- MODAL DE CREACIÓN / EDICIÓN DE REFERENCIAS -->
  <div id="ref-modal" class="fixed inset-0 bg-slate-950/85 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden no-print">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 space-y-4 shadow-2xl">
      <div class="flex items-center justify-between border-b border-slate-800 pb-3">
        <h4 id="ref-modal-title" class="text-base font-black text-white">Agregar Referencia</h4>
        <button id="btn-close-ref-modal-top" class="text-slate-400 hover:text-white font-extrabold text-xl transition-colors">&times;</button>
      </div>
      <div class="space-y-3 text-xs">
        <input type="hidden" id="ref-edit-id" value="">
        
        <div>
          <label class="block text-slate-400 font-semibold mb-1">Título de la Referencia</label>
          <input type="text" id="ref-title" placeholder="Ej: Moodboard de Iluminación o Trailer de Inspiración" class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-medium">
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Tipo de Medio</label>
            <select id="ref-type" class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-semibold">
              <option value="image">Imagen</option>
              <option value="video">Video</option>
              <option value="link">Enlace Web</option>
            </select>
          </div>
          <div>
            <label class="block text-slate-400 font-semibold mb-1">Categoría / Dpto</label>
            <select id="ref-category" class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-semibold">
              <option value="inspiration">Inspiración / Estilo</option>
              <option value="casting">Personajes / Casting</option>
              <option value="locations">Locaciones</option>
              <option value="camera">Cámara / Storyboard</option>
              <option value="props">Utilería / Props</option>
              <option value="other">Otros</option>
            </select>
          </div>
        </div>

        <div>
          <label class="block text-slate-400 font-semibold mb-1">Dirección URL</label>
          <input type="text" id="ref-url" placeholder="https://..." class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-mono text-[11px]">
        </div>

        <!-- Dropzone para subir archivos locales -->
        <div id="ref-dropzone" class="border-2 border-dashed border-slate-700 hover:border-indigo-500 rounded-xl p-4 text-center cursor-pointer transition-colors bg-slate-950/40 relative">
          <input type="file" id="ref-file" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full">
          <div id="ref-dropzone-prompt" class="space-y-1">
            <span class="material-symbols-outlined text-slate-500 text-2xl">cloud_upload</span>
            <p class="text-[11px] text-slate-400">Arrastra una imagen o <span class="text-indigo-400 font-semibold">examina</span></p>
            <p class="text-[9px] text-slate-500">Se convertirá automáticamente a formato local</p>
          </div>
          <div id="ref-dropzone-preview" class="hidden flex items-center justify-between bg-slate-900 border border-slate-800 p-2 rounded-lg">
            <div class="flex items-center gap-2 overflow-hidden">
              <img id="ref-thumb-preview" src="" class="w-8 h-8 object-cover rounded bg-black">
              <span id="ref-file-name-preview" class="text-[10px] text-slate-300 font-mono truncate max-w-[180px]">archivo.png</span>
            </div>
            <button id="btn-ref-remove-file" class="text-rose-400 hover:text-rose-350 font-bold px-1 transition-colors">&times;</button>
          </div>
        </div>

        <div>
          <label class="block text-slate-400 font-semibold mb-1">Descripción / Notas</label>
          <textarea id="ref-description" rows="2" placeholder="Notas sobre esta referencia..." class="w-full bg-slate-950 border border-slate-700 rounded p-2 focus:border-indigo-500 focus:outline-none text-slate-100 font-medium resize-none"></textarea>
        </div>
      </div>

      <div class="flex gap-2 border-t border-slate-800 pt-3">
        <button id="btn-close-ref-modal" class="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-bold transition-colors">Cancelar</button>
        <button id="btn-save-ref-modal" class="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-xs font-bold transition-colors shadow-lg">Guardar</button>
      </div>
    </div>
  </div>

  <!-- LIGHTBOX MULTIMEDIA PARA PREVISUALIZACIÓN -->
  <div id="ref-lightbox" class="fixed inset-0 bg-slate-950/95 backdrop-blur-md z-50 flex flex-col items-center justify-center p-4 hidden no-print">
    <button id="btn-close-lightbox" class="absolute top-4 right-4 text-white hover:text-slate-300 font-extrabold text-3xl transition-colors cursor-pointer w-10 h-10 flex items-center justify-center bg-slate-900/60 rounded-full hover:scale-105">&times;</button>
    
    <div class="w-full max-w-4xl max-h-[85vh] flex items-center justify-center overflow-hidden">
      <!-- Elemento de Imagen -->
      <img id="lightbox-img" src="" class="max-h-[80vh] max-w-full object-contain hidden rounded-lg border border-slate-800 shadow-2xl">
      
      <!-- Elemento de Video Local -->
      <video id="lightbox-video" src="" class="max-h-[80vh] max-w-full hidden rounded-lg border border-slate-800 shadow-2xl" controls></video>
      
      <!-- Elemento de Video Embebido (YouTube / Vimeo) -->
      <iframe id="lightbox-iframe" src="" class="w-full autoplay aspect-video max-w-3xl hidden rounded-lg border border-slate-800 shadow-2xl bg-black" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

    <!-- Título / Leyenda -->
    <div class="text-center mt-4 max-w-xl">
      <h4 id="lightbox-caption" class="text-white text-base font-bold">Título de la Referencia</h4>
      <p id="lightbox-desc" class="text-slate-400 text-xs mt-1">Notas sobre la referencia...</p>
    </div>
  </div>

</body>

</html>