/* ===== 00-tokens.css ===== */
/* Cadencia base/editor styles. Extracted from index.html in 1.0.10. */
:root {
    --bg: #0f1319;
    --panel: #151b24;
    --panel-2: #1c2430;
    --panel-3: #202a38;
    --border: #2a3442;
    --border-soft: #202936;
    --text: #eaf0f7;
    --text-dim: #9aa7b7;
    --accent: #14a7ff;
    --warn: #ffb454;
    --danger: #ff5f68;
    --ok: #38e6a6;
    --shadow: 0 14px 34px rgba(0,0,0,.26);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    /* Fuente de Premiere Pro (Adobe Clean). Si Adobe Creative Cloud está
       instalado, "Adobe Clean" ya está disponible como fuente del sistema y
       se usará tal cual; si no, cae a alternativas similares. Solo para
       botones/controles de la interfaz, no para la vista previa de subs. */
    --ui-font: "Adobe Clean", "Adobe Clean Han", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --header-h: 52px;
  }

/* ===== 01-base.css ===== */

  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background:
      radial-gradient(circle at 16% -10%, rgba(var(--accent-rgb),.10), transparent 30%),
      var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
  }

  ::selection { background: rgba(var(--accent-rgb),.28); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #0d1117; }
  ::-webkit-scrollbar-thumb { background: #263241; border-radius: 999px; border: 2px solid #0d1117; }
  ::-webkit-scrollbar-thumb:hover { background: #344356; }

  body > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 16px;
    height: var(--header-h);
    border-bottom: 1px solid var(--border);
    background: rgba(18, 23, 31, .96);
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  }
  body > header h1 {
    font-size: 15px;
    font-weight: 750;
    margin: 0;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  #headerTitleText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(46vw, 760px);
  }
  .header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
  #btnHome {
    flex-shrink: 0;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #btnHome svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body > header .actions { display: flex; gap: 8px; align-items: center; min-width: 0; }
  body > header .stats {
    font-family: var(--mono);
    color: #9bd3ff;
    font-size: 12px;
    margin-right: 8px;
    white-space: nowrap;
  }

  button {
    background: linear-gradient(#202938, #1a2230);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--ui-font);
    transition: transform 0.10s, background 0.12s, border-color 0.12s, box-shadow .12s;
  }
  button:hover { background: #263243; border-color: #3a4a60; box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset; }
  button:active { transform: translateY(1px); }
  button.primary { background: linear-gradient(#20b7ff, #078fe5); border-color: #169eea; color: #06111b; font-weight: 800; }
  button.primary:hover { background: linear-gradient(#49c5ff, #12a1f5); }
  button.ghost { background: #131a24; }
  button:disabled { opacity: 0.4; cursor: not-allowed; }
  button.small { padding: 4px 8px; font-size: 11.5px; border-radius: 6px; }

  main {
    padding: 10px 14px 14px;
    height: calc(100vh - var(--header-h));
    overflow: hidden;
    box-sizing: border-box;
  }

/* ===== 03-home.css ===== */
  /* ---------- Import screen ---------- */
  /* A 1180px fijos se ve perfecto en ~1080p, pero queda chico y centrado en
     monitores más grandes. clamp() lo deja igual hasta ~1080p y lo escala
     proporcionalmente al ancho de la ventana en monitores mayores. */
  #importScreen {
    display: block;
    margin: 22px auto 40px;
    max-width: clamp(1100px, 72vw, 1680px);
    position: relative;
  }

  /* ── Encabezado del inicio ── */
  .home-hero {
    /* Esta pantalla usa un <header>, pero no debe heredar el alto fijo
       del header superior de la app. Antes medía 52px y todo el contenido
       se salía hacia abajo, por eso la píldora se veía chueca. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: nowrap;
    height: auto;
    min-height: 92px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 16px 34px;
    overflow: visible;
  }
  .home-hero > * { align-self: center; }
  .home-hero-left {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .home-hero-left > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .home-title { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: .2px; }
  .home-logo {
    width: 60px; height: 60px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px; color: #04121d;
    background: linear-gradient(160deg, var(--accent-bright), var(--accent));
    box-shadow: 0 8px 22px rgba(var(--accent-rgb),.28);
  }
  .home-title { margin: 0; font-size: 22px; letter-spacing: .2px; }
  .home-sub { margin: 3px 0 0; color: var(--text-dim); font-size: 12.5px; }
  .home-sub b { color: #9bd3ff; font-weight: 700; }
  .home-env-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 0 16px;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
    font-family: var(--mono);
    white-space: nowrap;
  }
  .home-env-pill:hover { border-color: var(--accent); color: var(--text); }
  .home-env-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
  .home-env-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(56,230,166,.7); }
  .home-env-dot.bad { background: var(--warn); box-shadow: 0 0 8px rgba(246,189,96,.7); }

  /* ── Acciones rápidas ── */
  .home-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px; margin-bottom: 24px;
  }
  .home-action {
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 15px 16px; cursor: pointer; color: var(--text);
    transition: border-color .12s ease, transform .08s ease, background .12s ease;
  }
  .home-action:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--panel-2); }
  .home-action-ic {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb),.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.22);
  }
  .home-action-tx { display: flex; flex-direction: column; min-width: 0; }
  .home-action-tx b { font-size: 13.5px; font-weight: 700; }
  .home-action-tx small { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
  .home-action-primary { background: linear-gradient(160deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05)); border-color: rgba(var(--accent-rgb),.4); }
  .home-action-primary .home-action-ic { background: var(--accent); color: #04121d; border-color: transparent; }

  /* ── Cuerpo (proyectos + lateral) ── */
  .home-grid { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 16px; align-items: start; }

  /* ── Tarjeta de Dependencias / panel lateral ── */
  .home-aside { display: flex; flex-direction: column; gap: 16px; }
  .home-panel {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; box-shadow: var(--shadow);
  }
  .home-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .home-panel-head h3 { margin: 0; font-size: 13.5px; }
  .home-panel-sub { margin: 0 0 12px; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; }
  .home-panel-sub b { color: #9bd3ff; font-weight: 600; }
  .home-tip-foot { margin-top: 12px; }
  .home-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .home-tips li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
  .home-tips kbd {
    font-family: var(--mono); font-size: 10px; color: var(--text);
    background: var(--panel-3); border: 1px solid var(--border);
    border-radius: 5px; padding: 2px 6px; flex-shrink: 0;
  }

  /* ── Lista de dependencias (rellenada por JS) ── */
  .lib-status { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .lib-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11px;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim);
  }
  .lib-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-2); border: 1px solid var(--border-soft);
    border-radius: 9px; padding: 8px 10px; font-size: 11.5px;
  }
  .lib-row-ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 800; }
  .lib-row.ok .lib-row-ic { background: rgba(56,230,166,.16); color: var(--ok); }
  .lib-row.bad .lib-row-ic { background: rgba(246,189,96,.16); color: var(--warn); }
  .lib-row-name { font-weight: 700; color: var(--text); }
  .lib-row-detail { color: var(--text-dim); margin-left: auto; font-family: var(--mono); font-size: 10px; text-align: right; }
  .lib-chip.ok { color: var(--ok); border-color: rgba(56,230,166,.5); background: rgba(56,230,166,.08); }
  .lib-chip.bad { color: var(--danger); border-color: rgba(255,95,104,.5); background: rgba(255,95,104,.08); }
  .lib-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .lib-actions .primary { flex: 1; }

  /* ── Administrador de modelos ── */
  .models-list { display: flex; flex-direction: column; gap: 8px; }
  .model-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
    background: var(--panel-2); border: 1px solid var(--border-soft);
    border-radius: 9px; padding: 8px 10px;
  }
  .model-info { min-width: 0; }
  .model-name { font-weight: 700; font-size: 12px; }
  .model-name .model-tag { font-family: var(--mono); font-size: 9.5px; color: var(--ok); margin-left: 6px; }
  .model-sub { font-size: 10.5px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
  .model-actions { display: flex; gap: 6px; align-items: center; }
  .model-btn {
    font-size: 11px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--border); background: var(--accent); color: #04121d; font-weight: 700;
  }
  .model-btn:hover { background: var(--accent-bright); }
  .model-btn.ghost { background: transparent; color: var(--text-dim); border-color: var(--border); font-weight: 600; }
  .model-btn.ghost:hover { color: var(--danger); border-color: rgba(255,95,104,.5); }
  .model-btn:disabled { opacity: .5; cursor: default; }
  .model-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #18191f; border: 1px solid #3d3e48; overflow: hidden; }
  .model-bar span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .2s ease; }
  .lib-progress { margin-top: 14px; text-align: left; }
  .lib-progress .trans-progress-bar { height: 8px; border-radius: 999px; overflow: hidden; background: #18191f; border: 1px solid #3d3e48; }
  .lib-progress .trans-progress-bar span { display: block; width: 0%; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s ease; }
  .lib-progress p { margin: 8px 0 6px; color: var(--text-dim); font-size: 11.5px; }
  .lib-log {
    max-height: 150px; overflow: auto; margin: 0;
    background: #0c0f14; border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; color: #9aa7b7;
    white-space: pre-wrap; word-break: break-word;
  }

  /* ── Búsqueda de proyectos + footer ── */
  .home-search {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 6px 10px; font-size: 12px; width: 160px;
  }
  .home-search:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
  .projects-footer { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

  /* ── Overlay de arrastrar y soltar ── */
  .home-drop-overlay {
    position: fixed; inset: 0; z-index: 1300; display: none;
    align-items: center; justify-content: center;
    background: rgba(7,12,18,.72); backdrop-filter: blur(2px);
  }
  .home-drop-overlay.show { display: flex; }
  .home-drop-box {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 56px; border-radius: 18px; color: #9bd3ff;
    border: 2px dashed var(--accent); background: rgba(var(--accent-rgb),.08);
  }
  .home-drop-box strong { font-size: 18px; color: var(--text); }
  .home-drop-box span { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }


  /* ── Microinteracciones: suaves, rápidas y sin sentirse pesadas ── */
  @keyframes screenSoftIn { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
  @keyframes modalSoftIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes menuSoftIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes activeCuePulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.34), 0 0 0 1px rgba(var(--accent-rgb),.55); } 100% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb),0), 0 0 0 1px rgba(var(--accent-rgb),.55); } }
  .screen-enter { animation: screenSoftIn .18s cubic-bezier(.2,.9,.2,1) both; }
  .home-action, .project-card, .cue, .engine-card, .tl-track-label, .tl-cue, button, select, input, textarea {
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
  }
  .engine-modal, .app-dialog, .kbd-modal, .merge-tracks-dialog { animation: modalSoftIn .16s cubic-bezier(.2,.9,.2,1) both; }
  .engine-overlay, .app-dialog-overlay, .kbd-modal-overlay, .merge-tracks-overlay { animation: screenSoftIn .12s ease both; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }

  /* ── Ventana de motores de transcripción ── */
  .engine-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; background: rgba(4,7,11,.6); backdrop-filter: blur(2px); }
  .engine-modal { width: min(1060px, 94vw); max-height: 88vh; overflow: auto; background: #161b22; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 20px; }
  .engine-modal-head { display: flex; align-items: center; justify-content: space-between; }
  .engine-modal-head h3 { margin: 0; font-size: 16px; }
  .engine-modal-close { background: transparent; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 4px 9px; border-radius: 6px; }
  .engine-modal-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
  .engine-modal-sub { color: var(--text-dim); font-size: 12px; margin: 6px 0 16px; }
  .engine-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .engine-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
  .engine-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .engine-card-head b { font-size: 14px; }
  .engine-badge { font-family: var(--mono); font-size: 9.5px; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 999px; padding: 2px 7px; }
  .engine-state { font-family: var(--mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; }
  .engine-state.ok { color: var(--ok); }
  .engine-card-desc { color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin: 0 0 12px; }
  .engine-card-desc b { color: #9bd3ff; }
  #btnInstallPython, #btnInstallPythonRuntime { width: 100%; }
  .engine-maintenance { margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:12px; }
  .engine-maintenance small { color: var(--text-dim); font-size:11px; line-height:1.35; }
  .engine-maintenance-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .engine-clean-btn { background: rgba(255,95,104,.10); color:#ffd4d7; border:1px solid rgba(255,95,104,.45); border-radius:8px; padding:8px 12px; font-weight:800; font-size:11px; cursor:pointer; white-space:nowrap; }
  .engine-clean-btn:hover:not(:disabled) { background: rgba(255,95,104,.18); border-color: rgba(255,95,104,.75); }
  .engine-clean-btn:disabled { opacity:.55; cursor:not-allowed; }
  .engine-install-all-btn { background: rgba(46,132,255,.18); color:#d9ecff; border:1px solid rgba(46,132,255,.55); border-radius:8px; padding:8px 12px; font-weight:800; font-size:11px; cursor:pointer; white-space:nowrap; }
  .engine-install-all-btn:hover:not(:disabled) { background: rgba(46,132,255,.28); border-color: rgba(46,132,255,.85); }
  .engine-install-all-btn:disabled { opacity:.55; cursor:not-allowed; }
  @media (max-width: 980px) { .engine-cards { grid-template-columns: 1fr; } }

  /* ── Tarjeta de Librerías (compat con clases viejas) ── */
  /* ---------- Speaker assignment ---------- */
  #assignScreen { display: none; max-width: 760px; margin: 30px auto; overflow-y: auto; height: 100%; }
  #assignScreen h2 { font-size: 15px; margin-bottom: 14px; }
  .assign-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .assign-row .swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
  .assign-row .fname { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .assign-row input[type=text] {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    padding: 6px 8px; border-radius: 6px; font-size: 12.5px; width: 160px; font-family: var(--mono);
  }
  .assign-row .count { color: var(--text-dim); font-size: 11.5px; font-family: var(--mono); width: 70px; text-align: right; }

/* ===== 02-layout.css ===== */
  /* ---------- Editor screen ---------- */
  #editorScreen { display: none; height: 100%; }
  .editor-shell { display: flex; flex-direction: column; height: 100%; gap: 10px; min-height: 0; }

  .editor-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 14px minmax(380px, var(--subs-panel-w, 42vw));
    gap: 0;
    flex: 1;
    min-height: 0;
    transition: grid-template-columns .22s cubic-bezier(.2,.8,.2,1);
  }
  /* Panel derecho oculto con movimiento suave, sin display:none para que anime. */
  .editor-layout.sidebar-hidden {
    grid-template-columns: minmax(520px, 1fr) 0px 0px;
  }
  .editor-layout.sidebar-hidden #subsResizer {
    width: 0; min-width: 0; opacity: 0; pointer-events: none; overflow: hidden;
  }
  .editor-layout.sidebar-hidden .right-col {
    min-width: 0; padding-left: 0; padding-right: 0; border-width: 0;
    opacity: 0; transform: translateX(16px) scale(.985); pointer-events: none;
  }

  .left-col,
  .right-col {
    min-height: 0;
    background: #0b0f15;
    border: 1px solid #17202b;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  .left-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    overflow: hidden;
  }

  .right-col {
    display: flex;
    flex-direction: column;
    padding: 10px 8px 10px 10px;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), padding .22s ease, border-width .22s ease;
  }

  .pane-resizer-x {
    width: 14px;
    min-width: 14px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    opacity: 1;
    transition: width .18s ease, min-width .18s ease, opacity .14s ease;
  }
  .pane-resizer-x::before {
    content: '';
    width: 4px;
    height: 64px;
    border-radius: 999px;
    background: #223044;
    border: 1px solid #314259;
    box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 18px rgba(var(--accent-rgb),.08);
    transition: background .12s, height .12s, box-shadow .12s;
  }
  .pane-resizer-x:hover::before,
  .pane-resizer-x.is-dragging::before {
    height: 104px;
    background: #2f4258;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22), 0 0 24px rgba(var(--accent-rgb),.18);
  }

  .pane-resizer-y {
    height: 14px;
    min-height: 14px;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    flex: 0 0 14px;
  }
  .pane-resizer-y::before {
    content: '';
    width: 76px;
    height: 4px;
    border-radius: 999px;
    background: #223044;
    border: 1px solid #314259;
    box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 18px rgba(var(--accent-rgb),.08);
    transition: background .12s, width .12s, box-shadow .12s;
  }
  .pane-resizer-y:hover::before,
  .pane-resizer-y.is-dragging::before {
    width: 118px;
    background: #2f4258;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22), 0 0 24px rgba(var(--accent-rgb),.18);
  }
  body.resizing-pane,
  body.resizing-pane * {
    user-select: none !important;
  }
  body.resizing-pane-x,
  body.resizing-pane-x * {
    cursor: col-resize !important;
  }
  body.resizing-pane-y,
  body.resizing-pane-y * {
    cursor: row-resize !important;
  }

/* ===== 05-preview.css ===== */
  /* ---------- Left column: reproductor + timeline ---------- */
  .player-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .player-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; flex-shrink: 0; }
  .player-wrap {
    position: relative; flex: 1; min-width: 0; min-height: 220px;
    background: #000; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  }
  #videoPlayer { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

  #videoPlayer { transition: filter .16s ease, transform .16s ease; }
  .player-wrap.privacy-blur #videoPlayer { filter: blur(18px) brightness(.62) saturate(.72); transform: scale(1.025); }
  .player-wrap.privacy-black::before {
    content: ''; position: absolute; inset: 0; background: #000; z-index: 3; pointer-events: none;
  }
  .player-sub-mask {
    display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
    background: linear-gradient(to bottom, rgba(0,0,0,.82), #000 10px, #000);
    z-index: 3; pointer-events: none;
  }
  .player-wrap.privacy-strip .player-sub-mask { display: block; pointer-events: auto; cursor: ns-resize; }
  .player-quickbar {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    z-index: 18; display: flex; flex-direction: column; gap: 6px; padding: 6px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
    background: rgba(12, 17, 24, .55); backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0,0,0,.32); opacity: .52;
    transition: opacity .12s ease, transform .14s ease, background .12s ease;
  }
  .player-wrap:hover .player-quickbar, .player-quickbar:focus-within { opacity: 1; transform: translateY(-50%) translateX(-2px); background: rgba(12,17,24,.78); }
  .player-quick-btn {
    width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
    background: rgba(20, 28, 38, .72); color: rgba(230,238,248,.82); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
  }
  .player-quick-btn:hover { transform: scale(1.07); border-color: rgba(var(--accent-rgb),.52); color: #dff4ff; }
  .player-quick-btn.active { background: rgba(38,128,235,.95); border-color: rgba(155,211,255,.72); color: #fff; box-shadow: 0 0 0 3px rgba(38,128,235,.18); }
  .split-word-caret {
    display: inline-block; width: max(2px, calc(var(--caption-font-size, 32px) * .055));
    height: 1.02em; margin: 0 .035em; vertical-align: -.12em; border-radius: 999px;
    background: #5ed8ff; box-shadow: 0 0 0 2px rgba(4,12,18,.92), 0 0 18px rgba(94,216,255,.9);
    animation: splitCaretBlink .86s steps(1,end) infinite;
  }
  @keyframes splitCaretBlink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: .18; } }
  .caption-line.has-split-caret { filter: drop-shadow(0 0 10px rgba(94,216,255,.22)); }
  .correction-stats-dialog { width: min(700px, calc(100vw - 32px)); }
  .correction-summary { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; }
  .correction-ring { --pct: 0%; width: 100px; height: 100px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 50%, var(--panel-2) 0 55%, transparent 57%), conic-gradient(#ffd166 0 var(--pct), rgba(255,255,255,.08) var(--pct) 100%);
    border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
  .correction-ring span { font-size: 24px; font-weight: 850; color: #ffd166; }
  .correction-ring small { font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
  .correction-copy { display: flex; flex-direction: column; gap: 5px; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
  .correction-copy b { color: var(--text); font-size: 13.5px; }
  .correction-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
  .correction-pill { border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.035); color: var(--text-dim); font-size: 10.5px; }
  .correction-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
  .correction-grid div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .correction-grid b { color: #9bd3ff; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .correction-grid span { color: var(--text-dim); font-size: 10.5px; line-height: 1.25; }
  .correction-bars { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
  .correction-bar-row { display: grid; grid-template-columns: 138px 1fr 46px; gap: 8px; align-items: center; font-size: 11px; color: var(--text-dim); }
  .correction-bar-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
  .correction-bar-fill { height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb),.75), rgba(255,209,102,.88)); }
  .correction-note { margin-top: 10px; padding: 10px; border-radius: 9px; background: rgba(155,211,255,.06); border: 1px solid rgba(155,211,255,.14); color: var(--text-dim); font-size: 11px; line-height: 1.45; }
  .correction-help-btn { min-width: 44px; padding: 0 8px; font-family: var(--mono); color: #9bd3ff; font-size: 10.5px; }
  .correction-help-btn.has-corrections { color: #ffd166; border-color: rgba(255,209,102,.42); background: rgba(255,209,102,.08); }
  .player-body { flex: 1; min-height: 0; display: flex; position: relative; }
  .snippets-panel {
    position: relative; flex: 0 0 auto; width: 196px; align-self: stretch;
    display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    opacity: 1; transform: translateX(0) scale(1);
    transition: width .20s cubic-bezier(.2,.8,.2,1), flex-basis .20s cubic-bezier(.2,.8,.2,1),
      opacity .16s ease, transform .20s cubic-bezier(.2,.8,.2,1), border-width .18s ease;
  }
  .snippets-panel.collapsed {
    width: 0 !important; flex-basis: 0 !important; opacity: 0; transform: translateX(-14px) scale(.985);
    pointer-events: none; border-width: 0;
  }
  .snippets-panel.collapsed > * { visibility: hidden; }
  .snippets-resizer.collapsed { width: 0; min-width: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .snippets-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 11px; border-bottom: 1px solid var(--border); }
  .snippets-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .2px; min-width: 0; }
  .snippets-title svg { color: var(--accent); flex: none; }
  .snip-iconbtn svg, .snippets-toggle svg, .snip-edit svg, .snip-del svg, .snip-copy svg { flex: none; }
  .snippets-head-actions { display: flex; gap: 4px; flex: none; }
  .snip-iconbtn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .1s ease, border-color .1s ease, background .1s ease; }
  .snip-iconbtn:hover { border-color: var(--accent); color: var(--accent); background: var(--panel-3); }
  .correction-mini { min-width: 30px; padding: 0 6px; font-size: 10px; font-weight: 700; font-family: var(--mono); color: #9bd3ff; }
  .correction-mini.has-corrections { color: #ffd166; border-color: rgba(255,209,102,.42); background: rgba(255,209,102,.08); }
  .snippets-addform { padding: 10px 11px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); }
  .snippets-addform input { width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; color: var(--text); font-size: 12px; }
  .snippets-addform input:focus { outline: none; border-color: var(--accent); }
  .snip-addform-row { display: flex; gap: 6px; }
  .snip-addform-row .small { flex: 1; }
  .snippets-list { flex: 1; min-height: 0; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
  .snip-item { display: flex; align-items: center; gap: 3px; }
  .snip-chip { flex: 1; min-width: 0; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; color: var(--text); cursor: pointer; font-size: 12.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .1s ease, background .1s ease; }
  .snip-chip:hover { border-color: var(--accent); background: var(--panel-3); }
  .snip-edit, .snip-del, .snip-copy { width: 24px; height: 28px; flex: none; border: none; background: transparent; color: var(--text-dim); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s ease, color .1s ease, background .1s ease; }
  .snip-item:hover .snip-edit, .snip-item:hover .snip-del, .snip-item:hover .snip-copy { opacity: 1; }
  .snip-edit:hover { color: var(--accent); background: var(--panel-2); }
  .snip-del:hover { color: var(--danger); background: var(--panel-2); }
  .snip-copy:hover { color: #9bd3ff; background: var(--panel-2); }
  .snippets-empty { color: var(--text-dim); font-size: 11.5px; text-align: center; padding: 22px 10px; line-height: 1.55; }
  .snippets-hint { font-size: 10px; color: var(--text-dim); padding: 9px 11px; border-top: 1px solid var(--border); line-height: 1.45; }
  .snippets-toggle {
    flex: none; align-self: flex-start; margin: 0 8px 0 0; width: 30px; height: 36px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text-dim); cursor: pointer;
    display: none; align-items: center; justify-content: center; transition: color .1s ease, border-color .1s ease;
  }
  .snippets-toggle.show { display: inline-flex; }
  .snippets-toggle:hover { color: var(--accent); border-color: var(--accent); }
  .caption-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
    padding: 0 0 var(--caption-bottom, 3.9%);
    z-index: 4;
    overflow: hidden;
  }
  .ov-line {
    /* Premiere usa "Tondo-Regular" (normal weight), no Bold.
       font-weight: 700 hacía que las letras se vean más gordas y el texto
       visualmente más grande que en Premiere. */
    font-family: Tondo, "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    font-size: var(--caption-font-size, 18px);
    line-height: 1.075;
    min-height: 1.075em;
    max-width: 76.8%;       /* medido contra preview de Premiere: zona segura real */
    width: 76.8%;           /* fuerza el wrap igual que en Premiere */
    padding: 0 12px;
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-rendering: geometricPrecision;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    letter-spacing: -0.01em;
    -webkit-text-stroke: var(--caption-stroke, 2.4px) #000;
    paint-order: stroke fill;
    /* Refuerzo exterior para que el trazo se parezca más al render de Premiere.
       text-stroke solo queda muy limpio/delgado en Chrome; estas sombras duras
       añaden cuerpo negro alrededor sin cambiar el texto real. */
    text-shadow:
      calc(var(--caption-outline, 1.6px) * -1) 0 0 #000,
      var(--caption-outline, 1.6px) 0 0 #000,
      0 calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      0 var(--caption-outline, 1.6px) 0 #000,
      calc(var(--caption-outline, 1.6px) * -1) calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      var(--caption-outline, 1.6px) calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      calc(var(--caption-outline, 1.6px) * -1) var(--caption-outline, 1.6px) 0 #000,
      var(--caption-outline, 1.6px) var(--caption-outline, 1.6px) 0 #000,
      var(--caption-shadow-x, 1.6px) var(--caption-shadow-y, 1.6px) var(--caption-shadow-blur, 7px) rgba(0,0,0,.94),
      0 0 var(--caption-glow, 2px) rgba(0,0,0,.98);
  }
  .ov-line {
    pointer-events: auto;
    cursor: text;
    border-radius: 4px;
    transition: background .12s, outline-color .12s, opacity .12s;
  }
  .ov-line:hover {
    background: rgba(35, 125, 245, .14);
    outline: 1px dashed rgba(35, 125, 245, .55);
    outline-offset: 4px;
  }
  .ov-line.preview-line-editing { opacity: .18; }
  /* Seleccionar sobre la línea abre el editor inline con esa misma selección:
     usamos el azul del editor para que el salto no se note como otro modo. */
  .ov-line::selection { background: rgba(35, 125, 245, .45); }
  /* No usamos display:none aquí: si el line "down" está vacío, ocultarlo por
     completo haría que el line "up" caiga a la posición de abajo (colapsa el
     hueco reservado). Mantenemos el alto mínimo (1 línea) para que el
     subtítulo "de arriba" siempre quede arriba, tenga o no compañero abajo. */
  .ov-line:empty { pointer-events: none; }
  .caption-inline-editor {
    display: none;
    position: absolute;
    z-index: 10;
    max-width: 76.8%;
    min-width: 0;
    width: 76.8%;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid rgba(38,128,235,.65);
    border-radius: 7px;
    background: rgba(12, 14, 18, .56);
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 10px 32px rgba(0,0,0,.26), 0 0 0 9999px rgba(0,0,0,.035);
    color: #fff;
    font-family: Tondo, "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--caption-font-size, 18px);
    line-height: 1.075;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: none;
    text-rendering: geometricPrecision;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    letter-spacing: -0.01em;
    -webkit-text-stroke: var(--caption-stroke, 2.4px) #000;
    paint-order: stroke fill;
    /* Igual que el preview final, para que editar no cambie el tamaño visual. */
    text-shadow:
      calc(var(--caption-outline, 1.6px) * -1) 0 0 #000,
      var(--caption-outline, 1.6px) 0 0 #000,
      0 calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      0 var(--caption-outline, 1.6px) 0 #000,
      calc(var(--caption-outline, 1.6px) * -1) calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      var(--caption-outline, 1.6px) calc(var(--caption-outline, 1.6px) * -1) 0 #000,
      calc(var(--caption-outline, 1.6px) * -1) var(--caption-outline, 1.6px) 0 #000,
      var(--caption-outline, 1.6px) var(--caption-outline, 1.6px) 0 #000,
      var(--caption-shadow-x, 1.6px) var(--caption-shadow-y, 1.6px) var(--caption-shadow-blur, 7px) rgba(0,0,0,.94),
      0 0 var(--caption-glow, 2px) rgba(0,0,0,.98);
    outline: none;
    pointer-events: auto;
  }

  .caption-inline-editor::selection { background: rgba(35, 125, 245, .45); }
  /* Refuerzo visual: aunque el pegado se aplana a texto plano, cualquier nodo
     que llegara con estilo propio hereda la tipografía del editor igual. */
  .caption-inline-editor * {
    font: inherit !important;
    color: inherit !important;
    background: none !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: inherit !important;
    -webkit-text-stroke: inherit !important;
    vertical-align: baseline !important;
  }
  .caption-inline-editor[data-empty="true"]::before {
    content: 'Escribe el subtítulo…';
    color: rgba(255,255,255,.42);
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }
  .player-placeholder {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #2a3442; border-radius: 8px; padding: 8px 14px;
    text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.4;
    background: rgba(13,17,23,.82);
    pointer-events: none;
  }


/* One coordinate model for appearance, wrapping and exported padding. */
.caption-overlay .ov-line{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--caption-font-family,Tondo),Arial,sans-serif;line-height:var(--caption-line-height,1.075);width:var(--caption-width,76.8%);max-width:var(--caption-width,76.8%);padding:0;min-height:0}
.caption-inline-editor{font-family:var(--caption-font-family,Tondo),Arial,sans-serif;line-height:var(--caption-line-height,1.075);width:var(--caption-width,76.8%);max-width:var(--caption-width,76.8%)}
.caption-appearance-settings{margin-top:24px}.caption-appearance-heading{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}.caption-appearance-heading h4{margin:0}.caption-appearance-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.caption-font-label{display:grid;gap:8px;font-size:12px}.caption-font-label input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:10px}.caption-appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:20px 0}.caption-appearance-controls label{display:grid;gap:10px;min-width:0}.caption-appearance-controls label>span{display:flex;justify-content:space-between;font-size:12px;gap:8px}.caption-appearance-controls output{color:var(--muted)}.caption-appearance-controls input{width:100%;accent-color:#ec6ca3}.caption-appearance-preview{position:relative;background:radial-gradient(ellipse at 70% 10%,#414451,#11131a 65%);overflow:hidden;border:1px solid #ffffff15;border-radius:14px;aspect-ratio:16/9;color:white;min-height:110px}.caption-appearance-preview>span{position:absolute;top:13px;left:14px;font-size:9px;letter-spacing:.12em;color:#c4c8d0}.caption-appearance-settings small,.caption-appearance-settings [role=status]{display:block;font-size:11px;color:var(--muted);line-height:1.6;margin:9px 0}.caption-appearance-settings [role=status]:empty{display:none}@media(max-width:560px){.caption-appearance-controls{grid-template-columns:1fr}.caption-appearance-heading{flex-direction:column}}

.censor-repeat-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.censor-repeat-toast{pointer-events:auto}

.caption-appearance-preview{width:100%;max-width:520px;margin-inline:auto;box-sizing:border-box}.caption-appearance-controls input{accent-color:var(--accent,#a378ff)}
.caption-overlay .ov-line,.caption-inline-editor,#captionAppearanceSample>div{
  font-family:var(--caption-font-family,Arial),sans-serif;
  font-size:var(--caption-font-size,18px);font-weight:400;font-style:normal;font-synthesis:none;
  line-height:var(--caption-line-height,1.075);color:#fff;text-align:center;letter-spacing:-.01em;
  white-space:pre-wrap;overflow-wrap:normal;word-break:normal;hyphens:none;
  text-rendering:geometricPrecision;font-kerning:normal;font-feature-settings:"kern" 1;
  -webkit-text-stroke:var(--caption-stroke,0px) #000;paint-order:stroke fill;
  text-shadow:calc(var(--caption-outline,0px) * -1) 0 0 #000,var(--caption-outline,0px) 0 0 #000,
    0 calc(var(--caption-outline,0px) * -1) 0 #000,0 var(--caption-outline,0px) 0 #000,
    calc(var(--caption-outline,0px) * -1) calc(var(--caption-outline,0px) * -1) 0 #000,
    var(--caption-outline,0px) calc(var(--caption-outline,0px) * -1) 0 #000,
    calc(var(--caption-outline,0px) * -1) var(--caption-outline,0px) 0 #000,
    var(--caption-outline,0px) var(--caption-outline,0px) 0 #000,
    var(--caption-shadow-x,0px) var(--caption-shadow-y,0px) var(--caption-shadow-blur,0px) rgba(0,0,0,.94),
    0 0 var(--caption-glow,0px) rgba(0,0,0,.98);
}
.behavior-pane>h4{font-size:24px!important;letter-spacing:-.6px}.behavior-pane>.cad-divider{display:none}.behavior-personal{background:var(--panel-head);border:1px solid var(--border);border-radius:14px;padding:18px!important;margin:24px 0!important;gap:24px}.behavior-personal .cad-toggle-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.behavior-chip{font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:5px 9px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.behavior-eyebrow{display:block;font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:8px}.caption-appearance-settings{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--panel-head);margin-top:16px}.caption-appearance-heading{padding:24px 24px 0}.caption-appearance-heading h4{font-size:21px!important;letter-spacing:-.4px}.caption-appearance-heading .cad-pane-sub{margin:8px 0!important;max-width:520px}.caption-access{font-size:12px;color:var(--muted);margin:8px 24px 24px;line-height:1.6}.caption-design-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1fr);gap:28px;padding:0 24px 24px}.caption-design-fields{min-width:0}.caption-source-card{display:flex;align-items:center;gap:12px}.caption-source-card strong{font-size:13px}.caption-source-card p,.caption-sharing-note p{font-size:11px;line-height:1.65;color:var(--muted);margin:4px 0 0}.caption-source-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);font-size:22px;font-weight:600}.caption-appearance-actions{gap:6px;margin:16px 0}.caption-appearance-actions button{min-height:32px!important}.caption-font-label input{font-size:12px!important}.caption-design-fields #captionAppearanceFontStatus{min-height:18px;margin:7px 0 20px}.caption-appearance-controls{gap:18px;margin:16px 0 0}.caption-appearance-controls label>span{align-items:center}.caption-number-wrap{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:10px}.caption-number-wrap input[type=number]{width:57px!important;min-width:0;padding:4px!important;font-size:11px;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);box-sizing:border-box}.caption-appearance-controls input[type=range]{height:4px;cursor:pointer}.caption-design-live{min-width:0;align-self:start;position:sticky;top:16px}.caption-live-title{display:flex;align-items:center;gap:7px;font-size:11px;margin:2px 0 12px}.caption-live-title>span:last-child{margin-left:auto;color:var(--muted);font-size:10px}.caption-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.caption-appearance-preview{max-width:none;background:linear-gradient(150deg,#202330,#0b0d15);border-radius:12px}.caption-scene{position:absolute;inset:0;overflow:hidden;opacity:.5;pointer-events:none}.caption-scene i{position:absolute;display:block;border:1px solid #c4b5fd20;transform:rotate(-22deg);border-radius:30px;background:linear-gradient(130deg,#8370cf15,transparent)}.caption-scene i:nth-child(1){width:65%;height:130%;top:-65%;left:0}.caption-scene i:nth-child(2){width:50%;height:100%;right:-10%;top:-40%}.caption-scene i:nth-child(3){width:80%;height:70%;left:10%;top:65%}.caption-sharing-note{margin-top:24px;padding:16px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 9px 9px 0}.caption-sharing-note strong{font-size:12px}.caption-appearance-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 24px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg) 55%,transparent)}.caption-appearance-footer>div:first-child{flex:1;min-width:150px}.caption-appearance-footer strong{font-size:12px}.caption-appearance-footer [role=status]{margin:4px 0 0}.caption-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.caption-footer-actions button{min-height:34px!important}.caption-footer-actions [hidden]{display:none!important}.caption-design-fields :disabled{opacity:.6;cursor:default}.behavior-personal .cad-switch:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:1050px){.caption-design-grid{grid-template-columns:1fr}.caption-design-live{position:static}.caption-appearance-preview{max-width:520px}.caption-sharing-note{margin-top:12px}}@media(max-width:560px){.caption-appearance-heading{padding:18px 16px 0}.caption-access{margin:8px 16px 20px}.caption-design-grid{padding:0 16px 18px;gap:24px}.caption-appearance-footer{padding:16px}.caption-appearance-controls{grid-template-columns:1fr 1fr;gap:18px 12px}.caption-appearance-controls label>span{font-size:10px}.caption-number-wrap input[type=number]{width:48px!important}.behavior-personal{padding:14px!important}.caption-appearance-heading{flex-direction:row}.caption-appearance-heading .behavior-chip{max-width:95px}.caption-appearance-heading h4{font-size:18px!important}}
.caption-appearance-settings .caption-access{margin:8px 24px 24px!important}.caption-appearance-controls input[type=range]{accent-color:var(--accent)}@media(max-width:560px){.caption-appearance-settings .caption-access{margin:8px 16px 20px!important}}

/* ===== 06-timeline.css ===== */
  /* ---------- Right column: lista de subtítulos ---------- */
  .cue-list-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 2px 8px; color: var(--text-dim); font-size: 11.5px; flex-shrink: 0;
  }
  .cue-list-header span:first-child { color: #caeaff; font-family: var(--mono); font-weight: 700; }
  .cue-list-scroll { overflow-y: auto; flex: 1; padding-right: 6px; min-height: 0; scroll-behavior: smooth; }

  /* ---------- Vista general ---------- */
  .timeline-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px 10px;
    flex: 0 0 var(--timeline-panel-h, 190px);
    min-height: 128px;
    max-height: calc(100% - 170px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .tl-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; position: relative; }
  .tl-title > span:first-child { font-size: 12px; color: #a9d7ff; display: flex; align-items: center; gap: 6px; }
  .tl-zoom { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
  .tl-zoom input[type=range] { width: 220px; accent-color: var(--accent); }
  .tl-body { display: flex; flex: 1; min-height: 0; gap: 8px; position: relative; }
  .tl-scroll-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tl-toolbar {
    flex-shrink: 0;
    width: 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 40px; /* alinea con el inicio de las pistas, debajo del ruler */
  }
  .tl-timecode-corner {
    position: absolute;
    top: 8px; /* centra verticalmente la pastilla de 24px dentro de los 40px del ruler */
    left: 36px; /* ancho del toolbar (28px) + gap (8px) */
    margin: 0;
    z-index: 1;
  }
  .tl-tool {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .tl-tool:hover { color: var(--text); border-color: #3a4a60; }
  .tl-tool svg {
    width: 15px;
    height: 15px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  .tl-tool .tool-icon-fill { fill: currentColor; stroke: none; }
  .tl-tool.active {
    background: rgba(var(--accent-rgb),.18);
    border-color: var(--accent);
    color: var(--accent);
  }
  #timeline.tool-hand, #timeline.tool-hand .tl-lane, #timeline.tool-hand .tl-cue, #timeline.tool-hand .tl-handle {
    cursor: grab !important;
  }
  #timeline.tool-hand.panning, #timeline.tool-hand.panning .tl-lane, #timeline.tool-hand.panning .tl-cue, #timeline.tool-hand.panning .tl-handle {
    cursor: grabbing !important;
  }
  #timeline.tool-split, #timeline.tool-split .tl-lane, #timeline.tool-split .tl-cue, #timeline.tool-split .tl-handle,
  #timeline.tool-delete, #timeline.tool-delete .tl-lane, #timeline.tool-delete .tl-cue, #timeline.tool-delete .tl-handle,
  #timeline.tool-select-right, #timeline.tool-select-right .tl-lane, #timeline.tool-select-right .tl-cue, #timeline.tool-select-right .tl-handle {
    cursor: crosshair !important;
  }
  .tl-track-labels {
    flex-shrink: 0;
    width: 168px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
  }
  .tl-track-labels-spacer { height: 40px; flex-shrink: 0; }
  .tl-track-label {
    height: 32px;
    margin-bottom: 7px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--panel-2);
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: context-menu;
  }
  .tl-track-label .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .tl-track-label-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* ── Drag handle ── */
  .tl-drag-handle {
    flex-shrink: 0;
    width: 12px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    cursor: grab;
    opacity: 0;
    transition: opacity .12s;
    padding: 0 1px;
  }
  .tl-drag-handle:active { cursor: grabbing; }
  .tl-drag-handle span {
    display: block;
    width: 8px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--text-dim);
  }
  .tl-track-label:hover .tl-drag-handle { opacity: 1; }

  /* ── Diálogos propios (reemplazan a alert/confirm/prompt nativos) ── */
  .app-dialog-overlay {
    position: fixed; inset: 0; z-index: 1400;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4,7,11,.55); backdrop-filter: blur(2px);
  }
  .app-dialog {
    width: min(420px, 90vw);
    background: #161b22;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    padding: 18px 18px 16px;
  }
  .app-dialog-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
  .app-dialog-msg { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
  .app-dialog-input {
    width: 100%; margin-top: 12px; box-sizing: border-box;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px; padding: 9px 10px; font-size: 13px;
  }
  .app-dialog-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
  .app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }


  /* ── Modal para combinar pistas ── */
  .merge-tracks-dialog {
    width: min(660px, 92vw);
    max-height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
  }
  .merge-track-dest-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    color: var(--text-dim);
    font-size: 12.5px;
  }
  .merge-track-select {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: var(--ui-font);
  }
  .merge-track-select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
  .merge-track-list {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    max-height: 330px;
    overflow: auto;
    padding: 6px;
  }
  .merge-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
  .merge-track-row:hover { background: rgba(255,255,255,.055); }
  .merge-track-check { accent-color: var(--accent); }
  .merge-track-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
  .merge-track-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .merge-track-name { color: var(--text); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .merge-track-meta { color: var(--text-dim); font-size: 11.5px; font-family: var(--mono); }
  .merge-track-summary {
    margin-top: 10px;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .merge-track-summary b { color: var(--text); }
  .merge-track-summary .warn { color: var(--warn); }
  .merge-track-note {
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 11.8px;
    line-height: 1.45;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(var(--accent-rgb),.06);
    border: 1px solid rgba(var(--accent-rgb),.18);
  }

  /* ── Botón de ojo (ocultar/mostrar pista) ── */
  .tl-eye {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: 2px;
    border-radius: 5px;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: .7;
  }
  .tl-eye:hover { background: rgba(255,255,255,.08); color: var(--text); opacity: 1; }
  .tl-track-label.track-hidden { opacity: .6; }
  .tl-track-label.track-hidden .tl-eye { color: var(--warn); opacity: 1; }
  .tl-lane-hidden {
    opacity: .42;
    background: repeating-linear-gradient(45deg, var(--panel-2) 0 6px, #161d27 6px 12px);
  }
  .tl-lane-hidden .tl-cue { filter: saturate(.55); }

  /* ── Reordenar pistas ── */
  body.reordering-tracks, body.reordering-tracks * { cursor: grabbing !important; user-select: none !important; }
  .tl-track-label {
    transition: transform .075s ease-out, box-shadow .12s ease, background .12s ease, opacity .12s ease;
    will-change: transform;
  }
  .tl-track-label.tl-reorder-source {
    opacity: .96;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),.20), rgba(48,49,58,.96));
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--accent-rgb),.38);
    outline: 1px solid rgba(var(--accent-rgb),.65);
    pointer-events: none;
  }
  .tl-track-label.tl-reorder-source .tl-drag-handle { opacity: 1; }
  .tl-track-label.tl-reorder-shift {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.24);
  }
  .tl-lane {
    transition: transform .075s ease-out, box-shadow .12s ease, opacity .12s ease;
    will-change: transform;
  }
  .tl-lane.tl-reorder-source {
    opacity: .82;
    box-shadow: 0 8px 20px rgba(0,0,0,.24), inset 0 0 0 1px rgba(var(--accent-rgb),.38);
    pointer-events: none;
  }
  .tl-lane.tl-reorder-shift {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18);
  }
  /* Compatibilidad visual si algún navegador dispara drag nativo por accidente. */
  .tl-track-label.tl-dragging { opacity: .55; }
  .tl-track-label.tl-drag-over-top { border-top: 2.5px solid var(--accent); }
  .tl-track-label.tl-drag-over-bottom { border-bottom: 2.5px solid var(--accent); }
  .tl-track-label-edit {
    display: none;
    flex: 1;
    min-width: 0;
    background: var(--panel-2);
    border: 1px solid var(--accent);
    color: var(--text);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 10.5px;
    font-family: var(--mono);
    font-weight: 700;
  }
  .tl-track-label.renaming { cursor: text; }
  .tl-track-label.renaming .tl-track-label-text { display: none; }
  .tl-track-label.renaming .tl-track-label-edit { display: block; }
  .tl-ruler { position: relative; height: 16px; margin-bottom: 4px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
  .tl-ruler .tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
  .tl-ruler .tick::before { content:''; position:absolute; left:50%; top:14px; width:1px; height:4px; background: var(--border); }
  .tl-lanes { position: relative; }
  .tl-lane { position: relative; height: 18px; margin-bottom: 5px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
  .tl-audiolane { position: relative; height: 18px; margin-bottom: 5px; background: rgba(var(--accent-rgb),.05); border-radius: 4px; overflow: hidden; cursor: ew-resize; }
  .tl-audiolane:hover { background: rgba(var(--accent-rgb),.09); }
  .tl-audiolane.scrubbing { background: rgba(20,167,255,.05); box-shadow: none; }
  body.scrubbing-audio, body.scrubbing-audio * { cursor: ew-resize !important; user-select: none !important; }
  .tl-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .tl-track-label-audio { color: var(--text-dim); }
  .tl-cue { position: absolute; top: 0; bottom: 0; border-radius: 3px; cursor: pointer; opacity: 0.88; min-width: 2px; }
  .tl-cue:hover { opacity: 1; outline: 1px solid rgba(255,255,255,0.55); }
  .tl-cue.overlap-warn { outline: 2px solid var(--danger); outline-offset: -2px; }
  .tl-scroll { width: 100%; margin-top: 8px; accent-color: var(--accent); }
  .timeline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    flex-shrink: 0;
  }
  .timeline-stats {
    margin: 0;
    color: #9bd3ff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

/* ===== 07-cues.css ===== */
  /* Reading-first cards. Fixed outer size matches VIRTUAL_CUE_ROW_HEIGHT. */
  .cue.cue-compact {
    position: relative;
    box-sizing: border-box;
    height: 112px;
    min-height: 112px;
    margin: 0 0 8px;
    padding: 10px 12px 8px;
    gap: 5px;
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-input, var(--panel));
    box-shadow: none;
    transform: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .cue.cue-compact:hover { border-color: var(--border-strong); box-shadow: none; transform: none; }
  .cue.cue-compact.active {
    border-color: rgba(var(--accent-rgb), .46);
    background: linear-gradient(110deg, rgba(var(--accent-rgb), .065), transparent 70%), var(--surface-input, var(--panel));
    box-shadow: inset 2px 0 rgba(var(--accent-rgb), .85);
    transform: none;
  }
  .cue.cue-compact.active::before { content: none; }
  .cue.cue-compact.search-hit { border-color: rgba(var(--accent-rgb), .28); }
  .cue.cue-compact.search-current { border-color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
  .cue.cue-compact.has-time-error, .cue.cue-compact.has-same-track-overlap { border-color: rgba(255,95,104,.55); }
  .cue.cue-compact .cue-card-head { display: flex; align-items: center; gap: 7px; height: 26px; flex: 0 0 26px; min-width: 0; }
  .cue-speaker { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 50%; margin-right: auto; }
  .cue-speaker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cue-color, var(--accent)); flex-shrink: 0; }
  .cue.cue-compact .track-select {
    min-width: 0; max-width: 100%; width: auto; padding: 3px 2px;
    border: 1px solid transparent; border-radius: 5px; background: transparent; box-shadow: none;
    color: var(--text-dim); font: 500 11px/1.2 var(--sans); text-overflow: ellipsis; cursor: pointer;
  }
  .cue.cue-compact .track-select:hover { color: var(--text); background: var(--panel-2); }
  .cue.cue-compact .cue-time-link, .cue.cue-compact .cue-options-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
    height: 26px; padding: 3px 5px; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-dim); background: transparent; box-shadow: none; transform: none;
    font: 500 10px/1 var(--mono); font-variant-numeric: tabular-nums;
  }
  .cue.cue-compact .cue-options-btn { width: 26px; }
  .cue.cue-compact .cue-time-link:hover, .cue.cue-compact .cue-options-btn:hover,
  .cue.cue-compact .cue-options-btn[aria-expanded="true"] { color: var(--text); background: var(--panel-2); border-color: var(--border); }
  .cue.cue-compact.active .cue-time-link { color: var(--accent); }
  .cue.cue-compact textarea {
    flex: 1 1 auto; height: 52px; min-height: 0; max-height: none; resize: none;
    padding: 2px 3px; margin: 0 -3px; width: calc(100% + 6px);
    border: 1px solid transparent; border-radius: 5px; background: transparent; box-shadow: none;
    color: var(--text); font: 400 14px/1.5 var(--sans); scrollbar-width: thin;
  }
  .cue.cue-compact textarea:hover { background: rgba(128,128,128,.035); }
  .cue.cue-compact textarea:focus { background: var(--panel-2); box-shadow: none; }
  .cue.cue-compact textarea.line-warn:not(:focus) { border-color: transparent; box-shadow: none; }
  .cue-card-status { display: flex; align-items: center; gap: 8px; height: 14px; flex: 0 0 14px; min-width: 0; }
  .cue-on-screen { display: none; color: var(--accent); font: 500 9px/1.2 var(--sans); white-space: nowrap; }
  .cue.active .cue-on-screen { display: block; }
  .cue.cue-compact .badges { min-height: 0; min-width: 0; flex-wrap: nowrap; overflow: hidden; gap: 8px; }
  .cue.cue-compact .badge { padding: 0; border: 0; background: transparent; font: 400 9px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; }
  .cue.cue-compact .badge.same-track { color: var(--danger); }
  .cue.cue-compact .cue-options {
    position: fixed; inset: auto; margin: 0; padding: 14px; box-sizing: border-box;
    width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
    border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text);
    background: var(--panel); box-shadow: 0 16px 48px rgba(0,0,0,.35);
    font: 400 12px/1.5 var(--sans);
  }
  .cue-options:popover-open { animation: cue-options-enter .14s ease-out; }
  .cue-options::backdrop { background: transparent; }
  .cue-options-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .cue-options-head strong { font-size: 12px; font-weight: 600; }
  .cue-options .cue-options-close { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--text-dim); font: 400 20px/1 var(--sans); box-shadow: none; }
  .cue.cue-compact .cue-options .times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-family: var(--sans); }
  .cue-options .times label { display: grid; gap: 5px; color: var(--text-dim); font-size: 10px; }
  .cue.cue-compact .cue-options .times input { box-sizing: border-box; width: 100%; padding: 8px; font-size: 11px; color: var(--text); background: var(--panel-2); }
  .cue-options .cue-save-times { width: 100%; margin-top: 10px; font-size: 11px; background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.24); color: var(--text); box-shadow: none; }
  .cue-options-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; color: var(--text-dim); font: 400 10px/1.4 var(--sans); }
  .cue-options-meta .lines-count { font: inherit; }
  .cue-options-actions { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
  .cue-options-actions button { text-align: left; padding: 7px 8px; font: 400 11px/1.4 var(--sans); background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--text); }
  .cue-options-actions button:hover { background: var(--panel-2); }
  .cue-options-actions .delete-btn { color: var(--danger); }
  .cue-time-error { color: var(--danger); font-size: 10px; margin-top: 8px; }
  .cue.cue-compact button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  @keyframes cue-options-enter { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .cue-options:popover-open { animation: none; } .cue.cue-compact { transition: none; } }

  /* ---------- Shared / legacy cue styles ---------- */
  .cue {
    background: linear-gradient(180deg, #151b24, #121821);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 10px 10px 9px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.15s, border-color .15s, transform .12s;
  }
  .cue:hover { border-color: #334155; }
  .cue.has-overlap { border-color: rgba(255,180,84,.62); }
  .cue.active {
    position: relative;
    border-color: rgba(var(--accent-rgb),.85);
    background: linear-gradient(180deg, rgba(var(--accent-rgb),.13), var(--panel));
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.72), 0 0 36px rgba(var(--accent-rgb),.24);
    transform: translateX(2px);
  }
  .cue.active::before {
    content: 'EN PANTALLA';
    position: absolute; top: -8px; right: 12px; z-index: 2;
    padding: 2px 8px; border-radius: 999px;
    background: var(--accent); color: #03131e;
    font: 800 9.5px/1 var(--mono); letter-spacing: .06em;
    box-shadow: 0 0 18px rgba(var(--accent-rgb),.35);
  }
  .cue textarea {
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text);
    border-radius: 7px;
    padding: 8px 9px;
    font-family: var(--mono);
    font-size: 13px;
    width: 100%;
    min-height: 54px;
    max-height: 170px;
    resize: vertical;
    line-height: 1.48;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  }
  .cue textarea:focus,
  .cue input:focus,
  .cue select:focus { outline: 1px solid rgba(var(--accent-rgb),.55); border-color: rgba(var(--accent-rgb),.55); }
  .cue textarea.line-warn { border-color: var(--danger); box-shadow: 0 0 0 1px rgba(255,95,104,.24); }
  .cue .times {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
  }
  .cue .times input {
    background: #1a2330;
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: 3px 6px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    width: 82px;
    min-width: 0;
  }
  .cue .times .dur {
    color: var(--text-dim);
    background: #19212c;
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 3px 7px;
    line-height: 1.1;
  }
  .seek-btn { padding: 3px 7px; font-size: 11px; flex-shrink: 0; line-height: 1; min-width: 24px; }
  .cue-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .cue-footer-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .cue-footer-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .cue-footer-right .track-select {
    background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text);
    border-radius: 6px; padding: 5px 7px; font-size: 11.5px; font-family: var(--mono);
    max-width: 130px;
  }
  .badges { display: flex; gap: 5px; flex-wrap: wrap; min-height: 20px; align-items: center; }
  .badge {
    font-size: 10px; padding: 2px 6px; border-radius: 5px; font-family: var(--mono);
    border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap;
  }
  .badge.warn { color: var(--warn); border-color: var(--warn); background: rgba(255,180,84,.08); }
  .badge.overlap { color: var(--danger); border-color: var(--danger); background: rgba(255,95,104,.08); }
  .badge.same-track { color: #fff; border-color: var(--danger); background: var(--danger); font-weight: 700; }

  .nbsp-toggle { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
  .nbsp-toggle input { accent-color: var(--accent); }
  .lines-count { font-size: 10.5px; color: var(--text-dim); font-family: var(--mono); white-space: nowrap; }
  .add-tag-btn { color: #bfe6ff; border-color: rgba(var(--accent-rgb),.38); }
  .add-tag-btn:hover { border-color: var(--accent); }
  .delete-btn { color: #ffb3b7; border-color: rgba(255,95,104,.45); }
  .delete-btn:hover { border-color: var(--danger); }

  .empty-state { text-align: center; color: var(--text-dim); padding: 60px 0; }


  .autosave-status {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
    min-width: 124px;
    text-align: right;
  }

  .projects-section {
    background: rgba(11,15,21,.72);
    border: 1px solid #17202b;
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow);
    min-width: 0;
  }
  .projects-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }
  .projects-section h2 { margin: 0 0 4px; font-size: 15px; }
  .projects-section p { margin: 0; color: var(--text-dim); font-size: 12.5px; }
  .projects-count {
    color: #9bd3ff;
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
  }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  .project-card {
    position: relative;
    background: linear-gradient(180deg, #151d28, #101720);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .12s, box-shadow .12s, transform .12s;
  }
  .project-card:hover {
    border-color: #36506b;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.08), 0 10px 24px rgba(0,0,0,.20);
    transform: translateY(-2px);
  }
  .project-card.active-project {
    border-color: rgba(var(--accent-rgb),.72);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.18), 0 0 22px rgba(var(--accent-rgb),.10);
  }
  .project-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 800;
    font-size: 13px;
    min-width: 0;
    padding-right: 22px; /* espacio para el boton de eliminar */
  }
  .project-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb),.65);
    flex-shrink: 0;
  }
  .project-name-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .project-name-edit {
    display: none;
    flex: 1;
    min-width: 0;
    background: var(--panel-2);
    border: 1px solid var(--accent);
    color: var(--text);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 12.5px;
    font-family: var(--sans);
  }
  .project-card.renaming .project-name-text { display: none; }
  .project-card.renaming .project-name-edit { display: block; }
  .project-card.renaming .project-rename-btn { display: none; }
  .project-rename-btn, .project-delete-icon {
    width: 20px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    border-radius: 6px;
    color: var(--text-dim);
  }
  .project-rename-btn:hover { color: var(--text); border-color: #3a4a60; }
  .project-delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffb3b7;
    border-color: rgba(255,95,104,.36);
    background: rgba(255,95,104,.08);
  }
  .project-delete-icon:hover { background: rgba(255,95,104,.18); }
  .project-meta {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
  }
  .project-open { margin-top: auto; }
  .project-empty {
    grid-column: 1 / -1;
    color: var(--text-dim);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 22px 12px;
    background: rgba(255,255,255,.015);
    font-size: 12.5px;
  }


  .findbar {
    background: linear-gradient(180deg, #141c27, #101720);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 9px;
    margin: 0 2px 9px 0;
    flex-shrink: 0;
  }
  .findbar-title {
    color: #caeaff;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .findbar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .findbar-grid input[type="text"] {
    flex: 1 1 130px;
    min-width: 0;
  }
  .findbar input[type="text"] {
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 12px;
    min-width: 0;
    font-family: var(--mono);
  }
  .findbar input[type="text"]:focus { outline: 1px solid rgba(var(--accent-rgb),.55); border-color: rgba(var(--accent-rgb),.55); }
  .findbar-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top: 6px; }
  .findbar-status { color: var(--text-dim); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }

  .cue.search-hit { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.12); }
  .cue.search-current { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(var(--accent-rgb),.18); }
  .cue.has-time-error { border-color: rgba(255,95,104,.82); }
  .cue.has-same-track-overlap { border-color: var(--danger); box-shadow: 0 0 0 1px rgba(255,95,104,.45); }
  .cue input.time-warn { border-color: var(--danger); box-shadow: 0 0 0 1px rgba(255,95,104,.22); }

  .help-btn {
    width: 18px; height: 18px; padding: 0; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; line-height: 1;
    background: var(--panel-3); border: 1px solid var(--border-soft); color: var(--text-dim);
  }
  .help-btn:hover, .help-btn.active { color: var(--accent); border-color: var(--accent); }
  .help-popover {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--panel-3); border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow);
    font-size: 11.5px; color: var(--text-dim); width: 290px; z-index: 50;
  }
  .help-popover.open { display: block; }
  .help-popover strong { color: var(--text); display: block; margin-bottom: 6px; font-size: 12px; }
  .help-popover ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  .help-popover b { color: #9bd3ff; }

/* ===== 04-editor.css ===== */
  /* ---------- Modal de atajos de teclado ---------- */
  .kbd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
  }
  .kbd-modal {
    background: var(--panel-2, #1a2030);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(900px, 95vw);
    max-height: calc(100vh - 2cm);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
    overflow: hidden;
  }
  .kbd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
  }
  .kbd-modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1;
  }
  .kbd-modal-close:hover { color: var(--text); background: rgba(255,255,255,.08); }
  .wave-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
  .wave-spinner { width: 11px; height: 11px; border: 2px solid var(--border-soft, #3d3e48); border-top-color: var(--accent, var(--accent)); border-radius: 50%; display: inline-block; animation: wave-spin .7s linear infinite; }
  @keyframes wave-spin { to { transform: rotate(360deg); } }
  .kbd-remap-note { color: var(--text-dim); font-size: 12px; margin: 0 0 12px; }
  .kbd-fixed-note { color: var(--text-dim); font-size: 11px; margin-top: 14px; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 10px; }
  .kbd-fixed-note b { color: var(--text); }
  .kbd-remap-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin: 14px 0 6px; }
  .kbd-remap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
  .kbd-remap-row .lbl { font-size: 13px; }
  .kbd-remap-key { font-family: var(--mono); font-size: 12px; min-width: 78px; text-align: center; padding: 5px 10px; border-radius: 7px; background: #30313a; border: 1px solid #3d3e48; color: var(--text); cursor: pointer; }
  .kbd-remap-key:hover { border-color: var(--accent); }
  .kbd-remap-key.listening { background: var(--accent); color: #04121d; border-color: var(--accent); }
  .kbd-remap-key.dup { border-color: var(--danger); color: var(--danger); }
  .kbd-modal-footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
  .kbd-modal-body {
    overflow-y: auto;
    padding: 20px 24px;
    display: block;
  }
  .kbd-section { margin-bottom: 24px; }
  .kbd-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent, var(--accent)); margin: 0 0 10px; font-weight: 700; }
  .kbd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 13.5px;
    color: var(--text-dim);
  }
  .kbd-row span:first-child { color: var(--text, #d8dde8); flex: 1; }
  .kbd-row span:last-child { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; align-items: center; white-space: nowrap; }
  .kbd-row em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
  kbd { background: #2a3040; border: 1px solid #3e4860; border-radius: 5px; padding: 2px 7px; font-family: var(--mono); font-size: 11.5px; color: #c8d8f0; box-shadow: 0 1px 0 #1a2030; }

  /* ---------- Menu contextual (click derecho) ---------- */
  .context-menu {
    position: fixed;
    display: none;
    background: var(--panel-3);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 4px;
    box-shadow: var(--shadow);
    z-index: 200;
    min-width: 210px;
    font-size: 12px;
  }
  .context-menu.open { display: block; animation: menuSoftIn .11s cubic-bezier(.2,.9,.2,1) both; }
  .context-menu .ctx-label {
    padding: 6px 10px 4px;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .context-menu .ctx-sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }
  .context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--text);
    font-size: 12px;
    font-family: var(--sans);
    cursor: pointer;
  }
  .context-menu button:hover:not(:disabled) { background: rgba(var(--accent-rgb),.14); }
  .context-menu button.has-submenu { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .context-menu .ctx-caret { margin-left: auto; color: var(--text-dim); font-size: 15px; line-height: 1; }
  .context-submenu { min-width: 178px; z-index: 205; }
  .context-menu .ctx-swatch { width: 13px; height: 13px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
  .context-menu button.danger { color: #ffb3b7; }
  .context-menu button.danger:hover:not(:disabled) { background: rgba(255,95,104,.14); }
  .context-menu button:disabled { opacity: .4; cursor: not-allowed; }

  .tl-lanes { user-select: none; }
  .tl-lane { cursor: default; }
  .tl-lane {
    height: 32px;
    margin-bottom: 7px;
    overflow: hidden;
  }
  .tl-cue {
    cursor: default;   /* en modo V no cambia el cursor; solo el modo mano lo pone en grab */
    display: flex;
    align-items: center;
    min-width: 6px;
    z-index: 2;
  }
  .tl-cue:active { cursor: grabbing; }
  .tl-cue.selected { outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; }
  .tl-cue.on-screen {
    opacity: 1;
    z-index: 4;
    outline: 2px solid rgba(var(--accent-rgb),.95);
    outline-offset: 1px;
    filter: brightness(1.16) saturate(1.14);
    animation: activeCuePulse .9s ease-out infinite;
  }
  .tl-cue.on-screen .tl-cue-label::before { content: '▶ '; color: rgba(4,10,17,.92); }
  .tl-cue.time-warn { outline: 2px solid var(--danger); outline-offset: -2px; }
  .tl-cue.same-track-overlap { outline: 2px dashed #fff; outline-offset: -2px; z-index: 3; }
  .tl-cue-label {
    pointer-events: none;
    color: rgba(4, 10, 17, .88);
    font-family: var(--mono);
    font-weight: 900;
    font-size: 10.5px;
    padding: 0 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(255,255,255,.16);
  }
  .tl-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    background: rgba(255,255,255,.22);
    opacity: 0;
    transition: opacity .12s;
    cursor: ew-resize;
  }
  .tl-handle.left { left: 0; border-radius: 3px 0 0 3px; }
  .tl-handle.right { right: 0; border-radius: 0 3px 3px 0; }
  .tl-cue:hover .tl-handle { opacity: 1; }
  .tl-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ffffff;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,.4);
    z-index: 6;
    pointer-events: none;
    display: none;
  }
  /* Líneas de guía verticales que aparecen al arrastrar un cue cerca de un borde snap */
  .tl-guide-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: #ffdd55;
    box-shadow: 0 0 6px rgba(255,221,85,.7);
    z-index: 8;
    pointer-events: none;
    display: none;
  }
  .tl-guide-line.start { background: #38e6a6; box-shadow: 0 0 6px rgba(56,230,166,.65); }
  .tl-guide-line.end   { background: #ffb454; box-shadow: 0 0 6px rgba(255,180,84,.65); }
  .tl-playhead::before { content: none; }
  /* Cabezal en la regla: triángulo blanco apuntando hacia abajo */
  .tl-playhead-cap {
    position: absolute;
    top: 0;
    width: 12px;
    height: 20px;
    transform: translateX(-50%);
    background: #f5f5fb;
    /* Rectángulo fino arriba + punta apuntando abajo. El 100% del clip-path
       llega justo donde empieza la línea del playhead, dejando la unión limpia. */
    clip-path: polygon(25% 0, 75% 0, 75% 50%, 50% 100%, 25% 50%);
    filter: drop-shadow(0 0 3px rgba(255,255,255,.45));
    pointer-events: none;
    z-index: 9;
  }
  .tl-marquee {
    position: absolute;
    border: 1px solid var(--accent);
    background: rgba(var(--accent-rgb),.16);
    z-index: 7;
    pointer-events: none;
  }
  body.marquee-select, body.marquee-select * { cursor: crosshair !important; }
  body.dragging-timeline, body.dragging-timeline * { cursor: grabbing !important; }
  body.duplicating-timeline, body.duplicating-timeline * { cursor: copy !important; }
  .tl-cue-ghost { opacity: .55; outline: 2px dashed #fff; outline-offset: -2px; pointer-events: none; z-index: 5; }

  .timeline-wrap .tl-lanes {
    flex: 1;
    min-height: 54px;
    overflow-y: auto;
    padding-right: 4px;
  }


  /* ---------- Pulido visual / acciones compactas ---------- */
  body > header .actions { gap: 6px; }
  .compact-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
  }
  .compact-export {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .autosave-status {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .import-card h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .card-mark {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 16px rgba(var(--accent-rgb),.58);
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .projects-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
  }
  .toast {
    background: rgba(18, 24, 33, .96);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: 12.5px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px);
    animation: toast-in .16s ease-out forwards;
  }
  .toast.ok { border-left-color: var(--ok); }
  .toast.warn { border-left-color: var(--warn); }
  .toast.danger { border-left-color: var(--danger); }
  .toast .toast-title {
    font-weight: 800;
    margin-bottom: 2px;
  }
  .toast .toast-message { color: var(--text-dim); }
  @keyframes toast-in {
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 1180px) {
    body > header .stats { display: none; }
    .editor-layout { grid-template-columns: minmax(430px, 1fr) 14px minmax(360px, var(--subs-panel-w, 46vw)); }
  }

  @media (max-width: 1100px) {
    .home-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 880px) {
    body { overflow: auto; }
    body > header { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
    body > header .actions { flex-wrap: wrap; }
    main { height: auto; overflow: visible; }
    .editor-layout { grid-template-columns: 1fr; height: auto; gap: 14px; }
    .pane-resizer-x { display: none; }
    .left-col { min-height: 62vh; }
    .right-col { height: 70vh; }
    .cue-list-scroll, .player-wrap, .player-placeholder { overflow: auto; }
    #importScreen { grid-template-columns: 1fr; }
    .home-grid { grid-template-columns: 1fr; }
  }


  /* ---------- Premiere-inspired professional theme ----------
     Grafito + acentos violeta/azul, inspirado en la vibra oscura de Premiere. */
  :root {
    --bg: #1b1b1f;
    --panel: #25252b;
    --panel-2: #2f3037;
    --panel-3: #383941;
    --border: #484a54;
    --border-soft: #3a3b44;
    --text: #ececf0;
    --text-dim: #aaaab3;
    --accent: #14a7ff;
    --accent-blue: #14a7ff;
    --accent-soft: rgba(var(--accent-rgb),.18);
    --accent-glow: rgba(var(--accent-rgb),.38);
    --warn: #f6bd60;
    --danger: #ff6b73;
    --ok: #43d39e;
    --shadow: 0 18px 42px rgba(0,0,0,.34);
  }

  body {
    background:
      radial-gradient(circle at 14% -12%, rgba(var(--accent-rgb),.13), transparent 30%),
      radial-gradient(circle at 86% 0%, rgba(38,128,235,.08), transparent 28%),
      linear-gradient(180deg, #202024 0%, var(--bg) 42%, #18181b 100%);
  }
  ::selection { background: rgba(var(--accent-rgb),.32); }
  ::-webkit-scrollbar-track { background: #18181b; }
  ::-webkit-scrollbar-thumb { background: #3a3b44; border-color: #18181b; }
  ::-webkit-scrollbar-thumb:hover { background: #4b4c58; }

  body > header {
    background: rgba(31,31,36,.96);
    border-bottom-color: #3a3b44;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 28px rgba(0,0,0,.20);
  }
  .project-dot,
  .card-mark {
    color: var(--accent);
    background: var(--accent);
    text-shadow: 0 0 18px var(--accent-glow);
    box-shadow: 0 0 18px var(--accent-glow);
  }
  body > header .stats,
  .timeline-stats,
  .projects-count,
  .cue-list-header span:first-child,
  .findbar-title,
  .tl-title > span:first-child,
  .help-popover b { color: #9bd3ff; }

  button {
    background: linear-gradient(#34353c, #292a31);
    border-color: #464750;
    color: var(--text);
  }
  button:hover {
    background: #3b3c45;
    border-color: #5c5d69;
    box-shadow: 0 0 0 1px rgba(255,255,255,.035) inset;
  }
  button.primary {
    background: var(--accent);
    border-color: #0f8fde;
    color: #04121d;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 18px rgba(var(--accent-rgb),.20);
  }
  button.primary:hover {
    background: var(--accent-bright);
    border-color: var(--accent);
  }
  button.primary:disabled {
    background: #2a4a5e;
    border-color: #2a4a5e;
    color: #7f95a4;
    box-shadow: none;
    cursor: default;
  }
  button.ghost { background: #272830; }

  .left-col,
  .right-col {
    background: #191a1e;
    border-color: #30313a;
  }
  .import-card,
  .projects-section,
  .timeline-wrap,
  .findbar,
  .trans-card {
    background: linear-gradient(180deg, #282930, #222329);
    border-color: #3b3c45;
  }
  .projects-section { background: rgba(29,30,35,.78); }
  .project-card,
  .cue {
    background: linear-gradient(180deg, #282932, #202127);
    border-color: #383942;
  }
  .project-card:hover,
  .cue:hover {
    border-color: #5b5c68;
  }
  .project-card.active-project,
  .cue.active {
    border-color: rgba(var(--accent-rgb),.78);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.24), 0 0 24px rgba(var(--accent-rgb),.14);
  }

  .player-placeholder {
    border-color: #484a54;
    background: rgba(31,31,36,.86);
  }
  .player-wrap,
  .cue textarea,
  .cue .times input,
  .cue .times .dur,
  .cue-footer-right .track-select,
  .findbar input[type="text"],
  .trans-field select,
  .switch-row input[type="number"],
  .trans-range-box,
  .assign-row input[type=text],
  .project-name-edit,
  .tl-lane,
  .tl-track-label {
    background: #30313a;
    border-color: #3d3e48;
  }
  .cue textarea:focus,
  .cue input:focus,
  .cue select:focus,
  .findbar input[type="text"]:focus {
    outline-color: rgba(var(--accent-rgb),.58);
    border-color: rgba(var(--accent-rgb),.68);
  }

  .tl-tool {
    background: linear-gradient(180deg, #30313a, #272830);
    border-color: #3d3e48;
    color: #b9b9c4;
  }
  .tl-tool:hover {
    background: #3b3c46;
    color: #f2f2f6;
    border-color: #666676;
  }
  .tl-tool.active {
    background: linear-gradient(180deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.12));
    border-color: var(--accent);
    color: #d6efff;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.20) inset, 0 0 18px rgba(var(--accent-rgb),.18);
  }
  .tl-cue:hover { outline-color: rgba(255,255,255,.68); }
  .tl-playhead {
    background: #f5f5fb;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,.4);
  }
  .tl-playhead-cap {
    background: #f5f5fb;
    height: 20px;
    filter: drop-shadow(0 0 3px rgba(200,200,255,.55));
  }
  .tl-marquee {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),.17);
  }
  .pane-resizer-x::before,
  .pane-resizer-y::before {
    background: #3a3b44;
    border-color: #50515c;
    box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 0 18px rgba(var(--accent-rgb),.09);
  }
  .pane-resizer-x:hover::before,
  .pane-resizer-x.is-dragging::before,
  .pane-resizer-y:hover::before,
  .pane-resizer-y.is-dragging::before {
    background: #4b4c58;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.24), 0 0 24px rgba(var(--accent-rgb),.18);
  }

  .add-tag-btn {
    color: #cde7ff;
    border-color: rgba(var(--accent-rgb),.42);
    background: rgba(var(--accent-rgb),.08);
  }
  .add-tag-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),.14);
  }
  .badge.warn { background: rgba(246,189,96,.09); }
  .badge.overlap { background: rgba(255,107,115,.09); }
  .context-menu {
    background: #30313a;
    border-color: #484a54;
  }
  .context-menu button:hover:not(:disabled) { background: rgba(var(--accent-rgb),.14); }
  .toast {
    background: rgba(31,32,38,.97);
    border-color: #4a4b55;
    border-left-color: var(--accent);
  }


  /* ---------- Flat Premiere blue buttons ----------
     Botones sin degradados: azul Adobe sobrio + estados planos. */
  :root {
    --accent: #2680eb;
    --accent-blue: #2680eb;
    --accent-soft: rgba(38,128,235,.18);
    --accent-glow: rgba(38,128,235,.36);
  }

  button {
    background: #2b2c33;
    border-color: #474852;
    color: var(--text);
    box-shadow: none;
  }
  button:hover {
    background: #343640;
    border-color: #5b5d6a;
    box-shadow: 0 0 0 1px rgba(255,255,255,.035) inset;
  }
  button:active { transform: translateY(1px); }

  button.primary,
  .compact-export.primary,
  .project-open.primary,
  #btnAssignContinue,
  #btnNewCue {
    background: #2680eb;
    border-color: #2680eb;
    color: #ffffff;
    box-shadow: none;
  }
  button.primary:hover,
  .compact-export.primary:hover,
  .project-open.primary:hover,
  #btnAssignContinue:hover,
  #btnNewCue:hover {
    background: #1473e6;
    border-color: #1473e6;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }

  button.ghost,
  .compact-action,
  .compact-export:not(.primary) {
    background: #25262d;
    border-color: #3e404a;
    color: #d7d7df;
  }
  button.ghost:hover,
  .compact-action:hover,
  .compact-export:not(.primary):hover {
    background: #30323b;
    border-color: #565866;
    color: #ffffff;
  }

  .tl-tool {
    background: #2b2c33;
    border-color: #42444e;
    color: #c8c8d2;
    box-shadow: none;
  }
  .tl-tool:hover {
    background: #343640;
    border-color: #5b5d6a;
    color: #ffffff;
  }
  .tl-tool.active {
    background: #2680eb;
    border-color: #2680eb;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 18px rgba(38,128,235,.22);
  }

  .add-tag-btn {
    background: #25262d;
    border-color: #2680eb;
    color: #dcecff;
  }
  .add-tag-btn:hover {
    background: #2680eb;
    border-color: #2680eb;
    color: #ffffff;
  }

  .help-btn.active,
  .help-btn:hover,
  .project-card.active-project,
  .cue.active {
    border-color: rgba(38,128,235,.78);
  }

  .cue.active {
    border-color: rgba(38,128,235,.92);
    box-shadow: 0 0 0 2px rgba(38,128,235,.72), 0 0 36px rgba(38,128,235,.22);
  }


  /* ---------- Timeline refinements: stats inline + Premiere-like ruler ---------- */
  .tl-title {
    align-items: flex-start;
  }
  .tl-title-left {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
  }
  .tl-title-text {
    font-size: 12px;
    color: #d7e9ff;
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .timeline-stats-inline {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: min(620px, 54vw);
    padding: 2px 7px;
    border: 1px solid #3e404a;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #bfc2cc;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .timeline-footer {
    justify-content: flex-end;
    padding-top: 6px;
    margin-top: 7px;
  }
  .tl-ruler {
    position: relative;
    height: 26px;
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #383a43;
    background:
      linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 10px),
      linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 62%),
      #202127;
    background-size: 10px 100%, 100% 100%, 100% 100%;
    border-radius: 5px 5px 0 0;
    overflow: visible;
    clip-path: none;
    /* El overflow visible permite que los pins y tooltips salgan del ruler */
  }
  .tl-ruler:hover {
    background:
      linear-gradient(180deg, rgba(38,128,235,.08), rgba(255,255,255,0) 68%),
      #23242b;
  }
  .tl-ruler .tick,
  .tl-ruler .tick::before {
    content: none !important;
  }
  .tl-ruler .tick {
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 1px;
    border-radius: 1px 1px 0 0;
    pointer-events: none;
    white-space: nowrap;
  }
  .tl-ruler .tick.minor {
    height: 6px;
    background: #50525e;
    opacity: .75;
  }
  .tl-ruler .tick.mid {
    height: 9px;
    background: #696b78;
    opacity: .82;
  }
  .tl-ruler .tick.major {
    height: 14px;
    background: #8a8d9c;
    opacity: .98;
  }
  .tl-ruler .tick-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #c7c8d2;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: -.02em;
    text-shadow: 0 1px 1px rgba(0,0,0,.55);
  }
  .tl-ruler .tick.major:hover .tick-label { color: #ffffff; }

  .tl-scroll-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-shrink: 0;
  }
  .tl-scroll-row .tl-scroll {
    flex: 1;
    min-width: 0;
    margin-top: 0;
  }
  .tl-progress-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid #3e404a;
    background: rgba(255,255,255,.045);
    color: #d7e9ff;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
    user-select: none;
    white-space: nowrap;
  }

  /* ── Transport bar ── */
  .tl-transport {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 5px;
    flex-shrink: 0;
  }
  .tl-transport-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    transition: color .1s, background .1s;
    min-width: 22px;
  }
  .tl-transport-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
  .tl-transport-btn:active { transform: none; }
  .tl-transport-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
  .tl-vol-wrap { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; }
  .tl-vol-slider {
    width: 56px;
    height: 3px;
    accent-color: var(--accent);
    cursor: pointer;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
  }
  .tl-vol-slider::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
  }
  /* Speed button active state */
  .tl-transport-btn-active { color: var(--accent) !important; }
  /* Zoom % pill: slightly larger text */
  .tl-progress-pill { font-size: 12px !important; min-width: 52px !important; }
  .tl-progress-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── Collapsible findbar ── */
  .findbar { border-bottom: 1px solid var(--border); }
  .findbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 7px 0 7px 0;
    user-select: none;
    gap: 8px;
  }
  .findbar-header:hover .findbar-title-text { color: var(--text); }
  .findbar-toggle-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-dim);
    transition: transform .18s;
  }
  .findbar.collapsed .findbar-toggle-icon { transform: rotate(-90deg); }
  .findbar-body {
    overflow: hidden;
    max-height: 200px;
    transition: max-height .22s ease, opacity .18s;
    opacity: 1;
  }
  .findbar.collapsed .findbar-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* Search and replacement: one clear navigation row, quieter edit controls. */
  #findbar{padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--panel-2),var(--panel));box-shadow:inset 0 1px 0 #ffffff04}
  #findbarHeader{width:100%;padding:2px 0 10px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);text-align:left;font:inherit}
  #findbar.collapsed #findbarHeader{padding-bottom:2px}
  #findbar .findbar-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
  #findbar .findbar-title-text{font-family:var(--font,inherit);font-size:12px;font-weight:650;color:var(--text)}
  #findbar .findbar-status{font-size:10px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
  #findbar .findbar-body{max-height:300px}
  #findbar.collapsed .findbar-body{max-height:0}
  .findbar-search-row{display:flex;align-items:center;gap:6px}
  .findbar-input-wrap{display:flex;align-items:center;flex:1;min-width:60px;gap:8px;padding:0 7px 0 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--muted);transition:border-color .15s,box-shadow .15s}
  .findbar-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 13%,transparent)}
  #findbar .findbar-input-wrap input{width:100%;min-width:0;height:36px;padding:0;border:0;background:none;box-shadow:none;outline:0;font-family:inherit;font-size:12px}
  #findbar .findbar-icon-button{display:inline-flex;align-items:center;justify-content:center;width:29px;min-width:29px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-dim);box-shadow:none;cursor:pointer;font-size:18px;transition:background .15s,color .15s,transform .15s}
  #findbar .findbar-icon-button:hover:not(:disabled){color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  #findbar .findbar-icon-button:active:not(:disabled){transform:translateY(1px)}
  #findbar .findbar-search-button{height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--text);font-weight:600}
  .findbar-navigation{display:flex;align-items:center;padding:2px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
  #findbar .findbar-navigation button+button{border-left:1px solid var(--border);border-top-left-radius:0;border-bottom-left-radius:0}
  .findbar-options{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0 12px}
  .findbar-options label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;cursor:pointer;user-select:none}
  .findbar-options input{width:12px;height:12px;margin:0;accent-color:var(--accent)}
  .findbar-replace-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding-top:11px;border-top:1px solid var(--border)}
  #findbar .findbar-replace-row input{flex:1 1 140px;min-width:80px;width:auto;height:34px;border-radius:8px;font-family:inherit;font-size:12px;background:var(--bg)}
  .findbar-replace-actions{display:flex;flex-wrap:wrap;gap:6px}
  #findbar .findbar-replace-actions button{height:32px;border-radius:7px;font-size:10px;font-weight:500;padding:0 9px;background:var(--panel-2);color:var(--text-dim)}
  #findbar button:disabled{opacity:.38;cursor:default;transform:none}
  #findbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .findbar-hint{display:flex;flex-wrap:wrap;gap:5px 12px;justify-content:space-between;color:var(--muted);font-size:9px;margin:10px 0 1px;opacity:.8}
  .cue-list-header #btnNewCue{padding:3px 8px;font-size:10px;min-height:25px}
  .caption-search-flash-layer{position:absolute;inset:0;pointer-events:none;z-index:8}
  .caption-search-flash{position:absolute;border-radius:5px;background:color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 14px color-mix(in srgb,var(--accent) 20%,transparent);animation:caption-search-pulse .7s cubic-bezier(.2,.7,.2,1) both;pointer-events:none}
  @keyframes caption-search-pulse{0%{opacity:0;transform:scale(.96)}22%{opacity:1;transform:scale(1.035)}50%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
  @media(prefers-reduced-motion:reduce){.caption-search-flash{animation:caption-search-still .7s linear both}.findbar-body,.findbar-toggle-icon{transition:none}}
  @keyframes caption-search-still{0%,75%{opacity:.7}100%{opacity:0}}

  .context-menu .ctx-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: var(--text-dim);
    font-size: 11.5px;
  }



  /* ---------- Player limpio + timecode estilo Premiere ---------- */
  #videoPlayer {
    cursor: default;
  }
  #videoPlayer::-webkit-media-controls,
  #videoPlayer::-webkit-media-controls-enclosure,
  #videoPlayer::-webkit-media-controls-panel {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .player-wrap:hover #videoPlayer::-webkit-media-controls,
  .player-wrap:hover #videoPlayer::-webkit-media-controls-enclosure,
  .player-wrap:hover #videoPlayer::-webkit-media-controls-panel {
    display: none !important;
  }
  .tl-timecode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    border: 1px solid #474956;
    background: #15161b;
    color: #f1f3f7;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .02em;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(0,0,0,.22);
    white-space: nowrap;
  }
  .tl-title-left {
    align-items: center;
  }
  .timeline-stats-inline {
    height: 22px;
  }
  .stat-same-track-err {
    color: var(--danger);
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 4px;
    transition: background .12s;
  }
  .stat-same-track-err:hover { background: rgba(255,95,104,.18); }

  /* Regla de tiempo con etiquetas visibles, sin cortes verticales */
  .tl-ruler {
    height: 34px !important;
    padding-top: 2px;
    overflow: hidden;
  }
  .tl-ruler .tick.minor {
    bottom: 0;
    height: 8px;
  }
  .tl-ruler .tick.mid {
    bottom: 0;
    height: 12px;
  }
  .tl-ruler .tick.major {
    top: 0;
    bottom: auto;
    height: 100%;
    background: transparent !important;
    opacity: 1;
  }
  .tl-ruler .tick.major::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 16px;
    border-radius: 1px 1px 0 0;
    background: #8f929d;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  }
  .tl-ruler .tick-label {
    top: 2px !important;
    bottom: auto !important;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(31,32,38,.72);
    color: #e0e2ea;
  }
  .tl-ruler .tick.edge-left .tick-label {
    left: 0;
    transform: translateX(0);
  }
  .tl-ruler .tick.edge-right .tick-label {
    left: auto;
    right: 0;
    transform: translateX(0);
  }


  .kbd-remap-row { grid-template-columns: minmax(160px, 1fr) auto; }
  .kbd-remap-slots { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 260px; }
  .kbd-remap-key.secondary { min-width: 92px; opacity: .92; }
  .kbd-plus { color: var(--text-dim); font-size: 11px; font-weight: 800; opacity: .72; }
  .kbd-clear-secondary {
    width: 23px; height: 23px; border-radius: 7px; padding: 0; line-height: 1;
    background: rgba(255,255,255,.035); color: var(--text-dim); border: 1px solid var(--border);
  }
  .kbd-clear-secondary:hover { color: var(--danger); border-color: rgba(255,93,122,.55); }

/* ===== 08-transcription.css ===== */
/* Cadencia markers/right-panel styles. Extracted from index.html in 1.0.10. */
/* =====================================================
     SISTEMA DE MARCADORES — Subtitles WIZARD
     ===================================================== */

  /* ── Tabs del panel derecho ── */
  .right-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    flex-shrink: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 8px;
    min-width: 0;
  }
  .right-tab {
    min-width: 0;
    padding: 6px 5px;
    border-radius: 8px;
    font-size: 11.2px;
    font-weight: 700;
    color: var(--text-dim);
    background: rgba(255,255,255,.015);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, transform .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
  }
  .right-tab svg { flex: 0 0 auto; width: 11px; height: 11px; }
  .right-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .right-tab:hover { background: var(--panel-2); color: var(--text); border-color: var(--border-soft); }
  .right-tab.active {
    background: linear-gradient(180deg, #262a35, #1d2029);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 0 0 1px rgba(38,128,235,.14) inset, 0 8px 18px rgba(0,0,0,.12);
  }
  .right-tab .tab-badge {
    background: var(--accent);
    color: #fff;
    border-radius: 99px;
    font-size: 9.5px;
    font-family: var(--mono);
    font-weight: 800;
    min-width: 17px;
    max-width: 30px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }

  /* ── Panel de marcadores ── */


  /* ── I/O del reproductor + panel de transcripción ── */
  .io-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .io-readout {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.025);
    border-radius: 6px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  .tl-io-range {
    position: absolute;
    top: 0;
    height: 34px;
    min-width: 2px;
    box-sizing: border-box;
    border: 1px solid rgba(84, 169, 255, .70);
    border-left-width: 2px;
    border-right-width: 2px;
    border-radius: 5px 5px 0 0;
    background:
      linear-gradient(180deg, rgba(84,169,255,.30), rgba(84,169,255,.13)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 16px rgba(84,169,255,.16);
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
  }
  .tl-io-range-label {
    position: absolute;
    left: 50%;
    top: 4px;
    max-width: calc(100% - 10px);
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(12, 16, 24, .72);
    color: #eaf4ff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0,0,0,.65);
  }
  .tl-io-pin {
    position: absolute;
    top: 0;
    width: 16px;
    height: 34px;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: ew-resize;
    touch-action: none;
    z-index: 6;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  }
  .tl-io-pin:hover { filter: drop-shadow(0 0 6px rgba(84,169,255,.8)); }
  .tl-io-pin.dragging { z-index: 9; filter: drop-shadow(0 0 8px rgba(84,169,255,.95)); }
  .tl-io-pin::before {
    content: attr(data-label);
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 900;
    color: #08111f;
  }
  .tl-io-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 17px;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
  }
  .tl-io-pin.in::before,
  .tl-io-pin.in::after { background: #54a9ff; }
  .tl-io-pin.out::before,
  .tl-io-pin.out::after { background: #ffb454; }
  #transcriptionPanel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
  #transcriptionPanel.visible { display: flex; }
  .transcription-scroll { overflow-y: auto; flex: 1; min-height: 0; padding: 0 6px 0 0; }
  .trans-card {
    background: linear-gradient(180deg, #282932, #202127);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 11px;
    margin: 0 0 10px 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
  }
  .trans-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }
  .trans-card-head.compact { margin-bottom: 8px; }
  .trans-kicker {
    color: #9bd3ff;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
  }
  .trans-card h3 { margin: 0; font-size: 14px; line-height: 1.2; }
  .trans-status-pill,
  .trans-count {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-dim);
    background: #30313a;
    border: 1px solid #3d3e48;
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
  }
  .trans-status-pill.running { color: #111116; background: var(--warn); border-color: var(--warn); }
  .trans-status-pill.ok { color: #0d1b15; background: var(--ok); border-color: var(--ok); }
  .trans-status-pill.error { color: #fff; background: var(--danger); border-color: var(--danger); }
  .trans-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; color: var(--text-dim); font-size: 11.5px; }
  .trans-field > label,
  .trans-field > span,
  .trans-field label { color: var(--text-dim); }
  .trans-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .segmented { display: flex; gap: 5px; }
  .seg-btn { flex: 1; padding: 7px 8px; }
  .seg-btn.active {
    color: #04121d;
    background: var(--accent);
    border-color: #0f8fde;
    font-weight: 800;
  }
  .trans-field select,
  .switch-row input[type="number"] {
    background: #30313a;
    border: 1px solid #3d3e48;
    color: var(--text);
    border-radius: 7px;
    padding: 7px 8px;
    font-family: var(--mono);
    font-size: 12px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .trans-field-grid > .trans-field { min-width: 0; }
  .trans-field.trans-field-wide { grid-column: 1 / -1; }
  .trans-field input[type="text"],
  .trans-field input[type="password"] {
    background: #30313a; border: 1px solid #3d3e48; color: var(--text);
    border-radius: 7px; padding: 7px 8px; font-family: var(--mono); font-size: 12px;
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
  .trans-field input[type="text"]:focus,
  .trans-field input[type="password"]:focus { outline: 1px solid rgba(var(--accent-rgb),.58); border-color: rgba(var(--accent-rgb),.68); }
  .trans-field select:focus,
  .switch-row input[type="number"]:focus { outline: 1px solid rgba(var(--accent-rgb),.58); border-color: rgba(var(--accent-rgb),.68); }
  .trans-range-box {
    background: #30313a;
    border: 1px solid #3d3e48;
    border-radius: 7px;
    padding: 7px 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text);
    min-height: 33px;
  }
  .trans-generate,
  .trans-add-track { width: 100%; margin-top: 2px; }
  .trans-note { color: var(--text-dim); font-size: 11.5px; margin-top: 9px; line-height: 1.45; }
  .trans-progress { margin-top: 10px; }
  .trans-progress-bar { height: 8px; border-radius: 999px; overflow: hidden; background: #18191f; border: 1px solid #3d3e48; }
  .trans-progress-bar span { display:block; width: 0%; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s ease; }
  .trans-progress p { margin: 6px 0 0; color: var(--text-dim); font-size: 11.5px; }
  .trans-details {
    border: 1px solid #3d3e48;
    background: rgba(255,255,255,.025);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .trans-details summary {
    cursor: pointer;
    padding: 9px 10px;
    color: #9bd3ff;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    user-select: none;
  }
  .trans-details-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
  .switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-dim);
    font-size: 11.5px;
  }
  .switch-row input[type="number"] { width: 76px; }
  .switch-row input[type="checkbox"] { accent-color: var(--accent); }
  .trans-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10.5px;
    margin: 10px 1px 6px;
  }
  .trans-preview {
    max-height: 290px;
    overflow: auto;
    background: #18191f;
    border: 1px solid #3d3e48;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 10px;
  }
  .trans-preview-item {
    border-left: 3px solid var(--accent);
    background: rgba(255,255,255,.025);
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 7px;
  }
  .trans-preview-time { color: #9bd3ff; font-family: var(--mono); font-size: 10.5px; margin-bottom: 4px; }
  .trans-preview-text { white-space: pre-wrap; color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 1.45; }
  .trans-empty { color: var(--text-dim); text-align: center; padding: 24px 8px; font-size: 12px; }
  #markerListPanel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
  #markerListPanel.visible { display: flex; }
  #subsPanel { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
  #subsPanel.hidden { display: none; }

  .marker-list-scroll { overflow-y: auto; flex: 1; padding-right: 6px; min-height: 0; scroll-behavior: smooth; }
  .marker-list-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 2px 8px; color: var(--text-dim); font-size: 11.5px; flex-shrink: 0;
  }
  .marker-list-header span:first-child { color: #9bd3ff; font-family: var(--mono); font-weight: 700; }

  .marker-card {
    background: linear-gradient(180deg, #1e1f27, #18191f);
    border: 1px solid var(--border-soft);
    border-left: 4px solid #e8b400;
    border-radius: 10px;
    padding: 9px 10px 9px 11px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
  }
  .marker-card:hover { border-color: #5a5b68; box-shadow: 0 0 0 1px rgba(232,180,0,.18); }
  .marker-card.marker-active { box-shadow: 0 0 0 2px rgba(232,180,0,.65); }
  .marker-card-head {
    display: flex; align-items: center; gap: 7px;
  }
  .marker-card-tc {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: #e8b400;
    flex-shrink: 0;
  }
  .marker-card-comment {
    flex: 1; font-size: 12px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .marker-card-actions { display: flex; gap: 5px; flex-shrink: 0; }
  .marker-card-actions button {
    width: 22px; height: 22px; padding: 0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1;
  }

/* ===== 09-markers.css ===== */
  /* Reading-first marker cards, matching the subtitle list. */
  .marker-card.marker-compact {
    padding: 12px; gap: 10px; margin-bottom: 8px; border: 1px solid var(--border);
    border-left-width: 1px; border-radius: 12px; background: var(--surface-input, var(--panel));
    box-shadow: none; transition: border-color .18s ease, background .18s ease;
  }
  .marker-card.marker-compact:hover { border-color: var(--border-strong); box-shadow: none; }
  .marker-card.marker-compact.marker-previewing, .marker-card.marker-compact.marker-active {
    border-color: rgba(var(--accent-rgb),.4); box-shadow: inset 2px 0 rgba(var(--accent-rgb),.75);
    background: linear-gradient(110deg, rgba(var(--accent-rgb),.06), transparent 70%), var(--surface-input, var(--panel));
  }
  .marker-compact .marker-card-top { align-items: center; margin: 0; gap: 8px; min-height: 26px; }
  .marker-compact .marker-card-user { gap: 7px; overflow: hidden; }
  .marker-compact .marker-card-avatar { width: 24px; height: 24px; border-radius: 7px; }
  .marker-compact .marker-card-avatar-ini { font-size: 9px; }
  .marker-compact .marker-card-name { font-size: 11px; font-weight: 500; color: var(--text-dim); max-width: none; }
  .marker-compact .marker-card-actions { gap: 5px; }
  .marker-compact .marker-card-actions button {
    width: auto; height: 26px; padding: 3px 5px; gap: 6px;
    background: transparent; color: var(--text-dim); border: 1px solid transparent; box-shadow: none; transform: none;
  }
  .marker-compact .marker-card-actions .marker-options-btn { width: 26px; }
  .marker-compact .marker-card-actions button:hover,
  .marker-compact .marker-options-btn[aria-expanded="true"] { background: var(--panel-2); border-color: var(--border); color: var(--text); }
  .marker-color-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--marker-color); flex-shrink: 0; }
  .marker-compact .marker-card-tc { color: inherit; font: 500 10px/1 var(--mono); cursor: pointer; font-variant-numeric: tabular-nums; }
  .marker-compact .marker-card-comment-full { margin: 0; color: var(--text); font: 400 14px/1.55 var(--sans); white-space: pre-wrap; }
  .marker-compact .marker-card-comment-empty { color: var(--text-dim); font: 400 12px/1.5 var(--sans); margin: 2px 0; }
  .marker-compact .web-team-comment-badge { background: none; border: 0; border-radius: 0; padding: 0 3px; color: var(--text-dim); font: 400 9px/1.4 var(--sans); white-space: nowrap; }
  .marker-drawing-label { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 20px; flex-shrink: 0; }
  .marker-drawing-label svg { opacity: .8; }
  .marker-compact .marker-options {
    position: fixed; inset: auto; margin: 0; padding: 8px; box-sizing: border-box;
    width: min(240px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
    border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel); color: var(--text);
    box-shadow: 0 16px 48px rgba(0,0,0,.35); cursor: default;
  }
  .marker-options:popover-open { display: grid; gap: 3px; animation: marker-options-enter .14s ease-out; }
  .marker-options::backdrop { background: transparent; }
  .marker-options-title { padding: 5px 8px 9px; color: var(--text-dim); font: 500 10px/1.4 var(--sans); }
  .marker-options button { padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font: 400 12px/1.4 var(--sans); text-align: left; }
  .marker-options button:hover { background: var(--panel-2); }
  .marker-options .delete-btn { color: var(--danger); }
  .marker-compact button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  #markerPreview { margin: 0 2px 10px; padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-input, var(--panel)); }
  #markerPreview .marker-preview-frame { border: 0; border-radius: 0; }
  #markerPreview .marker-preview-meta { padding: 9px 12px; gap: 10px; }
  #markerPreview .marker-preview-tc { font-size: 10px; font-weight: 500; }
  #markerPreview .marker-preview-note { font-size: 11px; }
  #markerListPanel .marker-list-header { flex-wrap: wrap; gap: 8px; }
  @keyframes marker-options-enter { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .marker-options:popover-open { animation: none; } .marker-card.marker-compact { transition: none; } }

  /* ── Icono de anotación en tarjeta ── */
  .marker-card-draw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 5px;
    background: rgba(138,99,210,.18);
    border: 1px solid rgba(138,99,210,.38);
    flex-shrink: 0;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .marker-card-draw-badge:hover {
    background: rgba(138,99,210,.32);
    border-color: rgba(138,99,210,.7);
  }
  .marker-card-draw-badge svg { display: block; }

  /* ── Mini vista previa de la corrección seleccionada (arriba de las tarjetas) ── */
  .marker-preview {
    flex-shrink: 0;
    margin: 0 2px 9px;
    padding: 7px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: linear-gradient(180deg, #22232b, #1a1b21);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .marker-preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    overflow: hidden;
    background: #0d0e12;
    border: 1px solid #33343d;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .marker-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .marker-preview-fallback {
    display: none;
    font-family: var(--mono);
    font-size: 10.5px;
    color: #5b5c68;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .marker-preview.is-empty .marker-preview-img { display: none; }
  .marker-preview.is-empty .marker-preview-fallback { display: block; }
  .marker-preview-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }
  .marker-preview-tc {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    color: #e8b400;
    flex-shrink: 0;
  }
  .marker-preview-note {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marker-card.marker-previewing { box-shadow: 0 0 0 1px rgba(155,211,255,.45); }

  /* ── Cabecera de tarjeta de marcador: autor (foto + nombre), tiempo debajo, acciones a la derecha ── */
  .marker-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
  }
  .marker-card-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .marker-card-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--accent, #7c5cff), var(--accent-bright, #9b7bff));
  }
  .marker-card-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .marker-card-avatar-ini { color: #fff; font-family: var(--mono); font-weight: 700; font-size: 11px; }
  .marker-card-idcol { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .marker-card-name {
    font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; line-height: 1.2;
  }
  .marker-card .marker-card-tc { font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1.2; }
  .marker-card-top .marker-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

  /* ── Toggle del atajo M ── */
  .marker-hotkey-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: transparent;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
  }
  .marker-hotkey-toggle:hover { background: var(--panel-2); border-color: var(--border); }
  .marker-hotkey-toggle .mht-pill {
    width: 26px; height: 14px;
    background: #3a3b46;
    border-radius: 99px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
  }
  .marker-hotkey-toggle .mht-pill::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    background: #888;
    border-radius: 50%;
    transition: transform .2s, background .2s;
  }
  .marker-hotkey-toggle.enabled .mht-pill { background: rgba(232,180,0,.35); }
  .marker-hotkey-toggle.enabled .mht-pill::after { transform: translateX(12px); background: #e8b400; }
  .marker-hotkey-toggle .mht-key {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    background: #2a2b36; border: 1px solid #3a3b44; border-radius: 3px;
    padding: 0 4px; line-height: 16px; color: var(--text-dim);
  }
  .marker-hotkey-toggle.enabled .mht-key { color: #e8b400; border-color: rgba(232,180,0,.4); }

  /* ── Tarjeta de marcador rediseñada (más énfasis en texto) ── */
  /* El comentario y el timecode son texto copiable: cursor de texto y selección
     habilitada para que Ctrl+C tome el texto y no el sub del timeline. */
  .marker-card-comment-full,
  .marker-card .marker-card-tc,
  .marker-card-name,
  .marker-preview-note {
    user-select: text;
    cursor: text;
  }
  .marker-card-comment-full {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.45;
    margin-top: 1px;
    word-break: break-word;
  }
  .marker-card-comment-empty {
    font-size: 11.5px;
    color: #555;
    font-style: italic;
  }
  .marker-empty-state { text-align: center; color: var(--text-dim); padding: 40px 10px; font-size: 12.5px; }
  .marker-empty-state .hint { font-size: 11px; margin-top: 6px; }

  /* ── Pins de marcador en el timeline ruler ── */
  .tl-marker-pin {
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tl-marker-pin-flag {
    width: 14px;
    height: 14px;
    position: relative;
    flex-shrink: 0;
  }
  /* SVG inline via background — dibujamos un marcador tipo Premiere con clip-path */
  .tl-marker-pin-flag::before {
    content: '';
    position: absolute;
    top: 1px; left: 3px;
    width: 8px; height: 8px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  }
  .tl-marker-pin-stem {
    width: 1.5px;
    flex: 1;
    background: currentColor;
    opacity: .5;
  }
  .tl-marker-pin:hover .tl-marker-pin-flag::before {
    filter: brightness(1.35);
  }
  .tl-marker-pin-tooltip {
    display: none;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-10px);
    background: rgba(22,23,30,.97);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 11px;
    color: var(--text);
    white-space: pre;
    max-width: 200px;
    white-space: normal;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    line-height: 1.4;
  }
  .tl-marker-pin:hover .tl-marker-pin-tooltip { display: block; }

  /* ── Modal de anotación ── */
  #markerModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(8,9,13,.78);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
  }
  #markerModal.open { display: flex; }

  .marker-modal-inner {
    background: #1a1b22;
    border: 1px solid #3a3b46;
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0,0,0,.58);
    width: min(860px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .marker-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #2e2f3a;
    flex-shrink: 0;
  }
  .marker-modal-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 8px;
  }
  .marker-modal-title .tc-badge {
    font-family: var(--mono); font-size: 11px; color: #e8b400;
    background: rgba(232,180,0,.1); border: 1px solid rgba(232,180,0,.3);
    border-radius: 5px; padding: 2px 7px;
  }
  .marker-modal-close {
    width: 26px; height: 26px; padding: 0; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--text-dim);
    background: transparent; border-color: transparent;
  }
  .marker-modal-close:hover { background: rgba(255,107,115,.15); color: #ff6b73; border-color: rgba(255,107,115,.3); }

  .marker-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
  }

  /* Área canvas (izquierda) */
  .marker-canvas-area {
    flex: 1;
    min-width: 0;
    position: relative;
    background: #0d0e12;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .marker-canvas-stack {
    position: relative;
    /* tamaño determinado por JS */
    flex-shrink: 0;
  }
  #markerBgCanvas, #markerDrawCanvas {
    position: absolute;
    top: 0; left: 0;
    display: block;
  }
  #markerBgCanvas { z-index: 1; }
  #markerDrawCanvas { z-index: 2; }

  /* Barra de herramientas (derecha del canvas) */
  .marker-tools-bar {
    width: 52px;
    flex-shrink: 0;
    background: #15161d;
    border-left: 1px solid #2a2b36;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    overflow-y: auto;
  }
  .marker-tool-btn {
    width: 36px; height: 36px; padding: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    color: var(--text-dim);
    background: #1e1f28;
    border: 1px solid #35363f;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
    flex-shrink: 0;
  }
  .marker-tool-btn:hover { background: #2a2b36; color: var(--text); border-color: #555; }
  .marker-tool-btn.active {
    background: #2680eb;
    border-color: #2680eb;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .marker-tool-btn svg { display: block; pointer-events: none; }
  .marker-tools-sep {
    width: 28px; height: 1px;
    background: #2e2f3a;
    flex-shrink: 0;
    margin: 2px 0;
  }
  .marker-color-swatch {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .1s, transform .1s;
    flex-shrink: 0;
  }
  .marker-color-swatch:hover { transform: scale(1.18); }
  .marker-color-swatch.active { border-color: #fff; }
  .marker-stroke-btn {
    width: 36px; height: 22px; padding: 0; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-dim);
    background: #1e1f28;
    border: 1px solid #35363f;
    flex-shrink: 0;
  }
  .marker-stroke-btn.active {
    background: rgba(38,128,235,.22);
    border-color: var(--accent);
    color: var(--text);
  }

  /* Footer del modal */
  .marker-modal-footer {
    padding: 10px 14px 12px;
    border-top: 1px solid #2e2f3a;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: #15161d;
  }
  #markerCommentInput {
    width: 100%;
    background: #1e1f28;
    border: 1px solid #35363f;
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--sans);
    resize: none;
    height: 56px;
    line-height: 1.4;
  }
  #markerCommentInput:focus { outline: 1px solid rgba(38,128,235,.55); border-color: rgba(38,128,235,.55); }
  #markerCommentInput::placeholder { color: #555; }
  .marker-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .marker-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .marker-color-label { font-size: 10.5px; color: var(--text-dim); margin-right: 2px; }

  /* ── Navegador de solapamientos (clic en la píldora de stats) ── */
  .overlap-nav {
    position: fixed;
    z-index: 1200;
    width: min(440px, 86vw);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: #161b22;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,.5);
    overflow: hidden;
  }
  .overlap-nav-head {
    padding: 9px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    color: #9bd3ff;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
  }
  .overlap-nav-list { overflow-y: auto; padding: 6px; }
  .overlap-nav-empty { padding: 22px 12px; text-align: center; color: var(--text-dim); font-size: 12px; }
  .overlap-nav-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--danger);
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 6px;
    cursor: pointer;
    color: var(--text);
  }
  .overlap-nav-item:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
  .overlap-nav-item.same { border-left-color: #fff; }
  .overlap-nav-tc { font-family: var(--mono); font-size: 10.5px; color: #9bd3ff; white-space: nowrap; }
  .overlap-nav-spk { font-family: var(--mono); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
  .overlap-nav-text { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .overlap-nav-flag { grid-column: 1 / -1; font-size: 9.5px; color: var(--danger); font-family: var(--mono); }
  .marker-color-foot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
  }
  .marker-color-foot:hover { border-color: rgba(255,255,255,.5); }
  .marker-color-foot.active { border-color: #fff; }

  /* ── CSS específico del tema Premiere sobre las partes de markers ── */
  .marker-card { background: linear-gradient(180deg, #282932, #202127); }
  .marker-card:hover { border-color: #5b5c68; }
  .marker-preview { background: linear-gradient(180deg, #2b2c36, #212229); }

  /* ── Ventana de anotación web ───────────────────────────────
     The current marker HTML is a compact, single-column dialog. These rules
     intentionally replace the older .marker-modal-inner/.marker-modal-body
     desktop layout so the canvas, toolbar and footer remain one contained
     panel instead of floating independently over the editor. */
  #markerModal {
    padding: 16px;
    box-sizing: border-box;
  }
  #markerModal .marker-modal {
    width: min(900px, calc(100vw - 32px));
    height: min(760px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(139, 112, 255, .34);
    border-radius: 16px;
    background: linear-gradient(145deg, #1b1c27 0%, #12141c 58%, #101118 100%);
    box-shadow: 0 28px 90px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.025) inset;
  }
  #markerModal .marker-modal-head {
    min-height: 58px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.075);
    background: rgba(255,255,255,.025);
  }
  #markerModal .marker-modal-tc {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #ffe06d;
    background: rgba(232,180,0,.13);
    border: 1px solid rgba(232,180,0,.3);
    border-radius: 6px;
    padding: 5px 8px;
    white-space: nowrap;
  }
  #markerModal .marker-modal-title {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 750;
  }
  #markerModal .marker-modal-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    border: 1px solid transparent;
  }
  #markerModal .marker-canvas-area {
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 16px 68px 14px 16px;
    overflow: hidden;
    background:
      radial-gradient(circle at 48% 32%, rgba(125,88,255,.10), transparent 50%),
      #0c0e14;
  }
  #markerModal .marker-canvas-stack {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.1);
  }
  #markerModal .marker-canvas-stack canvas { touch-action: none; }
  #markerModal .marker-tools {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-height: calc(100% - 28px);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;
    background: rgba(20,22,32,.94);
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
  }
  #markerModal .marker-tools::-webkit-scrollbar { width: 0; height: 0; }
  #markerModal .marker-tool-btn { width: 32px; height: 32px; border-radius: 7px; }
  #markerModal .marker-stroke-btn { width: 32px; }
  #markerModal .marker-tools-sep { width: 22px; margin: 1px 0; }
  #markerModal .marker-color-swatch { width: 18px; height: 18px; }
  #markerModal .marker-modal-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "comment comment" "colors actions";
    align-items: center;
    gap: 10px 14px;
    padding: 13px 16px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
  }
  #markerModal .marker-comment-input {
    grid-area: comment;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    height: 52px;
    padding: 10px 11px;
    border-color: rgba(139,112,255,.42);
    background: rgba(8,10,16,.56);
  }
  #markerModal .marker-color-row { grid-area: colors; }
  #markerModal .marker-modal-actions { grid-area: actions; }
  #markerModal .marker-modal-actions .primary { box-shadow: 0 7px 18px rgba(117,80,255,.3); }

  @media (max-width: 620px) {
    #markerModal { padding: 10px; }
    #markerModal .marker-modal {
      width: calc(100vw - 20px);
      height: calc(100vh - 20px);
      border-radius: 13px;
    }
    #markerModal .marker-canvas-area { padding: 12px 12px 58px; }
    #markerModal .marker-tools {
      top: auto;
      bottom: 10px;
      right: 50%;
      transform: translateX(50%);
      flex-direction: row;
      max-width: calc(100% - 20px);
      max-height: 42px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    #markerModal .marker-tools-sep { width: 1px; height: 22px; margin: 0 1px; }
    #markerModal .marker-modal-foot { grid-template-columns: 1fr; grid-template-areas: "comment" "colors" "actions"; }
    #markerModal .marker-modal-actions { justify-content: stretch; }
    #markerModal .marker-modal-actions button { flex: 1; }
  }

/* ===== 90-theme.css ===== */
/* Cadencia theme override styles. Extracted from index.html in 1.0.10. */
:root {
    /* ── Superficies (oscuro por defecto) ── */
    --bg: #0e0f13;
    --bg-deep: #0b0c10;
    --panel: #16171e;
    --panel-head: #121319;
    --panel-2: #1a1c24;
    --panel-3: #20222b;
    --surface-input: #181922;
    --border: #2a2c36;
    --border-soft: #20222b;
    --border-strong: #44485a;
    /* ── Texto ── */
    --text: #eceef2;
    --text-soft: #c9cbd4;
    --text-dim: #9b9ea9;
    --text-faint: #6b6e7a;
    /* Triple RGB para divisores/overlays según el tema */
    --line-rgb: 255,255,255;
    /* ── Acento (preset violeta por defecto) ── */
    --accent: #7c5cff;
    --accent-2: #8d72ff;
    --accent-bright: #9b7bff;
    --accent-rgb: 124,92,255;
    --accent-blue: var(--accent);
    --accent-soft: rgba(var(--accent-rgb),.18);
    --accent-glow: rgba(var(--accent-rgb),.40);
    /* Derivados del acento (adaptan al tema y a cualquier color de acento) */
    --accent-text: color-mix(in srgb, var(--accent) 50%, #ffffff);
    --accent-text-2: color-mix(in srgb, var(--accent) 26%, #ffffff);
    --accent-deep: color-mix(in srgb, var(--accent) 70%, #000000);
    --accent-muted: color-mix(in srgb, var(--accent) 30%, var(--panel-2));
    --warn: #f6bd60;
    --danger: #ff6b73;
    --ok: #00b8a3;
    --shadow: 0 18px 42px rgba(0,0,0,.42);
    --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: 'Hanken Grotesk', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ui-font: 'Hanken Grotesk', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display: 'Schibsted Grotesk', 'Space Grotesk', var(--sans);
  }

  /* ===== Presets de color de acento ===== */
  :root[data-accent="violet"] { --accent:#7c5cff; --accent-2:#8d72ff; --accent-bright:#9b7bff; --accent-rgb:124,92,255; }
  :root[data-accent="teal"]   { --accent:#00b8a3; --accent-2:#00cdb6; --accent-bright:#3fd6c2; --accent-rgb:0,184,163; }
  :root[data-accent="orange"] { --accent:#ff6a3d; --accent-2:#ff7d52; --accent-bright:#ff9670; --accent-rgb:255,106,61; }
  :root[data-accent="blue"]   { --accent:#3d8bff; --accent-2:#57a0ff; --accent-bright:#6fb0ff; --accent-rgb:61,139,255; }
  :root[data-accent="gold"]   { --accent:#d4af37; --accent-2:#dcbb4f; --accent-bright:#e7cd6e; --accent-rgb:212,175,55; }

  /* ===== Tema CLARO ===== */
  :root[data-theme="light"] {
    --bg: #eef0f5;
    --bg-deep: #e3e6ee;
    --panel: #ffffff;
    --panel-head: #f6f7fb;
    --panel-2: #f1f2f7;
    --panel-3: #e7e9f1;
    --surface-input: #f2f3f8;
    --border: #d9dce6;
    --border-soft: #e6e8f0;
    --border-strong: #c3c8d5;
    --text: #1b1e29;
    --text-soft: #3a4050;
    --text-dim: #5d6473;
    --text-faint: #888fa0;
    --line-rgb: 24,27,40;
    --shadow: 0 18px 42px rgba(20,22,45,.12);
    /* En claro, el texto de acento se oscurece para contrastar sobre fondo claro */
    --accent-text: color-mix(in srgb, var(--accent) 88%, #000000);
    --accent-text-2: color-mix(in srgb, var(--accent) 78%, #000000);
    --accent-deep: color-mix(in srgb, var(--accent) 58%, #ffffff);
    --accent-muted: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
  }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cfd3de; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #b9bece; }
  /* En claro, el panel de marca del login sigue siendo oscuro/colorido (branding). */

  body {
    font-family: var(--sans);
    background:
      radial-gradient(circle at 14% -12%, rgba(var(--accent-rgb),.14), transparent 32%),
      radial-gradient(circle at 88% -6%, rgba(var(--accent-rgb),.07), transparent 30%),
      linear-gradient(180deg, var(--panel-head) 0%, var(--bg) 46%, var(--bg-deep) 100%);
  }
  ::selection { background: rgba(var(--accent-rgb),.34); }
  ::-webkit-scrollbar-track { background: var(--bg-deep); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-color: var(--bg-deep); }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

  /* Tipografía de títulos */
  body > header h1, .home-title, .projects-section h2,
  #assignScreen h2, .engine-modal-head h3 {
    font-family: var(--display);
    letter-spacing: -.01em;
  }

  /* Acentos de texto que estaban en azul claro → violeta claro */
  body > header .stats, .timeline-stats, .projects-count,
  .cue-list-header span:first-child, .findbar-title, .tl-title > span:first-child,
  .help-popover b, .home-sub b, .home-panel-sub b, .trans-kicker,
  .trans-preview-time, .marker-list-header span:first-child, .tl-title-text,
  .timeline-stats-inline, .overlap-nav-head, .overlap-nav-tc {
    color: var(--accent-text) !important;
  }

  /* ── Botones ── */
  button { background: var(--surface-input); border-color: var(--border); color: var(--text); box-shadow: none; }
  button:hover { background: var(--panel-3); border-color: var(--border-strong); }
  button.primary,
  .compact-export.primary, .project-open.primary,
  #btnAssignContinue, #btnNewCue {
    background: linear-gradient(140deg, var(--accent), var(--accent-2));
    border-color: var(--accent-deep);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb),.30);
  }
  button.primary:hover,
  .compact-export.primary:hover, .project-open.primary:hover,
  #btnAssignContinue:hover, #btnNewCue:hover {
    background: linear-gradient(140deg, var(--accent-bright), var(--accent-bright));
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(var(--accent-rgb),.45);
  }
  button.primary:disabled { background: var(--accent-muted); border-color: var(--accent-muted); color: var(--text-faint); box-shadow: none; }
  button.ghost, .compact-action, .compact-export:not(.primary) {
    background: var(--surface-input); border-color: var(--border); color: var(--text-soft);
  }
  button.ghost:hover, .compact-action:hover, .compact-export:not(.primary):hover {
    background: var(--panel-3); border-color: var(--border-strong); color: #fff;
  }

  /* ── Header superior ── */
  body > header {
    background: var(--panel-head);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 rgba(var(--line-rgb),.04) inset, 0 6px 20px rgba(0,0,0,.14);
  }
  .home-logo, #btnHome svg, .card-mark, .project-dot {
    color: #fff;
  }
  .home-logo {
    background: linear-gradient(160deg, var(--accent-bright), var(--accent)) !important;
    box-shadow: 0 8px 22px rgba(var(--accent-rgb),.42) !important;
    border-radius: 16px !important;
  }
  .project-dot, .card-mark {
    background: var(--accent) !important;
    box-shadow: 0 0 16px rgba(var(--accent-rgb),.6) !important;
  }

  /* ── Paneles / tarjetas ── */
  .left-col, .right-col { background: var(--panel-head); border-color: var(--border); }
  .import-card, .projects-section, .timeline-wrap, .findbar, .trans-card, .home-panel {
    background: linear-gradient(180deg, var(--surface-input), var(--panel-head));
    border-color: var(--border);
  }
  .projects-section { background: var(--panel-head); }
  .project-card, .cue {
    background: linear-gradient(180deg, var(--surface-input), var(--surface-input));
    border-color: var(--border);
  }
  .project-card:hover, .cue:hover { border-color: var(--border-strong); }
  .project-card.active-project, .cue.active {
    border-color: rgba(var(--accent-rgb),.78);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.24), 0 0 24px rgba(var(--accent-rgb),.16);
  }
  .cue.active {
    background: linear-gradient(180deg, rgba(var(--accent-rgb),.13), var(--panel));
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.72), 0 0 36px rgba(var(--accent-rgb),.22);
  }
  .cue.active::before { background: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(var(--accent-rgb),.4); }
  .cue { border-left-color: var(--accent); }

  /* ── Inputs / campos ── */
  .player-wrap, .cue textarea, .cue .times input, .cue .times .dur,
  .cue-footer-right .track-select, .findbar input[type="text"], .trans-field select,
  .switch-row input[type="number"], .trans-range-box, .assign-row input[type=text],
  .project-name-edit, .tl-lane, .tl-track-label, .home-search,
  .trans-field input[type="text"], .trans-field input[type="password"] {
    background: var(--panel-2); border-color: var(--border);
  }
  .cue textarea:focus, .cue input:focus, .cue select:focus,
  .findbar input[type="text"]:focus, .home-search:focus,
  .trans-field select:focus, .switch-row input[type="number"]:focus,
  .trans-field input:focus {
    outline-color: rgba(var(--accent-rgb),.6) !important;
    border-color: rgba(var(--accent-rgb),.68) !important;
  }

  /* ── Acciones rápidas del inicio ── */
  .home-action { background: var(--panel); border-color: var(--border); }
  .home-action:hover { border-color: var(--accent); background: var(--panel-2); }
  .home-action-ic { background: rgba(var(--accent-rgb),.14); color: var(--accent-text); border-color: rgba(var(--accent-rgb),.24); }
  .home-action-primary { background: linear-gradient(160deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.04)); border-color: rgba(var(--accent-rgb),.4); }
  .home-action-primary .home-action-ic { background: var(--accent); color: #fff; border-color: transparent; }
  .home-env-pill:hover { border-color: var(--accent); }
  .home-env-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(0,184,163,.7); }

  /* ── Timeline ── */
  .tl-tool { background: var(--panel-2); border-color: var(--border); color: var(--text-soft); }
  .tl-tool:hover { background: var(--panel-3); color: var(--text); border-color: var(--border-strong); }
  .tl-tool.active {
    background: linear-gradient(180deg, rgba(var(--accent-rgb),.30), rgba(var(--accent-rgb),.14));
    border-color: var(--accent); color: var(--accent-text-2);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22) inset, 0 0 18px rgba(var(--accent-rgb),.18);
  }
  .tl-cue:hover { outline-color: rgba(var(--line-rgb),.5); }
  .tl-playhead, .tl-playhead-cap { background: var(--accent-bright); }
  .tl-marquee { border-color: var(--accent); background: rgba(var(--accent-rgb),.17); }
  .pane-resizer-x::before, .pane-resizer-y::before {
    background: var(--border); border-color: var(--border-strong);
    box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 0 18px rgba(var(--accent-rgb),.10);
  }
  .pane-resizer-x:hover::before, .pane-resizer-x.is-dragging::before,
  .pane-resizer-y:hover::before, .pane-resizer-y.is-dragging::before {
    background: var(--border-strong); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.24), 0 0 24px rgba(var(--accent-rgb),.18);
  }
  .tl-ruler:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),.08), rgba(255,255,255,0) 68%), var(--panel-2); }
  .tl-progress-pill, .tl-timecode { color: var(--accent-text-2); }
  .tl-vol-slider { accent-color: var(--accent); }
  .tl-vol-slider::-webkit-slider-thumb { background: var(--accent); }
  .tl-transport-btn-active { color: var(--accent) !important; }
  .zoom input[type=range], .tl-zoom input[type=range], .tl-scroll { accent-color: var(--accent); }

  /* ── Pestañas panel derecho ── */
  .right-tab.active {
    background: linear-gradient(180deg, var(--panel-3), var(--surface-input));
    border-color: var(--border);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.16) inset, 0 8px 18px rgba(0,0,0,.14);
  }
  .right-tab .tab-badge { background: var(--accent); color: #fff; }
  .seg-btn.active { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
  .trans-status-pill.ok { background: var(--ok); border-color: var(--ok); color: #04221d; }
  .trans-preview-item { border-left-color: var(--accent); }

  .add-tag-btn { background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.42); color: var(--accent-text); }
  .add-tag-btn:hover { background: rgba(var(--accent-rgb),.16); border-color: var(--accent); color: #fff; }

  /* ── Modales ── */
  .engine-modal, .app-dialog, .kbd-modal, .merge-tracks-dialog, .marker-modal-inner {
    background: var(--panel-head); border-color: var(--border);
  }
  .context-menu { background: var(--panel-2); border-color: var(--border); }
  .context-menu button:hover:not(:disabled) { background: rgba(var(--accent-rgb),.16); }
  .toast { background: var(--panel-head); border-color: var(--border); border-left-color: var(--accent); }
  /* El toast por defecto (ok/info) sigue el acento; warn y danger se mantienen semánticos */
  .toast.ok { border-left-color: var(--accent); }
  kbd, .help-popover, .kbd-row em { }
  .kbd-remap-key.listening { background: var(--accent); color: #fff; border-color: var(--accent); }
  .engine-badge { color: var(--accent-text); border-color: rgba(var(--accent-rgb),.3); }
  .seg-btn.active, .model-btn { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
  .model-btn:hover { background: var(--accent-bright); }
  .lib-chip.ok { color: var(--ok); border-color: rgba(0,184,163,.5); background: rgba(0,184,163,.08); }
  .lib-row.ok .lib-row-ic { background: rgba(0,184,163,.16); color: var(--ok); }
  .model-bar span, .trans-progress-bar span, .lib-progress .trans-progress-bar span { background: var(--accent); }

  /* ===== Inicio Cadencia: hero ===== */
  .cad-hero { border-radius: 16px !important; background: linear-gradient(180deg, var(--surface-input), var(--panel-head)) !important; border-color: var(--border) !important; padding: 20px 26px !important; }
  .cad-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 5px; }
  .home-title#homeGreeting { font-size: 25px; font-weight: 700; }
  .cad-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .cad-icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-input); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
  .cad-icon-btn:hover { color: #fff; border-color: var(--border-strong); background: var(--panel-3); }

  /* ===== Acción principal ===== */
  .cad-actions { grid-template-columns: 1fr; }
  .cad-action-big { padding: 18px 20px !important; }
  .cad-action-big .home-action-tx b { font-size: 15px; }
  .cad-action-arrow { margin-left: auto; color: var(--accent-bright); display: flex; align-items: center; }
  .cad-action-resume { max-width: 360px; }

  /* ===== Modales Cadencia ===== */
  .cad-modal-overlay { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; background: rgba(6,7,10,.66); backdrop-filter: blur(3px); }
  .cad-modal { width: min(620px, 94vw); background: var(--panel-head); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: hidden; }
  .cad-modal-head { display: flex; align-items: flex-start; gap: 15px; padding: 26px 26px 18px; }
  .cad-modal-head-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(140deg, var(--accent), var(--accent-bright)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(var(--accent-rgb),.4); }
  .cad-modal-head-tx { flex: 1; }
  .cad-modal-head-tx h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 20px; }
  .cad-modal-head-tx p { margin: 4px 0 0; font-size: 13px; color: var(--text-dim); }
  .cad-modal-close { width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 9px; background: rgba(var(--line-rgb),.05); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .cad-modal-close:hover { background: rgba(var(--line-rgb),.1); color: #fff; }
  .cad-options { padding: 0 22px; display: flex; flex-direction: column; gap: 10px; }
  .cad-option { display: flex; align-items: center; gap: 15px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-input); cursor: pointer; text-align: left; transition: transform .14s, border-color .14s, background .14s; }
  .cad-option:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface-input); }
  .cad-option-primary { border-color: rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.08); }
  .cad-option-primary:hover { border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.14); }
  .cad-option-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
  .cad-option-tx { flex: 1; min-width: 0; }
  .cad-option-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--text); }
  .cad-option-desc { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
  .cad-option-arrow { flex-shrink: 0; display: flex; align-items: center; }
  .cad-ia-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-bright)); padding: 2px 7px; border-radius: 5px; }
  .cad-mono { font-family: var(--mono); font-size: 12px; color: var(--text-soft); }
  .cad-dropzone { margin: 18px 22px 24px; padding: 16px; border: 1.5px dashed var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 13px; }

  /* ===== Ajustes ===== */
  .cad-settings { width: min(1500px, 94vw); height: 88vh; background: var(--panel-head); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: hidden; display: flex; flex-direction: column; }
  .cad-settings-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--panel); }
  .cad-settings-body { flex: 1; display: flex; min-height: 0; }
  .cad-settings-nav { width: 288px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; }
  .cad-snav { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: none; border-radius: 9px; background: transparent; color: var(--text-dim); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; }
  .cad-snav svg { flex-shrink: 0; }
  .cad-snav:hover { background: rgba(var(--line-rgb),.04); color: var(--text); }
  .cad-snav.active { background: rgba(var(--accent-rgb),.13); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.22); }
  .cad-snav.active svg { stroke: var(--accent-bright); }
  .cad-settings-content { flex: 1; padding: 30px clamp(28px, 5%, 72px); overflow-y: auto; }
  .cad-settings-content > .cad-pane { max-width: 900px; }
  .cad-pane { display: none; }
  .cad-pane.active { display: block; }
  .cad-pane h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 18px; }
  .cad-pane-sub { margin: 0 0 22px; font-size: 13px; color: var(--text-dim); }
  .cad-field-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 11px; }
  .cad-theme-row { display: flex; gap: 10px; margin-bottom: 24px; }
  .cad-theme-opt { flex: 1; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
  .cad-theme-opt.active { border-color: var(--accent); background: rgba(var(--accent-rgb),.1); color: var(--text); }
  .cad-theme-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--line-rgb),.06); display: flex; align-items: center; justify-content: center; }
  .cad-theme-opt.active .cad-theme-ic { background: rgba(var(--accent-rgb),.2); }
  .cad-theme-check { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
  .cad-accent-row { display: flex; gap: 13px; margin-bottom: 4px; }
  .cad-accent { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
  .cad-accent.active { box-shadow: 0 0 0 2px var(--panel-head), 0 0 0 4px var(--accent); }
  .cad-divider { height: 1px; background: var(--border); margin: 22px 0 20px; }
  .cad-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .cad-toggle-title { font-size: 14px; font-weight: 600; }
  .cad-toggle-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
  .cad-switch { width: 46px; height: 26px; border-radius: 14px; background: rgba(var(--line-rgb),.12); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
  .cad-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-soft); transition: transform .15s, background .15s; }
  .cad-switch.on { background: var(--accent); }
  .cad-switch.on span { transform: translateX(20px); background: #fff; }
  .cad-kbd-preview { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
  .cad-kbd-prev-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
  .cad-store-note { margin-top: 16px; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; padding: 13px 14px; border-radius: 11px; background: rgba(var(--accent-rgb),.06); border: 1px solid rgba(var(--accent-rgb),.14); }
  .cad-store-note b { color: var(--text); }

  /* ===== Tarjetas de proyecto tipo mosaico ===== */
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; gap: 20px !important; }
  .project-card { aspect-ratio: auto !important; padding: 0 !important; overflow: visible; gap: 0 !important; }
  .cad-card-thumb { position: relative; height: 158px; border-radius: 14px 14px 0 0; background: var(--cad-thumb, linear-gradient(135deg,#1f3a4d,#c2632f)); background-size: cover; background-position: center; }
  .cad-card-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.42)); }
  .cad-card-lang { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; gap: 5px; background: rgba(8,8,12,.55); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: #fff; font-family: var(--mono); }
  .cad-card-dur { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(8,8,12,.6); padding: 2px 7px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; color: #fff; }
  .cad-card-sub { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 2; max-width: 86%; text-align: center; background: rgba(8,8,11,.62); padding: 4px 10px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cad-card-prog { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; height: 4px; background: rgba(var(--line-rgb),.14); }
  .cad-card-prog span { display: block; height: 100%; background: var(--accent); }
  .cad-card-play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; background: rgba(10,8,18,.28); }
  .project-card:hover .cad-card-play { opacity: 1; }
  .cad-card-play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(var(--accent-rgb),.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(var(--accent-rgb),.5); }
  .cad-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 0; }
  .project-card .project-title { padding-right: 0 !important; }
  .project-card .project-meta { margin-top: 9px; }
  .project-card .project-open { display: none; }
  .project-card .project-delete-icon { z-index: 5; background: rgba(8,8,12,.62); backdrop-filter: blur(4px); border-color: rgba(var(--line-rgb),.12); }
  .project-empty { background: rgba(var(--line-rgb),.015); border-color: var(--border); }

  /* ══ Modo LISTA para Recientes (filas con miniatura + detalles) ══ */
  .projects-grid.list-view { grid-template-columns: 1fr !important; gap: 8px !important; }
  .projects-grid.list-view .project-card { display: flex !important; flex-direction: row !important; align-items: stretch; overflow: hidden; }
  .projects-grid.list-view .cad-card-thumb { width: 168px !important; height: 94px !important; flex-shrink: 0; border-radius: 12px 0 0 12px !important; }
  .projects-grid.list-view .cad-card-sub, .projects-grid.list-view .cad-card-play { display: none !important; }
  .projects-grid.list-view .cad-card-body { flex: 1; min-width: 0; padding: 12px 18px !important; display: flex; flex-direction: column; justify-content: center; }
  .projects-grid.list-view .project-meta { margin-top: 6px; }

  /* ===== Inicio Cadencia: layout full-bleed ===== */
  body.cad-home > header { display: none !important; }
  body.cad-home > main { padding: 0 !important; height: 100vh !important; overflow: hidden !important; }
  body.cad-home #importScreen { max-width: none !important; margin: 0 !important; height: 100vh; display: flex !important; flex-direction: column; min-height: 0; }
  .cad-home-body { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 40px; }

  .cad-topnav { display: flex; align-items: center; gap: 26px; padding: 0 32px; height: 64px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--panel-head); }
  .cad-brand { display: flex; align-items: center; gap: 11px; }
  .cad-brand-logo { width: 33px; height: 33px; border-radius: 8px; background: linear-gradient(140deg,var(--accent),var(--accent-bright)); display: flex; flex-direction: column; justify-content: center; gap: 2.5px; padding: 0 7px; box-shadow: 0 6px 16px rgba(var(--accent-rgb),.35); }
  .cad-brand-logo span { height: 3px; border-radius: 2px; background: rgba(255,255,255,.95); }
  .cad-brand-logo span:last-child { width: 60%; background: rgba(255,255,255,.7); }
  .cad-brand-name { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
  .cad-nav { display: flex; align-items: center; gap: 4px; height: 100%; }
  .cad-nav-item { display: flex; align-items: center; padding: 0 14px; height: 100%; font-size: 14px; font-weight: 500; color: var(--text-dim); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; }
  .cad-nav-item:hover { color: var(--text); }
  .cad-nav-item.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
  .cad-topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .cad-search { display: flex; align-items: center; gap: 10px; width: 260px; padding: 9px 14px; background: var(--surface-input); border: 1px solid var(--border); border-radius: 10px; }
  .cad-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 13.5px; }
  .cad-search input::placeholder { color: var(--text-faint); }
  .cad-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .cad-kbd { font-family: var(--mono); font-size: 11px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
  .cad-new-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 10px; background: linear-gradient(140deg,var(--accent),var(--accent-2)); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--accent-rgb),.32); }
  .cad-new-btn:hover { background: linear-gradient(140deg,var(--accent-2),var(--accent-bright)); box-shadow: 0 9px 24px rgba(var(--accent-rgb),.5); }
  .cad-topnav .cad-icon-btn { position: relative; width: 40px; height: 40px; }
  .cad-bell-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-input); }
  .cad-bell-dot.bad { background: #f6bd60; }
  .cad-bell-dot.ok { background: #00b8a3; }
  #homeEnvDot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-input); box-shadow: none; }
  #homeEnvDot.ok { background: #00b8a3; }
  #homeEnvDot.bad { background: #f6bd60; }
  .cad-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg,var(--accent),var(--accent-bright)); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: #fff; flex-shrink: 0; }

  .cad-greeting-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
  .cad-greet-title { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin: 0; }
  .cad-greet-sub { margin: 7px 0 0; font-size: 14px; color: var(--text-dim); }
  .cad-greet-sub b, .cad-greet-sub span { color: var(--text); font-weight: 600; }
  .cad-greet-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .cad-greet-actions .cad-action-resume { max-width: 280px; padding: 9px 13px !important; }
  .cad-view-toggle { display: flex; background: var(--surface-input); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
  .cad-view-toggle button { width: 32px; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .cad-view-toggle button.active { background: rgba(var(--accent-rgb),.18); color: var(--accent-bright); }
  .cad-home-body .projects-footer { margin-top: 22px; opacity: .8; }
  #btnResumeLast { display: none !important; }

  /* Respaldos dentro de Ajustes › Almacenamiento */
  .cad-store-actions { display: flex; gap: 10px; margin-top: 12px; }
  .cad-store-actions .ghost { flex: 1; padding: 11px; border-radius: 10px; font-size: 13px; }

  /* ===== Menú de 3 puntos en tarjetas ===== */
  .cad-card-menu-btn { width: 26px; height: 26px; flex-shrink: 0; border: none; border-radius: 7px; background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .cad-card-menu-btn:hover { background: rgba(var(--line-rgb),.06); color: #fff; }
  .cad-card-menu { position: absolute; right: 12px; bottom: 12px; z-index: 20; display: none; min-width: 150px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
  .cad-card-menu.open { display: block; }
  .cad-card-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; border-radius: 7px; color: var(--text); font-family: var(--sans); font-size: 13px; cursor: pointer; }
  .cad-card-menu button:hover { background: rgba(var(--accent-rgb),.16); }
  .cad-card-menu button.danger { color: #ff9ba0; }
  .cad-card-menu button.danger:hover { background: rgba(255,107,115,.16); }

  /* ===== Login (panel dividido) ===== */
  #cadLogin { position: fixed; inset: 0; z-index: 4000; display: flex; background: var(--bg); font-family: var(--sans); color: var(--text); }
  body.cad-authed #cadLogin { display: none; }
  .cad-login-brand { width: 46%; max-width: 640px; flex-shrink: 0; position: relative; overflow: hidden; background: linear-gradient(155deg,#1a1430,#2a1d4d 55%,#3a2660); display: flex; flex-direction: column; justify-content: center; gap: 42px; padding: 56px; color: #ece9ff; }
  /* El panel de marca siempre es oscuro (branding): su texto se mantiene claro
     en cualquier tema para no perderse contra el fondo. */
  .cad-login-brand .cad-login-logo span,
  .cad-login-pitch h2 { color: #f5f2ff; }
  .cad-login-pitch p { color: #c8c2e6 !important; }
  .cad-login-cap { color: rgba(236,233,255,.84) !important; }
  .cad-login-glow1 { position: absolute; top: -120px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.5), transparent 70%); filter: blur(20px); }
  .cad-login-glow2 { position: absolute; bottom: -100px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,184,163,.25), transparent 70%); filter: blur(20px); }
  .cad-login-logo { position: relative; display: flex; align-items: center; gap: 12px; }
  .cad-login-logo .cad-brand-logo { box-shadow: 0 8px 22px rgba(var(--accent-rgb),.5); }
  .cad-login-pitch { position: relative; }
  .cad-login-pitch h2 { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 16px; max-width: 420px; }
  .cad-login-pitch p { font-size: 15px; line-height: 1.6; color: #c4bfe0; margin: 0 0 30px; max-width: 380px; }
  .cad-login-ticker { display: flex; flex-direction: column; max-width: 430px; height: 132px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); }
  .cad-login-cap { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13.5px; color: var(--text-soft); flex-shrink: 0; }
  .cad-login-cap .lang { font-family: var(--mono); font-size: 10px; font-weight: 600; color: #fff; background: rgba(var(--accent-rgb),.5); padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
  .cad-login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; }
  .cad-login-card { width: 380px; }
  .cad-login-card h1 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; margin: 0 0 8px; }
  .cad-login-sub { font-size: 14px; color: var(--text-dim); margin: 0 0 30px; }
  .cad-login-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }
  .cad-login-field { display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: var(--surface-input); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 18px; transition: border-color .14s; }
  .cad-login-field:focus-within { border-color: rgba(var(--accent-rgb),.6); }
  .cad-login-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 14px; }
  .cad-login-field input::placeholder { color: var(--text-faint); }
  .cad-login-pwrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .cad-login-link { font-size: 12.5px; color: var(--accent-bright); text-decoration: none; cursor: pointer; }
  .cad-login-link:hover { color: var(--accent-text); }
  .cad-login-submit { width: 100%; padding: 14px; border: none; border-radius: 11px; background: linear-gradient(140deg,var(--accent),var(--accent-2)); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 10px 26px rgba(var(--accent-rgb),.4); margin: 6px 0 22px; }
  .cad-login-submit:hover { background: linear-gradient(140deg,var(--accent-2),var(--accent-bright)); box-shadow: 0 14px 32px rgba(var(--accent-rgb),.55); }
  .cad-login-or { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 12px; color: var(--text-faint); }
  .cad-login-or span { flex: 1; height: 1px; background: var(--border); }
  .cad-login-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; background: var(--surface-input); border: 1px solid var(--border); border-radius: 11px; color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; margin-bottom: 30px; }
  .cad-login-google:hover { border-color: var(--border-strong); }
  .cad-login-foot { text-align: center; font-size: 13.5px; color: var(--text-dim); margin: 0; }
  .cad-login-foot .cad-login-link { font-weight: 600; }

  /* ===== Pane head con acciones (atajos) ===== */
  .cad-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .cad-pane-head .cad-pane-sub { margin: 0; max-width: 440px; }
  .cad-pane-head h4 { margin: 0 0 4px; }
  .cad-pane-head-actions { display: flex; gap: 7px; flex-shrink: 0; }
  .cad-pane-head-actions .small { padding: 7px 12px; border-radius: 8px; font-size: 12.5px; }

  /* ===== Atajos: 2 columnas, primario + secundario ===== */
  .cad-kbd-list { column-count: 2; column-gap: 34px; }
  .cad-kbd-group { break-inside: avoid; margin-bottom: 18px; }
  .cad-kbd-group-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 6px; }
  .cad-kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(var(--line-rgb),.05); }
  .cad-kbd-row .lbl { font-size: 13px; color: var(--text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cad-kbd-slots { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
  .cad-key { font-family: var(--mono); font-size: 11px; color: var(--text-soft); background: var(--panel-3); border: 1px solid rgba(var(--line-rgb),.1); border-bottom-color: rgba(0,0,0,.4); border-radius: 6px; padding: 3px 8px; min-width: 13px; text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,.35); cursor: pointer; }
  .cad-key:hover { border-color: rgba(var(--accent-rgb),.6); color: #fff; }
  .cad-key.secondary { color: var(--text-dim); background: var(--panel-2); border-style: dashed; }
  .cad-key.secondary.empty { color: var(--text-faint); }
  .cad-key.listening { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }
  .cad-key.dup { border-color: #f6bd60; color: #f6bd60; }
  .cad-kbd-plus { color: var(--border-strong); font-size: 11px; }
  .cad-key-clear { width: 18px; height: 18px; border: none; border-radius: 5px; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
  .cad-key-clear:hover { background: rgba(255,107,115,.16); color: #ff9ba0; }
  .cad-kbd-foot { margin-top: 16px; font-size: 12px; color: var(--text-dim); padding: 11px 13px; border-radius: 10px; background: rgba(var(--line-rgb),.03); border: 1px solid var(--border); }
  .cad-kbd-foot b { color: var(--text-soft); }

  /* ===== Almacenamiento: medidor + tarjetas de modelo ===== */
  .cad-store-meter { background: linear-gradient(180deg,var(--surface-input),var(--panel-head)); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
  .cad-store-meter-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
  .cad-store-headline { display: flex; align-items: baseline; gap: 8px; }
  .cad-store-used { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
  .cad-store-total { font-size: 14px; color: var(--text-faint); }
  .cad-store-used-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .cad-store-free { font-size: 12.5px; color: var(--text-faint); }
  .cad-store-loc { font-size: 11px; color: var(--text-faint); text-align: right; padding-top: 4px; }
  .cad-store-bar { height: 13px; border-radius: 7px; background: rgba(var(--line-rgb),.07); overflow: hidden; display: flex; gap: 2px; }
  .cad-store-bar i { height: 100%; display: block; transition: width .35s ease; }
  .cad-store-bar .empty-fill { flex: 1; }
  .cad-store-legend { display: flex; flex-direction: column; margin-top: 14px; }
  .cad-store-legend .row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(var(--line-rgb),.06); }
  .cad-store-legend .row:last-child { border-bottom: none; }
  .cad-store-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
  .cad-store-legend .name { font-size: 13.5px; color: var(--text-soft); flex: 1; }
  .cad-store-legend .val { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
  .cad-store-legend .empty { font-size: 12px; color: var(--text-faint); padding: 6px 0; }
  .cad-store-actions { display: flex; gap: 10px; margin-top: 16px; }
  .cad-store-actions button { flex: 1; }
  .cad-store-legend i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .cad-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
  .cad-model { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); }
  .cad-model.installed { border-color: rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.06); }
  .cad-model-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: rgba(var(--accent-rgb),.14); display: flex; align-items: center; justify-content: center; color: var(--accent-bright); }
  .cad-model.installed .cad-model-ic { background: rgba(0,184,163,.16); color: #3fd6c2; }
  .cad-model-tx { flex: 1; min-width: 0; }
  .cad-model-name { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
  .cad-model-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #04221d; background: #3fd6c2; padding: 2px 7px; border-radius: 5px; }
  .cad-model-badge.reco { color: #fff; background: linear-gradient(140deg,var(--accent),var(--accent-bright)); }
  .cad-model-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
  .cad-model-act { flex-shrink: 0; }
  .cad-model-btn { padding: 9px 15px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-input); color: var(--text-soft); font-family: var(--sans); font-weight: 600; font-size: 13px; cursor: pointer; }
  .cad-model-btn:hover { border-color: var(--border-strong); background: var(--panel-3); }
  .cad-model-btn.primary { border: none; background: linear-gradient(140deg,var(--accent),var(--accent-2)); color: #fff; box-shadow: 0 6px 16px rgba(var(--accent-rgb),.3); }
  .cad-model-btn.danger:hover { border-color: rgba(255,107,115,.5); color: #ff9ba0; }
  .cad-model-prog { width: 120px; height: 6px; border-radius: 6px; background: rgba(var(--line-rgb),.1); overflow: hidden; }
  .cad-model-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--accent),var(--accent-bright)); transition: width .2s; }
  .cad-store-engines { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; margin-bottom: 10px; }
  .cad-store-engines svg { margin-left: 2px; }
  .cad-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; align-items: start; }
  .cad-engines .engine-card { background: var(--panel); border-color: var(--border); border-radius: 13px; }
  .cad-engines .engine-card-desc { font-size: 11px; line-height: 1.45; margin-bottom: 10px; }
  @media (max-width: 900px) { .cad-engines { grid-template-columns: 1fr; } }
  .cad-engines .engine-badge { color: var(--accent-text); border-color: rgba(var(--accent-rgb),.3); }
  .cad-engines .engine-card-desc b { color: var(--accent-text); }

  /* ===== Ticker de subtítulos del login (línea de tiempo, cae hacia abajo) ===== */
  .cad-login-ticker {
    display: block; position: relative; height: 159px; max-width: 430px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  }
  /* Cada fila es una caja absoluta posicionada por su "slot" en el timeline. */
  .cad-login-row {
    position: absolute; left: 0; right: 0; height: 44px; box-sizing: border-box;
    display: flex; align-items: center; gap: 11px; padding: 0 14px;
    border-radius: 10px; backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--line-rgb),.10); background: rgba(var(--line-rgb),.05);
    opacity: 0; transform: scale(.95); will-change: top, opacity, transform;
    transition: top .72s cubic-bezier(.34,1.45,.5,1),
                opacity .55s ease,
                transform .6s cubic-bezier(.34,1.45,.5,1);
  }
  .cad-login-row.visible { opacity: 1; transform: scale(1); }
  /* La fila del centro queda "activa": recuadro y resaltado con el acento. */
  .cad-login-row.active {
    border-color: rgba(var(--accent-rgb),.45);
    background: rgba(var(--accent-rgb),.18);
    box-shadow: 0 8px 22px rgba(var(--accent-rgb),.25);
  }
  .cad-login-row .tc {
    font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0;
    transition: color .4s ease;
  }
  .cad-login-row.active .tc { color: #c4b5ff; }
  .cad-login-row .tx {
    font-size: 13.5px; color: var(--text-dim); flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .4s ease;
  }
  .cad-login-row.active .tx { color: #ffffff; }
  .cad-login-row .lang {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
    color: #fff; padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
  }

  /* ============================================================
     MODO CLARO — correcciones del editor
     Sobrescribe los literales oscuros del editor (bloques antiguos)
     que no pasan por variables. Solo afecta a [data-theme="light"];
     el modo oscuro queda intacto.
     ============================================================ */
  /* Previsualizador: gris claro en lugar de negro (las barras de letterbox
     del video quedan suaves; menos cansado que blanco puro). */
  :root[data-theme="light"] .player-wrap,
  :root[data-theme="light"] #videoPlayer { background: #e6e9f0; }
  :root[data-theme="light"] .player-placeholder {
    background: rgba(255,255,255,.92);
    border-color: var(--border);
    color: var(--text-dim);
  }
  /* Regla de tiempo (ruler) y pastilla de timecode */
  :root[data-theme="light"] .tl-ruler {
    border-bottom-color: var(--border);
    background:
      linear-gradient(90deg, rgba(var(--line-rgb),.12) 0 1px, transparent 1px 10px),
      linear-gradient(180deg, rgba(var(--line-rgb),.04), rgba(var(--line-rgb),0) 62%),
      var(--panel-2);
  }
  :root[data-theme="light"] .tl-timecode {
    background: var(--panel-3);
    border-color: var(--border);
    color: var(--accent-text);
  }
  /* Tarjetas de marcadores y panel de transcripción */
  :root[data-theme="light"] .marker-card {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border-color: var(--border);
  }
  /* Sombras de modales más suaves en claro */
  :root[data-theme="light"] .cad-modal,
  :root[data-theme="light"] .cad-settings,
  :root[data-theme="light"] .engine-modal,
  :root[data-theme="light"] .app-dialog,
  :root[data-theme="light"] .kbd-modal,
  :root[data-theme="light"] .marker-modal-inner,
  :root[data-theme="light"] .merge-tracks-dialog {
    box-shadow: var(--shadow);
  }
  /* Scrim de modales un poco más claro en tema claro */
  :root[data-theme="light"] .cad-modal-overlay,
  :root[data-theme="light"] .marker-modal { background: rgba(20,22,40,.34); }
  /* Pastillas pequeñas que quedaban oscuras */
  :root[data-theme="light"] .tick-label {
    background: rgba(var(--line-rgb),.08);
    color: var(--text-dim);
  }
  :root[data-theme="light"] .trans-status-pill {
    background: var(--panel-3);
    border-color: var(--border);
    color: var(--text-soft);
  }
  :root[data-theme="light"] .mht-key {
    background: var(--panel-3);
    border-color: var(--border);
    color: var(--text-soft);
  }

  /* ── Ventana de marcadores (anotación de frames) ── */
  /* La herramienta activa sigue el acento dinámico (antes era azul fijo) */
  .marker-tool-btn.active { background: var(--accent); border-color: var(--accent); }
  #markerCommentInput:focus {
    outline-color: rgba(var(--accent-rgb),.55) !important;
    border-color: rgba(var(--accent-rgb),.55) !important;
  }
  :root[data-theme="light"] .marker-modal-header { border-bottom-color: var(--border); }
  :root[data-theme="light"] .marker-canvas-area { background: #c7cbd6; }
  :root[data-theme="light"] .marker-tools-bar { background: var(--panel-head); border-left-color: var(--border); }
  :root[data-theme="light"] .marker-tools-sep { background: var(--border); }
  :root[data-theme="light"] .marker-tool-btn { background: var(--surface-input); border-color: var(--border); }
  :root[data-theme="light"] .marker-tool-btn:hover { background: var(--panel-3); border-color: var(--border-strong); color: var(--text); }
  :root[data-theme="light"] #markerCommentInput { background: var(--panel-2); border-color: var(--border); }
  :root[data-theme="light"] #markerCommentInput::placeholder { color: var(--text-faint); }
  :root[data-theme="light"] .marker-modal-footer { background: var(--panel-head); border-top-color: var(--border); }
  :root[data-theme="light"] .marker-stroke-btn { background: var(--surface-input); border-color: var(--border); }
  :root[data-theme="light"] .marker-stroke-btn:hover { background: var(--panel-3); border-color: var(--border-strong); }

/* ── Utilidades y variantes estáticas del documento ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.cad-login-brand-mark { width: 40px; height: 40px; border-radius: 10px; padding: 0 9px; gap: 3px; }
.cad-login-brand-name { font-family: var(--display); font-weight: 700; font-size: 21px; }
.cad-login-password-label { margin: 0; }
.cad-login-eye { cursor: pointer; }
.cad-option-video { background: rgba(var(--accent-rgb),.18); }
.cad-option-project { background: rgba(0,184,163,.14); }
.cad-option-subtitles { background: rgba(255,255,255,.06); }
.settings-brand-logo { width: 42px; height: 42px; border-radius: 11px; }
.settings-heading-copy { flex: 1; min-width: 0; }
.settings-heading-title { font-family: var(--display); font-weight: 700; font-size: 17px; }
.settings-heading-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cad-accent[data-accent="violet"] { background: #7c5cff; }
.cad-accent[data-accent="teal"] { background: #00b8a3; }
.cad-accent[data-accent="orange"] { background: #ff6a3d; }
.cad-accent[data-accent="blue"] { background: #3d8bff; }
.cad-accent[data-accent="gold"] { background: #d4af37; }
.settings-section-title { margin: 0 0 4px; }
.engine-action-grid { display: grid; gap: 8px; }
#engineGpuBox { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.engine-gpu-state { margin: 0 0 6px; }
.engine-gpu-toggle { display: flex; align-items: center; gap: 8px; }
.engine-gpu-description { margin: 8px 0 4px; }
.engine-full-button { width: 100%; }
#btnInstallGpuLibs { margin-top: 4px; }
.engine-diar-state { margin: 0 0 8px; }
.engine-token-field { margin-top: 10px; }
.engine-token-help, .trans-diar-hint { margin: 8px 0 0; }
.assign-actions { margin-top: 14px; display: flex; gap: 8px; }
.tl-scroll-area { position: relative; }
.marker-censor-button { margin-left: auto; margin-right: 8px; }
.marker-key { background: #2a2b36; border: 1px solid #3a3b44; border-radius: 4px; padding: 1px 5px; font-size: 10.5px; }
.marker-color-swatch[data-color="#ffeb3b"] { background: #ffeb3b; }
.marker-color-swatch[data-color="#ff5252"] { background: #ff5252; }
.marker-color-swatch[data-color="#69f0ae"] { background: #69f0ae; }
.marker-color-swatch[data-color="#40c4ff"] { background: #40c4ff; }
.marker-color-swatch[data-color="#ffffff"] { background: #ffffff; }
.marker-footer-colors { display: flex; align-items: center; gap: 8px; }
.marker-footer-colors .marker-color-label { flex-shrink: 0; }
.marker-color-foot[data-color="#e8b400"] { background: #e8b400; }
.marker-color-foot[data-color="#ff6b73"] { background: #ff6b73; }
.marker-color-foot[data-color="#43d39e"] { background: #43d39e; }
.marker-color-foot[data-color="#2680eb"] { background: #2680eb; }
.marker-color-foot[data-color="#c77dff"] { background: #c77dff; }

/* ===== 10-drive.css ===== */
/* ═══════════════════════════════════════════════════════════
   Drive / Equipo — Estilos para el explorador de Drive,
   bandeja de descargas y modal "Crear desde Drive".
   ═══════════════════════════════════════════════════════════ */

/* ── FIX: botón de 3 puntos de las tarjetas de proyecto (Recientes) ──
   Se veía "vacío"; lo forzamos visible, a la derecha, con puntos claros. */
/* El input de renombrar solo debe verse al renombrar (ocupaba el sitio del botón). */
.project-card:not(.renaming) .project-name-edit { display: none !important; }
.project-card .project-title { position: relative; }
.project-card .cad-card-menu-btn {
  margin-left: auto !important;
  margin-right: -5px !important;             /* pegado un poco más a la derecha */
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #868b97 !important;                 /* más tenue, pero presente */
  cursor: pointer !important;
  transform: translateY(2px) !important;     /* un poco más abajo, a la altura del título */
  transition: background .14s ease, color .14s ease !important;
}
.project-card .cad-card-menu-btn svg { width: 20px !important; height: 20px !important; display: block !important; margin: 0 auto !important; }
.project-card .cad-card-menu-btn circle { fill: currentColor !important; }
.project-card .cad-card-menu-btn:hover {
  background: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;                  /* blanco al pasar el mouse */
}

/* Puente de variables: este archivo usaba nombres que no existen en el tema
   (--text-primary, --bg-card, etc.) y por eso siempre caía en colores oscuros
   fijos → texto blanco ilegible en modo claro. Los mapeamos a las variables
   reales del tema, que sí cambian entre modo oscuro y claro. */
:root {
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --bg-card: var(--surface-input);
  --bg-input: var(--surface-input);
  --bg-hover: var(--panel-3);
}

/* ── Shared input style ── */
.cad-drive-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2e3142);
  background: var(--bg-input, #181c2a);
  color: var(--text-primary, #e2e4ef);
  font-size: .875rem;
  outline: none;
  transition: border-color .15s;
}
.cad-drive-input:focus {
  border-color: var(--accent-bright, #6c63ff);
}

/* ── Drive section (Proyectos tab) ── */
#driveSection {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .25rem 0;
  min-height: 200px;
  position: relative;
}

/* ── Tag BETA y disclaimer de conexión de Google ── */
.cad-beta-tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  vertical-align: middle;
  color: #fff;
  background: linear-gradient(140deg, var(--accent, #7c5cff), var(--accent-bright, #9b7bff));
}
.drive-beta-note {
  margin-top: .7rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb, 124,92,255), .35);
  background: rgba(var(--accent-rgb, 124,92,255), .08);
  color: var(--text-secondary, #9b9ea9);
  font-size: .82rem;
  line-height: 1.5;
}
.drive-beta-note strong { color: var(--text-primary, #e2e4ef); font-weight: 600; }
.drive-beta-note em { color: var(--text-primary, #e2e4ef); font-style: normal; opacity: .9; }

/* ── Aviso de "necesitas conectar Google para escribir" ── */
.drive-write-notice {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border, #2e3142);
  background: rgba(var(--accent-rgb, 124,92,255), .08);
  color: var(--text-secondary, #9b9ea9);
  font-size: .82rem;
  line-height: 1.4;
}
.drive-write-notice strong { color: var(--text-primary, #e2e4ef); font-weight: 600; }

/* ── Body area: items grid + preview panel ── */
.drive-body-area {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex: 1;
}

/* ── Barra lateral de carpetas del equipo (navegación) ── */
.drive-sidebar {
  width: 250px;
  flex-shrink: 0;
  align-self: flex-start;
  /* Es una tarjeta de navegación, no una columna que se pierde hasta el
     borde inferior de la ventana. Conserva espacio de respiración abajo. */
  min-height: 280px;
  height: min(72vh, 740px);
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border, #2e3142);
  border-radius: 12px;
  background: var(--surface-input, #181922);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drive-sidebar:empty { display: none; }
.drive-sidebar-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 11px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-dim, #9b9ea9);
  font-family: var(--sans); font-size: 13px; text-align: left; cursor: pointer;
}
.drive-sidebar-item .drive-sidebar-ic { color: var(--text-faint, #6b6e7a); flex-shrink: 0; display: flex; }
.drive-sidebar-item .drive-sidebar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive-sidebar-item:hover { background: var(--panel-3, #20222b); color: var(--text, #eceef2); }
.drive-sidebar-item.active { background: rgba(var(--accent-rgb, 124,92,255), .16); color: var(--text, #eceef2); font-weight: 600; }
.drive-sidebar-item.active .drive-sidebar-ic { color: var(--accent-bright, #9b7bff); }
.drive-sidebar-item.root { font-weight: 600; color: var(--text, #eceef2); }
.drive-sidebar-sep { height: 1px; background: var(--border, #2e3142); margin: 5px 6px; }

/* Área principal ocupa el resto */
.drive-body-area > .drive-items { flex: 1; min-width: 0; }

.drive-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .1rem 0;
}

.drive-breadcrumb {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary, #e2e4ef);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-back-btn,
.drive-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 7px;
  border: 1px solid var(--border, #2e3142);
  background: transparent;
  color: var(--text-secondary, #9b9ea9);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.drive-back-btn:hover,
.drive-refresh-btn:hover {
  background: var(--bg-hover, #1f2338);
  color: var(--text-primary, #e2e4ef);
}

/* ── Items grid ── */
.drive-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: min-content;
  gap: 1.25rem;
  /* Llena toda la altura visible para que el clic derecho (Nueva carpeta / Pegar /
     Actualizar) y la selección por arrastre funcionen en TODO el espacio, no solo
     cerca de las tarjetas. */
  min-height: calc(100vh - 230px);
  align-content: start;
}
/* En pantallas grandes (4K), tarjetas más grandes */
@media (min-width: 2000px) {
  .drive-items { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.5rem; }
}

/* State messages */
.drive-configure,
.drive-empty,
.drive-error,
.drive-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2.5rem 1rem;
  color: var(--text-secondary, #9b9ea9);
  font-size: .875rem;
  text-align: center;
}
.drive-configure strong,
.drive-empty strong {
  color: var(--text-primary, #e2e4ef);
}
.drive-error {
  color: #f76fa4;
}

/* ── Tarjetas de carpeta y video: miniatura full-bleed, zoom suave, texto abajo ── */
.drive-folder-card,
.drive-video-card {
  position: relative;
  display: block;
  padding: 0;
  min-height: 300px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--border, #2e3142);
  background: #12141c;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.drive-folder-card:hover,
.drive-video-card:hover {
  border-color: var(--accent-bright, #6c63ff);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.drive-folder-card:active,
.drive-video-card:active { transform: translateY(1px); }

/* Capa de miniatura (imagen del video o degradado de reserva) — zoom suave al hover */
.drive-card-thumb {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  background-image: linear-gradient(150deg, #263049 0%, #3b2b4e 55%, #a94f3c 100%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.drive-folder-card:hover .drive-card-thumb,
.drive-video-card:hover .drive-card-thumb { transform: scale(1.09); }

/* Degradado inferior para legibilidad (se ve bien en claro y oscuro) */
.drive-folder-card::after,
.drive-video-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.86) 100%);
}

/* Ícono/insignia arriba a la izquierda */
.drive-card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.drive-card-badge svg { width: 24px; height: 24px; }

/* Bloque de texto abajo a la izquierda */
.drive-card-info { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; }
.drive-card-info .drive-item-name {
  display: block; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 5px rgba(0,0,0,.8);
}
.drive-card-info .drive-item-size,
.drive-card-info .drive-item-meta {
  display: block; margin-top: 2px; color: rgba(255,255,255,.85); font-size: .8rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Contador central de archivos (carpetas) */
.drive-folder-count {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(6,8,14,.42); backdrop-filter: blur(3px);
  color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.7); pointer-events: none;
}
.drive-folder-count.show { display: flex; }
.drive-folder-count svg { width: 34px; height: 34px; opacity: .95; }
.drive-folder-count-txt { font-size: .9rem; font-weight: 600; }

/* Insignia "descargado" reposicionada para la tarjeta full-bleed */
.drive-video-card .drive-item-dl-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0;
  background: rgba(6,8,14,.6); padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(3px);
}

/* ── Tarjeta de carpeta: forma de CARPETA (pestaña arriba) + collage + pie ── */
.drive-folder-card {
  display: block; padding: 14px 0 0; min-height: 0; position: relative;
  background: none; border: none; overflow: visible; color: var(--text, #eceef2);
  transition: transform .14s ease;
}
.drive-folder-card::after { display: none; }
/* Pestaña de la carpeta (arriba a la DERECHA — flip horizontal) */
.drive-folder-card::before {
  content: ''; position: absolute; top: 0; right: 2px; left: auto;
  width: 46%; max-width: 170px; height: 22px;
  background: var(--surface-input, #181922);
  border: 1px solid var(--border, #2e3142); border-bottom: none;
  border-radius: 16px 10px 0 0; z-index: 0;
}
/* Cuerpo de la carpeta (contiene el collage y el pie) */
.drive-folder-body {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--surface-input, #181922);
  border: 1.5px solid var(--border-strong, #3a3d4d); border-radius: 14px 4px 14px 14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.drive-folder-card:hover { transform: translateY(-3px); }
.drive-folder-card:hover .drive-folder-body {
  border-color: var(--accent-bright, #9b7bff); box-shadow: 0 16px 34px rgba(0,0,0,.42);
}
.drive-folder-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: var(--panel-3, #20222b); overflow: hidden; display: grid; gap: 0;
}
/* Capa de divisores del collage — va ENCIMA de las miniaturas (z alto) y con
   pointer-events:none, así el zoom del hover pasa por debajo y nunca los tapa.
   Trazo grueso (4px) para que las carpetas se vean más definidas. */
.dfp-grid { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.drive-folder-preview.count-2 .dfp-grid {
  background: linear-gradient(var(--surface-input, #181922) 0 0) 50% 0 / 4px 100% no-repeat;
}
.drive-folder-preview.count-3 .dfp-grid {
  background:
    linear-gradient(var(--surface-input, #181922) 0 0) 66.66% 0 / 4px 100% no-repeat,
    linear-gradient(var(--surface-input, #181922) 0 0) 100% 50% / 33.5% 4px no-repeat;
}
.drive-folder-preview .drive-folder-loading,
.drive-folder-preview.empty { display: flex; align-items: center; justify-content: center; }
.drive-folder-preview .dfp-cell {
  background-size: cover; background-position: center; min-width: 0; min-height: 0;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.drive-folder-card:hover .dfp-cell { transform: scale(1.06); }
.drive-folder-preview.count-1 { grid-template-columns: 1fr; }
.drive-folder-preview.count-2 { grid-template-columns: 1fr 1fr; }
.drive-folder-preview.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.drive-folder-preview.count-3 .dfp-cell:nth-child(1) { grid-row: 1 / 3; }
.drive-folder-ic { color: var(--text-faint, #6b6e7a); }
.drive-folder-ic svg { width: 42px; height: 42px; }
.drive-folder-foot { padding: 11px 14px 13px; }
.drive-folder-name {
  font-family: var(--sans); font-weight: 600; font-size: .98rem; color: var(--text, #eceef2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drive-folder-elems { margin-top: 3px; font-size: .8rem; color: var(--text-dim, #9b9ea9); }

/* ── "Carpeta del equipo" / nombre de carpeta más grande ── */
.drive-breadcrumb { font-size: 1.4rem; font-weight: 700; }

/* ══ Modo LISTA para Almacenamiento (Drive) ══ */
.drive-items.list-view { grid-template-columns: 1fr; gap: 8px; }
/* Carpetas en fila: mini-collage a la izquierda + nombre/conteo */
.drive-items.list-view .drive-folder-card { padding: 0; }
.drive-items.list-view .drive-folder-card::before { display: none; }
.drive-items.list-view .drive-folder-card:hover { transform: none; }
.drive-items.list-view .drive-folder-body { display: flex; flex-direction: row; align-items: center; border-radius: 10px; }
.drive-items.list-view .drive-folder-preview {
  width: 116px; height: 66px; aspect-ratio: auto; flex-shrink: 0;
  border-radius: 8px; margin: 8px 0 8px 8px;
}
.drive-items.list-view .drive-folder-card:hover .dfp-cell { transform: none; }
.drive-items.list-view .drive-folder-foot { flex: 1; min-width: 0; padding: 8px 14px; }
/* Videos (full-bleed) en fila */
.drive-items.list-view > .drive-video-card {
  min-height: 0; display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 9px 14px; border-radius: 10px; overflow: hidden;
  background: var(--surface-input, #181922); color: var(--text, #eceef2);
}
.drive-items.list-view .drive-video-card .drive-card-thumb {
  position: static; width: 104px; height: 60px; flex-shrink: 0; border-radius: 8px;
}
.drive-items.list-view .drive-video-card:hover .drive-card-thumb { transform: none; }
.drive-items.list-view .drive-video-card::after { display: none; }
.drive-items.list-view .drive-video-card .drive-card-badge { display: none; }
.drive-items.list-view .drive-video-card .drive-card-info { position: static; flex: 1; min-width: 0; }
.drive-items.list-view .drive-video-card .drive-card-info .drive-item-name { color: var(--text, #eceef2); text-shadow: none; font-size: .96rem; }
.drive-items.list-view .drive-video-card .drive-card-info .drive-item-size,
.drive-items.list-view .drive-video-card .drive-card-info .drive-item-meta { color: var(--text-dim, #9b9ea9); text-shadow: none; font-size: .78rem; }
.drive-items.list-view .drive-video-card .drive-item-dl-badge { position: static; margin-left: 8px; }

/* Loading spinner */
.drive-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border, #2e3142);
  border-top-color: var(--accent-bright, #6c63ff);
  border-radius: 50%;
  animation: drive-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes drive-spin {
  to { transform: rotate(360deg); }
}

/* ── Drive Tray (floating) ── */
.drive-tray {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 10000;
  width: 310px;
  border-radius: 12px;
  border: 1px solid var(--border, #2e3142);
  background: var(--bg-card, #181c2a);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  overflow: hidden;
  font-size: .825rem;
}

.drive-tray-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border, #2e3142);
  color: var(--text-secondary, #9b9ea9);
  font-weight: 600;
  font-size: .8rem;
}
.drive-tray-head span {
  flex: 1;
  color: var(--text-primary, #e2e4ef);
}

.drive-tray-toggle {
  background: none;
  border: none;
  color: var(--text-secondary, #9b9ea9);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .2rem;
  border-radius: 4px;
  transition: color .15s;
}
.drive-tray-toggle:hover { color: var(--text-primary, #e2e4ef); }

.drive-tray-items {
  max-height: 240px;
  overflow-y: auto;
}

.drive-tray-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.drive-tray-item:last-child { border-bottom: none; }

.drive-tray-item-name {
  font-size: .8rem;
  color: var(--text-primary, #e2e4ef);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / 3;
}

.drive-tray-bar {
  grid-column: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #2e3142);
  overflow: hidden;
}
.drive-tray-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent-bright, #6c63ff);
  transition: width .3s ease;
  min-width: 4px;
}

.drive-tray-pct {
  grid-column: 2;
  font-size: .73rem;
  color: var(--text-secondary, #9b9ea9);
  text-align: right;
  white-space: nowrap;
}

.drive-tray-item-status {
  grid-column: 1 / 3;
  font-size: .75rem;
}
.drive-tray-item-status.done { color: #43d39e; }
.drive-tray-item-status.error { color: #f76fa4; }

.drive-tray-dismiss,
.drive-tray-cancel {
  grid-column: 3;
  grid-row: 1 / 3;
  background: none;
  border: none;
  color: var(--text-secondary, #9b9ea9);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .1rem .25rem;
  border-radius: 4px;
  align-self: center;
  transition: color .15s;
}
.drive-tray-dismiss:hover,
.drive-tray-cancel:hover {
  color: var(--text-primary, #e2e4ef);
}

/* Inline tray in settings pane */
.drive-inline-tray {
  margin-top: .5rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2e3142);
  background: var(--bg-input, #181c2a);
  min-height: 48px;
  max-height: 200px;
  overflow-y: auto;
}
.drive-tray-empty {
  padding: 1rem;
  color: var(--text-secondary, #9b9ea9);
  font-size: .82rem;
  text-align: center;
}

/* ── Drive Project Modal ── */
.drive-project-body {
  padding: 1.4rem 1.5rem 1.5rem;
}
.drive-project-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1.4rem;
}

/* ── Tray minimized state ── */
.drive-tray.minimized .drive-tray-items {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   NUEVOS ESTILOS — Selección, Preview, Menú contextual, Upload
   ═══════════════════════════════════════════════════════════ */

/* ── Items: estado seleccionado ── */
.drive-folder-card.selected,
.drive-video-card.selected {
  border-color: var(--accent-bright, #6c63ff);
  background: rgba(108, 99, 255, .13);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, .25);
}

/* ── Items: estado "en portapapeles / cortado" ── */
.drive-folder-card.drive-cut,
.drive-video-card.drive-cut {
  opacity: .45;
}

/* ── Items: ya descargado ── */
.drive-item-dl-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .67rem;
  color: #43d39e;
  font-weight: 600;
  margin-top: .1rem;
}

/* ── Panel de Preview ── */
.drive-preview-panel {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card, #181c2a);
  border: 1px solid var(--border, #2e3142);
  border-radius: 12px;
  padding: 1.25rem 1rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  animation: drive-preview-in .18s ease;
}
@keyframes drive-preview-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.drive-preview-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  color: var(--text-secondary, #9b9ea9);
  cursor: pointer;
  padding: .2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}
.drive-preview-close:hover { color: var(--text-primary, #e2e4ef); }

.drive-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.drive-preview-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary, #e2e4ef);
  word-break: break-word;
  line-height: 1.4;
  text-align: center;
}

.drive-preview-meta {
  font-size: .75rem;
  color: var(--text-secondary, #9b9ea9);
  text-align: center;
  line-height: 1.6;
}

.drive-preview-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .25rem;
}
.drive-preview-actions button {
  width: 100%;
  justify-content: center;
}

/* ── Menú contextual Drive ── */
.drive-ctx {
  position: fixed;
  z-index: 99999;
  min-width: 195px;
  background: var(--bg-card, #1a1e2e);
  border: 1px solid var(--border, #2e3142);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  padding: .3rem 0;
  font-size: .825rem;
  animation: drive-ctx-in .12s ease;
}
@keyframes drive-ctx-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

.drive-ctx-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .9rem;
  background: none;
  border: none;
  color: var(--text-primary, #e2e4ef);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s;
  font-size: .825rem;
}
.drive-ctx-item:hover {
  background: var(--bg-hover, #252942);
}
.drive-ctx-item.drive-ctx-danger {
  color: #f76fa4;
}
.drive-ctx-item:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.drive-ctx-sep {
  height: 1px;
  background: var(--border, #2e3142);
  margin: .3rem 0;
}

/* ── Upload overlay (drag & drop) ── */
.drive-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(108, 99, 255, .12);
  border: 2.5px dashed var(--accent-bright, #6c63ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drive-upload-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--accent-bright, #6c63ff);
  font-size: .95rem;
  font-weight: 600;
}
.drive-upload-overlay-inner p { margin: 0; }

/* ── Upload tray (bandeja de subidas) ── */
.drive-tray-upload {
  background: rgba(108, 99, 255, .08);
}
.drive-tray-upload .drive-tray-bar i {
  background: #43d39e;
}

/* ── Auth status badge ── */
.drive-auth-status {
  font-size: .8rem;
  font-weight: 600;
}
.drive-auth-status.connected { color: #43d39e; }
.drive-auth-status.disconnected { color: var(--text-secondary, #9b9ea9); }
.drive-auth-status.loading { color: var(--text-secondary, #9b9ea9); }

/* ═══════════════════════════════════════════════════════════
   Panel de Notificaciones (campana de la barra superior)
   ═══════════════════════════════════════════════════════════ */
.cad-notif { position: relative; display: inline-flex; }
.cad-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  width: 340px; max-height: 440px; display: flex; flex-direction: column;
  background: var(--panel, #16171f); border: 1px solid var(--border, #2e3142);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden;
}
.cad-notif-panel[hidden] { display: none; }
.cad-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border, #2e3142);
  font-size: .9rem; font-weight: 600; color: var(--text, #eceef2);
}
.cad-notif-clear {
  background: none; border: none; color: var(--text-dim, #9b9ea9);
  font-size: .78rem; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.cad-notif-clear:hover { color: var(--text, #eceef2); background: var(--panel-3, #20222b); }
.cad-notif-list { overflow-y: auto; }
.cad-notif-empty { padding: 2rem 1rem; text-align: center; color: var(--text-dim, #9b9ea9); font-size: .85rem; }
.cad-notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cad-notif-item.unread { background: rgba(var(--accent-rgb, 124,92,255), .07); }
.cad-notif-ic { flex-shrink: 0; margin-top: 1px; color: var(--text-dim, #9b9ea9); display: flex; }
.cad-notif-ic.type-update { color: var(--accent-bright, #9b7bff); }
.cad-notif-ic.type-ok { color: #43d39e; }
.cad-notif-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cad-notif-tx b { font-size: .86rem; font-weight: 600; color: var(--text, #eceef2); }
.cad-notif-body { font-size: .8rem; color: var(--text-dim, #9b9ea9); line-height: 1.35; }
.cad-notif-time { font-size: .72rem; color: var(--text-faint, #6b6e7a); margin-top: 2px; }
.cad-notif-act {
  flex-shrink: 0; align-self: center; font-size: .74rem; padding: 4px 9px;
  border-radius: 7px; border: 1px solid var(--border-strong, #3a3d4d);
  background: transparent; color: var(--accent-bright, #9b7bff); cursor: pointer;
}
.cad-notif-act:hover { background: rgba(var(--accent-rgb, 124,92,255), .14); }

/* ═══════════════════════════════════════════════════════════
   Apartado "Actualizaciones" (Ajustes)
   ═══════════════════════════════════════════════════════════ */
.cad-update-head { display: flex; align-items: center; gap: 12px; margin: 1.3rem 0 1rem; }
.cad-update-badge {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb, 124,92,255), .14); color: var(--accent-bright, #9b7bff);
}
.cad-update-title { font-size: .8rem; color: var(--text-dim, #9b9ea9); }
.cad-update-ver { font-family: var(--mono, monospace); font-size: 1.05rem; font-weight: 600; color: var(--text, #eceef2); }
.cad-update-status {
  border-radius: 10px; padding: 14px 16px; min-height: 54px;
  background: var(--surface-input, #181922); border: 1px solid var(--border, #2e3142);
  display: flex; align-items: center;
}
.cad-update-status.ok     { background: rgba(67,211,158,.12);  border-color: rgba(67,211,158,.30); }
.cad-update-status.accent { background: rgba(var(--accent-rgb,124,92,255),.12); border-color: rgba(var(--accent-rgb,124,92,255),.35); }
.cad-update-status.err    { background: rgba(247,111,164,.10); border-color: rgba(247,111,164,.30); }
.cad-update-muted { color: var(--text-dim, #9b9ea9); font-size: .85rem; }
.cad-update-line { display: flex; align-items: center; gap: 10px; width: 100%; }
.cad-update-line .cad-u-ic { flex-shrink: 0; font-size: 1.15rem; line-height: 1; }
.cad-update-line .cad-u-tx { flex: 1; min-width: 0; font-size: .88rem; }
.cad-update-line .cad-u-tx b { display: block; font-weight: 600; }
.cad-update-line .cad-u-sub { font-size: .8rem; color: var(--text-dim, #9b9ea9); }
.cad-update-ok-tx  { color: #43d39e; }
.cad-update-acc-tx { color: var(--accent-bright, #9b7bff); }
.cad-update-err-tx { color: #f76fa4; }
.cad-u-btn { flex-shrink: 0; }
.cad-update-bar { height: 6px; border-radius: 999px; background: var(--border, #2e3142); overflow: hidden; margin-top: 8px; }
.cad-update-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent-bright, #6c63ff); transition: width .3s ease; min-width: 4px; }
.cad-update-spin { width: 16px; height: 16px; border: 2px solid var(--border, #2e3142); border-top-color: var(--accent-bright, #6c63ff); border-radius: 50%; animation: drive-spin .7s linear infinite; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   Panel de Descargas (videos ya descargados)
   ═══════════════════════════════════════════════════════════ */
.drive-downloads-btn svg { opacity: .9; }
.drive-downloads-body { padding: .85rem 1rem 1.15rem; }
.drive-downloads-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.drive-dl-empty {
  padding: 2.2rem 1rem; text-align: center;
  color: var(--text-secondary, #9b9ea9); font-size: .875rem;
}
.drive-dl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--border, #2e3142);
  background: var(--surface-input, #181922);
}
.drive-dl-row:hover { border-color: var(--border-strong, #3a3d4d); }
.drive-dl-thumb {
  width: 74px; height: 44px; flex-shrink: 0; border-radius: 7px;
  background: var(--panel-3, #20222b) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint, #6b6e7a);
}
.drive-dl-info { flex: 1; min-width: 0; }
.drive-dl-name {
  font-size: .9rem; font-weight: 600; color: var(--text, #eceef2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drive-dl-meta { margin-top: 2px; font-size: .76rem; color: var(--text-dim, #9b9ea9); }
.drive-dl-menu-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  border: none; background: transparent; color: var(--text-dim, #9b9ea9);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.drive-dl-menu-btn:hover { background: var(--panel-3, #20222b); color: var(--text, #eceef2); }

/* ═══════════════════════════════════════════════════════════
   Selección múltiple, marquee (rubber-band) y drag & drop
   ═══════════════════════════════════════════════════════════ */

/* El grid necesita ser contexto de posición para el marquee interno.
   user-select:none → arrastrar para seleccionar no resalta texto (como el escritorio). */
.drive-items {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* Rectángulo de selección (marquee) — se pinta a nivel de viewport */
.drive-marquee {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  border: 1.5px solid var(--accent-bright, #6c63ff);
  background: rgba(108, 99, 255, .14);
  border-radius: 4px;
}

/* Tarjeta que se está arrastrando */
.drive-folder-card.drive-dragging,
.drive-video-card.drive-dragging { opacity: .45; }

/* Resaltado de destino de drop (carpeta) */
.drive-folder-card.drive-drop-target { transform: translateY(-3px); }
.drive-folder-card.drive-drop-target .drive-folder-body {
  border-color: var(--accent-bright, #6c63ff);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, .5), 0 16px 34px rgba(0,0,0,.42);
}
.drive-video-card.drive-drop-target {
  outline: 2px solid var(--accent-bright, #6c63ff);
  outline-offset: 2px;
}
/* Resaltado de destino de drop en el sidebar */
.drive-sidebar-item.drive-drop-target {
  background: rgba(var(--accent-rgb, 124,92,255), .28);
  box-shadow: inset 0 0 0 1.5px var(--accent-bright, #9b7bff);
  color: var(--text, #eceef2);
}

/* Contador de arrastre (cuántos elementos se mueven) */
.drive-drag-count {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--accent-bright, #6c63ff);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ===== 05-auth.css ===== */
/* ═══════════════════════════════════════════════════════════
   05-auth.css — Pantalla de login / verificación de licencia
   Subtitles WIZARD
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay principal ─────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg, #0f1117);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease;
}
.auth-overlay.auth-overlay-hiding {
  opacity: 0;
  pointer-events: none;
}
.auth-overlay.auth-overlay-hidden {
  display: none;
}

/* ── Tarjeta de login ──────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2rem 2rem;
  background: var(--bg-card, #181c2a);
  border: 1px solid var(--border, #2e3142);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Logo / cabecera ───────────────────────────────────── */
.auth-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.auth-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6c63ff, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(108,99,255,.4);
}

.auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary, #e2e4ef);
  margin: 0;
  text-align: center;
  letter-spacing: -.3px;
}

.auth-subtitle {
  font-size: .82rem;
  color: var(--text-secondary, #9b9ea9);
  margin: 0;
  text-align: center;
}

/* ── Pantallas dentro de la card ───────────────────────── */
.auth-screen { display: none; }
.auth-screen.visible { display: block; }

/* ── Botón Google ──────────────────────────────────────── */
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--border, #2e3142);
  background: #fff;
  color: #3c4043;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.auth-google-btn:hover {
  background: #f7f8fc;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.auth-google-btn:disabled {
  opacity: .6;
  cursor: default;
}

.auth-google-btn svg { flex-shrink: 0; }

/* ── Separador ─────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text-secondary, #9b9ea9);
  font-size: .75rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #2e3142);
}

/* ── Formulario email/contraseña ───────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.auth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .65rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2e3142);
  background: var(--bg-input, #0f1117);
  color: var(--text-primary, #e2e4ef);
  font-size: .875rem;
  outline: none;
  transition: border-color .15s;
}
.auth-input:focus {
  border-color: var(--accent-bright, #6c63ff);
}
.auth-input::placeholder {
  color: var(--text-secondary, #9b9ea9);
}

.auth-btn-primary {
  display: block;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 9px;
  border: none;
  background: var(--accent-bright, #6c63ff);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  margin-top: .2rem;
}
.auth-btn-primary:hover { background: #5a51e8; }
.auth-btn-primary:disabled { opacity: .55; cursor: default; }

.auth-btn-secondary {
  display: block;
  width: 100%;
  padding: .6rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--border, #2e3142);
  background: transparent;
  color: var(--text-secondary, #9b9ea9);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.auth-btn-secondary:hover {
  background: var(--bg-hover, #1f2338);
  color: var(--text-primary, #e2e4ef);
}

.auth-forgot {
  background: none;
  border: none;
  color: var(--accent-bright, #6c63ff);
  font-size: .78rem;
  cursor: pointer;
  padding: 0;
  text-align: right;
  align-self: flex-end;
}
.auth-forgot:hover { text-decoration: underline; }

/* ── Mensaje de error / info ───────────────────────────── */
.auth-error-msg {
  font-size: .8rem;
  padding: .55rem .75rem;
  border-radius: 7px;
  min-height: 0;
  display: none;
}
.auth-error-msg:not(:empty) { display: block; }
.auth-msg-error {
  background: rgba(247,111,164,.12);
  color: #f76fa4;
  border: 1px solid rgba(247,111,164,.25);
}
.auth-msg-info {
  background: rgba(67,211,158,.1);
  color: #43d39e;
  border: 1px solid rgba(67,211,158,.2);
}

/* ── Pantalla de carga (verificando) ───────────────────── */
.auth-checking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 .5rem;
  color: var(--text-secondary, #9b9ea9);
  font-size: .875rem;
}

/* ── Pantalla sin licencia ─────────────────────────────── */
.auth-no-license {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}
.auth-no-license-icon {
  font-size: 2.5rem;
  line-height: 1;
}
.auth-no-license h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary, #e2e4ef);
}
.auth-no-license p {
  margin: 0;
  font-size: .82rem;
  color: var(--text-secondary, #9b9ea9);
  line-height: 1.5;
}
.auth-no-license-email {
  font-size: .78rem;
  color: var(--accent-bright, #6c63ff);
  word-break: break-all;
}
.auth-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.25rem;
  border-radius: 9px;
  border: none;
  background: var(--accent-bright, #6c63ff);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: .25rem;
}
.auth-buy-btn:hover { background: #5a51e8; }

/* ── Info de usuario en settings ───────────────────────── */
.settings-user-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: var(--bg-input, #0f1117);
  border: 1px solid var(--border, #2e3142);
  border-radius: 10px;
  margin-bottom: .5rem;
}
.settings-user-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.settings-user-info { flex: 1; min-width: 0; }
.settings-user-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary, #e2e4ef);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-user-email {
  font-size: .75rem;
  color: var(--text-secondary, #9b9ea9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   Extensiones para #cadLogin con Firebase auth
   (overlay de verificación, error, panel sin licencia)
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay "Verificando sesión…" dentro de la card ─────── */
.cad-login-check-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(10, 11, 18, .88);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  z-index: 20;
  pointer-events: all;
}
.cad-login-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(108, 99, 255, .25);
  border-top-color: var(--accent, #6c63ff);
  border-radius: 50%;
  animation: cad-spin .75s linear infinite;
}
@keyframes cad-spin { to { transform: rotate(360deg); } }
.cad-login-check-text {
  font-size: .875rem;
  color: var(--text-secondary, #9b9ea9);
}

/* ── Mensaje de error / info ──────────────────────────────── */
.cad-login-error-msg {
  font-size: .8125rem;
  line-height: 1.4;
  min-height: 0;
  text-align: center;
  padding: 0 .25rem;
  color: #f47575;
  transition: color .2s;
}
.cad-login-error-msg:empty { display: none; }
.cad-login-error-msg[data-type="info"] { color: #5ed8a5; }

/* ── Panel "sin licencia" ─────────────────────────────────── */
.cad-login-no-lic {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-card, #13141d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem 1.5rem;
  z-index: 10;
  text-align: center;
}
.cad-login-no-lic-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: .25rem;
}
.cad-login-no-lic strong {
  font-size: 1.05rem;
  color: var(--text-primary, #e2e4ef);
}
.cad-login-no-lic p {
  font-size: .8125rem;
  color: var(--text-secondary, #9b9ea9);
  line-height: 1.5;
  max-width: 22ch;
}
.cad-login-no-lic-email {
  color: var(--accent, #6c63ff);
  word-break: break-all;
}
.cad-login-link-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #9b9ea9);
  font-size: .8125rem;
  cursor: pointer;
  padding: .25rem .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cad-login-link-btn:hover { color: var(--text-primary, #e2e4ef); }

/* Asegura que .cad-login-card tenga posición relativa
   para que los overlays absolutos queden dentro de ella */
.cad-login-card { position: relative; }

/* ===== 11-profile.css ===== */
/* ═══════════════════════════════════════════════════════════
   11-profile.css — Avatar de usuario, menú desplegable y modal de perfil.
   Hoja independiente (no forma parte de app.css); se enlaza directo en index.html.
   Usa las variables de tema definidas en 00-tokens.css / 90-theme.css.
   ═══════════════════════════════════════════════════════════ */

/* Checkbox "Recordar sesión" del login */
.cad-login-remember {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 2px; font-size: 13px; color: var(--text-dim, #9b9ea9);
  cursor: pointer; user-select: none;
}
.cad-login-remember input {
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent-bright, #9b7bff);
}

/* ── Avatar (botón) ── */
.cad-user-menu { position: relative; flex-shrink: 0; }

.cad-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-bright));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: #fff;
  flex-shrink: 0; border: none; padding: 0; cursor: pointer; overflow: hidden;
  position: relative; outline: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cad-user-menu .cad-avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .4); }
.cad-user-menu.open .cad-avatar { box-shadow: 0 0 0 2px var(--accent-bright); }
.cad-avatar .cad-avatar-img { width: 100%; height: 100%; object-fit: cover; display: none; }

.cad-avatar-md { width: 44px; height: 44px; font-size: 15px; }
.cad-avatar-xl { width: 76px; height: 76px; font-size: 26px; }

/* ── Menú desplegable ── */
.cad-user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 264px; z-index: 1600;
  background: var(--panel-head, #14161d);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  padding: 8px; overflow: hidden;
  animation: cadDropIn .14s ease;
}
.cad-user-dropdown[hidden] { display: none; }
@keyframes cadDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.cad-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.cad-user-card-id { min-width: 0; }
.cad-user-card-name {
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cad-user-card-email {
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Chip de estudio (viene asignado en la cuenta) */
.cad-user-studio {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 0 12px 0 0; max-width: 100%;
  background: var(--surface-input); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; /* recorta el logo al contorno de la píldora */
}
.cad-user-studio[hidden] { display: none; }
.cad-user-studio-logo {
  height: 26px; width: 46px; box-sizing: border-box; padding: 3px;
  object-fit: contain; display: block; flex-shrink: 0;
  background: #000;                 /* toda el área del logo en negro */
  border-radius: 20px 0 0 20px;     /* izquierda redondeada = píldora, derecha recta */
}
.cad-user-studio-name {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cad-user-menu-list { display: flex; flex-direction: column; gap: 2px; }
.cad-user-menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 11px; border: none; border-radius: 9px;
  background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; text-align: left;
}
.cad-user-menu-item svg { color: var(--text-dim); flex-shrink: 0; }
.cad-user-menu-item:hover { background: var(--surface-input); }
.cad-user-menu-item:hover svg { color: var(--accent-bright); }
.cad-user-menu-item .cad-user-menu-ext { margin-left: auto; }
.cad-user-menu-item.danger { color: #ff8080; }
.cad-user-menu-item.danger svg { color: #ff8080; }
.cad-user-menu-item.danger:hover { background: rgba(255, 90, 90, .12); }

.cad-user-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ── Modal de perfil ── */
.cad-profile-modal { width: min(560px, 94vw); }
.cad-profile-body { padding: 8px 26px 24px; }

.cad-profile-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 4px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.cad-profile-hero-name { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 20px; color: var(--text); }
.cad-profile-photo-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cad-profile-photo-btn {
  padding: 6px 12px; border-radius: 8px;
  background: var(--surface-input); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; cursor: pointer;
}
.cad-profile-photo-btn:hover { color: #fff; border-color: var(--border-strong); }
.cad-profile-photo-remove {
  padding: 6px 8px; border: none; background: transparent; cursor: pointer;
  color: var(--text-faint); font-family: var(--sans); font-size: 12.5px;
}
.cad-profile-photo-remove:hover { color: #ff8080; }

.cad-profile-studio {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 0 16px 0 0;
  background: var(--surface-input); border: 1px solid var(--border); border-radius: 24px;
  overflow: hidden; /* recorta el logo al contorno de la píldora */
}
.cad-profile-studio[hidden] { display: none; }
.cad-profile-studio-logo {
  height: 40px; width: 66px; box-sizing: border-box; padding: 5px;
  object-fit: contain; display: block; flex-shrink: 0;
  background: #000;                 /* toda el área del logo en negro */
  border-radius: 24px 0 0 24px;     /* izquierda redondeada = píldora, derecha recta */
}
.cad-profile-studio-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); }

.cad-profile-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.cad-profile-field { display: flex; flex-direction: column; gap: 6px; }
.cad-profile-field > span { font-family: var(--sans); font-size: 12.5px; color: var(--text-dim); }
.cad-profile-field input {
  padding: 11px 13px; border-radius: 10px;
  background: var(--surface-input); border: 1px solid var(--border);
  color: var(--text); font-family: var(--sans); font-size: 14px; outline: none;
}
.cad-profile-field input:focus { border-color: var(--accent-bright); }
.cad-profile-field input[readonly] { color: var(--text-dim); cursor: default; }

.cad-profile-sub {
  background: var(--surface-input); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
}
.cad-profile-sub-title {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 10px;
}
.cad-profile-sub-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13.5px; color: var(--text-dim);
}
.cad-profile-sub-row + .cad-profile-sub-row { border-top: 1px solid var(--border); }
.cad-profile-sub-row b { color: var(--text); font-weight: 600; }

.cad-profile-badge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: var(--panel-3, #23262f); color: var(--text-dim);
}
.cad-profile-badge.ok  { background: rgba(0, 184, 163, .16); color: #23d5bd; }
.cad-profile-badge.off { background: rgba(246, 189, 96, .16); color: #f6bd60; }

.cad-profile-foot { display: flex; align-items: center; gap: 10px; }
.cad-profile-msg { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.cad-profile-msg[data-type="ok"]    { color: #23d5bd; }
.cad-profile-msg[data-type="error"] { color: #ff8080; }
.cad-profile-msg[data-type="info"]  { color: var(--text-dim); }
.cad-profile-cancel {
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  background: var(--surface-input); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--sans); font-size: 13.5px;
}
.cad-profile-cancel:hover { color: #fff; border-color: var(--border-strong); }
.cad-profile-save {
  padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(140deg, var(--accent), var(--accent-2, var(--accent-bright)));
  color: #fff; font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .32);
}
.cad-profile-save:hover { box-shadow: 0 9px 24px rgba(var(--accent-rgb), .5); }
.cad-profile-save:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* ── Toast ── */
.cad-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel-head, #14161d); border: 1px solid var(--border);
  color: var(--text); padding: 12px 20px; border-radius: 12px;
  font-family: var(--sans); font-size: 13.5px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; z-index: 3000; transition: opacity .2s ease, transform .2s ease;
}
.cad-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 12-titlebar.css ===== */
/* ═══════════════════════════════════════════════════════════
   Barra de título integrada (ventana sin marco, frame:false)
   ═══════════════════════════════════════════════════════════ */

/* Deja hueco arriba para la barra fija (sin romper el modelo de altura). */
body { box-sizing: border-box; padding-top: 34px; }

/* El contenido útil del body mide 100vh menos la barra integrada. El editor
   todavía calculaba main con 100vh completo, creando 34px de desbordamiento:
   al cambiar de pantalla el documento se desplazaba y ocultaba su header. */
body:not(.cad-home) > main { height: calc(100vh - 34px - var(--header-h)); }

#cadTitlebar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 2147483000;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg, #0d0e12);
  border-bottom: 1px solid var(--border, #23252e);
  -webkit-app-region: drag;           /* toda la barra arrastra la ventana */
  user-select: none; padding-left: 12px;
}
.cad-tb-brand { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.cad-tb-logo { width: 20px; height: 20px; border-radius: 5px; padding: 0 4px; gap: 2px; box-shadow: none; }
.cad-tb-logo span { height: 2px; }
.cad-tb-name { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--text, #eceef2); }

.cad-tb-controls { display: flex; height: 100%; -webkit-app-region: no-drag; } /* botones no arrastran */
.cad-tb-btn {
  width: 46px; height: 34px; border: none; background: transparent;
  color: var(--text-dim, #9b9ea9); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.cad-tb-btn:hover { background: rgba(255, 255, 255, .09); color: var(--text, #eceef2); }
.cad-tb-close:hover { background: #e11d48; color: #fff; }

/* El login (overlay fijo inset:0) debe empezar DEBAJO de la barra. */
#cadLogin { top: 34px !important; }

/* El inicio usa 100vh; como la barra ocupa 34px, restamos ese alto para que no
   se desborde ni tape el fondo del contenido. */
body.cad-home > main { height: calc(100vh - 34px) !important; }
body.cad-home #importScreen { height: calc(100vh - 34px) !important; }

/* ===== 13-static-shell.css ===== */
/* Presentación de la pantalla; display dinámico permanece en el DOM. */
:is(#cad-static-priority, .cad-static-1) {background:var(--surface-input);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:11px}
:is(#cad-static-priority, .cad-static-2) {margin-top:1.2rem}
:is(#cad-static-priority, .cad-static-3) {margin-top:.4rem}
:is(#cad-static-priority, .cad-static-4) {margin-top:1.2rem}
:is(#cad-static-priority, .cad-static-5) {margin-top:1.5rem}
:is(#cad-static-priority, .cad-static-6) {margin-top:.9rem;align-items:center;gap:.75rem;flex-wrap:wrap}
:is(#cad-static-priority, .cad-static-7) {margin-top:1.5rem}
:is(#cad-static-priority, .cad-static-8) {margin-top:1.1rem;width:100%;justify-content:center;gap:.45rem}
:is(#cad-static-priority, .cad-static-9) {width:5rem}
:is(#cad-static-priority, .cad-static-10) {width:5rem}
:is(#cad-static-priority, .cad-static-11) {width:12px;height:2px;background:currentColor;border-radius:1px;margin:auto}
:is(#cad-static-priority, .cad-static-12) {width:12px;height:4px;background:currentColor;border-radius:2px;margin:auto}
:is(#cad-static-priority, .cad-static-13) {width:12px;height:7px;background:currentColor;border-radius:3px;margin:auto}
:is(#cad-static-priority, .cad-static-14) {background:#ffeb3b}
:is(#cad-static-priority, .cad-static-15) {background:#f44336}
:is(#cad-static-priority, .cad-static-16) {background:#4caf50}
:is(#cad-static-priority, .cad-static-17) {background:#2196f3}
:is(#cad-static-priority, .cad-static-18) {background:#fff;border:1px solid rgba(255,255,255,.3)}
:is(#cad-static-priority, .cad-static-19) {background:#e8b400}
:is(#cad-static-priority, .cad-static-20) {background:#f44336}
:is(#cad-static-priority, .cad-static-21) {background:#4caf50}
:is(#cad-static-priority, .cad-static-22) {background:#2196f3}
:is(#cad-static-priority, .cad-static-23) {background:#e040fb}
:is(#cad-static-priority, .cad-static-24) {background:#78909c}
:is(#cad-static-priority, .cad-static-25) {max-width:700px;max-height:80vh;flex-direction:column}
:is(#cad-static-priority, .cad-static-26) {padding:1rem 1.5rem 1.5rem;overflow-y:auto;flex:1}
:is(#cad-static-priority, .cad-static-27) {max-width:380px}
:is(#cad-static-priority, .cad-static-28) {padding:1.25rem 1.5rem 1.5rem;flex-direction:column;gap:.85rem}
:is(#cad-static-priority, .cad-static-29) {gap:.5rem;justify-content:flex-end}
:is(#cad-static-priority, .cad-static-30) {max-width:380px}
:is(#cad-static-priority, .cad-static-31) {padding:1.25rem 1.5rem 1.5rem;flex-direction:column;gap:.85rem}
:is(#cad-static-priority, .cad-static-32) {gap:.5rem;justify-content:flex-end}
:is(#cad-static-priority, .cad-static-33) {max-width:620px;width:92vw}
:is(#cad-static-priority, .cad-static-6) {display:flex}
:is(#cad-static-priority, .cad-static-11) {display:block}
:is(#cad-static-priority, .cad-static-12) {display:block}
:is(#cad-static-priority, .cad-static-13) {display:block}
:is(#cad-static-priority, .cad-static-25) {display:flex}
:is(#cad-static-priority, .cad-static-28) {display:flex}
:is(#cad-static-priority, .cad-static-29) {display:flex}
:is(#cad-static-priority, .cad-static-31) {display:flex}
:is(#cad-static-priority, .cad-static-32) {display:flex}