/* ALGI Facturación · interfaz de escritorio */
:root{
  /* Morado de ALGI. El azul anterior era de Nuvia; se conserva, eso sí,
     como color por defecto de la factura en PDF: ese documento es del
     cliente y lleva su identidad, no la de la herramienta. */
  --marca:#5B3FD6; --marca-clara:#7358E4; --acento:#8F6BF0;
  --sidebar:#2A1B52; --sidebar-hover:#3A2770; --sidebar-texto:#B0A3D0;
  --fondo:#F4F6F9; --panel:#FFFFFF; --borde:#E4E8EE;
  --texto:#1E2733; --texto-suave:#6B7A90; --texto-tenue:#95A2B3;
  --verde:#1E9E6A; --verde-fondo:#E7F6EF;
  --ambar:#C77700; --ambar-fondo:#FFF4E0;
  --rojo:#C0392B; --rojo-fondo:#FDECEA;
  --radio:10px; --sombra:0 1px 2px rgba(17,29,45,.06), 0 2px 8px rgba(17,29,45,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- Estructura ---------- */
.app{display:flex;height:100vh}
.sidebar{
  width:232px;flex-shrink:0;background:var(--sidebar);color:var(--sidebar-texto);
  display:flex;flex-direction:column;padding:18px 0;
}
.marca{display:flex;align-items:center;gap:10px;padding:0 20px 22px;}
.marca .iso{width:34px;height:34px;border-radius:9px;display:block;flex-shrink:0}
.marca h1{font-size:16px;font-weight:600;color:#fff;letter-spacing:.5px}
.marca small{display:block;font-size:10px;color:var(--sidebar-texto);font-weight:400;letter-spacing:.3px}
.nav{flex:1;overflow-y:auto}
.nav-grupo{padding:14px 20px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#5C7290}
.nav-grupo{color:#5C7290}
.nav-titulo{padding:14px 20px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:#5C7290}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 20px;color:var(--sidebar-texto);
  text-decoration:none;font-size:13.5px;cursor:pointer;border-left:3px solid transparent;
}
.nav a:hover{background:var(--sidebar-hover);color:#fff}
.nav a.activo{background:var(--sidebar-hover);color:#fff;border-left-color:var(--acento);font-weight:500}
.nav a svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav a .globo{
  margin-left:auto;background:var(--acento);color:#fff;font-size:10.5px;font-weight:600;
  border-radius:9px;padding:1px 6px;min-width:18px;text-align:center;
}
.nav a .globo.alerta{background:var(--rojo)}
.sidebar-pie{padding:14px 20px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#5C7290}

.principal{flex:1;display:flex;flex-direction:column;overflow:hidden}
.barra{
  height:58px;background:var(--panel);border-bottom:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;
}
.barra h2{font-size:17px;font-weight:600}
.barra .sub{font-size:12px;color:var(--texto-suave);margin-top:1px}
.barra-acciones{display:flex;gap:8px;align-items:center}
.contenido{flex:1;overflow-y:auto;padding:22px 24px 40px}

/* ---------- Componentes ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
  border:1px solid var(--borde);background:var(--panel);cursor:pointer;font-size:13px;
  font-weight:500;transition:all .12s;white-space:nowrap;
}
.btn:hover{background:#F8FAFC;border-color:#CBD3DE}
.btn.primario{background:var(--marca);border-color:var(--marca);color:#fff}
.btn.primario:hover{background:var(--marca-clara);border-color:var(--marca-clara)}
.btn.peligro{color:var(--rojo);border-color:#F3C9C4}
.btn.peligro:hover{background:var(--rojo-fondo)}
.btn.mini{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:15px;height:15px}

.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta-cab{padding:14px 18px;border-bottom:1px solid var(--borde);display:flex;
  align-items:center;justify-content:space-between}
.tarjeta-cab h3{font-size:14px;font-weight:600}
.tarjeta-cuerpo{padding:18px}

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

.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px 18px;box-shadow:var(--sombra)}
.kpi .etq{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-suave);font-weight:600}
.kpi .val{font-size:24px;font-weight:600;margin-top:6px;letter-spacing:-.5px}
.kpi .pie{font-size:12px;color:var(--texto-suave);margin-top:3px}
.kpi.ok .val{color:var(--verde)} .kpi.alerta .val{color:var(--rojo)} .kpi.atencion .val{color:var(--ambar)}

table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--texto-suave);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--borde);
  background:#FAFBFC;position:sticky;top:0;z-index:1;
}
tbody td{padding:11px 14px;border-bottom:1px solid #EFF2F6;font-size:13px;vertical-align:middle}
tbody tr:hover{background:#FAFBFD}
tbody tr.clicable{cursor:pointer}
.der{text-align:right} .cen{text-align:center}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.vacio{padding:44px;text-align:center;color:var(--texto-tenue)}
.vacio svg{width:38px;height:38px;opacity:.35;margin-bottom:10px}

.etiqueta{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.2px}
.etiqueta.gris{background:#EEF1F5;color:var(--texto-suave)}
.etiqueta.verde{background:var(--verde-fondo);color:var(--verde)}
.etiqueta.ambar{background:var(--ambar-fondo);color:var(--ambar)}
.etiqueta.roja{background:var(--rojo-fondo);color:var(--rojo)}
.etiqueta.azul{background:#E8F1FE;color:var(--acento)}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:11.5px;font-weight:600;color:var(--texto-suave);
  margin-bottom:5px;letter-spacing:.2px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:8px 11px;border:1px solid var(--borde);border-radius:7px;background:#fff;
  transition:border-color .12s,box-shadow .12s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(47,128,237,.12)}
.campo input:disabled{background:#F5F7FA;color:var(--texto-suave)}
.campo .pista{font-size:11px;color:var(--texto-tenue);margin-top:4px}
.campo.error input{border-color:var(--rojo)}
.campo .msg-error{font-size:11.5px;color:var(--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:13px}
.interruptor input{width:auto}

.filtros{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filtros input,.filtros select{padding:7px 11px;border:1px solid var(--borde);border-radius:7px;background:#fff}
.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(--texto-tenue)}

/* ---------- Editor de factura ---------- */
.editor{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
@media(max-width:1200px){.editor{grid-template-columns:1fr}}
.lineas-tabla input,.lineas-tabla select{
  width:100%;border:1px solid transparent;border-radius:6px;padding:6px 8px;background:transparent}
.lineas-tabla input:hover,.lineas-tabla select:hover{border-color:var(--borde);background:#fff}
.lineas-tabla input:focus,.lineas-tabla select:focus{border-color:var(--acento);background:#fff;
  outline:none;box-shadow:0 0 0 2px rgba(47,128,237,.1)}
.lineas-tabla td{padding:4px 6px}
.lineas-tabla input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.lineas-tabla .arrastre{color:var(--texto-tenue);cursor:grab;text-align:center;width:26px}
.borrar-linea{border:none;background:none;color:var(--texto-tenue);cursor:pointer;padding:4px;
  border-radius:5px;line-height:0}
.borrar-linea:hover{color:var(--rojo);background:var(--rojo-fondo)}
.totales-caja{position:sticky;top:0}
.totales-caja .linea{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
.totales-caja .linea.total{border-top:2px solid var(--texto);margin-top:8px;padding-top:10px;
  font-size:17px;font-weight:700}
.totales-caja .linea span:last-child{font-variant-numeric:tabular-nums}

/* ---------- Modal ---------- */
.velo{position:fixed;inset:0;background:rgba(15,25,40,.5);display:grid;place-items:center;
  z-index:100;padding:24px;backdrop-filter:blur(2px)}
.modal{background:var(--panel);border-radius:12px;width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(15,25,40,.28)}
.modal.ancho{max-width:820px}
.modal-cab{padding:16px 20px;border-bottom:1px solid var(--borde);display:flex;
  align-items:center;justify-content:space-between}
.modal-cab h3{font-size:15px;font-weight:600}
.modal-cuerpo{padding:20px;overflow-y:auto}
.modal-pie{padding:14px 20px;border-top:1px solid var(--borde);display:flex;
  justify-content:flex-end;gap:9px;background:#FAFBFC;border-radius:0 0 12px 12px}
.cerrar{border:none;background:none;cursor:pointer;color:var(--texto-tenue);padding:4px;line-height:0}
.cerrar:hover{color:var(--texto)}

/* ---------- Avisos ---------- */
.aviso{display:flex;gap:11px;padding:13px 15px;border-radius:9px;font-size:13px;margin-bottom:16px}
.aviso svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.aviso.info{background:#EBF3FE;color:#1B4F91}
.aviso.exito{background:var(--verde-fondo);color:#146B47}
.aviso.alerta{background:var(--ambar-fondo);color:#8A5400}
.aviso.error{background:var(--rojo-fondo);color:#96271B}

#notificaciones{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;
  flex-direction:column;gap:9px}
.nota{background:#1A2739;color:#fff;padding:12px 16px;border-radius:9px;font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);display:flex;align-items:center;gap:10px;
  animation:entrar .2s ease-out;max-width:400px}
.nota.exito{background:#12724E} .nota.error{background:#9E2A1E}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.grafico{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:120px;padding-top:8px}
.grafico .barra{flex:1;max-width:64px;background:linear-gradient(180deg,#4A90E2,#2F80ED);border-radius:4px 4px 0 0;
  min-height:3px;position:relative;transition:opacity .12s}
.grafico .barra:hover{opacity:.8}
.grafico .barra.negativa{background:linear-gradient(180deg,#E88B7D,#C0392B)}
.grafico .barra span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;
  font-size:9.5px;color:var(--texto-tenue)}
.leyenda-grafico{margin-top:24px;font-size:11px;color:var(--texto-tenue);text-align:center}

.cargando{display:grid;place-items:center;padding:50px;color:var(--texto-tenue)}
.spinner{width:26px;height:26px;border:2.5px solid var(--borde);border-top-color:var(--acento);
  border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.huella{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--texto-suave)}

/* ---------- Acceso e instalación ---------- */
.acceso{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1B2C47 0%,#0F1B2D 100%);padding:32px 16px;overflow-y:auto;
}
.acceso-caja{
  background:var(--panel);border-radius:14px;padding:32px;width:100%;max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,.32);
}
.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:11px}
.acceso-marca h1{font-size:20px;font-weight:600;letter-spacing:.3px}
.acceso-marca span{font-size:11.5px;color:var(--texto-suave)}
.acceso-caja h2{font-size:16px;font-weight:600;margin-bottom:4px}
.acceso-sub{font-size:13px;color:var(--texto-suave);margin-bottom:18px;line-height:1.55}
.acceso-seccion{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--texto-suave);
  font-weight:700;margin:20px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--borde);
}
.acceso-seccion:first-of-type{margin-top:8px}
.acceso-pie{margin-top:18px;font-size:11.5px;color:#8FA3BC;text-align:center}
.btn.ancho{width:100%;justify-content:center;padding:10px;margin-top:6px}

/* ---------- Selector de empresa ---------- */
.empresa{padding:4px 14px 14px;margin:0}
.empresa select{
  width:100%;background:var(--sidebar-hover);color:#fff;border:1px solid rgba(255,255,255,.09);
  border-radius:8px;padding:8px 10px;font-size:12.5px;cursor:pointer;
}
.empresa select:hover{border-color:rgba(255,255,255,.22)}
.empresa label{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;
  color:#5C7290;margin-bottom:5px;font-weight:600;
}
.usuario-barra{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--texto-suave)}
.usuario-barra .avatar{
  width:28px;height:28px;border-radius:50%;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-bottom:20px}
.pestanas button{
  border:none;background:none;padding:10px 16px;cursor:pointer;font-size:13.5px;
  color:var(--texto-suave);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;
}
.pestanas button:hover{color:var(--texto)}
.pestanas button.activa{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}
.acceso-enlace{text-align:center;margin-top:14px}
.acceso-enlace a{color:var(--acento);text-decoration:none;font-size:12.5px}
.acceso-enlace a:hover{text-decoration:underline}

/* ---------- Selección múltiple en el listado de facturas ---------- */
.barra-seleccion{
  position:sticky;bottom:16px;z-index:20;margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--marca);color:#fff;border-radius:10px;padding:12px 16px;
  box-shadow:0 8px 24px rgba(31,58,95,.28)}
.barra-seleccion .barra-info{display:flex;flex-direction:column;gap:2px;font-size:13px}
.barra-seleccion .barra-info span{font-size:11.5px;opacity:.78}
.barra-seleccion .barra-botones{display:flex;gap:8px;flex-wrap:wrap}
.barra-seleccion .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);
  color:#fff}
.barra-seleccion .btn:hover{background:rgba(255,255,255,.24)}
.barra-seleccion .btn.primario{background:#fff;color:var(--marca);border-color:#fff}
.barra-seleccion .btn.primario:hover{background:#EEF2F7}
table td input[type=checkbox],table th input[type=checkbox]{
  width:15px;height:15px;cursor:pointer;accent-color:var(--marca)}
table td input[type=checkbox]:disabled{cursor:default;opacity:.3}

/* Repaso de lo seleccionado dentro de un modal */
.lista-compacta{margin-top:14px;max-height:190px;overflow:auto;
  border:1px solid var(--borde,#E3E8EF);border-radius:8px}
.lista-compacta div{display:flex;justify-content:space-between;gap:12px;
  padding:7px 11px;font-size:12.5px;border-bottom:1px solid var(--borde,#E3E8EF)}
.lista-compacta div:last-child{border-bottom:none}
.lista-compacta div b{font-variant-numeric:tabular-nums}
.tarjeta.destacada{border-color:var(--marca);box-shadow:0 2px 10px rgba(31,58,95,.10)}
.tarjeta.destacada h3{display:flex;align-items:center;gap:7px;color:var(--marca)}