/* ========================================================================== mi-ui.css — Librería base de Mesa Inteligente Fuente única de tokens y componentes. Reemplaza los bloques :root duplicados en public/*.html (65 archivos verificados — ver docs/AUDIT-CONFIRM-SITES.md y docs/SISTEMA-COMPLETO.md § refactor UI). Uso: Regla: ninguna pantalla vuelve a declarar :root con colores. Rebrand 2026-08-09: paleta Tinta/Hueso/Brasa según Manual de Marca v1 (dirección 2a · punto pleno), reemplaza la paleta azul original. ========================================================================== */ /* --- 1. TOKENS ---------------------------------------------------------- */ :root { /* Superficies del producto — familia cálida derivada de TINTA. Reemplazan las 5 paletas viejas (#080810, #0a0e1a, #0f172a, #0b0b14, #0f1117). */ --bg: #14130F; /* Tinta */ --bg2: #1C1A17; /* Panel */ --bg3: #26231F; /* Realce */ --bg4: #302C26; --bg5: #3A352E; --border: rgba(237,231,219,.08); --border2: rgba(237,231,219,.14); --border3: rgba(237,231,219,.24); --text: #EDE7DB; /* Hueso */ --text2: #A09585; /* 7.0:1 sobre --bg2 */ --text3: #8A8171; /* 4.83:1 sobre --bg — el piso; ceniza (#6F6656) sólo sobre claro */ /* BRASA — el acento de marca. Escaso: una sola acción principal por pantalla. */ --accent: #C4501E; --accent2: #A84418; /* hover / pressed */ --accent-lt: #E86C38; /* brasa aclarada: texto sobre oscuro */ --accent-sf: rgba(196,80,30,.14); /* superficie */ --accent-bd: rgba(196,80,30,.40); /* borde */ /* Superficies claras — marca, impresos, reportes */ --hueso: #EDE7DB; --papel: #FDFCF8; --ceniza: #6F6656; /* Semánticos. VERDE = salud operativa, nunca decoración ni marca. */ --ok: #4E8C63; --ok-sf: rgba(78,140,99,.14); --ok-bd: rgba(78,140,99,.38); --warn: #D9A03C; --warn-sf: rgba(217,160,60,.14); --warn-bd: rgba(217,160,60,.38); --danger: #A6231B; /* Carmín: relleno y borde */ --danger-fg: #E8897E; /* texto de peligro sobre oscuro */ --danger-sf: rgba(166,35,27,.16); --danger-bd: rgba(166,35,27,.44); /* Tipografía */ --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* interfaz */ --font-brand: 'Newsreader', Georgia, serif; /* SÓLO marca — prohibido dentro del producto */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* cifras y etiquetas */ --fs-micro: 12px; /* SOLO etiquetas no críticas en oficina */ --fs-sm: 14px; /* piso de oficina */ --fs-base: 16px; --fs-lg: 18px; /* piso de cocina */ --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 38px; /* Escala táctil por rol — el contrato duro del sistema */ --tap-office: 38px; --tap-mozo: 48px; --tap-cocina: 56px; --tap: var(--tap-office); /* Espaciado y forma */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px; --shadow: 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.55); --ease: cubic-bezier(.2,.8,.2,1); } /* Contextos de rol. Se aplica en */ body[data-rol="cocina"] { --tap: var(--tap-cocina); --fs-sm: var(--fs-lg); --fs-base: var(--fs-xl); } body[data-rol="mozo"] { --tap: var(--tap-mozo); --fs-sm: var(--fs-base); --fs-base: var(--fs-lg); } body[data-rol="caja"] { --tap: var(--tap-mozo); --fs-sm: var(--fs-base); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* --- 2. RESET ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-lt); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* --- 3. BOTONES --------------------------------------------------------- */ .mi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s4); font: 700 var(--fs-sm)/1 var(--font); letter-spacing: .01em; border-radius: var(--r); border: 1px solid var(--border2); background: var(--bg3); color: var(--text); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s; -webkit-tap-highlight-color: transparent; } .mi-btn:hover { background: var(--bg4); border-color: var(--border3); } .mi-btn:active { transform: scale(.97); } .mi-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .mi-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .mi-btn--primary:hover { background: var(--accent2); border-color: var(--accent2); } .mi-btn--ghost { background: transparent; } .mi-btn--danger { background: var(--danger-sf); border-color: var(--danger-bd); color: var(--danger-fg); } .mi-btn--lg { min-height: calc(var(--tap) + 12px); font-size: var(--fs-base); padding: 0 var(--s5); } .mi-btn--block { width: 100%; } /* --- 4. ESTADO (nunca sólo color: icono + texto siempre) ----------------- */ .mi-status { display: inline-flex; align-items: center; gap: var(--s2); padding: 4px var(--s3); min-height: 26px; font: 700 var(--fs-micro)/1 var(--font); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-pill); border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); white-space: nowrap; } .mi-status::before { font-size: 1.1em; line-height: 1; } .mi-status--ok { background: var(--ok-sf); border-color: var(--ok-bd); color: var(--ok); } .mi-status--ok::before { content: "●"; } .mi-status--warn { background: var(--warn-sf); border-color: var(--warn-bd); color: var(--warn); } .mi-status--warn::before { content: "▲"; } .mi-status--danger { background: var(--danger-sf); border-color: var(--danger-bd); color: var(--danger-fg); } .mi-status--danger::before { content: "■"; } .mi-status--idle::before { content: "○"; } /* --- 5. CARD ------------------------------------------------------------ */ .mi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); } .mi-card--tap { cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .mi-card--tap:hover { border-color: var(--border3); background: var(--bg3); } .mi-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .mi-card__title { font: 800 var(--fs-base)/1.2 var(--font); margin: 0; } /* --- 6. CAMPOS ---------------------------------------------------------- */ .mi-field { display: flex; flex-direction: column; gap: var(--s1); } .mi-label { font: 700 var(--fs-micro)/1.3 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text2); } .mi-input, .mi-select, .mi-textarea { min-height: var(--tap); width: 100%; padding: var(--s2) var(--s3); background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); color: var(--text); font: 500 var(--fs-sm)/1.4 var(--font); } .mi-input:focus, .mi-select:focus, .mi-textarea:focus { border-color: var(--accent); outline: none; } .mi-textarea { min-height: calc(var(--tap) * 2); resize: vertical; } /* --- 7. TOAST CON DESHACER — sustituye confirm()/alert()/prompt() reversibles */ /* Contrato: la acción se ejecuta YA. El toast permite deshacer 6s. Sólo sobrevive bloqueante lo clasificado CONTROL en docs/AUDIT-CONFIRM-SITES.md (anti-fraude, fiscal, efecto externo). NOMBRE DELIBERADAMENTE DISTINTO de .mi-toast (ver public/js/toast.js): ese componente ya existe en producción, usado en ~200+ call sites via showToast(), con su propio esquema .mi-toast/.ok/.err/.warn/.info/.accent posicionado arriba-derecha. Si este componente nuevo reutilizara el mismo nombre de clase, cualquier página que cargue ambos CSS tendría una colisión de cascada silenciosa — gana el que cargue último, de forma impredecible. Este es un componente DISTINTO (acción+deshacer, abajo-centro) y por eso vive bajo el prefijo .mi-undo-toast. Los dos convivirán durante toda la migración: showToast() para notificaciones simples, MI.toast.undoable() solo para las acciones reversibles catalogadas. */ .mi-undo-toast-host { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: var(--s2); z-index: 9999; pointer-events: none; width: min(560px, calc(100vw - 32px)); } .mi-undo-toast { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); background: var(--bg4); border: 1px solid var(--border3); border-radius: var(--r); box-shadow: var(--shadow-lg); color: var(--text); font-size: var(--fs-sm); pointer-events: auto; animation: mi-undo-toast-in .22s var(--ease); } .mi-undo-toast__msg { flex: 1; min-width: 0; } .mi-undo-toast__undo { flex-shrink: 0; min-height: var(--tap-office); padding: 0 var(--s3); background: transparent; border: 1px solid var(--border3); border-radius: var(--r-sm); color: var(--accent); font: 800 var(--fs-sm)/1 var(--font); cursor: pointer; } .mi-undo-toast__undo:hover { background: var(--accent-sf); } .mi-undo-toast--ok { border-left: 3px solid var(--ok); } .mi-undo-toast--warn { border-left: 3px solid var(--warn); } .mi-undo-toast--danger { border-left: 3px solid var(--danger); } @keyframes mi-undo-toast-in { from { opacity: 0; transform: translateY(12px); } } /* --- 8. NAVEGACIÓN ------------------------------------------------------ */ .mi-nav-group { margin-bottom: var(--s4); } .mi-nav-label { padding: 0 var(--s3) var(--s2); font: 800 var(--fs-micro)/1 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--text3); } .mi-nav-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--tap); padding: 0 var(--s3); background: none; border: none; border-radius: var(--r); color: var(--text2); font: 600 var(--fs-sm)/1 var(--font); text-align: left; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .mi-nav-item:hover { background: var(--bg3); color: var(--text); } .mi-nav-item[aria-current="page"] { background: var(--accent-sf); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); } .mi-nav-item__badge { margin-left: auto; min-width: 20px; padding: 2px 6px; background: var(--danger); color: #fff; border-radius: var(--r-pill); font: 800 11px/1.4 var(--font); text-align: center; } /* --- 9. TABLA ----------------------------------------------------------- */ .mi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .mi-table th { text-align: left; padding: var(--s2) var(--s3); font: 800 var(--fs-micro)/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text2); border-bottom: 1px solid var(--border2); } .mi-table td { padding: var(--s3); border-bottom: 1px solid var(--border); } .mi-table tbody tr:hover { background: var(--bg2); } .mi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* --- 10. ESTADOS DE PANTALLA -------------------------------------------- */ .mi-empty { padding: var(--s7) var(--s4); text-align: center; color: var(--text2); } .mi-empty__title { font: 800 var(--fs-lg)/1.3 var(--font); color: var(--text); margin: 0 0 var(--s2); } .mi-skeleton { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; border-radius: var(--r-sm); animation: mi-shimmer 1.4s infinite linear; min-height: 1em; } @keyframes mi-shimmer { to { background-position: -200% 0; } } .mi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- 11. MARCA ------------------------------------------------------------ El símbolo se sirve desde /brand/. No se redibuja en CSS ni en SVG inline. Lockup = símbolo + texto en --font-brand, nunca una imagen del conjunto. */ .mi-logo { display: inline-flex; align-items: center; gap: .55em; } .mi-logo__mark { display: block; width: auto; height: 1.9em; } /* área de resguardo = ancho del pie */ .mi-logo__word { font: 500 1.5em/1 var(--font-brand); letter-spacing: -.025em; color: var(--text); } .mi-logo__word em { font-style: normal; color: var(--accent); } .mi-logo--stack { flex-direction: column; gap: .5em; text-align: center; } /* Newsreader NO entra al producto: sólo marca, reportes e impresos. */ .mi-brand-type { font-family: var(--font-brand); font-weight: 500; letter-spacing: -.02em; }