:root,
[data-bs-theme="dark"] {
    --aura-bg:        #0a0a0c;
    --aura-bg-2:      #111114;
    --aura-bg-3:      #16161b;
    --aura-surface:   #1c1c23;
    --aura-border:    #2a2a35;
    --aura-text:      #e7e7ea;
    --aura-muted:     #8a8a96;
    --aura-violet:    #8b5cf6;
    --aura-violet-2:  #a78bfa;
    --aura-violet-glow: rgba(139,92,246,.45);
    --aura-amber:     #f59e0b;
    --aura-amber-glow: rgba(245,158,11,.4);
    --aura-red:       #ef4444;
    --aura-green:     #10b981;
    --aura-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --aura-sans:      'Inter', system-ui, -apple-system, sans-serif;

    /* Bootstrap overrides */
    --bs-body-bg:     var(--aura-bg);
    --bs-body-color:  var(--aura-text);
    --bs-primary:     var(--aura-violet);
    --bs-primary-rgb: 139,92,246;
    --bs-warning:     var(--aura-amber);
    --bs-warning-rgb: 245,158,11;
    --bs-border-color: var(--aura-border);
}

/* ─── TEMA CLARO ─────────────────────────────────────────────────────
   Inspirado en dnns.es: crema/blanco + texto oscuro, sin glassmorphism.
   Mantenemos el morado y ámbar como acentos para no romper la marca VideoIA.
   ──────────────────────────────────────────────────────────────────── */
[data-bs-theme="light"] {
    --aura-bg:        #faf9f4;
    --aura-bg-2:      #ffffff;
    --aura-bg-3:      #f3f1e8;
    --aura-surface:   #ffffff;
    --aura-border:    #e3e1d6;
    --aura-text:      #1f2421;
    --aura-muted:     #6b7570;

    /* Acento principal: VERDE DNNS (sustituye al morado en modo claro) */
    --aura-violet:    #2e7d32;
    --aura-violet-2:  #43a047;
    --aura-violet-glow: rgba(46,125,50,.25);

    /* Acento secundario: ámbar/tierra sobrio */
    --aura-amber:     #b35400;
    --aura-amber-glow: rgba(179,84,0,.3);

    --aura-red:       #c2410c;
    --aura-green:     #2e7d32;

    --bs-body-bg:     var(--aura-bg);
    --bs-body-color:  var(--aura-text);
    --bs-primary:     var(--aura-violet);
    --bs-primary-rgb: 46,125,50;
    --bs-warning:     var(--aura-amber);
    --bs-warning-rgb: 179,84,0;
    --bs-border-color: var(--aura-border);
}

/* Body en modo claro: gradientes verdes muy sutiles */
[data-bs-theme="light"] body.aura {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(46,125,50,.05), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(179,84,0,.03), transparent 70%),
        var(--aura-bg) !important;
    color: var(--aura-text);
}

/* Navbar en modo claro: blanco translúcido con borde gris */
[data-bs-theme="light"] .aura-navbar {
    background: rgba(255,255,255,.85) !important;
    border-bottom: 1px solid var(--aura-border);
}
[data-bs-theme="light"] .aura-navbar .navbar-brand,
[data-bs-theme="light"] .aura-navbar .nav-link {
    color: var(--aura-text) !important;
}

/* Cards / HUD en modo claro: fondo blanco con borde claro */
[data-bs-theme="light"] .aura-card,
[data-bs-theme="light"] .aura-hud,
[data-bs-theme="light"] .aura-hud-body {
    background: var(--aura-surface);
    border-color: var(--aura-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-bs-theme="light"] .aura-hud-header {
    background: var(--aura-bg-3);
    border-bottom: 1px solid var(--aura-border);
    color: var(--aura-text);
}

/* Modales y dropdowns: fondo claro */
[data-bs-theme="light"] .modal-content {
    background: var(--aura-surface) !important;
    color: var(--aura-text) !important;
    border: 1px solid var(--aura-border) !important;
}
[data-bs-theme="light"] .modal-content .btn-close-white {
    filter: invert(1);
}
[data-bs-theme="light"] .dropdown-menu {
    background: var(--aura-surface);
    border: 1px solid var(--aura-border);
}
[data-bs-theme="light"] .dropdown-item {
    color: var(--aura-text);
}
[data-bs-theme="light"] .dropdown-item:hover {
    background: var(--aura-bg-3);
    color: var(--aura-violet);
}

/* Form controls */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] textarea.form-control {
    background: var(--aura-bg-2);
    color: var(--aura-text);
    border-color: var(--aura-border);
}
[data-bs-theme="light"] .form-control:focus {
    background: var(--aura-bg-2);
    color: var(--aura-text);
    border-color: var(--aura-violet);
    box-shadow: 0 0 0 0.2rem var(--aura-violet-glow);
}

/* Tablas: filas blancas con borde tenue */
[data-bs-theme="light"] table.table {
    color: var(--aura-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--aura-text);
    --bs-table-border-color: var(--aura-border);
}
[data-bs-theme="light"] .aura-table,
[data-bs-theme="light"] .table-responsive {
    background: var(--aura-surface);
}

/* Tarjeta "Próximamente" en modo claro */
[data-bs-theme="light"] .aura-card-soon {
    opacity: .65;
    filter: grayscale(.5);
}

/* Footer en modo claro */
[data-bs-theme="light"] .aura-footer {
    color: var(--aura-muted);
    border-top: 1px solid var(--aura-border);
}
[data-bs-theme="light"] .aura-footer a {
    color: var(--aura-violet);
}

/* Fila destacada en cola (jobs propios) */
.queue-row-mine {
    background: rgba(139,92,246,.10) !important;
    box-shadow: inset 4px 0 0 0 var(--aura-violet);
}
.queue-row-mine td { font-weight: 600; }
[data-bs-theme="light"] .queue-row-mine {
    background: rgba(46,125,50,.08) !important;
    box-shadow: inset 4px 0 0 0 var(--aura-violet);
}

/* Botón toggle de tema */
.aura-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--aura-border);
    background: transparent;
    color: var(--aura-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    padding: 0;
    font-size: 1rem;
}
.aura-theme-toggle:hover {
    border-color: var(--aura-violet);
    color: var(--aura-violet);
    transform: rotate(20deg);
    box-shadow: 0 0 12px var(--aura-violet-glow);
}

* { font-feature-settings: "ss01","cv11"; }

body.aura {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.10), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(245,158,11,.07), transparent 70%),
        var(--aura-bg);
    color: var(--aura-text);
    font-family: var(--aura-sans);
    min-height: 100vh;
}

h1,h2,h3,h4,h5,h6,.aura-mono {
    font-family: var(--aura-mono);
    letter-spacing: -.01em;
}

.aura-eyebrow {
    font-family: var(--aura-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--aura-amber);
}

.aura-text-muted   { color: var(--aura-muted); }
.aura-text-violet  { color: var(--aura-violet-2); }
.aura-text-amber   { color: var(--aura-amber); }

a { color: var(--aura-violet-2); }
a:hover { color: var(--aura-violet); }

/* Navbar HUD glassmorphism */
.aura-navbar {
    background: rgba(10,10,12,.6) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--aura-border);
}
.aura-navbar .navbar-brand,
.aura-navbar .nav-link {
    color: var(--aura-text) !important;
    font-family: var(--aura-mono);
    font-size: .95rem;
}
.aura-navbar .nav-link:hover { color: var(--aura-violet-2) !important; }
.aura-navbar .navbar-brand i { color: var(--aura-violet); filter: drop-shadow(0 0 6px var(--aura-violet-glow)); }

/* Botones */
.btn-aura {
    background: var(--aura-violet);
    color: #fff;
    border: 1px solid var(--aura-violet);
    font-family: var(--aura-mono);
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 0 0 0 var(--aura-violet-glow);
    transition: box-shadow .2s ease, transform .05s ease, background .2s ease;
}
.btn-aura:hover {
    background: var(--aura-violet-2);
    color: #fff;
    box-shadow: 0 0 24px var(--aura-violet-glow);
}
.btn-aura:active { transform: translateY(1px); }

.btn-outline-aura {
    background: transparent;
    color: var(--aura-text);
    border: 1px solid var(--aura-border);
    font-family: var(--aura-mono);
}
.btn-outline-aura:hover {
    border-color: var(--aura-violet);
    color: var(--aura-violet-2);
    box-shadow: 0 0 16px var(--aura-violet-glow);
}

/* Cards y superficies */
.aura-card {
    background: linear-gradient(180deg, var(--aura-bg-3) 0%, var(--aura-bg-2) 100%);
    border: 1px solid var(--aura-border);
    border-radius: .75rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    position: relative;
}
.aura-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(139,92,246,.05) 0%, transparent 35%);
}
.aura-card:hover {
    border-color: rgba(139,92,246,.4);
    box-shadow: 0 0 24px rgba(139,92,246,.12);
}
.aura-card-feature {
    border-color: var(--aura-violet);
    box-shadow: inset 0 0 24px rgba(139,92,246,.12), 0 0 32px rgba(139,92,246,.18);
}

/* Hero */
.aura-hero {
    border-bottom: 1px solid var(--aura-border);
    background:
        radial-gradient(circle at 75% 30%, rgba(139,92,246,.18) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(245,158,11,.1) 0%, transparent 50%),
        var(--aura-bg);
}
.aura-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
}
.aura-hero h1 span { color: var(--aura-violet-2); text-shadow: 0 0 24px var(--aura-violet-glow); }

.aura-hud {
    background: var(--aura-bg-2);
    border: 1px solid var(--aura-border);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}
.aura-hud::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(139,92,246,.04) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(245,158,11,.03) 0 1px, transparent 1px 24px);
    pointer-events: none;
}
.aura-hud-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--aura-border);
    font-family: var(--aura-mono);
    font-size: .75rem;
    color: var(--aura-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.aura-hud-dots { display: inline-flex; gap: .35rem; }
.aura-hud-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--aura-border);
    box-shadow: 0 0 8px transparent;
}
.aura-hud-dots span.live {
    background: var(--aura-amber);
    box-shadow: 0 0 8px var(--aura-amber-glow);
    animation: aura-pulse 1.4s ease-in-out infinite;
}
@keyframes aura-pulse {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}
.aura-hud-body { position: relative; padding: 1.25rem; }

/* Bloque de subtítulos demo */
.aura-srt {
    font-family: var(--aura-mono);
    font-size: .85rem;
    line-height: 1.7;
    background: var(--aura-bg-3);
    border: 1px solid var(--aura-border);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    color: var(--aura-text);
}
.aura-srt .ts { color: var(--aura-amber); }
.aura-srt .speaker { color: var(--aura-violet-2); }

/* Form */
.form-control, .input-group-text {
    background: var(--aura-bg-2);
    border-color: var(--aura-border);
    color: var(--aura-text);
}
.form-control::placeholder { color: var(--aura-muted); }
.form-control:focus {
    background: var(--aura-bg-2);
    border-color: var(--aura-violet);
    color: var(--aura-text);
    box-shadow: 0 0 0 .2rem rgba(139,92,246,.25);
}
.input-group-text { color: var(--aura-muted); }
.form-label { font-family: var(--aura-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--aura-muted); }

/* Badges */
.aura-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    font-family: var(--aura-mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .15em;
    border: 1px solid var(--aura-border);
    border-radius: .35rem;
    background: var(--aura-bg-3);
    color: var(--aura-muted);
}
.aura-badge.live { color: var(--aura-amber); border-color: rgba(245,158,11,.4); }
.aura-badge.ok   { color: var(--aura-green); border-color: rgba(16,185,129,.4); }

/* Footer */
.aura-footer {
    background: var(--aura-bg);
    border-top: 1px solid var(--aura-border);
    color: var(--aura-muted);
    font-family: var(--aura-mono);
    font-size: .8rem;
    letter-spacing: .08em;
}
.aura-footer a { color: var(--aura-muted); }
.aura-footer a:hover { color: var(--aura-violet-2); }

/* Sidebar para futuro editor (referencia, todavía no se usa) */
.aura-sidebar {
    background: var(--aura-bg-2);
    border-right: 1px solid var(--aura-border);
    width: 64px;
    padding: 1rem 0;
}
.aura-sidebar .tool {
    width: 44px; height: 44px;
    margin: 0 auto .5rem;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--aura-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.aura-sidebar .tool:hover,
.aura-sidebar .tool.active {
    color: var(--aura-violet-2);
    border-color: var(--aura-border);
    box-shadow: inset 0 0 12px rgba(139,92,246,.18);
}

/* Dropdown menu */
.dropdown-menu {
    background: var(--aura-bg-2);
    border: 1px solid var(--aura-border);
}
.dropdown-item { color: var(--aura-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--aura-bg-3);
    color: var(--aura-violet-2);
}
.dropdown-divider { border-top-color: var(--aura-border); }

/* Selecciones de texto */
::selection { background: var(--aura-violet); color: #fff; }

/* Badges de estado (jobs) */
.aura-badge.queued   { color: var(--aura-amber);   border-color: rgba(245,158,11,.4); }
.aura-badge.running  { color: var(--aura-violet-2); border-color: rgba(139,92,246,.5); box-shadow: 0 0 12px rgba(139,92,246,.25); }
.aura-badge.error    { color: var(--aura-red);     border-color: rgba(239,68,68,.5); }
.aura-badge.cancelled{ color: var(--aura-muted);   border-color: var(--aura-border); }

/* Tabla de jobs */
.aura-table {
    background: var(--aura-bg-2);
    border: 1px solid var(--aura-border);
    border-radius: .75rem;
    overflow: hidden;
    font-family: var(--aura-mono);
    font-size: .85rem;
}
.aura-table table { width: 100%; margin: 0; color: var(--aura-text); }
.aura-table thead th {
    background: var(--aura-bg-3);
    border-bottom: 1px solid var(--aura-border);
    color: var(--aura-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    padding: .75rem 1rem;
}
.aura-table tbody td {
    padding: .85rem 1rem;
    border-top: 1px solid var(--aura-border);
    vertical-align: middle;
}
.aura-table tbody tr:hover td { background: rgba(139,92,246,.04); }
.aura-table .progress {
    height: 6px;
    background: var(--aura-bg-3);
    border: 1px solid var(--aura-border);
}
.aura-table .progress-bar {
    background: linear-gradient(90deg, var(--aura-violet) 0%, var(--aura-violet-2) 100%);
    box-shadow: 0 0 12px rgba(139,92,246,.4);
}
.aura-job-id {
    color: var(--aura-muted);
    font-size: .75rem;
}
.aura-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--aura-muted);
    font-family: var(--aura-mono);
}

/* ── Dropdowns dentro de tablas/HUD ──
   Por defecto .aura-hud y .aura-table tienen overflow:hidden para
   recortar al border-radius. Eso recorta el menú flotante de los
   dropdowns. Solo abrimos overflow cuando hay un .dropdown-menu.show
   dentro, así los redondeos siguen visibles en estado normal. */
.aura-hud:has(.dropdown-menu.show),
.aura-table:has(.dropdown-menu.show) {
    overflow: visible;
}

/* Tabla de segmentos (página detalle /job/{id}) */
.aura-segments {
    overflow-x: auto;
    border-radius: 0 0 1rem 1rem;
}
.aura-segments table {
    width: 100%; margin: 0;
    color: var(--aura-text);
    font-size: .85rem;
    background: var(--aura-bg-2);
}
.aura-segments thead th {
    background: var(--aura-bg-3);
    border-bottom: 1px solid var(--aura-border);
    color: var(--aura-muted);
    text-transform: uppercase; letter-spacing: .12em;
    font-size: .7rem; font-weight: 500;
    padding: .65rem 1rem;
    position: sticky; top: 0;
}
.aura-segments tbody td {
    padding: .65rem 1rem;
    border-top: 1px solid var(--aura-border);
    vertical-align: middle;
}
.aura-segments tbody tr:hover td { background: rgba(139,92,246,.04); }
.aura-segments .ts-col { width: 7rem; white-space: nowrap; font-size: .8rem; }
.aura-segments .audio-col { width: 240px; }
.aura-segments audio { height: 32px; max-width: 100%; }

/* Celda editable + indicador estado (editor de segmentos A.5.5-a) */
.aura-segments .seg-editable {
    cursor: text;
    outline: 1px dashed transparent;
    outline-offset: -2px;
    transition: outline-color .15s ease, background .15s ease;
    white-space: pre-wrap;
    min-width: 200px;
}
.aura-segments .seg-editable:hover {
    outline-color: rgba(139,92,246,.3);
}
.aura-segments .seg-editable:focus {
    outline-color: var(--aura-violet);
    background: rgba(139,92,246,.05);
}
.aura-segments .seg-editable[contenteditable="false"] {
    cursor: not-allowed;
    color: var(--aura-muted);
}

.aura-segments .seg-status {
    font-size: .7rem;
    color: var(--aura-muted);
    min-height: 1rem;
}
.aura-segments .seg-status.saving,
.aura-segments .seg-status.queued,
.aura-segments .seg-status.running { color: var(--aura-violet-2); }
.aura-segments .seg-status.saved,
.aura-segments .seg-status.done    { color: var(--aura-green); }
.aura-segments .seg-status.error   { color: var(--aura-red); }

.aura-segments audio { width: 200px; }

/* El dropdown del menú ⋯ por fila no debe recortarse por overflow auto
   del scroll horizontal de .aura-segments. */
.aura-segments:has(.dropdown-menu.show),
.aura-hud-body:has(.dropdown-menu.show) {
    overflow: visible;
}

/* Vídeo doblado en la página detalle */
.aura-video-preview {
    background: var(--aura-bg-2);
    border: 1px solid var(--aura-border);
    border-radius: 1rem;
    padding: .75rem;
    box-shadow: 0 0 24px rgba(139,92,246,.08);
}
.aura-video-frame {
    background: #000;
    border-radius: .65rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.aura-video-frame video {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tabs del admin panel */
.aura-tabs {
    border-bottom: 1px solid var(--aura-border);
}
.aura-tabs .nav-link {
    color: var(--aura-muted);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    font-family: var(--aura-mono);
    font-size: .85rem;
    padding: .55rem 1rem;
}
.aura-tabs .nav-link:hover {
    color: var(--aura-violet-2);
    border-color: var(--aura-border);
}
.aura-tabs .nav-link.active {
    color: var(--aura-text);
    background: var(--aura-bg-2);
    border-color: var(--aura-border);
    border-bottom-color: var(--aura-bg-2);
    box-shadow: 0 -2px 0 var(--aura-violet) inset;
}

/* Modal dark consistente */
.modal-content.bg-dark {
    background: var(--aura-bg-2) !important;
    border: 1px solid var(--aura-border) !important;
}
.modal-content.bg-dark .modal-header,
.modal-content.bg-dark .modal-footer {
    border-color: var(--aura-border);
}

/* ────────────────────────────────────────────────────
   EDITOR DE JOB · layout 3 columnas + waveform + overlay
   ──────────────────────────────────────────────────── */
.aura-editor {
    --rail-w: 56px;
    --panel-w: 340px;
    --topbar-h: 56px;
    --timeline-h: 168px;
    color: var(--aura-text);
}
.aura-editor-topbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(10,10,12,.7);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--aura-border);
    padding: .5rem .9rem;
    display: flex; align-items: center; gap: .85rem;
    flex-wrap: wrap;
    min-height: var(--topbar-h);
}
.aura-editor-topbar .topbar-title { font-family: var(--aura-mono); font-size: .9rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.aura-editor-topbar .topbar-title .filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.aura-editor-topbar .topbar-meta { display: flex; gap: 1rem; color: var(--aura-muted); font-family: var(--aura-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.aura-editor-topbar .topbar-meta strong { color: var(--aura-text); margin-left: .35rem; font-weight: 500; }
.aura-editor-topbar .topbar-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.aura-editor-topbar .progress { height: 4px; width: 140px; background: var(--aura-bg-3); border: 1px solid var(--aura-border); }
.aura-editor-topbar .progress-bar { background: linear-gradient(90deg, var(--aura-violet) 0%, var(--aura-violet-2) 100%); box-shadow: 0 0 10px rgba(139,92,246,.4); }

.aura-editor-grid {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr var(--panel-w);
    height: calc(100vh - var(--topbar-h) - 56px);
    min-height: 600px;
    border-top: 1px solid var(--aura-border);
}

.aura-editor-rail { background: var(--aura-bg-2); border-right: 1px solid var(--aura-border); padding: .65rem 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.aura-editor-rail .tool { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: .5rem; color: var(--aura-muted); background: transparent; cursor: pointer; font-size: 1.05rem; transition: border-color .15s, color .15s, box-shadow .15s, background .15s; }
.aura-editor-rail .tool:hover { color: var(--aura-violet-2); border-color: var(--aura-border); }
.aura-editor-rail .tool.active { color: var(--aura-violet-2); border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.08); box-shadow: inset 0 0 14px rgba(139,92,246,.18); }

.aura-editor-viewport { display: flex; flex-direction: column; min-width: 0; background: var(--aura-bg); }
.aura-video-stage { position: relative; flex: 1 1 auto; min-height: 240px; background: #000; display: grid; place-items: center; overflow: hidden; }
.aura-video-stage video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.aura-video-stage.empty video { display: none; }
.aura-video-stage.empty::after { content: "Sin vídeo disponible (aún)"; position: absolute; color: var(--aura-muted); font-family: var(--aura-mono); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }

.aura-subtitle-overlay { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); max-width: 80%; padding: .5rem 1rem; background: rgba(10,10,12,.6); border: 1px solid rgba(139,92,246,.25); border-radius: .5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; text-align: center; opacity: 0; transition: opacity .15s ease; }
.aura-subtitle-overlay.visible { opacity: 1; }
.aura-subtitle-overlay .sub-target { font-family: var(--aura-mono); font-size: 1.05rem; color: var(--aura-violet-2); text-shadow: 0 0 12px var(--aura-violet-glow); line-height: 1.4; }
.aura-subtitle-overlay .sub-source { font-family: var(--aura-mono); font-size: .8rem; color: var(--aura-amber); opacity: .85; margin-top: .25rem; line-height: 1.3; }
.aura-subtitle-overlay .sub-target:empty,
.aura-subtitle-overlay .sub-source:empty { display: none; }

.aura-timeline { border-top: 1px solid var(--aura-border); background: var(--aura-bg-2); height: var(--timeline-h); display: flex; flex-direction: column; flex: 0 0 auto; }
.aura-timeline-tabs { display: flex; align-items: center; padding: .35rem .5rem; gap: .35rem; border-bottom: 1px solid var(--aura-border); background: var(--aura-bg-3); }
.aura-timeline-tabs button { background: transparent; border: 1px solid transparent; color: var(--aura-muted); font-family: var(--aura-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; padding: .25rem .65rem; border-radius: .35rem; cursor: pointer; }
.aura-timeline-tabs button:hover { color: var(--aura-text); border-color: var(--aura-border); }
.aura-timeline-tabs button.active.target { color: var(--aura-violet-2); border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.08); box-shadow: inset 0 0 12px rgba(139,92,246,.2); }
.aura-timeline-tabs button.active.source { color: var(--aura-amber); border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); box-shadow: inset 0 0 12px rgba(245,158,11,.18); }
.aura-timeline-tabs .tabs-meta { margin-left: auto; color: var(--aura-muted); font-family: var(--aura-mono); font-size: .72rem; padding-right: .5rem; }

.aura-timeline-stage { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--aura-bg-3); }
.aura-timeline-stage #waveform { position: absolute; inset: 0; }
.aura-timeline-stage #waveform ::part(cursor) { box-shadow: 0 0 10px rgba(239,68,68,.7); }
.aura-timeline-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--aura-muted); font-family: var(--aura-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.aura-timeline-empty #waveformLoadCta {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--aura-border);
    border-radius: .5rem;
    color: var(--aura-violet-2);
    background: rgba(139,92,246,.04);
    transition: background .15s, border-color .15s;
    pointer-events: auto;
}
.aura-timeline-empty #waveformLoadCta:hover {
    background: rgba(139,92,246,.08);
    border-color: var(--aura-violet);
}
.aura-editor-panel { background: var(--aura-bg-2); border-left: 1px solid var(--aura-border); display: flex; flex-direction: column; min-height: 0; }
.aura-panel-header { padding: .55rem .75rem; border-bottom: 1px solid var(--aura-border); display: flex; align-items: center; gap: .5rem; background: var(--aura-bg-3); }
.aura-panel-header .panel-title { font-family: var(--aura-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: var(--aura-muted); }
.aura-panel-header .panel-count { margin-left: auto; font-family: var(--aura-mono); font-size: .75rem; color: var(--aura-violet-2); }
.aura-panel-search { padding: .5rem .75rem; border-bottom: 1px solid var(--aura-border); background: var(--aura-bg-2); }
.aura-panel-search .form-control { background: var(--aura-bg-3); font-family: var(--aura-mono); font-size: .82rem; }
.aura-panel-list { flex: 1 1 auto; overflow-y: auto; padding: .5rem; scrollbar-width: thin; scrollbar-color: var(--aura-border) transparent; }
.aura-panel-list::-webkit-scrollbar { width: 8px; }
.aura-panel-list::-webkit-scrollbar-thumb { background: var(--aura-border); border-radius: 4px; }
.aura-panel-list::-webkit-scrollbar-track { background: transparent; }

.aura-seg-card { background: var(--aura-bg-3); border: 1px solid var(--aura-border); border-radius: .55rem; padding: .55rem .7rem; margin-bottom: .5rem; transition: border-color .15s, box-shadow .15s, background .15s; cursor: pointer; position: relative; }
.aura-seg-card:hover { border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.04); }
.aura-seg-card.active { border-color: var(--aura-violet); box-shadow: inset 0 0 18px rgba(139,92,246,.18), 0 0 14px rgba(139,92,246,.18); background: rgba(139,92,246,.06); }
.aura-seg-card .seg-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.aura-seg-card .seg-ts { font-family: var(--aura-mono); font-size: .72rem; color: var(--aura-amber); letter-spacing: .05em; }
.aura-seg-card .seg-actions { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.aura-seg-card .seg-actions .btn { padding: .15rem .35rem; font-size: .75rem; line-height: 1; }
.aura-seg-card .seg-source { font-family: var(--aura-mono); font-size: .75rem; color: var(--aura-amber); opacity: .7; line-height: 1.4; margin-bottom: .35rem; white-space: pre-wrap; }
.aura-seg-card .seg-target { font-family: var(--aura-mono); font-size: .85rem; color: var(--aura-violet-2); line-height: 1.4; outline: 1px dashed transparent; outline-offset: 2px; border-radius: .25rem; padding: .15rem .25rem; margin: -.15rem -.25rem; white-space: pre-wrap; cursor: text; transition: outline-color .15s, background .15s; }
.aura-seg-card .seg-target:hover { outline-color: rgba(139,92,246,.3); }
.aura-seg-card .seg-target:focus { outline-color: var(--aura-violet); background: rgba(139,92,246,.06); color: var(--aura-text); }
.aura-seg-card .seg-target[contenteditable="false"] { cursor: not-allowed; opacity: .55; }
.aura-seg-card .seg-status { margin-top: .35rem; font-family: var(--aura-mono); font-size: .7rem; color: var(--aura-muted); min-height: 1rem; display: flex; align-items: center; gap: .25rem; }
.aura-seg-card .seg-status.saving,
.aura-seg-card .seg-status.queued,
.aura-seg-card .seg-status.running { color: var(--aura-violet-2); }
.aura-seg-card .seg-status.saved,
.aura-seg-card .seg-status.done    { color: var(--aura-green); }
.aura-seg-card .seg-status.error   { color: var(--aura-red); }
.aura-seg-card audio { width: 100%; height: 28px; margin-top: .35rem; }

.aura-editor-empty { padding: 3rem 1rem; text-align: center; color: var(--aura-muted); font-family: var(--aura-mono); }

.aura-editor-grid:has(.dropdown-menu.show) .aura-editor-panel,
.aura-editor-grid:has(.dropdown-menu.show) .aura-editor-rail,
.aura-editor-topbar:has(.dropdown-menu.show) { overflow: visible; }

@media (max-width: 992px) {
    .aura-editor-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .aura-editor-rail { display: none; }
    .aura-editor-panel { border-left: none; border-top: 1px solid var(--aura-border); max-height: 60vh; }
    .aura-video-stage { min-height: 220px; aspect-ratio: 16/9; }
    .aura-timeline { height: 140px; }
}


/* ────────────────────────────────────────────────────
   Rail popovers + toggle origen + slider volumen
   ──────────────────────────────────────────────────── */
.aura-editor-rail { position: relative; }

.aura-rail-popover {
    position: absolute;
    left: 100%;
    top: 0;
    width: 280px;
    background: var(--aura-bg-2);
    border: 1px solid var(--aura-border);
    border-radius: 0 .65rem .65rem 0;
    border-left: none;
    box-shadow: 0 12px 24px rgba(0,0,0,.45), 0 0 28px rgba(139,92,246,.08);
    z-index: 40;
    display: none;
    margin-left: -1px;
}
.aura-rail-popover.open { display: block; }
.aura-rail-pop-header {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--aura-border);
    background: var(--aura-bg-3);
    font-family: var(--aura-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--aura-muted);
}
.aura-rail-pop-body {
    padding: .7rem .75rem;
    font-family: var(--aura-mono);
    font-size: .8rem;
}
.aura-rail-pop-hint {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--aura-border);
    font-size: .7rem;
    color: var(--aura-muted);
    line-height: 1.45;
}

.aura-radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: .35rem;
    cursor: pointer;
    transition: background .15s;
    color: var(--aura-text);
}
.aura-radio:hover { background: rgba(139,92,246,.06); }
.aura-radio input { margin: 0; accent-color: var(--aura-violet); }
.aura-radio .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.aura-radio .dot.violet { background: var(--aura-violet); box-shadow: 0 0 8px var(--aura-violet-glow); }
.aura-radio .dot.amber  { background: var(--aura-amber);  box-shadow: 0 0 8px var(--aura-amber-glow); }
.aura-radio .dot.muted  { background: var(--aura-muted); }
.aura-radio small { color: var(--aura-muted); margin-left: auto; font-size: .68rem; }
.aura-radio.disabled { opacity: .4; cursor: not-allowed; }

.aura-editor.hide-source .seg-source,
.aura-editor.hide-source .sub-source { display: none; }

#volSlider { accent-color: var(--aura-violet); }
.form-range::-webkit-slider-thumb { background: var(--aura-violet); }
.form-range::-moz-range-thumb { background: var(--aura-violet); }

.form-check-input:checked { background-color: var(--aura-violet); border-color: var(--aura-violet); }
.form-check-input:focus { border-color: var(--aura-violet); box-shadow: 0 0 0 .15rem rgba(139,92,246,.25); }

@media (max-width: 992px) {
    .aura-rail-popover { display: none !important; }
}

/* Fullscreen del stage (incluye overlay) */
#videoStage:fullscreen,
#videoStage:-webkit-full-screen {
    background: #000;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}
#videoStage:fullscreen video,
#videoStage:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#videoStage:fullscreen .aura-subtitle-overlay,
#videoStage:-webkit-full-screen .aura-subtitle-overlay {
    bottom: 8%;
    max-width: 70%;
}
#videoStage:fullscreen .aura-subtitle-overlay .sub-target,
#videoStage:-webkit-full-screen .aura-subtitle-overlay .sub-target {
    font-size: 1.5rem;
}
#videoStage:fullscreen .aura-subtitle-overlay .sub-source,
#videoStage:-webkit-full-screen .aura-subtitle-overlay .sub-source {
    font-size: 1.05rem;
}
/* Thumbnails de jobs en el dashboard */
.aura-job-thumb {
    width: 56px;
    height: 32px;
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--aura-border);
    flex: 0 0 auto;
    background: var(--aura-bg-3);
    display: block;
}

/* ─── Badge de saldo de creditos en navbar ─────────────────────────── */
.aura-saldo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--aura-border);
    background: rgba(255,255,255,0.03);
    color: var(--aura-text) !important;
    text-decoration: none !important;
    font-family: var(--aura-mono);
    font-size: .875rem;
    font-weight: 600;
    transition: all .2s ease;
    cursor: pointer;
    line-height: 1;
}
.aura-saldo-badge:hover {
    transform: translateY(-1px);
    border-color: var(--aura-violet);
    box-shadow: 0 0 14px var(--aura-violet-glow);
}
.aura-saldo-badge i.bi { font-size: 1rem; }
.aura-saldo-badge .aura-saldo-num { font-weight: 700; }
.aura-saldo-badge .aura-saldo-unit {
    color: var(--aura-muted);
    font-size: .75rem;
    font-weight: 500;
}

/* Estados de color del saldo */
.aura-saldo-badge.saldo-green {
    border-color: var(--aura-green);
    color: var(--aura-green) !important;
    background: rgba(16,185,129,0.08);
}
.aura-saldo-badge.saldo-green .aura-saldo-unit { color: rgba(16,185,129,.7); }

.aura-saldo-badge.saldo-amber {
    border-color: var(--aura-amber);
    color: var(--aura-amber) !important;
    background: rgba(245,158,11,0.08);
}
.aura-saldo-badge.saldo-amber .aura-saldo-unit { color: rgba(245,158,11,.75); }

.aura-saldo-badge.saldo-red {
    border-color: var(--aura-red);
    color: var(--aura-red) !important;
    background: rgba(239,68,68,0.10);
    animation: aura-saldo-pulse 2.5s ease-in-out infinite;
}
.aura-saldo-badge.saldo-red .aura-saldo-unit { color: rgba(239,68,68,.75); }

@keyframes aura-saldo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%      { box-shadow: 0 0 12px 2px rgba(239,68,68,0.3); }
}

/* ─── Tarjetas de plan (selector upload) ───────────────────────────── */
.aura-plan-card {
    border: 1px solid var(--aura-border);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    background: var(--aura-surface);
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}
.aura-plan-card:hover {
    border-color: var(--aura-violet);
    box-shadow: 0 0 16px var(--aura-violet-glow);
    transform: translateY(-2px);
}
.aura-plan-card.selected {
    border-color: var(--aura-violet);
    background: rgba(139,92,246,0.06);
    box-shadow: 0 0 20px var(--aura-violet-glow);
}
.aura-plan-card .plan-title {
    font-family: var(--aura-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--aura-text);
    margin-bottom: .25rem;
}
.aura-plan-card .plan-rate {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aura-violet-2);
    font-family: var(--aura-mono);
}
.aura-plan-card .plan-desc {
    font-size: .8rem;
    color: var(--aura-muted);
    margin-top: .35rem;
}

/* Coste estimado destacado */
.aura-coste-estimado {
    background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(245,158,11,0.08));
    border: 1px solid var(--aura-violet);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    text-align: center;
}
.aura-coste-estimado .label {
    font-family: var(--aura-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--aura-muted);
}
.aura-coste-estimado .valor {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--aura-violet-2);
    font-family: var(--aura-mono);
    line-height: 1.1;
    margin: .25rem 0;
}
.aura-coste-estimado .saldo-info {
    font-size: .85rem;
    color: var(--aura-muted);
}
.aura-coste-estimado.saldo-insuficiente {
    border-color: var(--aura-red);
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.05));
}
.aura-coste-estimado.saldo-insuficiente .valor { color: var(--aura-red); }

/* ─── Tarjeta "Próximamente" (Soon) ─────────────────────────────────── */
.aura-card-soon {
    position: relative;
    overflow: hidden;
    opacity: .75;
    filter: grayscale(.4);
    pointer-events: none;
}
.aura-soon-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: var(--aura-amber);
    color: #1a1a1a;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-family: var(--aura-mono);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    box-shadow: 0 0 12px var(--aura-amber-glow);
    z-index: 2;
    pointer-events: auto;
}