/* ══════════════════════════════════════════════════════════════
SAMAEL CORE AI — Global Stylesheet
Variables, reset y componentes comunes.
Idéntico al diseño de erp-samael-v4.html
══════════════════════════════════════════════════════════════ */
/* ── VARIABLES ── */
:root {
--ink: #0d1117; --ink2: #161c2d; --ink3: #1e2640;
--bg: #f1f4fa; --white: #fff;
--b: rgba(13,17,23,.08); --b2: rgba(13,17,23,.14);
--t1: #0d1117; --t2: #485068; --t3: #8c96b0;
--ac: #3b5bdb; --ac-h: #2f4bc8; --ac-d: rgba(59,91,219,.12);
--gn: #0ea66f; --gn-d: rgba(14,166,111,.11);
--am: #e08c00; --am-d: rgba(224,140,0,.11);
--rd: #e53935; --rd-d: rgba(229,57,53,.11);
--pu: #7c3aed; --pu-d: rgba(124,58,237,.11);
--cy: #0891b2; --cy-d: rgba(8,145,178,.11);
--or: #ea6c00; --or-d: rgba(234,108,0,.11);
--sh1: 0 1px 3px rgba(13,17,23,.05),0 1px 8px rgba(13,17,23,.04);
--sh2: 0 4px 16px rgba(13,17,23,.09);
--sh3: 0 12px 40px rgba(13,17,23,.14);
--r: 10px; --r2: 6px;
--nav1-h: 60px; --nav2-h: 38px; --hdr: 98px;
/* ── Alias para componentes de módulo (bg1/bg2/bd/tx*) ── */
--bg1: #ffffff;
--bg2: #f1f4fa;
--bg3: #e4e8f2;
--bd: rgba(13,17,23,.09);
--tx1: #0d1117;
--tx2: #485068;
--tx3: #8c96b0;
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--t1);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }
/* ══════════════════════════════════════════════════
LOGIN — Diseño card flotante (ERP_LOGIN style)
══════════════════════════════════════════════════ */
#pg-login {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(150deg, #dde3f0 0%, #c8d0e4 50%, #d4daea 100%);
padding: 24px;
}
.lg-card {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%; max-width: 860px; min-height: 520px;
border-radius: 22px; overflow: hidden;
box-shadow: 0 28px 70px rgba(13,17,60,.22), 0 6px 20px rgba(13,17,60,.1);
animation: lgCardIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes lgCardIn { from{opacity:0;transform:translateY(22px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
/* ── LEFT: Formulario blanco ── */
.lg-l {
background: #fff;
padding: 44px 42px;
display: flex; flex-direction: column; justify-content: center;
gap: 0;
}
.lg-logo-row {
display: flex; align-items: center; gap: 9px;
margin-bottom: 28px;
}
.lg-brand-ic {
width: 32px; height: 32px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(59,91,219,.35);
}
.lg-brand-name {
font-family: 'Syne', sans-serif;
font-weight: 700; font-size: 15px; color: var(--ink);
}
.lg-title {
font-family: 'Syne', sans-serif;
font-weight: 700; font-size: 22px; color: var(--ink);
margin-bottom: 24px; letter-spacing: -.2px;
}
.lg-error {
background: var(--rd-d);
border: 1px solid rgba(229,57,53,.25);
border-radius: 8px; padding: 10px 14px;
margin-bottom: 16px;
font-size: 12.5px; color: var(--rd);
display: flex; align-items: center; gap: 6px;
}
/* input override para el login */
.lg-fii { color: #b4bcd0 !important; }
.lg-fi {
padding: 13px 14px 13px 44px !important;
border: 1.5px solid #e0e5f0 !important;
border-radius: 10px !important;
font-size: 13px !important;
background: #f5f7fb !important;
transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.lg-fi:focus {
border-color: var(--ac) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(59,91,219,.1) !important;
}
.lg-fi::placeholder { color: #b8bfcc; font-size: 12.5px; }
.lg-btn-login {
width: 100%; padding: 13px;
background: linear-gradient(135deg, #4a6cf7 0%, #3b5bdb 100%);
color: #fff; border: none; border-radius: 10px;
font-family: 'Syne', sans-serif; font-size: 12.5px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all .18s;
box-shadow: 0 4px 16px rgba(59,91,219,.32);
}
.lg-btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,91,219,.42); }
.lg-btn-login:active { transform: translateY(0); }
.lg-btn-login:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }
/* ── RIGHT: Panel azul ── */
.lg-r {
background: linear-gradient(160deg, #1535a8 0%, #1e4fc7 30%, #2052cc 55%, #1840b0 80%, #1030a0 100%);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 44px 38px;
position: relative; overflow: hidden; text-align: center;
}
.lg-r::before {
content: ''; position: absolute;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.07);
bottom: -70px; right: -70px; pointer-events: none;
}
.lg-r::after {
content: ''; position: absolute;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(255,255,255,.05);
top: -50px; left: -50px; pointer-events: none;
}
.lg-r-wave {
position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
background: radial-gradient(ellipse 140% 100% at 50% 110%, rgba(255,255,255,.1) 0%, transparent 70%);
pointer-events: none;
}
.lg-r-blob {
position: absolute; width: 200px; height: 200px; border-radius: 50%;
background: rgba(255,255,255,.055);
top: 50px; right: -40px; pointer-events: none;
}
.lg-r-content { position: relative; z-index: 2; width: 100%; }
.lg-r-logo {
width: 56px; height: 56px; border-radius: 16px;
background: rgba(255,255,255,.15);
border: 1.5px solid rgba(255,255,255,.3);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 22px;
}
.lg-r-title {
/* Título del panel azul del login. Diseño limpio:
"SAMAEL CORE" en blanco puro + "AI" como acento dorado (gradiente
sutil naranja → ámbar). Garantiza legibilidad sobre el azul sin
que las letras se vean "borrosas" por el gradient en cada letra. */
font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
font-weight: 800;
font-size: 22px;
line-height: 1.15;
letter-spacing: .35px;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
margin-bottom: 8px;
text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.lg-r-title .lg-r-ai {
/* Solo el "AI" lleva el acento dorado — mismo estilo que el chip
del chat IA bubble. Más legible que aplicar el gradient a todo. */
background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 6px;
letter-spacing: 1px;
font-weight: 900;
}
.lg-r-title.lg-r-title--plain {
/* Variante para nombre real de empresa: blanco completo sin acento.
v0.6 · Los nombres reales de empresa suelen ser largos ("MECANICA
AUTOMOTRIZ PERU MOTORS S.A.C.") y con `white-space:nowrap` se salían
del panel. Ahora permitimos hasta 2 líneas y clamp por si acaso. */
font-size: 16px;
font-weight: 700;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.25;
max-width: 260px;
margin-left: auto;
margin-right: auto;
padding: 0 8px;
text-align: center;
text-wrap: balance;
}
.lg-r-title.lg-r-title--plain .lg-r-ai {
/* Si por error queda el span en una empresa, se renderiza normal */
-webkit-text-fill-color: #fff;
background: none;
margin-left: 0;
}
.lg-r-sub {
font-size: 12px; color: rgba(255,255,255,.6);
line-height: 1.7; max-width: 220px;
margin: 0 auto 26px;
}
.lg-r-pills {
display: flex; flex-direction: column;
gap: 7px; text-align: left;
}
.lg-r-pill {
display: flex; align-items: center; gap: 9px;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px; padding: 8px 13px;
font-size: 11.5px; color: rgba(255,255,255,.82);
}
.lg-r-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; flex-shrink: 0; }
.lg-foot {
position: absolute; bottom: 12px;
font-size: 9px; color: rgba(255,255,255,.22);
letter-spacing: .6px; z-index: 2;
}
/* ── RESPONSIVE LOGIN ── */
@media (max-width: 680px) {
.lg-card { grid-template-columns: 1fr; min-height: auto; }
.lg-r { display: none; }
.lg-l { padding: 32px 26px; }
}
/* En viewports muy angostos (celulares en portrait ≤420px) — Sprint III.15:
varios elementos se cortaban del card. Reducimos padding, permitimos
truncar, y hacemos que .frow envuelva sus items para que "Cambiar
contraseña" no se corte. */
@media (max-width: 420px) {
#pg-login { padding: 10px; }
.lg-card { overflow: hidden; } /* fuerza que hijos no desborden */
.lg-l { padding: 22px 16px; min-width: 0; overflow: hidden; }
.lg-btn-login { letter-spacing: .5px; font-size: 12px; padding: 12px 8px; }
/* Recordarme + Cambiar contraseña: envolver a 2 líneas si no cabe */
.frow { flex-wrap: wrap; gap: 8px 12px; }
.fck { font-size: 11.5px; }
.flink { font-size: 11.5px; white-space: nowrap; }
/* El bloque de empresa seleccionada: forzar truncado real */
.lg-l > div { min-width: 0; }
}
/* ── FORM FIELDS ── */
.fg { margin-bottom: 16px; }
.fl { display: block; font-size: 11px; font-weight: 600; color: var(--t2); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 6px; }
.fi {
width: 100%; padding: 11px 14px;
border: 1.5px solid #e2e6ef; border-radius: var(--r2);
font-size: 13.5px; color: var(--t1); background: var(--bg);
outline: none; transition: border-color .15s, box-shadow .15s;
}
.fi:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px var(--ac-d); }
.fi::placeholder { color: var(--t3); }
.fiw { position: relative; }
.fii { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--t3); font-size: 14px; pointer-events: none; }
.fiw .fi { padding-left: 38px; }
.fit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--t3); padding: 3px; }
.frow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.fck { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); cursor: pointer; }
.fck input { accent-color: var(--ac); width: 14px; height: 14px; }
.flink { color: var(--ac); font-size: 12px; font-weight: 500; }
.flink:hover { text-decoration: underline; }
.btn-primary-erp {
width: 100%; padding: 12px;
background: var(--ac); color: #fff;
border: none; border-radius: var(--r2);
font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 600;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all .15s;
}
.btn-primary-erp:hover { background: var(--ac-h); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,91,219,.28); }
.btn-primary-erp:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.fdiv { text-align: center; position: relative; margin: 20px 0; color: var(--t3); font-size: 11px; }
.fdiv::before, .fdiv::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #e2e6ef; }
.fdiv::before { left: 0; } .fdiv::after { right: 0; }
.fq { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.btn-q {
padding: 8px 12px; background: #fff;
border: 1.5px solid #e2e6ef; border-radius: var(--r2);
font-size: 11.5px; font-weight: 500; color: var(--t2);
cursor: pointer; transition: all .14s;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-q:hover { border-color: var(--ac); color: var(--ac); }
/* ══════════════ APP SHELL ══════════════ */
.erp-app { min-height: 100vh; }
/* ── NAV BAR 1 (dark, modules) ── */
.nav1 {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav1-h); background: var(--ink2);
display: flex; align-items: center;
z-index: 400;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.n1-brand {
display: flex; align-items: center;
padding: 0 14px; flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,.07); height: 100%;
}
.n1-ic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Mantenemos las clases por si se usan en otros lugares */
.n1-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: #fff; }
.n1-ver { font-size: 8px; color: rgba(255,255,255,.26); letter-spacing: 1.5px; text-transform: uppercase; }
.n1-modules {
display: flex; align-items: center; flex: 1;
overflow-x: auto; padding: 0 8px; gap: 2px; height: 100%;
scrollbar-width: none;
}
.n1-modules::-webkit-scrollbar { display: none; }
.n1-mod {
display: flex; align-items: center; gap: 6px;
padding: 0 13px; height: 100%;
font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.6);
cursor: pointer; border: none; background: transparent;
white-space: nowrap; border-bottom: 2px solid transparent;
transition: color .13s, background .13s, border-color .13s;
}
.n1-mod:hover { color: #fff; background: rgba(255,255,255,.05); }
.n1-mod.active { color: #fff; font-weight: 600; border-bottom-color: var(--ac); background: rgba(59,91,219,.12); }
.n1-mod-ic { font-size: 14px; opacity: .75; }
.n1-mod.active .n1-mod-ic { opacity: 1; }
.n1-mod.n1-mod-off { opacity: .3; cursor: not-allowed; pointer-events: none; }
.n1-right { display: flex; align-items: center; gap: 6px; padding: 0 14px; flex-shrink: 0; margin-left: 14px; }
.n1-notif {
width: 32px; height: 32px; background: rgba(255,255,255,.06);
border: none; border-radius: 7px; cursor: pointer;
color: rgba(255,255,255,.55); font-size: 14px;
display: flex; align-items: center; justify-content: center;
position: relative; transition: background .13s;
}
.n1-notif:hover { background: rgba(255,255,255,.11); color: #fff; }
.n1-notif-dot {
position: absolute; top: 6px; right: 6px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--rd); border: 1.5px solid var(--ink2);
}
.n1-search {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
border-radius: 7px; padding: 6px 11px; cursor: pointer;
transition: all .14s; width: 186px;
}
.n1-search:hover { background: rgba(255,255,255,.1); border-color: var(--ac); }
.n1-search-text { font-size: 12px; color: rgba(255,255,255,.35); flex: 1; }
.n1-search-kbd {
background: rgba(255,255,255,.09); border-radius: 4px;
padding: 1px 5px; font-size: 9px; color: rgba(255,255,255,.28);
font-family: 'JetBrains Mono', monospace;
}
.n1-profile {
display: flex; align-items: center; gap: 9px;
cursor: pointer; padding: 4px 6px; border-radius: 8px;
transition: background .13s; position: relative;
}
.n1-profile:hover { background: rgba(255,255,255,.07); }
.n1-av {
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; color: #fff;
flex-shrink: 0; border: 2px solid rgba(255,255,255,.22);
}
.n1-uname { font-size: 12px; font-weight: 600; color: #fff; text-align: right; white-space: nowrap; }
.n1-urole { font-size: 10px; color: rgba(255,255,255,.38); text-align: right; white-space: nowrap; }
/* Profile Dropdown */
.profile-dd {
position: absolute; top: calc(100% + 10px); right: 0;
background: var(--white); border: 1px solid var(--b); border-radius: 12px;
box-shadow: var(--sh3); min-width: 240px; z-index: 600;
animation: ddIn .16s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.pdd-head {
padding: 16px;
background: linear-gradient(135deg, var(--ink2), var(--ink3));
display: flex; align-items: center; gap: 12px;
}
.pdd-av {
width: 46px; height: 46px; border-radius: 50%;
border: 3px solid rgba(255,255,255,.3);
display: flex; align-items: center; justify-content: center;
font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; color: #fff;
flex-shrink: 0;
}
.pdd-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.pdd-role { font-size: 11px; color: rgba(255,255,255,.48); margin-top: 2px; }
.pdd-email { font-size: 10.5px; color: rgba(255,255,255,.34); margin-top: 2px; }
.pdd-sep { height: 1px; background: var(--b); }
.pdd-item {
display: flex; align-items: center; gap: 9px;
padding: 10px 16px; font-size: 12.5px; color: var(--t1);
cursor: pointer; transition: background .11s;
}
.pdd-item:hover { background: var(--bg); }
.pdd-item.danger { color: var(--rd); }
.pdd-item.danger:hover { background: var(--rd-d); }
.pdd-item-ic { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
/* ── NAV BAR 2 (white, sub-tabs) ── */
.nav2 {
position: fixed; top: var(--nav1-h); left: 0; right: 0;
height: var(--nav2-h); background: var(--white);
display: flex; align-items: center;
z-index: 350;
border-bottom: 1.5px solid var(--b2);
box-shadow: 0 1px 4px rgba(13,17,23,.05);
}
/* Wrapper para que el flex item permita scroll horizontal:
sin `min-width: 0` el contenido sale del contenedor en lugar de scrollear.
Las flechas n2-scroll-l/r dan acceso explícito (responsive) cuando hay
más sub-tabs de los que caben en la pantalla. */
.n2-tabs {
display: flex; align-items: center; flex: 1; height: 100%;
min-width: 0; /* Crítico: permite que el flex item shrinkee */
overflow-x: auto; padding: 0 4px; gap: 2px; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.n2-tabs::-webkit-scrollbar { display: none; }
/* Flechas de scroll horizontal (Problema 3 — PLE 8.1 perdido off-screen) */
.n2-scroll {
flex-shrink: 0;
width: 28px; height: 100%;
background: var(--white);
border: none; border-left: 1px solid var(--b2); border-right: 1px solid var(--b2);
color: var(--ac); font-size: 22px; font-weight: 700; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.n2-scroll:hover { background: var(--ac-d); color: var(--ac); }
.n2-scroll-l { border-left: 0; }
.n2-scroll-r { border-right: 0; }
.n2-tab {
padding: 0 13px; height: 100%;
font-size: 12px; font-weight: 500; color: var(--t2);
cursor: pointer; border: none; background: transparent;
white-space: nowrap; border-bottom: 2px solid transparent;
transition: all .13s; display: flex; align-items: center; gap: 5px;
}
.n2-tab:hover { color: var(--ac); background: var(--ac-d); }
.n2-tab.active { color: var(--ac); font-weight: 600; border-bottom-color: var(--ac); }
.n2-right { padding: 0 14px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.n2-crumb { font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.n2-crumb .sep { color: var(--b2); }
.n2-crumb .cur { color: var(--ac); font-weight: 600; }
/* Responsive: en pantallas angostas el breadcrumb se oculta para liberar
espacio a los sub-tabs. Las flechas siguen disponibles para scroll. */
@media (max-width: 1100px) {
.n2-right { display: none; }
}
@media (max-width: 600px) {
/* En móviles muy angostos las flechas son más pequeñas y los tabs más compactos */
.n2-scroll { width: 24px; font-size: 18px; }
.n2-tab { padding: 0 9px; font-size: 11.5px; }
}
/* ── MAIN CONTENT ── */
.erp-main { margin-top: var(--nav1-h); padding: 22px 26px; min-height: calc(100vh - var(--nav1-h)); }
/* Tributario v1.0 Sprint 1 — Layout con sidebar lateral */
.erp-body { display: flex; min-height: calc(100vh - var(--nav1-h)); }
.erp-main--with-sidebar { flex: 1; margin-top: var(--nav1-h); min-width: 0; padding: 22px 26px; transition: margin-left .25s ease; }
/* ════════════════════════════════════════════════════════════════
SIDEBAR LATERAL (reemplaza navbar2 horizontal)
Tributario v1.0 Sprint 1 — UX global aplicable a TODOS los módulos
════════════════════════════════════════════════════════════════ */
:root {
--sb-width-exp: 248px;
--sb-width-col: 56px;
--sb-bg: #1e2a3a;
--sb-bg2: #2a3849;
--sb-text: #cbd5e1;
--sb-text-on: #ffffff;
--sb-border: rgba(255,255,255,.06);
--sb-active: #2E5FAC;
--sb-active-line: #60a5fa;
--sb-hover: #2e3d50;
--sb-trans: 220ms ease;
}
.sb {
position: fixed; left: 0; top: var(--nav1-h);
width: var(--sb-width-exp);
height: calc(100vh - var(--nav1-h));
background: var(--sb-bg);
color: var(--sb-text);
display: flex; flex-direction: column;
transition: width var(--sb-trans), left var(--sb-trans);
z-index: 340;
box-shadow: 1px 0 4px rgba(0,0,0,.08);
border-right: 1px solid var(--sb-border);
}
.sb--col { width: var(--sb-width-col); }
/* Cuando hay sidebar, el contenido principal se desplaza */
.erp-body:has(.sb) .erp-main--with-sidebar { margin-left: var(--sb-width-exp); }
.erp-body:has(.sb--col) .erp-main--with-sidebar { margin-left: var(--sb-width-col); }
.sb-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; height: 44px;
border-bottom: 1px solid var(--sb-border);
flex-shrink: 0;
}
.sb-mod { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sb-mod-ic { font-size: 18px; flex-shrink: 0; }
.sb-mod-lbl {
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px;
color: var(--sb-text-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-toggle {
width: 24px; height: 24px;
background: var(--sb-bg2); color: var(--sb-text);
border: 1px solid var(--sb-border); border-radius: 4px;
font-size: 14px; line-height: 1; font-weight: 700;
cursor: pointer; flex-shrink: 0;
transition: background var(--sb-trans);
}
.sb-toggle:hover { background: var(--sb-active); color: #fff; border-color: var(--sb-active); }
.sb-nav {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 6px 0;
}
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-grp-hdr {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 8px 14px 4px;
background: transparent; border: 0;
font-size: 10px; font-weight: 700; letter-spacing: .08em;
color: rgba(203,213,225,.55); text-transform: uppercase;
cursor: pointer;
}
.sb-grp-hdr:hover { color: var(--sb-text-on); }
.sb-grp-arr { font-size: 9px; opacity: .7; }
.sb-list { list-style: none; padding: 0; margin: 0 0 4px; }
.sb-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 14px; height: 34px;
color: var(--sb-text); text-decoration: none;
font-size: 12.5px; font-weight: 500;
border-left: 3px solid transparent;
transition: background var(--sb-trans), color var(--sb-trans), border-color var(--sb-trans);
cursor: pointer; white-space: nowrap; overflow: hidden;
}
.sb-item:hover { background: var(--sb-hover); color: var(--sb-text-on); }
.sb-item-on {
background: var(--sb-active);
color: var(--sb-text-on);
border-left-color: var(--sb-active-line);
font-weight: 600;
}
.sb-item-ic { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.sb-item-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
background: #ef4444; color: #fff;
padding: 1px 7px; border-radius: 10px;
font-size: 10.5px; font-weight: 700;
min-width: 18px; text-align: center;
}
.sb-badge-mini {
width: 8px; height: 8px; padding: 0;
border-radius: 50%; min-width: 0;
position: absolute; top: 6px; right: 8px;
}
/* Modo colapsado: ocultar labels y grupos */
.sb--col .sb-mod-lbl,
.sb--col .sb-grp-hdr,
.sb--col .sb-item-lbl,
.sb--col .sb-ft { display: none; }
.sb--col .sb-item { padding: 7px 0; justify-content: center; position: relative; border-left-width: 0; }
.sb--col .sb-item-on { background: var(--sb-active); border-left: 3px solid var(--sb-active-line); padding-left: 0; }
/* UX 2026-05-08: Hover del sidebar colapsado.
Agranda el ícono al pasar el mouse y muestra un tooltip flotante con el label.
El tooltip usa el atributo `title` que ya existe en cada . */
.sb--col .sb-item-ic { transition: transform .18s ease, color .18s ease; }
.sb--col .sb-item:hover .sb-item-ic {
transform: scale(1.25);
color: var(--sb-active-line);
}
.sb--col .sb-item:hover {
background: var(--sb-hover);
}
/* Tooltip personalizado en sidebar colapsado.
Lee del atributo `title` del nativo. Para evitar el tooltip nativo del
navegador (que es feo) podríamos cambiar a `data-tip`, pero lo dejamos así. */
.sb--col .sb-item {
position: relative;
overflow: visible;
}
.sb--col .sb-item::after {
content: attr(title);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(-6px);
background: var(--ink2, #1f2937);
color: #fff;
padding: 5px 10px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.25);
opacity: 0;
pointer-events: none;
z-index: 60;
transition: opacity .15s ease, transform .15s ease;
}
.sb--col .sb-item:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* Suprime el tooltip nativo cuando el custom está activo (al menos en hover) */
.sb--col .sb-item:hover { /* truco para descender pseudo-tooltip */ }
/* Footer sticky con breadcrumb */
.sb-ft {
padding: 10px 14px;
border-top: 1px solid var(--sb-border);
font-size: 10.5px; color: rgba(203,213,225,.6);
flex-shrink: 0; line-height: 1.3;
}
.sb-ft-mod { font-weight: 600; }
.sb-ft-sep { margin: 0 4px; opacity: .5; }
.sb-ft-sub { color: var(--sb-active-line); font-weight: 600; }
/* Mobile: sidebar como overlay */
@media (max-width: 900px) {
.sb { left: -260px; width: var(--sb-width-exp) !important; }
.sb--mob-on { left: 0; }
.erp-body:has(.sb) .erp-main--with-sidebar { margin-left: 0; }
.sb-scrim {
position: fixed; inset: 0; top: var(--nav1-h);
background: rgba(0,0,0,.45); z-index: 339;
}
}
/* ══════════════ COMPONENTS ══════════════ */
.ph { margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ph-l h2 { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.ph-l p { color: var(--t2); font-size: 12.5px; margin-top: 3px; }
.ph-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.erp-card { background: var(--white); border-radius: var(--r); border: 1px solid var(--b); box-shadow: var(--sh1); overflow: hidden; }
.card-h { padding: 13px 18px; border-bottom: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-title { font-family: 'Syne', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.card-b { padding: 18px; }
/* STATS */
.sg { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card {
background: var(--white); border-radius: var(--r); border: 1px solid var(--b);
box-shadow: var(--sh1); padding: 16px; display: flex; align-items: center; gap: 12px;
transition: box-shadow .18s, transform .18s;
}
.stat-card:hover { box-shadow: var(--sh2); transform: translateY(-1px); }
.stat-ic { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.stat-val { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--t3); margin-top: 3px; }
/* BUTTONS */
.btn { padding: 8px 14px; border-radius: var(--r2); font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 5px; transition: all .13s; white-space: nowrap; }
.btn-accent { background: var(--ac); color: #fff; } .btn-accent:hover { background: var(--ac-h); }
.btn-green { background: var(--gn); color: #fff; } .btn-green:hover { background: #0c9461; }
.btn-outline { background: var(--white); border: 1.5px solid var(--b2); color: var(--t2); } .btn-outline:hover { border-color: var(--ac); color: var(--ac); }
.btn-ghost { background: transparent; border: none; color: var(--t2); } .btn-ghost:hover { color: var(--ac); background: var(--ac-d); }
.btn-danger { background: var(--rd-d); color: var(--rd); border: 1px solid rgba(229,57,53,.2); } .btn-danger:hover { background: rgba(229,57,53,.2); }
.btn-sm { padding: 5px 11px; font-size: 11.5px; } .btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 5px; }
/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.bdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.bg-green { background: var(--gn-d); color: #08855a; } .bg-green .bdot { background: #08855a; }
.bg-red { background: var(--rd-d); color: var(--rd); } .bg-red .bdot { background: var(--rd); }
.bg-amber { background: var(--am-d); color: var(--am); } .bg-amber .bdot { background: var(--am); }
.bg-blue { background: var(--ac-d); color: var(--ac); } .bg-blue .bdot { background: var(--ac); }
.bg-purple { background: var(--pu-d); color: var(--pu); } .bg-purple .bdot { background: var(--pu); }
.bg-gray { background: #eef0f5; color: var(--t3); } .bg-gray .bdot { background: var(--t3); }
/* TOGGLE */
.tg { position: relative; width: 36px; height: 20px; cursor: pointer; display: inline-block; }
.tg input { opacity: 0; width: 0; height: 0; }
.tg-sl { position: absolute; inset: 0; background: #d0d5e2; border-radius: 100px; transition: background .17s; }
.tg-sl::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .17s; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.tg input:checked + .tg-sl { background: var(--gn); }
.tg input:checked + .tg-sl::before { transform: translateX(16px); }
/* TABLE */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 9px 13px; text-align: left; font-size: 10px; font-weight: 700; color: var(--t3); letter-spacing: .8px; text-transform: uppercase; background: var(--bg); border-bottom: 1px solid var(--b); white-space: nowrap; }
tbody td { padding: 11px 13px; font-size: 12.5px; border-bottom: 1px solid rgba(13,17,23,.04); vertical-align: middle; }
tbody tr:hover td { background: rgba(59,91,219,.025); }
tbody tr:last-child td { border-bottom: none; }
/* TOAST */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; }
.erp-toast {
background: var(--ink2); color: #fff;
padding: 10px 14px; border-radius: 8px;
font-size: 12.5px; min-width: 220px; max-width: 320px;
box-shadow: var(--sh3); display: flex; align-items: center; gap: 8px;
animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.erp-toast.t-success { background: #052e1c; border-left: 3px solid var(--gn); }
.erp-toast.t-warn { background: #2d1a00; border-left: 3px solid var(--am); }
.erp-toast.t-error { background: #2d0808; border-left: 3px solid var(--rd); }
.erp-toast.t-info { background: #0c1840; border-left: 3px solid var(--ac); }
/* PANELS */
.erp-panel { animation: fadeUp .22s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
/* SECURITY TABS */
.sec-tabs { display: flex; border-bottom: 1.5px solid var(--b); background: var(--white); }
.sec-tab { padding: 11px 18px; font-size: 12.5px; font-weight: 500; color: var(--t2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: all .13s; display: flex; align-items: center; gap: 6px; }
.sec-tab:hover { color: var(--ac); }
.sec-tab.active { color: var(--ac); border-bottom-color: var(--ac); font-weight: 600; }
/* CODE */
code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--ac); }
/* USER CELL */
.uc { display: flex; align-items: center; gap: 9px; }
.ua { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; color: #fff; flex-shrink: 0; }
.un { font-weight: 500; font-size: 12.5px; }
.ue { font-size: 11px; color: var(--t3); margin-top: 1px; }
/* GRIDS */
.dg2 { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; margin-bottom: 15px; }
.dg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.dg22 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
/* MODAL */
.erp-mo { position: fixed; inset: 0; background: rgba(13,17,23,.5); backdrop-filter: blur(4px); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px; }
.erp-md { background: var(--white); border-radius: 14px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh3); animation: mdIn .2s cubic-bezier(.34,1.56,.64,1); }
.md-sm { max-width: 440px; } .md-md { max-width: 560px; } .md-lg { max-width: 740px; }
@keyframes mdIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.md-h { padding: 18px 22px 14px; border-bottom: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); }
.md-close { width: 28px; height: 28px; border-radius: 6px; background: var(--bg); border: none; cursor: pointer; font-size: 13px; color: var(--t2); display: flex; align-items: center; justify-content: center; }
.md-close:hover { background: #e2e6ef; }
.md-b { padding: 18px 22px; }
.md-f { padding: 11px 22px 18px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--b); }
/* ══ HAMBURGUESA — botón y panel móvil ══ */
.n1-hamburger {
display: none; /* oculto en escritorio */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 36px; height: 36px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
border-radius: 7px;
cursor: pointer;
flex-shrink: 0;
margin-right: auto; /* empuja búsqueda y perfil a la derecha */
padding: 7px;
transition: background .15s, border-color .15s;
}
.n1-hamburger:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.2); }
.n1-hamburger span {
display: block; width: 18px; height: 2px;
background: rgba(255,255,255,.85); border-radius: 2px;
transition: transform .22s ease, opacity .22s ease;
}
/* Animación X al abrirse */
.n1-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.n1-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.n1-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Panel vertical de módulos (menú móvil) */
.n1-mob-menu {
position: fixed;
top: var(--nav1-h); /* justo debajo de la barra oscura */
left: 0; right: 0;
background: var(--ink2);
z-index: 399;
border-bottom: 1px solid rgba(255,255,255,.09);
padding: 6px 0 10px;
box-shadow: 0 10px 36px rgba(0,0,0,.45);
animation: mobMenuIn .18s ease;
/* Sprint III.15.b · Fix scroll: cuando hay muchos módulos + subs
expandidos, el menú se salía de la pantalla y quedaba inaccesible.
Limitamos la altura al viewport disponible y habilitamos scroll
vertical con inercia touch. */
max-height: calc(100vh - var(--nav1-h));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@keyframes mobMenuIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.n1-mob-item {
display: flex; align-items: center; gap: 13px;
width: 100%; padding: 11px 22px;
font-size: 13.5px; font-weight: 500;
color: rgba(255,255,255,.7);
background: none; border: none; cursor: pointer; text-align: left;
transition: background .12s, color .12s;
border-left: 3px solid transparent;
}
.n1-mob-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.n1-mob-item.active {
color: #fff; background: rgba(59,91,219,.15);
border-left-color: var(--ac);
}
.n1-mob-ic { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
/* Sprint III.15.b · Acordeón móvil — chevron y sub-items del módulo expandido */
.n1-mob-chev {
font-size: 12px; color: rgba(255,255,255,.5);
margin-left: auto; padding-left: 10px;
transition: transform .18s ease;
}
.n1-mob-chev--up { transform: rotate(180deg); color: rgba(255,255,255,.85); }
.n1-mob-item--exp {
background: rgba(59,91,219,.10);
color: #fff;
border-left-color: var(--ac);
}
.n1-mob-subs {
background: rgba(0,0,0,.20);
border-left: 3px solid var(--ac);
animation: mobSubsIn .16s ease;
}
@keyframes mobSubsIn { from{opacity:0;max-height:0} to{opacity:1;max-height:600px} }
.n1-mob-subitem {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 22px 9px 44px;
font-size: 12.5px; font-weight: 400;
color: rgba(255,255,255,.65);
background: none; border: none; cursor: pointer; text-align: left;
transition: background .12s, color .12s;
}
.n1-mob-subitem:hover { background: rgba(255,255,255,.06); color: #fff; }
.n1-mob-subitem.active { color: #fff; background: rgba(59,91,219,.20); font-weight: 500; }
.n1-mob-sub-ic { font-size: 14px; color: rgba(255,255,255,.35); width: 12px; text-align: center; }
/* ══ RESPONSIVE — APP SHELL ══ */
@media (max-width: 1100px) {
/* Ocultar módulos en barra, mostrar hamburguesa */
.n1-modules { display: none; }
.n1-hamburger { display: flex; }
/* Ocultar pill de período en navbar — se muestra en el menú móvil */
.fp-wrap { display: none; }
/* Búsqueda: reducir un poco */
.n1-search-box { min-width: 130px; max-width: 180px; }
}
@media (max-width: 900px) {
.n1-search-box { min-width: 110px; max-width: 150px; }
/* Contenido */
.erp-main { padding: 14px; }
.dg2, .dg3, .dg22 { grid-template-columns: 1fr; }
/* Modal full-width en móvil */
.modal-box { max-width: 100% !important; margin: 10px; border-radius: 10px; }
/* Tabla horizontal scroll */
.tbl-wrap { overflow-x: auto; }
/* Page header wrap */
.ph { flex-direction: column; gap: 10px; }
.ph-r { width: 100%; justify-content: flex-end; }
}
@media (max-width: 640px) {
.n1-right .n1-uname { display: none; }
.n1-right .n1-urole { display: none; }
.n2-right { display: none; }
/* Cards grids responsive */
.roles-grid, .mod-grid { grid-template-columns: 1fr 1fr !important; }
}
/* ══════════════════════════════════════════════════════════════════════
Sprint III.15 · Fase 2 — RESPONSIVE GLOBAL para dashboards y listados
══════════════════════════════════════════════════════════════════════
Aplica al patrón `.oc-*` estándar del ERP (Compras/Ventas/Inv/RRHH/etc):
.oc-stats → KPIs
.oc-table → tabla principal (dentro de .oc-table-wrap)
.oc-filtros → chips + search
.oc-search → input de búsqueda
Sin tocar el HTML de las páginas — solo CSS. Cada regla es aditiva y
solo activa bajo el breakpoint correspondiente.
══════════════════════════════════════════════════════════════════════ */
/* ── Tablet vertical y móvil landscape (< 900px) ────────────────────── */
@media (max-width: 900px) {
/* KPIs: 2 columnas fijas (antes: auto-fit minmax 180px → apretaba) */
.oc-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
.oc-stat { padding: 12px 14px; }
.oc-stat-ico { width: 36px; height: 36px; font-size: 16px; }
.oc-stat-val { font-size: 18px; }
.oc-stat-lbl { font-size: 10px; }
/* Tabla: scroll horizontal siempre disponible cuando desborda */
.oc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oc-table { min-width: 620px; } /* fuerza scroll cuando cabecera exhibe muchas cols */
/* Filtros/search: el input no debe robar todo el ancho */
.oc-search { min-width: 0; flex: 1 1 160px; }
/* Info bar más compacta */
.oc-info { padding: 10px 12px; font-size: .78rem; }
}
/* ── Móvil portrait (< 600px) ────────────────────────────────────────── */
@media (max-width: 600px) {
/* KPIs: 1 columna — apilados full-width */
.oc-stats { grid-template-columns: 1fr !important; }
.oc-stat { padding: 11px 13px; }
/* Reducir padding del main para ganar ancho útil */
.erp-main { padding: 12px 10px !important; }
/* Filtros en columna cuando no cabe */
.oc-filtros { gap: 6px 8px; }
.oc-search { width: 100%; flex-basis: 100%; }
/* Info bar en móvil: puede envolver */
.oc-info { flex-direction: row; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════
Sprint III.15 · Fase 3 — FORMULARIOS y MODALES responsive
══════════════════════════════════════════════════════════════════════
Aplica sin cambios de HTML a:
· Grids de campos: .dg22 (2 cols) · .dg3 (3 cols)
· Modales legacy: .erp-mo/.erp-md · .modal-overlay/.modal-box
· Modales gold: .oc-modal / .oc-modal-backdrop
· Form fields: .fg, .fi, .fl, .fiw
· Page header: .ph / .ph-r
══════════════════════════════════════════════════════════════════════ */
/* ── Tablet vertical (≤ 780px) — grids a 1 columna ─────────────────── */
@media (max-width: 780px) {
.dg3 { grid-template-columns: 1fr !important; gap: 12px !important; }
.dg22 { grid-template-columns: 1fr !important; gap: 12px !important; }
}
/* ── Móvil (≤ 640px) — modales full-screen + botones full-width ─────── */
@media (max-width: 640px) {
/* Modal patrón GOLD `.oc-modal` (nuevo estándar) — full-screen */
.oc-modal {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
top: 0 !important; left: 0 !important;
transform: none !important;
border-radius: 0 !important;
display: flex; flex-direction: column;
}
.oc-modal-head { border-radius: 0 !important; padding: 12px 14px; }
.oc-modal-head h3 { font-size: .95rem; }
.oc-modal-body { padding: 14px; }
.oc-modal-foot {
border-radius: 0 !important;
padding: 12px 14px;
flex-wrap: wrap;
}
.oc-modal-foot > button,
.oc-modal-foot > a { flex: 1 1 100%; min-width: 0; }
/* Modal legacy `.erp-mo` / `.erp-md` — full-screen */
.erp-mo { padding: 0 !important; align-items: stretch !important; }
.erp-md {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh; max-height: 100vh !important;
border-radius: 0 !important;
display: flex; flex-direction: column;
}
.md-h { border-radius: 0 !important; padding: 12px 14px; }
.md-b { padding: 14px; flex: 1; overflow-y: auto; }
.md-f { padding: 12px 14px; border-radius: 0 !important; flex-wrap: wrap; }
.md-f > button, .md-f > a { flex: 1 1 100%; }
/* Modal legacy `.modal-overlay` / `.modal-box` — full-screen */
.modal-overlay { padding: 0 !important; align-items: stretch !important; }
.modal-box {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh; max-height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
display: flex; flex-direction: column;
}
.modal-hd { border-radius: 0 !important; padding: 12px 14px; }
.modal-bd { padding: 14px; flex: 1; overflow-y: auto; }
.modal-ft {
padding: 12px 14px; border-radius: 0 !important;
flex-wrap: wrap;
}
.modal-ft > button, .modal-ft > a { flex: 1 1 100%; }
/* Form fields — más tap area en móvil */
.fi { padding: 11px 12px; font-size: 14px; }
.fiw .fi { padding-left: 36px; }
.fl { font-size: 10.5px; margin-bottom: 5px; }
/* Page header .ph → apilado en móvil (título arriba, acciones abajo) */
.ph { flex-direction: column; align-items: stretch !important; gap: 10px; }
.ph-r { justify-content: flex-start; flex-wrap: wrap; }
.ph-r > button, .ph-r > a { flex: 1 1 auto; }
}
/* ══════════════════════════════════════════════════════════════════════
Sprint III.15 · Fase 4 — Auditoría final · CASOS EDGE globales
══════════════════════════════════════════════════════════════════════
Después de la auditoría del agent Explore identifiqué 5 grupos de
componentes que las reglas Fase 2/3 no atrapan porque usan clases
propias en vez del patrón `.oc-*`. Todos los fixes son CSS global
sin cambiar HTML — cubre ~80% de páginas problemáticas.
══════════════════════════════════════════════════════════════════════ */
/* Grupo A · Tablas legacy con clase propia (.con-table de Contabilidad,
.lpr-table de Listas Precio) — asegurar scroll horizontal en móvil */
@media (max-width: 900px) {
.con-table, .lpr-table {
display: block; overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Grupo B · Modales legacy `.modal-bg` / `.modal` — full-screen móvil.
Muchas páginas RRHH/Capacitación/Evaluación/Viáticos usan este patrón
con min-width: 480-600px que desborda en móvil. */
@media (max-width: 640px) {
.modal-bg { padding: 0 !important; align-items: stretch !important; }
.modal-bg > .modal,
.modal-bg > .sd-modal {
width: 100vw !important; max-width: 100vw !important;
height: 100vh; max-height: 100vh !important;
min-width: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
display: flex; flex-direction: column;
}
}
/* Grupo C · Dashboard principal — `.dashboard-grid` sube de 4→3→2→1
columnas según viewport (antes solo colapsaba <768px) */
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .dashboard-grid { grid-template-columns: 1fr !important; } }
/* Grupo D · Filas de filtros 4-col en RRHH/Ventas que se apretaban */
@media (max-width: 900px) {
.vtf-row-4,
.filters-4,
.rh-filters { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.vtf-row-4,
.filters-4,
.rh-filters { grid-template-columns: 1fr !important; }
}
/* Grupo E · Tablas con min-width fijo grande (Kardex/Asiento/OC form) —
asegurar que el WRAPPER haga scroll horizontal (no la página entera) */
.krd-wrap, .sd-table-wrap, .ocf-table-wrap, .vtf-table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* Grupo F · Layout de chat/experto 3 columnas (ConExpertoContable) */
@media (max-width: 900px) {
.cec-layout,
.chat-layout { grid-template-columns: 1fr !important; }
}
/* ══ MENÚ MÓVIL: indicador de período contable ══ */
.n1-mob-period {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
padding: 10px 22px 12px;
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 4px;
cursor: default;
}
.n1-mob-period-body {
flex: 1;
min-width: 0;
}
.n1-mob-period-nombre {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.n1-mob-period-ano {
font-size: 11px;
color: rgba(255,255,255,.4);
margin-top: 1px;
}
.n1-mob-period-tag {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
flex-shrink: 0;
}
/* ── MudBlazor overrides ── */
.mud-overlay { z-index: 1200 !important; }
/* ══ BÚSQUEDA GLOBAL ══ */
.n1-search-wrap { position:relative; }
.n1-search-box { display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 10px;transition:all .2s;min-width:160px;max-width:220px; }
.n1-search-box.active,.n1-search-box:focus-within { background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);box-shadow:0 0 0 2px rgba(100,130,255,.25); }
.n1-search-ic { font-size:13px;opacity:.7;flex-shrink:0; }
.n1-search-inp { background:transparent;border:none;outline:none;color:#fff;font-size:12.5px;font-family:'DM Sans',sans-serif;width:100%;min-width:80px; }
.n1-search-inp::placeholder { color:rgba(255,255,255,.45); }
.n1-search-cls { background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:11px;padding:0 2px;flex-shrink:0; }
.n1-search-cls:hover { color:#fff; }
.n1-search-kbd { background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;font-size:9px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace;flex-shrink:0; }
.n1-search-dd { position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:10px;box-shadow:0 8px 32px rgba(13,17,23,.18);z-index:9999;overflow:hidden;min-width:320px;border:1px solid var(--b);animation:srchIn .15s ease; }
@keyframes srchIn { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.srch-group { padding:8px 14px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);background:var(--bg); }
.srch-item { display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .1s; }
.srch-item:hover { background:var(--ac-d); }
.srch-ic { font-size:16px;width:28px;text-align:center;flex-shrink:0; }
.srch-lbl { font-size:13px;font-weight:500;color:var(--ink); }
.srch-sub { font-size:11px;color:var(--t3);margin-top:1px; }
/* ══ TOGGLE SWITCH ══ */
.sw { position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0; }
.sw input { opacity:0;width:0;height:0; }
.sw-sl { position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:20px;transition:.2s; }
.sw-sl:before { content:'';position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s; }
input:checked + .sw-sl { background:var(--ac); }
input:checked + .sw-sl:before { transform:translateX(16px); }
/* ══ MÓDULOS CHECKBOXES ══ */
.mod-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px; }
.mod-chk { border:1.5px solid var(--b);border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px; }
.mod-chk:hover { border-color:var(--ac);background:var(--ac-d); }
.mod-chk.sel { border-color:var(--ac);background:var(--ac-d); }
.mod-chk input { width:15px;height:15px;accent-color:var(--ac);cursor:pointer; }
.mod-chk-label { font-size:12px;font-weight:500;color:var(--ink); }
.mod-chk-code { font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace; }
/* ══════════════════════════════════════════════════════
MODAL OVERLAY — clases usadas en todos los módulos
══════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(13,17,23,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: moFadeIn .18s ease;
}
@keyframes moFadeIn { from{opacity:0} to{opacity:1} }
.modal-box {
background: var(--white);
border-radius: 14px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(13,17,23,.22), 0 4px 16px rgba(13,17,23,.12);
animation: moBoxIn .22s cubic-bezier(.34,1.4,.64,1);
display: flex;
flex-direction: column;
}
@keyframes moBoxIn { from{opacity:0;transform:scale(.93) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-hd {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--b);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
background: var(--white);
border-radius: 14px 14px 0 0;
position: sticky;
top: 0;
z-index: 1;
}
.modal-title {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.modal-cls {
width: 30px; height: 30px;
border-radius: 8px;
background: var(--bg);
border: 1px solid var(--b);
cursor: pointer;
font-size: 13px;
color: var(--t2);
display: flex; align-items: center; justify-content: center;
transition: all .13s;
flex-shrink: 0;
}
.modal-cls:hover { background: #e2e6ef; color: var(--rd); }
.modal-bd {
padding: 20px 22px;
overflow-y: auto;
flex: 1;
}
.modal-ft {
padding: 12px 22px 18px;
border-top: 1px solid var(--b);
display: flex;
gap: 8px;
justify-content: flex-end;
flex-shrink: 0;
background: var(--bg);
border-radius: 0 0 14px 14px;
}
/* ══ OPTION CHIPS (módulos) ══ */
.opt-chips { display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;min-height:32px; }
.opt-chip {
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:20px;
font-size:11.5px;font-weight:500;
background:var(--ac-d);color:var(--ac);
border:1px solid rgba(59,91,219,.2);
animation:chipIn .15s ease;
}
@keyframes chipIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
.opt-chip-rm {
background:none;border:none;cursor:pointer;
color:var(--ac);font-size:12px;padding:0;line-height:1;
opacity:.6;transition:opacity .1s;
}
.opt-chip-rm:hover { opacity:1; }
/* ══ NAVBAR: EMPRESA BADGE (compacto — solo avatar, tooltip CSS) ═ */
.n1-empresa-badge {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 7px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px;
cursor: pointer;
transition: background .15s;
flex-shrink: 0;
position: relative; /* necesario para el tooltip ::after */
}
.n1-empresa-badge:hover { background: rgba(255,255,255,.18); }
/* Tooltip con el nombre de la empresa al hacer hover */
.n1-empresa-badge::after {
content: attr(data-label);
position: absolute;
bottom: calc(-34px);
left: 50%;
transform: translateX(-50%);
background: rgba(13,17,23,.9);
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .15s .1s;
z-index: 500;
box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.n1-empresa-badge:hover::after { opacity: 1; }
.n1-emp-av {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff;
flex-shrink: 0;
}
/* Cuando el avatar del badge muestra el logo real */
.n1-emp-av-logo {
background: rgba(255,255,255,.15);
width: auto; min-width: 28px; max-width: 60px; padding: 2px 4px;
}
.n1-emp-nombre {
font-size: 12.5px;
font-weight: 600;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
/* ══ NAVBAR: FISCAL PERIOD PILL ══════════════════════════════════ */
/* Wrapper con posición relativa para el dropdown */
.fp-wrap {
position: relative;
flex-shrink: 0;
}
/* Pill principal — mismo estilo que .n1-empresa-badge */
.fp-pill {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px 5px 8px;
margin-right: 10px; /* Separación visual con el avatar de usuario (UX 2026-05-08) */
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px;
cursor: pointer;
transition: background .15s, border-color .15s;
white-space: nowrap;
color: #fff;
font-size: 12.5px;
font-weight: 500;
}
.fp-pill:hover { background: rgba(255,255,255,.18); }
.fp-pill.fp-pill-open {
background: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
}
.fp-ic { font-size: 14px; line-height: 1; }
.fp-label { font-weight: 600; }
/* Dot de estado dentro del pill */
.fp-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.fp-dot-gn { background: #22c55e; }
.fp-dot-am { background: #f59e0b; }
.fp-dot-rd { background: #ef4444; }
.fp-dot-gy { background: rgba(255,255,255,.35); }
.fp-estado {
font-size: 11.5px;
color: rgba(255,255,255,.7);
}
/* Flecha rotante */
.fp-arr {
font-size: 13px;
color: rgba(255,255,255,.55);
transform: rotate(90deg);
display: inline-block;
transition: transform .18s ease;
line-height: 1;
}
.fp-arr-up { transform: rotate(-90deg); }
/* ── Backdrop invisible para cerrar el dropdown ── */
.fp-backdrop {
position: fixed;
inset: 0;
z-index: 199;
}
/* ── Dropdown card ─────────────────────────────────────────────── */
.fp-dd {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 380px;
background: var(--white);
border: 1px solid var(--b2);
border-radius: var(--r);
box-shadow: var(--sh3);
z-index: 200;
overflow: hidden;
animation: fpDdIn .15s cubic-bezier(.22,1,.36,1);
}
@keyframes fpDdIn {
from { opacity: 0; transform: translateY(-6px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Encabezado del dropdown */
.fp-dd-hd {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--b);
}
.fp-dd-ic { font-size: 15px; }
.fp-dd-title {
font-size: 12px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: .5px;
flex: 1;
}
.fp-dd-spin { font-size: 13px; }
/* ── Sección de años (contenedor principal con flechas) ────────── */
.fp-yr-section {
display: flex;
align-items: center;
border-bottom: 1px solid var(--b);
background: var(--bg);
}
/* Botones de navegación ‹ › */
.fp-yr-nav {
flex-shrink: 0;
width: 28px;
height: 100%;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: var(--t3);
transition: color .12s, background .12s;
user-select: none;
}
.fp-yr-nav:hover { color: var(--ac); background: var(--ac-d); }
.fp-yr-nav-l { border-right: 1px solid var(--b); }
.fp-yr-nav-r { border-left: 1px solid var(--b); }
/* Chips de año — scroll horizontal para soportar muchos años */
.fp-yr-bar {
display: flex;
gap: 5px;
padding: 8px 10px;
flex: 1;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.fp-yr-bar::-webkit-scrollbar { display: none; }
.fp-yr-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 600;
color: var(--t2);
background: var(--white);
border: 1px solid var(--b2);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
flex-shrink: 0; /* evita que se compriman al hacer scroll */
white-space: nowrap;
}
.fp-yr-chip:hover { background: var(--ac-d); color: var(--ac); border-color: rgba(59,91,219,.2); }
.fp-yr-chip:disabled { opacity: .55; cursor: not-allowed; }
.fp-yr-chip.fp-yr-ac {
background: var(--ac);
color: #fff;
border-color: var(--ac);
}
.fp-yr-chip.fp-yr-ac .fp-yr-dot { background: rgba(255,255,255,.8); }
.fp-yr-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--gn);
flex-shrink: 0;
}
/* Hint de scroll (aparece solo cuando hay más de 5 años) */
.fp-yr-hint {
padding: 4px 12px 5px;
background: var(--bg);
border-bottom: 1px solid var(--b);
text-align: center;
}
.fp-yr-hint span {
font-size: 10px;
color: var(--t3);
letter-spacing: .2px;
}
/* Lista de períodos */
.fp-list {
max-height: 260px;
overflow-y: auto;
padding: 6px 0;
}
.fp-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 14px;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background .1s;
}
.fp-row:hover { background: var(--bg); }
.fp-row.fp-row-ac { background: var(--ac-d); }
.fp-row-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fp-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.fp-row-nombre {
font-size: 12.5px;
font-weight: 600;
color: var(--t1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-row.fp-row-ac .fp-row-nombre { color: var(--ac); }
.fp-row-dates {
font-size: 11px;
color: var(--t3);
}
/* Tags de estado en la lista */
.fp-row-tag {
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 20px;
flex-shrink: 0;
}
.fp-tag-gn { background: var(--gn-d); color: var(--gn); }
.fp-tag-am { background: var(--am-d); color: var(--am); }
.fp-tag-rd { background: var(--rd-d); color: var(--rd); }
.fp-tag-gy { background: rgba(13,17,23,.06); color: var(--t3); }
/* Pie del dropdown */
.fp-dd-ft {
padding: 8px 14px;
border-top: 1px solid var(--b);
background: var(--bg);
}
.fp-dd-hint {
font-size: 11px;
color: var(--t3);
}
/* ════════════════════════════════════════════════════════════════════════
UX Mejoras Globales (2026-04-29)
Aplican a TODOS los formularios de Ventas/Compras/Configuración.
════════════════════════════════════════════════════════════════════════ */
/* 1. Indicador de campo obligatorio (asterisco rojo) */
.required::after,
label.required::after,
.lbl-required::after {
content: " *";
color: #dc2626;
font-weight: 700;
margin-left: 2px;
}
/* 2. Estados de validación en tiempo real */
.field-error {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
.field-error:focus {
outline: 2px solid #fca5a5;
outline-offset: 1px;
}
.field-success {
border-color: #86efac !important;
}
.field-msg-error {
font-size: 11.5px;
color: #b91c1c;
margin-top: 3px;
display: flex;
align-items: center;
gap: 4px;
}
.field-msg-success {
font-size: 11.5px;
color: #15803d;
margin-top: 3px;
}
/* 7. Campos de solo lectura */
.field-readonly,
input.field-readonly,
select.field-readonly,
textarea.field-readonly {
background: #f1f5f9 !important;
color: #334155 !important;
cursor: not-allowed !important;
border-color: #e2e8f0 !important;
}
/* 6. Skeleton loaders animados */
@keyframes skeletonPulse {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
background: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px);
background-size: 200px 100%;
animation: skeletonPulse 1.5s ease-in-out infinite;
border-radius: 6px;
display: inline-block;
}
.skeleton-line { height: 14px; width: 100%; margin: 4px 0; }
.skeleton-line--sm { height: 12px; width: 60%; }
.skeleton-line--lg { height: 22px; width: 40%; }
.skeleton-input { height: 36px; width: 100%; }
.skeleton-button { height: 36px; width: 120px; border-radius: 8px; }
.skeleton-card {
height: 80px; width: 100%;
border-radius: 10px;
margin-bottom: 12px;
}
/* Spinner de botón en estado de carga */
.btn-spinner::before {
content: '⏳';
display: inline-block;
margin-right: 6px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 3. Toast notifications (posición fija, top-right) */
.toast-container {
position: fixed;
top: 90px; /* debajo del nav */
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(420px, 92vw);
pointer-events: none;
}
.toast-item {
pointer-events: auto;
position: relative; /* requerido por la barra de progreso */
overflow: hidden;
background: #fff;
border-left: 4px solid #6b7280;
border-radius: 8px;
padding: 12px 16px 14px 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
font-size: 13px;
color: #1f2937;
display: flex;
align-items: flex-start;
gap: 10px;
transition: transform .12s ease;
}
.toast-item:hover { transform: translateX(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.toast-item.toast--success { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.toast-item.toast--error { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.toast-item.toast--warning { border-left-color: #f59e0b; background: #fffbeb; color: #78350f; }
.toast-item.toast--info { border-left-color: #0ea5e9; background: #f0f9ff; color: #0c4a6e; }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.45; }
.toast-close {
background: transparent; border: 0; cursor: pointer;
font-size: 16px; color: inherit; opacity: 0.6;
flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@keyframes toastSlideIn {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
/* 8. Responsive — colapsar columnas en pantallas estrechas */
@media (max-width: 1200px) {
.vtf-row-3, .vtf-row-2,
.ocf-row-3, .ocf-row-2 {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 900px) {
/* Tablas con scroll horizontal global */
.vtf-table-wrap, .ocf-table-wrap, .oc-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Menú '···' siempre visible */
.menu-acciones, .acciones-cell {
position: sticky;
right: 0;
background: inherit;
}
}
/* ═══════════════════════════════════════════════════════════════════
MegaMenu — Navegación principal por categorías (UX 2026-05-08)
Reemplaza el navbar horizontal de módulos por 6 grupos.
═══════════════════════════════════════════════════════════════════ */
.n1-megamenu-wrap { padding: 0 8px; gap: 2px; overflow: visible; }
.mm-bar {
display: flex;
align-items: center;
gap: 4px;
height: 100%;
}
/* Skeleton mientras se cargan los permisos: 4 barritas pulsantes que evitan
que la barra se vea vacía ni que aparezcan grupos "fantasma". */
.mm-bar-skeleton {
display: flex;
align-items: center;
gap: 14px;
padding: 0 12px;
}
.mm-bar-skeleton span {
width: 88px;
height: 14px;
border-radius: 4px;
background: linear-gradient(90deg,
rgba(255,255,255,.06) 0%,
rgba(255,255,255,.14) 50%,
rgba(255,255,255,.06) 100%);
background-size: 200% 100%;
animation: mm-skel 1.2s ease-in-out infinite;
}
.mm-bar-skeleton span:nth-child(2) { width: 110px; animation-delay: .12s; }
.mm-bar-skeleton span:nth-child(3) { width: 94px; animation-delay: .24s; }
.mm-bar-skeleton span:nth-child(4) { width: 78px; animation-delay: .36s; }
@keyframes mm-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.mm-grupo {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.mm-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(255,255,255,0.78);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .14s ease, color .14s ease;
white-space: nowrap;
position: relative;
}
.mm-btn:hover,
.mm-btn--open { background: rgba(255,255,255,0.1); color: #fff; }
.mm-btn-ic { font-size: 14px; }
.mm-btn-lbl { line-height: 1; }
.mm-chevron { font-size: 10px; transition: transform .15s ease; opacity: .7; }
.mm-chevron--rot { transform: rotate(180deg); }
/* Grupo con módulo activo: línea inferior */
.mm-grupo--activo .mm-btn { color: #fff; font-weight: 600; }
.mm-grupo--activo .mm-btn::after {
content: ''; position: absolute;
bottom: -1px; left: 12px; right: 12px;
height: 2px; background: #60a5fa; border-radius: 2px;
}
/* Panel desplegable */
.mm-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 320px;
max-width: 420px;
background: #1e2a3a;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
padding: 8px;
z-index: 1010;
animation: mm-open .15s ease-out;
}
@keyframes mm-open {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.mm-panel-titulo {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--acento, #60a5fa);
padding: 4px 8px 2px;
}
.mm-panel-sep {
height: 1px;
background: rgba(255,255,255,0.08);
margin: 4px 0 6px;
}
/* Ítem de módulo */
.mm-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: rgba(255,255,255,0.85);
transition: background .12s ease, border-color .12s ease;
border-left: 3px solid transparent;
cursor: pointer;
position: relative;
}
.mm-item:hover {
background: rgba(255,255,255,0.06);
border-left-color: var(--acento, #60a5fa);
color: #fff;
}
.mm-item--activo {
background: rgba(96,165,250,0.18);
border-left-color: #60a5fa;
color: #fff;
}
.mm-item--prox {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
.mm-item-ic {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 18px;
color: var(--acento, #60a5fa);
}
.mm-item--activo .mm-item-ic {
background: rgba(96,165,250,0.25);
}
.mm-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-item-nom {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: inherit;
}
.mm-item-desc {
font-size: 11px;
color: rgba(255,255,255,0.55);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.mm-item--activo .mm-item-desc { color: rgba(255,255,255,0.75); }
.mm-item-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.mm-badge-prox {
font-size: 10px;
background: rgba(107,114,128,0.3);
color: #cbd5e1;
border-radius: 4px;
padding: 2px 7px;
white-space: nowrap;
font-weight: 600;
}
/* Overlay invisible que captura clicks fuera del panel para cerrarlo */
.mm-overlay {
position: fixed;
inset: 0;
background: transparent;
z-index: 1005;
}
/* ── Breadcrumb del módulo activo en el navbar ── */
.navbar__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255,255,255,0.55);
margin: 0 16px;
padding: 4px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
white-space: nowrap;
flex-shrink: 0;
}
.navbar__breadcrumb .bc-ic { font-size: 14px; }
.navbar__breadcrumb .bc-grupo { color: rgba(255,255,255,0.55); }
.navbar__breadcrumb .bc-sep { color: rgba(255,255,255,0.3); }
.navbar__breadcrumb .bc-mod { color: #fff; font-weight: 600; }
@media (max-width: 1440px) {
.navbar__breadcrumb { display: none; }
}
/* ── Botón mejorado de cambio de empresa ── */
.navbar__empresa-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
height: 32px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.9);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .15s ease;
max-width: 180px;
}
.navbar__empresa-btn:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.4);
color: #fff;
transform: scale(1.02);
}
.navbar__empresa-btn:active {
background: rgba(255,255,255,0.18);
transform: scale(0.99);
}
.navbar__empresa-ic { font-size: 14px; }
.navbar__empresa-logo { height: 20px; max-width: 30px; object-fit: contain; border-radius: 3px; }
.navbar__empresa-nombre {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 110px;
}
.navbar__empresa-chevron {
font-size: 10px;
color: rgba(255,255,255,0.55);
flex-shrink: 0;
}
/* En móviles muy angostos, el megamenú colapsa al hamburger */
@media (max-width: 900px) {
.mm-bar {
position: fixed;
top: 56px;
left: 0;
right: 0;
background: #1e2a3a;
flex-direction: column;
align-items: stretch;
padding: 8px;
gap: 4px;
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
transform: translateY(-100%);
transition: transform .2s ease;
z-index: 999;
}
.mm-bar--mob-open { transform: translateY(0); }
.mm-btn { justify-content: flex-start; width: 100%; }
.mm-panel { position: static; max-width: 100%; box-shadow: none; padding: 4px 0 4px 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
Modales estándar Samael (2026-05-15)
Gold standard del módulo Compras (`.oc-modal`) — patrón unificado para
todos los módulos. Cada página puede seguir usando su prefijo local
(.bk-modal, .cp-modal, .alm-modal…) y simplemente añadir `samael-modal`
como clase adicional para heredar los estilos uniformes.
También se exponen como clases standalone para nuevas páginas.
════════════════════════════════════════════════════════════════════════ */
.samael-modal-backdrop,
.bk-modal-backdrop,
.cp-modal-backdrop,
.ti-modal-backdrop,
.mrc-modal-backdrop,
.fp-modal-backdrop,
.lot-modal-backdrop,
.ser-modal-backdrop,
.alm-modal-backdrop,
.tf-modal-backdrop,
.mov-modal-backdrop,
.tra-modal-backdrop {
position: fixed; inset: 0;
background: rgba(15, 18, 30, .55);
z-index: 900;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.samael-modal,
.bk-modal,
.cp-modal,
.ti-modal,
.mrc-modal,
.fp-modal,
.lot-modal,
.ser-modal,
.alm-modal,
.tf-modal,
.mov-modal,
.tra-modal {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 14px;
z-index: 901;
width: min(640px, 92vw);
max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
overflow: hidden;
}
/* Variante ancha para modales con tabs / muchos campos (Almacenes, TomaFísica, Lotes). */
.samael-modal--wide,
.alm-modal, /* InvAlmacenes tiene 7 tabs */
.tf-modal, /* InvTomaFisica tiene tabla de líneas */
.lot-modal--wide {
width: min(960px, 96vw);
}
.samael-modal-head,
.bk-modal-header, .bk-modal-head,
.cp-modal-header, .cp-modal-head,
.ti-modal-header, .ti-modal-head,
.mrc-modal-header, .mrc-modal-head,
.fp-modal-header, .fp-modal-head,
.lot-modal-header, .lot-modal-head,
.ser-modal-header, .ser-modal-head,
.alm-modal-header, .alm-modal-head,
.tf-modal-header, .tf-modal-head,
.mov-modal-header, .mov-modal-head,
.tra-modal-header, .tra-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 14px 14px 0 0;
flex-shrink: 0;
}
.samael-modal-head h3,
.samael-modal-header h3,
.bk-modal-header h3, .bk-modal-head h3,
.cp-modal-header h3, .cp-modal-head h3,
.ti-modal-header h3, .ti-modal-head h3,
.mrc-modal-header h3, .mrc-modal-head h3,
.fp-modal-header h3, .fp-modal-head h3,
.lot-modal-header h3, .lot-modal-head h3,
.ser-modal-header h3, .ser-modal-head h3,
.alm-modal-header h3, .alm-modal-head h3,
.tf-modal-header h3, .tf-modal-head h3,
.mov-modal-header h3, .mov-modal-head h3,
.tra-modal-header h3, .tra-modal-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
.samael-modal-close,
.bk-modal-close,
.cp-modal-close,
.ti-modal-close,
.mrc-modal-close,
.fp-modal-close,
.lot-modal-close,
.ser-modal-close,
.alm-modal-close,
.tf-modal-close,
.mov-modal-close,
.tra-modal-close {
border: 0;
background: transparent;
cursor: pointer;
font-size: 18px;
color: #64748b;
padding: 4px 8px;
border-radius: 6px;
transition: background .12s, color .12s;
}
.samael-modal-close:hover,
.bk-modal-close:hover, .cp-modal-close:hover, .ti-modal-close:hover,
.mrc-modal-close:hover, .fp-modal-close:hover, .lot-modal-close:hover,
.ser-modal-close:hover, .alm-modal-close:hover, .tf-modal-close:hover,
.mov-modal-close:hover, .tra-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.samael-modal-body,
.bk-modal-body,
.cp-modal-body,
.ti-modal-body,
.mrc-modal-body,
.fp-modal-body,
.lot-modal-body,
.ser-modal-body,
.alm-modal-body,
.tf-modal-body,
.mov-modal-body,
.tra-modal-body {
padding: 18px;
overflow-y: auto;
flex: 1;
}
.samael-modal-foot,
.samael-modal-footer,
.bk-modal-foot, .bk-modal-footer,
.cp-modal-foot, .cp-modal-footer,
.ti-modal-foot, .ti-modal-footer,
.mrc-modal-foot, .mrc-modal-footer,
.fp-modal-foot, .fp-modal-footer,
.lot-modal-foot, .lot-modal-footer,
.ser-modal-foot, .ser-modal-footer,
.alm-modal-foot, .alm-modal-footer,
.tf-modal-foot, .tf-modal-footer,
.mov-modal-foot, .mov-modal-footer,
.tra-modal-foot, .tra-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 18px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
border-radius: 0 0 14px 14px;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════════════
Breadcrumb estándar Samael (2026-05-15)
Gold standard `.oc-breadcrumb` del módulo Compras: migaja de pan compacta
con separador "›", primer nivel clickeable que vuelve al dashboard del
módulo, último nivel destacado en azul Samael.
════════════════════════════════════════════════════════════════════════ */
.samael-breadcrumb,
.alr-breadcrumb, .alm-breadcrumb, .bk-breadcrumb, .cp-breadcrumb,
.krd-breadcrumb, .lot-breadcrumb, .mov-breadcrumb, .rev-breadcrumb,
.ser-breadcrumb, .stk-breadcrumb, .ti-breadcrumb, .tf-breadcrumb,
.tra-breadcrumb, .ubi-breadcrumb, .mrc-breadcrumb, .ple-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #64748b;
margin-bottom: 14px;
padding: 14px 16px 0;
flex-wrap: wrap;
}
.samael-breadcrumb a,
.alr-breadcrumb a, .alm-breadcrumb a, .bk-breadcrumb a, .cp-breadcrumb a,
.krd-breadcrumb a, .lot-breadcrumb a, .mov-breadcrumb a, .rev-breadcrumb a,
.ser-breadcrumb a, .stk-breadcrumb a, .ti-breadcrumb a, .tf-breadcrumb a,
.tra-breadcrumb a, .ubi-breadcrumb a, .mrc-breadcrumb a, .ple-breadcrumb a {
color: #64748b;
text-decoration: none;
cursor: pointer;
transition: color .12s;
}
.samael-breadcrumb a:hover,
.alr-breadcrumb a:hover, .alm-breadcrumb a:hover, .bk-breadcrumb a:hover,
.cp-breadcrumb a:hover, .krd-breadcrumb a:hover, .lot-breadcrumb a:hover,
.mov-breadcrumb a:hover, .rev-breadcrumb a:hover, .ser-breadcrumb a:hover,
.stk-breadcrumb a:hover, .ti-breadcrumb a:hover, .tf-breadcrumb a:hover,
.tra-breadcrumb a:hover, .ubi-breadcrumb a:hover, .mrc-breadcrumb a:hover,
.ple-breadcrumb a:hover {
color: #0ea5e9;
}
.samael-breadcrumb .active,
.alr-breadcrumb .active, .alm-breadcrumb .active, .bk-breadcrumb .active,
.cp-breadcrumb .active, .krd-breadcrumb .active, .lot-breadcrumb .active,
.mov-breadcrumb .active, .rev-breadcrumb .active, .ser-breadcrumb .active,
.stk-breadcrumb .active, .ti-breadcrumb .active, .tf-breadcrumb .active,
.tra-breadcrumb .active, .ubi-breadcrumb .active, .mrc-breadcrumb .active,
.ple-breadcrumb .active {
color: #0ea5e9;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════════════
Cards de KPI / Stats — paridad con `.oc-stat` de Compras (2026-05-15)
Cualquier card que actúe como "tile de métrica" hereda sombra suave,
border-radius 12px, hover lift y separación uniforme.
════════════════════════════════════════════════════════════════════════ */
.samael-stat,
.oc-stat,
.alr-stat, .alm-stat, .bk-stat, .cp-stat, .krd-stat, .lot-stat,
.mov-stat, .rev-stat, .ser-stat, .stk-stat, .ti-stat, .tf-stat,
.tra-stat, .ubi-stat, .mrc-stat {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.samael-stat:hover,
.oc-stat:hover,
.alr-stat:hover, .alm-stat:hover, .bk-stat:hover, .cp-stat:hover,
.krd-stat:hover, .lot-stat:hover, .mov-stat:hover, .rev-stat:hover,
.ser-stat:hover, .stk-stat:hover, .ti-stat:hover, .tf-stat:hover,
.tra-stat:hover, .ubi-stat:hover, .mrc-stat:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
border-color: #cbd5e1;
}
/* Wrapper general de tablas — sombra suave + radius uniforme */
.samael-table-wrap,
.oc-table-wrap,
.alr-table-wrap, .alm-table-wrap, .bk-table-wrap, .cp-table-wrap,
.krd-table-wrap, .lot-table-wrap, .mov-table-wrap, .rev-table-wrap,
.ser-table-wrap, .stk-table-wrap, .ti-table-wrap, .tf-table-wrap,
.tra-table-wrap, .ubi-table-wrap, .mrc-table-wrap {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
/* ════════════════════════════════════════════════════════════════════════
INVENTARIO UX UNIFICATION (2026-05-15)
════════════════════════════════════════════════════════════════════════
Las páginas de Inventario tienen estilos inline `