/* ===================================================================== TuMarketSV · Línea gráfica B «Sistema Operativo» · capa del ERP (16-oct-2026) Fuente oficial: DTE-Middleware/branding/linea-grafica-oficial-2026-10-15/ (tokens.css, componentes.css, ESTANDAR-ERP.md, DECISION.md). Cómo se carga: DESPUÉS de tmsv.css y tmsv-pro.css y ANTES de la marca del tenant (ThemeTokens::styleTag). Así: - las ~130 vistas que usan layouts.app heredan la línea B sin tocarlas, - una empresa con marca propia sigue pisando --primary / --accent-*. Reversible: quitar el devuelve la piel anterior. Reglas que aplica (ESTANDAR-ERP.md): - Letra del sistema (SF) con Inter de respaldo; titulares y TOTAL en la misma familia a 700; IBM Plex Mono solo para identificadores (.id / .mono). - Cifras de KPI a 600 con cifras tabulares (tnum). - Naranja #c24a00 solo en el botón de la acción; nunca en rieles ni avisos. - Ámbar de sistema para pendientes y advertencias; rojo #b3261e para error, invalidado y alerta alta; verde solo para éxito. - Etiquetas sin mayúsculas espaciadas. Superficies planas, sin vidrio. - Íconos de línea en la UI (el layout ya no pinta los glifos 3D en el menú). ===================================================================== */ /* ---------- Fuentes servidas por el ERP (sirven también on-premise sin internet) ---------- */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex/plex-mono-400-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex/plex-mono-500-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/inter-var-latin.woff2") format("woff2"); } /* ---------- Tokens: paleta B sobre los nombres que ya usa el ERP ---------- */ :root { /* Marca */ --primary: #7b2ff7; --primary-700: #5b1fc4; --primary-50: #f1ebff; --accent: #ff6b00; /* naranja de marca: filetes y trazos, nunca texto */ --accent-600: #c24a00; /* naranja AA: el único fondo de botón con texto blanco */ --accent-700: #9e3c00; --grad-accent: #c24a00; /* B: el botón de acción es plano */ --grad-brand: linear-gradient(90deg, #7b2ff7 0%, #9d4eff 50%, #ff6b00 100%); /* Tinta y superficies */ --ink: #171221; --muted: #4a4458; --faint: #716b7d; --line: #e6e0f3; --line-2: #d8cff0; --bg: #faf9fe; --card: #ffffff; --ok: #077a57; /* Estados de sistema */ --b-exito-fondo: #e3f8f0; --b-exito-texto: #077a57; --b-exito-borde: #bfeedc; --b-pend-fondo: #fff4d6; --b-pend-texto: #8a5a00; --b-pend-borde: #f3d98c; --b-pend-rail: #e0a100; --b-error-fondo: #fde8e6; --b-error-texto: #b3261e; --b-error-borde: #f6c4bf; --b-borrador-fondo: #efecf4; --b-info-fondo: #f1ebff; /* Tipografía */ /* «Nativa Apple» (18-oct-2026): SF en iPhone/Mac, Inter autoservida de respaldo. Fraunces ya no se usa en el ERP. */ --ui: -apple-system, BlinkMacSystemFont,"Inter",system-ui,"Segoe UI", Roboto, sans-serif; --display: var(--ui); --b-voz: var(--display); --b-ui: var(--ui); --b-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Forma */ --radius: 14px; --b-r-campo: 10px; --b-r-btn: 12px; --b-r-tarjeta: 16px; --shadow-sm: 0 1px 2px rgba(23,18,33,.06), 0 1px 0 rgba(23,18,33,.02); --shadow-md: 0 8px 24px -8px rgba(123,47,247,.16), 0 2px 6px rgba(23,18,33,.05); --shadow-lg: 0 24px 48px -16px rgba(123,47,247,.20), 0 8px 16px -8px rgba(23,18,33,.08); --shadow: var(--shadow-sm); --ring: 0 0 0 3px rgba(123,47,247,.18); } /* ---------- Base ---------- */ body { font-family: var(--b-ui); color: var(--ink); background: var(--bg); /* B: fondo plano, sin halos de color */ background-attachment: scroll; font-size: 14px; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .serif { font-family: var(--b-voz); font-weight: 700; letter-spacing: -.02em; } .id, .mono, code.id { font-family: var(--b-mono); font-size: .94em; letter-spacing: 0; } .cifra, .num { font-family: var(--b-ui); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- Shell: barra lateral ---------- */ @media (min-width: 861px) { .app { grid-template-columns: 256px 1fr; } } .sidebar { background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; } .side-group { color: var(--faint); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 20px 12px 6px; } .nav-item { gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 14px; min-height: 40px; box-shadow: none; } .nav-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; flex: none; } .nav-item:hover { background: #f6f3fd; color: var(--ink); } .nav-item.active { background: var(--primary-50); color: var(--primary-700); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); } .nav-item.active svg { stroke: var(--primary-700); } .wordmark { font-family: var(--b-voz); font-weight: 700; letter-spacing: -.02em; } /* ---------- Shell: barra superior ---------- */ .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); padding: 14px 28px; } .topbar h1 { font-family: var(--b-voz); font-weight: 700; font-size: 22px; letter-spacing: -.015em; } .topbar .sub { color: var(--faint); font-size: 13px; } .search input { border: 1px solid var(--line-2); border-radius: var(--b-r-campo); background: #fff; font-size: 14px; min-height: 40px; } .content { padding: 24px 28px 48px; max-width: 1180px; } @media (min-width: 1100px) { .content { padding: 28px 40px 56px; } } /* ---------- Botones: el naranja es UNA acción ---------- */ .btn { border-radius: var(--b-r-btn); font-weight: 600; font-size: 14px; min-height: 40px; padding: 9px 16px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; } .btn:hover { transform: none; } .btn-primary { background: var(--accent-600); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 16px -10px rgba(194,74,0,.55); } .btn-primary:hover { background: var(--accent-700); transform: none; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 18px -10px rgba(194,74,0,.6); } .btn-primary:active { transform: none; } .btn-ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ink); } .btn-ghost:hover { background: #f8f6fd; border-color: #c9bdea; } .btn[disabled], .btn:disabled { background: var(--b-borrador-fondo); color: #9a94a6; box-shadow: none; border-color: transparent; } .btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; } .tab-btn.btn-primary { background: var(--primary-50); color: var(--primary-700); box-shadow: inset 0 -2px 0 var(--primary); } .tab-btn.btn-primary::after { display: none; } .avatar { background: var(--primary-50); color: var(--primary-700); } /* ---------- Tarjetas ---------- */ .card { border: 1px solid var(--line); border-radius: var(--b-r-tarjeta); box-shadow: var(--shadow-sm); padding: 22px; } .card:hover { box-shadow: var(--shadow-sm); transform: none; } .card h3 { font-family: var(--b-ui); font-weight: 600; font-size: 16px; letter-spacing: -.005em; } .card, .tbl, .kpis, .stat, .agenda { border-color: var(--line); } /* ---------- Cifras: KPI a 600 tabular; TOTAL a 700 en la misma familia ---------- */ .kpis { border-radius: var(--b-r-tarjeta); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .kpi { padding: 16px 18px; } .kpi .k-label, .stat .s-label { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; } .kpi .k-value, .stat .s-value, .big-num { font-family: var(--b-ui); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .kpi .k-value { font-size: 24px; } .stat .s-value { font-size: 28px; } .big-num { font-size: 32px; } .kpi:first-child .k-value, .stat:first-child .s-value { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; } .k-up { color: var(--b-exito-texto); } .total, .cart-tot.grand { font-family: var(--b-voz); font-weight: 700; letter-spacing: -.01em; } /* ---------- Formularios ---------- */ .field label { font-size: 14px; font-weight: 500; color: var(--muted); } .field input, .field select, .field textarea, input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=password], input[type=date], select, textarea { font-family: var(--b-ui); } .field input, .field select, .field textarea { border: 1px solid var(--line-2); border-radius: var(--b-r-campo); min-height: 44px; font-size: 15px; background: #fff; } .field input:focus, .field select:focus, .search input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .note { color: var(--faint); } /* ---------- Tablas ---------- */ .tbl { border-radius: var(--b-r-tarjeta); } .tbl th { font-family: var(--b-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; background: #fbfaff; border-bottom: 1px solid var(--line); } .tbl td { font-size: 14px; border-bottom-color: #f0ecf8; } .tbl tr:hover td { background: #faf8ff; } .tbl .right, .tbl td.right { font-variant-numeric: tabular-nums; } /* ---------- Chips y estados ---------- */ .chip, .pill { border-radius: 999px; font-weight: 600; font-size: 12.5px; box-shadow: none; } .chip { background: var(--primary-50); color: var(--primary-700); } .chip.fc, .pill.consumidor { background: var(--b-exito-fondo); color: var(--b-exito-texto); box-shadow: none; } .pill.contrib { background: var(--primary-50); color: var(--primary-700); } .estado { font-size: 12.5px; font-weight: 600; } .estado.aceptado, .estado.firmado, .estado.sellado { color: var(--b-exito-texto); } .estado.pendiente, .estado.contingencia { color: var(--b-pend-texto); } .estado.rechazado, .estado.error, .estado.invalidado, .estado.anulado { color: var(--b-error-texto); } .sello { color: var(--b-exito-texto); } /* ---------- Avisos ---------- */ .alert { border-radius: 12px; border: 1px solid var(--line); background: var(--b-info-fondo); color: var(--ink); } .alert-ok { background: var(--b-exito-fondo); border-color: var(--b-exito-borde); color: var(--b-exito-texto); } .alert-warn { background: var(--b-pend-fondo); border-color: var(--b-pend-borde); color: var(--b-pend-texto); box-shadow: inset 3px 0 0 var(--b-pend-rail); } .alert-err { background: var(--b-error-fondo); border-color: var(--b-error-borde); color: var(--b-error-texto); box-shadow: inset 3px 0 0 var(--b-error-texto); } /* ---------- Pestañas, modales, cajones, avisos flotantes ---------- */ .tab { font-weight: 500; color: var(--muted); } .tab.active { color: var(--primary-700); box-shadow: inset 0 -2px 0 var(--primary); } .modal-box, .drawer-box { border-radius: 18px; box-shadow: var(--shadow-lg); } .modal-head .serif, .drawer-head .serif { font-family: var(--b-voz); font-weight: 700; } .tmsv-toast { font-family: var(--b-ui); border-radius: 12px; } .tmsv-toast--err { box-shadow: inset 3px 0 0 var(--b-error-texto), var(--shadow-md); } .tmsv-toast--ok { box-shadow: inset 3px 0 0 #0bb783, var(--shadow-md); } .empty { color: var(--muted); } /* ---------- Módulos, POS y medidores ---------- */ .mod-card { border-radius: var(--b-r-tarjeta); border-color: var(--line); box-shadow: var(--shadow-sm); } .mod-card:hover { box-shadow: var(--shadow-md); transform: none; } .mod-hero { background: #fff; border: 1px solid var(--line); border-radius: var(--b-r-tarjeta); } .pos-prod { border-radius: 14px; border-color: var(--line); box-shadow: var(--shadow-sm); min-height: 88px; } .pos-prod:hover { border-color: #c9bdea; box-shadow: var(--shadow-md); transform: none; } .pos-prod .pp-price { font-family: var(--b-ui); font-weight: 600; font-variant-numeric: tabular-nums; } .cart { border-radius: var(--b-r-tarjeta); border-color: var(--line); } .bar-fill { background: var(--primary); } /* ---------- Barra inferior en celular (Inicio · Vender · DTE · Clientes · Más) ---------- */ .b-barra-inf { display: none; } @media (max-width: 860px) { .topbar { padding: 12px 16px; } .topbar h1 { font-size: 19px; } .content { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); } .card { padding: 18px; } .btn { min-height: 44px; } .b-barra-inf { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -16px rgba(23,18,33,.25); } .b-barra-inf a, .b-barra-inf button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: none; padding: 4px 2px; border-radius: 12px; color: var(--muted); font: 500 12.5px/1.1 var(--b-ui); text-decoration: none; cursor: pointer; } .b-barra-inf svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; } .b-barra-inf .activo { color: var(--primary-700); font-weight: 600; background: var(--primary-50); } /* Con la barra inferior, la ayuda deja de flotar: vive en «Más» y en la barra superior. */ body.nav-open .b-barra-inf, body.tmsv-modal-open .b-barra-inf, body.tmsv-drawer-open .b-barra-inf { display: none; } } /* ---------- Ayuda en la barra superior (reemplaza los botones flotantes en escritorio) ---------- */ .b-ayuda-top { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--muted); font: 500 13px/1 var(--b-ui); cursor: pointer; } .b-ayuda-top:hover { color: var(--primary-700); border-color: #c9bdea; } .b-ayuda-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; } /* Con «Ayuda» en la barra, los flotantes se ocultan en todos los anchos (siguen en el DOM). */ body.b-ayuda-arriba #tmsv-ayuda, body.b-ayuda-arriba #fv-tour-fab, body.b-ayuda-arriba #fb-fab { display: none !important; } .b-ayuda-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; } .b-ayuda-menu button { display: flex; width: 100%; min-height: 44px; align-items: center; padding: 8px 12px; border: 0; background: none; border-radius: 8px; font: 500 14px/1.3 var(--b-ui); color: var(--ink); cursor: pointer; text-align: left; } .b-ayuda-menu button:hover, .b-ayuda-menu button:focus-visible { background: var(--primary-50); color: var(--primary-700); } .b-ayuda-menu button[hidden] { display: none; } @media (max-width: 860px) { .b-ayuda-top span { display: none; } .b-ayuda-top { padding: 6px 9px; min-height: 40px; } } /* ---------- Pie con el logo completo ---------- */ .b-pie { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 16px 24px; font: 400 12.5px/1.4 var(--b-ui); color: var(--faint); } .b-pie img { height: 20px; width: auto; opacity: .92; } @media (max-width: 860px) { .b-pie { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .btn, .card, .nav-item { transition: none; } } /* ---------- Acceso (login, recuperar, restablecer): panel claro con la imagen de marca ---------- */ .login-wrap { background: var(--bg); } .login-rail, .login-rail--hero { background: #f7f8f7; /* mismo blanco cálido del fondo de la imagen aprobada */ color: var(--ink); overflow: hidden; } @media (min-width: 861px) { .login-rail, .login-rail--hero { display: flex; flex-direction: column; justify-content: space-between; } } .login-rail--hero::after { display: none; } .login-rail--hero .login-rail__content { text-shadow: none; padding-bottom: 0; } .login-rail .serif, .login-rail--hero .serif { font-family: var(--b-voz); font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); } .login-rail p, .login-rail--hero p { color: var(--muted); opacity: 1; font-size: 16px; line-height: 1.55; max-width: 400px; } .b-login-marca { display: block; width: min(78%, 440px); height: auto; margin: 8px auto 0; align-self: center; } .login-card .note, .login-card > p { font-size: 14px; } .login-form { background: #fff; } .login-card h2 { font-family: var(--b-voz); font-weight: 700; font-size: 30px; letter-spacing: -.015em; } @media (max-width: 860px) { .b-login-marca { display: none; } } /* ---------- Ajustes de integración (informe de pantallas operativas, 16-oct) ---------- */ .btn, button, input, select, textarea { font-family: var(--b-ui); } @media (min-width: 861px) { .tabla-pista { display: none !important; } } /* El aviso de 2FA no compite con la acción naranja de la pantalla: botón secundario morado. */ #tmsv-2fa-banner a[href="/seguridad"] { background: #fff !important; color: var(--primary-700) !important; border: 1px solid #c9bdea; font-weight: 600; } /* ---------- Ventanas (modal) en celular: nada se sale del borde (taller, 17-oct) ---------- */ .modal-box { overflow-x: hidden; } .modal-box .row > *, .chk-row > * { min-width: 0; } /* 23 ventanas ponen su contenido directo en .modal-box (sin .modal-body): se le da el margen interno aquí. */ .modal-box > :not(.modal-head):not(.modal-body):not(.modal-foot):not(script):not(style) { margin-left: 22px !important; margin-right: 22px !important; } .modal-box [style*="font-size:12px"], .modal-box [style*="font-size:11px"], .modal-box .note { font-size: 14px !important; line-height: 1.45; } .modal-box > :last-child:not(.modal-foot):not(.modal-body) { margin-bottom: 22px; } /* 18-oct: la regla de campos (min-height 44, borde, ancho) NO aplica a casillas ni radios: en Clientes se veían como cuadros vacíos de 45 px descuadrados de su texto. */ .field input[type=checkbox], .field input[type=radio], .chk-row input[type=checkbox], .chk-row input[type=radio], input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; min-width: 20px; padding: 0; margin: 0; flex: none; border-radius: 4px; box-shadow: none; accent-color: var(--primary); vertical-align: middle; } .modal-box > .modal-head + * { margin-top: 18px; } .chk-row { font-size: 14px; } .chk-row > span { font-size: 14px !important; } .chk-row select { min-width: 7.5rem; min-height: 40px; } .chk-row input { min-height: 40px; } @media (max-width: 860px) { .modal-box > :not(.modal-head):not(.modal-body):not(.modal-foot):not(script):not(style) { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 860px) { .modal-box { width: auto !important; max-width: calc(100vw - 24px) !important; } .modal-box .row { grid-template-columns: 1fr !important; } /* Guía de revisión: el nombre arriba a lo ancho; estado y detalle debajo. */ .chk-row { grid-template-columns: minmax(0, 7.5rem) 1fr !important; row-gap: 6px !important; padding: 8px 0; border-bottom: 1px solid var(--line); } .chk-row > span { grid-column: 1 / -1; font-size: 14px !important; font-weight: 600; white-space: normal; } .chk-row select, .chk-row input { width: 100% !important; min-height: 44px; font-size: 15px; } .modal-box input[type=file] { max-width: 100%; font-size: 14px; } .modal-box [style*="font-size:12px"], .modal-box .note { font-size: 14px !important; } } /* Botón para quitar una foto: círculo fijo, sin heredar el alto táctil de los botones. */ .thumb-del { min-height: 0 !important; min-width: 0 !important; padding: 0 !important; width: 24px !important; height: 24px !important; display: grid !important; place-items: center; border-radius: 50% !important; font-size: 12px !important; } .modal-box input, .modal-box select, .modal-box textarea, .modal-box input[type=file]::file-selector-button { font-size: 15px; } /* ---------- Ventanas: más aire (pedido de Alan, 17-oct) ---------- */ @media (min-width: 861px) { .modal-box { width: min(680px, calc(100vw - 64px)) !important; max-width: min(680px, calc(100vw - 64px)) !important; } .modal-box > :not(.modal-head):not(.modal-body):not(.modal-foot):not(script):not(style) { margin-left: 32px !important; margin-right: 32px !important; } .modal-box > :last-child:not(.modal-foot):not(.modal-body) { margin-bottom: 32px !important; } .modal-head { padding: 20px 32px !important; } .modal-body { padding: 24px 32px !important; } .modal-foot { padding: 16px 32px 24px !important; } } @media (max-width: 860px) { .modal-box > :not(.modal-head):not(.modal-body):not(.modal-foot):not(script):not(style) { margin-left: 20px !important; margin-right: 20px !important; } .modal-head { padding: 16px 20px !important; } .modal-body { padding: 20px !important; } } .modal-box .field { margin-bottom: 16px; } .modal-box .row { gap: 16px !important; } .chk-row { gap: 10px !important; margin-bottom: 10px !important; } .modal-box > .modal-head + * { margin-top: 24px !important; } /* Tableta vertical y celulares grandes: la ventana aprovecha el ancho, con márgenes de tableta. */ @media (min-width: 481px) and (max-width: 860px) { .modal-box { width: min(640px, calc(100vw - 48px)) !important; max-width: min(640px, calc(100vw - 48px)) !important; } .modal-box > :not(.modal-head):not(.modal-body):not(.modal-foot):not(script):not(style) { margin-left: 28px !important; margin-right: 28px !important; } .chk-row { grid-template-columns: minmax(0, 1.2fr) minmax(7.5rem, auto) minmax(0, 1.4fr) !important; } .chk-row > span { grid-column: auto; } } /* ---------- Paneles laterales y tarjetas con formulario: el mismo aire que las ventanas ---------- */ .drawer-box { overflow-x: hidden; } .drawer-box > :not(.drawer-head):not(.drawer-body):not(.drawer-actions):not(script):not(style) { margin-left: 28px !important; margin-right: 28px !important; } .drawer-head { padding: 20px 28px !important; } .drawer-body, .drawer-box.drawer-pad { padding: 24px 28px !important; } .drawer-box .row > *, .card .row > * { min-width: 0; } .drawer-box .field label, .card .field label { font-size: 14px; } .drawer-box input, .drawer-box select, .drawer-box textarea { font-size: 15px; } @media (max-width: 860px) { .drawer-box > :not(.drawer-head):not(.drawer-body):not(.drawer-actions):not(script):not(style) { margin-left: 20px !important; margin-right: 20px !important; } .drawer-head { padding: 16px 20px !important; } .drawer-body, .drawer-box.drawer-pad { padding: 20px !important; } .drawer-box .row, .card .row { grid-template-columns: 1fr !important; } .card { padding: 20px !important; } } /* 18-oct (reporte de Carla): las pistas de deslizar solo tienen sentido con dedo. Con ratón o panel táctil no se muestran; la tabla y el lienzo se recorren con la barra de desplazamiento (y el salón tiene «Ajustar a pantalla»). */ @media (hover: hover) and (pointer: fine) { .tabla-pista, .pista-tactil { display: none !important; } .tabla-marco::after { display: none !important; } } /* ====================================================================================== 18-oct · Auditoría visual (603 pantallas × 4 anchos): reglas globales de línea B. ====================================================================================== */ /* 1–2) Campos sueltos con estilo B (antes solo .field select/.field input, por descendencia). */ select, input.field, .toolbar input, .search input, .pv-form input, input[type=month], input[type=date], input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=password], textarea { border: 1px solid var(--line-2); border-radius: var(--b-r-campo); background-color: #fff; color: var(--ink); font-size: 15px; max-width: 100%; min-width: 0; box-sizing: border-box; } select, input.field, .toolbar input, input[type=month], input[type=date], input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=password] { min-height: 40px; padding: 8px 12px; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b1fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } /* .field select fija «background:#fff» (abreviado) y borraba la flecha: se repone con más especificidad. */ .field select, select.field, .toolbar select { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b1fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 36px; } select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 12px; } /* 3) Chips, píldoras y precios en una sola línea. 10) mínimo 13 px. */ .chip, .pill, .badge, [class*="-pill"] { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; max-width: 100%; } .chip, .pill, .badge { font-size: 13px; } .note, .muted { font-size: max(13px, 1em * .8125); } p.note, a.note, span.note, div.note { font-size: 13px; } /* 4) Botones sin partir el texto. */ .btn { white-space: nowrap; } /* 5) Filas flex que no empujan fuera de la tarjeta. */ .toolbar, .card .row, .dte-row, .agenda-header, .bar-row { flex-wrap: wrap; } .dte-row > *, .bar-row > * { min-width: 0; } .dte-row > .btn { flex-shrink: 0; } .card input, .card select, .card textarea { max-width: 100%; min-width: 0; } /* 6) Rejillas de 2 columnas: una tabla ancha ya no empuja la página (se desliza dentro). */ .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } .grid-2 > * { min-width: 0; } @media (max-width: 1365px) { .grid-2.grid-2-1col-lt1366, .grid-2:has(> * table) { grid-template-columns: minmax(0, 1fr); } } .grid-2 .card:has(> table), .grid-2 .card:has(> .tbl) { overflow-x: auto; } /* 7) Fechas, números y códigos en una línea dentro de tablas. */ .tbl td.fecha, .tbl td.num, .tbl .num, .tbl td:has(> time), .tbl td.nowrap, .nowrap { white-space: nowrap; } /* 10) El naranja con texto blanco ya usa --accent-600 (#c24a00, AA). */ /* 5b) Formularios en rejilla inline (papel, agricultura…): las celdas pueden encoger y en el celular las de 3 columnas pasan a 1 (antes el campo se salía de la tarjeta hasta 200 px). */ label.fld { min-width: 0; } label.fld > input, label.fld > select, label.fld > textarea { width: 100%; } .card [style*="grid-template-columns"] > *, .modal-body [style*="grid-template-columns"] > * { min-width: 0; } @media (max-width: 640px) { .card [style*="grid-template-columns:1fr 1fr 1fr"], .card [style*="grid-template-columns: 1fr 1fr 1fr"], .card [style*="grid-template-columns:repeat(3"], .card [style*="grid-template-columns: repeat(3"], .card [style*="grid-template-columns:repeat(4"], .card [style*="grid-template-columns: repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; } } /* 6b) En escritorio el envoltorio de tablas también recorta y desplaza (Bienes raíces a 1280: tabla de 1029 px en caja de 944). */ .tabla-scroll { max-width: 100%; overflow-x: auto; } /* ====================================================================================== 18-oct (2.ª pasada, Alan: «cero botones/etiquetas partidos»). Ver auditoría visual. ====================================================================================== */ /* Textos chicos: notas, etiquetas de tabla y de KPI a 13 px como mínimo (antes 10–12 px). */ main .muted, main .meta, main .tbl th, main th, main a.link, main small, main .note, main .k-lbl, main .k-label, main .lbl, main .ct-kpi .l, main .mig-note, main .mig-kpi .lbl, main .vet-pill, main .vet-gauge-lbl, main .lr-pill, main .mk-badge, main .inv-sku .id, main .toolbar label, main .dn-scale span, main .aw-hour-label { font-size: 13px; } main [style*="font-size:10px"], main [style*="font-size:10.5px"], main [style*="font-size:11px"], main [style*="font-size:11.5px"], main [style*="font-size:12px"], main [style*="font-size: 10px"], main [style*="font-size: 11px"], main [style*="font-size: 11.5px"], main [style*="font-size: 12px"] { font-size: 13px !important; } /* Contraste AA: verdes, ámbar, rojo, amarillo, naranja y grises claros usados como texto. */ main [style^="color:#16a34a" i], main [style*=";color:#16a34a" i], main [style*="; color:#16a34a" i], main [style*=" color:#16a34a" i], main [style^="color: #16a34a" i], main [style*=";color: #16a34a" i], main [style*="; color: #16a34a" i], main [style*=" color: #16a34a" i] { color: #15803d !important; } main [style^="color:#22b364" i], main [style*=";color:#22b364" i], main [style*="; color:#22b364" i], main [style*=" color:#22b364" i], main [style^="color: #22b364" i], main [style*=";color: #22b364" i], main [style*="; color: #22b364" i], main [style*=" color: #22b364" i] { color: #15803d !important; } main [style^="color:#b7791f" i], main [style*=";color:#b7791f" i], main [style*="; color:#b7791f" i], main [style*=" color:#b7791f" i], main [style^="color: #b7791f" i], main [style*=";color: #b7791f" i], main [style*="; color: #b7791f" i], main [style*=" color: #b7791f" i] { color: #92560e !important; } main [style^="color:#f0414e" i], main [style*=";color:#f0414e" i], main [style*="; color:#f0414e" i], main [style*=" color:#f0414e" i], main [style^="color: #f0414e" i], main [style*=";color: #f0414e" i], main [style*="; color: #f0414e" i], main [style*=" color: #f0414e" i] { color: #c81e2e !important; } main [style^="color:#f5b400" i], main [style*=";color:#f5b400" i], main [style*="; color:#f5b400" i], main [style*=" color:#f5b400" i], main [style^="color: #f5b400" i], main [style*=";color: #f5b400" i], main [style*="; color: #f5b400" i], main [style*=" color: #f5b400" i] { color: #8a6100 !important; } main [style^="color:#ff6b00" i], main [style*=";color:#ff6b00" i], main [style*="; color:#ff6b00" i], main [style*=" color:#ff6b00" i], main [style^="color: #ff6b00" i], main [style*=";color: #ff6b00" i], main [style*="; color: #ff6b00" i], main [style*=" color: #ff6b00" i] { color: #c24a00 !important; } main [style^="color:#9a93a4" i], main [style*=";color:#9a93a4" i], main [style*="; color:#9a93a4" i], main [style*=" color:#9a93a4" i], main [style^="color: #9a93a4" i], main [style*=";color: #9a93a4" i], main [style*="; color: #9a93a4" i], main [style*=" color: #9a93a4" i] { color: #6b6577 !important; } main [style^="color:#8a8a99" i], main [style*=";color:#8a8a99" i], main [style*="; color:#8a8a99" i], main [style*=" color:#8a8a99" i], main [style^="color: #8a8a99" i], main [style*=";color: #8a8a99" i], main [style*="; color: #8a8a99" i], main [style*=" color: #8a8a99" i] { color: #6b6577 !important; } main [style^="color:#6b7280" i], main [style*=";color:#6b7280" i], main [style*="; color:#6b7280" i], main [style*=" color:#6b7280" i], main [style^="color: #6b7280" i], main [style*=";color: #6b7280" i], main [style*="; color: #6b7280" i], main [style*=" color: #6b7280" i] { color: #565d6b !important; } main .mk-card > .mk-badge { background-color: #c24a00; } main .ic-precio-box .lbl { color: #6b6577; } main .vet-pill { color: #a83f00; } /* Pestañas: una sola línea y desplazables (Libros a 390 partía «Ventas · Contribuyente»). */ main .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } main .tabs > .tab, main .tabs > button { white-space: nowrap; flex-shrink: 0; } /* Precios y montos cortos («$__ / mes», «COSTO (EX-IVA) $62.00»). */ main .price, main .ph .price, main .ic-precio-box > div:last-child, main .k-value, main .total { white-space: nowrap; } @media (max-width: 420px) { .card [style*="grid-template-columns:1fr 1fr"], .card [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } } /* Rejilla inline de una columna sin plantilla: un