:root {
  --azul: #24678F; --azul-osc: #1B5274; --azul-suave: #E6F2F4; --azul-claro: #CFE6EA;
  --tinta: #1D1D1F; --gris: #636366; --gris-claro: #D1D1D6; --linea: #E5E5EA; --linea-suave: #F0F0F2;
  --fondo: #F5F5F7; --blanco: #FFFFFF;
  --verde: #00875A; --verde-osc: #00663F; --verde-suave: #E3F5EC;
  --ambar: #E8A100; --ambar-osc: #8A5A00; --ambar-suave: #FFF4D6;
  --naranja: #E85D04; --naranja-osc: #B23C00; --naranja-suave: #FDE8DC;
  --rojo: #C81E1E; --rojo-osc: #9B1C1C; --rojo-suave: #FBE3E3; --vino: #7F1D1D;
  --radio: 18px;
  --sombra: 0 4px 12px rgba(0,0,0,.10);
  --tabbar: 0px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.45 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
}
a { color: var(--azul); }
a:hover { color: var(--azul-osc); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: var(--tinta); }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

/* ───── Barra superior ───── */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--blanco); border-bottom: 1px solid var(--linea);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; }
.marca b { font-size: 18px; letter-spacing: -0.02em; }
.empresa { color: var(--gris); font-size: 14px; padding-left: 10px; border-left: 1px solid var(--linea); }
.icono-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; position: relative; color: var(--tinta); text-decoration: none; }
.icono-btn.gris { background: var(--fondo); }
.punto { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.buscar { flex: 1 1 260px; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--fondo); border-radius: 12px; padding: 0 14px; height: 44px; }
.buscar input { border: 0; background: transparent; flex: 1; min-width: 0; outline: none; font-size: 15px; }
.mod-titulo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.mini-tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.pestanas a { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--gris); text-decoration: none; }
.pestanas a[aria-current="page"] { background: var(--fondo); color: var(--tinta); font-weight: 600; }
.derecha { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ───── Contenedor ───── */
.vista { outline: none; }
.contenido { width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 20px 64px; display: flex; flex-direction: column; gap: 24px; }
.contenido.estrecho { max-width: 1080px; padding-top: 48px; gap: 40px; }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.encabezado h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.encabezado p { color: var(--gris); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.saludo { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.saludo p { color: var(--gris); }
.saludo h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; }

/* ───── Botones ───── */
.btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-osc); color: #fff; }
.btn-borde { background: var(--blanco); border: 1px solid var(--gris-claro); color: var(--tinta); }
.btn-borde:hover { background: var(--fondo); color: var(--tinta); }
.btn-suave { background: var(--azul-suave); color: var(--azul-osc); }
.btn-texto { background: transparent; color: var(--gris); }
.btn-chico { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: default; }
.chip { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--gris-claro); background: var(--blanco); font-size: 13px; font-weight: 500; flex: 0 0 auto; }
.chip[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ───── Tarjetas ───── */
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tarjeta h2 { font-size: 17px; font-weight: 700; }
.fila-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kpi { background: var(--blanco); border-radius: var(--radio); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tinta); }
a.kpi:hover { color: var(--tinta); box-shadow: var(--sombra); }
.kpi .et { font-size: 13px; color: var(--gris); font-weight: 500; }
.kpi .val { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 18px; color: var(--gris); font-weight: 600; }
.kpi .pie { font-size: 13px; color: var(--gris); }
.kpi.alerta { background: var(--ambar-suave); }
.kpi.alerta .et, .kpi.alerta .pie { color: var(--ambar-osc); font-weight: 600; }
.t-verde { color: var(--verde-osc) !important; } .t-rojo { color: var(--rojo) !important; } .t-gris { color: var(--gris); }

/* ───── Inicio: banner de agentes y cuadrícula de módulos ───── */
.banner { background: var(--azul); color: #fff; border-radius: 20px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; text-decoration: none; }
.banner:hover { color: #fff; background: #003FE6; }
.banner .ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: 0 0 auto; }
.banner .txt { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.banner .txt b { font-size: 17px; }
.banner .txt span { font-size: 14px; color: var(--azul-claro); }
.banner .cta { height: 44px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--azul-osc); font-size: 14px; font-weight: 700; display: flex; align-items: center; flex: 0 0 auto; }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 8px; }
.modulo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 8px; border-radius: 20px; text-decoration: none; color: var(--tinta); position: relative; background: transparent; border: 0; }
.modulo:hover { background: var(--blanco); color: var(--tinta); }
.modulo .tile { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; box-shadow: var(--sombra); transition: transform .15s; }
.modulo:hover .tile { transform: translateY(-2px); }
.modulo .tile svg { width: 38px; height: 38px; }
.modulo .nombre { font-size: 15px; font-weight: 500; text-align: center; line-height: 1.25; }
.insignia { position: absolute; top: 8px; right: calc(50% - 52px); min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--fondo); }

/* ───── Cobranza ───── */
.barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--linea-suave); }
.barra span { min-width: 3px; }
.leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.leyenda div { display: flex; flex-direction: column; gap: 4px; }
.leyenda .et { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.leyenda .cuadro { width: 10px; height: 10px; border-radius: 3px; }
.leyenda b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tabla-caja { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
td { padding: 14px 12px; border-bottom: 1px solid var(--linea-suave); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.der { text-align: right; }
.estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.e-critico { background: var(--rojo-suave); color: var(--rojo-osc); }
.e-vencido { background: var(--naranja-suave); color: var(--naranja-osc); }
.e-por_vencer { background: var(--ambar-suave); color: var(--ambar-osc); }
.e-al_dia { background: var(--verde-suave); color: var(--verde-osc); }
.v-critico { color: var(--rojo-osc); } .v-vencido { color: var(--naranja-osc); } .v-por_vencer { color: var(--ambar-osc); } .v-al_dia { color: var(--gris); }
.lista-tarjetas { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 10px; }
.item { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 14px 14px 16px; display: flex; align-items: center; gap: 12px; }
.item .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item .linea1 { display: flex; align-items: center; gap: 8px; }
.item .linea1 b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .linea2 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.item .linea2 b { color: var(--tinta); }
.vacio { color: var(--gris); text-align: center; padding: 24px; }

/* ───── Agentes ───── */
.dos-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-princ { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-lado { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.aprob { border: 1px solid var(--linea); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.aprob .quien { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--gris); }
.aprob h3 { font-size: 16px; font-weight: 700; }
.aprob .det { font-size: 14px; color: var(--gris); }
.msg-prev { background: var(--fondo); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.msg-prev .et { display: block; font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }
textarea.editor { width: 100%; min-height: 120px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; resize: vertical; }
.cantidad { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cantidad input { width: 110px; height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; font-size: 15px; }
.agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.agente { background: var(--blanco); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.agente .arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agente h3 { font-size: 15px; font-weight: 700; }
.agente p { font-size: 13px; color: var(--gris); line-height: 1.45; }
.agente .estado-ag { font-size: 12px; font-weight: 600; }
.ico-ag { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.switch { width: 48px; height: 28px; border-radius: 14px; border: 0; background: var(--gris-claro); position: relative; padding: 0; flex: 0 0 auto; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch[aria-checked="true"] { background: var(--verde); }
.switch[aria-checked="true"]::after { left: 23px; }
.pronto { padding: 4px 10px; border-radius: 999px; background: var(--linea-suave); color: var(--gris); font-size: 12px; font-weight: 700; }
.actividad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.actividad li { display: flex; gap: 12px; }
.actividad .hora { flex: 0 0 auto; width: 58px; color: var(--gris); font-variant-numeric: tabular-nums; }

/* ───── Chat ───── */
.chat { display: flex; flex-direction: column; gap: 12px; }
.burbuja { max-width: 88%; border-radius: 16px; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.burbuja.yo { align-self: flex-end; background: var(--azul); color: #fff; border-radius: 16px 16px 4px 16px; }
.burbuja.ia { align-self: flex-start; background: var(--fondo); border-radius: 16px 16px 16px 4px; display: flex; flex-direction: column; gap: 8px; }
.pagina-chat .burbuja.ia { background: var(--blanco); }
.burbuja .acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.burbuja .aviso { font-size: 12px; color: var(--gris); }
.escribiendo { display: inline-flex; gap: 4px; padding: 4px 0; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris); animation: brinco 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes brinco { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.mini-barras { display: flex; flex-direction: column; gap: 8px; }
.mini-barras .b { height: 8px; border-radius: 4px; background: var(--azul); }
.mini-barras .b.ant { background: #B9C9F5; }
.mini-barras .r { display: flex; justify-content: space-between; font-size: 13px; }
.entrada { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gris-claro); border-radius: 14px; padding: 4px 4px 4px 14px; background: var(--blanco); }
.entrada input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; height: 40px; }
.entrada button { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--azul); display: grid; place-items: center; flex: 0 0 auto; }
.sugerencias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sugerencias .chip { font-weight: 400; }
.pagina-chat { max-width: 760px; margin: 0 auto; padding: 20px 16px 180px; }
.pie-chat { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); background: var(--blanco); border-top: 1px solid var(--linea); padding: 10px 16px 14px; z-index: 15; }
.pie-chat > div { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

/* ───── Barra inferior (celular) ───── */
.tabbar { display: none; }

/* ───── Toast y modal ───── */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + var(--tabbar) + env(safe-area-inset-bottom, 0px)); background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--blanco); border-radius: 20px; padding: 24px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal h2 { font-size: 19px; }

.cargando { padding: 80px 20px; text-align: center; color: var(--gris); }

/* ───── Celular ───── */
@media (max-width: 720px) {
  :root { --tabbar: 64px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .empresa, .topbar .buscar { display: none; }
  .pestanas { order: 3; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .pestanas a { flex: 0 0 auto; }
  .contenido { padding: 20px 16px 40px; gap: 18px; }
  .contenido.estrecho { padding-top: 20px; gap: 20px; }
  .saludo { text-align: left; }
  .saludo h1 { font-size: 26px; }
  .encabezado h1 { font-size: 24px; }
  .encabezado .acciones { width: 100%; }
  .encabezado .acciones .btn { flex: 1; }
  .buscar-movil { display: flex !important; margin: 0; max-width: none; background: var(--blanco); flex: 0 0 44px; }
  .kpis.tres > :last-child { grid-column: 1 / -1; }
  .modulos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; }
  .modulo { padding: 4px 0; gap: 8px; }
  .modulo:hover { background: transparent; }
  .modulo .tile { width: 60px; height: 60px; border-radius: 16px; }
  .modulo .tile svg { width: 28px; height: 28px; }
  .modulo .nombre { font-size: 12px; }
  .insignia { top: -6px; right: calc(50% - 38px); min-width: 22px; height: 22px; font-size: 11px; }
  .banner { padding: 14px 16px; gap: 12px; flex-wrap: nowrap; border-radius: 16px; }
  .banner .ico { width: 44px; height: 44px; }
  .banner .txt b { font-size: 15px; }
  .banner .txt span { font-size: 12px; }
  .banner .cta { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi .val { font-size: 22px; }
  .kpi .val small { font-size: 14px; }
  .kpi .pie, .kpi .et { font-size: 12px; }
  .tarjeta { padding: 16px; }
  .tabla-caja { display: none; }
  .lista-tarjetas { display: flex; }
  .chips { flex-wrap: nowrap; overflow-x: auto; }
  .solo-escritorio { display: none !important; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); padding: 6px 8px env(safe-area-inset-bottom, 0px);
    background: var(--blanco); border-top: 1px solid var(--linea);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--gris); font-size: 11px; font-weight: 500; position: relative; }
  .tabbar a[aria-current="page"] { color: var(--azul); font-weight: 600; }
  .tabbar .insignia { top: 0; right: calc(50% - 22px); }
  .aprob .acciones .btn { flex: 1 1 auto; }
  .modal-fondo { place-items: end center; padding: 0; }
  .modal { border-radius: 20px 20px 0 0; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 721px) { .solo-movil { display: none !important; } .buscar-movil { display: none !important; } }

/* ───── Configuración de IA ───── */
.proveedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.prov { position: relative; cursor: pointer; }
.prov input { position: absolute; opacity: 0; pointer-events: none; }
.prov-caja { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--gris-claro); border-radius: 14px; background: var(--blanco); min-height: 64px; transition: border-color .15s, box-shadow .15s; }
.prov-caja b { font-size: 14px; }
.prov-caja span { font-size: 12px; color: var(--gris); }
.prov input:checked + .prov-caja { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.prov input:focus-visible + .prov-caja { outline: 3px solid var(--azul); outline-offset: 2px; }
.ayuda-prov { font-size: 14px; color: var(--gris); background: var(--fondo); border-radius: 12px; padding: 12px 14px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.campo-app { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-app label { font-size: 14px; font-weight: 600; }
.campo-app input:not([type=range]) { height: 46px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 14px; font-size: 15px; background: var(--blanco); width: 100%; }
.campo-app input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.campo-app input[type=range] { accent-color: var(--azul); height: 46px; }
.pista { font-size: 12px; }
.fila-switch { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.resultado { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.resultado.ok { background: var(--verde-suave); color: var(--verde-osc); }
.resultado.ok .t-gris { color: var(--gris); }
.resultado.mal { background: var(--rojo-suave); color: var(--rojo-osc); }
.usos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* ═══════════════ NodusERP 2.0 · componentes adicionales ═══════════════ */
.contenido.ancho { max-width: 1320px; }
.barra-herr { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barra-herr .buscar-lista { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; height: 44px; min-width: 0; }
.barra-herr .buscar-lista input { border: 0; outline: none; flex: 1; min-width: 0; font-size: 15px; background: transparent; }
.barra-herr select { height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; background: var(--blanco); font-size: 14px; }
.tabla-caja table { min-width: 680px; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: #FAFAFC; }
.acc-fila { display: inline-flex; gap: 6px; }
.icono-mini { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--gris-claro); background: var(--blanco); display: inline-grid; place-items: center; }
.icono-mini:hover { background: var(--fondo); }
.vacio-grande { text-align: center; padding: 48px 16px; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vacio-grande svg { opacity: .5; }
.paginador { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--gris); }

/* Formularios */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .completo { grid-column: 1 / -1; }
.campo-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-f label { font-size: 13px; font-weight: 600; }
.campo-f label .req { color: var(--rojo); }
.campo-f input, .campo-f select, .campo-f textarea { height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; font-size: 15px; background: var(--blanco); width: 100%; }
.campo-f textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.campo-f input:focus, .campo-f select:focus, .campo-f textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.campo-f .ayuda { font-size: 12px; color: var(--gris); }
.campo-f.check { flex-direction: row; align-items: center; gap: 10px; }
.campo-f.check input { width: 20px; height: 20px; accent-color: var(--azul); }
.modal.grande { max-width: 860px; }
.modal.mediano { max-width: 640px; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-pie { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 4px; }
.modal-pie .izq { margin-right: auto; }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro:hover { background: var(--rojo-osc); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }

/* Líneas de documento (factura/cotización) */
.lineas { width: 100%; border-collapse: collapse; min-width: 640px; }
.lineas th { font-size: 12px; }
.lineas td { padding: 8px 6px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.lineas input { height: 40px; border: 1px solid var(--gris-claro); border-radius: 10px; padding: 0 10px; font-size: 14px; width: 100%; }
.lineas .n { width: 90px; } .lineas .p { width: 120px; } .lineas .t { width: 120px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .lineas .x { width: 44px; }
.totales { display: grid; grid-template-columns: auto 140px; gap: 6px 18px; justify-content: end; font-variant-numeric: tabular-nums; font-size: 15px; }
.totales .tot { font-size: 20px; font-weight: 800; }
.buscador-prod { position: relative; }
.sugerencias-prod { position: absolute; left: 0; right: 0; top: 46px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); z-index: 5; max-height: 280px; overflow: auto; }
.sugerencias-prod button { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: transparent; font-size: 14px; }
.sugerencias-prod button:hover, .sugerencias-prod button.activo { background: var(--fondo); }

/* Detalle */
.detalle-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detalle-cab h1 { font-size: 26px; }
.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.dato .et { font-size: 12px; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.dato .v { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-word; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.linea-tiempo li { display: flex; gap: 12px; }
.linea-tiempo .f { flex: 0 0 auto; width: 120px; color: var(--gris); font-size: 13px; }

/* Kanban (oportunidades) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.columna-k { background: #ECECF0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.columna-k h3 { font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.columna-k h3 span { color: var(--gris); font-weight: 600; }
.tarjeta-k { background: var(--blanco); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 1px solid transparent; }
.tarjeta-k:hover { border-color: var(--gris-claro); }
.tarjeta-k b { font-size: 14px; }
.tarjeta-k .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta-k .s { font-size: 12px; color: var(--gris); }
.columna-k.sobre { outline: 2px dashed var(--azul); }

/* POS */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; padding: 16px 20px 24px; max-width: 1500px; margin: 0 auto; }
.pos-cat { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pos-prod { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; min-height: 116px; }
.pos-prod:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.pos-prod .nom { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-prod .pre { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: auto; }
.pos-prod .stk { font-size: 12px; color: var(--gris); }
.pos-prod .stk.bajo { color: var(--rojo); font-weight: 600; }
.pos-prod .ini { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.carrito { position: sticky; top: 76px; background: var(--blanco); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 100px); }
.carrito-items { overflow: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.item-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); }
.item-c .nom { font-size: 14px; font-weight: 600; }
.item-c .sub { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.item-c .tot { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cant { display: inline-flex; align-items: center; gap: 4px; }
.cant button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--gris-claro); background: var(--blanco); font-weight: 700; }
.cant input { width: 52px; height: 32px; text-align: center; border: 1px solid var(--gris-claro); border-radius: 9px; font-variant-numeric: tabular-nums; }
.pagos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pagos button { height: 44px; border-radius: 11px; border: 1px solid var(--gris-claro); background: var(--blanco); font-size: 13px; font-weight: 600; }
.pagos button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cobrar { height: 58px; font-size: 18px; border-radius: 14px; width: 100%; }
.caja-estado { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--fondo); }
.punto-e { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-claro); }
.punto-e.on { background: var(--verde); }
.boton-carrito { display: none; }
@media (max-width: 980px) {
  .pos { grid-template-columns: 1fr; padding: 12px; }
  .carrito { position: fixed; inset: auto 0 calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)) 0; border-radius: 20px 20px 0 0; max-height: 78vh; z-index: 25; box-shadow: 0 -10px 40px rgba(0,0,0,.18); transform: translateY(110%); transition: transform .2s; }
  .carrito.abierto { transform: none; }
  .boton-carrito { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 20; height: 56px; }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding-bottom: 80px; }
}

/* Asistente de IA lateral */
.ia-flotante { position: fixed; right: 20px; bottom: calc(20px + var(--tabbar) + env(safe-area-inset-bottom, 0px)); z-index: 30; height: 52px; padding: 0 18px 0 14px; border-radius: 26px; border: 0; background: var(--tinta); color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ia-flotante:hover { background: #000; }
.ia-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--blanco); z-index: 45; box-shadow: -20px 0 50px rgba(0,0,0,.18); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .2s ease; }
.ia-panel:not(.abierto) { box-shadow: none; visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.ia-panel.abierto { transform: none; visibility: visible; }
.ia-cab { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom: 1px solid var(--linea); }
.ia-cab .t { flex: 1; min-width: 0; }
.ia-cab .t b { display: block; font-size: 16px; }
.ia-cab .t span { font-size: 12px; color: var(--gris); }
.ia-cuerpo { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--fondo); }
.ia-pie { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.ia-panel .burbuja.ia { background: var(--blanco); }
.ia-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 44; }
.chip-ia { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--azul-claro); background: var(--azul-suave); color: var(--azul-osc); font-size: 13px; font-weight: 600; }
@media (max-width: 720px) { .ia-flotante { right: 12px; height: 48px; padding: 0 14px 0 12px; } .ia-flotante span { display: none; } .ia-flotante { width: 48px; justify-content: center; padding: 0; } }
@media (max-width: 980px) { body.en-pos .ia-flotante { bottom: calc(80px + var(--tabbar) + env(safe-area-inset-bottom, 0px)); } }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--fondo); }
.login-lado { background: var(--azul); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.login-lado h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.03em; max-width: 520px; }
.login-lado p { color: var(--azul-claro); font-size: 17px; margin-top: 12px; max-width: 460px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.login-caja { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.login-caja h1 { font-size: 28px; font-weight: 800; }
.empresa-opcion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--gris-claro); border-radius: 14px; background: var(--blanco); text-align: left; font-size: 15px; }
.empresa-opcion:hover { border-color: var(--azul); }
.login .error { background: var(--rojo-suave); color: var(--rojo-osc); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-lado { padding: 24px 20px; } .login-lado .extra { display: none; } }

/* Gráfica de barras simple */
.barras-v { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; }
.barras-v .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; height: 100%; }
.barras-v .b { width: 100%; max-width: 28px; background: var(--azul); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.barras-v .b.cero { background: var(--linea); }
.barras-v .et { font-size: 10px; color: var(--gris); white-space: nowrap; }
.barra-h { display: flex; flex-direction: column; gap: 10px; }
.barra-h .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.barra-h .pista { grid-column: 1 / -1; height: 8px; background: var(--linea-suave); border-radius: 4px; overflow: hidden; }
.barra-h .pista span { display: block; height: 100%; background: var(--azul); border-radius: 4px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .totales { grid-template-columns: auto 120px; }
}
@media print {
  .topbar, .tabbar, .ia-flotante, .no-imprimir { display: none !important; }
  body { background: #fff; }
}

/* Tablas en móvil: cada fila como tarjeta */
.fila-m { align-items: stretch; }
.fila-m.clic { cursor: pointer; }
.fila-m .tit-m { font-size: 15px; line-height: 1.35; min-width: 0; word-break: break-word; }
.fila-m .linea2 { align-items: baseline; }
.fila-m .v-m { text-align: right; color: var(--tinta); min-width: 0; word-break: break-word; }
.fila-m .v-m .btn { height: 36px; }
.totales.ancha { grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; }
.totales.ancha > span { padding: 4px 0; border-bottom: 1px solid var(--linea-suave); }
.totales.ancha > .tot { border-bottom: 0; padding-top: 10px; }
.descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.descarga { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--linea); background: var(--blanco); border-radius: 14px; padding: 12px 14px; color: var(--tinta); font: inherit; cursor: pointer; }
.descarga:hover { border-color: var(--azul); }
.descarga > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.descarga b { font-size: 14px; } .descarga span span { font-size: 12px; color: var(--gris); }
.ia-resumen { border: 1px solid var(--azul-suave); }
.ia-resumen h2 { display: flex; align-items: center; gap: 8px; }
.ia-caja { background: var(--azul-suave); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ia-caja b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--azul); }
.fila-ia { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-ia input { flex: 1 1 200px; min-width: 0; height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; font-size: 15px; background: var(--blanco); }
.vista-correo { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #F2F2F7; }
.vista-correo iframe { width: 100%; height: 380px; border: 0; display: block; }
.logo-fila { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-caja { width: 88px; height: 88px; border-radius: 18px; background: var(--fondo); display: grid; place-items: center; overflow: hidden; font-size: 28px; font-weight: 800; color: var(--gris); }
.logo-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kpi.suave { background: var(--fondo); }
.entrada-sola { flex: 1 1 220px; min-width: 0; height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; font-size: 15px; }
.form-grid { margin-top: 4px; }
.pila { display: flex; flex-direction: column; gap: 24px; }
.totales.ancha { column-gap: 0; }
.totales.ancha > .der { padding-left: 16px; }
.banner-aviso { background: var(--ambar-suave); color: var(--ambar-osc); } .banner-aviso .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .banner-aviso .txt span { color: var(--ambar-osc); opacity: .85; }
.resumen-dia { border: 1px solid var(--azul-suave); } .resumen-dia h2 { display: flex; align-items: center; gap: 8px; } .resumen-dia .msg-prev { font-size: 14px; line-height: 1.5; max-height: 320px; overflow: auto; }
/* Primeros pasos */
.guia { background: var(--blanco); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.guia-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.guia-cab b { display: block; font-size: 16px; } .guia-cab span { font-size: 13px; color: var(--gris); }
.guia-barra { height: 8px; border-radius: 4px; background: var(--linea-suave); overflow: hidden; }
.guia-barra span { display: block; height: 100%; background: var(--verde); border-radius: 4px; transition: width .3s; }
.guia-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.guia-pasos a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--tinta); border: 1px solid var(--linea); }
.guia-pasos a:hover { border-color: var(--azul); }
.guia-pasos .check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gris-claro); flex: 0 0 auto; display: grid; place-items: center; }
.guia-pasos .hecho .check { background: var(--verde); border-color: var(--verde); }
.guia-pasos .hecho a { opacity: .6; }
.guia-pasos .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .guia-pasos .t b { font-size: 14px; } .guia-pasos .t span { font-size: 12px; color: var(--gris); }
.guia-sig { margin: 0; font-size: 14px; } .guia-sig a { font-weight: 600; }
@media (max-width: 720px) { .guia-pasos .hecho { display: none; } }
.sel-per { height: 44px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; background: var(--blanco); font-size: 14px; }
.pos-red { border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; } .pos-red.off { background: var(--rojo-suave); color: var(--rojo-osc); } .pos-red.pend { background: var(--ambar-suave); color: var(--ambar-osc); }

/* ═══════════════ Conversaciones (Discuss + WhatsApp) ═══════════════ */
@media (max-width: 720px) { .tabbar { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; } }
.disc { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 66px); background: var(--blanco); overflow: hidden; }
.disc-lado { border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; background: #FAFAFC; }
.disc-buscar { padding: 12px; border-bottom: 1px solid var(--linea); }
.disc-buscar .buscar-lista { display: flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 12px; height: 40px; }
.disc-buscar input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; font-size: 14px; }
.disc-scroll { overflow-y: auto; flex: 1; padding: 6px 8px 24px; }
.disc-sec { margin-top: 10px; }
.disc-sec-t { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; gap: 6px; }
.disc-sec-t > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.disc-sec-t .estado { text-transform: none; letter-spacing: 0; font-size: 11px; }
.disc-sec-t .icono-mini { width: 28px; height: 28px; }
.disc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--tinta); position: relative; }
.disc-item:hover { background: var(--linea-suave); color: var(--tinta); }
.disc-item.activo { background: var(--azul-suave); }
.disc-item .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.disc-item .t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-item.canal .t b { font-weight: 500; } .disc-item.sin-leer .t b { font-weight: 700; }
.disc-item .l1, .disc-item .l2 { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-width: 0; }
.disc-item .h { font-size: 11px; color: var(--gris); flex: 0 0 auto; }
.disc-item .u { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-item .nl { background: var(--azul); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; flex: 0 0 auto; }
.disc-item .hash { width: 28px; text-align: center; color: var(--gris); font-weight: 600; display: grid; place-items: center; }
.disc-item .avatar, .disc-cab .avatar { width: 34px; height: 34px; font-size: 12px; }
.avatar.nodus { background: var(--azul); }
.chip-est { align-self: flex-start; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; margin-top: 2px; }
.chip-est.ia { background: var(--azul-suave); color: var(--azul); } .chip-est.humano { background: var(--ambar-suave); color: var(--ambar-osc); } .chip-est.cerrada { background: var(--linea-suave); color: var(--gris); }
.disc-vacio { font-size: 13px; color: var(--gris); padding: 6px 10px; margin: 0; line-height: 1.5; }
.btn-link { border: 0; background: none; color: var(--azul); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.disc-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.disc-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.disc-cab .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .disc-cab .tt b { font-size: 16px; } .disc-cab .tt > span { font-size: 13px; color: var(--gris); }
.disc-cab .acciones { gap: 6px; }
.disc-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.disc-msgs .mas-antiguos { align-self: center; }
.dia { display: flex; justify-content: center; margin: 12px 0 6px; } .dia span { font-size: 12px; font-weight: 600; color: var(--gris); background: var(--linea-suave); padding: 3px 10px; border-radius: 10px; }
.msg { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.msg:hover { background: #FAFAFC; }
.msg .avatar { width: 36px; height: 36px; font-size: 12px; flex: 0 0 auto; }
.msg .cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.msg .quien { display: flex; gap: 8px; align-items: baseline; } .msg .quien b { font-size: 14px; } .msg .h { font-size: 11px; color: var(--gris); }
.msg .txt { font-size: 15px; line-height: 1.5; word-break: break-word; }
.msg.ia .cuerpo { background: var(--azul-suave); border-radius: 12px; padding: 8px 12px; }
.msg .acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.msg.sistema { align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gris); padding: 6px 10px; background: #F7F9FF; border-left: 3px solid var(--azul); border-radius: 0 10px 10px 0; margin: 2px 0; }
.msg.sistema .sis-ico { margin-top: 2px; }
.mencion { background: var(--azul-suave); color: var(--azul); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.adj-img { max-width: min(320px, 100%); max-height: 260px; border-radius: 10px; border: 1px solid var(--linea); display: block; }
.adj-arch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font-size: 14px; text-decoration: none; color: var(--tinta); max-width: 100%; align-self: flex-start; }
.adj-arch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adj-arch small { color: var(--gris); }
.disc-nota { font-size: 13px; color: var(--gris); background: var(--fondo); padding: 8px 18px; border-top: 1px solid var(--linea); }
.disc-nota.ambar { background: var(--ambar-suave); color: var(--ambar-osc); }
.disc-comp { border-top: 1px solid var(--linea); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--blanco); }
.disc-comp .fila { display: flex; align-items: flex-end; gap: 8px; }
.disc-comp .caja-txt { flex: 1; min-width: 0; position: relative; border: 1px solid var(--gris-claro); border-radius: 14px; background: var(--blanco); }
.disc-comp .caja-txt:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.disc-comp textarea { width: 100%; border: 0; outline: none; resize: none; padding: 11px 14px; font-size: 15px; line-height: 1.4; background: transparent; max-height: 160px; display: block; }
.disc-comp .enviar { width: 46px; height: 46px; padding: 0; border-radius: 14px; flex: 0 0 auto; }
.disc-comp .adj { width: 46px; height: 46px; flex: 0 0 auto; cursor: pointer; }
.adj-prev { font-size: 13px; padding: 8px 12px 0; color: var(--gris); display: flex; align-items: center; gap: 6px; } .adj-prev button { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--gris); }
.menc-pop { position: absolute; bottom: calc(100% + 6px); left: 0; width: min(360px, 100%); background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 5; display: flex; flex-direction: column; }
.menc-pop button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }
.menc-pop button.activo, .menc-pop button:hover { background: var(--azul-suave); }
.menc-pop .avatar { width: 26px; height: 26px; font-size: 10px; } .menc-pop b { font-size: 14px; } .menc-pop span:last-child { font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-bienvenida { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 20px; max-width: 720px; }
.disc-bienvenida h2 { font-size: 24px; letter-spacing: -.01em; } .disc-bienvenida p { color: var(--gris); margin: 0; max-width: 520px; }
.tile-g { width: 76px; height: 76px; border-radius: 22px; background: #7C3AED; display: grid; place-items: center; box-shadow: var(--sombra); }
/* WhatsApp */
.disc-msgs.wa { background: #EFEAE2; gap: 6px; }
.burbuja-wa { max-width: min(560px, 82%); padding: 7px 10px 5px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; box-shadow: 0 1px .5px rgba(0,0,0,.13); word-break: break-word; }
.burbuja-wa.in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.burbuja-wa.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 2px; }
.burbuja-wa.out.ia { background: #E1ECFF; }
.burbuja-wa .autor { font-size: 11px; font-weight: 700; color: var(--azul); display: flex; align-items: center; gap: 4px; }
.burbuja-wa.usuario .autor { color: var(--verde-osc); }
.burbuja-wa .meta { align-self: flex-end; font-size: 11px; color: #667781; }
.wa-sis { align-self: center; background: #FFF6D6; color: #6B5600; font-size: 12px; padding: 5px 10px; border-radius: 8px; text-align: center; max-width: 90%; }
.sim-tel { border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.sim-chat { background: #EFEAE2; height: 320px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sim-sug { display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: #F7F7F7; } .sim-sug .chip { flex: 0 0 auto; font-size: 13px; }
.sim-form { display: flex; gap: 8px; padding: 8px; background: #F0F2F5; } .sim-form input { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 22px; padding: 0 16px; font-size: 15px; } .sim-form .btn { width: 44px; height: 44px; padding: 0; border-radius: 22px; }
/* Comentarios en registros */
.chatter-lista { display: flex; flex-direction: column; gap: 4px; }
.chatter-form { display: flex; gap: 8px; align-items: flex-end; } .chatter-form textarea { flex: 1; min-width: 0; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 10px 12px; font-size: 14px; resize: vertical; }
@media (max-width: 980px) {
  .disc { grid-template-columns: 1fr; }
  .disc .disc-main { display: none; } .disc.con-sel .disc-lado { display: none; } .disc.con-sel .disc-main { display: flex; }
  .disc-cab { padding: 10px 12px; } .disc-msgs { padding: 12px; } .disc-cab .acciones .btn span { display: none; }
}
.wa-estado { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.wa-estado .wa-ico { width: 56px; height: 56px; border-radius: 16px; background: #8E8E93; display: grid; place-items: center; flex: 0 0 auto; }
.wa-estado.ok .wa-ico { background: #25D366; }
.wa-estado b { display: block; font-size: 17px; } .wa-estado span { font-size: 14px; color: var(--gris); }
.wa-conectar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #E9FBEF; border-radius: 14px; padding: 16px; }
.wa-conectar > div { flex: 1; min-width: 220px; } .wa-conectar b { display: block; } .wa-conectar span { font-size: 14px; color: var(--gris); }
.wa-hook { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; }
.wa-hook > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wa-hook .et { font-size: 12px; color: var(--gris); font-weight: 600; }
.wa-hook code { font-size: 13px; word-break: break-all; }
details > summary { cursor: pointer; font-weight: 600; color: var(--azul); margin: 6px 0; }
details[open] { display: flex; flex-direction: column; gap: 14px; }
/* Prospectos */
.pros-buscar { display: flex; gap: 8px; flex-wrap: wrap; }
.pros-buscar input { flex: 1 1 220px; min-width: 0; height: 46px; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 0 14px; font-size: 15px; }
.pros-lista { display: flex; flex-direction: column; gap: 12px; }
.pros { display: flex; gap: 16px; border: 1px solid var(--linea); border-radius: 16px; padding: 16px; }
.pros-pt { --p: 50; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--blanco) 78%, transparent 80% 100%), conic-gradient(var(--verde) calc(var(--p) * 1%), var(--linea-suave) 0); }
.pros-pt b { font-size: 18px; line-height: 1; } .pros-pt span { font-size: 10px; color: var(--gris); }
.pros-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pros-info h3 { font-size: 16px; } .pros-info p { margin: 0; font-size: 14px; }
.pros-datos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pros-razon { color: var(--azul) !important; display: flex; gap: 6px; align-items: flex-start; }
.pros .editor { width: 100%; border: 1px solid var(--gris-claro); border-radius: 12px; padding: 10px 12px; font-size: 14px; resize: vertical; }
@media (max-width: 600px) { .pros { flex-direction: column; } }
.form-grid > .form-grid { grid-column: 1 / -1; margin-top: 0; }
.disc-lado, .disc-main { min-width: 0; }
@media (max-width: 980px) { .disc { grid-template-columns: minmax(0, 1fr); } }
.opciones-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .opciones-2 .prov-caja span { font-size: 13px; line-height: 1.45; }

/* Idioma del sistema */
.selector-idioma { display: flex; gap: 10px; flex-wrap: wrap; }
.opcion-idioma { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 160px; border-radius: 12px; border: 1.5px solid var(--gris-claro); background: var(--blanco); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.opcion-idioma .bandera { font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px; border-radius: 6px; background: var(--fondo); }
.opcion-idioma.activa { border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }
.opcion-idioma.activa .bandera { background: var(--azul); color: #fff; }
.opcion-idioma:disabled { cursor: default; opacity: .7; }
@media (max-width: 520px) { .opcion-idioma { flex: 1 1 0; min-width: 0; } }

.login-lado { background: linear-gradient(150deg, #1E5378 0%, #2E6E97 50%, #2F9A85 100%); }
.login-lado p { color: #D7F1E4; }
.login-lado .logo { box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }

/* ───────── Logo NodusERP (N con nodo) ───────── */
.logo { background: linear-gradient(to bottom left, #58C887 0%, #3DA48B 50%, #2E6E97 100%) !important; color: #fff !important; border-radius: 24% !important; display: grid !important; place-items: center; overflow: hidden; font-size: 0 !important; flex: none; }
.logo svg { width: 64%; height: 64%; overflow: visible; display: block; }
.logo .t { fill: none; stroke: #fff; stroke-width: 17; stroke-linejoin: round; }
.logo .nd { fill: #fff; transform-box: view-box; transform-origin: 50px 50px; }
@keyframes nodus-trazo { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes nodus-nodo { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes nodus-pulso { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
@keyframes nodus-brillo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.logo-anima .t { stroke-dasharray: 100; animation: nodus-trazo .8s cubic-bezier(.65, 0, .25, 1) .1s both; }
.logo-anima .t2 { animation-delay: .3s; }
.logo-anima .nd { animation: nodus-nodo .5s cubic-bezier(.3, 1.4, .5, 1) .95s both; }
a.marca:hover .logo .nd, .marca:hover .logo .nd { animation: nodus-pulso .6s ease; }

/* ───────── Animaciones de la app ───────── */
@keyframes nodus-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nodus-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes nodus-escala { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nodus-sube { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
#vista[data-anima] .contenido > * { animation: nodus-entra .4s cubic-bezier(.2, .7, .2, 1) both; }
#vista[data-anima] .contenido > *:nth-child(2) { animation-delay: .04s; } #vista[data-anima] .contenido > *:nth-child(3) { animation-delay: .08s; } #vista[data-anima] .contenido > *:nth-child(4) { animation-delay: .12s; } #vista[data-anima] .contenido > *:nth-child(n+5) { animation-delay: .16s; }
.modal-fondo { animation: nodus-aparece .18s ease both; }
.modal { animation: nodus-escala .24s cubic-bezier(.2, .8, .2, 1) both; }
.toast { animation: nodus-sube .25s cubic-bezier(.2, .8, .2, 1) both; }
.kpi, .tarjeta, .prov-caja { transition: transform .18s ease, box-shadow .18s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 24, 39, .08); }
.modulo .tile { transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease; }
.modulo:hover .tile { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 22px rgba(17, 24, 39, .16); }
.modulo:active .tile { transform: scale(.96); }
.btn { transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.login-lado { background-size: 200% 200% !important; animation: nodus-brillo 12s ease-in-out infinite alternate; }
.login-form, .login form { animation: nodus-entra .45s cubic-bezier(.2, .7, .2, 1) .1s both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* Marca: degradado del logo en las superficies destacadas */
a.banner:not(.banner-aviso) { background: linear-gradient(120deg, #1E5378 0%, #2E6E97 55%, #2F9A85 100%) !important; }
a.banner:not(.banner-aviso):hover { background: linear-gradient(120deg, #1B4A6B 0%, #285F83 55%, #2A8B78 100%) !important; }

/* Login en celular: banda de marca compacta (antes ocupaba media pantalla vacía) */
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100dvh; }
  .login-lado { padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 26px; gap: 18px; justify-content: flex-start; }
  .login-lado div.extra { display: block; }
  .login-lado span.extra { display: none; }
  .login-lado h2 { font-size: 30px; line-height: 1.05; }
  .login-lado p { font-size: 15px; margin-top: 8px; }
  .login-form { align-items: flex-start; padding: 28px 20px 32px; }
}