/* ERP BSE — línea visual inspirada en la plataforma del equipo */
:root{
  --rojo:#E11D2A; --rojo-osc:#B3121D; --rojo-suave:#FDF1F1; --rojo-texto:#9B1C24;
  --lateral:#1D2333; --lateral-2:#262D40; --lateral-texto:#C9CEDA; --lateral-sec:#E5484D;
  --texto:#1C2230; --suave:#6B7280; --borde:#E6E8EC; --fondo:#F6F7F9; --blanco:#fff;
  --ok:#157347; --radio:12px;
  --fuente:"Nunito Sans","Nunito","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--fuente);font-size:15px;line-height:1.5}
a{color:var(--rojo)}
button{font-family:inherit}
.oculto{display:none!important}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:8px;
  padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:var(--rojo);color:#fff;
  box-shadow:0 6px 14px -8px rgba(225,29,42,.7)}
.btn:hover{background:var(--rojo-osc)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--texto);border-color:var(--borde);box-shadow:none}
.btn.sec:hover{border-color:var(--rojo);color:var(--rojo)}
.btn.osc{background:var(--lateral);box-shadow:none}
.btn.peligro{background:#fff;color:var(--rojo-osc);border-color:#F2C4C7;box-shadow:none}
.btn.peq{padding:6px 12px;font-size:13px}
.enlace{color:var(--rojo);font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit}

/* ---------- Formularios ---------- */
label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--texto)}
label .req{color:var(--rojo)}
input,select,textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--borde);border-radius:8px;background:#fff;color:var(--texto)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(225,29,42,.12)}
.ayuda{font-size:12px;color:var(--suave);margin-top:4px}
.invalido{border-color:var(--rojo)!important;background:#FFF8F8}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px}
.check input{width:auto;margin-top:4px;accent-color:var(--rojo)}
.alerta{border-radius:8px;padding:12px 14px;margin:12px 0;font-size:14px}
.alerta.error{background:var(--rojo-suave);color:var(--rojo-texto);border:1px solid #F5CACD}
.alerta.ok{background:#EAF6EF;color:var(--ok);border:1px solid #BFE3CD}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:16px}
.completo{grid-column:1/-1}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Tipografía ---------- */
.sobretitulo{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);margin:0 0 6px}
h1{font-size:28px;font-weight:800;margin:0 0 4px;color:var(--texto);letter-spacing:-.01em}
h2{font-size:17px;font-weight:800;margin:0;color:var(--texto)}
.sub{color:var(--suave);margin:0}
.nota{color:var(--suave);font-size:13px}

/* ---------- Tarjetas ---------- */
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px 24px;margin-bottom:18px}
.tarjeta-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--borde)}
.tarjeta-cab .cuenta{color:var(--rojo-texto);font-weight:800;font-size:13px}
.tarjeta.sin-pad{padding:0;overflow:hidden}
.tarjeta-pie{display:flex;justify-content:space-between;padding:12px 20px;font-size:12.5px;color:var(--suave);border-top:1px solid var(--borde)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0}
.kpi{background:#fff;border:1px solid var(--borde);border-bottom:3px solid var(--rojo);border-radius:var(--radio);padding:18px 20px;cursor:default}
.kpi.clic{cursor:pointer}
.kpi .t{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.kpi b{display:block;font-size:34px;font-weight:800;line-height:1.15;margin:6px 0 2px;letter-spacing:.02em}
.kpi b.rojo{color:var(--rojo)}
.kpi span{font-size:12.5px;color:var(--suave)}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--rojo-suave);color:var(--rojo-texto);text-align:left;padding:12px 16px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
td{padding:13px 16px;border-top:1px solid var(--borde);vertical-align:top}
tr.fila{cursor:pointer}
tr.fila:hover td{background:#FBFBFC}
td.cod{font-weight:800}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:#F1F2F4;color:#374151}
.chip.e1{background:#FDECEC;color:var(--rojo-texto)}.chip.e2{background:#FFF4DB;color:#8A5A00}
.chip.e3{background:#E8EEF9;color:#1E4E8C}.chip.e4{background:#E6F4EC;color:#16653A}.chip.e5{background:#EEEFF2;color:#4B5563}
.vacio{padding:34px;text-align:center;color:var(--suave)}

/* ---------- Layout ERP ---------- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.lateral{background:var(--lateral);color:var(--lateral-texto);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.lateral .marca{display:flex;align-items:center;gap:12px;padding:20px 16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--rojo);display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:.02em;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.lateral .marca b{color:#fff;font-size:16px;display:block;line-height:1.1}
.lateral .marca small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8E95A6}
.menu{flex:1;overflow:auto;padding:12px 8px}
.menu .sec{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lateral-sec);padding:16px 10px 6px}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--lateral-texto);text-decoration:none;padding:10px 12px;border-radius:8px;font-weight:600;font-size:14.5px;border-left:3px solid transparent;margin:2px 0}
.menu a:hover{background:var(--lateral-2);color:#fff}
.menu a.activo{background:#3A2330;color:#fff;font-weight:800;border-left-color:var(--rojo)}
.badge{min-width:24px;height:20px;padding:0 7px;border-radius:999px;background:var(--rojo);color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
.badge.gris{background:#4A5163}
.usuario-lat{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.07)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--rojo);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.usuario-lat b{color:#fff;font-size:13px;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.usuario-lat small{font-size:12px;color:#8E95A6}
.principal{min-width:0;display:flex;flex-direction:column}
.cabecera{background:#fff;border-top:3px solid var(--rojo);border-bottom:1px solid var(--borde);display:flex;justify-content:space-between;align-items:center;padding:14px 26px;position:sticky;top:0;z-index:5}
.migas{font-size:14px;color:var(--suave)}
.migas b{color:var(--rojo);font-weight:700}
.cab-usr{display:flex;align-items:center;gap:12px;font-weight:800;font-size:14px;text-transform:uppercase}
.contenido{padding:26px 28px 40px;max-width:1280px;width:100%}
.dos-col{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.filtros{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.detalle dl{display:grid;grid-template-columns:240px 1fr;gap:8px 16px;margin:14px 0 0}
.detalle dt{color:var(--suave);font-size:13.5px}
.detalle dd{margin:0;font-weight:600;white-space:pre-wrap;word-break:break-word}
.menu-movil{display:none}

/* ---------- Login dividido ---------- */
.login-split{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh;background:#fff}
.login-arte{position:relative;color:#fff;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.07),transparent 55%),
  radial-gradient(ellipse at 90% 90%,rgba(225,29,42,.18),transparent 50%),linear-gradient(160deg,#252C40 0%,#151A27 100%)}
.login-arte .marca{display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px}
.login-arte h2{color:#fff;font-size:38px;line-height:1.15;font-weight:800;max-width:520px;margin:0 0 16px}
.login-arte .raya{width:46px;height:3px;background:var(--rojo);margin-bottom:22px}
.login-arte p{color:#C9CEDA;max-width:470px;margin:0}
.login-pilares{display:flex;gap:40px;flex-wrap:wrap}
.login-pilares b{display:block;font-size:15px}
.login-pilares small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9BA2B3}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.login-caja{width:100%;max-width:400px}
.login-caja h1{font-size:30px}
.login-caja .campo{margin-top:18px}
.login-caja .btn{width:100%;margin-top:24px;padding:14px}
.login-pie{margin-top:28px;padding-top:20px;border-top:1px solid var(--borde);text-align:center;color:var(--suave);font-size:13px}

/* ---------- Formulario público ---------- */
.pub-cab{background:var(--lateral);color:#fff;border-bottom:3px solid var(--rojo)}
.pub-cab .in{max-width:960px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pub-cab .marca{display:flex;align-items:center;gap:12px;font-weight:800}
.pub-cab .marca small{display:block;font-weight:600;color:#9BA2B3;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pub-cab a{color:#C9CEDA;font-size:13px;text-decoration:none}
.pub-cab a:hover{color:#fff}
.pub{max-width:960px;margin:28px auto;padding:0 22px}
.paso{display:inline-grid;place-items:center;background:var(--rojo);color:#fff;border-radius:50%;width:26px;height:26px;font-size:13px;font-weight:800;margin-right:10px}
.legal{font-size:13px;color:var(--suave);background:var(--fondo);border-radius:8px;padding:13px 15px;margin:12px 0 14px}
.pie{text-align:center;color:var(--suave);font-size:12.5px;padding:24px 20px 40px}

@media (max-width:980px){
  .dos-col{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-split{grid-template-columns:1fr}
  .login-arte{display:none}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .lateral{position:fixed;z-index:20;width:250px;left:-260px;transition:left .2s}
  .lateral.abierto{left:0}
  .menu-movil{display:inline-flex}
  .rejilla,.filtros{grid-template-columns:1fr}
  .detalle dl{grid-template-columns:1fr}
  .contenido{padding:18px 14px}
  .tarjeta{padding:18px}
}
@media print{.lateral,.cabecera,.acciones{display:none!important}.app{display:block}}