: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);
    color: var(--primario-claro);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.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);
}

.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);
}

.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;
}

.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;
}

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: 640px) {

    .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;
    }

}

.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;
}

.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 {
    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-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(3, minmax(0, 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,
    .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) {

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

        width: min(320px, 90vw);
    }
}


/* 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;
}