/* FastNet ISP Manager - sistema de diseno */
:root{
  --side:#031D43; --side-2:#02152F; --side-ink:#93A7C2; --side-act:#0B2F60; --side-gr:#5A7392;
  --ground:#F8FAFC; --card:#fff; --line:#E3E8EF; --line-2:#F1F5F9;
  --ink:#071638; --ink-2:#33415A; --muted:#64748B;
  --azul:#0568FF; --verde:#16A34A; --rojo:#EF4444; --naranja:#F59E0B; --morado:#7C3AED;
  --oscuro:#0F172A;
  --r:10px; --r2:8px;
  --sh:0 1px 3px rgba(15,23,42,.04);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-size:14px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased}
.sprite{display:none}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{margin:0;letter-spacing:-.012em}
a{color:var(--azul);text-decoration:none}
.oculto{display:none!important}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.86em}

/* ---------- estructura ---------- */
/* La barra lateral es fija: se queda quieta mientras la tabla de 107 ONUs
   se desplaza, para no tener que subir del todo cada vez que se cambia de
   seccion. El ancho es una variable porque plegarla solo cambia eso. */
/* 224 en vez de 240: es lo mas estrecho donde "Gestion de ONUs" con su
   insignia sigue cabiendo en una linea. Los 16 px que se ahorran se los
   queda la tabla, que es la que iba justa. */
.app{display:grid;grid-template-columns:var(--ancho-side,224px) 1fr;
  min-height:100vh}
.side{background:var(--side);display:flex;flex-direction:column;
  padding:16px 0 12px;
  position:sticky;top:0;height:100vh;overflow:hidden}
.marca{display:flex;align-items:center;gap:11px;padding:2px 15px 14px}
.marca .cuadro{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--side);
  display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
.marca b{color:#fff;font-size:1.06rem;line-height:1.15;display:block}
.marca small{color:var(--side-gr);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase}
/* Solo el menu se desplaza; la marca de arriba y el pie con la sesion se
   quedan siempre a la vista.

   La barra de desplazamiento va escondida: aparecia y desaparecia al mover
   el raton y ensuciaba la unica columna oscura de la pantalla. El menu se
   sigue pudiendo desplazar con la rueda y con el teclado; en una ventana
   normal ni siquiera hace falta, porque las medidas de abajo estan
   ajustadas para que los catorce enlaces quepan enteros. */
.side nav{display:flex;flex-direction:column;padding:0 10px;
  overflow-y:auto;overflow-x:hidden;flex:1;
  scrollbar-width:none;-ms-overflow-style:none}
.side nav::-webkit-scrollbar{width:0;height:0}
.side .grupo{color:var(--side-gr);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 10px 5px;font-weight:600}
.side a{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:var(--r2);
  color:var(--side-ink);font-size:.87rem;margin-bottom:1px}
/* Una linea siempre: "Gestion de ONUs" partido en dos descuadraba el menu
   entero y movia todo lo que venia debajo. */
.side a .crece{flex:1;min-width:0;white-space:nowrap}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.act{background:var(--side-act);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--azul)}
.side a .i{opacity:.85}
.side a.act .i{opacity:1}
.side .pie{margin-top:auto;padding:10px 14px 0}
.side .quien{display:flex;align-items:center;gap:10px;padding:9px;border-radius:var(--r2);
  background:rgba(255,255,255,.06)}
.side .quien b{color:#fff;font-size:.8rem;display:block;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px}
.side .quien small{color:var(--side-gr);font-size:.69rem}
.side .salir{margin-top:6px;color:var(--side-ink);font-size:.84rem;padding:9px 11px;
  border-radius:var(--r2);cursor:pointer;display:flex;align-items:center;gap:11px}
.side .salir:hover{background:rgba(255,255,255,.07);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:13px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.topbar h1{font-size:1.42rem;font-weight:700}
.topbar .titulo{display:flex;align-items:center;gap:12px}
.topbar p{margin:3px 0 0;color:var(--muted);font-size:.82rem}
.topbar .der{display:flex;align-items:center;gap:12px}
.vivo{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.8rem;white-space:nowrap}
.vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;flex:none;
  display:grid;place-items:center;font-size:.78rem;font-weight:700}
.vista{padding:18px 22px 44px}

/* ---------- tarjetas metricas ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:16px;display:flex;align-items:center;gap:14px}
.tile .ic{width:48px;height:48px;border-radius:12px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:1.25rem;font-weight:700}
.ic.azul{background:var(--azul)} .ic.verde{background:var(--verde)} .ic.rojo{background:var(--rojo)}
.ic.naranja{background:var(--naranja)} .ic.morado{background:var(--morado)} .ic.oscuro{background:var(--oscuro)}
.tile small{display:block;color:var(--muted);font-size:.79rem;line-height:1.3}
.tile b{font-size:1.62rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;display:block}
.tile .sub{font-size:.7rem;color:var(--muted)}

/* Las cifras con el diseno de la maqueta de Gestion de IP (ip1.css, gi-kpi):
   icono en circulo suave, nombre, numero grande y una linea util debajo.
   Cada una en su color, que es como le gustan a Manuel. */
.kps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.kp{display:flex;align-items:center;gap:16px;min-width:0;padding:18px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.kp-ic{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center}
.kp-ic svg{width:25px;height:25px}
.kp.azul .kp-ic{background:#E4F0FF;color:#0568FF}
.kp.verde .kp-ic{background:#DCF8E9;color:#0E9F5A}
.kp.morado .kp-ic{background:#EFE7FF;color:#7C3AED}
.kp.naranja .kp-ic{background:#FFF1DC;color:#D97706}
.kp-t{display:flex;flex-direction:column;min-width:0;flex:1}
.kp-t>span{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.kp-t b{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);font-variant-numeric:tabular-nums}
.kp-t small{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-barra{height:6px;margin:6px 0 4px;border-radius:999px;background:#EEF2F7;overflow:hidden}
.kp-barra i{display:block;height:100%;border-radius:inherit;background:#F59E0B}
@media (max-width:1100px){.kps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kps{grid-template-columns:1fr}.kp{padding:15px 16px}}

/* ---------- panel generico ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:18px}
.panel > .cab{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel > .cab h3{font-size:.98rem;font-weight:700}
.panel > .cab .cuenta{color:var(--muted);font-size:.8rem;font-weight:400}
.panel .cuerpo{padding:14px 16px}
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}

/* ---------- tablas ---------- */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{text-align:left;padding:9px 16px;font-size:.67rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:#F8FAFC;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700}
td{padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:.855rem;white-space:nowrap;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#F9FBFD}
td.envuelve{white-space:normal;min-width:190px}
.vacio{padding:40px 18px;text-align:center;color:var(--muted);font-size:.9rem}
.pie-tabla{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.8rem}
.pager{display:flex;gap:4px;align-items:center}
.pager button{padding:5px 11px;font-size:.8rem;background:#fff;color:var(--ink);border:1px solid var(--line)}
.pager button.act{background:var(--oscuro);color:#fff;border-color:var(--oscuro)}

/* ---------- pastillas y senal ---------- */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.pill.verde,.pill.activa,.pill.activo,.pill.online{background:#DCFCE7;color:#15803D}
.pill.rojo,.pill.offline,.pill.cortado{background:#FEE2E2;color:#B91C1C}
.pill.ambar,.pill.sin_autorizar,.pill.pendiente,.pill.suspendido{background:#FEF3C7;color:#92400E}
.pill.azul{background:#DBEAFE;color:#1D4ED8}
.pill.gris,.pill.baja,.pill.deshabilitada{background:#F1F5F9;color:#475569}
.senal{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
/* Cinco barras en escalera, SIEMPRE llenas: lo unico que cambia es el
   color. Verde, ambar y rojo, que es lo que dice en que tramo cae el dBm.
   Apagar barras segun el nivel sugeria "fuerza de cobertura", que no es lo
   que se esta midiendo. */
.barras{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.barras i{width:3px;background:#CBD5E1;border-radius:1px}
.barras i:nth-child(1){height:4px} .barras i:nth-child(2){height:6.5px}
.barras i:nth-child(3){height:9px} .barras i:nth-child(4){height:11.5px}
.barras i:nth-child(5){height:14px}
.barras.verde i{background:var(--verde)}
.barras.ambar i{background:var(--naranja)}
.barras.rojo i{background:var(--rojo)}

/* ---------- controles ---------- */
button{font:inherit;border:0;border-radius:var(--r2);padding:9px 16px;font-weight:600;cursor:pointer;
  background:var(--azul);color:#fff;white-space:nowrap}
button:hover{filter:brightness(1.07)}
button:disabled{opacity:.5;cursor:not-allowed;filter:none}
button.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.sec:hover{background:#F1F5F9;filter:none}
button.oscuro{background:var(--oscuro)}
button.ok{background:var(--verde)}
button.mini{padding:5px 10px;font-size:.78rem;font-weight:600}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.acciones .crece{flex:1}
/* Un boton que se va al otro extremo de la fila (Importar del MikroTik). */
.acciones .al-otro-lado{margin-left:auto}
label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r2);
  font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.campo{margin-bottom:14px}

/* ---------- avisos ---------- */
.info{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:var(--r2);padding:12px 14px;
  font-size:.85rem;color:#1E3A5F;line-height:1.55;margin-bottom:16px}
.aviso-obra{background:#FFFBEB;border:1px solid #FDE68A;color:#78350F}
.error{background:#FEF2F2;border:1px solid #FCA5A5;color:#B91C1C;border-radius:var(--r2);
  padding:11px 14px;font-size:.85rem;margin-bottom:14px}
pre.config{background:var(--side-2);color:#D7E6FA;padding:16px;border-radius:var(--r);
  overflow-x:auto;font-size:.78rem;line-height:1.6;margin:0 0 12px;white-space:pre}
.dato{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:.86rem}
.dato:last-child{border-bottom:none}
.dato b{color:var(--muted);min-width:190px;font-weight:400;flex:none}

/* ---------- login ---------- */
.centro{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.login{width:100%;max-width:390px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 3px rgba(15,35,60,.06),0 18px 40px -24px rgba(15,35,60,.4);padding:34px}
.login .marca{padding:0 0 6px;justify-content:center}
.login .marca .cuadro{background:var(--side);color:#fff}
.login .marca b{color:var(--ink)}
.login .marca small{color:var(--muted)}
.login p.sub{text-align:center;color:var(--muted);margin:0 0 22px;font-size:.88rem}

/* =========================================================================
   El menu en un movil
   El problema que arregla: .side lleva height:100vh, y en una sola columna
   eso significaba que la barra ocupaba LA PANTALLA ENTERA antes de llegar
   al contenido. Habia que pasarla de largo cada vez.

   Se convierte en un cajon que entra desde la izquierda, como el de
   cualquier aplicacion de movil. Mientras esta cerrado no ocupa nada: el
   mapa, las tablas y las fichas se quedan con toda la pantalla.

   El boton de la cabecera ya existia para plegar la barra en el escritorio;
   aqui hace de tirador del cajon. Es el mismo boton y el mismo sitio.
   ========================================================================= */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  /* Cinturon contra el orden de las reglas. Con la barra hecha cajon, el
     contenido es el UNICO elemento de la rejilla, asi que cae en la primera
     columna sea del ancho que sea. Si otra regla de mas abajo redefine las
     columnas -- ya paso una vez y dejo la pantalla en una tira de 74 px --
     esto le hace ocupar todas igualmente. */
  .main{grid-column:1 / -1}

  .side{
    position:fixed;top:0;left:0;z-index:1200;
    width:min(78vw,272px);height:100dvh;
    padding:14px 0 12px;
    transform:translateX(-102%);
    transition:transform .22s ease;
    box-shadow:none;
  }
  body.menu-abierto .side{transform:translateX(0);box-shadow:6px 0 28px rgba(3,29,67,.4)}

  /* Dentro del cajon el menu se lee en columna, con las categorias y el pie
     puestos: hay sitio de sobra y es lo que lo hace util para buscar algo.
     La tira horizontal de antes obligaba a arrastrar a ciegas. */
  .side nav{flex-direction:column;overflow-y:auto;overflow-x:hidden}
  .side .grupo,.side .pie{display:block}
  .side a{padding:10px 12px;font-size:.92rem}
  .marca{padding:2px 15px 14px}

  .side-velo{
    position:fixed;inset:0;z-index:1100;
    background:rgba(3,29,67,.5);backdrop-filter:blur(1.5px);
    opacity:0;transition:opacity .22s ease;
  }
  body.menu-abierto .side-velo{opacity:1}

  /* La cabecera se queda arriba porque ahi vive el tirador del cajon. Pero
     TIENE QUE SER BAJA: dejarla fija tal cual la deja en dos o tres filas
     encima del contenido para siempre. El titulo y su explicacion pasan a
     ir uno debajo del otro, no en la misma linea. */
  .topbar{
    position:sticky;top:0;z-index:900;
    padding:9px 13px;gap:10px;flex-wrap:nowrap;align-items:center;
  }
  /* Una rejilla de dos columnas: el tirador ocupa las dos filas de la
     izquierda, y el titulo con su explicacion se apilan a la derecha. Asi no
     hace falta sacar el boton del flujo con posicion absoluta. */
  .topbar .titulo{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;column-gap:10px;row-gap:0;min-width:0;
  }
  .topbar .titulo .hamburguesa{grid-row:1 / 3;align-self:center}
  .topbar h1{grid-column:2;font-size:1.06rem;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar p{grid-column:2;font-size:.73rem;margin:1px 0 0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .der{gap:8px;flex:none}
  /* La hora de la ultima lectura no cabe y tampoco es urgente en un movil. */
  .topbar .vivo{display:none}

  /* Los 22 px de margen a cada lado se comen 44 de una pantalla de 380.
     Se bajan a 13, que es lo que usa la propia cabecera. */
  .vista{padding:14px 13px 40px}
}

/* Fuera del movil el velo no existe. */
@media(min-width:901px){.side-velo{display:none!important}}

/* ---------- ocupacion de una caja NAP ---------- */
.uso{min-width:132px}
.uso small{display:block;color:var(--muted);font-size:.72rem;margin-bottom:5px;
  font-variant-numeric:tabular-nums}
.uso .barra{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.uso .barra i{display:block;height:100%;border-radius:999px;background:var(--verde);
  transition:width .25s ease}
.uso.medio .barra i{background:var(--naranja)}
.uso.lleno .barra i{background:var(--rojo)}
.iconos{display:flex;gap:6px;align-items:center}
.punto{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#ECFDF5;color:var(--verde);font-size:.9rem;flex:none}
.punto.apagado{background:var(--line-2);color:var(--muted)}
.punto .i{width:16px;height:16px;stroke-width:2}
a.punto:hover{background:#D1FAE5}
.punto.apagado .i{opacity:.55}

/* ---------- pantalla de OLT ---------- */
.olt-hero{display:grid;grid-template-columns:380px 1fr;gap:16px;margin-bottom:14px}
.olt-tres{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:16px;margin-bottom:14px}
.olt-dos{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;margin-bottom:14px}
.olt-hero > .panel,.olt-tres > .panel,.olt-dos > .panel{margin-bottom:0}
.olt-col{display:flex;flex-direction:column;gap:14px;min-width:0}

.equipo{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px}
.equipo svg{width:90%;max-width:330px;height:auto}
.equipo .marca-eq{font-weight:800;letter-spacing:.06em;color:var(--side);font-size:1.05rem}
.equipo h4{margin:6px 0 0;font-size:1rem;font-weight:700}
.equipo small{color:var(--muted);font-size:.8rem}
.equipo .botones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:6px}
.equipo .botones button{padding:9px 6px;font-size:.8rem;display:flex;
  align-items:center;justify-content:center;gap:6px}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--rojo);color:#fff;font-size:.68rem;font-weight:700}
.badge.cero{background:var(--line);color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;
  border:1px solid var(--line);background:#fff;font-size:.76rem;color:var(--ink-2);white-space:nowrap}
.chip.tenue{background:#F8FAFC;color:var(--muted)}
.tenue{color:var(--muted);font-size:.82rem}

.tile.suave{border-left:3px solid var(--ac);padding:13px 15px;gap:12px}
.tile.suave .ic{background:var(--ac-bg);color:var(--ac);width:38px;height:38px;
  border-radius:9px;font-size:.95rem}
.tile.suave b{font-size:1.12rem}
.ac-azul{--ac:var(--azul);--ac-bg:#DBEAFE}
.ac-verde{--ac:var(--verde);--ac-bg:#DCFCE7}
.ac-morado{--ac:var(--morado);--ac-bg:#EDE9FE}
.ac-naranja{--ac:var(--naranja);--ac-bg:#FEF3C7}
.ac-rojo{--ac:var(--rojo);--ac-bg:#FEE2E2}
.ac-gris{--ac:var(--muted);--ac-bg:var(--line-2)}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}

.magnitudes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.magnitud small{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;margin-bottom:3px}
.magnitud b{font-size:1.16rem;font-weight:700;font-variant-numeric:tabular-nums}
.magnitud .hueco{height:52px;margin-top:7px;border:1px dashed var(--line);border-radius:var(--r2);
  display:grid;place-items:center;color:var(--muted);font-size:.7rem}

.ventis{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px;margin-top:6px}
.venti{border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px}
.venti small{display:block;color:var(--muted);font-size:.73rem}
.venti b{font-size:.95rem;font-variant-numeric:tabular-nums}

.medidores{display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap}
.medidor{text-align:center}
.medidor .aro{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ac) calc(var(--pct)*3.6deg),var(--line-2) 0);margin:0 auto}
.medidor .aro i{width:70px;height:70px;border-radius:50%;background:var(--card);
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums}
.medidor small{display:block;color:var(--muted);font-size:.76rem;margin-top:8px}
.medidor em{display:block;font-style:normal;font-size:.72rem;color:var(--verde);font-weight:600}

.lineas .fila{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:.86rem}
.lineas .fila:last-child{border-bottom:none}
.lineas .fila .crece{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineas .num{font-variant-numeric:tabular-nums;font-weight:700}
.mas{display:block;text-align:right;padding-top:10px;font-size:.82rem;font-weight:600}

@media(max-width:1400px){
  .olt-hero{grid-template-columns:300px 1fr}
  .olt-tres{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .olt-hero,.olt-tres,.olt-dos{grid-template-columns:1fr}
}

/* ---------- cabeceras con icono, al estilo del diseno aprobado ---------- */
.titulo-cab{display:flex;align-items:center;gap:9px;min-width:0}
.ic-min{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--ac-bg);color:var(--ac);font-size:.72rem;font-weight:800;flex:none}
.panel > .cab h3.mayus{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.olt-col > .olt-dos{margin-bottom:0}
.nombre-olt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nombre-olt h3{font-size:1.16rem;font-weight:700}
.pill.mini{font-size:.66rem;padding:2px 8px}

/* La tercera columna del bloque de tres es la que mas aprieta: sus tablas
   necesitan celdas mas estrechas o la barra de uso se sale del panel. */
.olt-tres th,.olt-tres td{padding-left:12px;padding-right:12px}
.olt-tres .uso{min-width:86px}
.uso.compacta small{margin-bottom:3px}
.magnitudes{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.ventis{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.equipo{justify-content:flex-start}

/* ---------- cabecera enriquecida ---------- */
.hamburguesa{background:transparent;color:var(--ink-2);padding:7px;border-radius:var(--r2);
  display:grid;place-items:center}
.hamburguesa:hover{background:var(--line-2);filter:none}
.cabchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r2);
  border:1px solid var(--line);color:var(--ink-2);font-size:.82rem;background:#fff;
  font-variant-numeric:tabular-nums}
.cabchip.campana{position:relative;padding:8px}
.cabchip.campana .badge{position:absolute;top:-5px;right:-5px}
.quien-cab{display:flex;align-items:center;gap:9px}
.quien-cab b{display:block;font-size:.83rem;line-height:1.2;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quien-cab small{color:var(--muted);font-size:.72rem}
@media(max-width:1100px){.cabchip:not(.campana),.quien-cab div{display:none}}

/* Los botones del equipo llevan icono: el texto necesita su propio hueco. */
.equipo .botones button{gap:7px}
.equipo .botones .i{width:15px;height:15px}
.chip .i{width:14px;height:14px;opacity:.7}
.tile.suave .ic .i{width:19px;height:19px;stroke-width:1.9}
.ic-min .i{width:15px;height:15px;stroke-width:1.9}
.side .badge{margin-left:auto}

/* ================================================================
   Gestion de OLT - hoja de la maqueta aprobada.
   Todo va acotado a #v-olt: las mismas clases (.card, .chip, .pill,
   table) existen en las otras pantallas con otro significado, y sin
   este alcance se pisarian entre si.
   ================================================================ */
#v-olt{font-size:13px;--navy:#001d48;--blue:#0667f9;--line2:#e4eaf2;
  --green:#11a84b;--orange:#ff8b00;--red:#ff1f1f;--purple:#7a2cff}
#v-olt .toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
#v-olt .btn-primary{background:var(--blue);color:#fff;border:0;border-radius:8px;
  padding:12px 26px;font-weight:700;font-size:14px}
#v-olt .hero{display:grid;grid-template-columns:385px 1fr;gap:12px}
#v-olt .card{background:#fff;border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 1px 2px rgba(15,23,42,.03)}
#v-olt .olt-card{padding:13px 10px 8px;text-align:center;
  background:linear-gradient(#fafdff,#f7fbff)}
#v-olt .zte{font-size:32px;font-weight:900;color:#0874e8;letter-spacing:-2px;margin:2px 0 4px}
#v-olt .olt-card img{width:95%;max-width:350px;height:270px;object-fit:contain}
#v-olt .olt-card h3{font-size:18px;margin:2px 0 4px}
#v-olt .olt-card p{margin:0 0 19px;color:#233b5f}
#v-olt .action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#v-olt .action{position:relative;border:1px solid #d9e2ee;border-radius:7px;padding:9px 4px;
  background:#fff;font-weight:700;color:var(--ink);display:flex;align-items:center;
  justify-content:center;gap:6px;font-size:12px}
#v-olt .action:hover{background:#f2f7ff;filter:none}
#v-olt .mini-badge{position:absolute;right:7px;top:5px;background:var(--red);color:#fff;
  width:19px;height:19px;border-radius:50%;font-size:10px;display:grid;place-items:center}
#v-olt .mini-badge.cero{background:#cbd5e1;color:#475569}
#v-olt .hero-right{min-width:0}
#v-olt .olt-head{display:flex;align-items:center;gap:8px;margin:4px 0 10px;flex-wrap:wrap}
#v-olt .olt-head h2{font-size:20px;margin:0}
#v-olt .pill{padding:5px 10px;border-radius:20px;font-size:10px;font-weight:800}
#v-olt .pill.vpn{background:#efe4ff;color:#7025ff}
#v-olt .pill.online{background:#ddf8e7;color:#078a3d}
#v-olt .pill.offline{background:#fee2e2;color:#b91c1c}
#v-olt .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
#v-olt .chip{border:1px solid #dce4ef;border-radius:7px;padding:7px 11px;background:#fff;
  font-weight:700;font-size:11px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
#v-olt .chip.small{padding:6px 10px;font-size:10px;font-weight:600;color:#42536b}
#v-olt .chip .i{width:13px;height:13px;opacity:.65}
#v-olt .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:10px 0 12px}
#v-olt .stat{min-height:62px;padding:12px 15px;display:flex;align-items:center;gap:15px;
  border-left:4px solid var(--blue)}
#v-olt .stat.green{border-left-color:#19ba5d}
#v-olt .stat.purple{border-left-color:var(--purple)}
#v-olt .stat.orange{border-left-color:var(--orange)}
#v-olt .stat.gris{border-left-color:#94a3b8}
#v-olt .stat.red{border-left-color:var(--red)}
#v-olt .ico{display:grid;place-items:center;color:var(--blue)}
#v-olt .ico .i{width:25px;height:25px;stroke-width:1.6}
#v-olt .stat.green .ico{color:#19ba5d} #v-olt .stat.purple .ico{color:var(--purple)}
#v-olt .stat.orange .ico{color:var(--orange)} #v-olt .stat.gris .ico{color:#94a3b8}
#v-olt .stat.red .ico{color:var(--red)}
#v-olt .stat strong{font-size:16px;display:block;font-variant-numeric:tabular-nums}
#v-olt .stat small{font-size:10px;color:#2f4a72;letter-spacing:.04em}
#v-olt .metrics-grid{display:grid;grid-template-columns:36% 64%;gap:10px}
#v-olt .metric-card{padding:12px;min-width:0}
#v-olt .titlebar{display:flex;align-items:center;justify-content:space-between;
  font-weight:800;font-size:14px;margin-bottom:10px;gap:8px}
#v-olt .titlebar > span:first-child{display:flex;align-items:center;gap:8px}
#v-olt .status-ok{background:#dcf8e5;color:#0f9a45;border-radius:15px;padding:4px 10px;font-size:9px}
#v-olt .status-off{background:#eef2f7;color:#64748b;border-radius:15px;padding:4px 10px;font-size:9px}
#v-olt .energy-top{display:grid;grid-template-columns:1fr 1fr;gap:13px}
#v-olt .metric-label{font-size:9px;color:#4f6785;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase}
#v-olt .metric-val{font-size:15px;font-weight:800;margin:4px 0;font-variant-numeric:tabular-nums}
#v-olt .green-text{color:#00a64b} #v-olt .blue-text{color:var(--blue)}
#v-olt .sinhist{height:54px;border:1px dashed var(--line2);border-radius:6px;
  display:grid;place-items:center;color:#94a3b8;font-size:10px;margin-top:4px}
#v-olt .fans{border-top:1px solid var(--line2);margin-top:6px;padding-top:8px}
#v-olt .fan-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
#v-olt .fan{border:1px solid var(--line2);border-radius:7px;padding:8px;text-align:center;
  font-size:11px}
#v-olt .fan b{display:block;font-size:12px;font-variant-numeric:tabular-nums}
#v-olt .uplink-top{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  border-bottom:1px solid var(--line2);padding-bottom:8px}
#v-olt .uplink-charts{display:grid;grid-template-columns:1fr 1fr 105px;gap:10px;margin-top:8px}
#v-olt .sfpbox{border:1px solid var(--line2);border-radius:7px;padding:10px;text-align:center}
#v-olt .sfpbox h3{font-size:14px;margin:2px 0 6px}
#v-olt .sfpbox hr{border:0;border-top:1px solid var(--line2);margin:6px 0}
#v-olt .sfpbox small{color:#64748b;font-size:10px}
#v-olt .vlans{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
  font-weight:700;font-size:11px}
#v-olt .vlan{background:#0870f7;color:#fff;border-radius:4px;padding:5px 10px;font-size:10px}
#v-olt .row3{display:grid;grid-template-columns:1.03fr .95fr 1.27fr;gap:10px;margin-top:11px}
#v-olt .bottom-grid{display:grid;grid-template-columns:1fr .95fr 1.28fr;gap:10px;margin-top:10px}
#v-olt .section-card{padding:11px 12px;min-width:0}
#v-olt .section-title{font-size:13px;font-weight:800;display:flex;align-items:center;
  gap:8px;margin-bottom:10px}
#v-olt .iconbox{width:21px;height:21px;border-radius:5px;display:grid;place-items:center;
  color:#fff;background:#0c73f5;flex:none}
#v-olt .iconbox .i{width:13px;height:13px;stroke-width:2}
#v-olt .iconbox.green{background:#15b75b} #v-olt .iconbox.purple{background:#7b2cff}
#v-olt .iconbox.red{background:#ff2626} #v-olt .iconbox.cyan{background:#0ca6dc}
#v-olt table{width:100%;border-collapse:collapse;font-size:10px}
#v-olt th{text-align:left;color:#536a87;font-size:8px;padding:6px 5px;
  border-bottom:1px solid var(--line2);text-transform:uppercase;letter-spacing:.04em}
#v-olt td{padding:8px 5px;border-bottom:1px solid #eef2f6;font-weight:600;white-space:nowrap}
#v-olt .tag-on{background:#ddf8e6;color:#0c9443;border-radius:12px;padding:3px 7px;font-size:8px}
#v-olt .tag-off{background:#fee2e2;color:#b91c1c;border-radius:12px;padding:3px 7px;font-size:8px}
#v-olt .tag-std{background:#dbeafe;color:#1d4ed8;border-radius:12px;padding:3px 7px;font-size:8px}
#v-olt .tag-gris{background:#eef2f7;color:#64748b;border-radius:12px;padding:3px 7px;font-size:8px}
#v-olt .sysrow{display:grid;grid-template-columns:1fr 74px 74px;align-items:center;
  padding:8px 4px;border-bottom:1px solid #eef2f6;font-weight:600;font-size:11px;gap:6px}
#v-olt .sysrow:last-child{border-bottom:none}
#v-olt .sysrow b{display:flex;align-items:center;gap:7px;min-width:0}
#v-olt .sysrow b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-olt .sysrow .i{width:14px;height:14px;color:#64748b}
#v-olt .progress{height:7px;background:#edf1f5;border-radius:10px;overflow:hidden;min-width:70px}
#v-olt .progress .bar{height:100%;background:#12ae50}
#v-olt .progress .bar.orange{background:#ff9100}
#v-olt .progress .bar.red{background:var(--red)}
#v-olt .link{color:var(--blue);font-weight:700;text-align:right;margin-top:9px;
  font-size:11px;display:block;cursor:pointer}
#v-olt .resources{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px}
#v-olt .resources small{font-size:11px;color:#64748b}
#v-olt .ring{width:70px;height:70px;border-radius:50%;margin:4px auto;display:grid;
  place-items:center;position:relative;
  background:conic-gradient(var(--anillo,#0870ff) calc(var(--pct,0)*3.6deg),#e9eef4 0)}
#v-olt .ring:after{content:"";width:55px;height:55px;background:#fff;border-radius:50%;
  position:absolute}
#v-olt .ring b{position:relative;z-index:2;font-size:15px;font-variant-numeric:tabular-nums}
#v-olt .normal{color:#0ba34a;font-weight:700;font-size:10px}
#v-olt .normal.alto{color:var(--orange)} #v-olt .normal.nulo{color:#94a3b8}
#v-olt .alarm-row{display:flex;justify-content:space-between;padding:7px 3px;
  border-bottom:1px solid #eef2f6;font-weight:600;font-size:11px;align-items:center}
#v-olt .alarm-row span{display:flex;align-items:center;gap:7px}
#v-olt .alarm-row .punto-a{width:9px;height:9px;border-radius:50%;flex:none}
#v-olt .traffic-wrap{display:grid;grid-template-columns:1fr 175px;gap:10px}
#v-olt .traffic-stat{border-left:1px solid var(--line2);padding-left:12px;font-size:10px}
#v-olt .traffic-stat p{margin:3px 0}
#v-olt .tabs{display:flex;gap:5px;margin-left:auto}
#v-olt .tab{border:1px solid #dce4ee;padding:5px 11px;border-radius:6px;font-size:9px}
#v-olt .tab.active{background:#0870f7;color:#fff;border-color:#0870f7}
#v-olt .footer-note{text-align:center;color:#405a78;font-size:10px;padding:20px 0 2px}
@media(max-width:1200px){
  #v-olt .hero{grid-template-columns:320px 1fr}
  #v-olt .metrics-grid{grid-template-columns:1fr}
  #v-olt .row3,#v-olt .bottom-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
  #v-olt .hero{grid-template-columns:1fr}
  #v-olt .stats{grid-template-columns:1fr 1fr}
  #v-olt .row3,#v-olt .bottom-grid,#v-olt .traffic-wrap{grid-template-columns:1fr}
}

/* El badge va en la esquina del boton: sin este hueco pisa el texto. */
#v-olt .action{padding:9px 22px 9px 8px}
#v-olt .mini-badge{right:5px;top:4px}
/* La foto del chasis trae margen blanco propio; 230 px evita el hueco. */
#v-olt .olt-card img{height:230px}
#v-olt .olt-card p{margin:0 0 14px}

/* ---------- graficas de serie temporal ---------- */
#v-olt .chispa{width:100%;height:62px;display:block;margin-top:4px}
#v-olt .chispa .eje{font-size:7px;fill:#94a3b8;font-family:inherit}

/* Grafico de dos series (trafico del uplink). Mismo lenguaje que la
   chispa pero con sitio para la leyenda y para etiquetas mas largas. */
#v-olt .gserie{width:100%;height:118px;display:block}
#v-olt .gserie .eje{font-size:7px;fill:#94a3b8;font-family:inherit}
#v-olt .chip.small.gris{color:#94a3b8;background:#f6f8fb;border-style:dashed}


/* ---------- ventana modal ----------
   El formulario largo dentro del flujo empujaba la tabla fuera de la
   pantalla. En modal el fondo queda quieto y la atencion va a una cosa. */
.modal-fondo{position:fixed;inset:0;background:rgba(3,29,67,.55);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:38px 18px;
  overflow-y:auto}
.modal-fondo.oculto{display:none}
.modal{background:#fff;border-radius:14px;width:min(980px,100%);
  box-shadow:0 24px 60px rgba(3,29,67,.30);overflow:hidden}
.modal.estrecho{width:min(620px,100%)}
/* La caja NAP: dos columnas emparejadas (nombre e ID, zona y splitter,
   latitud y longitud) y la direccion a lo ancho. */
.filtros.nap-campos,.filtros.modal-campos{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.filtros.nap-campos .nap-ancho,.filtros.modal-campos .modal-ancho{grid-column:1 / -1}
.filtros.nap-campos input,.filtros.nap-campos select,
.filtros.modal-campos input,.filtros.modal-campos select{width:100%;min-width:0}
.acciones.nap-pie,.acciones.modal-pie{margin:4px 0 0}
.modal-nota{margin:0 0 6px;color:var(--muted);font-size:.82rem}
@media (max-width:560px){.filtros.nap-campos,.filtros.modal-campos{grid-template-columns:1fr}}
.modal > .cab{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line2)}
.modal > .cab h3{margin:0;font-size:1.02rem}
.modal .cerrar{background:none;border:0;font-size:1.5rem;line-height:1;
  color:var(--muted);cursor:pointer;padding:0 4px}
.modal .cerrar:hover{color:var(--txt)}
.modal > .cuerpo{padding:18px 20px;max-height:calc(100vh - 190px);
  overflow-y:auto}

/* ---------- ficha de la ONU que se va a autorizar ---------- */
.ficha-alta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 22px;background:#F6F9FD;border:1px solid var(--line2);
  border-radius:10px;padding:12px 16px;margin:0 0 16px}
.ficha-alta div{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:.82rem;padding:6px 0;min-width:0}
.ficha-alta div + div + div{border-top:1px dashed rgba(3,29,67,.10)}
.ficha-alta b{font-weight:600;color:var(--muted);white-space:nowrap}
.ficha-alta span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;color:var(--txt);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.ficha-alta{grid-template-columns:1fr}
  .ficha-alta div + div{border-top:1px dashed rgba(3,29,67,.10)}}

/* ---------- guion para pegar en RouterOS ---------- */
/* Las tres vias para llegar a un MikroTik, como tarjetas. */
.mk-vias-titulo{font-size:.8rem;font-weight:600;color:var(--ink-2);margin:2px 0 8px}
.mk-vias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0 0 14px}
.mk-via{position:relative;display:block;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;cursor:pointer}
.mk-via:hover{border-color:#CBD5E1;background:var(--line-2)}
.mk-via.elegida{border-color:var(--azul);background:#F0F7FF;box-shadow:0 0 0 3px rgba(5,104,255,.07)}
.mk-via input{position:absolute;opacity:0;pointer-events:none}
.mk-via>b{display:block;font-size:.9rem;margin-bottom:4px;padding-right:86px}
.mk-via small{display:block;color:var(--muted);font-size:.76rem;line-height:1.45}
.mk-via small b{color:var(--ink-2)}
.mk-via-eti{position:absolute;top:11px;right:11px;font-size:.66rem;font-weight:700;
  padding:2px 8px;border-radius:999px;background:#DCFCE7;color:#15803D}
/* Al editar no se cambia la via: el tunel ya esta hecho. */
.mk-vias.bloqueado{opacity:.6;pointer-events:none}
@media (max-width:760px){.mk-vias{grid-template-columns:1fr}}

.guion{position:relative;margin-top:14px}
.guion pre{background:#031D43;color:#E6EEF9;border-radius:9px;padding:14px 16px;
  font-size:.74rem;line-height:1.55;overflow-x:auto;white-space:pre;margin:8px 0 0}
.guion .copiar{position:absolute;top:34px;right:10px}
.guion .aviso{font-size:.8rem;color:var(--muted);margin-top:8px}


/* ---------- asistente por pasos dentro del modal ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:12px 20px;border-bottom:1px solid var(--line2);background:#fff}
.paso{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  color:#8a99ad;letter-spacing:.01em}
.paso .num{width:23px;height:23px;border-radius:50%;display:grid;
  place-items:center;background:#eef2f6;color:#71839d;font-size:.7rem}
.paso.act{color:var(--azul)}
.paso.act .num{background:var(--azul);color:#fff}
.paso.hecho{color:#13aa59}
.paso.hecho .num{background:#e8f8ef;color:#13aa59}

.pie-modal{border-top:1px solid var(--line2);background:#fff;padding:13px 20px;
  display:flex;justify-content:flex-end;gap:8px}
.req{color:var(--red)}
.conboton{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}

.conexion-barra{display:flex;align-items:center;justify-content:space-between;
  gap:14px;border:1px solid var(--line2);border-radius:10px;background:#fff;
  padding:14px 16px}
.conexion-barra b{display:block;font-size:.9rem;margin-bottom:3px}
.conexion-barra small{color:var(--muted);font-size:.78rem}

.resultado{margin-top:12px;padding:11px 13px;border-radius:8px;
  font-size:.82rem;font-weight:600}
.resultado.probando{background:#eef5ff;color:#3264a9}
.resultado.bien{background:#e8f8ef;color:#0d8f4a}
.resultado.mal{background:#fff0f0;color:#c42c3d}

.detectado{margin-top:13px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.detectado div{border:1px solid var(--line2);border-radius:8px;background:#fff;
  padding:10px 12px}
.detectado small{display:block;color:var(--muted);font-size:.72rem;
  margin-bottom:3px}
.detectado b{display:block;font-size:.88rem}

@media(max-width:760px){.pasos{grid-template-columns:1fr}}

.separador{font-size:.74rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 10px;
  padding-top:14px;border-top:1px solid var(--line2)}

.ayuda{margin-top:5px;color:var(--muted);font-size:.75rem;line-height:1.4}
.campo input[readonly]{background:#F1F5F9;color:#475569;cursor:not-allowed}
.botones{display:flex;gap:8px;flex-shrink:0}
.chip.small.naranja{background:#FFF7ED;color:#B45309;border-color:#FED7AA}
.chip.small.verde{background:#ECFDF5;color:#15803D;border-color:#A7F3D0}
.chip.small.rojo{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}



.fn-olt-admin-v60 .og-crudo{background:#0b1f3b;color:#e6eef9;border-radius:10px;
  padding:14px 16px;font-size:11px;line-height:1.55;overflow:auto;max-height:460px;
  white-space:pre-wrap;word-break:break-word;margin:0 16px 16px}

/* ===== gestion-v60.css del sistema anterior, tal cual ===== */
/*
============================================================
 FASTNET - ADMINISTRACION OLT V6.0
============================================================
*/

.fn-olt-admin-v60{
    --ink:#0b1f3b;
    --text:#38516f;
    --muted:#758aa1;

    --line:#d8e4ed;
    --line2:#e8eef4;

    --blue:#0a84f7;
    --green:#08ad78;
    --red:#f02d51;
    --amber:#f59a16;
    --violet:#8b52ef;

    --soft:#f5f9fc;
    --white:#fff;

    width:100%;
    max-width:1500px;

    margin:0 auto;

    padding:
        20px
        24px
        40px;

    box-sizing:border-box;

    color:var(--ink);
}


/* =========================================================
   VOLVER
========================================================= */

.fn-olt-admin-v60 .back{
    height:39px;

    display:inline-flex;
    align-items:center;

    padding:0 13px;

    border:1px solid #d4e0ea;
    border-radius:10px;

    background:#fff;
    color:#304e6c;

    font-size:12px;
    font-weight:750;

    text-decoration:none;

    box-shadow:
        0 4px 12px
        rgba(24,53,83,.05);
}


/* =========================================================
   CABECERA OLT
========================================================= */

.fn-olt-admin-v60 .olt-head{
    margin-top:12px;

    padding:
        17px
        18px;

    display:grid;

    grid-template-columns:
        minmax(360px,1fr)
        auto;

    align-items:center;

    gap:18px;

    border:
        1px solid
        var(--line);

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 10px 30px
        rgba(23,52,83,.075);
}


.fn-olt-admin-v60 .olt-title-line{
    display:flex;
    align-items:center;

    gap:10px;
}


.fn-olt-admin-v60 .olt-title-line h1{
    margin:0;

    font-size:24px;
    line-height:29px;

    font-weight:850;

    letter-spacing:-.6px;
}


.fn-olt-admin-v60 .status-pill{
    min-height:28px;

    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        0
        10px;

    border:
        1px solid
        #bcebd9;

    border-radius:999px;

    background:#e8faf4;
    color:#07885f;

    font-size:10px;
    font-weight:850;

    text-transform:uppercase;
}


.fn-olt-admin-v60 .status-pill::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:currentColor;
}


.fn-olt-admin-v60 .status-pill.offline{
    border-color:#e1e6eb;

    background:#f0f3f6;
    color:#72869b;
}


/* FACTS */

.fn-olt-admin-v60 .facts{
    margin-top:10px;

    display:flex;
    flex-wrap:wrap;

    gap:7px;
}


.fn-olt-admin-v60 .fact{
    min-height:29px;

    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        0
        10px;

    border:
        1px solid
        #d7e3ed;

    border-radius:8px;

    background:#f9fbfd;

    color:#405d78;

    font-size:11px;
}


.fn-olt-admin-v60 .fact b{
    color:#173b5e;

    font-weight:800;
}


.fn-olt-admin-v60 .mono{
    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;
}


/* ACCIONES */

.fn-olt-admin-v60 .head-actions{
    display:flex;
    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;
}


.fn-olt-admin-v60 .btn{
    height:39px;

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

    gap:7px;

    padding:
        0
        13px;

    border:
        1px solid
        #d4e0ea;

    border-radius:10px;

    background:#fff;
    color:#27435f;

    font-size:11.5px;
    font-weight:800;

    white-space:nowrap;

    box-shadow:
        0 4px 11px
        rgba(23,51,81,.05);
}


.fn-olt-admin-v60 .btn:hover{
    transform:translateY(-1px);
}


.fn-olt-admin-v60 .btn.green{
    border-color:#08ad78;

    background:
        linear-gradient(
            135deg,
            #08b77d,
            #069d6c
        );

    color:#fff;
}


.fn-olt-admin-v60 .btn.dark{
    border-color:#142a47;

    background:#142a47;
    color:#fff;
}


.fn-olt-admin-v60 .btn.red{
    border-color:#ffc4cf;

    background:#fff8fa;
    color:#d72548;
}


.fn-olt-admin-v60 .btn.amber{
    border-color:#ffd69b;

    background:#fffaf1;
    color:#c96e00;
}


.fn-olt-admin-v60 .btn.small{
    height:32px;

    padding:
        0
        10px;

    font-size:10px;
}


/* =========================================================
   PESTAÑAS
========================================================= */

.fn-olt-admin-v60 .tabs{
    position:sticky;

    top:72px;

    z-index:15;

    margin-top:12px;

    padding:6px;

    display:flex;

    gap:4px;

    overflow-x:auto;

    border:
        1px solid
        #d9e4ed;

    border-radius:13px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 6px 18px
        rgba(24,53,83,.05);

    backdrop-filter:
        blur(12px);
}


.fn-olt-admin-v60 .tab-btn{
    flex:
        0
        0
        auto;

    height:40px;

    padding:
        0
        15px;

    border:0;

    border-radius:9px;

    background:transparent;
    color:#526b87;

    font-size:12px;
    font-weight:750;
}


.fn-olt-admin-v60 .tab-btn:hover{
    background:#f2f7fb;

    color:#173a5e;
}


.fn-olt-admin-v60 .tab-btn.active{
    background:
        linear-gradient(
            135deg,
            #1595ff,
            #0877ea
        );

    color:#fff;

    box-shadow:
        0 7px 15px
        rgba(8,127,245,.20);
}


/* =========================================================
   PANELES
========================================================= */

.fn-olt-admin-v60 .tab-panel{
    display:none;

    margin-top:12px;
}


.fn-olt-admin-v60 .tab-panel.active{
    display:block;
}


.fn-olt-admin-v60 .content-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.9fr)
        minmax(335px,.95fr);

    gap:13px;
}


/* =========================================================
   TARJETAS
========================================================= */

.fn-olt-admin-v60 .card{
    overflow:hidden;

    border:
        1px solid
        var(--line);

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 10px 30px
        rgba(23,52,83,.07);
}


.fn-olt-admin-v60 .card-head{
    min-height:60px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:
        12px
        16px;

    border-bottom:
        1px solid
        var(--line2);
}


.fn-olt-admin-v60 .card-icon{
    width:36px;
    height:36px;

    flex:
        0
        0
        36px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:#e8faf4;
    color:#08a873;

    font-size:17px;
}


.fn-olt-admin-v60 .card-head h2,
.fn-olt-admin-v60 .card-head h3{
    margin:0;

    font-size:15px;
    line-height:19px;

    font-weight:850;
}


.fn-olt-admin-v60 .card-head p{
    margin:
        4px
        0
        0;

    color:var(--muted);

    font-size:10.5px;
}


.fn-olt-admin-v60 .card-head .right{
    margin-left:auto;

    color:#657b91;

    font-size:10px;
}


/* =========================================================
   DETALLES
========================================================= */

.fn-olt-admin-v60 .config-list{
    display:grid;
}


.fn-olt-admin-v60 .config-row{
    min-height:46px;

    display:grid;

    grid-template-columns:
        235px
        minmax(0,1fr);

    align-items:center;

    gap:15px;

    padding:
        9px
        16px;

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

    font-size:12.5px;
}


.fn-olt-admin-v60 .config-row:first-child{
    border-top:0;
}


.fn-olt-admin-v60 .config-row span{
    color:#607893;
}


.fn-olt-admin-v60 .config-row strong{
    color:#17324f;

    font-weight:750;
}


.fn-olt-admin-v60 .protected{
    display:inline-flex;

    width:max-content;

    padding:
        5px
        8px;

    border-radius:999px;

    background:#eef3f7;

    color:#63798f !important;

    font-size:10px;
}


/* =========================================================
   OLT GRAFICA / ESTADO
========================================================= */

.fn-olt-admin-v60 .live-card{
    align-self:start;
}


.fn-olt-admin-v60 .device{
    position:relative;

    min-height:250px;

    padding:
        20px
        20px
        13px;

    display:flex;
    flex-direction:column;

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

    background:

        radial-gradient(
            circle at 50% 35%,
            #fff 0,
            #f8fbfd 52%,
            #eef5f9 100%
        );
}


.fn-olt-admin-v60 .device::after{
    content:"";

    position:absolute;

    left:12%;
    right:12%;
    bottom:19px;

    height:17px;

    border-radius:50%;

    background:
        rgba(25,48,69,.08);

    filter:
        blur(8px);
}


.fn-olt-admin-v60 .zte-logo{
    position:relative;

    z-index:2;

    color:#0876d7;

    font-size:30px;
    font-weight:900;

    letter-spacing:-2px;
}


.fn-olt-admin-v60 .zte-logo span{
    font-size:16px;

    letter-spacing:-1px;
}


/* CHASIS CSS */

.fn-olt-admin-v60 .chassis{
    position:relative;

    z-index:2;

    width:230px;
    height:118px;

    margin-top:12px;

    padding:
        20px
        12px
        12px;

    display:flex;

    gap:4px;

    border-radius:
        5px
        5px
        11px
        11px;

    background:
        linear-gradient(
            155deg,
            #34424e 0 10%,
            #71808b 11% 16%,
            #aeb8bd 17% 82%,
            #56636b 83%
        );

    box-shadow:
        0 18px 24px
        rgba(23,42,57,.18);
}


.fn-olt-admin-v60 .chassis::before{
    content:"";

    position:absolute;

    left:9px;
    right:9px;
    top:7px;

    height:7px;

    border-radius:3px;

    background:
        repeating-linear-gradient(
            90deg,
            #1e2932 0 19px,
            #e87917 20px 28px,
            #1e2932 29px 41px
        );
}


.fn-olt-admin-v60 .slot{
    flex:1;

    border:
        1px solid
        #75828a;

    border-radius:2px;

    background:
        repeating-linear-gradient(
            180deg,
            #e7ecee 0 5px,
            #9da8ad 6px 7px
        );

    box-shadow:
        inset 0 0 0 2px
        #d2d8da;
}


.fn-olt-admin-v60 .device-foot{
    position:relative;

    z-index:2;

    width:100%;

    margin-top:7px;

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

    color:#5a718b;

    font-size:10px;
}


.fn-olt-admin-v60 .mini-pill{
    min-height:23px;

    display:inline-flex;
    align-items:center;

    padding:
        0
        8px;

    border-radius:999px;

    background:#e8faf4;
    color:#07885f;

    font-size:9px;
    font-weight:850;
}


/* METRICAS */

.fn-olt-admin-v60 .metrics{
    border-top:
        1px solid
        var(--line2);
}


.fn-olt-admin-v60 .metric{
    min-height:50px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        9px
        14px;

    border-top:
        1px solid
        var(--line2);
}


.fn-olt-admin-v60 .metric:first-child{
    border-top:0;
}


.fn-olt-admin-v60 .metric-icon{
    width:31px;
    height:31px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:#eff8ff;
    color:#087ef0;
}


.fn-olt-admin-v60 .metric:nth-child(2)
.fn-olt-admin-v60 .metric-icon{
    background:#fff5e5;
    color:#ed8a00;
}


.fn-olt-admin-v60 .metric:nth-child(3)
.fn-olt-admin-v60 .metric-icon{
    background:#e9faf4;
    color:#08a873;
}


.fn-olt-admin-v60 .metric:nth-child(4)
.fn-olt-admin-v60 .metric-icon{
    background:#ffedf1;
    color:#ef2d51;
}


.fn-olt-admin-v60 .metric span{
    color:#536b86;

    font-size:11.5px;
}


.fn-olt-admin-v60 .metric b{
    margin-left:auto;

    color:#102b48;

    font-size:12.5px;
}


/* FANS */

.fn-olt-admin-v60 .subhead{
    padding:
        8px
        14px;

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

    border-bottom:
        1px solid
        var(--line2);

    background:#f8fafc;

    color:#71869d;

    font-size:9.5px;
    font-weight:850;

    text-transform:uppercase;
}


.fn-olt-admin-v60 .fans{
    padding:
        7px
        14px
        11px;

    background:#fbfdfe;
}


.fn-olt-admin-v60 .fan{
    height:38px;

    display:flex;
    align-items:center;

    padding:
        0
        10px;

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

    color:#4e6884;

    font-size:11.5px;
}


.fn-olt-admin-v60 .fan:first-child{
    border-top:0;
}


.fn-olt-admin-v60 .fan i{
    width:25px;
    height:25px;

    margin-right:8px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:#e8faf4;
    color:#08ad78;

    font-style:normal;
}


.fn-olt-admin-v60 .fan b{
    margin-left:auto;

    color:#16314e;
}


/* SIGNAL */

.fn-olt-admin-v60 .signal-card{
    margin-top:13px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:
        14px
        16px;
}


.fn-olt-admin-v60 .signal-bars{
    height:27px;

    display:flex;
    align-items:end;

    gap:3px;
}


.fn-olt-admin-v60 .signal-bars i{
    width:4px;

    border-radius:2px;

    background:#08ad78;
}


.fn-olt-admin-v60 .signal-bars i:nth-child(1){
    height:7px;
}

.fn-olt-admin-v60 .signal-bars i:nth-child(2){
    height:12px;
}

.fn-olt-admin-v60 .signal-bars i:nth-child(3){
    height:18px;
}

.fn-olt-admin-v60 .signal-bars i:nth-child(4){
    height:24px;
}


.fn-olt-admin-v60 .signal-card b{
    display:block;

    color:#079769;

    font-size:18px;
}


.fn-olt-admin-v60 .signal-card span{
    display:block;

    margin-top:3px;

    color:#7b8da4;

    font-size:10px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.fn-olt-admin-v60 .toolbar{
    margin-bottom:10px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;
}


.fn-olt-admin-v60 .notice{
    min-height:39px;

    margin-bottom:10px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:
        8px
        12px;

    border:
        1px solid
        #dce6ee;

    border-radius:10px;

    background:#f8fbfd;

    color:#4c6682;

    font-size:11px;
}


.fn-olt-admin-v60 .notice.warn{
    border-color:#f4d184;

    background:#fffaf0;

    color:#965906;
}


/* =========================================================
   TABLAS
========================================================= */

.fn-olt-admin-v60 .table-wrap{
    overflow-x:auto;
}


.fn-olt-admin-v60 .data-table{
    width:100%;

    border-collapse:collapse;

    table-layout:fixed;
}


.fn-olt-admin-v60 .data-table th{
    height:44px;

    padding:
        0
        9px;

    border-bottom:
        1px solid
        var(--line);

    background:#f7fafc;

    color:#6e839b;

    font-size:9.5px;
    line-height:12px;

    font-weight:850;

    text-align:left;

    text-transform:uppercase;
}


.fn-olt-admin-v60 .data-table td{
    padding:
        10px
        9px;

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

    color:#36506d;

    font-size:11.5px;
    line-height:15px;

    vertical-align:middle;

    overflow-wrap:anywhere;
}


.fn-olt-admin-v60 .data-table tbody tr:hover{
    background:#f9fcfe;
}


.fn-olt-admin-v60 .good{
    color:#07986b !important;
}


.fn-olt-admin-v60 .bad{
    color:#ee2b51 !important;
}


.fn-olt-admin-v60 .muted{
    color:#91a2b4 !important;
}


.fn-olt-admin-v60 .dot{
    display:inline-block;

    width:6px;
    height:6px;

    margin-right:5px;

    border-radius:50%;

    background:currentColor;
}


.fn-olt-admin-v60 .tag{
    display:inline-flex;
    align-items:center;

    padding:
        5px
        8px;

    border-radius:999px;

    background:#e5f9f1;
    color:#078b62;

    font-size:9.5px;
    font-weight:850;
}


.fn-olt-admin-v60 .tag.gray{
    background:#eef2f6;
    color:#6f849a;
}


.fn-olt-admin-v60 .chips{
    display:flex;
    flex-wrap:wrap;

    gap:4px;
}


.fn-olt-admin-v60 .vlan-chip{
    min-width:24px;

    padding:
        4px
        6px;

    border-radius:6px;

    background:#eaf5ff;
    color:#0876da;

    font-size:9px;
    font-weight:850;

    text-align:center;
}


.fn-olt-admin-v60 .stack{
    display:flex;
    flex-direction:column;

    gap:3px;
}


.fn-olt-admin-v60 .stack small{
    color:#8294a9;

    font-size:9.5px;
}


/* =========================================================
   EMPTY
========================================================= */

.fn-olt-admin-v60 .empty{
    min-height:225px;

    display:flex;
    flex-direction:column;

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

    padding:
        35px
        22px;

    text-align:center;
}


.fn-olt-admin-v60 .empty-icon{
    width:64px;
    height:64px;

    margin-bottom:13px;

    display:grid;
    place-items:center;

    border:
        1px solid
        #bdebd9;

    border-radius:20px;

    background:#eafaf3;

    color:#079c6d;

    font-size:25px;
}


.fn-olt-admin-v60 .empty h3{
    margin:0;

    font-size:16px;
}


.fn-olt-admin-v60 .empty p{
    max-width:530px;

    margin:
        7px
        0
        0;

    color:#71869d;

    font-size:11px;
    line-height:17px;
}


/* =========================================================
   AVANZADO
========================================================= */

.fn-olt-admin-v60 .advanced-warning{
    padding:
        10px
        16px;

    border-bottom:
        1px solid
        #f5dda7;

    background:#fffaf0;

    color:#9d600d;

    font-size:11px;
}


.fn-olt-admin-v60 .settings-group-title{
    padding:
        10px
        16px;

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

    border-bottom:
        1px solid
        var(--line2);

    background:#f7fafc;

    color:#4c6885;

    font-size:9.5px;
    font-weight:850;

    text-transform:uppercase;
}


.fn-olt-admin-v60 .setting{
    min-height:66px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        250px;

    align-items:center;

    gap:20px;

    padding:
        10px
        16px;

    border-top:
        1px solid
        var(--line2);
}


.fn-olt-admin-v60 .setting b{
    display:block;

    font-size:12px;
}


.fn-olt-admin-v60 .setting p{
    margin:
        4px
        0
        0;

    color:#8092a8;

    font-size:10px;
    line-height:15px;
}


.fn-olt-admin-v60 .field{
    height:38px;

    padding:
        0
        10px;

    border:
        1px solid
        #d6e2ec;

    border-radius:9px;

    background:#fff;

    color:#2b4663;

    font-size:11px;
}


/* =========================================================
   TOAST
========================================================= */

.fn-olt-admin-v60 .toast{
    position:fixed;

    z-index:90;

    right:24px;
    bottom:24px;

    max-width:370px;

    padding:
        13px
        16px;

    border-radius:12px;

    background:#112b49;
    color:#fff;

    font-size:11.5px;
    line-height:16px;

    box-shadow:
        0 18px 45px
        rgba(6,24,43,.27);

    opacity:0;

    transform:
        translateY(12px);

    pointer-events:none;

    transition:.2s;
}


.fn-olt-admin-v60 .toast.show{
    opacity:1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .fn-olt-admin-v60 .olt-head{
        grid-template-columns:1fr;
    }

    .fn-olt-admin-v60 .head-actions{
        justify-content:flex-start;
    }

    .fn-olt-admin-v60 .content-grid{
        grid-template-columns:
            minmax(0,1.5fr)
            330px;
    }

}


@media(max-width:900px){

    .fn-olt-admin-v60{
        padding:
            18px
            15px
            35px;
    }

    .fn-olt-admin-v60 .content-grid{
        grid-template-columns:1fr;
    }

    .fn-olt-admin-v60 .config-row{
        grid-template-columns:
            190px
            minmax(0,1fr);
    }

}


@media(max-width:650px){

    .fn-olt-admin-v60 .olt-title-line{
        align-items:flex-start;
        flex-direction:column;
    }

    .fn-olt-admin-v60 .config-row,
    .fn-olt-admin-v60 .setting{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   FASTNET OLT REAL IMAGE V6.1
========================================================= */

.fn-olt-admin-v60 .mg-olt-real-image{
    position:relative;
    z-index:2;

    display:block;

    width:auto;
    max-width:92%;
    height:auto;
    max-height:245px;

    margin:10px auto 4px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 18px 20px
            rgba(24,48,70,.18)
        );
}


/*
 * El chasis CSS anterior ya no se usa.
 */

.fn-olt-admin-v60 .chassis{
    display:none !important;
}


/*
 * Ajuste del panel del equipo para la fotografía real.
 */

.fn-olt-admin-v60 .device{
    min-height:300px;

    padding:
        22px
        20px
        14px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(22,145,235,.08),
            transparent 180px
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbfd
        );
}


.fn-olt-admin-v60 .device::after{
    left:18%;
    right:18%;
    bottom:42px;

    height:19px;

    background:
        rgba(26,53,78,.10);

    filter:
        blur(12px);
}


.fn-olt-admin-v60 .zte-logo{
    margin-bottom:2px;

    font-size:31px;
}


.fn-olt-admin-v60 .device-foot{
    margin-top:7px;
}



/* ===== gestion-pon-v71.css del sistema anterior, tal cual ===== */
/*
============================================================
 FASTNET - PON ADMIN V7.1
============================================================
*/

.fn-pon71{
    --p-blue:#0b82f4;
    --p-green:#08ad78;
    --p-red:#ed3150;
    --p-orange:#ef9512;
    --p-purple:#8550ea;

    --p-ink:#102b48;
    --p-text:#405c78;
    --p-muted:#758ba1;

    --p-line:#d8e4ed;
    --p-soft:#f6f9fc;
}


/* HEADER */

.fn-pon71 .pon71-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-bottom:10px;
}

.fn-pon71 .pon71-head h2{
    margin:0;

    font-size:17px;
    font-weight:850;
}

.fn-pon71 .pon71-head p{
    margin:4px 0 0;

    color:var(--p-muted);

    font-size:10.5px;
}


/* FILTRO TARJETAS */

.fn-pon71 .pon71-tabs{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-bottom:11px;
}

.fn-pon71 .pon71-tab{
    min-height:37px;

    padding:0 13px;

    border:
        1px solid
        #d4e0ea;

    border-radius:9px;

    background:#fff;
    color:#48647f;

    font-size:10.5px;
    font-weight:800;
}

.fn-pon71 .pon71-tab.active{
    border-color:var(--p-blue);

    background:var(--p-blue);
    color:#fff;
}


/* TARJETA GPON */

.fn-pon71 .pon71-card{
    overflow:hidden;

    margin-bottom:14px;

    border:
        1px solid
        var(--p-line);

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 9px 26px
        rgba(23,51,80,.065);
}

.fn-pon71 .pon71-card-head{
    min-height:72px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:
        11px
        15px;

    border-bottom:
        1px solid
        #e5edf3;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfdfe
        );
}

.fn-pon71 .pon71-board-icon{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#eaf6ff;
    color:#0b82f4;

    font-size:20px;
}

.fn-pon71 .pon71-card-title{
    min-width:0;
}

.fn-pon71 .pon71-card-title strong{
    display:block;

    color:var(--p-ink);

    font-size:14px;
    font-weight:850;
}

.fn-pon71 .pon71-meta{
    margin-top:4px;

    display:flex;
    flex-wrap:wrap;

    gap:5px;
}

.fn-pon71 .pon71-meta span{
    padding:
        3px
        7px;

    border-radius:6px;

    background:#f0f5f8;
    color:#60778d;

    font-size:9px;
    font-weight:750;
}


/* ESTADO TARJETA */

.fn-pon71 .pon71-card-actions{
    margin-left:auto;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;
}

.fn-pon71 .pon71-board-status{
    min-height:27px;

    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:0 9px;

    border-radius:999px;

    font-size:9px;
    font-weight:850;
}

.fn-pon71 .pon71-board-status::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:currentColor;
}

.fn-pon71 .pon71-board-status.active{
    background:#e8faf3;
    color:#078d62;
}

.fn-pon71 .pon71-board-status.dead{
    background:#ffedf1;
    color:#d93050;
}

.fn-pon71 .pon71-board-status.standby{
    background:#fff4df;
    color:#d67c00;
}


/* BOTONES */

.fn-pon71 .pon71-btn{
    min-height:34px;

    padding:0 10px;

    border:
        1px solid
        #d3dfe8;

    border-radius:8px;

    background:#fff;
    color:#35516d;

    font-size:9.5px;
    font-weight:800;
}

.fn-pon71 .pon71-btn.blue{
    border-color:#bcdcf8;

    background:#edf7ff;
    color:#0876d9;
}

.fn-pon71 .pon71-btn.red{
    border-color:#ffc8d2;

    background:#fff4f6;
    color:#d72949;
}


/* TABLA */

.fn-pon71 .pon71-table-wrap{
    overflow-x:auto;
}

.fn-pon71 .pon71-table{
    width:100%;

    border-collapse:collapse;

    table-layout:fixed;
}

.fn-pon71 .pon71-table th{
    height:42px;

    padding:0 7px;

    background:#f7fafc;

    border-bottom:
        1px solid
        #dde7ee;

    color:#70859b;

    font-size:9px;
    font-weight:850;

    text-align:left;
    text-transform:uppercase;
}

.fn-pon71 .pon71-table td{
    height:54px;

    padding:7px;

    border-top:
        1px solid
        #e9eff4;

    color:#385571;

    font-size:10.5px;
}

.fn-pon71 .pon71-table tbody tr:hover{
    background:#f9fcfe;
}

.fn-pon71 .pon71-interface{
    color:#123b60;

    font-family:Consolas,monospace;

    font-size:10.5px;
    font-weight:850;
}


/* ADMIN */

.fn-pon71 .pon71-admin{
    min-height:23px;

    display:inline-flex;
    align-items:center;

    padding:
        0
        7px;

    border-radius:999px;

    font-size:8.8px;
    font-weight:850;
}

.fn-pon71 .pon71-admin.enabled{
    background:#e7faf2;
    color:#078a60;
}

.fn-pon71 .pon71-admin.disabled{
    background:#eef2f5;
    color:#70849a;
}

.fn-pon71 .pon71-admin.unknown{
    background:#f2f4f6;
    color:#8b9aaa;
}


/* ACTIVIDAD */

.fn-pon71 .pon71-activity{
    display:flex;
    align-items:center;

    gap:6px;

    white-space:nowrap;
}

.fn-pon71 .pon71-activity i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#a2afbc;
}

.fn-pon71 .pon71-activity.used i{
    background:#08ad78;
}

.fn-pon71 .pon71-signal.good{
    color:#078c62;

    font-weight:800;
}

.fn-pon71 .pon71-signal.none{
    color:#91a0ae;
}


/* MODAL */

.fn-pon71-modal{
    position:fixed;

    z-index:120;

    inset:0;

    display:none;

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

    padding:20px;

    background:
        rgba(6,20,36,.46);

    backdrop-filter:
        blur(3px);
}

.fn-pon71-modal.open{
    display:flex;
}

.fn-pon71-modal-card{
    width:min(
        520px,
        100%
    );

    overflow:hidden;

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 24px 70px
        rgba(5,24,42,.30);
}

.fn-pon71-modal-head{
    min-height:64px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        11px
        15px;

    border-bottom:
        1px solid
        #e2eaf0;
}

.fn-pon71-modal-head h3{
    margin:0;

    font-size:16px;
}

.fn-pon71-modal-head p{
    margin:3px 0 0;

    color:#798da3;

    font-size:10px;
}

.fn-pon71-close{
    margin-left:auto;

    width:34px;
    height:34px;

    border:
        1px solid
        #d9e4ec;

    border-radius:9px;

    background:#fff;

    font-size:18px;
}

.fn-pon71-modal-body{
    padding:
        10px
        15px;
}

.fn-pon71-detail-row{
    min-height:39px;

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

    gap:15px;

    border-bottom:
        1px solid
        #edf2f5;
}

.fn-pon71-detail-row span{
    color:#71869c;

    font-size:10.5px;
}

.fn-pon71-detail-row strong{
    color:#193955;

    font-size:11px;

    text-align:right;
}

.fn-pon71-modal-actions{
    display:flex;
    justify-content:flex-end;

    gap:8px;

    padding:
        12px
        15px;

    border-top:
        1px solid
        #e2eaf0;

    background:#f9fbfd;
}

.fn-pon71-action-enable,
.fn-pon71-action-disable{
    min-height:38px;

    padding:0 13px;

    border:0;
    border-radius:9px;

    color:#fff;

    font-size:10.5px;
    font-weight:850;
}

.fn-pon71-action-enable{
    background:#08ad78;
}

.fn-pon71-action-disable{
    background:#e93755;
}


/* PROGRESO */

.fn-pon71 .pon71-progress{
    display:none;

    padding:
        9px
        15px;

    border-bottom:
        1px solid
        #e4ecf2;

    background:#f5faff;

    color:#46647f;

    font-size:10px;
}

.fn-pon71 .pon71-progress.show{
    display:block;
}


@media(max-width:900px){

    .fn-pon71 .pon71-card-head{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .fn-pon71 .pon71-card-actions{
        width:100%;

        margin-left:0;
    }

    .fn-pon71 .pon71-table{
        min-width:900px;
    }

}

/* FASTNET-PON-V73-BEGIN */

#v-oltgestion .fn-pon71{
    --p73-blue:#0b86f7;
    --p73-green:#08a977;
    --p73-green-soft:#e8faf3;
    --p73-red:#e73754;
    --p73-line:#dce6ee;
    --p73-soft:#edf2f6;
    --p73-ink:#153652;
    --p73-muted:#71869b;
    color:var(--p73-ink);
}

#v-oltgestion #pon71Tabs,
#v-oltgestion .pon72-filter,
#v-oltgestion .pon72-live{
    display:none!important;
}

#v-oltgestion .pon71-head{
    margin:15px 2px 0;
    padding:0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

#v-oltgestion .pon71-head h2{
    margin:0;
    color:#102d49;
    font-size:21px;
}

#v-oltgestion .pon71-head p{
    margin:5px 0 0;
    color:var(--p73-muted);
    font-size:12px;
}

#v-oltgestion .pon73-live{
    height:29px;
    padding:0 11px;
    border:1px solid #afe6d1;
    border-radius:999px;
    background:#edfcf6;
    color:#07875f;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

#v-oltgestion .pon73-live:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 4px rgba(8,169,119,.08);
}

#v-oltgestion .pon73-summary{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
}

#v-oltgestion .pon73-metric{
    min-height:76px;
    padding:13px 14px;
    border:1px solid var(--p73-line);
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 8px 22px rgba(23,52,83,.045);
}

#v-oltgestion .pon73-metric-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:11px;
    background:#eaf5ff;
    color:#087ee9;
    display:grid;
    place-items:center;
    font-size:18px;
    font-style:normal;
    font-weight:900;
}

#v-oltgestion .pon73-metric:nth-child(2) .pon73-metric-icon{
    background:#f1edff;
    color:#7850d8;
}

#v-oltgestion .pon73-metric:nth-child(3) .pon73-metric-icon{
    background:var(--p73-green-soft);
    color:var(--p73-green);
}

#v-oltgestion .pon73-metric:nth-child(4) .pon73-metric-icon{
    background:#fff6e8;
    color:#e98a08;
}

#v-oltgestion .pon73-metric span{
    display:block;
    color:#74899f;
    font-size:10px;
}

#v-oltgestion .pon73-metric b{
    display:block;
    margin-top:4px;
    color:#173553;
    font-size:17px;
    line-height:1.15;
}

#v-oltgestion .pon73-metric small{
    margin-left:4px;
    color:#8799ab;
    font-size:9px;
}

#v-oltgestion .pon73-tools{
    margin-top:11px;
    padding:10px 12px;
    border:1px solid var(--p73-line);
    border-radius:13px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 7px 20px rgba(23,52,83,.04);
}

#v-oltgestion .pon73-refresh{
    height:37px;
    padding:0 13px;
    border:1px solid var(--p73-blue);
    border-radius:9px;
    background:linear-gradient(135deg,#1597ff,#0877e8);
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

#v-oltgestion .pon73-refresh:disabled{
    opacity:.58;
    cursor:wait;
}

#v-oltgestion .pon73-filter{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:9px;
}

#v-oltgestion .pon73-filter label{
    color:#506b85;
    font-size:10.5px;
    font-weight:850;
}

#v-oltgestion .pon73-filter select{
    height:37px;
    min-width:225px;
    padding:0 34px 0 11px;
    border:1px solid #d8e3ec;
    border-radius:9px;
    background:#fff;
    color:#284761;
    font-size:11px;
    font-weight:750;
}

#v-oltgestion #pon71Cards{
    margin-top:11px;
    display:grid;
    gap:13px;
}

#v-oltgestion .pon71-card{
    margin:0;
    border:1px solid #d8e4ed;
    border-radius:15px;
    background:#fff;
    box-shadow:0 12px 32px rgba(18,48,79,.065);
    overflow:hidden;
}

#v-oltgestion .pon71-card.pon73-hidden{
    display:none!important;
}

#v-oltgestion .pon71-card-head{
    min-height:72px;
    padding:13px 15px;
    border-bottom:1px solid var(--p73-soft);
    background:linear-gradient(90deg,#f9fcfe,#fff);
    display:flex;
    align-items:center;
    gap:12px;
}

#v-oltgestion .pon71-board-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:12px;
    background:linear-gradient(145deg,#1596ff,#0877e7);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:19px;
    box-shadow:0 8px 17px rgba(8,127,245,.2);
}

#v-oltgestion .pon71-card-title strong{
    color:#163653;
    font-size:15px;
}

#v-oltgestion .pon71-meta{
    margin-top:6px;
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}

#v-oltgestion .pon71-meta span{
    height:21px;
    padding:0 7px;
    border-radius:6px;
    background:#edf3f7;
    color:#597189;
    display:inline-flex;
    align-items:center;
    font-size:9px;
    font-weight:800;
}

#v-oltgestion .pon71-card-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:7px;
}

#v-oltgestion .pon71-board-status{
    height:27px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    font-weight:900;
}

#v-oltgestion .pon71-board-status.active{
    border:1px solid #bcebd8;
    background:var(--p73-green-soft);
    color:#07875f;
}

#v-oltgestion .pon71-btn{
    min-height:35px;
    padding:0 11px;
    border:1px solid #d5e1ea;
    border-radius:9px;
    background:#fff;
    color:#294662;
    font-size:10.5px;
    font-weight:800;
}

#v-oltgestion .pon71-btn.blue{
    border-color:#9bcff8;
    background:#eef8ff;
    color:#0878df;
}

#v-oltgestion .pon71-btn.red{
    border-color:#ffc3cf;
    background:#fff8fa;
    color:#db2849;
}

#v-oltgestion .pon71-table-wrap{
    width:100%;
    overflow-x:auto;
}

#v-oltgestion .pon71-table{
    width:100%;
    min-width:1210px;
    border-collapse:collapse;
    table-layout:fixed;
}

#v-oltgestion .pon71-table th{
    height:45px;
    padding:0 10px;
    border-bottom:1px solid var(--p73-line);
    background:#f6f9fb;
    color:#698097;
    font-size:9px;
    font-weight:850;
    text-align:left;
    text-transform:uppercase;
}

#v-oltgestion .pon71-table td{
    height:61px;
    padding:10px;
    border-top:1px solid var(--p73-soft);
    color:#36506d;
    font-size:11.5px;
    line-height:1.35;
    vertical-align:middle;
}

#v-oltgestion .pon71-table tbody tr:hover{
    background:#f8fcff;
}

#v-oltgestion .pon71-table th:nth-child(1){width:7%}
#v-oltgestion .pon71-table th:nth-child(2){width:6%}
#v-oltgestion .pon71-table th:nth-child(3){width:11%}
#v-oltgestion .pon71-table th:nth-child(4){width:8%}
#v-oltgestion .pon71-table th:nth-child(5){width:10%}
#v-oltgestion .pon71-table th:nth-child(6){width:10%}
#v-oltgestion .pon71-table th:nth-child(7){width:10%}
#v-oltgestion .pon71-table th:nth-child(8){width:11%}
#v-oltgestion .pon71-table th:nth-child(9){width:13%}
#v-oltgestion .pon71-table th:nth-child(10){width:7%}
#v-oltgestion .pon71-table th:nth-child(11){width:7%}

#v-oltgestion .pon71-interface{
    color:#125487;
    font-family:Consolas,"SFMono-Regular",monospace;
    font-size:11.5px;
    font-weight:800;
    white-space:nowrap;
}

#v-oltgestion .pon71-admin,
#v-oltgestion .pon71-activity{
    width:max-content;
    height:25px;
    padding:0 9px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:9.5px;
    font-weight:850;
    white-space:nowrap;
}

#v-oltgestion .pon71-admin.enabled,
#v-oltgestion .pon71-activity.up{
    border:1px solid #bcebd8;
    background:var(--p73-green-soft);
    color:#07875f;
}

#v-oltgestion .pon71-admin.disabled,
#v-oltgestion .pon71-activity.down{
    border:1px solid #dbe3ea;
    background:#eef2f6;
    color:#6f849a;
}

#v-oltgestion .pon71-admin.unknown{
    border:1px solid #cfe6fb;
    background:#eef7ff;
    color:#1677c8;
}

#v-oltgestion .pon71-activity i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

#v-oltgestion .pon73-onus{
    display:flex;
    flex-direction:column;
    gap:3px;
    white-space:nowrap;
}

#v-oltgestion .pon73-onus b{
    color:#173553;
    font-size:11.5px;
}

#v-oltgestion .pon73-onus small{
    color:#7f92a6;
    font-size:10px;
}

#v-oltgestion .pon73-load{
    min-width:78px;
}

#v-oltgestion .pon73-load-line{
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    gap:5px;
    color:#5d7590;
    font-size:9px;
}

#v-oltgestion .pon73-load-line b{
    color:#244b6d;
}

#v-oltgestion .pon73-load-bar{
    height:7px;
    border-radius:999px;
    background:#e6edf3;
    display:block;
    overflow:hidden;
}

#v-oltgestion .pon73-load-bar i{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#08ad78,#61d5af);
    display:block;
}

#v-oltgestion .pon71-signal.good{
    color:#078f65;
    font-weight:800;
}

#v-oltgestion .pon71-progress:empty{
    display:none;
}

#v-oltgestion .fn-pon71-modal{
    background:rgba(8,25,43,.55);
    backdrop-filter:blur(3px);
}

#v-oltgestion .fn-pon71-modal-card{
    width:min(620px,calc(100vw - 28px));
    border:1px solid #d8e4ed;
    border-radius:17px;
    background:#fff;
    box-shadow:0 24px 70px rgba(7,24,43,.28);
    overflow:hidden;
}

#v-oltgestion .fn-pon71-modal-head{
    min-height:76px;
    padding:16px 18px;
    border-bottom:1px solid var(--p73-soft);
    background:linear-gradient(90deg,#f8fbfd,#fff);
}

#v-oltgestion .fn-pon71-modal-head h3{
    margin:0;
    color:#143551;
    font-size:17px;
}

#v-oltgestion .fn-pon71-modal-head p{
    margin:5px 0 0;
    color:#74899f;
    font-size:10.5px;
}

#v-oltgestion .fn-pon71-close{
    width:35px;
    height:35px;
    margin-left:auto;
    border:1px solid #d9e4ed;
    border-radius:9px;
    background:#fff;
    color:#48627c;
    font-size:20px;
}

#v-oltgestion .fn-pon71-modal-body{
    padding:15px 17px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

#v-oltgestion .fn-pon71-detail-row{
    min-height:63px;
    padding:10px 12px;
    border:1px solid #e1e9f0;
    border-radius:10px;
    background:#fbfdfe;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:5px;
}

#v-oltgestion .fn-pon71-detail-row:first-child{
    grid-column:1/-1;
}

#v-oltgestion .fn-pon71-detail-row span{
    color:#7890a6;
    font-size:9.5px;
}

#v-oltgestion .fn-pon71-detail-row strong{
    color:#193b5b;
    font-size:12px;
}

#v-oltgestion .fn-pon71-modal-actions{
    padding:12px 17px;
    border-top:1px solid var(--p73-soft);
    background:#fbfdfe;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

#v-oltgestion .fn-pon71-action-disable{
    min-height:37px;
    padding:0 13px;
    border:1px solid var(--p73-red);
    border-radius:9px;
    background:linear-gradient(135deg,#f34a68,#df2e4d);
    color:#fff;
    font-size:11px;
    font-weight:850;
}

@media(max-width:1100px){
    #pon .pon73-summary{
        grid-template-columns:1fr 1fr;
    }

    #pon .pon71-card-head{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    #pon .pon71-card-actions{
        width:100%;
        margin-left:0;
    }
}

@media(max-width:700px){
    #pon .pon71-head{
        align-items:flex-start;
        flex-direction:column;
    }

    #pon .pon73-summary{
        grid-template-columns:1fr;
    }

    #pon .pon73-tools{
        align-items:stretch;
        flex-direction:column;
    }

    #pon .pon73-filter{
        margin-left:0;
        align-items:stretch;
        flex-direction:column;
    }

    #pon .pon73-filter select,
    #pon .pon73-refresh,
    #pon .pon73-live{
        width:100%;
    }

    #pon .fn-pon71-modal-body{
        grid-template-columns:1fr;
    }
}

/* FASTNET-PON-V73-END */

/* ---------- ramas de una pantalla ---------- */
/* Los recuadros de arriba son la navegacion de Gestion de ONUs: cada uno
   abre su pantalla. Tienen que verse pulsables y el activo, marcado. */
.tile.clic{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.tile.clic:hover{border-color:#b9cbe4;box-shadow:0 4px 14px rgba(3,29,67,.10);
  transform:translateY(-1px)}
.tile.clic:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.tile.act{border-color:var(--azul);box-shadow:0 0 0 2px rgba(37,99,235,.16)}

/* La barra de "volver" vive fuera de #onu-ficha, asi que las reglas
   importadas no la alcanzan: sin esto hereda el boton azul del panel y el
   icono crece hasta ocupar media pantalla. */
#onu-detalle .fn-detail-topbar{margin:0 0 14px}
#onu-detalle .fn-back-button{display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 15px;border:1px solid #71a6ff;border-radius:7px;
  background:#fff;color:#075fe4;font:inherit;font-size:.78rem;font-weight:700;
  cursor:pointer}
#onu-detalle .fn-back-button:hover{background:#f2f7ff}
#onu-detalle .fn-back-button svg{width:16px;height:16px;flex:0 0 auto}

/* El sistema anterior usaba un <a> para volver; aqui es un <button> porque
   la navegacion es por vistas, no por URL. Sin esto hereda el boton azul
   del panel y el texto se pierde sobre su propio fondo. */
#v-autorizar .fn-auth-back{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:11px;font-weight:600;color:#607086}
#v-autorizar .fn-auth-back:hover{color:#1685f2;background:none}

/* ===== autorizar ONU: diseno traido del sistema anterior ===== */
/* =========================================================
   FASTNET - AUTORIZAR ONU V19.3
========================================================= */

#v-autorizar{
    --fn-blue:#0787ee;
    --fn-green:#0fa875;
    --fn-purple:#8b5cf6;
    --fn-red:#e5485f;
    --fn-amber:#f59e0b;
    --fn-cyan:#0ea5c9;

    --fn-text:#172033;
    --fn-muted:#748094;
    --fn-line:#e6ebf2;
    --fn-bg:#f6f8fb;

    padding-bottom:40px;
}


#v-autorizar *,
#v-autorizar *::before,
#v-autorizar *::after{
    box-sizing:border-box;
}


#v-autorizar .fn-auth-module-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;

    margin-bottom:18px;
}


#v-autorizar .fn-auth-back{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-bottom:8px;

    color:#607086;
    text-decoration:none;

    font-size:11px;
    font-weight:600;
}


#v-autorizar .fn-auth-back:hover{
    color:var(--fn-blue);
}


#v-autorizar .fn-auth-back svg{
    width:14px;
    height:14px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#v-autorizar .fn-auth-module-head h2{
    margin:0;

    color:var(--fn-text);

    font-size:20px;
    font-weight:760;
}


#v-autorizar .fn-auth-module-head p{
    margin:4px 0 0;

    color:var(--fn-muted);

    font-size:11px;
}


#v-autorizar .fn-auth-state{
    min-width:195px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 13px;

    background:#fff;
    border:1px solid var(--fn-line);
    border-radius:10px;
}


#v-autorizar .fn-auth-state-dot{
    width:9px;
    height:9px;

    border-radius:999px;

    background:#8b5cf6;

    box-shadow:
        0 0 0 4px rgba(139,92,246,.12);
}


#v-autorizar .fn-auth-state strong,
#v-autorizar .fn-auth-state span{
    display:block;
}


#v-autorizar .fn-auth-state strong{
    color:var(--fn-text);
    font-size:11px;
}


#v-autorizar .fn-auth-state div span{
    margin-top:2px;

    color:var(--fn-muted);
    font-size:9.5px;
}


#v-autorizar .fn-auth-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        330px;

    gap:18px;

    align-items:start;
}


#v-autorizar .fn-auth-main{
    display:grid;
    gap:15px;
}


#v-autorizar .fn-auth-side{
    display:grid;
    gap:15px;

    position:sticky;
    top:82px;
}


#v-autorizar .fn-auth-card,
#v-autorizar .fn-side-card{
    background:#fff;

    border:1px solid var(--fn-line);
    border-radius:12px;

    box-shadow:
        0 2px 8px rgba(25,40,70,.035);
}


#v-autorizar .fn-auth-card{
    padding:18px;
}


#v-autorizar .fn-side-card{
    padding:16px;
}


#v-autorizar .fn-card-head{
    display:flex;
    align-items:center;
    gap:11px;

    padding-bottom:14px;
    margin-bottom:15px;

    border-bottom:1px solid #edf1f6;
}


#v-autorizar .fn-card-head > div:nth-child(2){
    min-width:0;
}


#v-autorizar .fn-card-head h3,
#v-autorizar .fn-summary-title h3,
#v-autorizar .fn-side-head h3{
    margin:0;

    color:var(--fn-text);

    font-size:13px;
    font-weight:760;
}


#v-autorizar .fn-card-head p,
#v-autorizar .fn-summary-title p{
    margin:3px 0 0;

    color:var(--fn-muted);

    font-size:9.7px;
}


#v-autorizar .fn-card-icon{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:grid;
    place-items:center;

    border-radius:10px;
}


#v-autorizar .fn-card-icon svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#v-autorizar .fn-card-icon.blue{
    color:#087fdb;
    background:#eaf5ff;
}


#v-autorizar .fn-card-icon.cyan{
    color:#0797b5;
    background:#e8f9fc;
}


#v-autorizar .fn-card-icon.green{
    color:#079b6a;
    background:#e8f8f1;
}


#v-autorizar .fn-card-icon.purple{
    color:#7c4fe0;
    background:#f2ecff;
}


#v-autorizar .fn-card-icon.amber{
    color:#d98a00;
    background:#fff5df;
}


#v-autorizar .fn-readonly-badge{
    margin-left:auto;

    padding:4px 8px;

    border-radius:999px;

    color:#66758a;
    background:#f1f4f8;

    font-size:8.5px;
    font-weight:700;
}


#v-autorizar .fn-fields{
    display:grid;
    gap:12px;
}


#v-autorizar .fn-fields-2{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


#v-autorizar .fn-fields-3{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


#v-autorizar .fn-field{
    display:grid;
    gap:5px;
}


#v-autorizar .fn-field-full{
    grid-column:1/-1;
}


#v-autorizar .fn-field > span,
#v-autorizar .fn-mode-label{
    color:#59687c;

    font-size:9px;
    font-weight:730;

    text-transform:uppercase;
    letter-spacing:.035em;
}


#v-autorizar .fn-field input,
#v-autorizar .fn-field select{
    width:100%;
    height:36px;

    padding:0 10px;

    outline:none;

    background:#fff;

    color:#243045;

    border:1px solid #dce3ec;
    border-radius:7px;

    font-family:inherit;
    font-size:10.5px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


#v-autorizar .fn-field input:focus,
#v-autorizar .fn-field select:focus{
    border-color:#6eb9ee;

    box-shadow:
        0 0 0 3px rgba(7,135,238,.08);
}


#v-autorizar .fn-field input[readonly]{
    background:#f8fafc;
    color:#657388;
}


#v-autorizar .fn-mode-row{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:14px;
}


#v-autorizar .fn-mode-label{
    margin-right:4px;
}


#v-autorizar .fn-radio-pill{
    height:31px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:0 11px;

    border:1px solid #dce3ec;
    border-radius:8px;

    color:#526075;
    background:#fff;

    font-size:10px;
    font-weight:650;

    cursor:pointer;
}


#v-autorizar .fn-radio-pill input{
    display:none;
}


#v-autorizar .fn-radio-dot{
    width:10px;
    height:10px;

    border-radius:999px;

    border:2px solid #b6c1cf;
}


#v-autorizar .fn-radio-pill.active{
    border-color:#b9ddf6;
    background:#f4faff;
    color:#117dc6;
}


#v-autorizar .fn-radio-pill.active .fn-radio-dot{
    border-color:#0787ee;

    box-shadow:
        inset 0 0 0 2px #fff;

    background:#0787ee;
}


#v-autorizar .fn-location-actions{
    display:flex;
    gap:8px;

    margin-top:13px;
}


#v-autorizar .fn-secondary-btn{
    height:32px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 11px;

    border:1px solid #dce3ec;
    border-radius:7px;

    background:#fff;
    color:#536176;

    font-family:inherit;
    font-size:9.8px;
    font-weight:650;

    cursor:pointer;
}


#v-autorizar .fn-secondary-btn:hover{
    border-color:#c2d0df;
    background:#f8fafc;
}


#v-autorizar .fn-secondary-btn svg{
    width:14px;
    height:14px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#v-autorizar .fn-side-head{
    display:flex;
    justify-content:space-between;
    gap:12px;

    align-items:flex-start;

    padding-bottom:13px;

    border-bottom:1px solid #edf1f6;
}


#v-autorizar .fn-side-label{
    display:block;

    margin-bottom:3px;

    color:#8792a3;

    font-size:8.5px;

    text-transform:uppercase;
    letter-spacing:.05em;
}


#v-autorizar .fn-live-mark{
    display:flex;
    align-items:center;
    gap:5px;

    padding:4px 7px;

    border-radius:999px;

    background:#f2ecff;
    color:#7851d4;

    font-size:8.5px;
    font-weight:700;
}


#v-autorizar .fn-live-mark span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#8b5cf6;
}


#v-autorizar .fn-onu-preview{
    display:grid;
    place-items:center;

    min-height:128px;

    margin:14px 0;

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            #f9fbfd,
            #f5f7fa
        );

    border:1px solid #edf1f5;
}


#v-autorizar .fn-onu-device{
    width:175px;
    height:62px;

    position:relative;

    border-radius:
        12px 12px 9px 9px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #e9edf2
        );

    border:1px solid #ccd4de;

    box-shadow:
        0 10px 18px rgba(38,48,65,.10);
}


#v-autorizar .fn-onu-device::before{
    content:"";

    position:absolute;
    left:10px;
    right:10px;
    bottom:-5px;

    height:7px;

    border-radius:50%;

    background:
        rgba(40,50,65,.11);

    filter:blur(4px);
}


#v-autorizar .fn-onu-leds{
    position:absolute;

    left:15px;
    bottom:11px;

    display:flex;
    gap:5px;
}


#v-autorizar .fn-onu-leds i{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#b9c3ce;
}


#v-autorizar .fn-onu-leds i:first-child{
    background:#20b874;

    box-shadow:
        0 0 0 2px rgba(32,184,116,.10);
}


#v-autorizar .fn-onu-logo{
    position:absolute;

    right:14px;
    top:18px;

    color:#9aa5b2;

    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
}


#v-autorizar .fn-state-lines,
#v-autorizar .fn-summary-lines{
    display:grid;
}


#v-autorizar .fn-state-lines > div,
#v-autorizar .fn-summary-lines > div{
    min-height:31px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border-bottom:1px solid #f0f3f7;
}


#v-autorizar .fn-state-lines > div:last-child,
#v-autorizar .fn-summary-lines > div:last-child{
    border-bottom:0;
}


/* Los que se guardan en la ficha pero no viajan a la OLT van despues de una
   linea, para que se lea de un vistazo donde acaba la orden al equipo. */
#v-autorizar .fn-summary-lines > div.fn-sep{
    margin-top:6px;
    padding-top:6px;

    border-top:1px solid #e3e9f1;
}


/* Un control apagado tiene que verse apagado, y decir por que al pasar por
   encima. Un desplegable que parece activo y no hace nada engaña. */
#v-autorizar .fn-field.apagada{
    opacity:.55;
    cursor:not-allowed;
}


#v-autorizar .fn-field.apagada select{
    cursor:not-allowed;
    background:#f4f6f9;
}


/* ---- cuenta PPPoE en la ficha del cliente ---- */
.pppoe-caja{
    border-top:1px solid var(--line);
}
.pppoe-cab{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:10px;
}
.pppoe-cab h4{
    margin:0;
    font-size:.86rem;
    font-weight:700;
}
#pppoe-estado{
    font-size:.76rem;
}
#pppoe-estado.ok{ color:var(--verde); font-weight:600 }
#pppoe-estado.gris{ color:var(--muted) }
.pppoe-nota{
    margin:8px 0 0;
    color:var(--muted);
    font-size:.72rem;
}
.pppoe-caja .pend-refresco{
    display:flex;
    flex-direction:column;
}
.pppoe-caja .pend-refresco .ol-bt{ height:38px }

/* El aviso de "esta ONU va a quedar sin marcar" no puede leerse igual que la
   nota gris de al lado: es lo unico que separa un alta terminada de una a
   medias. */
#v-autorizar #au-aviso.ojo{
    color:#b5651d;
    font-weight:600;
}


/* ---- buscador de clientes ----
   La lista de resultados flota sobre lo de abajo en vez de empujarlo: si
   empujara, el formulario entero daria un salto con cada letra. */
#v-autorizar .fn-buscador{
    position:relative;
}


#v-autorizar .fn-sugerencias{
    position:absolute;
    z-index:20;
    top:100%;
    left:0;
    right:0;

    margin-top:4px;
    max-height:246px;
    overflow-y:auto;

    border:1px solid #dce3ec;
    border-radius:9px;

    background:#fff;

    box-shadow:0 10px 26px rgba(31,45,66,.13);
}


#v-autorizar .fn-sug{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;

    padding:8px 11px;

    border:0;
    border-bottom:1px solid #f2f5f9;

    background:transparent;
    text-align:left;

    cursor:pointer;
}


#v-autorizar .fn-sug:last-child{
    border-bottom:0;
}


#v-autorizar .fn-sug:hover,
#v-autorizar .fn-sug:focus-visible{
    background:#f4faff;
}


#v-autorizar .fn-sug strong{
    color:#2c3749;

    /* La lista vive en la columna principal, donde los campos van a 14px:
       con 10px se leia como una nota al pie y no como algo que se elige. */
    font-size:13px;
    font-weight:700;
}


#v-autorizar .fn-sug span{
    color:#7c8798;

    font-size:11px;
    font-weight:500;
}


#v-autorizar .fn-sug-vacio{
    padding:10px 12px;

    color:#7c8798;

    font-size:11.5px;
}


/* El cliente ya elegido se queda a la vista con su boton de quitar: sin esto
   no se sabe si la barra vacia significa "ninguno" o "ya elegiste uno". */
#v-autorizar .fn-elegido{
    margin:9px 0 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:8px 11px;

    border:1px solid #cfe6f8;
    border-radius:9px;

    background:#f4faff;
}


#v-autorizar .fn-elegido strong{
    display:block;

    color:#12618f;

    font-size:13px;
    font-weight:700;
}


#v-autorizar .fn-elegido span{
    color:#5d7d95;

    font-size:11px;
    font-weight:500;
}


#v-autorizar .fn-elegido button{
    height:30px;

    padding:0 13px;

    border:1px solid #cfd9e5;
    border-radius:7px;

    color:#526075;
    background:#fff;

    font-size:9.4px;
    font-weight:650;

    cursor:pointer;
}


#v-autorizar .fn-elegido button:hover{
    border-color:#f0b4b4;
    color:#c0392b;
}


#v-autorizar .fn-nota-campo{
    margin:6px 0 0;

    display:block;

    color:#7c8798;

    font-size:9.3px;
    line-height:1.45;
}


/* La nota que va suelta bajo las pastillas necesita aire debajo: pegada a la
   etiqueta "VLAN de servicio" se leen como una sola cosa. */
#v-autorizar p.fn-nota-campo{
    margin:8px 0 16px;

    max-width:640px;
}


#v-autorizar .fn-state-lines span,
#v-autorizar .fn-summary-lines span{
    color:#7c8798;
    font-size:9.3px;
}


#v-autorizar .fn-state-lines strong,
#v-autorizar .fn-summary-lines strong{
    max-width:62%;

    overflow:hidden;
    text-overflow:ellipsis;

    color:#2c3749;

    font-size:9.8px;
    font-weight:700;

    white-space:nowrap;
}


#v-autorizar .fn-info-box{
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin-top:12px;
    padding:10px;

    border-left:3px solid #1aa772;
    border-radius:6px;

    background:#eefaf5;
    color:#378069;

    font-size:9.2px;
    line-height:1.45;
}


#v-autorizar .fn-info-box svg{
    width:14px;
    height:14px;

    flex:0 0 14px;

    margin-top:1px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#v-autorizar .fn-mini-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}


#v-autorizar .fn-mini-head > div{
    display:grid;
    gap:2px;
}


#v-autorizar .fn-mini-head span{
    color:#788598;
    font-size:8.8px;
}


#v-autorizar .fn-mini-head strong{
    color:#263247;
    font-size:10.5px;
}


#v-autorizar .fn-free-badge{
    padding:4px 7px;

    border-radius:6px;

    background:#eff3f7;
    color:#5f6b7d;

    font-size:8.5px;
    font-weight:700;
}


#v-autorizar .fn-pon-number{
    display:flex;
    align-items:flex-end;
    gap:7px;

    margin-top:15px;
}


#v-autorizar .fn-pon-number strong{
    color:#172033;

    font-size:24px;
    line-height:1;
}


#v-autorizar .fn-pon-number span{
    padding-bottom:2px;

    color:#8a94a4;

    font-size:8.8px;
}


#v-autorizar .fn-progress{
    height:6px;

    margin-top:12px;

    overflow:hidden;

    border-radius:999px;

    background:#edf1f5;
}


#v-autorizar .fn-progress span{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:#11aa75;

    transition:width .3s ease;
}


#v-autorizar .fn-progress-caption{
    margin-top:6px;

    color:#8a94a4;

    font-size:8.5px;
}


#v-autorizar .fn-summary-title{
    display:flex;
    align-items:center;
    gap:10px;

    padding-bottom:13px;
    margin-bottom:8px;

    border-bottom:1px solid #edf1f6;
}


#v-autorizar .fn-authorize-final{
    width:100%;
    height:39px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:14px;

    border:0;
    border-radius:8px;

    background:#0fa875;
    color:#fff;

    font-family:inherit;
    font-size:10.5px;
    font-weight:760;

    cursor:pointer;

    box-shadow:
        0 5px 12px rgba(15,168,117,.17);
}


#v-autorizar .fn-authorize-final:hover{
    background:#0b9568;
}


#v-autorizar .fn-authorize-final svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;

    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#v-autorizar .fn-safe-note{
    margin:8px 2px 0;

    color:#99a2b0;

    text-align:center;

    font-size:8.2px;
    line-height:1.4;
}


#v-autorizar .fn-toast{
    position:fixed;

    right:20px;
    bottom:20px;

    z-index:9999;

    max-width:340px;

    padding:11px 13px;

    border-radius:9px;

    background:#172033;
    color:#fff;

    box-shadow:
        0 12px 28px rgba(10,20,40,.20);

    font-size:10px;
}


@media(max-width:1150px){

    #v-autorizar .fn-auth-layout{
        grid-template-columns:1fr;
    }

    #v-autorizar .fn-auth-side{
        position:static;

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

    #v-autorizar .fn-summary-card{
        grid-column:1/-1;
    }

}


@media(max-width:760px){

    #v-autorizar .fn-auth-module-head{
        align-items:flex-start;
        flex-direction:column;
    }

    #v-autorizar .fn-auth-state{
        width:100%;
    }

    #v-autorizar .fn-fields-2,
#v-autorizar .fn-fields-3{
        grid-template-columns:1fr;
    }

    #v-autorizar .fn-auth-side{
        grid-template-columns:1fr;
    }

    #v-autorizar .fn-summary-card{
        grid-column:auto;
    }

    #v-autorizar .fn-mode-row{
        flex-wrap:wrap;
    }

}
/* =========================================================
   FASTNET V19.4
   ONU DETECTADA COMPACTA
========================================================= */





#v-autorizar
.fn-detected-card{

    padding-bottom:16px;
}


/* OLT ocupa más; #v-autorizar Canal más compacto */

#v-autorizar
.fn-detected-top{

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        minmax(150px,.85fr);

    gap:12px;

    margin-bottom:12px;
}
/*
 * Tarjeta / Puerto pequeños.
 * SN / Modelo reciben más espacio.
 */





#v-autorizar
.fn-detected-bottom{

    display:grid;

    grid-template-columns:
        minmax(70px,.55fr)
        minmax(70px,.55fr)
        minmax(145px,1.35fr)
        minmax(145px,1.35fr);

    gap:12px;
}
/*
 * Aunque sean SELECT deshabilitados,
 * deben verse como datos válidos y no "apagados".
 */





#v-autorizar
.fn-detected-card
select:disabled{

    opacity:1;

    cursor:default;

    background-color:#f8fafc;

    color:#657388;

    -webkit-text-fill-color:#657388;
}
/*
 * Hacemos esta tarjeta un poco más compacta
 * sin cambiar tipografía general.
 */





#v-autorizar
.fn-detected-card
.fn-field input,
#v-autorizar
.fn-detected-card
.fn-field select{

    height:34px;
}
/* Responsive */





@media(max-width:850px){

    #v-autorizar
    .fn-detected-bottom{

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

}


@media(max-width:600px){

    #v-autorizar
    .fn-detected-top,
#v-autorizar
    .fn-detected-bottom{

        grid-template-columns:1fr;
    }

}
/* =========================================================
   FASTNET V19.5
   ONU DETECTADA FINAL
========================================================= */






#v-autorizar
.fn-detected-v195{

    padding-bottom:16px;
}


#v-autorizar
.fn-detected-v195
.fn-card-head{

    margin-bottom:14px;
}
/* OLT + CANAL */





#v-autorizar
.fn-detected-v195-top{

    display:grid;

    grid-template-columns:
        minmax(0,2.2fr)
        minmax(150px,.8fr);

    gap:12px;

    margin-bottom:12px;
}
/*
 * Tarjeta y Puerto pequeños.
 * SN y Modelo más anchos.
 */





#v-autorizar
.fn-detected-v195-bottom{

    display:grid;

    grid-template-columns:
        minmax(72px,.55fr)
        minmax(72px,.55fr)
        minmax(155px,1.4fr)
        minmax(170px,1.55fr);

    gap:12px;
}


#v-autorizar
.fn-detected-v195
.fn-field input,
#v-autorizar
.fn-detected-v195
.fn-field select{

    height:34px;
}
/*
 * Datos automáticos.
 */





#v-autorizar
.fn-detected-v195
input[readonly]{

    background:#f8fafc;

    color:#657388;
}
/*
 * Canal y Modelo se ven claramente editables.
 */





#v-autorizar
.fn-detected-v195
#fn-channel,
#v-autorizar
.fn-detected-v195
#fn-model{

    cursor:pointer;

    background-color:#fff;

    color:#253146;

    border-color:#ccd7e4;
}


#v-autorizar
.fn-detected-v195
#fn-channel:hover,
#v-autorizar
.fn-detected-v195
#fn-model:hover{

    border-color:#9ec8e7;
}


@media(max-width:900px){

    #v-autorizar
    .fn-detected-v195-bottom{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


@media(max-width:620px){

    #v-autorizar
    .fn-detected-v195-top,
#v-autorizar
    .fn-detected-v195-bottom{

        grid-template-columns:1fr;

    }

}
/* =========================================================
   FASTNET V19.6
   OLT + TIPO PON + CANAL
========================================================= */






#v-autorizar
.fn-detected-v195-top{

    grid-template-columns:
        minmax(0,2.35fr)
        minmax(110px,.75fr)
        minmax(150px,1fr) !important;

}
/* Tipo PON es detectado / bloqueado */





#v-autorizar
.fn-detected-v195
#fn-pon-type{

    background:#f8fafc;

    color:#657388;

    cursor:default;

}
/* OLT detectada / bloqueada */





#v-autorizar
.fn-detected-v195
#fn-olt{

    background:#f8fafc;

    color:#657388;

}
/* Canal permanece editable */





#v-autorizar
.fn-detected-v195
#fn-channel{

    background:#fff;

    color:#253146;

    cursor:pointer;

}


@media(max-width:900px){

    #v-autorizar
    .fn-detected-v195-top{

        grid-template-columns:
            minmax(0,1.7fr)
            minmax(100px,.7fr)
            minmax(130px,.8fr) !important;

    }

}


@media(max-width:620px){

    #v-autorizar
    .fn-detected-v195-top{

        grid-template-columns:1fr !important;

    }

}
/* =========================================================
   FASTNET V19.7B - DATOS CLIENTE
========================================================= */






#v-autorizar
#fn-client-name[readonly],
#v-autorizar
#fn-address[readonly]{

    background:#f8fafc;

    color:#536176;

    cursor:default;

}


#v-autorizar
#fn-lat::placeholder,
#v-autorizar
#fn-lng::placeholder{

    color:#a5afbd;

    opacity:1;

}


#v-autorizar
#fn-client{

    cursor:pointer;

}
/* =========================================================
   FASTNET V19.7D
   NOMBRE OLT + DIRECCION EDITABLES
========================================================= */






#v-autorizar
#fn-client-name,
#v-autorizar
#fn-address{

    background:#ffffff !important;

    color:#253146 !important;

    cursor:text !important;

}
/* Señal visual al entrar a editar */





#v-autorizar
#fn-client-name:focus,
#v-autorizar
#fn-address:focus{

    background:#ffffff !important;

}
/* =========================================================
   FASTNET V19.8
   TIPOGRAFIA GENERAL - AUTORIZAR ONU

   IMPORTANTE:
   No define una fuente externa.
   Hereda la fuente oficial del shell FASTNET.
========================================================= */

/* ---------------------------------------------------------
   BASE GENERAL
--------------------------------------------------------- */









#v-autorizar{

    font-family:inherit !important;

    font-size:13px;

    line-height:1.4;

    color:#253146;

}
/*
 * Los controles HTML no siempre heredan la fuente
 * automáticamente en todos los navegadores.
 */





#v-autorizar input,
#v-autorizar select,
#v-autorizar textarea,
#v-autorizar button{

    font-family:inherit !important;

}
/* ---------------------------------------------------------
   TITULOS PRINCIPALES DE LAS TARJETAS
--------------------------------------------------------- */





#v-autorizar .fn-card h2,
#v-autorizar .fn-card h3,
#v-autorizar .fn-card-title,
#v-autorizar .card-title{

    font-family:inherit !important;

    font-size:15px !important;

    font-weight:700 !important;

    line-height:1.25 !important;

    letter-spacing:-0.1px !important;

}
/* ---------------------------------------------------------
   SUBTITULOS / DESCRIPCIONES DE TARJETAS
--------------------------------------------------------- */





#v-autorizar .fn-card-header p,
#v-autorizar .fn-card-subtitle,
#v-autorizar .card-subtitle{

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:400 !important;

    line-height:1.4 !important;

}
/* ---------------------------------------------------------
   ETIQUETAS DE CAMPOS

   OLT
   TIPO PON
   CANAL
   TARJETA
   PUERTO
   SERIAL
   MODELO
   ZONA
   CLIENTE
   ETC.
--------------------------------------------------------- */





#v-autorizar .fn-field > span,
#v-autorizar label.fn-field > span{

    font-family:inherit !important;

    font-size:11px !important;

    font-weight:600 !important;

    line-height:1.2 !important;

    letter-spacing:.02em !important;

}
/* ---------------------------------------------------------
   INPUTS / SELECTS
--------------------------------------------------------- */





#v-autorizar .fn-field input,
#v-autorizar .fn-field select,
#v-autorizar .fn-field textarea,
#v-autorizar #fn-client,
#v-autorizar #fn-client-name,
#v-autorizar #fn-address,
#v-autorizar #fn-lat,
#v-autorizar #fn-lng{

    font-family:inherit !important;

    font-size:13px !important;

    font-weight:500 !important;

    line-height:1.3 !important;

}
/* ---------------------------------------------------------
   PLACEHOLDERS
--------------------------------------------------------- */





#v-autorizar input::placeholder,
#v-autorizar textarea::placeholder{

    font-family:inherit !important;

    font-size:12.5px !important;

    font-weight:400 !important;

    color:#9aa6b6;

    opacity:1;

}
/* ---------------------------------------------------------
   RADIO BUTTONS
   ROUTING / BRIDGE
--------------------------------------------------------- */





#v-autorizar .fn-radio,
#v-autorizar .fn-radio-option,
#v-autorizar .fn-radio label,
#v-autorizar label:has(input[type="radio"]){

    font-family:inherit !important;

    font-size:12.5px !important;

    font-weight:500 !important;

}
/* ---------------------------------------------------------
   BOTONES
--------------------------------------------------------- */





#v-autorizar button,
#v-autorizar .fn-button,
#v-autorizar .btn{

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:600 !important;

    line-height:1.25 !important;

}
/* Botón final Autorizar ONU */





#v-autorizar .fn-authorize-button,
#v-autorizar #fn-authorize,
#v-autorizar #fn-authorize-onu{

    font-size:13px !important;

    font-weight:700 !important;

}
/* ---------------------------------------------------------
   BADGES / ESTADOS
--------------------------------------------------------- */





#v-autorizar .fn-badge,
#v-autorizar .badge,
#v-autorizar .fn-status,
#v-autorizar .status{

    font-family:inherit !important;

    font-size:11px !important;

    font-weight:600 !important;

    line-height:1.2 !important;

}
/* ---------------------------------------------------------
   PANEL DERECHO
   ONU DETECTADA / PON / RESUMEN
--------------------------------------------------------- */





#v-autorizar aside h2,
#v-autorizar aside h3,
#v-autorizar .fn-side-card h2,
#v-autorizar .fn-side-card h3{

    font-family:inherit !important;

    font-size:14px !important;

    font-weight:700 !important;

    line-height:1.3 !important;

}


#v-autorizar aside p,
#v-autorizar .fn-side-card p{

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:400 !important;

    line-height:1.4 !important;

}
/* Filas del resumen */





#v-autorizar .fn-summary-row,
#v-autorizar .fn-summary-row span,
#v-autorizar .fn-summary-row strong{

    font-family:inherit !important;

    font-size:12px !important;

    line-height:1.35 !important;

}


#v-autorizar .fn-summary-row strong{

    font-weight:600 !important;

}
/* ---------------------------------------------------------
   TEXTOS PEQUEÑOS
--------------------------------------------------------- */





#v-autorizar small,
#v-autorizar .fn-help,
#v-autorizar .fn-hint{

    font-family:inherit !important;

    font-size:11px !important;

    font-weight:400 !important;

    line-height:1.35 !important;

}
/* ---------------------------------------------------------
   TITULO INTERNO DE AUTORIZAR ONU
   NO AGRANDARLO DEMASIADO
--------------------------------------------------------- */





#v-autorizar > h1,
#v-autorizar .fn-page-title{

    font-family:inherit !important;

    font-size:20px !important;

    font-weight:700 !important;

    line-height:1.25 !important;

    letter-spacing:-0.2px !important;

}


#v-autorizar > .fn-page-subtitle{

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:400 !important;

}
/* ---------------------------------------------------------
   CLIENTE

   Nombre y dirección permanecen EDITABLES.
   Esto es solamente tipografía.
--------------------------------------------------------- */





#v-autorizar #fn-client-name,
#v-autorizar #fn-address{

    font-size:13px !important;

    font-weight:500 !important;

}


#v-autorizar #fn-lat,
#v-autorizar #fn-lng{

    font-size:13px !important;

    font-weight:500 !important;

}
/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */





@media(max-width:700px){

    #v-autorizar .fn-card h2,
#v-autorizar .fn-card h3,
#v-autorizar .fn-card-title{

        font-size:14.5px !important;

    }


    #v-autorizar .fn-field input,
#v-autorizar .fn-field select,
#v-autorizar .fn-field textarea{

        font-size:13px !important;

    }

}
/* =========================================================
   FASTNET V19.8A
   +1PX SOBRE TIPOGRAFIA V19.8
========================================================= */

/* TITULOS DE TARJETAS */









#v-autorizar .fn-card h2,
#v-autorizar .fn-card h3,
#v-autorizar .fn-card-title,
#v-autorizar .card-title{

    font-size:16px !important;

}
/* SUBTITULOS */





#v-autorizar .fn-card-header p,
#v-autorizar .fn-card-subtitle,
#v-autorizar .card-subtitle{

    font-size:13px !important;

}
/* ETIQUETAS */





#v-autorizar .fn-field > span,
#v-autorizar label.fn-field > span{

    font-size:12px !important;

}
/* CAMPOS */





#v-autorizar .fn-field input,
#v-autorizar .fn-field select,
#v-autorizar .fn-field textarea,
#v-autorizar #fn-client,
#v-autorizar #fn-client-name,
#v-autorizar #fn-address,
#v-autorizar #fn-lat,
#v-autorizar #fn-lng{

    font-size:14px !important;

}
/* PLACEHOLDERS */





#v-autorizar input::placeholder,
#v-autorizar textarea::placeholder{

    font-size:13.5px !important;

}
/* ROUTING / BRIDGE */





#v-autorizar .fn-radio,
#v-autorizar .fn-radio-option,
#v-autorizar .fn-radio label,
#v-autorizar label:has(input[type="radio"]){

    font-size:13.5px !important;

}
/* BOTONES */





#v-autorizar button,
#v-autorizar .fn-button,
#v-autorizar .btn{

    font-size:13px !important;

}
/* BOTON FINAL */





#v-autorizar .fn-authorize-button,
#v-autorizar #fn-authorize,
#v-autorizar #fn-authorize-onu{

    font-size:14px !important;

}
/* BADGES */





#v-autorizar .fn-badge,
#v-autorizar .badge,
#v-autorizar .fn-status,
#v-autorizar .status{

    font-size:12px !important;

}
/* PANEL DERECHO */





#v-autorizar aside h2,
#v-autorizar aside h3,
#v-autorizar .fn-side-card h2,
#v-autorizar .fn-side-card h3{

    font-size:15px !important;

}


#v-autorizar aside p,
#v-autorizar .fn-side-card p{

    font-size:13px !important;

}
/* RESUMEN */





#v-autorizar .fn-summary-row,
#v-autorizar .fn-summary-row span,
#v-autorizar .fn-summary-row strong{

    font-size:13px !important;

}
/* TEXTOS PEQUEÑOS */





#v-autorizar small,
#v-autorizar .fn-help,
#v-autorizar .fn-hint{

    font-size:12px !important;

}
/* TITULO INTERNO */





#v-autorizar > h1,
#v-autorizar .fn-page-title{

    font-size:21px !important;

}


#v-autorizar > .fn-page-subtitle{

    font-size:13px !important;

}
/* MOVIL */





@media(max-width:700px){

    #v-autorizar .fn-card h2,
#v-autorizar .fn-card h3,
#v-autorizar .fn-card-title{

        font-size:15.5px !important;

    }


    #v-autorizar .fn-field input,
#v-autorizar .fn-field select,
#v-autorizar .fn-field textarea{

        font-size:14px !important;

    }

}
/* =========================================================
   FASTNET V19.8B
   TITULOS Y SUBTITULOS DE BLOQUES
========================================================= */






#v-autorizar .fn-card-header h2,
#v-autorizar .fn-card-header h3,
#v-autorizar .fn-card-title,
#v-autorizar .card-title,
#v-autorizar .section-title,
#v-autorizar .block-title{
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #14213d !important;
    margin: 0 !important;
}

#v-autorizar .fn-card-header p,
#v-autorizar .fn-card-subtitle,
#v-autorizar .card-subtitle,
#v-autorizar .section-subtitle,
#v-autorizar .block-subtitle{
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #6b7a99 !important;
    margin-top: 6px !important;
}
/* separa mejor icono y textos del encabezado */



#v-autorizar .fn-card-header,
#v-autorizar .card-header{
    align-items: flex-start !important;
    gap: 12px !important;
}

#v-autorizar .fn-card-header-text,
#v-autorizar .card-header-text{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
/* badge solo lectura / otros badges del header */



#v-autorizar .fn-card-header .fn-badge,
#v-autorizar .fn-card-header .badge,
#v-autorizar .card-header .fn-badge,
#v-autorizar .card-header .badge{
    font-size: 11px !important;
}
/* movil */



@media (max-width: 700px){
    #v-autorizar .fn-card-header h2,
#v-autorizar .fn-card-header h3,
#v-autorizar .fn-card-title,
#v-autorizar .card-title,
#v-autorizar .section-title,
#v-autorizar .block-title{
        font-size: 18px !important;
    }

    #v-autorizar .fn-card-header p,
#v-autorizar .fn-card-subtitle,
#v-autorizar .card-subtitle,
#v-autorizar .section-subtitle,
#v-autorizar .block-subtitle{
        font-size: 13px !important;
    }
}
/* =========================================================
   FASTNET V19.9B
   SEÑAL EN VIVO - TARJETA DERECHA
========================================================= */






#v-autorizar .fn-signal-card-v199b{

    padding:16px !important;

    border-top:2px solid #1597f5;

}
/* CABECERA */





#v-autorizar .fn199b-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:15px;

}


#v-autorizar .fn199b-title-wrap{

    display:flex;

    align-items:center;

    gap:9px;

}


#v-autorizar .fn199b-title-wrap h3{

    margin:0 !important;

    font-family:inherit !important;

    font-size:16px !important;

    font-weight:700 !important;

    color:#15223a !important;

}


#v-autorizar .fn199b-icon{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:#eaf5ff;

    color:#1597f5;

}


#v-autorizar .fn199b-icon svg{

    width:18px;

    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}


#v-autorizar .fn199b-pending{

    display:flex;

    align-items:center;

    gap:6px;

    padding:5px 9px;

    border-radius:999px;

    background:#f2eeff;

    color:#7656e9;

    font-size:11px;

    font-weight:600;

}


#v-autorizar .fn199b-pending i{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#8a68f6;

}
/* ONU */





#v-autorizar .fn199b-device-wrap{

    display:flex;

    justify-content:center;

    padding:2px 0 16px;

}


#v-autorizar .fn199b-device{

    width:142px !important;

    height:64px !important;

}
/* POTENCIA */





#v-autorizar .fn199b-power-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;

    margin-bottom:10px;

}


#v-autorizar .fn199b-power-box{

    min-width:0;

    padding:12px;

    border:1px solid #dce5ef;

    border-radius:11px;

    background:#fbfcfe;

}


#v-autorizar .fn199b-power-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:8px;

}


#v-autorizar .fn199b-power-title span{

    color:#52637c;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

}


#v-autorizar .fn199b-power-title i{

    width:7px;

    height:7px;

    flex:0 0 auto;

    border-radius:50%;

    background:#20c997;

    box-shadow:
        0 0 0 3px rgba(32,201,151,.10);

}


#v-autorizar .fn199b-power-box strong{

    display:block;

    min-height:24px;

    color:#15243d;

    font-size:20px;

    font-weight:700;

    line-height:1.1;

}


#v-autorizar .fn199b-power-box small{

    display:block;

    margin-top:5px;

    color:#8090a5;

    font-size:11px;

    font-weight:400;

}
/* DISTANCIA */





#v-autorizar .fn199b-distance{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    min-height:42px;

    padding:9px 11px;

    margin-bottom:10px;

    border:1px solid #dce5ef;

    border-radius:10px;

    background:#fbfcfe;

}


#v-autorizar .fn199b-distance > div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#586982;

    font-size:12px;

}


#v-autorizar .fn199b-distance-icon{

    color:#e0a000;

    font-size:16px;

    font-weight:700;

}


#v-autorizar .fn199b-distance strong{

    color:#25344b;

    font-size:14px;

    font-weight:600;

}
/* MENSAJE */





#v-autorizar .fn199b-info{

    margin-top:0 !important;

    font-size:11.5px !important;

    line-height:1.4 !important;

}
/* IDS DEL DISEÑO ANTERIOR */





#v-autorizar .fn199b-compat{

    display:none !important;

}
/* RESPONSIVE */





@media(max-width:1150px){

    #v-autorizar .fn199b-power-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    #v-autorizar .fn199b-power-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}
/* =========================================================
   FASTNET V19.9C
   OCUPACION DEL PON - COMPACTO
========================================================= */

/* SOLO la tarjeta que contiene fn-pon-label */









#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label){

    padding:11px 14px !important;

}
/* CABECERA */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-mini-head{

    margin-bottom:4px !important;

    align-items:center !important;

}


#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-mini-head > div{

    display:flex !important;

    align-items:center !important;

    gap:7px !important;

}


#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-mini-head span{

    font-size:11px !important;

    line-height:1.15 !important;

}


#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
#fn-pon-label{

    font-size:12px !important;

    line-height:1.15 !important;

}
/* LIBRES */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
#fn-free-count{

    padding:4px 7px !important;

    font-size:10.5px !important;

    line-height:1 !important;

}
/* 6 / 128 */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-pon-number{

    display:flex !important;

    align-items:baseline !important;

    gap:6px !important;

    margin:4px 0 5px !important;

}


#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
#fn-pon-used{

    font-size:21px !important;

    line-height:1 !important;

}


#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-pon-number > span{

    font-size:10.5px !important;

    line-height:1 !important;

}
/* BARRA */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-progress{

    height:5px !important;

    margin:0 0 4px !important;

}
/* TEXTO INFERIOR */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label)
.fn-progress-caption{

    margin:0 !important;

    font-size:10.5px !important;

    line-height:1.2 !important;

}
/* Evitar altura mínima heredada */





#v-autorizar .fn-auth-side
.fn-side-card:has(#fn-pon-label){

    min-height:0 !important;

}

/* ===== ficha de ONU =====
   Valores tomados del paquete de diseno (handoff de alta fidelidad). Todo
   va anclado a #onu-ficha porque esta hoja la comparten todas las pantallas
   del panel: reglas sueltas como .card o .tabla se llevarian por delante el
   resto. Del diseno no se copia el armazon (barra lateral, cabecera): eso
   ya lo pone el panel y duplicarlo daria dos menus. */
#onu-ficha{
  --fo-azul:#1d4ed8; --fo-azul2:#2563eb; --fo-tinta:#0f2a5c; --fo-base:#1e293b;
  --fo-sec:#475569; --fo-etiq:#7c8aa5; --fo-etiq2:#5b6b86; --fo-tenue:#94a3b8;
  --fo-borde:#e6ebf3; --fo-borde2:#e2e8f0; --fo-linea:#eef2f8; --fo-fila:#f2f5fa;
  --fo-verde:#16a34a; --fo-verde2:#15803d; --fo-verde3:#22c55e;
  --fo-ambar:#b45309; --fo-ambar2:#d97706; --fo-rojo:#dc2626; --fo-rojo2:#b91c1c;
  color:var(--fo-base);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; gap:16px;
}
#onu-ficha button{font:inherit;cursor:pointer;background:#fff}
#onu-ficha svg{flex:0 0 auto}
#onu-ficha .fo-caja{background:#fff;border:1px solid var(--fo-borde);
  border-radius:14px;box-shadow:0 1px 2px rgba(15,42,92,.04)}
#onu-ficha h3{margin:0;font-size:15.5px;font-weight:700;color:var(--fo-tinta)}
#onu-ficha .fo-cab{display:flex;align-items:center;gap:9px;margin-bottom:14px}
#onu-ficha .fo-cab svg{width:18px;height:18px;color:var(--fo-azul)}

/* --- resumen de la ONU --- */
#onu-ficha .fo-resumen{padding:20px 24px;display:grid;
  grid-template-columns:1fr 1.35fr 250px;gap:28px;align-items:center}
#onu-ficha .fo-foto{height:132px;border-radius:10px;display:grid;
  place-items:center;padding:6px}
#onu-ficha .fo-foto img{max-width:100%;max-height:132px;object-fit:contain;
  display:block}
#onu-ficha .fo-chip-estado{display:inline-flex;align-items:center;gap:8px;
  background:#eaf7ee;color:var(--fo-verde2);font-size:13px;font-weight:600;
  border-radius:8px;padding:7px 14px;margin-bottom:16px}
#onu-ficha .fo-chip-estado:before{content:"";width:8px;height:8px;
  border-radius:50%;background:var(--fo-verde);
  box-shadow:0 0 0 3px rgba(22,163,74,.15)}
#onu-ficha .fo-chip-estado.caida{background:#fdeeee;color:var(--fo-rojo2)}
#onu-ficha .fo-chip-estado.caida:before{background:var(--fo-rojo);
  box-shadow:0 0 0 3px rgba(220,38,38,.15)}
#onu-ficha .fo-datos{display:grid;grid-template-columns:auto auto;
  column-gap:44px;align-items:start}
#onu-ficha .fo-medidas{display:grid;grid-template-columns:30px auto auto;
  column-gap:11px;row-gap:10px;font-size:13.5px;align-items:center}
#onu-ficha .fo-ic{width:30px;height:30px;border-radius:9px;border:1px solid;
  display:grid;place-items:center}
#onu-ficha .fo-ic svg{width:17px;height:17px}
#onu-ficha .fo-ic.azul{background:#eef3fd;border-color:#dbe6fb;color:var(--fo-azul)}
#onu-ficha .fo-ic.azul2{background:#eef3fd;border-color:#dbe6fb;color:var(--fo-azul2)}
#onu-ficha .fo-ic.verde{background:#eaf7ee;border-color:#cdebd8;color:var(--fo-verde)}
#onu-ficha .fo-ic.gris{background:#f2f4f8;border-color:#e4e8f0;color:#64748b}
/* Para el reloj de "Caida hace": en rojo, porque ahi el tiempo corre en
   contra y no es un dato mas. */
#onu-ficha .fo-ic.rojo{background:#fdeeee;border-color:#f7d5d5;color:#b91c1c}
#onu-ficha .fo-medidas .fo-et{color:var(--fo-etiq)}
#onu-ficha .fo-medidas .fo-val{color:var(--fo-tinta);font-weight:600}
#onu-ficha .fo-cliente{display:flex;flex-direction:column;gap:14px}
#onu-ficha .fo-bloque{display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px}
#onu-ficha .fo-bloque .fo-et{color:var(--fo-etiq);display:block}
#onu-ficha .fo-bloque .fo-val{color:var(--fo-tinta);font-weight:600;
  margin-top:2px;line-height:1.35;display:block;overflow-wrap:anywhere}
#onu-ficha .fo-acciones{display:flex;flex-direction:column;gap:9px}
#onu-ficha .fo-bt{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:9px;font-size:13px;font-weight:600;
  border:1.5px solid #cfdcf6;color:var(--fo-azul);background:#fff}
#onu-ficha .fo-bt svg{width:15px;height:15px}
#onu-ficha .fo-bt:hover:not(:disabled){background:#f4f7ff}
#onu-ficha .fo-bt.verde{border-color:#86ddad;color:var(--fo-verde2)}
#onu-ficha .fo-bt.verde svg{color:var(--fo-verde)}
#onu-ficha .fo-bt:disabled{opacity:.45;cursor:not-allowed}

/* --- fila 2: informacion + graficas + CATV --- */
#onu-ficha .fo-fila2{display:grid;grid-template-columns:1.05fr 2.06fr;gap:16px;
  align-items:stretch}
#onu-ficha .fo-info{padding:18px 20px}
#onu-ficha .fo-tabla-info{display:grid;grid-template-columns:190px 1fr;
  font-size:13px}
#onu-ficha .fo-tabla-info > div{padding:9px 0;
  border-bottom:1px solid var(--fo-linea);min-width:0;overflow-wrap:anywhere}
#onu-ficha .fo-tabla-info > div:nth-last-child(-n+2){border-bottom:0}
#onu-ficha .fo-tabla-info .fo-et{color:var(--fo-etiq)}
#onu-ficha .fo-tabla-info .fo-val{color:var(--fo-tinta);font-weight:600}
#onu-ficha .fo-der{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  align-items:stretch}
#onu-ficha .fo-graf{padding:16px 18px;display:flex;flex-direction:column}
#onu-ficha .fo-graf > .fo-cab{margin-bottom:12px}
#onu-ficha .fo-graf > .fo-cab h3{font-size:14.5px;flex:1}
#onu-ficha .fo-rango{display:flex;gap:5px}
#onu-ficha .fo-rango button{font-size:11.5px;padding:5px 10px;border-radius:7px;
  border:0;background:#f4f6fa;color:#64748b}
#onu-ficha .fo-rango button.act{background:#e8effc;color:var(--fo-azul);
  font-weight:600}
#onu-ficha .fo-rango button:disabled{opacity:.6;cursor:not-allowed}
#onu-ficha .fo-leyenda{display:flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--fo-sec);margin-bottom:6px}
#onu-ficha .fo-leyenda + .fo-leyenda{margin-left:14px}
#onu-ficha .fo-punto{width:8px;height:8px;border-radius:50%;display:inline-block}
#onu-ficha .fo-lienzo{display:flex;gap:6px}
#onu-ficha .fo-eje-y{display:flex;flex-direction:column;justify-content:space-between;
  font-size:9.5px;color:var(--fo-tenue);text-align:right;flex:0 0 auto}
#onu-ficha .fo-trazo{flex:1;min-width:0}
#onu-ficha .fo-eje-x{display:flex;justify-content:space-between;font-size:9.5px;
  color:var(--fo-tenue);margin-top:4px}
#onu-ficha .fo-vacio{display:grid;place-items:center;color:var(--fo-tenue);
  font-size:11.5px;text-align:center;padding:14px 10px}
#onu-ficha .fo-pie-graf{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:auto;padding-top:14px}
#onu-ficha .fo-valor{border:1px solid #d8f0e0;background:#f6fdf8;border-radius:10px;
  padding:11px 14px}
#onu-ficha .fo-valor.azul{border-color:#d5e2fb;background:#f6f9ff}
#onu-ficha .fo-valor .fo-et{display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--fo-etiq2)}
#onu-ficha .fo-valor .fo-et svg{width:13px;height:13px}
#onu-ficha .fo-valor b{display:block;font-size:21px;font-weight:700;
  color:var(--fo-verde2);margin-top:3px}
#onu-ficha .fo-valor b small{font-size:13px;font-weight:600}
#onu-ficha .fo-valor.azul b{color:var(--fo-azul)}
#onu-ficha .fo-catv{grid-column:1 / -1;padding:16px 18px}

/* --- tablas de puertos --- */
#onu-ficha .fo-fila3{display:grid;grid-template-columns:40fr 60fr;gap:16px;
  align-items:stretch}
#onu-ficha .fo-tarj{padding:18px 20px;display:flex;flex-direction:column}
/* --- PARCHE_TABLA_REAL: tablas de verdad --- */
#onu-ficha .fo-rej{width:100%;border-collapse:collapse;table-layout:fixed;
  font-size:12.5px}
/* PARCHE_TABLA_RESET: anular los estilos globales de tabla.
   Al pasar de <div> a <th>/<td> de verdad, estas tablas empezaron a heredar
   las reglas de tabla del resto del panel. Se ven aqui anuladas una por una.
   Lo que la ficha si quiere lo reponen .fo-th, .fo-td, .fo-fin y .fo-pto,
   que llevan una clase mas y por eso ganan. */
#onu-ficha .fo-rej{background:none;box-shadow:none;border:0;border-radius:0;
  margin:0}
#onu-ficha .fo-rej thead,#onu-ficha .fo-rej tbody,
#onu-ficha .fo-rej tr{background:none;border:0}
#onu-ficha .fo-rej th,#onu-ficha .fo-rej td{padding:9px 12px 9px 0;
  text-align:left;vertical-align:middle;min-width:0;overflow-wrap:anywhere;
  /* Esto es lo que rompia la cabecera: en mayusculas y sin poder partirse,
     "Estado administrativo" se salia de su columna y pisaba a "Modo". */
  text-transform:none;letter-spacing:normal;white-space:normal;
  font:inherit;font-size:inherit;font-weight:inherit;color:inherit;
  background:none;border:0;border-radius:0;height:auto;width:auto;
  position:static;text-indent:0}
/* PARCHE_FILA_HOVER: el resaltado de fila al pasar el raton lo daba la
   regla global 'tbody tr:hover'; el reset de arriba la anulo sin querer.
   Se repone aqui, que es donde le toca. */
#onu-ficha .fo-rej tbody tr:hover{background:#f9fbfd}
#onu-ficha .fo-rej .fo-th{color:var(--fo-etiq);font-weight:600;
  padding-bottom:9px;border-bottom:1px solid var(--fo-linea)}
#onu-ficha .fo-rej .fo-td{border-bottom:1px solid var(--fo-fila)}
#onu-ficha .fo-rej .fo-fin{text-align:right;padding-right:0}
#onu-ficha .fo-rej .fo-pto{color:var(--fo-tinta);font-weight:600}
/* Los anchos son los mismos del handoff, pasados de fracciones a por ciento:
   .8 1.25 .8 1 1 sobre 4.85 en Ethernet, y .9 1.25 .7 1.4 1 1 sobre 6.25 en
   WiFi. Con table-layout:fixed se respetan aunque el SSID sea largo. */
#onu-ficha .fo-eth .fo-rej th:nth-child(1){width:16.5%}
#onu-ficha .fo-eth .fo-rej th:nth-child(2){width:25.8%}
#onu-ficha .fo-eth .fo-rej th:nth-child(3){width:16.5%}
#onu-ficha .fo-eth .fo-rej th:nth-child(4){width:20.6%}
#onu-ficha .fo-eth .fo-rej th:nth-child(5){width:20.6%}
/* El diseno reparte las cuatro filas por toda la altura de la tarjeta. Con
   menos de cuatro puertos eso las separa como si faltaran datos, asi que
   solo se reparte cuando la tarjeta viene llena. En una tabla eso es darle
   el alto entero: el navegador reparte el sobrante entre las filas. */
#onu-ficha .fo-eth .fo-rej.llena{flex:1;height:100%}
#onu-ficha .fo-catv .fo-rej{flex:1}
#onu-ficha .fo-catv .fo-rej th:nth-child(1),
#onu-ficha .fo-catv .fo-rej th:nth-child(2),
#onu-ficha .fo-catv .fo-rej th:nth-child(5){width:19.2%}
#onu-ficha .fo-catv .fo-rej th:nth-child(3),
#onu-ficha .fo-catv .fo-rej th:nth-child(4){width:21.2%}
#onu-ficha .fo-catv .fo-rej td{padding-top:11px;padding-bottom:11px}
#onu-ficha .fo-wifi .fo-rej th:nth-child(1){width:14.4%}
#onu-ficha .fo-wifi .fo-rej th:nth-child(2){width:20%}
#onu-ficha .fo-wifi .fo-rej th:nth-child(3){width:11.2%}
#onu-ficha .fo-wifi .fo-rej th:nth-child(4){width:22.4%}
#onu-ficha .fo-wifi .fo-rej th:nth-child(5){width:16%}
#onu-ficha .fo-wifi .fo-rej th:nth-child(6){width:16%}
#onu-ficha .fo-wifi .fo-rej td{padding-top:10px;padding-bottom:10px}
#onu-ficha .fo-banda{font-size:14px;font-weight:700;color:var(--fo-azul);
  margin-bottom:9px}
#onu-ficha .fo-banda + .fo-banda,#onu-ficha .fo-rej + .fo-banda{margin:18px 0 9px}
#onu-ficha .fo-badge{display:inline-block;background:#e9f7ee;color:var(--fo-verde2);
  border-radius:6px;padding:4px 9px;font-size:11.5px;font-weight:600;
  /* La celda de la tabla es estrecha: sin esto "Deshabilitado" se parte
     en dos lineas y la fila crece el doble que las demas. */
  white-space:nowrap}
#onu-ficha .fo-badge.gris{background:#f2f4f8;color:#64748b}
#onu-ficha .fo-mini{display:inline-flex;align-items:center;gap:6px;
  border:1px solid #cfdcf6;border-radius:7px;padding:5px 10px;
  color:var(--fo-azul);font-size:11.5px;font-weight:600;background:#f7faff}
#onu-ficha .fo-mini svg{width:12px;height:12px}
#onu-ficha .fo-mini:hover:not(:disabled){background:#eef3fd}
#onu-ficha .fo-mini:disabled{opacity:.45;cursor:not-allowed}
#onu-ficha .fo-mas{display:inline-flex;align-items:center;gap:7px;border:0;
  background:none;padding:0;color:var(--fo-azul);font-size:12.5px;
  font-weight:600;margin-top:10px}
#onu-ficha .fo-mas svg{width:14px;height:14px}

/* --- barra de acciones: lo que rompe servicio, al final --- */
#onu-ficha .fo-barra{padding:20px;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap}
#onu-ficha .fo-grupo{display:flex;gap:12px;flex-wrap:wrap}
#onu-ficha .fo-grupo.mant{flex:1}
#onu-ficha .fo-divisor{width:1px;align-self:stretch;background:#e9edf4}
#onu-ficha .fo-bt-ambar{display:inline-flex;align-items:center;gap:8px;
  padding:11px 14px;border-radius:9px;border:1.5px solid #f6cfa0;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--fo-ambar);white-space:nowrap}
#onu-ficha .fo-bt-ambar svg{width:16px;height:16px;color:var(--fo-ambar2)}
#onu-ficha .fo-bt-ambar:hover:not(:disabled){background:#fffaf2}
#onu-ficha .fo-bt-rojo{display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:9px;border:1.5px solid #f3bcbc;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--fo-rojo2);white-space:nowrap}
#onu-ficha .fo-bt-rojo svg{width:16px;height:16px;color:var(--fo-rojo)}
#onu-ficha .fo-bt-rojo:hover:not(:disabled){background:#fef6f6}
#onu-ficha .fo-bt-solido{background:var(--fo-rojo);border-color:var(--fo-rojo);
  color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.22)}
#onu-ficha .fo-bt-solido svg{color:#fff}
#onu-ficha .fo-bt-solido:hover:not(:disabled){background:var(--fo-rojo2)}
#onu-ficha .fo-bt-ambar:disabled,#onu-ficha .fo-bt-rojo:disabled{
  opacity:.45;cursor:not-allowed}
#onu-ficha .fo-pie{text-align:center;font-size:12px;color:var(--fo-tenue);
  padding-top:4px}

/* Boton de volver: vive fuera de #onu-ficha, en su propia barra. */
#onu-detalle .fn-detail-topbar{margin:0 0 14px}
#onu-detalle .fn-back-button{display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:9px;border:1.5px solid #bfd0f4;background:#fff;
  color:#1d4ed8;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
#onu-detalle .fn-back-button:hover{background:#eff4ff}
#onu-detalle .fn-back-button svg{width:16px;height:16px}

@media(max-width:1250px){
  #onu-ficha .fo-resumen{grid-template-columns:1fr 1fr}
  #onu-ficha .fo-acciones{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  #onu-ficha .fo-acciones .fo-bt{flex:1 1 180px}
  #onu-ficha .fo-fila2,#onu-ficha .fo-fila3{grid-template-columns:1fr}
}
@media(max-width:820px){
  #onu-ficha .fo-resumen{grid-template-columns:1fr}
  #onu-ficha .fo-datos{grid-template-columns:1fr;row-gap:16px}
  #onu-ficha .fo-der{grid-template-columns:1fr}
  /* En el telefono una tabla de seis columnas no cabe, y apretarla a tres
     columnas era peor: quedaban datos sin cabecera. Cada fila pasa a ser una
     tarjeta y cada celda ensena delante el nombre de su columna, que es lo
     que guarda data-etiqueta. La cabecera se oculta a la vista pero sigue
     existiendo para el lector de pantalla. */
  #onu-ficha .fo-rej,#onu-ficha .fo-rej tbody,#onu-ficha .fo-rej tr,
  #onu-ficha .fo-rej td{display:block;width:auto}
  #onu-ficha .fo-rej thead{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  #onu-ficha .fo-rej tr{border:1px solid var(--fo-borde);border-radius:10px;
    background:#fbfcfe;padding:2px 12px;margin-bottom:10px}
  #onu-ficha .fo-rej tr:last-child{margin-bottom:0}
  #onu-ficha .fo-rej td.fo-td{display:flex;align-items:center;
    justify-content:space-between;gap:14px;text-align:right;padding:9px 0;
    border-bottom:1px solid var(--fo-fila)}
  #onu-ficha .fo-rej tr td.fo-td:last-child{border-bottom:0}
  #onu-ficha .fo-rej td.fo-td:before{content:attr(data-etiqueta);
    color:var(--fo-etiq);font-weight:600;font-size:11.5px;text-align:left;
    flex:0 1 auto}
  #onu-ficha .fo-rej .fo-pto{font-size:13.5px}
  #onu-ficha .fo-eth .fo-rej.llena{height:auto}
  #onu-ficha .fo-tabla-info{grid-template-columns:1fr}
  #onu-ficha .fo-tabla-info > div{border-bottom:0;padding:4px 0}
  #onu-ficha .fo-tabla-info > div.fo-val{padding-bottom:10px;
    border-bottom:1px solid var(--fo-linea)}
}

/* --- velocidad en tiempo real (panel "En vivo") --- */
#onu-ficha .fo-live{padding:18px 20px}
#onu-ficha .fo-live-cab{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  flex-wrap:wrap}
#onu-ficha .fo-late{width:9px;height:9px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.16);flex:0 0 auto}
#onu-ficha .fo-live-cab small{font-size:12px;color:var(--fo-etiq)}
#onu-ficha .fo-live-cuerpo{display:grid;grid-template-columns:1fr 260px;gap:20px;
  align-items:stretch}
#onu-ficha .fo-live-graf{display:flex;gap:8px;min-width:0}
#onu-ficha .fo-live-ejey{display:flex;flex-direction:column;
  justify-content:space-between;font-size:10px;color:var(--fo-tenue);
  text-align:right;width:44px;padding:1px 0 16px;flex:0 0 auto}
#onu-ficha .fo-live-lienzo{flex:1;min-width:0}
#onu-ficha .fo-live-lienzo svg{width:100%;height:210px;display:block;
  background:#fbfcfe;border:1px solid var(--fo-linea);border-radius:8px}
#onu-ficha .fo-live-ejex{display:flex;justify-content:space-between;font-size:10px;
  color:var(--fo-tenue);padding-top:4px}
#onu-ficha .fo-live-lado{display:flex;flex-direction:column;gap:10px}
#onu-ficha .fo-live-caja{border:1px solid #d8f0e0;background:#f6fdf8;
  border-radius:10px;padding:12px 14px}
#onu-ficha .fo-live-caja.azul{border-color:#d5e2fb;background:#f6f9ff}
#onu-ficha .fo-live-caja .fo-et{display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--fo-etiq2)}
#onu-ficha .fo-live-caja .fo-et svg{width:13px;height:13px;color:var(--fo-verde)}
#onu-ficha .fo-live-caja.azul .fo-et svg{color:var(--fo-azul)}
#onu-ficha .fo-live-ahora{font-size:24px;font-weight:700;color:var(--fo-verde2);
  margin-top:4px;letter-spacing:-.4px}
#onu-ficha .fo-live-caja.azul .fo-live-ahora{color:var(--fo-azul)}
#onu-ficha .fo-live-extra{display:flex;gap:14px;font-size:11px;
  color:var(--fo-etiq2);margin-top:6px}
#onu-ficha .fo-live-extra strong{color:var(--fo-tinta)}
#onu-ficha .fo-live-nota{font-size:11.5px;color:var(--fo-etiq);line-height:1.4}
#onu-ficha .fo-bt.parar{background:#f0fdf4}

/* --- consola de salidas del equipo --- */
#onu-ficha .fo-consola{padding:16px 20px}
#onu-ficha .fo-consola .fo-cab{margin-bottom:12px}
#onu-ficha .fo-consola .fo-cab h3{flex:1}
#onu-ficha .fo-cerrar{width:28px;height:28px;border-radius:8px;
  border:1px solid var(--fo-borde2);background:#fff;color:#64748b;font-size:15px;
  line-height:1;cursor:pointer;flex:0 0 auto}
#onu-ficha .fo-cerrar:hover{background:#f1f5fb}
#onu-ficha .fo-cargando{display:flex;align-items:center;gap:9px;
  color:var(--fo-etiq2);font-size:12.5px;padding:14px 0}
#onu-ficha .fo-cargando svg{width:15px;height:15px;color:var(--fo-azul);
  animation:fo-giro 1s linear infinite}
@keyframes fo-giro{to{transform:rotate(360deg)}}
#onu-ficha .fo-consola pre{margin:0;background:#0b1f4b;color:#dbe6fb;
  border-radius:10px;padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.55;overflow:auto;max-height:280px;
  white-space:pre-wrap;word-break:break-word}

/* --- enlaces dentro de la tabla de informacion --- */
#onu-ficha .fo-tabla-info .fo-et svg{width:12px;height:12px;margin-left:7px;
  vertical-align:-2px;color:#9aa8be}
#onu-ficha .fo-enlace{background:none;border:0;padding:0;font:inherit;
  font-size:13px;font-weight:600;color:var(--fo-azul);cursor:pointer;
  text-align:left}
#onu-ficha .fo-enlace:hover{color:#1740b8}

@media(max-width:900px){
  #onu-ficha .fo-live-cuerpo{grid-template-columns:1fr}
}

/* ===== modales de la ficha de ONU =====
   Medidas del bloque "Reglas comunes a todos los modales" del paquete de
   diseno, al pie de letra. Viven pegados al <body>, fuera de #onu-ficha,
   asi que se anclan por su propia clase y no heredan sus variables. */
.mo-velo{position:fixed;inset:0;background:rgba(9,22,52,.45);z-index:70;
  display:flex;align-items:flex-start;justify-content:center;padding:28px;
  overflow-y:auto;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.mo-velo.oculto{display:none}
.mo{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(9,22,52,.3);
  width:min(660px,100%);max-height:88vh;display:flex;flex-direction:column;
  color:#1e293b;overflow:hidden}
.mo-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid #e6ebf3;flex:0 0 auto}
.mo-ic{width:30px;height:30px;border-radius:9px;background:#eef3fd;
  border:1px solid #dbe6fb;color:#1d4ed8;display:grid;place-items:center;
  flex:0 0 auto}
.mo-ic svg{width:16px;height:16px}
.mo-tit{flex:1;min-width:0}
.mo-tit h3{margin:0;font-size:15.5px;font-weight:700;color:#0f2a5c}
.mo-tit p{margin:2px 0 0;font-size:12px;color:#7c8aa5}
.mo-x{width:28px;height:28px;border-radius:8px;border:1px solid #e2e8f0;
  background:#fff;color:#64748b;font-size:16px;line-height:1;cursor:pointer;
  flex:0 0 auto}
.mo-x:hover{background:#f1f5fb}
.mo-cuerpo{padding:18px 20px;overflow-y:auto;flex:1 1 auto}

/* Cada fila: etiqueta a la derecha, control a la izquierda del resto. */
.mo-fila{display:grid;grid-template-columns:3fr 8fr 1fr;gap:12px;
  align-items:center;margin-bottom:14px}
.mo-fila > label:first-child,.mo-fila > .mo-et{text-align:right;
  font-size:13px;color:#5b6b86;align-self:center}
.mo-fila.arriba{align-items:start}
.mo-fila.arriba > .mo-et{padding-top:9px}
.mo-fila:last-child{margin-bottom:0}
.mo input[type=text],.mo input[type=search],.mo input[type=password],
.mo select,.mo textarea{width:100%;padding:9px 11px;border:1px solid #dbe2ee;
  border-radius:9px;font:inherit;font-size:13px;color:#0f2a5c;background:#fff}
.mo textarea{resize:vertical;min-height:74px;line-height:1.5}
.mo input:focus,.mo select:focus,.mo textarea:focus{outline:0;
  border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.mo input:disabled,.mo select:disabled,.mo textarea:disabled{background:#f7f9fd;
  color:#7c8aa5;cursor:not-allowed}
.mo-radios{display:flex;flex-wrap:wrap;gap:7px 22px;align-items:center}
/* PARCHE_MODO_WAN: el rotulo de un grupo de radios. flex:0 0 100% lo
   hace ocupar la fila entera, y eso obliga al wrap a cortar ahi. */
.mo-radios .mo-rotulo{flex:0 0 100%;font-size:12.5px;color:#7c8aa5;
  margin:5px 0 -1px}
/* Una opcion bloqueada tiene que VERSE bloqueada: hasta ahora solo se
   deshabilitaba el circulito y el texto quedaba igual que el de una
   opcion elegible. */
.mo-radios label:has(input:disabled){color:#9aa8be;cursor:not-allowed}
.mo-radios label{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:#0f2a5c;cursor:pointer}
.mo input[type=radio],.mo input[type=checkbox]{width:15px;height:15px;
  accent-color:#1d4ed8;margin:0;cursor:pointer}
.mo-valor{font-size:13px;font-weight:700;color:#0f2a5c}
.mo-enlace{background:none;border:0;padding:0;font:inherit;font-size:13px;
  font-weight:600;color:#1d4ed8;cursor:pointer;text-align:left}
.mo-enlace:hover{color:#1740b8}
.mo-conboton{display:flex;gap:8px;min-width:0}
.mo-conboton input{flex:1 1 auto;min-width:0}
.mo-lupa{width:38px;flex:0 0 auto;border:1px solid #dbe2ee;border-radius:9px;
  background:#f7faff;color:#1d4ed8;cursor:pointer;display:grid;place-items:center}
.mo-lupa svg{width:15px;height:15px}
.mo-aviso{display:flex;gap:9px;background:#f7faff;border:1px solid #dbe6fb;
  border-radius:10px;padding:11px 13px;font-size:12px;color:#5b6b86;
  line-height:1.5}
.mo-aviso svg{width:15px;height:15px;color:#1d4ed8;flex:0 0 auto;margin-top:1px}
.mo-nota{font-size:12.5px;color:#1d4ed8;line-height:1.5;margin-top:-6px;
  margin-bottom:14px;grid-column:2}
.mo-error{background:#fdeeee;border:1px solid #f3bcbc;color:#b91c1c;
  border-radius:9px;padding:10px 13px;font-size:12.5px;margin-bottom:14px}
.mo-res{border-radius:9px;padding:10px 13px;font-size:12.5px;margin-top:14px}
.mo-res.trabajando{background:#f7faff;border:1px solid #dbe6fb;color:#1d4ed8}
.mo-res.bien{background:#f6fdf8;border:1px solid #d8f0e0;color:#15803d}
.mo-error.oculto,.mo-res.oculto,.mo-fila.oculto,.mo-nota.oculto{display:none}

/* Tabla de solo lectura (historial). */
.mo-eventos{display:grid;grid-template-columns:auto 1fr;gap:0 18px;
  font-size:12.5px}
.mo-eventos > div{padding:9px 0;border-bottom:1px solid #eef2f8}
.mo-eventos > div:nth-last-child(-n+2){border-bottom:0}
.mo-eventos .mo-cuando{font-weight:700;color:#0f2a5c;white-space:nowrap}
.mo-eventos .mo-que{color:#475569}

.mo-pie{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-top:1px solid #e6ebf3;background:#fbfcfe;flex:0 0 auto}
.mo-destructivo{background:none;border:0;padding:0;font:inherit;font-size:13px;
  font-weight:600;color:#b91c1c;cursor:pointer;margin-right:auto}
.mo-destructivo:hover{color:#8f1414}
.mo-pie .mo-hueco{margin-left:auto}
.mo-bt2{border:1px solid #e2e8f0;background:#fff;border-radius:9px;
  padding:9px 16px;font:inherit;font-size:13px;font-weight:600;color:#475569;
  cursor:pointer}
.mo-bt2:hover{background:#f1f5fb}
.mo-bt1{border:1px solid #1d4ed8;background:#1d4ed8;border-radius:9px;
  padding:9px 18px;font:inherit;font-size:13px;font-weight:600;color:#fff;
  cursor:pointer}
.mo-bt1:hover:not(:disabled){background:#1740b8}
.mo-bt1:disabled{opacity:.55;cursor:not-allowed}

@media(max-width:768px){
  .mo-velo{padding:14px}
  .mo-fila{grid-template-columns:1fr;gap:6px}
  .mo-fila > label:first-child,.mo-fila > .mo-et{text-align:left}
  .mo-nota{grid-column:1}
}
.mo-seccion{display:flex;align-items:center;gap:8px;background:#f7faff;
  border:1px solid #dbe6fb;border-radius:9px;padding:9px 12px;margin-bottom:14px;
  font-size:13px;font-weight:700;color:#1d4ed8}
.mo-seccion svg{width:14px;height:14px}
.mo-pista{grid-column:1/-1;font-size:12.5px;color:#1d4ed8;line-height:1.5;
  margin:-6px 0 14px 204px}
.mo-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:#0f2a5c;cursor:pointer}
.mo-aviso{margin-bottom:14px}
.mo-fila.oculto,.mo-pista.oculto,.mo-seccion.oculto{display:none}
/* Una pista que cuenta un fallo no puede leerse igual que una que
   explica algo: la del fallo hay que atenderla. */
.mo-pista.mal{color:var(--rojo)}
@media(max-width:620px){.mo-pista{margin-left:0}}
/* El boton cuyo panel esta abierto se marca: asi se ve que volver a
   pulsarlo lo cierra, en vez de parecer que no hizo nada. */
#onu-ficha .fo-bt.act{background:#eef3fd;border-color:#1d4ed8}
#onu-ficha .fo-bt.verde.parar{background:#f0fdf4;border-color:#16a34a}
/* El perfil es un enlace pero se lee como el resto de los valores del
   resumen: mismo tamano y peso, solo el color lo delata. */
#onu-ficha .fo-perfil{display:block;margin-top:2px;font-size:13.5px;
  font-weight:600;line-height:1.35;overflow-wrap:anywhere}
/* Las medidas del resumen no se parten: "12 days 4 hours" en cuatro
   lineas no es una medida, es un accidente. */
#onu-ficha .fo-medidas .fo-val{white-space:nowrap}
#onu-ficha .fo-datos{grid-template-columns:max-content minmax(0,1fr)}
#onu-ficha .fo-perfil{text-align:left}
/* Modo de configuracion WAN: el modo y la IP van en la misma fila, con el
   guion gris del diseno entre los dos. Se envuelve si no cabe en vez de
   desbordar la tarjeta. */
#onu-ficha .fo-wan{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#onu-ficha .fo-wan .fo-guion{color:#94a3b8}
#onu-ficha .fo-ip{display:inline-flex;align-items:center;gap:5px;
  color:var(--fo-azul);font-weight:600;text-decoration:none}
#onu-ficha .fo-ip:hover{color:#1740b8;text-decoration:underline}
#onu-ficha .fo-ico-ip{width:11px;height:11px;color:#9aa8be;flex:none}
#onu-ficha .fo-sin-serie{font-size:10.5px;color:var(--fo-tenue);
  text-align:center;padding:4px 0 0}
/* Los anchos vuelven a ser los del handoff (.8 1.25 .8 1 1), que ya dan
   sitio a "Estado administrativo". Lo unico que se conserva del apano
   anterior es que la insignia no se parta en dos lineas. */
#onu-ficha .fo-eth .fo-badge,#onu-ficha .fo-wifi .fo-badge{white-space:nowrap}

/* =========================================================================
   Lista de Gestion de ONUs — segun el handoff "Todas las ONUs"
   ========================================================================= */

/* --- barra de acciones sobre los recuadros --- */
.ol-acciones{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-bottom:16px}
.ol-bt{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer}
.ol-bt svg{width:16px;height:16px;flex:none}
.ol-bt:hover:not(:disabled){background:#F8FAFC}
.ol-bt:disabled{opacity:.55;cursor:default}
.ol-bt.pri{background:var(--azul);border-color:var(--azul);color:#fff}
.ol-bt.pri:hover{background:#1740b8;border-color:#1740b8}

/* --- recuadros: icono, etiqueta arriba, numero grande debajo --- */
.ol-tile{align-items:center;gap:16px}
.ol-tile .ic{width:52px;height:52px;border-radius:14px}
.ol-tile .ic svg{width:24px;height:24px}
.ol-tile small{margin-bottom:2px}
.ol-tile b{font-size:1.85rem}
/* Cada recuadro pinta su numero del color de su icono: es lo que hace que
   los cinco se distingan de un vistazo sin leer la etiqueta. */
.ol-tile:has(.ic.azul) b{color:var(--azul)}
.ol-tile:has(.ic.verde) b{color:var(--verde)}
.ol-tile:has(.ic.rojo) b{color:var(--rojo)}
.ol-tile:has(.ic.naranja) b{color:var(--naranja)}
.ol-tile:has(.ic.morado) b{color:var(--morado)}

/* --- filtros: ocho campos y la lupa dentro del buscador --- */
.ol-ic-filtro{width:17px;height:17px;color:var(--azul);flex:none}
#v-onus #onu-filtros > .cab,
#v-onus #pend-filtros > .cab,
#v-onus #onu-filtros > .cab{justify-content:flex-start;gap:9px}
/* Los ocho en una sola linea, con el buscador mas ancho porque su texto de
   ayuda es el mas largo. Rejilla fija y no auto-fit: con auto-fit la VLAN se
   caia sola a una segunda fila en cuanto la ventana se estrechaba un poco. */
/* Ocho filtros y el boton Actualizar al final, igual que en Pendientes. */
.filtros.ocho{grid-template-columns:1.6fr repeat(7,minmax(0,1fr));gap:10px}
.filtros.ocho select{min-width:0;width:100%}
/* Con menos ancho, ocho filtros en una linea dejan los nombres cortados
   -"Todas las O"-. Se parten en dos filas antes de llegar a eso. */
@media(max-width:1500px){
  .filtros.ocho{grid-template-columns:1.6fr repeat(3,minmax(0,1fr))}
}
/* El enlace de la esquina de la tabla de Pendientes: cambia entre las ONUs
   nuevas y las que cortamos nosotros. Es un enlace y no un boton a proposito:
   no ejecuta nada contra la OLT, solo cambia lo que se mira. */
#v-onus .panel > .cab #pend-cuenta{margin-left:auto}
#onus-acciones .ol-bt:disabled{opacity:.5;cursor:not-allowed}

.enlace-esq{
  padding:0;
  border:0;
  background:none;
  color:var(--azul);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}
.enlace-esq:hover{text-decoration:underline}
.enlace-esq.oculto{display:none}

/* Los tres filtros de Pendientes mas el boton Actualizar al final. */
.filtros.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* El aviso de "comprobando con la OLT" vive debajo del boton: el
   refresco de detras se nota sin robarle sitio a la tabla. */
/* El aviso de "comprobando con la OLT" vive en la barra de acciones,
   pegado a los botones: es donde se mira al pulsar Actualizar. */
#onus-acciones .vivo{margin-right:4px;font-size:.78rem}
#onus-acciones .vivo::before{background:var(--naranja);animation:pendlatido 1.1s ease-in-out infinite}
@keyframes pendlatido{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){#onus-acciones .vivo::before{animation:none}}

@media (max-width:1500px){
  .filtros.ocho{grid-template-columns:repeat(4,minmax(0,1fr))}
  .filtros.ocho > div:first-child{grid-column:span 2}
}
@media (max-width:820px){
  .filtros.ocho{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtros.tres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ol-busca{position:relative;display:block}
.ol-busca svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--muted);pointer-events:none}
.ol-busca input{padding-left:33px;width:100%}

/* --- tabla ---
   Trece columnas en una pantalla: se aprieta el relleno lateral para que
   entren sin barra horizontal, que es como esta en el diseno. */
.ol-tabla th,.ol-tabla td{padding-left:10px;padding-right:10px}
.ol-tabla th:first-child,.ol-tabla td:first-child{padding-left:16px}
.ol-tabla th:last-child,.ol-tabla td:last-child{padding-right:16px}
.ol-tabla th.cen,.ol-tabla td.cen{text-align:center}
/* El numero de serie es el dato que un tecnico lee en voz alta por radio y
   teclea en el buscador: no puede ser lo mas pequeno de la tabla. Va a la
   misma altura que el resto del texto y con algo de separacion entre letras
   para distinguir el 0 de la O y el 1 del I. */
.ol-tabla .mono{font-size:.83rem;letter-spacing:.02em;color:var(--ink)}
/* El indice completo "gpon-onu_1/9/1:8" es largo a proposito: es lo que se
   pega en la consola de la OLT. Va un punto mas pequeno para que quepa sin
   robarle sitio al nombre del cliente, y no se parte nunca. */
.ol-tabla .ol-dos span.mono{font-size:.71rem;color:var(--muted);
  white-space:nowrap;letter-spacing:0}
/* Anchos fijos por columna. Con el reparto automatico, Zona y ODB se
   quedaban con todo el hueco sobrante -"Otto Kung" ocupando 200 px- y el
   Nombre, que es lo que uno lee, salia apretado en dos lineas. Aqui cada
   columna pide lo que su contenido necesita y el sobrante se lo lleva el
   Nombre, que es la unica que crece bien. */
.ol-tabla table{table-layout:fixed;min-width:1160px}
/* En porcentaje y no en pixeles: al plegar la barra lateral se liberan
   150 px, y con anchos fijos ese hueco se lo comia entero el Nombre -unica
   columna sin medida-, dejando un claro absurdo entre NOMBRE y SN / MAC.
   En porcentaje crecen las trece a la vez y la tabla se ve igual de
   equilibrada con la barra abierta que cerrada.
   El Nombre se queda con el 22% y no con el 27% que tenia: hasta el nombre
   mas largo que hay en la base cabe de sobra, y el hueco que le sobraba se
   reparte entre Zona, ODB, Tipo y Fecha, que eran las que se partian en dos
   lineas. Los numeros salen de los pixeles que ya funcionaban, medidos
   sobre los 1400 px utiles que hay con la barra desplegada. */
.ol-tabla th:nth-child(1), .ol-tabla td:nth-child(1) {width:5.1%}   /* Estado */
.ol-tabla th:nth-child(2), .ol-tabla td:nth-child(2) {width:4.2%}   /* Ver */
.ol-tabla th:nth-child(3), .ol-tabla td:nth-child(3) {width:16.9%}  /* Nombre */
.ol-tabla th:nth-child(4), .ol-tabla td:nth-child(4) {width:8.7%}   /* SN / MAC */
.ol-tabla th:nth-child(5), .ol-tabla td:nth-child(5) {width:9.3%}   /* ONU */
.ol-tabla th:nth-child(6), .ol-tabla td:nth-child(6) {width:9.6%}   /* Zona */
.ol-tabla th:nth-child(7), .ol-tabla td:nth-child(7) {width:9.1%}   /* ODB */
.ol-tabla th:nth-child(8), .ol-tabla td:nth-child(8) {width:5.4%}   /* Senal */
.ol-tabla th:nth-child(9), .ol-tabla td:nth-child(9) {width:3.1%}   /* B/R */
.ol-tabla th:nth-child(10),.ol-tabla td:nth-child(10){width:4.4%}   /* VLAN */
.ol-tabla th:nth-child(11),.ol-tabla td:nth-child(11){width:5.3%}   /* TV */
.ol-tabla th:nth-child(12),.ol-tabla td:nth-child(12){width:8.5%}   /* Tipo */
.ol-tabla th:nth-child(13),.ol-tabla td:nth-child(13){width:10.4%}   /* Fecha */
/* Las cabeceras de ESTA tabla si pueden partirse en dos lineas: con ancho
   fijo, "FECHA DE AUTOR." en una sola linea se salia de su columna y se
   veia cortada. */
.ol-tabla th{white-space:normal;line-height:1.25}
/* Con ancho fijo, un nombre de zona o de caja largo tiene que poder
   partirse; si no, desborda la celda en vez de envolverse. */
.ol-tabla .ol-zona,.ol-tabla .ol-dos b,.ol-tabla .ol-dos span{
  overflow-wrap:anywhere}
/* Sin text-transform: el nombre se escribe como se escribe un nombre, y de
   eso se encarga nombrePropio() en el JS. Forzarlo aqui a mayusculas ademas
   de gritar impedia distinguir "S.A.C." de una palabra normal. */
.ol-tabla .ol-nombre{font-weight:700;color:var(--ink);
  font-size:.83rem;line-height:1.35}
.ol-tabla .ol-nombre.sin{color:var(--muted);font-weight:500;text-transform:none}
/* Icono de estado en vez de la palabra repetida 107 veces. El color va en
   el propio icono (stroke:currentColor), asi que basta cambiar el color del
   contenedor. */
.ol-est{display:inline-flex;align-items:center;justify-content:center}
.ol-est svg{width:20px;height:20px}
.ol-est.ok{color:var(--verde)}
.ol-est.mal{color:var(--rojo)}
.ol-est.espera{color:var(--morado)}
.ol-est.gris{color:#94a3b8}

/* El boton Ver, azul como el resto de acciones del panel. */
.ol-tabla td .sec.mini{background:var(--azul);border-color:var(--azul);
  color:#fff;font-weight:600}
.ol-tabla td .sec.mini:hover{background:#1740b8;border-color:#1740b8}
/* La celda de la ONU lleva dos lineas: la OLT arriba, la posicion debajo. */
.ol-dos{line-height:1.35}
/* El nombre de la OLT puede ser largo; que envuelva en su celda en vez de
   pisar la columna de al lado. */
.ol-dos b{display:block;font-weight:700;font-size:.8rem;
  overflow-wrap:anywhere}
.ol-dos span{display:block;color:var(--muted);font-size:.76rem}
/* La VLAN es una pastilla azul, no un numero suelto. */
/* CATV en verde cuando la ONU lo lleva. Sin servicio la celda va vacia:
   una marca solo aparece cuando hay algo que marcar. */
.ol-catv{display:inline-block;background:#e9f7ee;color:var(--verde2,#15803d);
  border:1px solid #cdebd8;border-radius:6px;padding:2px 8px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em}
.ol-vlan{display:inline-block;background:#eaf1ff;color:var(--azul);
  border:1px solid #cfdcf6;border-radius:6px;padding:2px 9px;
  font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
/* La senal va en dos lineas y centrada, como en el diseno. */
/* Senal en la lista: el icono arriba, un hueco, y debajo la potencia con
   su unidad. Antes iban pegados y el numero parecia colgar del icono. */
#v-onus .ol-tabla td.cen .senal{display:flex;flex-direction:column;
  align-items:center;gap:4px;font-size:.79rem;line-height:1.15}
#v-onus .ol-tabla td.cen .senal .valor{font-weight:600;color:var(--ink)}
/* La unidad, debajo y atenuada: se repite en las cien filas, asi que no
   tiene por que competir con el numero. */
#v-onus .ol-tabla td.cen .senal .unidad{font-size:.68rem;color:var(--muted)}

/* --- pie: filas por pagina + paginacion con saltos --- */
.ol-pie-dcha{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ol-porpagina{display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:.8rem;white-space:nowrap}
.ol-porpagina select{padding:5px 9px;font-size:.8rem;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--ink)}
.pager .puntos{padding:0 4px;color:var(--muted);user-select:none}
.pager button.act{background:var(--azul);border-color:var(--azul);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}

@media (max-width:900px){
  .ol-acciones{justify-content:stretch}
  .ol-acciones .ol-bt{flex:1;justify-content:center}
  .filtros.ocho > div:first-child{grid-column:span 1}
  .pie-tabla{flex-direction:column;align-items:flex-start;gap:10px}
}


/* =========================================================================
   Barra lateral plegada
   El boton de menu de la cabecera pone .plegado en <body>. Se esconden los
   textos y quedan los iconos; las categorias siguen ahi, convertidas en una
   raya, para que no se pierda la separacion entre Gestion y Red.
   ========================================================================= */
body.plegado{--ancho-side:74px}
body.plegado .side .marca{padding:2px 0 20px;justify-content:center}
body.plegado .side .marca > div:last-child{display:none}
body.plegado .side nav{padding:0 12px}
body.plegado .side a{justify-content:center;padding:11px 0;gap:0}
body.plegado .side a .crece,
body.plegado .side .quien > div,
body.plegado .side .salir span{display:none}
/* La insignia de pendientes no se esconde: es un aviso, y en plegado se
   pone encima del icono en vez de al lado. */
body.plegado .side a .badge{position:absolute;top:3px;right:9px;margin:0;
  font-size:.6rem;padding:1px 5px}
body.plegado .side a{position:relative}
/* La categoria se queda como una raya: sigue separando los dos bloques. */
body.plegado .side .grupo{font-size:0;padding:12px 6px 8px;letter-spacing:0}
body.plegado .side .grupo::after{content:"";display:block;height:1px;
  background:rgba(255,255,255,.14)}
body.plegado .side .pie{padding:12px 12px 0}
body.plegado .side .quien{justify-content:center;padding:8px 0}
body.plegado .side .salir{justify-content:center;padding:11px 0;gap:0}
/* Sin texto hace falta saber que es cada icono: el navegador ensena el
   title al pasar el raton. Lo pone el JS solo cuando esta plegada. */

/* Aqui habia un intento anterior de adaptar el movil:
       @media (max-width:820px){ .app{grid-template-columns:74px 1fr} }
   Se quita porque hacia dano. Iba POR DETRAS del bloque de movil de arriba
   y, a igual peso, gana la regla de mas abajo. Con la barra convertida en
   cajon deja de ser un elemento de la rejilla, asi que el contenido caia el
   solo en esa primera columna de 74 px: la pantalla entera se quedaba en una
   tira estrecha con una palabra por linea.
   La otra regla, .app.abierta, mandaba sobre una clase que ya no existe en
   ningun sitio del proyecto. */


/* --- PARCHE_OLT_2 --- */
.aviso-x { float: right; margin-left: 10px; border: 0; background: none;
  cursor: pointer; font-size: 13px; line-height: 1; opacity: .5; padding: 0 2px; }
.aviso-x:hover { opacity: 1; }
.uplink-puertos { margin-top: 8px; }
.uplink-puertos table { width: 100%; margin-top: 6px; font-size: 12px; }
.uplink-puertos th { text-align: left; font-weight: 600; opacity: .6; }
.tabs .tab { cursor: pointer; }


/* --- PARCHE_OLT_3 --- */
.olt-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.olt-tab { border: 1px solid rgba(128,138,157,.35); background: transparent;
  border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 13px; }
.olt-tab.act { background: #0870ff; border-color: #0870ff; color: #fff; }
.vlans-det { margin-top: 6px; }
.vlans-det table { width: 100%; margin-top: 6px; font-size: 12px; }
.vlans-det th { text-align: left; font-weight: 600; opacity: .6; }
.alarm-det { display: flex; align-items: flex-start; gap: 8px; font-size: 12px;
  padding: 6px 0; border-top: 1px solid rgba(128,138,157,.18); line-height: 1.4; }
.alarm-det .punto-a { margin-top: 5px; flex: 0 0 auto; }


/* --- PARCHE_OLT_4 --- */
.sub-est { font-size: 11px; opacity: .6; margin-left: 6px; white-space: nowrap; }


/* --- PARCHE_OG_DETALLES_1 --- */
.og-equipo { display: flex; align-items: center; gap: 14px;
  padding: 0 16px 14px; }
.og-equipo img { width: 130px; max-width: 42%; height: auto; border-radius: 6px; }
.og-equipo h4 { margin: 0 0 2px; font-size: 15px; letter-spacing: .3px; }
.og-equipo p { margin: 0; font-size: 12px; }
.og-acciones { padding: 4px 16px 16px; }
.og-acciones .btn { font-size: 12px; padding: 6px 14px; cursor: pointer; }
.og-acciones .btn[disabled] { opacity: .5; cursor: default; }


/* --- PARCHE_OG_DETALLES_5 --- */
.og-barra { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.og-btn { border: 1px solid rgba(128,138,157,.35); background: transparent;
  border-radius: 5px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.og-btn:hover { border-color: #0870ff; color: #0870ff; }
.og-btn.verde { background: #13ad50; border-color: #13ad50; color: #fff; }
.og-btn[disabled] { opacity: .55; cursor: default; }
.og-salida { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.og-ajustes { width: 100%; }
.og-ajustes td { vertical-align: middle; }
.og-ajuste { width: 42%; opacity: .8; }
.copiar { border: 0; background: none; cursor: pointer; font-size: 11px;
  opacity: .35; margin-left: 10px; padding: 0; }
.copiar:hover { opacity: 1; color: #0870ff; }
.copiar.oculto { display: none; }
.ojo { border: 0; background: none; cursor: pointer; font-size: 14px;
  line-height: 1; opacity: .4; padding: 0 2px; margin-left: 8px; }
.ojo:hover, .ojo.act { opacity: 1; }
.ojo[disabled] { opacity: .15; cursor: default; }
.og-sub { padding: 14px 16px 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .4px; opacity: .65; text-transform: uppercase; }
.og-lateral { padding: 0; }
.og-foto { padding: 18px 16px 10px; text-align: center; }
.og-foto img { width: 100%; max-width: 240px; height: 145px;
  object-fit: contain; display: inline-block; }
.og-panel { border-top: 1px solid rgba(128,138,157,.18); }
.og-linea { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 16px; font-size: 13px;
  border-bottom: 1px solid rgba(128,138,157,.12); }
.og-linea:last-child { border-bottom: 0; }
.og-linea.sangria > span:first-child { padding-left: 18px; opacity: .75; }
.og-linea b { font-weight: 600; }
.og-refrescar { border: 0; background: none; cursor: pointer; font-size: 14px;
  opacity: .45; padding: 0 8px 0 0; }
.og-refrescar:hover { opacity: 1; color: #0870ff; }
.prueba-fila { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.resp-fila { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 4px 0; opacity: .85; }
.aviso-eq { margin: 0 16px 16px; padding: 10px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5;
  background: rgba(245, 196, 0, .12); border: 1px solid rgba(245, 196, 0, .35); }


/* --- PARCHE_OG_DETALLES_6 --- */
/* Botones solidos: un boton que se puede pulsar no debe parecer apagado. */
.og-barra { gap: 8px; margin: 16px 0 12px; }
.og-btn { background: #2f7fd1; border: 1px solid #2f7fd1; color: #fff;
  border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18); }
.og-btn:hover { background: #2569ad; border-color: #2569ad; color: #fff; }
.og-btn.verde { background: #13ad50; border-color: #13ad50; }
.og-btn.verde:hover { background: #0f8f42; border-color: #0f8f42; }
.og-btn[disabled] { opacity: .45; box-shadow: none; }

/* Tabla de ajustes: cabecera con fondo y filas alternadas. */
.og-ajustes { border-collapse: collapse; }
.og-ajustes thead th { background: rgba(128, 138, 157, .16); font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: 13px; padding: 11px 14px;
  border: 0; }
.og-ajustes tbody tr:nth-child(odd) { background: rgba(128, 138, 157, .07); }
.og-ajustes td { padding: 10px 14px; border: 0; font-size: 13px; }
.og-ajuste { width: 40%; opacity: 1; }

/* Panel derecho compacto y foto mas grande. */
.og-foto { padding: 12px 12px 8px; }
.og-foto img { max-width: 100%; width: auto; height: 180px; }
.og-linea { padding: 9px 14px; font-size: 13px; }
.og-linea.sangria { padding-left: 14px; }
.og-linea.sangria > span:first-child { padding-left: 16px; }


/* --- PARCHE_OG_DETALLES_7 --- */
/* La cabecera grande repetia lo que ya dicen las pestanas y la tabla. */
#v-oltgestion .olt-head { display: none; }
#v-oltgestion .tabs { margin-top: 4px; }

/* Letra mas grande: esta pantalla se lee, no se escanea. */
.og-ajustes thead th { font-size: 14px; padding: 12px 16px; }
.og-ajustes td { font-size: 14.5px; padding: 13px 16px; }
.og-ajuste { font-weight: 500; }
.og-linea { font-size: 14px; padding: 11px 16px; }
.og-linea b { font-size: 14px; }
.card-head h3 { font-size: 17px; }

.og-form { display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px 12px; max-width: 480px; }
.og-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.og-campo span { opacity: .75; }
.og-campo input { padding: 8px 10px; font-size: 14px; border-radius: 5px;
  border: 1px solid rgba(128, 138, 157, .4); background: transparent;
  color: inherit; }
.og-campo input:focus { outline: none; border-color: #2f7fd1; }
.og-fallo { color: #d13b3b; font-size: 13px; }


/* --- PARCHE_OG_DETALLES_8 --- */
/* Dos elementos pegajosos peleandose tapaban una fila entera. La cabecera
   de la tabla no necesita quedarse fija: la que manda es la de pestanas. */
#v-oltgestion .og-ajustes thead th { position: static !important; top: auto; }
#v-oltgestion .tabs { position: relative; z-index: 5; }
#v-oltgestion .table-wrap { overflow: visible; }

/* El boton de copiar solo aparece al pasar por encima de la fila. */
.og-ajustes .copiar { opacity: 0; transition: opacity .12s; }
.og-ajustes tr:hover .copiar { opacity: .45; }
.og-ajustes .copiar:hover { opacity: 1; }

/* Etiquetas y valores legibles: el gris claro es lo que hacia que la letra
   pareciera pequena aunque ya habia crecido. */
.og-ajustes td { font-size: 14.5px; padding: 13px 16px; }
.og-ajuste { opacity: 1; font-weight: 500; }
.og-ajustes tbody td:last-child { font-weight: 500; }
.og-ajustes tbody td:last-child > span:first-child { opacity: 1; }
.og-ajustes thead th { font-size: 13.5px; letter-spacing: .2px; }


/* --- PARCHE_OG_DETALLES_9 --- */
/* El panel se solapa un poco con la barra de pestanas por diseno, y eso
   se estaba tragando los botones. Aqui se levantan por encima. */
.og-barra { position: relative; z-index: 6; margin: 26px 0 14px; }
#v-oltgestion .tabs { z-index: 4; }
#og-contenido { position: relative; z-index: 4; }


/* --- PARCHE_OG_DETALLES_10 --- */
.og-ajustes .copiar { font-size: 14px; margin-left: 12px; }
.og-sub { padding: 18px 16px 4px; }


/* --- PARCHE_OG_DETALLES_11 --- */
.og-barra { position: static; z-index: auto; margin: 14px 0 6px; }
.og-salida { position: static; margin: 0 0 12px; }
#v-oltgestion .tabs { z-index: auto; }
#og-contenido { z-index: auto; }

/* --- PARCHE_OG_TABS_FIJAS --- */
/* Las pestanas eran pegajosas (top:72px, z-index:15) y al desplazarse se
   comian la fila de botones que va debajo. En la pantalla de la que
   copiamos tampoco son fijas: se quedan quietas y nada se monta. */
.fn-olt-admin-v60 .tabs { position: static; z-index: auto; }
.fn-olt-admin-v60 .og-barra { position: static; z-index: auto;
  margin: 12px 0 4px; }
.fn-olt-admin-v60 .og-salida { position: static; margin: 0 0 12px; }

/* --- PARCHE_OG_TABS_FIJAS_2 --- */
.fn-olt-admin-v60 .tabs { position: static !important; top: auto !important;
  z-index: auto !important; }
.fn-olt-admin-v60 .og-barra { position: relative !important; z-index: 30;
  margin: 14px 0 6px !important; clear: both; }
.fn-olt-admin-v60 .og-salida { position: relative !important; z-index: 30;
  margin: 0 0 12px !important; }


/* --- PARCHE_OG_DETALLES_4 --- */
.aviso-eq { margin: 0 16px 16px; padding: 10px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5;
  background: rgba(245, 196, 0, .12); border: 1px solid rgba(245, 196, 0, .35); }


/* --- PARCHE_OG_LETRA --- */
/* Las dos columnas al mismo tamano y color, y la cabecera sin mayusculas:
   asi se lee como la pantalla de la que copiamos. */
.og-ajustes thead th { text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 600; color: inherit; padding: 12px 16px; }
.og-ajustes td { font-size: 14px; font-weight: 400; padding: 12px 16px; }
.og-ajustes .og-ajuste { font-weight: 400; opacity: 1; color: inherit; }
.og-ajustes tbody td:last-child { font-weight: 400; }
.og-ajustes tbody td:last-child > span:first-child { opacity: 1; }


/* --- PARCHE_OG_DISENO --- */
/* La pestana ya dice "Detalles": el titulo de la tarjeta repetia lo mismo
   y robaba una franja entera. La tabla empieza arriba, a ras. */
.card:has(.og-ajustes) > .card-head { display: none; }
.card:has(.og-ajustes) .table-wrap { border-radius: 10px; overflow: hidden; }

.og-ajustes { border-collapse: collapse; width: 100%; }
.og-ajustes thead th { background: #eceff3; color: #1f2d3d;
  font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0;
  padding: 12px 16px; border: 0; }
.og-ajustes tbody tr:nth-child(odd) { background: #f7f9fb; }
.og-ajustes tbody tr:nth-child(even) { background: #fff; }
.og-ajustes td { padding: 11px 16px; font-size: 14px; border: 0;
  vertical-align: middle; }
/* Etiqueta en negro, valor en azul: es lo que hace que se lea de un golpe. */
.og-ajustes .og-ajuste { color: #1f2d3d; font-weight: 400; opacity: 1;
  width: 38%; }
.og-ajustes tbody td:last-child,
.og-ajustes tbody td:last-child > span { color: #2f7fd1; font-weight: 400;
  opacity: 1; }
.og-ajustes .ojo, .og-ajustes .copiar { color: #2f7fd1; }

.og-lateral .og-linea { padding: 10px 16px; font-size: 13.5px; }
.og-lateral .og-linea b { color: #1f2d3d; }


/* --- PARCHE_OG_LETRA_GRANDE --- */
/* Sin copiar: ensuciaba la columna y no se usaba. */
.og-ajustes .copiar { display: none !important; }

/* Letra grande. Va con !important porque varias reglas de antes la
   estaban dejando en 13-14 px. */
.fn-olt-admin-v60 .og-ajustes th,
.fn-olt-admin-v60 .og-ajustes td,
.fn-olt-admin-v60 .og-ajustes td span,
.fn-olt-admin-v60 .og-ajustes td b { font-size: 16px !important;
  line-height: 1.45 !important; }
.fn-olt-admin-v60 .og-ajustes th { padding: 15px 18px !important; }
.fn-olt-admin-v60 .og-ajustes td { padding: 14px 18px !important; }
.fn-olt-admin-v60 .og-ajustes .ojo { font-size: 16px !important; }

.fn-olt-admin-v60 .og-lateral .og-linea,
.fn-olt-admin-v60 .og-lateral .og-linea span,
.fn-olt-admin-v60 .og-lateral .og-linea b { font-size: 15px !important; }
.fn-olt-admin-v60 .og-lateral .og-linea { padding: 13px 18px !important; }

/* --- PARCHE_OG_NEGRO --- */
.fn-olt-admin-v60 .og-ajustes .og-ajuste { color: #000 !important; }
.fn-olt-admin-v60 .og-ajustes thead th { color: #000 !important;
  font-weight: 700 !important; }

/* --- PARCHE_OG_NEGRO_2 --- */
.fn-olt-admin-v60 .og-ajustes tbody td,
.fn-olt-admin-v60 .og-ajustes tbody td > span,
.fn-olt-admin-v60 .og-ajustes tbody td:last-child,
.fn-olt-admin-v60 .og-ajustes tbody td:last-child > span { color: #000 !important; }

/* --- PARCHE_OG_PESTANAS --- */
.fn-olt-admin-v60 .tab-btn { font-size: 15px !important; height: 44px !important;
  padding: 0 18px !important; }


/* --- PARCHE_OG_LATERAL --- */
.fn-olt-admin-v60 .og-seccion { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 12px 18px;
  background: rgba(128, 138, 157, .07);
  border-top: 1px solid rgba(128, 138, 157, .16);
  border-bottom: 1px solid rgba(128, 138, 157, .16); }
.fn-olt-admin-v60 .og-sec-izq { display: inline-flex; align-items: center;
  gap: 9px; font-weight: 600; font-size: 15px; color: #000; }
.fn-olt-admin-v60 .og-sec-izq svg { width: 17px; height: 17px; opacity: .6; }
.fn-olt-admin-v60 .og-sec-der { display: inline-flex; align-items: center;
  gap: 8px; }
.fn-olt-admin-v60 .og-seccion b { font-size: 15px; color: #000; }
.fn-olt-admin-v60 .og-seccion b.rojo { color: #d13b3b; }
.fn-olt-admin-v60 .og-foto img { height: 190px !important; }


/* --- PARCHE_OG_LATERAL_2 --- */
.fn-olt-admin-v60 .og-seccion { display: none !important; }
.fn-olt-admin-v60 .og-linea.con-icono { justify-content: space-between;
  padding: 13px 18px !important; }
.fn-olt-admin-v60 .og-lin-izq { display: inline-flex; align-items: center;
  gap: 10px; }
.fn-olt-admin-v60 .og-lin-izq svg { width: 17px; height: 17px; opacity: .55;
  flex: 0 0 auto; }
.fn-olt-admin-v60 .og-lin-der { display: inline-flex; align-items: center;
  gap: 8px; }

/* --- PARCHE_OG_LETRA_TABLAS --- */
/* Todas las tablas de Gestion al mismo tamano que Detalles. */
#og-contenido .data-table th,
#og-contenido .data-table td,
#og-contenido .data-table td span,
#og-contenido .data-table td b { font-size: 16px !important;
  line-height: 1.45 !important; }
#og-contenido .data-table th { padding: 15px 18px !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 700 !important; color: #000 !important; }
#og-contenido .data-table td { padding: 14px 18px !important;
  color: #000 !important; }
#og-contenido .card-head h3 { font-size: 18px !important; }


/* --- PARCHE_TARJETAS_ONLINE --- */
#og-contenido .tag.rojo { background: rgba(209, 59, 59, .12);
  color: #c0392b !important; border-color: rgba(209, 59, 59, .35); }

/* --- PARCHE_OG_SIN_PASTILLAS --- */
/* En la pantalla de la que copiamos el estado es texto, no una etiqueta
   de color: la pastilla verde en cada fila solo hacia ruido. */
#og-contenido .data-table .tag {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #000 !important;
}
#og-contenido .data-table .tag.rojo,
#og-contenido .data-table .tag.gray { color: #c0392b !important; }

/* --- PARCHE_OG_RUEDA --- */
.og-cargando { display: flex; justify-content: center; padding: 70px 0; }
.og-rueda { width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(47, 127, 209, .18); border-top-color: #2f7fd1;
  animation: og-giro .8s linear infinite; }
@keyframes og-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .og-rueda { animation-duration: 2.4s; }
}


/* --- PARCHE_TARJETAS_BOTON --- */
.og-rueda-mini { display: inline-block; width: 14px; height: 14px;
  margin-left: 9px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: og-giro .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .og-rueda-mini { animation-duration: 2.4s; }
}

/* --- PARCHE_OG_BOTONES_2 --- */
.fn-olt-admin-v60 .og-btn { font-size: 15px; padding: 10px 20px;
  border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  letter-spacing: .2px; }
.fn-olt-admin-v60 .og-btn:active { transform: translateY(1px); }

/* Un boton bloqueado a proposito no debe parecer un boton averiado. */
#og-contenido .data-table .mini.sec[disabled] {
  background: transparent; border: 1px solid rgba(128, 138, 157, .45);
  color: #6b7a8d; opacity: 1; cursor: not-allowed;
  padding: 6px 14px; border-radius: 5px; font-size: 13px; }

/* --- PARCHE_OG_LETRA_15 --- */
.fn-olt-admin-v60 .og-ajustes th,
.fn-olt-admin-v60 .og-ajustes td,
.fn-olt-admin-v60 .og-ajustes td span,
.fn-olt-admin-v60 .og-ajustes td b,
#og-contenido .data-table th,
#og-contenido .data-table td,
#og-contenido .data-table td span,
#og-contenido .data-table td b,
#og-contenido .data-table .tag { font-size: 15px !important; }
#og-contenido .data-table th { padding: 14px 18px !important; }
#og-contenido .data-table td { padding: 13px 18px !important; }


/* --- PARCHE_OG_PON --- */
.fn-olt-admin-v60 .og-btn.naranja { background: #e8930c; border-color: #e8930c; }
.fn-olt-admin-v60 .og-btn.naranja:hover { background: #cc7f06; }
.fn-olt-admin-v60 .og-btn.rojo { background: #d13b3b; border-color: #d13b3b; }
.fn-olt-admin-v60 .og-btn.rojo:hover { background: #b62f2f; }
#og-contenido .data-table td .progress { margin-top: 4px; }
#og-contenido .data-table td .muted { font-size: 13px !important; }


/* --- PARCHE_OG_PON_3 --- */
.fn-olt-admin-v60 .og-btn.naranja { background: #e8930c; border-color: #e8930c; }
.fn-olt-admin-v60 .og-btn.naranja:hover { background: #cc7f06; }
.fn-olt-admin-v60 .og-btn.rojo { background: #d13b3b; border-color: #d13b3b; }
.fn-olt-admin-v60 .og-btn.rojo:hover { background: #b62f2f; }
.pon-carga { position: relative; width: 145px; height: 18px;
  border-radius: 3px; background: rgba(127, 127, 127, .25);
  overflow: hidden; }
.pon-carga-fill { position: absolute; top: 0; bottom: 0; left: 0;
  display: block; background: rgba(31, 179, 37, .45); border-radius: 3px; }
.pon-carga-fill.naranja { background: rgba(232, 147, 12, .5); }
.pon-carga-fill.roja { background: rgba(209, 59, 59, .5); }
.pon-carga-txt { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px !important; font-weight: 600; color: #333;
  white-space: nowrap; }
#og-contenido .card-head { display: flex; align-items: center; }
.og-cab-links { margin-left: auto; display: flex; gap: 16px;
  padding-right: 4px; }
.enlace-cab { border: 0; background: none; color: #2f7fd1; font-size: 13px;
  cursor: pointer; padding: 0; }
.enlace-cab[disabled] { color: #8794a5; cursor: not-allowed; }
#og-contenido .data-table td .muted { font-size: 13px !important; }


/* --- PARCHE_OG_UPLINK_1 --- */
#og-contenido .up-verde { color: #1c9c2a !important; }
#og-contenido .up-rojo { color: #c9302c !important; }
#og-contenido .up-centro { text-align: center; }

/* PARCHE_WAN_ARRIBA: la etiqueta "Modo WAN" a la altura de su primera
   opcion, no centrada. El campo ocupa tres lineas -una opcion, el rotulo
   y las otras tres opciones-, y centrada cae junto al rotulo, con lo que
   la primera opcion parece pertenecer al campo de arriba.
   Va por #f-wan y no por una clase: el id ya estaba en el codigo desde
   antes, asi que esto funciona aunque el navegador tenga el app.js viejo,
   y un id gana a cualquier clase por especificidad. */
#f-wan{align-items:start}
/* Sin padding: una fila de radios no tiene el relleno de un campo
   de texto, asi que 9px la bajaban de mas. */
#f-wan > .mo-et{align-self:start;padding-top:0}


/* ===== PARCHE_CONFIRMAR_REMOTO ===== */
.cf-velo{position:fixed;inset:0;background:rgba(9,22,52,.45);z-index:95;
  display:flex;align-items:center;justify-content:center;padding:16px}
.cf-caja{background:#fff;border-radius:12px;max-width:640px;width:100%;
  box-shadow:0 18px 50px rgba(9,22,52,.28);overflow:hidden}
.cf-texto{padding:22px 24px;font-size:14px;line-height:1.55;color:#0f2a5c}
.cf-sep{margin-top:10px}
.cf-rojo{color:#dc2626;font-weight:700}
.cf-pie{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 20px}
.cf-si{border:1px solid #1d4ed8;background:#1d4ed8;color:#fff;
  border-radius:9px;padding:9px 28px;font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer}
.cf-si:hover{background:#1740b8}
.cf-no{border:1px solid #e2e8f0;background:#fff;color:#334155;
  border-radius:9px;padding:9px 28px;font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer}
.cf-no:hover{background:#f1f5fb}
/* El bloqueo tapa la pantalla mientras la OLT contesta: la orden es un
   login Telnet y tarda. Sin esto se puede seguir tocando el modal sin
   saber si termino. */
.cf-bloqueo{position:fixed;inset:0;background:rgba(255,255,255,.74);
  z-index:90;display:flex;align-items:center;justify-content:center}
.cf-bloqueo-caja{display:flex;flex-direction:column;align-items:center;
  gap:16px}
.cf-bloqueo-txt{font-size:30px;font-weight:600;color:#334155}
.cf-rueda{width:46px;height:46px;border-radius:50%;
  border:5px solid rgba(51,65,85,.18);border-top-color:#334155;
  animation:cf-gira .9s linear infinite}
@keyframes cf-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cf-rueda{animation:none}}


/* ===== PARCHE_ESTETICA_1 =====
   La X vivia como texto suelto dentro de un boton de 28x28: la caja estaba
   centrada pero el simbolo no, y se veia pegado arriba a la izquierda. */
.mo-x{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;padding:0;font-size:17px;font-weight:400}
.mo-x:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}


/* ===== PARCHE_MODAL_COMO_REFERENCIA ===== */

/* 1. La etiqueta ancla la fila. En gris claro y peso normal se desvanecia
      y el ojo solo veia la caja blanca del campo. */
.mo-fila > label:first-child,.mo-fila > .mo-et{color:#334155;font-weight:700;
  font-size:13px;line-height:1.35}

/* 3. Encabezado: el titulo manda. El icono del cuadrito no decia nada del
      contenido y le quitaba sitio. */
.mo-cab{border-bottom:1px solid #eef2f8;padding:18px 20px 16px}
.mo-cab .mo-ic{display:none}
.mo-tit h3{font-size:21px;font-weight:600;line-height:1.25}
.mo-tit p{font-size:12px;margin-top:3px}

/* 4. La X es lo menos importante del modal: sin recuadro. */
.mo-x{border:0;background:none;color:#9aa8be;font-size:20px}
.mo-x:hover{background:none;color:#334155}

/* 5. Aire entre filas. Apretadas se leen de una en una; con aire se lee el
      formulario entero de un vistazo. */
.mo-fila{margin-bottom:18px}

/* 6. El pie en banda gris, y "Cerrar" como enlace: dos botones con borde
      competian entre si y se presta al clic equivocado. */
.mo-pie{background:#f8fafc;border-top:1px solid #eef2f8}
.mo-bt2{border:0;background:none;color:#1d4ed8;font-weight:600;
  padding:9px 12px}
.mo-bt2:hover{background:none;text-decoration:underline}


/* ===== PARCHE_MODAL_ANCHO ===== */

/* 2. Los campos: mas altos y casi rectos. Con 9px de radio y poca altura
      parecian fichas; asi parecen un formulario. */
.mo-cuerpo input[type=text],.mo-cuerpo input[type=password],
.mo-cuerpo select,.mo-cuerpo textarea{border-radius:4px;min-height:40px;
  padding:9px 12px;font-size:13.5px}

/* 3. El titulo manda mas y pesa menos: grande y de trazo fino, como el
      suyo. */
.mo-cab{padding:20px 22px 18px}
.mo-tit h3{font-size:24px;font-weight:500;letter-spacing:-.2px}
.mo-tit p{font-size:12px;margin-top:4px}

/* 1. Ancho: no se encontro la regla original, asi que se
      fija aqui. */
.mo{max-width:600px}
/* PARCHE_MODAL_BOOTSTRAP: columnas en proporcion (3/8 de 12, como
   col-sm-3 y col-sm-8) y apilado desde 768px, que es el corte de
   Bootstrap. Con 150px fijos y corte en 620px, entre 620 y 768 el
   modal se quedaba a dos columnas y se aplastaba en el telefono. */


/* ===== PARCHE_BUSCADOR ===== */
.bs-caja{position:relative}
.bs-boton{display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;min-height:40px;padding:9px 12px;
  border:1px solid #dbe2ee;border-radius:4px;background:#fff;font:inherit;
  font-size:13.5px;color:#0f2a5c;cursor:pointer;text-align:left}
.bs-boton:hover{border-color:#bfd0f4}
.bs-elegido{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-flecha{width:0;height:0;flex:0 0 auto;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:6px solid #64748b}
.bs-panel{position:fixed;z-index:100;
  background:#fff;border:1px solid #dbe2ee;border-radius:6px;
  box-shadow:0 10px 26px rgba(9,22,52,.16);padding:8px;max-height:300px;
  display:flex;flex-direction:column;gap:6px}
.bs-panel.oculto{display:none}
.bs-busca{width:100%;padding:7px 10px;border:1px solid #dbe2ee;
  border-radius:4px;font:inherit;font-size:13px}
.bs-lista{overflow-y:auto;display:flex;flex-direction:column}
.bs-item{border:0;background:none;text-align:left;padding:8px 10px;
  border-radius:4px;font:inherit;font-size:13px;color:#0f2a5c;cursor:pointer}
.bs-item:hover{background:#f1f5fb}
.bs-item.act{background:#eef3fd;color:#1d4ed8;font-weight:600}
.bs-vacio{padding:10px;font-size:12.5px;color:#94a3b8}


/* ===== PARCHE_BLOQUEO_GUARDAR ===== */
/* El velo tiene que quedar POR ENCIMA del modal: si se cuela debajo
   se sigue pudiendo teclear en los campos mientras la OLT contesta. */
.cf-bloqueo{z-index:9999}


/* ===== PARCHE_TIPOS_ONU ===== */
/* Cabeceras ordenables, como en la herramienta de referencia. La flecha se
   dibuja siempre en la columna activa: sin ella no se sabe por que esta
   ordenada la tabla, y con 13 modelos eso ya se nota. */
#v-tiposonu thead th[data-orden]{cursor:pointer;user-select:none}
#v-tiposonu thead th[data-orden]:hover{color:#1d4ed8}
#v-tiposonu thead th .flecha{margin-left:5px;font-size:10px;opacity:.75}


/* ===== PARCHE_TIPOS_PARIDAD ===== */
/* El nombre del tipo se ve y se comporta como enlace, aunque por dentro sea
   un <button>: asi entra en el orden de tabulacion y no ensucia el
   historial. */
#v-tiposonu .lk{border:0;background:none;padding:0;font:inherit;
  font-weight:500;color:#1d4ed8;cursor:pointer;text-align:left}
#v-tiposonu .lk:hover{text-decoration:underline}
#v-tiposonu .btrojo{background:#dc3545;border:1px solid #dc3545;color:#fff;
  border-radius:4px;padding:5px 12px;font:inherit;font-size:12.5px;
  cursor:pointer}
#v-tiposonu .btrojo:hover{background:#bd2130;border-color:#bd2130}


/* ===== PARCHE_TIPOS_FORMULARIO ===== */
/* Etiqueta a la izquierda y campo a la derecha, como su form-horizontal.
   En movil se apila, que es lo que hace su col-sm-* por debajo de 768px. */
#tipo-form .tpfila{display:grid;grid-template-columns:170px 1fr;
  gap:12px;align-items:center;padding:7px 0}
#tipo-form .tpfila>label{font-weight:600;color:#0f2a5c;font-size:13px}
#tipo-form .tpcaja{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
#tipo-form .tpcaja>input[type=text],#tipo-form .tpcaja>input:not([type]),
#tipo-form .tpcaja>select{flex:1 1 260px;max-width:420px}
#tipo-form .tpen{display:inline-flex;align-items:center;gap:6px;
  font-weight:400;font-size:13px;cursor:pointer}
#tipo-form .tpayuda{flex:1 1 100%;font-size:12px;color:#94a3b8}
@media (max-width:768px){
  #tipo-form .tpfila{grid-template-columns:1fr;gap:5px;align-items:start}
}


/* ===== PARCHE_TIPOS_LOOK ===== */
/* Su formulario es un form-horizontal de Bootstrap 3: etiqueta en
   col-sm-2 alineada a la DERECHA y campo en col-sm-8. Dos doceavos y ocho
   doceavos, o sea proporciones, no pixeles fijos. */
#tipo-form .tpfila{grid-template-columns:170px minmax(0,660px);
  align-items:center;column-gap:16px}
#tipo-form .tpfila>label{text-align:right}
#tipo-form .tpcaja{justify-content:flex-start;column-gap:18px}

/* Los campos llenan su columna. El max-width de antes los dejaba a media
   asta contra un hueco vacio. */
#tipo-form .tpcaja>input,
#tipo-form .tpcaja>select{flex:1 1 100%;width:100%;max-width:none}

/* Las casillas NO son campos de texto: no se estiran ni se van al fondo.
   El margin-right:auto es lo que las clava al principio de la columna. */
#tipo-form .tpcaja>input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;
  max-width:none;margin:0 auto 0 0}
#tipo-form .tpen input{flex:0 0 auto;width:auto;max-width:none;margin:0}

/* Los botones arrancan donde arrancan los campos, no debajo de la etiqueta. */
#tipo-form .acciones{padding-left:186px}
#tipo-form #btn-tipo-guardar{background:#5cb85c;border-color:#5cb85c}
#tipo-form #btn-tipo-guardar:hover{background:#449d44;border-color:#449d44}
#tipo-form #btn-tipo-cancelar{background:none;border:0;box-shadow:none;
  color:#1d4ed8;padding-left:6px}
#tipo-form #btn-tipo-cancelar:hover{background:none;text-decoration:underline}

/* Un campo bloqueado tiene que PARECER bloqueado, o el tecnico teclea en el
   nombre y no entiende por que no pasa nada. */
#tipo-form input:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed}

@media (max-width:768px){
  #tipo-form .tpfila{grid-template-columns:1fr}
  #tipo-form .tpfila>label{text-align:left}
  #tipo-form .acciones{padding-left:0}
}


/* ===== PARCHE_TIPOS_IMAGEN ===== */
#tipo-form .tpimg{max-width:400px;max-height:90px;border:1px solid #e2e8f0;
  border-radius:6px;background:#fff;padding:4px}
#tipo-form input[type=file]{flex:1 1 100%;max-width:none;font-size:13px}


/* ===== PARCHE_PLANTILLAS ===== */
#v-plantillas .aviso{margin:0 0 14px;padding:10px 14px;border-radius:6px;
  background:#fff8e6;border:1px solid #f0dcaa;color:#7a5c12;font-size:13px}
#plant-form .tpfila.arriba{align-items:start}
#plant-form textarea{flex:1 1 100%;width:100%;max-width:none;min-height:120px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.5;padding:10px;border:1px solid #dbe2ee;border-radius:5px;
  background:#fbfcfe;color:#0f2a5c;resize:vertical}
#plant-form textarea:focus{outline:none;border-color:#93b4f5;
  box-shadow:0 0 0 3px rgba(29,78,216,.12)}
#v-plantillas .lk{border:0;background:none;padding:0;font:inherit;
  font-weight:500;color:#1d4ed8;cursor:pointer;text-align:left}
#v-plantillas .lk:hover{text-decoration:underline}
#v-plantillas .btrojo{background:#dc3545;border:1px solid #dc3545;color:#fff;
  border-radius:4px;padding:5px 12px;font:inherit;font-size:12.5px;
  cursor:pointer}
#v-plantillas .btrojo:hover{background:#bd2130;border-color:#bd2130}
#v-plantillas thead th[data-orden]{cursor:pointer;user-select:none}


/* ===== PARCHE_PLANTILLAS_OLT ===== */
#v-oltgestion .og-aviso{margin:0 0 12px;padding:9px 13px;border-radius:6px;
  background:#fff8e6;border:1px solid #f0dcaa;color:#7a5c12;font-size:12.5px}
#v-oltgestion .lk{border:0;background:none;padding:0;font:inherit;
  font-weight:600;color:#1d4ed8;cursor:pointer;text-align:left}
#v-oltgestion .lk:hover{text-decoration:underline}
#v-oltgestion .og-btn.peligro{color:#b91c1c;border-color:#f0b4b4}
#v-oltgestion .og-btn.peligro:hover{background:#fdeaea;border-color:#e08a8a}


/* ===== PARCHE_TIPOS_LETRA ===== */
/* La hoja global pone las cabeceras de tabla en mayusculas y con
   letter-spacing. En un listado de once columnas eso obliga a que no
   quepan o a que se corten; la referencia las deja en texto normal y las
   parte en varias lineas. Se anula aqui, solo para esta pantalla. */
#v-tiposonu table th{text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:600;color:#5b6b80;white-space:normal;line-height:1.35;
  vertical-align:bottom;padding:10px 12px}
#v-tiposonu table td{white-space:normal;padding:9px 12px;font-size:13px;
  vertical-align:middle}
#v-tiposonu table td.envuelve{white-space:normal}


/* ===== PARCHE_TIPOS_LETRA15 ===== */
#v-tiposonu table th{font-size:14px;padding:11px 12px}
#v-tiposonu table td{font-size:15px;padding:11px 12px}
#v-tiposonu table td .lk{font-size:15px}
#v-tiposonu table td .mini{font-size:13.5px}


/* ===== PARCHE_ZONAS ===== */
#v-zonas table th{text-transform:none;letter-spacing:0;font-size:14px;
  font-weight:600;color:#5b6b80;white-space:normal;padding:11px 12px}
#v-zonas table td{font-size:15px;padding:11px 12px;white-space:normal}
#v-zonas .lk{border:0;background:none;padding:0;font:inherit;font-size:15px;
  font-weight:500;color:#1d4ed8;cursor:pointer;text-align:left}
#v-zonas .lk:hover{text-decoration:underline}
/* El alta y edicion de zona es ahora un modal como el de Cajas NAP: las
   reglas de la pantalla aparte (etiquetas a la izquierda, Guardar verde,
   pie empujado 186 px) y las del boton rojo de borrar se fueron con ella. */
#v-zonas thead th[data-orden]{cursor:pointer;user-select:none}

/* Consola de solo lectura y permiso de respaldo en la pantalla de la OLT. */
.og-consola-fila{display:flex;gap:8px;margin:8px 0}
.og-consola-fila input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r2);
  font-family:ui-monospace,Consolas,monospace;font-size:.85rem}
.og-consola-salida{background:#031D43;color:#E6EEF9;padding:12px 14px;border-radius:9px;
  max-height:440px;overflow:auto;font-size:.78rem;line-height:1.4;white-space:pre-wrap;margin:0}
.og-permiso{display:flex;align-items:flex-start;gap:10px;margin:8px 0 12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r2);background:#F8FAFC;font-size:.82rem;
  line-height:1.4;cursor:pointer}
.og-permiso input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--azul)}

/* La fila de la plantilla de alta en Autorizar ONU. */
.fn-plantilla-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px 14px;
  align-items:end;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line-2)}
.fn-plantilla-botones{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px}
.fn-plantilla-row small{grid-column:1 / -1;margin:0}
.fn-plantilla-row small.aplicada{color:var(--verde)}
@media (max-width:760px){.fn-plantilla-row{grid-template-columns:1fr}}

/* Redes detras del router, en el formulario de edicion del MikroTik. */
.mk-redes textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r2);font:inherit;font-family:ui-monospace,Consolas,monospace;font-size:.88rem;resize:vertical}
.mk-redes .ayuda{color:var(--muted);font-size:.8rem;line-height:1.45;margin:6px 0 10px}

/* --- La consola de la plataforma (admin.fastnettechnology.com) ---
   body.consola lo pone arrancar() cuando entra el administrador de la
   empresa duena del panel: solo ve «ISPs del panel» y «Configuracion». */
.side nav a.solo-consola{display:none}
body.consola .side nav a.solo-consola{display:flex}
body.consola .side nav a[data-v]:not(.solo-consola):not([data-v="configuracion"]),
body.consola .side nav .grupo{display:none}