/* estilos.css — ASM (AddSupply Management) · base SIMS · tema claro/oscuro + menú lateral
   Nota: se conservan los nombres de variables del SIMS (--verde = color primario) para
   que las pantallas copiadas funcionen igual; los valores son la paleta de AddSupply. */

/* ===== Variables: TEMA CLARO (por defecto) ===== */
:root{
  --verde:#ab1319; --verde-osc:#6e0c10; --verde-claro:#fbe9ea;
  --gris:#5b636b; --gris-claro:#f3f4f5; --linea:#e1e4e7;
  --rojo:#c0392b; --ok:#1a7f4b; --alerta:#b9770e; --texto:#1d2125; --tarjeta:#ffffff;
  --fondo:#f3f4f5;
  --side-bg:#24282c; --side-tex:#c4cacf; --side-hover:rgba(255,255,255,.08);
  --side-on:#ab1319; --side-on-tex:#ffffff; --side-logo-bg:transparent;
  --th-bg:#eceef0; --th-tex:#24282c; --input-bg:#ffffff;
  --tarjeta-borde:#e1e4e7; --sombra:0 1px 3px rgba(0,0,0,.06);
  --blur:none;
  --fuente-display:"Big Shoulders Display","Arial Narrow",sans-serif;
}
/* ===== Variables: TEMA OSCURO ===== */
html.oscuro{
  --verde:#f0555a; --verde-osc:#ffb3b5; --verde-claro:rgba(240,85,90,.14);
  --gris:#a3abb2; --gris-claro:#16191c; --linea:rgba(255,255,255,.10);
  --rojo:#ef6b5e; --ok:#4cc38a; --alerta:#f2b552; --texto:#e8ebee; --tarjeta:rgba(255,255,255,.05);
  --fondo:#16191c;
  --side-bg:#1d2024; --side-tex:#aeb5bb; --side-hover:rgba(255,255,255,.07);
  --side-on:rgba(240,85,90,.24); --side-on-tex:#ffffff; --side-logo-bg:transparent;
  --th-bg:rgba(255,255,255,.05); --th-tex:#d3d9de; --input-bg:rgba(255,255,255,.05);
  --tarjeta-borde:rgba(255,255,255,.10); --sombra:0 6px 22px rgba(0,0,0,.35);
  --blur:blur(10px);
}
html.oscuro body{
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(240,85,90,.10), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(255,179,71,.06), transparent 55%),
    var(--fondo);
  background-attachment:fixed;
}

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo);color:var(--texto);font-size:15px;line-height:1.45}
a{color:var(--verde);text-decoration:none}

/* ============ MENÚ LATERAL (sidebar) ============ */
.sidebar{
  position:fixed;top:0;left:0;width:246px;height:100vh;z-index:1000;
  background:var(--side-bg); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;
}
.sidebar-top{display:flex;align-items:center;justify-content:center;padding:8px 6px 16px;margin-bottom:8px;border-bottom:1px solid var(--linea)}
.sidebar-logo{height:42px;width:auto;display:block}
.sidebar .menu{display:flex;flex-direction:column;gap:3px;flex:1}
.sidebar .menu > a, .sidebar .grupo-btn{
  display:flex;align-items:center;gap:11px;color:var(--side-tex);
  padding:11px 13px;border-radius:10px;font-weight:500;font-size:15px;
  border:none;background:none;cursor:pointer;font-family:inherit;width:100%;text-align:left;
}
.sidebar .menu > a:hover, .sidebar .grupo-btn:hover{background:var(--side-hover);color:#fff}
.sidebar .menu > a.on{background:var(--side-on);color:var(--side-on-tex)}
.sidebar .mi{font-size:16px;width:20px;text-align:center;flex:none;line-height:1}
.sidebar .flecha{margin-left:auto;font-size:11px;opacity:.7}

/* Grupos desplegables dentro del sidebar */
.sidebar .grupo{display:flex;flex-direction:column}
.sidebar .grupo.on > .grupo-btn{color:#fff}
.sidebar .grupo-menu{display:none;flex-direction:column;gap:2px;margin:2px 0 4px;padding-left:8px}
.sidebar .grupo.abierto .grupo-menu{display:flex}
.sidebar .grupo-menu a{
  color:var(--side-tex);padding:9px 13px 9px 40px;border-radius:9px;font-weight:500;font-size:14px;display:block;
}
.sidebar .grupo-menu a:hover{background:var(--side-hover);color:#fff}
.sidebar .grupo-menu a.on{background:var(--side-on);color:var(--side-on-tex)}

/* Pie del sidebar: tema + usuario */
.sidebar-pie{margin-top:10px;padding-top:12px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.tema-toggle{display:flex;align-items:center;gap:9px;color:var(--side-tex);background:none;border:1px solid var(--linea);
  padding:9px 13px;border-radius:10px;font-weight:500;font-size:14px;cursor:pointer;font-family:inherit;width:100%}
.tema-toggle:hover{background:var(--side-hover);color:#fff}
.tema-ico{font-size:16px}
.sidebar .usuario{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.sidebar .usuario-nombre{color:var(--side-tex)}
.sidebar .salir{color:#fff;border:1px solid var(--linea);padding:5px 12px;border-radius:8px;font-size:13px}
.sidebar .salir:hover{background:var(--side-hover)}
.chat-badge{display:inline-block;background:#ab1319;color:#fff;border-radius:11px;min-width:18px;padding:1px 6px;font-size:11px;font-weight:700;text-align:center;line-height:1.5;margin-left:auto}

/* ============ BARRA SUPERIOR (solo móvil) ============ */
.topbar{display:none;align-items:center;gap:14px;background:var(--side-bg);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:0 16px;height:58px;position:sticky;top:0;z-index:900;border-bottom:1px solid var(--linea)}
.topbar-logo{height:34px;width:auto}
.hamburguesa{background:none;border:none;color:var(--side-tex);font-size:26px;cursor:pointer;padding:4px 6px;line-height:1}
.tema-btn{margin-left:auto;background:none;border:1px solid var(--linea);color:var(--side-tex);
  font-size:18px;cursor:pointer;width:38px;height:38px;border-radius:9px}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}

/* ============ CONTENIDO ============ */
.contenido{margin-left:246px;max-width:1180px;padding:28px 26px}
@media(min-width:1500px){.contenido{margin-left:246px;max-width:1320px}}
h1{font-size:22px;margin:0 0 18px}
h2{font-size:17px;margin:26px 0 12px}

/* Tarjetas de resumen (KPIs) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.kpi{background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:14px;padding:16px 18px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sombra)}
.kpi .et{color:var(--gris);font-size:13px;margin-bottom:6px}
.kpi .num{font-size:24px;font-weight:700}
.kpi.ing .num{color:var(--verde)}
.kpi.egr .num{color:var(--rojo)}
.kpi.bal .num{color:var(--texto)}

/* Tarjeta genérica */
.tarjeta{background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:14px;padding:20px;margin-top:18px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sombra)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}

/* Tablas */
table{width:100%;border-collapse:collapse;background:var(--tarjeta);
  border:1px solid var(--tarjeta-borde);border-radius:14px;overflow:hidden;box-shadow:var(--sombra)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);font-size:14px}
th{background:var(--th-bg);color:var(--th-tex);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--side-hover)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ingreso{color:var(--verde);font-weight:600}
.egreso{color:var(--rojo);font-weight:600}
.etq{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:var(--verde-claro);color:var(--verde-osc)}
.etq.gris{background:var(--side-hover);color:var(--gris)}

/* Formularios */
form .campo{margin-bottom:15px}
label{display:block;font-size:13px;color:var(--gris);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--tarjeta-borde);
  border-radius:9px;font-size:15px;font-family:inherit;background:var(--input-bg);color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 3px var(--verde-claro)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn{display:inline-block;background:var(--verde);color:#fff;border:none;padding:11px 22px;
  border-radius:9px;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:transparent;color:var(--verde);border:1px solid var(--verde)}
.btn.peq{padding:6px 12px;font-size:13px}
.btn.rojo{background:var(--rojo)}
.aviso{background:var(--verde-claro);color:var(--verde-osc);padding:12px 16px;
  border-radius:9px;margin-bottom:16px;border:1px solid var(--tarjeta-borde)}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}
.filtros .campo{margin:0}
.filtros .campo.chico{width:150px}

/* Barra de progreso */
.barra-prog{background:var(--side-hover);border-radius:20px;height:9px;overflow:hidden;margin-top:6px}
.barra-prog span{display:block;height:100%;background:var(--verde)}
.barra-prog span.alto{background:#e67e22}
.barra-prog span.exceso{background:var(--rojo)}

/* Login (sin sidebar) */
.login-caja{max-width:360px;margin:8vh auto;background:var(--tarjeta);border:1px solid var(--tarjeta-borde);
  border-radius:16px;padding:32px;box-shadow:0 6px 24px rgba(0,0,0,.10);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.login-caja h1{text-align:center;color:var(--verde-osc)}
.error{background:#fdecea;color:#c0392b;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-size:14px}
html.oscuro .error{background:rgba(227,93,79,.15);color:#e8897f}

.pie{text-align:center;color:var(--gris);font-size:13px;padding:24px;margin-top:30px}
.muted{color:var(--gris);font-size:13px}

/* ============ RESPONSIVE: móvil ============ */
@media(max-width:900px){
  .topbar{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;width:270px}
  body.menu-abierto .sidebar{transform:translateX(0)}
  body.menu-abierto .sidebar-overlay{display:block}
  .contenido{margin-left:0;padding:20px 16px}
  .kpis{grid-template-columns:1fr 1fr}
  .fila{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr}
}

/* ================= Agregados ASM ================= */
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url("fuentes/big-shoulders-display-latin-800-normal.woff2") format("woff2")}
h1{font-family:var(--fuente-display);font-weight:800;font-size:30px;letter-spacing:.01em;text-transform:uppercase;line-height:1.05}
.titulo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-bottom:16px}
.titulo-fila h1{margin:0}
.titulo-fila .acciones{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #ffb347;outline-offset:2px}
.sidebar-logo{height:34px}
.topbar-logo{height:26px}
.paginas{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.tabla-scroll{overflow-x:auto;border-radius:14px}
.tabla-scroll table{min-width:640px}
td .sub{display:block;color:var(--gris);font-size:12.5px;margin-top:2px}
.etq.ok{background:rgba(26,127,75,.12);color:var(--ok)}
.etq.alerta{background:rgba(185,119,14,.14);color:var(--alerta)}
.etq.mal{background:rgba(192,57,43,.12);color:var(--rojo)}
.num-pos{color:var(--ok);font-weight:600}
.num-neg{color:var(--rojo);font-weight:600}
.kpi .num{font-variant-numeric:tabular-nums}
.kpi a{color:inherit}
.vacio{padding:28px;text-align:center;color:var(--gris)}
.fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fila4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.fila3,.fila4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fila3,.fila4{grid-template-columns:1fr}}
.ficha-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 20px;margin:0}
.ficha-datos dt{font-size:12.5px;color:var(--gris)}
.ficha-datos dd{margin:2px 0 0;font-weight:600;word-break:break-word}
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin:18px 0 0;flex-wrap:wrap}
.pestanas a{padding:9px 14px;border-radius:9px 9px 0 0;color:var(--gris);font-weight:600}
.pestanas a.on{background:var(--tarjeta);color:var(--texto);border:1px solid var(--linea);border-bottom-color:var(--tarjeta);margin-bottom:-1px}
.partidas td{vertical-align:top}
.partidas input,.partidas select{padding:7px 9px;font-size:14px}
.sugerencias{position:absolute;z-index:50;background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:280px;overflow:auto;width:100%;display:none}
html.oscuro .sugerencias{background:#23272b}
.sugerencias button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;color:var(--texto);cursor:pointer;font:inherit}
.sugerencias button:hover,.sugerencias button.on{background:var(--verde-claro)}
.rel{position:relative}
.progreso-import li{margin:4px 0}
.texto-chico{font-size:13px}
.derecha{text-align:right}

/* Títulos largos (nombre de producto, cliente o proveedor) */
h1.largo{font-family:inherit;text-transform:none;letter-spacing:0;font-size:clamp(21px,2.3vw,27px);font-weight:700;line-height:1.25}
@media (max-width:700px){ .titulo-fila form{max-width:none!important;flex-basis:100%} }

/* Totales de documentos (cotización, pedido, remisión) */
.ficha-datos.totales{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(100px,auto);grid-template-columns:none;justify-content:end;text-align:right;gap:6px 26px}
@media (max-width:700px){
  .kpis{grid-template-columns:1fr 1fr!important}
  .ficha-datos.totales{grid-auto-flow:row;grid-template-columns:1fr 1fr;justify-content:stretch}
}

/* ================= Portal de clientes ================= */
body.portal{display:block;padding:0;background:var(--fondo)}
.p-top{background:#24282c;color:#e3e7ea;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.p-top-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px}
.p-top > .p-top-in{min-height:64px}
.p-logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.p-logo img{height:30px;width:auto}
.p-logo span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#aab2b9;border-left:1px solid #4a5157;padding-left:12px}
.p-usr{margin-left:auto;text-align:right;line-height:1.3;font-size:13px}
.p-usr strong{display:block;color:#fff;font-size:14px}
.p-usr span{color:#aab2b9}
.p-usr a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.p-top .tema-btn{color:#e3e7ea;border-color:#4a5157;margin-left:0}
.p-nav{background:#1d2125;border-top:1px solid #33393e}
.p-nav .p-top-in{gap:2px;overflow-x:auto;scrollbar-width:none}
.p-nav a{color:#c4cacf;padding:12px 14px;white-space:nowrap;font-weight:600;font-size:14px;border-bottom:3px solid transparent;text-decoration:none}
.p-nav a:hover{color:#fff}
.p-nav a.on{color:#fff;border-bottom-color:#ab1319}
.p-main{max-width:1180px;margin:0 auto;padding:26px 20px 40px;min-height:60vh}
.p-pie{max-width:1180px;margin:0 auto;padding:18px 20px 30px;color:var(--gris);font-size:13px;border-top:1px solid var(--linea)}
.p-pie p{margin:4px 0}
.p-hero{background:linear-gradient(120deg,#24282c,#3a2023);color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:20px}
.p-hero h1{color:#fff;margin:0 0 6px}
.p-hero p{margin:0;color:#d5dadd}
.p-login{max-width:420px;margin:7vh auto 0}
.p-login .marca{background:#24282c;border-radius:14px 14px 0 0;padding:26px 20px;text-align:center}
.p-login .marca img{height:40px}
.p-login .marca div{color:#aab2b9;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px}
.p-login .tarjeta{border-radius:0 0 14px 14px;margin-top:0}
@media (max-width:700px){
  .p-logo span{display:none}
  .p-usr span{display:none}
  .p-main{padding:18px 14px 30px}
}
.grid2 > *, .fila > *, .fila3 > *, .fila4 > *{min-width:0}