:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #08111f;
    color: #eaf4ff;
    --bg: #08111f;
    --panel: rgba(13, 25, 43, .78);
    --panel-strong: rgba(16, 31, 54, .94);
    --line: rgba(159, 207, 255, .18);
    --line-strong: rgba(103, 247, 223, .45);
    --text: #eaf4ff;
    --muted: #9fb0c7;
    --accent: #67f7df;
    --accent-2: #7aa7ff;
    --success: #4ff29a;
    --danger: #ff6b8b;
    --warning: #ffd166;
    --shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background:
        radial-gradient(circle at top left, rgba(103, 247, 223, .20), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(122, 167, 255, .18), transparent 34rem),
        linear-gradient(135deg, #08111f 0%, #0a1323 45%, #050a13 100%);
}

button, select, input {
    font: inherit;
}

code {
    color: var(--accent);
    background: rgba(103, 247, 223, .08);
    border: 1px solid rgba(103, 247, 223, .18);
    border-radius: .45rem;
    padding: .1rem .35rem;
}

.boot-screen {
    height: 100vh;
    display: grid;
    place-items: center;
    grid-auto-flow: column;
    gap: 1rem;
    color: var(--text);
}

.boot-screen span {
    display: block;
    color: var(--muted);
    font-size: .92rem;
    margin-top: .25rem;
}

.boot-logo {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(103, 247, 223, .9), rgba(122, 167, 255, .72));
    box-shadow: 0 0 42px rgba(103, 247, 223, .26);
}

.app-shell {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: clamp(.75rem, 1.5vw, 1.35rem);
    display: grid;
    grid-template-rows: minmax(7.6rem, auto) minmax(0, 1fr) minmax(4.7rem, auto);
    gap: clamp(.7rem, 1.25vw, 1rem);
}

.glass-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.hero-card {
    padding: clamp(1rem, 1.8vw, 1.45rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    min-height: 0;
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: -.05em;
    color: #06101e;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 42px rgba(103, 247, 223, .22);
    flex: 0 0 auto;
}

h1, h2, p {
    margin: 0;
}

h1 {
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

h2 {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    letter-spacing: -.02em;
}

.hero-left p {
    color: var(--muted);
    margin-top: .35rem;
}

.status-strip {
    margin-top: 1rem;
    min-height: 3.2rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    border-radius: 1rem;
    padding: .7rem .85rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.status-strip strong,
.status-strip span:not(.status-dot) {
    display: block;
}

.status-strip span:not(.status-dot) {
    color: var(--muted);
    font-size: .88rem;
    margin-top: .1rem;
}

.status-dot {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: var(--warning);
    box-shadow: 0 0 0 .38rem rgba(255, 209, 102, .12);
    flex: 0 0 auto;
}

.status-strip.ready .status-dot { background: var(--accent); box-shadow: 0 0 0 .38rem rgba(103, 247, 223, .12); }
.status-strip.working .status-dot { background: var(--accent-2); box-shadow: 0 0 0 .38rem rgba(122, 167, 255, .13); }
.status-strip.success .status-dot { background: var(--success); box-shadow: 0 0 0 .38rem rgba(79, 242, 154, .13); }
.status-strip.error .status-dot { background: var(--danger); box-shadow: 0 0 0 .38rem rgba(255, 107, 139, .13); }

.hero-right {
    display: grid;
    grid-template-columns: repeat(3, minmax(8.25rem, 1fr));
    gap: .75rem;
    align-self: stretch;
}

.metric-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.metric-card span {
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.metric-card strong {
    margin-top: .35rem;
    font-size: 1rem;
}

.workspace-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(22rem, .82fr) minmax(0, 1.18fr);
    gap: clamp(.7rem, 1.25vw, 1rem);
}

.control-panel,
.process-panel {
    min-height: 0;
    padding: clamp(.95rem, 1.45vw, 1.25rem);
}

.control-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.section-title {
    margin-bottom: .9rem;
}

.inline-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.eyebrow {
    color: var(--accent);
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: .25rem;
    font-weight: 800;
}

.form-stack {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.field-label {
    color: #cfe1f7;
    font-weight: 700;
    font-size: .86rem;
}

.field {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(4, 11, 22, .76);
    color: var(--text);
    min-height: 2.8rem;
    border-radius: .85rem;
    padding: 0 .85rem;
    outline: none;
}

.field:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 .25rem rgba(103, 247, 223, .08);
}

.file-field {
    padding: .72rem .85rem;
}

.hint {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.35;
}

.button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.btn {
    border: 0;
    border-radius: .85rem;
    min-height: 2.7rem;
    padding: 0 .9rem;
    color: #06101e;
    font-weight: 850;
    cursor: pointer;
    transition: transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn.primary { background: linear-gradient(135deg, var(--accent), #52d7ff); }
.btn.success { background: linear-gradient(135deg, var(--success), #88ffcf); }
.btn.danger { background: linear-gradient(135deg, var(--danger), #ff9e7a); }
.btn.secondary,
.btn.ghost,
.btn.tiny {
    color: var(--text);
    background: rgba(255, 255, 255, .055);
    border: 1px solid var(--line);
}
.btn.ghost { color: #d4e2ff; }
.btn.tiny {
    min-height: 2.15rem;
    padding: 0 .75rem;
    font-size: .83rem;
}

.process-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.progress-wrap {
    background: rgba(4, 11, 22, .54);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .8rem;
    margin-bottom: .75rem;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: .55rem;
}

.progress-meta strong {
    color: var(--text);
}

.progress-track {
    height: .7rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 28px rgba(103, 247, 223, .18);
    transition: width .18s ease;
}

.log-console {
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(159, 207, 255, .14);
    border-radius: 1rem;
    background: rgba(2, 7, 15, .82);
    padding: .85rem;
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    scrollbar-color: rgba(103, 247, 223, .45) transparent;
}

.log-line {
    display: grid;
    grid-template-columns: 4.8rem minmax(0, 1fr);
    gap: .7rem;
    color: #d9e8fa;
    overflow-wrap: anywhere;
}

.log-line span {
    color: #70829f;
}

.log-line.info { color: #d9e8fa; }
.log-line.warn { color: var(--warning); }
.log-line.error { color: var(--danger); }
.log-line.muted { color: #73849e; display: block; }

.footer-card {
    min-height: 0;
    padding: .85rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
}

.footer-card strong,
.footer-card span {
    display: block;
}

.footer-card strong {
    color: var(--accent);
    font-size: .86rem;
}

.footer-card span {
    color: var(--muted);
    font-size: .88rem;
    margin-top: .1rem;
}

.not-found-card {
    place-self: center;
    padding: 2rem;
}

.not-found-card a {
    color: var(--accent);
}

@media (max-width: 1050px) {
    .app-shell {
        overflow: auto;
        height: auto;
        min-height: 100vh;
        grid-template-rows: auto auto auto;
    }

    .hero-card,
    .workspace-grid,
    .footer-card {
        grid-template-columns: 1fr;
    }

    .hero-right {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html, body {
        overflow: auto;
    }
}

@media (max-width: 680px) {
    .button-row,
    .hero-right {
        grid-template-columns: 1fr;
    }

    .brand-row {
        align-items: flex-start;
    }
}

.left-stack {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(.7rem, 1.25vw, 1rem);
}

.compact-panel {
    overflow: hidden;
}

.compact-panel .section-title {
    margin-bottom: .65rem;
}

.compact-form {
    gap: .48rem;
}

.compact-form .field {
    min-height: 2.35rem;
    border-radius: .72rem;
}

.compact-form .file-field {
    padding: .54rem .75rem;
}

.compact-form .hint {
    font-size: .78rem;
}

.btn.full {
    width: 100%;
}

@media (max-height: 820px) and (min-width: 1051px) {
    .app-shell {
        grid-template-rows: minmax(6.6rem, auto) minmax(0, 1fr) minmax(3.7rem, auto);
        gap: .65rem;
        padding: .7rem;
    }

    .hero-card {
        padding: .85rem;
    }

    .brand-mark {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: .8rem;
    }

    .status-strip {
        margin-top: .55rem;
        min-height: 2.65rem;
        padding: .5rem .7rem;
    }

    .control-panel,
    .process-panel {
        padding: .8rem;
    }

    .footer-card {
        padding: .65rem .85rem;
    }

    .field-label,
    .hint,
    .footer-card span,
    .status-strip span:not(.status-dot) {
        font-size: .76rem;
    }

    .btn {
        min-height: 2.28rem;
    }
}

/* v3 responsive no-scroll refinements */
.app-shell {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(.55rem, 1vw, .85rem);
}

.hero-card {
    padding: clamp(.75rem, 1.25vw, 1rem);
    align-items: center;
}

.hero-left p {
    font-size: clamp(.78rem, .95vw, .92rem);
    line-height: 1.25;
}

.status-strip {
    margin-top: .62rem;
    min-height: 2.6rem;
    padding: .52rem .7rem;
}

.status-strip span:not(.status-dot) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(52vw, 46rem);
}

.metric-card {
    padding: .65rem .75rem;
}

.workspace-grid {
    min-height: 0;
    grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr);
}

.left-stack {
    min-height: 0;
    grid-template-rows: minmax(0, .96fr) minmax(0, 1.04fr);
}

.control-panel,
.process-panel {
    padding: clamp(.62rem, 1vw, .9rem);
}

.section-title {
    margin-bottom: .48rem;
}

.eyebrow {
    font-size: .64rem;
    margin-bottom: .16rem;
}

h2 {
    font-size: clamp(.88rem, 1.05vw, 1.05rem);
}

.compact-form {
    gap: .34rem;
}

.field-label {
    font-size: .76rem;
}

.compact-form .field,
.field {
    min-height: 2.05rem;
    border-radius: .65rem;
    padding-left: .68rem;
    padding-right: .68rem;
    font-size: .84rem;
}

.compact-form .file-field,
.file-field {
    min-height: 2.05rem;
    padding: .42rem .62rem;
}

.compact-form .hint {
    font-size: .7rem;
    line-height: 1.18;
}

.flash-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    margin-top: .1rem;
}

.btn {
    min-height: 2.12rem;
    padding: 0 .62rem;
    border-radius: .68rem;
    font-size: .82rem;
}

.btn.full {
    min-height: 2.18rem;
}

.progress-wrap {
    padding: .58rem;
    margin-bottom: .55rem;
    border-radius: .8rem;
}

.progress-meta {
    font-size: .78rem;
    margin-bottom: .42rem;
}

.progress-track {
    height: .48rem;
}

.log-console {
    padding: .65rem;
    border-radius: .8rem;
    font-size: .76rem;
    line-height: 1.38;
}

.log-line {
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: .45rem;
}

@media (max-height: 760px) and (min-width: 1051px) {
    .brand-mark { width: 2.35rem; height: 2.35rem; border-radius: .7rem; }
    h1 { font-size: clamp(1.08rem, 1.65vw, 1.55rem); }
    .hero-left p { display: none; }
    .status-strip { margin-top: .42rem; min-height: 2.2rem; padding: .4rem .62rem; }
    .status-strip span:not(.status-dot) { font-size: .7rem; }
    .hero-right { grid-template-columns: repeat(3, minmax(6.4rem, 1fr)); gap: .45rem; }
    .metric-card { padding: .45rem .55rem; border-radius: .75rem; }
    .metric-card span { font-size: .62rem; }
    .metric-card strong { font-size: .8rem; margin-top: .12rem; }
    .app-shell { padding: .52rem; gap: .5rem; }
    .workspace-grid, .left-stack { gap: .5rem; }
    .control-panel, .process-panel { padding: .58rem; border-radius: 1rem; }
    .section-title { margin-bottom: .35rem; }
    .compact-form { gap: .25rem; }
    .compact-form .field, .field { min-height: 1.82rem; font-size: .76rem; }
    .compact-form .file-field, .file-field { min-height: 1.82rem; padding: .32rem .5rem; }
    .compact-form .hint { display: none; }
    .btn { min-height: 1.86rem; font-size: .74rem; }
    .flash-actions { gap: .32rem; }
    .progress-wrap { padding: .46rem; margin-bottom: .42rem; }
    .log-console { font-size: .7rem; padding: .5rem; }
}

@media (max-width: 1050px) {
    .app-shell {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr);
    }

    html, body {
        overflow: hidden;
    }

    .hero-card {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }

    .workspace-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .left-stack {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    .status-strip span:not(.status-dot) {
        max-width: 80vw;
    }
}

@media (max-width: 760px) {
    .app-shell {
        padding: .45rem;
        gap: .45rem;
    }

    .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
    }

    h1 { font-size: 1.05rem; }
    .hero-left p { display: none; }

    .workspace-grid {
        grid-template-rows: minmax(0, 1.05fr) minmax(0, .95fr);
    }

    .left-stack {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .flash-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .button-row,
    .hero-right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v4: compiler moved to its own route/window and flasher page optimized for no global scroll */
.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.inline-actions {
    display: flex;
    gap: .45rem;
    align-items: center;
}

.compact-hero-actions {
    grid-template-columns: minmax(9rem, .9fr) repeat(2, minmax(7.5rem, 1fr));
    align-items: stretch;
}

.flasher-shell,
.compile-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
}

.flash-only-grid,
.compile-grid {
    min-height: 0;
    grid-template-columns: minmax(18rem, .62fr) minmax(0, 1.38fr);
}

.flash-panel,
.compile-panel {
    min-height: 0;
    overflow: hidden;
}

.flash-form-v4 {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto auto minmax(0, auto);
}

.firmware-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    padding: .58rem .65rem;
    border: 1px solid var(--line);
    border-radius: .78rem;
    background: rgba(255, 255, 255, .045);
    min-width: 0;
}

.firmware-summary span,
.firmware-summary strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.firmware-summary span {
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.firmware-summary strong {
    margin-top: .12rem;
    color: var(--text);
    font-size: .82rem;
}

.flash-actions-v4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.compact-note {
    margin: 0;
}

.compile-actions-v4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    margin-top: .2rem;
}

@media (min-width: 1200px) {
    .flash-actions-v4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 760px) and (min-width: 1051px) {
    .flash-only-grid,
    .compile-grid {
        grid-template-columns: minmax(17rem, .58fr) minmax(0, 1.42fr);
    }

    .firmware-summary {
        padding: .42rem .5rem;
        border-radius: .62rem;
    }

    .firmware-summary span {
        font-size: .58rem;
    }

    .firmware-summary strong {
        font-size: .72rem;
    }

    .compact-note {
        display: none;
    }
}

@media (max-width: 1050px) {
    .flash-only-grid,
    .compile-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, .78fr) minmax(0, 1.22fr);
    }

    .compact-hero-actions {
        display: none;
    }
}

@media (max-width: 760px) {
    .flash-only-grid,
    .compile-grid {
        grid-template-rows: minmax(0, .86fr) minmax(0, 1.14fr);
    }

    .flash-actions-v4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compile-actions-v4 {
        grid-template-columns: 1fr;
    }
}

/* v5: firmware history selector and remembered last firmware */
.firmware-history-summary {
    grid-template-columns: minmax(0, 1fr) auto;
}

.firmware-mini-actions {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: .35rem;
    align-items: center;
}

.danger-soft {
    color: #fecaca;
    border-color: rgba(248, 113, 113, .35);
    background: rgba(248, 113, 113, .10);
}

.danger-soft:hover:not(:disabled) {
    border-color: rgba(248, 113, 113, .7);
    background: rgba(248, 113, 113, .18);
}

@media (max-height: 760px) and (min-width: 1051px) {
    .firmware-mini-actions {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .firmware-mini-actions .btn.tiny {
        min-height: 1.65rem;
        padding-block: .22rem;
    }
}

@media (max-width: 520px) {
    .firmware-history-summary {
        grid-template-columns: 1fr;
    }

    .firmware-mini-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v8: flasher-only catalog, external HEX priority and automatic detection */
.flash-actions-v8 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr);
    gap: .45rem;
}

.external-summary {
    border-color: rgba(255, 209, 102, .22);
}

.external-summary.active {
    border-color: rgba(255, 209, 102, .5);
    background: rgba(255, 209, 102, .075);
}

@media (max-height: 760px) and (min-width: 1051px) {
    .flash-actions-v8 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .32rem;
    }
}

@media (max-width: 760px) {
    .flash-actions-v8 {
        grid-template-columns: 1fr;
    }
}

/* v9: cabecera estable y grabador genérico */
.flasher-shell .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(31rem, 31rem);
    min-height: 7.25rem;
    max-height: 7.25rem;
    overflow: hidden;
}

.flasher-shell .hero-right {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.flasher-shell .metric-card,
.flasher-shell .compact-hero-actions .btn {
    height: 4.15rem;
    min-height: 4.15rem;
    max-height: 4.15rem;
}

.flasher-shell .metric-card strong,
.flasher-shell .metric-card span,
.flasher-shell .status-strip strong,
.flasher-shell .status-strip span:not(.status-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flasher-shell .status-strip {
    min-height: 2.85rem;
    max-height: 2.85rem;
}

.flasher-shell .brand-row {
    min-width: 0;
}

.flasher-shell .brand-row > div:last-child {
    min-width: 0;
}

.flasher-shell .brand-row p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.flasher-shell .firmware-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 1220px) {
    .flasher-shell .hero-card {
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
        min-height: 0;
    }

    .flasher-shell .hero-right {
        display: none;
    }
}

@media (max-height: 760px) and (min-width: 1221px) {
    .flasher-shell .hero-card {
        min-height: 6.35rem;
        max-height: 6.35rem;
    }

    .flasher-shell .metric-card,
    .flasher-shell .compact-hero-actions .btn {
        height: 3.5rem;
        min-height: 3.5rem;
        max-height: 3.5rem;
    }

    .flasher-shell .status-strip {
        margin-top: .45rem;
        min-height: 2.45rem;
        max-height: 2.45rem;
    }
}

/* v10 route/loading and compiler connectivity refinements */
.route-state-shell {
    height: 100dvh;
    width: 100vw;
    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
}

.route-state-card {
    width: min(34rem, calc(100vw - 2rem));
    min-height: 10rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.route-state-card p {
    color: var(--muted);
    margin: .35rem 0 1rem;
}

.route-spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: .28rem solid rgba(255,255,255,.12);
    border-top-color: var(--accent);
    animation: route-spin .9s linear infinite;
    flex: 0 0 auto;
}

@keyframes route-spin {
    to { transform: rotate(360deg); }
}

.inline-field-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
}

.stable-metric strong,
.metric-card strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compile-shell .hero-card,
.flasher-shell .hero-card {
    min-height: 7.15rem;
    max-height: 7.15rem;
    overflow: hidden;
}

.compile-shell .status-strip,
.flasher-shell .status-strip {
    max-width: 100%;
}

@media (max-height: 820px) and (min-width: 1051px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: 6.35rem;
        max-height: 6.35rem;
    }
}

@media (max-width: 680px) {
    .inline-field-actions {
        grid-template-columns: 1fr;
    }

    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: unset;
        max-height: unset;
    }
}


/* v11: cabecera del grabador igualada al compilador y algo más amplia */
.compile-shell .hero-card,
.flasher-shell .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(36rem, 36rem);
    min-height: 7.45rem;
    max-height: 7.45rem;
    overflow: hidden;
}

.compile-shell .hero-right,
.flasher-shell .hero-right,
.compile-shell .compact-hero-actions,
.flasher-shell .compact-hero-actions {
    display: grid;
    grid-template-columns: minmax(10.5rem, 1fr) minmax(11rem, 1fr) minmax(11rem, 1fr);
    gap: .82rem;
    align-items: stretch;
    min-width: 0;
}

.compile-shell .compact-hero-actions .btn,
.flasher-shell .compact-hero-actions .btn,
.compile-shell .metric-card,
.flasher-shell .metric-card {
    height: 4.35rem;
    min-height: 4.35rem;
    max-height: 4.35rem;
    border-radius: 1.08rem;
}

.compile-shell .compact-hero-actions .btn,
.flasher-shell .compact-hero-actions .btn {
    padding-inline: 1rem;
}

.compile-shell .metric-card strong,
.flasher-shell .metric-card strong {
    font-size: .96rem;
    line-height: 1.15;
}

@media (max-width: 1280px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: unset;
        max-height: unset;
    }

    .compile-shell .hero-right,
    .flasher-shell .hero-right,
    .compile-shell .compact-hero-actions,
    .flasher-shell .compact-hero-actions {
        display: none;
    }
}

@media (max-height: 820px) and (min-width: 1281px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: 6.55rem;
        max-height: 6.55rem;
    }

    .compile-shell .compact-hero-actions .btn,
    .flasher-shell .compact-hero-actions .btn,
    .compile-shell .metric-card,
    .flasher-shell .metric-card {
        height: 3.65rem;
        min-height: 3.65rem;
        max-height: 3.65rem;
    }
}

/* v12: cabecera mas amplia y estado sin recortes */
.compile-shell .hero-card,
.flasher-shell .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(40rem, 40rem);
    min-height: 8.25rem;
    max-height: 8.25rem;
}

.compile-shell .hero-right,
.flasher-shell .hero-right,
.compile-shell .compact-hero-actions,
.flasher-shell .compact-hero-actions {
    grid-template-columns: minmax(12rem, 1.05fr) minmax(12.5rem, 1fr) minmax(12.5rem, 1fr);
    gap: .95rem;
}

.compile-shell .compact-hero-actions .btn,
.flasher-shell .compact-hero-actions .btn,
.compile-shell .metric-card,
.flasher-shell .metric-card {
    height: 4.9rem;
    min-height: 4.9rem;
    max-height: 4.9rem;
    padding: .82rem 1rem;
}

.compile-shell .status-strip,
.flasher-shell .status-strip {
    min-height: 3.35rem;
    max-height: 3.35rem;
    align-items: center;
}

.compile-shell .status-strip strong,
.flasher-shell .status-strip strong {
    line-height: 1.15;
}

.compile-shell .status-strip span:not(.status-dot),
.flasher-shell .status-strip span:not(.status-dot) {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.22;
    max-width: 100%;
}

.check-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.05rem;
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: rgba(255,255,255,.035);
    color: #d8e8fb;
    font-weight: 700;
    font-size: .82rem;
}

.check-row input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.verify-row {
    margin-top: .05rem;
}

@media (max-height: 820px) and (min-width: 1281px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: 7.2rem;
        max-height: 7.2rem;
    }

    .compile-shell .compact-hero-actions .btn,
    .flasher-shell .compact-hero-actions .btn,
    .compile-shell .metric-card,
    .flasher-shell .metric-card {
        height: 4.15rem;
        min-height: 4.15rem;
        max-height: 4.15rem;
    }

    .compile-shell .status-strip,
    .flasher-shell .status-strip {
        min-height: 2.85rem;
        max-height: 2.85rem;
    }
}

@media (max-width: 1360px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: unset;
        max-height: unset;
    }

    .compile-shell .hero-right,
    .flasher-shell .hero-right,
    .compile-shell .compact-hero-actions,
    .flasher-shell .compact-hero-actions {
        display: none;
    }
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.option-grid .check-row {
    min-height: 2.75rem;
    align-items: center;
}

.auto-flash-row {
    border-color: rgba(103, 247, 223, .28);
    background: rgba(103, 247, 223, .055);
}

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


/* v14: cabecera reforzada, estado sin cortes y estilos cache-busted */
.compile-shell .hero-card,
.flasher-shell .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(43rem, 43rem);
    min-height: 9rem;
    max-height: none;
    overflow: visible;
}

.compile-shell .hero-right,
.flasher-shell .hero-right,
.compile-shell .compact-hero-actions,
.flasher-shell .compact-hero-actions {
    grid-template-columns: minmax(13rem, 1.05fr) minmax(13.5rem, 1fr) minmax(13.5rem, 1fr);
    gap: 1rem;
}

.compile-shell .compact-hero-actions .btn,
.flasher-shell .compact-hero-actions .btn,
.compile-shell .metric-card,
.flasher-shell .metric-card {
    height: 5.35rem;
    min-height: 5.35rem;
    max-height: 5.35rem;
    padding: .95rem 1.1rem;
}

.compile-shell .status-strip,
.flasher-shell .status-strip {
    min-height: 3.95rem;
    max-height: none;
    padding: .78rem .95rem;
    overflow: visible;
}

.compile-shell .status-strip > div,
.flasher-shell .status-strip > div {
    min-width: 0;
}

.compile-shell .status-strip strong,
.flasher-shell .status-strip strong {
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.compile-shell .status-strip span:not(.status-dot),
.flasher-shell .status-strip span:not(.status-dot) {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-height: 1.25;
    max-width: 100%;
}

@media (max-height: 820px) and (min-width: 1361px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: 7.85rem;
    }

    .compile-shell .compact-hero-actions .btn,
    .flasher-shell .compact-hero-actions .btn,
    .compile-shell .metric-card,
    .flasher-shell .metric-card {
        height: 4.45rem;
        min-height: 4.45rem;
        max-height: 4.45rem;
        padding: .72rem .9rem;
    }

    .compile-shell .status-strip,
    .flasher-shell .status-strip {
        min-height: 3.25rem;
        padding: .58rem .78rem;
    }
}

@media (max-width: 1420px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: unset;
        max-height: unset;
        overflow: hidden;
    }

    .compile-shell .hero-right,
    .flasher-shell .hero-right,
    .compile-shell .compact-hero-actions,
    .flasher-shell .compact-hero-actions {
        display: none;
    }

    .compile-shell .status-strip,
    .flasher-shell .status-strip {
        min-height: 3.25rem;
    }
}


/* v15: firmware correcto, modo auto grabacion visible y layout del grabador estabilizado */
.flasher-shell .hero-card,
.compile-shell .hero-card {
    min-height: 9.25rem;
    padding-block: .95rem;
}

.flasher-shell .status-strip,
.compile-shell .status-strip {
    min-height: 4.15rem;
    overflow: visible;
}

.flasher-shell .status-strip strong,
.compile-shell .status-strip strong {
    white-space: normal;
    overflow: visible;
}

.flash-panel {
    overflow: hidden;
}

.flash-form-v4 {
    display: flex !important;
    flex-direction: column;
    gap: .48rem;
    min-height: 0;
    overflow: hidden;
}

.flash-form-v4 .field-label {
    flex: 0 0 auto;
}

.flash-form-v4 .field,
.flash-form-v4 .firmware-summary,
.flash-form-v4 .option-grid,
.flash-form-v4 .flash-actions,
.flash-form-v4 .hint {
    flex: 0 0 auto;
}

.option-grid {
    display: grid !important;
    visibility: visible !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .08rem;
}

.option-grid .check-row {
    display: flex !important;
    visibility: visible !important;
    min-height: 2.95rem;
    padding: .52rem .72rem;
    line-height: 1.16;
}

.auto-flash-row {
    border-color: rgba(103, 247, 223, .5);
    background: linear-gradient(135deg, rgba(103, 247, 223, .095), rgba(122, 167, 255, .06));
}

.auto-flash-row span,
.verify-row span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.flash-actions-v8 {
    flex: 0 0 auto;
    margin-top: .08rem;
}

@media (max-height: 820px) and (min-width: 1051px) {
    .flasher-shell .hero-card,
    .compile-shell .hero-card {
        min-height: 7.9rem;
        padding-block: .65rem;
    }

    .flasher-shell .status-strip,
    .compile-shell .status-strip {
        min-height: 3.25rem;
    }

    .flash-form-v4 {
        gap: .34rem;
    }

    .option-grid .check-row {
        min-height: 2.35rem;
        padding: .38rem .56rem;
        font-size: .76rem;
    }

    .firmware-summary {
        padding: .42rem .5rem;
    }
}

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


/* v16: estado final coloreado y tarjetas superiores mas anchas */
.log-line.success {
    color: var(--success);
    font-weight: 800;
}

.status-strip.success {
    border-color: rgba(79, 242, 154, .55);
    background: rgba(79, 242, 154, .08);
}

.status-strip.success strong,
.status-strip.success span:not(.status-dot) {
    color: var(--success);
}

.status-strip.error {
    border-color: rgba(255, 107, 139, .58);
    background: rgba(255, 107, 139, .08);
}

.status-strip.error strong,
.status-strip.error span:not(.status-dot) {
    color: var(--danger);
}

.compile-shell .hero-card,
.flasher-shell .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(50rem, 50rem);
    min-height: 9.45rem;
}

.compile-shell .hero-right,
.flasher-shell .hero-right,
.compile-shell .compact-hero-actions,
.flasher-shell .compact-hero-actions {
    grid-template-columns: minmax(15.5rem, 1.05fr) minmax(16rem, 1fr) minmax(16rem, 1fr);
    gap: 1.08rem;
}

.compile-shell .compact-hero-actions .btn,
.flasher-shell .compact-hero-actions .btn,
.compile-shell .metric-card,
.flasher-shell .metric-card {
    height: 5.55rem;
    min-height: 5.55rem;
    max-height: 5.55rem;
    padding: 1rem 1.18rem;
}

.compile-shell .metric-card strong,
.flasher-shell .metric-card strong {
    font-size: 1.02rem;
    line-height: 1.22;
}

@media (max-width: 1580px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: unset;
    }

    .compile-shell .hero-right,
    .flasher-shell .hero-right,
    .compile-shell .compact-hero-actions,
    .flasher-shell .compact-hero-actions {
        display: none;
    }
}

@media (max-height: 820px) and (min-width: 1581px) {
    .compile-shell .hero-card,
    .flasher-shell .hero-card {
        min-height: 8.15rem;
    }

    .compile-shell .compact-hero-actions .btn,
    .flasher-shell .compact-hero-actions .btn,
    .compile-shell .metric-card,
    .flasher-shell .metric-card {
        height: 4.65rem;
        min-height: 4.65rem;
        max-height: 4.65rem;
        padding: .78rem 1rem;
    }
}


/* v21: grabador con controles más espaciados y compilador con descarga HEX */
.flasher-shell .flash-form-v4 {
    gap: .78rem !important;
}

.flasher-shell .field-label {
    margin-top: .08rem;
}

.flasher-shell .firmware-summary {
    padding: .82rem .9rem !important;
    min-height: 4.15rem;
}

.flasher-shell .option-grid {
    gap: .72rem !important;
    margin-top: .14rem;
    margin-bottom: .08rem;
}

.flasher-shell .option-grid .check-row {
    min-height: 3.05rem !important;
    padding: .72rem .85rem !important;
}

.flasher-shell .flash-actions-v8 {
    gap: .85rem !important;
    margin-top: .2rem;
}

.flasher-shell .compact-note {
    margin-top: .08rem;
    line-height: 1.45;
}

.compile-actions-v4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

@media (max-width: 980px) {
    .compile-actions-v4 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-height: 820px) and (min-width: 1051px) {
    .flasher-shell .flash-form-v4 {
        gap: .58rem !important;
    }

    .flasher-shell .firmware-summary {
        min-height: 3.65rem;
        padding: .65rem .75rem !important;
    }

    .flasher-shell .option-grid .check-row {
        min-height: 2.65rem !important;
    }
}


/* v22/v23: descarga de driver USB CH341/CH340 desde el grabador */
.driver-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    border: 1px solid rgba(255, 210, 122, .32);
    background: linear-gradient(135deg, rgba(255, 210, 122, .09), rgba(122, 167, 255, .045));
    border-radius: 1rem;
    padding: .72rem .85rem;
    min-height: 3.35rem;
}

.driver-summary span {
    display: block;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
    margin-bottom: .16rem;
}

.driver-summary strong {
    display: block;
    color: var(--text);
    font-size: .86rem;
    line-height: 1.18;
    font-weight: 800;
}

.warning-soft {
    border-color: rgba(255, 210, 122, .42) !important;
    background: rgba(255, 210, 122, .12) !important;
    color: #ffe1a3 !important;
}

.driver-actions {
    min-width: 8.5rem;
}

@media (max-width: 880px) {
    .driver-summary {
        grid-template-columns: 1fr;
    }

    .driver-actions {
        min-width: 0;
    }
}

@media (max-height: 820px) and (min-width: 1051px) {
    .driver-summary {
        min-height: 2.85rem;
        padding: .52rem .68rem;
    }

    .driver-summary span {
        font-size: .68rem;
        margin-bottom: .08rem;
    }

    .driver-summary strong {
        font-size: .78rem;
    }
}


/* v23: driver debajo de tarjetas superiores y sin pantalla inicial intermedia */
#app:empty {
    display: none;
}

.flasher-shell {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.top-driver-summary {
    width: 100%;
    min-height: 3.15rem;
    padding: .68rem .9rem;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
}

.top-driver-summary strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flasher-shell .flash-form-v4 {
    gap: .68rem !important;
}

@media (max-width: 880px) {
    .top-driver-summary strong {
        white-space: normal;
    }
}

@media (max-height: 820px) and (min-width: 1051px) {
    .top-driver-summary {
        min-height: 2.65rem;
        padding: .48rem .72rem;
    }
}


/* v24: tarjetas superiores del grabador: Listo, enlace test, driver */
.flasher-shell {
    grid-template-rows: minmax(8.7rem, auto) minmax(0, 1fr) !important;
}

.flasher-shell .hero-card {
    grid-template-columns: minmax(22rem, .86fr) minmax(34rem, 1.14fr);
    align-items: stretch;
}

.flasher-top-cards-v24 {
    grid-template-columns: repeat(3, minmax(10.5rem, 1fr)) !important;
    gap: .9rem !important;
    align-self: stretch;
}

.flasher-top-cards-v24 .metric-card {
    min-height: 7.1rem;
    padding: .9rem .95rem;
    justify-content: flex-start;
    gap: .35rem;
}

.flasher-top-cards-v24 .metric-card strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.22;
    font-size: .9rem;
    margin-top: .15rem;
}

.metric-heading-with-dot {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.metric-heading-with-dot span:not(.status-dot),
.action-metric-card > span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.status-metric-card.ready { border-color: rgba(103, 247, 223, .34); background: rgba(103, 247, 223, .07); }
.status-metric-card.success { border-color: rgba(79, 242, 154, .34); background: rgba(79, 242, 154, .07); }
.status-metric-card.error { border-color: rgba(255, 107, 139, .36); background: rgba(255, 107, 139, .07); }
.status-metric-card.working { border-color: rgba(122, 167, 255, .36); background: rgba(122, 167, 255, .07); }

.action-metric-card .card-action-button {
    margin-top: auto;
    width: 100%;
    min-height: 2.35rem;
}

.flasher-shell .driver-summary,
.flasher-shell .top-driver-summary {
    display: none !important;
}

@media (max-width: 1180px) {
    .flasher-shell .hero-card {
        grid-template-columns: 1fr;
    }

    .flasher-top-cards-v24 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .flasher-top-cards-v24 {
        grid-template-columns: 1fr !important;
    }

    .flasher-shell {
        overflow: auto;
    }
}

@media (max-height: 820px) and (min-width: 1051px) {
    .flasher-shell .hero-card {
        padding: .85rem 1rem;
    }

    .flasher-top-cards-v24 .metric-card {
        min-height: 6.25rem;
        padding: .75rem .85rem;
    }

    .flasher-top-cards-v24 .metric-card strong {
        font-size: .82rem;
        line-height: 1.15;
    }

    .action-metric-card .card-action-button {
        min-height: 2.05rem;
    }
}


/* v25: cabecera corregida: estado a la izquierda, Test y Driver a la derecha sin montarse */
.flasher-shell {
    grid-template-rows: minmax(8.9rem, auto) minmax(0, 1fr) !important;
}

.flasher-shell .hero-card {
    grid-template-columns: minmax(31rem, 1fr) minmax(33rem, .92fr) !important;
    gap: 1.25rem !important;
    align-items: stretch;
    overflow: hidden;
}

.flasher-shell .hero-left {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    gap: .82rem;
}

.flasher-main-status {
    margin-top: 0 !important;
    min-height: 3.95rem !important;
    max-height: 4.25rem !important;
    width: 100%;
}

.flasher-main-status strong,
.flasher-main-status span:not(.status-dot) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.22;
}

.flasher-top-cards-v24 {
    grid-template-columns: repeat(2, minmax(15rem, 1fr)) !important;
    gap: 1rem !important;
    min-width: 0;
    align-self: stretch;
}

.flasher-top-cards-v24 .metric-card {
    min-height: 7rem !important;
    height: auto !important;
    max-height: none !important;
    padding: .95rem 1rem !important;
    justify-content: flex-start;
    overflow: hidden;
}

.flasher-top-cards-v24 .metric-card strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.22;
    font-size: .9rem;
}

.flasher-top-cards-v24 .card-action-button {
    margin-top: auto;
    width: 100%;
    min-height: 2.35rem;
}

@media (max-width: 1280px) {
    .flasher-shell .hero-card {
        grid-template-columns: 1fr !important;
        min-height: unset;
        overflow: hidden;
    }

    .flasher-top-cards-v24 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .flasher-shell {
        overflow: auto;
    }

    .flasher-top-cards-v24 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-height: 820px) and (min-width: 1281px) {
    .flasher-shell {
        grid-template-rows: minmax(7.8rem, auto) minmax(0, 1fr) !important;
    }

    .flasher-shell .hero-card {
        gap: 1rem !important;
        padding: .8rem 1rem;
    }

    .flasher-main-status {
        min-height: 3.35rem !important;
        max-height: 3.65rem !important;
        padding: .58rem .78rem;
    }

    .flasher-top-cards-v24 .metric-card {
        min-height: 6.15rem !important;
        padding: .72rem .85rem !important;
    }

    .flasher-top-cards-v24 .metric-card strong {
        font-size: .82rem;
        line-height: 1.16;
    }

    .flasher-top-cards-v24 .card-action-button {
        min-height: 2rem;
    }
}


/* v27: cabecera del grabador con 3 tarjetas superiores y botones separados debajo */
.flasher-shell {
    grid-template-rows: minmax(9.6rem, auto) minmax(0, 1fr) !important;
}

.flasher-shell .hero-card {
    grid-template-columns: minmax(25rem, .74fr) minmax(46rem, 1.26fr) !important;
    gap: 1.25rem !important;
    align-items: stretch;
    min-height: 9.2rem !important;
    max-height: 9.2rem !important;
    overflow: hidden;
}

.flasher-shell .hero-left {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
}

.flasher-top-stack {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .7rem;
    min-width: 0;
    align-self: stretch;
}

.flasher-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    min-width: 0;
    min-height: 0;
}

.flasher-info-grid .metric-card {
    height: auto !important;
    min-height: 5.35rem !important;
    max-height: 5.35rem !important;
    padding: .72rem .85rem !important;
    justify-content: flex-start;
    gap: .3rem;
    overflow: hidden;
}

.flasher-info-grid .metric-card strong {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.18;
    font-size: .82rem;
    margin-top: .18rem;
}

.flasher-info-grid .metric-card span:not(.status-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flasher-info-grid .status-metric-card.ready,
.flasher-info-grid .status-metric-card.pending {
    border-color: rgba(103, 247, 223, .34);
    background: rgba(103, 247, 223, .07);
}

.flasher-info-grid .status-metric-card.success {
    border-color: rgba(79, 242, 154, .38);
    background: rgba(79, 242, 154, .08);
}

.flasher-info-grid .status-metric-card.error {
    border-color: rgba(255, 107, 139, .42);
    background: rgba(255, 107, 139, .08);
}

.flasher-info-grid .status-metric-card.working {
    border-color: rgba(122, 167, 255, .42);
    background: rgba(122, 167, 255, .08);
}

.flasher-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(10rem, 14rem));
    justify-content: end;
    gap: .75rem;
    min-height: 2.15rem;
}

.flasher-action-row .btn {
    width: 100%;
    min-height: 2.15rem;
}

.flasher-top-cards-v24,
.flasher-main-status {
    display: none !important;
}

@media (max-width: 1360px) {
    .flasher-shell .hero-card {
        grid-template-columns: minmax(22rem, .68fr) minmax(40rem, 1.32fr) !important;
    }

    .flasher-info-grid .metric-card strong {
        -webkit-line-clamp: 2;
        font-size: .78rem;
    }
}

@media (max-width: 1180px) {
    .flasher-shell {
        overflow: auto;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .flasher-shell .hero-card {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .flasher-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .flasher-action-row {
        justify-content: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .flasher-info-grid {
        grid-template-columns: 1fr;
    }

    .flasher-info-grid .metric-card {
        min-height: auto !important;
        max-height: none !important;
    }

    .flasher-action-row {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 820px) and (min-width: 1181px) {
    .flasher-shell {
        grid-template-rows: minmax(8.45rem, auto) minmax(0, 1fr) !important;
    }

    .flasher-shell .hero-card {
        min-height: 8.1rem !important;
        max-height: 8.1rem !important;
        padding: .78rem 1rem;
    }

    .flasher-info-grid .metric-card {
        min-height: 4.75rem !important;
        max-height: 4.75rem !important;
        padding: .58rem .72rem !important;
    }

    .flasher-info-grid .metric-card strong {
        -webkit-line-clamp: 2;
        font-size: .76rem;
    }

    .flasher-action-row .btn {
        min-height: 1.95rem;
    }
}

/* v28: fuerza cabecera visible y corrige conflicto hero-right/flasher-top-stack */
.flasher-shell {
    grid-template-rows: minmax(10.8rem, auto) minmax(0, 1fr) !important;
}

.flasher-shell .hero-card {
    display: grid !important;
    grid-template-columns: minmax(24rem, .72fr) minmax(42rem, 1.28fr) !important;
    align-items: stretch !important;
    gap: 1.15rem !important;
    min-height: 10.2rem !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 1rem 1.15rem !important;
}

.flasher-shell .hero-left {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.flasher-shell .hero-right.flasher-top-stack,
.flasher-top-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, auto) auto !important;
    align-content: stretch !important;
    align-self: stretch !important;
    gap: .72rem !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

.flasher-info-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(12.5rem, 1fr)) !important;
    gap: .85rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.flasher-info-grid .metric-card {
    display: flex !important;
    min-height: 5.65rem !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    padding: .78rem .9rem !important;
    border-radius: 1rem !important;
}

.flasher-info-grid .metric-card strong {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-height: 1.18 !important;
    font-size: .82rem !important;
}

.flasher-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(12rem, 15.5rem)) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: .8rem !important;
    width: 100% !important;
    min-height: 2.35rem !important;
    overflow: visible !important;
}

.flasher-action-row .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 2.35rem !important;
    visibility: visible !important;
}

@media (max-width: 1280px) {
    .flasher-shell {
        overflow: auto !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .flasher-shell .hero-card {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        max-height: none !important;
    }

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

    .flasher-action-row {
        justify-content: stretch !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .flasher-info-grid {
        grid-template-columns: 1fr !important;
    }

    .flasher-action-row {
        grid-template-columns: 1fr !important;
    }
}


/* v29: cabecera corregida - Listo debajo del titulo, tres tarjetas arriba a la derecha y botones debajo */
.flasher-shell {
    grid-template-rows: minmax(9.8rem, auto) minmax(0, 1fr) !important;
}

.flasher-shell .hero-card {
    display: grid !important;
    grid-template-columns: minmax(24rem, .78fr) minmax(44rem, 1.22fr) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
    min-height: 9.45rem !important;
    max-height: none !important;
    overflow: visible !important;
}

.flasher-shell .hero-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.flasher-shell .hero-left .brand-row {
    min-width: 0 !important;
}

.flasher-shell .flasher-main-status {
    display: flex !important;
    margin-top: .72rem !important;
    min-height: 3.05rem !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
}

.flasher-shell .flasher-main-status strong,
.flasher-shell .flasher-main-status span:not(.status-dot) {
    overflow: visible !important;
    text-overflow: clip !important;
}

.flasher-shell .flasher-main-status span:not(.status-dot) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
}

.flasher-shell .hero-right.flasher-top-stack {
    display: grid !important;
    grid-template-rows: minmax(5.1rem, auto) auto !important;
    gap: .72rem !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.flasher-shell .flasher-info-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(13rem, 1fr)) !important;
    gap: .85rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.flasher-shell .flasher-info-grid .metric-card {
    display: flex !important;
    height: 5.25rem !important;
    min-height: 5.25rem !important;
    max-height: 5.25rem !important;
    padding: .76rem .92rem !important;
    overflow: hidden !important;
}

.flasher-shell .flasher-info-grid .metric-card strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    font-size: .9rem !important;
}

.flasher-shell .flasher-info-grid .metric-card span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.flasher-shell .flasher-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(13rem, 16rem)) !important;
    justify-content: end !important;
    gap: .85rem !important;
    width: 100% !important;
    min-height: 2.4rem !important;
    overflow: visible !important;
}

.flasher-shell .flasher-action-row .btn {
    width: 100% !important;
    min-height: 2.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flasher-shell .flasher-top-cards-v24 {
    display: none !important;
}

@media (max-width: 1360px) {
    .flasher-shell .hero-card {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

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

    .flasher-shell .flasher-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
    }
}

@media (max-width: 760px) {
    .flasher-shell .flasher-info-grid,
    .flasher-shell .flasher-action-row {
        grid-template-columns: 1fr !important;
    }
}