@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;500&family=Fira+Code:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    font-size: 16px;

    /* Premium Palette */
    --primary: #F4D03F;
    /* Gold */
    --accent: #D35400;
    /* Burnt Orange */
    --surface-light: #FFFFFF;
    --background-light: #F9F9F9;
    --text-light: #2C3E50;

    --surface-dark: #2c2c2c;
    --background-dark: #1a1a1a;
    --text-dark: #ECF0F1;
}

/* Light Theme (Default, .tema-c) */
:root,
body.tema-c {
    --primary: #F4D03F;
    /* Gold */
    --secondary: #D35400;
    --accent: #2C3E50;
    --background-light: #F9F5D7;
    /* Beige-ish */
    --surface-light: #FFFBE6;
    /* Very light yellow */
    --text-light: #333333;

    --background-dark: #1E1E1E;
    --surface-dark: #252526;
    --text-dark: #E0E0E0;

    --c-m: var(--text-light);
    --f-m: var(--surface-light);
    --b-m: #E0D6B0;
    /* Darker beige border */
    --c-a: var(--text-light);
    --f-a: #FFF4CE;
    /* Header background */
    --h-a: #FCEFB4;
    /* Hover */

    --c-t: var(--text-light);
    --f-t: #F9F5D7;
    /* Toolbar background */
    --act-t: rgba(244, 208, 63, 0.4);

    --s-band: var(--primary);
    --i-arc: var(--secondary);

    /* Info/Warning/Error Colors (Light Mode) */
    --c-info: #007ACC;
    --f-info: #D6ECF9;
    --c-aviso: #9C5B00;
    --f-aviso: #FFF4CE;
    --c-error: #BE1100;
    --f-error: #FFD7D7;

    --c-bbh: #555;
    --f-bbh: transparent;
    --cact-bbh: var(--primary);
    --fact-bbh: rgba(0, 0, 0, 0.05);

    --c-br: #333;
    --f-br: #E0E0E0;
    --cd-br: #999;
    --fd-br: #F5F5F5;
}

/* Dark Theme (Media Query) */
@media (prefers-color-scheme: dark) {
    :root:not(.tema-c) {
        --c-m: var(--text-dark);
        --f-m: var(--surface-dark);
        --b-m: #3E3E42;

        --c-a: #CCCCCC;
        --f-a: #2D2D30;
        --h-a: #3E3E42;

        /* Fix for white bars: Make tertiary background dark */
        --c-t: #CCCCCC;
        --f-t: #181818;
        --act-t: rgba(244, 208, 63, 0.15);

        --s-band: var(--primary);
        --i-arc: var(--primary);

        --c-info: #5CAAF6;
        --f-info: #1B2631;
        --c-aviso: #F4D03F;
        --f-aviso: #453305;
        --c-error: #E74C3C;
        --f-error: #411212;

        --c-bbh: #CCCCCC;
        --f-bbh: transparent;
        --cact-bbh: var(--primary);
        --fact-bbh: rgba(255, 255, 255, 0.1);

        --c-br: #FFF;
        --f-br: #3C3C3C;
        --cd-br: #666;
        --fd-br: #252526;
    }
}

/* Ensure manual dark theme selector works effectively */
body.tema-o {
    --c-m: var(--text-dark);
    --f-m: var(--surface-dark);
    --b-m: #3E3E42;

    --c-a: #CCCCCC;
    --f-a: #2D2D30;
    --h-a: #3E3E42;

    --c-t: #CCCCCC;
    --f-t: #181818;
    --act-t: rgba(244, 208, 63, 0.15);

    --s-band: var(--primary);
    --i-arc: var(--primary);

    --c-info: #5CAAF6;
    --f-info: #1B2631;
    --c-aviso: #F4D03F;
    --f-aviso: #453305;
    --c-error: #E74C3C;
    --f-error: #411212;

    --c-bbh: #CCCCCC;
    --f-bbh: transparent;
    --cact-bbh: var(--primary);
    --fact-bbh: rgba(255, 255, 255, 0.1);

    --c-br: #FFF;
    --f-br: #3C3C3C;
    --cd-br: #666;
    --fd-br: #252526;
}


/* Layout */
body {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--f-t);
}

#menuBarra {
    background: var(--f-t);
    color: var(--c-t);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

main {
    display: grid;
    flex-grow: 1;
    grid-template-areas: "act cod mem pila reg" "act cod ay ay reg";
    grid-template-columns: auto 1fr 2fr auto auto;
    /* Even more priority to code */
    grid-template-rows: 1fr minmax(auto, 20rem);
    overflow: hidden;
    gap: 12px;
    padding: 12px;
    background-color: var(--f-t);
}

/* Configuraciones por modo */
body[data-modo=z80] main {
    grid-template-areas: "act cod mem pila reg" "act cod mem pila reg";
    grid-template-columns: auto 1fr 2fr auto auto;
}

body[data-modo=z80] #r-ay {
    display: none;
}

#r-ay>div {
    height: 100% !important;
}

main>section:not(#r-act) {
    min-width: 0;
    /* Important for grid/flex shrinking */
    overflow: hidden;
    border: 1px solid var(--b-m);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: var(--f-m);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

main>section>h2,
#r-act [role=tabpanel]>h2 {
    padding: .75rem 1rem;
    color: var(--c-a);
    background: var(--f-a);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--b-m);
}

main>section>div {
    height: calc(100% - 2rem);
    position: relative;
    background: var(--f-m);
    color: var(--c-m);
}

:is(#r-pila, #r-reg)>div {
    overflow-y: scroll;
}

#r-act {
    grid-area: act;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background-color: var(--f-t);
}

body.en-bienvenida main,
body.en-bienvenida header,
body.en-bienvenida footer {
    display: none !important;
}

#panel-bienvenida {
    display: none !important;
}

body.en-bienvenida #panel-bienvenida {
    display: flex !important;
    z-index: 2147483647 !important;
    /* Capa más alta posible */
}

#r-cod {
    grid-area: cod;
}

#r-mem {
    grid-area: mem;
}

#r-mem>div {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    overflow: hidden;
}

.scroll-memoria {
    flex-grow: 1;
    overflow: auto;
    /* Both horizontal and vertical */
    background: var(--f-m);
}

.scroll-memoria::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll-memoria::-webkit-scrollbar-track {
    background: var(--f-m);
}

.scroll-memoria::-webkit-scrollbar-thumb {
    background: var(--b-m);
    border-radius: 4px;
}

.scroll-memoria::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

#r-mem table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: max-content;
}

#r-mem th,
#r-mem td {
    border-bottom: 1px solid var(--b-m);
    border-right: 1px solid var(--b-m);
    padding: 2px 1px;
    /* Reducido para ahorrar espacio */
    text-align: center;
    background: inherit;
    font-size: 0.8rem;
    /* Ligeramente más pequeño */
}

/* Specific widths for Bytes and ASCII to ensure visibility and alignment */
#r-mem .byte,
#r-mem thead tr:nth-child(2) th:nth-child(-n+16) {
    width: 24px !important;
    min-width: 24px;
    padding: 2px 1px;
}

#r-mem .ascii,
#r-mem thead tr:nth-child(2) th:nth-child(n+17) {
    width: 14px !important;
    min-width: 14px;
    padding: 2px 1px;
}

#r-mem tbody th,
#r-mem thead tr:first-child th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    border-left: 1px solid var(--b-m);
    font-weight: bold;
    color: var(--c-a);
    background: var(--f-a);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    min-width: 50px;
    width: 50px;
}

#r-mem thead th {
    position: sticky;
    background: var(--f-a);
    z-index: 2;
    color: var(--c-a);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.65rem;
    /* Ligeramente más pequeño */
}

#r-mem thead tr:nth-child(1) th {
    top: 0;
    border-top: 1px solid var(--b-m);
    height: 28px;
}

#r-mem thead tr:nth-child(2) th {
    top: 28px;
    border-bottom: 1px solid var(--b-m);
}

#menuMemoriaAcciones {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--f-a);
    border-bottom: 1px solid var(--b-m);
    gap: 8px;
    min-height: 44px;
}

#menuMemoriaAcciones label {
    display: flex;
    align-items: center;
    height: 28px;
    color: var(--c-a) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    background: transparent !important;
}

#txtMemIrA {
    width: 100px;
    height: 28px !important;
    border: 1px solid var(--b-m);
    border-radius: 4px;
    padding-inline: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    background: var(--f-m);
    color: var(--c-m);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0;
}

#txtMemIrA:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(244, 208, 63, 0.2);
}

#txtMemIrA.error {
    border-color: var(--c-error);
    background: var(--f-error);
}

#r-ay {
    grid-area: ay;
}

#r-ay>div {
    padding: .5rem;
}

#r-pila {
    grid-area: pila;
}

#r-reg {
    grid-area: reg;
}

body>footer {
    display: flex;
    justify-content: space-between;
    background: var(--f-t);
    color: var(--c-t);
}

/* Activity Bar */
#r-act [role=tablist] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: var(--f-t);
}

#r-act [role=tablist] button {
    color: transparent;
    background: transparent;
    padding: 0;
    width: 3rem;
    height: 3rem;
}

#r-act [role=tablist] button span {
    width: 24px;
    height: 24px;
    display: block;
    margin: auto;
    background: var(--c-t);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#r-act [role=tablist] button[aria-selected=true] span {
    background: var(--s-band);
    -webkit-mask-size: contain;
    mask-size: contain;
}

#r-act [role=tabpanel]:not(#r-exp, #r-msg, #r-eje)>div {
    padding: .5rem;
}



#r-act [role=tabpanel]>div {
    height: calc(100% - 1.85rem);
    overflow: auto;
    background: var(--f-m);
    color: var(--c-m);
}

#r-act [role=tabpanel][aria-current=page] {
    display: block;
    width: 22rem;
}

#r-act [role=tabpanel]:not([aria-current=page]) {
    display: none;
}

@media screen and (max-width: 1366px) {
    #r-act [role=tabpanel][aria-current=page] {
        width: 15rem;
        /* Narrower explorer */
    }

    #r-pila,
    #r-reg {
        width: auto;
        min-width: 120px;
    }

    /* Reduce font size in memory slightly to fit better without hiding ASCII */
    #r-mem th,
    #r-mem td {
        padding: 2px 1px !important;
        font-size: 0.7rem !important;
    }
}

/* Icons Mappings */
#btnMenuExplorador span {
    mask-image: var(--i_expl_d);
    -webkit-mask-image: var(--i_expl_d);
}

#btnMenuExplorador[aria-selected=true] span {
    mask-image: var(--i_expl_a);
    -webkit-mask-image: var(--i_expl_a);
}

#btnMenuBuscar span {
    mask-image: var(--i_buscar_d);
    -webkit-mask-image: var(--i_buscar_d);
}

#btnMenuBuscar[aria-selected=true] span {
    mask-image: var(--i_buscar_a);
    -webkit-mask-image: var(--i_buscar_a);
}

#btnMenuEjecucion span {
    mask-image: var(--i_eje_d);
    -webkit-mask-image: var(--i_eje_d);
}

#btnMenuEjecucion[aria-selected=true] span {
    mask-image: var(--i_eje_a);
    -webkit-mask-image: var(--i_eje_a);
}

#btnMenuMensajes span {
    mask-image: var(--i_log_d);
    -webkit-mask-image: var(--i_log_d);
}

#btnMenuMensajes[aria-selected=true] span {
    mask-image: var(--i_log_a);
    -webkit-mask-image: var(--i_log_a);
}

#btnMenuEtiquetas span {
    mask-image: var(--i_eti_d);
    -webkit-mask-image: var(--i_eti_d);
}

#btnMenuEtiquetas[aria-selected=true] span {
    mask-image: var(--i_eti_a);
    -webkit-mask-image: var(--i_eti_a);
}

#btnMenuMacros span {
    mask-image: var(--i_macro_d);
    -webkit-mask-image: var(--i_macro_d);
}

#btnMenuMacros[aria-selected=true] span {
    mask-image: var(--i_macro_a);
    -webkit-mask-image: var(--i_macro_a);
}

#btnMenuManual span {
    mask-image: var(--i_man_d);
    -webkit-mask-image: var(--i_man_d);
}

#btnMenuManual[aria-selected=true] span {
    mask-image: var(--i_man_a);
    -webkit-mask-image: var(--i_man_a);
}

#btnMenuConfig span {
    mask-image: var(--i_config_d);
    -webkit-mask-image: var(--i_config_d);
}

#btnMenuConfig[aria-selected=true] span {
    mask-image: var(--i_config_a);
    -webkit-mask-image: var(--i_config_a);
}


/* Other UI Components */
button {
    padding: .5rem;
    color: var(--c-br);
    background: var(--f-br);
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    filter: brightness(0.95);
}

button:disabled {
    color: var(--cd-br);
    background: var(--fd-br);
    cursor: not-allowed;
}

#r-cod .CodeMirror {
    font-family: 'Fira Code', monospace;
    font-size: var(--txtEdTipoTam, 20px) !important;
    /* Slightly smaller but still clear */
    word-spacing: 0.15em;
}

/* Editor Selection Fix */
.CodeMirror-selected {
    background: rgba(244, 208, 63, 0.3) !important;
}

.CodeMirror-focused .CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
    background: rgba(244, 208, 63, 0.3);
}

.CodeMirror-cursor {
    border-left: 1.5px solid var(--c-m) !important;
}

input,
textarea,
[contenteditable],
::selection {
    caret-color: var(--c-m);
}

::selection {
    background-color: var(--primary);
    color: #1a1a1a;
}

#codemirror {
    height: 100%;
}

.CodeMirror-scroll {
    background: var(--f-m);
    color: var(--c-m);
}

/* Syntax Highlighting (Light Mode) */
.cm-comment {
    color: #6a737d;
    font-style: italic;
}

.cm-keyword {
    color: #d73a49;
    font-weight: bold;
}

.cm-mnemonic {
    color: #005cc5;
    font-weight: bold;
}

.cm-register {
    color: #6f42c1;
}

.cm-number {
    color: #22863a;
}

.cm-string {
    color: #032f62;
}

.cm-directive {
    color: #e36209;
    font-weight: bold;
}

.cm-variable-2,
.cm-variable-3 {
    color: inherit !important;
}

/* Dark Mode Overrides */
body.tema-o .cm-comment {
    color: #95a5a6;
}

body.tema-o .cm-mnemonic {
    color: #ffeb3b;
}

body.tema-o .cm-number {
    color: #58d68d;
}

body.tema-o .cm-register {
    color: #5dade2;
}

body.tema-o .cm-directive {
    color: #bb8fce;
}

body.tema-o .cm-string {
    color: #e67e22;
}


#codemirror .CodeMirror-gutters {
    color: var(--c-a);
    border-right: 1px solid var(--b-m);
}

/* Toolbars */
[role=toolbar] {
    display: flex;
    border-bottom: 1px solid var(--b-m);
}

[role=toolbar] [type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

[role=toolbar] :is(button, label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.22rem;
    height: 2.22rem;
    background: var(--f-bbh);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.22s ease;
    border: 1px solid transparent;
    margin: 0 2px;
    color: transparent !important;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

[role=toolbar] :is(button, label):hover {
    background: var(--fact-bbh);
}

[role=toolbar] [type="checkbox"]:checked+label {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--primary);
}

body.tema-o [role=toolbar] [type="checkbox"]:checked+label {
    background: rgba(255, 255, 255, 0.05);
}

[role=toolbar] :is(button, label) span {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--c-bbh);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s ease, opacity 0.22s ease;
    pointer-events: none;
}

[role=toolbar] :is(button, label):hover span {
    transform: scale(1.1);
}

[role=toolbar] [type="checkbox"]:not(:checked)+label span {
    opacity: 0.4;
    filter: grayscale(100%);
}



/* Fix for icons in toolbars */
#btnAccionesNuevo span {
    mask-image: var(--i_nav_nuevo);
    -webkit-mask-image: var(--i_nav_nuevo);
}

#btnAccionesVisualizar span {
    mask-image: var(--i_nav_visualizar);
    -webkit-mask-image: var(--i_nav_visualizar);
}

#btnAccionesGuardar span {
    mask-image: var(--i_nav_guardar);
    -webkit-mask-image: var(--i_nav_guardar);
}

#btnAccionesDescargar span {
    mask-image: var(--i_nav_descargar);
    -webkit-mask-image: var(--i_nav_descargar);
}

#btnAccionesDuplicar span {
    mask-image: var(--i_nav_duplicar);
    -webkit-mask-image: var(--i_nav_duplicar);
}

#btnAccionesBorrar span {
    mask-image: var(--i_nav_borrar);
    -webkit-mask-image: var(--i_nav_borrar);
}

#btnAccionesRenombrar span {
    mask-image: var(--i_nav_renombrar);
    -webkit-mask-image: var(--i_nav_renombrar);
}

#btnAccionesEntralizar span {
    mask-image: var(--i_nav_entralizar);
    -webkit-mask-image: var(--i_nav_entralizar);
}

#btnAccionesMultisel span {
    /* Use a checklist-like icon - generic list icon for now */
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M400 776h360q17 0 28.5-11.5T800 736q0-17-11.5-28.5T760 696H400q-17 0-28.5 11.5T360 736q0 17 11.5 28.5T400 776Zm0-200h360q17 0 28.5-11.5T800 536q0-17-11.5-28.5T760 496H400q-17 0-28.5 11.5T360 536q0 17 11.5 28.5T400 576Zm0-200h360q17 0 28.5-11.5T800 336q0-17-11.5-28.5T760 296H400q-17 0-28.5 11.5T360 336q0 17 11.5 28.5T400 376ZM200 776q17 0 28.5-11.5T240 736q0-17-11.5-28.5T200 696q-17 0-28.5 11.5T160 736q0 17 11.5 28.5T200 776Zm0-200q17 0 28.5-11.5T240 536q0-17-11.5-28.5T200 496q-17 0-28.5 11.5T160 536q0 17 11.5 28.5T200 576Zm0-200q17 0 28.5-11.5T240 336q0-17-11.5-28.5T200 296q-17 0-28.5 11.5T160 336q0 17 11.5 28.5T200 376Z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M400 776h360q17 0 28.5-11.5T800 736q0-17-11.5-28.5T760 696H400q-17 0-28.5 11.5T360 736q0 17 11.5 28.5T400 776Zm0-200h360q17 0 28.5-11.5T800 536q0-17-11.5-28.5T760 496H400q-17 0-28.5 11.5T360 536q0 17 11.5 28.5T400 576Zm0-200h360q17 0 28.5-11.5T800 336q0-17-11.5-28.5T760 296H400q-17 0-28.5 11.5T360 336q0 17 11.5 28.5T400 376ZM200 776q17 0 28.5-11.5T240 736q0-17-11.5-28.5T200 696q-17 0-28.5 11.5T160 736q0 17 11.5 28.5T200 776Zm0-200q17 0 28.5-11.5T240 536q0-17-11.5-28.5T200 496q-17 0-28.5 11.5T160 536q0 17 11.5 28.5T200 576Zm0-200q17 0 28.5-11.5T240 336q0-17-11.5-28.5T200 296q-17 0-28.5 11.5T160 336q0 17 11.5 28.5T200 376Z"/></svg>');
}

#btnAccionesMultisel.activo {
    background-color: var(--primary) !important;
}

#btnAccionesMultisel.activo span {
    background-color: #1E1E1E !important;
}

#btnAccionesLimpiarMsgs span {
    mask-image: var(--i_nav_borrar);
    -webkit-mask-image: var(--i_nav_borrar);
}

[for=chkAccionesMostrarInfo] span {
    mask-image: var(--i_msg_i);
    -webkit-mask-image: var(--i_msg_i);
    background: #3498db !important;
}

[for=chkAccionesMostrarAviso] span {
    mask-image: var(--i_msg_a);
    -webkit-mask-image: var(--i_msg_a);
    background: #f39c12 !important;
}

[for=chkAccionesMostrarError] span {
    mask-image: var(--i_msg_e);
    -webkit-mask-image: var(--i_msg_e);
    background: #e74c3c !important;
}

/* Dialogs */
dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 95%;
    border: 1px solid var(--b-m);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    background: var(--f-m);
    color: var(--c-m);
    z-index: 10000;
    overflow: hidden;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

dialog form {
    padding: 2rem;
}

dialog legend {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
    width: 100%;
}

dialog p {
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

dialog fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: var(--f-a);
    border-top: 1px solid var(--b-m);
}

dialog footer button {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

dialog footer button[value="c"] {
    background: transparent;
    border: 1px solid var(--b-m);
    color: var(--c-m);
}

dialog footer button:not([value="c"]) {
    background: var(--primary);
    border: none;
    color: #000;
}

dialog footer button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

dialog input[type="text"],
dialog input[type="number"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--f-t);
    color: var(--c-m);
    border: 1px solid var(--b-m);
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    transition: border-color 0.2s;
}

dialog input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--b-m);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Firefox Support */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--b-m) transparent;
}

/* Menu */
[role="menubar"] {
    list-style-type: none;
}

[role="menubar"]>li {
    display: inline-block;
    position: relative;
}

[role="menubar"] li>:first-child {
    display: inline-block;
    width: 100%;
    padding: .5rem;
    font-family: inherit;
    font-size: 1rem;
}

[role="menubar"] li>ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 20;
    min-width: 12rem;
    background: var(--f-t);
    color: var(--c-t);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid var(--b-m);
}

[role="menubar"] li:hover>ul {
    display: block;
}

/* Menú de primer nivel (Archivo, Editar...) */
[role="menubar"]>li:hover>ul {
    top: 100%;
    left: 0;
}

[role="menubar"]>li>ul {
    top: 100%;
    left: 0;
}

#menuBarra>ul>li>ul {
    min-width: 250px;
    padding: 0.25rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    overflow: visible;
    /* Default to visible for sub-menus */
}

/* Menus scrollable on mobile, but special desktop logic */
#menuBarra>ul>li>ul {
    max-height: calc(100vh - 100px);
}

@media screen and (max-width: 1024px) {
    #menuBarra>ul>li>ul {
        overflow-y: auto !important;
    }
}

@media screen and (min-width: 1025px) {

    /* Si el menú tiene sub-menús (ul), NO debe tener scroll, sino desbordar a la derecha */
    #menuBarra>ul>li>ul:has(ul) {
        overflow: visible !important;
    }

    /* Solo los menús finales (como Archivo) pueden tener scroll si son muy largos */
    #menuBarra>ul>li>ul:not(:has(ul)) {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

#menuBarra button,
.menu-item-toggle,
[role="menubar"] li>span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px !important;
    font-size: 0.95rem;
    color: var(--c-m) !important;
    text-align: left;
    background: transparent;
    cursor: pointer;
    border: none;
}

#menuBarra kbd {
    font-family: 'Fira Code', monospace;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.08);
    color: var(--secondary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    font-weight: 500;
}

body.tema-o #menuBarra kbd {
    background: rgba(255, 255, 255, 0.15);
    color: var(--primary);
}

[role="menubar"] li:hover>ul {
    display: block;
}

@media screen and (max-width: 1024px) {

    /* Hard reset for all menus on mobile to prevent desktop hover/floating behavior */
    #menuBarra [role="menubar"] ul {
        position: static !important;
        display: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }

    /* Fixed position only for the top-level categories (Archivo, Editar...) */
    #menuBarra>ul[role=menubar]>li>ul {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        width: 100vw !important;
        height: auto !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        background: var(--f-m) !important;
        z-index: 10000 !important;
        border-bottom: 2px solid var(--primary) !important;
        display: none;
    }

    /* Show menu only when explicitly toggled via JavaScript */
    #menuBarra li.abierto>ul {
        display: block !important;
    }

    /* Indent nested levels to show hierarchy */
    #menuBarra li ul li {
        padding-left: 10px !important;
    }

    #menuBarra li ul ul li {
        padding-left: 20px !important;
    }

    /* Disable all hover triggers to avoid ghost menus */
    [role="menubar"] li:hover>ul {
        display: none !important;
    }
}

[role="menubar"] [role="separator"] {
    margin: .5rem 0;
    height: 1px;
    background: var(--b-m);
}

[role="menubar"] button {
    background: transparent;
    text-align: left;
    width: 100%;
}

/* Explorer View (#r-exp) */
#r-exp>div {
    display: flex;
    flex-direction: column;
    height: calc(100% - 1.85rem);
    padding: 1rem;
}

#menuArchivoAcciones {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--b-m);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

#archivos {
    list-style: none;
    flex-grow: 1;
    overflow-y: auto;
}

#archivos li [type="checkbox"] {
    display: none;
}

#archivos.seleccion-multiple li [type="checkbox"] {
    display: block;
}

#archivos li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-m);
    transition: background 0.1s, color 0.1s;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

#archivos button {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

#archivos li.guardar button::after {
    content: " ●";
    color: inherit;
    font-size: 0.8rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    animation: pulse 2s infinite;
}

/* Archivo de entrada (punto de entrada principal) */
#archivos li.entrada {
    border-left: 3px solid var(--primary);
    padding-left: calc(0.75rem - 3px);
    position: relative;
}

#archivos li.entrada::after {
    content: "★";
    color: var(--primary);
    font-size: 0.9rem;
    margin-left: auto;
    font-weight: bold;
}

#archivos li.entrada[aria-selected="true"]::after {
    color: #1E1E1E;
}

#r-cod.guardar h2>span::after {
    content: "•";
    color: var(--secondary);
    font-size: 1.2rem;
    vertical-align: middle;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

#archivos li:hover {
    background-color: rgba(244, 208, 63, 0.1);
    /* Subtle yellow hover */
}

#archivos li[aria-selected="true"] {
    background-color: var(--primary);
    color: #1E1E1E;
    /* Contrast text for selected item */
    font-weight: 500;
}

/* Log Styles */
/* Messages View (#r-msg) */
#r-msg>div {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#menuMensajesAcciones {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--b-m);
    margin-bottom: 1rem;
}

[role="log"] {
    list-style-type: none;
    overflow-y: auto;
    flex-grow: 1;
}

[role="log"] li {
    padding: 0.75rem;
    border-bottom: 1px solid var(--b-m);
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    transition: background 0.1s;
}

[role="log"] li:hover {
    background: rgba(255, 255, 255, 0.02);
}

[role="log"] time {
    display: block;
    font-size: 0.85em;
    opacity: 0.7;
    margin-bottom: 0.3rem;
}

[role="log"] .info {
    border-left: 4px solid var(--c-info);
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.1) 0%, transparent 100%);
}

[role="log"] .aviso {
    border-left: 4px solid var(--c-aviso);
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.1) 0%, transparent 100%);
}

[role="log"] .error {
    border-left: 4px solid var(--c-error);
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.1) 0%, transparent 100%);
}



#r-cfg form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

#r-cfg h3 {
    margin: 2rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #B98D00;
    /* Matching the stronger gold for consistency */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--b-m);
    padding-bottom: 0.5rem;
}

#r-cfg h3:first-of-type {
    margin-top: 0;
}

#r-cfg fieldset {
    border: 1px solid var(--b-m);
    padding: 1rem;
    margin: 0;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s;
}

#r-cfg fieldset:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#r-cfg legend {
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-m);
    padding: 0 0.5rem;
}

#r-cfg fieldset p {
    font-size: 0.9rem;
    color: var(--c-a);
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
}

/* Form Controls */
#r-cfg input[type="text"],
#r-cfg input[type="number"],
#r-cfg select {
    background-color: var(--f-t);
    color: var(--c-m);
    border: 1px solid var(--b-m);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    margin-top: 0.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#r-cfg input[type="text"]:focus,
#r-cfg input[type="number"]:focus,
#r-cfg select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}

#r-cfg input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary);
    cursor: pointer;
    margin-top: 0.25rem;
}

#r-cfg button[type="reset"] {
    background-color: var(--f-br);
    color: var(--c-br);
    border: 1px solid var(--b-m);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    align-self: flex-start;
    margin-top: 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#r-cfg button[type="reset"]:hover {
    background-color: var(--h-a);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#r-cfg button[type="reset"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Execution View (#r-eje) Styles */
#r-eje>div {
    padding: 1.5rem;
}

#r-eje table,
#r-eje tbody {
    display: block;
    width: 100%;
}

#r-eje tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0.25rem;
}

#r-eje th[colspan="4"],
#r-eje td[colspan="4"] {
    width: 100%;
    display: block;
}

#r-eje th[colspan="4"] {
    text-align: left;
    color: #B98D00;
    /* Stronger gold for high visibility */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1.25rem 0 0.5rem 0;
    border-bottom: 2px solid var(--b-m);
    margin-bottom: 0.5rem;
}

#r-eje tbody:first-child th[colspan="4"] {
    padding-top: 0;
}

#r-eje th:not([colspan]) {
    text-align: left;
    color: var(--c-a);
    font-weight: 500;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    width: 50%;
    /* Force 2-column layout */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

#r-eje td {
    text-align: right;
    color: var(--c-m);
    font-family: 'Fira Code', monospace;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    width: 50%;
    /* Force 2-column layout */
    white-space: nowrap;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

/* Last Instruction Highlight */
#r-eje tbody:first-child td[colspan="4"] {
    text-align: center;
    padding: 1rem;
    background: rgba(244, 208, 63, 0.05);
    /* Very subtle primary tint */
    border-radius: 8px;
    border: 1px solid var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.1rem;
    text-shadow: 0 0 10px rgba(244, 208, 63, 0.3);
}

body.tema-o #r-eje tbody:first-child td[colspan="4"] {
    background: rgba(244, 208, 63, 0.1);
    text-shadow: 0 0 15px rgba(244, 208, 63, 0.5);
}

/* Instruction History */
#hist_inst {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 0.5rem;
}

#hist_inst li {
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--c-a);
    padding: 0.15rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#hist_inst li:last-child {
    border-bottom: none;
    color: var(--c-m);
    font-weight: bold;
}

/* Estilos para foquitos de banderas */
#r-f td,
#r-e td {
    text-align: center;
    transition: all 0.2s ease;
    user-select: none;
}

/* Foquito apagado (por defecto) */
#r-f td:not(.activo),
#r-e td:not(.activo) {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* Foquito prendido */
#r-f td.activo,
#r-e td.activo {
    opacity: 1;
    filter: grayscale(0%);
    text-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
    transform: scale(1.1);
}

/* Hover effect */
#r-f td:hover,
#r-e td:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

/* Execution Panel Header Button */
#r-eje h2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-right: 12px !important;
    gap: 15px !important;
    /* Spacing between title and button */
}

#btnEjeAvanzar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 2px 14px !important;
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    min-height: 28px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#btnEjeAvanzar:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(1.15) !important;
}

#btnEjeAvanzar:active {
    transform: translateY(0) scale(0.96) !important;
}

#btnEjeAvanzar .icon {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-color: #fff !important;
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-240v-480h80v480h-80Zm-400 0v-480l360 240-360 240Z"/></svg>') !important;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-240v-480h80v480h-80Zm-400 0v-480l360 240-360 240Z"/></svg>') !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* iPhone Switch Toggle */
.menu-item-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1.2rem !important;
    /* Force matching padding */
    gap: 1.5rem;
    /* Match button gap */
    cursor: pointer;
    background: transparent;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
    /* Match main menu buttons */
    font-weight: 400;
    /* Match the exact weight of menu buttons */
    font-size: 100%;
    line-height: normal;
    /* Match button default line-height */
    transition: background 0.2s;
    user-select: none;
}

.menu-item-toggle:hover {
    background: var(--act-t);
}

#menuBarra ul li:hover>.menu-item-toggle {
    background: var(--act-t);
}

.ios-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin-left: auto;
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8E8E93;
    transition: .3s;
    border-radius: 18px;
}

.ios-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.ios-slider {
    background-color: #4cd964;
}

input:checked+.ios-slider:before {
    transform: translateX(16px);
}

/* Hide Visualizar and Multisel buttons in Z80 mode */
body[data-modo='z80'] #btnAccionesVisualizar,
body[data-modo='z80'] #btnAccionesMultisel {
    display: none !important;
}

/* --- MOBILE ENHANCEMENTS & TABS --- */

.mobile-only {
    display: none;
}

@media screen and (max-width: 1024px) {
    .mobile-only {
        display: flex;
        background: var(--f-a);
        border-bottom: 2px solid var(--b-m);
        justify-content: flex-start;
        padding: 5px 0;
        flex-shrink: 0;
        /* Don't squash tabs */
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        z-index: 100;
    }

    .mobile-only::-webkit-scrollbar {
        display: none;
    }

    #mobile-tabs button {
        background: transparent;
        border: none;
        font-size: 1.6rem;
        padding: 0;
        width: 58px;
        /* Slightly narrower to fit more icons on screen */
        height: 42px;
        /* Slightly shorter to save vertical space */
        border-radius: 20px;
        /* More rounded pill */
        transition: all 0.2s ease-in-out;
        filter: none;
        opacity: 1;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 0 3px;
        color: var(--c-m);
    }

    /* Better visibility for non-active icons in dark mode */
    body.tema-o #mobile-tabs button {
        filter: none;
        opacity: 1;
    }

    /* Hide original vertical activity bar on mobile */
    #r-act [role=tablist] {
        display: none !important;
    }

    #mobile-tabs button.activo {
        background: var(--primary);
        /* Gold background for active */
        filter: grayscale(0) brightness(1);
        opacity: 1;
        transform: scale(1.05);
        color: #000 !important;
        /* Force dark icon for high contrast */
        box-shadow: 0 4px 10px rgba(244, 208, 63, 0.4);
    }

    #mobile-tabs button.activo::after {
        content: "";
        position: absolute;
        bottom: 2px;
        width: 12px;
        height: 3px;
        background: #000;
        border-radius: 2px;
    }

    main {
        display: block !important;
        flex-grow: 1 !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
        background: var(--f-m);
    }

    main>section {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none !important;
        flex-direction: column;
        background: var(--f-m);
        transition: width 0.3s ease;
    }

    body.show-r-cpu #r-reg {
        width: 60% !important;
    }

    body.show-r-cpu #r-pila {
        width: 40% !important;
        left: 60% !important;
        border-left: 2px solid var(--b-m) !important;
    }

    body.show-r-cpu table {
        font-size: 0.75rem !important;
    }

    body.show-r-cpu th,
    body.show-r-cpu td {
        padding: 2px !important;
    }

    main>section>div,
    [role=tabpanel]>div {
        display: flex !important;
        flex-direction: column !important;
        flex: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        /* Children like .scroll-memoria handle their own overflow */
        position: relative;
    }

    /* Panels that just need to scroll their entire content */
    #r-eje>div,
    #r-msg>div,
    #r-cfg>div,
    #r-ay>div {
        overflow-y: auto !important;
        display: block !important;
    }

    /* Shown section logic via body class */
    body[class*="show-r-"] main>section {
        display: none !important;
    }

    body.show-r-act #r-act,
    body.show-r-cod #r-cod,
    body.show-r-mem #r-mem,
    body.show-r-reg #r-reg,
    body.show-r-pila #r-pila,
    body.show-r-cpu #r-reg,
    body.show-r-cpu #r-pila,
    body.show-r-ay #r-ay {
        display: flex !important;
    }

    /* Fixed height for content area on mobile */
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    header {
        flex-shrink: 0;
    }

    main {
        flex: 1;
        overflow: hidden !important;
        position: relative;
        display: block !important;
        width: 100%;
    }

    #r-act [role=tabpanel][aria-current=page] {
        width: 100% !important;
        flex: 1;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }

    #r-cod>div,
    #r-cod .CodeMirror {
        height: 100% !important;
    }

    .scroll-memoria {
        overflow: auto !important;
        flex: 1;
        width: 100%;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    #r-mem table {
        width: max-content;
        min-width: 800px;
        border-collapse: separate;
        border-spacing: 0;
    }

    #menuMemoriaAcciones {
        padding: 5px 12px !important;
        min-height: 50px !important;
        flex-shrink: 0;
    }

    #txtMemIrA {
        width: 140px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    #r-mem th,
    #r-mem td {
        padding: 5px;
        font-size: 0.85rem;
        border: 1px solid var(--b-m);
    }

    #r-mem thead tr:first-child th:first-child,
    #r-mem tbody th {
        position: sticky !important;
        left: 0 !important;
        background: var(--f-a) !important;
        z-index: 10 !important;
        min-width: 65px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    }

    /* Top-left corner needs higher z-index than sticky headers */
    #r-mem thead tr:first-child th:first-child {
        z-index: 20 !important;
    }

    /* Fix borders for separate collapse mode */
    #r-mem th,
    #r-mem td {
        border-right: 1px solid var(--b-m) !important;
        border-bottom: 1px solid var(--b-m) !important;
        border-top: 0;
        border-left: 0;
    }

    #r-mem table {
        border-top: 1px solid var(--b-m);
        border-left: 1px solid var(--b-m);
    }

    #r-mem>div {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Mobile-specific toolbar adjustments */
    [role=toolbar] {
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px;
        background: var(--f-a);
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* Fix clipping of dropdowns in menubar */
    #menuBarra ul[role=menubar] {
        overflow: visible !important;
        white-space: nowrap;
        display: flex;
        background: var(--f-t);
        position: relative;
        z-index: 1002;
    }

    /* Ensure every LI in the menu tree is full width */
    #menuBarra li {
        width: 100% !important;
        display: block !important;
    }

    /* Force button/span items to be full width and properly spaced */
    #menuBarra li>:is(button, span) {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    /* Logic for showing menus (handled via Javascript .abierto) */
    #menuBarra li.abierto>ul {
        display: block !important;
    }

    /* Visual indicators for nested levels */
    [role="menubar"] li.abierto>:is(button, span) {
        background: rgba(var(--primary-rgb, 244, 208, 63), 0.1) !important;
        border-right: 4px solid var(--primary) !important;
    }

    /* Expand history list on mobile */
    #hist_inst {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Dialogs on mobile */
    dialog {
        width: 90% !important;
        max-width: 90% !important;
    }

    dialog form {
        padding: 1.5rem !important;
    }

    /* Stack flex containers in dialogs (like the memory range row) */
    dialog fieldset div[style*="flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    dialog fieldset div[style*="flex"] label {
        margin-bottom: -0.5rem;
        font-size: 0.85rem;
        opacity: 0.7;
    }

    dialog fieldset div[style*="flex"] input {
        width: 100% !important;
    }

    dialog footer {
        padding: 1rem 1.5rem !important;
        gap: 0.5rem !important;
    }

    dialog footer button {
        flex: 1;
        padding: 0.75rem !important;
    }
}

/* Specific button for mobile console if in 8086 mode */
body[data-modo='z80'] #btnMobileConsole {
    display: none !important;
}

/* Backdrop for closing menus/panels on mobile */
#menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 999;
    /* Below menus but above content */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

body.menu-abierto #menu-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Ensure menus are above backdrop */
#menuBarra,
#mobile-tabs {
    z-index: 1001 !important;
}

#menuBarra>ul>li.abierto>ul {
    z-index: 10000 !important;
}

/* Utilería para ocultar en móvil */
@media screen and (max-width: 1024px) {
    .pc-only {
        display: none !important;
    }
}

/* Resaltar Cerrar proyecto y Salir */
#btnCerrarProj span,
#btnSalir span {
    color: #ff453a !important; /* Rojo estilo Apple / Destructivo */
    font-weight: 600;
}

#btnCerrarProj:hover,
#btnSalir:hover {
    background-color: #ff453a !important;
}

#btnCerrarProj:hover span,
#btnCerrarProj:hover kbd,
#btnSalir:hover span,
#btnSalir:hover kbd {
    color: #ffffff !important;
}
/* --- Estilos de Botones de C�digo (Logo Mejorado) --- */
#r-cod h2 {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding-right: 12px !important;
    user-select: none;
}

#menuCodigoAcciones {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 10px;
}

#menuCodigoAcciones button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    background: var(--f-br); /* Fallback */
}

#btnCodEnsamblar {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
}
#btnCodEjecutar {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
}
#btnCodAmbos {
    background: linear-gradient(135deg, #2196F3 0%, #4CAF50 100%) !important;
}

#menuCodigoAcciones button:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    filter: brightness(1.2);
}

#menuCodigoAcciones button:active {
    transform: translateY(0) scale(0.95) !important;
}

#menuCodigoAcciones button .icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #fff !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
}

#btnCodEnsamblar .icon {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-120v-240h80v240h-80Zm0-320v-400h80v400h-80ZM160-160v-640h640v640H160Zm80-80h480v-480H240v480Zm80-80h320v-80H320v80Zm0-160h320v-80H320v80Z"/></svg>') !important;
}

#btnCodEjecutar .icon {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-200v-560l440 280-440 280Z"/></svg>') !important;
}

#btnCodAmbos .icon {
     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-160v-640h110v640H160Zm250 0v-640l400 320-400 320Z"/></svg>') !important;
}