/* alCubo ISP — hoja base. Sin CDN: la CSP no permite orígenes externos.
   Paleta tomada del panel de operación: azul índigo sobre gris muy claro,
   barra lateral azul casi negra con degradado. */
:root{--tinta:#1a2438;--suave:#64708a;--linea:#e4e8f0;--fondo:#f4f6fb;
      --acento:#0891b2;--acento-2:#0e7490;--signal:#2DD4E8;--alerta:#dc3546;--ok:#16a34a;
      --lateral-1:#0A1120;--lateral-2:#0F1A30;--radio:8px}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--acento)}
.cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;
     padding:1rem 1.5rem;background:#fff;border-bottom:1px solid var(--linea)}
.cab nav{display:flex;align-items:center;gap:1.25rem}
.marca{font-weight:500;text-decoration:none;color:var(--tinta)}
.contenido{max-width:1080px;margin:2rem auto;padding:0 1.5rem}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.75rem}
.angosta{max-width:420px;margin:3rem auto}
.centrada{text-align:center}
label{display:block;margin:1rem 0 .35rem;font-size:.9rem;color:var(--suave)}
input{width:100%;padding:.65rem .75rem;border:1px solid var(--linea);
      border-radius:var(--radio);font-size:1rem;background:#fff}
input:focus{outline:2px solid var(--acento);outline-offset:1px}
.btn{display:inline-block;margin-top:1.25rem;padding:.65rem 1.1rem;border:0;
     border-radius:var(--radio);background:var(--acento);color:#fff;
     font-size:1rem;text-decoration:none;cursor:pointer}
.enlace{border:0;background:none;color:var(--acento);cursor:pointer;font-size:1rem;padding:0}
.en-linea{display:inline}
.error{background:#fee2e2;color:#991b1b;padding:.7rem .9rem;border-radius:var(--radio)}
.aviso{background:#fef3c7;color:#92600e;padding:.7rem .9rem;border-radius:var(--radio)}
.menudo{font-size:.875rem;color:var(--suave)}
.tabla{width:100%;border-collapse:collapse;background:#fff;
       border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.tabla th,.tabla td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--linea)}
.tabla th{font-weight:500;color:var(--suave);font-size:.85rem}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.vacio{text-align:center;color:var(--suave);padding:2rem}
.resumen{display:flex;gap:2.5rem;margin:1.5rem 0}
.etiqueta{display:block;font-size:.8rem;color:var(--suave)}
.deuda{color:var(--alerta);font-size:1.4rem}
.al-corriente{color:var(--ok);font-size:1.4rem}
.estado{font-size:.8rem;padding:.15rem .5rem;border-radius:99px;background:#eef1f6}
.estado.pagada{background:#dcfce7;color:#15803d}
.estado.pendiente{background:#fef3c7;color:#92600e}
.estado.anulada{background:#eef1f6;color:#64708a;text-decoration:line-through}
.pie{padding:2rem 1.5rem;color:var(--suave);font-size:.875rem;text-align:center}

/* ═══════════════════════════════════════════════════════════
   GESTIÓN
   Herramienta interna de operación. La prioridad es densidad y
   escaneo, no impacto visual: quien la usa pasa el día aquí.
   El dinero va en cifras tabulares para que las columnas se
   lean de un vistazo, y el atraso escala de neutro a rojo.
   ═══════════════════════════════════════════════════════════ */

.centrado-pantalla{display:grid;place-items:center;min-height:100vh}

body.gestion{display:grid;grid-template-columns:210px 1fr;min-height:100vh;margin:0}

.lateral{background:linear-gradient(180deg,var(--lateral-1),var(--lateral-2));color:#c3ccde;padding:1.25rem 0;
         display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:0;height:100vh}
.lateral .marca{color:#fff;font-weight:500;text-decoration:none;padding:0 1.25rem;font-size:1.05rem}
.lateral nav{display:flex;flex-direction:column}
.lateral nav a{color:#8b96ac;text-decoration:none;padding:.5rem 1.25rem;font-size:.925rem;
               border-left:2px solid transparent}
.lateral nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.lateral nav a.activo{color:#fff;border-left-color:var(--signal);background:rgba(45,212,232,.14)}
.lateral .usuario{margin-top:auto;padding:0 1.25rem;font-size:.85rem;line-height:1.4}
.lateral .usuario span{display:block;color:#fff}
.lateral .usuario small{display:block;color:#5a678a;text-transform:capitalize}
.lateral .usuario .enlace{color:#8b96ac;font-size:.85rem;margin-top:.5rem}
.lateral .usuario .enlace:hover{color:#fff}

.area{padding:1.75rem 2rem;max-width:1400px}
.area h1{font-size:1.5rem;font-weight:500;margin:0 0 1.25rem}
.area h2{font-size:1rem;font-weight:500;color:var(--suave);margin:1.75rem 0 .6rem}

.encabezado{display:flex;align-items:flex-start;justify-content:space-between;
            gap:1.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.encabezado h1{margin:0}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
          gap:.75rem;margin-bottom:1.5rem}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:.9rem 1rem}
.kpi .cifra{display:block;font-size:1.5rem;font-weight:500;line-height:1.3;
            font-variant-numeric:tabular-nums}
.kpi small{color:var(--suave);font-size:.8rem}

.saldo-grande{text-align:right}
.saldo-grande strong{display:block;font-size:1.6rem;font-weight:500;
                     font-variant-numeric:tabular-nums}
.saldo-grande.deuda strong{color:var(--alerta)}
.saldo-grande.ok strong{color:var(--ok)}

.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}

.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filtros input,.filtros select{width:auto;padding:.45rem .6rem;font-size:.9rem;margin:0}
.filtros input[type=search]{min-width:260px}
.filtros .btn{margin:0;padding:.45rem .9rem;font-size:.9rem}

.tabla td small{display:block;color:var(--suave);font-size:.78rem}
.tabla .num{font-variant-numeric:tabular-nums}
.tabla tfoot td{border-bottom:0;color:var(--suave);padding:.35rem .9rem}
.tabla tfoot .total td{font-weight:500;color:var(--tinta);
                       border-top:1px solid var(--linea);font-size:1.05rem}
.tabla tr.anulado{opacity:.5;text-decoration:line-through}

.deuda{color:var(--alerta)}
.ok{color:var(--ok)}

/* El atraso escala: neutro hasta 10 días, ámbar hasta 30, rojo después */
.dias{display:inline-block;padding:.1rem .4rem;border-radius:99px;
      font-size:.78rem;background:#eef1f6;color:var(--suave);
      font-variant-numeric:tabular-nums}
.dias.medio{background:#faeeda;color:#633806}
.dias.grave{background:#fceaea;color:#791f1f}

.estado.activo,.estado.pagada{background:#dcfce7;color:#15803d}
.estado.suspendido,.estado.pendiente,.estado.pagada_parcial{background:#fef3c7;color:#92600e}
.estado.baja,.estado.anulada,.estado.terminado{background:#eef1f6;color:#64708a}
.estado.borrador,.estado.prospecto{background:#e0e7ff;color:#3730a3}

.datos{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;
       background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1rem}
.datos dt{color:var(--suave);font-size:.85rem}
.datos dd{margin:0}

.compacto{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1rem}
.compacto label{margin-top:.6rem}
.compacto .btn{width:100%}

.aviso.ok{background:#dcfce7;color:#15803d}
.aviso.mal{background:#fee2e2;color:#991b1b}
.btn.peligro{background:var(--alerta)}

.paginas{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:1rem}
.paginas a{padding:.3rem .6rem;border:1px solid var(--linea);border-radius:6px;
           text-decoration:none;font-size:.875rem;background:#fff}
.paginas a.activo{background:var(--acento);color:#fff;border-color:var(--acento)}

@media (max-width:900px){
  body.gestion{grid-template-columns:1fr}
  .lateral{position:static;height:auto}
  .lateral nav{flex-direction:row;overflow-x:auto}
  .dos-columnas{grid-template-columns:1fr}
  .area{padding:1.25rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Navegación agrupada ─────────────────────────────────── */
.lateral nav .grupo{display:block;padding:1.1rem 1.25rem .3rem;font-size:.7rem;
                    letter-spacing:.08em;text-transform:uppercase;color:#5a678a}

/* ── Migas de pan ────────────────────────────────────────── */
.migas{display:flex;gap:.4rem;align-items:center;font-size:.85rem;
       color:var(--suave);margin-bottom:.75rem}
.migas a{color:var(--suave)}
.migas a:hover{color:var(--acento)}

/* ── Cabecera de ficha ───────────────────────────────────── */
.ficha-cab{display:flex;align-items:flex-start;justify-content:space-between;
           gap:1.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.ficha-cab h1{margin:0 0 .2rem}
.ficha-saldo{text-align:right;margin-left:auto}
.ficha-saldo strong{display:block;font-size:1.5rem;font-weight:500;
                    font-variant-numeric:tabular-nums}
.ficha-cab .acciones{display:flex;gap:.4rem;align-items:center}
.btn.menor{margin:0;padding:.4rem .8rem;font-size:.875rem;
           background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.btn.menor:hover{border-color:var(--acento);color:var(--acento)}

/* ── Pestañas de la ficha ────────────────────────────────── */
.pestanas{display:flex;gap:.15rem;border-bottom:1px solid var(--linea);
          margin-bottom:1.25rem;overflow-x:auto}
.pestanas a{padding:.55rem .85rem;text-decoration:none;color:var(--suave);
            font-size:.925rem;border-bottom:2px solid transparent;white-space:nowrap}
.pestanas a:hover{color:var(--tinta)}
.pestanas a.activa{color:var(--tinta);border-bottom-color:var(--acento);font-weight:500}
.pestanas .cuenta{display:inline-block;margin-left:.3rem;padding:0 .35rem;
                  background:#e0e7ff;border-radius:99px;font-size:.72rem;color:var(--suave)}
.pestanas a.activa .cuenta{background:var(--acento);color:#fff}

/* ── Fichas de filtro rápido ─────────────────────────────── */
.fichas{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem}
.fichas a{padding:.32rem .75rem;border:1px solid var(--linea);border-radius:99px;
          text-decoration:none;font-size:.875rem;background:#fff;color:var(--suave)}
.fichas a:hover{border-color:var(--acento);color:var(--acento)}
.fichas a.activa{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ── Campos en pareja ────────────────────────────────────── */
.par{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.par label{margin-top:.6rem}

.area h2 a{font-size:.8rem;font-weight:400;margin-left:.5rem}
.estado.urgente,.estado.alta{background:#fceaea;color:#791f1f}
.estado.normal{background:#f1efe8;color:#5f5e5a}
.estado.baja{background:#eceef2;color:#3a4557}
.estado.abierto,.estado.en_proceso{background:#faeeda;color:#633806}
.estado.resuelto,.estado.cerrado{background:#dcfce7;color:#15803d}

/* ── Formularios largos ──────────────────────────────────── */
.formulario{max-width:920px}
.formulario fieldset{background:#fff;border:1px solid var(--linea);border-radius:12px;
                     padding:1.1rem 1.25rem 1.35rem;margin:0 0 1rem}
.formulario legend{font-weight:500;padding:0 .4rem;font-size:.95rem}
.formulario label{margin-top:.7rem}
.formulario fieldset > div:first-of-type > label:first-child{margin-top:0}

.par-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.par-tres > div{min-width:0}

.ayuda{display:block;font-size:.8rem;color:var(--suave);margin-top:.25rem;line-height:1.4}
.error-campo{display:block;font-size:.8rem;color:var(--alerta);margin-top:.25rem}
input.malo,select.malo{border-color:var(--alerta);background:#fffafa}
input.malo:focus,select.malo:focus{outline-color:var(--alerta)}

/* Elección de tipo: tarjetas en vez de radios sueltos */
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opcion{display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:.75rem .9rem;
        border:1px solid var(--linea);border-radius:10px;cursor:pointer;background:#fff}
.opcion:hover{border-color:var(--acento)}
.opcion input{width:auto;margin:.15rem 0 0}
.opcion span{display:block}
.opcion strong{display:block;font-weight:500}
.opcion small{display:block;color:var(--suave);font-size:.8rem}
.opcion:has(input:checked){border-color:var(--acento);background:#eef2ff}

.casilla{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;cursor:pointer}
.casilla input{width:auto;margin:0}

[hidden]{display:none!important}

.pie-form{display:flex;gap:.6rem;align-items:center;margin-top:.5rem}
.pie-form .btn{margin-top:0}

@media (max-width:760px){
  .par,.par-tres,.opciones{grid-template-columns:1fr}
}

/* ── Catálogo ────────────────────────────────────────────── */
.desglose{margin:.45rem 0 0;padding:.5rem .6rem;background:#eef1f6;
          border-radius:8px;font-variant-numeric:tabular-nums;
          color:var(--suave);font-size:.9rem}
.casillas-linea{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.3rem}
.casillas-linea .casilla{margin-top:0}

/* ═══════════════════════════════════════════════════════════
   FORMULARIO DE CLIENTE — disposición en dos columnas
   Inspirado en la organización de UISP: barra de acciones
   arriba y abajo, columnas General/Ubicación, secciones que
   se despliegan. Identidad visual: azul índigo #4f6bed sobre azul oscuro.
   ═══════════════════════════════════════════════════════════ */

.form-cliente{max-width:1000px;margin:0 auto}

/* Barra de acciones fija arriba y repetida abajo */
.barra-acciones{display:flex;justify-content:flex-end;align-items:center;
                gap:1rem;padding:.5rem 0;margin-bottom:1rem}
.barra-acciones + .panel{margin-top:0}
.form-cliente .barra-acciones:last-of-type{margin:1rem 0 0}
.btn-texto{color:var(--suave);text-decoration:none;font-size:.9rem;
           text-transform:uppercase;letter-spacing:.03em}
.btn-texto:hover{color:var(--tinta)}

.panel{background:#fff;border:1px solid var(--linea);border-radius:12px;
       padding:1.75rem 2rem}

.rejilla-form{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.col-titulo{font-size:1.15rem;font-weight:400;color:var(--tinta);
            margin:0 0 1.1rem;padding-bottom:.5rem}
.sub-titulo{font-size:1rem;font-weight:400;color:var(--tinta);margin:1.5rem 0 .75rem}

/* Campos: placeholder como etiqueta, al estilo del formulario de referencia */
.campo{margin-bottom:.75rem}
.campo input,.campo select,.campo textarea{width:100%;padding:.6rem .7rem;
       border:1px solid var(--linea);border-radius:6px;font-size:.925rem;
       background:#fff;font-family:inherit}
.campo input:focus,.campo select:focus,.campo textarea:focus{
       outline:2px solid var(--acento);outline-offset:-1px;border-color:var(--acento)}
.campo.malo input,.campo.malo select{border-color:var(--alerta);background:#fffafa}
.campo .etiqueta-campo{display:block;margin:0 0 .3rem;font-size:.82rem;color:var(--suave)}
.campo input.inerte{background:#f4f3ee;color:var(--suave)}

.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.fila-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
.campo.dos{grid-column:span 2}

/* Persona física / empresa como par de chips */
.tipo-toggle{display:flex;gap:.4rem;margin-bottom:1rem}
.tipo-toggle .chip{flex:1;margin:0;position:relative}
.tipo-toggle .chip input{position:absolute;opacity:0;pointer-events:none}
.tipo-toggle .chip span{display:block;text-align:center;padding:.55rem;
       border:1px solid var(--linea);border-radius:6px;cursor:pointer;
       font-size:.9rem;color:var(--suave);background:#fff}
.tipo-toggle .chip:has(input:checked) span{border-color:var(--acento);
       background:#eef2ff;color:var(--acento);font-weight:500}

.check-linea{display:flex;align-items:center;gap:.5rem;margin:.75rem 0;
             cursor:pointer;font-size:.9rem;color:var(--tinta)}
.check-linea input{width:auto;margin:0}

.ayuda{display:block;font-size:.78rem;color:var(--suave);margin-top:.25rem;line-height:1.4}
.error-campo{display:block;font-size:.78rem;color:var(--alerta);margin-top:.25rem}

/* Secciones colapsables */
.acordeon{background:#fff;border:1px solid var(--linea);border-radius:12px;margin-top:1rem}
.acordeon-cab{width:100%;display:flex;align-items:center;gap:.75rem;
              padding:1rem 1.5rem;background:none;border:0;cursor:pointer;
              font-size:.95rem;color:var(--tinta);font-family:inherit;text-align:left}
.acordeon-cab .signo{display:inline-flex;align-items:center;justify-content:center;
              width:1.25rem;height:1.25rem;border-radius:4px;background:#f0eee7;
              color:var(--acento);font-weight:500;flex-shrink:0}
.acordeon-nota{margin-left:auto;font-size:.8rem;color:var(--suave)}
.acordeon-cuerpo{padding:0 1.5rem 1.5rem;border-top:1px solid var(--linea)}
.acordeon:not([data-abierto="1"]) .acordeon-cuerpo{display:none}
.acordeon[data-abierto="1"] .signo{background:var(--acento);color:#fff}

@media (max-width:820px){
  .rejilla-form{grid-template-columns:1fr;gap:1.5rem}
  .fila-3{grid-template-columns:1fr}
  .campo.dos{grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════
   ALTA DE CLIENTE — layout de dos columnas
   Identidad y contacto a la izquierda, domicilio a la derecha;
   lo eventual (fiscal, servicio, notas) se pliega al fondo.
   ═══════════════════════════════════════════════════════════ */

.alta{max-width:1080px;width:100%;margin:0 auto}

.barra-acciones{display:flex;align-items:center;justify-content:space-between;
                gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.barra-acciones h1{margin:0}
.barra-acciones .botones{display:flex;gap:.5rem;align-items:center}
.barra-acciones.pie{margin:1rem 0 0;justify-content:flex-end}
.malo-texto{color:var(--alerta)}

.tarjeta-alta{background:#fff;border:1px solid var(--linea);border-radius:14px;
              padding:1.5rem 1.6rem;width:100%;box-sizing:border-box}

.columnas-alta{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.columnas-alta .col > h2{font-size:.8rem;font-weight:600;letter-spacing:.05em;
                         text-transform:uppercase;color:var(--suave);
                         margin:0 0 .9rem;padding-bottom:.4rem;
                         border-bottom:1px solid var(--linea)}
.columnas-alta .col > h2.sep{margin-top:1.6rem}

/* Pastillas para el tipo de cliente */
.opciones-linea{display:flex;gap:.4rem;margin-bottom:.9rem}
.pastilla{margin:0;flex:1;display:flex;align-items:center;justify-content:center;
          gap:.4rem;padding:.5rem;border:1px solid var(--linea);border-radius:8px;
          cursor:pointer;font-size:.9rem;background:#fff}
.pastilla input{width:auto;margin:0}
.pastilla:has(input:checked){border-color:var(--acento);background:#eef2ff;
                             color:var(--acento);font-weight:500}

.par-desigual{display:grid;grid-template-columns:2fr 1fr;gap:.75rem}

/* Secciones plegables al estilo del panel de referencia */
.plegable{border-top:1px solid var(--linea);margin-top:1.4rem}
.plegable summary{display:flex;align-items:baseline;gap:.75rem;padding:1rem .2rem .3rem;
                  cursor:pointer;list-style:none}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary::before{content:"+";font-size:1.1rem;color:var(--acento);
                          font-weight:600;width:1rem;flex-shrink:0}
.plegable[open] summary::before{content:"–"}
.titulo-seccion{font-weight:500}
.cuerpo-plegable{padding:.6rem .2rem 1rem 1.75rem}

.alta textarea{width:100%;padding:.55rem .65rem;border:1px solid var(--borde);
               border-radius:8px;font:inherit;resize:vertical}
.alta textarea:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:transparent}

@media (max-width:820px){
  .columnas-alta{grid-template-columns:1fr;gap:1.4rem}
  .columnas-alta .col > h2.sep{margin-top:1rem}
}

/* Etiqueta "a la venta" junto al campo de velocidad */
.ayuda-inline{font-size:.72rem;color:#c2410c;font-weight:400;margin-left:.3rem}

/* ═══════════════════════════════════════════════════════════
   PLANES EN TARJETAS
   Agrupados por tecnología. El precio es lo primero que se lee;
   el burst va en gris porque es dato de operación, no de venta.
   ═══════════════════════════════════════════════════════════ */

.grupo-tec{display:flex;align-items:baseline;gap:.6rem;font-size:1.05rem;
           font-weight:500;margin:1.75rem 0 .9rem}
.grupo-tec .menudo{font-weight:400}

.rejilla-planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
                gap:1rem;align-items:start}

.plan-card{position:relative;background:#fff;border:1px solid var(--linea);
           border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
           transition:border-color .15s,box-shadow .15s}
.plan-card:hover{border-color:#c3cdf0;box-shadow:0 2px 12px rgba(79,107,237,.10)}
.plan-card.inactivo{opacity:.62}
.plan-card.recomendado{border-color:var(--acento)}

.cinta{background:var(--acento);color:#fff;text-align:center;
       font-size:.78rem;font-weight:500;padding:.35rem}

.plan-cuerpo{padding:1.1rem 1.2rem;flex:1}
.plan-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.plan-cab h3{margin:0;font-size:1.15rem;font-weight:600}

.pastilla-tec{display:inline-block;margin-top:.4rem;padding:.15rem .6rem;
              background:#e0e7ff;color:#3730a3;border-radius:99px;font-size:.78rem}

.plan-precio{margin:.7rem 0 .1rem;line-height:1}
.plan-precio strong{font-size:1.9rem;font-weight:700;color:var(--acento);
                    font-variant-numeric:tabular-nums}
.plan-precio .periodo{color:var(--suave);font-size:.9rem}

.plan-velocidad{margin:.5rem 0 .2rem;font-weight:500}
.marca-venta{display:inline-block;margin-left:.25rem;padding:0 .35rem;
             background:#e0e7ff;color:#3d55d1;border-radius:99px;
             font-size:.68rem;font-weight:400;vertical-align:middle}

.plan-burst{margin:.35rem 0;font-size:.85rem;color:#b45309}
.plan-detalle{margin:.35rem 0;font-size:.85rem;color:var(--suave)}
.plan-uso{margin:.6rem 0 0;font-size:.82rem;color:var(--suave);
          padding-top:.55rem;border-top:1px solid var(--linea)}

.plan-acciones{display:flex;gap:.4rem;padding:.7rem 1.2rem 1rem;align-items:center}
.plan-acciones .btn{flex:1;margin:0;text-align:center}
.plan-acciones form{margin:0}

.btn-icono{padding:.4rem .6rem;border:1px solid var(--linea);border-radius:8px;
           background:#fff;cursor:pointer;font-size:.95rem;line-height:1}
.btn-icono.peligro:hover{border-color:var(--alerta);background:#fdf2f2}
.btn-icono.desactiva:hover{border-color:#b45309;background:#fdf6ec}

@media (max-width:640px){
  .rejilla-planes{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   FICHA DE CLIENTE — dos columnas
   Izquierda ancha (operación: saldos, servicios, registros);
   derecha angosta (identidad y consulta rápida). Avatar de
   iniciales como ancla visual, sin foto ni mapa.
   ═══════════════════════════════════════════════════════════ */

.ficha-2col{display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start}

.ficha-izq,.ficha-der{display:flex;flex-direction:column;gap:1rem;min-width:0}

/* Tres saldos */
.saldos-fila{display:grid;grid-template-columns:repeat(3,1fr);
             background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.saldo-caja{padding:1rem 1.1rem;border-right:1px solid var(--linea)}
.saldo-caja:last-child{border-right:0}
.saldo-caja .etiqueta{font-size:.78rem;margin-bottom:.2rem}
.saldo-caja strong{font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}

/* Bloques de la izquierda */
.bloque{background:#fff;border:1px solid var(--slate-100,#f1f5f9);border-radius:16px;padding:1.1rem 1.2rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bloque-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.bloque-cab h2{margin:0;font-size:.95rem;font-weight:600;color:var(--tinta);
               border:0;padding:0;text-transform:none;letter-spacing:0}
.mas{color:var(--acento);font-size:1.3rem;line-height:1;text-decoration:none;font-weight:400}
.mas-texto{color:var(--acento);font-size:.82rem;text-decoration:none}
.vacio-bloque{color:var(--suave);font-size:.9rem;padding:.5rem 0;margin:0}

/* Servicio como línea con punto de estado */
.servicio-linea{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;
                border-top:1px solid var(--linea)}
.servicio-linea:first-of-type{border-top:0}
.punto{width:9px;height:9px;border-radius:50%;background:var(--suave);flex-shrink:0}
.punto.activo{background:var(--ok)}
.punto.suspendido{background:#d97706}
.punto.baja,.punto.terminado{background:var(--suave)}
.servicio-info{flex:1;min-width:0}
.servicio-info strong{display:block;font-weight:500}
.servicio-info small{color:var(--suave)}
.servicio-precio{text-align:right;white-space:nowrap}
.servicio-precio strong{font-variant-numeric:tabular-nums}
.servicio-precio small{color:var(--suave)}

.compacta-tabla{border:0;margin:0}
.compacta-tabla td{padding:.4rem 0;border-bottom:1px solid var(--linea)}
.compacta-tabla .total td{border-bottom:0;font-weight:500;color:var(--tinta)}

.cargo-rapido{display:flex;gap:.4rem;margin-top:.7rem}
.cargo-rapido select{flex:1;min-width:0;margin:0;padding:.45rem .5rem;font-size:.88rem}
.cargo-rapido .cant{width:52px;margin:0;padding:.45rem;text-align:center}
.cargo-rapido .btn{margin:0;white-space:nowrap}

.pago-fila{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.pago-fila input,.pago-fila select{margin:0;padding:.45rem .55rem;font-size:.9rem}
.pago-fila input[name=monto]{width:110px}
.pago-fila .btn{margin:0}

/* Registros con avatar por línea */
.registros{list-style:none;margin:0;padding:0}
.registros li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;
              border-top:1px solid var(--linea)}
.registros li:first-child{border-top:0}
.avatar-mini{width:26px;height:26px;border-radius:50%;background:#e0e7ff;color:#3730a3;
             display:grid;place-items:center;font-size:.72rem;font-weight:600;flex-shrink:0}
.reg-info{flex:1;min-width:0}
.reg-info strong{display:block;font-weight:500;font-size:.9rem;
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-info small{color:var(--suave)}
.registros time{color:var(--suave);font-size:.78rem;white-space:nowrap}

/* Columna derecha */
.tarjeta-id,.tarjeta-der{background:#fff;border:1px solid var(--slate-100,#f1f5f9);border-radius:16px;padding:1.2rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.id-cab{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem}
.avatar{width:48px;height:48px;border-radius:50%;
        background:linear-gradient(135deg,var(--acento),var(--acento-2));
        color:#fff;display:grid;place-items:center;font-size:1.1rem;font-weight:600;flex-shrink:0}
.id-nombre{flex:1;min-width:0}
.id-nombre strong{display:block;font-size:1.05rem;font-weight:600}
.editar-lapiz{color:var(--suave);text-decoration:none;font-size:1.05rem}
.editar-lapiz:hover{color:var(--acento)}
.id-datos{display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;margin:0}
.id-datos dt{color:var(--suave);font-size:.85rem}
.id-datos dd{margin:0;font-size:.9rem;text-align:right;overflow:hidden;text-overflow:ellipsis}
.mostrar-mas{display:block;text-align:center;margin-top:.9rem;padding-top:.7rem;
             border-top:1px solid var(--linea);color:var(--acento);
             font-size:.85rem;text-decoration:none}

.tabla-der{width:100%;border-collapse:collapse}
.tabla-der th{text-align:left;font-size:.72rem;color:var(--suave);font-weight:500;
              text-transform:uppercase;letter-spacing:.03em;padding:.3rem .3rem}
.tabla-der td{padding:.4rem .3rem;border-top:1px solid var(--linea);font-size:.88rem}
.tabla-der .num{font-variant-numeric:tabular-nums}

.estado-vacio{text-align:center;padding:1.5rem 1rem;color:var(--suave)}
.icono-vacio{display:block;font-size:1.6rem;margin-bottom:.4rem;opacity:.5}
.estado-vacio p{margin:0;font-size:.9rem}

.previa-concepto{margin:0 0 .3rem;font-size:.9rem}
.previa-monto{margin:0 0 .3rem;font-size:1.5rem;font-weight:600;color:var(--acento);
              font-variant-numeric:tabular-nums}

.ticket-linea{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--linea)}
.ticket-linea:first-of-type{border-top:0}
.ticket-linea strong{display:block;font-size:.9rem;font-weight:500}
.ticket-linea small{color:var(--suave)}

@media (max-width:980px){
  .ficha-2col{grid-template-columns:1fr}
  .saldos-fila{grid-template-columns:1fr}
  .saldo-caja{border-right:0;border-bottom:1px solid var(--linea)}
  .saldo-caja:last-child{border-bottom:0}
}

/* Cuenta regresiva de la siguiente factura */
.cuenta-regresiva{line-height:1.5}
.reloj-regresivo{display:inline-block;margin-top:.3rem;padding:.2rem .5rem;
                 background:#e0e7ff;color:#3730a3;border-radius:6px;
                 font-weight:500;font-variant-numeric:tabular-nums;font-size:.82rem}
.reloj-regresivo.vencido{background:#fef3c7;color:#92600e}
.generar-ahora{margin-top:.7rem;width:100%}

/* ═══════════════════════════════════════════════════════════
   AJUSTES
   ═══════════════════════════════════════════════════════════ */
.folio-preview{margin:.8rem 0 0;padding:.6rem .8rem;background:#eef1f6;
               border-radius:8px;font-size:.95rem}
.folio-preview strong{font-family:monospace;color:var(--acento);font-size:1.05rem}
code{background:#eef1f6;padding:.05rem .3rem;border-radius:4px;font-size:.88em}

.con-sufijo{display:flex;align-items:center;gap:.4rem}
.con-sufijo input{margin:0}
.con-sufijo span{color:var(--suave);font-size:.9rem;white-space:nowrap}

/* Línea de tiempo de cobranza */
.linea-cobranza{display:flex;align-items:flex-start;margin:1rem 0 1.5rem;overflow-x:auto;padding-bottom:.3rem}
.linea-cobranza .hito{display:flex;flex-direction:column;align-items:center;gap:.35rem;
                      flex-shrink:0;text-align:center;min-width:64px}
.linea-cobranza .punto{width:14px;height:14px;border-radius:50%;border:2px solid #fff;
                       box-shadow:0 0 0 1px var(--linea)}
.linea-cobranza .punto.emite{background:var(--acento)}
.linea-cobranza .punto.vence{background:#d97706}
.linea-cobranza .punto.mora{background:#dc2626}
.linea-cobranza .punto.suspende{background:#1a2438}
.linea-cobranza .hito small{color:var(--suave);font-size:.75rem;line-height:1.2}
.linea-cobranza .tramo{flex:1;min-width:44px;display:flex;justify-content:center;
                       align-items:center;position:relative;height:14px;margin-top:0}
.linea-cobranza .tramo::before{content:"";position:absolute;left:0;right:0;top:50%;
                               height:2px;background:var(--linea)}
.dias-tramo{position:relative;background:var(--fondo);padding:0 .3rem;
            font-size:.72rem;color:var(--suave);white-space:nowrap;z-index:1}

/* Dar de baja un servicio desde la ficha */
.servicio-linea{position:relative}
.servicio-baja{flex-shrink:0}
.servicio-baja > summary{list-style:none;cursor:pointer;padding:.2rem .5rem;
                         border-radius:6px;color:var(--suave);font-weight:700;user-select:none}
.servicio-baja > summary::-webkit-details-marker{display:none}
.servicio-baja > summary:hover{background:#eef1f6;color:var(--tinta)}
.servicio-baja[open] > summary{background:#eef1f6}
.baja-panel{position:absolute;right:0;top:100%;z-index:20;margin-top:.3rem;
            width:260px;background:#fff;border:1px solid var(--linea);
            border-radius:10px;box-shadow:0 6px 20px rgba(26,36,56,.12);padding:.9rem}
.baja-panel label{display:block;font-size:.82rem;color:var(--suave);margin-bottom:.6rem}
.baja-panel input{width:100%;margin-top:.2rem;padding:.4rem .5rem;font-size:.9rem;
                  border:1px solid var(--linea);border-radius:6px}
.baja-panel .btn{width:100%;margin:.2rem 0 0}
.peligro-suave{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.peligro-suave:hover{background:#fee2e2}

/* ═══════════════════════════════════════════════════════════
   DETALLE DE SERVICIO
   ═══════════════════════════════════════════════════════════ */
.serv-cab{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.serv-cab h2{margin:0;font-size:1.2rem;font-weight:600;border:0;padding:0;flex:1}
.volver-flecha{color:var(--suave);text-decoration:none;font-size:1.2rem;
               width:30px;height:30px;display:grid;place-items:center;border-radius:6px}
.volver-flecha:hover{background:#eef1f6;color:var(--tinta)}

.serv-resumen{display:flex;justify-content:space-between;align-items:flex-end;
              padding-top:.8rem;border-top:1px solid var(--linea)}
.serv-vel{margin:.3rem 0 0;font-weight:500;font-size:1.05rem}
.serv-precio{text-align:right}
.serv-precio strong{display:block;font-size:1.5rem;font-weight:700;color:var(--acento);
                    font-variant-numeric:tabular-nums}
.serv-precio small{color:var(--suave)}

/* Lista de datos tipo dt/dd en dos columnas */
.datos-lista{display:grid;grid-template-columns:minmax(140px,40%) 1fr;
             gap:.55rem .9rem;margin:0}
.datos-lista dt{color:var(--suave);font-size:.88rem}
.datos-lista dd{margin:0;font-size:.9rem}
.datos-lista.compacto{grid-template-columns:auto 1fr;gap:.4rem .8rem}
.datos-lista.compacto dd{text-align:right}

/* Estado de red */
.red-estado{display:flex;align-items:center;gap:.7rem}
.red-punto{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
           color:#fff;font-weight:700;flex-shrink:0}
.red-punto.online{background:var(--ok)}
.red-punto.offline{background:var(--suave)}
.red-estado strong{display:block;font-weight:500}
.red-estado small{display:block;color:var(--suave);font-size:.82rem}

.ubic-texto{margin:0;font-size:.92rem}

.campo-baja{display:block;font-size:.82rem;color:var(--suave);margin-bottom:.6rem}
.campo-baja input{width:100%;margin-top:.2rem;padding:.4rem .5rem;font-size:.9rem;
                  border:1px solid var(--linea);border-radius:6px}

/* Sub-sección de configuración dentro de un formulario */
.sub-seccion{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--linea)}
.sub-seccion > .menudo{display:block;margin-bottom:.6rem;font-weight:500;color:var(--tinta)}
.btn.fantasma{background:#fff;color:var(--suave);border:1px solid var(--linea)}
.btn.fantasma:hover{background:#eef1f6;color:var(--tinta)}
.pastillas{display:flex;gap:.5rem}
.pastilla{flex:1;position:relative;border:1px solid var(--linea);border-radius:8px;
          padding:.5rem .8rem;text-align:center;cursor:pointer}
.pastilla input{position:absolute;opacity:0}
.pastilla:has(input:checked){border-color:var(--acento);background:#eef2ff;color:var(--acento);font-weight:500}

/* Confirmación de factura antes de crear */
.confirmar-factura{display:flex;flex-direction:column;gap:1rem;max-width:640px}
.confirmar-factura .tabla .total td{font-weight:600;border-top:2px solid var(--linea)}
.confirmar-factura input:disabled{background:#f4f6fb;color:var(--suave)}
.linea-cobranza .punto.crea{background:#8b96ac}

/* Botón a lo ancho del contenedor (evita style="width:100%" inline por CSP) */
.btn.ancho-total{width:100%;justify-content:center}

/* Campo en mayúsculas (evita style="text-transform" inline por CSP) */
.mayusculas{text-transform:uppercase}

.col-span-2{grid-column:span 2}
.monoespacio{font-family:monospace}

/* Acciones en fila (editar/eliminar producto y cargo) */
.acciones-fila{white-space:nowrap;text-align:right}
.acciones-fila .btn{padding:.2rem .45rem;margin-left:.15rem}
.en-linea{display:inline}
.peligro-suave{color:var(--peligro,#c0392b)}
.cargo-editar-form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.4rem 0}
.cargo-editar-form .ancho{flex:1;min-width:140px}
.cargo-editar-form .cant{width:80px}

/* ══ Red / NAPs ══════════════════════════════════════════════ */
/* Colores de fibra (código estándar) */
.fib{width:16px;height:16px;border-radius:50%;display:inline-block;vertical-align:middle;border:1px solid rgba(0,0,0,.08)}
.fib-azul{background:#2563eb}.fib-naranja{background:#f97316}.fib-verde{background:#16a34a}
.fib-cafe{background:#78350f}.fib-café{background:#78350f}.fib-gris{background:#64748b}
.fib-blanco{background:#f8fafc;border:1px solid #cbd5e1}.fib-rojo{background:#dc2626}
.fib-negro{background:#0f172a}.fib-amarillo{background:#eab308}.fib-violeta{background:#7c3aed}
.fib-rosa{background:#ec4899}.fib-aqua{background:#06b6d4}

/* Tarjetas de NAP en el listado */
.naps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.nap-card{background:#fff;border:1px solid var(--linea,#e2e8f0);border-radius:12px;padding:14px;text-decoration:none;color:inherit;display:block;transition:.15s}
.nap-card:hover{border-color:#2DD4E8;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.nap-card.inactiva{opacity:.5}
.nap-card .cab{display:flex;justify-content:space-between;align-items:start;margin-bottom:6px}
.nap-card .nom{font-weight:600}
.nap-card .meta{font-size:12px;color:var(--suave,#94a3b8);margin-bottom:10px}
.libre-badge{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.libre-ok{background:#dcfce7;color:#166534}.libre-medio{background:#fef3c7;color:#92400e}.libre-lleno{background:#fee2e2;color:#991b1b}
.mini-fila{display:flex;gap:3px;flex-wrap:wrap}
.mini-fila .fib{width:14px;height:14px}
.mini-fila .fib.ocupado{opacity:.28}

/* Wizard de puertos */
.puertos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.puerto-opt{display:block;cursor:pointer}
.puerto-opt input{position:absolute;opacity:0}
.puerto-caja{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:2px solid var(--linea,#e2e8f0);border-radius:10px;background:#fff;transition:.15s}
.puerto-opt:hover .puerto-caja{border-color:#2DD4E8}
.puerto-opt input:checked + .puerto-caja{border-color:#2DD4E8;box-shadow:0 0 0 3px rgba(45,212,232,.2)}
.puerto-opt.ocupado{cursor:not-allowed}
.puerto-opt.ocupado .puerto-caja{opacity:.5;background:#f8fafc}
.puerto-caja .fib{width:40px;height:40px}
.puerto-nom{font-size:12px;font-weight:600}
.puerto-est{font-size:11px;color:var(--suave,#94a3b8)}
.puerto-opt.ocupado .puerto-est{color:#c0392b}

/* Cadena de red en la ficha del cliente */
.red-cadena{background:var(--fondo,#f8fafc);border-radius:10px;padding:14px;font-size:14px;line-height:1.9}

/* Chips de rol y estado en usuarios */
.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px}
.chip-morado{background:#f3e8ff;color:#6b21a8}
.chip-azul{background:#dbeafe;color:#1e40af}
.chip-verde{background:#dcfce7;color:#166534}
.chip-ambar{background:#fef3c7;color:#92400e}
.fila-inactiva{opacity:.5}
.acciones-fila{text-align:right;white-space:nowrap}

/* Formulario de equipos: secciones estilo tarjeta */
.equipo-form fieldset legend i { color: var(--brand, #6366f1); margin-right: 6px; }
.campo-con-boton { display: flex; gap: 8px; align-items: stretch; }
.campo-con-boton input { flex: 1; }
.link-boton { background: none; border: none; color: var(--brand, #6366f1); cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }
.chk-tarjeta { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.chk-tarjeta:hover { border-color: var(--brand, #6366f1); }
.chk-tarjeta input { margin-top: 3px; }
.chk-tarjeta small { color: #64748b; }

/* ===== Formulario público de contratación ===== */
.contratar-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.contratar-wrap h1 { font-size: 28px; margin-bottom: 4px; }
.contratar-wrap .sub { color: #64748b; margin-bottom: 24px; }
.form-contratar .bloque-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.form-contratar .bloque-form h2 { font-size: 18px; margin-bottom: 14px; }
.form-contratar .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-contratar label { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; margin-top: 8px; }
.form-contratar input[type=text], .form-contratar input[type=tel], .form-contratar input[type=email] {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; box-sizing: border-box;
}
.form-contratar input[type=file] { width: 100%; padding: 10px; border: 2px dashed #cbd5e1; border-radius: 10px; box-sizing: border-box; }
.tec-titulo { font-size: 14px; color: #0ea5e9; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.planes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.plan-card { display: flex; flex-direction: column; gap: 4px; border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px; cursor: pointer; position: relative; margin-top: 0; }
.plan-card:hover { border-color: #93c5fd; }
.plan-card.plan-sel { border-color: #2563eb; background: #eff6ff; }
.plan-card input { position: absolute; top: 10px; right: 10px; }
.plan-nombre { font-weight: 600; font-size: 15px; }
.plan-vel { font-size: 13px; color: #64748b; }
.plan-precio { font-size: 22px; font-weight: 700; color: #0f172a; }
.plan-precio small { font-size: 12px; font-weight: 400; color: #94a3b8; }
.label-ine { font-weight: 600; }
.btn-contratar { width: 100%; padding: 16px; background: #2563eb; color: #fff; border: none; border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; }
.btn-contratar:hover { background: #1d4ed8; }
.error-campo { color: #dc2626; font-size: 12px; display: block; margin-top: 3px; }
/* Gracias */
.gracias-wrap { max-width: 480px; margin: 60px auto; text-align: center; padding: 0 16px; }
.gracias-check { width: 72px; height: 72px; line-height: 72px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 40px; margin: 0 auto 20px; }
.codigo-grande { font-size: 28px; font-weight: 700; color: #2563eb; letter-spacing: .05em; margin: 12px 0; }
.btn-volver { display: inline-block; margin-top: 20px; padding: 12px 24px; background: #f1f5f9; border-radius: 10px; color: #0f172a; text-decoration: none; }
@media (max-width: 560px) { .form-contratar .grid-2 { grid-template-columns: 1fr; } }
.campo-fijo { background: #f1f5f9 !important; color: #64748b; cursor: not-allowed; }
.form-contratar select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; box-sizing: border-box; background: #fff; }

/* Enlace del plan en la lista de servicios del cliente */
.serv-plan-link { color: #4f46e5; font-weight: 600; text-decoration: none; }
.serv-plan-link:hover { text-decoration: underline; color: #4338ca; }

/* Zona de red (maq) en la ficha del cliente — reemplaza estilos inline (CSP) */
.zona-maq { margin-top: 10px; }
.zm-label { font-size: 13px; color: #64748b; display: block; margin-bottom: 4px; }
.zm-fila { display: flex; gap: 6px; }
.zm-select { flex: 1; padding: 7px; border: 1px solid #e2e8f0; border-radius: 8px; }
.zm-mt8 { margin-top: 8px; }
.zm-aviso { margin-top: 8px; color: #d97706; }
.acciones-red { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.red-cadena.zm-mb8 { margin-bottom: 8px; }

/* ══════════ Formulario de NAP (pestañas, chips, lote) ══════════ */
.nap-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
.nap-tab { padding: 10px 18px; font-size: 14px; font-weight: 600; color: #94a3b8; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.nap-tab:hover { color: #64748b; }
.nap-tab.activa { color: #4f46e5; border-color: #4f46e5; }
.nap-panel.cl-oculta { display: none; }

.nap-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nap-chip { padding: 4px 10px; font-size: 12px; font-weight: 600; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.nap-chip:hover { border-color: #cbd5e1; background: #f1f5f9; }
.nap-chip.activo { color: #4f46e5; background: #eef2ff; border-color: #6366f1; }

.napb-preview { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #475569; min-height: 20px; word-break: break-all; }
.req { color: #dc2626; }

/* ══════════ Identidad alCubo: Space Grotesk en títulos + acento cian ══════════ */
h1, h2, h3, .marca, .bloque-cab h2, .al-header-title h1, .al-card-head h2 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
/* Marca del sidebar con el cian de señal */
.lateral .marca { color: #fff; }
.lateral .marca strong, .lateral .marca b { color: var(--signal); }

/* ══════════ Lista de colonias en Ajustes ══════════ */
.col-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.col-fila { display: flex; gap: 8px; align-items: center; }
.col-codigo { width: 80px; text-transform: uppercase; }
.col-nombre { flex: 1; }
.col-quitar { background: none; border: 1px solid #e2e8f0; color: #cbd5e1; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; flex-shrink: 0; }
.col-quitar:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* NAPs inactivas: atenuadas pero visibles (como el sistema viejo) */
.nap-card.nap-inactiva { opacity: .6; background: #fafafa; }
.nap-card.nap-inactiva:hover { opacity: 1; }
.nap-badge-inactiva { background: #f1f5f9; color: #94a3b8; }

/* ══════════ Lista de NAPs (diseño agrupado, como el viejo) ══════════ */
/* Estadísticas */
.nap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.nap-stat { background: #fff; border: 1px solid var(--slate-100,#f1f5f9); border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.nap-stat-num { font-size: 24px; font-weight: 800; color: var(--slate-700,#334155); font-family: 'Space Grotesk','Inter',sans-serif; }
.nap-stat-total { color: var(--acento,#0891b2); }
.nap-stat-ok { color: #16a34a; }
.nap-stat-blue { color: #2563eb; }
.nap-stat-lbl { font-size: 12px; color: var(--slate-500,#64748b); margin-top: 4px; }

/* Grupo por colonia */
.nap-grupo { margin-bottom: 28px; }
.nap-grupo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nap-grupo-cod { font-size: 18px; font-weight: 800; color: var(--acento,#0891b2); background: rgba(45,212,232,.08); border: 1px solid rgba(45,212,232,.25); border-radius: 12px; padding: 4px 12px; font-family: 'Space Grotesk','Inter',sans-serif; }
.nap-grupo-nom { font-weight: 700; color: var(--slate-700,#334155); font-size: 14px; }
.nap-grupo-linea { flex: 1; height: 1px; background: var(--slate-100,#f1f5f9); }

.nap-linea-grupo { margin-bottom: 12px; }
.nap-linea-lbl { font-size: 12px; font-weight: 700; color: var(--slate-500,#64748b); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.nap-mza-lbl { font-size: 12px; color: var(--slate-400,#94a3b8); margin: 8px 0 6px; }

/* Tarjetas de NAP */
.nap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.nap-card2 { background: #fff; border: 1px solid var(--slate-100,#f1f5f9); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.nap-card2.nap-inactiva { opacity: .6; }
.nap-card2.nap-inactiva:hover { opacity: 1; }
.nap-card2-cab { padding: 14px 16px 10px; border-bottom: 1px solid var(--slate-50,#f8fafc); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nap-card2-nom { font-size: 15px; font-weight: 700; color: var(--slate-800,#1e293b); display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk','Inter',sans-serif; }
.nap-card2-ubic { font-size: 12px; color: var(--slate-400,#94a3b8); margin-top: 2px; }
.nap-card2-editar { font-size: 13px; color: var(--acento,#0891b2); font-weight: 600; text-decoration: none; padding: 4px 10px; border-radius: 8px; }
.nap-card2-editar:hover { background: rgba(45,212,232,.08); text-decoration: none; }
.nap-card2-body { padding: 12px 16px 14px; }
.nap-card2-uso { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-500,#64748b); margin-bottom: 6px; }
.nap-badge-inactiva { font-size: 11px; background: #f1f5f9; color: #94a3b8; padding: 2px 8px; border-radius: 9999px; font-weight: 500; }

/* Barra de ocupación */
.nap-barra { height: 8px; background: var(--slate-100,#f1f5f9); border-radius: 9999px; overflow: hidden; }
.nap-barra-fill { height: 100%; border-radius: 9999px; width: 0; transition: width .3s; }
.nap-barra-baja { background: #4ade80; }
.nap-barra-media { background: #fbbf24; }
.nap-barra-alta { background: #f87171; }

/* Puertos de colores */
.nap-puertos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
/* Anchos de barra (CSP: sin style inline) */
.nap-w-0 { width: 0%; }
.nap-w-5 { width: 5%; }
.nap-w-10 { width: 10%; }
.nap-w-15 { width: 15%; }
.nap-w-20 { width: 20%; }
.nap-w-25 { width: 25%; }
.nap-w-30 { width: 30%; }
.nap-w-35 { width: 35%; }
.nap-w-40 { width: 40%; }
.nap-w-45 { width: 45%; }
.nap-w-50 { width: 50%; }
.nap-w-55 { width: 55%; }
.nap-w-60 { width: 60%; }
.nap-w-65 { width: 65%; }
.nap-w-70 { width: 70%; }
.nap-w-75 { width: 75%; }
.nap-w-80 { width: 80%; }
.nap-w-85 { width: 85%; }
.nap-w-90 { width: 90%; }
.nap-w-95 { width: 95%; }
.nap-w-100 { width: 100%; }

/* ══════════ Modal de edición de NAP ══════════ */
.nap-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.nap-modal.cl-oculta { display: none; }
.nap-modal-fondo { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.nap-modal-caja { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.nap-modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--slate-100,#f1f5f9); }
.nap-modal-cab h2 { font-size: 17px; font-weight: 700; font-family: 'Space Grotesk','Inter',sans-serif; }
.nap-modal-x { background: none; border: none; font-size: 18px; color: #94a3b8; cursor: pointer; line-height: 1; }
.nap-modal-x:hover { color: #334155; }
.nap-modal-cuerpo { padding: 16px 20px; }
.nap-modal-cuerpo label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-600,#475569); margin: 12px 0 4px; }
.nap-modal-cuerpo label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.nap-modal-cuerpo input[type="text"], .nap-modal-cuerpo select, .nap-modal-cuerpo textarea { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; }
.nap-modal-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.nap-modal-error.cl-oculta { display: none; }
.nap-modal-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--slate-100,#f1f5f9); }

/* ══════════ Portal del Cliente — pantalla de acceso (como el viejo) ══════════ */
.acc-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:20px}
.acc-caja{width:100%;max-width:380px}
.acc-cab{text-align:center;margin-bottom:28px}
.acc-icono{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;
  background:linear-gradient(135deg,#3b82f6,#4f46e5);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px}
.acc-titulo{font-size:24px;font-weight:800;color:#1e293b;margin:0}
.acc-sub{color:#64748b;margin-top:4px;font-size:15px}
.acc-card{background:#fff;border-radius:16px;box-shadow:0 20px 40px rgba(2,6,23,.1);padding:24px;
  display:flex;flex-direction:column;gap:16px}
.acc-form{display:flex;flex-direction:column;gap:16px}
.acc-campo{display:flex;flex-direction:column;gap:8px}
.acc-campo label{font-size:14px;font-weight:600;color:#334155}
.acc-campo input{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:0 16px;height:48px;
  font-size:15px;font-family:inherit;text-align:center}
.acc-campo input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.acc-input-ojo{position:relative}
.acc-input-ojo input{padding-right:44px}
.acc-ojo{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:#94a3b8;cursor:pointer;font-size:16px;display:flex;align-items:center}
.acc-ojo:hover{color:#64748b}
.acc-btn{width:100%;height:48px;background:#2563eb;color:#fff;font-weight:600;font-size:15px;
  border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.acc-btn:hover{background:#1d4ed8}
.acc-link{display:block;text-align:center;font-size:14px;color:#2563eb;text-decoration:none}
.acc-link:hover{text-decoration:underline}
.acc-error{display:flex;align-items:center;gap:6px;background:#fef2f2;color:#dc2626;
  border:1px solid #fecaca;border-radius:12px;padding:10px 14px;font-size:14px}
.acc-aviso{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;border-radius:12px;
  padding:10px 14px;font-size:14px}

/* ══════════ Totales por período y descuento (formulario de plan) ══════════ */
.periodo-totales{margin-top:12px;background:#f8fafc;border:1px solid #f1f5f9;border-radius:12px;padding:12px 14px}
.periodo-totales:empty{display:none}
.pt-titulo{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.pt-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:14px}
.pt-nombre{color:#475569;font-weight:600}
.pt-monto{color:#1e293b;text-align:right}
.pt-monto strong{color:var(--acento,#0891b2)}
.pt-desc{font-size:13px;color:#64748b}
.pt-desc strong{color:#16a34a}
.par-descuento{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-top:14px}
@media (max-width:640px){.par-descuento{grid-template-columns:1fr}}

/* Descuento anual en la tarjeta de plan (gestión) */
.plan-descuento{margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0;font-size:13px;line-height:1.5}
.plan-descuento .pd-anual{display:block;color:#475569}
.plan-descuento .pd-anual s{color:#94a3b8}
.plan-descuento .pd-anual strong{color:#16a34a;font-size:15px}
.plan-descuento .pd-ahorro{display:block;color:#0891b2;font-size:12px;font-weight:600;margin-top:2px}

/* ══════════ Ajustes SPEI (vista previa) ══════════ */
.spei-preview-box legend i{color:var(--acento,#0891b2)}
.spei-preview{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;max-width:420px}
.spei-more{width:100%;border-collapse:collapse;font-size:13px}
.spei-more th{text-align:left;color:#64748b;text-transform:uppercase;font-size:11px;letter-spacing:.4px;padding:4px 12px 4px 0;font-weight:600;white-space:nowrap;vertical-align:top}
.spei-more td{text-align:right;color:#1e293b;font-weight:600;padding:4px 0;word-break:break-all}
/* Acciones en el encabezado de la factura */
.encabezado-acciones{display:flex;align-items:center;gap:16px}
.cl-empresa{font-size:12px;color:#64748b;margin-top:1px}

/* ═══════ Mejoras de espaciado del formulario de cliente ═══════ */
/* Más aire entre las dos columnas y dentro de cada una */
.tarjeta-alta{padding:2rem 2.2rem}
.columnas-alta{gap:3rem}
.columnas-alta .col > h2{margin-bottom:1.2rem}
.columnas-alta .col > h2.sep{margin-top:2rem}

/* Inputs y selects: ocupan todo el ancho, altura cómoda, no se cortan */
.tarjeta-alta input[type="text"],
.tarjeta-alta input[type="email"],
.tarjeta-alta input[type="tel"],
.tarjeta-alta input[type="number"],
.tarjeta-alta input[type="date"],
.tarjeta-alta select,
.cuerpo-plegable input[type="text"],
.cuerpo-plegable input[type="email"],
.cuerpo-plegable input[type="tel"],
.cuerpo-plegable select{
  width:100%;
  box-sizing:border-box;
  padding:.6rem .75rem;
  min-width:0;
}

/* Más separación vertical entre campos */
.tarjeta-alta label{display:block;margin-bottom:.35rem;margin-top:1rem;font-size:.85rem;color:#475569}
.tarjeta-alta .col > .opciones-linea + div label:first-child,
.tarjeta-alta label:first-child{margin-top:0}

/* Grids con más separación para que no se apretujen */
.par{gap:1rem 1.1rem}
.par-tres{gap:1rem}
.par-desigual{gap:1rem}

/* Los grupos de campos dentro de una columna, con aire entre ellos */
.columnas-alta .col > div{margin-bottom:.2rem}

/* La ayuda debajo de un campo, con su espacio */
.tarjeta-alta .ayuda{display:block;margin-top:.35rem;font-size:.8rem;color:#94a3b8;line-height:1.4}

/* Domicilio en la cabecera de la ficha del cliente */
.ficha-domicilio{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:.35rem 0 0;color:#64748b}
.ficha-domicilio .fi{color:#6366f1;width:14px;height:14px}
.ficha-ref-cod{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;font-weight:600;color:#4338ca;background:#eef2ff;padding:.1rem .4rem;border-radius:.4rem;letter-spacing:.3px}

/* Logo en el login del portal (fondo claro → logo negro) */
.acc-icono-logo{width:auto;height:auto;background:none;border-radius:0}
.acc-logo-img{height:40px;width:auto;display:block}

/* Lista de registros del resumen (filas legibles con ícono) */
.reg-lista{list-style:none;margin:0;padding:0}
.reg-fila{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.reg-fila:last-child{border-bottom:0}
.reg-ico{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#eff6ff}
.reg-ico i{width:15px;height:15px;background-color:#2563eb;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;display:block}
.reg-ico-trash,.reg-ico-x-circle,.reg-ico-user-x{background:#fef2f2}
.reg-ico-trash i,.reg-ico-x-circle i,.reg-ico-user-x i{background-color:#dc2626}
.reg-ico-money,.reg-ico-user-check,.reg-ico-user-add,.reg-ico-file-invoice{background:#dcfce7}
.reg-ico-money i,.reg-ico-user-check i,.reg-ico-user-add i,.reg-ico-file-invoice i{background-color:#16a34a}
.reg-ico-tool,.reg-ico-calendar{background:#fef3c7}
.reg-ico-tool i,.reg-ico-calendar i{background-color:#b45309}
.reg-fila .reg-info{min-width:0;flex:1}
.reg-fila .reg-info strong{display:block;font-size:14px;color:#1e293b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg-fila .reg-info small{font-size:12px;color:#94a3b8}
.reg-fila time{font-size:12px;color:#94a3b8;white-space:nowrap;flex-shrink:0}
.bi-user-add{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNMTYgMTloNiIvPjxwYXRoIGQ9Ik0xOSAxNnY2Ii8+PHBhdGggZD0iTTYgMjF2LTJhNCA0IDAgMCAxIDQgLTRoNCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNMTYgMTloNiIvPjxwYXRoIGQ9Ik0xOSAxNnY2Ii8+PHBhdGggZD0iTTYgMjF2LTJhNCA0IDAgMCAxIDQgLTRoNCIvPjwvc3ZnPg==")}
.bi-edit{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyA3aC0xYTIgMiAwIDAgMCAtMiAydjlhMiAyIDAgMCAwIDIgMmg5YTIgMiAwIDAgMCAyIC0ydi0xIi8+PHBhdGggZD0iTTIwLjM4NSA2LjU4NWEyLjEgMi4xIDAgMCAwIC0yLjk3IC0yLjk3bC04LjQxNSA4LjM4NXYzaDNsOC4zODUgLTguNDE1eiIvPjxwYXRoIGQ9Ik0xNiA1bDMgMyIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyA3aC0xYTIgMiAwIDAgMCAtMiAydjlhMiAyIDAgMCAwIDIgMmg5YTIgMiAwIDAgMCAyIC0ydi0xIi8+PHBhdGggZD0iTTIwLjM4NSA2LjU4NWEyLjEgMi4xIDAgMCAwIC0yLjk3IC0yLjk3bC04LjQxNSA4LjM4NXYzaDNsOC4zODUgLTguNDE1eiIvPjxwYXRoIGQ9Ik0xNiA1bDMgMyIvPjwvc3ZnPg==")}
.bi-box{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM2w4IDQuNXY5bC04IDQuNWwtOCAtNC41di05bDggLTQuNSIvPjxwYXRoIGQ9Ik0xMiAxMmw4IC00LjUiLz48cGF0aCBkPSJNMTIgMTJ2OSIvPjxwYXRoIGQ9Ik0xMiAxMmwtOCAtNC41Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM2w4IDQuNXY5bC04IDQuNWwtOCAtNC41di05bDggLTQuNSIvPjxwYXRoIGQ9Ik0xMiAxMmw4IC00LjUiLz48cGF0aCBkPSJNMTIgMTJ2OSIvPjxwYXRoIGQ9Ik0xMiAxMmwtOCAtNC41Ii8+PC9zdmc+")}
.bi-refresh{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTFhOC4xIDguMSAwIDAgMCAtMTUuNSAtMm0tLjUgLTR2NGg0Ii8+PHBhdGggZD0iTTQgMTNhOC4xIDguMSAwIDAgMCAxNS41IDJtLjUgNHYtNGgtNCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTFhOC4xIDguMSAwIDAgMCAtMTUuNSAtMm0tLjUgLTR2NGg0Ii8+PHBhdGggZD0iTTQgMTNhOC4xIDguMSAwIDAgMCAxNS41IDJtLjUgNHYtNGgtNCIvPjwvc3ZnPg==")}
.bi-trash{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA3bDE2IDAiLz48cGF0aCBkPSJNMTAgMTFsMCA2Ii8+PHBhdGggZD0iTTE0IDExbDAgNiIvPjxwYXRoIGQ9Ik01IDdsMSAxMmEyIDIgMCAwIDAgMiAyaDhhMiAyIDAgMCAwIDIgLTJsMSAtMTIiLz48cGF0aCBkPSJNOSA3di0zYTEgMSAwIDAgMSAxIC0xaDRhMSAxIDAgMCAxIDEgMXYzIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA3bDE2IDAiLz48cGF0aCBkPSJNMTAgMTFsMCA2Ii8+PHBhdGggZD0iTTE0IDExbDAgNiIvPjxwYXRoIGQ9Ik01IDdsMSAxMmEyIDIgMCAwIDAgMiAyaDhhMiAyIDAgMCAwIDIgLTJsMSAtMTIiLz48cGF0aCBkPSJNOSA3di0zYTEgMSAwIDAgMSAxIC0xaDRhMSAxIDAgMCAxIDEgMXYzIi8+PC9zdmc+")}
.bi-key{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTYuNTU1IDMuODQzbDMuNjAyIDMuNjAyYTIuODc3IDIuODc3IDAgMCAxIDAgNC4wNjlsLTIuNjQzIDIuNjQzYTIuODc3IDIuODc3IDAgMCAxIC00LjA2OSAwbC0uMzAxIC0uMzAxbC02LjU1OCA2LjU1OGEyIDIgMCAwIDEgLTEuMjM5IC41NzhsLS4xNzUgLjAwOGgtMS45NzdhMSAxIDAgMCAxIC0uOTkzIC0uODgzbC0uMDA3IC0uMTE3di0xLjk3N2EyIDIgMCAwIDEgLjQ2NyAtMS4yODRsLjExOSAtLjEzbC40MTQgLS40MTRoMnYtMmgydi0ybDIuMTQ0IC0yLjE0NGwtLjMwMSAtLjMwMWEyLjg3NyAyLjg3NyAwIDAgMSAwIC00LjA2OWwyLjY0MyAtMi42NDNhMi44NzcgMi44NzcgMCAwIDEgNC4wNjkgMHoiLz48cGF0aCBkPSJNMTUgOWguMDEiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTYuNTU1IDMuODQzbDMuNjAyIDMuNjAyYTIuODc3IDIuODc3IDAgMCAxIDAgNC4wNjlsLTIuNjQzIDIuNjQzYTIuODc3IDIuODc3IDAgMCAxIC00LjA2OSAwbC0uMzAxIC0uMzAxbC02LjU1OCA2LjU1OGEyIDIgMCAwIDEgLTEuMjM5IC41NzhsLS4xNzUgLjAwOGgtMS45NzdhMSAxIDAgMCAxIC0uOTkzIC0uODgzbC0uMDA3IC0uMTE3di0xLjk3N2EyIDIgMCAwIDEgLjQ2NyAtMS4yODRsLjExOSAtLjEzbC40MTQgLS40MTRoMnYtMmgydi0ybDIuMTQ0IC0yLjE0NGwtLjMwMSAtLjMwMWEyLjg3NyAyLjg3NyAwIDAgMSAwIC00LjA2OWwyLjY0MyAtMi42NDNhMi44NzcgMi44NzcgMCAwIDEgNC4wNjkgMHoiLz48cGF0aCBkPSJNMTUgOWguMDEiLz48L3N2Zz4=")}
.bi-lock{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxM2EyIDIgMCAwIDEgMiAtMmgxMGEyIDIgMCAwIDEgMiAydjZhMiAyIDAgMCAxIC0yIDJoLTEwYTIgMiAwIDAgMSAtMiAtMnoiLz48cGF0aCBkPSJNMTEgMTZhMSAxIDAgMSAwIDIgMGExIDEgMCAwIDAgLTIgMCIvPjxwYXRoIGQ9Ik04IDExdi00YTQgNCAwIDEgMSA4IDB2NCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxM2EyIDIgMCAwIDEgMiAtMmgxMGEyIDIgMCAwIDEgMiAydjZhMiAyIDAgMCAxIC0yIDJoLTEwYTIgMiAwIDAgMSAtMiAtMnoiLz48cGF0aCBkPSJNMTEgMTZhMSAxIDAgMSAwIDIgMGExIDEgMCAwIDAgLTIgMCIvPjxwYXRoIGQ9Ik04IDExdi00YTQgNCAwIDEgMSA4IDB2NCIvPjwvc3ZnPg==")}
.bi-user-check{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0Ii8+PHBhdGggZD0iTTE1IDE5bDIgMmw0IC00Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0Ii8+PHBhdGggZD0iTTE1IDE5bDIgMmw0IC00Ii8+PC9zdmc+")}
.bi-user-x{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0Ii8+PHBhdGggZD0iTTIyIDIybC01IC01Ii8+PHBhdGggZD0iTTE3IDIybDUgLTUiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3YTQgNCAwIDEgMCA4IDBhNCA0IDAgMCAwIC04IDAiLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0Ii8+PHBhdGggZD0iTTIyIDIybC01IC01Ii8+PHBhdGggZD0iTTE3IDIybDUgLTUiLz48L3N2Zz4=")}
.bi-tool{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAxMGgzdi0zbC0zLjUgLTMuNWE2IDYgMCAwIDEgOCA4bDYgNmEyIDIgMCAwIDEgLTMgM2wtNiAtNmE2IDYgMCAwIDEgLTggLThsMy41IDMuNSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAxMGgzdi0zbC0zLjUgLTMuNWE2IDYgMCAwIDEgOCA4bDYgNmEyIDIgMCAwIDEgLTMgM2wtNiAtNmE2IDYgMCAwIDEgLTggLThsMy41IDMuNSIvPjwvc3ZnPg==")}
.bi-file{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM3Y0YTEgMSAwIDAgMCAxIDFoNCIvPjxwYXRoIGQ9Ik0xNyAyMWgtMTBhMiAyIDAgMCAxIC0yIC0ydi0xNGEyIDIgMCAwIDEgMiAtMmg3bDUgNXYxMWEyIDIgMCAwIDEgLTIgMnoiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM3Y0YTEgMSAwIDAgMCAxIDFoNCIvPjxwYXRoIGQ9Ik0xNyAyMWgtMTBhMiAyIDAgMCAxIC0yIC0ydi0xNGEyIDIgMCAwIDEgMiAtMmg3bDUgNXYxMWEyIDIgMCAwIDEgLTIgMnoiLz48L3N2Zz4=")}
.bi-file-invoice{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM3Y0YTEgMSAwIDAgMCAxIDFoNCIvPjxwYXRoIGQ9Ik01IDh2LTNhMiAyIDAgMCAxIDIgLTJoN2w1IDV2MTFhMiAyIDAgMCAxIC0yIDJoLTMiLz48cGF0aCBkPSJNNiAxNGgzdjZoLTN6Ii8+PHBhdGggZD0iTTkgMTdoMyIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM3Y0YTEgMSAwIDAgMCAxIDFoNCIvPjxwYXRoIGQ9Ik01IDh2LTNhMiAyIDAgMCAxIDIgLTJoN2w1IDV2MTFhMiAyIDAgMCAxIC0yIDJoLTMiLz48cGF0aCBkPSJNNiAxNGgzdjZoLTN6Ii8+PHBhdGggZD0iTTkgMTdoMyIvPjwvc3ZnPg==")}
.bi-x-circle{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMmE5IDkgMCAxIDAgMTggMGE5IDkgMCAwIDAgLTE4IDAiLz48cGF0aCBkPSJNMTAgMTBsNCA0bTAgLTRsLTQgNCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMmE5IDkgMCAxIDAgMTggMGE5IDkgMCAwIDAgLTE4IDAiLz48cGF0aCBkPSJNMTAgMTBsNCA0bTAgLTRsLTQgNCIvPjwvc3ZnPg==")}
.bi-calendar{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA3YTIgMiAwIDAgMSAyIC0yaDEyYTIgMiAwIDAgMSAyIDJ2MTJhMiAyIDAgMCAxIC0yIDJoLTEyYTIgMiAwIDAgMSAtMiAtMnYtMTJ6Ii8+PHBhdGggZD0iTTE2IDN2NCIvPjxwYXRoIGQ9Ik04IDN2NCIvPjxwYXRoIGQ9Ik00IDExaDE2Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA3YTIgMiAwIDAgMSAyIC0yaDEyYTIgMiAwIDAgMSAyIDJ2MTJhMiAyIDAgMCAxIC0yIDJoLTEyYTIgMiAwIDAgMSAtMiAtMnYtMTJ6Ii8+PHBhdGggZD0iTTE2IDN2NCIvPjxwYXRoIGQ9Ik04IDN2NCIvPjxwYXRoIGQ9Ik00IDExaDE2Ii8+PC9zdmc+")}
.bi-money{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM2EzIDMgMCAwIDEgMyAzdjEyYTMgMyAwIDAgMSAtNiAwdi0xMmEzIDMgMCAwIDEgMyAtM3oiLz48cGF0aCBkPSJNMTIgOW0tOCAwYTggMyAwIDEgMCAxNiAwYTggMyAwIDEgMCAtMTYgMCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM2EzIDMgMCAwIDEgMyAzdjEyYTMgMyAwIDAgMSAtNiAwdi0xMmEzIDMgMCAwIDEgMyAtM3oiLz48cGF0aCBkPSJNMTIgOW0tOCAwYTggMyAwIDEgMCAxNiAwYTggMyAwIDEgMCAtMTYgMCIvPjwvc3ZnPg==")}
.bi-dot{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMTJtLTQgMGE0IDQgMCAxIDAgOCAwYTQgNCAwIDEgMCAtOCAwIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMTJtLTQgMGE0IDQgMCAxIDAgOCAwYTQgNCAwIDEgMCAtOCAwIi8+PC9zdmc+")}

/* Consumo NetFlow en la ficha del cliente */
.nf-a-cifras{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 10px}
.nf-a-cifras>div{display:flex;flex-direction:column}
.nf-a-k{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.03em}
.nf-a-v{font-size:18px;font-weight:800;color:#1e293b}
.nf-a-tot{color:#0f766e}

/* Cuadrito de instalaciones con enlace al historico */
.kpi-inst{position:relative}
.kpi-link{position:absolute;top:.6rem;right:.7rem;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f1f5f9;color:#475569;font-size:20px;font-weight:700;text-decoration:none;line-height:1;transition:all .15s}
.kpi-link:hover{background:#4f46e5;color:#fff}

/* Historico de instalaciones */
.hist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.hist-volver{color:#4f46e5;text-decoration:none;font-weight:600;font-size:14px}
.hist-mes{margin-bottom:24px}
.hist-mes-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--linea)}
.hist-mes-cab h2{margin:0}
.hist-total{font-weight:700;color:#16a34a;font-size:15px}