/* ==========================================================
   Video Studio IA — base stylesheet (no build step)
   ========================================================== */
:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --border: #e2e5ea;
    --text: #1d2330;
    --muted: #6b7384;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef0ff;
    --danger: #dc2626;
    --success: #16a34a;

    /* Pipeline state colours (spec: gris, amarillo, verde, rojo, naranja) */
    --st-pending: #9ca3af;
    --st-working: #eab308;
    --st-approved: #22c55e;
    --st-error: #ef4444;
    --st-outdated: #f97316;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1218;
        --surface: #171b23;
        --surface-2: #1f2430;
        --border: #2a303c;
        --text: #e6e9ef;
        --muted: #9aa3b2;
        --primary: #818cf8;
        --primary-hover: #a5b4fc;
        --primary-soft: #252a45;
        --shadow: none;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.05rem; max-width: 70ch; }
.mono { font-family: var(--mono); font-size: .9rem; }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: .8rem;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav-soon { padding: .5rem .75rem; border-radius: 8px; color: var(--text); }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-soon { color: var(--muted); opacity: .6; cursor: default; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 1rem; display: grid; gap: .5rem; }
.user-chip { display: grid; }
.user-chip small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.main { padding: 1.75rem 2rem 3rem; min-width: 0; max-width: 1280px; width: 100%; }

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .brand { margin: 0 1rem 0 0; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .nav-soon { display: none; }
    .sidebar-footer { margin: 0 0 0 auto; border: 0; padding: 0; }
    .user-chip { display: none; }
    .main { padding: 1.25rem 1rem 2rem; }
}

/* ---------- Layout helpers ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.breadcrumb { margin: 0 0 .25rem; font-size: .85rem; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.grid-2 .span-2 { grid-column: 1 / -1; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.grid-2 > .card + .card, .cards > .card + .card { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }
.placeholder { border-style: dashed; box-shadow: none; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.error-code { font-size: 3rem; font-weight: 800; color: var(--muted); margin: 0; }

.channel-card { color: var(--text); display: block; transition: border-color .15s; }
.channel-card:hover { border-color: var(--primary); text-decoration: none; }
.channel-card.is-archived { opacity: .65; }
.meta { display: flex; gap: .75rem; font-size: .85rem; color: var(--muted); align-items: center; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.stats .card + .card { margin-top: 0; }
.stat { display: grid; }
.stat-value { font-size: 1.8rem; font-weight: 700; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.list li > a { font-weight: 500; }
.list li > .badge, .list li > .pill { margin-left: auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form .card + .card { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: .3rem; }
.field > span { font-size: .85rem; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); font: inherit;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.field-error { color: var(--danger); font-size: .82rem; margin: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.filters { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filters .field { min-width: 180px; flex: 1; }

/* ---------- Tabs ---------- */
.tab-list { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.tab { background: none; border: 0; padding: .5rem .8rem; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ---------- Alerts, badges ---------- */
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.alert-success { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35); }
.alert-error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); }
.pill, .badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge { background: var(--primary-soft); color: var(--primary); }
.badge-draft, .badge-archived { background: var(--surface-2); color: var(--muted); }
.badge-completed { background: rgba(34, 197, 94, .15); color: var(--success); }

/* ---------- Table ---------- */
.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }

/* ---------- DNA & prompt ---------- */
.dna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.dna-section dl { margin: 0; display: grid; gap: .15rem; }
.dna-section dt { font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.dna-section dd { margin: 0; }
.prompt-box { white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: .75rem; font: .85rem/1.5 var(--mono); max-height: 320px; overflow: auto; margin: 0 0 .75rem; }
details summary { cursor: pointer; color: var(--primary); font-size: .9rem; }

/* ---------- Pipeline ---------- */
.pipeline-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: .85rem; }
.progress { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--st-approved); width: 0; }
.progress-10 { width: 10%; } .progress-20 { width: 20%; } .progress-30 { width: 30%; } .progress-40 { width: 40%; }
.progress-50 { width: 50%; } .progress-60 { width: 60%; } .progress-70 { width: 70%; } .progress-80 { width: 80%; }
.progress-90 { width: 90%; } .progress-100 { width: 100%; }

.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; counter-reset: stage; }
.stage {
    position: relative; display: grid; gap: .15rem; padding: .7rem .75rem; border-radius: 8px;
    background: var(--surface-2); border-top: 3px solid var(--st-pending); counter-increment: stage;
}
.stage-name::before { content: counter(stage) ". "; color: var(--muted); }
.stage-name { font-weight: 600; font-size: .9rem; }
.stage-status { font-size: .75rem; color: var(--muted); }
.stage-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st-pending); }
.stage .stage-dot { position: absolute; top: .6rem; right: .6rem; }
.stage-pending { border-top-color: var(--st-pending); } .stage-pending .stage-dot, .stage-dot.stage-pending { background: var(--st-pending); }
.stage-working { border-top-color: var(--st-working); } .stage-working .stage-dot, .stage-dot.stage-working { background: var(--st-working); }
.stage-approved { border-top-color: var(--st-approved); } .stage-approved .stage-dot, .stage-dot.stage-approved { background: var(--st-approved); }
.stage-error { border-top-color: var(--st-error); } .stage-error .stage-dot, .stage-dot.stage-error { background: var(--st-error); }
.stage-outdated { border-top-color: var(--st-outdated); } .stage-outdated .stage-dot, .stage-dot.stage-outdated { background: var(--st-outdated); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 1rem 0 0; font-size: .8rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .35rem; }

.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.timeline-list li { display: grid; padding-left: .9rem; border-left: 2px solid var(--border); }

/* ---------- Integrations & settings ---------- */
code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.field small { font-size: .8rem; }
.card-foot { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.card-foot form { margin: 0; }
.provider-card .card-head { align-items: flex-start; flex-wrap: wrap; }
.provider-card .table-wrap { border: 1px solid var(--border); border-radius: 8px; }
.row-muted td { opacity: .55; }
.row-actions { text-align: right; }
.badge-error { background: rgba(239, 68, 68, .15); color: var(--danger); }
.key-none { background: rgba(249, 115, 22, .15); color: var(--st-outdated); }
.key-database, .key-env { background: rgba(34, 197, 94, .15); color: var(--success); }
.btn-danger { color: var(--danger); margin-right: auto; }
.test-result { margin: .75rem 0 0; font-size: .9rem; }
.budget-card.is-warning .progress-bar { background: var(--st-working); }
.budget-card.is-blocked .progress-bar { background: var(--st-error); }
.budget-card .progress { margin-top: .25rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.dropdown { position: relative; }
.dropdown summary { list-style: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: .35rem;
    display: grid;
}
.dropdown-menu a { padding: .45rem .6rem; border-radius: 6px; color: var(--text); }
.dropdown-menu a:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Ideas / radar ---------- */
.idea-card { display: flex; flex-direction: column; gap: .5rem; }
.idea-card h3 { margin: 0; }
.idea-selected { border-color: var(--st-approved); box-shadow: 0 0 0 1px var(--st-approved); }
.idea-discarded { opacity: .55; }
.idea-hook { font-style: italic; color: var(--text); margin: 0; }
.score-list { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 0; font-size: .8rem; }
.idea-card .card-foot { margin-top: auto; display: flex; gap: .5rem; }
.idea-card details summary { font-size: .85rem; }
.idea-card form { margin: 0; }
.manual-idea { margin-top: 1rem; }
.cost-hint { font-weight: 400; opacity: .85; }

/* ---------- Prompts ---------- */
.var-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 420px; overflow: auto; }
.var-list li { display: flex; align-items: baseline; gap: .5rem; }
.var-chip {
    font: .8rem/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
    padding: .1rem .4rem; cursor: pointer; color: var(--primary); white-space: nowrap;
}
.var-chip:hover { background: var(--primary-soft); }
.inline-form { display: inline-block; margin: 0 .25rem; }
.diff { font: .85rem/1.5 var(--mono); background: var(--surface-2); border-radius: 8px; padding: .75rem; overflow: auto; max-height: 420px; white-space: pre-wrap; }
.diff-add { display: block; background: rgba(34, 197, 94, .15); }
.diff-del { display: block; background: rgba(239, 68, 68, .15); }
.diff-same { display: block; color: var(--muted); }

/* ---------- Jobs ---------- */
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 1rem; }
@media (max-width: 860px) { .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-link { color: var(--text); }
.stat-link:hover { border-color: var(--primary); text-decoration: none; }
.stat-link.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.job-pending { color: var(--st-pending); }
.job-processing { color: var(--st-working); }
.job-completed { color: var(--st-approved); }
.job-failed { color: var(--st-error); }
.job-cancelled { color: var(--muted); }
.job-badge-pending { background: var(--surface-2); color: var(--muted); }
.job-badge-processing { background: rgba(234, 179, 8, .18); color: #a16207; }
.job-badge-completed { background: rgba(34, 197, 94, .15); color: var(--success); }
.job-badge-failed { background: rgba(239, 68, 68, .15); color: var(--danger); }
.job-badge-cancelled { background: var(--surface-2); color: var(--muted); }
.cell-error { color: var(--danger); white-space: normal; max-width: 280px; }
.dropdown-menu form { margin: 0; }
.dropdown-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: var(--text); padding: .45rem .6rem; border-radius: 6px; cursor: pointer; }
.dropdown-item:hover { background: var(--surface-2); }

/* ---------- Guest / login ---------- */
.guest-main { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-head { text-align: center; margin-bottom: 1.25rem; }
.auth-head .brand-mark { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: .5rem; }

/* ---------- Concept ---------- */
.idea-summary { border-left: 3px solid var(--primary); }
.link-btn { background: none; border: 0; padding: 0 0 0 .4rem; font: inherit; font-size: .75rem; font-weight: 400; color: var(--primary); cursor: pointer; text-decoration: underline; }
.proposal-card { border-color: var(--primary); }
.proposal-card .form-actions { margin-top: .75rem; }

/* ---------- Script editor ---------- */
.block-card { border: 1px solid var(--border); border-radius: 8px; padding: .75rem; margin-bottom: .75rem; background: var(--surface); }
.block-card.is-locked { border-color: var(--st-working); background: rgba(234, 179, 8, .05); }
.block-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.block-number { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: .8rem; font-weight: 600; }
.block-type { width: auto; min-width: 140px; }
.block-lock { font-size: .8rem; white-space: nowrap; }
.block-stats { margin-left: auto; }
.block-actions { display: flex; gap: .15rem; }
.block-card textarea { font-size: .95rem; }

/* ---------- Script audit ---------- */
.score-hero { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.score-big { font-size: 3rem; font-weight: 800; line-height: 1; }
.score-big.is-pass { color: var(--success); }
.score-big.is-fail { color: var(--danger); }
.criteria-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.criteria-list li { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: .6rem; font-size: .9rem; }
.criteria-bar { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.criteria-fill { display: block; height: 100%; background: var(--primary); width: 0; }
.score-10 { width: 10%; } .score-20 { width: 20%; } .score-30 { width: 30%; } .score-40 { width: 40%; }
.score-50 { width: 50%; } .score-60 { width: 60%; } .score-70 { width: 70%; } .score-80 { width: 80%; }
.score-90 { width: 90%; } .score-100 { width: 100%; }
.finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.finding { border-left: 3px solid var(--border); padding: .5rem .75rem; background: var(--surface-2); border-radius: 0 8px 8px 0; }
.finding.sev-high { border-left-color: var(--st-error); }
.finding.sev-medium { border-left-color: var(--st-working); }
.finding.sev-low { border-left-color: var(--st-pending); }
.finding p { margin: .25rem 0; }
.finding-head { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.sev-badge-high { background: rgba(239, 68, 68, .15); color: var(--danger); }
.sev-badge-medium { background: rgba(234, 179, 8, .18); color: #a16207; }
.sev-badge-low { background: var(--surface-2); color: var(--muted); }

/* ---------- Dependencies / outdated ---------- */
.badge-outdated { background: rgba(249, 115, 22, .18); color: var(--st-outdated); }
.outdated-panel { border-left: 3px solid var(--st-outdated); }
.alert-impact { background: rgba(249, 115, 22, .1); border-color: rgba(249, 115, 22, .35); }
.block-card .badge-outdated { font-size: .7rem; }

/* Voice: per-block pause */
input[type=number].input-gap { width: 7em; }

/* Scenes */
.scene-list { display: grid; gap: .75rem; margin-bottom: 1rem; }
.scene-card { border: 1px solid var(--border, #e5e7eb); border-radius: .5rem; padding: .75rem; display: grid; gap: .5rem; }
.scene-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.scene-head .block-actions { margin-left: auto; }
.scene-card textarea { width: 100%; }
.scene-head select { width: auto; }

/* Characters */
.checkerboard {
    background-color: #fff;
    background-image: linear-gradient(45deg, #d9dce1 25%, transparent 25%), linear-gradient(-45deg, #d9dce1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d9dce1 75%), linear-gradient(-45deg, transparent 75%, #d9dce1 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.character-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.character-card { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.character-thumb, .character-frame { aspect-ratio: 1 / 1; border-radius: .5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.character-thumb img, .character-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.reference-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.reference-pair figure, .variant { margin: 0; }
.variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.variant figcaption { display: grid; gap: .25rem; margin-top: .5rem; }
.variant.is-reference .character-frame { outline: 3px solid var(--primary); }
.chroma-form input[type=range] { width: 100%; }
@media (max-width: 640px) {
    .variant-grid, .reference-pair { grid-template-columns: 1fr; }
}

/* Backgrounds */
.background-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.background-card { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; align-content: start; min-width: 0; }
.background-card .inline-form { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.background-card input[type=file] { min-width: 0; max-width: 100%; }
/* The frame never grows with its image: with an automatic minimum size, a tall picture (9:16 is
   1376 px high) stretched the frame and, through aspect-ratio, its width over the next card. */
.background-frame { aspect-ratio: 16 / 9; min-width: 0; min-height: 0; background: var(--border); border-radius: .375rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.background-frame.is-portrait { aspect-ratio: 9 / 16; height: 320px; justify-self: center; }
.background-frame.is-square { aspect-ratio: 1 / 1; height: 240px; justify-self: center; }
.background-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* Provider errors carry long URLs: wrap them inside the card instead of overflowing it. */
.background-card .alert { min-width: 0; overflow-wrap: anywhere; }
.frame-buttons { gap: .25rem; }
.pexels-panel { border-top: 1px dashed var(--border); padding-top: .5rem; display: grid; gap: .5rem; }
.pexels-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.pexels-result { padding: 0; border: 2px solid transparent; border-radius: .25rem; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.pexels-result:hover, .pexels-result:focus-visible { border-color: var(--primary); }
.pexels-result img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Montage screen: stacked form fields inside a scene card */
.stack { display: grid; gap: .5rem; }
.stack select, .stack input[type=text] { width: 100%; }

/* Motion screen: the preview runs on hover/focus, CSS only, no JavaScript. */
.motion-card { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; display: grid; gap: .5rem; align-content: start; }
.motion-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: .375rem; background: #111; display: flex; align-items: center; justify-content: center; }
.motion-image { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--from-scale)) translate(var(--from-x), var(--from-y)); }
/* Library preview: no project image applies here, so a gradient stands in for one. */
.motion-image-placeholder { background: linear-gradient(135deg, #2a3550, #6a3f8f); }

.motion-card:hover .motion-image,
.motion-card:focus-within .motion-image {
    animation: motion-run var(--dur) var(--timing) forwards;
}

@keyframes motion-run {
    from { transform: scale(var(--from-scale)) translate(var(--from-x), var(--from-y)); }
    to   { transform: scale(var(--to-scale)) translate(var(--to-x), var(--to-y)); }
}

@media (prefers-reduced-motion: reduce) {
    .motion-card:hover .motion-image,
    .motion-card:focus-within .motion-image { animation: none; }
}

/* Playback screen: the full run-through, chained purely with animation-delay, no JavaScript. */
.playback { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: .5rem; }
.playback-scene { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden;
    animation: playback-show var(--dur) var(--delay) forwards; }
.playback-scene > img { width: 100%; height: 100%; object-fit: cover;
    transform: scale(var(--from-scale)) translate(var(--from-x), var(--from-y));
    animation: motion-run var(--dur) var(--timing) var(--delay) forwards; }

@keyframes playback-show { from { opacity: 1; } to { opacity: 1; } }

.playback-audio { display: grid; gap: .5rem; margin-top: 1rem; }
.playback-audio audio { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .playback-scene, .playback-scene > img { animation: none; opacity: 1; }
}

/* Render screen */
.render-video { display: block; width: 100%; max-width: 960px; margin: .75rem 0; background: #000; border-radius: 8px; }

/* AV audit */
.finding-list { list-style: none; padding: 0; margin: 0; }
.finding-list li { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.measure-card h3 { margin: .8rem 0 .3rem; font-size: 1rem; }

/* Character layer (phase 12): positioned and animated by the project's motion stylesheet. */
.motion-frame.is-portrait { aspect-ratio: 9 / 16; height: 320px; justify-self: center; }
.motion-frame.is-square { aspect-ratio: 1 / 1; height: 240px; justify-self: center; }
.playback.is-portrait { aspect-ratio: 9 / 16; max-height: 80vh; margin: 0 auto; }
.playback.is-square { aspect-ratio: 1 / 1; max-height: 80vh; margin: 0 auto; }
/* Background looks (Fase 14): the filter on the image, tint and vignette fixed on the frame, the character above. */
.motion-bg { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.motion-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.look-figure { left: 35%; top: 20%; width: 30%; height: 80%; }
.look-figure img { left: 0; top: 0; width: 100%; height: 100%; }
.motion-figure { position: absolute; overflow: hidden; pointer-events: none; transform-origin: 50% 100%; animation-duration: var(--fig-dur); animation-timing-function: linear, ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-play-state: paused; }
.motion-figure img { position: absolute; max-width: none; transform-origin: 50% 100%; animation-duration: var(--idle-dur, 1s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: paused; }
.motion-card:hover .motion-figure, .motion-card:focus-within .motion-figure { animation-iteration-count: infinite, infinite; animation-play-state: running; }
.motion-card:hover .motion-figure img, .motion-card:focus-within .motion-figure img { animation-play-state: running; }
.playback-scene .motion-figure { animation-delay: var(--delay); animation-fill-mode: both; animation-play-state: running; }
.playback-scene .motion-figure img { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .motion-figure, .motion-figure img { animation: none; } }

/* Fase 22: thumbnails of Publicar */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.thumb-card img { width: 100%; height: auto; display: block; border-radius: 6px; }
.thumb-chosen { outline: 3px solid var(--color-primary, #2563eb); }

/* Fase 19: narration script to copy */
.narration-text { width: 100%; font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Fase 24: cutout editor of a pose (large dialog) */
.chroma-dialog { width: min(1400px, 96vw); max-width: 96vw; height: min(920px, 94vh); padding: 0; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface, #fff); color: inherit; }
.chroma-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.chroma-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.chroma-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.chroma-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: .9rem; padding: .9rem; min-height: 0; }
.chroma-controls { display: grid; gap: .6rem; align-content: start; overflow: auto; }
.chroma-controls label { display: grid; gap: .2rem; }
.chroma-controls label.check { display: flex; align-items: flex-start; gap: .45rem; }
.chroma-controls label > span { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.chroma-controls input.chroma-number { width: 4.5rem; min-width: 0; flex: none; padding: .1rem .3rem; }
.chroma-controls label.check input { margin-top: .15rem; flex: none; }
.pose-chroma-preview { position: relative; border-radius: .4rem; min-height: 0; display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center; }
.pose-chroma-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pose-chroma-preview.real-size { overflow: auto; place-items: start; }
.pose-chroma-preview.real-size img { max-width: none; max-height: none; }
.pose-chroma-preview [data-pose-loading] { position: absolute; top: .5rem; left: .5rem; background: rgba(0, 0, 0, .6); color: #fff; padding: .15rem .5rem; border-radius: .3rem; }
.pose-chroma-preview.bd-gris { background-color: #808080; }
.pose-chroma-preview.bd-negro { background-color: #000; }
.pose-chroma-preview.bd-blanco { background-color: #fff; }
.pose-chroma-preview.bd-escena { background-color: #333; }
@media (max-width: 800px) {
    .chroma-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; overflow: auto; }
}

/* Permanent deletion: same look as the other actions, in red. */
.btn-delete { color: var(--danger); }

/* Bulk delete: a bar above the list and a checkbox per row or card. */
.bulk-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.bulk-check { width: 2rem; }
.bulk-card { position: relative; }
.bulk-card > .channel-card { height: 100%; padding-left: 2.5rem; }
.bulk-card-check { position: absolute; top: 1.1rem; left: 1rem; z-index: 1; }

/* Installer and updates (Fase 29) */
.install-card { width: 100%; max-width: 640px; }
.install-steps { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.install-steps li { font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.install-steps li.current { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.install-steps li.done { color: var(--success); }
.req-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.req-list li { display: flex; gap: .6rem; align-items: baseline; }
.req-ok { color: var(--success); }
.req-fail { color: var(--danger); }
.req-warn { color: var(--st-outdated); }
.env-box, .log-box { width: 100%; min-height: 14rem; font-family: var(--mono); font-size: .8rem; }
.log-box { min-height: 8rem; white-space: pre-wrap; background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow: auto; max-height: 16rem; }
.batch-progress { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; }
.changelog { white-space: pre-wrap; background: var(--surface-2); padding: .75rem 1rem; border-radius: 8px; max-height: 22rem; overflow: auto; font-size: .85rem; }
.card-pad { padding: 1rem 1.25rem; }