/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL.CSS — Sistema de diseño base
   Variables, reset, animaciones y componentes UI transversales.
   No contiene estilos de vistas, runtimes ni features opcionales.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables globales ─────────────────────────────────────────────────── */
/* Fuente única de verdad del sistema visual base. */
/* ─── Fuentes locales ────────────────────────────────────────────────────── */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans/IBMPlexSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans/IBMPlexSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/IBMPlexMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
:root {
    /* Tipografía */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

    --font-weight-copy: 400;
    --font-weight-base: 500;
    --font-weight-ui: 600;
    --font-weight-strong: 700;

    /* Layout shell — tokens compartidos con la navegación global */
    --layout-topbar:  52px;
    --layout-sidebar: 220px;

    /* Capas visuales globales */
    --miapp-z-carga: 30;
    --miapp-z-dropdown: 300;
    --miapp-z-panel-flotante: 9999;
    --miapp-z-modal: 10000;

    /* Cargas de runtime */
    --miapp-carga-viewport-z: var(--miapp-z-carga);
    --miapp-carga-min-width: 220px;
    --miapp-carga-viewport-safe-x: 32px;

    --miapp-spinner-size: 20px;
    --miapp-spinner-border-width: 2.5px;
    --miapp-spinner-border-color: rgba(142, 163, 199, 0.18);

    --miapp-carga-font-size: 10px;

    /* Colores de acento y marca */
    --miapp-accent:         #eaf2ff;
    --miapp-brand:          #2f80ff;
    --miapp-brand-text:     #2f80ff;
    --miapp-brand-hover:    #1f6fed;
    --miapp-brand-soft:     rgba(47, 128, 255, 0.14);
    --miapp-brand-contrast: #ffffff;

    /* Superficies */
    --miapp-bg:             #0b1728;
    --miapp-bg-subtle:      #0d1b2f;
    --miapp-bg-hover:       #142641;
    --miapp-surface:        #101f36;
    --miapp-surface-muted:  #0c192b;

    /*
     * Superficie compartida de runtimes.
     * Global define la primitive visual; cada runtime decide dónde consumirla.
     * La intensidad del brillo puede variarse por contexto sin duplicar
     * la composición completa del degradado.
     */
    --miapp-runtime-surface-glow:
        rgba(47, 128, 255, 0.10);

    --miapp-runtime-surface-bg:
        radial-gradient(
            circle at 85% 0%,
            var(--miapp-runtime-surface-glow),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--miapp-surface) 95%, transparent),
            color-mix(in srgb, var(--miapp-bg) 98%, transparent)
        );

    /* Texto */
    --miapp-text:           #f2f6fd;
    --miapp-text-muted:     #8ea3c7;
    --miapp-placeholder:    #6f83a6;

    /* Bordes */
    --miapp-border:         #31527f;
    --miapp-border-soft:    rgba(96, 135, 202, 0.26);
    --miapp-border-xsoft:   rgba(96, 135, 202, 0.12);
    --miapp-border-focus:   rgba(79, 147, 255, 0.58);

    /* Inputs */
    --miapp-input-border:       rgba(96, 135, 202, 0.28);
    --miapp-input-border-hover: rgba(79, 147, 255, 0.56);
    --miapp-input-error-ring:   rgba(255, 101, 122, 0.14);
    --miapp-input-focus-indicator-w: 2px;

    /* Checkbox transversal */
    --miapp-checkbox-size: 16px;
    --miapp-checkbox-radius: 4px;
    --miapp-checkbox-stroke: 2px;
    --miapp-checkbox-glyph-width: calc(var(--miapp-checkbox-size) * 0.56);
    --miapp-checkbox-glyph-height: calc(var(--miapp-checkbox-size) * 0.34);
    --miapp-checkbox-accent: var(--miapp-section-accent);
    --miapp-checkbox-hover-scale: 1.06;

    /* ─── Scrollbars transversales ───────────────────────────────────────────── */
    --miapp-scrollbar-size: 6px;
    --miapp-scrollbar-thumb: color-mix(in srgb, var(--miapp-text-muted) 58%, transparent);
    --miapp-scrollbar-thumb-hover: color-mix(in srgb, var(--miapp-text-muted) 78%, transparent);

    /* Selects */
    --miapp-select-arrow-size: 5px;
    --miapp-select-arrow-color: var(--miapp-label-color);
    --miapp-select-arrow-color-focus: var(--miapp-brand);
    --miapp-select-arrow-image:
        linear-gradient(45deg, transparent 50%, var(--miapp-select-arrow-color) 50%),
        linear-gradient(135deg, var(--miapp-select-arrow-color) 50%, transparent 50%);

    /* Focus ring */
    --miapp-ring:           rgba(47, 128, 255, 0.18);

    /* Sombras — solo las que se usan */
    --miapp-shadow-lg:      0 14px 38px rgba(0, 6, 18, 0.34);
    --miapp-shadow-modal:   0 20px 60px rgba(0, 5, 18, 0.48);
    --miapp-shadow-float:   0 16px 36px rgba(0, 5, 18, 0.38);

    /* Radios */
    --miapp-radius-card:    8px;
    --miapp-radius-modal:   10px;
    --miapp-radius-input:   6px;
    --miapp-radius-btn:     6px;
    --miapp-radius-pill:    999px;

    /* Botones */
    --miapp-btn-gap: 6px;
    --miapp-btn-height: 36px;
    --miapp-btn-padding-x: 15px;
    --miapp-btn-font-size: 13px;
    --miapp-control-disabled-opacity: 0.4;

    --miapp-btn-sm-padding-y: 4px;
    --miapp-btn-sm-padding-x: 10px;
    --miapp-btn-sm-font-size: 12px;
    --miapp-btn-icon-size: 28px;
    --miapp-btn-ui-icon-size: 14px;

    --miapp-btn-actionbar-height: 32px;
    --miapp-btn-actionbar-padding-x: 12px;
    --miapp-btn-actionbar-font-size: 12px;
    --miapp-btn-actionbar-font-weight: var(--font-weight-base);
    --miapp-btn-actionbar-letter-spacing: 0.1em;

    --miapp-modal-btn-min-width: 112px;
    --miapp-modal-btn-height: 32px;
    --miapp-modal-btn-padding-x: 12px;
    --miapp-modal-btn-font-size: 12px;
    --miapp-modal-btn-font-weight: var(--font-weight-base);
    --miapp-modal-btn-letter-spacing: 0.1em;

    /* Botones: variantes */
    --miapp-btn-primary-bg: #1f6fed;
    --miapp-btn-primary-border: rgba(115, 176, 255, 0.42);
    --miapp-btn-primary-text: var(--miapp-brand-contrast);
    --miapp-btn-primary-hover-bg: #185fce;
    --miapp-btn-primary-hover-border: #185fce;

    --miapp-btn-outline-bg: rgba(11, 24, 42, 0.82);
    --miapp-btn-outline-border: var(--miapp-border-soft);
    --miapp-btn-outline-text: var(--miapp-text-muted);
    --miapp-btn-outline-hover-bg: var(--miapp-bg-hover);
    --miapp-btn-outline-hover-border: var(--miapp-border-focus);
    --miapp-btn-outline-hover-text: var(--miapp-text);

    --miapp-btn-danger-bg: rgba(125, 28, 43, 0.16);
    --miapp-btn-danger-border: rgba(220, 38, 38, 0.2);
    --miapp-btn-danger-text: var(--miapp-red);
    --miapp-btn-danger-hover-bg: var(--miapp-err-bg);
    --miapp-btn-danger-hover-border: var(--miapp-err-border);
    --miapp-btn-danger-hover-text: var(--miapp-red);

    --miapp-btn-actionbar-danger-bg: var(--miapp-err-bg);
    --miapp-btn-actionbar-danger-border: var(--miapp-err-border);
    --miapp-btn-actionbar-danger-text: var(--miapp-red);
    --miapp-btn-actionbar-danger-hover-bg: color-mix(in srgb, var(--miapp-red) 10%, var(--miapp-bg));
    --miapp-btn-actionbar-danger-hover-border: var(--miapp-red);
    --miapp-btn-actionbar-danger-hover-text: var(--miapp-red);

    /* Transición base */
    --miapp-transition:     0.15s ease;
    --miapp-motion-fast:    0.18s ease;
    --miapp-motion-normal:  0.25s ease;
    --miapp-motion-spinner: 0.7s linear infinite;

    /* Estados semánticos */
    --miapp-ok-bg:          rgba(25, 129, 83, 0.18);
    --miapp-ok-border:      #4ade80;
    --miapp-ok-text:        #86efac;
    --miapp-err-bg:         rgba(157, 37, 53, 0.18);
    --miapp-err-border:     #ff8f9f;
    --miapp-err-border-soft: rgba(255, 111, 130, 0.22);
    --miapp-err-text:       #ff7185;

    /* Estado badge */
    --miapp-status-neutral-bg: var(--miapp-bg-hover);
    --miapp-status-neutral-text: var(--miapp-text-muted);

    --miapp-status-info-bg:   rgba(47, 128, 255, 0.18);
    --miapp-status-info-text: #9bc2ff;

    --miapp-status-warn-bg:   rgba(202, 138, 4, 0.18);
    --miapp-status-warn-text: #fbd27d;

    --miapp-status-ok-bg:   rgba(34, 197, 94, 0.16);
    --miapp-status-ok-text: #86efac;

    --miapp-status-err-bg:   rgba(239, 68, 68, 0.17);
    --miapp-status-err-text: #fda4af;

    /* Peligro — tokens usados por estados de eliminación */
    --miapp-red:            var(--miapp-err-text);
    --miapp-red-hover:      color-mix(in srgb, var(--miapp-err-text) 82%, var(--miapp-accent));

    /* Identidad visual Prismac — retro */
    --miapp-document-bg:        #101b2b;
    --miapp-workspace-bg:       #06111f;
    --miapp-header-bg:          #0a1627;
    --miapp-header-line:        rgba(166, 195, 242, 0.05);
    --miapp-header-separator:   rgba(96, 135, 202, 0.16);
    --miapp-header-text:        #f5f8fd;
    --miapp-header-action-bg:   rgba(11, 24, 42, 0.92);
    --miapp-header-action-hover-bg: #142641;
    --miapp-header-action-border: rgba(96, 135, 202, 0.24);
    --miapp-header-action-hover-border: rgba(79, 147, 255, 0.48);
    --miapp-header-action-text: #c7d6ec;
    --miapp-header-action-hover-text: #ffffff;
    --miapp-header-action-active-bg: rgba(47, 128, 255, 0.17);
    --miapp-header-action-active-hover-bg: rgba(47, 128, 255, 0.24);
    --miapp-header-action-active-border: rgba(79, 147, 255, 0.42);
    --miapp-header-action-active-hover-border: rgba(79, 147, 255, 0.54);
    --miapp-header-action-active-text: #a9c9ff;
    --miapp-header-tag-bg: rgba(255, 255, 255, 0.08);
    --miapp-header-tag-border: rgba(255, 255, 255, 0.12);
    --miapp-header-tag-text: rgba(255, 255, 255, 0.60);
    --miapp-header-danger-bg: rgba(239, 68, 68, 0.08);
    --miapp-header-danger-bg-hover: rgba(239, 68, 68, 0.16);
    --miapp-header-danger-border: rgba(239, 68, 68, 0.28);
    --miapp-header-danger-border-hover: rgba(239, 68, 68, 0.48);
    --miapp-header-danger-text: var(--miapp-err-border);

    --miapp-section-bg:         #0d1b2f;
    --miapp-section-border:     rgba(96, 135, 202, 0.16);
    --miapp-section-accent:     var(--miapp-brand);

    --miapp-card-border:        rgba(96, 135, 202, 0.20);
    --miapp-card-shadow:        0 12px 30px rgba(0, 6, 18, 0.26);

    --miapp-row-border:         rgba(96, 135, 202, 0.16);
    --miapp-row-hover:          #12233c;

    --miapp-empty-pattern-bg: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        var(--miapp-border-xsoft) 8px,
        var(--miapp-border-xsoft) 16px
    );

    --miapp-label-color:        #91a4c2;

    --miapp-font-technical:     var(--font-mono);
    --miapp-font-readable:      var(--font-sans);
    --miapp-letter-technical:   0.07em;
    --miapp-active-indicator-w: 1px;

    /* Tipos de archivo */
    --miapp-file-pdf-bg:    #fee2e2;
    --miapp-file-pdf-fg:    #b91c1c;

    --miapp-file-doc-bg:    #dbeafe;
    --miapp-file-doc-fg:    #1d4ed8;

    --miapp-file-xls-bg:    #dcfce7;
    --miapp-file-xls-fg:    #15803d;

    --miapp-file-img-bg:    #fef3c7;
    --miapp-file-img-fg:    #b45309;

    --miapp-file-zip-bg:    #ede9fe;
    --miapp-file-zip-fg:    #6d28d9;

    --miapp-file-txt-bg:    var(--miapp-bg-subtle);
    --miapp-file-txt-fg:    var(--miapp-text-muted);

    --miapp-file-code-bg:   #e0f2fe;
    --miapp-file-code-fg:   #0369a1;
}

/* ─── Reset y base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    background:
        radial-gradient(circle at 14% -10%, rgba(47, 128, 255, 0.10), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(23, 61, 118, 0.16), transparent 30%),
        var(--miapp-document-bg);
    color: var(--miapp-text);
}

body {
    font-family: var(--miapp-font-readable);
    font-size: 15px;
    font-weight: var(--font-weight-base);
    line-height: 1.6;
}

/* ─── Animaciones base ───────────────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* ─── Elementos de carga y bloqueo ──────────────────────────────────────── */
.spinner {
    width: var(--miapp-spinner-size);
    height: var(--miapp-spinner-size);
    border: var(--miapp-spinner-border-width) solid var(--miapp-spinner-border-color);
    border-top-color: var(--miapp-brand);
    border-right-color: color-mix(in srgb, var(--miapp-brand) 34%, var(--miapp-spinner-border-color));
    border-radius: 50%;
    animation: spin var(--miapp-motion-spinner);
    flex-shrink: 0;
}

.mensaje-carga {
    position: relative;
    width: fit-content;
    max-width: calc(100% - var(--miapp-carga-viewport-safe-x));
    min-width: 0;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    animation: fadeIn var(--miapp-motion-normal);

    font-family: var(--miapp-font-technical);
    font-size: var(--miapp-carga-font-size);
    font-weight: var(--font-weight-strong);
    color: var(--miapp-text-muted);
    letter-spacing: var(--miapp-letter-technical);
    text-transform: uppercase;
}

/*
 * Lienzo contractual de un runtime.
 * Establece el containing block de sus cargas locales.
 */
.miapp-runtime-lienzo {
    position: relative;
}

/*
 * Carga propia de un runtime.
 * Se centra respecto a su lienzo, nunca respecto al contenido desplazable.
 */
.miapp-runtime-lienzo > .mensaje-carga--runtime {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--miapp-carga-viewport-z);
    transform: translate(-50%, -50%);
    justify-content: center;
    width: fit-content;
    min-width: var(--miapp-carga-min-width);
    max-width: calc(100% - var(--miapp-carga-viewport-safe-x));
    margin: 0;
}

.mensaje-carga span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.mensaje-carga.exito {
    background: var(--miapp-ok-bg);
}

.mensaje-carga.exito span {
    color: var(--miapp-ok-text);
    font-weight: var(--font-weight-ui);
}

.mensaje-carga.error {
    background: var(--miapp-err-bg);
}

.mensaje-carga.error span {
    color: var(--miapp-err-text);
    font-weight: var(--font-weight-ui);
}

.bloqueado {
    pointer-events: none;
    opacity: 0.5;
    filter: blur(0.3px);
    transition: opacity var(--miapp-transition), filter var(--miapp-transition);
}


/* ─── Controles nativos transversales ───────────────────────────────────── */
/*
   Los popups de select y fecha los pinta el navegador/sistema operativo.
   color-scheme mantiene su variante oscura en todos los runtimes; los
   estilos de option/optgroup completan el contrato del select nativo.
*/
select,
input:is(
    [type="date"],
    [type="datetime-local"]
) {
    color-scheme: dark;
}

input:is(
    [type="date"],
    [type="datetime-local"]
) {
    font-variant-numeric: tabular-nums;
}

input:is(
    [type="date"],
    [type="datetime-local"]
):not(:disabled):not([readonly]) {
    cursor: pointer;
}

select option,
select optgroup {
    color: var(--miapp-text);
    background-color: var(--miapp-surface);
}

select option:disabled {
    color: var(--miapp-placeholder);
}


/* ─── Checkbox transversal ───────────────────────────────────────────────── */

.input-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    margin: 0;

    background: none;
    border: none;
    box-shadow: none;
    user-select: none;
}

.input-checkbox-wrapper:not(:has(
    > input.input-checkbox-control[type="checkbox"]:disabled
)) {
    cursor: pointer;
}

input.input-checkbox-control[type="checkbox"],
.miapp-checkbox-indicador {
    position: relative;
    display: inline-block;
    flex: 0 0 var(--miapp-checkbox-size);
    width: var(--miapp-checkbox-size);
    height: var(--miapp-checkbox-size);
    margin: 0;

    background: transparent;
    border: 1px solid var(--miapp-input-border);
    border-radius: var(--miapp-checkbox-radius);
    box-shadow:
        inset 0 1px 1px rgba(15, 23, 42, 0.025);

    vertical-align: middle;

    transition:
        border-color var(--miapp-transition),
        box-shadow var(--miapp-transition),
        opacity var(--miapp-transition),
        transform var(--miapp-transition);
}

input.input-checkbox-control[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
}

input.input-checkbox-control[type="checkbox"]::after,
.miapp-checkbox-indicador::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;

    width: var(--miapp-checkbox-glyph-width);
    height: var(--miapp-checkbox-glyph-height);

    border-left:
        var(--miapp-checkbox-stroke)
        solid
        var(--miapp-checkbox-accent);
    border-bottom:
        var(--miapp-checkbox-stroke)
        solid
        var(--miapp-checkbox-accent);

    transform:
        translate(-48%, -58%)
        rotate(-45deg)
        scale(0.72);
    transform-origin: center;
    opacity: 0;

    transition:
        transform var(--miapp-transition),
        opacity var(--miapp-transition);
}

input.input-checkbox-control[type="checkbox"]:checked,
.miapp-checkbox-indicador.miapp-checkbox-indicador--activo {
    background-color: var(--miapp-checkbox-accent);
    border-color: var(--miapp-checkbox-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--miapp-checkbox-accent) 24%, transparent);
}

input.input-checkbox-control[type="checkbox"]:checked::after,
.miapp-checkbox-indicador.miapp-checkbox-indicador--activo::after {
    border-left-color: var(--miapp-brand-contrast);
    border-bottom-color: var(--miapp-brand-contrast);
    transform:
        translate(-48%, -58%)
        rotate(-45deg)
        scale(1);
    opacity: 1;
}

input.input-checkbox-control[type="checkbox"]:indeterminate {
    border-color: var(--miapp-checkbox-accent);
}

input.input-checkbox-control[type="checkbox"]:indeterminate::after {
    width: calc(var(--miapp-checkbox-glyph-width) * 0.82);
    height: 0;
    border: 0;
    border-top:
        var(--miapp-checkbox-stroke)
        solid
        var(--miapp-checkbox-accent);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

input.input-checkbox-control[type="checkbox"]:not(:disabled) {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    input.input-checkbox-control[type="checkbox"]:not(:disabled):hover {
        border-color: var(--miapp-input-border-hover);
        box-shadow: 0 0 0 2px var(--miapp-ring);
        transform: scale(var(--miapp-checkbox-hover-scale));
    }
}

input.input-checkbox-control[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--miapp-section-accent);
    box-shadow:
        0 0 0 2px var(--miapp-ring);
}

input.input-checkbox-control[type="checkbox"]:disabled {
    border-color: var(--miapp-input-border);
    opacity: 0.55;
}

input.input-checkbox-control[type="checkbox"]:disabled::after {
    border-left-color: var(--miapp-text-muted);
    border-bottom-color: var(--miapp-text-muted);
}

input.input-checkbox-control[type="checkbox"].error {
    border-color: var(--miapp-err-border);
    box-shadow:
        0 0 0 2px var(--miapp-input-error-ring);
}

input.input-checkbox-control[type="checkbox"].error::after {
    border-left-color: var(--miapp-err-border);
    border-bottom-color: var(--miapp-err-border);
}

.miapp-checkbox-indicador {
    pointer-events: none;
}

.miapp-checkbox-indicador.miapp-checkbox-indicador--interactivo {
    pointer-events: auto;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .miapp-checkbox-indicador.miapp-checkbox-indicador--interactivo:hover {
        border-color: var(--miapp-input-border-hover);
        box-shadow: 0 0 0 2px var(--miapp-ring);
        transform: scale(var(--miapp-checkbox-hover-scale));
    }
}


/* ─── Checklist transversal ──────────────────────────────────────────────── */

.input-checklist-value {
    display: none !important;
}

.input-checklist-wrapper {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.input-checklist-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.input-checklist-toggle::-webkit-details-marker {
    display: none;
}

.input-checklist-summary {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-checklist-summary--placeholder {
    color: var(--miapp-placeholder);
}

/* Panel: mismo contrato visual que el selector de columnas de Listados.
 * Solo cambia el anclaje: aquí pertenece al campo que lo abre. */
.input-checklist-panel {
    --input-checklist-panel-width: 248px;
    --input-checklist-panel-max-height: 72vh;
    --input-checklist-panel-padding: 10px;
    --input-checklist-panel-viewport-margin: 8px;
    --input-checklist-panel-row-height: 32px;
    --input-checklist-panel-checkbox-size: 15px;
    --miapp-checkbox-size: var(--input-checklist-panel-checkbox-size);
    --input-checklist-panel-title-size: 10px;
    --input-checklist-panel-text-size: 11px;

    position: absolute;
    top: calc(100% + var(--input-checklist-panel-viewport-margin));
    left: 0;
    z-index: var(--miapp-z-dropdown);

    display: flex;
    flex-direction: column;
    width: min(
        var(--input-checklist-panel-width),
        calc(100vw - (2 * var(--input-checklist-panel-viewport-margin)))
    );
    max-height: var(--input-checklist-panel-max-height);
    padding: var(--input-checklist-panel-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--miapp-scrollbar-thumb) transparent;

    background: color-mix(
        in srgb,
        var(--miapp-header-bg) 99%,
        transparent
    );
    border: 1px solid var(--miapp-card-border);
    border-radius: var(--miapp-radius-modal);
    box-shadow: var(--miapp-shadow-float);

    animation: fadeIn var(--miapp-motion-fast);
}

.input-checklist-panel::-webkit-scrollbar {
    width: var(--miapp-scrollbar-size);
    height: var(--miapp-scrollbar-size);
}

.input-checklist-panel::-webkit-scrollbar-track {
    background: transparent;
}

.input-checklist-panel::-webkit-scrollbar-thumb {
    background-color: var(--miapp-scrollbar-thumb);
    border-radius: var(--miapp-radius-pill);
}

.input-checklist-panel::-webkit-scrollbar-thumb:hover {
    background-color: var(--miapp-scrollbar-thumb-hover);
}

.input-checklist-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.input-checklist-title {
    padding: 2px 4px 8px;
    color: var(--miapp-text-muted);
    font-family: var(--miapp-font-technical);
    font-size: var(--input-checklist-panel-title-size);
    font-weight: var(--font-weight-ui);
    letter-spacing: var(--miapp-letter-technical);
    text-transform: uppercase;
}

.input-checklist-list {
    display: flex;
    flex-direction: column;
}

.input-checklist-item {
    display: grid;
    grid-template-columns:
        var(--input-checklist-panel-checkbox-size)
        minmax(0, 1fr);
    align-items: center;
    gap: 9px;

    min-width: 0;
    min-height: var(--input-checklist-panel-row-height);
    padding: 0 4px;
    overflow-wrap: anywhere;

    color: var(--miapp-text-muted);
    font-family: var(--miapp-font-readable);
    font-size: var(--input-checklist-panel-text-size);
    font-weight: var(--font-weight-base);
    letter-spacing: 0;
    text-transform: none;

    cursor: pointer;
    user-select: none;
    border-radius: var(--miapp-radius-input);

    transition:
        background-color var(--miapp-transition),
        color var(--miapp-transition);
}

@media (hover: hover) and (pointer: fine) {
    .input-checklist-item:hover {
        background-color: var(--miapp-row-hover);
    }
}

.input-checklist-item:has(
    input.input-checkbox-control[type="checkbox"]:focus-visible
) {
    background-color: var(--miapp-row-hover);
}

.input-checklist-item:has(
    input.input-checkbox-control[type="checkbox"]:focus-visible
),
.input-checklist-item:has(
    input.input-checkbox-control[type="checkbox"]:checked
) {
    color: var(--miapp-text);
}

.input-checklist-item
input.input-checkbox-control[type="checkbox"] {
    justify-self: center;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES UNIFICADOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Base compartida */
.btn-app,
.modal-botones button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--miapp-btn-gap);
    font-family: var(--miapp-font-readable);
    font-weight: var(--font-weight-ui);
    cursor: pointer;
    transition: background var(--miapp-transition),
                border-color var(--miapp-transition),
                color var(--miapp-transition);
    white-space: nowrap;
    user-select: none;
    letter-spacing: var(--miapp-letter-technical);
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--miapp-radius-btn);
    height: var(--miapp-btn-height);
    padding: 0 var(--miapp-btn-padding-x);
    font-size: var(--miapp-btn-font-size);
}

.btn-app:disabled,
.modal-botones button:disabled {
    opacity: var(--miapp-control-disabled-opacity);
    cursor: not-allowed;
}

.btn-app:focus-visible,
.modal-botones button:focus-visible {
    outline:
        var(--miapp-input-focus-indicator-w)
        solid
        var(--miapp-border-focus);
    outline-offset: var(--miapp-input-focus-indicator-w);
}

.modal-boton-oculto {
    display: none;
}

.btn-app-sm {
    height: auto;
    padding: var(--miapp-btn-sm-padding-y) var(--miapp-btn-sm-padding-x);
    font-size: var(--miapp-btn-sm-font-size);
    border-radius: var(--miapp-radius-btn);
}

.btn-app-icon {
    width: var(--miapp-btn-icon-size);
    height: var(--miapp-btn-icon-size);
    padding: 0;
    gap: 0;
    flex: 0 0 var(--miapp-btn-icon-size);
}

.btn-app.btn-app-actionbar.btn-app-icon {
    width: var(--miapp-btn-actionbar-height);
    height: var(--miapp-btn-actionbar-height);
    padding: 0;
    gap: 0;
    flex: 0 0 var(--miapp-btn-actionbar-height);
}

/* Marca outline */
.btn-app-brand {
    color: var(--miapp-brand-text);
    border-color: var(--miapp-border-soft);
    background: var(--miapp-bg);
}

@media (hover: hover) and (pointer: fine) {
    .btn-app-brand:hover:not(:disabled) {
        background: var(--miapp-row-hover);
        border-color: var(--miapp-brand);
        color: var(--miapp-brand-text);
    }
}

.miapp-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--miapp-ui-icon-size);
    height: var(--miapp-ui-icon-size);
    flex: 0 0 var(--miapp-ui-icon-size);
    line-height: 1;
    pointer-events: none;
}

.miapp-ui-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
}

.btn-app {
    --miapp-ui-icon-size: var(--miapp-btn-ui-icon-size);
}

@media (hover: hover) and (pointer: fine) {
    .miapp-reveal-host .btn-app-reveal {
        opacity: 0;
        pointer-events: none;
        transition:
            opacity var(--miapp-transition),
            background var(--miapp-transition),
            border-color var(--miapp-transition),
            color var(--miapp-transition);
    }

    .miapp-reveal-host:hover .btn-app-reveal,
    .miapp-reveal-host:focus-within .btn-app-reveal {
        opacity: 1;
        pointer-events: auto;
    }

    .miapp-reveal-host:hover .btn-app-reveal:disabled,
    .miapp-reveal-host:focus-within .btn-app-reveal:disabled {
        opacity: var(--miapp-control-disabled-opacity);
    }
}

.modal-botones button {
    min-width: var(--miapp-modal-btn-min-width);
    height: var(--miapp-modal-btn-height);
    padding: 0 var(--miapp-modal-btn-padding-x);
    font-family: var(--miapp-font-readable);
    font-size: var(--miapp-modal-btn-font-size);
    font-weight: var(--miapp-modal-btn-font-weight);
    letter-spacing: var(--miapp-modal-btn-letter-spacing);
    text-transform: none;
}

/* 2. Primario */
.btn-app-primary,
.modal-botones .modal-btn-confirmar,
.modal-botones .modal-btn-ok {
    background: var(--miapp-btn-primary-bg);
    border-color: var(--miapp-btn-primary-border);
    color: var(--miapp-btn-primary-text);
}

@media (hover: hover) and (pointer: fine) {
    .btn-app-primary:hover:not(:disabled),
    .modal-botones .modal-btn-confirmar:hover:not(:disabled),
    .modal-botones .modal-btn-ok:hover:not(:disabled) {
        background: var(--miapp-btn-primary-hover-bg);
        border-color: var(--miapp-btn-primary-hover-border);
    }
}

/* 3. Neutro outline — fondo transparente */
.btn-app-outline,
.modal-botones .modal-btn-cancelar {
    border-color: var(--miapp-btn-outline-border);
    color: var(--miapp-btn-outline-text);
    background: var(--miapp-btn-outline-bg);
}

/* Hover neutros */
@media (hover: hover) and (pointer: fine) {
    .btn-app-outline:hover:not(:disabled),
    .modal-botones .modal-btn-cancelar:hover:not(:disabled) {
        background: var(--miapp-btn-outline-hover-bg);
        color: var(--miapp-btn-outline-hover-text);
        border-color: var(--miapp-btn-outline-hover-border);
    }
}

/* 4. Peligro outline */
.btn-app-danger {
    color: var(--miapp-btn-danger-text);
    border-color: var(--miapp-btn-danger-border);
    background: var(--miapp-btn-danger-bg);
}

@media (hover: hover) and (pointer: fine) {
    .btn-app-danger:hover:not(:disabled) {
        background: var(--miapp-btn-danger-hover-bg);
        border-color: var(--miapp-btn-danger-hover-border);
        color: var(--miapp-btn-danger-hover-text);
    }
}

/* 4.1. Botón de acción en barra operativa */
.btn-app-actionbar {
    height: var(--miapp-btn-actionbar-height);
    padding-inline: var(--miapp-btn-actionbar-padding-x);
    font-family: var(--miapp-font-readable);
    font-size: var(--miapp-btn-actionbar-font-size);
    font-weight: var(--miapp-btn-actionbar-font-weight);
    letter-spacing: var(--miapp-btn-actionbar-letter-spacing);
}

.btn-app-actionbar.btn-app-danger {
    color: var(--miapp-btn-actionbar-danger-text);
    border-color: var(--miapp-btn-actionbar-danger-border);
    background: var(--miapp-btn-actionbar-danger-bg);
}

@media (hover: hover) and (pointer: fine) {
    .btn-app-actionbar.btn-app-danger:hover:not(:disabled) {
        background: var(--miapp-btn-actionbar-danger-hover-bg);
        border-color: var(--miapp-btn-actionbar-danger-hover-border);
        color: var(--miapp-btn-actionbar-danger-hover-text);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--miapp-z-modal);
    background: rgba(15, 23, 42, 0.42);
    animation: fadeIn var(--miapp-motion-fast);
}

.modal-overlay-oculto {
    display: none;
}

.modal-contenedor {
    width: min(420px, calc(100% - 32px));
    padding: 0;
    overflow: hidden;
    background: var(--miapp-bg);
    border: 1px solid var(--miapp-card-border);
    border-radius: var(--miapp-radius-modal);
    animation: fadeIn var(--miapp-motion-fast);
}

.modal-titulo {
    min-height: 42px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    background: var(--miapp-header-bg);
    border-bottom: 2px solid var(--miapp-section-accent);
    color: var(--miapp-header-text);
    font-family: var(--miapp-font-technical);
    font-size: 10.5px;
    font-weight: var(--font-weight-strong);
    letter-spacing: var(--miapp-letter-technical);
    text-transform: uppercase;
}

.modal-mensaje {
    padding: 22px 22px 18px;
    margin: 0;
    color: var(--miapp-text);
    font-family: var(--miapp-font-readable);
    font-size: 13.5px;
    font-weight: var(--font-weight-copy);
    line-height: 1.55;
    text-align: left;
}

.modal-botones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px 22px;
}

@media (max-width: 520px) {
    .modal-overlay {
        align-items: flex-start;
        padding: 72px 14px 14px;
        box-sizing: border-box;
    }

    .modal-contenedor {
        width: 100%;
        max-width: none;
    }

    .modal-titulo {
        min-height: 40px;
        padding: 0 16px;
        font-size: 10px;
    }

    .modal-mensaje {
        padding: 18px 18px 16px;
        font-size: var(--miapp-btn-font-size);
        line-height: 1.55;
    }

    .modal-botones {
        flex-direction: column;
        align-items: stretch;
        padding: 0 18px 18px;
    }

    .modal-botones button {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO BADGE
   ═══════════════════════════════════════════════════════════════════════════ */
.estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: var(--miapp-radius-input);
    background: var(--miapp-status-neutral-bg);
    color: var(--miapp-status-neutral-text);
    font-size: 10px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    font-family: var(--miapp-font-readable);
}

.estado-badge.info {
    background: var(--miapp-status-info-bg);
    color: var(--miapp-status-info-text);
}

.estado-badge.warn {
    background: var(--miapp-status-warn-bg);
    color: var(--miapp-status-warn-text);
}

.estado-badge.ok {
    background: var(--miapp-status-ok-bg);
    color: var(--miapp-status-ok-text);
}

.estado-badge.err {
    background: var(--miapp-status-err-bg);
    color: var(--miapp-status-err-text);
}