/*
 * Componentes nativos de EasyLoad (Shared/Components/Grid): botones, menús y ElGrid.
 *
 * Reglas del theme switcher (css/tema/tema.css):
 *  - Ningún color fijo: todo sale de --tema-n-* (escala neutra), --tema-primary/--tema-primary-fg y --tema-radius,
 *    con el aspecto actual (Bootstrap) como fallback cuando no hay tema elegido.
 *  - El modo oscuro invierte --tema-n-*, así que estos estilos no necesitan reglas propias de dark,
 *    salvo las sombras.
 *  - Las reglas van dentro de .elg / .ctl-* para ganarle en especificidad a la capa generada
 *    (html[data-tema] a, button…).
 */

:root {
    --ctl-bg: var(--tema-n-0, #fff);
    --ctl-bg-sutil: var(--tema-n-50, #f8f9fa);
    --ctl-bg-hover: var(--tema-n-100, #f1f3f5);
    --ctl-borde: var(--tema-n-200, #dee2e6);
    --ctl-borde-fuerte: var(--tema-n-300, #ced4da);
    --ctl-texto: var(--tema-n-900, #212529);
    --ctl-texto-2: var(--tema-n-700, #495057);
    --ctl-tenue: var(--tema-n-500, #6c757d);
    --ctl-primario: var(--tema-primary, #007bff);
    --ctl-primario-fg: var(--tema-primary-fg, #fff);
    --ctl-peligro: #dc3545;
    --ctl-radio: var(--tema-radius, .375rem);
    --ctl-sombra: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
    --ctl-anillo: 0 0 0 3px color-mix(in srgb, var(--ctl-primario) 22%, transparent);
}

html[data-tema-mode="dark"] {
    --ctl-sombra: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
}

/* ---------- Preferencias de usuario (ThemeSwitcher): densidad, tamaño de texto y movimiento ---------- */
html[data-tema-densidad="compacta"] { --ctl-dens: -4px; --ctl-dens-fila: -6px; }
html[data-tema-densidad="comoda"] { --ctl-dens: 4px; --ctl-dens-fila: 8px; }
html[data-tema-fuente="pequena"] { --ctl-fe: .92; }
html[data-tema-fuente="grande"] { --ctl-fe: 1.12; }
html[data-tema-fuente="muy-grande"] { --ctl-fe: 1.25; }

html[data-tema-movimiento="reducido"] *,
html[data-tema-movimiento="reducido"] *::before,
html[data-tema-movimiento="reducido"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.ctl-icono {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ctl-girando {
    display: inline-flex;
    animation: ctl-girar .8s linear infinite;
}

@keyframes ctl-girar {
    to { transform: rotate(360deg); }
}

body.ctl-redimensionando,
body.ctl-redimensionando * {
    cursor: col-resize !important;
    user-select: none !important;
}

.ctl-capa-fondo {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* ---------- Botones ---------- */
.ctl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: calc(32px + var(--ctl-dens, 0px));
    padding: 0 12px;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font: inherit;
    font-size: calc(13px * var(--ctl-fe, 1));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}

    .ctl-btn:hover:not(:disabled),
    .ctl-btn.activo {
        background: var(--ctl-bg-hover);
    }

    .ctl-btn:focus-visible {
        outline: none;
        box-shadow: var(--ctl-anillo);
        border-color: var(--ctl-primario);
    }

    .ctl-btn:disabled {
        opacity: .5;
        cursor: default;
    }

.ctl-btn-icono {
    width: 32px;
    padding: 0;
}

    .ctl-btn-icono .ctl-btn-caret {
        display: none;
    }

.ctl-btn-plano {
    border-color: transparent;
    background: transparent;
}

.ctl-btn-primario {
    border-color: var(--ctl-primario);
    background: var(--ctl-primario);
    color: var(--ctl-primario-fg);
}

    .ctl-btn-primario:hover:not(:disabled) {
        background: color-mix(in srgb, var(--ctl-primario) 86%, #000);
        border-color: color-mix(in srgb, var(--ctl-primario) 86%, #000);
    }

.ctl-btn-caret .ctl-icono {
    width: 14px;
    height: 14px;
    opacity: .6;
}

.ctl-input {
    height: calc(32px + var(--ctl-dens, 0px));
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    border: 1px solid var(--ctl-borde-fuerte);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font: inherit;
    font-size: calc(13px * var(--ctl-fe, 1));
}

    .ctl-input:focus {
        outline: none;
        border-color: var(--ctl-primario);
        box-shadow: var(--ctl-anillo);
    }

/* ---------- Menú desplegable (ElMenuBoton) ---------- */
.ctl-menu {
    position: relative;
    display: inline-flex;
}

.ctl-menu-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 140px));
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--ctl-borde);
    border-radius: calc(var(--ctl-radio) * 1.5);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    box-shadow: var(--ctl-sombra);
    animation: ctl-aparecer .12s ease-out;
}

    .ctl-menu-lista.derecha {
        left: auto;
        right: 0;
    }

@keyframes ctl-aparecer {
    from { opacity: 0; transform: translateY(-4px); }
}

.ctl-menu-titulo {
    padding: 6px 10px 4px;
    color: var(--ctl-tenue);
    font-size: calc(11px * var(--ctl-fe, 1));
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ctl-menu .ctl-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: calc(32px + var(--ctl-dens, 0px));
    padding: 0 10px;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-texto);
    font: inherit;
    font-size: calc(13px * var(--ctl-fe, 1));
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .ctl-menu .ctl-menu-item:hover,
    .ctl-menu .ctl-menu-item:focus-visible {
        outline: none;
        background: var(--ctl-bg-hover);
    }

    .ctl-menu .ctl-menu-item .ctl-icono {
        color: var(--ctl-tenue);
    }

.ctl-menu-buscar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 2px 4px;
    padding: 0 8px;
    height: calc(32px + var(--ctl-dens, 0px));
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    color: var(--ctl-tenue);
}

    .ctl-menu-buscar input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ctl-texto);
        font-size: calc(13px * var(--ctl-fe, 1));
    }

.ctl-menu-vacio {
    padding: 8px 10px;
    color: var(--ctl-tenue);
    font-size: calc(12.5px * var(--ctl-fe, 1));
}

/* ---------- ElGrid ---------- */
.elg {
    --ctl-grid-fila: calc(34px + var(--ctl-dens-fila, 0px));
    --ctl-grid-fuente: calc(12.5px * var(--ctl-fe, 1));
    --ctl-grid-borde-fila: color-mix(in srgb, var(--ctl-borde) 70%, transparent);
    --ctl-grid-zebra: color-mix(in srgb, var(--ctl-bg-sutil) 70%, var(--ctl-bg));
    --ctl-grid-sel: color-mix(in srgb, var(--ctl-primario) 9%, var(--ctl-bg));
    --ctl-grid-sel-hover: color-mix(in srgb, var(--ctl-primario) 14%, var(--ctl-bg));
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    border: 1px solid var(--ctl-borde);
    border-radius: calc(var(--ctl-radio) * 1.5);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font-size: var(--ctl-grid-fuente);
}

.ctl-grid-compacta {
    --ctl-grid-fila: calc(28px + var(--ctl-dens-fila, 0px));
    --ctl-grid-fuente: calc(12px * var(--ctl-fe, 1));
}

.ctl-grid-comoda {
    --ctl-grid-fila: calc(42px + var(--ctl-dens-fila, 0px));
    --ctl-grid-fuente: calc(13px * var(--ctl-fe, 1));
}

.ctl-grid-tenue {
    color: var(--ctl-tenue);
}

.elg .ctl-grid-enlace {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ctl-primario);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

    .elg .ctl-grid-enlace:hover {
        text-decoration: underline;
    }

/* Barra */
.ctl-grid-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ctl-borde);
}

.ctl-grid-barra-acciones,
.ctl-grid-barra-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ctl-grid-barra-herramientas {
    margin-left: auto;
}

.ctl-grid-separador-barra {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: var(--ctl-borde);
}

.ctl-grid-buscar {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 300px;
    max-width: 100%;
    height: calc(32px + var(--ctl-dens, 0px));
    padding: 0 8px;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-tenue);
    transition: border-color .12s, box-shadow .12s;
}

    .ctl-grid-buscar:focus-within {
        border-color: var(--ctl-primario);
        box-shadow: var(--ctl-anillo);
    }

    .ctl-grid-buscar input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ctl-texto);
        font: inherit;
        font-size: calc(13px * var(--ctl-fe, 1));
    }

        .ctl-grid-buscar input::placeholder {
            color: var(--ctl-tenue);
        }

.ctl-grid-buscar-compacto {
    width: 100%;
    height: 30px;
}

.elg .ctl-grid-buscar-limpiar {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ctl-tenue);
    cursor: pointer;
}

    .elg .ctl-grid-buscar-limpiar:hover {
        background: var(--ctl-bg-hover);
        color: var(--ctl-texto);
    }

    .elg .ctl-grid-buscar-limpiar .ctl-icono {
        width: 14px;
        height: 14px;
    }

/* Selección y filtros activos */
.ctl-grid-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ctl-borde);
    background: var(--ctl-bg-sutil);
    font-size: calc(12.5px * var(--ctl-fe, 1));
}

.ctl-grid-seleccion,
.ctl-grid-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.ctl-grid-seleccion-cuenta {
    color: var(--ctl-primario);
    font-weight: 600;
}

.ctl-grid-chip {
    display: inline-flex;
    align-items: center;
    max-width: 420px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--ctl-primario) 28%, var(--ctl-borde));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ctl-primario) 7%, var(--ctl-bg));
    color: var(--ctl-texto);
}

.elg .ctl-grid-chip-texto {
    overflow: hidden;
    padding: 0 4px 0 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ctl-grid-chip-campo {
    font-weight: 600;
}

.elg .ctl-grid-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ctl-tenue);
    cursor: pointer;
}

    .elg .ctl-grid-chip-x:hover {
        background: color-mix(in srgb, var(--ctl-primario) 16%, var(--ctl-bg));
        color: var(--ctl-texto);
    }

    .elg .ctl-grid-chip-x .ctl-icono {
        width: 13px;
        height: 13px;
    }

/* Tabla */
.ctl-grid-marco {
    position: relative;
    flex: 1;
    min-height: 0;
}

.ctl-grid-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    outline: none;
    overscroll-behavior: contain;
}

.ctl-grid-tabla {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .ctl-grid-tabla thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        height: 38px;
        padding: 0;
        border-bottom: 1px solid var(--ctl-borde);
        background: var(--ctl-bg-sutil);
        color: var(--ctl-texto-2);
        font-size: calc(12px * var(--ctl-fe, 1));
        font-weight: 600;
        text-align: left;
        vertical-align: middle;
        user-select: none;
    }

        .ctl-grid-tabla thead th.ctl-grid-fija {
            z-index: 4;
        }

.ctl-grid-th-contenido {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 4px 0 10px;
}

.elg .ctl-grid-th-titulo {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

    .elg .ctl-grid-th-titulo:disabled {
        cursor: grab;
    }

    .elg .ctl-grid-th-titulo:focus-visible {
        outline: 2px solid var(--ctl-primario);
        outline-offset: -2px;
        border-radius: 4px;
    }

.ctl-grid-centro .ctl-grid-th-titulo {
    justify-content: center;
}

.ctl-grid-derecha .ctl-grid-th-titulo {
    justify-content: flex-end;
}

.ctl-grid-th-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl-grid-ordenada {
    color: var(--ctl-texto) !important;
}

.ctl-grid-th-orden {
    display: inline-flex;
    align-items: flex-start;
    color: var(--ctl-primario);
}

    .ctl-grid-th-orden .ctl-icono {
        width: 14px;
        height: 14px;
    }

    .ctl-grid-th-orden sup {
        top: -.1em;
        font-size: calc(9px * var(--ctl-fe, 1));
        font-weight: 700;
    }

.elg .ctl-grid-th-filtro {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-tenue);
    opacity: .35;
    cursor: pointer;
    transition: opacity .12s, background-color .12s;
}

    .elg .ctl-grid-th-filtro .ctl-icono {
        width: 13px;
        height: 13px;
    }

.elg th:hover .ctl-grid-th-filtro,
.elg .ctl-grid-th-filtro:focus-visible,
.elg .ctl-grid-th-filtro.abierto {
    opacity: 1;
}

.elg .ctl-grid-th-filtro:hover,
.elg .ctl-grid-th-filtro.abierto {
    background: var(--ctl-bg-hover);
    color: var(--ctl-texto);
}

.elg .ctl-grid-th-filtro.activo {
    color: var(--ctl-primario);
    opacity: 1;
}

    .elg .ctl-grid-th-filtro.activo .ctl-icono {
        fill: currentColor;
    }

.ctl-grid-resize {
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    z-index: 1;
    width: 8px;
    cursor: col-resize;
}

    .ctl-grid-resize::after {
        content: "";
        position: absolute;
        top: 9px;
        bottom: 9px;
        left: 3px;
        width: 2px;
        border-radius: 2px;
        background: var(--ctl-borde);
        transition: background-color .12s;
    }

    .ctl-grid-resize:hover::after {
        top: 0;
        bottom: 0;
        background: var(--ctl-primario);
    }

.ctl-grid-tabla thead th:last-child .ctl-grid-resize {
    right: 0;
}

.ctl-grid-tabla th.ctl-grid-destino {
    box-shadow: inset 3px 0 0 var(--ctl-primario);
}

.ctl-grid-tabla th[draggable="true"] {
    cursor: grab;
}

.ctl-grid-tabla tbody td {
    overflow: hidden;
    height: var(--ctl-grid-fila);
    padding: 0 10px;
    border-bottom: 1px solid var(--ctl-grid-borde-fila);
    background: var(--ctl-bg);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ctl-grid-tabla tbody tr:nth-child(even) td {
    background: var(--ctl-grid-zebra);
}

.ctl-grid-tabla tbody tr.ctl-grid-fila:hover td {
    background: var(--ctl-bg-hover);
}

.ctl-grid-tabla tbody tr.seleccionada td {
    background: var(--ctl-grid-sel);
}

.ctl-grid-tabla tbody tr.seleccionada:hover td {
    background: var(--ctl-grid-sel-hover);
}

.ctl-grid-tabla tbody tr.ctl-grid-fila {
    outline: none;
    cursor: default;
}

    .ctl-grid-tabla tbody tr.ctl-grid-fila:focus-visible td {
        box-shadow: inset 0 1px 0 var(--ctl-primario), inset 0 -1px 0 var(--ctl-primario);
    }

        .ctl-grid-tabla tbody tr.ctl-grid-fila:focus-visible td:first-child {
            box-shadow: inset 2px 0 0 var(--ctl-primario), inset 0 1px 0 var(--ctl-primario), inset 0 -1px 0 var(--ctl-primario);
        }

/* Preferencias de tablas (ThemeSwitcher): filas alternadas, líneas verticales y resaltado al pasar el mouse */
html[data-tema-grid-cebra="no"] .elg {
    --ctl-grid-zebra: var(--ctl-bg);
}

html[data-tema-grid-lineas="si"] .ctl-grid-tabla thead th:not(:first-child),
html[data-tema-grid-lineas="si"] .ctl-grid-tabla tbody td:not(:first-child) {
    border-left: 1px solid var(--ctl-grid-borde-fila);
}

html[data-tema-grid-hover="no"] .ctl-grid-tabla tbody tr.ctl-grid-fila:hover td {
    background: var(--ctl-bg);
}

html[data-tema-grid-hover="no"] .ctl-grid-tabla tbody tr.ctl-grid-fila:nth-child(even):hover td {
    background: var(--ctl-grid-zebra);
}

html[data-tema-grid-hover="no"] .ctl-grid-tabla tbody tr.ctl-grid-fila.seleccionada:hover td {
    background: var(--ctl-grid-sel);
}

.ctl-grid-tabla .ctl-grid-centro {
    text-align: center;
}

.ctl-grid-tabla .ctl-grid-derecha {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ctl-grid-tabla td.ctl-grid-fija {
    position: sticky;
    z-index: 1;
}

.ctl-grid-tabla .ctl-grid-fija-ultima {
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .22);
    clip-path: inset(0 -12px 0 0);
}

.ctl-grid-tabla .ctl-grid-th-sel,
.ctl-grid-tabla .ctl-grid-td-sel {
    left: 0;
    padding: 0;
    text-align: center;
}

.ctl-grid-tabla .ctl-grid-th-sel {
    position: sticky;
}

/* Casilla propia: hereda el primario y el radio del tema (la nativa no admite el estado "mixto" sin JS) */
.ctl-grid-check {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ctl-borde-fuerte);
    border-radius: calc(var(--ctl-radio) * .6);
    background: var(--ctl-bg);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .1s, border-color .1s;
}

    .ctl-grid-check:hover {
        border-color: var(--ctl-primario);
    }

    .ctl-grid-check:focus-visible {
        outline: none;
        box-shadow: var(--ctl-anillo);
    }

    .ctl-grid-check[data-estado="on"],
    .ctl-grid-check[data-estado="mixto"] {
        border-color: var(--ctl-primario);
        background: var(--ctl-primario);
    }

        .ctl-grid-check[data-estado="on"]::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 4.5px;
            width: 4px;
            height: 8px;
            border: solid var(--ctl-primario-fg);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .ctl-grid-check[data-estado="mixto"]::after {
            content: "";
            position: absolute;
            top: 5.5px;
            left: 2.5px;
            width: 8px;
            height: 2px;
            border-radius: 1px;
            background: var(--ctl-primario-fg);
        }

/* Carga */
.ctl-grid-progreso {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ctl-primario) 15%, transparent);
}

    .ctl-grid-progreso::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 35%;
        background: var(--ctl-primario);
        animation: ctl-grid-progreso 1.1s ease-in-out infinite;
    }

@keyframes ctl-grid-progreso {
    from { left: -35%; }
    to { left: 100%; }
}

.ctl-grid-actualizando tbody {
    opacity: .55;
    transition: opacity .15s;
}

.ctl-grid-esqueleto {
    display: inline-block;
    height: 10px;
    max-width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ctl-bg-hover) 25%, var(--ctl-bg-sutil) 37%, var(--ctl-bg-hover) 63%);
    background-size: 400% 100%;
    vertical-align: middle;
    animation: ctl-grid-brillo 1.4s ease infinite;
}

.ctl-grid-esqueleto-check {
    width: 16px;
    height: 16px;
}

@keyframes ctl-grid-brillo {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

.ctl-grid-aviso {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--ctl-texto-2);
    text-align: center;
    pointer-events: none;
}

    .ctl-grid-aviso > * {
        pointer-events: auto;
    }

.ctl-grid-aviso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ctl-bg-hover);
    color: var(--ctl-tenue);
}

    .ctl-grid-aviso-icono .ctl-icono {
        width: 22px;
        height: 22px;
    }

.ctl-grid-aviso-error {
    background: color-mix(in srgb, var(--ctl-peligro) 12%, var(--ctl-bg));
    color: var(--ctl-peligro);
}

/* Paginador */
.ctl-grid-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* A la izquierda: la esquina inferior derecha la ocupa el botón flotante de la app */
    justify-content: flex-start;
    gap: 8px 28px;
    padding: 6px 10px;
    border-top: 1px solid var(--ctl-borde);
    color: var(--ctl-texto-2);
    font-size: calc(12.5px * var(--ctl-fe, 1));
}

    .ctl-grid-pie strong {
        color: var(--ctl-texto);
        font-weight: 600;
    }

.ctl-grid-pie-nav,
.ctl-grid-paginas,
.ctl-grid-pie-tamano {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ctl-grid-pie-nav {
    flex-wrap: wrap;
    gap: 12px;
}

.ctl-grid-pie-tamano {
    gap: 6px;
}

    .ctl-grid-pie-tamano .ctl-input {
        width: auto;
        height: 30px;
        padding: 0 4px;
    }

.elg .ctl-grid-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-texto-2);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .elg .ctl-grid-pag:hover:not(:disabled):not(.actual) {
        background: var(--ctl-bg-hover);
    }

    .elg .ctl-grid-pag.actual {
        background: var(--ctl-primario);
        color: var(--ctl-primario-fg);
        font-weight: 600;
    }

    .elg .ctl-grid-pag:disabled {
        opacity: .35;
        cursor: default;
    }

    .elg .ctl-grid-pag:focus-visible {
        outline: none;
        box-shadow: var(--ctl-anillo);
    }

/* Popups: filtro y columnas */
.ctl-grid-popup {
    position: fixed;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    border: 1px solid var(--ctl-borde);
    border-radius: calc(var(--ctl-radio) * 1.5);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    box-shadow: var(--ctl-sombra);
    font-size: calc(13px * var(--ctl-fe, 1));
    animation: ctl-aparecer .12s ease-out;
}

.ctl-grid-columnas {
    position: absolute;
    top: 48px;
    right: 10px;
    max-height: min(560px, calc(100% - 60px));
}

.ctl-grid-popup-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--ctl-borde);
}

    .ctl-grid-popup-cab strong {
        overflow: hidden;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ctl-grid-popup-cab .ctl-btn {
        width: 28px;
        height: 28px;
        margin-left: auto;
    }

.ctl-grid-popup-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
    overflow-y: auto;
}

.ctl-grid-popup-pie {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--ctl-borde);
    background: var(--ctl-bg-sutil);
}

.ctl-grid-filtro-orden {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-bottom: 1px solid var(--ctl-borde);
}

.elg .ctl-grid-opcion-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .elg .ctl-grid-opcion-boton .ctl-icono {
        width: 14px;
        height: 14px;
        color: var(--ctl-tenue);
    }

    .elg .ctl-grid-opcion-boton:hover {
        background: var(--ctl-bg-hover);
    }

    .elg .ctl-grid-opcion-boton.activo {
        color: var(--ctl-primario);
        font-weight: 600;
    }

        .elg .ctl-grid-opcion-boton.activo .ctl-icono {
            color: currentColor;
        }

.ctl-grid-condicion {
    display: grid;
    gap: 6px;
}

.ctl-grid-separador {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ctl-tenue);
    font-size: calc(11px * var(--ctl-fe, 1));
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .ctl-grid-separador::before,
    .ctl-grid-separador::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ctl-borde);
    }

/* Filtros avanzados del popup de columna: la condición queda plegada bajo la lista de valores */
.ctl-grid-avanzado-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 2px 4px;
    border: 0;
    background: transparent;
    color: var(--ctl-tenue);
    font: inherit;
    font-size: calc(12px * var(--ctl-fe, 1));
    cursor: pointer;
}

    .ctl-grid-avanzado-toggle:hover {
        color: var(--ctl-texto);
    }

    .ctl-grid-avanzado-toggle .ctl-icono {
        transform: rotate(-90deg);
        transition: transform .15s;
    }

    .ctl-grid-avanzado-toggle.abierto .ctl-icono {
        transform: none;
    }

.ctl-grid-avanzado-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ctl-primario);
}

.ctl-grid-valores {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    min-height: 60px;
    padding: 4px 0;
    overflow-y: auto;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
}

.ctl-grid-valor {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    padding: 2px 10px;
    font-weight: 400;
    cursor: pointer;
}

    .ctl-grid-valor:hover {
        background: var(--ctl-bg-hover);
    }

    .ctl-grid-valor > span:not(.ctl-grid-esqueleto) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ctl-grid-valor input[type="checkbox"],
    .ctl-grid-check-linea input[type="checkbox"] {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--ctl-primario);
    }

.ctl-grid-valor-todos {
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ctl-borde);
    font-weight: 500;
}

.ctl-grid-valor-vacio > span {
    color: var(--ctl-tenue);
    font-style: italic;
}

.ctl-grid-valores-nota {
    padding: 8px 10px;
    color: var(--ctl-tenue);
    font-size: calc(12px * var(--ctl-fe, 1));
}

.ctl-grid-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.elg .ctl-grid-preset {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--ctl-borde);
    border-radius: 999px;
    background: var(--ctl-bg);
    color: var(--ctl-texto-2);
    font: inherit;
    font-size: calc(12px * var(--ctl-fe, 1));
    cursor: pointer;
}

    .elg .ctl-grid-preset:hover {
        background: var(--ctl-bg-hover);
    }

    .elg .ctl-grid-preset.activo {
        border-color: var(--ctl-primario);
        background: color-mix(in srgb, var(--ctl-primario) 9%, var(--ctl-bg));
        color: var(--ctl-primario);
        font-weight: 600;
    }

.ctl-grid-rango {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .ctl-grid-rango label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        color: var(--ctl-tenue);
        font-size: calc(12px * var(--ctl-fe, 1));
    }

.ctl-grid-check-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: calc(12.5px * var(--ctl-fe, 1));
    cursor: pointer;
}

.ctl-grid-lista-columnas {
    max-height: 340px;
}

.ctl-grid-columna-item {
    display: flex;
    align-items: center;
    padding-right: 4px;
}

    .ctl-grid-columna-item .ctl-grid-valor {
        flex: 1;
        min-width: 0;
    }

.elg .ctl-grid-fijar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-tenue);
    opacity: .35;
    cursor: pointer;
}

    .elg .ctl-grid-fijar .ctl-icono {
        width: 14px;
        height: 14px;
    }

.elg .ctl-grid-columna-item:hover .ctl-grid-fijar,
.elg .ctl-grid-fijar:focus-visible {
    opacity: 1;
}

.elg .ctl-grid-fijar:hover {
    background: var(--ctl-bg-hover);
}

.elg .ctl-grid-fijar.activo {
    color: var(--ctl-primario);
    opacity: 1;
}

.ctl-grid-ayuda {
    margin: 0;
    font-size: calc(12px * var(--ctl-fe, 1));
}

/* Contenido de celdas que usan las páginas */
.elg .ctl-grid-celda-enlace {
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ctl-primario);
    font: inherit;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

    .elg .ctl-grid-celda-enlace:hover {
        text-decoration: underline;
    }

.elg .ctl-grid-pildora {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: calc(11.5px * var(--ctl-fe, 1));
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ctl-grid-barra-herramientas {
        width: 100%;
        margin-left: 0;
    }

    .ctl-grid-buscar {
        flex: 1;
        width: auto;
    }

    .ctl-grid-pie {
        justify-content: center;
    }

    .ctl-grid-columnas {
        right: 8px;
        left: 8px;
        width: auto;
    }
}

/* ---------- Botones: variantes extra (Shared/Components/Ui) ---------- */
.ctl-btn-peligro {
    border-color: var(--ctl-peligro);
    background: var(--ctl-peligro);
    color: #fff;
}

    .ctl-btn-peligro:hover:not(:disabled) {
        background: color-mix(in srgb, var(--ctl-peligro) 86%, #000);
    }

.ctl-btn-redondo {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
}

.ctl-btn.ocupado {
    cursor: progress;
}

/* ---------- Barra de acciones (cabecera de pantallas de edición) ---------- */
.ctl-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.ctl-barra-titulo {
    margin-right: auto;
    min-width: 0;
}

    .ctl-barra-titulo h5 {
        margin: 0;
    }

.ctl-barra-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ---------- Pestañas (ElPestanas) ---------- */
.ctl-pestanas-cabecera {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--ctl-borde);
    scrollbar-width: thin;
}

.ctl-pestanas .ctl-pestana-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ctl-radio) var(--ctl-radio) 0 0;
    background: transparent;
    color: var(--ctl-tenue);
    font: inherit;
    font-size: calc(13px * var(--ctl-fe, 1));
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .12s, background-color .12s;
}

    .ctl-pestanas .ctl-pestana-boton:hover:not(:disabled) {
        color: var(--ctl-texto);
        background: var(--ctl-bg-hover);
    }

    .ctl-pestanas .ctl-pestana-boton.activa,
    .ctl-pestanas .ctl-pestana-boton.activa:hover {
        color: var(--ctl-primario);
    }

        .ctl-pestanas .ctl-pestana-boton.activa::after {
            content: "";
            position: absolute;
            right: 8px;
            bottom: 0;
            left: 8px;
            height: 2px;
            border-radius: 2px;
            background: var(--ctl-primario);
        }

    .ctl-pestanas .ctl-pestana-boton:focus-visible {
        outline: none;
        box-shadow: inset var(--ctl-anillo);
    }

    .ctl-pestanas .ctl-pestana-boton:disabled {
        opacity: .5;
        cursor: default;
    }

.ctl-pestana-panel {
    padding-top: 12px;
}

/* ---------- Diálogo (ElDialogo / ElDialogos) ---------- */
.ctl-dialogo-fondo {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .4);
    animation: ctl-aparecer .12s ease-out;
}

.ctl-dialogo {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    border: 1px solid var(--ctl-borde);
    border-radius: calc(var(--ctl-radio) * 2);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    box-shadow: var(--ctl-sombra);
    font-size: calc(14px * var(--ctl-fe, 1));
    outline: none;
}

.ctl-dialogo-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 6px;
}

.ctl-dialogo-titulo {
    flex: 1;
    min-width: 0;
    font-size: calc(16px * var(--ctl-fe, 1));
    font-weight: 600;
}

.ctl-dialogo-cuerpo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 16px;
}

.ctl-dialogo-mensaje {
    margin: 0 0 8px;
    color: var(--ctl-texto-2);
    white-space: pre-line;
}

.ctl-dialogo-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
}

.ctl-lista-mensajes {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ctl-lista-mensajes li {
        padding: 8px 0;
        border-bottom: 1px solid var(--ctl-borde);
        overflow-wrap: anywhere;
    }

        .ctl-lista-mensajes li:last-child {
            border-bottom: 0;
        }

@keyframes ctl-aparecer {
    from { opacity: 0; }
}

/* ---------- Tabla simple (ElTablaCambios) ---------- */
.ctl-tabla-marco {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
}

.ctl-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(13px * var(--ctl-fe, 1));
}

    .ctl-tabla th {
        position: sticky;
        top: 0;
        padding: 6px 10px;
        background: var(--ctl-bg-sutil);
        color: var(--ctl-texto-2);
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid var(--ctl-borde);
    }

    .ctl-tabla td {
        padding: 6px 10px;
        border-bottom: 1px solid var(--ctl-borde);
        overflow-wrap: anywhere;
        vertical-align: top;
    }

    .ctl-tabla tr:last-child td {
        border-bottom: 0;
    }

@media (max-width: 767.98px) {
    .ctl-barra-acciones {
        justify-content: flex-start;
    }
}

/* ---------- Campos de formulario (ElTexto, ElNumero, ElCombo) ----------
   Etiqueta centrada arriba y control de 31 px, como los campos FloatLabelType.Always que sustituyen. */
.ctl-campo {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ctl-campo-etiqueta {
    display: block;
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--ctl-texto);
    font-size: calc(14px * var(--ctl-fe, 1));
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl-campo .ctl-campo-control {
    width: 100%;
    min-width: 0;
    height: calc(31px + var(--ctl-dens, 0px));
    padding: 0 8px;
    border: 1px solid var(--ctl-borde-fuerte);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font: inherit;
    font-size: calc(14px * var(--ctl-fe, 1));
    transition: border-color .12s, box-shadow .12s;
}

    .ctl-campo .ctl-campo-control:focus {
        outline: none;
        border-color: var(--ctl-primario);
        box-shadow: var(--ctl-anillo);
    }

.ctl-campo .ctl-campo-area {
    height: auto;
    min-height: 62px;
    padding: 6px 8px;
    resize: vertical;
}

.ctl-campo .ctl-campo-numero {
    text-align: right;
}

.ctl-campo.lectura .ctl-campo-control {
    background-color: var(--tema-n-100, #e9ecef);
    color: var(--ctl-tenue);
    cursor: default;
}

    .ctl-campo.lectura .ctl-campo-control:focus {
        border-color: var(--ctl-borde-fuerte);
        box-shadow: none;
    }

/* Los estilos en línea (colores de estatus) ganan al fondo de solo lectura */
.ctl-campo.lectura .ctl-campo-control[style] {
    opacity: 1;
}

.ctl-campo.error .ctl-campo-control {
    border-color: var(--ctl-peligro);
}

    .ctl-campo.error .ctl-campo-control:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-peligro) 22%, transparent);
    }

.ctl-campo.error .ctl-campo-etiqueta {
    color: var(--ctl-peligro);
}

/* ---------- ElCombo ---------- */
.ctl-combo-caja {
    position: relative;
}

.ctl-combo .ctl-campo-control {
    padding-right: 52px;
    text-overflow: ellipsis;
}

.ctl-combo:not(.lectura) .ctl-campo-control {
    cursor: pointer;
}

.ctl-combo:not(.lectura) .ctl-campo-control:not([readonly]) {
    cursor: text;
}

.ctl-combo-flecha,
:is(.ctl-combo, .ctl-fecha) .ctl-combo-limpiar {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    color: inherit;
    opacity: .6;
}

.ctl-combo-flecha {
    right: 6px;
    cursor: pointer;
    transition: transform .12s;
}

.ctl-combo.abierto .ctl-combo-flecha {
    transform: translateY(-50%) rotate(180deg);
}

:is(.ctl-combo, .ctl-fecha) .ctl-combo-limpiar {
    right: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

    :is(.ctl-combo, .ctl-fecha) .ctl-combo-limpiar:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

.ctl-combo-flecha .ctl-icono,
.ctl-combo-limpiar .ctl-icono {
    width: 14px;
    height: 14px;
}

.ctl-combo-lista {
    position: fixed;
    z-index: 1050;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    box-shadow: var(--ctl-sombra);
    font-size: calc(13px * var(--ctl-fe, 1));
    text-align: left;
}

.ctl-combo-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: calc(30px + var(--ctl-dens, 0px));
    padding: 5px 8px;
    border-radius: calc(var(--ctl-radio) - 2px);
    cursor: pointer;
}

    .ctl-combo-opcion.resaltada {
        background: var(--ctl-bg-hover);
    }

    .ctl-combo-opcion.elegida {
        color: var(--ctl-primario);
        font-weight: 600;
    }

.ctl-combo-encabezado {
    position: sticky;
    top: -4px;
    display: flex;
    gap: 8px;
    margin: -4px -4px 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--ctl-borde);
    background: var(--ctl-bg-sutil);
    color: var(--ctl-texto-2);
    font-weight: 600;
}

.ctl-combo-vacio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    color: var(--ctl-tenue);
}

/* Columnas Alias / Razón social del combo de clientes */
.ctl-combo-col {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .ctl-combo-col.alias {
        flex: 0 0 40%;
    }

    .ctl-combo-col.razon {
        flex: 1 1 60%;
    }

/* ---------- ElTooltip ---------- */
.ctl-tooltip {
    position: relative;
    display: inline-block;
}

    .ctl-tooltip.bloque {
        display: block;
    }

.ctl-tooltip-texto {
    position: absolute;
    left: 50%;
    z-index: 1045;
    width: max-content;
    max-width: 260px;
    padding: 5px 8px;
    border-radius: var(--ctl-radio);
    background: var(--tema-n-900, #212529);
    color: var(--tema-n-0, #fff);
    font-size: calc(12px * var(--ctl-fe, 1));
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .12s, transform .12s;
}

    .ctl-tooltip-texto.arriba {
        bottom: calc(100% + 6px);
    }

    .ctl-tooltip-texto.abajo {
        top: calc(100% + 6px);
    }

.ctl-tooltip:hover > .ctl-tooltip-texto,
.ctl-tooltip:focus-within > .ctl-tooltip-texto {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- ElFecha ---------- */
.ctl-fecha .ctl-campo-control {
    padding-right: 52px;
}

.ctl-fecha .ctl-campo-control:disabled {
    background-color: var(--tema-n-100, #e9ecef);
    color: var(--ctl-tenue);
    cursor: default;
}

.ctl-fecha .ctl-fecha-boton {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--ctl-radio) - 1px);
    background: transparent;
    color: inherit;
    opacity: .7;
    transform: translateY(-50%);
    cursor: pointer;
}

    .ctl-fecha .ctl-fecha-boton:hover,
    .ctl-fecha.abierto .ctl-fecha-boton {
        opacity: 1;
        background: var(--ctl-bg-hover);
        color: var(--ctl-primario);
    }

.ctl-fecha-popup {
    position: fixed;
    z-index: 1050;
    width: 292px;
    padding: 10px;
    border: 1px solid var(--ctl-borde);
    border-radius: calc(var(--ctl-radio) * 1.5);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    box-shadow: var(--ctl-sombra);
    font-size: calc(13px * var(--ctl-fe, 1));
    user-select: none;
}

    .ctl-fecha-popup button {
        font: inherit;
    }

.ctl-fecha-cab {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.ctl-fecha-popup .ctl-fecha-nav,
.ctl-fecha-popup .ctl-fecha-titulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-texto);
    cursor: pointer;
}

.ctl-fecha-popup .ctl-fecha-nav {
    width: 30px;
    padding: 0;
}

.ctl-fecha-popup .ctl-fecha-titulo {
    flex: 1;
    font-weight: 600;
}

    .ctl-fecha-popup .ctl-fecha-nav:hover,
    .ctl-fecha-popup .ctl-fecha-titulo:hover:not(:disabled) {
        background: var(--ctl-bg-hover);
    }

    .ctl-fecha-popup .ctl-fecha-titulo:disabled {
        cursor: default;
    }

.ctl-fecha-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ctl-fecha-semana {
    padding: 4px 0;
    color: var(--ctl-tenue);
    font-size: calc(11.5px * var(--ctl-fe, 1));
    font-weight: 600;
    text-align: center;
}

.ctl-fecha-rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px 0;
}

.ctl-fecha-popup .ctl-fecha-celda {
    position: relative;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-texto);
    cursor: pointer;
}

.ctl-fecha-rejilla .ctl-fecha-celda {
    height: 44px;
}

    .ctl-fecha-popup .ctl-fecha-celda:hover:not(:disabled) {
        background: var(--ctl-bg-hover);
    }

    .ctl-fecha-popup .ctl-fecha-celda.fuera {
        color: var(--ctl-tenue);
        opacity: .65;
    }

    .ctl-fecha-popup .ctl-fecha-celda.hoy {
        border-color: var(--ctl-primario);
        font-weight: 600;
    }

    .ctl-fecha-popup .ctl-fecha-celda.elegido,
    .ctl-fecha-popup .ctl-fecha-celda.elegido:hover {
        border-color: var(--ctl-primario);
        background: var(--ctl-primario);
        color: var(--ctl-primario-fg);
        opacity: 1;
    }

    .ctl-fecha-popup .ctl-fecha-celda:disabled {
        opacity: .3;
        cursor: default;
        text-decoration: line-through;
    }

    .ctl-fecha-popup .ctl-fecha-celda:focus-visible,
    .ctl-fecha-popup .ctl-fecha-nav:focus-visible,
    .ctl-fecha-popup .ctl-fecha-titulo:focus-visible {
        outline: none;
        box-shadow: var(--ctl-anillo);
    }

.ctl-fecha-hora {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ctl-borde);
}

    .ctl-fecha-hora > span:first-child {
        margin-right: auto;
        color: var(--ctl-tenue);
        font-weight: 600;
    }

    .ctl-fecha-hora .ctl-input {
        width: auto;
        padding: 0 4px;
    }

.ctl-fecha-pie {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ctl-borde);
}

    .ctl-fecha-pie .ctl-btn {
        height: 28px;
        padding: 0 10px;
    }

    .ctl-fecha-pie .ctl-btn:first-child {
        margin-right: auto;
    }

.ctl-fecha .ctl-combo-limpiar {
    right: 32px;
}

.ctl-combo-grupo {
    position: sticky;
    top: 0;
    padding: 6px 8px 4px;
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font-size: calc(12px * var(--ctl-fe, 1));
    font-weight: 700;
}

.ctl-combo-encabezado + .ctl-combo-grupo {
    top: 28px;
}

.ctl-combo .ctl-campo-control:disabled {
    background-color: var(--tema-n-100, #e9ecef);
    color: var(--ctl-tenue);
    cursor: default;
}

.ctl-campo .ctl-campo-control:disabled {
    background-color: var(--tema-n-100, #e9ecef);
    color: var(--ctl-tenue);
    cursor: default;
}

/* Columnas de las plantillas de combos (puertos, buques, contratos…) */
.ctl-combo-col.mitad { flex: 1 1 50%; }
.ctl-combo-col.buque { flex: 0 0 40%; }
.ctl-combo-col.clave { flex: 0 0 20%; }
.ctl-combo-col.navi { flex: 1 1 40%; }
.ctl-combo-col.tipo { flex: 0 0 10%; }
.ctl-combo-col.nombre { flex: 1 1 25%; }
.ctl-combo-col.numero { flex: 1 1 25%; }
.ctl-combo-col.fecha { flex: 0 0 18%; }

.ctl-combo-imagen {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    object-fit: cover;
}

/* Acciones de formularios en línea (p. ej. contenedores del master) */
.ctl-form-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- ElCasilla y listas de casillas ---------- */
.ctl-casilla {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border-radius: var(--ctl-radio);
    color: var(--ctl-texto);
    font-size: calc(13px * var(--ctl-fe, 1));
    cursor: pointer;
}

    .ctl-casilla:hover:not(.deshabilitada) {
        background: var(--ctl-bg-hover);
    }

    .ctl-casilla input {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0;
        accent-color: var(--ctl-primario);
        cursor: inherit;
    }

    .ctl-casilla span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ctl-casilla.deshabilitada {
        opacity: .6;
        cursor: default;
    }

    .ctl-casilla.todos {
        border-bottom: 1px solid var(--ctl-borde);
        border-radius: 0;
        font-weight: 600;
    }

/* Interruptor (switch): el checkbox real queda encima de la pista, transparente, para conservar foco y teclado. */
.ctl-interruptor {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    color: var(--ctl-texto);
}

    .ctl-interruptor input {
        position: absolute;
        right: 0;
        width: 34px;
        height: 20px;
        margin: 0;
        opacity: 0;
        cursor: inherit;
    }

    .ctl-interruptor-pista {
        position: relative;
        width: 34px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 10px;
        background: var(--ctl-borde-fuerte);
        transition: background .15s;
    }

        .ctl-interruptor-pista::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--ctl-bg);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
            transition: transform .15s;
        }

    .ctl-interruptor input:checked + .ctl-interruptor-pista {
        background: var(--ctl-primario);
    }

        .ctl-interruptor input:checked + .ctl-interruptor-pista::after {
            transform: translateX(14px);
        }

    .ctl-interruptor input:focus-visible + .ctl-interruptor-pista {
        box-shadow: var(--ctl-anillo);
    }

    .ctl-interruptor.deshabilitado {
        opacity: .6;
        cursor: default;
    }

.ctl-lista-casillas {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 60vh;
    overflow-y: auto;
}

.ctl-lista-vacia {
    padding: 12px 8px;
    color: var(--ctl-tenue);
    font-size: calc(13px * var(--ctl-fe, 1));
}

.ctl-panel-lista {
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
}

.ctl-panel-lista-cab {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ctl-borde);
    color: var(--ctl-texto);
    font-size: calc(14px * var(--ctl-fe, 1));
    font-weight: 600;
}

.ctl-panel-lista .ctl-lista-casillas {
    padding: 4px;
}

/* ---------- ElExplorador ---------- */
.elx {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 560px;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    color: var(--ctl-texto);
    font-size: calc(13px * var(--ctl-fe, 1));
    outline: none;
}

.ctl-explorador-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ctl-borde);
    background: var(--ctl-bg-sutil);
}

.ctl-explorador-barra-derecha {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ctl-explorador-separador {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--ctl-borde);
}

.elx .ctl-explorador-subir {
    position: relative;
    margin: 0;
    overflow: hidden;
}

    .elx .ctl-explorador-subir input[type=file] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

.elx .ctl-explorador-buscar {
    width: 220px;
}

.ctl-explorador-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--ctl-borde);
}

.elx .ctl-explorador-miga {
    padding: 3px 6px;
    border: 0;
    border-radius: var(--ctl-radio);
    background: transparent;
    color: var(--ctl-primario);
    font: inherit;
    cursor: pointer;
}

    .elx .ctl-explorador-miga:hover {
        background: var(--ctl-bg-hover);
    }

    .elx .ctl-explorador-miga.actual {
        color: var(--ctl-texto);
        font-weight: 600;
        cursor: default;
    }

.ctl-explorador-miga-sep {
    display: inline-flex;
    opacity: .5;
}

    .ctl-explorador-miga-sep .ctl-icono {
        width: 14px;
        height: 14px;
    }

.ctl-explorador-cuerpo {
    display: flex;
    flex: 1;
    min-height: 0;
}

.ctl-explorador-arbol {
    flex: 0 0 220px;
    overflow: auto;
    padding: 6px 4px;
    border-right: 1px solid var(--ctl-borde);
}

.ctl-explorador-nodo-fila {
    display: flex;
    align-items: center;
    border-radius: var(--ctl-radio);
}

    .ctl-explorador-nodo-fila:hover {
        background: var(--ctl-bg-hover);
    }

    .ctl-explorador-nodo-fila.actual {
        background: color-mix(in srgb, var(--ctl-primario) 12%, transparent);
    }

        .ctl-explorador-nodo-fila.actual .ctl-explorador-nodo-nombre {
            color: var(--ctl-primario);
            font-weight: 600;
        }

.elx .ctl-explorador-nodo-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ctl-tenue);
    cursor: pointer;
}

    .elx .ctl-explorador-nodo-flecha .ctl-icono {
        width: 14px;
        height: 14px;
        transition: transform .12s;
    }

    .elx .ctl-explorador-nodo-flecha.abierto .ctl-icono {
        transform: rotate(90deg);
    }

    .elx .ctl-explorador-nodo-flecha.oculta {
        visibility: hidden;
    }

.elx .ctl-explorador-nodo-nombre {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 26px;
    padding: 0 6px 0 0;
    border: 0;
    background: transparent;
    color: var(--ctl-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .elx .ctl-explorador-nodo-nombre span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .elx .ctl-explorador-nodo-nombre .ctl-icono {
        color: #e0a526;
    }

.ctl-explorador-nodo-hijos {
    padding-left: 14px;
}

.ctl-explorador-contenido {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.ctl-explorador-aviso {
    margin: 8px;
}

.ctl-explorador-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 160px;
    color: var(--ctl-tenue);
    text-align: center;
}

    .ctl-explorador-vacio > .ctl-icono {
        width: 36px;
        height: 36px;
        opacity: .5;
    }

.ctl-explorador-tabla {
    width: 100%;
    border-collapse: collapse;
    user-select: none;
}

    .ctl-explorador-tabla th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0 10px;
        height: 34px;
        border-bottom: 1px solid var(--ctl-borde);
        background: var(--ctl-bg-sutil);
        color: var(--ctl-texto-2);
        font-weight: 600;
        text-align: left;
    }

    .ctl-explorador-tabla td {
        height: 34px;
        padding: 0 10px;
        border-bottom: 1px solid var(--ctl-borde);
        white-space: nowrap;
    }

    .ctl-explorador-tabla tbody tr {
        cursor: default;
    }

        .ctl-explorador-tabla tbody tr:hover {
            background: var(--ctl-bg-hover);
        }

        .ctl-explorador-tabla tbody tr.seleccionado {
            background: color-mix(in srgb, var(--ctl-primario) 12%, transparent);
        }

        .ctl-explorador-tabla tbody tr.cortado,
        .ctl-explorador-icono.cortado {
            opacity: .5;
        }

.elx .ctl-explorador-orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .elx .ctl-explorador-orden .ctl-icono {
        width: 13px;
        height: 13px;
    }

.ctl-explorador-col-check {
    width: 40px;
}

.ctl-explorador-col-fecha {
    width: 170px;
}

.ctl-explorador-tabla .ctl-explorador-col-tamano {
    width: 100px;
    text-align: right;
}

.ctl-explorador-col-ubicacion {
    color: var(--ctl-tenue);
}

.ctl-explorador-nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ctl-explorador-nombre-texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctl-explorador-tipo {
    display: inline-flex;
    flex-shrink: 0;
}

    .ctl-explorador-tipo.carpeta { color: #e0a526; }
    .ctl-explorador-tipo.pdf { color: #d93025; }
    .ctl-explorador-tipo.excel { color: #1e8e3e; }
    .ctl-explorador-tipo.word { color: #1a73e8; }
    .ctl-explorador-tipo.imagen { color: #9334e6; }
    .ctl-explorador-tipo.otro { color: var(--ctl-tenue); }

.ctl-explorador-iconos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    padding: 10px;
    user-select: none;
}

.ctl-explorador-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: var(--ctl-radio);
    cursor: default;
}

    .ctl-explorador-icono:hover {
        background: var(--ctl-bg-hover);
    }

    .ctl-explorador-icono.seleccionado {
        border-color: color-mix(in srgb, var(--ctl-primario) 40%, transparent);
        background: color-mix(in srgb, var(--ctl-primario) 12%, transparent);
    }

.ctl-explorador-miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 72px;
}

    .ctl-explorador-miniatura img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
        object-fit: contain;
    }

    .ctl-explorador-miniatura .ctl-icono {
        width: 44px;
        height: 44px;
        stroke-width: 1.5;
    }

.ctl-explorador-icono-nombre {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    font-size: calc(12px * var(--ctl-fe, 1));
    text-align: center;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ctl-explorador-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--ctl-borde);
    color: var(--ctl-tenue);
    font-size: calc(12px * var(--ctl-fe, 1));
}

.elx .ctl-explorador-enlace {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ctl-primario);
    font: inherit;
    cursor: pointer;
}

/* Soltar archivos: solo es visual; el drop lo recibe el explorador (js/ctl-explorador.js) */
.ctl-explorador-soltar {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--ctl-primario);
    border-radius: var(--ctl-radio);
    background: color-mix(in srgb, var(--ctl-primario) 10%, var(--ctl-bg));
    pointer-events: none;
}

.elx.arrastrando .ctl-explorador-soltar {
    display: flex;
}

.ctl-explorador-soltar-aviso.no-permitido {
    color: var(--ctl-peligro);
}

.ctl-explorador-soltar-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ctl-primario);
    font-size: calc(15px * var(--ctl-fe, 1));
    font-weight: 600;
    pointer-events: none;
}

.ctl-explorador-subidas {
    position: absolute;
    right: 12px;
    bottom: 40px;
    z-index: 6;
    width: 320px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--ctl-borde);
    border-radius: var(--ctl-radio);
    background: var(--ctl-bg);
    box-shadow: var(--ctl-sombra);
}

.ctl-explorador-subidas-cab {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ctl-borde);
    background: var(--ctl-bg-sutil);
    font-weight: 600;
}

.ctl-explorador-subida {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 6px 10px;
}

.ctl-explorador-subida-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl-explorador-subida-estado {
    color: var(--ctl-tenue);
    font-size: calc(12px * var(--ctl-fe, 1));
}

.ctl-explorador-subida.error .ctl-explorador-subida-estado { color: var(--ctl-peligro); }
.ctl-explorador-subida.lista .ctl-explorador-subida-estado { color: #1e8e3e; }

.ctl-explorador-barra-avance {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ctl-bg-hover);
}

    .ctl-explorador-barra-avance span {
        display: block;
        height: 100%;
        background: var(--ctl-primario);
        transition: width .2s;
    }

.ctl-explorador-subida.error .ctl-explorador-barra-avance span { background: var(--ctl-peligro); }
.ctl-explorador-subida.lista .ctl-explorador-barra-avance span { background: #1e8e3e; }

.ctl-menu-lista.ctl-explorador-menu {
    position: fixed;
    z-index: 1050;
    min-width: 190px;
}

.ctl-explorador-error-campo {
    margin-top: 6px;
    color: var(--ctl-peligro);
    font-size: calc(12px * var(--ctl-fe, 1));
}

.ctl-explorador-detalles {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
}

    .ctl-explorador-detalles dt {
        color: var(--ctl-tenue);
        font-weight: 600;
    }

    .ctl-explorador-detalles dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.ctl-dialogo.ctl-explorador-vista .ctl-dialogo-cuerpo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

    .ctl-dialogo.ctl-explorador-vista img {
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
    }

    .ctl-dialogo.ctl-explorador-vista iframe {
        width: 100%;
        height: 75vh;
        border: 0;
    }

@media (max-width: 767.98px) {
    .ctl-explorador-arbol { display: none; }
    .elx .ctl-explorador-buscar { width: 100%; }
    .ctl-explorador-col-fecha { display: none; }
}

.ctl-explorador-nombre-campo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctl-explorador-extension {
    color: var(--ctl-tenue);
    font-weight: 600;
}