/* ═══════════════════════════════════════════════════════════════════════════ sistema.css — las medidas y los colores de MiResta, en un solo lugar. Lo cargan TODAS las pantallas (panel, cocina, comandero, repartidor, punto de venta, kiosko, menú digital y la app). Se pide como `/css/sistema.css`, o sea contra el DOMINIO, así que sirve igual para lo que sirve nginx y para lo que sirve el bot — el mismo truco de marca.js e impresora.js. ── LAS TRES REGLAS ────────────────────────────────────────────────────── 1 · ESPACIADO: solo 8, 16 y 32. Nada intermedio. Tres medidas se reconocen a simple vista; siete no. En cuanto alguien mete un 12 o un 20 "porque se veía mejor ahí", la rejilla se pierde y las pantallas dejan de parecer del mismo producto. 8 dentro de un elemento (icono↔texto, celda de tabla) 16 entre hermanos (campos, renglones, tarjetas) 32 entre bloques (secciones, encabezado↔contenido) 2 · TEXTO: cinco tamaños, razón 1.25, base 16. Del menor al mayor hay 2.5×, que es el contraste que pidió el dueño. Los extremos caen en la misma rejilla del espaciado (16 y 32), así que el texto y los márgenes riman en vez de pelearse. 3 · COLOR: el BRONCE es la identidad. Lo que importa va en bronce; lo que importa menos, sobre los neutros. Un tablero donde todo resalta no tiene jerarquía: si todo grita, no se oye nada. ⚠️ Los colores de ESTADO (verde, ámbar, rojo) van aparte del bronce a propósito: si "todo bien" fuera del color de la marca, una pantalla entera se leería como si todo estuviera bien. ⚠️ El ACENTO de cada negocio NO se escribe aquí. Las pantallas son un solo código que sirve a todos: `marca.js` lo pinta con el color que el propio negocio tenga guardado. Las Pinchis conserva su naranja; un negocio nuevo estrena el bronce. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1 · Espaciado ──────────────────────────────────────────────────── */ --e1: 8px; --e2: 16px; --e3: 32px; /* ── 2 · Texto ──────────────────────────────────────────────────────── */ --t1: 12.8px; /* apoyo: etiquetas, pies, metadatos */ --t2: 16px; /* base: todo lo que se lee de corrido */ --t3: 20px; /* realce: nombre de un pedido, total de una tarjeta */ --t4: 25px; /* título de pantalla */ --t5: 31.25px; /* encabezado: lo único que puede haber más grande */ --peso-normal: 400; --peso-medio: 600; --peso-fuerte: 800; /* Interlineado: apretado en lo grande, holgado en lo que se lee de corrido. */ --alto-titulo: 1.15; --alto-texto: 1.55; /* ── 3 · Color ──────────────────────────────────────────────────────── */ /* La gama dorada */ --oro-suave: #FBEECB; --oro-claro: #F8E2AE; --oro: #D6B45E; --bronce: #8C6F22; /* ← LA IDENTIDAD */ --bronce-hondo:#6B5417; /* Neutros — salen del propio logotipo */ --tinta: #141210; --papel: #EFEAE1; --gris: #6B645C; --gris-2: #9A9088; /* Semánticos: se usan ESTOS en las pantallas, no los de arriba */ --fondo: #FBF8F3; --superficie: #FFFFFF; --texto: var(--tinta); --texto-2: var(--gris); --linea: #E7E0D6; /* Estado — aparte de la identidad, a propósito */ --ok: #1F8A54; --aviso: #B7791F; --peligro: #C0392B; /* Radios: dos, no siete. */ --r1: 8px; /* controles */ --r2: 16px; /* tarjetas y diálogos */ } :root[data-tema="oscuro"], :root.oscuro { --fondo:#171512; --superficie:#201D1A; --texto:var(--papel); --texto-2:#A79E93; --linea:#332E29; } /* ── Utilidades mínimas ──────────────────────────────────────────────────── No es un marco de trabajo: son las cuatro cosas que se repiten en todas las pantallas. Todo lo demás sigue viviendo en el CSS de cada una. */ .mr-pila { display:flex; flex-direction:column; gap:var(--e2); } .mr-pila-1 { display:flex; flex-direction:column; gap:var(--e1); } .mr-pila-3 { display:flex; flex-direction:column; gap:var(--e3); } .mr-fila { display:flex; align-items:center; gap:var(--e1); } .mr-t1{font-size:var(--t1)} .mr-t2{font-size:var(--t2)} .mr-t3{font-size:var(--t3)} .mr-t4{font-size:var(--t4);line-height:var(--alto-titulo)} .mr-t5{font-size:var(--t5);line-height:var(--alto-titulo)} .mr-apoyo{font-size:var(--t1); color:var(--texto-2)} /* Las tablas son donde más se nota el desorden: una celda con su propio relleno y la siguiente con otro. Aquí se fija de una vez. */ .mr-tabla{width:100%; border-collapse:collapse; font-size:var(--t2)} .mr-tabla th, .mr-tabla td{padding:var(--e1) var(--e2); text-align:left; border-bottom:1px solid var(--linea)} .mr-tabla th{font-size:var(--t1); font-weight:var(--peso-medio); color:var(--texto-2); text-transform:uppercase; letter-spacing:.06em} /* Los números se alinean a la derecha y con cifras de ancho fijo: si no, las columnas de dinero bailan renglón a renglón y no se pueden comparar. */ .mr-tabla .num{text-align:right; font-variant-numeric:tabular-nums} /* ── El bloque de identidad ──────────────────────────────────────────────── Lo dibuja `marca.js`: el logo del negocio (o el de MiResta si no puso el suyo), su nombre, y abajo el logotipo de la plataforma. Reemplaza a los emojis que hacían de logo en las pantallas de entrada. */ .mr-identidad{display:flex; flex-direction:column; align-items:center; gap:var(--e1)} /* El logo lo sube el negocio y puede venir redondo, cuadrado o con fondo transparente. El MARCO impone nuestra forma —esquina redondeada— y `contain` lo mete completo sin recortarle nada: un `cover` le cortaría el nombre a un logotipo alargado. El fondo blanco es el que sostiene un PNG transparente sobre cualquier pantalla. */ .mr-identidad .marca-icono{ width:56px; height:56px; display:block; border-radius:var(--r2); object-fit:contain; background:#fff; } /* ── Halo del logo ───────────────────────────────────────────────────────── Un aro claro alrededor del logo o de la foto de perfil. Sin él, un logo oscuro sobre un fondo oscuro —o claro sobre claro— se funde con lo de atrás y deja un borrón. El aro lo despega de CUALQUIER fondo, que es justo lo que hace falta cuando el logo lo sube el negocio y no sabemos de qué color es. Se pone con la clase `.mr-halo` en la imagen. */ .mr-halo{ box-shadow:0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,.18); background:#fff; border-radius:var(--r2); object-fit:contain; } /* Sobre oscuro el aro se atenúa: un blanco puro ahí grita más que el logo. */ .fondo-oscuro .mr-halo, .sobre-oscuro .mr-halo, :root[data-tema="oscuro"] .mr-halo{ box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 2px 12px rgba(0,0,0,.45); } /* HEREDA el color del contexto en vez de fijarlo: el comandero y el punto de venta pintan su propio fondo oscuro sin declararlo como tema, así que un color fijo dejaba tinta sobre tinta — invisible. */ .mr-identidad .marca-nombre{font-size:var(--t3); font-weight:var(--peso-fuerte); line-height:var(--alto-titulo); text-align:center; color:inherit} /* El logotipo va CHICO pero legible: es una firma, no un segundo título. A 11px se leía como una mancha gris. */ .mr-identidad .marca-plataforma{height:14px; width:auto; color:currentColor; opacity:.55; margin-top:var(--e1)} /* Sin nombre del negocio, el logotipo DEJA de ser una firma y pasa a ser la marca: sube al tamaño de un realce (20px de la escala) y a tinta plena. */ .mr-identidad.sin-nombre .marca-plataforma{height:20px; opacity:1; color:var(--texto); margin-top:var(--e2)} /* ── Sobre fondo OSCURO ──────────────────────────────────────────────────── El logo con su cuadro es negro con letras crema: sobre un fondo oscuro el cuadro desaparece y solo flotan las letras, que se ve descuidado. Ahí se usan las LETRAS SOLAS pintadas con el color del texto, que contrastan siempre. `marca.js` MIDE el fondo real y pone esta clase; no se configura pantalla por pantalla. */ .mr-identidad .marca-letras{display:none} .mr-identidad.sobre-oscuro .marca-icono{display:none} .mr-identidad.sobre-oscuro .marca-letras{ display:block; width:44px; height:48px; background-color:currentColor; -webkit-mask:url(/icons/ui/marca.png) center/contain no-repeat; mask:url(/icons/ui/marca.png) center/contain no-repeat; } /* La firma es una IMAGEN —cada instalación pone la suya, o ninguna—, así que no hereda `currentColor` como lo hacía el SVG incrustado. Sobre fondo oscuro se invierte: el logotipo es tinta sobre transparente, y al invertirlo queda BLANCO. Es una línea contra mantener dos archivos por instalación. ⚠️ Va con `.fondo-oscuro`, NO con `.sobre-oscuro`. Son cosas distintas: la segunda solo se pone cuando el negocio NO subió su logo, así que un negocio CON logo propio sobre fondo oscuro se quedaba con la firma en tinta sobre tinta — invisible. Lo que decide si hay que aclararla es el FONDO, no de quién es el logo. */ .mr-identidad.fondo-oscuro .marca-plataforma, :root[data-tema="oscuro"] .mr-identidad .marca-plataforma{ opacity:.8; filter:invert(1) brightness(1.8); }