/* ============================================================================
ON — Sistema de diseño
----------------------------------------------------------------------------
Hoja única para todas las vistas. Antes cada uno de los 21 archivos .ejs
traía su propia copia de los tokens y los componentes, que fue justo lo que
dejó 14 menús distintos, 7 paddings de input y ~15 radios conviviendo.
Dos temas, elegidos explícitamente por el :
data-theme="dark" → sistema interno (bodega, uso prolongado)
data-theme="light" → portal del cliente y del grupo
No se apoya en prefers-color-scheme: cada superficie sabe cuál quiere, y así
nadie recibe un tema distinto al que se diseñó según su sistema operativo.
========================================================================= */
/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
--on-blue: #0D42F3;
--on-blue-600: #0A34C4;
--on-blue-100: #E4EAFE;
--on-blue-50: #EFF3FE;
--on-ink: #1A1A1A;
--bg: #F6F7FB;
--surface: #FFFFFF;
--surface-2: #F0F2F8;
--border: #E3E6EF;
--border-str: #CDD2E2;
--text: #151823;
--text-2: #5A6072;
--text-3: #8B91A3;
--op-rec: #0D42F3;
--op-ent: #0E9F6E;
--op-rep: #D97706;
--op-bod: #7C3AED;
--ok: #0E9F6E;
--warn: #D97706;
--crit: #E02424;
--ok-bg: #E6F6EF;
--warn-bg: #FDF2E3;
--crit-bg: #FDEAEA;
--rec-bg: #E4EAFE;
--ring: rgba(13, 66, 243, 0.28);
--shadow-sm: 0 1px 2px rgba(21, 24, 35, 0.05);
--shadow: 0 1px 2px rgba(21, 24, 35, 0.05), 0 4px 12px rgba(21, 24, 35, 0.04);
--r-sm: 8px;
--r: 10px;
--r-lg: 14px;
--r-xl: 18px;
--ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, monospace;
--sidebar-w: 248px;
/* Nativo (íconos de , spinners, scrollbars) sigue el
data-theme explícito, no el SO — si no, un en modo
oscuro puede pintar su ícono de calendario en negro-sobre-negro. */
color-scheme: light;
}
:root[data-theme="dark"] {
--on-blue: #3B6BFF;
--on-blue-600: #5C84FF;
--on-blue-100: #16224A;
--on-blue-50: #121A33;
--bg: #0A0C12;
--surface: #12151E;
--surface-2: #181C27;
--border: #242938;
--border-str: #333A4D;
--text: #EEF0F6;
--text-2: #9AA1B4;
--text-3: #666D80;
--op-rec: #3B6BFF;
--op-ent: #24C08A;
--op-rep: #F0A32B;
--op-bod: #9D6BFF;
--ok: #24C08A;
--warn: #F0A32B;
--crit: #F1585B;
--ok-bg: #0F2A20;
--warn-bg: #2E2110;
--crit-bg: #2E1416;
--rec-bg: #16224A;
--ring: rgba(59, 107, 255, 0.35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--ui);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--on-blue);
outline-offset: 2px;
}
a { color: var(--on-blue); }
/* Utilidades tipográficas */
.t-micro {
font-size: 11px; font-weight: 650; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-3);
}
.t-sm { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mono {
font-family: var(--mono); font-size: 12px;
font-variant-numeric: tabular-nums;
}
.muted { color: var(--text-2); }
.spacer { flex: 1; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================================================================
Shell — sidebar global + área principal
========================================================================= */
.app { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
background: var(--surface-2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 18px 0 12px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.side-brand {
display: flex; align-items: center; gap: 10px;
padding: 0 18px 18px;
text-decoration: none; color: inherit;
}
.side-brand .mark {
width: 38px; height: 26px; border-radius: 7px;
background: var(--on-blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.side-brand .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.side-brand .who b {
font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
}
.side-brand .who span { font-size: 11px; color: var(--text-3); }
/* Selector de cliente — el contexto global */
.client-ctx { padding: 0 12px 16px; position: relative; }
.client-switch {
width: 100%;
display: flex; align-items: center; gap: 9px;
padding: 9px 10px;
background: var(--surface);
border: 1px solid var(--border-str);
border-radius: var(--r);
cursor: pointer; text-align: left;
font-family: var(--ui); color: var(--text);
text-decoration: none;
transition: border-color 0.15s;
}
.client-switch:hover { border-color: var(--on-blue); }
.client-switch .avatar {
width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
background: var(--on-blue); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
}
.client-switch.empty .avatar { background: var(--surface-2); color: var(--text-3); }
.client-switch .lines { min-width: 0; flex: 1; }
.client-switch .lines em {
display: block; font-style: normal;
font-size: 10px; font-weight: 650; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--text-3);
}
.client-switch .lines b {
display: block; font-size: 13px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.client-switch.empty .lines b { color: var(--text-3); }
.client-switch .chev { color: var(--text-3); flex-shrink: 0; }
/* Panel del selector de cliente — lista de clientes al hacer clic en
.client-switch, misma superficie que el botón que lo abre. */
.client-menu {
position: absolute; left: 12px; right: 12px; top: 100%; margin-top: 2px;
z-index: 70;
background: var(--surface); border: 1px solid var(--border-str);
border-radius: var(--r); box-shadow: var(--shadow);
padding: 6px; max-height: 320px; overflow-y: auto;
}
.client-menu[hidden] { display: none; }
.client-menu-item {
display: block; width: 100%;
padding: 8px 10px; border: none; background: none; border-radius: 8px;
font-family: var(--ui); font-size: 13px; color: var(--text);
text-decoration: none; text-align: left; cursor: pointer;
}
.client-menu-item:hover { background: var(--surface-2); }
.client-menu-item.on { color: var(--on-blue); font-weight: 600; }
.client-menu-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-3); }
.nav-group { padding: 0 12px; margin-bottom: 2px; }
.nav-group > .t-micro { padding: 12px 8px 6px; display: block; }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--r-sm);
font-size: 13.5px; color: var(--text-2);
text-decoration: none; cursor: pointer;
border: none; background: none; width: 100%;
font-family: var(--ui); text-align: left;
transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.on { background: var(--on-blue); color: #fff; font-weight: 600; }
.nav-item.on .ic { opacity: 1; }
.nav-item .ic { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; display: block; }
.nav-item .badge {
margin-left: auto; font-size: 11px; font-weight: 650;
padding: 1px 7px; border-radius: 20px;
background: var(--crit-bg); color: var(--crit);
font-variant-numeric: tabular-nums;
}
.nav-item.on .badge { background: rgba(255, 255, 255, 0.22); color: #fff; }
.side-foot { margin-top: auto; padding: 12px 12px 0; border-top: 1px solid var(--border); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
display: flex; align-items: center; gap: 14px;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-wrap: wrap;
position: sticky; top: 0; z-index: 20;
}
.topbar h1 {
margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.02em;
}
.topbar .sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.content { padding: 24px; flex: 1; }
.content > * + * { margin-top: 14px; }
/* Botón de menú — solo aparece en pantallas chicas */
.nav-toggle {
display: none;
width: 40px; height: 40px; flex-shrink: 0;
align-items: center; justify-content: center;
background: var(--surface); color: var(--text);
border: 1px solid var(--border-str); border-radius: var(--r);
cursor: pointer;
}
.side-scrim { display: none; }
@media (max-width: 900px) {
.sidebar {
position: fixed; top: 0; left: 0; z-index: 60;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: var(--shadow);
}
.sidebar.open { transform: translateX(0); }
.nav-toggle { display: inline-flex; }
.side-scrim.open {
display: block; position: fixed; inset: 0; z-index: 50;
background: rgba(0, 0, 0, 0.45);
}
.content { padding: 16px; }
.topbar { padding: 14px 16px; }
}
/* ============================================================================
Formularios — un solo spec para todo el sistema
========================================================================= */
.field {
height: 40px;
padding: 0 12px;
width: 100%;
font-family: var(--ui);
font-size: 14px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border-str);
border-radius: var(--r);
transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.field {
height: auto; min-height: 96px; padding: 10px 12px;
line-height: 1.6; resize: vertical;
}
textarea.field.code { font-family: var(--mono); font-size: 12.5px; }
.field::placeholder { color: var(--text-3); }
.field:hover:not(:disabled) { border-color: var(--text-3); }
.field:focus {
outline: none;
border-color: var(--on-blue);
box-shadow: 0 0 0 3px var(--ring);
}
.field:disabled { opacity: 0.55; cursor: not-allowed; }
select.field { cursor: pointer; }
.field-auto { width: auto; }
.field-r { text-align: right; }
.fw { display: flex; flex-direction: column; gap: 6px; }
.fw > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.fhint { font-size: 11.5px; color: var(--text-3); }
.field-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ferror { font-size: 12px; color: var(--crit); font-weight: 600; }
.field.invalid { border-color: var(--crit); }
/* ============================================================================
Zona de carga — CSV, foto
========================================================================= */
.dropzone {
border: 1px dashed var(--border-str);
border-radius: var(--r-lg);
padding: 22px 18px;
text-align: center;
transition: border-color 0.15s, background 0.15s;
}
.dropzone.drag-over { border-color: var(--on-blue); background: var(--on-blue-100); }
.dropzone.invalid { border-color: var(--crit); }
.dropzone input[type="file"] { display: none; }
.dropzone label { cursor: pointer; display: block; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.dropzone .dz-icon { color: var(--on-blue); margin-bottom: 8px; display: flex; justify-content: center; }
.dropzone .dz-hint { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.dropzone .dz-filename { font-size: 12px; color: var(--ok); font-weight: 600; margin-top: 8px; }
.dropzone-preview { max-width: 100%; max-height: 220px; border-radius: var(--r); display: block; margin: 0 auto; }
/* ============================================================================
Radio pills — grupo de opciones excluyentes (ej. corrector de estado)
========================================================================= */
.radio-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill label {
display: block; padding: 10px 14px;
background: var(--surface); border: 1px solid var(--border-str); border-radius: var(--r);
font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; text-align: center;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.radio-pill label:hover { border-color: var(--text-3); color: var(--text); }
.radio-pill input:checked + label { border-color: var(--on-blue); color: var(--on-blue); background: var(--on-blue-100); }
.radio-pill.full { grid-column: 1 / -1; }
/* ============================================================================
Botones
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 40px; padding: 0 16px;
font-family: var(--ui); font-size: 13.5px; font-weight: 600;
border-radius: var(--r); border: 1px solid transparent;
cursor: pointer; white-space: nowrap; text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--on-blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--on-blue-600); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-str); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text-3); }
.btn-danger { background: var(--crit); color: #fff; }
.btn-danger-ghost { background: var(--surface); color: var(--crit); border-color: var(--crit); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Operaciones — categóricas, no el acento de interfaz */
.btn-op { color: #fff; border: none; }
.btn-rec { background: var(--op-rec); }
.btn-ent { background: var(--op-ent); }
.btn-rep { background: var(--op-rep); }
.btn-bod { background: var(--op-bod); }
/* ============================================================================
Tarjetas
========================================================================= */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.card-h {
display: flex; align-items: center; gap: 10px;
padding: 13px 16px; border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.card-h h2, .card-h h3 {
margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.01em;
}
.card-b { padding: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* ============================================================================
Chips
========================================================================= */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 20px;
font-size: 11.5px; font-weight: 650;
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-crit { background: var(--crit-bg); color: var(--crit); }
.chip-rec { background: var(--rec-bg); color: var(--op-rec); }
.chip-ent { background: var(--ok-bg); color: var(--op-ent); }
.chip-mut { background: var(--surface-2); color: var(--text-2); }
/* ============================================================================
KPI
========================================================================= */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 15px 16px;
}
.kpi .lab {
font-size: 11px; font-weight: 650; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--text-3);
display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.kpi .val {
font-size: 30px; font-weight: 700; letter-spacing: -0.035em;
font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi .meta { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.kpi.accent { border-color: var(--on-blue); }
.kpi.accent .val { color: var(--on-blue); }
.v-ok { color: var(--ok); }
.v-warn { color: var(--warn); }
.v-crit { color: var(--crit); }
.v-rec { color: var(--op-rec); }
/* ============================================================================
Tablas
========================================================================= */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
text-align: left; padding: 9px 14px; white-space: nowrap;
font-size: 11px; font-weight: 650; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--text-3);
border-bottom: 1px solid var(--border);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl td.r { font-variant-numeric: tabular-nums; font-weight: 600; }
/* ============================================================================
Stepper — control de cantidad
========================================================================= */
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
width: 30px; height: 30px; border-radius: var(--r-sm);
border: 1px solid var(--border-str); background: var(--surface);
color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.stepper button:hover { border-color: var(--on-blue); color: var(--on-blue); }
.stepper input {
width: 58px; height: 30px; text-align: center;
border: 1px solid var(--border-str); border-radius: var(--r-sm);
background: var(--surface); color: var(--text);
font-family: var(--ui); font-size: 14px; font-weight: 650;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-color: var(--on-blue); box-shadow: 0 0 0 3px var(--ring); }
.stepper input.overridden { color: var(--op-rep); border-color: var(--op-rep); }
/* Renglón de lista con control al final */
.row-line {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--border);
}
.row-line:last-child { border-bottom: none; }
.row-line .nm { flex: 1; font-size: 14px; min-width: 0; }
/* ============================================================================
Avisos
========================================================================= */
.alert {
display: flex; gap: 11px; align-items: flex-start;
padding: 12px 15px; border-radius: var(--r-lg);
font-size: 13.5px; line-height: 1.55;
border: 1px solid;
}
.alert-error { background: var(--crit-bg); border-color: var(--crit); color: var(--text); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn); color: var(--text); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--text); }
.alert-info { background: var(--on-blue-100); border-color: var(--on-blue); color: var(--text); }
.empty-state {
padding: 40px 20px; text-align: center;
font-size: 14px; color: var(--text-3);
}
/* ============================================================================
Toasts
========================================================================= */
.toast-container {
position: fixed; bottom: 20px; right: 20px; z-index: 200;
display: flex; flex-direction: column; gap: 8px;
}
.toast {
padding: 12px 16px; border-radius: var(--r);
background: var(--surface); border: 1px solid var(--border-str);
box-shadow: var(--shadow); font-size: 13.5px; font-weight: 500;
max-width: 340px; animation: toast-in 0.2s ease both;
}
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--crit); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================================
Acceso (login)
========================================================================= */
.login-frame {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 40px 20px;
}
.login-card {
width: 100%; max-width: 380px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-xl); padding: 32px 28px;
box-shadow: var(--shadow);
position: relative;
}
.login-card .mark {
width: 52px; height: 35px; border-radius: 10px;
background: var(--on-blue);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.login-card h1 { margin: 0 0 5px; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.login-card .lede { margin: 0 0 22px; font-size: 13.5px; color: var(--text-2); }
/* ============================================================================
Portal del cliente — superficie pública
========================================================================= */
.portal-page { max-width: 1080px; margin: 0 auto; padding: 0 0 60px; }
.p-brandbar {
background: var(--on-blue);
padding: 18px 28px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.p-brandbar .logo {
width: 46px; height: 31px; border-radius: 9px;
background: rgba(255, 255, 255, 0.16);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.p-brandbar .titles { line-height: 1.25; min-width: 0; }
.p-brandbar .titles b {
display: block; color: #fff; font-size: 16px; font-weight: 650; letter-spacing: -0.015em;
}
.p-brandbar .titles span { display: block; color: rgba(255, 255, 255, 0.72); font-size: 12.5px; }
.p-brandbar .stamp {
color: rgba(255, 255, 255, 0.9); font-size: 12px; text-decoration: none;
background: rgba(255, 255, 255, 0.14); padding: 5px 11px; border-radius: 20px;
}
button.stamp { border: none; cursor: pointer; font-family: var(--ui); display: inline-flex; align-items: center; gap: 5px; }
button.stamp:hover { background: rgba(255, 255, 255, 0.22); }
.p-head {
padding: 30px 28px 26px;
border-bottom: 1px solid var(--border);
display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
.p-head h1 {
margin: 0 0 4px; font-size: clamp(24px, 3.4vw, 32px);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}
.p-head .period { color: var(--text-2); font-size: 14.5px; }
.p-figures {
display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 1px; background: var(--border); border-bottom: 1px solid var(--border);
}
.fig { background: var(--surface); padding: 22px 24px; }
.fig .lab {
font-size: 11px; font-weight: 650; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--text-3); margin-bottom: 9px;
display: flex; align-items: center; gap: 6px;
}
.fig .lab i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.fig .v {
font-size: 34px; font-weight: 700; letter-spacing: -0.035em;
font-variant-numeric: tabular-nums; line-height: 1;
}
.fig .sub { font-size: 12.5px; color: var(--text-2); margin-top: 7px; }
.p-body { padding: 26px 28px 30px; }
.p-footer {
padding: 20px 28px; border-top: 1px solid var(--border);
background: var(--surface-2);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12.5px; color: var(--text-3);
}
.p-shell {
border: 1px solid var(--border); border-radius: var(--r-xl);
overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
margin: 24px;
}
@media (max-width: 640px) {
.p-shell { margin: 0; border-radius: 0; border-left: none; border-right: none; }
.p-brandbar, .p-head, .p-body, .p-footer { padding-left: 18px; padding-right: 18px; }
.fig { padding: 18px; }
}
/* ── Movimientos ────────────────────────────────────────────────────────── */
.mov {
border: 1px solid var(--border); border-radius: var(--r-lg);
background: var(--surface); margin-bottom: 10px; overflow: hidden;
transition: border-color 0.12s;
}
.mov:hover { border-color: var(--border-str); }
.mov-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.mov-when { min-width: 112px; }
.mov-when b { display: block; font-size: 14px; font-weight: 620; }
.mov-when span { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mov-arts { flex: 1; min-width: 190px; display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
font-size: 12.5px; padding: 3px 10px; border-radius: 7px;
background: var(--surface-2); color: var(--text-2);
}
.tag b { color: var(--text); font-variant-numeric: tabular-nums; }
.mov-tot { text-align: right; min-width: 58px; }
.mov-tot b {
display: block; font-size: 19px; font-weight: 700;
letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.mov-tot span {
font-size: 10.5px; font-weight: 620; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--text-3);
}
.mov-acts { display: flex; gap: 6px; flex-wrap: wrap; }
details.pieces { border-top: 1px solid var(--border); }
details.pieces summary {
padding: 11px 16px; cursor: pointer; font-size: 13px;
color: var(--text-2); font-weight: 600; list-style: none;
display: flex; align-items: center; gap: 7px;
transition: color 0.15s;
}
details.pieces summary:hover { color: var(--on-blue); }
details.pieces summary::-webkit-details-marker { display: none; }
details.pieces summary::before {
content: "\203A"; font-size: 16px; line-height: 1;
transition: transform 0.15s; display: inline-block;
}
details.pieces[open] summary::before { transform: rotate(90deg); }
.pieces-body { padding: 0 16px 15px; }
.piece-group { margin-bottom: 12px; }
.piece-group:last-child { margin-bottom: 0; }
.piece-group .gl { font-size: 11.5px; font-weight: 650; color: var(--text-2); margin-bottom: 6px; }
.piece-list { display: flex; flex-wrap: wrap; gap: 4px; }
.piece {
font-family: var(--mono); font-size: 11px;
padding: 3px 7px; border-radius: 5px;
background: var(--surface-2); color: var(--text-3);
text-decoration: none; border: 1px solid transparent;
}
.piece:hover { border-color: var(--on-blue); color: var(--on-blue); }
/* Panel de edición dentro de un movimiento */
.mov.editing { border-color: var(--on-blue); box-shadow: 0 0 0 3px var(--ring); }
.edit-panel { padding: 15px 16px; background: var(--surface-2); border-top: 1px solid var(--border); }
/* ── Línea de tiempo ────────────────────────────────────────────────────── */
.trail { position: relative; padding-left: 26px; }
.trail::before {
content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
width: 2px; background: var(--border);
}
.trail-item { position: relative; padding: 0 0 20px; }
.trail-item:last-child { padding-bottom: 0; }
.trail-item::before {
content: ""; position: absolute; left: -23px; top: 5px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--surface); border: 2px solid var(--op-rec);
}
.trail-item.out::before { border-color: var(--op-ent); }
.trail-item .tw { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.trail-item .tt { font-size: 14px; font-weight: 620; margin: 1px 0 3px; }
.trail-item .td { font-size: 13px; color: var(--text-2); }
/* ── Barra de progreso (umbrales, porcentajes) ──────────────────────────── */
.progress-bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.2s; }
/* ── Barra apilada ──────────────────────────────────────────────────────── */
.stack { display: flex; height: 28px; border-radius: 7px; overflow: hidden; }
.stack > div {
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff; min-width: 0;
}
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; flex-shrink: 0; }
/* ── Galería de daños ───────────────────────────────────────────────────── */
.dmg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dmg { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); transition: border-color 0.15s; }
.dmg:hover { border-color: var(--border-str); }
.dmg .ph { width: 100%; height: 160px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); }
.dmg .noph {
width: 100%; height: 160px; background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
color: var(--text-3); font-size: 13px; border-bottom: 1px solid var(--border);
}
.dmg .info { padding: 12px 14px; }
.dmg .info .epc { font-family: var(--mono); font-size: 11px; color: var(--crit); font-weight: 600; margin-bottom: 5px; word-break: break-all; }
.dmg .info .when { font-size: 11px; color: var(--text-3); margin-bottom: 7px; }
.dmg .info p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
/* ── Índice de clientes ─────────────────────────────────────────────────── */
.client-row {
display: flex; align-items: center; gap: 14px;
padding: 13px 16px; border-bottom: 1px solid var(--border);
cursor: pointer; text-decoration: none; color: inherit;
transition: background 0.12s;
}
.client-row:last-child { border-bottom: none; }
.client-row:hover { background: var(--surface-2); }
.client-row .av {
width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
background: var(--on-blue-100); color: var(--on-blue);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.client-row .nm { flex: 1; min-width: 140px; }
.client-row .nm b { display: block; font-size: 14.5px; font-weight: 600; }
.client-row .nm span { font-size: 12px; color: var(--text-3); }
.client-col { min-width: 78px; }
.client-col em {
display: block; font-style: normal;
font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-3);
}
.client-col b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* ── Segmented control ──────────────────────────────────────────────────── */
.seg {
display: inline-flex; padding: 3px; gap: 3px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 12px;
}
.seg button {
display: inline-flex; align-items: center; gap: 7px;
height: 36px; padding: 0 16px;
border: none; background: none; cursor: pointer;
font-family: var(--ui); font-size: 13.5px; font-weight: 600;
color: var(--text-2); border-radius: 9px;
transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] {
background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}
.seg button[aria-selected="true"] .ic { color: var(--on-blue); }
/* ============================================================================
Conteo en vivo — resumen interactivo y captura manual
Estos componentes conservan los nombres de clase que ya usa el JS de
ui.ejs (event delegation por selector); solo se retokenizan los colores
al sistema nuevo. No renombrar sin actualizar los selectores en el script.
========================================================================= */
.summary-ts { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.client-group { margin-bottom: 6px; transition: opacity 0.2s; }
.client-group + .client-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.client-group.deselected { opacity: 0.4; }
.client-group.deselected .cnt-btn,
.client-group.deselected .cnt-input { pointer-events: none; }
.client-check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; user-select: none; }
.client-checkbox { width: 15px; height: 15px; accent-color: var(--on-blue); cursor: pointer; flex-shrink: 0; }
.client-name { font-size: 11px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; }
.summary-client-label { font-size: 11px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.summary-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.summary-row:last-child { border-bottom: none; }
.summary-article-name { flex: 1; font-size: 13.5px; color: var(--text); }
.count-control { display: flex; align-items: center; gap: 4px; }
.cnt-btn {
width: 27px; height: 27px; border-radius: var(--r-sm);
border: 1px solid var(--border-str); background: var(--surface);
color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.15s, color 0.15s;
}
.cnt-btn:hover { border-color: var(--on-blue); color: var(--on-blue); }
.cnt-input {
width: 56px; height: 27px; text-align: center;
border: 1px solid var(--border-str); border-radius: var(--r-sm);
background: var(--surface); color: var(--text);
font-family: var(--ui); font-size: 13.5px; font-weight: 650;
font-variant-numeric: tabular-nums;
}
.cnt-input:focus { outline: none; border-color: var(--on-blue); box-shadow: 0 0 0 3px var(--ring); }
.cnt-input.overridden { color: var(--op-rep); border-color: var(--op-rep); }
.scanned-badge { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.manual-inline-row { display: grid; grid-template-columns: 1fr auto 26px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.manual-inline-art { height: 27px; padding: 0 8px; font-size: 12.5px; }
.manual-inline-rm {
background: none; border: none; color: var(--text-3); font-size: 14px; cursor: pointer;
height: 27px; width: 26px; display: flex; align-items: center; justify-content: center;
border-radius: var(--r-sm); transition: color 0.15s;
}
.manual-inline-rm:hover { color: var(--crit); }
.add-manual-btn {
margin-top: 8px; background: none; border: 1px dashed var(--border-str); border-radius: var(--r-sm);
color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em;
cursor: pointer; padding: 6px 10px; width: 100%; text-align: left;
transition: border-color 0.15s, color 0.15s;
}
.add-manual-btn:hover { border-color: var(--on-blue); color: var(--on-blue); }
.summary-missing { margin-top: 10px; font-size: 11.5px; color: var(--text-3); font-style: italic; }
/* Panel de captura manual (sin escáner) */
.manual-article-row {
display: grid; grid-template-columns: 1fr 96px 32px;
gap: 10px; align-items: center; width: 100%;
margin-bottom: 8px;
}
.manual-article-row > * { min-width: 0; }
.manual-article-row-head {
margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.manual-article-row .manual-qty { text-align: center; }
.manual-rm-btn {
background: none; border: 1px solid var(--border-str); border-radius: var(--r-sm);
color: var(--text-3); font-size: 14px; cursor: pointer; height: 40px; width: 100%;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.15s, color 0.15s;
}
.manual-rm-btn:hover { border-color: var(--crit); color: var(--crit); }
.manual-add-row-btn {
background: none; border: 1px dashed var(--border-str); border-radius: var(--r-sm);
color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em;
cursor: pointer; padding: 6px 12px; margin: 4px 8px 12px 0;
transition: border-color 0.15s, color 0.15s;
}
.manual-add-row-btn:hover { border-color: var(--on-blue); color: var(--on-blue); }
.manual-photo-hint { display: inline-block; font-size: 10.5px; color: var(--text-3); margin-bottom: 12px; }
.manual-art-prefilled { background: var(--on-blue-100); border-color: var(--on-blue) !important; color: var(--text) !important; }
.manual-qty-zero { color: var(--text-3); }
.manual-art-uncertain .manual-art { border-color: var(--warn) !important; background: var(--warn-bg) !important; }
/* ── Barra de acciones pegajosa ─────────────────────────────────────────── */
.actionbar {
position: sticky; bottom: 0; z-index: 15;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
}