:root{
  /* Marca (uva) como acento, no como fondo pesado */
  --vino:#7d1635; --vino2:#9c2a4e; --vino-soft:#f7eef1;
  /* Neutros modernos */
  --bg:#f6f6f7; --card:#ffffff; --line:#ececec; --line2:#f1f1f2;
  --texto:#1d1d1f; --gris:#86868b;
  /* Semánticos */
  --ok:#127a52; --ok-bg:#e7f5ee;
  --pend:#9a6b00; --pend-bg:#fbf1d8;
  --rojo:#b3261e; --rojo-bg:#fbe7e6;
  --azul:#2b5fa6; --azul-bg:#e8f0fb;
  --radio:14px; --radio-s:10px;
  --sombra:0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--texto);font-size:15.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---- Cabecera: blanca, limpia, con hairline ---- */
header{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);padding:11px 22px;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
header h1{font-size:16px;margin:0 14px 0 0;font-weight:700;letter-spacing:-.2px;color:var(--vino)}
header a{color:var(--gris);text-decoration:none;font-weight:500;font-size:14px;
  padding:6px 11px;border-radius:8px;transition:background .15s,color .15s}
header a:hover{background:var(--line2);color:var(--texto)}
header a.activo{background:var(--vino-soft);color:var(--vino);font-weight:600}

/* etiqueta de sección en el menú */
header .sep{color:var(--gris);opacity:.7;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;padding:0 6px 0 12px;align-self:center}

main{max-width:1080px;margin:30px auto;padding:0 20px}
h2{color:var(--texto);margin:0 0 14px;font-size:20px;font-weight:650;letter-spacing:-.3px}
h2:first-child{margin-top:0}
a{color:var(--vino)}

/* ---- Tarjetas ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
  padding:22px;margin-bottom:18px;box-shadow:var(--sombra)}

/* ---- Formularios ---- */
label{display:block;font-weight:600;margin:12px 0 5px;font-size:13px;color:var(--texto)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radio-s);font-size:15px;background:#fff;font-family:inherit;
  color:var(--texto);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vino);
  box-shadow:0 0 0 3px var(--vino-soft)}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--vino);cursor:pointer}

/* ---- Botones ---- */
.btn{display:inline-block;background:var(--vino);color:#fff;border:0;
  padding:10px 17px;border-radius:var(--radio-s);font-size:14.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:background .15s,transform .05s;line-height:1.2}
.btn:hover{background:var(--vino2)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--vino);border:1px solid var(--line)}
.btn.sec:hover{background:var(--vino-soft);border-color:var(--vino-soft)}
.btn.gris{background:#f0f0f1;color:#444}
.btn.gris:hover{background:#e7e7e9}
.btn.rojo{background:#fff;color:var(--rojo);border:1px solid #f0d3d1}
.btn.rojo:hover{background:var(--rojo-bg)}
.btn.peq{padding:6px 12px;font-size:13px;border-radius:8px}

/* ---- Layout helpers ---- */
.fila{display:flex;gap:14px;flex-wrap:wrap}
.fila>div{flex:1;min-width:140px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* ---- Tablas ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line2)}
thead th{color:var(--gris);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tr:hover td{background:#fafafa}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- Etiquetas (pills) ---- */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;
  font-weight:600;line-height:1.5}
.tag.pagado{background:var(--ok-bg);color:var(--ok)}
.tag.pendiente{background:var(--pend-bg);color:var(--pend)}
.tag.banco{background:var(--azul-bg);color:var(--azul)}

/* ---- Avisos ---- */
.aviso{padding:12px 16px;border-radius:var(--radio-s);margin-bottom:16px;
  font-weight:500;font-size:14.5px;border:1px solid transparent}
.aviso.ok{background:var(--ok-bg);color:var(--ok);border-color:#cfeadd}
.aviso.warn{background:var(--pend-bg);color:#8a5a00;border-color:#f0e0b8}
.aviso.error,.aviso.rojo{background:var(--rojo-bg);color:var(--rojo);border-color:#f2cfcd}

/* ---- Texto auxiliar ---- */
.mini{font-size:13px;color:var(--gris);line-height:1.5}
.preview{max-width:100%;border:1px solid var(--line);border-radius:var(--radio-s)}

/* ---- KPIs / tarjetas de resumen ---- */
.tarjetas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.kpi{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radio);padding:16px;box-shadow:var(--sombra)}
.kpi .n{font-size:18px;font-weight:700;color:var(--texto);letter-spacing:-.3px;white-space:nowrap}
.kpi .t{font-size:12.5px;color:var(--gris);font-weight:500;margin-top:2px}

/* ---- Otros ---- */
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.bloque-factura{border:1px solid var(--line);border-radius:var(--radio);padding:16px;
  margin-bottom:16px;background:var(--card);box-shadow:var(--sombra)}
.dup{color:var(--rojo);font-weight:600;font-size:13px}

/* ============ MENÚ COLAPSABLE + RESPONSIVO (CELULAR) ============ */
/* En escritorio el menú se ve igual que antes (fila que se acomoda). */
#menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1}
.navtoggle{display:none;align-items:center;gap:7px;margin-left:auto;
  background:var(--vino-soft);color:var(--vino);border:1px solid var(--line);
  padding:8px 14px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;line-height:1}
.navtoggle:active{transform:translateY(1px)}
/* Con el menú abierto en celular, el fondo NO se desliza (solo se desliza el menú),
   y se oculta el contenido de atrás para que no se vea moverse. */
body.nav-lock{overflow:hidden}
body.nav-lock main{display:none}

/* En celular/tablet el menú se esconde tras el botón ☰ y se despliega en columna. */
@media(max-width:820px){
  body{zoom:.85}                 /* todo ~15% más chico en celular (pedido de José) */
  header{padding:9px 14px;gap:4px;z-index:250}
  .navtoggle{display:inline-flex}
  #menu{display:none}
  /* Menú abierto: panel en columna que se desliza SOLO (sus títulos); el fondo queda oculto y
     quieto. (No se usa position:fixed porque el zoom del celular le rompe el alto.) */
  /* Menú abierto: TODO en una sola pantalla → 2 columnas compactas; los separadores de
     sección ocupan el ancho completo. El fondo queda oculto y quieto (body.nav-lock). */
  #menu.abierto{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;align-content:start;
    flex-basis:100%;max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;margin-top:6px;background:#fff}
  #menu a{font-size:14.5px;padding:9px 10px;border-radius:8px}
  #menu a[style*="margin-left:auto"]{margin-left:0 !important}
  #menu .sep{grid-column:1/-1;padding:9px 6px 2px;margin-top:4px;border-top:1px solid var(--line)}
  main{margin:16px auto;padding:0 13px}
  h2{font-size:18px}
  .card{padding:16px}
  /* NADA se desborda a los lados: cada tabla se APILA hacia abajo (una tarjeta por fila),
     así en el celular todo se ve para abajo sin tener que mover la pantalla de lado. */
  main,.card{overflow-x:hidden}
  table{display:block;width:100%;font-size:13px}
  thead{display:none}
  tbody,tr,td,th{display:block;width:auto}
  tbody tr{border:1px solid var(--line);border-radius:10px;padding:8px 11px;
    margin-bottom:8px;background:var(--card)}
  td,th{text-align:left !important;padding:4px 0 !important;border:0 !important}
  td input,td select,td textarea{width:100% !important;box-sizing:border-box}
  td:empty{display:none}   /* celdas vacías no ocupan renglón (menos ruido en tablas anchas) */
  /* Estado de cuenta de un cliente: NO se apila — TABLA COMPACTA que cabe en una pantalla
     (para tomarle screenshot y mandársela al cliente). Solo Fecha, Factura, Total y Saldo. */
  table.ec-tabla{display:table !important;font-size:12.5px}
  table.ec-tabla thead{display:table-header-group !important}
  table.ec-tabla tbody{display:table-row-group !important}
  table.ec-tabla tr{display:table-row !important;border:0 !important;border-radius:0 !important;
    margin:0 !important;padding:0 !important;background:none !important}
  table.ec-tabla th,table.ec-tabla td{display:table-cell !important;border:0 !important;
    border-bottom:1px solid var(--line2) !important;padding:5px 5px !important;
    text-align:left !important;white-space:nowrap}
  table.ec-tabla th:nth-child(2),table.ec-tabla td:nth-child(2),
  table.ec-tabla th:nth-child(6),table.ec-tabla td:nth-child(6){display:none !important}
  table.ec-tabla th:nth-child(4),table.ec-tabla td:nth-child(4),
  table.ec-tabla th:nth-child(5),table.ec-tabla td:nth-child(5){text-align:right !important}
  .ec-wrap{overflow-x:hidden !important}
}
/* Pantallas chicas: KPIs y filas a una sola columna. */
@media(max-width:480px){
  .kpi{min-width:100%}
  .tarjetas{gap:10px}
  .fila>div{min-width:100%}
  main{padding:0 11px}
}