/* =====================================================================
   Nuvia · lo propio de Nuvia ENCIMA del sistema de diseño.

   EL SISTEMA ES `css/diseno/diseno.css`: colores, letra (IBM Plex, cifras
   tabulares), tamaños, radios y los componentes compartidos con ALGI e
   Intranet —barra lateral de 216 px, cabecera de 48, título con UNA acción
   en oro, cifras sin caja, tabla de trabajo, chips, nota morada, toast—. Es
   una COPIA SELLADA de `ALGI SUITE/diseno` (ver su SELLO.json): no se edita
   aquí, se edita allí y se publica.

   AQUÍ NO HAY NI UN COLOR, NI UN TAMAÑO DE LETRA, NI UN RADIO escrito: todo es
   var(--…) del sistema. Lo comprueba `tests/test_cartera.py`
   (TestEstilosDelSistema). Lo que hay es lo que solo tiene Nuvia: el editor
   de líneas, los diálogos, la pantalla de acceso, la factura como papel y el
   gráfico del cuadro de mando. Rehecho el 18/10/2026 («la vuelta al
   formato»); la hoja anterior tenía 83 colores, 55 tamaños y 24 radios
   escritos a mano.
   ===================================================================== */

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
/* LOS NOMBRES DE ANTES, COMO ALIAS DEL SISTEMA: el JavaScript de Nuvia los
   usa en estilos sueltos (`color:var(--texto-suave)`). Ningún valor: cada uno
   apunta a su token. */
:root{--texto-suave:var(--c-texto-2);--texto-tenue:var(--c-texto-3);--borde:var(--c-linea);
  --verde:var(--c-verde);--rojo:var(--c-rojo);--ambar:var(--c-ambar);--marca:var(--c-navy);
  --acento:var(--c-navy);--panel:var(--c-papel)}
body{overflow:hidden}
#contenido{min-height:0}

/* ---------- la cabecera de 48 px: buscador y miga ---------- */
.cab .buscar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--t-chico);color:var(--c-texto);outline:none}
.nav .empresa{padding:0 10px 14px}
.nav .empresa label{display:block;font-size:var(--t-micro);letter-spacing:1.4px;text-transform:uppercase;color:var(--c-barra-grupo);margin-bottom:6px}
.nav .empresa select{width:100%;height:30px;background:var(--c-activo);color:var(--c-papel);border:0;border-radius:var(--r-control);padding:0 var(--a-s);font-size:var(--t-chico);cursor:pointer}

/* ---------- botones: el sistema, con los nombres de Nuvia ---------- */
.btn.primario{background:var(--c-oro);border-color:var(--c-oro);color:var(--c-boton-oro-texto);font-weight:var(--p-fuerte)}
.btn.mini{height:26px;padding:0 10px;font-size:var(--t-pie)}
.btn svg{width:15px;height:15px}
.btn.peligro:hover{background:var(--c-rojo-suave)}
.btn.ancho{width:100%;margin-top:6px}

/* ---------- cajas SOLO cuando agrupan algo que se hace junto ---------- */
.tarjeta{background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r)}
/* Una tabla no necesita caja: va sobre el fondo, como en la maqueta. */
.tarjeta:has(> table){background:transparent;border:0;border-radius:0}
.tarjeta-cab{padding:14px 18px;border-bottom:1px solid var(--c-linea-suave);display:flex;align-items:center;justify-content:space-between;gap:var(--a-s)}
.tarjeta:has(> table) > .tarjeta-cab{padding:0 0 10px;border:0}
.tarjeta-cab h3{font-size:var(--t-h2);font-weight:var(--p-fuerte)}
.tarjeta-cuerpo{padding:18px}

.rejilla{display:grid;gap:var(--a-m)}
.rejilla.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.rejilla.c4,.rejilla.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* LOS KPI SON LA FILA DE CIFRAS DEL SISTEMA: cifra grande y rótulo, sin caja. */
.kpi{padding:4px 0 var(--a-s)}
.kpi .etq{font-size:var(--t-nota);color:var(--c-texto-2)}
.kpi .val{font-size:var(--t-cifra);font-weight:var(--p-medio);line-height:1.1;margin-top:2px}
.kpi .pie{font-size:var(--t-pie);color:var(--c-texto-2);margin-top:4px}
.kpi.ok .val{color:var(--c-verde)} .kpi.alerta .val{color:var(--c-rojo)} .kpi.atencion .val{color:var(--c-oro-texto)}
.rejilla:has(> .kpi){gap:40px;padding-bottom:var(--a-m);border-bottom:1px solid var(--c-linea)}

/* ---------- la tabla de trabajo ---------- */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:var(--t-etiqueta);text-transform:uppercase;letter-spacing:.6px;color:var(--c-texto-3);font-weight:var(--p-medio);padding:0 10px 8px;border-bottom:1px solid var(--c-linea);position:sticky;top:0;z-index:1;background:var(--c-fondo);white-space:nowrap}
.tarjeta:not(:has(> table)) thead th{background:var(--c-papel)}
tbody td{padding:0 10px;height:var(--m-fila);border-bottom:1px solid var(--c-linea-suave);font-size:var(--t-base);vertical-align:middle}
tbody tr:hover td{background:var(--c-papel)}
tbody tr.clicable{cursor:pointer}
.der{text-align:right} .cen{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.vacio{padding:44px;text-align:center;color:var(--c-texto-2)}
.vacio svg{width:38px;height:38px;opacity:.35;margin-bottom:10px}

/* LAS ETIQUETAS SON LOS CHIPS DEL SISTEMA */
.etiqueta{display:inline-flex;align-items:center;gap:5px;padding:2px var(--a-s);border-radius:var(--r-pastilla);font-size:var(--t-etiqueta);font-weight:var(--p-medio);white-space:nowrap}
.etiqueta.gris{background:var(--c-gris-chip);color:var(--c-texto-2)}
.etiqueta.verde{background:var(--c-verde-suave);color:var(--c-verde)}
.etiqueta.ambar{background:var(--c-ambar-suave);color:var(--c-ambar)}
.etiqueta.roja{background:var(--c-rojo-suave);color:var(--c-rojo)}
.etiqueta.azul{background:var(--c-azul-suave);color:var(--c-azul)}

/* ---------- formularios ---------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:var(--t-nota);font-weight:var(--p-medio);color:var(--c-texto-2);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;min-height:32px;padding:6px 10px;border:1px solid var(--c-linea);border-radius:var(--r-control);background:var(--c-papel)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--c-navy);outline-offset:-1px}
.campo input:disabled{background:var(--c-fondo);color:var(--c-texto-2)}
.campo .pista{font-size:var(--t-etiqueta);color:var(--c-texto-2);margin-top:4px}
.campo.error input{border-color:var(--c-rojo)}
.campo .msg-error{font-size:var(--t-etiqueta);color:var(--c-rojo);margin-top:4px}
.fila{display:grid;gap:14px}
.fila.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fila.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fila.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.interruptor{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--t-chico)}
.interruptor input{width:auto}
.pista{font-size:var(--t-etiqueta);color:var(--c-texto-2);line-height:1.5}
.pista-fila{font-size:var(--t-etiqueta);color:var(--c-texto-2);margin-top:2px;font-weight:var(--p-normal)}
.texto-rojo{color:var(--c-rojo)}
.texto-rojo svg,.pista-fila svg{vertical-align:-2px}

.filtros .buscador{position:relative;flex:1;max-width:320px}
.filtros .buscador input{width:100%;padding-left:32px}
.filtros .buscador svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--c-texto-3)}

/* ---------- editor de factura ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:1200px){.editor{grid-template-columns:minmax(0,1fr)}}
.lineas-tabla input,.lineas-tabla select{width:100%;border:1px solid transparent;border-radius:var(--r-control);padding:6px 8px;background:transparent}
.lineas-tabla input:hover,.lineas-tabla select:hover{border-color:var(--c-linea);background:var(--c-papel)}
.lineas-tabla input:focus,.lineas-tabla select:focus{border-color:var(--c-navy);background:var(--c-papel);outline:none}
.lineas-tabla td{padding:4px 6px}
.lineas-tabla input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.lineas-tabla .arrastre{color:var(--c-texto-3);cursor:grab;text-align:center;width:26px}
.borrar-linea{border:none;background:none;color:var(--c-texto-3);cursor:pointer;padding:4px;border-radius:var(--r-control);line-height:0}
.borrar-linea:hover{color:var(--c-rojo);background:var(--c-rojo-suave)}
.totales-caja{position:sticky;top:0}
.totales-caja .linea{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--t-chico)}
.totales-caja .linea.total{border-top:2px solid var(--c-texto);margin-top:8px;padding-top:10px;font-size:var(--t-panel);font-weight:var(--p-fuerte)}
.totales-caja .linea span:last-child{font-variant-numeric:tabular-nums}

/* ---------- la factura como papel (maqueta 3) ---------- */
.factura-papel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.papel .cabecera-papel{display:flex;justify-content:space-between;gap:var(--a-l);margin-bottom:28px}
.papel .quien b{display:block;font-size:var(--t-panel);font-weight:var(--p-medio)}
.papel .quien span{display:block;color:var(--c-texto-2);font-size:var(--t-base)}
.papel .num-factura{text-align:right}
.papel .num-factura .k{font-size:var(--t-etiqueta);letter-spacing:1.2px;text-transform:uppercase;color:var(--c-texto-3)}
.papel .num-factura .n{font-size:var(--t-h1);font-weight:var(--p-medio);color:var(--c-navy)}
.papel .num-factura .f{color:var(--c-texto-2);font-size:var(--t-base)}
.papel .para{margin-bottom:24px}
.papel .para b{font-weight:var(--p-medio)}
.papel .para span{color:var(--c-texto-2)}
.papel table thead th{background:var(--c-papel)}
.papel .totales{margin:22px 0 0 auto;max-width:440px}
.papel .totales div{display:flex;justify-content:space-between;padding:5px 0;font-variant-numeric:tabular-nums}
.papel .totales .total{border-top:1px solid var(--c-linea);margin-top:8px;padding-top:12px;font-size:var(--t-h1);font-weight:var(--p-medio);color:var(--c-navy)}
.papel .pie-papel{margin-top:32px;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--a-m);color:var(--c-texto-2);font-size:var(--t-pie)}
.lado .acciones-lado{display:flex;flex-direction:column;gap:var(--a-s);margin-top:var(--a-l)}
.lado .acciones-lado .btn{width:100%}
.lado .aviso{margin-top:var(--a-m)}
@media(max-width:1100px){.factura-papel{grid-template-columns:minmax(0,1fr)}}

/* ---------- diálogos ---------- */
.velo{position:fixed;inset:0;background:var(--c-velo);display:grid;place-items:center;z-index:100;padding:var(--a-l)}
.modal{background:var(--c-papel);border-radius:var(--r);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sombra-flotante)}
.modal.ancho{max-width:820px}
.modal-cab{padding:var(--a-m) 20px;border-bottom:1px solid var(--c-linea-suave);display:flex;align-items:center;justify-content:space-between}
.modal-cab h3{font-size:var(--t-h2);font-weight:var(--p-fuerte)}
.modal-cuerpo{padding:20px;overflow-y:auto}
.modal-pie{padding:14px 20px;border-top:1px solid var(--c-linea-suave);display:flex;justify-content:flex-end;gap:var(--a-s)}
.cerrar{border:none;background:none;cursor:pointer;color:var(--c-texto-3);padding:4px;line-height:0}
.cerrar:hover{color:var(--c-texto)}

/* ---------- avisos: el banner azul del sistema y sus variantes de estado ---------- */
.aviso{display:flex;gap:10px;padding:10px 14px;border-radius:var(--r-control);font-size:var(--t-chico);margin-bottom:var(--a-m)}
.aviso svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.aviso.info{background:var(--c-azul-suave);color:var(--c-azul)}
.aviso.exito{background:var(--c-verde-suave);color:var(--c-verde)}
.aviso.alerta{background:var(--c-ambar-suave);color:var(--c-ambar)}
.aviso.error{background:var(--c-rojo-suave);color:var(--c-rojo)}
.aviso a{color:inherit;font-weight:var(--p-fuerte)}

/* el toast del sistema dentro del contenedor de Nuvia */
#notificaciones{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:var(--a-s)}
#notificaciones .toast{display:flex;align-items:center;gap:10px;animation:entrar .2s ease-out}
#notificaciones .toast.exito{background:var(--c-verde)} #notificaciones .toast.error{background:var(--c-rojo)}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.cargando{display:grid;place-items:center;padding:50px;color:var(--c-texto-3)}
.spinner{width:26px;height:26px;border:2.5px solid var(--c-linea);border-top-color:var(--c-navy);border-radius:var(--r-redondo);animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.huella{font-family:var(--letra-mono);font-size:var(--t-mini);color:var(--c-texto-2)}

/* ---------- acceso e instalación ---------- */
.acceso{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--c-barra);padding:32px var(--a-m);overflow-y:auto}
.acceso-caja{background:var(--c-papel);border-radius:var(--r);padding:32px;width:100%;max-width:440px;box-shadow:var(--sombra-flotante)}
.acceso-caja.ancha,.acceso-caja:has(#form-instalar){max-width:660px}
.acceso-marca{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.acceso-marca img{border-radius:var(--r)}
.acceso-marca h1{font-size:var(--t-h1)}
.acceso-marca span{font-size:var(--t-etiqueta);color:var(--c-texto-2)}
.acceso-caja h2{font-size:var(--t-h2);font-weight:var(--p-fuerte);margin-bottom:4px}
.acceso-sub{font-size:var(--t-chico);color:var(--c-texto-2);margin-bottom:18px;line-height:1.55}
.acceso-seccion{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:1.4px;color:var(--c-texto-2);font-weight:var(--p-fuerte);margin:20px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--c-linea)}
.acceso-seccion:first-of-type{margin-top:8px}
.acceso-pie{margin-top:18px;font-size:var(--t-etiqueta);color:var(--c-barra-tenue);text-align:center}
.acceso-enlace{text-align:center;margin-top:14px}
.acceso-enlace a{color:var(--c-navy);font-size:var(--t-nota)}

/* ---------- pestañas: las pestañas-filtro del sistema ---------- */
.pestanas{display:flex;gap:18px;border-bottom:1px solid var(--c-linea);margin-bottom:20px}
.pestanas button{border:none;background:none;padding:0 0 8px;cursor:pointer;font-size:var(--t-chico);color:var(--c-texto-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.pestanas button:hover{color:var(--c-texto)}
.pestanas button.activa{color:var(--c-texto);border-bottom-color:var(--c-oro);font-weight:var(--p-medio)}

/* ---------- selección múltiple ---------- */
.barra-seleccion{position:sticky;bottom:var(--a-m);z-index:20;margin-top:var(--a-m);display:flex;align-items:center;justify-content:space-between;gap:var(--a-m);flex-wrap:wrap;background:var(--c-barra);color:var(--c-papel);border-radius:var(--r);padding:12px var(--a-m);box-shadow:var(--sombra-flotante)}
.barra-seleccion[hidden]{display:none}
.barra-seleccion .barra-info{display:flex;flex-direction:column;gap:2px;font-size:var(--t-chico)}
.barra-seleccion .barra-info span{font-size:var(--t-etiqueta);color:var(--c-barra-enlace)}
.barra-seleccion .barra-botones{display:flex;gap:var(--a-s);flex-wrap:wrap}
table td input[type=checkbox],table th input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--c-navy)}
table td input[type=checkbox]:disabled{cursor:default;opacity:.3}
.lista-compacta{margin-top:14px;max-height:190px;overflow:auto;border:1px solid var(--c-linea);border-radius:var(--r)}
.lista-compacta div{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;font-size:var(--t-nota);border-bottom:1px solid var(--c-linea-suave)}
.lista-compacta div:last-child{border-bottom:none}
.lista-compacta div b{font-variant-numeric:tabular-nums}
.tarjeta.destacada{border-color:var(--c-navy)}
.tarjeta.destacada h3{display:flex;align-items:center;gap:7px;color:var(--c-navy)}
.cifras-trimestre h4{font-size:var(--t-nota);font-weight:var(--p-fuerte);margin-bottom:6px;color:var(--c-texto-2)}
.cifras-trimestre td{padding:6px 8px;font-size:var(--t-chico);height:auto}
.cifras-trimestre tr.total td{font-weight:var(--p-fuerte);border-top:1px solid var(--c-linea)}

/* ---------- el cuadro de mando ---------- */
.grafico{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:120px;padding-top:8px}
.grafico.doble{align-items:stretch;gap:3px;height:150px}
.grafico.doble .mes{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.grafico.doble .barras{flex:1;display:flex;align-items:flex-end;gap:1px;min-height:0}
.grafico.doble .dato{flex:1 1 0;min-width:0;padding:0;border-radius:var(--r-minimo) var(--r-minimo) 0 0;background:var(--c-navy)}
.grafico.doble .dato.cobrado{background:var(--c-verde)}
.grafico.doble .mes span{font-size:var(--t-micro);color:var(--c-texto-2);text-align:center;margin-top:4px}
.leyenda-dos{display:flex;gap:var(--a-m);font-size:var(--t-pie);color:var(--c-texto-2);margin-top:var(--a-l)}
.leyenda-dos i{display:inline-block;width:10px;height:10px;border-radius:var(--r-minimo);margin-right:5px;vertical-align:-1px}
.por-contrastar{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-micro);font-weight:var(--p-fuerte);color:var(--c-ambar);background:var(--c-ambar-suave);border-radius:var(--r-pastilla);padding:1px 7px;margin-left:6px;text-transform:none;letter-spacing:0}

/* ---------- el móvil: lo del sistema, más lo propio ---------- */
@media (max-width:760px){
  body{overflow:auto}
  .rejilla.c2,.rejilla.c3,.rejilla.c4,.rejilla.c5{grid-template-columns:minmax(0,1fr)}
  .rejilla:has(> .kpi){gap:var(--a-m)}
  .fila.c2,.fila.c3,.fila.c4{grid-template-columns:minmax(0,1fr)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .tarjeta{overflow-x:auto}
  .filtros .buscador{max-width:none}
  input,select,textarea{font-size:var(--t-entrada-movil)}
  .velo{place-items:end center;padding:0}
  .modal,.modal.ancho{max-width:100%;max-height:92vh;border-radius:var(--r) var(--r) 0 0}
  .modal-pie{flex-wrap:wrap}
  #notificaciones{left:14px;right:14px;bottom:14px}
  .acceso{padding:14px}
  .acceso-caja{padding:20px}
  .nav .empresa{display:none}
}
.mono{font-family:inherit}
.lado table td{padding:0 4px;height:32px;font-size:var(--t-chico)}
@media (max-width:760px){.papel{overflow-x:auto}.papel .cabecera-papel{flex-direction:column}.papel .num-factura{text-align:left}}