/* MANUAL DE IDENTIDAD MANJARGO — archivo compartido entre todos los proyectos.
Acá vive TODO lo que tiene que verse igual en las dos apps: la paleta, las tipografías,
las medidas y los componentes comunes (botones, campos, tarjetas, pastillas, pestañas,
tablas, avisos). Lo que queda en el CSS de cada app es solo su maqueta propia.
El original está en manjargo-delivery/public/marca.css. Los demás proyectos llevan una
copia igual y no la editan: se cambia acá y se copia. Un cambio de color, de letra o de
la forma de un botón se hace una sola vez y se ve en todos lados.
Los fuentes del manual (logos .ai, tipografías, catálogos) están en
"OneDrive - MANJARGO SAS\Produccion compartida\MANJARGO - BARCO\BRAND CENTRAL".
La página tiene que cargar Nunito y este archivo antes que su propio CSS:
Las dos apps nombran distinto algunas clases (delivery escribe "btn btn-primary", pedidos
escribe "btn p"). Donde pasa eso, la regla lista los dos nombres y pinta lo mismo. */
/* ---------- 1. Paleta ----------
Gris #3E3C38 Pantone Black 7 C · Oracal 073 Dark grey · SW 7674 Peppercorn
Verde #94D357 Pantone 7488 C · Oracal 063 Lime-tree · SW 6921 Electric Lime
Cielo #5EBDD4 Pantone 3115 C
Ocre #DC9D59 Pantone 157 C
--brand-lime y --brand-ink son el par del logotipo: "MANJAR" en gris, "GO" en verde.
El verde de marca es muy claro: sirve de relleno, no de texto. Para texto, bordes,
subrayados y foco sobre fondo claro va --accent-text, que es el mismo verde oscurecido
hasta que se lee. Esa es la única regla que hay que respetar al usar la paleta. */
:root{
--brand-ink:#3E3C38; --brand-lime:#94D357; --brand-sky:#5EBDD4; --brand-ocre:#DC9D59;
--bg:#F6F5F1; --surface:#FFFFFF; --ink:#3E3C38; --muted:#6E6A62; --line:#E3E1DB;
--accent:var(--brand-lime); --accent-ink:#2B2A26; --accent-text:#4A7620; --accent-soft:#E8F5DA;
--info:#1C7083; --info-soft:#DEF0F5;
--warn:#8A5418; --warn-soft:#FBEEDC; --bad:#B3392F; --bad-soft:#F9E3DD;
/* ---------- 2. Tipografía ----------
Las del manual son comerciales y piden licencia web aparte, así que por ahora va Nunito
(Google Fonts), que mide igual que Armin Soft: la misma frase ocupa 0,1% más. Cuando se
compren las licencias se cambian estas dos líneas y se agregan los @font-face:
--font-display -> Tusker Grotesk (o Armin Soft Black, que es la del logotipo)
--font-body -> Armin Soft
Por eso quedan como dos variables aunque hoy apunten a la misma familia. */
--font-display:'Nunito',system-ui,sans-serif;
--font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
/* ---------- 3. Medidas ----------
Las formas también son marca: si se cambia el redondeo acá, cambia en los dos lados.
--ancho lo pisa cada app: la página del cliente es angosta, el panel interno es ancho. */
--radio:12px; --radio-chico:8px; --radio-control:10px; --radio-pastilla:999px;
--alto-boton:44px; --alto-control:46px; --ancho:760px;
}
/* En oscuro el verde de marca ya contrasta de sobra, así que se usa tal cual también para texto. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#1C1B19; --surface:#262521; --ink:#F0EEE8; --muted:#A8A399; --line:#3A3833;
--accent:var(--brand-lime); --accent-ink:#1C1B19; --accent-text:var(--brand-lime); --accent-soft:#2A3A1C;
--info:var(--brand-sky); --info-soft:#17333B;
--warn:var(--brand-ocre); --warn-soft:#3A2B17; --bad:#EE8A80; --bad-soft:#3A1E1B; color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#1C1B19; --surface:#262521; --ink:#F0EEE8; --muted:#A8A399; --line:#3A3833;
--accent:var(--brand-lime); --accent-ink:#1C1B19; --accent-text:var(--brand-lime); --accent-soft:#2A3A1C;
--info:var(--brand-sky); --info-soft:#17333B;
--warn:var(--brand-ocre); --warn-soft:#3A2B17; --bad:#EE8A80; --bad-soft:#3A1E1B; color-scheme:dark;
}
/* ---------- 4. Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--font-body);
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;line-height:1.15}
h2{font-size:22px;font-weight:700} h3{font-size:17px;font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--ancho);margin:0 auto}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.help{font-size:13px;color:var(--muted)}
.big{font-size:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.nowrap{flex-wrap:nowrap}
.grow{flex:1}
.stack{display:grid;gap:14px}
.mt{margin-top:14px}
.scroll,.tablewrap{overflow-x:auto;max-width:100%}
.skeleton{color:var(--muted);padding:30px 0;text-align:center}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
/* ---------- 5. Marca en el encabezado ---------- */
.brand{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.01em}
.brand b{font:inherit}
.brand small{display:block;font:500 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* ---------- 6. Botones ----------
delivery: btn-primary / btn-outline / btn-ghost / btn-bad / btn-sm
pedidos: btn p / — / — / btn d / btn s */
.btn{min-height:var(--alto-boton);border-radius:var(--radio-control);padding:0 18px;
border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;
cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary,.btn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-outline{background:transparent;border-color:var(--accent-text);color:var(--accent-text)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.d{color:var(--bad)}
.btn-sm,.btn.s{min-height:36px;padding:0 12px;font-size:14px}
.btn-block{width:100%}
.btn-link,.link{background:none;border:0;color:var(--accent-text);font-weight:600;
cursor:pointer;text-decoration:underline;padding:6px;min-height:0}
/* El foco se ve con el verde que sí se lee, nunca con el verde claro de relleno. */
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
/* ---------- 7. Campos ----------
delivery los envuelve en .field, pedidos en label.f; el campo en sí se pinta igual. */
input:not([type=checkbox]):not([type=radio]),select,textarea{
border:1px solid var(--line);background:var(--bg);border-radius:var(--radio-control);
padding:12px;min-height:var(--alto-control);max-width:100%}
.field,label.f{display:grid;gap:6px}
.field label,.lbl{font-size:14px;font-weight:600}
label.f{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea,label.f input,label.f select,label.f textarea{width:100%}
/* ---------- 8. Tarjetas ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);padding:14px}
/* ---------- 9. Pastillas ----------
.chip es la grande (encabezados); .state y .pill son la chica (estados en listas). */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radio-pastilla);
padding:6px 12px;font-size:13px;font-weight:600;background:var(--accent-soft);
color:var(--accent-text);white-space:nowrap}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.state,.pill{display:inline-block;border-radius:var(--radio-pastilla);padding:3px 10px;
font-size:12px;font-weight:600;background:var(--line);color:var(--muted);white-space:nowrap}
.state.ok,.pill.ok{background:var(--accent-soft);color:var(--accent-text)}
.state.warn,.pill.warn{background:var(--warn-soft);color:var(--warn)}
.state.bad,.pill.bad{background:var(--bad-soft);color:var(--bad)}
.state.info,.pill.info{background:var(--info-soft);color:var(--info)}
/* ---------- 10. Avisos ----------
delivery los llama .note, pedidos .msg. */
.note,.msg{border-radius:var(--radio-control);padding:10px 12px;font-size:14px;font-weight:500;
background:var(--accent-soft);color:var(--accent-text)}
.note.warn,.msg.warn{background:var(--warn-soft);color:var(--warn)}
.note.bad,.msg.bad{background:var(--bad-soft);color:var(--bad)}
/* ---------- 11. Pestañas ----------
delivery marca la activa con aria-pressed y pedidos con aria-selected: se ven igual. */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:var(--radio-pastilla);
padding:8px 16px;font-weight:600;cursor:pointer;color:var(--muted)}
.tabs button[aria-pressed="true"],.tabs button[aria-selected="true"]{
background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* ---------- 12. Barra de progreso ---------- */
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar.over i{background:var(--bad)}
@media (prefers-reduced-motion:no-preference){.bar i{transition:width .2s}}
/* ---------- 13. Tablas ----------
Base para una tabla suelta. Las tablas con nombre propio (.imptable) la pisan. */
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:700 12px var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
/* ---------- 14. Aviso flotante ----------
--toast-abajo lo sube la app que tenga algo fijo abajo (la barra del carrito). */
.toast{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(var(--toast-abajo,20px) + env(safe-area-inset-bottom,0px));z-index:70;
background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--radio-control);
font-weight:600;max-width:90vw}