/* ============================================================================
   QKITO — Suite de Software
   Hoja de estilos principal

   Hereda el lenguaje visual de QkitoInsight para que el usuario que migra
   reconozca la interfaz.
   ============================================================================ */

:root {
    --kito-primary: #2C63B5;
    --kito-primary-dark: #1B4A8C;
    --kito-accent: #5CA7E0;
    --kito-navy: #0D2B4E;
    --kito-navy-light: #163B63;
    --kito-bg: #F4F6F9;
    --kito-border: #E2E6EC;
    --kito-text-muted: #6B7280;
    --kito-success: #2E7D4F;
    --kito-danger: #C0392B;
    --kito-header-bg: #EAF1FB;
    --kito-header-text: #1B4A8C;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--kito-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #1F2937;
}

/* ==================== Layout con sidebar ==================== */
.kito-app {
    display: flex;
    min-height: 100vh;
}

.kito-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--kito-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.kito-sidebar-logo {
    padding: 1.25rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .kito-sidebar-logo img {
        max-width: 100%;
        height: auto;
        max-height: 64px;
        /* sin background, sin padding, sin border-radius: se apoya en el navy */
    }

    /* Respaldo mientras no exista el archivo de logo */
    .kito-sidebar-logo .kito-logo-texto {
        display: inline-block;
        background: #fff;
        color: var(--kito-navy);
        font-weight: 700;
        font-size: 1.15rem;
        letter-spacing: 0.02em;
        padding: 8px 18px;
        border-radius: 6px;
        text-decoration: none;
    }

.kito-nav {
    flex: 1;
    padding: 0.75rem 0;
}

    .kito-nav a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 1.25rem;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 0.92rem;
        border-left: 3px solid transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

        .kito-nav a i {
            width: 18px;
            text-align: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .kito-nav a:hover {
            background-color: var(--kito-navy-light);
            color: #fff;
        }

        .kito-nav a.active {
            background-color: var(--kito-navy-light);
            border-left-color: var(--kito-accent);
            color: #fff;
            font-weight: 600;
        }

        /* Módulo de la suite aún no desarrollado: visible pero sin acceso. */
        .kito-nav a.kito-nav-proximo {
            color: rgba(255, 255, 255, 0.35);
            cursor: default;
            pointer-events: none;
        }

/* ==================== Menú por secciones colapsables ====================

   HEREDADO — .kito-nav-toggle y .kito-nav-grupo servían cuando cada MÓDULO era
   una sección colapsable del menú lateral. Desde la tira de módulos superior
   (ver el bloque del final del archivo) el lateral muestra un solo módulo a la
   vez, así que el rótulo colapsable del módulo desapareció.

   .kito-nav-grupo SIGUE EN USO: es el contenedor de las opciones de cada área,
   y de él cuelga la sangría de .kito-nav-grupo a. .kito-nav-toggle ya no lo
   usa nadie; se conserva porque el día que un módulo necesite subdividirse
   por encima de las áreas, este es el estilo. Si al cabo de unas versiones
   sigue sin usarse, se borra. */
.kito-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.5rem 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
    color: #fff;
}

    .kito-nav-toggle:hover {
        opacity: 1;
    }

    .kito-nav-toggle .chev {
        transition: transform 0.15s ease;
        font-size: 0.8rem;
    }

    .kito-nav-toggle[aria-expanded="false"] .chev {
        transform: rotate(-90deg);
    }

.kito-nav-grupo.oculto {
    display: none;
}

.kito-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

    .kito-sidebar-footer .kito-user-name {
        display: block;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0.4rem;
    }

    .kito-sidebar-footer a {
        color: var(--kito-accent);
        text-decoration: none;
        margin-right: 0.75rem;
    }

        .kito-sidebar-footer a:hover {
            text-decoration: underline;
        }

.kito-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kito-topbar {
    background: #fff;
    border-bottom: 1px solid var(--kito-border);
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==================== Color de la empresa (Qkito_MAS005) ====================
   Cada clave de la paleta (Qkito.Core ColorEmpresa) fija UNA variable, y quien
   la lleve —la barra superior, el punto del selector, el monograma del acceso—
   decide cómo usarla. Los ocho llevan texto blanco encima.

   En la barra va como franja de 5px arriba (sombra interior: no mueve el
   alto) y el nombre de la empresa se vuelve una pastilla del mismo color. No
   se pinta el fondo entero: la barra tiene que seguir leyéndose. */
.kito-color-empresa-azul     { --kito-empresa-color: #2C63B5; }
.kito-color-empresa-verde    { --kito-empresa-color: #2E7D4F; }
.kito-color-empresa-rojo     { --kito-empresa-color: #C0392B; }
.kito-color-empresa-naranja  { --kito-empresa-color: #C2410C; }
.kito-color-empresa-morado   { --kito-empresa-color: #7B3FA0; }
.kito-color-empresa-turquesa { --kito-empresa-color: #0F766E; }
.kito-color-empresa-magenta  { --kito-empresa-color: #BE185D; }
.kito-color-empresa-marron   { --kito-empresa-color: #8B5A2B; }

.kito-topbar-con-color {
    box-shadow: inset 0 5px 0 var(--kito-empresa-color);
}

.kito-topbar-con-color .kito-empresa-actual {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--kito-empresa-color);
    color: #fff;
}

/* El punto de cada empresa en el desplegable. Sin color queda el hueco, para
   que los nombres sigan alineados. */
.kito-punto-empresa {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    vertical-align: baseline;
    background-color: var(--kito-empresa-color, transparent);
}

/* La paleta de la ficha de la empresa: una muestra redonda por color, con la
   palomita visible solo en la escogida. */
.kito-paleta-empresa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.kito-muestra-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background-color: var(--kito-empresa-color);
    border: 2px solid transparent;
}

    .kito-muestra-color i {
        visibility: hidden;
    }

.kito-muestra-color-ninguno {
    color: var(--kito-text-muted);
    background-color: transparent;
    border-color: var(--kito-border);
}

    .kito-muestra-color-ninguno i {
        visibility: visible;
    }

.btn-check:checked + .kito-muestra-color {
    outline: 3px solid var(--kito-accent);
    outline-offset: 2px;
}

    .btn-check:checked + .kito-muestra-color i {
        visibility: visible;
    }

.btn-check:focus-visible + .kito-muestra-color {
    outline: 3px solid var(--kito-primary);
    outline-offset: 2px;
}

.kito-content {
    padding: 1.75rem;
    flex: 1;
}

/* ==================== Encabezado de página ==================== */
h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kito-navy);
    margin-bottom: 0;
}

.kito-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kito-page-subtitle {
    color: var(--kito-text-muted);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

/* ==================== Tarjetas y encabezados de sección ====================
   Regla global: todo .card-header de la suite lleva fondo azul claro, texto
   navy y una barra de acento a la izquierda. Al estar aquí y no en cada
   página, los maestros que se agreguen después lo heredan sin trabajo extra.

   Si una tarjeta necesita cabecera blanca por excepción, se le agrega la
   clase .kito-header-plano.
   ============================================================================ */
.card {
    border: 1px solid var(--kito-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.card-header {
    background-color: var(--kito-header-bg);
    color: var(--kito-header-text);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--kito-border);
    border-left: 4px solid var(--kito-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .card-header i {
        font-size: 1rem;
        opacity: 0.8;
    }

    /* Contadores o etiquetas auxiliares dentro del encabezado */
    .card-header .badge {
        font-weight: 500;
    }

    /* Excepción: cabecera sin fondo, para tarjetas de filtro discretas */
    .card-header.kito-header-plano {
        background-color: #fff;
        border-left-color: transparent;
        color: var(--kito-navy);
    }

/* Variantes por naturaleza de la sección. Se usan cuando conviene distinguir
   de un vistazo: obligatorio, informativo, riesgoso. */
.card-header.kito-header-alerta {
    background-color: #FFF6E5;
    color: #9C5700;
    border-left-color: #E8A33D;
}

.card-header.kito-header-exito {
    background-color: #E9F5EE;
    color: #216B45;
    border-left-color: var(--kito-success);
}

.card-header.kito-header-neutro {
    background-color: #F1F3F6;
    color: #4B5563;
    border-left-color: #9CA3AF;
}

/* Encabezado de sección fuera de una tarjeta */
.kito-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--kito-navy);
    background-color: var(--kito-header-bg);
    border-left: 4px solid var(--kito-primary);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

/* ==================== Componentes ==================== */
.btn-primary {
    background-color: var(--kito-primary);
    border-color: var(--kito-primary);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--kito-primary-dark);
        border-color: var(--kito-primary-dark);
    }

.btn-outline-primary {
    color: var(--kito-primary);
    border-color: var(--kito-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--kito-primary);
        border-color: var(--kito-primary);
    }

.table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

    .table thead th {
        background-color: var(--kito-navy);
        color: #fff;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border: none;
        vertical-align: middle;
    }

    .table tbody tr:hover {
        background-color: #EEF3FA;
    }

.form-control:focus, .form-select:focus {
    border-color: var(--kito-accent);
    box-shadow: 0 0 0 0.2rem rgba(92, 167, 224, 0.25);
}

/* Etiquetas de formulario: un poco más marcadas que el valor, para que el
   ojo separe rótulo de dato sin esfuerzo. */
.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

.form-text {
    font-size: 0.78rem;
}

/* ==================== Tarjetas de resumen (chips) ==================== */
.kito-chip {
    background-color: var(--kito-header-bg);
    border: none;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

    .kito-chip .kito-chip-valor {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B4E8C;
        line-height: 1.1;
    }

    .kito-chip .kito-chip-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #3E7BC4;
    }

/* ==================== Maestros con jerarquía ==================== */
/* La sangría por nivel hace legible el árbol sin un control especial. */
.kito-cuenta-codigo {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.88rem;
}

.kito-cuenta-grupo {
    font-weight: 600;
    color: var(--kito-navy);
}

.kito-cuenta-imputable {
    color: #374151;
}

.kito-badge-natural-d {
    background-color: #E3EDFB;
    color: #1B4E8C;
}

.kito-badge-natural-c {
    background-color: #E3F4EA;
    color: #216B45;
}

.kito-badge-valuacion {
    background-color: #FFF2CC;
    color: #9C5700;
}

.kito-req {
    font-size: 0.78rem;
    color: var(--kito-text-muted);
}

/* ==================== Estado vacío ==================== */
.kito-vacio {
    background: #fff;
    border: 1px dashed var(--kito-border);
    border-radius: 10px;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--kito-text-muted);
}

    .kito-vacio i {
        font-size: 2.5rem;
        color: #C7D2E0;
        display: block;
        margin-bottom: 0.75rem;
    }

/* ==================== Aviso de entorno ==================== */
.kito-entorno {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.35rem 1.25rem 0;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .kito-sidebar {
        position: fixed;
        left: -260px;
        z-index: 1050;
        transition: left 0.2s ease;
    }

        .kito-sidebar.kito-sidebar-open {
            left: 0;
        }

    .kito-app {
        display: block;
    }

    .kito-content {
        padding: 1rem;
    }
}

/* ==================== Utilidades ==================== */
.x-small {
    font-size: 0.72rem;
    line-height: 1.2;
}

.min-w-0 {
    min-width: 0;
}

.kito-var-good {
    color: var(--kito-success);
    font-weight: 600;
}

.kito-var-bad {
    color: var(--kito-danger);
    font-weight: 600;
}
/* ============================================================================
   QKITO — Formularios compactos
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css
   ============================================================================ */

/* Formularios densos: en pantallas de configuración con muchos indicadores,
   el aire entre controles hace que el usuario tenga que desplazarse para ver
   opciones que se relacionan entre sí. */
.card-body .form-check {
    margin-bottom: 0.15rem;
    min-height: auto;
}

.card-body .form-label {
    margin-bottom: 0.2rem;
}

.card-body .form-text {
    margin-top: 0.15rem;
    line-height: 1.3;
}

/* Subtítulo dentro de una tarjeta, para agrupar controles relacionados sin
   gastar una tarjeta entera. */
.kito-sub-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kito-text-muted);
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--kito-border);
}

/* Franja de datos derivados: lo que el sistema dedujo, no lo que el usuario
   escribe. Va dentro de la tarjeta, no como bloque aparte. */
.kito-ubicacion {
    background-color: #F8FAFC;
    border: 1px solid var(--kito-border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.kito-dato-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kito-text-muted);
    line-height: 1.2;
}

.kito-dato-valor {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--kito-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bloque cuya configuración pertenece a la empresa en sesión y no al plan del
   grupo. El borde verde lo distingue sin necesidad de leer el rótulo. */
.kito-bloque-empresa {
    background-color: #F3FAF6;
    border: 1px solid #C7E6D5;
    border-left: 4px solid var(--kito-success);
    border-radius: 6px;
    padding: 0.75rem;
}

.kito-bloque-empresa-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #216B45;
    margin-bottom: 0.5rem;
}

/* Tarjeta cuyos controles no aplican ahora mismo —una cuenta de agrupación no
   recibe movimiento, así que no exige dimensiones—. Se atenúa en vez de
   esconderse: el usuario ve que la sección existe y por qué está apagada. */
.kito-tarjeta-inactiva {
    opacity: 0.45;
}

/* Las etiquetas con ayuda contextual muestran el cursor de pregunta: indica
   que hay más información sin ocupar una línea de texto. */
.form-check-label[title] {
    cursor: help;
}
/* ============================================================================
   QKITO — Subtítulos del menú lateral
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css
   ============================================================================ */

/* Rótulo simple, sin colapsar. Sirve mientras el módulo entero quepa en la
   pantalla: ahí colapsar solo agrega un clic para llegar a donde ya se veía.

   Cuando el módulo no cabe —Contabilidad pasó a 30 opciones al agruparse por
   áreas de negocio— se usa .kito-nav-subtoggle de más abajo. */
.kito-nav-subtitulo {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.75rem 1.25rem 0.25rem 1.6rem;
    user-select: none;
}

/* El primer subtítulo del grupo no necesita el espacio superior: ya lo
       aporta el encabezado de la sección. */
.kito-nav-grupo > .kito-nav-subtitulo:first-child {
    padding-top: 0.35rem;
}

/* Las opciones bajo un subtítulo se indentan un poco más para que la
   jerarquía se lea sin líneas ni bordes adicionales. */
.kito-nav-grupo a {
    padding-left: 1.6rem;
}
/* ============================================================================
   QKITO — Clasificación de centros de costo
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css
   ============================================================================ */

/* Los tres colores corresponden a la posición en el P&L, no a un criterio
   estético: azul lo que genera ingreso, ámbar lo que se resta antes del GOP,
   gris lo que va después. Al mirar una lista, la estructura del estado de
   resultados se lee sin abrir nada. */
.kito-tipo-ope {
    background-color: #E3EDFB;
    color: #1B4E8C;
}

.kito-tipo-nod {
    background-color: #FFF2CC;
    color: #9C5700;
}

.kito-tipo-fij {
    background-color: #EAECEF;
    color: #4B5563;
}

.kito-tipo-adm {
    background-color: #F1F3F6;
    color: #9CA3AF;
}

/* Opción de clasificación con toda su explicación: al elegir dónde cae un
   centro en el P&L conviene tener el criterio a la vista, no en un tooltip. */
.kito-opcion-tipo {
    border: 1px solid var(--kito-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem 0.6rem 2.2rem;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

    .kito-opcion-tipo:hover {
        border-color: var(--kito-accent);
        background-color: #F8FAFC;
    }

    .kito-opcion-tipo .form-check-input {
        margin-left: -1.6rem;
    }

    .kito-opcion-tipo:has(.form-check-input:checked) {
        border-color: var(--kito-primary);
        background-color: var(--kito-header-bg);
    }

    .kito-opcion-tipo label {
        cursor: pointer;
    }
/* ============================================================================
   QKITO — Terceros
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css
   ============================================================================ */

/* Chip con algo pendiente de revisar. Se distingue del resto porque su número
   es una lista de tareas, no una estadística: al preparar informes fiscales un
   RUC mal capturado se convierte en rechazo. */
.kito-chip-alerta {
    background-color: #FFF6E5;
}

    .kito-chip-alerta .kito-chip-valor {
        color: #9C5700;
    }

    .kito-chip-alerta .kito-chip-label {
        color: #B8763E;
    }

/* El interruptor de rol vive en la cabecera de la tarjeta: activarlo cambia
   el color del encabezado, así se ve de un vistazo qué roles tiene el tercero
   sin leer el contenido de cada tarjeta. */
.card-header .form-check-switch,
.card-header .form-check {
    margin-bottom: 0;
}

.card-header .form-check-input {
    margin-top: 0;
    cursor: pointer;
}
/* ============================================================================
   QKITO — Subgrupos colapsables del menú lateral
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css
   ============================================================================ */

/* Un subgrupo colapsable dentro de una sección que ya es colapsable. Se
   justifica solo cuando la sección no cabe en pantalla: con Contabilidad
   agrupada por áreas de negocio (Finanzas, Proveedores, Tesorería, Ventas,
   Consultas, Catálogos, Configuración) son 30 opciones, y desplazarse a ciegas
   cuesta más que el clic de más.

   Funciona como acordeón: abrir uno cierra a sus hermanos. Así el usuario ve
   siempre el mapa completo de áreas y el detalle de una sola. Dentro del área
   donde trabaja todo el día sigue habiendo un solo clic hasta la pantalla. */
.kito-nav-subtoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.55rem 1.25rem 0.3rem 1.6rem;
    user-select: none;
    transition: color 0.15s ease;
}

    .kito-nav-subtoggle:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    /* El área abierta se marca un poco más clara: es la única pista de dónde
       está parado el usuario cuando la opción activa quedó fuera de vista. */
    .kito-nav-subtoggle[aria-expanded="true"] {
        color: rgba(255, 255, 255, 0.65);
    }

    .kito-nav-subtoggle .chev {
        font-size: 0.65rem;
        transition: transform 0.15s ease;
    }

    .kito-nav-subtoggle[aria-expanded="false"] .chev {
        transform: rotate(-90deg);
    }

/* El primer subgrupo no necesita el espacio superior: ya lo aporta el
   encabezado de la sección. */
.kito-nav-grupo > .kito-nav-subtoggle:first-child {
    padding-top: 0.35rem;
}

.kito-nav-subgrupo.oculto {
    display: none;
}

/* Área todavía no construida: el rótulo se atenúa igual que sus opciones, para
   que en una demo se lea como alcance del producto y no como algo que falla. */
.kito-nav-subtoggle.kito-nav-subtoggle-proximo {
    color: rgba(255, 255, 255, 0.22);
}

    .kito-nav-subtoggle.kito-nav-subtoggle-proximo:hover,
    .kito-nav-subtoggle.kito-nav-subtoggle-proximo[aria-expanded="true"] {
        color: rgba(255, 255, 255, 0.4);
    }

/* ============================================================================
   QKITO — Tira de módulos en la barra superior
   ----------------------------------------------------------------------------
   La navegación se parte en dos: ARRIBA se elige el módulo, a la IZQUIERDA se
   elige la pantalla dentro de ese módulo. Antes los ocho módulos se apilaban en
   el lateral y el menú se sentía apretado incluso con siete de ellos vacíos.

   Los módulos no liberados NO se esconden: quedan atenuados en la tira. En una
   demo eso muestra el alcance de la suite de un vistazo y de forma permanente,
   que es más útil que el bloque "Próximamente" que vivía al final del lateral.
   ============================================================================ */

.kito-modulos {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    background: #fff;
    border-bottom: 1px solid var(--kito-border);
    padding: 0 1.5rem;
    /* Con nueve botones a 1366px sobra espacio; el desbordamiento es el seguro
       para cuando entren Activos Fijos y lo que venga después. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.kito-modulo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    background: none;
    border: 0;
    /* Subrayado tipo pestaña: dice "estás viendo esto" sin pintar un botón
       relleno, que competiría con los chips de la pantalla de inicio. */
    border-bottom: 2px solid transparent;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    line-height: 1.2;
    color: #4B5563;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .kito-modulo-btn i {
        font-size: 1rem;
    }

    .kito-modulo-btn:hover {
        color: var(--kito-primary-dark);
        background-color: var(--kito-header-bg);
    }

    .kito-modulo-btn.activo {
        color: var(--kito-primary-dark);
        border-bottom-color: var(--kito-primary);
        font-weight: 600;
    }

    .kito-modulo-btn:focus-visible {
        outline: 2px solid var(--kito-primary);
        outline-offset: -2px;
    }

/* Módulo anunciado y todavía no liberado. Es un <span>, no un botón: no hay
   nada que pulsar y el cursor lo dice antes que el color. */
.kito-modulo-proximo {
    color: #9CA3AF;
    cursor: default;
}

    .kito-modulo-proximo:hover {
        color: #9CA3AF;
        background: none;
    }

/* ==================== Menú lateral por módulo ==================== */

/* Todos los módulos se dibujan y se oculta el que no toca. El árbol completo
   son ~36 opciones y ya viene cacheado cinco minutos en MenuServicio: cambiar
   de módulo es instantáneo y no cuesta una ida al servidor. */
.kito-modulo-panel.oculto {
    display: none;
}

/* Qué módulo se está viendo. Redundante con la pestaña activa de arriba, pero
   la tira es clara sobre fondo blanco y el lateral es azul oscuro: la mirada
   no siempre sube. */
.kito-modulo-rotulo {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.35rem 1.25rem 0.6rem;
    user-select: none;
}

/* La base de datos en sesión, al pie. Salió del bloque de empresa del lateral
   —que se retiró porque la empresa ya está arriba— pero no se tira: en un
   grupo con varias propiedades es el dato que delata que estás conectado a la
   base equivocada. */
.kito-sidebar-base {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   QKITO — Estado de licencia en la tira de módulos
   ----------------------------------------------------------------------------
   Un módulo atenuado puede serlo por dos razones muy distintas, y para el
   usuario la diferencia importa: "todavía no lo hicimos" no se arregla con
   dinero y "no lo contrató" sí. El candado es lo que las separa de un vistazo;
   el texto completo va en el title.
   ============================================================================ */

.kito-modulo-bloqueado i {
    font-size: 0.72rem;
    margin-right: 0.3rem;
    opacity: 0.75;
}

/* Módulo que sigue navegando pero con la licencia por vencer o en gracia. Un
   punto, no un color de alarma: la pestaña tiene que seguir leyéndose como una
   pestaña normal, porque el módulo funciona. */
.kito-modulo-aviso::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #D97706;
}

/* ==================== Franja de aviso de licencia ==================== */

/* Se dibuja una sola vez y solo cuando hay algo que decir. Para esto existe
   DiasAvisoPrevio: un vencimiento del que el cliente se entera el día que apaga
   el módulo es una llamada furiosa un domingo. */
.kito-aviso-licencia {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.5rem;
    font-size: 0.82rem;
    color: #92400E;
    background: #FEF3C7;
    border-bottom: 1px solid #FDE68A;
}

    .kito-aviso-licencia i {
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    /* Ya venció y corre la gracia: sube el tono, pero sin rojo de error. El
       cliente no hizo nada malo y el sistema sigue funcionando. */
    .kito-aviso-licencia.kito-aviso-grave {
        color: #9A3412;
        background: #FFEDD5;
        border-bottom-color: #FDBA74;
    }
/* ============================================================================
   QKITO — Pantallas de cuenta (login y selección de empresa)
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css

   OJO AL PEGAR: el bloque "Empresa en sesión" que quedó pendiente define
   .kito-empresa-base en blanco translúcido, porque vive sobre el sidebar navy.
   Esta pantalla es blanca. Si la misma clase se usa en los dos sitios, el
   nombre de la base sale invisible aquí. Por eso abajo la fuente de datos se
   pinta con .kito-empresa-fuente, y el .cshtml nuevo ya no usa la otra.
   ============================================================================ */

/* ==================== Marco centrado ==================== */
.kito-cuenta-caja {
    max-width: 660px;
    margin: 0 auto;
    padding: 2.5rem 0 1rem;
}

.kito-cuenta-marca {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .kito-cuenta-marca img {
        width: 200px;
        max-width: 65%;
        height: auto;
    }

.kito-cuenta-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kito-navy);
    text-align: center;
    margin: 0 0 0.3rem;
}

.kito-cuenta-sub {
    text-align: center;
    color: var(--kito-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.6rem;
}

.kito-cuenta-pie {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kito-border);
}

/* ==================== Lista de empresas ====================
   Rejilla y no columna: con dos empresas se ven de un vistazo, y con doce no
   obliga a bajar hasta el fondo. El ancho lo fija la rejilla —no el largo de
   la razón social—, así que las tarjetas salen parejas.
   ============================================================================ */
.kito-empresa-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0.75rem;
}

/* La tarjeta ENTERA es el botón que envía el formulario. Antes solo el chevrón
   parecía pulsable, y con el botón sin estilo el navegador le ponía su propio
   gris. También entra en el orden de tabulación, que es como navega quien
   captura todo el día sin soltar el teclado. */
.kito-empresa-opcion {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    font: inherit;
    background-color: #fff;
    border: 1px solid var(--kito-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

    .kito-empresa-opcion:hover {
        border-color: var(--kito-primary);
        box-shadow: 0 2px 10px rgba(13, 43, 78, 0.10);
        transform: translateY(-1px);
    }

    .kito-empresa-opcion:focus-visible {
        outline: 2px solid var(--kito-primary);
        outline-offset: 2px;
    }

    .kito-empresa-opcion:active {
        transform: translateY(0);
    }

/* Monograma con el código. A los tres días nadie lee la razón social: reconoce
   el cuadro. */
.kito-empresa-icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 9px;
    /* El color de la empresa, si lo tiene (Qkito_MAS005); si no, el navy. */
    background-color: var(--kito-empresa-color, var(--kito-navy));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.kito-empresa-datos {
    flex: 1;
    min-width: 0;
}

.kito-empresa-razon {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--kito-navy);
    overflow-wrap: anywhere;
}

.kito-empresa-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

/* Etiquetas propias en vez de .text-bg-info: el turquesa de Bootstrap gritaba
   más que el nombre de la empresa. */
.kito-empresa-etiqueta {
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
}

.kito-empresa-etiqueta-pred {
    background-color: var(--kito-header-bg);
    color: var(--kito-primary-dark);
}

.kito-empresa-etiqueta-lectura {
    background-color: #FFF6E5;
    color: #9C5700;
}

/* Fuente de datos. Solo aparece cuando el usuario tiene empresas en más de una
   base: ahí sí desambigua. Con una sola base es ruido de infraestructura. */
.kito-empresa-fuente {
    font-size: 0.72rem;
    color: #9AA5B4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kito-empresa-chevron {
    color: #B6C0CD;
    flex-shrink: 0;
    transition: transform 0.12s ease, color 0.12s ease;
}

.kito-empresa-opcion:hover .kito-empresa-chevron {
    color: var(--kito-primary);
    transform: translateX(3px);
}

/* Buscador: solo se pinta cuando la lista pasa de ocho. */
.kito-empresa-buscador {
    position: relative;
    margin-bottom: 0.9rem;
}

    .kito-empresa-buscador i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9AA5B4;
        pointer-events: none;
    }

    .kito-empresa-buscador input {
        padding-left: 2.2rem;
    }

.kito-empresa-vacio {
    text-align: center;
    color: var(--kito-text-muted);
    font-size: 0.88rem;
    padding: 1.5rem 0;
}

@media (max-width: 576px) {
    .kito-cuenta-caja {
        padding-top: 1.5rem;
    }

    .kito-empresa-lista {
        grid-template-columns: 1fr;
    }
}
/* ============================================================================
   QKITO — Logo y pie del sidebar
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css.

   Los selectores .kito-sidebar-logo img y .kito-sidebar-footer ya existen más
   arriba en el archivo. Este bloque los repite a propósito: al ir después,
   gana. Cada propiedad que hay que anular se reescribe de forma explícita
   —background, padding, border-radius— porque una propiedad que solo se omite
   no se anula, se hereda de la regla anterior.
   ============================================================================ */

/* El archivo es la versión para fondo oscuro: se apoya directo sobre el navy
   y la placa blanca sobra. Sin ella, los mismos píxeles de alto los ocupa el
   logo y no el margen. */
.kito-sidebar-logo img {
    max-width: 100%;
    height: auto;
    max-height: 64px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Los tres elementos del pie eran elementos en línea sueltos y se atropellaban.
   En columna, cada uno ocupa su renglón. */
.kito-sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

    .kito-sidebar-footer .kito-user-name {
        display: block;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0; /* el gap del flex ya separa */
    }

/* Marcador inerte. Tenue, pero no invisible: el gris de Bootstrap sobre navy
   quedaba por debajo del umbral de lectura. */
/* Deja de ser un marcador inerte al construirse la captura de firma. El
   0.35 de opacidad y el cursor normal eran para que NO invitara a pulsarlo;
   ahora lleva a alguna parte y tiene que parecerlo. */
.kito-sidebar-perfil {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    text-decoration: none;
}

.kito-sidebar-perfil:hover,
.kito-sidebar-perfil:focus {
    color: #fff;
    text-decoration: underline;
}

/* Es un botón porque el cierre de sesión va por POST, pero no debe parecerlo. */
.kito-sidebar-salir {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

    .kito-sidebar-salir:hover {
        color: #fff;
        text-decoration: underline;
    }

    .kito-sidebar-salir:focus-visible {
        outline: 2px solid var(--kito-accent);
        outline-offset: 2px;
        border-radius: 3px;
    }
/* ============================================================================
   QKITO ERP — Proverbio del día
   ----------------------------------------------------------------------------
   Agregar al final de wwwroot/css/site.css.

   En QkitoInsight estos estilos van en línea dentro del <style> del login,
   porque esa página tiene Layout = null y es la única que los usa. Aquí no
   aplica: el login de Qkito ERP comparte _LayoutCuenta con el selector de
   empresa y el cambio de clave, así que el bloque puede aparecer en las tres.

   Y hay un cambio obligado de color: el login de Insight es oscuro y estos
   textos van en blanco translúcido. El de Qkito ERP es claro. En blanco no se
   vería nada.
   ============================================================================ */

.kito-proverbio {
    max-width: 420px;
    margin: 2rem auto 0;
    text-align: center;
    animation: kitoProverbioAparece 0.7s ease both;
}

.kito-proverbio-regla {
    width: 40px;
    height: 1px;
    background: var(--kito-border);
    margin: 0 auto 1rem;
}

.kito-proverbio-texto {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kito-navy);
    margin: 0 0 0.6rem;
}

.kito-proverbio-fuente {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kito-text-muted);
}

@keyframes kitoProverbioAparece {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Quien pidió menos animación en su sistema operativo la pidió también aquí. */
@media (prefers-reduced-motion: reduce) {
    .kito-proverbio {
        animation: none;
    }
}
.kito-sidebar {
    background-color: var(--kito-navy); /* respaldo */
    background-image: linear-gradient(175deg, #16416E 0%, #0D2B4E 42%, #091E38 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   INV003 — La rejilla de conteo de la toma física.

   Pensada para TABLET: el almacenista cuenta de pie, con una mano en la
   estantería y la otra en la pantalla. El campo de cantidad tiene que poder
   pulsarse con el pulgar sin ampliar, y la fila tiene que distinguirse de la
   de al lado de un vistazo para no teclear el conteo en el artículo
   equivocado — que es el error que no se descubre hasta el cierre.
   ========================================================================== */

.kito-conteo tbody tr > td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.kito-conteo tbody tr:nth-child(even) {
    background-color: rgba(44, 99, 181, 0.035);
}

/* 16px reales: por debajo de eso Safari en iPad hace zoom al enfocar el
   campo, y el almacenista pierde de vista la fila que estaba contando. */
.kito-conteo input[type="number"] {
    font-size: 1.05rem;
    min-height: 2.9rem;
}

.kito-conteo input[type="number"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(44, 99, 181, 0.25);
}

/* En pantalla estrecha la tabla ya scrollea; lo que no puede encogerse es la
   columna donde se teclea. */
@media (max-width: 768px) {
    .kito-conteo input[type="number"] {
        min-width: 6.5rem;
    }
}

/* ==========================================================================
   TABLERO DE DESPACHO  (Inventario · F1)

   Pensada para TOUCHSCREEN de pie: el almacenista tiene una mano en la
   estantería y la otra en la pantalla, y muchas veces guantes. De ahí las tres
   reglas de este bloque:

     - Nada que haya que pulsar mide menos de 44px de lado. Es el mínimo con el
       que un dedo acierta sin ampliar.
     - Las tarjetas son tarjetas y no filas: se distinguen de un vistazo desde
       medio metro, que es la distancia real a la que se mira el tablero.
     - El campo donde se teclea la cantidad va a 16px reales. Por debajo de eso
       Safari en iPad hace zoom al enfocar y el almacenista pierde de vista la
       línea que estaba surtiendo.
   ========================================================================== */

.kito-tablero-filtro .form-select,
.kito-tablero-filtro .form-control,
.kito-tablero-filtro .btn {
    min-height: 2.9rem;
    font-size: 1rem;
}

/* ---- El día como separador, no como otra fila más ---- */
.kito-tablero-dia {
    margin-bottom: 1.75rem;
}

.kito-tablero-fecha {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem;
    margin-bottom: 0.85rem;
    border-bottom: 2px solid var(--kito-border);
}

.kito-tablero-rotulo {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kito-navy);
    text-transform: capitalize;
}

/* ---- La rejilla de tarjetas ---- */
.kito-tablero-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
}

.kito-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: #fff;
    border: 1px solid var(--kito-border);
    /* La franja de color va a la izquierda y no en el borde entero: desde
       lejos se lee como una columna de urgencia, que es como se escanea. */
    border-left: 6px solid var(--kito-border);
    border-radius: 10px;
    padding: 0.9rem 1rem 1rem;
}

.kito-tarjeta-danger  { border-left-color: #DC3545; }
.kito-tarjeta-warning { border-left-color: #FFC107; }
.kito-tarjeta-primary { border-left-color: var(--kito-primary); }

.kito-tarjeta-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.kito-tarjeta-numero {
    font-size: 0.95rem;
    color: var(--kito-text-muted);
}

.kito-tarjeta-titulo {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--kito-navy);
}

.kito-tarjeta-sub {
    font-size: 0.875rem;
    color: var(--kito-text-muted);
}

.kito-tarjeta-clase {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.kito-tarjeta-cotejo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--kito-border);
    font-size: 0.875rem;
}

.kito-cotejo-dato {
    color: var(--kito-navy);
}

.kito-tarjeta-aviso {
    font-size: 0.8rem;
    line-height: 1.35;
    color: #8A6100;
    background: rgba(255, 193, 7, 0.12);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
}

/* margin-top:auto alinea el botón abajo aunque las tarjetas de la fila tengan
   distinta altura: si bailan, el dedo falla el de al lado. */
.kito-tarjeta-boton {
    margin-top: auto;
    padding-top: 0.7rem;
}

a.kito-tarjeta-boton {
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- La pantalla de surtir ---- */
.kito-despacho-cabeza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem 1.5rem;
    background: #fff;
    border: 1px solid var(--kito-border);
    border-left: 6px solid var(--kito-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.kito-despacho-dato {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kito-despacho-rotulo {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kito-text-muted);
}

.kito-despacho-valor {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kito-navy);
}

.kito-despacho tbody tr > td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.kito-despacho tbody tr:nth-child(even) {
    background-color: rgba(44, 99, 181, 0.035);
}

.kito-despacho-articulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kito-navy);
}

.kito-despacho-agotada {
    color: var(--kito-text-muted);
}

.kito-despacho-cant {
    font-size: 1.05rem;
    min-height: 2.9rem;
}

.kito-despacho-cant:focus {
    box-shadow: 0 0 0 0.25rem rgba(44, 99, 181, 0.25);
}

.kito-despacho-campo .btn {
    min-width: 2.9rem;
    min-height: 2.9rem;
    font-size: 1.05rem;
}

.kito-despacho-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.kito-despacho-botones {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.kito-despacho-botones .btn {
    min-height: 3.2rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

/* En pantalla estrecha la tabla ya scrollea; lo que no puede encogerse es la
   columna donde se teclea, ni los botones de abajo. */
@media (max-width: 768px) {
    .kito-despacho-campo {
        min-width: 10rem;
    }

    .kito-despacho-botones {
        width: 100%;
    }

    .kito-despacho-botones .btn {
        flex: 1 1 auto;
    }
}

/* A DÓNDE SE CARGA: departamento y concepto, arriba de las líneas.

   Van juntos en una caja y no sueltos entre el encabezado y la tabla, porque
   responden a la misma pregunta y se leen de una vez. En pantalla ancha caben
   uno al lado del otro; en tablet vertical se apilan y siguen siendo dos
   campos, no una rejilla que haya que descifrar. */
.kito-despacho-cargo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.9rem 1.25rem;
    max-width: 52rem;
    background: #fff;
    border: 1px solid var(--kito-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.kito-despacho-concepto .form-select {
    min-height: 2.9rem;
    font-size: 1rem;
}

/* La ayuda de debajo es la que dice cuándo NO tocar el campo. Se deja legible:
   encogerla al tamaño de una nota al pie es lo mismo que quitarla. */
.kito-despacho-concepto .form-text {
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ==========================================================================
   INV021 — La bandeja de aprobación, al estilo de QkitoInsight.

   Tarjetas-pestaña con el CONTEO grande y el rótulo debajo. El conteo va
   primero y en grande a propósito: quien entra a una bandeja no viene a leer
   los nombres de las etapas, viene a ver cuánto le falta por firmar.

   Las tarjetas las genera el servidor desde FlujoEtapa, así que esta hoja no
   sabe cuántas son ni cómo se llaman.
   ========================================================================== */

.kito-bandeja {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kito-bandeja-tarjeta {
    flex: 1 1 8.5rem;
    min-width: 8.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(13, 43, 78, 0.12);
    border-radius: 0.5rem;
    background-color: #fff;
    text-decoration: none;
    color: var(--kito-navy);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.kito-bandeja-tarjeta:hover {
    border-color: var(--kito-primary);
    box-shadow: 0 2px 6px rgba(44, 99, 181, 0.12);
    color: var(--kito-navy);
}

/* La activa se marca con una barra a la izquierda y no solo con color: en una
   fila de seis tarjetas casi iguales, un tono distinto no se ve. */
.kito-bandeja-tarjeta.activa {
    border-color: var(--kito-primary);
    border-left-width: 4px;
    background-color: rgba(44, 99, 181, 0.05);
}

.kito-bandeja-conteo {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}

.kito-bandeja-rotulo {
    font-size: 0.78rem;
    color: #5b6b7f;
    line-height: 1.2;
}

/* En móvil las tarjetas se ponen en dos columnas en vez de estirarse: seis
   tarjetas a lo ancho de un teléfono no se pueden pulsar. */
@media (max-width: 576px) {
    .kito-bandeja-tarjeta {
        flex: 1 1 calc(50% - 0.75rem);
        min-width: 0;
    }
}

/* ==========================================================================
   INV022 — La matriz de permisos de aprobación.

   Una tabla de casillas donde lo que importa es no equivocarse de fila: marcar
   "Aprobar" al usuario de arriba en vez de al de abajo se descubre el día que
   alguien firma algo que no debía.
   ========================================================================== */

.kito-matriz tbody tr:hover {
    background-color: rgba(44, 99, 181, 0.06);
}

.kito-matriz th {
    vertical-align: bottom;
    line-height: 1.2;
}

/* La casilla grande y centrada: es lo único pulsable de la fila. */
.kito-matriz .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

/* La columna del usuario se queda fija al desplazar en horizontal: con ocho
   acciones, la tabla scrollea y sin esto se marca a ciegas. */
.kito-matriz td:first-child,
.kito-matriz th:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
}

.kito-matriz tbody tr:hover td:first-child {
    background-color: #eef3fa;
}

/* ==========================================================================
   CONCILIACION BANCARIA

   La fila que se despliega bajo cada linea pendiente del extracto para
   resolverla -emparejarla con el libro, o mandarla a ajuste-. Va en un tono
   mas apagado y sin borde superior para que se lea como lo que es: una
   accion sobre la fila de arriba, no otra linea del extracto.
   ========================================================================== */

.kito-fila-resolver > td {
    background-color: #f7f9fc;
    border-top: 0;
    padding-top: .25rem;
    padding-bottom: .5rem;
}

/* Para los numericos cortos -los dias de tolerancia-, que con el ancho de
   Bootstrap quedan pidiendo un numero de cuatro cifras. */
.kito-ancho-corto {
    max-width: 6rem;
}

/* INV023 — El panel de requisiciones por ordenar. Tope de alto y scroll propio:
   con veinte líneas pendientes, sin esto el botón de "traer lo marcado" se va
   fuera de la pantalla y nadie lo encuentra. */
.kito-por-ordenar {
    max-height: 22rem;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   La línea que se edita en su sitio, dentro de la tabla del documento.

   Un ancho mínimo, porque un campo numérico dentro de una celda estrecha se
   encoge hasta que no se lee lo que tiene escrito — y lo que no se lee, se
   aprueba sin mirarlo.
   -------------------------------------------------------------------------- */
.kito-linea-editable {
    min-width: 8.5rem;
    margin-left: auto;
}

/* ==========================================================================
   La firma del perfil.

   El lienzo se muestra al ancho que quepa pero dibuja a 600x200 fijos: así la
   firma sale del mismo tamaño la capture quien la capture, en pantalla grande
   o en tableta. La conversión de coordenadas la hace el JS de la página.
   ========================================================================== */

.kito-firma-lienzo {
    border: 1px dashed rgba(13, 43, 78, 0.3);
    border-radius: 0.5rem;
    background-color: #fff;
    overflow: hidden;
}

.kito-firma-lienzo canvas {
    display: block;
    width: 100%;
    height: auto;
    /* Sin esto, arrastrar el dedo para firmar desplaza la página entera. */
    touch-action: none;
    cursor: crosshair;
}

.kito-firma-actual {
    border: 1px solid rgba(13, 43, 78, 0.12);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: #fff;
}

.kito-firma-actual img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Listado de facturas de proveedor
   --------------------------------------------------------------------------
   Los anchos estaban en atributos style= dentro de la vista, que la regla de
   estilos del proyecto no permite. Van aqui, y solo los fijos: la columna del
   PROVEEDOR se queda sin ancho a proposito, para que se quede todo el sobrante
   y la razon social quepa en una linea. Renglon de una linea = lista que se
   recorre de un vistazo.
   ========================================================================== */

.kito-tabla-fp th.kito-fp-numero    { width: 7rem; }
.kito-tabla-fp th.kito-fp-documento { width: 9rem; }
.kito-tabla-fp th.kito-fp-fecha     { width: 7rem; }
.kito-tabla-fp th.kito-fp-importe   { width: 8rem; }
.kito-tabla-fp th.kito-fp-estado    { width: 9rem; }
.kito-tabla-fp th.kito-fp-acciones  { width: 4rem; }

/* ==========================================================================
   Programación de pagos: el número de cheque de cada proveedor
   --------------------------------------------------------------------------
   Va en la fila del proveedor, a la derecha de su nombre: con cheque sale un
   egreso y un cheque por proveedor, no por factura. Lo enciende y lo apaga
   el JS alternando d-none, nunca tocando style.
   ========================================================================== */

.kito-pp-cheque {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kito-pp-cheque-numero {
    width: 7rem;
}

/* --- Auxiliares: la lista larga que esconde lo que se fue a buscar ---
   La pantalla de auxiliares pone arriba las cuentas que manejan auxiliar
   y abajo los auxiliares. En un cliente con cincuenta cuentas —HLC tiene
   48— la tabla de abajo queda fuera de la pantalla, y al filtrar por una
   cuenta la página vuelve al principio: parece que no hizo nada.

   El ancla compensa el alto de la barra al saltar; el techo evita que la
   lista de arriba empuje a la de abajo fuera de la vista. */
.kito-ancla {
    position: relative;
    top: -70px;
}

.kito-tabla-con-techo {
    max-height: 22rem;
    overflow-y: auto;
}

/* ==========================================================================
   Impresión de documentos: recibo, egreso, depósito, facturas
   --------------------------------------------------------------------------
   Las páginas «Imprimir» de cada documento. En pantalla son una vista previa
   con el ancho de una hoja; en papel las acomoda qkito-print.css, que ya trae
   el membrete, el pie y el folio. Aquí va solo lo que es propio del papel de
   un documento y ningún informe tenía: el bloque de datos, el importe en
   letras, el cuadro de totales, las firmas y el sello de estado.
   ========================================================================== */

.kito-doc {
    max-width: 56rem;
}

.kito-doc-rotulo {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}

.kito-doc-bloque {
    height: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.kito-doc-principal {
    font-size: 1.05rem;
    font-weight: 600;
}

.kito-doc-seccion {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* El importe en letras: es lo que se lee en voz alta al entregar el papel. */
.kito-doc-letras {
    margin: 0.75rem 0;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    font-style: italic;
}

/* El cuadro de totales va a la derecha y angosto, como en cualquier factura:
   a todo el ancho, la cifra queda a un palmo de su rótulo. */
.kito-doc-totales {
    width: 21rem;
    max-width: 100%;
    margin-left: auto;
    margin-top: 0.75rem;
}

.kito-doc-totales td {
    padding: 0.15rem 0.5rem;
}

.kito-doc-totales .kito-doc-total-final td {
    border-top: 2px solid var(--kito-navy);
    font-size: 1.05rem;
    font-weight: 700;
}

.kito-doc-firmas {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
    break-inside: avoid;
}

.kito-doc-firma {
    flex: 1;
    padding-top: 0.25rem;
    border-top: 1px solid #000;
    text-align: center;
    font-size: 0.8rem;
}

/* Borrador o anulado: un papel así no vale, y tiene que decirlo él mismo
   aunque se separe de la pantalla donde se imprimió. */
.kito-doc-sello {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    border: 2px solid var(--bs-danger);
    border-radius: 0.25rem;
    color: var(--bs-danger);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kito-doc-qr {
    width: 8.5rem;
    height: 8.5rem;
}

/* El código de autorización es largo y sin espacios: sin esto se sale de la
   hoja en vez de partirse. */
.kito-doc-codigo {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

/* Políticas y horarios que la empresa escribe en Parámetros de Inventario
   (orden y requisición de compra). Respeta los saltos de línea tal como se
   escribieron: es texto del cliente, no se le da formato. */
.kito-doc-politicas {
    margin-top: 1.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
    break-inside: avoid;
}

.kito-doc-politicas-texto {
    white-space: pre-line;
    font-size: 0.8rem;
}

/* El pie de página de la cotización: datos de la empresa, cuentas para
   pagar. Va centrado y al final, después de las políticas. */
.kito-doc-pie {
    margin-top: 1rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
    color: var(--bs-secondary-color);
    break-inside: avoid;
}

/* Impresión por lote (Comprobantes/ImprimirLote): cada comprobante empieza en
   hoja nueva. En pantalla, una raya entre uno y otro para ver dónde corta. */
.kito-lote-documento + .kito-lote-documento {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px dashed var(--bs-border-color);
}

@media print {
    .kito-doc {
        max-width: none;
    }

    .kito-lote-documento + .kito-lote-documento {
        break-before: page;
        page-break-before: always;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .kito-doc-pie {
        margin-top: 5mm;
        border-top-color: #999;
        color: #333;
    }

    .kito-doc-politicas {
        margin-top: 8mm;
        border-top-color: #999;
    }

    .kito-doc-politicas-texto {
        font-size: 7.5pt;
    }

    .kito-doc-bloque {
        border: 0.5pt solid #999;
        border-radius: 0;
        padding: 3pt 5pt;
    }

    .kito-doc-rotulo {
        font-size: 7pt;
        color: #444;
    }

    .kito-doc-principal {
        font-size: 10.5pt;
    }

    .kito-doc-seccion {
        margin-top: 8pt;
        font-size: 8pt;
    }

    .kito-doc-letras {
        border-color: #999;
        font-size: 9pt;
    }

    .kito-doc-totales {
        width: 70mm;
    }

    .kito-doc-totales .kito-doc-total-final td {
        border-top: 1pt solid #000;
        font-size: 10.5pt;
    }

    .kito-doc-firmas {
        margin-top: 22mm;
    }

    .kito-doc-firma {
        font-size: 7.5pt;
    }

    .kito-doc-sello {
        border-color: #b00;
        color: #b00;
    }

    .kito-doc-qr {
        width: 32mm;
        height: 32mm;
    }

    .kito-doc-codigo {
        font-size: 7pt;
    }
}

/* ==========================================================================
   Qkito IA: captura de facturas
   --------------------------------------------------------------------------
   Lo propio de las pantallas de Pages/IA. Todo lo demas en ellas es Bootstrap.
   ========================================================================== */

/* La zona donde se sueltan los archivos, en la bandeja. El borde punteado es
   lo que dice "aqui se suelta"; el solido de Bootstrap se leia como una caja
   mas. */
.kito-ia-zona {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: var(--bs-tertiary-bg);
    padding: 2rem 1rem;
    text-align: center;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Mientras se arrastra un archivo encima. La clase la pone y la quita el
   guion de la bandeja. */
.kito-ia-zona.kito-ia-zona-activa {
    border-color: var(--kito-primary);
    background-color: rgba(44, 99, 181, 0.06);
}

/* El documento original: en la revision de una captura y en el panel de la
   ficha de la factura. Alto en proporcion a la ventana y no cuadrado, que es
   como venia de Bootstrap: una factura es una hoja vertical. */
.kito-ia-visor {
    display: block;
    width: 100%;
    height: 75vh;
    min-height: 28rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg);
}

.kito-ia-visor-imagen {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* En pantallas anchas el documento se queda a la vista mientras se recorre
   el formulario de al lado, que es mas largo. */
@media (min-width: 1200px) {
    .kito-ia-documento {
        position: sticky;
        top: 1rem;
    }
}

/* Nada de esto se imprime: lo que se imprime es la factura, no su captura. */
@media print {
    .kito-ia-zona,
    .kito-ia-visor,
    .kito-ia-visor-imagen {
        display: none;
    }
}

/* ==========================================================================
   Qkito IA: el agente de cotizacion
   --------------------------------------------------------------------------
   El panel lateral de la lista de Cotizaciones. Lo demas en el es Bootstrap.
   ========================================================================== */

/* Lo conversado. Con alto maximo y desplazamiento propio: la propuesta y la
   caja de la instruccion tienen que seguir a la vista aunque se haya hablado
   mucho. */
.kito-ia-agente-historial {
    max-height: 38vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Un turno. Los saltos de linea de lo escrito se respetan; nada de HTML. */
.kito-ia-agente-turno {
    max-width: 90%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Lo que escribio el vendedor, a la derecha. */
.kito-ia-agente-turno-usuario {
    align-self: flex-end;
    background-color: rgba(44, 99, 181, 0.10);
    border-bottom-right-radius: 0.2rem;
}

/* Lo que contesto el agente, a la izquierda. */
.kito-ia-agente-turno-agente {
    align-self: flex-start;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom-left-radius: 0.2rem;
}

/* «Pensando...»: el guion del panel quita esta clase mientras espera. No se
   usa d-none porque Bootstrap lo marca !important y aqui se alterna a mano. */
.kito-ia-agente-oculto {
    visibility: hidden;
}

/* ==========================================================================
   Administracion > Permisos: el perfil y sus acciones en una rejilla
   --------------------------------------------------------------------------
   Una fila por pantalla, la casilla de si la ve y una columna por accion.
   Lo demas es la tabla de Bootstrap.
   ========================================================================== */

/* Las columnas de accion son muchas y angostas: el titulo se parte en vez de
   empujar la tabla fuera de la pantalla. */
.kito-permisos-tabla th.kito-permisos-accion,
.kito-permisos-tabla td.kito-permisos-accion {
    width: 5.5rem;
    min-width: 4.5rem;
    font-size: 0.8rem;
    white-space: normal;
}

.kito-permisos-tabla th.kito-permisos-accion .btn {
    font-size: inherit;
    white-space: normal;
}

/* «Ve» se separa de las acciones: es la que manda sobre toda la fila. */
.kito-permisos-tabla .kito-permisos-ve {
    width: 4rem;
    border-right: 2px solid var(--bs-border-color);
}

/* La pantalla que no distingue acciones: una sola celda que lo dice. */
.kito-permisos-tabla td.kito-permisos-opera {
    font-style: italic;
    padding-left: 1rem;
}

/* El titulo de las columnas se queda a la vista al bajar por un modulo largo.
   Se pega contra lo que DESPLAZA: la pagina en pantalla ancha, el marco en
   pantalla angosta. La raya de abajo va por sombra porque una celda pegada
   pierde su borde. */
.kito-permisos-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 -2px 0 var(--bs-border-color);
}

/* El marco de la rejilla. NO lleva table-responsive en pantalla ancha: un
   contenedor con desplazamiento propio se queda con el titulo pegado, y como
   el que desplaza es la pagina, el titulo se iba con ella. En pantalla angosta
   la tabla no cabe y el marco desplaza en los dos sentidos, con su tope de
   alto, para que el titulo siga pegado dentro de el. */
@media (max-width: 991.98px) {
    .kito-permisos-marco {
        overflow: auto;
        max-height: 70vh;
    }
}

/* Guardar se queda al pie de la ventana: con los modulos desplegados la
   pagina es larga y el boton quedaba al final de todo. */
.kito-permisos-guardar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 0.75rem 0;
    background-color: var(--kito-bg);
    border-top: 1px solid var(--kito-border);
}

/* INV065 — La factura de venta de Inventario. Las listas de los buscadores y
   los anchos de columna que en la ficha de Contabilidad van escritos en la
   vista: aqui, como manda la regla, van en clases. */
.kito-lista-buscador {
    z-index: 1000;
    max-height: 16rem;
    overflow: auto;
}

.kito-col-3 { width: 3rem; }
.kito-col-5 { width: 5rem; }
.kito-col-6 { width: 6rem; }
.kito-col-7 { width: 7rem; }
.kito-col-8 { width: 8rem; }
.kito-col-9 { width: 9rem; }

.kito-tope-22 { max-width: 22rem; }
.kito-tope-28 { max-width: 28rem; }

/* INV100 — Tableros e informes gerenciales
   (docs/QKITO-TABLEROS-COMPRAS-CONSUMOS.md). La paleta verde de inventario y
   los colores de las series viven aqui: los graficos los leen con
   getComputedStyle y no los escriben en el JavaScript. */
:root {
    --kito-inv-1: #2E7D4F;
    --kito-inv-2: #3E9C6B;
    --kito-inv-3: #5CA77C;
    --kito-inv-4: #7FB89A;
    --kito-serie-ingresos: #2C63B5;
    --kito-serie-costos: #E08A2C;
    --kito-serie-gastos: #C0392B;
    --kito-serie-utilidad: #2E7D4F;
    --kito-serie-gop: #5CA7E0;
    --kito-serie-ebitda: #7E57C2;
}

/* La tarjeta de una cifra: blanca, con su icono en un circulo. */
.kito-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background-color: #fff;
    border: 1px solid var(--kito-border);
    border-radius: 10px;
}

.kito-kpi-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--kito-primary);
    background-color: var(--kito-header-bg);
}

.kito-kpi-icono-compras    { color: var(--kito-inv-1); background-color: #E6F2EB; }
.kito-kpi-icono-consumo    { color: var(--kito-serie-costos); background-color: #FBEFE0; }
.kito-kpi-icono-ajuste     { color: var(--kito-serie-ebitda); background-color: #EFEAF8; }
.kito-kpi-icono-diferencia { color: var(--kito-primary); background-color: var(--kito-header-bg); }
.kito-kpi-icono-alerta     { color: var(--kito-danger); background-color: #FBE9E7; }

.kito-kpi-rotulo {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kito-text-muted);
}

.kito-kpi-valor {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--kito-navy);
}

.kito-kpi-nota {
    font-size: 0.78rem;
    color: var(--kito-text-muted);
}

/* El lienzo de un grafico. La altura va aqui porque Chart.js se dibuja sin
   proporcion fija y toma la de su contenedor. */
.kito-grafico {
    position: relative;
    height: 320px;
}

.kito-grafico-bajo {
    position: relative;
    height: 240px;
}

/* ===========================================================================
   P&L USALI (CONS037) — la hoja «B» y su despliegue
   =========================================================================== */
.kito-pl {
    font-size: 0.84rem;
}

    .kito-pl thead th {
        background-color: var(--kito-header-bg);
        color: var(--kito-navy);
        font-weight: 600;
        white-space: nowrap;
    }

    .kito-pl td {
        white-space: nowrap;
    }

    .kito-pl td:first-child {
        white-space: normal;
    }

/* La sangria de cada nivel: 0 titulos y totales, 1 renglones, 2 cuentas,
   3 centros de costo. */
.kito-pl-nivel-0 { padding-left: 1rem; }
.kito-pl-nivel-1 { padding-left: 2rem; }
.kito-pl-nivel-2 { padding-left: 3.25rem; }
.kito-pl-nivel-3 { padding-left: 4.75rem; }

/* El hueco del boton de desplegar, lo tenga o no la fila: asi los nombres
   quedan alineados. */
.kito-pl-boton {
    display: inline-block;
    width: 1.1rem;
    margin-right: 0.25rem;
    text-align: center;
    vertical-align: baseline;
    line-height: 1;
}

.kito-pl-pct {
    color: var(--kito-text-muted);
    font-size: 0.78rem;
}

/* La columna del presupuesto, un tono aparte para no confundirla con lo real. */
.kito-pl-ppto {
    color: var(--kito-primary-dark);
}

.kito-pl-enc > td {
    padding-top: 0.6rem;
    font-weight: 700;
    color: var(--kito-navy);
    border-bottom: 1px solid var(--kito-border);
}

.kito-pl-subtotal > td {
    font-weight: 600;
    border-top: 1px solid var(--kito-border);
}

.kito-pl-total > td {
    font-weight: 700;
    color: var(--kito-navy);
    background-color: var(--kito-header-bg);
    border-top: 1px solid var(--kito-navy);
}

.kito-pl-sin > td {
    font-weight: 600;
    color: var(--kito-danger);
}

.kito-pl-detalle > td {
    background-color: #FAFBFD;
    font-size: 0.8rem;
}

.kito-pl-centro > td {
    color: var(--kito-text-muted);
}

/* El renglon al que llevo una tarjeta. */
.kito-pl-destello > td {
    box-shadow: inset 0 0 0 2px var(--kito-primary);
}

/* El formulario de una regla dentro de la tabla de configuracion. */
.kito-pl-regla {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.35rem 0.25rem 0;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--kito-border);
    border-radius: 999px;
    background-color: #fff;
    font-size: 0.78rem;
}

.kito-pl-prefijo {
    width: 7.5rem;
}

.kito-pl-formula {
    font-size: 0.74rem;
    color: var(--kito-text-muted);
}

.kito-pl-inactivo > td {
    color: var(--kito-text-muted);
    text-decoration: line-through;
}

@media print {
    .kito-pl {
        font-size: 7.5pt;
    }

    .kito-pl-detalle > td,
    .kito-pl-total > td {
        background-color: transparent;
    }
}

/* ============================================================================
   POS — PosAdministracion (Pages/Pos)
   ============================================================================ */

/* La muestra del color que el cliente le puso a un ambiente o a un operador. El
   color en sí va en el atributo fill del SVG, no en un estilo. */
.kito-pos-muestra {
    width: .8rem;
    height: .8rem;
    vertical-align: -.05rem;
    margin-right: .25rem;
}

/* El lienzo del plano de una zona. Las mesas se colocan con atributos del SVG. */
.kito-pos-plano {
    display: block;
    width: 100%;
    max-height: 72vh;
    background-color: #f8f9fb;
    touch-action: none;
    user-select: none;
}

.kito-pos-plano-borde {
    fill: none;
    stroke: #c9d1dc;
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

.kito-pos-plano-fondo {
    opacity: .55;
}

.kito-pos-plano-mesa {
    cursor: grab;
}

.kito-pos-plano-mesa rect,
.kito-pos-plano-mesa ellipse {
    fill: #ffffff;
    stroke: var(--kito-navy);
    stroke-width: 2;
}

.kito-pos-plano-mesa text {
    fill: var(--kito-navy);
    font-size: 18px;
    font-weight: 600;
    pointer-events: none;
}

.kito-pos-plano-mesa.seleccionada rect,
.kito-pos-plano-mesa.seleccionada ellipse {
    fill: #e7f0fb;
    stroke: var(--kito-primary);
    stroke-width: 4;
}

/* El código de enrolamiento se enseña una sola vez: grande y fácil de dictar. */
.kito-pos-codigo {
    font-family: var(--bs-font-monospace);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .15em;
}

/* POS · La carta. La sangría del árbol de grupos: una clase por nivel. */
.kito-pos-nivel-1 { padding-left: .5rem; }
.kito-pos-nivel-2 { padding-left: 2rem; }
.kito-pos-nivel-3 { padding-left: 3.5rem; }
.kito-pos-nivel-4 { padding-left: 5rem; }
.kito-pos-nivel-5 { padding-left: 6.5rem; }
.kito-pos-nivel-6 { padding-left: 8rem; }

/* El botón de la carta tal como lo pinta la tablet (Pages/Pos/_BotonPos). Es un
   SVG: los colores del cliente van en sus atributos fill, aquí solo la forma. */
.kito-pos-boton {
    width: 10rem;
    max-width: 100%;
    height: auto;
}

.kito-pos-boton-fondo {
    stroke: rgba(0, 0, 0, .15);
    stroke-width: 1;
}

.kito-pos-boton-nombre {
    font-size: 15px;
    font-weight: 600;
}

.kito-pos-boton-pie {
    font-size: 13px;
    opacity: .85;
}

.kito-pos-boton-marca {
    font-size: 11px;
    font-weight: 700;
    fill: #b02a37;
}

.kito-pos-boton.agotado .kito-pos-boton-fondo,
.kito-pos-boton.agotado .kito-pos-boton-nombre,
.kito-pos-boton.agotado .kito-pos-boton-pie {
    opacity: .4;
}

/* La carta de un ambiente: los botones en rejilla, como en la tablet. */
.kito-pos-carta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kito-pos-carta .kito-pos-boton {
    width: 8.5rem;
}

/* Un campo numérico dentro de una tabla: lo justo para una cifra. */
.kito-pos-campo-corto {
    width: 6.5rem;
}

/* ---------------------------------------------------------------------------
   Hoteles · Ajustes y anulaciones del folio

   Cada renglon lleva su propio formulario en una sola linea: el motivo ocupa
   lo que sobre y el valor del ajuste es corto. Sin esto los dos campos se
   reparten el ancho por igual y el motivo no se puede leer.
   --------------------------------------------------------------------------- */
.kito-campo-motivo {
    flex: 1 1 12rem;
    min-width: 10rem;
    width: auto;
}

.kito-campo-valor {
    flex: 0 0 7rem;
    width: 7rem;
}

/* ---------------------------------------------------------------------------
   Hoteles · El rack de habitaciones

   Una fila por habitacion y una columna por noche. La primera columna y el
   encabezado se quedan quietos al desplazar. Cada celda es un enlace entero:
   se toca la celda, no un boton dentro de ella.

   El color dice el estado; la raya de la izquierda, que la reserva es de un
   grupo.
   --------------------------------------------------------------------------- */
.kito-rack-marco {
    overflow: auto;
    max-height: 70vh;
}

.kito-rack {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.78rem;

}

.kito-rack th,
.kito-rack td {
    width: 5.5rem;
    min-width: 5.5rem;
    height: 2rem;
    padding: 0;
    border-right: 1px solid var(--kito-border);
    border-bottom: 1px solid var(--kito-border);
    background: #fff;
}

.kito-rack thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto;
    padding: 0.2rem 0.15rem;
    background: var(--kito-header-bg);
    font-weight: 400;
    text-align: center;
    line-height: 1.15;
}

.kito-rack .kito-rack-hab {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 7rem;
    min-width: 7rem;
    padding: 0 0.4rem;
    background: var(--kito-bg);
    white-space: nowrap;
}

.kito-rack thead .kito-rack-hab {
    z-index: 3;
    background: var(--kito-header-bg);
    text-align: left;
}

.kito-rack-mes {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--kito-text-muted);
}

.kito-rack thead .kito-rack-finde {
    background: #DCE7F7;
}

.kito-rack thead .kito-rack-hoy {
    background: var(--kito-primary);
    color: #fff;
}

.kito-rack thead .kito-rack-hoy .kito-rack-mes {
    color: #fff;
}

.kito-rack td.kito-rack-hoy {
    border-left: 2px solid var(--kito-primary);
    border-right: 2px solid var(--kito-primary);
}

.kito-rack-piso td {
    height: 1.4rem;
    background: var(--kito-bg);
    font-weight: 600;
    color: var(--kito-text-muted);
}

.kito-rack-celda {
    display: block;
    width: 100%;
    height: 2rem;
    padding: 0 0.3rem;
    line-height: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: inherit;
}

.kito-rack-celda:hover {
    filter: brightness(0.93);
}

.kito-rack-libre:hover {
    background: #E6F4EA;
    filter: none;
}

.kito-rack-ocupada {
    background: #2C63B5;
    color: #fff;
}

.kito-rack-reservada {
    background: #BFE3C8;
    color: #14432A;
}

.kito-rack-tentativa {
    background: #FBE7A1;
    color: #5A4500;
}

.kito-rack-mantenimiento {
    background: repeating-linear-gradient(45deg, #5B6470, #5B6470 6px, #6E7783 6px, #6E7783 12px);
    color: #fff;
}

.kito-rack-administracion {
    background: #8E5B3A;
    color: #fff;
}

.kito-rack-historia {
    background: #E5E7EB;
    color: #6B7280;
}

.kito-rack-grupo {
    box-shadow: inset 4px 0 0 #7B3FA0;
}

.kito-rack-inicio {
    font-weight: 600;
}

.kito-rack-escogida {
    outline: 2px solid #F59E0B;
    outline-offset: -2px;
}

/* El cuadrito de la leyenda. */
.kito-rack-muestra {
    display: inline-block;
    width: 1.1rem;
    height: 0.8rem;
    margin-right: 0.2rem;
    vertical-align: middle;
    border: 1px solid var(--kito-border);
    border-radius: 2px;
}

.kito-rack-distintivo-grupo {
    background: #7B3FA0;
    color: #fff;
}

/* Las firmas de la tarjeta de registro: aire para firmar encima de la raya. */
.kito-doc-firmas {
    margin-top: 4rem;
}

/* Las politicas y condiciones al pie de un documento del hotel: se imprimen
   como se escribieron, con sus saltos de linea, en letra chica. */
.kito-doc-politicas {
    margin-top: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre-line;
}

/* El cuadro donde se escriben, en configuracion. */
.kito-campo-politicas {
    min-height: 16rem;
    font-size: 0.85rem;
}

/* El rack, interactivo (PMS040): arrastrar una reserva, sus bordes, y asignar
   tocando. */
.kito-rack-celda {
    position: relative;
}

.kito-rack-celda[draggable="true"] {
    cursor: grab;
}

/* Los bordes de la estadia: de ahi se agarra para alargarla o acortarla. */
.kito-rack-asa {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.5rem;
    background: rgba(0, 0, 0, 0.28);
    cursor: ew-resize;
}

.kito-rack-asa-inicio {
    left: 0;
}

.kito-rack-asa-fin {
    right: 0;
}

.kito-rack-asa:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* La celda sobre la que se va a soltar. */
.kito-rack-sobre {
    outline: 2px dashed #F59E0B;
    outline-offset: -2px;
}

/* Asignando: las celdas donde cabe la reserva. Son botones, no enlaces. */
.kito-rack-destino {
    border: 0;
    background: repeating-linear-gradient(45deg, #D7F0DD, #D7F0DD 6px, #BFE3C8 6px, #BFE3C8 12px);
    color: #14432A;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.kito-rack-destino:hover,
.kito-rack-destino:focus {
    background: #2E7D4F;
    color: #fff;
    filter: none;
}

/* Hoteles · Grupos: las columnas donde se escribe una cantidad, en lo apartado y en
   el rooming list. Angostas: son un numero, no un texto. */
.kito-col-corta {
    width: 7rem;
}

.kito-col-numero {
    width: 4.5rem;
}

.kito-col-habitacion {
    width: 6rem;
}

/* El rooming list es una rejilla de captura: los campos pegados, sin aire, para que
   quepa una pantalla de huespedes. */
.kito-rooming td {
    padding: 0.15rem 0.2rem;
}

.kito-rooming .form-control,
.kito-rooming .form-select {
    min-width: 4rem;
}

/* Donde se pega la lista de nombres. */
.kito-campo-pegar {
    min-height: 9rem;
    font-size: 0.85rem;
    white-space: pre;
}

/* ===========================================================================
   POS — el tiquete de 80 mm en la administración (Pages/Pos/Facturas/Cafe)
   El CAFE de una cuenta se ve y se imprime en el formato de la térmica: es el
   mismo tiquete que QPos saca por la impresora, con la letra de ancho fijo y el
   QR como imagen.
   =========================================================================== */
.kito-pos-tiquete {
    /* El ancho de un rollo de 80 mm: lo que se ve es lo que sale. */
    width: 80mm;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem .75rem;
    color: #111;
    background: #fff;
    border: 1px solid #d5dbe3;
    box-shadow: 0 2px 6px rgba(13, 43, 78, .12);
    page: tiquete;
}

.kito-pos-tiquete-texto {
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.35;
    white-space: pre;
    overflow: visible;
}

.kito-pos-tiquete-qr {
    display: block;
    width: 34mm;
    height: 34mm;
    margin: .4rem auto;
}

/* El rollo: 80 mm de ancho y el largo que haga falta. Página con nombre, para no
   cambiarle el tamaño a ningún otro documento que se imprima. */
@page tiquete {
    size: 80mm auto;
    margin: 2mm;
}

/* Al imprimir sale el tiquete y nada más: ni el menú ni el membrete de la hoja. */
@media print {
    body:has(.kito-pos-tiquete) * {
        visibility: hidden;
    }

    body:has(.kito-pos-tiquete) .kito-pos-tiquete,
    body:has(.kito-pos-tiquete) .kito-pos-tiquete * {
        visibility: visible;
    }

    .kito-pos-tiquete {
        position: absolute;
        left: 0;
        top: 0;
        width: 76mm;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .kito-pos-tiquete-texto {
        font-size: 8.5pt;
    }
}

/* Hoteles · Rooming list: los renglones de los acompañantes, debajo de su reserva. */
.kito-rooming-acompanante td {
    background-color: var(--bs-tertiary-bg);
    border-top: 0;
}

/* Hoteles · Programación del aseo: la hoja de cada camarera empieza en su propia página. */
.kito-doc-salto {
    margin-bottom: 3rem;
}

@media print {
    .kito-doc-salto {
        margin-bottom: 0;
        break-after: page;
    }
}

/* Hoteles · Informes: la barra de un porcentaje dentro de una tabla. Solo el
   <progress>: el Inicio usa la misma clase en un <div> (inicio.css) y este
   ancho lo encogía. Hasta el 20/10/2026 no chocaban porque esta regla quedaba
   presa en el @media print sin cerrar del tiquete del POS. */
progress.kito-barra {
    width: 4.5rem;
    height: 0.55rem;
    vertical-align: middle;
    accent-color: var(--bs-primary);
}

/* Las listas de los buscadores de las líneas del comprobante (pendiente 150):
   altura fija con barra, para bajar y seguir viendo; al llegar al final la
   página pide los siguientes. Reemplaza el z-index que iba en línea. */
.kito-lista-buscador {
    z-index: 1000;
    max-height: 18rem;
    overflow-y: auto;
    min-width: 22rem;
}

/* Sangria por nivel del arbol de partidas de un proyecto (pendiente 147):
   presupuesto contra ejecutado. Mas de seis niveles se quedan en el sexto. */
.kito-nivel-1 { padding-left: 1.25rem !important; }
.kito-nivel-2 { padding-left: 2.25rem !important; }
.kito-nivel-3 { padding-left: 3.25rem !important; }
.kito-nivel-4 { padding-left: 4.25rem !important; }
.kito-nivel-5 { padding-left: 5.25rem !important; }
.kito-nivel-6 { padding-left: 6.25rem !important; }

/* ============================================================================
   MODO OSCURO (20/10/2026)

   Se enciende con data-bs-theme="dark" en el <html>: lo pone el script del
   <head> del layout y lo cambia qkito-tema.js. Bootstrap 5.3 ya trae su modo
   oscuro para todo lo suyo —tarjetas, formularios, tablas, menús—; lo que
   sigue es lo PROPIO de Qkito, que fija colores claros a mano.

   Todo vive en este bloque y nada de arriba se cambió: el modo claro queda
   exactamente como estaba. Cada regla de aquí es la contraparte de una de
   arriba, y gana por especificidad (lleva el atributo delante), no por orden;
   por eso también alcanza a inicio.css, que se carga después.

   Lo que NO se oscurece, a propósito:
     · lo impreso: qkito-tema.js vuelve a claro antes de imprimir;
     · el lienzo y la imagen de la firma, y el tiquete del POS: son papel;
     · las pastillas de estado (badges, celdas del rack): son pequeñas, ya
       traen su fondo claro con su texto oscuro y se leen igual.
   ============================================================================ */
[data-bs-theme="dark"] {
    --kito-bg: #12161C;
    --kito-superficie: #1B2129;
    --kito-border: #2E3742;
    --kito-text-muted: #9AA4B2;
    --kito-header-bg: #1F2B3B;
    --kito-header-text: #A9C9F2;
    --kito-titulo: #D5E3F5;
    --kito-tinte: #232D3A;
    --bs-body-bg: #1B2129;
    --bs-body-color: #D7DDE5;
    --bs-tertiary-bg: #222932;
    --bs-secondary-bg: #262E38;
    --bs-border-color: #2E3742;
}

[data-bs-theme="dark"] body {
    color: var(--bs-body-color);
}

/* Lo que arriba lleva fondo blanco. */
[data-bs-theme="dark"] :is(
    .kito-topbar, .kito-modulos, .table, .card-header.kito-header-plano, .kito-vacio,
    .kito-empresa-opcion, .kito-tarjeta, .kito-despacho-cabeza, .kito-despacho-cargo,
    .kito-bandeja-tarjeta, .kito-matriz th:first-child, .kito-kpi, .kito-pl-regla,
    .kito-rack td, .aviso, .kito-acceso, .kito-indicador) {
    background-color: var(--kito-superficie);
}

/* Lo que arriba lleva un tinte claro de fondo. */
[data-bs-theme="dark"] :is(
    .kito-ubicacion, .kito-opcion-tipo:hover, .kito-fila-resolver > td, .kito-pl-detalle > td,
    .kito-pos-plano, .aviso-marcar-form, .kito-barra) {
    background-color: var(--kito-tinte);
}

[data-bs-theme="dark"] :is(.aviso, .kito-acceso, .kito-indicador, .aviso-marcar-form,
    .kito-seccion-encabezado, .kito-mayores) {
    border-color: var(--kito-border);
}

[data-bs-theme="dark"] .table tbody tr:hover,
[data-bs-theme="dark"] .kito-matriz tbody tr:hover td:first-child {
    background-color: #24303F;
}

/* La tabla toma el fondo de Bootstrap, no el blanco de --bs-table-bg claro. */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--kito-superficie);
    --bs-table-color: var(--bs-body-color);
}

/* Títulos y cifras que arriba van en navy: sobre negro no se verían. */
[data-bs-theme="dark"] :is(
    h1, .card-header.kito-header-plano, .kito-section-header, .kito-cuenta-grupo, .kito-dato-valor,
    .kito-cuenta-titulo, .kito-empresa-razon, .kito-proverbio-texto, .kito-tablero-rotulo,
    .kito-tarjeta-titulo, .kito-cotejo-dato, .kito-despacho-valor, .kito-despacho-articulo,
    .kito-bandeja-tarjeta, .kito-bandeja-tarjeta:hover, .kito-kpi-valor, .kito-pl thead th,
    .kito-pl-enc > td, .kito-pl-total > td,
    .inicio-saludo, .aviso-titulo, .bandeja-vacia-titulo, .bandeja-simulacion, .kito-acceso-nombre,
    .kito-indicador-valor, .kito-tramo-valor, .kito-mayor-nombre, .aviso-marcar-pregunta) {
    color: var(--kito-titulo);
}

[data-bs-theme="dark"] :is(.kito-modulo-btn:hover, .kito-modulo-btn.activo, .kito-empresa-etiqueta-pred,
    .kito-pl-ppto, .kito-chip .kito-chip-valor) {
    color: var(--kito-header-text);
}

/* Texto gris oscuro de arriba. */
[data-bs-theme="dark"] :is(.form-label, .kito-cuenta-imputable, .kito-modulo-btn, .kito-bandeja-rotulo) {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] :is(.inicio-fecha, .aviso-detalle, .bandeja-vacia, .kito-seccion-titulo,
    .kito-seccion-nota, .kito-acceso-grupo, .kito-indicador-titulo, .kito-moneda,
    .kito-indicador-detalle, .kito-tramo-etiqueta, .kito-mayor-valor, .inicio-bloque-subtitulo,
    .aviso-marcar-campo span) {
    color: var(--kito-text-muted);
}

/* Las cabeceras de color de las tarjetas, en su versión oscura. */
[data-bs-theme="dark"] .card-header.kito-header-alerta {
    background-color: #3A2E17;
    color: #F2C77E;
}

[data-bs-theme="dark"] .card-header.kito-header-exito {
    background-color: #183326;
    color: #8FD3AC;
}

[data-bs-theme="dark"] .card-header.kito-header-neutro {
    background-color: #262C34;
    color: #C3CAD3;
}

[data-bs-theme="dark"] .kito-bloque-empresa {
    background-color: #172A21;
    border-color: #2C4A3A;
}

[data-bs-theme="dark"] .kito-bloque-empresa-titulo {
    color: #8FD3AC;
}

[data-bs-theme="dark"] .kito-aviso-licencia {
    color: #F2C77E;
    background: #3A2E17;
    border-bottom-color: #5A4520;
}

    [data-bs-theme="dark"] .kito-aviso-licencia.kito-aviso-grave {
        color: #F5B38A;
        background: #3D2418;
        border-bottom-color: #6B3A22;
    }

[data-bs-theme="dark"] :is(.bandeja-incompleta, .inicio-aviso-accion, .kito-marca-preliminar) {
    background: #3A2E17;
    color: #F2C77E;
}

/* Las clases de Bootstrap que siguen claras en su modo oscuro, y que las
   vistas usan mucho: tablas con thead claro, fondos bg-light. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-active-bg: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] :is(.bg-light, .bg-white) {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-bg-light {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
}

/* text-dark sobre amarillo o celeste se queda oscuro: ahí sí se lee. */
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning):not(.text-bg-info) {
    color: var(--bs-body-color) !important;
}

/* El azul de la marca como TEXTO (botones de contorno, enlaces del Inicio):
   sobre negro da 2,75:1. Se aclara solo el texto; los rellenos azules con
   letra blanca se quedan como están. */
[data-bs-theme="dark"] {
    --kito-enlace: #7FB2F0;
    --kito-peligro-texto: #F1948A;
    --kito-exito-texto: #7FCB9E;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--kito-enlace);
    border-color: var(--kito-enlace);
}

    [data-bs-theme="dark"] .btn-outline-primary:hover {
        color: #fff;
        border-color: var(--kito-primary);
    }

[data-bs-theme="dark"] :is(.kito-empresa-opcion:hover .kito-empresa-chevron, .kito-kpi-icono, .aviso-icono,
    .aviso-accion, .bandeja-simulacion a, .kito-acceso-icono, .kito-estrella:hover, .kito-indicador-enlace,
    .aviso-marcar > summary) {
    color: var(--kito-enlace);
}

/* El rojo y el verde de los montos (variaciones, P&L sin clasificar). */
[data-bs-theme="dark"] :is(.kito-var-bad, .kito-pl-sin > td) {
    color: var(--kito-peligro-texto);
}

[data-bs-theme="dark"] .kito-var-good {
    color: var(--kito-exito-texto);
}

[data-bs-theme="dark"] .kito-chip-alerta {
    background-color: #3A2E17;
}

    [data-bs-theme="dark"] .kito-chip-alerta :is(.kito-chip-valor, .kito-chip-label) {
        color: #F2C77E;
    }

/* El rack: la cabecera del fin de semana. */
[data-bs-theme="dark"] .kito-rack thead .kito-rack-finde {
    background: #24303F;
}

/* Las filas de color de las tablas de Bootstrap (table-primary, la empresa en
   sesión; table-warning, table-danger...) siguen claras en su modo oscuro, y
   un text-muted adentro desaparece. Toman el tinte oscuro de su color. */
[data-bs-theme="dark"] .table-primary   { --bs-table-bg: var(--bs-primary-bg-subtle); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: var(--bs-secondary-bg-subtle); }
[data-bs-theme="dark"] .table-success   { --bs-table-bg: var(--bs-success-bg-subtle); }
[data-bs-theme="dark"] .table-info      { --bs-table-bg: var(--bs-info-bg-subtle); }
[data-bs-theme="dark"] .table-warning   { --bs-table-bg: var(--bs-warning-bg-subtle); }
[data-bs-theme="dark"] .table-danger    { --bs-table-bg: var(--bs-danger-bg-subtle); }

[data-bs-theme="dark"] :is(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger) {
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* El login (Acceso/Login.cshtml, con sus estilos en la página): el panel del
   formulario es blanco y el título va en navy. El panel de marca ya es oscuro. */
[data-bs-theme="dark"] .acc-panel {
    background-color: var(--kito-superficie);
}

[data-bs-theme="dark"] :is(.acc-titulo, .acc-caja .form-label) {
    color: var(--kito-titulo);
}

/* El botón de apariencia de la barra superior. */
.kito-tema-boton {
    color: var(--kito-text-muted);
    text-decoration: none;
    padding: 0.15rem 0.35rem;
}

    .kito-tema-boton:hover,
    .kito-tema-boton:focus-visible {
        color: var(--kito-primary);
    }