/* ==========================================================================
   KontrolCON — sistema visual de la oficina.

   Colores y letra del dossier de la marca: azul #1B54FF, tinta #161616, marino del motivo
   de la «K» y Poppins para los títulos. La composición (menú oscuro a la izquierda, barra fina
   arriba, «ceja» en mayúsculas espaciadas sobre cada título, cifras en letra de máquina, bordes
   finos y esquinas casi rectas) sigue la consola de Paradarum que gustó.

   Va encima del Bootstrap 5.1 de la plantilla: se retocan sus piezas (tarjetas, tablas, botones,
   insignias, avisos, formularios) para que TODAS las pantallas cambien sin tocarlas una a una.
   Las fuentes se sirven desde aquí mismo (wwwroot/fuentes): nada de Google en el navegador del
   cliente.
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/Poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fuentes/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fuentes/PublicSans-400-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/IBMPlexMono-600.woff2") format("woff2"); }

:root {
    /* La franja de la instalación de pruebas (igual en claro y en oscuro: tiene que chillar). */
    --kc-pruebas: #B42318;
    --kc-pruebas-texto: #FFFFFF;
    /* Marca */
    --kc-azul: #1B54FF;
    --kc-azul-hover: #1544D6;
    --kc-azul-tinta: #1440C4;
    --kc-azul-suave: rgba(27, 84, 255, 0.09);
    --kc-azul-borde: rgba(27, 84, 255, 0.35);
    --kc-tinta: #161616;
    --kc-marino: #19234A;

    /* Menú (oscuro) */
    --kc-rail: #141416;
    --kc-rail-2: #1E1F24;
    --kc-rail-3: #26272D;
    --kc-rail-borde: #2B2C33;
    --kc-rail-texto: #C4C6CF;
    --kc-rail-mudo: #7D808C;

    /* Página (clara) */
    --kc-fondo: #F5F6F8;
    --kc-superficie: #FFFFFF;
    --kc-superficie-2: #F2F3F6;
    --kc-texto: #16171B;
    --kc-mudo: #626878;
    --kc-borde: #E3E5EA;
    --kc-borde-fuerte: #CDD1D9;

    /* Estados */
    --kc-ok: #147A48;
    --kc-ok-suave: #E8F5EE;
    --kc-aviso: #9A5B00;
    --kc-aviso-suave: #FDF4E3;
    --kc-peligro: #C4261D;
    --kc-peligro-suave: #FCEBEA;
    --kc-info: #1440C4;
    --kc-info-suave: #EAF0FF;

    /* Letra */
    --kc-f-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --kc-f-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kc-f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Medidas */
    --kc-radio: 4px;
    --kc-ancho-rail: 260px;
    --kc-alto-barra: 56px;

    /* Lo que Bootstrap 5.1 lee de variables */
    --bs-primary: #1B54FF;
    --bs-primary-rgb: 27, 84, 255;
    --bs-font-sans-serif: var(--kc-f-texto);
    --bs-font-monospace: var(--kc-f-mono);
    --bs-body-font-family: var(--kc-f-texto);
}

/* --- Base ---------------------------------------------------------------- */

html, body {
    font-family: var(--kc-f-texto);
    font-size: 14px;
    line-height: 1.55;
    color: var(--kc-texto);
    background: var(--kc-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link { color: var(--kc-azul-tinta); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--kc-azul); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--kc-f-titulo);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--kc-texto);
}
h1:focus { outline: none; }
.h5, h5 { font-size: 1.05rem; }
.h6, h6 { font-size: 0.95rem; }

.text-muted { color: var(--kc-mudo) !important; }
code, .font-monospace, kbd, pre, samp { font-family: var(--kc-f-mono); }
code { color: var(--kc-azul-tinta); font-size: 0.86em; }
hr { color: var(--kc-borde-fuerte); opacity: 1; }

/* Cifras y rótulos en letra de máquina: números de albarán, importes, etiquetas. */
.kc-mono { font-family: var(--kc-f-mono); font-variant-numeric: tabular-nums; }
.kc-rotulo {
    font-family: var(--kc-f-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kc-mudo);
}

::selection { background: var(--kc-azul-suave); }

/* --- Marco: menú, barra y contenido -------------------------------------- */

.kc-app { display: flex; min-height: 100vh; }

.kc-rail {
    width: var(--kc-ancho-rail);
    flex-shrink: 0;
    background: var(--kc-rail);
    color: var(--kc-rail-texto);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #000;
    z-index: 30;
}

.kc-rail-marca {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--kc-rail-borde);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kc-rail-logo { color: #fff; display: block; line-height: 0; }
.kc-rail-logo:hover { color: #fff; text-decoration: none; }
.kc-rail-logo .kc-marca { width: 168px; height: auto; }
.kc-rail-inquilino {
    font-family: var(--kc-f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kc-rail-mudo);
}

.kc-rail-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

.kc-nav { padding: 10px 12px 18px; display: flex; flex-direction: column; gap: 1px; }

.kc-nav-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 8px 6px;
    font-family: var(--kc-f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kc-rail-mudo);
}
.kc-nav-grupo::after { content: ""; flex: 1; height: 1px; background: var(--kc-rail-borde); }
.kc-nav-grupo:first-child { margin-top: 6px; }

.kc-nav a.kc-nav-enlace {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: var(--kc-radio);
    color: var(--kc-rail-texto);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}
.kc-nav a.kc-nav-enlace:hover { background: var(--kc-rail-2); color: #fff; }
.kc-nav a.kc-nav-enlace.active {
    background: var(--kc-rail-3);
    color: #fff;
    border-left-color: var(--kc-azul);
}
.kc-nav a.kc-nav-enlace.active .kc-icono { color: #7FA0FF; }
.kc-icono { width: 17px; height: 17px; flex-shrink: 0; color: var(--kc-rail-mudo); }
.kc-nav a.kc-nav-enlace:hover .kc-icono { color: var(--kc-rail-texto); }

.kc-rail-pie { margin-top: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 14px; }

.kc-sesion {
    border: 1px solid var(--kc-rail-borde);
    border-radius: var(--kc-radio);
    background: var(--kc-rail-2);
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kc-sesion-fila { display: flex; align-items: center; gap: 10px; }
.kc-sesion-quien { display: flex; flex-direction: column; min-width: 0; }
.kc-sesion-nombre { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-sesion-papel { font-family: var(--kc-f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kc-rail-mudo); }
.kc-sesion-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kc-sesion-botones form { margin: 0; }
.kc-boton-rail {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--kc-rail-texto);
    background: transparent;
    border: 1px solid var(--kc-rail-borde);
    border-radius: var(--kc-radio);
    cursor: pointer;
}
.kc-boton-rail:hover { color: #fff; border-color: #4A4C55; background: var(--kc-rail-3); text-decoration: none; }

.kc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--kc-radio);
    background: var(--kc-azul);
    color: #fff;
    font-family: var(--kc-f-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
a.kc-avatar:hover { color: #fff; text-decoration: none; background: var(--kc-azul-hover); }

.kc-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.kc-barra {
    height: var(--kc-alto-barra);
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(6px);
    border-bottom: 1px solid var(--kc-borde);
}
.kc-migas {
    font-family: var(--kc-f-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.kc-migas-grupo, .kc-migas-sep { color: var(--kc-mudo); }
.kc-migas-pagina { color: var(--kc-texto); overflow: hidden; text-overflow: ellipsis; }
.kc-barra-derecha { display: flex; align-items: center; gap: 14px; }
.kc-barra-fecha {
    font-family: var(--kc-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kc-mudo);
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    padding: 5px 9px;
    background: var(--kc-superficie);
}

.kc-contenido {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 34px 40px 72px;
}

/* La «ceja»: el grupo del menú, sobre el título de cada pantalla. */
.kc-ceja {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--kc-f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kc-mudo);
    margin-bottom: 10px;
}
.kc-ceja::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.kc-contenido h1, .kc-contenido .h1 {
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
/* El párrafo de presentación que casi todas las pantallas ponen bajo el título. */
.kc-contenido > h1 + p,
.kc-contenido > h1 + .text-muted {
    color: var(--kc-mudo);
    font-size: 14.5px;
    max-width: 82ch;
    margin-bottom: 26px;
}
.kc-contenido > h1:not(:has(+ p)) { margin-bottom: 22px; }

.kc-contenido h2, .kc-contenido .h5 { font-size: 16.5px; }
.kc-contenido h2.h4 { font-size: 19px; }

/* Cabecera de pantalla con acciones a la derecha (el tablero). */
.kc-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--kc-borde);
}
.kc-cabecera h1 { margin-bottom: 6px !important; }
.kc-cabecera p { color: var(--kc-mudo); margin: 0; max-width: 70ch; font-size: 14.5px; }
.kc-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Menú en pantallas estrechas ------------------------------------------ */

.kc-menu-boton, .kc-menu-etiqueta { display: none; }

@media (max-width: 900px) {
    .kc-app { flex-direction: column; }
    .kc-rail { width: 100%; height: auto; position: sticky; top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .kc-rail-marca { border-bottom: 0; flex-direction: row; align-items: center; padding: 12px 16px; flex: 1; }
    .kc-rail-logo .kc-marca { width: 132px; }
    .kc-rail-inquilino { display: none; }
    .kc-menu-etiqueta { display: inline-flex; margin-right: 12px; padding: 8px; border: 1px solid var(--kc-rail-borde); border-radius: var(--kc-radio); cursor: pointer; }
    .kc-menu-etiqueta .kc-icono { width: 20px; height: 20px; color: #fff; }
    .kc-rail-cuerpo { display: none; width: 100%; max-height: calc(100vh - 60px); border-top: 1px solid var(--kc-rail-borde); }
    .kc-menu-boton:checked ~ .kc-rail-cuerpo { display: flex; }
    .kc-barra { position: static; padding: 0 16px; }
    .kc-barra-fecha { display: none; }
    .kc-contenido { padding: 24px 16px 56px; }
}

/* --- Tarjetas ---------------------------------------------------------------- */

.card {
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    background: var(--kc-superficie);
    box-shadow: none;
}
.card.shadow-sm { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important; }
.card-body { padding: 18px 20px; }
.card .card-body.py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
.card-header, .card-footer { background: var(--kc-superficie-2); border-color: var(--kc-borde); }
.card.border-primary { border-color: var(--kc-azul-borde) !important; box-shadow: 0 0 0 3px var(--kc-azul-suave); }
.card.border-danger { border-color: #EDB2AE !important; border-left: 3px solid var(--kc-peligro) !important; }
.card.border-warning { border-color: #EFD39E !important; border-left: 3px solid #D9921A !important; }
.card.border-light { border-color: var(--kc-borde) !important; }
.border-top.border-secondary { border-color: var(--kc-rail-borde) !important; }

/* --- Tablas -------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--kc-superficie-2);
    --bs-table-hover-bg: var(--kc-superficie-2);
    color: var(--kc-texto);
    border-color: var(--kc-borde);
    margin-bottom: 0.5rem;
}
.table > thead > tr > th,
.table > thead.table-light > tr > th {
    font-family: var(--kc-f-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kc-mudo);
    background: transparent;
    border-bottom: 1px solid var(--kc-borde-fuerte);
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
}
.table > :not(:first-child) { border-top: 0; }
.table > tbody > tr > td { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--kc-borde); }
.table-sm > tbody > tr > td { padding-top: 6px; padding-bottom: 6px; }
.table-bordered > :not(caption) > * > * { border-color: var(--kc-borde); }
.table-light { --bs-table-bg: var(--kc-superficie-2); }
.table tr.table-light > td { background: var(--kc-superficie-2); }
.table-responsive {
    background: var(--kc-superficie);
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    padding: 4px 14px;
    margin-bottom: 1rem;
}
.card .table-responsive { border: 0; padding: 0; }
/* Los botones de la última columna (Cerrar, Anular…, Eliminar…) bajan de línea cuando no caben,
   en vez de ensanchar la tabla hasta que salga una barra de desplazamiento. */
.kc-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* --- Botones ------------------------------------------------------------------- */

.btn {
    border-radius: var(--kc-radio);
    font-weight: 600;
    font-size: 13.5px;
    padding: 7px 14px;
    letter-spacing: 0.005em;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { font-size: 12.5px; padding: 4px 10px; }
.btn-lg { font-size: 15px; padding: 10px 18px; }

.btn-primary { color: #fff; background: var(--kc-azul); border-color: var(--kc-azul); }
.btn-primary:hover, .btn-primary:focus { color: #fff; background: var(--kc-azul-hover); border-color: var(--kc-azul-hover); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--kc-azul); border-color: var(--kc-azul); opacity: .55; }

.btn-outline-primary { color: var(--kc-azul-tinta); border-color: var(--kc-azul-borde); background: var(--kc-superficie); }
.btn-outline-primary:hover { color: #fff; background: var(--kc-azul); border-color: var(--kc-azul); }

.btn-secondary { color: #fff; background: var(--kc-tinta); border-color: var(--kc-tinta); }
.btn-secondary:hover { color: #fff; background: #2B2C31; border-color: #2B2C31; }

.btn-outline-secondary { color: var(--kc-texto); border-color: var(--kc-borde-fuerte); background: var(--kc-superficie); }
.btn-outline-secondary:hover { color: var(--kc-texto); background: var(--kc-superficie-2); border-color: #B5BAC5; }

.btn-success { color: #fff; background: var(--kc-ok); border-color: var(--kc-ok); }
.btn-success:hover { color: #fff; background: #0F6139; border-color: #0F6139; }
.btn-outline-success { color: var(--kc-ok); border-color: #9CCFB4; background: var(--kc-superficie); }
.btn-outline-success:hover { color: #fff; background: var(--kc-ok); border-color: var(--kc-ok); }

.btn-danger { color: #fff; background: var(--kc-peligro); border-color: var(--kc-peligro); }
.btn-danger:hover { color: #fff; background: #A51E16; border-color: #A51E16; }
.btn-outline-danger { color: var(--kc-peligro); border-color: #EDB2AE; background: var(--kc-superficie); }
.btn-outline-danger:hover { color: #fff; background: var(--kc-peligro); border-color: var(--kc-peligro); }

.btn-warning { color: #1C1300; background: #F2B23A; border-color: #F2B23A; }
.btn-outline-warning { color: var(--kc-aviso); border-color: #E9C98A; background: var(--kc-superficie); }
.btn-outline-warning:hover { color: #1C1300; background: #F2B23A; border-color: #F2B23A; }

.btn-light { background: var(--kc-superficie-2); border-color: var(--kc-borde); color: var(--kc-texto); }
.btn-outline-light { color: var(--kc-rail-texto); border-color: var(--kc-rail-borde); }
.btn-link { font-weight: 600; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--kc-azul-suave);
    border-color: var(--kc-azul);
    outline: none;
}

/* --- Formularios ---------------------------------------------------------------- */

.form-control, .form-select {
    border-radius: var(--kc-radio);
    border-color: var(--kc-borde-fuerte);
    color: var(--kc-texto);
    font-size: 14px;
    padding: 7px 11px;
    background-color: var(--kc-superficie);
}
.form-control-sm, .form-select-sm { font-size: 13px; padding: 4px 9px; }
.form-select-sm { padding-right: 28px; }
.form-control::placeholder { color: #9AA0AD; }
.form-control:disabled, .form-select:disabled { background-color: var(--kc-superficie-2); }
.form-label { font-weight: 600; font-size: 13px; color: var(--kc-texto); margin-bottom: 5px; }
.form-label.small, .form-label .small, label.small { font-size: 12px; }
.form-text { color: var(--kc-mudo); font-size: 12.5px; }
.form-check-input { border-color: var(--kc-borde-fuerte); }
.form-check-input:checked { background-color: var(--kc-azul); border-color: var(--kc-azul); }
.input-group-text { background: var(--kc-superficie-2); border-color: var(--kc-borde-fuerte); font-size: 13px; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #3FB47A; }
.invalid { outline: 1px solid var(--kc-peligro); }
.validation-message { color: var(--kc-peligro); }
.darker-border-checkbox.form-check-input { border-color: #929292; }

/* --- Avisos ------------------------------------------------------------------------ */

.alert {
    border-radius: var(--kc-radio);
    border: 1px solid var(--kc-borde);
    border-left-width: 3px;
    padding: 11px 14px;
    font-size: 13.5px;
}
.alert-success { background: var(--kc-ok-suave); border-color: #B7DEC9; border-left-color: var(--kc-ok); color: #0E4F30; }
.alert-danger { background: var(--kc-peligro-suave); border-color: #F1C2BF; border-left-color: var(--kc-peligro); color: #7A1712; }
.alert-warning { background: var(--kc-aviso-suave); border-color: #F0D9A8; border-left-color: #D9921A; color: #5E3A00; }
.alert-info, .alert-primary { background: var(--kc-info-suave); border-color: #C9D7FF; border-left-color: var(--kc-azul); color: #102B80; }
.alert-secondary, .alert-light { background: var(--kc-superficie); border-color: var(--kc-borde); border-left-color: var(--kc-borde-fuerte); color: var(--kc-mudo); }

.text-success { color: var(--kc-ok) !important; }
.text-danger { color: var(--kc-peligro) !important; }
.text-warning { color: #B36B00 !important; }
.text-primary { color: var(--kc-azul) !important; }

/* --- Insignias: en letra de máquina, contorno fino y color suave (como los estados de
       Paradarum). Las text-bg-* son de Bootstrap 5.2 y aquí va la 5.1: se definen aquí, que
       sin ellas salían blanco sobre blanco. ------------------------------------------ */

.badge {
    font-family: var(--kc-f-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 4px 7px;
    border: 1px solid transparent;
    vertical-align: middle;
}
.badge.bg-success, .text-bg-success { background: var(--kc-ok-suave) !important; color: var(--kc-ok) !important; border-color: #A9D8BF; }
.badge.bg-danger, .text-bg-danger { background: var(--kc-peligro-suave) !important; color: var(--kc-peligro) !important; border-color: #EDB2AE; }
.badge.bg-warning, .text-bg-warning { background: var(--kc-aviso-suave) !important; color: var(--kc-aviso) !important; border-color: #EBCB8B; }
.badge.bg-info, .text-bg-info, .badge.bg-primary, .text-bg-primary { background: var(--kc-info-suave) !important; color: var(--kc-azul-tinta) !important; border-color: #BCCDFF; }
.badge.bg-secondary, .text-bg-secondary { background: var(--kc-superficie-2) !important; color: var(--kc-mudo) !important; border-color: var(--kc-borde-fuerte); }
.badge.bg-light, .text-bg-light { background: var(--kc-superficie) !important; color: var(--kc-texto) !important; border-color: var(--kc-borde-fuerte); }
.badge.bg-dark, .text-bg-dark { background: var(--kc-tinta) !important; color: #fff !important; }
.badge.text-dark { color: inherit !important; }

/* --- Varios --------------------------------------------------------------------------- */

details > summary { cursor: pointer; }
.list-group-item { border-color: var(--kc-borde); }
.nav-tabs { border-color: var(--kc-borde); }
.nav-tabs .nav-link { color: var(--kc-mudo); font-weight: 600; border-radius: var(--kc-radio) var(--kc-radio) 0 0; }
.nav-tabs .nav-link.active { color: var(--kc-texto); border-color: var(--kc-borde) var(--kc-borde) var(--kc-superficie); }
.progress { background: var(--kc-superficie-2); border-radius: 2px; }
.progress-bar { background: var(--kc-azul); }

.blazor-error-boundary {
    background: var(--kc-peligro-suave);
    border: 1px solid #F1C2BF;
    border-left: 3px solid var(--kc-peligro);
    border-radius: var(--kc-radio);
    padding: 1rem 1.2rem;
    color: #7A1712;
}
.blazor-error-boundary::after { content: "Ha ocurrido un error en esta parte de la pantalla."; }

/* --- Cifras del tablero (como los paneles de consumo de Paradarum) --------------------- */

/* Las líneas entre cifras son el fondo que asoma por el hueco de 1 px: salen bien en cualquier
   reparto (cuatro en fila en el ordenador, dos y dos en el móvil). */
.kc-cifras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--kc-borde);
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    margin-bottom: 20px;
    overflow: hidden;
}
@media (max-width: 1000px) { .kc-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-cifra {
    padding: 18px 20px 16px;
    background: var(--kc-superficie);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
a.kc-cifra:hover { background: var(--kc-superficie-2); text-decoration: none; color: inherit; }
.kc-cifra-valor {
    font-family: var(--kc-f-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--kc-texto);
}
.kc-cifra-valor small { font-size: 13px; color: var(--kc-mudo); margin-left: 3px; letter-spacing: 0; }
.kc-cifra-nota { font-size: 12.5px; color: var(--kc-mudo); }
.kc-cifra.kc-alerta .kc-cifra-valor { color: var(--kc-peligro); }
.kc-cifra.kc-atencion .kc-cifra-valor { color: #B36B00; }

/* Paneles con cabecera (título a la izquierda, enlace o contador a la derecha). */
.kc-panel {
    background: var(--kc-superficie);
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    margin-bottom: 20px;
}
.kc-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kc-borde);
}
.kc-panel-cabecera h2 { font-size: 15px !important; margin: 0; }
.kc-panel-cuerpo { padding: 14px 18px; }
.kc-panel .table-responsive { border: 0; border-radius: 0; padding: 0 18px 6px; margin: 0; }
.kc-contador {
    font-family: var(--kc-f-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid #EDB2AE;
    background: var(--kc-peligro-suave);
    color: var(--kc-peligro);
}
.kc-contador.kc-ok { border-color: #A9D8BF; background: var(--kc-ok-suave); color: var(--kc-ok); }

.kc-atencion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--kc-borde);
}
.kc-atencion-item:last-child { border-bottom: 0; }
.kc-atencion-item b { display: block; font-size: 13.5px; }
.kc-atencion-item span { display: block; color: var(--kc-mudo); font-size: 12.5px; }

.kc-rejilla-tablero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.kc-rejilla-tablero.kc-una-columna { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) { .kc-rejilla-tablero { grid-template-columns: minmax(0, 1fr); } }
.kc-rejilla-tablero > .kc-panel { margin-bottom: 0; }
.kc-rejilla-tablero { margin-bottom: 24px; }

/* --- Mapa de la flota (tablero) ---------------------------------------------------------- */

.kc-mapa { height: 380px; border-radius: 0 0 var(--kc-radio) var(--kc-radio); z-index: 0; }
.kc-panel-mapa .kc-mapa:not(:last-child) { border-radius: 0; }
.kc-mapa-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--kc-mudo); }
.kc-mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.kc-mapa-leyenda b { font-family: var(--kc-f-mono); font-weight: 600; color: var(--kc-texto); }
.kc-mapa-leyenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.kc-mapa-leyenda i.kc-leyenda-planta { background: var(--kc-tinta); border-radius: 2px; }
.kc-mapa-leyenda .kc-leyenda-aviso, .kc-mapa-leyenda .kc-leyenda-aviso b { color: #B36B00; }
.kc-mapa-nota {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
    padding: 10px 18px; border-top: 1px solid var(--kc-borde); font-size: 12.5px; color: var(--kc-mudo);
}

/* Marcas: la planta (rótulo oscuro con el número) y los grupos de una misma obra (círculo con el número). */
.kc-mapa-planta { background: none; border: 0; }
.kc-mapa-planta-caja {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--kc-tinta);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    font-family: var(--kc-f-mono);
}
.kc-mapa-planta-caja span { font-size: 9.5px; letter-spacing: 0.14em; color: #B8BCC8; }
.kc-mapa-planta-caja b { font-size: 13px; }
.kc-mapa-grupo b {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    color: #fff; border: 2px solid #fff;
    font-family: var(--kc-f-mono); font-size: 12px; font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.kc-mapa-linea { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-family: var(--kc-f-texto); font-size: 12.5px; }
.kc-mapa-linea + .kc-mapa-linea { border-top: 1px solid var(--kc-borde); }
.kc-mapa-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.kc-mapa-detalle { color: var(--kc-mudo); }
.leaflet-popup-content { margin: 10px 12px; max-height: 260px; overflow-y: auto; }
.leaflet-container { font-family: var(--kc-f-texto); }

/* --- Pie y créditos (KontrolIN · Atinfor · EFGrupo) -------------------------------------
   Fijo abajo, a la derecha del menú: se ve siempre, también en las pantallas cortas. El contenido
   deja sitio debajo para que el pie no tape lo último. */

.kc-pie {
    position: fixed;
    left: var(--kc-ancho-rail);
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 8px 32px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(6px);
    border-top: 1px solid var(--kc-borde);
    font-size: 12px;
    color: var(--kc-mudo);
}
.kc-contenido { padding-bottom: 96px; }
.kc-pie-producto { display: inline-flex; align-items: center; gap: 12px; }
.kc-pie-producto a { line-height: 0; color: var(--kc-texto); }
.kc-pie .kc-marca.kc-pie-marca { width: 92px; height: auto; }

.kc-creditos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--kc-mudo); }
.kc-creditos-oscuro { color: #9A9EAD; }
.kc-creditos-par { display: inline-flex; align-items: center; gap: 8px; }
.kc-creditos-rotulo { font-family: var(--kc-f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; }
.kc-creditos-enlace { display: inline-flex; line-height: 0; color: var(--kc-texto); border-radius: 2px; }
.kc-creditos-oscuro .kc-creditos-enlace { color: #fff; }
.kc-creditos-enlace:hover { opacity: 1; filter: brightness(1.15); text-decoration: none; }
.kc-creditos-enlace:focus-visible { outline: 2px solid var(--kc-azul); outline-offset: 3px; }
.kc-creditos .kc-marca.kc-creditos-kontrolin { width: 74px; height: auto; }
.kc-creditos-atinfor { height: 12px; width: auto; }
.kc-creditos-efgrupo { height: 26px; width: auto; }
.kc-creditos:not(.kc-creditos-oscuro) .kc-creditos-enlace { opacity: 0.85; }

@media (max-width: 900px) {
    .kc-pie { left: 0; padding: 7px 16px; justify-content: center; }
    .kc-pie-producto span { display: none; }
    .kc-contenido { padding-bottom: 110px; }
}
@media (max-width: 600px) {
    .kc-creditos-rotulo { display: none; }
    .kc-pie-producto { display: none; }
}

/* La barra del menú, fina y oscura (la de Windows por defecto era un borrón gris). */
.kc-rail-cuerpo { scrollbar-width: thin; scrollbar-color: #33343B transparent; }
.kc-rail-cuerpo::-webkit-scrollbar { width: 8px; }
.kc-rail-cuerpo::-webkit-scrollbar-thumb { background: #33343B; border-radius: 4px; }
.kc-rail-cuerpo::-webkit-scrollbar-track { background: transparent; }

/* --- Entrada (pantalla de acceso, con el motivo de la «K» del dossier) ------------------ */

.kc-entrada {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    background: var(--kc-tinta);
}
.kc-entrada-arte {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    padding: 44px 52px 120px;
    color: #fff;
}
.kc-entrada-k {
    position: absolute;
    right: -6%;
    bottom: -8%;
    height: 118%;
    width: auto;
    color: var(--kc-marino);
    pointer-events: none;
}
.kc-entrada-arte > *:not(.kc-entrada-k) { position: relative; }
.kc-entrada-arte .kc-marca { width: min(460px, 80%); height: auto; color: #fff; }
.kc-entrada-lema { font-family: var(--kc-f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #9A9EAD; }
.kc-entrada-logo { display: block; line-height: 0; color: #fff; width: min(460px, 80%); }
.kc-entrada-logo .kc-marca { width: 100%; }
.kc-entrada-pie {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 55%;
    z-index: 2;
    padding: 22px 52px 26px;
    background: linear-gradient(to top, rgba(22, 22, 22, 0.92) 55%, rgba(22, 22, 22, 0));
}
.kc-entrada-pie .kc-creditos .kc-marca { width: 92px; }
.kc-entrada-pie .kc-creditos-atinfor { height: 16px; }
.kc-entrada-pie .kc-creditos-efgrupo { height: 36px; }
.kc-entrada-panel {
    background: var(--kc-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.kc-entrada-caja { width: 100%; max-width: 380px; }
.kc-entrada-caja h1 { font-size: 28px; margin: 6px 0 6px; }
.kc-entrada-caja > p { color: var(--kc-mudo); margin-bottom: 26px; }
.kc-entrada-caja .form-control { padding: 10px 12px; font-size: 15px; }
.kc-entrada-caja .btn { padding: 10px 14px; font-size: 14.5px; }

@media (max-width: 900px) {
    .kc-entrada { grid-template-columns: 1fr; }
    .kc-entrada-arte { padding: 28px 24px; min-height: 200px; gap: 20px; }
    .kc-entrada-k { height: 160%; }
    .kc-entrada-pie { position: static; width: auto; padding: 20px 24px; background: var(--kc-tinta); }
}

/* --- Lista de códigos LER para marcar (documento de aceptación) ------------------------- */

.kc-ler-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px; }
.kc-ler-lista .form-check-label .kc-mono { margin-right: 4px; color: var(--kc-mudo); }

/* --- Barra: hora e interruptor de tema ------------------------------------------------ */

.kc-barra-hora {
    font-family: var(--kc-f-mono);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--kc-texto);
    border: 1px solid var(--kc-borde);
    border-radius: var(--kc-radio);
    padding: 4px 9px;
    background: var(--kc-superficie);
}
.kc-tema {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--kc-borde-fuerte);
    border-radius: 13px;
    background: var(--kc-superficie-2);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.kc-tema:focus-visible { outline: 2px solid var(--kc-azul); outline-offset: 2px; }
.kc-tema-bola {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #D98E04;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform .18s ease, background-color .18s ease;
}
.kc-tema svg { width: 13px; height: 13px; }
.kc-tema-sol circle { fill: currentColor; }
.kc-tema-sol path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.kc-tema-luna { display: none; fill: currentColor; }
html[data-tema="oscuro"] .kc-tema { background: var(--kc-azul); border-color: var(--kc-azul); }
html[data-tema="oscuro"] .kc-tema-bola { transform: translateX(20px); background: #10131A; color: #C9D6FF; }
html[data-tema="oscuro"] .kc-tema-sol { display: none; }
html[data-tema="oscuro"] .kc-tema-luna { display: block; }
@media (prefers-reduced-motion: reduce) { .kc-tema, .kc-tema-bola { transition: none; } }

/* Logotipos con dos versiones (tinta para el tema claro, blanco para el oscuro). */
.kc-solo-oscuro { display: none !important; }
html[data-tema="oscuro"] .kc-solo-claro { display: none !important; }
html[data-tema="oscuro"] .kc-solo-oscuro { display: inline-block !important; }

/* === Tema oscuro ============================================================================
   Se cambian las variables y, donde el tema claro llevaba un color fijo (bordes de avisos e
   insignias, fondos translúcidos de la barra y el pie, piezas de Bootstrap que no leen
   variables), se repite aquí la regla con su versión oscura. El menú ya era oscuro. */

html[data-tema="oscuro"] {
    color-scheme: dark;
    --kc-azul-tinta: #8FAEFF;
    --kc-azul-suave: rgba(64, 110, 255, 0.18);
    --kc-azul-borde: rgba(120, 155, 255, 0.45);

    --kc-fondo: #0F1115;
    --kc-superficie: #171A20;
    --kc-superficie-2: #1F232B;
    --kc-texto: #E6E8ED;
    --kc-mudo: #9AA0AD;
    --kc-borde: #2A2F38;
    --kc-borde-fuerte: #3A404C;

    --kc-ok: #45C08A;
    --kc-ok-suave: rgba(69, 192, 138, 0.12);
    --kc-aviso: #F0B454;
    --kc-aviso-suave: rgba(240, 180, 84, 0.12);
    --kc-peligro: #FF7A70;
    --kc-peligro-suave: rgba(255, 122, 112, 0.12);
    --kc-info: #8FAEFF;
    --kc-info-suave: rgba(64, 110, 255, 0.14);

    --bs-body-color: var(--kc-texto);
    --bs-body-bg: var(--kc-fondo);
}

html[data-tema="oscuro"] .kc-barra { background: rgba(23, 26, 32, 0.92); }
html[data-tema="oscuro"] .kc-pie { background: rgba(23, 26, 32, 0.94); }
html[data-tema="oscuro"] .kc-rail { border-right-color: var(--kc-borde); }

/* Botones: los de color sólido vuelven a un tono que aguante el texto blanco. */
html[data-tema="oscuro"] .btn-secondary { background: #2E333D; border-color: #2E333D; }
html[data-tema="oscuro"] .btn-secondary:hover { background: #3A404C; border-color: #3A404C; }
html[data-tema="oscuro"] .btn-outline-secondary:hover { border-color: #4B5261; }
html[data-tema="oscuro"] .btn-success { background: #1E8A57; border-color: #1E8A57; }
html[data-tema="oscuro"] .btn-success:hover { background: #197548; border-color: #197548; }
html[data-tema="oscuro"] .btn-outline-success { border-color: rgba(69, 192, 138, 0.45); }
html[data-tema="oscuro"] .btn-outline-success:hover { background: #1E8A57; border-color: #1E8A57; color: #fff; }
html[data-tema="oscuro"] .btn-danger { background: #C8362C; border-color: #C8362C; }
html[data-tema="oscuro"] .btn-danger:hover { background: #AE2C23; border-color: #AE2C23; }
html[data-tema="oscuro"] .btn-outline-danger { border-color: rgba(255, 122, 112, 0.45); }
html[data-tema="oscuro"] .btn-outline-danger:hover { background: #C8362C; border-color: #C8362C; color: #fff; }
html[data-tema="oscuro"] .btn-outline-warning { border-color: rgba(240, 180, 84, 0.45); }
html[data-tema="oscuro"] .btn-outline-primary:hover { color: #fff; }

/* Formularios: Bootstrap 5.1 pinta de blanco casillas y flechas. */
html[data-tema="oscuro"] .form-control::placeholder { color: #6E7584; }
html[data-tema="oscuro"] .form-check-input { background-color: var(--kc-superficie-2); }
html[data-tema="oscuro"] .form-check-input:checked { background-color: var(--kc-azul); }
html[data-tema="oscuro"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AEB4C0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-tema="oscuro"] .form-select option,
html[data-tema="oscuro"] .form-select optgroup { background: var(--kc-superficie); color: var(--kc-texto); }
html[data-tema="oscuro"] .form-control:focus, html[data-tema="oscuro"] .form-select:focus { background-color: var(--kc-superficie); color: var(--kc-texto); }

/* Avisos e insignias: fondo suave, borde y letra claros. */
html[data-tema="oscuro"] .alert-success { border-color: rgba(69, 192, 138, 0.3); color: #A6E6C6; }
html[data-tema="oscuro"] .alert-danger { border-color: rgba(255, 122, 112, 0.3); color: #FFB8B1; }
html[data-tema="oscuro"] .alert-warning { border-color: rgba(240, 180, 84, 0.3); color: #F5D08F; }
html[data-tema="oscuro"] .alert-info, html[data-tema="oscuro"] .alert-primary { border-color: rgba(120, 155, 255, 0.3); color: #BCCBFF; }
html[data-tema="oscuro"] .badge.bg-success, html[data-tema="oscuro"] .text-bg-success { border-color: rgba(69, 192, 138, 0.4); }
html[data-tema="oscuro"] .badge.bg-danger, html[data-tema="oscuro"] .text-bg-danger { border-color: rgba(255, 122, 112, 0.4); }
html[data-tema="oscuro"] .badge.bg-warning, html[data-tema="oscuro"] .text-bg-warning { border-color: rgba(240, 180, 84, 0.4); }
html[data-tema="oscuro"] .badge.bg-info, html[data-tema="oscuro"] .text-bg-info,
html[data-tema="oscuro"] .badge.bg-primary, html[data-tema="oscuro"] .text-bg-primary { border-color: rgba(120, 155, 255, 0.4); }
html[data-tema="oscuro"] .badge.bg-dark, html[data-tema="oscuro"] .text-bg-dark { background: #E6E8ED !important; color: #111 !important; }
html[data-tema="oscuro"] .text-warning,
html[data-tema="oscuro"] .kc-cifra.kc-atencion .kc-cifra-valor,
html[data-tema="oscuro"] .kc-mapa-leyenda .kc-leyenda-aviso,
html[data-tema="oscuro"] .kc-mapa-leyenda .kc-leyenda-aviso b { color: var(--kc-aviso) !important; }
html[data-tema="oscuro"] .kc-contador { border-color: rgba(255, 122, 112, 0.4); }
html[data-tema="oscuro"] .kc-contador.kc-ok { border-color: rgba(69, 192, 138, 0.4); }
html[data-tema="oscuro"] .card.border-danger { border-color: rgba(255, 122, 112, 0.35) !important; }
html[data-tema="oscuro"] .card.border-warning { border-color: rgba(240, 180, 84, 0.35) !important; }
html[data-tema="oscuro"] .blazor-error-boundary { border-color: rgba(255, 122, 112, 0.3); color: #FFB8B1; }

/* Utilidades de Bootstrap con color fijo. */
html[data-tema="oscuro"] .bg-white { background-color: var(--kc-superficie) !important; }
html[data-tema="oscuro"] .bg-light { background-color: var(--kc-superficie-2) !important; }
html[data-tema="oscuro"] .text-dark { color: var(--kc-texto) !important; }
html[data-tema="oscuro"] .border { border-color: var(--kc-borde) !important; }
html[data-tema="oscuro"] .table { --bs-table-striped-color: var(--kc-texto); --bs-table-hover-color: var(--kc-texto); }
html[data-tema="oscuro"] .table-light,
html[data-tema="oscuro"] .table > thead.table-light > tr > th,
html[data-tema="oscuro"] .table tr.table-light > td { --bs-table-bg: var(--kc-superficie-2); background: var(--kc-superficie-2); color: var(--kc-texto); }
html[data-tema="oscuro"] .table-warning,
html[data-tema="oscuro"] .table-warning > td { --bs-table-bg: rgba(240, 180, 84, 0.10); background: rgba(240, 180, 84, 0.10); color: var(--kc-texto); }
html[data-tema="oscuro"] .list-group-item { background: var(--kc-superficie); color: var(--kc-texto); }
html[data-tema="oscuro"] .nav-tabs .nav-link.active { background: var(--kc-superficie); }
html[data-tema="oscuro"] .modal-content, html[data-tema="oscuro"] .dropdown-menu { background: var(--kc-superficie); color: var(--kc-texto); border-color: var(--kc-borde); }
html[data-tema="oscuro"] .btn-close { filter: invert(1); }

/* Mapa: las teselas de OpenStreetMap, invertidas (así se leen igual de bien sobre oscuro). */
html[data-tema="oscuro"] .leaflet-container { background: #1B1E24; }
html[data-tema="oscuro"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.6); }
html[data-tema="oscuro"] .leaflet-popup-content-wrapper,
html[data-tema="oscuro"] .leaflet-popup-tip { background: var(--kc-superficie); color: var(--kc-texto); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.6); }
html[data-tema="oscuro"] .leaflet-bar a { background: var(--kc-superficie); color: var(--kc-texto); border-bottom-color: var(--kc-borde); }
html[data-tema="oscuro"] .leaflet-bar a:hover { background: var(--kc-superficie-2); }
html[data-tema="oscuro"] .leaflet-control-attribution { background: rgba(23, 26, 32, 0.8) !important; color: var(--kc-mudo); }
html[data-tema="oscuro"] .leaflet-control-attribution a { color: var(--kc-azul-tinta); }
html[data-tema="oscuro"] .kc-mapa-leyenda i.kc-leyenda-planta { box-shadow: 0 0 0 1px #8A909C; }

/* Instalación de pruebas (Erp:Entorno = pruebas): una franja arriba en todas las pantallas, para
   que nadie confunda erp-pruebas con la de verdad. */
.kc-pruebas {
    background: var(--kc-pruebas);
    color: var(--kc-pruebas-texto);
    font-family: var(--kc-f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.3rem 1rem;
}