/* =============================================================================
   RA.SMPP.WEB — hoja de estilos.

   Adopta el sistema visual de drawview.cl: tipografía Inter autoalojada y la paleta
   azul noche con acento #4c8dff. Los tokens de :root son el tema OSCURO, con los mismos
   nombres y valores que usa ese sitio. El tema CLARO —el de por defecto— redefine esos
   tokens al final del archivo, bajo :root[data-tema="claro"].

   Las fuentes van en /fuentes y no desde un CDN: el sitio original las sirve así
   y evita una dependencia externa en cada carga.
   ========================================================================== */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/inter-700.woff2) format("woff2"); }

:root {
    --bg:            #0b1020;
    --panel-2:       #182545;
    --superficie-0:  #0b1424;
    --superficie-1:  #101a2f;
    --superficie-2:  #16223e;
    --elegido:       #1b2b52;
    --chip-fondo:    #1a2745;

    --line:          #24345a;
    --line-soft:     #1c2947;
    --line-fuerte:   #33477a;

    --text:          #e9effa;
    --text-dim:      #9fb0cc;
    --text-mute:     #7e8da8;

    --accent:        #4c8dff;
    --accent-2:      #a78bfa;
    --ok:            #34d399;
    --err:           #f87171;

    --barra:         rgb(10 16 32 / 72%);
    --velo:          rgb(4 8 18 / 68%);
    --cielo-1:       #16264a;
    --cielo-2:       #1a1740;
    --tarjeta:       linear-gradient(180deg, rgb(24 37 69 / 55%), rgb(19 29 51 / 85%));

    --primario-1:      #4c8dff;
    --primario-2:      #2f6fe0;
    --primario-borde:  #6ba2ff;
    --primario-texto:  #f2f7ff;

    /* Altura real de la barra superior. La lateral se pega justo debajo, así que
       si esta cifra y el alto de la barra se separan, aparece una franja o un
       solape. Van juntas a propósito. */
    --alto-barra:    48px;
    --ancho-lateral: 214px;

    --radius:    10px;
    --radius-lg: 14px;
    --shadow:    0 10px 30px rgb(3 8 20 / 55%);

    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* El degradado de fondo del sitio original: dos halos fríos sobre el azul noche. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 12% -8%, var(--cielo-1), transparent 62%),
        radial-gradient(760px 480px at 92% 6%, var(--cielo-2), transparent 60%);
    pointer-events: none;
}

body.sin-sesion {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

::selection { background: rgb(76 141 255 / 30%); }

/* ---------------------------------------------------------------- barra superior */

.barra {
    background: var(--barra);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra-int {
    max-width: 1560px;
    margin: 0 auto;
    height: var(--alto-barra);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* La marca se alinea con la lateral: es la cabecera de esa columna, no un
   elemento suelto que casualmente está arriba a la izquierda. */
.barra-int .marca { flex: 0 0 auto; min-width: calc(var(--ancho-lateral) - 20px); }
.barra-int .usuario { margin-left: auto; }

@media (width < 900px) {
    .barra-int .marca { min-width: 0; }
}

.marca {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.marca-grande {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.punto { color: var(--accent); }

.modulo {
    font-size: 13px;
    color: var(--text-mute);
    padding-left: 14px;
    border-left: 1px solid var(--line-soft);
}

.usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nombre { font-size: 13.5px; font-weight: 500; color: var(--text-dim); }

.perfil {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: var(--chip-fondo);
    border: 1px solid var(--line-soft);
    padding: 2px 8px;
    border-radius: 999px;
}

.form-salir { margin: 0; }
.form-dist { margin: 0; }

.sel-dist {
    font: inherit;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: var(--chip-fondo);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
}

.sel-dist:hover { border-color: var(--line-fuerte); }
.sel-dist:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip-dist {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: var(--chip-fondo);
    border: 1px solid var(--line-soft);
    padding: 3px 10px;
    border-radius: 999px;
}

.chip-dist.sin { color: var(--err); border-color: rgb(248 113 113 / 32%); background: rgb(248 113 113 / 10%); }

/* Botón secundario, calcado del .btn del sitio original. */
.btn-salir {
    font: inherit;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, opacity .15s;
}

.btn-salir:hover { border-color: var(--line-fuerte); background: var(--elegido); }
.btn-salir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- contenido */

/*
   Dos columnas: navegación fija a la izquierda, contenido a la derecha.

   El ancho de la lateral es fijo y el del contenido es 1fr con minmax(0, …). Ese
   minmax no es decorativo: sin él, una tabla ancha estira su columna de grid y
   empuja la página entera a scroll horizontal en lugar de desbordar dentro de su
   propio contenedor, que es lo que se quiere.
*/

.marco {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    grid-template-areas: "nav contenido";
    max-width: 1560px;
    margin: 0 auto;
    align-items: start;
}

.contenido {
    grid-area: contenido;
    min-width: 0;
    padding-inline: 30px;
    padding-block: 34px 64px;
}

.contenido-centro { width: 100%; max-width: 400px; }

/* Sin sesión no hay rejilla: el login se centra en la página y punto. */
body.sin-sesion .contenido-centro { margin: 0 auto; }

/*
   Por debajo de la anchura en que caben las dos columnas, la lateral deja de ser
   columna y pasa a ser una tira horizontal sobre el contenido. Se conserva el
   agrupado —cada grupo sigue junto y con su título— porque es lo que hace
   navegable el menú; lo que se pierde es la disposición vertical, que a este
   ancho no cabe.
*/
@media (width < 900px) {
    .marco {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nav" "contenido";
    }

    .lateral {
        position: static;
        max-height: none;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
        padding: 16px 16px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .grupo { flex: 0 1 auto; }
    .grupo-tit { padding-bottom: 4px; }
    .lateral a { padding-block: 5px; }
    .contenido { padding-inline: 16px; padding-block: 24px 48px; }
}

.titulo {
    font-size: clamp(23px, 4vw, 31px);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    text-wrap: balance;
}

.entradilla {
    color: var(--text-dim);
    max-width: 64ch;
    margin: 0 0 30px;
}

.panel {
    background: var(--tarjeta);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
}

.panel h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.panel p { color: var(--text-dim); max-width: 64ch; margin: 0 0 18px; }

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

.lista-modulos li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px;
    color: var(--text-dim);
}

.lista-modulos li:last-child { border-bottom: none; }

.pendiente {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--chip-fondo);
    border: 1px solid var(--line-soft);
    padding: 2px 8px;
    border-radius: 999px;
    flex: none;
}

/* ---------------------------------------------------------------- login */

.tarjeta-login {
    background: var(--tarjeta);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px 30px 26px;
    width: 100%;
}

.cabecera-login { margin-bottom: 26px; }

.lema {
    font-size: 13.5px;
    color: var(--text-mute);
    margin: 5px 0 0;
}

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.campo input {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s;
}

.campo input::placeholder { color: var(--text-mute); }

.campo input:focus-visible {
    outline: none;
    border-color: var(--primario-borde);
    box-shadow: 0 0 0 3px rgb(76 141 255 / 22%);
}

/* Botón primario: el degradado azul del sitio original. */
.btn-principal {
    width: 100%;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--primario-texto);
    background: linear-gradient(180deg, var(--primario-1), var(--primario-2));
    border: 1px solid var(--primario-borde);
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
    margin-top: 8px;
    transition: filter .15s, box-shadow .15s;
}

.btn-principal:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgb(47 111 224 / 35%); }
.btn-principal:focus-visible { outline: 2px solid var(--primario-borde); outline-offset: 2px; }

/* Botón de Google según su guía de marca: fondo blanco, "G" a color, texto gris oscuro. */
.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s, box-shadow .15s;
}

.btn-google:hover { background: #f8faff; box-shadow: 0 6px 18px rgb(66 133 244 / 30%); }
.btn-google:focus-visible { outline: 2px solid var(--primario-borde); outline-offset: 2px; }

.errores {
    color: var(--err);
    background: rgb(248 113 113 / 10%);
    border: 1px solid rgb(248 113 113 / 28%);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
    font-size: 13.5px;
}

.errores ul { margin: 0; padding-left: 18px; }
.errores:empty { display: none; }

.error-campo {
    display: block;
    color: var(--err);
    font-size: 12.5px;
    margin-top: 5px;
}

.pie-login {
    font-size: 12.5px;
    color: var(--text-mute);
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------------- navegación */

a.marca { color: inherit; text-decoration: none; }

/*
   La navegación va a la izquierda y agrupada por el flujo del negocio —Dashboard,
   Clientes, Proveedores, Informes, Operación—, no por el módulo técnico que la
   sirve. El operador piensa «tengo que revisar un proveedor», no «tengo que ir a
   Mapas», y el menú debe hablar su idioma.

   Los títulos de grupo son <span>, no enlaces: una categoría no es un destino, y
   hacerla clicable obliga a inventar una página intermedia que nadie quiere ver.
*/

.lateral {
    grid-area: nav;
    align-self: start;
    position: sticky;
    top: var(--alto-barra);
    max-height: calc(100vh - var(--alto-barra));
    overflow-y: auto;
    padding: 26px 14px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-right: 1px solid var(--line-soft);
}

.grupo { display: flex; flex-direction: column; gap: 1px; }

.grupo-tit {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 0 10px 7px;
}

.lateral a {
    font-size: 13.5px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;

    /* La franja de activo vive aquí, transparente, para que al encenderse no
       desplace el texto ni un píxel. */
    border-left: 2px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}

.lateral a:hover { background: var(--superficie-1); color: var(--text); }
.lateral a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.lateral a.activo {
    color: var(--text);
    background: var(--elegido);
    border-color: var(--line-soft);
    border-left-color: var(--accent);
    font-weight: 500;
}

/* ---------------------------------------------------------------- cabeceras */

.cabecera-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.cabecera-pagina .entradilla { margin-bottom: 0; }

.bloque { margin-bottom: 34px; }

.titulo-bloque {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.conteo {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--text-dim);
    background: var(--chip-fondo);
    border: 1px solid var(--line-soft);
    padding: 1px 8px;
    border-radius: 999px;
}

.vacio {
    color: var(--text-mute);
    background: var(--superficie-1);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 0;
    font-size: 14px;
}

.nota-pie {
    color: var(--text-mute);
    font-size: 12.5px;
    max-width: 78ch;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
}

.nota-pie strong { color: var(--text-dim); font-weight: 600; }

/* ---------------------------------------------------------------- filtros */

.filtro-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }

.filtro-inline input {
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 11px;
    min-width: 190px;
}

.filtros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 26px;
}

.campo-filtro { display: flex; flex-direction: column; gap: 5px; }
.campo-filtro.corto input { width: 90px; }

.campo-filtro label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.campo-filtro input {
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    min-width: 150px;
}

.campo-filtro input:focus-visible,
.filtro-inline input:focus-visible {
    outline: none;
    border-color: var(--primario-borde);
    box-shadow: 0 0 0 3px rgb(76 141 255 / 22%);
}

.acciones-filtro { display: flex; gap: 8px; }

.btn-sec {
    font: inherit;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.btn-sec:hover { border-color: var(--line-fuerte); background: var(--elegido); }
.btn-sec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.aviso-tope {
    font-size: 13px;
    color: var(--accent-2);
    background: rgb(167 139 250 / 10%);
    border: 1px solid rgb(167 139 250 / 26%);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0 0 14px;
}

/* ---------------------------------------------------------------- tarjetas de máquina */

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.tarjeta-maquina {
    background: var(--tarjeta);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 15px 17px;
}

.tarjeta-maquina header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.nombre-maquina {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}

.metricas { display: flex; gap: 18px; margin: 0 0 12px; flex-wrap: wrap; }
.metricas dt { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); }
.metricas dd { margin: 2px 0 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metricas .de { font-size: 13px; font-weight: 400; color: var(--text-mute); }

.tarjeta-maquina footer {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    padding-top: 10px;
}

.pie-mute { font-size: 11.5px; color: var(--text-mute); font-family: var(--mono); }
.pie-error { font-size: 11px; color: var(--err); }

/* ---------------------------------------------------------------- tablas */

.tabla-scroll {
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--superficie-1);
}

.tabla { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 13.5px; }

.tabla thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--superficie-2);
    border-bottom: 1px solid var(--line);
    padding: 9px 13px;
    white-space: nowrap;
}

.tabla td { padding: 9px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--superficie-2); }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .mono { font-family: var(--mono); font-size: 12.5px; }
.tabla .nowrap { white-space: nowrap; }
.tabla .apagado { color: var(--text-mute); }

.valor { max-width: 260px; word-break: break-word; color: var(--text-dim); }
.valor.nuevo { color: var(--text); }

.fila-error td { background: rgb(248 113 113 / 8%); color: var(--text-dim); font-size: 12.5px; }
.fila-error:hover td { background: rgb(248 113 113 / 12%); }

.etq-error {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--err);
    margin-right: 8px;
}

.desfase { font-size: 11px; color: var(--accent-2); margin-left: 5px; }

/* ---------------------------------------------------------------- cifras del tablero */

/* Tarjetas de entrada del tablero. Son enlaces, no adornos: cada cifra lleva a la
   pantalla donde se trabaja ese número. El ancho mínimo es el que necesita
   «Listas de costo» sin partirse; con menos, la rejilla los apila y está bien. */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--tarjeta);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.cifra:hover { border-color: var(--line-fuerte); transform: translateY(-1px); }
.cifra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cifra-n {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.cifra-t { font-size: 13.5px; color: var(--text-dim); }
.cifra-p { font-size: 12px; color: var(--text-mute); }
.cifra-p.alerta { color: #d6a45c; }

/* La fila cuyo detalle se está viendo abajo. La franja izquierda la ata al detalle
   sin recurrir a un fondo fuerte que compita con los chips de estado. */
.tabla tr.fila-elegida > td { background: var(--elegido); }
.tabla tr.fila-elegida > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ---------------------------------------------------------------- chips de estado */

.chip {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.chip.e-run     { color: var(--ok);       background: rgb(52 211 153 / 12%); border-color: rgb(52 211 153 / 30%); }
.chip.e-drain   { color: var(--accent-2); background: rgb(167 139 250 / 12%); border-color: rgb(167 139 250 / 30%); }
.chip.e-stop    { color: var(--text-mute);background: var(--chip-fondo);      border-color: var(--line-soft); }
.chip.e-diverge { color: var(--err);      background: rgb(248 113 113 / 12%); border-color: rgb(248 113 113 / 30%); }
.chip.e-nada    { color: var(--text-mute);background: transparent;            border-color: var(--line-soft); }
.chip.e-accion  { color: var(--accent);   background: rgb(76 141 255 / 12%);  border-color: rgb(76 141 255 / 28%); }

.senal {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.senal.s-ok    { color: var(--ok);        background: rgb(52 211 153 / 12%); border-color: rgb(52 211 153 / 30%); }
.senal.s-stale { color: var(--text-mute); background: var(--chip-fondo);     border-color: var(--line-soft); }
.senal.s-nunca { color: var(--text-mute); background: transparent;           border-color: var(--line-soft); }

/* ---------------------------------------------------------------- flujo */

.etapas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.etapa {
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.etapa-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.etapa-nombre {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.etapa-total {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.barra-etapa {
    height: 5px;
    background: var(--superficie-0);
    border-radius: 999px;
    overflow: hidden;
}

.barra-etapa span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primario-2), var(--primario-1));
    border-radius: 999px;
}

.etapa-desc {
    font-size: 12px;
    color: var(--text-mute);
    margin: 10px 0 0;
    max-width: none;
}

.celda-alerta { color: var(--err); font-weight: 600; }

/* ---------------------------------------------------------------- avisos */

.aviso-ok {
    font-size: 13.5px;
    color: var(--ok);
    background: rgb(52 211 153 / 10%);
    border: 1px solid rgb(52 211 153 / 28%);
    border-radius: 8px;
    padding: 10px 13px;
    margin: 0 0 18px;
}

.btn-sec.peligro { color: var(--err); border-color: rgb(248 113 113 / 32%); }
.btn-sec.peligro:hover { background: rgb(248 113 113 / 12%); border-color: var(--err); }

.btn-principal.compacto { width: auto; padding: 8px 18px; margin-top: 0; font-size: 14px; }

.filtros select {
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------------------------------------------------------------- mando y misc */

.mando { display: flex; gap: 5px; flex-wrap: wrap; }
.mando form { margin: 0; }

.btn-mini {
    font: inherit;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-mini:hover { background: var(--elegido); border-color: var(--line-fuerte); color: var(--text); }
.btn-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-mini.peligro { color: var(--err); border-color: rgb(248 113 113 / 30%); }
.btn-mini.peligro:hover { background: rgb(248 113 113 / 12%); border-color: var(--err); }

/* «Configurar» abre; el resto del mando cambia el estado deseado. El acento lo
   separa de los cuatro botones que sí tocan la instancia. */
.btn-mini.abrir {
    color: var(--text);
    border-color: var(--line-fuerte);
}

.btn-mini.abrir:hover { background: var(--elegido); border-color: var(--accent); }

/* Filete entre abrir y mandar. Decorativo, y por eso aria-hidden en el marcado. */
.mando-sep {
    width: 1px;
    align-self: stretch;
    margin: 1px 3px;
    background: var(--line);
}

/* El nombre de la fila, que abre la configuración. Es un <button> y no un <a>
   porque no navega a ninguna parte: un enlace con href falso rompe abrir en
   pestaña nueva y confunde al lector de pantalla. */
.enlace-fila {
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--line-fuerte);
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}

.enlace-fila:hover { color: var(--accent); text-decoration-color: var(--accent); }
.enlace-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
}

.check input { accent-color: var(--accent); }

/* ---------------------------------------------------------------- diálogo modal */
/* <dialog> nativo: sin librería, con cierre por Esc y foco atrapado de serie. */

.acciones-cabecera { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.dialogo {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--superficie-1);
    color: var(--text);
    box-shadow: 0 24px 60px rgb(3 8 20 / 70%);
}

.dialogo::backdrop { background: var(--velo); backdrop-filter: blur(2px); }

.dialogo form { margin: 0; }

.dlg-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line-soft);
}

.dlg-cab h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
}

.dlg-cerrar {
    font: inherit;
    font-size: 22px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-mute);
    cursor: pointer;
}

.dlg-cerrar:hover { color: var(--text); background: var(--superficie-2); }
.dlg-cerrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dlg-cuerpo { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }

.dlg-campo label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.dlg-ayuda {
    font-size: 12.5px;
    color: var(--text-mute);
    margin: 0 0 7px;
    max-width: none;
}

.dlg-campo input {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    transition: border-color .15s, box-shadow .15s;
}

.dlg-campo input::placeholder { color: var(--text-mute); }

.dlg-campo input:focus-visible {
    outline: none;
    border-color: var(--primario-borde);
    box-shadow: 0 0 0 3px rgb(76 141 255 / 22%);
}

.dlg-pista {
    font-size: 11.5px;
    color: var(--text-mute);
    margin: 6px 0 0;
    max-width: none;
}

/* Los mantenedores tienen fichas largas (razón social, RUT, dirección, contacto…).
   En una sola columna el diálogo se vuelve un rollo de papel; en dos, cabe de un
   vistazo. Los campos anchos —dirección, notas— se llevan la fila entera. */

.dlg-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dlg-rejilla .ancho { grid-column: 1 / -1; }

@media (width < 560px) {
    .dlg-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* select y textarea no heredaban el aspecto de los input del diálogo. */
.dlg-campo select,
.dlg-campo textarea {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    transition: border-color .15s, box-shadow .15s;
}

.dlg-campo textarea { resize: vertical; min-height: 68px; }

.dlg-campo select:focus-visible,
.dlg-campo textarea:focus-visible {
    outline: none;
    border-color: var(--primario-borde);
    box-shadow: 0 0 0 3px rgb(76 141 255 / 22%);
}

.dlg-campo label .opcional {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-mute);
    margin-left: 5px;
}

/* Insignia de moneda: el dato que decide con qué lista se factura, así que se lee
   sin buscarlo. El color es el del texto, no uno por moneda — pintar CLP de un
   color y USD de otro inventa una semántica que no existe. */
.moneda {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--chip-fondo);
    color: var(--text-dim);
}

.dlg-nota {
    background: rgb(76 141 255 / 9%);
    border: 1px solid rgb(76 141 255 / 26%);
    border-radius: 8px;
    padding: 12px 14px;
}

.dlg-nota strong { display: block; font-size: 13.5px; color: var(--accent); margin-bottom: 4px; }

.dialogo.ancho { width: min(980px, calc(100vw - 32px)); }

.cx-prueba-zona { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }
.cx-prueba-zona .cx-prueba { margin: 0; }

.cx-envio {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgb(214 164 92 / 30%);
    border-radius: var(--radius);
    background: rgb(214 164 92 / 7%);
}

.cx-envio h4 {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 6px;
}

.cx-aviso-real { font-size: 12.5px; color: #d6a45c; margin: 0 0 12px; max-width: none; }
.cx-aviso-real strong { color: #e5bd7d; }

.cx-envio textarea {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    resize: vertical;
}

.cx-envio textarea:focus-visible {
    outline: none;
    border-color: var(--primario-borde);
    box-shadow: 0 0 0 3px rgb(76 141 255 / 22%);
}

.cx-prueba {
    margin: 0 22px 4px;
    padding: 10px 13px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid var(--line-soft);
    background: var(--superficie-0);
    color: var(--text-dim);
}

.cx-prueba.probando { color: var(--accent);  background: rgb(76 141 255 / 9%);  border-color: rgb(76 141 255 / 26%); }
.cx-prueba.bien     { color: var(--ok);      background: rgb(52 211 153 / 10%); border-color: rgb(52 211 153 / 28%); }
.cx-prueba.mal      { color: var(--err);     background: rgb(248 113 113 / 10%); border-color: rgb(248 113 113 / 28%); }

.conexion {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--superficie-0);
    margin-bottom: 12px;
}

.cx-cab {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
}

.cx-nombre { font-size: 14px; font-weight: 600; }
.cx-acciones { margin-left: auto; }

.cx-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--line-soft);
}

.cx-grupo { background: var(--superficie-1); padding: 12px 14px; }

.cx-grupo h4 {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 0 0 9px;
}

.cx-grupo dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }

.cx-grupo dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.cx-grupo dt { font-size: 12px; color: var(--text-mute); }
.cx-grupo dd { margin: 0; font-size: 13px; color: var(--text); text-align: right; word-break: break-all; }

.cx-error {
    margin: 0;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--text-dim);
    background: rgb(248 113 113 / 8%);
    border-top: 1px solid var(--line-soft);
    max-width: none;
}

.perfil-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    padding: 12px 14px;
    background: var(--superficie-0);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.perfil-resumen > div { display: flex; flex-direction: column; gap: 4px; }

.pr-et {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.perfil-titulo {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.perfil-form {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--superficie-0);
}

.perfil-fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.perfil-fila > .dlg-campo { flex: 1 1 180px; }
.perfil-accion { display: flex; align-items: center; padding-top: 22px; }

.dlg-campo select {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
}

.dlg-campo input[readonly] {
    background: var(--superficie-2);
    color: var(--text-dim);
    cursor: not-allowed;
}

.dlg-nota.aviso { background: rgb(214 164 92 / 10%); border-color: rgb(214 164 92 / 32%); }
.dlg-nota.aviso strong { color: #d6a45c; }
.dlg-nota p { font-size: 12.5px; color: var(--text-dim); margin: 0; max-width: none; }

.dlg-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line-soft);
}

.btn-mini:disabled { opacity: .38; cursor: not-allowed; }
.btn-mini:disabled:hover { background: var(--panel-2); border-color: var(--line); color: var(--text-dim); }

/* Acción bloqueada con su motivo a la vista. El «párala primero» va en el flujo
   y no en un title, porque un botón gris sin texto se lee como una capacidad que
   no existe, cuando lo que falta es un paso previo. */
.bloqueado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bloqueado em {
    font-style: normal;
    font-size: 11px;
    color: var(--text-mute);
    white-space: nowrap;
}

/* El código es la identidad de la instancia: va primero y se lee como dato, no
   como prosa. Sin envolver, para que un AG-0001-A nunca se parta en dos líneas. */
.codigo-canal { white-space: nowrap; font-weight: 600; }

/* ---------------------------------------------------------------- estado de canal */

/* Amarillo de estado. Va aparte de --accent: pausado es una semántica, no una marca. */
:root { --warn: #fbbf24; }

/*
   Un canal se lee de un vistazo: verde en funcionamiento, amarillo pausado, rojo detenido.
   Cada estado tiene además su FORMA (▶ ❚❚ ■), así que no depende solo del color.

   Relleno = confirmado por CONTROL con señal fresca.
   Contorno punteado = solo ordenado. Mismo color, pero sin fondo: se ve qué se pidió
   sin afirmar que está ocurriendo.
*/
.estado {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.est-run   { --est: var(--ok);        --est-fondo: rgb(52 211 153 / 16%);  --est-borde: rgb(52 211 153 / 50%); }
.est-pausa { --est: var(--warn);      --est-fondo: rgb(251 191 36 / 16%);  --est-borde: rgb(251 191 36 / 50%); }
.est-stop  { --est: var(--err);       --est-fondo: rgb(248 113 113 / 16%); --est-borde: rgb(248 113 113 / 50%); }
.est-nada  { --est: var(--text-mute); --est-fondo: transparent;            --est-borde: var(--line); }

.est-ico {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--est);
    background: var(--est-fondo);
    border: 1.5px solid var(--est-borde);
}

.est-ico svg { width: 12px; height: 12px; fill: currentColor; }

.estado.sin-confirmar .est-ico {
    background: transparent;
    border-style: dashed;
}

.estado.sin-confirmar .est-ico svg { opacity: .8; }

.est-txt { display: flex; flex-direction: column; line-height: 1.25; }

/* El texto va en tinta de texto; el color lo lleva el icono. */
.est-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.estado.sin-confirmar .est-lbl { color: var(--text-dim); font-weight: 500; }
.est-sub { font-size: 11px; color: var(--text-mute); }

/* Latido suave solo en lo que CONTROL confirma corriendo: es lo único que está vivo. */
.estado.est-run:not(.sin-confirmar) .est-ico::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--est);
    opacity: 0;
    animation: est-latido 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes est-latido {
    0%   { transform: scale(.72); opacity: .5; }
    100% { transform: scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .est-ico::after { animation: none !important; display: none; }
}

/* Leyenda bajo la tabla. */
.leyenda-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 4px 0 14px;
    font-size: 12px;
    color: var(--text-mute);
}

.leyenda-estado .estado { gap: 7px; }
.leyenda-estado .est-ico { width: 18px; height: 18px; }
.leyenda-estado .est-ico svg { width: 9px; height: 9px; }
.leyenda-estado .est-ico::after { display: none; }

/* ---------------------------------------------------------------- puerto único del SERVER */

/* Un SERVER escucha en un solo puerto, así que no es una tabla de una fila: es una
   ficha. Datos a la izquierda, acciones a la derecha, y se apila en pantallas estrechas. */
.puerto-unico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--superficie-0);
}

.puerto-unico dl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
}

.puerto-unico dl > div { display: flex; flex-direction: column; gap: 3px; }

.puerto-unico dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.puerto-unico dd { margin: 0; font-size: 13.5px; }

/* ---------------------------------------------------------------- perfil del SERVER en una pantalla */

/* Todo el perfil del SERVER en una sola vista: resumen, instancia, puerto, parámetros y ESME.
   Más ancho que el diálogo normal para que la rejilla de parámetros quepa en varias columnas. */
.dialogo.pantalla {
    width: min(1240px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
}

.parametros-smpp { display: flex; flex-direction: column; gap: 10px; }

/* Cada grupo se pliega. «Avanzado» nace plegado: son colas y lotes que casi nunca se tocan. */
.grupo-param {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--superficie-0);
}

.grupo-param > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.grupo-param > summary::-webkit-details-marker { display: none; }
.grupo-param > summary::before { content: "▸"; color: var(--text-mute); transition: transform .15s; }
.grupo-param[open] > summary::before { transform: rotate(90deg); }
.grupo-param > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }

.rejilla-param {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px 18px;
    padding: 4px 14px 14px;
}

.campo-param .dlg-pista { font-size: 11px; line-height: 1.35; }
.campo-param .rango { margin-left: 4px; color: var(--text-mute); white-space: nowrap; }

/* Lo sobrescrito se distingue de lo heredado de un vistazo: borde de acento y marca en la etiqueta. */
.campo-param.sobrescrito input,
.campo-param.sobrescrito select { border-color: var(--primario-borde); }

.campo-param.sobrescrito label::after {
    content: "sobrescrito";
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.parametros-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
}

.aviso-reinicio { margin: 0; font-size: 12.5px; color: var(--warn); }

/* Nota bajo la lista de ESME del server: las credenciales se asignan desde el cliente. */
.nota-credenciales {
    margin: 4px 0 0;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text-dim);
    border-left: 2px solid var(--accent);
    background: var(--superficie-0);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------------------------------------------------------------- Setup del cliente (T-64) */
/* DISTRIBUIDOR -> CLIENTE -> ROUTER: una tarjeta por router, con su acceso desplegado si lo tiene. */
.setup-intro { margin: 0 0 14px; color: var(--text-dim); }
.setup-lista { display: grid; gap: 10px; }

.setup-router {
    display: grid;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--superficie-1);
}
.setup-router.asignado { border-color: rgb(52 211 153 / 30%); box-shadow: inset 3px 0 0 var(--ok); }

.setup-router-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.setup-router-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.setup-router-id .mono { font-family: var(--mono); }
.setup-router-id .apagado { color: var(--text-mute); font-size: 12.5px; }
.setup-router-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* display:grid anula el atributo hidden: sin esto, los accesos sin asignar se verían desplegados. */
.setup-acceso { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.setup-acceso[hidden],
.setup-router [data-accion="asignar"][hidden] { display: none; }

.ips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 3px 3px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--chip-fondo);
    font-family: var(--mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.ip-chip button {
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
}
.ip-chip button:hover { color: var(--err); background: rgb(248 113 113 / 12%); }
.ip-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ip-nueva { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ip-nueva input { flex: 1 1 180px; min-width: 0; font-family: var(--mono); }

.setup-mando { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.setup-compartida { display: block; margin-top: 4px; color: var(--accent-2); }

.cabecera-mensajes:empty { display: none; }

/* S072: router asignado a otro cliente. Se ve (para entender por qué no se puede elegir) pero no se opera. */
.setup-router.ocupado { background: var(--superficie-0); border-style: dashed; }
.setup-router.ocupado .setup-router-id > span { color: var(--text-mute); }
.setup-ocupado-nota { margin: 0; }

/* ---------------------------------------------------------------- Setup en dos listas (T-64, S073) */
/* Izquierda: routers asignados al cliente. Derecha: disponibles. Debajo, la configuración de cada router. */
.transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
}
@media (max-width: 760px) {
    .transfer { grid-template-columns: minmax(0, 1fr); }
    .transfer-mando { flex-direction: row !important; justify-content: center; }
}

.transfer-lista {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--superficie-1);
}
.transfer-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
}
.transfer-cab h3 { margin: 0; font-size: 14px; font-weight: 600; }

.transfer-items {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 170px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: background-color .15s ease;
}
.transfer-items.destino { background: rgb(76 141 255 / 10%); outline: 2px dashed var(--accent); outline-offset: -6px; }

.transfer-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marca nombre chip" "marca resumen resumen";
    align-items: center;
    gap: 2px 10px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--superficie-2);
    cursor: grab;
}
.transfer-item:active { cursor: grabbing; }
.transfer-item .transfer-marca { grid-area: marca; width: 16px; height: 16px; }
.transfer-item .chip { grid-area: chip; }
.transfer-nombre {
    grid-area: nombre;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.transfer-nombre .mono { font-family: var(--mono); }
.transfer-nombre .apagado { color: var(--text-mute); font-size: 12.5px; }
.transfer-nombre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.transfer-resumen { grid-area: resumen; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.transfer-resumen:empty { display: none; }

.transfer-item.elegido { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.transfer-item.pendiente { border-style: dashed; border-color: rgb(167 139 250 / 60%); }
.transfer-item.pendiente .transfer-resumen { color: var(--accent-2); }
.transfer-item.arrastrando { opacity: .45; }

.transfer-mando { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.transfer-vacio { margin: 0 12px 12px; color: var(--text-mute); font-size: 13px; }

.setup-config { display: grid; gap: 12px; }
.setup-panel {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--superficie-1);
}
.setup-panel[data-pendiente="true"] { border-color: rgb(167 139 250 / 60%); }
.setup-panel-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.setup-panel-cab h4 { margin: 0; font-size: 14px; font-weight: 600; }
.setup-panel-cab .apagado { color: var(--text-mute); font-weight: 400; font-size: 12.5px; }
.setup-panel[hidden],
.setup-panel [hidden],
.transfer [hidden] { display: none !important; }

/* S074: router asignado sin configurar (sin cuenta ni IP): el cliente todavía no puede conectarse. */
.transfer-item.sin-configurar { border-color: rgb(251 191 36 / 55%); }
.transfer-item.sin-configurar .transfer-resumen { color: #fbbf24; }
.chip.e-aviso { color: #fbbf24; background: rgb(251 191 36 / 12%); border-color: rgb(251 191 36 / 30%); }

/* Setup en borrador: nada se guarda hasta Grabar. */
.transfer-item { grid-template-areas: "marca nombre chip" "marca resumen pend"; }
.transfer-item .transfer-pendiente { grid-area: pend; justify-self: end; }
.transfer-item.por-asignar { border-style: dashed; border-color: rgb(76 141 255 / 70%); }
.transfer-item.por-quitar  { border-style: dashed; border-color: rgb(248 113 113 / 60%); }
.transfer-item.por-quitar .transfer-nombre strong { text-decoration: line-through; text-decoration-color: var(--err); }
.transfer-item.sin-grabar  { border-color: rgb(167 139 250 / 70%); }
.transfer-item.con-error   { border-color: var(--err); box-shadow: inset 3px 0 0 var(--err); }
.chip.transfer-pendiente.p-asignar { color: var(--accent);   background: rgb(76 141 255 / 12%);  border-color: rgb(76 141 255 / 35%); }
.chip.transfer-pendiente.p-quitar  { color: var(--err);      background: rgb(248 113 113 / 12%); border-color: rgb(248 113 113 / 35%); }
.chip.transfer-pendiente.p-cambio  { color: var(--accent-2); background: rgb(167 139 250 / 12%); border-color: rgb(167 139 250 / 35%); }
.setup-pie { align-items: center; }
.setup-pendientes { margin-right: auto; color: var(--text-mute); font-size: 13px; }
.setup-pendientes.hay { color: var(--accent-2); font-weight: 600; }
.setup-mando .dlg-pista { margin: 0 auto 0 0; }

/* Norma: la cabecera del modal identifica siempre al cliente y al router que se configura, fija al hacer scroll. */
.dlg-cab.cab-identidad {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: flex-start;
    background: var(--superficie-1);
}
.cab-identidad-textos { display: grid; gap: 4px; min-width: 0; }
.cab-identidad-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14px; }
.cab-identidad-linea .mono { font-family: var(--mono); }
.cab-identidad-et { color: var(--text-mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.cab-identidad-linea[data-cab-router] { color: var(--accent); }
.cab-identidad-linea[hidden] { display: none; }

/* Setup: pantalla de UN router (las listas se ocultan mientras se configura). */
[data-vista][hidden] { display: none !important; }
.setup-vista-router { display: grid; gap: 14px; }
.setup-volver { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setup-seccion { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.setup-seccion h4 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.setup-seccion .errores { margin: 0; }

/* Canales segmentados: pestañas Routers y Gateways. */
.segmentos { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line-soft); }
.segmentos a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--text-dim);
    font-weight: 600;
    text-decoration: none;
}
.segmentos a:hover { color: var(--text); }
.segmentos a.activo { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.segmentos a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Prueba de envío (S082/S083): botonera, contador, cantidad y envío compuesto. */
.cx-plantillas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cx-contador { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cx-compuesto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 10px; }
.cx-compuesto .btn-sec[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgb(76 141 255 / 12%); }
.cx-compuesto .dlg-pista { margin: 0; overflow-wrap: anywhere; }
.cx-estimacion { margin: 0 0 10px; font-size: 13px; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.cx-estimacion:empty { display: none; }

/* Métricas de la prueba, a continuación del envío (S083). */
.cx-kpi {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--superficie-1);
}
.cx-kpi[hidden] { display: none; }
.cx-kpi-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cx-kpi-titulo { display: grid; gap: 2px; min-width: 0; }
.cx-kpi-titulo .apagado { font-size: 12.5px; overflow-wrap: anywhere; }
.cx-kpi [data-k-detener][hidden] { display: none; }
.cx-kpi .dlg-pista { margin: 0; }
.cx-kpi .dlg-pista:empty { display: none; }

.mt-barra { width: 100%; height: 10px; accent-color: var(--accent); }
.mt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.mt-kpi {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--superficie-2);
    box-shadow: inset 3px 0 0 var(--line);
}
.mt-kpi.bien  { box-shadow: inset 3px 0 0 var(--ok); }
.mt-kpi.mal   { box-shadow: inset 3px 0 0 var(--err); }
.mt-kpi.aviso { box-shadow: inset 3px 0 0 #fbbf24; }
.mt-et { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.mt-valor { font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mt-sub { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.cx-kpi-errores h5 { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.cx-kpi-errores ol { display: grid; gap: 2px; margin: 0; padding-left: 20px; font-family: var(--mono); font-size: 12.5px; }
.cx-kpi-errores[hidden] { display: none; }

/* KPI por parte (S085): mismo lenguaje que los recuadros de arriba, bajo un título propio. */
.cx-kpi-partes { display: grid; gap: 8px; }
.cx-kpi-partes[hidden] { display: none; }
.cx-kpi-partes h5 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.cx-kpi-partes h5 .apagado { text-transform: none; letter-spacing: 0; font-weight: 400; }

.cx-historial summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.cx-historial summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cx-historial > div { margin-top: 8px; overflow-x: auto; }
.cx-historial-tabla { width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Pendientes de envío por gateway en la lista (S084): el número manda; debajo, antigüedad y pruebas. */
.pendientes-celda { white-space: nowrap; }
.pendientes-num { display: block; font-size: 15px; font-weight: 600; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.pendientes-sub { display: block; font-family: inherit; font-size: 11.5px; color: var(--text-dim); }

/* Lista de canales compacta: identidad (código + nombre) en una celda, la máquina con su
   versión y /status debajo, y el mando en una sola fila con Eliminar dentro de «⋯». */
.celda-canal .codigo-canal { font-family: var(--mono); font-size: 12.5px; }
.canal-nombre {
    display: block;
    margin-top: 3px;
    max-width: 24ch;
    font-size: 12.5px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.celda-maquina { white-space: nowrap; }

/* Identidad de la fila: código, y debajo el dueño (proveedor del gateway / nombre del router) en texto
   normal, que es lo segundo que se lee; el servidor y la versión, apagados, al final. */
.canal-dueno {
    display: block;
    margin-top: 4px;
    max-width: 26ch;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canal-dueno.apagado { font-weight: 400; color: var(--text-mute); }
.canal-maquina { white-space: nowrap; }

/* Conexión: el alias del conector en una línea y el extremo debajo, sin partirse en dos renglones. */
.celda-conexion .cx-alias {
    display: block;
    max-width: 30ch;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.celda-conexion .cx-extremo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.celda-conexion .cx-extremo .chip { margin-left: 4px; }

.canal-sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.mando.mando-fila { flex-wrap: nowrap; align-items: center; }
.btn-mini.mas { padding: 3px 9px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; }

.menu-mas[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    width: 260px;
    padding: 12px;
    border: 1px solid var(--line-fuerte);
    border-radius: var(--radius);
    background: var(--superficie-1);
    color: var(--text);
    box-shadow: var(--shadow);
}
.menu-mas .menu-titulo {
    margin: 0 0 10px;
    display: grid;
    gap: 2px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-mute);
    overflow-wrap: anywhere;
}
.menu-mas .menu-titulo strong { color: var(--text); font-weight: 600; }
.menu-mas form { margin: 0; }
.menu-mas .menu-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
/* La lista de canales ha de caber sin scroll: algo menos de relleno lateral que .tabla,
   la señal bajo el estado y la antigüedad de pendientes en letra normal y en dos líneas. */
.tabla-canales th, .tabla-canales td { padding-left: 11px; padding-right: 11px; }
.senal-fila { display: block; width: fit-content; margin-top: 6px; text-transform: none; }
.tabla-canales .pendientes-sub { font-family: var(--font); white-space: normal; max-width: 15ch; margin-left: auto; line-height: 1.35; }

/* Estadística de una prueba en su propio modal, encima de «Pruebas de envío»: el modal ya da el
   marco, así que la sección pierde el suyo. Esc cierra solo este modal y se vuelve al anterior. */
.dlg-metricas .cx-kpi { margin: 0; padding: 0; border: 0; background: none; }
.dlg-metricas .dlg-pie { justify-content: space-between; align-items: center; }
.dlg-metricas .dlg-pie .dlg-pista { margin: 0; }
.cx-ultima { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.cx-ultima[hidden] { display: none; }

/* ── Monitor de pruebas de auditoría ──────────────────────────────────────── */
.monitor-selector { display: flex; align-items: center; gap: 8px; }
.monitor-selector label { font-size: 12.5px; color: var(--text-mute); }
.monitor-selector select {
    background: var(--superficie-1); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13.5px; max-width: 100%;
}
.monitor-selector select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.monitor-panel {
    background: var(--tarjeta); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 18px 20px; margin-bottom: 34px; display: grid; gap: 16px;
}
.monitor-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.monitor-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.monitor-ident h2 { margin: 0; font-size: 18px; font-weight: 600; text-wrap: balance; }

.monitor-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.monitor-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.monitor-meta dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.monitor-progreso p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); }
.monitor-barra { height: 6px; border-radius: 3px; background: var(--superficie-0); overflow: hidden; }
.monitor-barra span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }

.monitor-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.monitor-cifra { background: var(--superficie-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 14px; }
.monitor-cifra b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.monitor-cifra b small { font-size: 13px; color: var(--text-mute); font-weight: 500; }
.monitor-cifra b.ok { color: var(--ok); }
.monitor-cifra b.mal { color: var(--err); }
.monitor-cifra span { font-size: 12px; color: var(--text-mute); }

.monitor-hallazgos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.monitor-hallazgos li {
    display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start;
    background: var(--superficie-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 14px;
}
.monitor-hallazgos .chip { justify-self: start; }
.monitor-hallazgos p { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.monitor-hallazgos .monitor-mejora { color: var(--text); }

.tabla-monitor td { vertical-align: middle; }
.monitor-nota { font-size: 12px; color: var(--text-mute); max-width: 34ch; }
.tabla-monitor tr.monitor-detalle > td { background: var(--superficie-0); padding: 12px 16px; }
.tabla tbody tr.monitor-detalle:hover { background: transparent; }
.monitor-chequeos { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.monitor-chequeos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; }
.monitor-emu { margin: 10px 0 0; font-size: 12px; color: var(--text-mute); }

.monitor-vivo::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 6px; vertical-align: 1px; animation: monitor-latido 1.4s ease-in-out infinite;
}
@keyframes monitor-latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .monitor-vivo::before { animation: none; } .monitor-barra span { transition: none; } }
@media (max-width: 560px) { .monitor-hallazgos li { grid-template-columns: 1fr; gap: 6px; } }

/* ── Conectores por proveedor (maestro-detalle) ───────────────────────────── */
.conectores-marco { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .conectores-marco { grid-template-columns: 1fr; } }

.conectores-proveedores {
    background: var(--superficie-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px 10px; position: sticky; top: calc(var(--alto-barra) + 16px);
}
@media (max-width: 860px) { .conectores-proveedores { position: static; } }
.conectores-proveedores .titulo-bloque { margin: 0 6px 10px; }

.lista-proveedores { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prov-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: center;
    padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.prov-item:hover { background: var(--superficie-2); }
.prov-item[aria-current="true"] { background: var(--elegido); box-shadow: inset 2px 0 0 var(--accent); }
.prov-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.prov-nombre { font-weight: 500; overflow-wrap: anywhere; }
.prov-codigo { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--text-mute); }
.prov-item .conteo { grid-column: 2; grid-row: 1 / span 2; }

/* Alta de gateway: lista de proveedores para elegir, con su buscador. */
button.prov-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.buscar-proveedor { width: 100%; margin: 4px 0 10px; }
.lista-elegir-proveedor { max-height: min(420px, 55vh); overflow-y: auto; }
.dlg-rejilla .titulo-bloque { margin: 8px 0 0; }

.conectores-detalle { min-width: 0; }
.conectores-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.conectores-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.conectores-ident h2 { margin: 0; font-size: 18px; font-weight: 600; text-wrap: balance; }
.enlace-sub { display: block; font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.dlg-acciones { display: flex; gap: 10px; justify-content: flex-end; }
.dialogo.medio { width: min(680px, calc(100vw - 32px)); }
.campo-alias { text-transform: uppercase; letter-spacing: 0.03em; }
.conectores-checks { flex-direction: row; display: flex; gap: 22px; align-items: center; }
.conectores-heredados { margin-top: 26px; }
form.en-linea { display: inline; margin: 0; }

/* ── Conectar gateway a un CP (S094) ──────────────────────────────────────── */
.cx-selector { margin: 4px 0 14px; }
.cx-selector .conectores-proveedores { position: static; max-height: 360px; overflow-y: auto; }
.cx-selector .conectores-cab h2 { font-size: 16px; }
.tabla-cp { min-width: 560px; }
.tabla-cp tbody tr { cursor: pointer; }
.tabla-cp tbody tr.fila-elegida > td { background: var(--elegido); }
.tabla-cp tbody tr.fila-elegida > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.tabla-cp input[type=radio] { accent-color: var(--accent); }

/* ── Probar / poner en línea un CP (S095) ─────────────────────────────────── */
.cp-res { margin-top: 6px; font-size: 12.5px; max-width: 46ch; white-space: normal; }

/* ── Conectores: tabla compacta y resultado en la misma línea de las acciones ── */
.tabla.tabla-conectores { min-width: 0; }
.tabla-conectores td { vertical-align: middle; }
.tabla-conectores .enlace-sub { margin-top: 1px; }
.estado-cp { display: flex; flex-wrap: wrap; gap: 4px; }
.tabla-conectores .col-acciones { width: 1%; }
.cp-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.cp-acciones form.en-linea { display: contents; }
.cp-res {
    display: inline-flex; align-items: center; margin: 0; max-width: none;
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
    font-family: var(--mono); font-size: 12px; line-height: 1.4; white-space: nowrap; cursor: default;
}
.cp-res.probando { color: var(--accent); background: rgb(76 141 255 / 9%);  border-color: rgb(76 141 255 / 26%); }
.cp-res.bien     { color: var(--ok);     background: rgb(52 211 153 / 10%); border-color: rgb(52 211 153 / 28%); }
.cp-res.mal      { color: var(--err);    background: rgb(248 113 113 / 10%); border-color: rgb(248 113 113 / 28%); }

/* El estilo de campos del filtro no debe convertir la casilla en una caja de texto. */
.filtro-inline .check input { width: auto; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* ── Gateways: conexión (CP) y bind en la lista ───────────────────────────── */
.tabla-canales .canal-nombre.completo { white-space: normal; overflow: visible; text-overflow: clip; max-width: 32ch; }
.tabla-canales .celda-conexion .mono { font-size: 12.5px; }
.tabla-canales .celda-conexion strong { font-weight: 600; }
.tabla-canales .celda-bind .chip { white-space: nowrap; }
.mando-fila .btn-mini:disabled { opacity: .45; cursor: not-allowed; }

/* ── Menú lateral con iconos ──────────────────────────────────────────────── */
.lateral { gap: 16px; }
.grupo + .grupo { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.grupo-tit { font-size: 10px; letter-spacing: .13em; padding: 0 10px 8px; }

.lateral a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    line-height: 1.25;
}
.lateral a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ico-menu {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--text-mute);
    transition: color .15s, transform .15s;
}
.lateral a:hover .ico-menu { color: var(--text); transform: translateX(1px); }

.lateral a.activo {
    background: linear-gradient(90deg, rgb(76 141 255 / 17%), rgb(76 141 255 / 4%));
    border-color: rgb(76 141 255 / 20%);
    border-left-color: var(--accent);
}
.lateral a.activo .ico-menu { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .ico-menu { transition: none; }
    .lateral a:hover .ico-menu { transform: none; }
}

@media (width < 900px) {
    .grupo + .grupo { padding-top: 0; border-top: 0; }
    .lateral a { gap: 8px; }
    .lateral a > span { overflow: visible; }
}

/* ── Stats de gateway (S101): tablas compactas con barra proporcional a las partes ───────── */
.tabla-kpi th, .tabla-kpi td { padding: 4px 8px; font-size: 12.5px; }
.tabla-kpi tbody tr.kpi-vacio td { color: var(--text-mute); }
.tabla-kpi .kpi-celda { width: 40%; min-width: 120px; padding-right: 12px; }
.kpi-barra {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    min-width: 0;
}
.kpi-vacio .kpi-barra { background: var(--line-soft); }


/* ---------------------------------------------------------------- canales: consola de operación */

/* Fila de indicadores: los mismos números que la tabla, contados con la misma regla. */
.kpis-canal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.kpi-canal {
    --k: var(--line-fuerte);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 13px 8px;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.kpi-canal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--k);
}
.kpi-canal .kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.kpi-canal .kpi-num {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kpi-canal .kpi-num .de { font-size: 14px; font-weight: 400; color: var(--text-mute); }
.kpi-canal.k-run   { --k: var(--ok); }
.kpi-canal.k-pausa { --k: var(--warn); }
.kpi-canal.k-stop  { --k: var(--err); }
.kpi-canal.k-aviso { --k: var(--warn); }
.kpi-canal.k-aviso .kpi-num { color: var(--warn); }
.kpi-canal.k-acento { --k: var(--accent-2); }

/* Máquinas: una franja compacta. Lo que importa de una máquina es si CONTROL reporta. */
.franja-maquinas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.maquina-mini {
    padding: 11px 13px 10px;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.maquina-mini.con-error { border-color: rgb(248 113 113 / 35%); }
.maquina-mini header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.maquina-mini .nombre-maquina { font-size: 12.5px; }
.maquina-senal {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--text-mute);
}
.metricas-mini { display: flex; gap: 18px; margin: 0 0 8px; }
.metricas-mini dt { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.metricas-mini dd { margin: 1px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metricas-mini .de { font-size: 12px; font-weight: 400; color: var(--text-mute); }
.maquina-mini footer { font-size: 11px; }

/* Punto de señal: verde reciente, ámbar vieja, hueco si nunca reportó. */
.punto-senal {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-mute);
}
.punto-senal.s-ok    { background: var(--ok); box-shadow: 0 0 0 3px rgb(52 211 153 / 18%); }
.punto-senal.s-stale { background: var(--warn); }
.punto-senal.s-nunca { background: transparent; border: 1.5px solid var(--text-mute); }

/* Cabecera de la lista con su buscador. */
.cabecera-tabla {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cabecera-tabla .titulo-bloque { margin: 0; }
.buscar-canal {
    width: min(320px, 100%);
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 11px;
}
.buscar-canal:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(76 141 255 / 18%); }
.sin-resultados { padding: 16px; margin: 0; }

/* Tabla: filas centradas, más aire, y una barra de color a la izquierda con el estado. */
.tabla-canales td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.tabla-canales thead th { padding-top: 10px; padding-bottom: 10px; }
.fila-canal { --fila-est: var(--line); }
.fila-canal.fila-est-run   { --fila-est: var(--ok); }
.fila-canal.fila-est-pausa { --fila-est: var(--warn); }
.fila-canal.fila-est-stop  { --fila-est: var(--err); }
.fila-canal > td:first-child { box-shadow: inset 3px 0 0 var(--fila-est); }
.fila-canal.fila-sin-confirmar > td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fila-est) 40%, transparent);
}
.fila-canal .codigo-canal { font-weight: 600; }
.senal-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-mute);
}

/* Menú «⋯»: secciones con título y acciones a todo el ancho. */
.menu-mas .menu-seccion {
    margin: 10px 0 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.menu-mas .menu-titulo + .menu-seccion { margin-top: 0; }
.menu-acciones { display: grid; gap: 2px; }
.btn-menu {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
}
.btn-menu:hover { background: var(--elegido); }
.btn-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-menu.peligro { color: var(--err); }
.btn-menu.peligro:hover { background: rgb(248 113 113 / 12%); }
.btn-menu:disabled { opacity: .4; cursor: not-allowed; }
.btn-menu:disabled:hover { background: transparent; }

/* Leyenda y nota, plegadas: se consultan una vez, no en cada visita. */
.ayuda-canales { margin-top: 18px; }
.ayuda-canales > summary {
    cursor: pointer;
    width: fit-content;
    font-size: 13px;
    color: var(--text-dim);
}
.ayuda-canales > summary:hover { color: var(--text); }
.ayuda-canales > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ayuda-canales[open] > summary { margin-bottom: 12px; }

/* Cabecera compacta de Canales: todo en una línea; en pantallas angostas se reparte en dos. */
.cabecera-consola {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.titulo-consola { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.segmentos.segmentos-consola { margin: 0; border-bottom: none; }
.cabecera-consola .acciones-cabecera { margin-left: auto; }

/* ---------------------------------------------------------------- dashboard */
.sub-consola { font-size: 13px; color: var(--text-mute); }
.bloque-dash { margin-bottom: 26px; }
.kpi-canal .kpi-pie, .cifra-dash .kpi-pie { font-size: 11.5px; color: var(--text-mute); }
.kpi-pie.alerta { color: var(--err); }

/* Mensajes por hora: barras verticales con la parte fallida arriba en rojo. */
.grafico-horas {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
    padding: 14px 14px 0;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.barra-hora { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.barra-col {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--accent), var(--primario-2));
    border-radius: 3px 3px 0 0;
    min-height: 0;
    overflow: hidden;
}
.barra-fallo { background: var(--err); flex: none; }
.barra-hora:hover .barra-col { filter: brightness(1.2); }
.barra-lbl { margin: 4px 0 6px; font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-align: center; }
.leyenda-grafico { margin: 8px 0 0; font-size: 11.5px; color: var(--text-mute); display: flex; align-items: center; gap: 6px; }
.leyenda-grafico .cuadro { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda-grafico .cuadro.c-ok { background: var(--accent); }
.leyenda-grafico .cuadro.c-err { background: var(--err); margin-left: 10px; }

/* Dos columnas que se apilan en pantallas angostas. */
.dash-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.dash-dos > .bloque-dash { margin-bottom: 26px; }

.panel-dash {
    display: block;
    padding: 14px 16px;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
.panel-dash:hover { border-color: var(--line-fuerte); }
.panel-dash header { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.panel-total { font-size: 24px; font-variant-numeric: tabular-nums; }
.barra-estados { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line-soft); margin-bottom: 12px; }
.barra-estados .seg.s-run   { background: var(--ok); }
.barra-estados .seg.s-pausa { background: var(--warn); }
.barra-estados .seg.s-stop  { background: var(--err); }
.barra-estados .seg.s-nada  { background: var(--line-fuerte); }
.estados-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0; }
.estados-dash div { display: flex; justify-content: space-between; font-size: 13px; }
.estados-dash dt { color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.estados-dash dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.estados-dash .dd-aviso dd { color: var(--warn); }
.punto-est { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punto-est.s-run { background: var(--ok); }
.punto-est.s-pausa { background: var(--warn); }
.punto-est.s-stop { background: var(--err); }

.tabla-dash td { vertical-align: middle; }
.cifras-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cifra-dash {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}
.cifra-dash:hover { border-color: var(--line-fuerte); }
.cifra-dash .kpi-lbl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.cifra-dash .kpi-num { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Servidor donde corre un canal: chip visible en las listas. */
.chip-servidor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--chip-fondo);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- tráfico por canal */
.sub-trafico { margin: -6px 0 12px; }
.tabla-trafico td { vertical-align: middle; }
.tabla-trafico thead th.num, .tabla-trafico td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-trafico .fila-total td {
    background: var(--superficie-2);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
}
.tabla-trafico .fila-total td:nth-child(2) { text-align: right; }
.tabla-trafico .fila-sin-trafico td { color: var(--text-mute); }
.tabla-trafico .t-ok { color: var(--ok); }
.tabla-trafico .t-err { color: var(--err); }
.tabla-trafico .t-warn { color: var(--warn); }
.asr { display: inline-block; min-width: 54px; padding: 2px 8px; border-radius: 6px; font-weight: 600; text-align: right; }
.asr-ok    { color: var(--ok);   background: rgb(52 211 153 / 12%); }
.asr-medio { color: var(--warn); background: rgb(251 191 36 / 12%); }
.asr-bajo  { color: var(--err);  background: rgb(248 113 113 / 12%); }
.glosario-trafico { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.glosario-trafico dt { font-weight: 600; }
.glosario-trafico dd { margin: 0; color: var(--text-dim); }

/* Botón «+» de alta: cuadrado, del color primario. */
.btn-mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--primario-borde);
    background: linear-gradient(180deg, var(--primario-1), var(--primario-2));
    color: var(--primario-texto);
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}
.btn-mas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.btn-mas:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgb(47 111 224 / 35%); }
.btn-mas:focus-visible { outline: 2px solid var(--primario-borde); outline-offset: 2px; }

/* ---------------------------------------------------------------- gráficos de barras (Stats) */
.kpis-stats { margin-bottom: 18px; }
.graf {
    margin: 0 0 16px;
    padding: 14px 16px 10px;
    background: var(--superficie-0);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.graf-tit { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--text); }
.graf-sub { font-weight: 400; font-size: 13px; color: var(--accent); margin-left: 6px; }
.graf-cuerpo { display: flex; gap: 8px; height: 170px; }
.graf-eje-y { position: relative; width: 44px; flex: none; }
.graf-eje-y span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 10.5px;
    color: var(--text-mute);
    white-space: nowrap;
}
.graf-area { position: relative; flex: 1; min-width: 0; }
.graf-linea { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line-soft); }
.graf-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; padding: 0 2px; }
.graf-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; cursor: default; }
.graf-barra {
    position: relative;
    width: 100%;
    max-width: 30px;
    margin: 0 auto;
    background: #3b82f6;
    border-radius: 3px 3px 0 0;
    transition: filter .12s;
}
.graf-barra.en-curso { background: repeating-linear-gradient(135deg, #3b82f6 0 5px, #2f6fe0 5px 10px); }
.graf-col:hover .graf-barra { filter: brightness(1.25); }
.graf-valor {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.graf-eje-x { display: flex; gap: 4px; margin-left: 52px; padding: 6px 2px 0; }
.graf-eje-x span { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; color: var(--text-mute); overflow: hidden; }

/* Barras apiladas de Stats: DLVR abajo (verde), error en medio (rojo), enviado sin desenlace arriba (azul). */
.graf-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.graf-cab .graf-tit { margin: 0; }
.graf-leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.graf-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.graf-leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.c-ok  { background: #10b981; }
.c-err { background: #ef4444; }
.c-env { background: #3b82f6; }
.graf-barra.apilada { display: flex; flex-direction: column; background: transparent; overflow: visible; }
.graf-barra.apilada > span[class^="seg-"] { display: block; width: 100%; flex: none; }
.graf-barra.apilada > .seg-env { background: #3b82f6; border-radius: 3px 3px 0 0; }
.graf-barra.apilada > .seg-err { background: #ef4444; }
.graf-barra.apilada > .seg-ok  { background: #10b981; }
/* El segmento superior visible lleva el redondeo, sea cual sea. */
.graf-barra.apilada > .seg-env[style^="height:0%"] + .seg-err { border-radius: 3px 3px 0 0; }
.graf-barra.apilada > .seg-env[style^="height:0%"] + .seg-err[style^="height:0%"] + .seg-ok { border-radius: 3px 3px 0 0; }
.graf-barra.apilada.en-curso > span[class^="seg-"] { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0%) 0 5px, rgb(255 255 255 / 16%) 5px 10px); }

/* Barras agrupadas finas (Stats): DLVR, Error y Enviado una al lado de la otra. */
.graf-grupo {
    justify-content: center;
    gap: 2px;
    padding: 0 1px;
    border-radius: 4px;
}
.graf-grupo .gb {
    flex: 0 1 6px;
    max-width: 6px;
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    transition: filter .12s;
}
.graf-grupo .gb-ok  { background: #10b981; }
.graf-grupo .gb-err { background: #ef4444; }
.graf-grupo .gb-env { background: #3b82f6; }
.graf-grupo:hover { background: rgb(255 255 255 / 4%); }
.graf-grupo:hover .gb { filter: brightness(1.2); }
/* Periodo en curso: una franja de fondo y un tope punteado, sin ensuciar las barras. */
.graf-grupo.en-curso {
    background: rgb(76 141 255 / 7%);
    box-shadow: inset 0 1px 0 0 rgb(76 141 255 / 35%);
}

.chip-compartido { display: inline-block; margin-top: 4px; font-size: 10.5px; }


/* ---------------------------------------------------------------- mi perfil */
.enlace-perfil { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-fuerte); }
.enlace-perfil:hover { color: var(--text); border-bottom-color: var(--accent); }
.panel-perfil {
    max-width: 640px;
    padding: 18px 20px;
    background: var(--superficie-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.form-zona { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.sel-zona {
    flex: 1;
    min-width: 260px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
}
.reloj-zona { display: flex; gap: 28px; flex-wrap: wrap; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.reloj-zona dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.reloj-zona dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

/* Envíos por gateway en la lista: cuatro cifras en una cuadrícula compacta. */
.celda-envios { white-space: nowrap; }
.envios-4 { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px; margin: 0; }
.envios-4 div { display: flex; flex-direction: column; align-items: flex-end; }
.envios-4 dt { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.envios-4 dd { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.envios-4 dd.envios-vivo { color: var(--ok); }

/* Gateway de pruebas compartido (emulador): fondo y barra violeta propios. */
.fila-canal.fila-pruebas > td { background: rgb(167 139 250 / 7%); }
.fila-canal.fila-pruebas > td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.fila-canal.fila-pruebas .chip-compartido { color: var(--accent-2); background: rgb(167 139 250 / 14%); border-color: rgb(167 139 250 / 35%); }

/* Estado + bind + señal en una línea; cola y % de entrega dentro de Envíos. */
.senal-linea { flex-wrap: wrap; gap: 8px; }
.senal-linea .chip-bind { font-size: 10.5px; padding: 1px 7px; }
.senal-control { display: inline-flex; align-items: center; gap: 6px; }
.envios-4 { grid-template-columns: repeat(5, auto); }
.envios-4 dd.asr-ok, .envios-4 dd.asr-medio, .envios-4 dd.asr-bajo { padding: 0 5px; border-radius: 4px; }
.cola-aviso {
    display: inline-block;
    margin-bottom: 5px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--warn);
    background: rgb(251 191 36 / 12%);
    border: 1px solid rgb(251 191 36 / 30%);
    border-radius: 6px;
}
.cabecera-tabla .auto-refresco { margin-left: auto; font-size: 11.5px; }

/* Conexión fija del emulador: candado violeta, no aviso amarillo. */
.chip.chip-fija { color: var(--accent-2); background: rgb(167 139 250 / 12%); border-color: rgb(167 139 250 / 32%); }
.chip.chip-fija::before { content: "🔒 "; }
.aviso-fija {
    margin: 12px 0;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-dim);
    background: rgb(167 139 250 / 8%);
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: 8px;
}
.aviso-fija strong { color: var(--text); }

/* ---------------------------------------------------------------- clientes y proveedores */
.sub-fichas { margin: -6px 0 14px; }
.chip.chip-tipo { font-weight: 600; }
.chip.chip-tipo.tipo-cliente   { color: #60a5fa; background: rgb(76 141 255 / 12%);  border-color: rgb(76 141 255 / 32%); }
.chip.chip-tipo.tipo-proveedor { color: #fbbf24; background: rgb(251 191 36 / 12%);  border-color: rgb(251 191 36 / 32%); }
.chip.chip-tipo.tipo-ambos     { color: #c4b5fd; background: rgb(167 139 250 / 14%); border-color: rgb(167 139 250 / 36%); }
.tabla-fichas td { vertical-align: middle; }
.tabla-fichas .fila-ficha > td:first-child { box-shadow: inset 3px 0 0 var(--tipo, transparent); }
.tabla-fichas .fila-ficha.tipo-cliente   { --tipo: #4c8dff; }
.tabla-fichas .fila-ficha.tipo-proveedor { --tipo: #fbbf24; }
.tabla-fichas .fila-ficha.tipo-ambos     { --tipo: #a78bfa; }
.tabla-fichas .mando-fila form { margin: 0; }
.selector-tipo { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 6px; }
.selector-tipo label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cab-identidad-linea .chip-tipo { margin-left: 6px; }

/* Informes Status / Conexión del gateway: un veredicto arriba y la lista de chequeos con su marca. */
.informe-veredicto {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: 10px;
}
.informe-veredicto strong { display: block; font-size: 15px; margin-bottom: 2px; }
.informe-veredicto span:not(.informe-marca) { font-size: 12.5px; color: var(--text-dim); }
.informe-veredicto.v-ok    { background: rgb(52 211 153 / 8%);  border-color: rgb(52 211 153 / 30%); }
.informe-veredicto.v-info  { background: rgb(76 141 255 / 8%);  border-color: rgb(76 141 255 / 26%); }
.informe-veredicto.v-aviso { background: rgb(214 164 92 / 9%);  border-color: rgb(214 164 92 / 32%); }
.informe-veredicto.v-error { background: rgb(248 113 113 / 9%); border-color: rgb(248 113 113 / 32%); }

.informe-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.informe-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-bottom: 1px solid var(--line-soft); }
.informe-item:last-child { border-bottom: 0; }
.informe-item strong { display: block; font-size: 13px; font-weight: 600; }
.informe-resultado { display: block; font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.informe-sugerencia { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text); }

.informe-marca {
    flex: none; display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 12px; font-weight: 700; line-height: 1;
}
.n-ok .informe-marca,    .v-ok .informe-marca    { color: var(--ok);     background: rgb(52 211 153 / 14%); }
.n-info .informe-marca,  .v-info .informe-marca  { color: var(--accent); background: rgb(76 141 255 / 14%); }
.n-aviso .informe-marca, .v-aviso .informe-marca { color: #d6a45c;       background: rgb(214 164 92 / 16%); }
.n-error .informe-marca, .v-error .informe-marca { color: var(--err);    background: rgb(248 113 113 / 14%); }
.n-error .informe-sugerencia, .n-aviso .informe-sugerencia { color: var(--text); }

/* Campos bloqueados del formulario «Configurar gateway»: se leen, no se editan. */
.campo-bloqueado,
.campo-bloqueado:focus {
    color: var(--text-dim);
    background: transparent;
    border-style: dashed;
    cursor: not-allowed;
    box-shadow: none;
}

/* Tres luces de estado por canal: Servicio, Señal (monitor de CONTROL) y Proveedor (bind). */
.celda-luces { min-width: 230px; }
.luces { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.luz { display: grid; grid-template-columns: 10px 74px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.25; }
.luz-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--text-mute); }
.luz-et { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.luz-txt { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.luz-verde    .luz-punto { background: var(--ok);  box-shadow: 0 0 0 3px rgb(52 211 153 / 18%), 0 0 8px rgb(52 211 153 / 55%); }
.luz-amarilla .luz-punto { background: #f5b84a;    box-shadow: 0 0 0 3px rgb(245 184 74 / 18%), 0 0 8px rgb(245 184 74 / 50%); }
.luz-roja     .luz-punto { background: var(--err); box-shadow: 0 0 0 3px rgb(248 113 113 / 18%), 0 0 8px rgb(248 113 113 / 55%); }
.luz-gris     .luz-punto { background: transparent; border: 1.5px solid var(--text-mute); }
.luz-roja .luz-txt { color: var(--err); }
.luz-amarilla .luz-txt { color: #f5b84a; }
.luz-gris .luz-txt { color: var(--text-mute); }

/* Mando de la lista de canales: «Configurar» como acción principal y las consultas en un grupo de íconos. */
.btn-mini.btn-configurar { font-weight: 600; border-color: rgb(76 141 255 / 40%); color: var(--text); }
.btn-mini.btn-configurar:hover { background: rgb(76 141 255 / 14%); border-color: var(--accent); }

.grupo-iconos {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--superficie-0);
}
.btn-icono {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 27px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
}
.btn-icono:first-child { border-left: 0; }
.btn-icono svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-icono:hover:not(:disabled) { color: var(--text); background: rgb(76 141 255 / 14%); }
.btn-icono:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.btn-icono:disabled { opacity: .35; cursor: not-allowed; }

/* Luces: el texto principal y la hora, apagada, para que la hora nunca empuje al texto fuera de la celda. */
.celda-luces { min-width: 250px; }
.luz-txt { display: flex; gap: 6px; align-items: baseline; }
.luz-hora { color: var(--text-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Fila sin nada que atender (detenida a propósito): barra gris, no roja. */
.fila-canal.fila-est-nada { --fila-est: var(--text-mute); }

/* Contador del mensaje de prueba cuando falta el texto. */
.cnt-falta { color: #f5b84a; }

/* Íconos del mando que navegan (Setup del cliente, Tráfico): mismo aspecto que los botones. */
a.btn-icono { text-decoration: none; }

/* =============================================================================
   TEMA CLARO — el de por defecto. El oscuro es el de :root (arriba); este bloque solo
   redefine los tokens cuando <html data-tema="claro">. El botón ☀/☾ de la barra lo
   alterna y lo recuerda en el navegador (localStorage «smpp.tema»).

   Los colores de estado (verde, rojo, ámbar) se oscurecen: los del tema oscuro son
   claros a propósito y sobre blanco no tendrían contraste suficiente para leerse.
   ========================================================================== */
:root[data-tema="claro"] {
    --bg:            #f3f6fb;
    --panel-2:       #ffffff;
    --superficie-0:  #ffffff;
    --superficie-1:  #ffffff;
    --superficie-2:  #eef2f8;
    --elegido:       #e2ebff;
    --chip-fondo:    #eef2f8;

    --line:          #d5dce8;
    --line-soft:     #e5eaf2;
    --line-fuerte:   #b6c2d6;

    --text:          #0f172a;
    --text-dim:      #44516a;
    --text-mute:     #66748c;

    --accent:        #2563eb;
    --accent-2:      #7c3aed;
    --ok:            #047857;
    --err:           #c62828;
    --warn:          #b45309;

    --barra:         rgb(255 255 255 / 88%);
    --velo:          rgb(15 23 42 / 38%);
    --cielo-1:       #dfe9ff;
    --cielo-2:       #ece6ff;
    --tarjeta:       linear-gradient(180deg, #ffffff, #fafbfe);

    --primario-1:      #2563eb;
    --primario-2:      #1d4ed8;
    --primario-borde:  #3b82f6;
    --primario-texto:  #ffffff;

    --shadow: 0 10px 30px rgb(15 23 42 / 12%);

    color-scheme: light;
}

/* Ámbar escrito a mano en el tema oscuro: aquí, el mismo tono pero legible sobre blanco. */
:root[data-tema="claro"] .cifra-p.alerta,
:root[data-tema="claro"] .cx-aviso-real,
:root[data-tema="claro"] .cx-aviso-real strong,
:root[data-tema="claro"] .dlg-nota.aviso strong,
:root[data-tema="claro"] .transfer-item.sin-configurar .transfer-resumen,
:root[data-tema="claro"] .chip.e-aviso,
:root[data-tema="claro"] .chip.chip-tipo.tipo-proveedor,
:root[data-tema="claro"] .luz-amarilla .luz-txt,
:root[data-tema="claro"] .cnt-falta,
:root[data-tema="claro"] .n-aviso .informe-marca,
:root[data-tema="claro"] .v-aviso .informe-marca { color: var(--warn); }
:root[data-tema="claro"] .mt-kpi.aviso { box-shadow: inset 3px 0 0 var(--warn); }
:root[data-tema="claro"] .tabla-fichas .fila-ficha.tipo-proveedor { --tipo: var(--warn); }
:root[data-tema="claro"] .luz-amarilla .luz-punto { background: #d97706; box-shadow: 0 0 0 3px rgb(217 119 6 / 16%); }
:root[data-tema="claro"] .luz-verde .luz-punto { box-shadow: 0 0 0 3px rgb(4 120 87 / 14%); }
:root[data-tema="claro"] .luz-roja .luz-punto { box-shadow: 0 0 0 3px rgb(198 40 40 / 14%); }
:root[data-tema="claro"] .chip.chip-tipo.tipo-cliente { color: #1d4ed8; }
:root[data-tema="claro"] .chip.chip-tipo.tipo-ambos { color: #6d28d9; }
:root[data-tema="claro"] .dialogo { box-shadow: 0 24px 60px rgb(15 23 42 / 22%); }
:root[data-tema="claro"] ::selection { background: rgb(37 99 235 / 20%); }

/* Botón de tema de la barra superior: muestra el ícono del tema al que se cambia. */
.btn-tema {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
}
.btn-tema:hover { color: var(--text); border-color: var(--line-fuerte); background: var(--elegido); }
.btn-tema:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-tema .ico-sol { display: none; }
:root[data-tema="oscuro"] .btn-tema .ico-sol { display: block; }
:root[data-tema="oscuro"] .btn-tema .ico-luna { display: none; }

/* Filtro por contraparte encima de la tabla de canales: proveedores (gateways) o clientes (routers). */
.filtro-contraparte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.filtro-et { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); margin-right: 4px; }
.chip-filtro {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--superficie-0);
    color: var(--text-dim); font: inherit; font-size: 12.5px; cursor: pointer;
}
.chip-filtro:hover { color: var(--text); border-color: var(--line-fuerte); }
.chip-filtro.activo { color: var(--text); border-color: var(--accent); background: var(--elegido); font-weight: 600; }
.chip-filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-filtro .conteo { font-size: 11px; }

/* Lista de costo del gateway. */
.lc-resumen { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 8px; }
.lc-resumen > div { display: grid; gap: 2px; }
.lc-resumen .dlg-nota { flex: 1; margin: 0; }
.lc-programada { color: var(--accent); }
.lc-buscar { width: min(280px, 100%); margin: 0 0 8px; }
.lc-tabla { max-height: 340px; overflow-y: auto; }
.lc-tabla details summary { cursor: pointer; }
.lc-redes { list-style: none; margin: 6px 0 2px; padding: 0 0 0 14px; display: grid; gap: 3px; font-size: 12.5px; }
.lc-redes li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lc-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 10px 0 14px; }
.lc-pestana {
    padding: 7px 14px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--text-dim); font: inherit; font-size: 13.5px; cursor: pointer; margin-bottom: -1px;
}
.lc-pestana.activa { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.lc-opciones { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lc-lista-redes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px;
    max-height: 200px; overflow-y: auto; padding: 8px 10px; margin-top: 8px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px;
}
.lc-fecha { margin-top: 8px; max-width: 260px; }

/* Recuadro para soltar el tarifario: también se hace clic en él para elegir el archivo. */
.lc-soltar {
    position: relative;
    display: grid; justify-items: center; gap: 4px;
    padding: 26px 16px; margin-top: 4px;
    border: 2px dashed var(--line-fuerte); border-radius: 12px;
    background: var(--superficie-0);
    color: var(--text-dim); text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.lc-soltar svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.lc-soltar strong { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.lc-soltar span { font-size: 12.5px; }
.lc-soltar:hover, .lc-soltar.encima { border-color: var(--accent); background: var(--elegido); color: var(--text); }
.lc-soltar.con-archivo { border-style: solid; border-color: var(--ok); }
.lc-soltar.error { border-color: var(--err); }
.lc-soltar:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* El input real queda dentro, invisible pero presente: así «required» sigue validando el formulario. */
.lc-archivo-oculto { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* Editor manual de la lista de costo. */
.lc-panel { margin-top: 4px; }
.lc-agregar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.lc-agregar .dlg-campo { margin: 0; min-width: 180px; }
.lc-agregar .dlg-campo:first-child { flex: 1 1 260px; }
.lc-barra-manual { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.lc-hay-cambios { color: var(--accent); font-weight: 600; }
.lc-editor .lc-costo { width: 110px; text-align: right; }
.lc-editor tr.lc-cambiada td { background: rgb(76 141 255 / 8%); }
.lc-editor tr.lc-nueva td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.lc-editor tr.lc-invalida .lc-costo, .lc-invalido { border-color: var(--err); }
.lc-editor .btn-icono { border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 24px; }

/* Vigencia obligatoria de la carga. */
.lc-vigencia { display: flex; gap: 8px; align-items: center; }
.lc-vigencia .lc-fecha { margin: 0; max-width: 240px; }
.obligatorio { font-size: 11px; font-weight: 500; color: var(--warn, #b45309); margin-left: 6px; }

/* Cargas con folio de la lista de costo: cada fila se despliega para ver qué entró. */
.lc-cargas tr.lc-carga { cursor: pointer; }
.lc-cargas tr.lc-carga:hover td { background: var(--superficie-2); }
.lc-cargas tr.lc-carga:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lc-cargas tr.lc-carga.abierta td { background: var(--elegido); }
.lc-flecha { display: inline-block; transition: transform .15s; color: var(--text-mute); }
.lc-carga.abierta .lc-flecha { transform: rotate(90deg); color: var(--accent); }
.lc-usuario { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-carga-detalle > td { padding: 12px 14px 16px; background: var(--superficie-0); }
.lc-carga-info { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.lc-carga-info strong { color: var(--text); }

/* Modal del contenido de una carga: buscador, filtro por país y tabla con encabezado fijo. */
.cg-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cg-filtros .buscar-canal { width: min(300px, 100%); }
.cg-filtros select { max-width: 260px; }
.cg-tabla { max-height: min(460px, 55vh); overflow-y: auto; }
.cg-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }

/* Cambios de costo en una carga: subió (rojo: nos cuesta más), bajó (verde), igual, nueva. */
.cg-cambios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
@media (max-width: 640px) { .cg-cambios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cg-cambio {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
    padding: 9px 12px; text-align: left; cursor: pointer; font: inherit;
    border: 1px solid var(--line); border-radius: 10px; background: var(--superficie-0); color: var(--text);
}
.cg-cambio .cg-ico { grid-row: 1 / span 2; font-size: 16px; }
.cg-cambio strong { font-size: 18px; line-height: 1.1; }
.cg-cambio span:last-child { font-size: 12px; color: var(--text-dim); }
.cg-cambio:hover { border-color: var(--line-fuerte); }
.cg-cambio.activo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--elegido); }
.cg-cambio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cg-cambio.c-subio .cg-ico { color: var(--err); }
.cg-cambio.c-bajo .cg-ico { color: var(--ok); }
.cg-cambio.c-igual .cg-ico { color: var(--text-mute); }
.cg-cambio.c-nueva .cg-ico { color: var(--accent); }

.chip.c-subio { color: var(--err); background: rgb(248 113 113 / 12%); border-color: rgb(248 113 113 / 32%); }
.chip.c-bajo  { color: var(--ok);  background: rgb(52 211 153 / 12%);  border-color: rgb(52 211 153 / 30%); }
.cg-variacion { white-space: nowrap; }
.cg-variacion .mono { margin-left: 6px; font-size: 12.5px; }
.cg-fila.c-subio .cg-variacion .mono { color: var(--err); }
.cg-fila.c-bajo .cg-variacion .mono { color: var(--ok); }

/* Estilo base de TODO select del sitio, con prioridad mínima (:where): el que no tenga uno propio (filtros de
   modales, selectores sueltos) toma el mismo aspecto que los campos de búsqueda en vez del del navegador. Los
   que ya lo tienen (.dlg-campo, .filtros, .monitor-selector…) no cambian. Las opciones siguen el tema. */
:where(select) {
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background-color: var(--superficie-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    transition: border-color .15s, box-shadow .15s;
}
:where(select):hover { border-color: var(--line-fuerte); }
:where(select):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(76 141 255 / 18%); }
select option, select optgroup { background-color: var(--panel-2); color: var(--text); }

/* Interruptor Activo/Inactivo del gateway, al inicio de su fila. */
.form-interruptor { margin: 0 0 6px; }
.interruptor {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--superficie-0); color: var(--text-mute);
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.interruptor:hover { border-color: var(--line-fuerte); }
.interruptor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.interruptor-pista {
    position: relative; width: 30px; height: 16px; border-radius: 999px;
    background: var(--line-fuerte); transition: background .15s;
}
.interruptor-bola {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 35%); transition: transform .15s;
}
.interruptor.encendido { color: var(--ok); border-color: rgb(52 211 153 / 40%); }
.interruptor.encendido .interruptor-pista { background: var(--ok); }
.interruptor.encendido .interruptor-bola { transform: translateX(14px); }

/* Ícono «Lista de costo» encendido: el gateway ya tiene su lista propia. */
.btn-icono.con-lista { color: var(--accent); background: rgb(76 141 255 / 12%); position: relative; }
.btn-icono.con-lista::after {
    content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ok); box-shadow: 0 0 0 2px var(--superficie-0);
}

/* Lista de costo de un gateway sin conector (creado en blanco): atenuado, lleva a completar la conexión. */
.btn-icono.sin-conector { opacity: .45; }
.btn-icono.sin-conector:hover { opacity: 1; }

/* Botón «Wizard» de la cabecera de Gateways. */
.btn-wizard { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; margin-right: 8px; font-weight: 600; }
.btn-wizard svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Wizard de rutas: matriz destino × gateway. Encabezados y primeras columnas fijos al desplazarse. */
.rt-filtros .rt-numero { width: min(220px, 100%); }
.rt-check { white-space: nowrap; }
.rt-numero-info { margin: -4px 0 10px; color: var(--accent); }
.rt-tabla { max-height: min(62vh, 640px); overflow: auto; }
.rt-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); vertical-align: bottom; }
.rt-tabla tbody td:first-child, .rt-tabla thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie-1); }
.rt-tabla thead th:first-child { z-index: 3; background: var(--panel-2); }
.rt-col { min-width: 120px; }
.rt-col .mono { display: block; font-size: 12px; }
.rt-prov { display: block; font-weight: 600; font-size: 12.5px; color: var(--text); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.rt-etq { display: flex; gap: 4px; justify-content: flex-end; margin-top: 3px; }
.rt-vacia { color: var(--text-mute); }
.rt-mejor { color: var(--ok); font-weight: 700; background: rgb(52 211 153 / 10%); }
.rt-ganador { white-space: nowrap; font-size: 12.5px; }
.rt-ganador > span { display: block; }

/* Filas clicables del wizard de rutas. */
.rt-tabla tr.rt-fila { cursor: pointer; }
.rt-tabla tr.rt-fila:hover td { background: var(--superficie-2); }
.rt-tabla tr.rt-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Modal de un destino con todos sus proveedores. */
.ds-mejores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ds-mejor { display: grid; gap: 2px; padding: 10px 14px; min-width: 170px; border: 1px solid var(--line); border-radius: 10px; background: var(--superficie-0); }
.ds-mejor strong { font-size: 15px; }
.ds-tabla tr.ds-ganador td { background: rgb(52 211 153 / 8%); }
.ds-dif { color: var(--err); }
.ds-historial { display: grid; gap: 6px; }
.ds-historial details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--superficie-0); }
.ds-historial summary { cursor: pointer; }
.ds-hist { margin-top: 8px; }
.ds-hist tr.ds-vigente td { background: var(--elegido); }
.ds-hist .chip { margin-left: 6px; }
.ds-sube { color: var(--err); }
.ds-baja { color: var(--ok); }

/* Diálogo a pantalla completa (wizard de rutas): todo el ancho y alto de la ventana; el cuerpo crece y la
   tabla ocupa el espacio que queda, con su propio desplazamiento. */
.dialogo.completo {
    width: calc(100vw - 20px);
    max-width: none;
    height: calc(100vh - 20px);
    max-height: none;
}
.dialogo.completo[open] { display: flex; flex-direction: column; }
.dialogo.completo > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dialogo.completo .dlg-cuerpo { flex: 1; min-height: 0; overflow: hidden; gap: 10px; padding: 14px 18px; }
.dialogo.completo .rt-tabla { flex: 1; min-height: 0; max-height: none; }
.dialogo.completo .dlg-pista { margin: 0; }

/* País y Red fijos a la izquierda al desplazarse por los proveedores. */
.rt-tabla th:nth-child(1), .rt-tabla td:nth-child(1) { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; max-width: 150px; }
.rt-tabla th:nth-child(2), .rt-tabla td:nth-child(2) {
    position: sticky; left: 150px; z-index: 1; width: 200px; min-width: 200px; max-width: 200px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px 0 0 var(--line);
}
.rt-tabla td:nth-child(1), .rt-tabla td:nth-child(2) { background: var(--superficie-1); }
.rt-tabla thead th:nth-child(1), .rt-tabla thead th:nth-child(2) { z-index: 3; background: var(--panel-2); }
.rt-tabla tr.rt-fila:hover td:nth-child(1), .rt-tabla tr.rt-fila:hover td:nth-child(2) { background: var(--superficie-2); }
.rt-tabla td:nth-child(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-tabla td { padding-top: 7px; padding-bottom: 7px; }

/* Tipo de cambio en la barra superior. */
.tipo-cambio { display: inline-flex; gap: 12px; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.tc-et { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-mute); margin-right: 2px; }
@media (max-width: 900px) { .tipo-cambio { display: none; } }

/* Wizard en USD: el valor convertido arriba; el precio original de la lista, pequeño, debajo. */
.rt-usd { display: block; }
.rt-original { display: block; font-size: 11px; color: var(--text-mute); font-weight: 400; }
.rt-mejor .rt-original { color: var(--text-dim); }
.rt-ganador .rt-original { display: inline; }

/* ===== Wizard de rutas: presentación profesional (todo en USD) ===== */
.rt-moneda-tit { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; color: var(--accent); border: 1px solid var(--accent); }
.rt-resumen { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.rt-dato { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 160px; }
.rt-dato strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.rt-dato .apagado { font-size: 11.5px; }
.rt-dato-aviso { border-color: var(--warn); }
.rt-leyenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-left: auto; font-size: 12px; color: var(--text-dim); }
.rt-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }

.rt-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.rt-punto.activo { background: var(--ok); box-shadow: 0 0 0 3px rgb(52 211 153 / 18%); }
.rt-punto.inactivo { background: var(--text-mute); }
.rt-punto.provisorio { background: var(--warn); box-shadow: 0 0 0 3px rgb(251 191 36 / 18%); }

/* Cabecera de cada proveedor: nombre con su estado, gateway y destinos · moneda. */
.rt-tabla thead th { padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.rt-col { min-width: 132px; text-align: right; }
.rt-col .rt-prov { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.rt-col .rt-gw { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-dim); margin-top: 2px; text-transform: none; letter-spacing: 0; }
.rt-col .rt-meta { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-mute); margin-top: 1px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.rt-sub-th { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-mute); text-transform: none; letter-spacing: 0; }
.rt-th-mejor { min-width: 170px; }

/* Filas de altura pareja: dos líneas en cada celda. */
.rt-tabla td { padding-top: 6px; padding-bottom: 6px; height: 44px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.rt-pais-nombre, .rt-red-nombre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-pais-nombre { font-weight: 600; }
.rt-sub { display: block; font-size: 11px; color: var(--text-mute); }
/* Agrupado por país: el nombre solo en la primera fila de cada país. */
.rt-tabla tr.rt-fila:not(.rt-inicio-pais) .rt-pais > * { visibility: hidden; }
.rt-tabla tr.rt-inicio-pais td { border-top: 1px solid var(--line-strong, var(--line)); }
.rt-tabla tbody tr.rt-fila:nth-child(even) td { background-image: linear-gradient(rgb(127 127 127 / 4%), rgb(127 127 127 / 4%)); }

.rt-celda { font-variant-numeric: tabular-nums; }
.rt-celda .rt-usd { display: block; font-size: 13px; color: var(--text); }
.rt-celda .rt-original { display: block; font-size: 10.5px; color: var(--text-mute); margin-top: 1px; }
.rt-vacia { color: var(--text-mute); }
.rt-guion { opacity: .5; }
.rt-mejor { background: rgb(52 211 153 / 7%); }
.rt-mejor .rt-original { color: var(--text-dim); }
.rt-pill { display: inline-block !important; padding: 1px 7px; border-radius: 999px; font-weight: 700; color: var(--ok) !important; background: rgb(52 211 153 / 14%); border: 1px solid rgb(52 211 153 / 35%); font-variant-numeric: tabular-nums; }

.rt-ganador { white-space: nowrap; }
.rt-ganador .rt-gan-prov { display: block; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rt-ganador .rt-gan-valor { display: block; font-size: 11.5px; color: var(--ok); }
.rt-ventaja { margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; color: var(--text-dim); background: var(--superficie-2); }

/* ===== Auditoría de acciones de usuarios ===== */
.aud-tabla td { vertical-align: top; }
.aud-detalle { min-width: 280px; max-width: 520px; }
.aud-mensaje { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px; }
.aud-detalle summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.aud-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: 12px; }
.aud-datos dt { color: var(--text-mute); font-weight: 600; }
.aud-datos dd { margin: 0; word-break: break-all; }
.aud-json { margin: 0; padding: 6px 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all;
            font-size: 11.5px; background: var(--superficie-2); border: 1px solid var(--line); border-radius: 6px; }