/* ============================================================
   NFTech · Gestión Local — estilos globales
   Paleta heredada de los forms originales.
   ============================================================ */
:root{
  --navy:#1D3557; --accent:#457B9D; --light:#A8DADC; --pale:#F1FAEE;
  --red:#E63946; --green:#2A9D8F; --amber:#E9A100; --line:#dfe6e9;
  --ink:#22303a; --muted:#7a8894; --bg:#eef2f5; --card:#ffffff;
  --shadow:0 1px 3px rgba(29,53,87,.08), 0 6px 18px rgba(29,53,87,.06);
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{color:var(--navy); margin:0 0 .5rem;}
.signo-peso{font-size:.82em; color:#8aa; margin-inline-end:2px; font-weight:400;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; background:var(--navy); color:#fff;
  padding:0 18px; height:56px; position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.brand{display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:18px;}
.brand:hover{text-decoration:none;}
.brand-ic{font-size:20px;}
.mainnav{display:flex; gap:2px; flex:1; flex-wrap:wrap;}
.mainnav .nav{
  color:#cfe0e6; padding:8px 12px; border-radius:8px; font-weight:600; font-size:13.5px;
}
.mainnav .nav:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none;}
.mainnav .nav.active{background:var(--accent); color:#fff;}
.topright{display:flex; align-items:center; gap:10px;}
.who{color:#cfe0e6; font-size:13px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.burger{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer;}

/* ---------- Menú agrupado (desplegables) ---------- */
.navgroup{position:relative;}
.navgroup-btn{
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:#cfe0e6; padding:8px 12px; border-radius:8px; font-weight:600; font-size:13.5px;
  display:flex; align-items:center; gap:5px;
}
.navgroup-btn:hover{background:rgba(255,255,255,.10); color:#fff;}
.navgroup-btn .caret{font-size:10px; opacity:.8; transition:transform .15s;}
.navgroup.active > .navgroup-btn{background:var(--accent); color:#fff;}
.dropdown{
  position:absolute; top:calc(100% + 4px); left:0; min-width:190px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(29,53,87,.18); padding:6px; z-index:60;
  display:none; flex-direction:column; gap:2px;
}
.navgroup.open > .dropdown{display:flex;}
.navgroup.open .navgroup-btn .caret{transform:rotate(180deg);}
.dropdown a{
  color:var(--navy); padding:8px 12px; border-radius:7px; font-weight:600;
  font-size:13.5px; white-space:nowrap;
}
.dropdown a:hover{background:var(--bg); text-decoration:none;}
.dropdown a.active{background:var(--accent); color:#fff;}
/* Hover sólo en dispositivos con puntero real (evita quedar abierto al tocar) */
@media (hover:hover){
  .navgroup:hover > .dropdown{display:flex;}
  .navgroup:hover .navgroup-btn .caret{transform:rotate(180deg);}
}

/* ---------- Layout ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:22px 18px 60px;}
.pagehead{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.pagehead h1{font-size:22px; margin:0;}
.pagehead .sub{color:var(--muted); font-size:13px; margin-top:2px;}

/* ---------- Cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:18px;}
.card h2{font-size:16px;}
.card-tit{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:12px;}

/* Card colapsable: el título hace de botón para mostrar/ocultar el contenido. */
.card-tit.toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none;}
.card-tit.toggle .chev{flex:0 0 auto; font-size:11px; color:var(--muted); transition:transform .18s;}
.card.collapsed .card-tit.toggle{margin-bottom:0;}
.card.collapsed .card-tit.toggle .chev{transform:rotate(-90deg);}
.card.collapsed .card-body{display:none;}

/* Configuración: grilla fija de 3 columnas (cada caja = 1/3, incluida la última
   aunque quede sola en su fila). Baja a 2 y 1 columnas en pantallas angostas. */
.config-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start;}
.config-grid > .card{margin-bottom:0;}
@media(max-width:860px){ .config-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .config-grid{grid-template-columns:1fr;} }

/* ---------- Grid de KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px;}
.kpi{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);}
.kpi .lbl{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em;}
.kpi .val{font-size:24px; font-weight:800; color:var(--navy); margin-top:4px;}
.kpi.green{border-left-color:var(--green);} .kpi.green .val{color:var(--green);}
.kpi.red{border-left-color:var(--red);} .kpi.red .val{color:var(--red);}
.kpi.amber{border-left-color:var(--amber);} .kpi.amber .val{color:var(--amber);}
.kpi .note{font-size:11px; color:var(--muted); margin-top:2px;}
/* KPI clickeable (dashboard): linkea a su página */
a.kpi{display:block; text-decoration:none; transition:transform .12s, box-shadow .12s;}
a.kpi:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,53,87,.14); text-decoration:none;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; border:none; border-radius:9px;
  padding:9px 15px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:filter .12s, transform .02s; white-space:nowrap;
}
.btn:hover{filter:brightness(1.06); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-save{background:var(--green); color:#fff;}
.btn-danger{background:var(--red); color:#fff;}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff;}
.btn-light{background:var(--light); color:var(--navy);}
.btn-soft{background:#eef3f6; color:var(--navy); border:1px solid var(--line);}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:7px;}
.btn-icon{padding:6px 9px; font-size:14px; line-height:1;}

/* ---------- Formularios ---------- */
.row{display:flex; gap:12px; flex-wrap:wrap;}
.field{flex:1; min-width:150px; margin-bottom:12px;}
.field.sm{flex:0 0 130px; min-width:120px;}
label{display:block; font-weight:700; color:var(--navy); margin-bottom:5px; font-size:12.5px;}
input,select,textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; background:#fff; font-family:inherit; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--light); border-color:var(--accent);}
input[readonly]{background:#f3f6f8; color:var(--muted);}
.hint{font-size:11.5px; color:var(--muted); margin-top:3px;}

/* Campo de fecha con botón calendario */
.datewrap{display:flex; gap:6px; align-items:stretch;}
.datewrap input[type=text]{flex:1; font-variant-numeric:tabular-nums; letter-spacing:1px;}
.datewrap .caldot{flex:0 0 auto; width:40px; border:1px solid var(--line); background:#eef3f6; border-radius:8px; cursor:pointer; font-size:16px;}
.datewrap input[type=date]{position:absolute; opacity:0; width:0; height:0; pointer-events:none;}

/* ---------- Tablas ---------- */
.tablewrap{overflow-x:auto; border-radius:var(--radius);}
table.grid{width:100%; border-collapse:collapse; background:var(--card); font-size:13.5px;}
table.grid th,table.grid td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap;}
table.grid th{background:#f4f8fa; color:var(--navy); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; position:sticky; top:0;}
table.grid tbody tr:hover{background:#f7fbfc;}
table.grid td.num,table.grid th.num{text-align:right; font-variant-numeric:tabular-nums;}
table.grid td.wrap{white-space:normal; min-width:180px;}
table.grid .row-click{cursor:pointer;}
.empty{padding:26px; text-align:center; color:var(--muted);}

/* ---------- Badges ---------- */
.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; color:#fff; white-space:nowrap;}
.badge.ok{background:var(--green);}
.badge.pend{background:var(--red);}
.badge.warn{background:var(--amber);}
.badge.info{background:var(--accent);}
.badge.mut{background:#9fb0bb;}
.badge-out{background:#fff; border:1px solid currentColor; color:var(--muted);}

/* ---------- Mensajes ---------- */
.msg{padding:11px 14px; border-radius:9px; margin-bottom:14px; font-size:13px; display:none;}
.msg.show{display:block;}
.msg.err{background:#fdecea; color:#b3261e; border:1px solid #f5c6cb; display:block;}
.msg.ok{background:#d5f5e3; color:#1e7d5e; border:1px solid #abebc6; display:block;}
.msg.warn{background:#fff3b0; color:#8a6d0a; border:1px solid #f0e0a0; display:block;}
.msg.info{background:#eaf2f8; color:#2c5d7c; border:1px solid #aed0e6; display:block;}

/* ---------- Líneas dinámicas (orden/venta) ---------- */
.linea{border:1px solid var(--line); border-radius:10px; padding:12px 12px 2px; margin-bottom:12px; background:#fbfdfe; position:relative;}
.linea .num{position:absolute; top:-9px; left:12px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:1px 9px; border-radius:10px;}
.linea .del{position:absolute; top:8px; right:8px; background:none; border:none; color:var(--red); cursor:pointer; font-size:17px; line-height:1;}
.lineas-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px;}
.footer-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; flex-wrap:wrap;}
.total-big{font-size:15px; color:var(--navy);} .total-big b{font-size:22px;}

/* ---------- Toolbar/búsqueda ---------- */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.toolbar .search{flex:1; min-width:200px; position:relative;}
.toolbar .search input{padding-left:34px;}
.toolbar .search::before{content:"🔎"; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6;}
.filtros{display:flex; gap:8px; flex-wrap:wrap;}
/* Selector con label en línea dentro de la toolbar (queda a la misma altura que
   la búsqueda y los chips; el label arriba descolocaba la fila). */
.tb-sel{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.tb-sel .tb-lbl{font-weight:700; color:var(--navy); font-size:12.5px; white-space:nowrap;}
.tb-sel select{width:auto; min-width:160px;}
.chip{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:20px; padding:5px 13px; font-size:12.5px; font-weight:600; cursor:pointer;}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy);}

/* ---------- Selección en lote (facturar varias órdenes juntas) ---------- */
table.grid th.selcell,table.grid td.selcell{width:36px; padding-left:12px; padding-right:0; text-align:center;}
table.grid .selcell input[type=checkbox]{width:16px; height:16px; cursor:pointer; accent-color:var(--accent); margin:0;}
.selbar{
  /* top:64px = 56px del topbar + 8px de aire; así queda fija debajo del topbar,
     no detrás. z-index bajo el topbar (50) pero sobre la grilla. */
  position:sticky; top:64px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--navy); color:#fff; border-radius:var(--radius);
  padding:11px 16px; margin-bottom:12px; box-shadow:var(--shadow);
}
.selbar .selbar-info{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; font-size:13.5px;}
.selbar .selbar-tot{font-size:15px;}
.selbar .selbar-tot b{font-size:20px; font-weight:800;}
.selbar.hidden{display:none;}

/* La grilla de órdenes scrollea sola: el encabezado (búsqueda, filtros, total y
   botones de acción) queda fijo, y la fila de columnas se pega arriba de la grilla.
   El alto se calcula desde el viewport menos lo que hay encima (topbar + toolbars). */
.grid-scroll{max-block-size:calc(100vh - 250px); min-block-size:280px; overflow:auto;}
.grid-scroll table.grid th{top:0; z-index:2;}   /* thead pegado dentro del scroll */

/* ---------- Messagebox modal ---------- */
.mb-overlay{position:fixed; inset:0; background:rgba(20,32,45,.55); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .16s; z-index:1000;}
.mb-overlay.open{opacity:1; pointer-events:auto;}
.mb-box{background:#fff; border-radius:14px; width:min(420px,100%); padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; transform:translateY(8px); transition:transform .16s;}
.mb-overlay.open .mb-box{transform:none;}
.mb-ico{font-size:34px; margin-bottom:6px;}
.mb-title{font-size:17px; font-weight:800; color:var(--navy); margin-bottom:6px;}
.mb-msg{font-size:14px; color:var(--ink); margin-bottom:18px;}
.mb-actions{display:flex; gap:10px; justify-content:center;}

/* ---------- Toasts ---------- */
.toast-wrap{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:1100;}
.toast{background:var(--navy); color:#fff; padding:11px 16px; border-radius:10px; font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transform:translateX(20px); transition:opacity .2s, transform .2s;}
.toast.show{opacity:1; transform:none;}
.toast.ok{background:var(--green);} .toast.err{background:var(--red);} .toast.warn{background:var(--amber); color:#3a2d00;}

/* ---------- Modal genérico (detalle orden, etc.) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(20,32,45,.5); display:none; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto; z-index:900;}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:14px; width:min(680px,100%); box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal.modal-lg{width:min(880px,100%);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.modal-head h3{margin:0; font-size:17px;}
.modal-body{padding:20px;}
.modal-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.x-close{background:none; border:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1;}

/* ---------- Login ---------- */
.login-bg{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy),var(--accent)); padding:20px;}
.login-card{background:#fff; border-radius:16px; width:min(400px,100%); padding:30px 28px; box-shadow:0 24px 70px rgba(0,0,0,.35);}
.login-card .logo{text-align:center; font-size:40px; margin-bottom:4px;}
.login-card h1{text-align:center; font-size:22px; margin-bottom:2px;}
.login-card .tag{text-align:center; color:var(--muted); font-size:13px; margin-bottom:22px;}

/* ---------- Utilidades ---------- */
.muted{color:var(--muted);} .red{color:var(--red);} .green{color:var(--green);}
.tright{text-align:right;} .tcenter{text-align:center;}
.mt0{margin-top:0;} .mb0{margin-bottom:0;} .nowrap{white-space:nowrap;}
.flexspace{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.hidden{display:none !important;}

/* ---------- Mayorista: teléfonos y pagos del lote ---------- */
.tel-list{display:flex; flex-direction:column; gap:10px;}
.tel-card{border:1px solid var(--line); border-radius:10px; background:#fbfdfe; overflow:hidden;}
.tel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:#f4f8fa; border-bottom:1px solid var(--line);}
.tel-head .tel-tot{margin-inline-start:10px; font-size:15px;}
.tel-head .muted{margin-inline-start:8px; font-size:12px;}
.tel-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
table.grid.mini{font-size:12.5px;}
table.grid.mini td{padding:6px 12px;}
.pago-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px dashed var(--line);}
.pago-form .field{margin:0;}
.pill-list{display:flex; gap:6px; flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .mainnav{position:absolute; top:56px; left:0; right:0; background:var(--navy); flex-direction:column; padding:8px; gap:4px; display:none;}
  .mainnav.open{display:flex;}
  .burger{display:block;}
  .who{display:none;}
  /* Grupos apilados: el desplegable se abre inline (no flotante) */
  .navgroup{width:100%;}
  .navgroup-btn{width:100%; justify-content:space-between;}
  .dropdown{
    position:static; box-shadow:none; border:none; border-radius:0;
    background:rgba(255,255,255,.06); padding:2px 2px 2px 14px; margin-top:2px; min-width:0;
  }
  .dropdown a{color:#cfe0e6;}
  .dropdown a:hover{background:rgba(255,255,255,.10); color:#fff;}
}