/* AIM Capas / AIM Corte · la identidad de la suite sobre el laminador (docs/marca/sistema.md): el
   pigmento de la app (--aim-app y --aim-app-luz, los pone /suite.js; aquí, el mismo valor de
   partida) en lugar del acento del original; en el tema oscuro (el de partida), la noche de la
   suite; la tipografía de títulos de la marca; la insignia en la barra; barra de estado y avisos.
   La bienvenida es la común (/suite.js). */
@font-face {
    font-family: "AIM Titulos";
    src: url(/fuentes/bricolage-latin.woff2) format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
    font-family: "AIM Titulos";
    src: url(/fuentes/bricolage-latin-ext.woff2) format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

html[data-app="capas"] { --aim-pig: var(--aim-app, #b8430f); --aim-pig-luz: var(--aim-app-luz, #f79a5e); }
html[data-app="corte"] { --aim-pig: var(--aim-app, #0b6a86); --aim-pig-luz: var(--aim-app-luz, #5fcbe3); }

/* el acento del original → el pigmento */
:root {
    --appname-blue: var(--aim-pig);
    --menu-active-bg: color-mix(in srgb, var(--aim-pig) 30%, transparent);
    --ui-option-selected-bg: var(--aim-pig);
    --ui-button-hover-bg: var(--aim-pig);
    --ui-button-hover-fg: #fff;
    --highlight: color-mix(in srgb, var(--aim-pig) 35%, transparent);
    --main-color: color-mix(in srgb, var(--aim-pig) 70%, #fff);
    --main-color-hover: var(--aim-pig);
    --row-hover: color-mix(in srgb, var(--aim-pig) 18%, transparent);
    --header: color-mix(in srgb, var(--aim-pig) 22%, #f4f3f0);
    --blue-00: color-mix(in srgb, var(--aim-pig) 55%, #0b0b0d);
    --blue-0: color-mix(in srgb, var(--aim-pig) 70%, #121214);
    --blue-1: var(--aim-pig);
    --blue-2: color-mix(in srgb, var(--aim-pig) 70%, #fff);
    --blue-3: color-mix(in srgb, var(--aim-pig) 35%, #fff);
    --blue-4: color-mix(in srgb, var(--aim-pig) 18%, #fff);
    --blue-5: color-mix(in srgb, var(--aim-pig) 8%, #fff);
    --blue-6: color-mix(in srgb, var(--aim-pig) 4%, #fff);
    --slide-bg: color-mix(in srgb, var(--aim-pig) 25%, transparent);
    --menubar-back: #f7f6f3;
}
:root[data-theme="dark"] {
    /* la noche de la suite (fichas de /marca.css); el pigmento, solo en lo activo */
    --appname-blue: var(--aim-pig-luz);
    --menu-active-bg: var(--aim-pigmento-22, color-mix(in srgb, var(--aim-pig) 22%, #12151c));
    --menu-hover-bg: var(--aim-noche-3, #232835);
    --ui-option-selected-bg: var(--aim-pig);
    --ui-button-hover-bg: var(--aim-noche-3, #232835);
    --ui-button-hover-fg: var(--aim-texto, #e8eaf0);
    --header: var(--aim-noche-2, #1a1e27);
    --menubar-back: var(--aim-noche-1, #12151c);
    --menubar-fore: var(--aim-texto, #e8eaf0);
    --menubar-vsep: var(--aim-linea, #2a303d);
    --highlight: color-mix(in srgb, var(--aim-pig-luz) 30%, transparent);
    --main-color: var(--aim-pig-luz);
    --main-color-hover: var(--aim-pig);
    --row-hover: var(--aim-noche-3, #232835);
    --blue-00: var(--aim-noche-2, #1a1e27);
    --blue-0: var(--aim-noche-3, #232835);
    --blue-1: var(--aim-pig);
    --blue-2: var(--aim-pig-luz);
    --blue-3: var(--aim-pig-luz);
    --slide-bg: var(--aim-pigmento-22, color-mix(in srgb, var(--aim-pig) 22%, #12151c));
    --bg-gray: var(--aim-noche-1, #12151c);
    --bg-gray-lt: var(--aim-noche-2, #1a1e27);
    --menu: var(--aim-noche-2, #1a1e27);
    --menu-text: var(--aim-texto, #e8eaf0);
    --menu-border: var(--aim-linea, #2a303d);
    --menu-hover: var(--aim-noche-3, #232835);
    --fg-gray: var(--aim-texto-2, #a7abb8);
}

/* barra superior: la insignia de la suite donde el original ponía su nombre */
#aim-insignia {
    display: flex;
    align-items: center;
    padding: 0 6px 0 4px;
    color: var(--menubar-fore);
    font-size: 13px;
}
.menubar-appname#aim-insignia { font-family: inherit; }

/* cifras de la regla y de las capas: tipografía de títulos de la marca */
#slider, #layers { font-family: "AIM Titulos", system-ui, sans-serif; }

/* la barra de estado común (22 px), abajo */
.aim-fabrica-estado {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

/* avisos breves */
.aim-aviso {
    position: fixed;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    z-index: 20000;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--aim-noche-2, #1a1e27);
    border: 1px solid var(--aim-linea, #2a303d);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    color: var(--aim-texto, #e8eaf0);
    font: 13px/1.4 Inter, system-ui, sans-serif;
    pointer-events: none;
}

/* lo que el original enlazaba fuera (envío por red, apoyo al proyecto): no existe aquí */
#send-remote-head, #send-remote-print, #export-support, #mod-don8, #gdpr, #app-don8, #install, #uninstall { display: none !important; }

/* los controles del laminador con sus fichas de tema (sus reglas comunes se escriben para otra
   app de la misma base: aquí, en el tema oscuro de la suite) */
:root[data-theme="dark"] {
    color: var(--ui-text);
}

:root[data-theme="dark"] hr {
    border-color: var(--ui-hr);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] option {
    border-style: solid;
    border-width: 0px;
    border-color: var(--ui-border);
    background-color: var(--ui-input-bg);
    color: var(--ui-input-fg);
    border-bottom-width: 1px;
}

:root[data-theme="dark"] select {
    background-color: var(--ui-select-bg);
}

:root[data-theme="dark"] option:checked {
    background-color: var(--ui-option-selected-bg);
}

:root[data-theme="dark"] input[disabled] {
    border-color: var(--ui-border-strong);
    background-color: var(--ui-input-disabled-bg);
    color: var(--ui-input-disabled-fg);
}

:root[data-theme="dark"] textarea {
    background-color: var(--ui-textarea-bg);
    color: var(--ui-textarea-fg);
}

:root[data-theme="dark"] button {
    color: var(--ui-button-fg);
    background-color: var(--ui-button-bg);
    border-color: var(--ui-button-border);
}

:root[data-theme="dark"] button:not([disabled]):hover {
    background-color: var(--ui-button-hover-bg);
    color: var(--ui-button-hover-fg);
}

:root[data-theme="dark"] button[disabled] {
    color: var(--ui-button-disabled-fg);
}

:root[data-theme="dark"] #dialog {
    background-color: var(--ui-dialog-bg);
    color: var(--ui-dialog-fg);
    border-top-color: var(--ui-dialog-border-top);
    border-bottom-color: var(--ui-dialog-border-bottom);
}

:root[data-theme="dark"] #modal,
:root[data-theme="dark"] #dialog,
:root[data-theme="dark"] #modal select,
:root[data-theme="dark"] #dialog select {
    color: var(--ui-dialog-fg) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
    border-radius: 6px;
    border-bottom-width: 0;
}
:root[data-theme="dark"] .selected {
    border-color: var(--aim-pig-luz) !important;
}