:root {
    color-scheme: dark;

    --fondo: #071018;
    --fondo-profundo: #03090e;
    --panel: #0d1822;
    --panel-elevado: #12212d;
    --panel-suave: #0a141d;

    --borde: #203442;
    --borde-fuerte: #315062;

    --texto: #e6f0f5;
    --texto-secundario: #91a8b5;
    --texto-tenue: #69808c;

    --primario: #18d39e;
    --primario-claro: #52e6bc;
    --primario-fondo: rgba(24, 211, 158, 0.11);

    --correcto: #2dd477;
    --correcto-fondo: rgba(45, 212, 119, 0.12);
    --advertencia: #f7b84b;
    --advertencia-fondo: rgba(247, 184, 75, 0.13);
    --peligro: #ff6577;
    --peligro-fondo: rgba(255, 101, 119, 0.12);
    --neutro: #8ba0ac;
    --neutro-fondo: rgba(139, 160, 172, 0.12);

    --azul: #5e9eff;
    --azul-fondo: rgba(94, 158, 255, 0.13);
    --violeta: #a184ff;
    --violeta-fondo: rgba(161, 132, 255, 0.14);

    --radio: 14px;
    --radio-pequeno: 9px;
    --sombra: 0 18px 45px rgba(0, 0, 0, 0.22);
    --sombra-suave: 0 8px 24px rgba(0, 0, 0, 0.16);
}

* {
    box-sizing: border-box;
}

/* El atributo `hidden` debe ganarle a cualquier `display` que
   pongamos en una clase (.formulario-seccion es display:grid, y
   sin esto seguiría viéndose aunque el JS la marque oculta). */
[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
    background: var(--fondo-profundo);
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(24, 211, 158, 0.08), transparent 28rem),
        radial-gradient(circle at 95% 10%, rgba(51, 153, 255, 0.07), transparent 25rem),
        var(--fondo);
    color: var(--texto);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

::selection {
    background: var(--primario);
    color: #03100c;
}

a {
    color: var(--primario-claro);
    text-decoration: none;
}

a:hover {
    color: #8bf1d3;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(24, 211, 158, 0.3);
    outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--texto);
    line-height: 1.2;
}

h1 {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 4vw, 2.55rem);
    letter-spacing: -0.035em;
}

h2 {
    margin-bottom: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    letter-spacing: -0.02em;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.08rem;
}

h4 {
    margin-bottom: 12px;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

small {
    color: var(--texto-secundario);
}

hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--borde);
}

pre {
    overflow-x: auto;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}


/* Estructura general */

.app-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(49, 80, 98, 0.72);
    background: rgba(5, 13, 19, 0.9);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
}

.app-header-contenido {
    display: flex;
    width: min(1440px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.marca {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    color: var(--texto);
}

.marca:hover {
    color: var(--texto);
}

.marca-icono {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(82, 230, 188, 0.62);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(24, 211, 158, 0.23), rgba(24, 211, 158, 0.06));
    box-shadow: inset 0 0 20px rgba(24, 211, 158, 0.08);
    overflow: hidden;
}

.marca-icono img {
    display: block;
    width: 62%;
    height: auto;
}

.login-card {
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
}

.login-boton {
    min-height: 46px;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .login-boton {
        width: 100%;
    }
}

.marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.marca-texto strong {
    font-size: 0.98rem;
}

.marca-texto small {
    margin-top: 3px;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-principal {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-principal::-webkit-scrollbar {
    display: none;
}

.menu-principal a {
    position: relative;
    flex: 0 0 auto;
    padding: 9px 8px;
    border-radius: 8px;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.menu-principal a:hover {
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
}

.menu-principal a.activo {
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.menu-principal a.activo::after {
    position: absolute;
    right: 12px;
    bottom: 3px;
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--primario);
    content: "";
}

.contenido-principal,
.container {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}

.contenido-principal {
    padding: 34px 0 64px;
}

.container {
    padding: 24px 0;
}


/* Encabezados de página */

.pagina-encabezado {
    display: flex;
    margin-bottom: 24px;
    padding: 26px 28px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) + 2px);
    background:
        linear-gradient(110deg, rgba(24, 211, 158, 0.09), transparent 42%),
        var(--panel);
    box-shadow: var(--sombra-suave);
}

.pagina-etiqueta {
    margin-bottom: 7px;
    color: var(--primario);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pagina-acciones,
.pie-acciones,
.tarjeta-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.router-identidad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: var(--texto-secundario);
}

.router-identidad strong {
    color: var(--texto);
}

.router-identidad span {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
}

.seccion-encabezado {
    display: flex;
    margin-bottom: 16px;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}


/* Tarjetas */

.card,
.tarjeta {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.015), transparent 55%), var(--panel);
    box-shadow: var(--sombra-suave);
}

.card-encabezado,
.radio-cabecera,
.wan-cabecera,
.zona-cabecera,
.router-card-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.card-encabezado {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde);
}

.panel-doble {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: 22px;
}

.panel-doble > .card {
    min-width: 0;
}


/* Resumen */

.dashboard-grid,
.diagnostico-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin: 0 0 22px;
}

.dashboard-card {
    display: flex;
    min-width: 0;
    padding: 19px;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    box-shadow: var(--sombra-suave);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    border-color: var(--borde-fuerte);
}

/* Tarjeta que es enlace: el texto conserva sus colores normales
   (si no, todo se pintaría del verde de los enlaces). */
a.dashboard-card,
a.dashboard-card:hover {
    color: inherit;
}

a.dashboard-card:hover .enlace-tarjeta {
    text-decoration: underline;
}

.dashboard-icono {
    display: grid;
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.25);
    border-radius: 11px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 800;
}

.dashboard-titulo {
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-numero {
    margin: 1px 0;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-descripcion {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-advertencia .dashboard-icono {
    border-color: rgba(247, 184, 75, 0.28);
    background: var(--advertencia-fondo);
    color: var(--advertencia);
}

.dashboard-peligro .dashboard-icono {
    border-color: rgba(255, 101, 119, 0.28);
    background: var(--peligro-fondo);
    color: var(--peligro);
}


/* Estados y alertas */

.estado-badge,
.estado-enlace {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 9px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.estado-online,
.estado-bueno,
.estado-activo,
.router-online,
.estado-normal {
    color: var(--correcto);
}

.estado-online,
.estado-bueno {
    background: var(--correcto-fondo);
}

.estado-offline,
.estado-critico,
.estado-suspendido,
.estado-vencido,
.router-offline {
    color: var(--peligro);
}

.estado-offline,
.estado-critico {
    background: var(--peligro-fondo);
}

.estado-advertencia,
.estado-degradado {
    color: var(--advertencia);
    background: var(--advertencia-fondo);
}

.estado-neutro,
.estado-baja,
.router-desconocido {
    color: var(--neutro);
    background: var(--neutro-fondo);
}

.estado-cortesia {
    color: var(--violeta);
    background: var(--violeta-fondo);
}

.tipo-instalacion {
    color: var(--primario);
    background: var(--primario-fondo);
}

.tipo-reparacion {
    color: var(--violeta);
    background: var(--violeta-fondo);
}

.tipo-mantenimiento {
    color: var(--azul);
    background: var(--azul-fondo);
}

.tipo-retiro {
    color: var(--neutro);
    background: var(--neutro-fondo);
}

.tipo-otro {
    color: var(--neutro);
    background: var(--neutro-fondo);
}

.tipo-infraestructura {
    color: var(--advertencia);
    background: var(--advertencia-fondo);
}

.estado-activo,
.estado-suspendido,
.estado-vencido,
.estado-baja,
.router-online,
.router-offline,
.router-desconocido,
.estado-normal {
    font-weight: 750;
}

.alerta,
.flash,
.mensaje-flash {
    padding: 13px 15px;
    border: 1px solid rgba(24, 211, 158, 0.36);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
    color: var(--texto);
}

.alerta {
    margin: 14px 0;
}

.alerta p {
    margin: 6px 0 0;
    color: inherit;
}

.alerta.critica {
    border-color: rgba(255, 101, 119, 0.42);
    background: var(--peligro-fondo);
    color: #ff9aa6;
}

.alerta.advertencia {
    border-color: rgba(247, 184, 75, 0.4);
    background: var(--advertencia-fondo);
    color: #ffd48b;
}

.alerta.correcta {
    border-color: rgba(45, 212, 119, 0.38);
    background: var(--correcto-fondo);
    color: #7ae6a8;
}

.alerta-compacta {
    margin-bottom: 0;
    padding: 9px 11px;
    font-size: 0.78rem;
}

.mensajes-flash {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.mensaje-flash {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #82eab0;
}

.mensaje-flash > span {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(45, 212, 119, 0.18);
    font-size: 0.75rem;
    font-weight: 800;
}

.mensaje-flash-error {
    border-color: rgba(255, 101, 119, 0.45);
    background: var(--peligro-fondo);
    color: #ff9aa6;
}

.mensaje-flash-error > span {
    background: rgba(255, 101, 119, 0.22);
}

.mensaje-flash-aviso {
    border-color: rgba(247, 184, 75, 0.45);
    background: var(--advertencia-fondo);
    color: #ffd48a;
}

.mensaje-flash-aviso > span {
    background: rgba(247, 184, 75, 0.22);
}

.detalle-alerta {
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.estado-vacio {
    padding: 22px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: rgba(255, 255, 255, 0.015);
    color: var(--texto-secundario);
    text-align: center;
}


/* Botones */

button,
.boton {
    display: inline-flex;
    min-height: 40px;
    padding: 9px 15px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(24, 211, 158, 0.58);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(24, 211, 158, 0.2), rgba(24, 211, 158, 0.11));
    color: var(--primario-claro);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

button:hover,
.boton:hover {
    transform: translateY(-1px);
    border-color: var(--primario-claro);
    background: rgba(24, 211, 158, 0.24);
    color: #a5f8df;
    text-decoration: none;
}

.boton-secundario {
    border-color: var(--borde-fuerte);
    background: var(--panel-elevado);
    color: var(--texto-secundario);
}

.boton-secundario:hover {
    border-color: #557081;
    background: #172a37;
    color: var(--texto);
}

.boton-peligro {
    border-color: rgba(255, 101, 119, 0.5);
    background: var(--peligro-fondo);
    color: #ff9aa6;
}

.boton-peligro:hover {
    border-color: var(--peligro);
    background: rgba(255, 101, 119, 0.2);
    color: #ffc1c8;
}

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

.acciones form {
    margin: 0;
}

.pie-acciones {
    margin-top: 4px;
}


/* Formularios */

label {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    margin: 4px 0 15px;
    padding: 10px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--fondo-profundo);
    color: var(--texto);
    font: inherit;
}

/* Casillas y botones de opción: el ancho, el relleno y el margen de
   los campos de texto no les aplican. Con width:100% Safari (Mac y
   iPhone) las dejaba de 0 px dentro de una tabla: no se veían ni se
   podían marcar (por ejemplo, «Dar de alta clientes» desde la OLT).
   Las que tienen su propio estilo más abajo lo siguen teniendo. */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--primario);
    vertical-align: middle;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primario);
}

input::placeholder,
textarea::placeholder {
    color: var(--texto-tenue);
}


/* Información del equipo */

.recursos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.recurso {
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.recurso-cabecera,
.capacidad-datos,
.trafico-total-localidad,
.metricas-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.recurso-cabecera {
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.recurso-cabecera strong {
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
}

.datos-equipo {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--borde);
}

.datos-equipo > div {
    min-width: 0;
    padding: 12px 14px;
    background: var(--panel-suave);
}

.datos-equipo dt {
    margin-bottom: 3px;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.datos-equipo dd {
    overflow: hidden;
    margin: 0;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.81rem;
    text-overflow: ellipsis;
}


/* Tráfico */

.wan-card {
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.wan-card + .wan-card {
    margin-top: 12px;
}

.wan-cabecera strong,
.router-nombre,
.localidad-trafico-nombre {
    overflow-wrap: anywhere;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.trafico-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 15px;
}

.trafico-grid > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo-profundo);
}

.metrica-etiqueta {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.trafico-numero {
    overflow: hidden;
    margin: 4px 0;
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: clamp(1.1rem, 2.6vw, 1.55rem);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trafico-grid-compacto {
    margin-top: 18px;
}

.trafico-total-localidad {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--borde);
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.trafico-total-localidad strong {
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
}


/* Zonas y capacidad */

.localidades-trafico-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.localidad-trafico-card,
.router-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.localidad-trafico-nombre,
.router-nombre {
    color: var(--texto);
    font-size: 0.94rem;
    font-weight: 800;
}

.etiquetas-lista {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 6px;
}

.etiqueta,
.localidad-chip {
    display: inline-flex;
    padding: 4px 8px;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 700;
}

.etiqueta-wan {
    margin-right: 6px;
    border-color: rgba(24, 211, 158, 0.28);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.capacidad-zona {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.capacidad-datos {
    color: var(--texto-secundario);
    font-size: 0.75rem;
}

.capacidad-datos span {
    display: flex;
    flex-direction: column;
}

.capacidad-datos strong {
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
}

.barra-capacidad {
    width: 100%;
    height: 8px;
    margin: 11px 0 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #02080c;
    box-shadow: inset 0 0 0 1px rgba(99, 130, 146, 0.2);
}

.barra-capacidad-uso {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b887, var(--primario-claro));
    box-shadow: 0 0 12px rgba(24, 211, 158, 0.3);
    transition: width 0.4s ease;
}

.barra-capacidad-uso.barra-peligro {
    background: linear-gradient(90deg, #e5485d, var(--peligro));
    box-shadow: 0 0 12px rgba(255, 101, 119, 0.32);
}

.barra-neutra {
    margin-bottom: 0;
}


/* Enlaces físicos */

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

.router-card-cabecera {
    align-items: center;
}

.metricas-linea {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.metricas-linea strong {
    margin-left: 4px;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
}

.router-info {
    margin-top: 14px;
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.router-info p,
.router-resumen p {
    margin: 5px 0;
}

.router-resumen {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.localidad-interfaz {
    margin: 7px 0 12px;
    color: var(--texto-secundario);
    font-size: 0.76rem;
}


/* Enlaces de radio */

.seccion-radio {
    margin: 30px 0 22px;
}

.tarjetas-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 18px;
}

.tarjeta-radio {
    min-width: 0;
    margin-bottom: 0;
}

.radio-cabecera {
    margin-bottom: 16px;
    padding-bottom: 15px;
    align-items: center;
    border-bottom: 1px solid var(--borde);
}

.radio-cabecera h3 {
    overflow-wrap: anywhere;
    margin: 0;
}

.radio-identificacion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 19px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--borde);
}

.radio-identificacion > div {
    min-width: 0;
    padding: 11px 12px;
    background: var(--panel-suave);
}

.radio-identificacion span,
.metrica-card span {
    display: block;
    margin-bottom: 3px;
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.radio-identificacion strong {
    display: block;
    overflow: hidden;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-metricas + .grupo-metricas {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
}

.metricas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.metrica-card {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--panel-suave);
}

.metrica-card strong {
    display: block;
    overflow: hidden;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metrica-card small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.motivo-estado {
    margin: 11px 0 0;
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.utilizacion-radio {
    margin-top: 13px;
}

.tarjeta-acciones {
    margin-top: 18px;
}

.tarjeta canvas {
    width: 100% !important;
    max-height: 360px;
    margin-top: 20px;
}


/* Tablas */

.tabla-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-suave);
    font-size: 0.82rem;
}

.tabla-responsive table {
    min-width: 760px;
}

table th,
table td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    vertical-align: middle;
}

table th {
    background: #0c1922;
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.012);
}

table tbody tr:hover {
    background: rgba(24, 211, 158, 0.04);
}

table tbody tr:last-child td {
    border-bottom: 0;
}

table tbody tr.fila-atenuada {
    color: var(--texto-tenue);
    opacity: 0.6;
}


/* Tablas en pantallas angostas: cada fila se vuelve una
   tarjeta de pares etiqueta/valor, en vez de exigir scroll
   horizontal. La etiqueta sale del atributo data-label, que
   pone tablas-responsivas.js a partir del encabezado real. */

@media (max-width: 900px) {

    .tabla-responsive {
        overflow-x: visible;
        border: none;
    }

    /* Algunas tablas (planes, logs, localidades, muestras...)
       fijan su propio min-width más ancho para pantallas
       grandes; en móvil siempre debe ganar el apilado. */
    .tabla-responsive table {
        min-width: 0 !important;
    }

    .tabla-responsive table,
    .tabla-responsive thead,
    .tabla-responsive tbody,
    .tabla-responsive tr,
    .tabla-responsive td {
        display: block;
        width: 100%;
    }

    .tabla-responsive thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0, 0, 0, 0);
    }

    .tabla-responsive tbody tr {
        margin-bottom: 12px;
        padding: 4px 13px;
        border: 1px solid var(--borde);
        border-radius: var(--radio-pequeno);
        background: var(--panel-suave);
    }

    .tabla-responsive tbody tr:last-child {
        margin-bottom: 0;
    }

    .tabla-responsive td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--borde);
        text-align: right;
        white-space: normal;
    }

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

    .tabla-responsive td[data-label]::before {
        flex: 0 0 auto;
        margin-right: auto;
        color: var(--texto-secundario);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .tabla-responsive td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
    }



    /* Tarjeta compacta: las tablas largas (clientes, tareas,
       historial...) marcan sus celdas con estas clases y la fila
       se acomoda como una tarjeta de tres renglones en vez de
       una lista etiqueta/valor:

           Título                              #id
           meta · meta · meta
           [estado] [estado]              [acción]

       Las celdas sin clase siguen saliendo como etiqueta/valor
       entre el renglón de metas y el de estados. Los saltos de
       renglón los ponen los pseudoelementos ::before y ::after
       de la fila, que en un contenedor flex cuentan como ítems. */

    .tabla-responsive tr.fila-compacta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 10px;
        padding: 12px 14px;
    }

    .tabla-responsive tr.fila-compacta::before,
    .tabla-responsive tr.fila-compacta::after {
        flex: 0 0 100%;
        height: 0;
        content: "";
    }

    .tabla-responsive tr.fila-compacta::before {
        order: -1;
    }

    .tabla-responsive tr.fila-compacta::after {
        order: 5;
    }

    .tabla-responsive tr.fila-compacta td {
        order: 3;
        flex: 0 0 100%;
    }

    .tabla-responsive tr.fila-compacta td.celda-titulo,
    .tabla-responsive tr.fila-compacta td.celda-id,
    .tabla-responsive tr.fila-compacta td.celda-cifra,
    .tabla-responsive tr.fila-compacta td.celda-meta,
    .tabla-responsive tr.fila-compacta td.celda-estado,
    .tabla-responsive tr.fila-compacta td.celda-accion,
    .tabla-responsive tr.fila-compacta td.celda-nota {
        display: flex;
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .tabla-responsive tr.fila-compacta td.celda-titulo::before,
    .tabla-responsive tr.fila-compacta td.celda-id::before,
    .tabla-responsive tr.fila-compacta td.celda-estado::before,
    .tabla-responsive tr.fila-compacta td.celda-accion::before,
    .tabla-responsive tr.fila-compacta td.celda-nota::before {
        content: none;
    }

    .tabla-responsive tr.fila-compacta td.celda-titulo {
        order: -10;
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 4px;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .tabla-responsive tr.fila-compacta td.celda-titulo strong {
        font-weight: inherit;
    }

    /* En la tarjeta el título tiene todo el ancho: no truncar. */
    .tabla-responsive tr.fila-compacta td.celda-titulo .log-cliente {
        max-width: none;
        white-space: normal;
    }

    .tabla-responsive tr.fila-compacta td.celda-id {
        order: -9;
        gap: 0;
        margin-bottom: 4px;
        color: var(--texto-tenue);
        font-size: 0.74rem;
        font-weight: 600;
    }

    .tabla-responsive tr.fila-compacta td.celda-id::before {
        margin-right: 1px;
        content: "#";
    }

    .tabla-responsive tr.fila-compacta td.celda-id .plan-id::before {
        content: none;
    }

    .tabla-responsive tr.fila-compacta td.celda-cifra {
        order: -9;
        gap: 0;
        margin-bottom: 4px;
        margin-left: auto;
        color: var(--primario-claro);
        font-size: 0.95rem;
        font-weight: 750;
        white-space: nowrap;
    }

    .tabla-responsive tr.fila-compacta td.celda-cifra::before {
        content: none;
    }

    .tabla-responsive tr.fila-compacta td.celda-meta {
        order: 0;
        gap: 0;
        margin-bottom: 6px;
        color: var(--texto-secundario);
        font-size: 0.8rem;
    }

    .tabla-responsive tr.fila-compacta td.celda-meta::before {
        content: none;
    }

    /* Separador entre metas: un punto al final de cada una,
       excepto la última (el orden visual de las metas es el del
       DOM, aunque otras celdas se reordenen alrededor). */
    .tabla-responsive tr.fila-compacta td.celda-meta::after {
        margin: 0 2px 0 8px;
        color: var(--texto-tenue);
        content: "·";
    }

    .tabla-responsive tr.fila-compacta td.celda-meta:not(:has(~ td.celda-meta))::after {
        content: none;
    }

    .tabla-responsive tr.fila-compacta td.celda-nota {
        order: 4;
        flex-basis: 100%;
        margin-bottom: 6px;
        color: var(--texto-secundario);
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .tabla-responsive tr.fila-compacta td.celda-estado {
        order: 10;
        gap: 6px;
        margin-top: 4px;
    }

    .tabla-responsive tr.fila-compacta td.celda-accion {
        order: 20;
        margin-top: 4px;
        margin-left: auto;
    }

    .tabla-responsive tr.fila-compacta td:not([class]) {
        margin-bottom: 4px;
    }

    .tabla-responsive tr.fila-compacta td.celda-oculta-movil,
    .tabla-responsive tr.fila-compacta td.celda-vacia {
        display: none;
    }

}

.localidades-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.localidad-chip {
    padding: 7px 11px;
    background: var(--panel-suave);
    color: var(--texto);
    font-size: 0.78rem;
}


/* Compatibilidad con vistas existentes */

.terminal-header {
    margin-bottom: 25px;
}

.terminal-header p {
    margin: 5px 0;
}

.sistema-info {
    margin-top: 25px;
}

.alertas-panel {
    margin: 20px 0;
}


/* Adaptación para pantallas pequeñas */

@media (max-width: 1120px) {
    .app-header-contenido {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 13px 0 10px;
    }

    .menu-principal {
        width: 100%;
        padding-bottom: 3px;
        overflow-x: auto;
    }

    .dashboard-grid,
    .diagnostico-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Lista de MikroTiks */

.mikrotiks-encabezado {
    background:
        radial-gradient(circle at 89% 20%, rgba(255, 101, 119, 0.1), transparent 15rem),
        radial-gradient(circle at 72% 90%, rgba(24, 211, 158, 0.1), transparent 18rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.07), transparent 45%),
        var(--panel);
}

.mikrotiks-listado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    align-items: start;
    gap: 20px;
}

.mikrotik-lista-card {
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(24, 211, 158, 0.025), transparent 42%),
        var(--panel);
}

.mikrotik-lista-card.mikrotik-inactivo {
    background:
        linear-gradient(145deg, rgba(139, 160, 172, 0.035), transparent 42%),
        var(--panel);
}

.mikrotik-card-encabezado {
    display: flex;
    margin: -22px -22px 20px;
    padding: 20px 22px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.012);
}

.mikrotik-titulo-grupo {
    min-width: 0;
}

.mikrotik-id {
    display: block;
    margin-bottom: 5px;
    color: var(--primario);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.mikrotik-titulo-grupo h2 {
    overflow-wrap: anywhere;
}

.mikrotik-datos-grid {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--borde);
}

.mikrotik-datos-grid > div {
    min-width: 0;
    padding: 12px;
    background: var(--panel-suave);
}

.mikrotik-datos-grid dt {
    margin-bottom: 5px;
    color: var(--texto-tenue);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mikrotik-datos-grid dd {
    overflow: hidden;
    margin: 0;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mikrotik-datos-grid code {
    color: var(--primario-claro);
    font: inherit;
}

.localidades-contador {
    color: #b5c8d2;
    white-space: nowrap;
}

.mikrotik-acciones-principales {
    display: grid;
    margin-top: 15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mikrotik-pruebas-panel {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.mikrotik-seccion-titulo {
    display: flex;
    margin-bottom: 13px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mikrotik-seccion-titulo > div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--texto-tenue);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.mikrotik-seccion-titulo h3 {
    margin: 0;
    font-size: 0.92rem;
}

.mikrotik-pruebas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mikrotik-pruebas-grid form {
    min-width: 0;
    margin: 0;
}

.boton-prueba {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    justify-content: flex-start;
    border-color: var(--borde-fuerte);
    background: var(--panel-suave);
    color: var(--texto-secundario);
    font-size: 0.7rem;
    text-align: left;
}

.boton-prueba > span {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.54rem;
    font-weight: 900;
}

.boton-prueba:hover {
    border-color: #557081;
    background: var(--panel-elevado);
    color: var(--texto);
}

.boton-prueba-advertencia > span {
    background: var(--advertencia-fondo);
    color: var(--advertencia);
}

.boton-prueba-correcto > span {
    background: var(--correcto-fondo);
    color: var(--correcto);
}

/* Casilla con explicación (ej. "efectivo pendiente de recoger") */

.campo-casilla {
    display: flex;
    padding: 11px 13px;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    cursor: pointer;
}

.campo-casilla input {
    width: auto;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.campo-casilla > span {
    display: grid;
    gap: 3px;
    font-size: 0.82rem;
    font-weight: 700;
}

.campo-casilla small {
    color: var(--texto-tenue);
    font-size: 0.69rem;
    font-weight: 400;
}


/* Desglose del cobro en "Registrar pago" */

.desglose-pago {
    display: grid;
    gap: 1px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--borde);
    overflow: hidden;
}

.desglose-linea {
    display: flex;
    padding: 13px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--panel-suave);
}

.desglose-linea > span {
    display: grid;
    gap: 2px;
    font-size: 0.82rem;
}

.desglose-linea small {
    color: var(--texto-tenue);
    font-size: 0.69rem;
}

.desglose-linea > strong {
    font-size: 0.95rem;
    white-space: nowrap;
}

.desglose-recargo > strong {
    color: var(--advertencia);
}

.desglose-descuento > strong,
.desglose-descuento .desglose-campo span {
    color: var(--correcto);
}

.desglose-campo {
    display: flex;
    align-items: center;
    gap: 5px;
}

.desglose-campo span {
    color: var(--texto-tenue);
    font-weight: 700;
}

.desglose-campo input {
    width: 130px;
    margin: 0;
    text-align: right;
}

.desglose-total {
    background: var(--panel-elevado);
}

.desglose-total > span {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.desglose-campo-total input {
    border-color: var(--primario);
    color: var(--primario);
    font-size: 1.05rem;
    font-weight: 800;
}

/* Acciones del estado del servicio: una sola fila que se
   acomoda sola, en vez de varios bloques sueltos. */
.acciones-servicio {
    display: flex;
    margin-top: 18px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.acciones-servicio form {
    margin: 0;
}

.acciones-servicio .boton {
    white-space: nowrap;
}

.mikrotik-zona-peligro {
    display: flex;
    margin-top: 20px;
    padding-top: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid rgba(255, 101, 119, 0.2);
}

.mikrotik-zona-peligro strong {
    color: #ff9aa6;
    font-size: 0.78rem;
}

.mikrotik-zona-peligro p {
    margin: 2px 0 0;
    color: var(--texto-tenue);
    font-size: 0.69rem;
}

.mikrotiks-estado-vacio {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.mikrotiks-estado-vacio h2 {
    margin-bottom: 5px;
}

.mikrotiks-estado-vacio p {
    margin: 0 0 15px;
}

@media (max-width: 760px) {
    .mikrotiks-listado-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mikrotik-datos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .mikrotik-card-encabezado {
        margin: -17px -17px 17px;
        padding: 17px;
        flex-direction: column;
    }

    .mikrotik-acciones-principales,
    .mikrotik-pruebas-grid {
        grid-template-columns: 1fr;
    }

    .mikrotik-seccion-titulo,
    .mikrotik-zona-peligro {
        align-items: flex-start;
        flex-direction: column;
    }

    .mikrotik-zona-peligro form,
    .mikrotik-zona-peligro .boton {
        width: 100%;
    }
}


/* Formulario de MikroTik */

.mikrotik-form-encabezado {
    background:
        radial-gradient(circle at 88% 18%, rgba(247, 184, 75, 0.11), transparent 15rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.08), transparent 45%),
        var(--panel);
}

.mikrotik-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.36fr);
    align-items: start;
    gap: 22px;
}

.mikrotik-form-card {
    min-width: 0;
}

.formulario-mikrotik {
    display: grid;
    gap: 0;
}

.formulario-seccion {
    display: grid;
    padding: 4px 0 23px;
    gap: 18px;
}

.formulario-seccion + .formulario-seccion {
    padding-top: 23px;
    border-top: 1px solid var(--borde);
}

.formulario-seccion-encabezado {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.formulario-seccion-icono {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.28);
    border-radius: 9px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 900;
}

.formulario-seccion-encabezado h2 {
    margin-bottom: 4px;
    font-size: 1rem;
}

.formulario-seccion-encabezado p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.75rem;
}

.formulario-mikrotik .campo-formulario > input {
    margin: 0;
}

.formulario-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.filtros-clientes {
    margin-top: 4px;
    padding-top: 15px;
    border-top: 1px solid var(--borde);
}

.formulario-host-puerto {
    grid-template-columns: minmax(0, 1.6fr) minmax(150px, 0.4fr);
}

.campo-ayuda {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
}

/* Ayuda que va suelta después de un input (formularios sin
   .campo-formulario): compensa el margen inferior del campo. */
.campo-ayuda-suelta {
    margin: -9px 0 15px;
    color: var(--texto-secundario);
}

.campo-ayuda-segura {
    color: #8fc9b8;
}

.formulario-acciones {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--borde);
}

.mikrotik-form-ayuda {
    position: sticky;
    top: 96px;
}

.lista-comprobaciones {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 16px;
    list-style: none;
}

.lista-comprobaciones li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lista-comprobaciones li > span {
    display: grid;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--panel-suave);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.65rem;
    font-weight: 850;
}

.lista-comprobaciones strong {
    display: block;
    color: var(--texto);
    font-size: 0.77rem;
}

.lista-comprobaciones p {
    margin: 2px 0 0;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    line-height: 1.45;
}

.aviso-seguridad {
    margin-top: 20px;
    border-color: rgba(24, 211, 158, 0.22);
    background: var(--primario-fondo);
}

@media (max-width: 960px) {
    .mikrotik-form-layout {
        grid-template-columns: 1fr;
    }

    .mikrotik-form-ayuda {
        position: static;
    }
}

@media (max-width: 620px) {
    .formulario-dos-columnas,
    .formulario-host-puerto {
        grid-template-columns: 1fr;
    }

    .formulario-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .formulario-acciones .boton {
        width: 100%;
    }
}


/* Historial de acciones */

.logs-encabezado {
    background:
        radial-gradient(circle at 89% 18%, rgba(61, 139, 255, 0.12), transparent 16rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.07), transparent 45%),
        var(--panel);
}

.logs-panel {
    min-width: 0;
}

.tabla-logs table {
    min-width: 1120px;
}

.tabla-logs tbody tr {
    border-left: 2px solid transparent;
}

.tabla-logs tbody tr:hover {
    border-left-color: var(--primario);
}

.log-fecha {
    display: inline-block;
    color: #a9c0cc;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
    white-space: nowrap;
}

.log-cliente {
    display: block;
    max-width: 180px;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-ip {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: var(--fondo-profundo);
    color: #a9c5d3;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
    white-space: nowrap;
}

.log-accion,
.log-origen {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    white-space: nowrap;
}

.log-accion {
    color: var(--primario-claro);
    background: var(--primario-fondo);
}

.log-origen {
    color: #84b8ff;
    background: rgba(61, 139, 255, 0.09);
}

.log-mikrotik {
    display: inline-flex;
    max-width: 210px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-mikrotik > span {
    display: grid;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.24);
    border-radius: 6px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 900;
}

.log-detalle {
    display: block;
    min-width: 180px;
    max-width: 360px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.logs-estado-vacio {
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.logs-estado-vacio h2 {
    margin-bottom: 5px;
}

.logs-estado-vacio p {
    margin: 0;
}


/* Contenedores estables para gráficas Chart.js */

.grafica-contenedor {
    position: relative;
    width: 100%;
    height: 320px;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
}

.grafica-contenedor-grande {
    height: 380px;
}

.grafica-contenedor canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

@media (max-width: 700px) {
    .grafica-contenedor {
        height: 280px;
    }

    .grafica-contenedor-grande {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .grafica-contenedor,
    .grafica-contenedor-grande {
        height: 260px;
    }
}


/* Historial desplegable de muestras */

.tabla-muestras table {
    min-width: 820px;
}

.historial-desplegable {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.historial-desplegable summary {
    display: flex;
    padding: 13px 15px;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.16s ease;
}

.historial-desplegable summary::-webkit-details-marker {
    display: none;
}

.historial-desplegable summary:hover {
    background: rgba(24, 211, 158, 0.045);
}

.historial-desplegable-icono {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.32);
    border-radius: 8px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    font-weight: 800;
    transition: transform 0.18s ease;
}

.historial-desplegable[open] .historial-desplegable-icono {
    transform: rotate(45deg);
}

.historial-desplegable summary > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.historial-desplegable summary strong {
    font-size: 0.78rem;
}

.historial-desplegable summary small {
    margin-top: 2px;
    color: var(--texto-tenue);
    font-size: 0.68rem;
}

.tabla-muestras-anteriores {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
}


/* Línea de tiempo de incidentes */

.linea-tiempo {
    position: relative;
    display: grid;
    padding-left: 30px;
    gap: 14px;
}

.linea-tiempo::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--borde-fuerte);
    content: "";
}

.incidente-item {
    position: relative;
    min-width: 0;
}

.incidente-marcador {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: -29px;
    width: 16px;
    height: 16px;
    border: 3px solid var(--panel);
    border-radius: 50%;
    background: var(--advertencia);
    box-shadow: 0 0 0 2px rgba(247, 184, 75, 0.25);
}

.incidente-critica .incidente-marcador {
    background: var(--peligro);
    box-shadow: 0 0 0 2px rgba(255, 101, 119, 0.28);
}

.incidente-contenido {
    padding: 15px 16px;
    border: 1px solid var(--borde);
    border-left: 3px solid var(--advertencia);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.incidente-critica .incidente-contenido {
    border-left-color: var(--peligro);
}

.linea-tiempo .incidente-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.linea-tiempo .incidente-cabecera > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.linea-tiempo .incidente-cabecera > div > strong {
    color: var(--texto);
    font-size: 0.84rem;
}

.linea-tiempo .incidente-cabecera time {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.67rem;
    white-space: nowrap;
}

.incidente-contenido > p {
    margin: 9px 0 12px;
    color: var(--texto-secundario);
    font-size: 0.77rem;
}

.incidente-meta {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    gap: 8px 18px;
    border-top: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 0.68rem;
}

.incidente-meta strong {
    color: var(--texto-secundario);
    font-family: "SFMono-Regular", Consolas, monospace;
}

@media (max-width: 600px) {
    .linea-tiempo {
        padding-left: 25px;
    }

    .incidente-marcador {
        left: -24px;
    }

    .linea-tiempo .incidente-cabecera {
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 900px) {
    .panel-doble {
        grid-template-columns: 1fr;
    }

    .metricas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .app-header-contenido,
    .contenido-principal,
    .container {
        width: min(100% - 24px, 1440px);
    }

    .contenido-principal {
        padding-top: 20px;
    }

    .pagina-encabezado {
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .pagina-acciones {
        width: 100%;
    }

    .card,
    .tarjeta {
        padding: 17px;
    }

    .tarjetas-radio-grid,
    .localidades-trafico-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .radio-identificacion {
        grid-template-columns: 1fr;
    }

    .datos-equipo,
    .recursos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dashboard-grid,
    .diagnostico-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-descripcion {
        white-space: normal;
    }

    .trafico-grid,
    .metricas-grid {
        grid-template-columns: 1fr;
    }

    .card-encabezado,
    .radio-cabecera,
    .zona-cabecera,
    .router-card-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagina-acciones .boton,
    .pie-acciones .boton,
    .tarjeta-acciones .boton {
        width: 100%;
    }
}


/* Vista de planes */

.planes-encabezado {
    background:
        radial-gradient(circle at 90% 20%, rgba(61, 139, 255, 0.12), transparent 15rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.08), transparent 45%),
        var(--panel);
}

.planes-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.38fr) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.formulario-plan-card {
    position: sticky;
    top: 96px;
}

.formulario-icono {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.34);
    border-radius: 10px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 800;
}

.formulario-plan {
    display: grid;
    gap: 17px;
}

.campo-formulario {
    min-width: 0;
}

.campo-formulario label {
    display: block;
    margin-bottom: 7px;
    color: var(--texto);
}

.campo-formulario > input,
.campo-con-unidad input {
    min-width: 0;
    margin: 0;
}

.campo-formulario > small {
    display: block;
    margin-top: 6px;
    color: var(--texto-tenue);
    font-size: 0.71rem;
}

.campo-con-unidad {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--fondo-profundo);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-con-unidad:focus-within {
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.12);
}

.campo-con-unidad input {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.campo-con-unidad input:focus {
    border: 0;
    outline: 0;
}

.campo-unidad,
.campo-prefijo {
    display: flex;
    padding: 0 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    color: var(--texto-secundario);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 750;
}

.campo-unidad {
    border-left: 1px solid var(--borde);
}

.campo-precio {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.campo-prefijo {
    border-right: 1px solid var(--borde);
    color: var(--primario-claro);
}

.boton-formulario {
    width: 100%;
    margin-top: 3px;
}

.planes-listado-card {
    min-width: 0;
}

.tabla-planes table {
    min-width: 720px;
}

.plan-id::before {
    content: "#";
}

.plan-id {
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
}

.plan-nombre {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.velocidad-badge {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.velocidad-bajada {
    border-color: rgba(24, 211, 158, 0.24);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.velocidad-subida {
    border-color: rgba(61, 139, 255, 0.25);
    background: rgba(61, 139, 255, 0.1);
    color: #84b8ff;
}

.plan-precio {
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    white-space: nowrap;
}

.estado-vacio-tabla {
    display: flex;
    min-width: 280px;
    padding: 30px 20px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 0;
}

.estado-vacio-tabla p {
    margin: 3px 0 0;
    color: var(--texto-tenue);
}

.estado-vacio-icono {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    background: var(--panel-elevado);
    color: var(--texto-secundario);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 850;
}

@media (max-width: 1050px) {
    .planes-layout {
        grid-template-columns: 1fr;
    }

    .formulario-plan-card {
        position: static;
    }
}


/* Vista de localidades */

.localidades-encabezado {
    background:
        radial-gradient(circle at 90% 18%, rgba(125, 94, 255, 0.13), transparent 15rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.08), transparent 45%),
        var(--panel);
}

.localidades-layout {
    display: grid;
    grid-template-columns: minmax(330px, 0.4fr) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.localidades-layout--solo-lista {
    grid-template-columns: minmax(0, 1fr);
}

.conteo-clientes {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primario);
}

.conteo-desglose {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    white-space: nowrap;
}

a.conteo-clientes:hover {
    color: var(--primario-claro);
    text-decoration: underline;
}

.formulario-localidad-card {
    position: sticky;
    top: 96px;
}

.formulario-localidad {
    display: grid;
    gap: 17px;
}

.formulario-localidad .campo-formulario > input,
.formulario-localidad .campo-formulario > select {
    margin: 0;
}

.campo-con-icono {
    display: grid;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--fondo-profundo);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-con-icono:focus-within {
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.12);
}

.campo-con-icono > span {
    display: flex;
    padding: 0 11px;
    align-items: center;
    border-right: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.025);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.66rem;
    font-weight: 850;
}

.campo-con-icono input {
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.campo-con-icono input:focus {
    border: 0;
    outline: 0;
}

.aviso-formulario {
    display: flex;
    padding: 11px 12px;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid rgba(61, 139, 255, 0.24);
    border-radius: 8px;
    background: rgba(61, 139, 255, 0.07);
}

.aviso-riesgo {
    margin-top: 10px;
    margin-bottom: 15px;
    border-color: rgba(255, 101, 119, 0.32);
    background: var(--peligro-fondo);
}

.aviso-riesgo > span {
    border-color: rgba(255, 101, 119, 0.45);
    color: var(--peligro);
}

.celda-motivo {
    min-width: 260px;
    color: var(--texto-secundario);
}

.aviso-formulario > span {
    display: grid;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid rgba(132, 184, 255, 0.4);
    border-radius: 50%;
    color: #84b8ff;
    font-family: Georgia, serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.aviso-formulario p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    line-height: 1.45;
}

.localidades-listado-card {
    min-width: 0;
}

.tabla-localidades table {
    min-width: 980px;
}

.localidad-id {
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
}

.localidad-nombre {
    display: block;
    max-width: 180px;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mikrotik-asignado {
    display: inline-flex;
    max-width: 220px;
    padding: 5px 8px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(24, 211, 158, 0.22);
    border-radius: 7px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mikrotik-asignado > span {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 5px;
    background: rgba(24, 211, 158, 0.14);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.54rem;
    font-weight: 900;
}

.interfaz-badge {
    display: inline-block;
    max-width: 190px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 7px;
    background: var(--fondo-profundo);
    color: #a9c5d3;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dato-no-configurado {
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-style: italic;
    white-space: nowrap;
}

.formulario-en-linea {
    margin: 0;
}

.boton-tabla {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.7rem;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .localidades-layout {
        grid-template-columns: 1fr;
    }

    .formulario-localidad-card {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Panel de inicio */

.inicio-encabezado {
    background:
        radial-gradient(circle at 88% 25%, rgba(24, 211, 158, 0.12), transparent 14rem),
        linear-gradient(110deg, rgba(24, 211, 158, 0.08), transparent 45%),
        var(--panel);
}

.pagina-subtitulo {
    max-width: 620px;
    margin: 0;
    color: var(--texto-secundario);
}

.panel-alertas-inicio {
    overflow: hidden;
}

.alertas-inicio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.alerta-resumen {
    display: flex;
    min-width: 0;
    margin: 0;
    align-items: center;
    gap: 12px;
}

.alerta-resumen-completa {
    grid-column: 1 / -1;
}

.alerta-icono {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 900;
}

.alerta-resumen div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.alerta-resumen strong {
    color: inherit;
}

.alerta-resumen div span {
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alertas-detalle-lista {
    display: grid;
    margin-top: 13px;
    gap: 9px;
}

.alerta-detalle-item {
    display: flex;
    margin: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.alerta-detalle-item p {
    margin: 3px 0 0;
    color: var(--texto-secundario);
}

.alerta-detalle-item time {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.7rem;
    white-space: nowrap;
}

.dashboard-grid-inicio {
    align-items: stretch;
}

.dashboard-grid-inicio .dashboard-card {
    align-items: flex-start;
}

.dashboard-contenido {
    min-width: 0;
}

.dashboard-correcto .dashboard-icono {
    border-color: rgba(45, 212, 119, 0.28);
    background: var(--correcto-fondo);
    color: var(--correcto);
}

.dashboard-router {
    grid-column: span 2;
}

.dashboard-router .dashboard-contenido {
    width: 100%;
}

.enlace-tarjeta {
    display: inline-flex;
    margin-top: 8px;
    color: var(--primario-claro);
    font-size: 0.75rem;
    font-weight: 750;
}

.router-resumen-inline {
    display: flex;
    flex-wrap: wrap;
    margin-top: 11px;
    gap: 6px;
}

.router-resumen-inline span {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 750;
    white-space: nowrap;
}

.resumen-correcto {
    color: var(--correcto);
    background: var(--correcto-fondo);
}

.resumen-peligro {
    color: var(--peligro);
    background: var(--peligro-fondo);
}

.resumen-neutro {
    color: var(--neutro);
    background: var(--neutro-fondo);
}

.card-contador {
    padding: 5px 9px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.7rem;
    font-weight: 750;
}

.routers-grid-inicio {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.router-card-inicio {
    display: flex;
    min-height: 228px;
    flex-direction: column;
    background:
        linear-gradient(145deg, rgba(24, 211, 158, 0.025), transparent 52%),
        var(--panel-suave);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.router-card-inicio:hover {
    transform: translateY(-2px);
    border-color: var(--borde-fuerte);
}

.router-tipo {
    margin-bottom: 4px;
    color: var(--texto-tenue);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.router-card-inicio .router-nombre a {
    color: var(--texto);
}

.router-card-inicio .router-nombre a:hover {
    color: var(--primario-claro);
}

.router-datos {
    display: grid;
    margin: 17px 0 0;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 0.55fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--borde);
}

.router-datos > div {
    min-width: 0;
    padding: 10px 11px;
    background: var(--fondo-profundo);
}

.router-datos .router-ultima-revision {
    grid-column: 1 / -1;
}

.router-datos dt {
    margin-bottom: 3px;
    color: var(--texto-tenue);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.router-datos dd {
    overflow: hidden;
    margin: 0;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.router-card-inicio .tarjeta-acciones {
    margin-top: auto;
    padding-top: 16px;
}

.sistema-panel {
    margin-top: 22px;
}

.sistema-estados-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sistema-estado {
    display: flex;
    min-width: 0;
    padding: 15px;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.sistema-estado-icono {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(45, 212, 119, 0.3);
    border-radius: 9px;
    background: var(--correcto-fondo);
    color: var(--correcto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.67rem;
    font-weight: 850;
}

.sistema-estado > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sistema-estado div span {
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sistema-estado strong {
    color: var(--correcto);
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .alertas-inicio-grid {
        grid-template-columns: 1fr;
    }

    .sistema-estados-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .alerta-detalle-item {
        flex-direction: column;
        gap: 7px;
    }

    .alerta-resumen div span {
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .dashboard-router {
        grid-column: span 1;
    }

    .routers-grid-inicio {
        grid-template-columns: minmax(0, 1fr);
    }

    .router-card-inicio .tarjeta-acciones .boton {
        width: 100%;
    }
}
/* ========================================
   Sesión de usuario
======================================== */

.usuario-sesion {
    display: flex;
    flex: 0 0 auto;

    align-items: center;
    gap: 10px;

    padding-left: 14px;

    border-left: 1px solid var(--borde);
}

.usuario-sesion-datos {
    display: flex;
    min-width: 0;

    flex-direction: column;

    line-height: 1.2;
    text-align: right;
}

.usuario-sesion-datos strong {
    max-width: 150px;

    overflow: hidden;

    color: var(--texto);

    font-size: 0.78rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-sesion-datos span {
    margin-top: 3px;

    color: var(--primario);

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.08em;
}

.usuario-sesion .boton {
    min-height: 34px;
    padding: 6px 10px;

    font-size: 0.72rem;
}


@media (max-width: 1120px) {

    .usuario-sesion {
        width: 100%;

        padding-top: 9px;
        padding-left: 0;

        justify-content: space-between;

        border-top: 1px solid var(--borde);
        border-left: 0;
    }

    .usuario-sesion-datos {
        text-align: left;
    }
}


/* Buscador de cliente con autocompletado (formulario de tareas) */

.buscador-cliente {
    position: relative;
}

.buscador-resultados {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -11px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background: var(--fondo-profundo);
    box-shadow: var(--sombra);
}

.buscador-resultado-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--borde);
}

.buscador-resultado-item:last-child {
    border-bottom: 0;
}

.buscador-resultado-item:hover,
.buscador-resultado-item.resaltado {
    background: var(--fondo);
}

.buscador-resultado-item strong {
    display: block;
    color: var(--texto);
}

.buscador-resultado-item small {
    color: var(--texto-secundario);
}

.buscador-sin-resultados {
    padding: 10px 12px;
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

.cliente-info-seleccionado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
    margin: -6px 0 15px;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo-profundo);
}

.cliente-info-seleccionado[hidden] {
    display: none;
}

.cliente-info-seleccionado div span {
    display: block;
    margin-bottom: 3px;
    color: var(--texto-secundario);
    font-size: 0.75rem;
}

.cliente-info-seleccionado div strong {
    color: var(--texto);
}

@media (max-width: 640px) {

    .cliente-info-seleccionado {
        grid-template-columns: 1fr;
    }

}


/* Comprobante de pago */

.comprobante {
    max-width: 520px;
    margin: 0 auto;
}

.comprobante-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.comprobante-datos div span {
    display: block;
    margin-bottom: 3px;
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.comprobante-datos div strong {
    color: var(--texto);
    font-size: 1rem;
}

.comprobante-monto {
    margin: 24px 0;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.comprobante-monto span {
    display: block;
    margin-bottom: 6px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.comprobante-monto strong {
    color: var(--primario);
    font-size: 2rem;
}

@media print {

    .app-header,
    .barra-inferior,
    .menu-fondo,
    .pagina-acciones,
    .mensajes-flash,
    .no-imprimir {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .contenido-principal,
    .contenido-principal * {
        color: #000 !important;
        background: #fff !important;
        border-color: #000 !important;
        box-shadow: none !important;
    }
}


/* Paginación */

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.paginacion-info {
    color: var(--texto-secundario);
    font-size: 0.85rem;
}

.paginacion-controles {
    display: flex;
    gap: 10px;
}


/* ========================================
   Notificaciones
======================================== */

.notificaciones-campana {
    position: relative;
    flex: 0 0 auto;
}

.notificaciones-campana summary {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--borde);
    border-radius: 50%;

    background: var(--panel-suave);
    color: var(--texto);
    font-size: 1.05rem;

    cursor: pointer;
    list-style: none;
    user-select: none;
}

.notificaciones-campana summary::-webkit-details-marker {
    display: none;
}

.notificaciones-campana[open] summary {
    border-color: var(--primario);
}

.notificaciones-contador {
    position: absolute;
    top: -4px;
    right: -4px;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

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

    border-radius: 999px;

    background: var(--peligro);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
}

.notificaciones-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;

    width: 320px;
    max-height: 420px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--borde);
    border-radius: var(--radio);

    background: var(--panel-elevado);
    box-shadow: var(--sombra);
}

.notificaciones-panel-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--borde);
    color: var(--texto);
    font-size: 0.85rem;
}

.enlace-boton {
    border: none;
    background: none;

    color: var(--primario);
    font-size: 0.72rem;
    font-weight: 700;

    cursor: pointer;
}

.enlace-boton:hover {
    color: var(--primario-claro);
    text-decoration: underline;
}

.notificaciones-lista {
    overflow-y: auto;
    list-style: none;
}

.notificacion-item {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 11px 14px;

    border: none;
    border-bottom: 1px solid var(--borde);

    background: none;
    color: var(--texto);
    text-align: left;

    cursor: pointer;
}

.notificacion-item:hover {
    background: var(--primario-fondo);
}

.notificacion-item strong {
    font-size: 0.82rem;
}

.notificacion-item span {
    color: var(--texto-secundario);
    font-size: 0.76rem;
}

.notificaciones-vacio {
    padding: 22px 14px;

    color: var(--texto-secundario);
    font-size: 0.82rem;
    text-align: center;
}

.notificaciones-ver-todas {
    padding: 10px 14px;

    border-top: 1px solid var(--borde);

    color: var(--primario);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.notificaciones-ver-todas:hover {
    background: var(--primario-fondo);
}


/* ========================================
   Ficha de datos (grid de etiqueta/valor)
   — usada en la ficha del cliente y páginas
   de detalle similares.
======================================== */

.ficha-datos {
    display: grid;
    margin: 4px 0 0;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--borde);
}

.ficha-datos > div {
    min-width: 0;
    padding: 12px 14px;
    background: var(--fondo-profundo);
}

.ficha-datos dt {
    margin-bottom: 5px;
    color: var(--texto-tenue);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ficha-datos dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.ficha-datos dd.dato-tenue {
    color: var(--texto-tenue);
    font-weight: 500;
    font-style: italic;
}

.ficha-encabezado-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.velocidad-inline {
    display: inline-flex;
    gap: 6px;
}


/* Etiqueta con icono en dos letras, mismo lenguaje visual
   que .mikrotik-asignado en localidades — reutilizable para
   cualquier "esto está asignado a X" (MikroTik, técnico...). */

.dato-asignado {
    display: inline-flex;
    max-width: 100%;
    padding: 5px 8px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(24, 211, 158, 0.22);
    border-radius: 7px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.76rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dato-asignado > span {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 5px;
    background: rgba(24, 211, 158, 0.14);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 900;
}

@media (max-width: 1120px) {

    .app-header-contenido {
        position: relative;
    }

    .notificaciones-campana {
        position: absolute;
        top: 14px;
        right: 0;
    }

    .notificaciones-panel {
        width: min(320px, calc(100vw - 24px));
    }
}


/* Selector de zonas asignadas a un cobrador */

.lista-localidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.lista-localidades .campo-casilla {
    padding: 9px 11px;
    align-items: center;
}

.lista-localidades .campo-casilla > span {
    font-size: 0.8rem;
    font-weight: 600;
}


/* Tablet: las tarjetas compactas caben a dos columnas. */

@media (min-width: 641px) and (max-width: 900px) {

    .tabla-responsive tbody:has(tr.fila-compacta) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tabla-responsive tbody:has(tr.fila-compacta) tr {
        margin-bottom: 0;
    }

}


/* ========================================
   Navegación en el celular
======================================== */

/* En escritorio el panel es transparente: el menú y la sesión
   siguen siendo hijos directos de la cabecera. El orden deja la
   campana entre el menú y la sesión, como siempre. */

.menu-panel {
    display: contents;
}

.menu-panel-encabezado,
.menu-fondo,
.barra-inferior {
    display: none;
}

.menu-principal {
    order: 1;
}

.notificaciones-campana {
    order: 2;
}

.usuario-sesion {
    order: 3;
}


@media (max-width: 900px) {

    /* Cabecera de un solo renglón: marca a la izquierda, campana
       a la derecha. */

    .app-header-contenido {
        min-height: 56px;
        padding: 8px 0;
        align-items: center;
        flex-direction: row;
        gap: 12px;
    }

    /* Sin backdrop-filter: con él la cabecera se vuelve el
       contenedor de la hoja del menú (position: fixed) y ésta
       aparecería arriba en vez de abajo. Va por encima de la
       barra inferior para que la hoja y su fondo la tapen. */
    .app-header {
        z-index: 70;
        padding-top: env(safe-area-inset-top);
        background: rgba(5, 13, 19, 0.96);
        backdrop-filter: none;
    }

    .marca-icono {
        width: 36px;
        height: 36px;
    }

    .notificaciones-campana {
        position: relative;
        top: auto;
        right: auto;
    }

    .notificaciones-panel {
        right: 0;
        left: auto;
    }

    /* Hoja inferior con el menú completo. */

    .menu-panel {
        position: fixed;
        z-index: 2;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;
        max-height: calc(100vh - 56px);
        flex-direction: column;
        gap: 14px;

        padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;

        border: 1px solid var(--borde-fuerte);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;

        background: var(--panel-elevado);
        box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.45);

        transform: translateY(105%);
        transition: transform 0.22s ease;
        visibility: hidden;
    }

    body.menu-abierto .menu-panel {
        transform: none;
        visibility: visible;
    }

    .menu-panel-encabezado {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-panel-encabezado strong {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--texto-secundario);
    }

    .menu-panel-cerrar {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        padding: 0;

        border: 1px solid var(--borde);
        border-radius: 50%;

        background: var(--panel-suave);
        color: var(--texto);
        font-size: 0.9rem;
        cursor: pointer;
    }

    .menu-principal {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        overflow: visible;
    }

    .menu-principal a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 10px 14px;

        border: 1px solid var(--borde);
        border-radius: var(--radio-pequeno);

        background: var(--panel-suave);
        font-size: 0.88rem;
        white-space: normal;
    }

    .menu-principal a.activo {
        border-color: rgba(24, 211, 158, 0.55);
    }

    .menu-principal a.activo::after {
        display: none;
    }

    .usuario-sesion {
        width: 100%;
        padding-top: 14px;
        padding-left: 0;
        justify-content: space-between;
        border-top: 1px solid var(--borde);
        border-left: 0;
    }

    .usuario-sesion-datos {
        text-align: left;
    }

    .usuario-sesion-datos strong {
        max-width: none;
        font-size: 0.92rem;
    }

    .usuario-sesion .boton {
        min-height: 42px;
        padding: 8px 16px;
        font-size: 0.82rem;
    }

    .menu-fondo {
        position: fixed;
        z-index: 1;
        inset: 0;
        display: block;
        background: rgba(3, 9, 14, 0.6);
        backdrop-filter: blur(3px);
    }

    /* Barra inferior fija. */

    .barra-inferior {
        position: fixed;
        z-index: 60;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;
        padding-bottom: env(safe-area-inset-bottom);

        border-top: 1px solid rgba(49, 80, 98, 0.72);
        background: rgba(5, 13, 19, 0.94);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(18px);
    }

    .barra-inferior-item {
        display: flex;
        min-width: 0;
        min-height: 58px;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;

        border: 0;
        background: none;
        color: var(--texto-secundario);
        font: inherit;
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .barra-inferior-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .barra-inferior-item.activo,
    .barra-inferior-item[aria-expanded="true"] {
        color: var(--primario-claro);
    }

    .barra-inferior-item.activo svg {
        filter: drop-shadow(0 0 6px rgba(24, 211, 158, 0.45));
    }

    /* Inicio del administrador: las cifras del negocio suben
       por encima del panel de supervisión de red. */

    .contenido-principal.inicio-administrador {
        display: flex;
        flex-direction: column;
    }

    .inicio-administrador .mensajes-flash {
        order: -3;
    }

    .inicio-administrador .inicio-encabezado {
        order: -2;
    }

    .inicio-administrador .dashboard-grid-inicio {
        order: -1;
    }

    /* Y a dos columnas, con la tarjeta compactada, para que las
       nueve cifras se vean de un vistazo. */

    .dashboard-grid-inicio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-grid-inicio .dashboard-card {
        flex-direction: column;
        gap: 8px;
        padding: 14px;
    }

    .dashboard-grid-inicio .dashboard-icono {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 0.6rem;
    }

    .dashboard-grid-inicio .dashboard-titulo {
        font-size: 0.64rem;
    }

    .dashboard-grid-inicio .dashboard-numero {
        font-size: 1.6rem;
    }

    .dashboard-grid-inicio .dashboard-descripcion {
        font-size: 0.74rem;
    }

    /* Botones de un formulario largo: se quedan pegados justo
       arriba de la barra inferior mientras se llena el
       formulario, para no tener que bajar hasta el final. */

    .card .formulario-acciones {
        position: sticky;
        z-index: 5;
        bottom: calc(58px + env(safe-area-inset-bottom));

        flex-direction: row;
        align-items: center;
        margin: 0 -17px -17px;
        padding: 12px 17px;

        border-radius: 0 0 var(--radio) var(--radio);
        background: var(--panel);
        box-shadow: 0 -10px 24px rgba(3, 9, 14, 0.45);
    }

    .card .formulario-acciones .boton,
    .card .formulario-acciones button {
        width: auto;
        flex: 1 1 auto;
    }

    .card .formulario-acciones .boton-secundario,
    .card .formulario-acciones .boton-peligro {
        flex: 0 1 auto;
    }

    /* El contenido no debe quedar tapado por la barra. */

    .contenido-principal {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    /* Safari en iPhone hace zoom al enfocar campos con letra
       menor a 16px. */

    input,
    select,
    textarea {
        font-size: 16px;
    }
}


/* Página "sin conexión" (la sirve el service worker) */

.sin-conexion {
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
}

.sin-conexion .estado-vacio-icono {
    margin: 0 auto 18px;
}

.sin-conexion h1 {
    font-size: 1.6rem;
}

.sin-conexion p {
    color: var(--texto-secundario);
}

.sin-conexion-nota {
    font-size: 0.82rem;
}

.sin-conexion .boton {
    margin-top: 10px;
}


/* Diálogo de confirmación (confirmar.js) */

.dialogo-confirmar {
    width: min(420px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--panel-elevado);
    color: var(--texto);
    box-shadow: var(--sombra);
}

.dialogo-confirmar::backdrop {
    background: rgba(3, 9, 14, 0.65);
    backdrop-filter: blur(3px);
}

.dialogo-confirmar-cuerpo {
    padding: 22px;
}

.dialogo-confirmar-mensaje {
    margin: 8px 0 20px;
    font-size: 0.98rem;
    line-height: 1.5;
}

.dialogo-confirmar-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 900px) {

    /* En el celular sale como hoja pegada abajo, con botones
       grandes al alcance del pulgar. */
    .dialogo-confirmar {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .dialogo-confirmar-acciones {
        flex-direction: column-reverse;
    }

    .dialogo-confirmar-acciones .boton {
        width: 100%;
        min-height: 46px;
    }
}


/* Botón deshabilitado (p. ej. periodo ya cubierto) */

button:disabled,
.boton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}


/* Registrar material dentro de la tarea: va después de la tabla,
   separado con una línea. */

.formulario-material {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
}

.formulario-material .formulario-seccion-encabezado {
    margin-bottom: 14px;
}

.aceptar-intro {
    margin-bottom: 18px;
}

/* --- reactivación en bloque de una zona --- */

.reactivar-zona {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

.reactivar-zona small {
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

/* --- detalle chico dentro de una celda de plan --- */

.plan-detalle {
    display: block;
    margin-top: 2px;
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

/* --- los dos pasos de colas, en el renglón de la localidad --- */

.acciones-colas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.acciones-colas .dato-no-configurado {
    font-size: 0.82rem;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}


/* ========================================
   Guía de uso
======================================== */

.guia-indice ol {
    margin: 10px 0 0;
    padding-left: 20px;
}

.guia-indice li {
    margin-bottom: 6px;
}

.guia-paso .pagina-etiqueta {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin-bottom: 6px;
    border: 1px solid rgba(24, 211, 158, 0.45);
    border-radius: 50%;
    background: var(--primario-fondo);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.guia-paso p {
    color: var(--texto-secundario);
    line-height: 1.6;
}

.guia-paso strong {
    color: var(--texto);
}

.guia-lista,
.guia-pasos {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--texto-secundario);
    line-height: 1.6;
}

.guia-lista li,
.guia-pasos li {
    margin-bottom: 9px;
}

.guia-dudas dt {
    margin-top: 16px;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 700;
}

.guia-dudas dd {
    margin: 5px 0 0;
    color: var(--texto-secundario);
    line-height: 1.6;
}

.guia-paso .aviso-formulario {
    margin-top: 14px;
}


/* Altas desde la OLT */

/* Comunidad a escoger cuando la VLAN es de varias. */
.alta-olt-localidad {
    min-width: 150px;
    margin: 0;
    padding: 7px 10px;
}

.alta-olt-nombre {
    width: 100%;
}

@media (min-width: 900px) {
    .alta-olt-nombre {
        min-width: 17rem;
    }
}


/* Efectivo por recoger: un cobrador por renglón, desplegable */

.caja-cobrador {
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
}

.caja-cobrador-resumen {
    display: flex;
    padding: 16px 22px;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.16s ease;
}

.caja-cobrador-resumen::-webkit-details-marker {
    display: none;
}

.caja-cobrador-resumen:hover {
    background: rgba(24, 211, 158, 0.045);
}

.caja-cobrador-resumen:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: -2px;
}

.caja-cobrador-icono {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.32);
    border-radius: 8px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    font-weight: 800;
    transition: transform 0.18s ease;
}

.caja-cobrador[open] .caja-cobrador-icono {
    transform: rotate(45deg);
}

.caja-cobrador-nombre {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.caja-cobrador-nombre strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caja-cobrador-nombre small,
.caja-comunidad-nombre small,
.caja-marcado small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
    font-weight: 400;
}

.caja-cobrador-total {
    flex: 0 0 auto;
    color: var(--primario);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.caja-cobrador[open] .caja-cobrador-resumen {
    border-bottom: 1px solid var(--borde);
}

.caja-cobrador-detalle {
    padding: 18px 22px 22px;
}

.caja-total .card-encabezado:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.caja-comunidad {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.caja-comunidad-encabezado {
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.16s ease;
}

.caja-comunidad-encabezado::-webkit-details-marker {
    display: none;
}

.caja-comunidad-encabezado:hover {
    background: rgba(24, 211, 158, 0.045);
}

.caja-comunidad-encabezado:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: -2px;
}

.caja-comunidad[open] > .caja-comunidad-encabezado {
    border-bottom: 1px solid var(--borde);
}

.caja-comunidad-encabezado input {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.caja-comunidad-nombre {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--texto);
}

.caja-comunidad-nombre strong {
    font-size: 0.9rem;
}

.caja-comunidad-total {
    flex: 0 0 auto;
    color: var(--texto);
    font-size: 0.94rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.caja-comunidad-flecha {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.caja-comunidad[open] > summary .caja-comunidad-flecha {
    transform: rotate(90deg);
}

.caja-cobrador-pie {
    justify-content: space-between;
}

.caja-marcado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.caja-marcado-total {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {

    .caja-cobrador-resumen {
        padding: 14px 16px;
        gap: 11px;
    }

    .caja-cobrador-detalle {
        padding: 14px 12px 16px;
    }

    .caja-cobrador-total {
        font-size: 1rem;
    }
}

/* En el celular cada pago es una tarjeta: la casilla va al inicio del
   primer renglón, junto al nombre, en vez de ocupar uno propio. */

@media (max-width: 900px) {

    .caja-comunidad .tabla-responsive tr.fila-compacta td.celda-estado {
        order: -11;
        flex: 0 0 auto;
        margin: 0 2px 4px 0;
    }

    .caja-comunidad .tabla-responsive tr.fila-compacta td.celda-estado::before {
        content: none;
    }
}


/* Cambio de equipo */

.cambio-equipo-pasos {
    margin-top: 16px;
}

.cambio-equipo-pasos ol {
    margin: 6px 0;
    padding-left: 18px;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    line-height: 1.55;
}

.cambio-equipo-pasos p {
    font-size: 0.78rem;
}


/* Control de IPs */

.control-ips-resumen dd.dato-alerta {
    color: var(--advertencia);
    font-weight: 800;
}

.control-ips-ayuda {
    display: block;
    margin: -6px 0 14px;
}

.control-ips-pie {
    display: block;
    margin: 14px 0 0;
}

.control-ips-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.control-ips-acciones form {
    margin: 0;
}

.control-ips-marcar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.control-ips-marcar input[type="text"] {
    width: 15rem;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 900px) {

    .control-ips-acciones {
        justify-content: flex-start;
    }

    .tabla-responsive tr.fila-compacta td.celda-accion.control-ips-celda {
        flex: 0 0 100%;
        min-width: 0;
        margin-left: 0;
    }

    .control-ips-acciones {
        flex: 1 1 100%;
        min-width: 0;
    }

    .control-ips-marcar,
    .control-ips-marcar input[type="text"] {
        width: 100%;
        min-width: 0;
    }
}


/* Probar cliente */

.prueba-veredicto {
    display: grid;
    gap: 10px;
}

.prueba-hallazgo {
    display: flex;
    padding: 12px 14px;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.prueba-hallazgo p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.9rem;
    line-height: 1.5;
}

.prueba-principal p {
    color: var(--texto);
    font-size: 1.02rem;
    font-weight: 700;
}

.prueba-foco {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--neutro);
}

.prueba-bueno { border-color: rgba(45, 212, 119, 0.35); background: var(--correcto-fondo); }
.prueba-bueno .prueba-foco { background: var(--correcto); }

.prueba-advertencia { border-color: rgba(247, 184, 75, 0.35); background: var(--advertencia-fondo); }
.prueba-advertencia .prueba-foco { background: var(--advertencia); }

.prueba-critico { border-color: rgba(255, 101, 119, 0.35); background: var(--peligro-fondo); }
.prueba-critico .prueba-foco { background: var(--peligro); }

.prueba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 22px;
}

.prueba-cifra {
    margin: 10px 0 12px;
    color: var(--primario);
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.prueba-cifra small {
    color: var(--texto-tenue);
    font-size: 0.8rem;
    font-weight: 500;
}

.prueba-cifra-mala {
    color: var(--peligro);
}

.prueba-cifra-neutra {
    color: var(--texto-secundario);
}

.prueba-datos {
    display: grid;
    margin: 0;
    gap: 6px;
}

.prueba-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borde);
}

.prueba-datos dt {
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.prueba-datos dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: right;
}

.prueba-cola-otra {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(247, 184, 75, 0.35);
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
    color: var(--texto);
    font-size: 0.86rem;
    line-height: 1.5;
}

.prueba-cola-acciones {
    display: flex;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.prueba-cola-acciones small {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

/* Avisos con ligas a cada cliente (p. ej. los que no tienen cola). */
.mensaje-flash a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prueba-nota {
    margin: 10px 0 0;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    line-height: 1.45;
}


/* Mudanzas de router */

.aviso-formulario-alerta {
    border-color: rgba(247, 184, 75, 0.35);
    background: var(--advertencia-fondo);
}

.aviso-formulario-alerta > span {
    border-color: rgba(247, 184, 75, 0.5);
    color: var(--advertencia);
}

.aviso-formulario + .aviso-formulario {
    margin-top: 10px;
}

.mudanza-resumen dd.dato-alerta {
    color: var(--advertencia);
    font-weight: 800;
}

.mudanza-ayuda {
    display: block;
    margin: 0 0 12px;
    line-height: 1.55;
}

.mudanza-comandos {
    margin: 0 0 14px;
    font-size: 0.82rem;
    line-height: 1.7;
    white-space: pre;
}

.mudanza-texto {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.mudanza-nombre,
.mudanza-plan {
    min-width: 0;
    margin: 0;
}

.mudanza-nombre {
    width: 100%;
    min-width: 14rem;
}

.mudanza-plan {
    width: auto;
    max-width: 14rem;
}

.mudanza-nombre-revisar {
    border-color: rgba(247, 184, 75, 0.6);
}

.mudanza-alerta {
    display: block;
    margin-top: 4px;
    color: var(--advertencia);
}

.mudanza-nota {
    display: block;
    margin-top: 4px;
    color: var(--advertencia);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;
}

.mudanza-celda-nombre {
    min-width: 0;
    width: 100%;
}

.mudanza-tabla td.celda-meta,
.mudanza-tabla .estado-badge {
    white-space: nowrap;
}

.mudanza-editar summary {
    list-style: none;
    cursor: pointer;
}

.mudanza-editar summary::-webkit-details-marker {
    display: none;
}

.mudanza-editar[open] summary {
    margin-bottom: 8px;
}

.mudanza-editar form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
}

.mudanza-editar input,
.mudanza-editar select {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.mudanza-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.mudanza-pie form {
    margin: 0;
}

@media (max-width: 900px) {

    .tabla-responsive tr.fila-compacta td.celda-titulo .mudanza-nombre {
        min-width: 0;
    }

    .mudanza-plan {
        max-width: 100%;
    }

    /* Al abrir "Editar", el renglón de acciones ocupa todo el ancho. */
    .tabla-responsive tr.fila-compacta:has(.mudanza-editar[open]) td.celda-accion {
        flex: 0 0 100%;
        min-width: 0;
        margin-left: 0;
    }

    .mudanza-editar[open],
    .mudanza-editar[open] form,
    .mudanza-editar[open] input,
    .mudanza-editar[open] select {
        width: 100%;
        min-width: 0;
    }
}



/* Tareas: tipo como título, datos faltantes, lista ordenable */

.ficha-datos dd.dato-alerta {
    color: var(--advertencia);
    font-weight: 700;
}

.tipos-tarea {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 4px 0 8px;
}

.tipo-opcion {
    position: relative;
    display: flex;
    min-height: 54px;
    margin: 0;
    padding: 10px 12px;
    align-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
    color: var(--texto-secundario);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tipo-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.tipo-opcion.tipo-instalacion { --tipo: var(--primario); --tipo-fondo: var(--primario-fondo); }
.tipo-opcion.tipo-reparacion { --tipo: var(--violeta); --tipo-fondo: var(--violeta-fondo); }
.tipo-opcion.tipo-mantenimiento { --tipo: var(--azul); --tipo-fondo: var(--azul-fondo); }
.tipo-opcion.tipo-infraestructura { --tipo: var(--advertencia); --tipo-fondo: var(--advertencia-fondo); }
.tipo-opcion.tipo-retiro { --tipo: var(--neutro); --tipo-fondo: var(--neutro-fondo); }

.tipo-opcion:hover {
    border-color: var(--tipo);
}

.tipo-opcion:has(input:checked) {
    border-color: var(--tipo);
    background: var(--tipo-fondo);
    box-shadow: inset 0 0 0 1px var(--tipo);
}

.tipo-opcion:has(input:checked) span {
    color: var(--tipo);
}

.tipo-opcion:has(input:focus-visible) {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}

.tipo-opcion span {
    color: var(--texto);
}

.tarea-descripcion {
    margin-top: 14px;
}

.aviso-faltantes {
    margin: 0 0 14px;
    padding: 12px 14px 2px;
    border: 1px solid rgba(247, 184, 75, 0.38);
    border-radius: 8px;
    background: var(--advertencia-fondo);
}

.aviso-faltantes[hidden],
.campo-formulario[hidden] {
    display: none;
}

.aviso-faltantes p {
    margin: 0 0 10px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    line-height: 1.45;
}

.aviso-faltantes p strong {
    display: block;
    color: var(--advertencia);
}

.tareas-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tareas-pestanas {
    display: flex;
    gap: 6px;
}

.tareas-pestana {
    display: inline-flex;
    padding: 8px 14px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.tareas-pestana span {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--panel-elevado);
    font-size: 0.74rem;
    text-align: center;
}

.tareas-pestana.activa {
    border-color: var(--primario);
    background: var(--primario-fondo);
    color: var(--primario);
}

.tareas-filtro {
    margin: 0;
}

.tareas-filtro select {
    width: auto;
    margin: 0;
}

.tareas-orden {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.tarea-renglon {
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.tarea-asa {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 40px;
    margin: -6px -4px -6px -6px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--texto-tenue);
    cursor: grab;
    touch-action: none;
}

.tarea-asa svg {
    fill: currentColor;
}

.tarea-asa:hover,
.tarea-asa:focus-visible {
    background: var(--panel-elevado);
    color: var(--texto);
}

.tarea-posicion {
    flex: 0 0 auto;
    min-width: 26px;
    color: var(--texto-tenue);
    font-size: 0.86rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tarea-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.tarea-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--texto);
    text-decoration: none;
}

.tarea-titulo:hover strong {
    color: var(--primario-claro);
}

.tarea-datos {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    gap: 4px 14px;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.tarea-lado {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.tarea-mapa {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.tarea-flechas {
    display: inline-flex;
    gap: 4px;
}

.tarea-flechas button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: var(--fondo-profundo);
    color: var(--texto-secundario);
    font-size: 0.7rem;
    cursor: pointer;
}

.tarea-flechas button:hover {
    border-color: var(--primario);
    color: var(--primario);
}

.tarea-renglon:first-child .tarea-subir,
.tarea-renglon:last-child .tarea-bajar {
    visibility: hidden;
}

.tareas-orden.ordenando {
    user-select: none;
}

.tareas-orden.ordenando .tarea-asa {
    cursor: grabbing;
}

.tarea-renglon.arrastrando {
    position: relative;
    z-index: 2;
    border-color: var(--primario);
    background: var(--panel-elevado);
    box-shadow: var(--sombra);
}

.tareas-orden-ayuda {
    display: block;
    margin-top: 12px;
}

.tareas-orden-error {
    color: var(--peligro);
}

@media (max-width: 700px) {

    .tarea-renglon {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .tarea-cuerpo {
        flex-basis: calc(100% - 90px);
    }

    .tarea-lado {
        flex-basis: 100%;
        justify-content: flex-start;
        padding-left: 64px;
    }

    .tarea-flechas {
        margin-left: auto;
    }
}


/* Ubicación de la casa */

.ubicacion-cliente {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.ubicacion-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ubicacion-coordenadas {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.ubicacion-falta {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--advertencia);
    font-size: 0.84rem;
    font-weight: 600;
}

.ubicacion-falta span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(247, 184, 75, 0.5);
    border-radius: 50%;
    font-size: 0.72rem;
}

.ubicacion-editar {
    margin-top: 12px;
}

.ubicacion-editar summary {
    color: var(--primario);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.ubicacion-form {
    display: grid;
    margin-top: 10px;
    gap: 8px;
}

.ubicacion-form input {
    margin: 0;
}

.ubicacion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ubicacion-aviso-error {
    color: var(--advertencia);
}

.ubicacion-falta a {
    margin-left: 6px;
    color: var(--primario);
}

.ubicacion-caja {
    margin: 10px 0 0;
    color: var(--texto-secundario);
    font-size: 0.84rem;
}


/* Mapa de la red */

.contenido-principal.contenido-mapa {
    width: 100%;
    max-width: none;
    padding: 0;
}

.contenido-mapa .mensajes-flash {
    width: min(1440px, calc(100% - 24px));
    margin: 12px auto 0;
}

.mapa-app {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 420px;
    flex-direction: column;
}

.mapa-barra {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    align-items: center;
    gap: 8px 12px;
    border-bottom: 1px solid var(--borde);
    background: var(--panel);
}

.mapa-buscar {
    position: relative;
    flex: 1 1 240px;
    max-width: 420px;
}

.mapa-buscar input {
    margin: 0;
    padding: 8px 12px;
}

.mapa-resultados {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 60vh;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
    box-shadow: var(--sombra);
}

.mapa-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mapa-botones .boton {
    padding: 8px 13px;
    font-size: 0.84rem;
}

.mapa-separador {
    width: 1px;
    height: 26px;
    background: var(--borde-fuerte);
}

.mapa-contador {
    display: inline-block;
    min-width: 22px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--advertencia-fondo);
    color: var(--advertencia);
    font-size: 0.74rem;
    text-align: center;
}

.mapa-capas {
    position: relative;
}

.mapa-capas-panel {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    width: 250px;
    padding: 12px 14px;
    gap: 7px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
    box-shadow: var(--sombra);
}

.mapa-capas-panel[hidden] {
    display: none;
}

.mapa-capas-panel strong {
    margin-top: 4px;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mapa-capas-panel label {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--texto);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.mapa-capas-panel input {
    width: auto;
    margin: 0;
}

.mapa-fondos {
    display: flex;
    gap: 14px;
}

.leyenda {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
}

.leyenda-cliente {
    width: 12px;
    height: 12px;
    border: 1.5px solid #03090e;
    border-radius: 50%;
    background: #2dd477;
}

.leyenda-linea {
    width: 22px;
    height: 0;
    border-top: 4px solid #ff7a45;
    border-radius: 2px;
}

.leyenda-radio {
    border-top: 3px dashed #a184ff;
}

.leyenda-proyectado {
    border-top: 3px dotted #f7b84b;
}

.mapa-cuerpo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.mapa-lienzo {
    position: absolute;
    inset: 0;
}

.mapa-app[data-modo="punto"] .mapa-lienzo,
.mapa-app[data-modo="ruta"] .mapa-lienzo,
.mapa-app[data-modo="casa"] .mapa-lienzo,
.mapa-app[data-modo="mover"] .mapa-lienzo {
    cursor: crosshair;
}

.mapa-aviso {
    position: absolute;
    z-index: 1100;
    top: 12px;
    left: 50%;
    max-width: min(520px, calc(100% - 24px));
    padding: 9px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
    box-shadow: var(--sombra);
    color: var(--texto);
    font-size: 0.85rem;
    transform: translateX(-50%);
}

.mapa-aviso[hidden] {
    display: none;
}

.mapa-aviso-ok {
    border-color: rgba(45, 212, 119, 0.5);
}

.mapa-aviso-error {
    border-color: rgba(247, 184, 75, 0.6);
    color: var(--advertencia);
}

.mapa-panel {
    position: absolute;
    z-index: 1000;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 360px;
    overflow: auto;
    padding: 18px 18px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: rgba(13, 24, 34, 0.97);
    box-shadow: var(--sombra);
}

.mapa-panel[hidden] {
    display: none;
}

.mapa-panel-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo-profundo);
    color: var(--texto-secundario);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.panel-encabezado {
    margin: 0 36px 12px 0;
}

.panel-encabezado h2 {
    margin: 4px 0 0;
    font-size: 1.15rem;
    word-break: break-word;
}

.panel-datos {
    display: grid;
    margin: 0 0 14px;
    gap: 8px;
}

.panel-dato {
    display: grid;
    gap: 2px;
}

.panel-dato dt {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panel-dato dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.9rem;
    white-space: pre-line;
    word-break: break-word;
}

.panel-dato dd.dato-alerta {
    color: var(--advertencia);
    font-weight: 700;
}

.panel-acciones {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0;
    gap: 8px;
}

.panel-acciones .boton {
    padding: 8px 12px;
    font-size: 0.84rem;
}

.panel-seccion {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.panel-seccion h3 {
    margin: 0 0 8px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.panel-seccion select,
.panel-buscador input,
.mapa-panel > div > input[type="search"] {
    margin: 0;
}

.panel-lista {
    display: grid;
    margin: 0 0 10px;
    padding: 0;
    gap: 4px;
    list-style: none;
}

.panel-enlace {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primario);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.panel-formulario {
    display: grid;
    gap: 10px;
}

.panel-campo {
    display: grid;
    margin: 0;
    gap: 4px;
}

.panel-campo[hidden] {
    display: none;
}

.panel-campo > span {
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 700;
}

.panel-campo input,
.panel-campo select,
.panel-campo textarea {
    margin: 0;
}

.panel-indicacion {
    margin: 0 0 8px;
    padding: 9px 11px;
    border-left: 3px solid var(--primario);
    border-radius: 4px;
    background: var(--primario-fondo);
    color: var(--texto);
    font-size: 0.84rem;
    line-height: 1.45;
}

.panel-nota {
    margin: 0 0 8px;
    color: var(--texto-tenue);
    font-size: 0.82rem;
}

.panel-buscador {
    display: grid;
    gap: 6px;
}

.panel-buscador-titulo {
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 700;
}

.panel-resultados {
    display: grid;
    margin-top: 6px;
    gap: 4px;
}

.panel-resultados-largo {
    margin-top: 10px;
}

.panel-resultado {
    display: grid;
    width: 100%;
    padding: 8px 10px;
    justify-items: start;
    gap: 2px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo-profundo);
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.panel-resultado:hover,
.panel-resultado:focus-visible {
    border-color: var(--primario);
}

.panel-resultado strong {
    font-size: 0.88rem;
}

.panel-resultado small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.panel-resultado-otro {
    border-style: dashed;
}

/* Marcadores */

.pin {
    display: grid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    place-items: center;
    border: 2px solid #03090e;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    color: #03090e;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.pin-caja_n1 { border-radius: 6px; background: #ff9f43; }
.pin-caja_n2 { border-radius: 6px; background: #f7d04b; }
.pin-empalme { border-radius: 50%; background: #a184ff; }
.pin-reserva { border-radius: 50%; background: #18d39e; }
.pin-poste { border-width: 2px; background: #8ba0ac; }
.pin-torre { border-radius: 50%; background: #5e9eff; }
.pin-nodo { border-radius: 4px; background: #2dd477; }
.pin-nota { border-radius: 4px 4px 4px 0; background: #ffd166; }

.pin-proyectado {
    border-style: dashed;
    border-color: #e6f0f5;
    opacity: 0.7;
}

.pin-seleccionado {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px rgba(24, 211, 158, 0.55);
    transform: scale(1.15);
}

.pin-temporal {
    border: 3px solid #18d39e;
    background: #ffffff;
    font-size: 1rem;
}

.pin-libres {
    position: absolute;
    top: -9px;
    right: -12px;
    min-width: 18px;
    padding: 1px 4px;
    border: 1px solid #2dd477;
    border-radius: 999px;
    background: #03090e;
    color: #2dd477;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.pin-llena {
    border-color: #ff6577;
    color: #ff6577;
}

.pin-mini {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
    box-shadow: none;
    font-size: 0.58rem;
}

.pin-mini.pin-poste {
    width: 10px;
    height: 10px;
}

.manija {
    display: grid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    place-items: center;
    border: 2px solid #03090e;
    border-radius: 4px;
    background: #ffffff;
    cursor: move;
}

.manija-medio {
    border-radius: 50%;
    opacity: 0.75;
    color: #03090e;
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
}

/* Leaflet con los colores del gestor */

.leaflet-container {
    background: #0a141d;
    font-family: inherit;
}

.mapa-app .leaflet-bar a,
.mapa-app .leaflet-bar a:hover {
    border-bottom-color: var(--borde);
    background: var(--panel-elevado);
    color: var(--texto);
}

.mapa-app .leaflet-bar {
    border: 1px solid var(--borde-fuerte);
    box-shadow: var(--sombra-suave);
}

.leaflet-control-attribution {
    background: rgba(3, 9, 14, 0.72) !important;
    color: var(--texto-tenue) !important;
    font-size: 0.66rem;
}

.leaflet-control-attribution a {
    color: var(--texto-secundario) !important;
}

.leaflet-tooltip {
    border: 1px solid var(--borde-fuerte);
    background: var(--panel-elevado);
    box-shadow: var(--sombra-suave);
    color: var(--texto);
    font-weight: 600;
}

.leaflet-tooltip-top::before {
    border-top-color: var(--borde-fuerte);
}

@media (max-width: 900px) {

    .contenido-principal.contenido-mapa {
        padding-bottom: 0;
    }

    .mapa-barra {
        padding: 8px 10px;
    }

    .mapa-buscar {
        flex-basis: 100%;
        max-width: none;
    }

    .mapa-separador {
        display: none;
    }

    /* Los botones en una sola fila que se desliza: el mapa necesita
       el alto. */
    .mapa-botones {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -10px;
        padding: 0 10px 2px;
        scrollbar-width: none;
    }

    .mapa-botones::-webkit-scrollbar {
        display: none;
    }

    .mapa-botones .boton {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .mapa-capas-panel {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .mapa-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 58%;
        border-radius: var(--radio) var(--radio) 0 0;
    }
}


/* =========================================================
   Instalaciones: alta del cliente por el técnico y confirmación
   ========================================================= */

.instalacion-alta-card {
    border-color: var(--primario);
    box-shadow: inset 0 0 0 1px var(--primario-fondo);
}

.instalacion-alta-card p {
    margin: 0 0 14px;
    color: var(--texto-secundario);
}

/* Equipos con IP nueva para elegir el de la casa */

.equipos-nuevos {
    display: grid;
    gap: 8px;
    margin: 10px 0 4px;
}

.equipo-nuevo {
    position: relative;
    display: flex;
    min-height: 58px;
    margin: 0;
    padding: 11px 13px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.equipo-nuevo input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--primario);
}

.equipo-nuevo:hover {
    border-color: var(--primario);
}

.equipo-nuevo:has(input:checked) {
    border-color: var(--primario);
    background: var(--primario-fondo);
    box-shadow: inset 0 0 0 1px var(--primario);
}

.equipo-nuevo-datos {
    display: grid;
    min-width: 0;
    gap: 2px;
    flex: 1 1 auto;
}

.equipo-nuevo-mac {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* La IP en grande: es lo que el técnico compara con el equipo. */
.equipo-nuevo-ip {
    color: var(--primario-claro);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

.equipo-nuevo-etiqueta {
    color: var(--texto-tenue);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.equipo-nuevo-datos small {
    color: var(--texto-tenue);
    overflow-wrap: anywhere;
}

.equipo-nuevo-visto {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    white-space: nowrap;
}

.equipos-otros {
    margin-top: 14px;
}

.equipos-otros summary {
    color: var(--texto-secundario);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.equipos-ajenos summary {
    color: var(--advertencia);
}

.equipos-ajenos-lista {
    display: grid;
    margin: 10px 0 4px;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.equipo-ajeno {
    display: flex;
    padding: 11px 13px;
    align-items: center;
    gap: 12px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.equipo-ajeno .equipo-nuevo-ip {
    color: var(--texto-secundario);
}

.equipo-ajeno-de strong {
    color: var(--texto);
}

.equipo-ajeno .boton {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .equipo-ajeno {
        flex-direction: column;
        align-items: stretch;
    }
}

/* «Revisé el equipo de la casa» antes de dar de alta */

.confirmar-equipo {
    display: flex;
    margin: 4px 0 14px;
    padding: 12px 14px;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--primario);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
    cursor: pointer;
}

.confirmar-equipo input {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--primario);
}

.confirmar-equipo-texto {
    display: grid;
    gap: 6px;
    line-height: 1.5;
}

.confirmar-equipo code {
    font-weight: 800;
}

.confirmar-equipo-ip {
    color: var(--primario-claro);
    font-size: 1.1rem;
}

.confirmar-equipo small {
    color: var(--texto-tenue);
}

/* Confirmación de administración */

.instalacion-confirmar {
    border-color: var(--advertencia);
}

.instalacion-confirmar.instalacion-vencida {
    border-color: var(--peligro);
    box-shadow: inset 0 0 0 1px var(--peligro-fondo);
}

.instalacion-confirmar .pagina-subtitulo {
    margin: 0 0 14px;
}

.instalacion-confirmada {
    display: flex;
    margin: 0;
    align-items: baseline;
    gap: 8px;
    color: var(--texto-secundario);
}

.instalacion-confirmada span {
    color: var(--correcto);
    font-weight: 800;
}

.lista-por-confirmar {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.lista-por-confirmar li {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--borde);
    border-left: 3px solid var(--advertencia);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.lista-por-confirmar li.por-confirmar-vencida {
    border-left-color: var(--peligro);
}

.lista-por-confirmar a {
    display: grid;
    min-width: 0;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}

.lista-por-confirmar a span {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.aviso-por-confirmar {
    display: block;
    margin-bottom: 16px;
    line-height: 1.5;
}

.aviso-por-confirmar a {
    margin-left: 4px;
    font-weight: 700;
}

.equipo-nuevo-datos .equipo-nuevo-vlan {
    color: var(--azul);
    font-weight: 700;
}

/* Agregar el teléfono que no se tenía */

.agregar-telefono {
    display: grid;
    margin-top: 14px;
    padding: 12px;
    gap: 8px;
    border: 1px solid rgba(247, 184, 75, 0.35);
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
}

.agregar-telefono label {
    color: var(--texto);
    font-size: 0.85rem;
    font-weight: 700;
}

.agregar-telefono-fila {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.agregar-telefono-fila input {
    min-width: 0;
    flex: 1 1 180px;
}

.agregar-telefono-fila .boton {
    flex: 0 0 auto;
}

.campo-ayuda.dato-alerta {
    color: var(--advertencia);
}

.tarea-datos .dato-alerta {
    color: var(--advertencia);
    font-weight: 700;
}


/* =========================================================
   Tablero de tareas (administración) y garantía
   ========================================================= */

.badge-garantia {
    border-color: rgba(255, 101, 119, 0.45);
    background: var(--peligro-fondo);
    color: var(--peligro);
}

.tablero {
    display: flex;
    margin: 0 0 10px;
    padding: 2px 2px 12px;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.tablero-columna {
    display: flex;
    min-width: 0;
    padding: 14px 12px 12px;
    flex: 0 0 300px;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
}

.tablero-pendientes {
    border-top: 3px solid var(--advertencia);
}

.tablero-cajas {
    border-top: 3px solid var(--azul);
}

.tablero-tecnico {
    border-top: 3px solid var(--primario);
}

.tablero-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tablero-encabezado h2 {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.tablero-contador {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--panel-elevado);
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.tablero-ayuda {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.tablero-agregar {
    color: var(--primario-claro);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.tablero-agregar:hover {
    text-decoration: underline;
}

.tablero-lista {
    display: grid;
    min-height: 44px;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.tablero-vacio {
    margin: -44px 0 0;
    padding: 12px;
    color: var(--texto-tenue);
    font-size: 0.82rem;
    text-align: center;
    pointer-events: none;
}

.tablero-ayuda-general.tablero-error {
    color: var(--peligro);
}

/* Las tareas van juntas por comunidad: encabezado con cuántas son. */
.tarea-grupo {
    display: flex;
    margin-top: 6px;
    padding: 0 2px;
    align-items: center;
    gap: 8px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tarea-grupo:first-child {
    margin-top: 0;
}

.tarea-grupo::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--borde);
}

.tarea-grupo-nombre {
    overflow-wrap: anywhere;
}

.tarea-grupo-cuenta {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--panel-elevado);
    color: var(--texto);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-align: center;
}

/* En la lista ya lo dice el encabezado; al arrastrarla sí se ve. */
.tablero-lista .tarjeta-comunidad {
    display: none;
}

.lista-pendientes > li.tarea-grupo {
    padding: 0 2px;
    justify-content: flex-start;
    border: 0 !important;
    background: none;
}

.tarea-tarjeta {
    position: relative;
    display: flex;
    padding: 10px 8px 10px 10px;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.tarea-tarjeta .tarea-asa {
    height: 34px;
    margin: -4px -2px -4px -6px;
}

.tarea-tarjeta.tarjeta-garantia {
    border-left: 3px solid var(--peligro);
}

.tarjeta-cuerpo {
    display: grid;
    min-width: 0;
    gap: 6px;
    flex: 1 1 auto;
}

.tarjeta-titulo {
    color: var(--texto);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tarjeta-titulo:hover {
    color: var(--primario-claro);
}

.tarjeta-etiquetas {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tarjeta-etiquetas .estado-badge {
    padding: 2px 7px;
    font-size: 0.64rem;
}

.tarjeta-datos {
    display: flex;
    gap: 4px 10px;
    flex-wrap: wrap;
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.tarjeta-datos a {
    color: var(--texto-secundario);
}

.tarjeta-datos .dato-alerta {
    color: var(--advertencia);
    font-weight: 700;
}

/* Menú ⋮ de la tarjeta */

.tarjeta-menu {
    position: relative;
    flex: 0 0 auto;
}

.tarjeta-menu summary {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 6px;
    color: var(--texto-tenue);
    font-size: 1.1rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.tarjeta-menu summary::-webkit-details-marker {
    display: none;
}

.tarjeta-menu summary:hover,
.tarjeta-menu[open] summary {
    background: var(--panel-elevado);
    color: var(--texto);
}

.tarjeta-menu-panel {
    position: absolute;
    z-index: 30;
    top: 34px;
    right: 0;
    display: grid;
    min-width: 190px;
    padding: 6px;
    gap: 2px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.tarjeta-menu-titulo {
    padding: 4px 8px;
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tarjeta-menu-panel form {
    margin: 0;
}

.tarjeta-menu-panel button,
.tarjeta-menu-panel a {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--texto);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tarjeta-menu-panel button:hover,
.tarjeta-menu-panel a:hover {
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

/* Mientras se arrastra */

.tarea-tarjeta.arrastrando {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    opacity: 0.96;
    transform: rotate(1.2deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.tarjeta-hueco {
    border: 2px dashed var(--primario);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
}

.tablero-columna.tablero-no-acepta {
    opacity: 0.55;
    outline: 2px dashed var(--peligro);
    outline-offset: -2px;
}

body.tablero-moviendo,
body.tablero-moviendo * {
    cursor: grabbing !important;
    user-select: none;
}

/* Pendientes que el técnico puede tomar */

.lista-pendientes {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.lista-pendientes li {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.lista-pendientes form {
    margin: 0;
    flex: 0 0 auto;
}

.lista-pendientes-dato {
    display: grid;
    min-width: 0;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    justify-items: start;
}

.lista-pendientes-dato small {
    color: var(--texto-tenue);
}

.tarea-tomar-card p {
    margin: 0 0 12px;
    color: var(--texto-secundario);
}

.tarea-garantia-accion {
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.aviso-garantia {
    margin-top: 10px;
}

.resumen-meses {
    display: flex;
    gap: 6px;
}

.resumen-trabajos {
    color: var(--primario-claro);
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 720px) {

    .tablero {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
    }

    .tablero-columna {
        flex-basis: min(84vw, 330px);
        scroll-snap-align: start;
    }
}

/* Las notas de la tarea, en dos renglones como máximo */
.tarjeta-descripcion {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

/* Unir localidades */

.unir-localidad .pagina-subtitulo {
    margin: 0 0 14px;
}

.unir-localidad-form {
    flex-wrap: wrap;
    gap: 10px;
}

.unir-localidad-form select {
    min-width: 0;
    flex: 1 1 200px;
}

.unir-notas {
    display: grid;
    margin: 16px 0;
    padding-left: 18px;
    gap: 6px;
    color: var(--texto-secundario);
    font-size: 0.88rem;
}

.unir-notas .dato-alerta {
    color: var(--advertencia);
}


/* =========================================================
   Pago registrado / confirmar segundo pago del mes
   ========================================================= */

.dialogo-pago {
    z-index: 200;
    width: min(440px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--panel-elevado);
    color: var(--texto);
    box-shadow: var(--sombra);
}

.dialogo-pago[open]:not(:modal) {
    position: fixed;
    inset: 0;
    margin: auto;
}

.dialogo-pago::backdrop {
    background: rgba(3, 9, 14, 0.7);
    backdrop-filter: blur(3px);
}

.dialogo-pago-cuerpo {
    display: grid;
    padding: 24px 22px 20px;
    gap: 12px;
    text-align: center;
}

.dialogo-pago-cuerpo h2 {
    margin: 0;
    font-size: 1.25rem;
}

.dialogo-pago-cuerpo p {
    margin: 0;
    color: var(--texto-secundario);
    line-height: 1.5;
}

.dialogo-pago-icono {
    display: grid;
    width: 56px;
    height: 56px;
    margin: 0 auto 2px;
    place-items: center;
    border: 2px solid var(--correcto);
    border-radius: 50%;
    background: var(--correcto-fondo);
    color: var(--correcto);
    font-size: 1.6rem;
    font-weight: 900;
}

.dialogo-pago-icono-aviso {
    border-color: var(--advertencia);
    background: var(--advertencia-fondo);
    color: var(--advertencia);
}

.dialogo-pago-monto {
    color: var(--correcto) !important;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.dialogo-pago-datos {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 1px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--borde);
    text-align: left;
    overflow: hidden;
}

.dialogo-pago-datos div {
    display: flex;
    padding: 9px 12px;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel);
}

.dialogo-pago-datos dt {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 700;
}

.dialogo-pago-datos dd {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: right;
}

.dialogo-pago-datos small {
    color: var(--texto-tenue);
    font-weight: 400;
}

.dialogo-pago-nota.dato-alerta {
    color: var(--advertencia) !important;
}

.dialogo-pago-acciones {
    display: grid;
    margin-top: 4px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dialogo-pago-acciones .boton {
    width: 100%;
    justify-content: center;
}

.dialogo-pago-comprobante {
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

@media (max-width: 480px) {
    .dialogo-pago-acciones {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Catálogo de planes: indicadores, tarjetas y «Nuevo plan»
   ========================================================= */

.planes-indicadores {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.indicador-plan {
    display: grid;
    min-width: 0;
    padding: 16px 18px;
    gap: 2px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--texto);
    text-decoration: none;
}

a.indicador-plan {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.indicador-plan:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.indicador-plan-etiqueta {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.indicador-plan-valor {
    overflow: hidden;
    color: var(--texto);
    font-size: 1.75rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indicador-plan small {
    color: var(--texto-secundario);
    font-size: 0.76rem;
}

.indicador-plan-dinero .indicador-plan-valor {
    color: var(--primario-claro);
}

.indicador-plan-alerta {
    border-color: rgba(247, 184, 75, 0.38);
    background:
        linear-gradient(135deg, var(--advertencia-fondo), transparent 70%),
        var(--panel);
}

.indicador-plan-alerta:hover {
    border-color: var(--advertencia);
}

.indicador-plan-alerta .indicador-plan-valor,
.indicador-plan-alerta small {
    color: var(--advertencia);
}

.indicador-plan-alerta small {
    font-weight: 700;
}

.indicador-plan-ok .indicador-plan-valor {
    color: var(--correcto);
}

.planes-aviso {
    margin-bottom: 22px;
}

.planes-seccion {
    margin-bottom: 26px;
}

.planes-seccion-encabezado {
    display: flex;
    margin-bottom: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.planes-seccion-encabezado h2 {
    margin: 0;
    font-size: 1.05rem;
}

.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}


/* Tarjeta de un plan */

.plan-tarjeta {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 18px 18px 16px;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) + 2px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
        var(--panel);
    box-shadow: var(--sombra-suave);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.plan-tarjeta:hover {
    border-color: var(--borde-fuerte);
}

.plan-tarjeta-destacada {
    border-color: rgba(24, 211, 158, 0.55);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 211, 158, 0.13), transparent 14rem),
        var(--panel);
}

.plan-tarjeta-destacada:hover {
    border-color: var(--primario);
}

.plan-tarjeta-inactiva {
    background: var(--panel-suave);
    box-shadow: none;
}

.plan-tarjeta-inactiva .plan-oferta,
.plan-tarjeta-inactiva .plan-specs {
    opacity: 0.62;
}

.plan-tarjeta-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.plan-tarjeta-titulo {
    display: grid;
    min-width: 0;
    gap: 6px;
    justify-items: start;
}

.plan-tarjeta-titulo h3 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-etiqueta {
    padding: 3px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* La marca del más contratado va montada en la orilla de arriba,
   para que no empuje el contenido y las tarjetas sigan alineadas. */
.plan-etiqueta-destacada {
    position: absolute;
    top: -11px;
    left: 16px;
    border-color: var(--primario);
    background: #0f2b26;
    color: var(--primario-claro);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.plan-tarjeta .tarjeta-menu summary {
    margin: -4px -6px 0 0;
}

.tarjeta-menu-separador {
    height: 1px;
    margin: 4px 2px;
    background: var(--borde);
}

.tarjeta-menu-nota {
    max-width: 220px;
    margin: 0;
    padding: 6px 10px 8px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    line-height: 1.45;
}

.tarjeta-menu-panel .tarjeta-menu-peligro {
    color: #ff9aa6;
}

.tarjeta-menu-panel .tarjeta-menu-peligro:hover {
    background: var(--peligro-fondo);
    color: #ffc1c8;
}

.plan-oferta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 14px;
}

.plan-velocidad {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.plan-velocidad-numero {
    color: var(--texto);
    font-size: 2.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.045em;
    line-height: 0.9;
}

.plan-velocidad-unidad {
    display: grid;
    padding-bottom: 2px;
    color: var(--primario-claro);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
}

.plan-velocidad-unidad small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 600;
}

.plan-precio-grande {
    color: var(--texto);
    font-size: 1.55rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.plan-precio-moneda {
    margin-right: 1px;
    color: var(--texto-secundario);
    font-size: 0.95rem;
    vertical-align: 0.42em;
}

.plan-precio-periodo {
    margin-left: 2px;
    color: var(--texto-tenue);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
}

.plan-specs {
    display: grid;
    margin: 0;
    padding: 2px 0;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.plan-specs:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.plan-specs div {
    display: flex;
    padding: 8px 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.plan-specs div + div {
    border-top: 1px dashed rgba(49, 80, 98, 0.55);
}

.plan-specs dt {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.plan-specs dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.plan-specs dd small {
    margin-left: 3px;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 500;
}

.plan-specs .dato-no-configurado {
    font-weight: 500;
}

.plan-uso {
    display: grid;
    gap: 7px;
}

.plan-uso-cifras {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.plan-uso-cifras strong {
    color: var(--texto);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.plan-uso-barra {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.plan-uso-barra span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primario), #3fb6ff);
}

.plan-uso-nota {
    color: var(--texto-tenue);
    font-size: 0.73rem;
}

.plan-aviso {
    display: flex;
    margin-top: 2px;
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(247, 184, 75, 0.35);
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
    color: var(--advertencia);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.plan-aviso:hover {
    border-color: var(--advertencia);
    text-decoration: none;
}

.plan-aviso > span[aria-hidden] {
    display: grid;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.68rem;
}

.plan-aviso-accion {
    margin-left: auto;
    white-space: nowrap;
}

.plan-tarjeta-acciones {
    display: grid;
    margin-top: auto;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.plan-tarjeta-acciones .boton:only-child {
    grid-column: 1 / -1;
}

.boton-fantasma {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--texto-secundario);
}

.boton-fantasma:hover {
    border-color: var(--borde);
    background: var(--panel-elevado);
    color: var(--texto);
}


/* Planes fuera del catálogo y catálogo vacío */

.planes-inactivos {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: rgba(255, 255, 255, 0.012);
}

.planes-inactivos summary {
    display: flex;
    flex-wrap: wrap;
    padding: 14px 18px;
    align-items: center;
    gap: 6px 10px;
    color: var(--texto);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.planes-inactivos summary::-webkit-details-marker {
    display: none;
}

.planes-inactivos summary::before {
    content: "▸";
    color: var(--texto-tenue);
    transition: transform 0.15s ease;
}

.planes-inactivos[open] summary::before {
    transform: rotate(90deg);
}

.planes-inactivos summary small {
    flex-basis: 100%;
    padding-left: 18px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 500;
}

.planes-inactivos .planes-grid {
    padding: 0 18px 18px;
}

.planes-vacio {
    display: flex;
    flex-wrap: wrap;
    padding: 32px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
}

.planes-vacio p {
    margin: 3px 0 0;
    color: var(--texto-tenue);
}


/* Diálogo «Nuevo plan» */

.dialogo-plan {
    z-index: 200;
    width: min(620px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: calc(var(--radio) + 2px);
    background: var(--panel);
    color: var(--texto);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.dialogo-plan[open] {
    display: flex;
}

.dialogo-plan[open]:not(:modal) {
    position: fixed;
    inset: 0;
    margin: auto;
}

.dialogo-plan::backdrop {
    background: rgba(3, 9, 14, 0.72);
    backdrop-filter: blur(3px);
}

.dialogo-plan-form {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
}

.dialogo-plan-encabezado {
    display: flex;
    padding: 18px 22px 14px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--borde);
}

.dialogo-plan-encabezado h2 {
    margin: 0;
    font-size: 1.3rem;
}

.dialogo-plan-cerrar {
    width: 36px;
    min-height: 36px;
    padding: 0;
    border-color: var(--borde);
    background: transparent;
    color: var(--texto-secundario);
    font-size: 1.4rem;
    line-height: 1;
}

.dialogo-plan-cerrar:hover {
    border-color: var(--borde-fuerte);
    background: var(--panel-elevado);
    color: var(--texto);
}

.dialogo-plan-cuerpo {
    display: grid;
    min-height: 0;
    padding: 18px 22px;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dialogo-plan-cuerpo .mensaje-flash {
    margin: 0;
}

.dialogo-plan-cuerpo .formulario-dos-columnas {
    margin: 0;
}

.plan-vista-previa {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 14px;
    align-items: baseline;
    gap: 4px 14px;
    border: 1px dashed rgba(24, 211, 158, 0.4);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
}

.plan-vista-previa .pagina-etiqueta {
    flex-basis: 100%;
    margin: 0;
}

.plan-vista-previa strong {
    color: var(--texto);
    font-size: 1.25rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.plan-vista-previa small {
    margin-left: 4px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 600;
}

.plan-vista-previa-precio {
    margin-left: auto;
}

.dialogo-plan-acciones {
    display: flex;
    padding: 14px 22px;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--borde);
    background: var(--panel-suave);
}

.dialogo-plan-acciones .boton {
    min-width: 130px;
}


@media (max-width: 1100px) {
    .planes-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .planes-encabezado .pagina-acciones,
    .planes-encabezado .pagina-acciones .boton {
        width: 100%;
    }

    .planes-indicadores {
        gap: 10px;
    }

    .indicador-plan {
        padding: 13px 14px;
    }

    .indicador-plan-valor {
        font-size: 1.35rem;
    }

    .indicador-plan small {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .planes-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .planes-inactivos .planes-grid {
        padding: 0 12px 12px;
    }

    .plan-velocidad-numero {
        font-size: 2.5rem;
    }

    /* En el celular el diálogo ocupa toda la pantalla, con el botón
       de guardar siempre a la mano. */
    .dialogo-plan {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .dialogo-plan-encabezado,
    .dialogo-plan-cuerpo,
    .dialogo-plan-acciones {
        padding-right: 16px;
        padding-left: 16px;
    }

    .dialogo-plan-acciones {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .dialogo-plan-acciones .boton {
        min-width: 0;
        flex: 1;
    }

    .formulario-plan-basico {
        grid-template-columns: 1fr;
    }
}


/* Editar un plan: formulario por secciones y, al lado, la vista
   previa y lo que el plan pesa en el negocio. */

.plan-edicion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 22px;
}

.plan-edicion-form {
    display: grid;
    gap: 22px;
}

.plan-edicion-form > .mensaje-flash {
    margin: 0;
}

.plan-edicion-seccion {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.plan-edicion-seccion + .plan-edicion-seccion {
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.plan-edicion-seccion > h2 {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 800;
}

.plan-edicion-paso {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.45);
    border-radius: 50%;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.78rem;
    font-weight: 850;
}

.plan-edicion-seccion .formulario-dos-columnas {
    margin: 0;
}

.plan-edicion-form .formulario-acciones {
    justify-content: flex-end;
}

.plan-edicion-lateral .card {
    margin: 0;
}

.plan-aviso-precio {
    margin: 0;
    border-color: rgba(247, 184, 75, 0.35);
    background: var(--advertencia-fondo);
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.plan-aviso-precio p {
    font-size: 0.82rem;
}

.plan-aviso-precio > span[aria-hidden] {
    border-color: rgba(247, 184, 75, 0.5);
    color: var(--advertencia);
}

/* Interruptor «Disponible para nuevas altas» */

.interruptor-plan {
    display: flex;
    margin: 0;
    padding: 12px 14px;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    cursor: pointer;
}

.interruptor-plan input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.interruptor-plan-control {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--fondo-profundo);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.interruptor-plan-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--texto-tenue);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.interruptor-plan input:checked + .interruptor-plan-control {
    border-color: var(--primario);
    background: rgba(24, 211, 158, 0.25);
}

.interruptor-plan input:checked + .interruptor-plan-control::after {
    background: var(--primario-claro);
    transform: translateX(18px);
}

.interruptor-plan input:focus-visible + .interruptor-plan-control {
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.25);
}

.interruptor-plan-texto {
    display: grid;
    gap: 2px;
}

.interruptor-plan-texto strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.interruptor-plan-texto small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 500;
}

/* Columna lateral */

.plan-edicion-lateral {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.plan-edicion-bloque > .pagina-etiqueta {
    margin-bottom: 10px;
}

.plan-tarjeta-previa {
    border-style: dashed;
    border-color: rgba(24, 211, 158, 0.4);
}

.plan-edicion-negocio {
    display: grid;
    gap: 10px;
}

.plan-edicion-negocio > .pagina-etiqueta {
    margin-bottom: 0;
}

.plan-edicion-cifras {
    display: grid;
    margin: 0;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.plan-edicion-cifras div {
    display: grid;
    gap: 2px;
}

.plan-edicion-cifras dt {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
}

.plan-edicion-cifras dd {
    margin: 0;
    color: var(--texto);
    font-size: 1.35rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.plan-edicion-negocio .boton {
    width: 100%;
}

.plan-edicion-riesgo {
    padding: 14px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.plan-edicion-riesgo p {
    margin: 0;
}

.plan-edicion-riesgo strong {
    color: var(--texto-secundario);
}

.plan-edicion-riesgo form {
    display: grid;
    margin: 0;
    gap: 10px;
}

.plan-edicion-riesgo:has(form) {
    border-color: rgba(255, 101, 119, 0.3);
}

@media (max-width: 1000px) {
    .plan-edicion {
        grid-template-columns: 1fr;
    }

    /* En pantallas angostas primero la vista previa y las cifras
       (lo que se consulta), luego el formulario y al final eliminar. */
    .plan-edicion-lateral {
        display: contents;
    }

    .plan-edicion-lateral > .plan-edicion-bloque {
        order: -1;
    }

    .plan-edicion-lateral > .plan-edicion-negocio {
        order: 1;
    }

    .plan-edicion-lateral > .plan-edicion-riesgo {
        order: 2;
    }
}


/* =========================================================
   Catálogo de localidades: herramientas, grupos por router y
   tarjetas de comunidad
   ========================================================= */

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* El indicador de enlaces es un botón (filtra la lista): que se vea
   igual que los demás indicadores. */
button.indicador-plan {
    min-height: 0;
    justify-content: stretch;
    justify-items: start;
    font-weight: inherit;
    text-align: left;
    box-shadow: none;
}

button.indicador-plan:hover {
    background:
        linear-gradient(135deg, var(--advertencia-fondo), transparent 70%),
        var(--panel);
}

.indicador-plan-critico {
    border-color: rgba(255, 101, 119, 0.45);
    background:
        linear-gradient(135deg, var(--peligro-fondo), transparent 70%),
        var(--panel);
}

.indicador-plan-critico:hover {
    border-color: var(--peligro);
}

.indicador-plan-critico .indicador-plan-valor,
.indicador-plan-critico small {
    color: var(--peligro);
}

.localidades-herramientas {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    scroll-margin-top: 90px;
}

.localidades-buscar {
    position: relative;
    display: block;
    flex: 1 1 260px;
    max-width: 380px;
    margin: 0;
}

.localidades-buscar input {
    margin: 0;
    padding-left: 36px;
}

.localidades-router {
    flex: 0 1 220px;
    margin: 0;
}

.localidades-router select {
    margin: 0;
}

.localidades-herramientas .filtros-chips {
    margin-left: auto;
}

.localidades-buscar-icono {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--texto-tenue);
    font-size: 1.1rem;
    transform: translateY(-52%);
    pointer-events: none;
}

.filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filtro-chip {
    min-height: 34px;
    padding: 6px 12px;
    border-color: var(--borde);
    border-radius: 999px;
    background: var(--panel);
    box-shadow: none;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 700;
}

.filtro-chip span {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font-size: 0.72rem;
    text-align: center;
}

.filtro-chip:hover {
    transform: none;
    border-color: var(--borde-fuerte);
    background: var(--panel-elevado);
    color: var(--texto);
}

.filtro-chip-activo,
.filtro-chip-activo:hover {
    border-color: rgba(24, 211, 158, 0.55);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.filtro-chip-activo span {
    background: rgba(24, 211, 158, 0.2);
    color: var(--primario-claro);
}

.localidades-sin-resultados {
    margin: 0 0 22px;
    padding: 26px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    color: var(--texto-tenue);
    text-align: center;
}

/* Un grupo por router */

.localidades-grupo {
    margin-bottom: 28px;
}

.localidades-grupo-encabezado {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    border-bottom: 1px solid var(--borde);
}

.localidades-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.localidades-grupo-titulo h2 {
    margin: 0;
    font-size: 1.05rem;
}

.localidades-grupo-icono {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.35);
    border-radius: 8px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 900;
}

.localidades-grupo-icono-vacio {
    border-color: var(--borde-fuerte);
    background: var(--panel-elevado);
    color: var(--texto-tenue);
}

.localidades-grupo-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.localidades-grupo-resumen span + span::before {
    content: "·";
    margin-right: 14px;
    color: var(--borde-fuerte);
}

.localidades-grupo-resumen a {
    color: var(--texto-secundario);
    font-weight: 700;
}

.localidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.localidades-inactivas .localidades-grid {
    padding: 0 18px 18px;
}

/* Tarjeta de una comunidad */

.localidad-tarjeta {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 18px 18px 16px;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) + 2px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
        var(--panel);
    box-shadow: var(--sombra-suave);
    transition: border-color 0.15s ease;
}

.localidad-tarjeta:hover {
    border-color: var(--borde-fuerte);
}

/* Una franja de color arriba dice de un vistazo cómo va el enlace. */
.localidad-tarjeta::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 18px;
    left: 18px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: transparent;
}

.localidad-tarjeta:has(.localidad-enlace-holgado)::before {
    background: var(--correcto);
}

.localidad-tarjeta:has(.localidad-enlace-ajustado)::before {
    background: var(--advertencia);
}

.localidad-tarjeta:has(.localidad-enlace-rebasado)::before {
    background: var(--peligro);
}

.localidad-tarjeta-inactiva {
    background: var(--panel-suave);
    box-shadow: none;
}

.localidad-tarjeta-inactiva > *:not(.localidad-tarjeta-encabezado):not(.localidad-tarjeta-acciones) {
    opacity: 0.6;
}

.localidad-tarjeta-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.localidad-tarjeta-titulo {
    display: grid;
    min-width: 0;
    gap: 7px;
    justify-items: start;
}

.localidad-tarjeta-titulo h3 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.localidad-red {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.localidad-red .interfaz-badge {
    padding: 3px 7px;
    font-size: 0.66rem;
}

.localidad-subred {
    padding: 3px 7px;
    border: 1px dashed var(--borde);
    border-radius: 7px;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.66rem;
}

.localidad-tarjeta .tarjeta-menu summary {
    margin: -4px -6px 0 0;
}

.localidad-cifras {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 14px;
}

.localidad-cifras-dinero {
    justify-content: flex-end;
    padding-top: 6px;
}

.localidad-cifras > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.localidad-cifras .conteo-clientes {
    display: inline;
    color: var(--texto);
    font-size: 1.6rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

.localidad-cifras a.conteo-clientes:hover {
    color: var(--primario-claro);
    text-decoration: none;
}

.localidad-cifras .conteo-desglose {
    display: block;
    flex-basis: 100%;
    margin: 0;
    color: var(--texto-tenue);
}

.localidad-cifras-dinero strong {
    color: var(--texto);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.localidad-enlace {
    display: grid;
    padding: 11px 12px;
    gap: 6px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.localidad-enlace-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 700;
}

.localidad-enlace .estado-badge {
    white-space: nowrap;
}

.localidad-enlace small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
    line-height: 1.45;
}

.localidad-enlace small a {
    color: var(--primario-claro);
}

.localidad-enlace .dato-alerta {
    color: var(--advertencia);
}

.localidad-uso-barra span {
    background: var(--correcto);
}

.localidad-enlace-ajustado .localidad-uso-barra span {
    background: var(--advertencia);
}

.localidad-enlace-rebasado .localidad-uso-barra span {
    background: var(--peligro);
}

.localidad-enlace-rebasado {
    border-color: rgba(255, 101, 119, 0.3);
}

.localidad-enlace-ajustado {
    border-color: rgba(247, 184, 75, 0.3);
}

.localidad-precios {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    overflow: hidden;
}

.localidad-precios div {
    display: grid;
    min-width: 0;
    padding: 8px 10px;
    gap: 1px;
}

.localidad-precios div + div {
    border-left: 1px solid var(--borde);
}

.localidad-precios dt {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 700;
}

.localidad-precios dd {
    margin: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.localidad-tarjeta-acciones {
    display: flex;
    margin-top: auto;
    align-items: center;
    gap: 8px;
}

.localidad-tarjeta-acciones > .boton {
    flex: 1 1 0;
}

.localidad-colas {
    flex: 1 1 0;
}

.localidad-colas > summary.boton {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 40px;
    margin: 0;
    font-size: 0.82rem;
}

.localidad-colas[open] > summary.boton {
    border-color: var(--borde);
    background: var(--panel-elevado);
    color: var(--texto);
}

.localidad-colas .tarjeta-menu-panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
    width: min(300px, calc(100vw - 48px));
}

.localidad-colas .tarjeta-menu-panel a,
.localidad-colas .tarjeta-menu-panel button {
    display: grid;
    gap: 2px;
}

.localidad-colas .tarjeta-menu-panel strong {
    color: var(--texto);
    font-size: 0.84rem;
}

.localidad-colas .tarjeta-menu-panel small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}

.localidad-colas .tarjeta-menu-nota {
    max-width: none;
}

.localidad-colas .tarjeta-menu-nota strong {
    color: var(--texto-secundario);
}

.localidad-tarjeta-tecnico .localidad-precios {
    margin-top: auto;
}

/* Diálogo «Nueva localidad» */

.localidad-ayuda-vlan {
    margin-top: -8px;
}

.localidad-campos-precio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.campo-precio-corto {
    grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 640px) {
    .localidades-buscar {
        max-width: none;
    }

    .localidades-router {
        flex: 1 1 100%;
    }

    .localidades-herramientas .filtros-chips {
        margin-left: 0;
    }

    .filtros-chips {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filtro-chip {
        flex: 0 0 auto;
    }

    .localidades-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .localidades-grupo-resumen span + span::before {
        margin-right: 8px;
    }

    .localidades-grupo-resumen {
        gap: 4px 8px;
    }

    .localidades-inactivas .localidades-grid {
        padding: 0 12px 12px;
    }

    .localidad-campos-precio {
        grid-template-columns: 1fr 1fr;
    }

    .localidad-campos-precio .campo-formulario:last-child {
        grid-column: 1 / -1;
    }
}


/* Editar una localidad: misma estructura que editar un plan, con
   el estado de la comunidad, su queue padre y las colas al lado. */

.localidad-edicion .plan-edicion-lateral {
    position: static;
}

.plan-edicion-explicacion {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.84rem;
    line-height: 1.5;
}

.localidad-ayuda-capacidad {
    margin-top: -6px;
}

.localidad-resumen .localidad-enlace {
    background: var(--fondo-profundo);
}

.plan-edicion-cifras dd a {
    color: var(--texto);
    text-decoration: none;
}

.plan-edicion-cifras dd a:hover {
    color: var(--primario-claro);
}

.localidad-padre,
.unir-localidad {
    display: grid;
    gap: 12px;
}

.localidad-padre > .pagina-etiqueta,
.unir-localidad > .pagina-etiqueta {
    margin: 0;
}

.localidad-bloque-titulo {
    margin: -6px 0 0;
    font-size: 1rem;
}

.localidad-requisitos {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.localidad-requisitos li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texto);
    font-size: 0.84rem;
}

.localidad-requisitos li > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 900;
}

.requisito-listo > span {
    background: var(--correcto-fondo);
    color: var(--correcto);
}

.requisito-falta {
    color: var(--texto-secundario) !important;
}

.requisito-falta > span {
    border: 1px dashed var(--advertencia);
    color: var(--advertencia);
}

.localidad-requisitos small {
    margin-left: auto;
    color: var(--advertencia);
    font-size: 0.72rem;
    font-weight: 700;
}

.localidad-pasos {
    display: grid;
    gap: 8px;
}

.localidad-pasos form {
    margin: 0;
}

.localidad-pasos .boton {
    display: grid;
    width: 100%;
    padding: 9px 12px;
    justify-content: stretch;
    gap: 1px;
    text-align: left;
}

.localidad-pasos .boton strong {
    color: var(--texto);
    font-size: 0.85rem;
}

.localidad-pasos .boton small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 500;
}

.localidad-pasos .boton:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.unir-localidad .unir-localidad-form {
    display: flex;
    margin: 0;
    gap: 8px;
}

.unir-localidad .unir-localidad-form select {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

@media (max-width: 1000px) {
    .localidad-edicion .plan-edicion-lateral > .localidad-resumen {
        order: -1;
    }

    .localidad-edicion .plan-edicion-lateral > .localidad-padre {
        order: 1;
    }

    .localidad-edicion .plan-edicion-lateral > .unir-localidad {
        order: 2;
    }

    .localidad-edicion .plan-edicion-lateral > .plan-edicion-riesgo {
        order: 3;
    }
}

@media (max-width: 640px) {
    .localidad-edicion .localidad-campos-precio {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   Padrón de clientes: pestañas por estado, barra de filtros,
   tabla con avatar y, en el celular, filas como tarjetas
   ========================================================= */

.dato-alerta-rojo {
    color: var(--peligro);
    font-weight: 700;
}

.clientes-herramientas {
    flex: 0 0 auto;
}

.clientes-herramientas > summary.boton {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 9px 15px;
    border-radius: 9px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    font-weight: 750;
}

.clientes-herramientas[open] > summary.boton,
.clientes-herramientas > summary.boton:hover {
    border-color: #557081;
    background: #172a37;
    color: var(--texto);
}

.clientes-herramientas .tarjeta-menu-panel {
    top: calc(100% + 6px);
    width: min(320px, calc(100vw - 32px));
}

.clientes-herramientas .tarjeta-menu-panel a,
.clientes-herramientas .tarjeta-menu-panel button {
    display: grid;
    gap: 2px;
}

.clientes-herramientas .tarjeta-menu-panel strong {
    color: var(--texto);
    font-size: 0.85rem;
}

.clientes-herramientas .tarjeta-menu-panel small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Pestañas por estado */

.clientes-pestanas {
    display: flex;
    margin-bottom: 16px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--borde);
}

.clientes-pestanas::-webkit-scrollbar {
    display: none;
}

.clientes-pestana {
    display: inline-flex;
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.clientes-pestana:hover {
    color: var(--texto);
    text-decoration: none;
}

.clientes-pestana span {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.clientes-pestana-activa {
    border-bottom-color: var(--primario);
    color: var(--texto);
}

.clientes-pestana-activa span {
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.clientes-pestana-al_corriente span {
    color: var(--correcto);
}

.clientes-pestana-pendiente span {
    color: var(--advertencia);
}

.clientes-pestana-vencido span,
.clientes-pestana-suspendido span {
    color: var(--peligro);
}

.clientes-pestana-vencido.clientes-pestana-activa,
.clientes-pestana-suspendido.clientes-pestana-activa {
    border-bottom-color: var(--peligro);
}

.clientes-pestana-pendiente.clientes-pestana-activa {
    border-bottom-color: var(--advertencia);
}

/* Barra de búsqueda y filtros */

.clientes-barra {
    padding: 14px;
}

.clientes-filtros-form {
    display: grid;
    gap: 10px;
}

.clientes-filtros-fila {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) auto;
    align-items: center;
    gap: 10px;
}

.clientes-filtros-fila.filtros-clientes {
    margin: 0;
    padding: 0;
    border: 0;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
}

.clientes-filtros-fila label {
    margin: 0;
}

.clientes-filtros-fila input,
.clientes-filtros-fila select {
    margin: 0;
}

.clientes-buscar {
    position: relative;
    display: block;
}

.clientes-buscar input {
    padding-left: 36px;
}

.clientes-buscar-icono {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--texto-tenue);
    font-size: 1.1rem;
    transform: translateY(-52%);
    pointer-events: none;
}

.clientes-filtro-ip input {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
}

.filtros-activos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filtro-activo {
    display: inline-flex;
    padding: 4px 6px 4px 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(24, 211, 158, 0.4);
    border-radius: 999px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.filtro-activo span {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgba(24, 211, 158, 0.18);
    font-size: 0.9rem;
    line-height: 1;
}

.filtro-activo:hover {
    border-color: var(--primario);
    text-decoration: none;
}

.filtros-activos-limpiar {
    margin-left: 4px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 700;
}

.clientes-barra .reactivar-zona {
    margin-top: 12px;
}

/* Resultados */

.clientes-resultados {
    padding: 0;
    overflow: hidden;
}

.clientes-resultados-encabezado {
    display: flex;
    flex-wrap: wrap;
    padding: 14px 18px;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    border-bottom: 1px solid var(--borde);
}

.clientes-resultados-encabezado strong {
    color: var(--texto);
    font-size: 0.95rem;
}

.clientes-resultados-encabezado span {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.tabla-clientes {
    width: 100%;
    overflow-x: auto;
}

.tabla-clientes table {
    min-width: 860px;
    background: transparent;
}

.tabla-clientes th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 14px;
    background: var(--panel);
}

.tabla-clientes td {
    padding: 10px 14px;
}

.tabla-clientes .columna-cifra,
.tabla-clientes .celda-mensualidad {
    text-align: right;
}

.fila-cliente {
    cursor: pointer;
}

.tabla-clientes tbody tr:nth-child(even) {
    background: transparent;
}

.fila-cliente:hover {
    background: rgba(24, 211, 158, 0.05) !important;
}

.fila-cliente:hover .cliente-nombre {
    color: var(--primario-claro);
}

.fila-cliente-inactiva {
    opacity: 0.55;
}

.tabla-clientes .celda-id {
    width: 1%;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    white-space: nowrap;
}

.tabla-clientes .celda-id::before {
    content: "#";
}

.celda-cliente {
    min-width: 220px;
}

.cliente-celda {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.cliente-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.cliente-avatar-0 { background: rgba(24, 211, 158, 0.16); color: var(--primario-claro); }
.cliente-avatar-1 { background: var(--azul-fondo); color: #8cbcff; }
.cliente-avatar-2 { background: var(--violeta-fondo); color: #bfaaff; }
.cliente-avatar-3 { background: var(--advertencia-fondo); color: #ffd089; }
.cliente-avatar-4 { background: rgba(255, 101, 119, 0.13); color: #ff9aa6; }
.cliente-avatar-5 { background: rgba(139, 160, 172, 0.16); color: #c3d2da; }

.cliente-identidad {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.cliente-nombre {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cliente-nombre:hover {
    text-decoration: none;
}

.cliente-meta-movil {
    display: none;
}

.celda-ip code {
    color: #a9c5d3;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem;
}

.celda-localidad,
.celda-plan {
    color: var(--texto-secundario);
    white-space: nowrap;
}

.celda-mensualidad strong {
    display: block;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.celda-mensualidad small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.servicio-activo {
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.servicio-activo::first-letter {
    color: var(--correcto);
}

.tabla-clientes .celda-accion {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.cliente-abrir {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    color: var(--texto-tenue);
    font-size: 1.3rem;
    text-decoration: none;
}

.fila-cliente:hover .cliente-abrir {
    background: var(--panel-elevado);
    color: var(--texto);
}

.tabla-clientes .celda-accion .boton {
    min-height: 32px;
    padding: 5px 14px;
}

/* Paginación con números */

.clientes-paginacion {
    padding: 12px 18px;
    border-top: 1px solid var(--borde);
}

.paginas-numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pagina-numero,
.pagina-enlace {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    place-items: center;
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

a.pagina-numero:hover,
a.pagina-enlace:hover {
    border-color: var(--borde-fuerte);
    background: var(--panel-elevado);
    color: var(--texto);
    text-decoration: none;
}

.pagina-numero-actual {
    border-color: rgba(24, 211, 158, 0.55);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.pagina-enlace-off {
    opacity: 0.4;
}

.pagina-salto {
    padding: 0 4px;
    color: var(--texto-tenue);
}

/* Sin resultados */

.clientes-vacio {
    display: grid;
    padding: 36px 20px;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.clientes-vacio strong {
    max-width: 420px;
    color: var(--texto);
}

.clientes-vacio p {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

.clientes-vacio-icono {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--panel-elevado);
    color: var(--texto-secundario);
    font-size: 1.2rem;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .clientes-filtros-fila.filtros-clientes {
        grid-template-columns: 1fr 1fr;
    }

    .clientes-filtros-fila.filtros-clientes .clientes-buscar {
        grid-column: 1 / -1;
    }

    .clientes-filtros-fila.filtros-clientes > .boton {
        grid-column: 2;
    }
}

/* En el celular cada fila es una tarjeta:

       (MA) María López                  [Vencido]
            10.4.0.12 · Zacatal · 15 MEGAS
            $350 · día 5                  Activo        */

@media (max-width: 760px) {
    .pagina-encabezado.clientes-encabezado .pagina-acciones {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .clientes-herramientas > summary.boton {
        width: 100%;
    }

    .clientes-herramientas .tarjeta-menu-panel {
        right: auto;
        left: 0;
        width: 100%;
    }

    .clientes-filtros-fila,
    .clientes-filtros-fila.filtros-clientes {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .clientes-filtros-fila .clientes-buscar,
    .clientes-filtros-fila .clientes-filtro:not(.clientes-filtro-ip) {
        grid-column: 1 / -1;
    }

    .clientes-filtros-fila:not(.filtros-clientes) .clientes-buscar {
        grid-column: 1;
    }

    .clientes-filtros-fila.filtros-clientes > .boton {
        grid-column: 2;
    }

    .tabla-clientes {
        overflow: visible;
    }

    .tabla-clientes table,
    .tabla-clientes tbody {
        display: block;
        min-width: 0;
    }

    .tabla-clientes thead {
        display: none;
    }

    .tabla-clientes tr.fila-cliente {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--borde);
    }

    .tabla-clientes tr.fila-cliente:last-child {
        border-bottom: 0;
    }

    .tabla-clientes tr.fila-cliente td {
        display: none;
        padding: 0;
        border: 0;
    }

    .tabla-clientes tr.fila-cliente td.celda-cliente {
        display: block;
        grid-row: 1 / span 2;
        grid-column: 1;
        min-width: 0;
    }

    .cliente-celda {
        align-items: flex-start;
    }

    .tabla-clientes tr.fila-cliente td.celda-pago,
    .tabla-clientes tr.fila-cliente td.celda-servicio,
    .tabla-clientes tr.fila-cliente td.celda-accion {
        display: block;
        grid-column: 2;
        justify-self: end;
        width: auto;
        text-align: right;
    }

    /* En la tarjeta solo se avisa del servicio cuando no está activo,
       y la flecha sobra (se toca la tarjeta entera). */
    .tabla-clientes tr.fila-cliente td.celda-servicio:has(.servicio-ok),
    .tabla-clientes tr.fila-cliente td.celda-accion:not(:has(.boton)) {
        display: none;
    }

    .tabla-clientes tr.fila-cliente td.celda-accion .boton {
        min-height: 34px;
        padding: 6px 16px;
    }

    .cliente-avatar {
        width: 38px;
        height: 38px;
        margin-top: 1px;
    }

    .cliente-nombre {
        font-size: 0.95rem;
        white-space: normal;
    }

    .cliente-meta-movil {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 0;
        color: var(--texto-tenue);
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .cliente-meta-movil span + span::before {
        content: "·";
        margin: 0 6px;
        color: var(--borde-fuerte);
    }

    .cliente-ip-movil {
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.7rem;
    }

    .clientes-paginacion {
        justify-content: center;
    }

    .clientes-paginacion .pagina-enlace {
        flex: 1 1 0;
    }

    .clientes-paginacion .paginas-numeros {
        order: -1;
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   Ficha del cliente: encabezado con lo de todos los días
   (estados, localidad, plan, IP, teléfono y botones), un solo
   cuadro con su cuenta y sus pagos, su ONU, su equipo y su
   domicilio. Lo de vez en cuando va en el menú ⋯.
   ========================================================= */

.ficha-cliente-encabezado {
    align-items: flex-start;
}

.ficha-identidad {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 18px;
}

.ficha-avatar {
    width: 64px;
    height: 64px;
    margin-top: 22px;
    font-size: 1.3rem;
}

.ficha-identidad-texto {
    min-width: 0;
}

.ficha-identidad-texto h1 {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.ficha-volver {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.ficha-volver:hover {
    color: var(--primario-claro);
    text-decoration: none;
}

.ficha-linea {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
    align-items: center;
    gap: 4px 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.ficha-linea span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--borde-fuerte);
}

.ficha-linea a {
    color: var(--primario-claro);
    text-decoration: none;
}

/* Su IP (lo único de red que se ve en la ficha) y su teléfono. */
.ficha-contacto-rapido {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 0;
    align-items: center;
    gap: 8px;
}

.ficha-telefono {
    padding: 3px 9px;
    border: 1px solid rgba(24, 211, 158, 0.35);
    border-radius: 6px;
    color: var(--primario-claro);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ficha-telefono:hover {
    border-color: var(--primario-claro);
    text-decoration: none;
}

.ficha-ip {
    padding: 3px 9px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    background: var(--fondo-profundo);
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    user-select: all;
}

.ficha-acciones {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ficha-acciones > form {
    display: flex;
    margin: 0;
}

.ficha-mas > summary.boton {
    display: inline-flex;
    width: auto;
    min-width: 42px;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--texto-secundario);
    font-size: 1rem;
    font-weight: 800;
}

.ficha-mas .tarjeta-menu-panel {
    top: calc(100% + 6px);
    width: 300px;
}

/* =========================================================
   Menú que en la computadora se abre como lista y en el
   celular como hoja desde abajo (no se sale de la pantalla).
   Tocar fuera (o Esc) lo cierra.
   ========================================================= */

.menu-hoja > summary {
    transform: none !important;
}

.menu-hoja[open] > summary::before {
    content: "";
    position: fixed;
    z-index: 29;
    inset: 0;
    cursor: default;
}

.menu-hoja > .tarjeta-menu-panel {
    z-index: 31;
    max-height: min(640px, calc(100vh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menu-hoja .tarjeta-menu-panel a,
.menu-hoja .tarjeta-menu-panel button {
    display: grid;
    gap: 2px;
}

.menu-hoja .tarjeta-menu-panel strong {
    color: inherit;
    font-size: 0.85rem;
}

.menu-hoja .tarjeta-menu-panel small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 500;
}

.menu-hoja .tarjeta-menu-panel .tarjeta-menu-peligro small {
    color: rgba(255, 154, 166, 0.75);
}

.tarjeta-menu-titulo-peligro {
    color: #ff9aa6;
}

.menu-hoja-titulo {
    display: none;
}

@media (max-width: 700px) {

    .menu-hoja[open] > summary::before {
        z-index: 80;
        background: rgba(3, 9, 14, 0.62);
        backdrop-filter: blur(2px);
    }

    .menu-hoja > .tarjeta-menu-panel,
    .ficha-mas .tarjeta-menu-panel {
        position: fixed;
        z-index: 81;
        top: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        min-width: 0;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        padding: 8px 8px 10px;
        border-radius: 16px;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
    }

    .menu-hoja .tarjeta-menu-panel a,
    .menu-hoja .tarjeta-menu-panel button {
        min-height: 44px;
        padding: 8px 12px;
        align-content: center;
    }

    .menu-hoja .tarjeta-menu-panel strong {
        font-size: 0.95rem;
    }

    .menu-hoja .tarjeta-menu-panel small {
        font-size: 0.78rem;
    }

    .menu-hoja-titulo {
        position: sticky;
        z-index: 1;
        top: -8px;
        display: flex;
        margin: -8px -8px 4px;
        padding: 12px 10px 10px 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid var(--borde);
        background: var(--panel-elevado);
    }

    .menu-hoja-titulo strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-hoja .tarjeta-menu-panel .menu-hoja-cerrar {
        display: grid;
        place-content: center;
        flex: 0 0 auto;
        width: 36px;
        min-height: 36px;
        height: 36px;
        padding: 0;
        place-items: center;
        border-radius: 50%;
        background: var(--panel);
        color: var(--texto-secundario);
        font-size: 0.9rem;
        text-align: center;
    }
}

/* =========================================================
   Cuerpo: a la izquierda lo que se trabaja (cuenta, ONU,
   equipo) y a la derecha el domicilio.
   ========================================================= */

.ficha-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    gap: 22px;
}

.ficha-principal,
.ficha-lateral {
    display: grid;
    min-width: 0;
    gap: 22px;
}

.ficha-principal:empty {
    display: none;
}

.ficha-cuerpo .card {
    margin: 0;
}

.ficha-seccion .card-encabezado {
    margin-bottom: 14px;
    flex-direction: row;
    align-items: center;
}

.ficha-seccion .card-encabezado h2 {
    margin: 0;
}

.ficha-lista {
    display: grid;
    margin: 0;
}

.ficha-lista > div {
    display: flex;
    padding: 9px 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed rgba(49, 80, 98, 0.6);
}

.ficha-lista > div:last-child {
    border-bottom: 0;
}

.ficha-lista dt {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 700;
}

.ficha-lista dd {
    min-width: 0;
    margin: 0;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 650;
    text-align: right;
    overflow-wrap: anywhere;
}

.ficha-lista dd.dato-tenue {
    color: var(--texto-tenue);
    font-style: italic;
    font-weight: 500;
}

.ficha-lista dd a {
    color: var(--primario-claro);
}

.ficha-nota {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

/* Su cuenta */

.ficha-cuenta-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.ficha-cuenta-dato {
    display: grid;
    min-width: 0;
    padding: 12px 14px;
    gap: 1px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.ficha-cuenta-dato > span {
    color: var(--texto-tenue);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ficha-cuenta-dato strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 1.3rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ficha-cuenta-dato small {
    color: var(--texto-secundario);
    font-size: 0.75rem;
}

.ficha-cuenta-pendiente {
    border-color: rgba(247, 184, 75, 0.4);
}

.ficha-cuenta-pendiente strong {
    color: var(--advertencia);
}

.ficha-cuenta-vencido {
    border-color: rgba(255, 101, 119, 0.45);
    background:
        linear-gradient(135deg, var(--peligro-fondo), transparent 70%),
        var(--fondo-profundo);
}

.ficha-cuenta-vencido strong {
    color: var(--peligro);
}

.ficha-cuenta-cortesia strong {
    color: var(--violeta);
}

.ficha-primer-cobro {
    margin: 14px 0 0;
}

.ficha-cuenta > .ficha-nota {
    margin-top: 12px;
}

.ficha-pagos-titulo {
    display: flex;
    margin: 20px 0 4px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ficha-pagos-titulo h3 {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ficha-pagos {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-pago {
    display: grid;
    padding: 10px 0;
    grid-template-areas: "monto detalle acciones";
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    border-bottom: 1px dashed rgba(49, 80, 98, 0.6);
}

.ficha-pagos > .ficha-pago:last-child {
    border-bottom: 0;
}

.ficha-pago-monto {
    display: flex;
    grid-area: monto;
    align-items: baseline;
    gap: 8px;
}

.ficha-pago-monto strong {
    color: var(--texto);
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}

.ficha-pago-monto span {
    white-space: nowrap;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    font-weight: 700;
}

.ficha-pago-detalle {
    grid-area: detalle;
    min-width: 0;
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.ficha-pago-nota {
    color: var(--texto-secundario);
    font-style: italic;
}

.ficha-pago-acciones {
    display: flex;
    grid-area: acciones;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ficha-pago-acciones form {
    margin: 0;
}

.ficha-pago-recoger {
    border-color: rgba(247, 184, 75, 0.55);
    background: rgba(247, 184, 75, 0.12);
    color: var(--advertencia);
}

.ficha-pago-recoger:hover {
    border-color: var(--advertencia);
    background: rgba(247, 184, 75, 0.2);
    color: #ffd58a;
}

.ficha-pago-menu summary {
    width: 32px;
    height: 32px;
}

.ficha-pagos-anteriores {
    margin-top: 2px;
    border-top: 1px dashed rgba(49, 80, 98, 0.6);
}

.ficha-pagos-anteriores > summary {
    padding: 10px 0 4px;
    color: var(--primario-claro);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ficha-pagos-vacio {
    padding: 14px;
}

/* Domicilio */

.ficha-direccion {
    margin: 0;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.45;
}

.ficha-direccion.dato-tenue {
    color: var(--texto-tenue);
    font-style: italic;
    font-weight: 500;
}

.ficha-contacto-extra {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0 0;
    gap: 2px 0;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.ficha-contacto-extra span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--borde-fuerte);
}

.ficha-contacto .ubicacion-cliente {
    margin-top: 14px;
    margin-bottom: 0;
}

/* ONU */

.ficha-onu .ficha-datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ficha-onu-pie {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
    gap: 2px 0;
    color: var(--texto-tenue);
    font-size: 0.75rem;
}

.ficha-onu-pie span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--borde-fuerte);
}

/* Equipo instalado */

.ficha-equipo {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-equipo li {
    display: flex;
    padding: 9px 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed rgba(49, 80, 98, 0.6);
}

.ficha-equipo li:last-child {
    border-bottom: 0;
}

.ficha-equipo li > div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.ficha-equipo strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.ficha-equipo code {
    color: var(--texto-secundario);
    font-size: 0.75rem;
}

.ficha-equipo small {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.75rem;
}

/* Zona delicada (la usa también el detalle de tarea) */

.ficha-riesgo {
    padding: 16px 18px;
    border: 1px solid rgba(255, 101, 119, 0.25);
    border-radius: var(--radio);
}

.ficha-riesgo > .pagina-etiqueta {
    margin: 0;
    color: #ff9aa6;
}

.ficha-riesgo .mikrotik-zona-peligro {
    margin-top: 12px;
    padding-top: 12px;
}

.ficha-riesgo .boton {
    white-space: nowrap;
}

.ficha-seccion > .acciones-servicio:first-of-type {
    margin-top: 4px;
}

.ficha-riesgo .mikrotik-zona-peligro:first-of-type {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 1100px) {
    .ficha-cuerpo {
        grid-template-columns: 1fr;
    }

    /* El técnico va a la casa: el domicilio primero. */
    .ficha-cuerpo-tecnico .ficha-lateral {
        order: -1;
    }
}

@media (max-width: 700px) {
    .ficha-identidad {
        gap: 12px;
    }

    .ficha-avatar {
        width: 48px;
        height: 48px;
        margin-top: 24px;
        font-size: 1rem;
    }

    .ficha-acciones {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    .ficha-acciones > .boton,
    .ficha-acciones > form {
        flex: 1 1 0;
        min-width: 0;
    }

    .ficha-acciones > form > .boton {
        width: 100%;
    }

    .ficha-acciones > :first-child {
        flex-basis: 100%;
    }

    .pagina-acciones.ficha-acciones .boton {
        width: auto;
    }

    .ficha-acciones > form > .boton,
    .ficha-acciones > .boton {
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }

    .ficha-mas {
        flex: 0 0 auto;
    }

    .ficha-mas > summary.boton {
        width: 48px !important;
        height: 100%;
    }

    .ficha-cuenta-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ficha-cuenta-dato {
        padding: 10px 12px;
    }

    /* Tres datos en dos columnas: el último (cuánto debe o cuándo le
       toca) a todo lo ancho. */
    .ficha-cuenta-dato:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .ficha-cuenta-dato strong {
        font-size: 1.12rem;
    }

    .ficha-pago {
        grid-template-areas:
            "monto acciones"
            "detalle detalle";
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ficha-onu .ficha-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ficha-riesgo .mikrotik-zona-peligro {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Los botones de los menús (formularios) alineados igual que los
   enlaces: el estilo general de botón los centra. */
.tarjeta-menu-panel button {
    justify-content: start;
    justify-items: start;
    min-height: 0;
    margin: 0;
    transform: none !important;
}


/* =========================================================
   Avisos del portal dentro de Localidades
   ========================================================= */

.avisos-portal {
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    scroll-margin-top: 90px;
}

.avisos-portal-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.avisos-portal-encabezado h2 {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 10px;
    font-size: 1.02rem;
}

.avisos-portal-encabezado p {
    margin: 2px 0 0;
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.avisos-lista {
    display: grid;
    margin: 14px 0 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.aviso-item {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(247, 184, 75, 0.32);
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
}

.aviso-item-general {
    border-color: rgba(94, 158, 255, 0.32);
    background: var(--azul-fondo);
}

.aviso-item-icono {
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.aviso-item-texto {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
}

.aviso-item-texto strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.aviso-item-texto p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.aviso-item-texto small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.aviso-alcance {
    color: var(--texto-secundario);
    font-weight: 700;
}

.aviso-item form {
    flex: 0 0 auto;
    margin: 0;
}

.avisos-vacio {
    margin: 10px 0 0;
    color: var(--texto-tenue);
    font-size: 0.82rem;
}

.localidad-aviso {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(247, 184, 75, 0.35);
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
    color: var(--texto-secundario);
    font-size: 0.76rem;
    text-decoration: none;
}

.localidad-aviso strong {
    color: var(--advertencia);
}

/* Prórroga de pago de la comunidad */
.localidad-prorroga {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(24, 211, 158, 0.35);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
    color: var(--texto-secundario);
    font-size: 0.76rem;
}

.localidad-prorroga > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

.localidad-prorroga strong {
    color: var(--primario-claro);
}

.localidad-prorroga small {
    color: var(--texto-tenue);
}

.localidad-prorroga form {
    margin: 0;
}

.localidad-prorroga-quitar {
    min-height: 0;
    padding: 3px 9px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--texto-secundario);
    font-size: 0.72rem;
}

.localidad-prorroga-quitar:hover {
    transform: none;
    border-color: var(--peligro);
    color: var(--peligro);
}

.localidad-aviso:hover {
    border-color: var(--advertencia);
    text-decoration: none;
}

.localidad-avisos {
    display: grid;
    gap: 12px;
}

.localidad-avisos > .pagina-etiqueta {
    margin: 0;
}

.avisos-lista-compacta {
    margin: 0;
}

.avisos-lista-compacta .aviso-item {
    padding: 8px 10px;
}

@media (max-width: 640px) {
    .avisos-portal {
        padding: 14px;
    }

    .avisos-portal-encabezado > .boton {
        width: 100%;
    }

    .aviso-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .aviso-item form {
        margin-left: auto;
    }
}


/* =========================================================
   Panel de cobranza
   ========================================================= */

.cobranza-encabezado {
    align-items: center;
}

.cobranza-buscar {
    position: relative;
    display: flex;
    flex: 0 1 460px;
    gap: 8px;
}

.cobranza-buscar input {
    margin: 0;
    padding-left: 36px;
}

.cobranza-buscar .clientes-buscar-icono {
    left: 12px;
}

.cobranza-indicadores {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 14px;
}

.cobranza-kpi {
    display: grid;
    min-width: 0;
    padding: 16px 18px;
    align-content: start;
    gap: 3px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.cobranza-kpi:hover {
    border-color: var(--borde-fuerte);
    transform: translateY(-1px);
    text-decoration: none;
}

.cobranza-kpi-principal {
    border-color: rgba(24, 211, 158, 0.4);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 211, 158, 0.12), transparent 16rem),
        var(--panel);
}

.cobranza-kpi-etiqueta {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cobranza-kpi-valor {
    overflow: hidden;
    color: var(--texto);
    font-size: 1.75rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cobranza-kpi-principal .cobranza-kpi-valor {
    color: var(--primario-claro);
    font-size: 2rem;
}

.cobranza-kpi small {
    color: var(--texto-secundario);
    font-size: 0.76rem;
    line-height: 1.4;
}

.cobranza-kpi-aviso {
    color: var(--advertencia) !important;
}

.cobranza-kpi-alerta {
    border-color: rgba(255, 101, 119, 0.42);
    background:
        linear-gradient(135deg, var(--peligro-fondo), transparent 70%),
        var(--panel);
}

.cobranza-kpi-alerta .cobranza-kpi-valor {
    color: var(--peligro);
}

.cobranza-kpi-aviso-borde {
    border-color: rgba(247, 184, 75, 0.38);
}

.cobranza-avance {
    height: 7px;
    margin: 6px 0 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.cobranza-avance span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primario), #3fb6ff);
}

.cobranza-cuerpo {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    gap: 22px;
}

.cobranza-principal,
.cobranza-lateral {
    display: grid;
    min-width: 0;
    gap: 22px;
}

.cobranza-cuerpo .card {
    margin: 0;
}

/* Gráfica de barras por día */

.grafica-dias {
    display: flex;
    height: 150px;
    padding-top: 6px;
    align-items: stretch;
    gap: 3px;
}

.grafica-dia {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.grafica-barra {
    display: block;
    width: 100%;
    max-width: 22px;
    min-height: 0;
    border-radius: 4px 4px 1px 1px;
    background: rgba(24, 211, 158, 0.45);
    transition: background-color 0.15s ease;
}

.grafica-dia:hover .grafica-barra {
    background: var(--primario);
}

.grafica-dia small {
    color: var(--texto-tenue);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
}

.grafica-dia-hoy .grafica-barra {
    background: linear-gradient(180deg, #52e6bc, #18d39e);
}

.grafica-dia-hoy small {
    color: var(--primario-claro);
    font-weight: 800;
}

/* Últimos pagos y listas de personas */

.pagos-lista,
.personas-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagos-lista li + li,
.personas-lista li + li {
    border-top: 1px solid var(--borde);
}

.pagos-lista-fila {
    display: flex;
    padding: 10px 2px;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.pagos-lista-fila:hover,
.personas-lista a:hover {
    text-decoration: none;
}

.pagos-lista-fila:hover strong,
.personas-lista a:hover strong {
    color: var(--primario-claro);
}

.pagos-lista-quien,
.personas-lista-quien {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.pagos-lista-quien strong,
.personas-lista-quien strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagos-lista-quien small,
.personas-lista-quien small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagos-lista-monto {
    display: grid;
    flex: 0 0 auto;
    color: var(--texto);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pagos-lista-monto small {
    font-size: 0.68rem;
    font-weight: 700;
}

.personas-lista a {
    display: flex;
    padding: 10px 0;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.personas-lista-dato {
    flex: 0 0 auto;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.personas-lista-dato.dato-alerta {
    color: var(--advertencia);
}

.cobranza-ver-todos {
    width: 100%;
    margin-top: 10px;
}

.cobranza-vacio {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.84rem;
}

.enlace-secundario {
    color: var(--texto-secundario);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Herramientas */

.cobranza-herramientas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.herramienta {
    display: flex;
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel-suave);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.herramienta:hover {
    border-color: var(--borde-fuerte);
    background: var(--panel);
    text-decoration: none;
}

.herramienta-icono {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--panel-elevado);
    font-size: 1.1rem;
}

.herramienta strong {
    display: block;
    color: var(--texto);
    font-size: 0.88rem;
}

.herramienta small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

@media (max-width: 1100px) {
    .cobranza-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cobranza-cuerpo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cobranza-buscar {
        flex: 1 1 100%;
    }

    .cobranza-indicadores {
        gap: 10px;
    }

    .cobranza-kpi {
        padding: 13px 14px;
    }

    .cobranza-kpi-principal {
        grid-column: 1 / -1;
    }

    .cobranza-kpi-valor {
        font-size: 1.35rem;
    }

    .cobranza-kpi small {
        font-size: 0.7rem;
    }

    .grafica-dias {
        height: 110px;
        gap: 2px;
    }

    .grafica-dia small {
        display: none;
    }

    .grafica-dia-hoy small {
        display: block;
    }

    .cobranza-herramientas {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Tareas: indicadores, tarjetas del tablero, chips y la tarea
   en dos columnas
   ========================================================= */

.tareas-indicadores {
    display: grid;
    margin-bottom: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tareas-kpi {
    display: grid;
    min-width: 0;
    padding: 12px 16px;
    gap: 1px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
}

.tareas-kpi span {
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tareas-kpi strong {
    color: var(--texto);
    font-size: 1.5rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.tareas-kpi small {
    color: var(--texto-secundario);
    font-size: 0.74rem;
}

.tareas-kpi-aviso strong {
    color: var(--advertencia);
}

.tareas-kpi-aviso-borde {
    border-color: rgba(247, 184, 75, 0.35);
}

.tareas-kpi-alerta {
    border-color: rgba(255, 101, 119, 0.42);
    background:
        linear-gradient(135deg, var(--peligro-fondo), transparent 70%),
        var(--panel);
}

.tareas-kpi-alerta strong {
    color: var(--peligro);
}

/* Columnas */

.tablero-encabezado {
    justify-content: flex-start;
}

.tablero-encabezado h2 {
    flex: 1 1 auto;
    min-width: 0;
}

.tablero-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.64rem;
}

.tablero-icono {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--panel-elevado);
    font-size: 0.85rem;
}

/* Tarjeta */

.tarea-tarjeta {
    padding: 11px 8px 10px 10px;
    border-color: var(--borde);
    border-left: 3px solid var(--tipo-color, var(--borde-fuerte));
    background: var(--panel-suave);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tarea-tarjeta:hover {
    border-color: var(--borde-fuerte);
    border-left-color: var(--tipo-color, var(--borde-fuerte));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.tarea-tarjeta-instalacion { --tipo-color: var(--primario); }
.tarea-tarjeta-reparacion { --tipo-color: var(--violeta); }
.tarea-tarjeta-mantenimiento { --tipo-color: var(--azul); }
.tarea-tarjeta-infraestructura { --tipo-color: var(--advertencia); }
.tarea-tarjeta-retiro { --tipo-color: var(--neutro); }

.tarea-tarjeta.tarjeta-garantia {
    --tipo-color: var(--peligro);
}

.tarjeta-prioridad-urgente {
    box-shadow: 0 0 0 1px rgba(255, 101, 119, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.tarjeta-tipo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tipo-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutro);
}

.tipo-punto-instalacion { background: var(--primario); }
.tipo-punto-reparacion { background: var(--violeta); }
.tipo-punto-mantenimiento { background: var(--azul); }
.tipo-punto-infraestructura { background: var(--advertencia); }
.tipo-punto-retiro { background: var(--neutro); }

.chip-prioridad,
.chip-fecha,
.chip-comentarios {
    display: inline-flex;
    padding: 1px 7px;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.chip-prioridad-alta {
    border-color: rgba(247, 184, 75, 0.5);
    background: var(--advertencia-fondo);
    color: var(--advertencia);
}

.chip-prioridad-urgente {
    border-color: rgba(255, 101, 119, 0.55);
    background: var(--peligro-fondo);
    color: var(--peligro);
}

.chip-fecha-hoy {
    border-color: rgba(247, 184, 75, 0.5);
    color: var(--advertencia);
}

.chip-fecha-atrasada {
    border-color: rgba(255, 101, 119, 0.55);
    background: var(--peligro-fondo);
    color: var(--peligro);
}

.tarjeta-titulo {
    font-size: 0.92rem;
}

.tarjeta-descripcion {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tarjeta-etiquetas {
    align-items: center;
}

.tarjeta-edad {
    margin-left: auto;
    color: var(--texto-tenue);
    font-size: 0.66rem;
    white-space: nowrap;
}

/* Lista del técnico */

.tarea-renglon .tarjeta-tipo {
    margin-bottom: 4px;
}

.tarea-renglon .tarea-titulo strong {
    font-size: 1rem;
}

/* La tarea */

.tarea-encabezado {
    align-items: flex-start;
    border-left: 4px solid var(--tipo-color, var(--primario));
}

.tarea-encabezado-instalacion { --tipo-color: var(--primario); }
.tarea-encabezado-reparacion { --tipo-color: var(--violeta); }
.tarea-encabezado-mantenimiento { --tipo-color: var(--azul); }
.tarea-encabezado-infraestructura { --tipo-color: var(--advertencia); }
.tarea-encabezado-retiro { --tipo-color: var(--neutro); }

.tarea-encabezado-texto {
    min-width: 0;
}

.tarea-encabezado-texto h1 {
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.tarea-encabezado .chip-prioridad,
.tarea-encabezado .chip-fecha {
    padding: 3px 9px;
    font-size: 0.7rem;
}

.tarea-descripcion {
    border-left: 3px solid var(--tipo-color, var(--borde-fuerte));
}

.tarea-descripcion .pagina-etiqueta {
    margin-bottom: 4px;
}

.tarea-descripcion p {
    margin: 0;
    color: var(--texto);
    font-size: 1rem;
    line-height: 1.55;
}

.tarea-informacion .ficha-lista dd {
    max-width: 65%;
}

/* Comentarios como línea de tiempo */

.comentarios-lista {
    display: grid;
    margin: 0 0 14px;
    padding: 0;
    gap: 14px;
    list-style: none;
}

.comentario {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.comentario .cliente-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.66rem;
}

.comentario-cuerpo {
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 4px var(--radio-pequeno) var(--radio-pequeno) var(--radio-pequeno);
    background: var(--panel-suave);
}

.comentario-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
}

.comentario-encabezado strong {
    color: var(--texto);
    font-size: 0.84rem;
}

.comentario-encabezado time {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.comentario-cuerpo p {
    margin: 4px 0 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-line;
}

.comentario-formulario {
    margin: 0;
}

.comentario-nuevo {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.comentario-nuevo textarea {
    margin: 0;
    min-height: 44px;
    resize: vertical;
}

@media (max-width: 1100px) {
    .tareas-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tareas-indicadores {
        gap: 8px;
    }

    .tareas-kpi {
        padding: 10px 12px;
    }

    .tareas-kpi strong {
        font-size: 1.25rem;
    }

    .comentario-nuevo {
        flex-direction: column;
        align-items: stretch;
    }

    .tarea-informacion .ficha-lista dd {
        max-width: none;
    }
}

.tarea-renglon,
.lista-pendientes > li {
    border-left: 3px solid var(--tipo-color, var(--borde-fuerte)) !important;
}

/* En el celular el tablero se recorre de lado, una columna a la vez. */
@media (max-width: 640px) {
    .tablero {
        scroll-snap-type: x mandatory;
        scroll-padding: 0 4px;
    }

    .tablero-columna {
        flex-basis: 86vw;
        scroll-snap-align: start;
    }
}


/* =========================================================
   Inicio: saludo, indicadores, «Requiere atención», cartera,
   tareas, routers y radioenlaces. La lista de alertas
   (.atencion-*) la comparte la pantalla de Alertas.
   ========================================================= */

.inicio-encabezado h1 {
    margin-bottom: 6px;
}

.inicio-encabezado .pagina-subtitulo {
    max-width: 680px;
}

.inicio-encabezado .pagina-subtitulo strong {
    color: var(--texto);
}

.texto-peligro,
.inicio-encabezado .pagina-subtitulo .texto-peligro {
    color: var(--peligro);
}

.inicio-acciones {
    display: flex;
    flex: 0 1 600px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.inicio-buscar {
    flex: 1 1 240px;
}

.inicio-indicadores .kpi-de {
    color: var(--texto-tenue);
    font-size: 0.6em;
    font-weight: 750;
}

.inicio-cuerpo .card-encabezado {
    margin-bottom: 14px;
}

/* «Todo bien»: cuando una lista se queda vacía por buenas razones. */

.inicio-todo-bien {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(45, 212, 119, 0.28);
    border-radius: var(--radio-pequeno);
    background: var(--correcto-fondo);
}

.inicio-todo-bien > span {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: rgba(45, 212, 119, 0.18);
    color: var(--correcto);
    font-weight: 900;
}

.inicio-todo-bien strong {
    display: block;
    color: var(--texto);
    font-size: 0.9rem;
}

.inicio-todo-bien small {
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

/* ---- Lista de alertas ---- */

.atencion-lista {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.atencion-item {
    --tono: var(--azul);
    --tono-fondo: var(--azul-fondo);

    display: flex;
    padding: 12px 14px;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--borde);
    border-left: 3px solid var(--tono);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.atencion-critico {
    --tono: var(--peligro);
    --tono-fondo: var(--peligro-fondo);
    background: linear-gradient(90deg, rgba(255, 101, 119, 0.07), transparent 60%), var(--panel-suave);
}

.atencion-aviso {
    --tono: var(--advertencia);
    --tono-fondo: var(--advertencia-fondo);
}

.atencion-icono {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: var(--tono-fondo);
    color: var(--tono);
}

.atencion-texto {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
}

.atencion-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.atencion-titulo strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.atencion-nivel {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--tono-fondo);
    color: var(--tono);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.atencion-texto p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    line-height: 1.45;
}

.atencion-texto small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

.atencion-accion {
    display: flex;
    flex: 0 0 auto;
    align-self: center;
    gap: 6px;
}

.atencion-accion form {
    margin: 0;
}

/* ---- Cartera ---- */

.cartera-barra {
    display: flex;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.cartera-barra span {
    display: block;
    height: 100%;
}

.cartera-barra span + span {
    border-left: 2px solid var(--panel);
}

.cartera-corriente { background: var(--correcto); }
.cartera-pendiente { background: var(--advertencia); }
.cartera-vencido { background: var(--peligro); }
.cartera-suspendido { background: #8f3d4a; }

.cartera-leyenda {
    display: grid;
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cartera-leyenda a {
    display: grid;
    padding: 10px 12px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto-secundario);
    font-size: 0.76rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.cartera-leyenda a:hover {
    border-color: var(--borde-fuerte);
    text-decoration: none;
}

.cartera-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cartera-leyenda strong {
    grid-column: 1 / -1;
    color: var(--texto);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cartera-leyenda small {
    grid-column: 1 / -1;
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.cartera-siguientes {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cartera-siguientes a {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    color: var(--texto-secundario);
    font-size: 0.78rem;
    text-decoration: none;
}

.cartera-siguientes a:hover {
    background: var(--panel-elevado);
    text-decoration: none;
}

.cartera-siguientes strong {
    color: var(--texto);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.cartera-siguientes .con-dato strong { color: var(--advertencia); }
.cartera-siguientes .con-alerta strong { color: var(--peligro); }

.cartera-siguientes span {
    flex: 1 1 auto;
    min-width: 0;
}

.cartera-siguientes em {
    flex: 0 0 auto;
    color: var(--primario-claro);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 750;
}

/* ---- Tareas en una lista corta ---- */

.inicio-mini-cifras {
    display: grid;
    margin-bottom: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.inicio-mini-cifras a {
    display: grid;
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto-tenue);
    font-size: 0.7rem;
    text-align: center;
    text-decoration: none;
}

.inicio-mini-cifras a:hover {
    border-color: var(--borde-fuerte);
    text-decoration: none;
}

.inicio-mini-cifras strong {
    color: var(--texto);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.inicio-mini-cifras .cifra-aviso strong { color: var(--advertencia); }
.inicio-mini-cifras .cifra-alerta strong { color: var(--peligro); }

.inicio-tareas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inicio-tarea {
    position: relative;
    display: flex;
    padding: 10px 0 10px 12px;
    align-items: center;
    gap: 10px;
}

.inicio-tarea + .inicio-tarea {
    border-top: 1px solid var(--borde);
}

/* La franja del color del tipo, a la izquierda. */
.inicio-tarea::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--neutro);
    content: "";
}

.inicio-tarea.tarea-tarjeta-instalacion::before { background: var(--primario); }
.inicio-tarea.tarea-tarjeta-reparacion::before { background: var(--violeta); }
.inicio-tarea.tarea-tarjeta-mantenimiento::before { background: var(--azul); }
.inicio-tarea.tarea-tarjeta-infraestructura::before { background: var(--advertencia); }

.inicio-tarea-enlace {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}

.inicio-tarea-enlace:hover {
    text-decoration: none;
}

.inicio-tarea-enlace:hover strong {
    color: var(--primario-claro);
}

.inicio-tarea .tarjeta-tipo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.inicio-tarea strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-tarea small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-en-curso {
    border-color: rgba(94, 158, 255, 0.45);
    color: #8cbcff;
}

.inicio-tarea-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.62rem;
}

.inicio-tarea-sin {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-tenue);
    font-size: 0.64rem;
    font-weight: 750;
    white-space: nowrap;
}

/* ---- Routers ---- */

.red-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.red-fila {
    --tono: var(--neutro);

    display: flex;
    padding: 10px 0;
    align-items: center;
    gap: 10px;
}

.red-fila + .red-fila {
    border-top: 1px solid var(--borde);
}

.red-online { --tono: var(--correcto); }
.red-offline { --tono: var(--peligro); }

.red-punto {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tono);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 18%, transparent);
}

.red-offline .red-punto {
    animation: red-latido 1.6s ease-in-out infinite;
}

@keyframes red-latido {
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tono) 6%, transparent); }
}

.red-quien {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.red-quien:hover {
    text-decoration: none;
}

.red-quien:hover strong {
    color: var(--primario-claro);
}

.red-quien strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.red-quien small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.red-quien code {
    color: var(--texto-secundario);
    font-size: 0.7rem;
}

.sistema-linea {
    display: flex;
    margin-top: 12px;
    padding-top: 12px;
    flex-wrap: wrap;
    gap: 6px 14px;
    border-top: 1px dashed var(--borde);
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.sistema-linea span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sistema-linea i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--correcto);
}

/* ---- Radioenlaces ---- */

.radio-lista {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    list-style: none;
}

.radio-fila {
    --tono: var(--neutro);

    display: grid;
    padding: 12px 14px;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.radio-bueno { --tono: var(--correcto); }
.radio-degradado { --tono: var(--advertencia); }
.radio-critico { --tono: var(--peligro); border-color: rgba(255, 101, 119, 0.4); }

.radio-fila-cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tono);
}

.radio-nombre {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-medidas {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.radio-medidas div {
    min-width: 0;
}

.radio-medidas dt {
    color: var(--texto-tenue);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.radio-medidas dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.radio-uso {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-uso .barra-capacidad {
    flex: 1 1 auto;
    margin: 0;
}

.radio-uso span {
    color: var(--texto-secundario);
    font-size: 0.7rem;
    white-space: nowrap;
}

.radio-fecha {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.radio-incidente {
    margin: 0;
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--peligro-fondo);
    color: #ff9aa6;
    font-size: 0.74rem;
}

.radio-incidente strong {
    display: block;
}

/* ---- Accesos rápidos ---- */

.inicio-atajos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (max-width: 1100px) {
    .inicio-acciones {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .inicio-encabezado {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .inicio-acciones .boton {
        flex: 1 1 auto;
    }

    .inicio-buscar {
        flex: 1 1 100%;
    }

    /* En el celular, lo de la columna lateral se intercala: primero
       lo urgente (alertas, tareas), luego cartera, red y radio. */
    .inicio-admin,
    .inicio-admin .cobranza-principal,
    .inicio-admin .cobranza-lateral {
        display: flex;
        flex-direction: column;
    }

    .inicio-admin .cobranza-principal,
    .inicio-admin .cobranza-lateral {
        display: contents;
    }

    .inicio-admin .inicio-atencion { order: 1; }
    .inicio-admin .inicio-tareas-card { order: 2; }
    .inicio-admin .inicio-cartera { order: 3; }
    .inicio-admin .inicio-red { order: 4; }

    .atencion-item {
        flex-wrap: wrap;
        padding: 11px 12px;
    }

    .atencion-texto {
        flex: 1 1 calc(100% - 50px);
    }

    /* El primer indicador va a todo lo ancho; si quedan tres, el
       último también, para no dejar un hueco. */
    .cobranza-indicadores .cobranza-kpi:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }

    .atencion-accion {
        width: 100%;
        padding-left: 46px;
    }

    .atencion-accion .boton {
        width: auto;
    }

    .cartera-leyenda {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cartera-siguientes {
        grid-template-columns: 1fr;
    }

    .radio-lista {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Formulario del cliente (nuevo y editar): pasos, planes como
   tarjetas, revisión de la IP y vista previa de la ficha.
   ========================================================= */

/* La casilla con texto se veía con el cuadrito en su propio renglón:
   «.campo-formulario label» le ganaba el display. */
.campo-formulario label.campo-casilla {
    display: flex;
}

.plan-edicion-seccion > h2 {
    flex-wrap: wrap;
}

.plan-edicion-seccion > h2 small {
    flex: 1 1 100%;
    margin-left: 36px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 500;
}

.cliente-edicion .campo-formulario {
    margin: 0;
}

.campo-ip {
    font-family: "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.02em;
}

.campo-ayuda.campo-ok { color: var(--correcto); }
.campo-ayuda.campo-aviso { color: var(--advertencia); }
.campo-ayuda.campo-error { color: var(--peligro); }

.cliente-aviso-equipo {
    margin: 0;
}

/* Planes como tarjetas para elegir. */

.planes-eleccion {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    border: 0;
}

.plan-opcion {
    position: relative;
    display: block;
    margin: 0 !important;
    cursor: pointer;
}

.plan-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.plan-opcion-cuerpo {
    display: grid;
    height: 100%;
    align-content: start;
    padding: 12px 14px;
    gap: 2px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-opcion:hover .plan-opcion-cuerpo {
    border-color: #557081;
}

.plan-opcion input:checked + .plan-opcion-cuerpo {
    border-color: var(--primario);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 211, 158, 0.16), transparent 9rem),
        var(--panel-suave);
    box-shadow: inset 0 0 0 1px var(--primario);
}

.plan-opcion input:focus-visible + .plan-opcion-cuerpo {
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.3);
}

.plan-opcion-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-secundario);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-opcion-nombre em {
    color: var(--advertencia);
    font-size: 0.62rem;
    font-style: normal;
    text-transform: none;
}

.plan-opcion-velocidad {
    color: var(--texto);
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.plan-opcion-velocidad small,
.plan-opcion-precio small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.plan-opcion-precio {
    color: var(--primario-claro);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.plan-opcion input:checked + .plan-opcion-cuerpo .plan-opcion-nombre {
    color: var(--primario-claro);
}

.cliente-instalacion {
    align-items: end;
}

.cliente-instalacion .interruptor-plan small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* Vista previa de la ficha. */

.cliente-previa {
    margin: 0;
    padding: 18px;
    border-style: dashed;
    border-color: rgba(24, 211, 158, 0.4);
}

.cliente-previa-encabezado {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 12px;
}

.cliente-previa-avatar {
    width: 46px;
    height: 46px;
    font-size: 0.95rem;
}

.cliente-previa-encabezado > div {
    display: grid;
    min-width: 0;
}

.cliente-previa-encabezado strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cliente-previa-encabezado small {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.cliente-previa .previa-vacia {
    color: var(--texto-tenue);
    font-weight: 500;
}

.cliente-previa-datos code {
    color: var(--texto);
    font-size: 0.8rem;
}

.cliente-previa-cobro {
    display: grid;
    margin-top: 12px;
    padding: 12px 14px;
    gap: 4px;
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
}

.cliente-previa-cobro .pagina-etiqueta {
    margin: 0;
}

.cliente-previa-cobro p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.cliente-previa-cobro strong {
    color: var(--texto);
    font-size: 1rem;
}

.cliente-previa-cobro small {
    display: block;
    margin-top: 3px;
    color: var(--texto-secundario);
    font-size: 0.74rem;
    line-height: 1.45;
}

/* Lo que falta para registrar. */

.cliente-pendientes {
    padding: 14px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
}

.cliente-pendientes ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 7px;
    list-style: none;
}

.cliente-pendientes li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--texto-secundario);
    font-size: 0.84rem;
}

.cliente-pendientes li::before {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    content: "";
    font-size: 0.66rem;
    font-weight: 900;
}

.cliente-pendientes li.requisito-listo {
    color: var(--texto-tenue);
    text-decoration: line-through;
}

.cliente-pendientes li.requisito-listo::before {
    border-color: var(--correcto);
    background: var(--correcto-fondo);
    color: var(--correcto);
    content: "✓";
}

.cliente-pendientes.pendientes-listo {
    border-color: rgba(45, 212, 119, 0.4);
}

.cliente-pendientes.pendientes-listo .pagina-etiqueta {
    color: var(--correcto);
}

.cliente-edicion-atajos {
    display: grid;
    gap: 10px;
}

@media (max-width: 1000px) {
    /* En el celular, el formulario primero y la vista previa debajo
       (se va llenando mientras se escribe). */
    .cliente-edicion .plan-edicion-lateral {
        position: static;
        display: grid;
    }

    .cliente-edicion .plan-edicion-lateral > .plan-edicion-bloque {
        order: 0;
    }

    .cliente-pendientes {
        display: none;
    }
}

@media (max-width: 640px) {
    .planes-eleccion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-edicion-seccion > h2 small {
        margin-left: 0;
    }
}


/* =========================================================
   Mapa: barra con título e iconos, capas más legibles y el
   resumen de lo dibujado (abajo a la izquierda).
   ========================================================= */

.mapa-barra {
    padding: 10px 18px;
    gap: 10px 14px;
    background:
        linear-gradient(110deg, rgba(24, 211, 158, 0.07), transparent 40%),
        var(--panel);
}

.mapa-titulo {
    display: flex;
    margin-right: 4px;
    align-items: center;
    gap: 10px;
}

.mapa-titulo-icono {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(24, 211, 158, 0.35);
    border-radius: 10px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.mapa-titulo strong {
    display: block;
    color: var(--texto);
    font-size: 0.92rem;
    line-height: 1.2;
}

.mapa-titulo small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.mapa-buscar-icono {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    color: var(--texto-tenue);
    font-size: 1.05rem;
    transform: translateY(-52%);
    pointer-events: none;
}

.mapa-buscar input {
    padding-left: 34px;
}

.mapa-botones {
    margin-left: auto;
}

.mapa-botones .boton svg {
    flex: 0 0 auto;
}

.mapa-capas-panel {
    width: 270px;
    padding: 14px 16px;
    gap: 4px;
    border-radius: var(--radio);
}

.mapa-capas-panel strong {
    margin: 6px 0 4px;
}

.mapa-capas-panel strong:first-child {
    margin-top: 0;
}

.mapa-capas-panel label {
    padding: 6px 8px;
    border-radius: 8px;
}

.mapa-capas-panel label:hover {
    background: rgba(255, 255, 255, 0.04);
}

.mapa-capas-panel input[type="checkbox"] {
    accent-color: var(--primario);
}

.mapa-resumen {
    position: absolute;
    z-index: 900;
    bottom: 26px;
    left: 12px;
    display: flex;
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 12px;
    background: rgba(13, 24, 34, 0.92);
    box-shadow: var(--sombra-suave);
    color: var(--texto-secundario);
    font-size: 0.76rem;
    backdrop-filter: blur(6px);
}

.mapa-resumen[hidden] {
    display: none;
}

.mapa-app.con-panel .mapa-resumen {
    max-width: calc(100% - 400px);
}

.mapa-resumen-dato {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.mapa-resumen-dato strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.mapa-resumen-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.punto-casas { background: #2dd477; }
.punto-cajas { border-radius: 2px; background: #f7d04b; }
.punto-torres { background: #5e9eff; }
.punto-fibra { width: 14px; height: 3px; border-radius: 2px; background: #ff7a45; }
.punto-radio { width: 14px; height: 0; border-top: 2px dashed #a184ff; border-radius: 0; }
.punto-proyectado { width: 14px; height: 0; border-top: 2px dotted #f7b84b; border-radius: 0; }

.mapa-panel {
    border-color: rgba(24, 211, 158, 0.25);
    background: rgba(13, 24, 34, 0.97);
    backdrop-filter: blur(8px);
}

@media (max-width: 1200px) {
    .mapa-titulo small {
        display: none;
    }
}

@media (max-width: 900px) {
    .mapa-titulo {
        display: none;
    }

    .mapa-botones {
        margin-left: -10px;
    }

    .mapa-resumen {
        bottom: 22px;
        left: 8px;
        max-width: calc(100% - 16px);
        padding: 6px 10px;
        gap: 4px 10px;
        font-size: 0.7rem;
    }

    .mapa-app.con-panel .mapa-resumen {
        display: none;
    }
}

@media (max-width: 520px) {
    /* En el celular, Capas, Mi ubicación y Ubicar casas solo con
       icono: así caben todos los botones sin deslizar. */
    .mapa-boton-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mapa-botones {
        gap: 6px;
    }

    .mapa-botones .boton {
        padding: 8px 11px;
    }
}


/* =========================================================
   Inventario: tarjetas de producto con barra de existencias,
   formulario con vista previa y ficha con movimientos.
   ========================================================= */

.inventario-buscar {
    flex: 1 1 220px;
}

.inventario-chips {
    margin-bottom: 18px;
}

.filtro-chip-icono {
    font-size: 0.9rem;
    font-style: normal;
}

.productos-grid {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.producto-tarjeta {
    --tono: var(--correcto);

    display: grid;
    padding: 16px 18px;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.producto-tarjeta:hover {
    border-color: var(--borde-fuerte);
    transform: translateY(-1px);
    text-decoration: none;
}

.producto-tarjeta[hidden] {
    display: none;
}

.producto-bajo { --tono: var(--advertencia); }

.producto-agotado {
    --tono: var(--peligro);
    border-color: rgba(255, 101, 119, 0.35);
    background:
        linear-gradient(135deg, rgba(255, 101, 119, 0.07), transparent 60%),
        var(--panel);
}

.producto-tarjeta-cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
}

.producto-tarjeta-cabeza .estado-badge {
    margin-left: auto;
}

.producto-icono {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: var(--panel-elevado);
    font-size: 1rem;
}

.producto-categoria {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.producto-nombre {
    color: var(--texto);
    font-size: 0.98rem;
    line-height: 1.3;
}

.producto-stock {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.producto-cantidad {
    color: var(--tono);
    font-size: 1.7rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stock-barra {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.stock-barra span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: var(--correcto);
}

.stock-bajo span { background: var(--advertencia); }
.stock-agotado span { background: var(--peligro); }

.stock-barra i {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 2px;
    background: var(--texto-secundario);
}

.producto-pie {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.producto-tarjeta-previa {
    border-style: dashed;
    border-color: rgba(24, 211, 158, 0.4);
}

.producto-tarjeta .previa-vacia {
    color: var(--texto-tenue);
    font-weight: 500;
}

/* Formulario */

.categorias-eleccion {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
}

.categorias-eleccion legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 700;
}

.categoria-opcion {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.categoria-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.categoria-opcion span {
    display: inline-flex;
    padding: 7px 12px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--panel-suave);
    color: var(--texto-secundario);
    font-size: 0.8rem;
    font-weight: 700;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.categoria-opcion i {
    font-style: normal;
}

.categoria-opcion:hover span {
    border-color: #557081;
}

.categoria-opcion input:checked + span {
    border-color: var(--primario);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.categoria-opcion input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.3);
}

.producto-existencias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.producto-existencias-dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.producto-existencias .campo-formulario {
    margin: 0;
}

.producto-ayuda-minimo {
    margin: -6px 0 0;
}

/* Ficha */

.producto-encabezado-principal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.producto-icono-grande {
    width: 58px;
    height: 58px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 16px;
    font-size: 1.7rem;
}

.producto-encabezado-dato {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.producto-existencias-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.producto-existencias-cifra {
    display: grid;
    gap: 8px;
}

.producto-existencias-cifra .pagina-etiqueta {
    margin: 0;
}

.producto-stock-grande .producto-cantidad {
    font-size: 2.6rem;
}

.producto-stock-grande {
    font-size: 1rem;
}

.producto-existencias-card .stock-barra {
    height: 9px;
}

.producto-cifras {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.producto-cifras div {
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.producto-cifras dt {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.producto-cifras dd {
    margin: 2px 0 0;
    color: var(--texto);
    font-size: 1.35rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.cifra-entrada { color: var(--correcto) !important; }
.cifra-salida { color: var(--advertencia) !important; }

.movimientos-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.movimiento {
    --tono: var(--neutro);
    --tono-fondo: var(--neutro-fondo);

    display: flex;
    padding: 12px 0;
    align-items: flex-start;
    gap: 12px;
}

.movimiento + .movimiento {
    border-top: 1px solid var(--borde);
}

.movimiento-entrada { --tono: var(--correcto); --tono-fondo: var(--correcto-fondo); }
.movimiento-salida { --tono: var(--advertencia); --tono-fondo: var(--advertencia-fondo); }

.movimiento-signo {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--tono-fondo);
    color: var(--tono);
    font-size: 1.05rem;
    font-weight: 900;
}

.movimiento-texto {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
}

.movimiento-texto strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.movimiento-texto small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.movimiento-extra {
    display: flex;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 6px;
}

.movimiento-extra a,
.movimiento-extra code {
    padding: 2px 8px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
}

.movimiento-resultado {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.74rem;
    white-space: nowrap;
}

.movimiento-resultado strong {
    color: var(--texto);
    font-size: 0.95rem;
}

.producto-movimiento-form {
    display: grid;
    gap: 14px;
}

.producto-movimiento-form .campo-formulario {
    margin: 0;
}

.campo-opcional {
    margin-left: 4px;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 500;
}

.tipo-movimiento {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
    border: 0;
}

.tipo-movimiento-opcion {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.tipo-movimiento-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tipo-movimiento-opcion span {
    display: grid;
    height: 100%;
    align-content: start;
    padding: 10px;
    gap: 2px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    text-align: center;
}

.tipo-movimiento-opcion strong {
    color: var(--texto);
    font-size: 0.84rem;
}

.tipo-movimiento-opcion small {
    color: var(--texto-tenue);
    font-size: 0.66rem;
    line-height: 1.3;
}

.tipo-movimiento-opcion input:checked + span {
    border-color: var(--primario);
    background: var(--primario-fondo);
}

.tipo-salida input:checked + span {
    border-color: var(--advertencia);
    background: var(--advertencia-fondo);
}

.tipo-ajuste input:checked + span {
    border-color: var(--neutro);
    background: var(--neutro-fondo);
}

.tipo-movimiento-opcion input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.3);
}

.producto-movimiento-enviar {
    width: 100%;
}

@media (max-width: 760px) {
    .producto-existencias-card {
        grid-template-columns: 1fr;
    }

    .producto-existencias {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .productos-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .producto-tarjeta {
        padding: 14px;
    }

    .producto-icono-grande {
        width: 46px;
        height: 46px;
        font-size: 1.35rem;
    }

    .movimiento-resultado {
        display: none;
    }
}


/* =========================================================
   Alertas: cifras por nivel (sirven de filtro) y resueltas.
   ========================================================= */

button.cobranza-kpi {
    width: 100%;
    min-height: 0;
    justify-content: stretch;
    justify-items: start;
    text-align: left;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
}

button.cobranza-kpi:hover {
    border-color: var(--borde-fuerte);
    background: var(--panel);
    color: var(--texto);
    transform: translateY(-1px);
}

button.cobranza-kpi.cobranza-kpi-alerta:hover {
    background:
        linear-gradient(135deg, var(--peligro-fondo), transparent 70%),
        var(--panel);
}

.alertas-kpi-activo {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}

.resueltas-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resueltas-lista li {
    display: flex;
    padding: 10px 0;
    align-items: flex-start;
    gap: 12px;
}

.resueltas-lista li + li {
    border-top: 1px solid var(--borde);
}

.resuelta-icono {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: var(--correcto-fondo);
    color: var(--correcto);
}

.resueltas-lista li > div {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.resueltas-lista strong {
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.resueltas-lista p {
    margin: 0;
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resueltas-lista small {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    text-align: right;
}

.resueltas-lista small span {
    color: var(--correcto);
    font-weight: 700;
}


/* =========================================================
   Historial: resumen de la semana, filtros y línea de tiempo
   agrupada por día.
   ========================================================= */

.tono-peligro { --tono: var(--peligro); --tono-fondo: var(--peligro-fondo); }
.tono-correcto { --tono: var(--correcto); --tono-fondo: var(--correcto-fondo); }
.tono-primario { --tono: var(--primario-claro); --tono-fondo: var(--primario-fondo); }
.tono-neutro { --tono: var(--neutro); --tono-fondo: var(--neutro-fondo); }
.tono-azul { --tono: #8cbcff; --tono-fondo: var(--azul-fondo); }
.tono-violeta { --tono: #bfaaff; --tono-fondo: var(--violeta-fondo); }
.tono-advertencia { --tono: var(--advertencia); --tono-fondo: var(--advertencia-fondo); }

.historial-semana {
    display: flex;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.historial-semana-titulo {
    margin-right: 4px;
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.historial-semana-dato {
    display: inline-flex;
    padding: 6px 12px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--panel);
    color: var(--texto-secundario);
    font-size: 0.8rem;
    text-decoration: none;
}

.historial-semana-dato:hover {
    border-color: var(--tono);
    text-decoration: none;
}

.historial-semana-dato i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--tono-fondo);
    color: var(--tono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
}

.historial-semana-dato strong {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font-size: 0.74rem;
    text-align: center;
}

.historial-filtros {
    display: flex;
    margin-bottom: 8px;
    padding-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--borde);
}

.historial-buscar {
    flex: 1 1 260px;
    max-width: 420px;
}

.historial-filtros select {
    width: auto;
    min-width: 190px;
    margin: 0;
}

.historial-periodos {
    margin-left: auto;
}

.historial-dia {
    position: sticky;
    z-index: 2;
    top: 72px;
    margin: 18px 0 4px;
    padding: 6px 0;
    background: var(--panel);
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.historial-eventos {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.historial-eventos {
    --tono: var(--neutro);
    --tono-fondo: var(--neutro-fondo);
}

.evento {
    position: relative;
    display: grid;
    padding: 10px 0;
    grid-template-columns: 46px 32px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

/* La línea que une los eventos del día. */
.evento::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 73px;
    width: 2px;
    background: var(--borde);
    content: "";
}

.evento:first-child::before { top: 24px; }
.evento:last-child::before { bottom: calc(100% - 24px); }
.evento:only-child::before { display: none; }

.evento time {
    padding-top: 7px;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.74rem;
    text-align: right;
}

.evento-icono {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: var(--tono-fondo);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tono) 35%, transparent);
    color: var(--tono);
    font-size: 0.82rem;
    font-weight: 900;
}

.evento-texto {
    display: grid;
    min-width: 0;
    padding-top: 3px;
    gap: 3px;
}

.evento-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.evento-accion {
    color: var(--tono);
    font-size: 0.8rem;
    font-weight: 850;
}

.evento-titulo .log-cliente {
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 750;
}

.evento-titulo a.log-cliente:hover {
    color: var(--primario-claro);
}

.evento-titulo .log-ip {
    padding: 1px 7px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
}

.evento-texto .log-detalle {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    line-height: 1.45;
}

.evento-texto small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

@media (max-width: 760px) {
    .historial-periodos {
        margin-left: 0;
    }

    .historial-filtros select {
        flex: 1 1 100%;
    }

    .historial-dia {
        top: 60px;
    }

    .evento {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .evento time {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        text-align: left;
    }

    .evento-icono {
        grid-row: 1 / span 2;
    }

    .evento::before {
        left: 14px;
    }
}


/* =========================================================
   MikroTiks: tarjetas por router con su conexión, cifras y
   localidades; las pruebas van en el menú ⋮.
   ========================================================= */

.routers-catalogo {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.router-tarjeta {
    --tono: var(--neutro);

    display: grid;
    margin: 0;
    padding: 18px 20px;
    align-content: start;
    gap: 14px;
    border-top: 3px solid var(--tono);
}

.router-tarjeta.red-online { --tono: var(--correcto); }
.router-tarjeta.red-offline {
    --tono: var(--peligro);
    background:
        linear-gradient(160deg, rgba(255, 101, 119, 0.07), transparent 45%),
        var(--panel);
}

.router-inactivo {
    opacity: 0.7;
}

.router-tarjeta-cabeza {
    display: flex;
    align-items: center;
    gap: 10px;
}

.router-tarjeta-titulo {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
}

.router-tarjeta-titulo h2 {
    margin: 0;
    font-size: 1.15rem;
}

.router-tarjeta-titulo h2 a {
    color: var(--texto);
    text-decoration: none;
}

.router-tarjeta-titulo h2 a:hover {
    color: var(--primario-claro);
}

.router-tarjeta-titulo small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.router-tarjeta-datos {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.router-tarjeta-datos dt {
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.router-tarjeta-datos dd {
    margin: 2px 0 0;
}

.router-tarjeta-datos code {
    color: var(--texto);
    font-size: 0.8rem;
}

.router-tarjeta-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.router-cifra {
    display: grid;
    padding: 9px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    color: var(--texto-tenue);
    font-size: 0.7rem;
    text-align: center;
}

.router-cifra strong {
    color: var(--texto);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.router-cifra.cifra-aviso strong { color: var(--advertencia); }
.router-cifra.cifra-alerta strong { color: var(--peligro); }

.router-tarjeta-localidades {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.router-localidad {
    padding: 3px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}

.router-localidad:hover {
    border-color: var(--primario);
    color: var(--primario-claro);
    text-decoration: none;
}

.router-sin-localidades {
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-style: italic;
}

.router-tarjeta-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 640px) {
    .routers-catalogo {
        grid-template-columns: 1fr;
    }

    .router-tarjeta {
        padding: 16px;
    }
}


/* =========================================================
   Usuarios: tarjetas por persona y formulario con roles como
   tarjetas y vista previa.
   ========================================================= */

.usuarios-grid {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.usuario-tarjeta {
    position: relative;
    display: flex;
    margin: 0;
    padding: 18px;
    flex-direction: column;
    gap: 12px;
}

.usuarios-grid .usuario-tarjeta-pie {
    margin-top: auto;
}

.usuario-inactivo {
    opacity: 0.6;
}

.usuario-tarjeta-cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usuario-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
}

.usuario-tarjeta-quien {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
}

.usuario-tarjeta-quien strong {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-tarjeta-quien small {
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.74rem;
}

.usuario-tu {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.usuario-rol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.usuario-rol small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.usuario-zonas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.usuario-zonas[hidden] {
    display: none;
}

.usuario-sin-zonas {
    color: var(--advertencia);
    font-size: 0.76rem;
    font-weight: 700;
}

.usuario-tarjeta-pie {
    display: flex;
    padding-top: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px dashed var(--borde);
}

.usuario-tarjeta-pie small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

.usuario-activo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--correcto);
    font-size: 0.78rem;
    font-weight: 750;
}

.usuario-activo i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--correcto);
}

.usuario-editar {
    width: 100%;
}

/* Formulario */

.campo-usuario input {
    font-family: "SFMono-Regular", Consolas, monospace;
}

.campo-usuario {
    grid-template-columns: auto minmax(0, 1fr);
}

.roles-eleccion {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    border: 0;
}

.rol-opcion {
    position: relative;
    margin: 0 !important;
    cursor: pointer;
}

.rol-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.rol-opcion span {
    display: grid;
    height: 100%;
    align-content: start;
    padding: 12px 14px;
    gap: 4px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rol-opcion strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.rol-opcion small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;
}

.rol-opcion:hover span {
    border-color: #557081;
}

.rol-opcion input:checked + span {
    border-color: var(--primario);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 211, 158, 0.14), transparent 10rem),
        var(--panel-suave);
    box-shadow: inset 0 0 0 1px var(--primario);
}

.rol-opcion input:checked + span strong {
    color: var(--primario-claro);
}

.rol-opcion input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.3);
}

.localidades-eleccion {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.usuario-edicion .aviso-formulario {
    margin: 0;
}

.usuario-previa {
    border-style: dashed;
    border-color: rgba(24, 211, 158, 0.4);
}

.usuario-previa-descripcion {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    line-height: 1.5;
}


/* =========================================================
   Guía: índice lateral fijo, buscador y temas en tarjetas.
   ========================================================= */

.guia-buscar {
    flex: 0 1 380px;
}

.guia-layout {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.guia-indice {
    position: sticky;
    top: 96px;
    margin: 0;
    padding: 16px;
}

.guia-indice .pagina-etiqueta {
    margin-bottom: 8px;
}

.guia-indice ol {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 2px;
    list-style: none;
}

.guia-indice li {
    margin: 0;
}

.guia-indice a {
    display: flex;
    padding: 7px 9px;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    color: var(--texto-secundario);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.guia-indice a:hover {
    background: var(--panel-elevado);
    color: var(--texto);
    text-decoration: none;
}

.guia-indice a span {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    background: var(--panel-elevado);
    color: var(--primario-claro);
    font-size: 0.78rem;
    font-weight: 800;
}

.guia-contenido {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.guia-contenido > .card {
    margin: 0;
    scroll-margin-top: 96px;
}

.guia-contenido > [hidden] {
    display: none;
}

.guia-titulo-seccion {
    margin: 0 0 2px;
    color: var(--texto);
    font-size: 1.15rem;
}

.guia-tema dl {
    display: grid;
    margin: 0;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
}

.guia-tema dt {
    color: var(--texto);
    font-size: 1rem;
    font-weight: 800;
}

.guia-tema dd {
    margin: 0;
    color: var(--texto-secundario);
    line-height: 1.6;
}

.guia-tema dd > p {
    margin: 0 0 10px;
}

.guia-tema dd > p:last-child,
.guia-tema .guia-lista:last-child,
.guia-tema .guia-pasos:last-child {
    margin-bottom: 0;
}

.guia-tema-destacado {
    border-color: rgba(24, 211, 158, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 211, 158, 0.08), transparent 18rem),
        var(--panel);
}

.guia-tema strong {
    color: var(--texto);
}

.guia-lista li::marker {
    color: var(--primario);
}

.guia-pasos li::marker {
    color: var(--primario-claro);
    font-weight: 800;
}

.guia-paso .card-encabezado {
    margin-bottom: 12px;
}

.guia-paso .card-encabezado > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guia-paso .card-encabezado .pagina-etiqueta {
    margin: 0;
    color: var(--primario-claro);
}

.guia-paso .card-encabezado h2 {
    margin: 0;
}

.guia-sin-resultados {
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    .guia-layout {
        grid-template-columns: 1fr;
    }

    .guia-indice {
        position: static;
    }

    .guia-indice ol {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .guia-indice a {
        border: 1px solid var(--borde);
        border-radius: 999px;
        padding: 4px 10px 4px 4px;
        font-size: 0.78rem;
    }

    .guia-indice a span {
        width: 22px;
        height: 22px;
        border-radius: 50%;
    }

    .guia-tema dl {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .guia-buscar {
        flex: 1 1 100%;
    }
}


/* =========================================================
   Oficina virtual: agentes, bandeja, conversación del caso y
   terminal de solo lectura.
   ========================================================= */

.agente-avatar {
    --tono: var(--neutro);
    --tono-fondo: var(--neutro-fondo);

    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
    border-radius: 50%;
    background: var(--tono-fondo);
    color: var(--tono);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.agente-avatar-grande {
    width: 46px;
    height: 46px;
    font-size: 0.85rem;
}

.agente-primario { --tono: var(--primario-claro); --tono-fondo: var(--primario-fondo); }
.agente-azul { --tono: #8cbcff; --tono-fondo: var(--azul-fondo); }
.agente-violeta { --tono: #bfaaff; --tono-fondo: var(--violeta-fondo); }
.agente-advertencia { --tono: var(--advertencia); --tono-fondo: var(--advertencia-fondo); }
.agente-correcto { --tono: var(--correcto); --tono-fondo: var(--correcto-fondo); }
.agente-neutro { --tono: var(--texto-secundario); --tono-fondo: rgba(255, 255, 255, 0.06); }

.motor-chip {
    display: inline-flex;
    padding: 3px 10px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 750;
}

.motor-ia {
    border-color: rgba(161, 132, 255, 0.5);
    background: var(--violeta-fondo);
    color: #c9b8ff;
}

/* ---- Agentes ---- */

.agentes-fila {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.agente-tarjeta {
    display: flex;
    padding: 16px;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.agente-ocupado {
    border-color: rgba(24, 211, 158, 0.5);
    box-shadow: 0 0 0 3px rgba(24, 211, 158, 0.08);
}

.agente-cabeza {
    display: flex;
    align-items: center;
    gap: 11px;
}

.agente-cabeza strong {
    display: block;
    color: var(--texto);
    font-size: 1rem;
}

.agente-cabeza small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.agente-tarjeta p {
    flex: 1 1 auto;
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    line-height: 1.45;
}

.agente-tarjeta footer {
    display: flex;
    padding-top: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px dashed var(--borde);
}

.agente-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 700;
}

.agente-estado i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neutro);
}

.agente-ocupado .agente-estado {
    color: var(--primario-claro);
}

.agente-ocupado .agente-estado i {
    background: var(--primario);
    animation: red-latido 1.4s ease-in-out infinite;
    --tono: var(--primario);
}

.agente-tarjeta footer small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

/* ---- Estado de un caso ---- */

.caso-estado {
    --tono: var(--neutro);

    display: inline-flex;
    padding: 3px 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
    border-radius: 999px;
    color: var(--tono);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.caso-estado i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tono);
}

.caso-trabajando { --tono: var(--primario-claro); }
.caso-trabajando i { animation: red-latido 1.2s ease-in-out infinite; }
.caso-bueno { --tono: var(--correcto); }
.caso-advertencia { --tono: var(--advertencia); }
.caso-critico { --tono: var(--peligro); }
.caso-cerrado { --tono: var(--texto-tenue); }

.chip-portal {
    border-color: rgba(94, 158, 255, 0.45);
    color: #8cbcff;
}

/* ---- Bandeja ---- */

.bandeja-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bandeja-lista li + li {
    border-top: 1px solid var(--borde);
}

.bandeja-fila {
    display: grid;
    padding: 12px 4px;
    grid-template-columns: 46px minmax(160px, 1fr) minmax(0, 2fr) auto auto;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.bandeja-fila:hover {
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
}

.bandeja-fila:hover strong {
    color: var(--primario-claro);
}

.bandeja-numero {
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.78rem;
}

.bandeja-quien {
    display: grid;
    min-width: 0;
}

.bandeja-quien strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeja-quien small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.bandeja-diagnostico {
    overflow: hidden;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    line-height: 1.4;
}

.bandeja-diagnostico em {
    color: var(--primario-claro);
    font-style: normal;
}

.bandeja-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.bandeja-lado {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.bandeja-lado small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.problemas-eleccion {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    border: 0;
}

.problemas-eleccion legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 700;
}

.dialogo-caso .campo-formulario {
    margin: 0;
}

.oficina-buscar-cliente .buscador-resultados {
    margin-top: 4px;
}

.buscador-resultado-item {
    display: block;
    width: 100%;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.buscador-resultado-item:hover {
    transform: none;
}

/* ---- Conversación de un caso ---- */

.caso-cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.charla-lista {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 4px;
    list-style: none;
}

.charla-msg {
    display: flex;
    padding: 9px 6px;
    align-items: flex-start;
    gap: 11px;
    border-radius: var(--radio-pequeno);
}

.charla-nuevo {
    animation: charla-entra 0.35s ease-out;
}

@keyframes charla-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.charla-cuerpo {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 3px;
}

.charla-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.charla-cabeza strong {
    color: var(--texto);
    font-size: 0.84rem;
}

.charla-flecha {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 700;
}

.charla-cabeza time {
    margin-left: auto;
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
}

.charla-cuerpo > p {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--borde);
    border-radius: 4px 12px 12px 12px;
    background: var(--panel-suave);
    color: var(--texto-secundario);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-line;
}

.charla-pregunta .charla-cuerpo > p {
    border-style: dashed;
}

.charla-respuesta .charla-cuerpo > p {
    color: var(--texto);
}

.charla-nota .charla-cuerpo > p {
    border-color: transparent;
    background: transparent;
    padding: 2px 0;
    font-style: italic;
}

.charla-propuesta .charla-cuerpo > p {
    border-color: rgba(247, 184, 75, 0.45);
    background: var(--advertencia-fondo);
    color: var(--texto);
}

.charla-visible .charla-cuerpo > p {
    border-color: rgba(94, 158, 255, 0.45);
    background: var(--azul-fondo);
    color: var(--texto);
}

.charla-herramienta {
    padding-top: 2px;
    padding-bottom: 2px;
}

.charla-herramienta .agente-avatar {
    width: 26px;
    height: 26px;
    margin-left: 4px;
    font-size: 0.58rem;
    opacity: 0.75;
}

.charla-herramienta .charla-cabeza {
    display: none;
}

.charla-datos summary {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    cursor: pointer;
    list-style: none;
}

.charla-datos summary::-webkit-details-marker {
    display: none;
}

.charla-datos summary::before {
    content: "⚙ ";
}

.charla-datos summary span {
    color: var(--primario-claro);
    font-weight: 700;
}

.charla-datos[open] summary span {
    color: var(--texto-tenue);
}

.charla-datos p {
    margin: 6px 0 0;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.charla-datos pre {
    max-height: 260px;
    margin: 6px 0 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo-profundo);
    color: var(--texto-secundario);
    font-size: 0.72rem;
    line-height: 1.45;
}

.charla-escribiendo {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    align-items: center;
    gap: 5px;
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
    color: var(--primario-claro);
    font-size: 0.8rem;
    font-weight: 700;
}

.charla-escribiendo span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primario);
    animation: charla-punto 1.2s infinite ease-in-out;
}

.charla-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.charla-escribiendo span:nth-child(3) { animation-delay: 0.3s; margin-right: 6px; }

@keyframes charla-punto {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.caso-diagnostico,
.caso-respuesta {
    margin: 0;
}

.caso-diagnostico p,
.caso-respuesta p {
    margin: 6px 0 0;
    color: var(--texto);
    font-size: 0.9rem;
    line-height: 1.55;
}

.caso-diagnostico {
    border-left: 3px solid var(--correcto);
}

.caso-nivel-advertencia { border-left-color: var(--advertencia); }
.caso-nivel-critico { border-left-color: var(--peligro); }
.caso-esperando { border-left-color: var(--primario); }
.caso-esperando p { color: var(--texto-tenue); }

.caso-respuesta {
    border-color: rgba(94, 158, 255, 0.35);
    background:
        linear-gradient(135deg, rgba(94, 158, 255, 0.08), transparent 60%),
        var(--panel);
}

.caso-propuesta {
    margin: 0;
    border-color: rgba(247, 184, 75, 0.45);
}

.caso-propuesta .card-encabezado {
    margin-bottom: 8px;
}

.caso-propuesta-form {
    display: grid;
    gap: 10px;
}

.caso-propuesta-form .campo-formulario,
.caso-propuesta-form .formulario-dos-columnas {
    margin: 0;
}

.caso-propuesta-titulo {
    margin: 0;
    color: var(--texto);
    font-weight: 800;
}

.caso-propuesta .campo-ayuda {
    margin: 0;
}

.campo-ayuda.campo-aviso {
    color: var(--advertencia);
}

.caso-crear-tarea,
.caso-descartar {
    width: 100%;
}

.caso-descartar {
    margin-top: 6px;
}

.caso-cliente,
.caso-contestar,
.caso-tarea-creada {
    margin: 0;
}

.caso-cliente-cabeza {
    display: flex;
    margin: 8px 0 12px;
    align-items: center;
    gap: 10px;
}

.caso-cliente-cabeza strong {
    display: block;
    color: var(--texto);
}

.caso-cliente-cabeza small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.caso-cliente-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.caso-contestar form {
    display: grid;
    margin-top: 8px;
    gap: 8px;
}

.caso-contestar textarea {
    margin: 0;
}

/* ---- Terminal ---- */

.terminal-layout {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.terminal-equipos {
    position: sticky;
    top: 96px;
    display: grid;
    margin: 0;
    padding: 14px;
    gap: 14px;
}

.terminal-grupo ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 4px;
    list-style: none;
}

.terminal-equipo {
    --tono: var(--neutro);

    display: flex;
    width: 100%;
    min-height: 0;
    padding: 8px 10px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--texto-secundario);
    text-align: left;
}

.terminal-equipo:hover {
    transform: none;
    border-color: var(--borde);
    background: var(--panel-elevado);
    color: var(--texto);
}

.terminal-equipo.activo {
    border-color: rgba(24, 211, 158, 0.5);
    background: var(--primario-fondo);
    color: var(--texto);
}

.terminal-equipo.red-online { --tono: var(--correcto); }
.terminal-equipo.red-offline { --tono: var(--peligro); }

.terminal-equipo strong {
    display: block;
    color: inherit;
    font-size: 0.86rem;
}

.terminal-equipo small {
    color: var(--texto-tenue);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 500;
}

.terminal-ventana {
    display: flex;
    min-height: 560px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: #02070b;
    box-shadow: var(--sombra);
}

.terminal-barra {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--borde);
    background: var(--panel);
}

.terminal-barra strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-luces {
    display: flex;
    gap: 6px;
}

.terminal-luces i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff6577;
}

.terminal-luces i:nth-child(2) { background: #f7b84b; }
.terminal-luces i:nth-child(3) { background: #2dd477; }

.terminal-solo-lectura {
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid rgba(45, 212, 119, 0.4);
    border-radius: 999px;
    color: var(--correcto);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.terminal-limpiar {
    min-height: 0;
    padding: 4px 10px;
    border-color: var(--borde);
    background: transparent;
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

.terminal-atajos {
    display: flex;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.terminal-atajos:empty {
    display: none;
}

.terminal-atajo {
    min-height: 0;
    padding: 3px 9px;
    border-color: var(--borde);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto-secundario);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
}

.terminal-atajo:hover {
    transform: none;
    border-color: var(--primario);
    color: var(--primario-claro);
}

.terminal-salida {
    flex: 1 1 auto;
    min-height: 380px;
    max-height: 62vh;
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    color: #c7e6d8;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-eco { color: var(--primario-claro); font-weight: 700; }
.terminal-error { color: #ff9aa6; }
.terminal-sistema { color: var(--texto-tenue); }

.terminal-linea {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--borde);
    background: #050c12;
}

.terminal-prompt {
    flex: 0 0 auto;
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 700;
}

.terminal-linea input {
    flex: 1 1 auto;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.86rem;
}

.terminal-linea input:focus {
    outline: 0;
    box-shadow: none;
}

@media (max-width: 1200px) {
    .agentes-fila {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .caso-cuerpo {
        grid-template-columns: 1fr;
    }

    .terminal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .terminal-equipos {
        position: static;
        min-width: 0;
        gap: 10px;
    }

    .terminal-grupo {
        min-width: 0;
    }

    /* En pantallas angostas cada grupo es una tira que se desliza,
       para que la consola quede a la vista sin bajar tanto. */
    .terminal-grupo ul {
        display: flex;
        margin: 0 -14px;
        padding: 2px 14px 4px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .terminal-grupo ul::-webkit-scrollbar {
        display: none;
    }

    .terminal-grupo li {
        flex: 0 0 auto;
    }

    .terminal-equipo {
        width: auto;
        border-color: var(--borde);
        background: var(--panel-elevado);
        white-space: nowrap;
    }

    .bandeja-fila {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .bandeja-diagnostico,
    .bandeja-chips {
        grid-column: 2 / -1;
    }

    .bandeja-chips {
        justify-content: flex-start;
    }

    .bandeja-lado {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 640px) {
    .agentes-fila {
        display: flex;
        margin: 0 -12px 18px;
        padding: 2px 12px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;
        scrollbar-width: none;
    }

    .agentes-fila::-webkit-scrollbar {
        display: none;
    }

    .agente-tarjeta {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .terminal-ventana {
        min-height: 420px;
    }

    .terminal-atajos {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .terminal-atajos::-webkit-scrollbar {
        display: none;
    }

    .terminal-atajo {
        flex: 0 0 auto;
    }

    .terminal-salida {
        min-height: 280px;
        font-size: 0.72rem;
    }

    .terminal-linea .boton {
        padding: 8px 10px;
    }
}


/* Oficina: dónde empieza lo que ve el cliente tras limpiar su plática */
.charla-corte {
    display: flex;
    margin: 6px 0;
    align-items: center;
    gap: 10px;
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.charla-corte::before,
.charla-corte::after {
    flex: 1 1 auto;
    height: 1px;
    background: var(--borde);
    content: "";
}

.caso-limpiar {
    display: grid;
    margin-top: 14px;
    gap: 6px;
}

.caso-limpiar small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
    line-height: 1.45;
}

.liga-platica form {
    margin-top: 12px;
}

/* Tarea en campo: terminar (con prueba) o «No se pudo realizar» */
.tarea-terminar {
    display: grid;
    gap: 10px;
}

.tarea-terminar label,
.tarea-no-realizada label {
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 700;
}

.tarea-terminar-aviso {
    display: flex;
    margin: 0;
    padding: 10px 12px;
    gap: 10px;
    border: 1px solid rgba(24, 211, 158, 0.3);
    border-radius: var(--radio-pequeno);
    background: var(--primario-fondo);
    color: var(--texto-secundario);
    font-size: 0.84rem;
    line-height: 1.5;
}

.tarea-no-realizada {
    margin-top: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.tarea-no-realizada > summary {
    padding: 12px 14px;
    color: var(--texto-secundario);
    font-weight: 700;
    cursor: pointer;
}

.tarea-no-realizada[open] > summary {
    border-bottom: 1px solid var(--borde);
}

.tarea-no-realizada form {
    display: grid;
    padding: 14px;
    gap: 10px;
}

.tarea-motivos {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 6px;
    border: 0;
}

.tarea-motivos legend {
    margin-bottom: 6px;
    color: var(--texto);
    font-size: 0.86rem;
    font-weight: 700;
}

.tarea-motivo {
    display: flex;
    padding: 9px 11px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    font-weight: 500 !important;
    cursor: pointer;
}

.tarea-motivo input {
    width: auto;
    min-height: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    accent-color: var(--advertencia);
}

.tarea-motivo span {
    flex: 1 1 auto;
    text-align: left;
}

.tarea-motivo:has(input:checked) {
    border-color: rgba(247, 184, 75, 0.55);
    background: var(--advertencia-fondo);
}

/* Instalación que ya activó otra persona */
.instalacion-a-mano {
    margin-top: 18px;
}

.instalacion-a-mano form > .campo-ayuda {
    margin: 0;
}

.instalacion-cliente span {
    display: grid;
    gap: 2px;
}

.instalacion-cliente small {
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.instalacion-cliente input {
    accent-color: var(--primario);
}

.instalacion-cliente:has(input:checked),
.instalacion-a-mano .tarea-motivo:has(input:checked) {
    border-color: rgba(24, 211, 158, 0.55);
    background: var(--primario-fondo);
}

.instalacion-a-mano .buscador-resultados {
    margin-top: 4px;
}

.comentario-cierre .comentario-cuerpo > .estado-badge {
    margin: 0;
}

.tarea-foto-previa {
    max-width: 220px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.comentario-visita .comentario-cuerpo > .estado-badge {
    margin-top: 4px;
}

.comentario-foto img {
    display: block;
    max-width: 260px;
    margin-top: 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.comentario-prueba .comentario-cuerpo p {
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.comentario-prueba-icono {
    float: left;
    margin-right: 6px;
}

/* =========================================================
   Revisar ONU: por qué no tiene cliente en el gestor
   ========================================================= */

.onu-revisar-estado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.onu-revisar-estado > div {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.onu-revisar-veredicto {
    display: grid;
    gap: 10px;
    border-left: 3px solid var(--borde-fuerte);
}

.onu-revisar-veredicto h2 {
    margin: 0;
    font-size: 1.05rem;
}

.onu-revisar-veredicto p {
    margin: 0;
    color: var(--texto-secundario);
    line-height: 1.55;
}

.onu-revisar-mac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.onu-revisar-mac .pagina-etiqueta {
    width: 100%;
}

.onu-revisar-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.onu-revisar-acciones form {
    margin: 0;
}

.onu-revisar-cliente,
.onu-revisar-cola_sin_cliente,
.onu-revisar-pendiente {
    border-left-color: var(--primario);
}

.onu-revisar-ligado {
    border-left-color: var(--correcto);
}

.onu-revisar-sin_ip,
.onu-revisar-ignorado,
.onu-revisar-espera {
    border-left-color: var(--advertencia);
}


/* Clientes: la búsqueda dio con una ONU de la OLT, no con un cliente */
.clientes-onus {
    display: grid;
    gap: 8px;
    border-left: 3px solid var(--primario);
}

.clientes-onus p {
    margin: 0;
    color: var(--texto-secundario);
}

.clientes-onus ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.clientes-onus li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}


/* Editar cliente: los datos técnicos del router (en la ficha solo
   se ve la IP). */

.cliente-datos-tecnicos {
    display: grid;
    margin: 4px 0 14px;
    padding: 12px 14px;
    gap: 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--fondo-profundo);
}

.cliente-datos-tecnicos .pagina-etiqueta {
    margin: 0;
}

.cliente-datos-tecnicos .ficha-lista > div {
    padding: 7px 0;
}

.cliente-datos-tecnicos .boton {
    justify-self: start;
}

@media (max-width: 700px) {
    .cliente-datos-tecnicos .boton {
        justify-self: stretch;
    }
}


/* =========================================================
   Detalle de tarea: encabezado con lo de siempre, «Lo que
   pasa» a todo lo ancho y, en dos columnas, lo que se trabaja
   y a quién/dónde (en el celular, a quién/dónde primero).
   ========================================================= */

.tarea-detalle-instalacion { --tipo-color: var(--primario); }
.tarea-detalle-reparacion { --tipo-color: var(--violeta); }
.tarea-detalle-mantenimiento { --tipo-color: var(--azul); }
.tarea-detalle-infraestructura { --tipo-color: var(--advertencia); }
.tarea-detalle-retiro { --tipo-color: var(--neutro); }

.tarea-detalle .tarea-encabezado-texto h1 {
    margin: 4px 0 10px;
}

.tarea-resuelta {
    margin: 8px 0 0;
    color: var(--correcto);
    font-size: 0.86rem;
    font-weight: 700;
}

.tarea-detalle .tarea-descripcion {
    margin-top: 0;
}

.tarea-garantia-nota {
    margin: 0;
    color: #ffb3bc;
    font-size: 0.85rem;
    line-height: 1.5;
}

.tarea-descripcion p + .tarea-garantia-nota {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(49, 80, 98, 0.7);
}

.tarea-garantia-nota a {
    color: var(--primario-claro);
}

/* El avance */

.tarea-estado-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.tarea-estado-formulario .campo-formulario {
    flex: 1 1 220px;
    margin: 0;
}

.tarea-estado-formulario > .boton {
    flex: 0 0 auto;
}

.tarea-progreso > .campo-ayuda {
    display: block;
    margin-top: 10px;
}

.tarea-vacio {
    margin: 0 0 12px;
}

/* Material */

.tarea-material-cantidad {
    color: var(--primario-claro);
    font-size: 0.82rem;
    font-weight: 700;
}

.tarea-material-nuevo {
    margin-top: 10px;
    border-top: 1px dashed rgba(49, 80, 98, 0.6);
}

.tarea-material-nuevo > summary {
    padding: 12px 0 4px;
    color: var(--primario-claro);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.tarea-material-nuevo .formulario-material {
    margin-top: 8px;
}

/* A quién y dónde */

.tarea-quien .pagina-etiqueta {
    margin-bottom: 4px;
}

.tarea-quien-nombre {
    margin: 0 0 4px;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.tarea-quien-nombre a {
    color: var(--primario-claro);
    text-decoration: none;
}

.tarea-quien-nombre a:hover {
    text-decoration: underline;
}

.tarea-quien .ficha-linea {
    margin-top: 0;
}

.tarea-quien .ficha-direccion {
    margin-top: 12px;
}

.tarea-quien-falta {
    margin: 6px 0 0;
    color: var(--advertencia);
    font-size: 0.82rem;
    font-weight: 700;
}

.tarea-quien > .ficha-nota {
    margin-top: 10px;
}

.tarea-quien .agregar-telefono {
    margin-top: 12px;
}

.tarea-quien .ubicacion-cliente {
    margin-top: 14px;
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    /* Quien va a la casa necesita primero a quién y dónde. */
    .tarea-detalle-cuerpo .ficha-lateral {
        order: -1;
    }
}

@media (max-width: 700px) {
    /* Quién la creó y quién la tiene, uno debajo del otro. */
    .tarea-encabezado .ficha-linea {
        flex-direction: column;
        align-items: flex-start;
    }

    .tarea-encabezado .ficha-linea span + span::before {
        content: none;
    }

    .tarea-estado-formulario .campo-formulario,
    .tarea-estado-formulario > .boton {
        flex-basis: 100%;
    }
}


/* =========================================================
   Catálogo de planes en renglones: velocidad, nombre con cómo
   está armado en una línea, precio y (administración) clientes,
   ingreso y menú ⋯. En el celular cada renglón se acomoda en
   tres líneas.
   ========================================================= */

.planes-indicadores-tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planes-lista {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    list-style: none;
}

.plan-renglon {
    display: grid;
    padding: 14px 18px;
    grid-template-columns: 92px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 6px 18px;
    border-bottom: 1px solid var(--borde);
}

.planes-lista > .plan-renglon:last-child {
    border-bottom: 0;
}

/* Con datos de administración: clientes, ingreso y menú. */
.plan-renglon:has(.plan-renglon-menu),
.plan-renglon-titulos:has(span:nth-child(6)) {
    grid-template-columns: 92px minmax(0, 1fr) 110px 190px 120px 32px;
}

.plan-renglon-titulos {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-renglon-destacado {
    background: linear-gradient(90deg, rgba(24, 211, 158, 0.07), transparent 60%);
}

.plan-renglon-inactivo {
    opacity: 0.75;
}

.plan-renglon-velocidad {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 4px;
    line-height: 1.05;
}

.plan-renglon-velocidad strong {
    grid-row: 1 / span 2;
    color: var(--texto);
    font-size: 1.85rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.plan-renglon-velocidad span {
    color: var(--primario-claro);
    font-size: 0.72rem;
    font-weight: 800;
}

.plan-renglon-velocidad small {
    color: var(--texto-tenue);
    font-size: 0.68rem;
    font-weight: 700;
}

.plan-renglon-nombre {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.plan-renglon-titulo {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.plan-renglon-nombre h3 {
    margin: 0;
    color: var(--texto);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
}

.plan-renglon-nombre h3 a {
    color: inherit;
    text-decoration: none;
}

.plan-renglon-nombre h3 a:hover {
    color: var(--primario-claro);
}

.plan-renglon .plan-etiqueta-destacada {
    position: static;
    box-shadow: none;
    white-space: nowrap;
}

.plan-renglon-armado {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0;
    color: var(--texto-tenue);
    font-size: 0.75rem;
}

.plan-renglon-armado span + span::before {
    content: "·";
    margin: 0 6px;
    color: var(--borde-fuerte);
}

.plan-renglon-aviso {
    display: inline-flex;
    margin-top: 2px;
    padding: 3px 9px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(247, 184, 75, 0.4);
    border-radius: 999px;
    background: var(--advertencia-fondo);
    color: var(--advertencia);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}

.plan-renglon-aviso:hover {
    border-color: var(--advertencia);
    text-decoration: none;
}

.plan-renglon-aviso > span[aria-hidden] {
    font-weight: 900;
}

.plan-renglon-precio {
    text-align: right;
    white-space: nowrap;
}

.plan-renglon-precio strong {
    color: var(--texto);
    font-size: 1.15rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.plan-renglon-precio small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}

.plan-renglon-uso {
    display: grid;
    min-width: 0;
    gap: 4px;
    font-size: 0.82rem;
}

.plan-renglon-uso a {
    color: var(--texto-secundario);
    text-decoration: none;
}

.plan-renglon-uso a strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.plan-renglon-uso a:hover strong {
    color: var(--primario-claro);
}

.plan-renglon-uso small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.plan-renglon-uso .dato-tenue {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-style: italic;
}

.plan-renglon-ingreso {
    display: grid;
    text-align: right;
}

.plan-renglon-ingreso strong {
    color: var(--texto);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.plan-renglon-ingreso small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.plan-renglon-menu {
    justify-self: end;
}

.planes-inactivos .planes-lista {
    margin: 0 18px 18px;
}

@media (max-width: 900px) {

    .planes-indicadores-tres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planes-indicadores-tres > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .plan-renglon-titulos {
        display: none;
    }

    /* En el celular: velocidad, nombre y menú; debajo el precio;
       luego cómo está armado, el aviso y, a lo ancho, clientes e
       ingreso. Sin espacio entre filas para que las que no tienen
       nada (sin aviso) no dejen hueco. */
    .plan-renglon,
    .plan-renglon:has(.plan-renglon-menu) {
        padding: 14px;
        grid-template-areas:
            "vel nombre precio"
            "armado armado armado"
            "aviso aviso aviso";
        grid-template-columns: 74px minmax(0, 1fr) auto;
        align-items: start;
        gap: 0 12px;
    }

    .plan-renglon:has(.plan-renglon-menu) {
        grid-template-areas:
            "vel nombre menu"
            "vel precio precio"
            "armado armado armado"
            "aviso aviso aviso"
            "uso uso ingreso";
        grid-template-columns: 74px minmax(0, 1fr) auto;
    }

    .plan-renglon-nombre { display: contents; }
    .plan-renglon-velocidad { grid-area: vel; }
    .plan-renglon-titulo { grid-area: nombre; align-self: center; }
    .plan-renglon-armado { grid-area: armado; margin-top: 8px; }
    .plan-renglon-aviso { grid-area: aviso; justify-self: start; margin-top: 8px; }
    .plan-renglon-precio { grid-area: precio; }
    .plan-renglon-uso { grid-area: uso; margin-top: 10px; }
    .plan-renglon-ingreso { grid-area: ingreso; align-self: end; margin-top: 10px; }
    .plan-renglon-menu { grid-area: menu; }

    .plan-renglon:has(.plan-renglon-menu) .plan-renglon-precio {
        margin-top: 2px;
        text-align: left;
    }

    /* El número arriba y «Mbps ↑ 8» debajo, para que quepa «100». */
    .plan-renglon-velocidad {
        display: block;
    }

    .plan-renglon-velocidad strong {
        display: block;
        font-size: 1.6rem;
    }

    .plan-renglon-velocidad span {
        margin-right: 3px;
    }

    .plan-renglon-velocidad small {
        white-space: nowrap;
    }

    .planes-inactivos .planes-lista {
        margin: 0 10px 10px;
    }
}


/* =========================================================
   Localidades en renglones: comunidad (con su router, prórroga
   y avisos), clientes, ingreso, enlace en la hora pico, precios
   y menú ⋯. La orilla izquierda toma el color del enlace.
   ========================================================= */

.localidades-lista {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
    list-style: none;
}

.localidad-renglon {
    display: grid;
    padding: 14px 18px;
    grid-template-columns: minmax(0, 1fr) 110px 110px 250px 250px 32px;
    align-items: center;
    gap: 8px 18px;
    border-bottom: 1px solid var(--borde);
    box-shadow: inset 3px 0 0 transparent;
}

.localidades-lista > .localidad-renglon:last-child {
    border-bottom: 0;
}

.localidad-renglon[hidden] {
    display: none;
}

.localidad-renglon-tecnico {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.localidad-renglon-holgado { box-shadow: inset 3px 0 0 var(--correcto); }
.localidad-renglon-ajustado { box-shadow: inset 3px 0 0 var(--advertencia); }
.localidad-renglon-rebasado { box-shadow: inset 3px 0 0 var(--peligro); }

.localidad-renglon-inactiva {
    opacity: 0.75;
}

.localidad-renglon-titulos {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--texto-tenue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.localidad-renglon-nombre {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.localidad-renglon-nombre h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.localidad-renglon-nombre h3 a {
    color: inherit;
    text-decoration: none;
}

.localidad-renglon-nombre h3 a:hover {
    color: var(--primario-claro);
}

.localidad-renglon-chips {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.localidad-chip {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 9px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    text-decoration: none;
}

.localidad-chip > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.localidad-chip-prorroga {
    border-color: rgba(24, 211, 158, 0.35);
    background: var(--primario-fondo);
}

.localidad-chip-prorroga strong {
    color: var(--primario-claro);
}

.localidad-chip-aviso {
    border-color: rgba(247, 184, 75, 0.35);
    background: var(--advertencia-fondo);
}

.localidad-chip-aviso strong {
    color: var(--advertencia);
}

.localidad-chip-aviso:hover {
    border-color: var(--advertencia);
    text-decoration: none;
}

.localidad-renglon-clientes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.localidad-renglon-clientes .conteo-clientes {
    display: inline;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.localidad-renglon-clientes .conteo-desglose {
    flex-basis: 100%;
    color: var(--texto-tenue);
}

.localidad-renglon-ingreso {
    display: grid;
    text-align: right;
}

.localidad-renglon-ingreso strong {
    color: var(--texto);
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}

.localidad-renglon-ingreso small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.localidad-renglon-enlace {
    display: grid;
    min-width: 0;
    justify-items: start;
    gap: 5px;
}

.localidad-renglon-enlace .estado-badge {
    white-space: nowrap;
}

.localidad-renglon-enlace .localidad-uso-barra {
    width: 100%;
}

.localidad-renglon-enlace small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    line-height: 1.4;
}

.localidad-renglon-enlace small a {
    color: var(--primario-claro);
}

.localidad-renglon-enlace .dato-alerta {
    color: var(--advertencia);
}

.localidad-renglon .localidad-precios div {
    padding: 6px 9px;
}

.localidad-renglon .localidad-precios dd {
    font-size: 0.86rem;
}

.localidad-renglon-menu {
    justify-self: end;
}

.localidades-inactivas .localidades-lista {
    margin: 0 18px 18px;
}

@media (max-width: 1180px) {

    .localidad-renglon-titulos {
        display: none;
    }

    /* Nombre y menú; clientes e ingreso; el enlace; los precios. */
    .localidad-renglon {
        padding: 14px;
        grid-template-areas:
            "nombre nombre menu"
            "clientes ingreso ingreso"
            "enlace enlace enlace"
            "precios precios precios";
        grid-template-columns: minmax(0, 1fr) auto 32px;
        align-items: start;
        gap: 10px 12px;
    }

    .localidad-renglon-tecnico {
        grid-template-areas:
            "nombre"
            "precios";
        grid-template-columns: minmax(0, 1fr);
    }

    .localidad-renglon-nombre { grid-area: nombre; }
    .localidad-renglon-clientes { grid-area: clientes; }
    .localidad-renglon-ingreso { grid-area: ingreso; }
    .localidad-renglon-enlace { grid-area: enlace; }
    .localidad-renglon .localidad-precios { grid-area: precios; }
    .localidad-renglon-menu { grid-area: menu; }

    .localidades-inactivas .localidades-lista {
        margin: 0 10px 10px;
    }
}

@media (max-width: 700px) {

    /* Tres filtros caben en dos líneas: mejor que esconder uno. */
    .localidades-herramientas .filtros-chips {
        flex-wrap: wrap;
        overflow: visible;
    }

    /* Para administración, los precios en una sola línea: también
       están en «Editar». El técnico conserva sus tres casillas. */
    .localidad-renglon:not(.localidad-renglon-tecnico) .localidad-precios {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 12px;
        border: 0;
        border-radius: 0;
    }

    .localidad-renglon:not(.localidad-renglon-tecnico) .localidad-precios div {
        display: flex;
        padding: 0;
        align-items: baseline;
        gap: 4px;
    }

    .localidad-renglon:not(.localidad-renglon-tecnico) .localidad-precios div + div {
        border-left: 0;
    }

    .localidad-renglon:not(.localidad-renglon-tecnico) .localidad-precios dd {
        font-size: 0.8rem;
    }
}


/* =========================================================
   Oficina: pestañas arriba de casos, alertas, red, inventario,
   historial, usuarios y terminal, y su resumen.
   ========================================================= */

.oficina-pestanas {
    display: flex;
    margin: -8px 0 18px;
    align-items: center;
    gap: 14px;
}

.oficina-pestanas-titulo {
    flex: 0 0 auto;
    color: var(--primario);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.oficina-pestanas-lista {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--panel);
    scrollbar-width: none;
}

.oficina-pestanas-lista::-webkit-scrollbar {
    display: none;
}

.oficina-pestana {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 13px;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    color: var(--texto-secundario);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.oficina-pestana:hover {
    background: var(--panel-elevado);
    color: var(--texto);
    text-decoration: none;
}

.oficina-pestana-activa,
.oficina-pestana-activa:hover {
    background: var(--primario-fondo);
    box-shadow: inset 0 0 0 1px rgba(24, 211, 158, 0.45);
    color: var(--primario-claro);
}

.oficina-pestana-cuenta {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    background: var(--panel-elevado);
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.oficina-pestana-cuenta-aviso {
    background: var(--peligro-fondo);
    color: #ff9aa6;
}

/* Dentro de la Oficina las pestañas ya dicen dónde estás: el
   encabezado de cada pantalla va más chico y sin su etiqueta. */
.en-oficina .pagina-encabezado {
    margin-bottom: 18px;
    padding: 18px 22px;
}

.en-oficina .pagina-encabezado h1 {
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

.en-oficina .pagina-encabezado .pagina-subtitulo {
    margin-top: 4px;
    font-size: 0.9rem;
}

.en-oficina .pagina-encabezado > div:first-child > .pagina-etiqueta:first-child {
    display: none;
}

/* Resumen */

.oficina-resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
}

.oficina-resumen .card {
    margin: 0;
}

.resumen-historial,
.resumen-radio {
    grid-column: 1 / -1;
}

.resumen-bloque-encabezado {
    display: flex;
    margin-bottom: 12px;
    padding-bottom: 12px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--borde);
}

.resumen-bloque-encabezado h2 {
    margin: 0;
    font-size: 1.15rem;
}

.resumen-bloque-dato {
    margin: 4px 0 0;
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.resumen-bloque-dato.dato-alerta {
    color: #ff9aa6;
    font-weight: 700;
}

.resumen-ver {
    flex: 0 0 auto;
    color: var(--primario-claro);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.resumen-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resumen-lista li + li {
    border-top: 1px dashed rgba(49, 80, 98, 0.6);
}

.resumen-fila {
    display: flex;
    padding: 10px 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: inherit;
    text-decoration: none;
}

.resumen-fila:hover {
    text-decoration: none;
}

.resumen-fila:hover strong {
    color: var(--primario-claro);
}

.resumen-fila-titulo {
    display: grid;
    min-width: 0;
    flex: 1 1 200px;
}

.resumen-fila-titulo strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.resumen-fila-titulo small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumen-fila-texto {
    flex: 1 1 100%;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    line-height: 1.4;
}

.resumen-fila-texto:empty {
    display: none;
}

.resumen-alertas .atencion-item {
    padding: 10px 12px;
}

.resumen-mas {
    display: inline-block;
    margin-top: 10px;
    color: var(--primario-claro);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1000px) {
    .oficina-resumen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .oficina-pestanas {
        margin: -4px 0 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* En el teléfono no se esconde ninguna: bajan a otra línea. */
    .oficina-pestanas-titulo {
        display: none;
    }

    .oficina-pestanas-lista {
        flex-wrap: wrap;
        overflow: visible;
    }

    .oficina-pestana {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .en-oficina .pagina-encabezado {
        padding: 16px;
    }
}


/* En el resumen la hora va como «hace 3 h»: necesita más espacio.
   En el teléfono la hora ya va abajo del texto (como en Historial). */
.resumen-historial .evento time {
    white-space: nowrap;
    font-family: inherit;
}

@media (min-width: 761px) {
    .resumen-historial .evento {
        grid-template-columns: 96px 32px minmax(0, 1fr);
    }

    .resumen-historial .evento::before {
        left: 123px;
    }
}


/* MikroTiks: «en línea» y «sin conexión» van en un solo cuadro. */
.cobranza-indicadores-tres {
    grid-template-columns: 1.4fr 1fr 1fr;
}

@media (max-width: 1100px) {
    .cobranza-indicadores-tres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Los routers en línea arriba a todo lo ancho; abajo, los otros dos. */
    .cobranza-indicadores-tres .cobranza-kpi:first-child {
        grid-column: 1 / -1;
    }
}

/* En el teléfono OLTs y Mudanzas van lado a lado, y registrar abajo. */
@media (max-width: 700px) {
    .mikrotiks-encabezado .pagina-acciones {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mikrotiks-encabezado .pagina-acciones .boton:last-child {
        grid-column: 1 / -1;
    }
}


/* Supervisor: comunidades que no cuentan en las cifras de dinero. */
.reporte-sin-contar {
    margin: 8px 0 0;
    color: var(--texto-tenue);
    font-size: 0.8rem;
}

.reporte-sin-contar::before {
    content: "🔒 ";
}

.usuario-todo-dinero {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.usuario-sin-dinero {
    border-color: rgba(255, 154, 166, 0.35);
    color: #ff9aa6;
}


/* Localidad: el queue padre es opcional, va plegado. */
.localidad-avanzado > summary {
    list-style: none;
    cursor: pointer;
}

.localidad-avanzado > summary::-webkit-details-marker {
    display: none;
}

.localidad-avanzado > summary h2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 800;
}

.localidad-avanzado > summary h2 small {
    flex: 1 1 100%;
    order: 2;
    margin-left: 36px;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    font-weight: 500;
}

.localidad-avanzado > summary h2::after {
    order: 1;
    margin-left: auto;
    color: var(--texto-tenue);
    content: "▸";
}

.localidad-avanzado[open] > summary h2::after {
    content: "▾";
}

.localidad-avanzado[open] > summary {
    margin-bottom: 16px;
}

.localidad-avanzado[open] {
    display: grid;
    gap: 16px;
}


/* Pasar a planes con ráfaga. */
.rafaga-lista {
    display: grid;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    gap: 10px;
}

.rafaga-fila {
    display: grid;
    padding: 14px 16px;
    grid-template-columns: minmax(0, 1fr) auto minmax(220px, 300px);
    align-items: center;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
}

.rafaga-origen {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.rafaga-origen small {
    color: var(--texto-tenue);
}

.rafaga-flecha {
    color: var(--primario);
    font-size: 1.3rem;
}

.rafaga-destino {
    margin: 0;
}

.rafaga-resultado {
    margin-bottom: 18px;
}

.rafaga-cambios {
    margin: 10px 0;
    padding-left: 18px;
}

@media (max-width: 700px) {
    .rafaga-fila {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rafaga-flecha {
        display: none;
    }
}

.dialogo-cambiar-plan .planes-eleccion {
    margin: 0;
}


/* Rutas de cobro: una comunidad por renglón, desplegable (usa el
   mismo renglón que el efectivo por recoger). */
.rutas-total {
    margin-bottom: 14px;
}

.rutas-total h2 {
    margin: 2px 0 4px;
}

.rutas-total-dato {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.rutas-herramientas {
    display: flex;
    flex-wrap: wrap;
    margin: 14px 0 6px;
    align-items: center;
    gap: 8px;
}

.rutas-buscar {
    flex: 1 1 280px;
}

.rutas-clientes {
    margin: 0;
    padding: 0 22px 14px;
    list-style: none;
    border-top: 1px solid var(--borde);
}

.rutas-cliente {
    display: grid;
    padding: 11px 0;
    grid-template-columns: minmax(0, 1fr) auto 96px auto;
    align-items: center;
    gap: 12px;
}

.rutas-cliente + .rutas-cliente {
    border-top: 1px dashed var(--borde);
}

.rutas-cliente[hidden] {
    display: none;
}

.rutas-cliente-quien {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.rutas-cliente-nombre {
    overflow: hidden;
    color: var(--texto);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rutas-cliente-quien small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rutas-cliente-monto {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rutas-cliente-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.rutas-comunidad[hidden],
.rutas-sin-resultados[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .rutas-clientes {
        padding: 0 14px 10px;
    }

    .rutas-cliente {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "quien monto"
            "estado acciones";
        gap: 8px 10px;
    }

    .rutas-cliente-quien { grid-area: quien; }
    .rutas-cliente .estado-badge { grid-area: estado; justify-self: start; }
    .rutas-cliente-monto { grid-area: monto; }
    .rutas-cliente-acciones { grid-area: acciones; }

    .rutas-cliente-quien small {
        white-space: normal;
    }
}

.rutas-total-dato .dato-alerta,
.rutas-comunidad .caja-cobrador-nombre .dato-alerta {
    color: #ff9aa6;
    font-weight: 600;
}


/* Efectivo por recoger: cuánto trae cada cobrador en total. */
.caja-por-cobrador {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    align-items: center;
    gap: 8px;
}

.caja-por-cobrador-titulo {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.caja-por-cobrador-dato {
    display: inline-flex;
    padding: 5px 10px;
    align-items: baseline;
    gap: 6px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--panel-elevado);
    font-size: 0.84rem;
}

.caja-por-cobrador-dato strong {
    color: var(--primario);
    font-variant-numeric: tabular-nums;
}

.caja-por-cobrador-dato small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
}


/* =========================================================
   Cuentas con técnicos
   ========================================================= */

.cuentas-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
}

.cuentas-fila {
    display: grid;
    padding: 16px 20px;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(150px, auto) 16px;
    align-items: center;
    gap: 14px;
    color: var(--texto);
    text-decoration: none;
}

.cuentas-fila:hover {
    border-color: rgba(24, 211, 158, 0.4);
    text-decoration: none;
}

.cuentas-fila-quien,
.cuentas-fila-dato {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.cuentas-fila-quien strong {
    font-size: 1rem;
}

.cuentas-fila-quien small,
.cuentas-fila-dato small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.cuentas-fila-quien .plan-etiqueta {
    margin-right: 6px;
}

.cuentas-fila-dato strong {
    font-variant-numeric: tabular-nums;
}

.cuentas-fila-neto {
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cuentas-entrega {
    color: var(--primario);
}

.cuentas-se-le-paga {
    color: var(--advertencia);
}

.cuentas-fila-ir {
    color: var(--texto-tenue);
    font-size: 1.3rem;
}

.cuentas-monto-editable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cuentas-monto-editable .campo-con-unidad {
    width: 120px;
}

.cuentas-monto-editable input {
    margin: 0;
    padding: 6px 8px;
}

.cuentas-cierre {
    display: grid;
    margin-bottom: 18px;
    gap: 12px;
}

.cuentas-cierre-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    font-size: 0.95rem;
}

.cuentas-cierre-neto strong {
    color: var(--primario);
    font-size: 1.2rem;
}

.cuentas-cierre .campo-formulario {
    margin: 0;
}

.caja-nota-cuentas {
    margin: 10px 14px 0;
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.caja-concepto {
    font-weight: 700;
}

.tarea-cobros-lista li form {
    margin: 6px 0 0;
}

@media (max-width: 760px) {
    .cuentas-fila {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "quien neto"
            "trae debe";
        gap: 10px;
    }

    .cuentas-fila-quien { grid-area: quien; }
    .cuentas-fila-neto { grid-area: neto; }
    .cuentas-fila-dato:nth-of-type(2) { grid-area: trae; }
    .cuentas-fila-dato:nth-of-type(3) { grid-area: debe; }
    .cuentas-fila-ir { display: none; }
}

/* Inicio del técnico: lo que trae y lo que lleva ganado. */
.inicio-mis-cuentas {
    display: grid;
    gap: 10px;
    color: var(--texto);
    text-decoration: none;
}

.inicio-mis-cuentas:hover {
    border-color: rgba(24, 211, 158, 0.4);
    text-decoration: none;
}

.inicio-mis-cuentas-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.inicio-mis-cuentas-datos span {
    display: grid;
    gap: 2px;
}

.inicio-mis-cuentas-datos strong {
    color: var(--primario);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.inicio-mis-cuentas-datos small {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.destajo-tarifas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 14px;
}

.destajo-tarifas[hidden] {
    display: none;
}

.destajo-tarifas .campo-formulario {
    margin: 0;
}

/* Cuentas de un técnico: trae, se le debe (si es por destajo) y neto. */
.cuentas-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cuentas-indicadores-tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .cuentas-indicadores-tres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cuentas-indicadores .cobranza-kpi-principal {
        grid-column: 1 / -1;
    }
}


/* Comprobante de una recolección: cuentas por mes y las anteriores. */
.recoleccion-meses tfoot td {
    padding-top: 12px;
    border-top: 1px solid var(--borde-fuerte);
}

.recoleccion-valor small.dato-tenue {
    display: block;
    font-weight: 400;
}

.recoleccion-nota {
    margin-top: 12px;
}

.recoleccion-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.recoleccion-lista li {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.recoleccion-lista li strong {
    margin-left: auto;
}

@media (max-width: 900px) {
    /* Apilada, el total ya está arriba en los recuadros. */
    .recoleccion-meses tfoot {
        display: none;
    }

    .recoleccion-meses td.recoleccion-mes {
        font-weight: 700;
    }

    .recoleccion-mes .plan-etiqueta {
        white-space: nowrap;
    }

    .recoleccion-valor {
        text-align: right;
    }
}

@media print {
    .recoleccion-anteriores {
        display: none;
    }
}


/* =========================================================
   Menú ⋯ compacto (localidades): una acción por renglón con su
   ícono; la explicación sale al pasar el mouse. Cabe sin scroll.
   ========================================================= */

.menu-compacto > .tarjeta-menu-panel {
    min-width: 240px;
    gap: 0;
}

.menu-compacto .tarjeta-menu-panel a,
.menu-compacto .tarjeta-menu-panel button,
.menu-compacto .menu-deshabilitado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    white-space: nowrap;
}

.menu-compacto .menu-icono {
    flex: 0 0 18px;
    width: 18px;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
}

.menu-compacto .tarjeta-menu-panel small {
    margin-left: auto;
    padding-left: 8px;
}

.menu-compacto .tarjeta-menu-titulo {
    padding: 10px 10px 4px;
}

.menu-compacto .menu-hoja-titulo + .tarjeta-menu-titulo {
    padding-top: 4px;
}

.menu-compacto .menu-deshabilitado {
    color: var(--texto-tenue);
    font-size: 0.85rem;
    cursor: not-allowed;
}

.menu-compacto .menu-deshabilitado strong {
    font-weight: 600;
}

.menu-compacto .menu-deshabilitado small {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.72rem;
}

/* Si abajo no cabe, el menú abre hacia arriba (menu-hoja.js). */
.menu-hoja.menu-arriba > .tarjeta-menu-panel {
    top: auto;
    bottom: 34px;
}

@media (max-width: 700px) {
    .menu-compacto .tarjeta-menu-panel a,
    .menu-compacto .tarjeta-menu-panel button,
    .menu-compacto .menu-deshabilitado {
        min-height: 44px;
        white-space: normal;
    }

    .menu-compacto .menu-hoja-titulo + .tarjeta-menu-titulo {
        padding-top: 10px;
    }
}


/* =========================================================
   Seguimiento de un caso: qué pasó con su tarea y cuánto tardó.
   ========================================================= */

.chip-reparado {
    border-color: rgba(52, 211, 153, 0.5);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.caso-seguimiento {
    margin: 0;
    border-left: 3px solid var(--borde-fuerte);
}

.caso-seguimiento-reparada {
    border-left-color: var(--correcto);
}

.caso-seguimiento-en_proceso {
    border-left-color: var(--advertencia);
}

.caso-seguimiento h2 {
    margin: 4px 0 2px;
    font-size: 1.15rem;
}

.caso-seguimiento-tiempo {
    margin: 0 0 14px;
    color: var(--texto-secundario);
}

.caso-seguimiento-tiempo strong {
    color: var(--texto);
}

.caso-seguimiento-reparada .caso-seguimiento-tiempo strong {
    color: var(--primario-claro);
}

.caso-linea {
    position: relative;
    display: grid;
    margin: 0 0 14px;
    padding: 0;
    gap: 12px;
    list-style: none;
}

.caso-linea::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 2px;
    background: var(--borde);
}

.caso-linea li {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
}

.caso-linea-punto {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 2px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--panel);
}

.caso-linea li > div {
    display: grid;
    gap: 1px;
}

.caso-linea time {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.caso-linea small {
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.caso-linea-reporte .caso-linea-punto,
.caso-linea-tarea .caso-linea-punto {
    border-color: var(--primario);
}

.caso-linea-visita .caso-linea-punto {
    border-color: var(--advertencia);
    background: var(--advertencia);
}

.caso-linea-reparada .caso-linea-punto,
.caso-linea-cierre .caso-linea-punto {
    border-color: var(--correcto);
    background: var(--correcto);
}

.caso-linea-cancelada .caso-linea-punto {
    border-color: var(--peligro);
}

.caso-seguimiento-falta {
    border-left-color: var(--peligro);
}

.caso-seguimiento-falta h2 {
    color: var(--peligro);
}

.caso-seguimiento form {
    margin: 0;
}


/* =========================================================
   Tablero de tareas en la computadora: las columnas se acomodan
   en renglones (sin barra de lado, que en Windows obligaba a bajar
   hasta el final) y cada una tiene un alto máximo: si un técnico
   trae muchas tareas, su columna se recorre por dentro con la rueda
   del mouse sin empujar a las demás. En el celular sigue de lado,
   una columna a la vez.
   ========================================================= */

@media (min-width: 721px) {
    .tablero {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        align-items: start;
        overflow-x: visible;
    }

    /* Con tope fijo los renglones no quedan altísimos: el segundo
       renglón se ve sin tener que bajar mucho. */
    .tablero-columna {
        max-height: min(620px, calc(100vh - 110px));
        max-height: min(620px, calc(100dvh - 110px));
    }

    .tablero-lista {
        flex: 1 1 auto;
        min-height: 44px;
        margin-right: -6px;
        padding-right: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--borde-fuerte) transparent;
    }

    .tablero-lista::-webkit-scrollbar {
        width: 8px;
    }

    .tablero-lista::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: var(--borde-fuerte);
    }
}


/* Tablero: cada columna muestra sus comunidades plegadas (cuántas
   tareas hay en cada una); al tocar el encabezado se despliegan. */
.tablero-plegado .tablero-lista > .tarea-tarjeta:not(.grupo-abierto) {
    display: none;
}

.tarea-grupo-plegable {
    margin-top: 0;
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.tarea-grupo-plegable::before {
    content: "▸";
    flex: 0 0 auto;
    color: var(--texto-tenue);
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.tarea-grupo-abierto::before {
    transform: rotate(90deg);
}

.tarea-grupo-plegable:hover,
.tarea-grupo-plegable:focus-visible {
    outline: none;
    background: var(--panel-elevado);
    color: var(--texto);
}

.tarea-grupo-abierto {
    color: var(--texto);
}

/* Lo que no tiene técnico va abajo, en su propio renglón. */
.tablero-separador {
    display: none;
}

@media (min-width: 721px) {
    .tablero-separador {
        display: flex;
        grid-column: 1 / -1;
        margin-top: 10px;
        align-items: center;
        gap: 10px;
        color: var(--texto-tenue);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .tablero-separador::after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--borde);
    }
}

/* Planes: las cortesías, para revisar quién tiene servicio sin pagar. */
.indicador-plan-cortesia {
    border-color: var(--violeta-fondo);
    background:
        linear-gradient(135deg, var(--violeta-fondo), transparent 70%),
        var(--panel);
}

.indicador-plan-cortesia:hover {
    border-color: var(--violeta);
}

.indicador-plan-cortesia .indicador-plan-valor,
.indicador-plan-cortesia small {
    color: var(--violeta);
}

.indicador-plan-cortesia small {
    font-weight: 700;
}


/* =========================================================
   Cobranza: pestañas, cuentas de los cobradores y notas al pie.
   ========================================================= */

.cobranza-subvistas {
    display: flex;
    margin: -8px 0 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.cobranza-notas {
    margin: 26px 0 8px;
    padding: 16px 18px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    color: var(--texto-secundario);
    font-size: 0.84rem;
}

.cobranza-notas h2 {
    margin: 0 0 8px;
    color: var(--texto);
    font-size: 0.95rem;
}

.cobranza-notas ul {
    display: grid;
    margin: 0;
    padding-left: 18px;
    gap: 5px;
}

.cobranza-notas strong {
    color: var(--texto);
}

.texto-aviso {
    color: var(--advertencia) !important;
}

/* ---- Lista de cuentas (administración) ---- */

.cuentas-cobradores {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.cuentas-cobrador-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) 16px;
    padding: 14px 16px;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    color: inherit;
    text-decoration: none;
}

.cuentas-cobrador-fila:hover {
    border-color: var(--borde-fuerte);
    text-decoration: none;
}

.cuentas-cobrador-quien,
.cuentas-cobrador-dato {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cuentas-cobrador-quien small,
.cuentas-cobrador-dato small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.cuentas-cobrador-dato strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.cuentas-cobrador-trae strong {
    font-size: 1.2rem;
}

.cuentas-cobrador-ir {
    color: var(--texto-tenue);
    font-size: 1.3rem;
}

.cuentas-pdf-form {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.cuentas-pdf-form .campo-formulario {
    display: grid;
    margin: 0;
    min-width: 220px;
    gap: 6px;
}

.cuentas-pdf-form select {
    margin: 0;
}

/* ---- Cuenta de un cobrador ---- */

.cuenta-mes {
    margin-bottom: 16px;
    padding: 0;
}

.cuenta-mes-resumen {
    display: flex;
    padding: 16px 18px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    list-style: none;
    cursor: pointer;
}

.cuenta-mes-resumen::-webkit-details-marker {
    display: none;
}

.cuenta-mes-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
}

.cuenta-mes[open] .caja-cobrador-icono {
    transform: rotate(45deg);
}

.cuenta-mes-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.cuenta-mes-cifras strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.cuenta-mes > :not(summary) {
    margin-right: 18px;
    margin-left: 18px;
}

.cuenta-formula {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2px;
    margin-bottom: 14px;
    padding: 12px 14px;
    align-items: center;
    gap: 10px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.cuenta-formula > div {
    display: grid;
    gap: 2px;
}

.cuenta-formula small {
    color: var(--texto-tenue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cuenta-formula strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.cuenta-formula > span {
    color: var(--texto-tenue);
    font-size: 1.1rem;
    font-weight: 800;
}

.cuenta-formula-total strong {
    color: var(--primario-claro);
    font-size: 1.25rem;
}

.cuenta-nota {
    margin-top: -6px;
    margin-bottom: 12px;
}

.cuenta-venia {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.cuenta-venia > summary {
    color: var(--texto-secundario);
    font-size: 0.86rem;
    cursor: pointer;
}

.cuenta-venia[open] > summary {
    margin-bottom: 10px;
}

.cuenta-linea {
    display: grid;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.cuenta-pago {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto 130px;
    padding: 10px 2px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--borde);
}

.cuenta-pago-otro {
    opacity: 0.72;
}

.cuenta-cuando {
    color: var(--texto-secundario);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.cuenta-hora {
    color: var(--texto-tenue);
}

.cuenta-quien {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.cuenta-quien a {
    overflow: hidden;
    color: var(--texto);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta-quien small {
    color: var(--texto-tenue);
    font-size: 0.76rem;
}

.cuenta-monto {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cuenta-estado {
    justify-self: end;
    padding: 3px 9px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.cuenta-estado-entregado {
    border-color: rgba(45, 212, 119, 0.4);
    color: var(--correcto);
}

.cuenta-estado-pendiente {
    border-color: rgba(247, 184, 75, 0.5);
    color: var(--advertencia);
}

.cuenta-estado-otro {
    color: var(--texto-tenue);
}

.cuenta-recoleccion {
    display: flex;
    margin: 6px 0;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    border-left: 3px solid var(--correcto);
    border-radius: 6px;
    background: rgba(45, 212, 119, 0.08);
    color: var(--texto-secundario);
    font-size: 0.85rem;
}

.cuenta-recoleccion strong {
    color: var(--correcto);
}

.cuenta-mes-pie {
    display: flex;
    margin-top: 14px;
    margin-bottom: 16px;
    justify-content: flex-end;
}

/* Su cuenta en el Resumen del cobrador. */
.mi-cuenta-mini {
    display: grid;
    margin: 0 0 12px;
    gap: 6px;
}

.mi-cuenta-mini > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.mi-cuenta-mini dt {
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.mi-cuenta-mini dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mi-cuenta-mini-total {
    padding-top: 6px;
    border-top: 1px solid var(--borde);
}

.mi-cuenta-mini-total dd {
    color: var(--primario-claro);
}

@media (max-width: 760px) {
    .cuentas-cobrador-fila {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cuentas-cobrador-quien {
        grid-column: 1 / -1;
    }

    .cuentas-cobrador-ir {
        display: none;
    }

    .cuenta-pago {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }

    .cuenta-cuando {
        grid-column: 1 / -1;
        order: -1;
    }

    .cuenta-estado {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .cuenta-mes > :not(summary) {
        margin-right: 12px;
        margin-left: 12px;
    }

    .cuenta-mes-resumen {
        padding: 14px 12px;
    }

    .cuenta-formula {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Oficina → Resumen: la copia del respaldo fuera del servidor. */
.resumen-respaldo {
    grid-column: 1 / -1;
    border-left: 3px solid var(--borde-fuerte);
}

.resumen-respaldo-ok {
    border-left-color: var(--correcto);
}

.resumen-respaldo-mal {
    border-left-color: var(--advertencia);
}

.resumen-respaldo-descarga {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.resumen-respaldo-descarga form {
    margin: 0;
}

.resumen-respaldo-descarga .ficha-nota {
    flex: 1 1 320px;
    margin: 0;
}


/* Control de IPs: IPs de clientes sin reservar */

.sin-reserva-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.sin-reserva-chips small,
.sin-reserva-detalle {
    display: block;
    color: var(--texto-secundario);
    font-size: 0.74rem;
}

.sin-reserva-chips small {
    display: inline;
}

.sin-reserva-motivo {
    display: block;
    margin-top: 4px;
    color: var(--advertencia);
    font-size: 0.74rem;
    line-height: 1.4;
}

tr.sin-reserva-revisar td:first-child {
    box-shadow: inset 3px 0 0 var(--advertencia);
}

.sin-reserva-nombre {
    font-weight: 700;
}

@media (max-width: 900px) {

    .tabla-responsive tr.sin-reserva-fila td.sin-reserva-celda:first-child {
        display: block;
        text-align: left;
    }

    .tabla-responsive tr.sin-reserva-fila td.sin-reserva-celda:first-child::before {
        content: none;
    }

    .tabla-responsive tr.sin-reserva-fila td.sin-reserva-accion .control-ips-acciones {
        justify-content: flex-end;
    }

    tr.sin-reserva-revisar td:first-child {
        box-shadow: none;
    }

    .tabla-responsive tr.sin-reserva-revisar {
        box-shadow: inset 3px 0 0 var(--advertencia);
    }
}

/* Oficina → Casos: el interruptor de la asignación automática. */
.oficina-asignacion {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.oficina-asignacion .enlace-boton {
    font-size: 0.74rem;
}

.oficina-encabezado .ficha-encabezado-estado {
    align-items: center;
}


/* Clientes → Revisar datos */

.duplicados-lista {
    display: grid;
    gap: 10px;
}

.duplicado {
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
}

.duplicado-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.duplicado-motivos,
.duplicado-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.duplicado-par {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.duplicado-cliente {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
}

.duplicado-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.duplicado-nombre {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.duplicado-datos {
    margin: 4px 0 0;
    color: var(--texto-secundario);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.duplicado-pie {
    margin: 0;
}

.revisar-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.revisar-comunidad {
    margin: 0;
}

.revisar-comunidad select {
    min-width: 220px;
    margin: 0;
}

@media (max-width: 760px) {
    .duplicado-par {
        grid-template-columns: minmax(0, 1fr);
    }

    .revisar-comunidad,
    .revisar-comunidad select {
        width: 100%;
    }
}


/* Probar cliente: la prueba en vivo */

.prueba-en-vivo {
    max-width: 760px;
}

.prueba-en-vivo-cabeza {
    display: flex;
    align-items: center;
    gap: 14px;
}

.prueba-en-vivo-cabeza strong {
    display: block;
    font-size: 1.02rem;
}

.prueba-en-vivo-cabeza small {
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

.prueba-en-vivo-radar {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primario-fondo);
}

.prueba-en-vivo-radar::before,
.prueba-en-vivo-radar::after {
    position: absolute;
    inset: 0;
    border: 2px solid var(--primario);
    border-radius: 50%;
    content: "";
    animation: prueba-onda 1.8s ease-out infinite;
}

.prueba-en-vivo-radar::after {
    animation-delay: 0.9s;
}

@keyframes prueba-onda {
    from { opacity: 0.9; transform: scale(0.35); }
    to { opacity: 0; transform: scale(1.25); }
}

.prueba-en-vivo-fallo .prueba-en-vivo-radar::before,
.prueba-en-vivo-fallo .prueba-en-vivo-radar::after {
    animation: none;
    border-color: var(--peligro);
    opacity: 1;
    transform: none;
}

.prueba-en-vivo-barra {
    overflow: hidden;
    height: 6px;
    margin: 16px 0 6px;
    border-radius: 999px;
    background: var(--panel-suave);
}

.prueba-en-vivo-barra span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primario);
    transition: width 0.4s ease;
}

.prueba-pasos {
    display: grid;
    gap: 2px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.prueba-paso {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 0.88rem;
}

.prueba-paso:last-child {
    border-bottom: 0;
}

.prueba-paso-icono {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--borde-fuerte);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.prueba-paso-resultado {
    color: var(--texto-secundario);
    font-size: 0.8rem;
    text-align: right;
}

.prueba-paso-en-curso {
    color: var(--texto);
}

.prueba-paso-en-curso .prueba-paso-icono {
    border-color: var(--primario);
    border-right-color: transparent;
    animation: prueba-gira 0.8s linear infinite;
}

@keyframes prueba-gira {
    to { transform: rotate(360deg); }
}

.prueba-paso-bien,
.prueba-paso-mal,
.prueba-paso-aviso {
    color: var(--texto);
}

.prueba-paso-bien .prueba-paso-icono {
    border-color: var(--correcto);
    background: var(--correcto);
    color: var(--fondo-profundo);
}

.prueba-paso-bien .prueba-paso-icono::before { content: "✓"; }

.prueba-paso-mal .prueba-paso-icono {
    border-color: var(--peligro);
    background: var(--peligro);
    color: var(--fondo-profundo);
}

.prueba-paso-mal .prueba-paso-icono::before { content: "✕"; }

.prueba-paso-mal .prueba-paso-resultado { color: var(--peligro); }

.prueba-paso-aviso .prueba-paso-icono {
    border-color: var(--advertencia);
    background: var(--advertencia);
    color: var(--fondo-profundo);
}

.prueba-paso-aviso .prueba-paso-icono::before { content: "!"; }

.prueba-paso-aviso .prueba-paso-resultado { color: var(--advertencia); }

.prueba-paso-omitido {
    opacity: 0.45;
}

.prueba-en-vivo-error {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--peligro);
    border-radius: var(--radio-pequeno);
    background: var(--peligro-fondo);
}

.prueba-en-vivo-error p {
    margin: 4px 0 10px;
    color: var(--texto-secundario);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .prueba-paso {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .prueba-paso-resultado {
        grid-column: 2;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prueba-en-vivo-radar::before,
    .prueba-en-vivo-radar::after,
    .prueba-paso-en-curso .prueba-paso-icono {
        animation: none;
    }
}

/* La ventana de «trabajando» (progreso.js) */
.dialogo-progreso {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--panel-elevado);
    color: var(--texto);
    box-shadow: var(--sombra);
}

.dialogo-progreso:focus,
.dialogo-progreso:focus-visible {
    outline: none;
}

.dialogo-progreso::backdrop {
    background: rgba(3, 9, 14, 0.7);
}

.dialogo-progreso-cuerpo {
    padding: 20px;
}

.prueba-paso-pasado {
    color: var(--texto-secundario);
}

.prueba-paso-pasado .prueba-paso-icono {
    border-color: var(--borde-fuerte);
    color: var(--texto-secundario);
}

.prueba-paso-pasado .prueba-paso-icono::before { content: "✓"; }


/* Clientes → Revisar cortes en los MikroTik */

.revision-cortes-aplicar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.revision-cortes-casilla {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 640px;
    font-size: 0.86rem;
}

.revision-cortes-casilla small {
    display: block;
    color: var(--texto-secundario);
}

.revision-cortes-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.revision-cortes-grupos h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.revision-cortes-lista {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.revision-corte {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.revision-corte small {
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

.revision-cortes-ips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


/* ========================================
   Notificaciones ordenadas: urgentes arriba, repetidas juntas
======================================== */

.notificaciones-contador-normal {
    background: var(--advertencia);
    color: #1b1406;
}

.notificaciones-punto {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: var(--neutro);
}

.notificaciones-panel {
    max-height: min(520px, 75vh);
}

.notificaciones-lista {
    margin: 0;
    padding: 0;
}

.notificacion-item {
    align-items: stretch;
}

.notificacion-item.notificacion-urgente {
    box-shadow: inset 3px 0 0 var(--peligro);
    background: var(--peligro-fondo);
}

.notificacion-item.notificacion-informativa strong,
.notificacion-item.notificacion-informativa span {
    color: var(--texto-tenue);
}

.notificacion-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.notificacion-chip {
    display: inline-flex;
    padding: 1px 7px;
    align-items: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.notificacion-chip-urgente {
    border-color: var(--peligro);
    color: var(--peligro);
    text-transform: uppercase;
}

.notificacion-item .notificacion-cuando,
.notificacion-cuando {
    margin-left: auto;
    color: var(--texto-tenue);
    font-size: 0.66rem;
}

.notificaciones-mas {
    padding: 8px 14px;
    color: var(--texto-tenue);
    font-size: 0.74rem;
    text-align: center;
}

/* La página */

.avisos-vistas {
    display: flex;
    margin: -6px 0 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.avisos-vista {
    display: inline-flex;
    padding: 8px 14px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    font-weight: 700;
}

.avisos-vista span {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--panel-suave);
    font-size: 0.72rem;
    text-align: center;
}

.avisos-vista:hover {
    border-color: var(--primario);
    color: var(--texto);
}

.avisos-vista.activa {
    border-color: var(--primario);
    background: var(--primario-fondo);
    color: var(--primario-claro);
}

.avisos-grupos {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.aviso-grupo {
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.aviso-grupo-urgente {
    border-color: var(--peligro);
    box-shadow: inset 3px 0 0 var(--peligro);
}

.aviso-grupo-informativa {
    opacity: 0.85;
}

.aviso-grupo-cuerpo {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
}

.aviso-grupo-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aviso-grupo-fecha {
    color: var(--texto-tenue);
    font-size: 0.74rem;
}

.aviso-grupo-titulo {
    color: var(--texto);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.aviso-grupo-mensaje {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.aviso-grupo-acciones {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

@media (max-width: 640px) {
    .aviso-grupo {
        flex-direction: column;
        align-items: stretch;
    }

    .aviso-grupo-acciones > form,
    .aviso-grupo-acciones .boton {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ========================================
   Avisos en el teléfono (Notificaciones)
======================================== */

.telefono-avisos .estado-vacio {
    margin: 0;
}

.telefono-avisos-cuerpo {
    display: grid;
    gap: 12px;
}

.telefono-avisos-que {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    line-height: 1.5;
}

.telefono-avisos-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.telefono-avisos-ok {
    margin: 0;
    color: var(--correcto);
    font-weight: 700;
}

.telefono-lista {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.telefono-lista li {
    display: flex;
    padding: 9px 12px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    font-size: 0.84rem;
}

.telefono-lista li small {
    margin-left: auto;
    color: var(--texto-tenue);
}

.avisos-mensaje {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.84rem;
}

.avisos-mensaje-error {
    color: var(--peligro);
}

.notificaciones-pie {
    display: flex;
    border-top: 1px solid var(--borde);
}

.notificaciones-pie .notificaciones-ver-todas {
    flex: 1 1 0;
    border-top: none;
}

.notificaciones-pie .notificaciones-ver-todas + .notificaciones-ver-todas {
    border-left: 1px solid var(--borde);
}

.usuario-telefono {
    color: var(--correcto);
    font-size: 0.76rem;
    font-weight: 700;
}

.usuario-telefono-sin {
    color: var(--texto-tenue);
    font-weight: 600;
}


/* ========================================
   Novedades: la ventana de lo nuevo al entrar
======================================== */

.novedades-dialogo {
    width: min(480px, calc(100% - 32px));
    max-height: min(86vh, 720px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--panel-elevado);
    color: var(--texto);
    box-shadow: var(--sombra);
}

.novedades-dialogo::backdrop {
    background: rgba(3, 9, 14, 0.7);
    backdrop-filter: blur(3px);
}

.novedades-cabeza {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    padding: 14px 18px 10px;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-elevado);
}

.novedades-etiqueta {
    color: var(--primario);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.novedades-cerrar {
    width: 34px;
    height: 34px;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--panel-suave);
    color: var(--texto-secundario);
    cursor: pointer;
}

.novedades-cerrar:hover {
    border-color: var(--primario);
    color: var(--texto);
}

.novedad {
    display: grid;
    padding: 2px 22px 22px;
    gap: 14px;
}

.novedad h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

.novedad-cuerpo {
    color: var(--texto-secundario);
    font-size: 0.95rem;
    line-height: 1.55;
}

.novedad-cuerpo p {
    margin: 0 0 10px;
}

.novedad-cuerpo ul {
    display: grid;
    margin: 0;
    padding-left: 20px;
    gap: 8px;
}

.novedad-cuerpo li::marker {
    color: var(--primario);
}

.novedad-avisos {
    display: grid;
    padding: 14px;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.novedad-avisos [data-estado] {
    display: grid;
    gap: 10px;
}

.novedad-avisos [data-estado][hidden] {
    display: none;
}

.novedad-boton-grande {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
}

.novedad-nota {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    line-height: 1.5;
}

.novedad-listo {
    margin: 0;
    color: var(--correcto);
    font-weight: 800;
}

.novedad-pasos {
    display: grid;
    margin: 0;
    padding-left: 22px;
    gap: 8px;
    color: var(--texto);
    font-size: 0.9rem;
    line-height: 1.45;
}

.novedad-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 900px) {

    /* En el celular, hoja pegada abajo con botones al alcance del pulgar. */
    .novedades-dialogo {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        margin: auto 0 0;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .novedad-acciones {
        flex-direction: column-reverse;
    }

    .novedad-acciones .boton {
        width: 100%;
    }
}


/* La lista de novedades (Usuarios → Novedades) */

.novedades-lista {
    display: grid;
    gap: 14px;
}

.novedad-fila {
    display: grid;
    gap: 12px;
}

.novedad-fila-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.novedad-fila-cabeza h2 {
    margin: 4px 0 0;
    font-size: 1.05rem;
}

.novedad-fila-datos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.novedad-variante {
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.novedad-variante small {
    display: block;
    margin-bottom: 6px;
    color: var(--primario);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.novedad-lectura {
    color: var(--texto-secundario);
    font-size: 0.82rem;
}

.novedad-lectura summary {
    cursor: pointer;
    font-weight: 700;
}

.novedad-lectura p {
    margin: 6px 0 0;
}

.novedad-fila-inactiva {
    opacity: 0.6;
}

.novedad-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.campo-formulario .novedad-roles label {
    display: inline-flex;
    margin: 0;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    cursor: pointer;
}

.campo-formulario .novedad-roles label:has(input:checked) {
    border-color: var(--primario);
    background: var(--primario-fondo);
}


/* El error de un router con lo que hay que revisar */

.error-router-causa {
    margin: 6px 0 0;
}

.error-router-revisa {
    margin: 10px 0 4px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.error-router-pasos {
    display: grid;
    margin: 0;
    padding-left: 22px;
    gap: 6px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.router-motivo {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 101, 119, 0.32);
    border-radius: var(--radio-pequeno);
    background: var(--peligro-fondo);
    color: var(--texto-secundario);
    font-size: 0.84rem;
}

.router-motivo summary {
    color: var(--peligro);
    font-weight: 800;
    cursor: pointer;
}


/* Caída de red */

.caida-abierta {
    border-color: rgba(255, 101, 119, 0.45);
}

.caida-comunidades,
.caida-avisos {
    display: grid;
    margin: 14px 0 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.caida-comunidades li,
.caida-avisos li {
    display: flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
}

.caida-comunidades small,
.caida-avisos small {
    display: block;
    color: var(--texto-tenue);
}

.caida-detalle {
    margin-top: 14px;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.caida-detalle summary {
    font-weight: 700;
    cursor: pointer;
}

.caida-formulario {
    margin-top: 12px;
}

.router-caida {
    width: 100%;
    margin: 0 0 12px;
}


/* Revisar una copia del respaldo */

.respaldo-resultado p {
    color: var(--texto-secundario);
    line-height: 1.5;
}

.respaldo-bien {
    border-color: rgba(45, 212, 119, 0.4);
}

.respaldo-mal {
    border-color: rgba(255, 101, 119, 0.45);
}

.respaldo-mal h2 {
    color: var(--peligro);
}

.respaldo-fecha strong {
    color: var(--texto);
}

.respaldo-diferencia {
    color: var(--texto-tenue);
}


/* La ruta del día del técnico */

.ruta-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ruta-tecnico {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ruta-ubicacion {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ruta-paradas {
    display: grid;
    margin: 0 0 18px;
    padding: 0;
    gap: 10px;
    list-style: none;
}

.ruta-parada {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 14px;
}

.ruta-urgente {
    border-color: rgba(255, 101, 119, 0.5);
    box-shadow: inset 3px 0 0 var(--peligro);
}

.ruta-numero {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 2px solid var(--primario);
    border-radius: 50%;
    color: var(--primario-claro);
    font-size: 1.05rem;
    font-weight: 800;
}

.ruta-datos {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
}

.ruta-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ruta-km {
    color: var(--texto-tenue);
    font-size: 0.78rem;
}

.ruta-titulo {
    color: var(--texto);
    font-size: 1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ruta-detalle {
    color: var(--texto-secundario);
    overflow-wrap: anywhere;
}

.ruta-acciones {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.ruta-sin-ubicacion {
    display: grid;
    margin: 10px 0 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.ruta-sin-ubicacion small {
    display: block;
    color: var(--texto-tenue);
}

@media (max-width: 700px) {
    .ruta-parada {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    .ruta-acciones {
        grid-column: 1 / -1;
    }

    .ruta-acciones .boton {
        flex: 1 1 0;
    }
}

.respaldo-archivo {
    margin-top: 12px;
}


/* El recibo para el cliente */

.comprobante-liga {
    display: grid;
    margin-top: 16px;
    padding: 12px 14px;
    gap: 4px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-pequeno);
}

.comprobante-liga span {
    color: var(--texto-secundario);
    font-size: 0.78rem;
    font-weight: 700;
}

.comprobante-liga a {
    color: var(--primario-claro);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.comprobante-liga small {
    color: var(--texto-tenue);
}

.dialogo-pago-whatsapp {
    width: 100%;
    margin-top: 12px;
}

@media print {
    .comprobante-liga {
        display: none;
    }
}


/* Resumen del mes */

.mes-indicadores {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.mes-tabla td {
    vertical-align: top;
}

.mes-barra {
    width: 90px;
    height: 6px;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel-suave);
}

.mes-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primario);
}

.mes-pendientes summary {
    color: var(--advertencia);
    font-weight: 800;
    cursor: pointer;
}

.mes-pendientes ul {
    margin: 6px 0 0;
    padding-left: 16px;
    font-size: 0.82rem;
}

.mes-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.mes-columnas .card {
    margin: 0;
}

.mes-lista {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.mes-lista li {
    display: flex;
    padding: 9px 12px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-suave);
    font-size: 0.86rem;
}

.mes-lista span {
    color: var(--texto-secundario);
    text-align: right;
}


/* Fallas que se repiten */

.fallas-periodo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fallas-lista {
    display: grid;
    gap: 14px;
}

.falla-fila {
    display: grid;
    margin: 0;
    gap: 12px;
}

.falla-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.falla-nombre {
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 800;
}

.falla-cabeza small {
    display: block;
    color: var(--texto-secundario);
}

.falla-cuenta {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    color: var(--advertencia);
}

.falla-cuenta strong {
    font-size: 1.8rem;
    line-height: 1;
}

.falla-cuenta small {
    color: var(--texto-tenue);
    font-size: 0.7rem;
}

.falla-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.falla-sugerencia {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.88rem;
}

.falla-historial {
    display: grid;
    margin: 0;
    padding-left: 20px;
    gap: 4px;
    color: var(--texto-secundario);
    font-size: 0.84rem;
}

.falla-historial small {
    color: var(--texto-tenue);
}

.falla-acciones {
    display: flex;
    justify-content: flex-end;
}

/* --- Cobranza: comprobantes de transferencia --- */

.comprobante-tarjeta {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 20px;
    align-items: start;
}

.comprobante-foto img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--panel-elevado);
}

.comprobante-datos {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.comprobante-datos h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.comprobante-linea {
    margin: 0 0 6px;
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.comprobante-referencia {
    font-family: "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.05em;
}

.comprobante-alerta {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: var(--radio-pequeno);
    background: var(--advertencia-fondo);
    color: var(--advertencia);
    font-size: 0.85rem;
}

.comprobante-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 12px;
}

.comprobante-acciones form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.comprobante-acciones label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--texto-tenue);
}

.comprobante-acciones input[name=monto] {
    width: 110px;
}

.comprobante-historial {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comprobante-historial li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    font-size: 0.88rem;
}

.comprobante-estado {
    font-weight: 600;
}

.comprobante-confirmado { color: var(--correcto); }
.comprobante-rechazado { color: var(--advertencia); }

@media (max-width: 640px) {
    .comprobante-tarjeta {
        grid-template-columns: 1fr;
    }

    .comprobante-acciones,
    .comprobante-acciones form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .comprobante-acciones input[name=monto],
    .comprobante-acciones select {
        width: 100%;
    }
}

/* --- Cobranza: cuentas de pago por comunidad --- */

.cuenta-pago {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px 22px;
    text-align: left;
}

.cuenta-pago > * {
    width: 100%;
    margin: 0;
}

.cuenta-pago > .cuenta-pago-quitar {
    width: auto;
    align-self: flex-start;
}

.cuenta-pago-formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.cuenta-pago-formulario label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.cuenta-pago-botones {
    grid-column: 1 / -1;
}

.cuenta-pago-quitar {
    margin-top: 10px;
}

.cuenta-pago-nota {
    font-size: 0.85rem;
    color: var(--texto-tenue);
}

@media (max-width: 640px) {
    .cuenta-pago-formulario {
        grid-template-columns: 1fr;
    }
}

/* --- Clientes: avisos del portal --- */

.avisos-filtro label {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.avisos-resumen {
    margin: 14px 0 8px;
    font-size: 1.05rem;
}

.avisos-porcentaje {
    color: var(--texto-secundario);
}

.avisos-barra {
    height: 10px;
    border-radius: 999px;
    background: var(--panel-elevado);
    overflow: hidden;
}

.avisos-barra span {
    display: block;
    height: 100%;
    background: var(--primario);
}

.avisos-embudo {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.avisos-embudo li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}

.avisos-embudo strong {
    font-size: 1.4rem;
}

.avisos-embudo span {
    font-size: 0.8rem;
    color: var(--texto-secundario);
}

.avisos-embudo-con_avisos strong { color: var(--correcto); }
.avisos-embudo-sin_liga strong { color: var(--advertencia); }

.avisos-pendientes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.avisos-pendientes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
}

.avisos-pendiente-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.avisos-pendiente-datos small,
.avisos-sin-telefono {
    color: var(--texto-tenue);
}

@media (max-width: 640px) {
    .avisos-embudo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .avisos-pendiente-accion,
    .avisos-pendiente-accion .boton {
        width: 100%;
        text-align: center;
    }
}