/* Panoul Bricolando — foaia de stil a aplicației (telefon + tabletă, deschis + întunecat).
   Cromatica D1 „Indigo și nisip” (referinte/CROMATICA_BRAND.md). Aceeași foaie e folosită de macheta v2 și de modulul WordPress.
   Reguli: portocaliul #C8410B doar pe îndemn (un singur buton .cta pe ecran); verdele doar pentru „plătit / gata”;
   ținte de atins ≥ 44 px pe telefon, ≥ 48 px pe tabletă; colțuri 6 px butoane, 12 px carduri, 999 px pastile. */

:root {
  --indigo: #1F2A44; --indigo2: #2C3A5C; --bloc: #26324F; --nisip: #F6F2EA; --panou: #EFE9DE; --card: #FFFFFF;
  --text: #1C1F2B; --gri: #5F6370; --otel: #5B6470; --linie: #E6E0D5; --linie2: #D4CDC0; --pe-indigo: #D5D8E0;
  --cta: #C8410B; --cta2: #A8360A; --leg: #B33A0A; --chihlimbar: #FFB703;
  --ok: #1F6B3A; --ok-bg: #EBF2EC; --lucru: #2F4A7A; --lucru-bg: #E6ECF6; --rau: #9F1A1F; --rau-bg: #FCDADA;
  --at: #855400; --at-bg: #FFF2CF; --nou-bg: #EFEDE8; --umbra: 0 6px 24px rgba(31,42,68,.14);
  --f-titlu: "Barlow", "Arial Narrow", Arial, sans-serif; --f-text: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --tinta: 44px; --jos: 64px; --lat: 0px; --sus: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --nisip: #141B2C; --panou: #1B2438; --card: #222C42; --text: #EEF0F4; --gri: #A7AEBD; --otel: #A7AEBD; --linie: #33405C; --linie2: #44527A;
  --ok: #7FC796; --ok-bg: #1C3A29; --lucru: #A9C1EE; --lucru-bg: #233457; --rau: #F2A196; --rau-bg: #47231F;
  --at: #F3C76A; --at-bg: #4A3A12; --nou-bg: #2A3247; --umbra: 0 6px 24px rgba(0,0,0,.45); color-scheme: dark; } }
:root[data-theme="dark"] {
  --nisip: #141B2C; --panou: #1B2438; --card: #222C42; --text: #EEF0F4; --gri: #A7AEBD; --otel: #A7AEBD; --linie: #33405C; --linie2: #44527A;
  --ok: #7FC796; --ok-bg: #1C3A29; --lucru: #A9C1EE; --lucru-bg: #233457; --rau: #F2A196; --rau-bg: #47231F;
  --at: #F3C76A; --at-bg: #4A3A12; --nou-bg: #2A3247; --umbra: 0 6px 24px rgba(0,0,0,.45); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nisip); color: var(--text); font-family: var(--f-text); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--indigo); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--leg); }
h1, h2, h3 { font-family: var(--f-titlu); margin: 0; text-wrap: balance; }
h2 { font-weight: 600; font-size: 17px; }
h2 small { font-family: var(--f-text); font-weight: 400; font-size: 13px; color: var(--gri); }
.num { font-variant-numeric: tabular-nums; }
.ascuns { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--lucru); outline-offset: 2px; }

/* ---------- scheletul: antet, conținut, bara de jos (telefon) / bara laterală (tabletă) ---------- */
.app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.sus { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--indigo); color: #fff; min-height: var(--sus);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sus h1 { font-weight: 700; font-size: 21px; letter-spacing: .2px; line-height: 1.1; }
.sus .zi { font-size: 13px; color: var(--pe-indigo); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sus .zi .fresh::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7FC796; margin-right: 5px; vertical-align: 1px; }
.sus .zi .fresh.offline::before { background: var(--chihlimbar); }
.sus .zi .fresh.offline { color: #FFE2A8; }
.sus .dr { display: flex; gap: 8px; align-items: center; }
.rot { position: relative; width: var(--tinta); height: var(--tinta); border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.rot b { position: absolute; top: -3px; right: -3px; background: var(--cta); color: #fff; font: 700 11px var(--f-text); border-radius: 9px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
.corp { padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(var(--jos) + 96px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 12px; align-content: start; min-width: 0; }

.jos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--linie);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.jos nav { display: grid; grid-template-columns: 1fr 1fr 80px 1fr 1fr; }
.jos nav .mic-loc { position: relative; }
.jos a, .lat a { position: relative; text-align: center; padding: 8px 0 9px; font-size: 12px; color: var(--gri); text-decoration: none; min-height: var(--jos); display: grid; align-content: center; justify-items: center; gap: 2px; font-weight: 500; }
.jos a.act, .lat a.act { color: var(--indigo); font-weight: 600; box-shadow: inset 0 3px 0 var(--cta); }
:root[data-theme="dark"] .jos a.act, :root[data-theme="dark"] .lat a.act { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jos a.act, :root:not([data-theme="light"]) .lat a.act { color: #fff; } }
.jos a b, .lat a b { position: absolute; top: 6px; right: calc(50% - 22px); background: var(--cta); color: #fff; font-size: 11px; border-radius: 9px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
.lat { display: none; }

/* microfonul: mereu la îndemână — pe telefon în mijlocul barei de jos (ridicat, la degetul mare), pe tabletă jos în bara laterală */
.mic { position: absolute; z-index: 21; left: 50%; top: -18px; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--nisip); background: var(--indigo); color: #fff; box-shadow: var(--umbra); display: grid; place-items: center; }
.mic svg.ic { width: 30px; height: 30px; }
.mic.asculta { background: var(--cta); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,65,11,.45); } 50% { box-shadow: 0 0 0 14px rgba(200,65,11,0); } }
.mic-eticheta { position: fixed; z-index: 21; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--jos) + 84px + env(safe-area-inset-bottom, 0px)); background: var(--card); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px; font-size: 13px; box-shadow: var(--umbra); max-width: 70vw; }

/* ---------- blocuri ---------- */
.placa, .comanda, .cerere, .legenda, .bloc { background: var(--card); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; min-width: 0; }
a.placa, a.mic-c, a.rand-bani, .d-cap .inapoi, .fis { text-decoration: none; color: inherit; }
a.placa { display: block; }
.cerere { background: var(--panou); }
.nota { font-size: 12.5px; color: var(--gri); background: var(--panou); border: 1px dashed var(--linie2); border-radius: 8px; padding: 8px 10px; }
.cifre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.placa .et { font-size: 12.5px; color: var(--gri); text-transform: uppercase; letter-spacing: .6px; }
.placa .et::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--gri); }
.placa.noi .et::before { background: var(--lucru); }
.placa.fin .et::before { background: var(--ok); }
.placa .nr { font-family: var(--f-titlu); font-weight: 700; font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.placa .sub { font-size: 13px; color: var(--gri); }
.mici { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mic-c { background: var(--panou); border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; min-width: 0; min-height: 56px; text-align: left; display: grid; align-content: center; }
.mic-c:active, .mic-c.act { border-color: var(--indigo); background: var(--card); }
.mic-c b { display: block; font-family: var(--f-titlu); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mic-c span { font-size: 12px; color: var(--gri); }
.mic-c.rau b { color: var(--rau); }
.mic-c.at b { color: var(--at); }

/* butoane */
.but { font: 600 15px var(--f-text); border-radius: 6px; min-height: var(--tinta); padding: 8px 16px; border: 1px solid var(--linie2); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.but:active { background: var(--panou); }
.but.cta { background: var(--cta); border-color: var(--cta); color: #fff; }
.but.cta:active { background: var(--cta2); }
.but.plin { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.but.plin:active { background: var(--indigo2); }
.but.mare { min-height: 56px; font-size: 17px; }
.but.intreg { width: 100%; }
.but.mic-b { min-height: 36px; padding: 4px 10px; font-size: 13px; font-weight: 500; }
.but.rau { color: var(--rau); border-color: var(--rau); }
.but.ok { color: var(--ok); border-color: var(--ok); }
.but[disabled] { opacity: .5; cursor: default; }
.rand-but { display: flex; flex-wrap: wrap; gap: 8px; }
.rand-but .but { flex: 1 1 auto; }

/* pastile de stare */
.pastile { display: flex; flex-wrap: wrap; gap: 6px; }
.p { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--nou-bg); color: var(--text); line-height: 1.3; border: 0; }
.p.ok { background: var(--ok-bg); color: var(--ok); }
.p.lucru { background: var(--lucru-bg); color: var(--lucru); }
.p.rau { background: var(--rau-bg); color: var(--rau); }
.p.at { background: var(--at-bg); color: var(--at); }
.p.emag { background: var(--panou); color: var(--gri); border: 1px solid var(--linie); }
.p.oprit { background: var(--indigo); color: #fff; }
:root[data-theme="dark"] .p.oprit { background: var(--pe-indigo); color: var(--indigo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p.oprit { background: var(--pe-indigo); color: var(--indigo); } }
.p.vechi { background: transparent; color: var(--gri); border: 1px solid var(--linie2); }

/* cardul de comandă */
.comanda { display: grid; gap: 7px; position: relative; }
.comanda.sel { border-color: var(--indigo); box-shadow: inset 4px 0 0 var(--indigo); }
.comanda.oprita { border-color: var(--indigo); background: var(--panou); }
.comanda a.tot-card { position: absolute; inset: 0; border-radius: 12px; }
.c1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.c1 .id { font-family: var(--f-titlu); font-weight: 700; font-size: 18px; }
.c1 .id small { font-weight: 500; color: var(--gri); font-size: 13px; margin-left: 6px; font-family: var(--f-text); }
.c1 .tot { font-family: var(--f-titlu); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod { font-size: 14.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cine { font-size: 13.5px; color: var(--gri); }
.sta { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; background: var(--panou); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.sta .cine-sta { font-size: 11.5px; color: var(--gri); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; padding-top: 2px; white-space: nowrap; }
.sta .cine-sta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lucru); margin-right: 5px; vertical-align: 1px; }
.sta.oprit .cine-sta::before { background: var(--indigo); }
.sta.rau .cine-sta::before { background: var(--rau); }
.sta.at .cine-sta::before { background: var(--chihlimbar); }
.sta .ora { color: var(--gri); font-size: 12.5px; }
.comanda.oprita .sta { background: var(--card); }
.tel { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panou); border-radius: 8px; padding: 6px 6px 6px 12px; position: relative; z-index: 1; }
.tel span { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .3px; font-size: 16px; }
.tel small { display: block; font-weight: 400; color: var(--gri); font-size: 12.5px; letter-spacing: 0; }
.comanda .rand-but { position: relative; z-index: 1; }
.comanda .pastile .p { position: relative; z-index: 1; }

/* lista cu filtre (ecranul Comenzi) */
.filtre { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin: 0 -4px; padding-inline: 4px; min-height: calc(var(--tinta) + 10px); }
.filtre::-webkit-scrollbar { display: none; }
.filtre .f { flex: none; font: 600 14px var(--f-text); border-radius: 999px; min-height: var(--tinta); padding: 0 14px; border: 1px solid var(--linie2); background: var(--card); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.filtre .f.act { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.filtre .f b { font-weight: 600; background: var(--panou); color: var(--text); border-radius: 9px; padding: 0 6px; font-size: 12px; min-width: 20px; text-align: center; }
.filtre .f.act b { background: rgba(255,255,255,.18); color: #fff; }
.cauta { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--linie2); border-radius: 8px; padding: 0 12px; min-height: var(--tinta); color: var(--gri); }
.cauta input { flex: 1; border: 0; background: none; min-width: 0; font-size: 15px; }
.cauta input:focus { outline: 0; }
.zi-sep { font-size: 12.5px; color: var(--gri); text-transform: uppercase; letter-spacing: .6px; margin-top: 6px; }
.lista { display: grid; gap: 10px; align-content: start; }

/* ---------- detaliul comenzii ---------- */
.detaliu { display: grid; gap: 12px; align-content: start; min-width: 0; }
.d-cap { display: grid; gap: 4px; }
.d-cap .rand { display: flex; align-items: center; gap: 10px; }
.d-cap .id { font-family: var(--f-titlu); font-weight: 700; font-size: 26px; }
.d-cap .tot { font-family: var(--f-titlu); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; margin-left: auto; }
.d-cap .inapoi { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tinta); min-width: var(--tinta); padding: 0 10px 0 4px; border: 0; background: none; color: var(--indigo); font-weight: 600; border-radius: 6px; margin-left: -8px; }
:root[data-theme="dark"] .d-cap .inapoi { color: #fff; }
.d-cap .cine { font-size: 15px; }
.bloc { display: grid; gap: 8px; }
.bloc h3 { font-size: 13px; font-weight: 600; color: var(--gri); text-transform: uppercase; letter-spacing: .6px; font-family: var(--f-text); }
.bloc h3 .ora { text-transform: none; letter-spacing: 0; font-weight: 400; float: right; }
.produse { display: grid; gap: 6px; }
.produse div { display: flex; gap: 10px; justify-content: space-between; font-size: 14.5px; }
.produse div span:last-child { color: var(--gri); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doc .but { justify-content: flex-start; min-height: 52px; }
.doc .but small { font-weight: 400; color: var(--gri); font-size: 12.5px; display: block; }
.doc .but span { display: grid; text-align: left; line-height: 1.2; }
.doc .but.gol { color: var(--gri); border-style: dashed; }
.linie-k { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.linie-k span:first-child { color: var(--gri); flex: none; }
.linie-k span:last-child { text-align: right; overflow-wrap: anywhere; }
.sta.mare { font-size: 15px; grid-template-columns: 1fr; padding: 12px; }
.sta.mare .cine-sta { padding: 0; }
.sta.mare p { margin: 0; }

/* semnalul: text + butoane fixe jos */
.semnal-in { display: grid; gap: 8px; }
.semnal-in .rand { display: flex; gap: 8px; align-items: stretch; }
.semnal-in textarea { flex: 1; min-height: 52px; border: 1px solid var(--linie2); border-radius: 8px; padding: 10px 12px; background: var(--card); resize: vertical; font-size: 15px; }
.semnal-in .dicteaza { width: 52px; border-radius: 8px; border: 1px solid var(--linie2); background: var(--card); color: var(--indigo); display: grid; place-items: center; }
:root[data-theme="dark"] .semnal-in .dicteaza { color: #fff; }
/* 1.1.3: starea microfonului se vede pe fiecare buton și într-o bandă sus: „pornesc” (încă nu ascultă) → „te ascult” (pulsează) */
.semnal-in .dicteaza.asculta, .mic.asculta { background: var(--cta); border-color: var(--cta); color: #fff; animation: puls 1.2s ease-in-out infinite; }
.semnal-in .dicteaza.porneste, .mic.porneste, .volan .v-mic.porneste { outline: 3px dashed var(--cta); outline-offset: 3px; }
.mic-stare { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--ink, #1C1F2B); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600; box-shadow: var(--umbra); max-width: min(92vw, 520px); display: flex; align-items: center; gap: 10px; }
.mic-stare i { width: 12px; height: 12px; border-radius: 50%; background: var(--cta); flex: none; animation: puls 1.2s ease-in-out infinite; }
.actiuni { position: sticky; bottom: calc(var(--jos) + env(safe-area-inset-bottom, 0px)); z-index: 5; background: var(--nisip); padding: 10px 0 6px; margin: 0 -2px; display: grid; gap: 6px; border-top: 1px solid var(--linie); }
.actiuni .rand-but .but { flex: 1 1 40%; min-width: 0; padding-inline: 10px; white-space: normal; }
.actiuni .but { min-height: 52px; }
.detaliu { max-width: 100%; }
.corp > * { min-width: 0; }

/* starea semnalului */
.stare-semnal { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gri); }
.stare-semnal::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gri); }
.stare-semnal.trimis::before { background: var(--chihlimbar); }
.stare-semnal.preluat::before { background: var(--lucru); }
.stare-semnal.facut { color: var(--ok); } .stare-semnal.facut::before { background: var(--ok); }
.stare-semnal.refuzat { color: var(--rau); } .stare-semnal.refuzat::before { background: var(--rau); }
.pasi { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gri); flex-wrap: wrap; }
.pasi span { padding: 2px 8px; border-radius: 999px; background: var(--panou); }
.pasi span.pas-ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.pasi span.pas-acum { background: var(--lucru-bg); color: var(--lucru); font-weight: 600; }
.pasi span.pas-rau { background: var(--rau-bg); color: var(--rau); font-weight: 600; }
.pasi i { font-style: normal; }

/* firul comenzii */
.fir { display: grid; gap: 0; }
.ev { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 8px 0; position: relative; }
.ev::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: -8px; width: 2px; background: var(--linie); }
.ev:last-child::before { display: none; }
.ev .ic-ev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panou); color: var(--gri); }
.ev .ic-ev svg.ic { width: 17px; height: 17px; }
.ev.claude .ic-ev { background: var(--lucru-bg); color: var(--lucru); }
.ev.alin .ic-ev { background: var(--indigo); color: #fff; }
.ev.plata .ic-ev { background: var(--ok-bg); color: var(--ok); }
.ev.plata.rau .ic-ev { background: var(--rau-bg); color: var(--rau); }
.ev.curier .ic-ev { background: var(--at-bg); color: var(--at); }
.ev.furnizor .ic-ev { background: var(--panou); color: var(--text); }
.ev .t { font-size: 14px; }
.ev .t b { font-weight: 600; }
.ev .m { font-size: 12.5px; color: var(--gri); }
.ev .fis { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; border: 1px solid var(--linie2); border-radius: 6px; padding: 8px 10px; min-height: 40px; background: var(--card); }
:root[data-theme="dark"] .ev .fis { color: #fff; }
.ev .raspuns { margin-top: 6px; border-left: 3px solid var(--lucru); padding: 6px 10px; background: var(--lucru-bg); border-radius: 0 8px 8px 0; font-size: 14px; }
.ev .raspuns.rau { border-color: var(--rau); background: var(--rau-bg); }

/* ---------- foi (confirmare, ajutor) ---------- */
.val { position: fixed; inset: 0; z-index: 40; background: rgba(28,31,43,.55); display: grid; align-items: end; }
.foaie { background: var(--card); border-radius: 16px 16px 0 0; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px; box-shadow: var(--umbra); max-height: 92dvh; overflow: auto; }
.foaie .maner { width: 40px; height: 4px; border-radius: 2px; background: var(--linie2); margin: -6px auto 0; }
.foaie h2 { font-size: 19px; }
.foaie .nr-mare { font-family: var(--f-titlu); font-weight: 700; font-size: 42px; line-height: 1.05; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.foaie .nr-mare small { display: block; font-size: 20px; font-weight: 600; letter-spacing: 0; margin-top: 4px; }
.foaie .suma { font-family: var(--f-titlu); font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; }
.foaie .intreb { font-size: 17px; }
.foaie .rand-but .but { min-height: 56px; font-size: 17px; }
.foaie .voce-hint { font-size: 13px; color: var(--gri); display: flex; align-items: center; gap: 6px; }
.legenda { display: grid; gap: 10px; font-size: 14px; }
.legenda div { display: grid; grid-template-columns: 124px 1fr; gap: 10px; align-items: start; }

/* ---------- mesaj scurt (toast) ---------- */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--jos) + 20px + env(safe-area-inset-bottom, 0px)); z-index: 35; background: var(--indigo); color: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: var(--umbra); width: max-content; max-width: min(92vw, 520px); font-size: 15px; line-height: 1.4; }
.toast.ok { background: var(--ok); }
.toast b { font-family: var(--f-titlu); font-size: 17px; margin-right: 4px; }

/* ---------- ecranul blocat (machetă) ---------- */
.blocat { min-height: 100dvh; background: radial-gradient(120% 80% at 50% 0%, #2C3A5C 0%, #1F2A44 45%, #121a2e 100%); color: #fff; display: grid; align-content: start; gap: 18px; padding: 48px 16px 24px; font-family: var(--f-text); }
.blocat .ceas { text-align: center; }
.blocat .ceas b { display: block; font: 300 76px/1 var(--f-titlu); letter-spacing: 1px; }
.blocat .ceas span { color: var(--pe-indigo); font-size: 16px; }
.notif { background: rgba(255,255,255,.96); color: #1C1F2B; border-radius: 18px; padding: 12px 14px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; }
.notif img { width: 36px; height: 36px; border-radius: 9px; }
.notif .ap { font-size: 12.5px; color: #5F6370; display: flex; justify-content: space-between; }
.notif .ti { font-weight: 600; font-size: 15px; line-height: 1.3; margin-top: 2px; }
.notif .tx { font-size: 14px; color: #3b3f4b; }
.notif.grup { opacity: .85; transform: scale(.97); margin-top: -10px; }

/* ---------- modul „la volan” ---------- */
.volan { min-height: 100dvh; background: var(--indigo); color: #F6F2EA; display: grid; grid-template-rows: auto 1fr auto; padding: max(16px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px)); gap: 16px; font-family: var(--f-text); }
.volan .v-sus { display: flex; justify-content: space-between; align-items: center; color: var(--pe-indigo); font-size: 15px; }
.volan .v-sus .iesi { border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; border-radius: 6px; min-height: 48px; padding: 0 16px; font-weight: 600; }
.volan .v-ev { display: grid; align-content: center; gap: 14px; text-align: left; }
.volan .v-ev .et { color: var(--pe-indigo); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.volan .v-ev .ti { font: 700 40px/1.1 var(--f-titlu); text-wrap: balance; }
.volan .v-ev .tx { font-size: 22px; line-height: 1.35; color: #E6E9F0; }
.volan .v-ev .ti .nr { color: var(--chihlimbar); }
.volan .v-jos { display: grid; gap: 12px; justify-items: center; text-align: center; }
.volan .v-mic { width: 120px; height: 120px; border-radius: 50%; border: 0; background: #F6F2EA; color: var(--indigo); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(246,242,234,.12); }
.volan .v-mic svg.ic { width: 56px; height: 56px; }
.volan .v-mic.asculta { background: var(--cta); color: #fff; animation: puls 1.2s ease-in-out infinite; }
.volan .v-hint { font-size: 18px; color: var(--pe-indigo); }
.volan .v-unda { display: flex; gap: 5px; align-items: end; height: 36px; }
.volan .v-unda i { width: 7px; background: var(--chihlimbar); border-radius: 4px; animation: unda 1s ease-in-out infinite; }
.volan .v-unda i:nth-child(2) { animation-delay: .1s; } .volan .v-unda i:nth-child(3) { animation-delay: .2s; } .volan .v-unda i:nth-child(4) { animation-delay: .3s; } .volan .v-unda i:nth-child(5) { animation-delay: .4s; }
@keyframes unda { 0%, 100% { height: 8px; } 50% { height: 36px; } }
.volan .v-dialog { display: grid; gap: 10px; }
.volan .v-dialog .tu { justify-self: end; background: rgba(255,255,255,.12); border-radius: 16px 16px 4px 16px; padding: 12px 16px; font-size: 20px; max-width: 90%; }
.volan .v-dialog .eu { justify-self: start; background: #F6F2EA; color: var(--indigo); border-radius: 16px 16px 16px 4px; padding: 14px 18px; font: 600 24px/1.3 var(--f-titlu); max-width: 92%; }
.volan .v-dialog .eu .nr { letter-spacing: 3px; color: var(--cta); }
.volan .v-danu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.volan .v-danu .but { min-height: 88px; font: 700 30px var(--f-titlu); border-radius: 12px; }
.volan .v-danu .da { background: var(--cta); border-color: var(--cta); color: #fff; }
.volan .v-danu .nu { background: none; border: 2px solid rgba(255,255,255,.4); color: #fff; }

/* ---------- pastila OP ---------- */
.op-card { display: grid; gap: 10px; border: 1px solid var(--lucru); background: var(--lucru-bg); border-radius: 12px; padding: 12px; }
.op-card .cap { display: flex; align-items: center; gap: 10px; }
.op-card .cap .ic-ev { width: 36px; height: 36px; border-radius: 8px; background: var(--card); display: grid; place-items: center; color: var(--lucru); }
.op-card .cap b { font-size: 15px; }
.op-card .cap small { display: block; color: var(--gri); font-size: 12.5px; }
.op-card .but { background: var(--card); }

/* ---------- Bani ---------- */
.bani-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.placa.bani .nr { font-size: 30px; }
.placa.bani .nr small { font-size: 16px; font-weight: 600; }
.rand-bani { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); font-size: 14.5px; }
.rand-bani:first-of-type { border-top: 0; }
.rand-bani .s { font-family: var(--f-titlu); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.rand-bani .m { color: var(--gri); font-size: 13px; }

/* ---------- Semnale ---------- */
.semnal { display: grid; gap: 8px; }
.semnal .cap { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.semnal .cap b { font-family: var(--f-titlu); font-size: 17px; }
.semnal .cap .ora { color: var(--gri); font-size: 13px; white-space: nowrap; }
.semnal .text { font-size: 14.5px; }
.semnal .text q { font-style: italic; }

/* ======================================================================
   TABLETĂ (≥ 760 px lățime și ≥ 501 px înălțime): bara laterală, ținte 48 px
   ====================================================================== */
@media (min-width: 760px) and (min-height: 501px) {
  :root { --tinta: 48px; --jos: 0px; --lat: 76px; }
  body { font-size: 16px; }
  .app { grid-template-columns: var(--lat) 1fr; grid-template-rows: auto 1fr; }
  .lat { display: grid; grid-row: 1 / -1; grid-column: 1; position: sticky; top: 0; height: 100dvh; background: var(--card); border-right: 1px solid var(--linie); grid-template-rows: auto 1fr auto; padding: 8px 0 12px; z-index: 22; }
  .lat .sigla { width: 44px; height: 44px; border-radius: 10px; margin: 6px auto 10px; display: block; }
  .lat nav { display: grid; gap: 4px; }
  .lat a { min-height: 64px; font-size: 12px; box-shadow: none; border-radius: 10px; margin: 0 8px; }
  .lat a.act { background: var(--panou); box-shadow: inset 3px 0 0 var(--cta); }
  .lat a b { right: 8px; }
  .jos { display: none; }
  .sus { grid-column: 2; }
  .corp { grid-column: 2; padding: 16px 20px 24px; gap: 14px; }
  .mic { position: static; transform: none; width: 56px; height: 56px; margin: 0 auto; box-shadow: none; border: 0; }
  .mic-eticheta { display: none; }
  .cifre { gap: 12px; }
  .placa .nr { font-size: 56px; }
  .placa { padding: 14px 16px; }
  .mic-c { min-height: 64px; }
  .mic-c b { font-size: 26px; }
  .c1 .id, .c1 .tot { font-size: 19px; }
  .actiuni { bottom: 0; }
  .val { align-items: center; justify-items: center; }
  .foaie { border-radius: 16px; width: min(560px, 92vw); padding: 24px; }
  .foaie .nr-mare { font-size: 56px; }
  .foaie .maner { display: none; }
  .toast { bottom: 24px; left: calc(var(--lat) + 24px); transform: none; }
  .volan .v-ev .ti { font-size: 56px; }
  .volan .v-ev .tx { font-size: 28px; }
  .volan .v-mic { width: 140px; height: 140px; }
  /* „Azi” pe vertical: cifrele deasupra, apoi două coloane */
  .azi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .azi-grid > .col { display: grid; gap: 12px; min-width: 0; }
  .azi-grid > .col.cifre-col { grid-column: 1 / -1; }
  /* Comenzi pe vertical: lista deasupra, detaliul dedesubt, fiecare cu derularea lui */
  .doua { display: grid; grid-template-rows: minmax(0, 42fr) minmax(0, 58fr); gap: 0; height: calc(100dvh - var(--sus) - 16px); margin: -16px -20px -24px; }
  .doua > .lista-col { overflow: auto; padding: 16px 20px; display: grid; gap: 10px; align-content: start; border-bottom: 1px solid var(--linie); }
  .doua > .detaliu-col { overflow: auto; padding: 16px 20px 16px; background: var(--panou); }
  .doua.marit { grid-template-rows: auto minmax(0, 1fr); }
  .doua.marit > .lista-col { display: none; }
  .doua.marit > .banda-sel { display: flex; }
  .banda-sel { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 20px; background: var(--card); border-bottom: 1px solid var(--linie); font-weight: 600; }
  .banda-sel .but { min-height: 44px; }
  .mareste { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--linie2); background: var(--card); color: var(--gri); display: grid; place-items: center; }
  .detaliu-col { position: relative; }
  .detaliu-col .d-cap { padding-right: 56px; }
  .detaliu-col .actiuni { background: var(--panou); }
  .doc { grid-template-columns: 1fr 1fr 1fr; }
  .bani-grid { grid-template-columns: repeat(4, 1fr); }
  .legenda div { grid-template-columns: 150px 1fr; }
}

/* TABLETĂ PE ORIZONTAL (≥ 1000 px): „Azi” pe trei coloane, Comenzi pe două coloane (lista stânga, detaliul dreapta) */
@media (min-width: 1000px) and (min-height: 501px) {
  .azi-grid { grid-template-columns: minmax(300px, 2fr) 3fr 3fr; }
  .azi-grid > .col.cifre-col { grid-column: auto; }
  .doua { grid-template-rows: none; grid-template-columns: minmax(360px, 2fr) 3fr; }
  .doua > .lista-col { border-bottom: 0; border-right: 1px solid var(--linie); }
  .doua.marit { grid-template-columns: minmax(360px, 2fr) 3fr; }
  .doua.marit > .lista-col { display: grid; }
  .doua.marit > .banda-sel, .mareste { display: none; }
  .bani-grid { grid-template-columns: repeat(4, 1fr); }
  .bani-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}

@media (max-width: 360px) { .mici { grid-template-columns: 1fr 1fr; } .placa .nr { font-size: 36px; } .doc { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mic.asculta, .volan .v-mic.asculta, .volan .v-unda i { animation: none; } }