/* ===================================================================== Sistema visual ADM v2 — fuente ÚNICA de verdad (Sprint UX Fase 3). Concepto "El almacén": placas-código, carbón/acero, rojo solo acento. Todo vive bajo el scope .adm para NO tocar los templates aún sin migrar. Activo cuando el flag SISTEMA_VISUAL_V2_ENABLED pone . ===================================================================== */ @font-face { font-family: "Bebas Neue"; src: url("/static/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } .adm { /* marca (manual pág. 10) */ --rojo-adm: #FF0600; --rojo-presion: #D40500; /* neutros */ --carbon: #202124; --acero: #75787B; --acero-claro: #C7CACD; --taller: #F5F5F7; --blanco: #FFFFFF; --linea: #ECEDEF; /* semáforo funcional (diferenciado del rojo marca) */ --ok: #059669; --ok-fondo: #E6F4EF; --alerta: #D97706; --alerta-fondo: #FBF1E4; --peligro: #DC2626; --peligro-fondo: #FBEAEA; /* tipografía */ --display: "Bebas Neue", "Arial Narrow", sans-serif; --texto: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; /* geometría */ --radio: 4px; --radio-placa: 2px; --sombra: 0 1px 2px rgba(32,33,36,.10); } /* ---- reset mínimo dentro del scope ---- */ .adm, .adm * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .adm { margin: 0; font-family: var(--texto); background: var(--taller); color: var(--carbon); font-size: 15px; line-height: 1.45; } .adm h1, .adm h2, .adm h3 { margin: 0; } .adm .num, .adm .dinero { font-variant-numeric: tabular-nums; } .adm input[type=radio], .adm input[type=checkbox] { accent-color: var(--carbon); } /* tabular-nums en TODO input numérico/dinero (precisión — requisito contadora) */ .adm input[type=number], .adm input[inputmode=decimal] { font-variant-numeric: tabular-nums; } /* ---- header carbón + logo ---- */ .adm-header { background: var(--carbon); color: #fff; display: flex; align-items: center; gap: 16px; padding: 10px 20px; } .adm-header .logo { height: 34px; display: block; } .adm-header .marca { font-family: var(--display); font-size: 20px; letter-spacing: 1px; color: #fff; text-decoration: none; } .adm-header .back { color: #fff; text-decoration: none; font-size: 1.3em; } .adm-header .quien { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--acero-claro); } .adm-header a.accion { color: #fff; text-decoration: none; font-size: 13px; border: 1px solid #4a4d50; border-radius: var(--radio); padding: 6px 12px; } .adm-header a.accion:hover { border-color: #fff; } .adm-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; } .adm-main.flujo { max-width: 560px; } /* rutero, widget: densidad de flujo */ /* ---- tipografía de página ---- */ .adm h1.titulo { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 2px; } .adm .lede { color: var(--acero); font-size: 14px; margin: 2px 0 28px; } /* ---- PLACAS (signature) ---- */ .adm .placa { display: inline-block; font-family: var(--display); letter-spacing: 1.5px; padding: 3px 8px 1px; border-radius: var(--radio-placa); font-size: 12px; line-height: 1.2; background: var(--acero); color: #fff; } .adm .placa.rojo { background: var(--rojo-adm); } .adm .placa.carbon { background: var(--carbon); } .adm .placa.ok { background: var(--ok-fondo); color: var(--ok); } .adm .placa.alerta { background: var(--alerta-fondo); color: var(--alerta); } .adm .placa.peligro { background: var(--peligro-fondo); color: var(--peligro); } /* ---- grid de módulos (bins) ---- */ .adm .grupo { margin-bottom: 28px; } .adm .grupo > .anaquel { display: inline-block; font-family: var(--display); font-size: 14px; letter-spacing: 2.5px; color: #fff; background: var(--acero); padding: 3px 10px 1px; border-radius: var(--radio-placa); margin-bottom: 12px; } .adm .bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .adm a.bin { display: flex; align-items: center; gap: 14px; background: var(--blanco); border: 1px solid var(--acero-claro); border-radius: var(--radio); padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: border-color .12s; } .adm a.bin .codigo { flex: 0 0 52px; height: 44px; display: grid; place-items: center; background: var(--carbon); color: #fff; font-family: var(--display); font-size: 21px; letter-spacing: 1px; border-radius: var(--radio-placa); transition: background .12s; } .adm a.bin:hover, .adm a.bin:focus-visible { border-color: var(--carbon); } .adm a.bin:hover .codigo, .adm a.bin:focus-visible .codigo { background: var(--rojo-adm); } .adm a.bin:focus-visible { outline: 2px solid var(--rojo-adm); outline-offset: 2px; } .adm a.bin b { display: block; font-weight: 700; font-size: 15px; } .adm a.bin small { display: block; color: var(--acero); font-size: 12.5px; line-height: 1.35; } .adm a.bin .badge { margin-left: 6px; vertical-align: 1px; font-size: 11px; } @media (max-width: 900px) { .adm .bins { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .adm .bins { grid-template-columns: 1fr; } } /* ---- componentes base (para los templates que se migren después) ---- */ .adm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--texto); font-weight: 700; font-size: 14px; border: 0; border-radius: var(--radio); padding: 12px 18px; cursor: pointer; background: var(--carbon); color: #fff; text-decoration: none; } .adm .btn:hover { background: #35373b; } .adm .btn.primario { background: var(--rojo-adm); } /* CTA de dinero/acción fuerte */ .adm .btn.primario:hover { background: var(--rojo-presion); } .adm .btn.secundario { background: var(--blanco); color: var(--carbon); border: 1px solid var(--acero-claro); } .adm .btn.secundario:hover { border-color: var(--carbon); background: var(--blanco); } .adm .btn.terciario { background: transparent; color: var(--acero); padding: 12px 6px; } .adm .btn:disabled, .adm .btn[disabled] { opacity: .4; cursor: not-allowed; } .adm .card { background: var(--blanco); border: 1px solid var(--acero-claro); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; } .adm label.campo { display: block; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--acero); margin-bottom: 4px; } .adm input[type=text], .adm input[type=number], .adm input[type=date], .adm input[type=password], .adm select, .adm textarea { width: 100%; min-height: 44px; border: 1px solid var(--acero-claro); border-radius: var(--radio); padding: 10px 12px; font: inherit; color: var(--carbon); background: var(--blanco); } .adm input:focus, .adm select:focus, .adm textarea:focus { outline: 2px solid var(--rojo-adm); outline-offset: 1px; border-color: var(--carbon); } .adm input.num, .adm input.dinero { text-align: right; font-variant-numeric: tabular-nums; } .adm .tabla-wrap { background: var(--blanco); border: 1px solid var(--acero-claro); border-radius: var(--radio); overflow-x: auto; } .adm table.t { width: 100%; border-collapse: collapse; font-size: 14px; } .adm table.t th { font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acero); background: var(--taller); text-align: left; padding: 10px 12px; white-space: nowrap; } .adm table.t td { padding: 11px 12px; border-top: 1px solid var(--linea); } .adm table.t tbody tr:hover { background: var(--taller); } .adm table.t .num { text-align: right; font-variant-numeric: tabular-nums; } .adm .aviso { border-left: 3px solid var(--acero); background: var(--blanco); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; } .adm .aviso.ok { border-color: var(--ok); background: var(--ok-fondo); } .adm .aviso.alerta { border-color: var(--alerta); background: var(--alerta-fondo); } .adm .aviso.peligro { border-color: var(--peligro); background: var(--peligro-fondo); } .adm .vacio { text-align: center; color: var(--acero); padding: 40px 16px; background: var(--blanco); border: 1px dashed var(--acero-claro); border-radius: var(--radio); } /* ---- páginas de acceso (login, setup, 2FA): tarjeta centrada ---- */ .adm.centrado { display: flex; min-height: 100vh; align-items: center; justify-content: center; } .adm .acceso { width: 100%; max-width: 380px; margin: 16px; } .adm .acceso .marca { text-align: center; margin-bottom: 20px; } .adm .acceso .marca img { height: 46px; } .adm .acceso h1 { font-family: var(--display); font-size: 26px; letter-spacing: 1.5px; margin: 2px 0; } .adm .acceso .sub { color: var(--acero); font-size: 13px; margin-bottom: 18px; } .adm .acceso label.campo { margin-top: 14px; } .adm .acceso .btn { width: 100%; margin-top: 20px; } .adm .acceso ul.reqs { font-size: 13px; color: var(--acero); margin: 10px 0 0 18px; line-height: 1.5; } .adm input.codigo { font-size: 1.4em; text-align: center; letter-spacing: 6px; font-variant-numeric: tabular-nums; } /* ===================================================================== Overrides móvil rutero (v2): ganan por especificidad (.adm X) sobre el CSS inline de cada template (X). Neutralizan el AZUL Material; conservan verde=ok, ámbar=alerta, rojo=peligro (funcionales). Markup y JS intactos. ===================================================================== */ .adm { background: var(--taller); color: var(--carbon); font-family: var(--texto); } /* header carbón (los templates usan

suelto, no .adm-header) */ .adm header { background: var(--carbon) !important; box-shadow: none; } /* botones/acentos azules → carbón; pills azules → acero */ .adm a.cta, .adm .sesion .btn.arqueo, .adm .sesion .btn.dep { background: var(--carbon); } .adm .sesion .btn.abrir { background: var(--ok); } /* abrir sesión = ok */ .adm a.ruta { border-left-color: var(--rojo-adm); border-radius: var(--radio); } .adm a.cta { border-radius: var(--radio); } .adm a.ruta .cuenta, .adm .card .folio, .adm .acc a.tel, .adm .badge-eta, .adm .stop-tag { background: #ECEDEF; color: var(--carbon); } .adm a.ruta .efectivo, .adm .sesion .em .val, .adm .card .total { color: var(--carbon); } .adm a.ruta .efectivo.alerta, .adm .sesion.alerta .em .val { color: var(--peligro); } /* radios de tarjetas al sistema (4px) sin tocar su layout */ .adm .card, .adm .arq-row, .adm .stop-row, .adm .sesion { border-radius: var(--radio); } /* toast del sistema (varias vistas definen #toast azul/gris) */ .adm #toast { background: var(--carbon); border-radius: var(--radio); } .adm #toast.err { background: var(--peligro); } /* marca ADM en el header rutero (ícono blanco + wordmark Bebas) */ .adm header .marca-ico { height: 15px; vertical-align: -2px; margin-right: 9px; } .adm header .marca-txt { font-family: var(--display); font-weight: 400; letter-spacing: 1.5px; font-size: 1.2em; } /* subtítulo con más contraste sobre carbón (era opacity .9) */ .adm header .sub { color: var(--acero-claro); opacity: 1; } /* contador "0/17": sin píldora, texto tabular blanco (más data, menos deco) */ .adm header .c { background: transparent; padding: 0; border-radius: 0; font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; } /* --- chrome de _base.html (admin/escritorio) cuando v2 --- */ .adm .nav { background: var(--carbon); } .adm .nav .brand img { height: 26px; display: block; } .adm .nav .rolchip { background: var(--acero); } /* placa de rol en gris */ .adm .nav a.salir { color: #fff; border: 1px solid #4a4d50; } .adm .nav a.salir:hover { border-color: #fff; } /* stepper del wizard de nómina (paso activo era azul) → carbón */ .adm .stepper .paso.activo { background: var(--carbon); } /* link "↩ sugerencia" del planner de metas (era azul) → carbón */ .adm td.celda .reset { color: var(--carbon); } /* --- overrides de las otras vistas rutero (cobro, carga, sesión, prep, kpis) --- */ /* fills azules (cajas de monto/resumen) → carbón */ .adm .monto-box, .adm .fondo, .adm .resumen { background: var(--carbon); } /* botones azules → carbón; el confirmar de cobro COMMITEA dinero → rojo */ .adm .btn.next, .adm .btn.iniciar, .adm .ubic-opt.corr, .adm .ord-row .num, .adm .pin-num, .adm .acc .pin, .adm #nav-todas { background: var(--carbon); } .adm .btn.confirmar { background: var(--rojo-adm); } /* barra de progreso del cargador (era azul pastel) → carbón */ .adm .prog { background: var(--carbon); color: #fff; } /* textos/acentos azules → acero o carbón */ .adm .ord-h, .adm .orden-info, .adm #anticipo-box summary { color: var(--acero); } .adm .ord-row .eta, .adm .cat-tag.ruta { background: #ECEDEF; color: var(--carbon); } /* códigos/folios monospace azules → carbón sobre gris */ .adm .linea .code, .adm .ln .code, .adm .ohead .folio, .adm .contact a.tel { background: #ECEDEF; color: var(--carbon); } /* opción seleccionada / chips azules → carbón/acero */ .adm .opt.sel { border-color: var(--carbon); background: var(--taller); } .adm .chip { border-color: var(--acero-claro); background: var(--taller); color: var(--carbon); } .adm .res div:active { background: var(--taller); } /* input de foto (borde azul) → acero */ .adm .foto-btn { border-color: var(--acero-claro); color: var(--carbon); } /* --- caja (móvil + escritorio): fills/acentos azules → carbón; chips → gris --- */ .adm .row.tot .n, .adm .dep-row a, .adm a.volver { color: var(--carbon); } .adm .filtros a.on, .adm button.guardar, .adm button.conf, .adm .btn.ok, .adm .suma { background: var(--carbon); } .adm .chip.abierta { background: #ECEDEF; color: var(--carbon); } /* "✗ Gasto" es destructivo: debe seguir rojo (peligro), no lo trague .adm .btn */ .adm .btn.gasto { background: var(--peligro); } /* --- CRM (Gael): azules de chrome → carbón. Se CONSERVAN por ser datos, no chrome: el ramp de lifecycle (.sec-h/.estado, style inline) y el verde de WhatsApp (.out burbuja, .wa botón), igual que se dejó azul la polilínea del mapa. Montos tabulares. Excluir/reincluir → peligro/ok. --- */ .adm .filtros button.on { background: var(--carbon); border-color: var(--carbon); } .adm .accion button { background: var(--carbon); } .adm .volver, .adm .toggle, .adm .met a, .adm .cab a.ficha, .adm .filelink { color: var(--carbon); } .adm td.monto { font-variant-numeric: tabular-nums; } .adm details > summary { color: var(--peligro); } .adm details.reinc > summary { color: var(--ok); } .adm details button { background: var(--peligro); } .adm details.reinc button { background: var(--ok); } /* modal de status de pago del cargador (#7-#10): opciones + total esperado (del backend) + falta en vivo + alerta de sobre-total */ .adm .pago-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(32,33,36,.5); display: none; align-items: flex-end; justify-content: center; } .adm .pago-ov.on { display: flex; } .adm .pago-modal { background: #fff; border-radius: 12px 12px 0 0; width: 100%; max-width: 480px; padding: 16px 18px 20px; max-height: 92vh; overflow: auto; } @media (min-width: 560px) { .adm .pago-ov { align-items: center; } .adm .pago-modal { border-radius: 4px; } } .adm .pago-modal h3 { font-family: var(--display); font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; } .adm .pago-total { font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 14px; padding: 8px 12px; background: var(--taller); border-radius: var(--radio); } .adm .pago-total.nd { color: var(--acero); font-weight: 600; } .adm .pago-opt { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--acero-claro); border-radius: var(--radio); margin-bottom: 8px; font-weight: 600; cursor: pointer; } .adm .pago-opt input { width: 20px; height: 20px; flex: 0 0 auto; } .adm .pago-saldo { margin: 8px 0 4px; } .adm .pago-hint { margin-top: 6px; font-size: 13px; color: var(--acero); font-variant-numeric: tabular-nums; } .adm .pago-hint.warn { color: var(--alerta); font-weight: 700; } .adm .pago-modal .botones { display: flex; gap: 8px; margin-top: 14px; } .adm .pago-modal .botones button { flex: 1; border: 0; border-radius: var(--radio); padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; } .adm .pago-modal .cancelar { background: #fff; color: var(--carbon); border: 1px solid var(--acero-claro); } .adm .pago-modal .ok { background: var(--carbon); color: #fff; } @media (prefers-reduced-motion: reduce) { .adm a.bin, .adm a.bin .codigo, .adm .btn { transition: none; } }