/* ═════════════════════════════════════════════════════════════════════════════
   APLICATIA IN LIMBAJUL PUPITRULUI — scheletul (dock + sub-file, bara de sus, antet de fila) si filele
   Acasa, Cine ți-a scris, Abonament. 19-Sep-2026, branch app-acasa.

   Se incarca DUPA style.css si war.css (vezi index.html). Clasele `wr-*` vin din war.css,
   PUBLIC; regulile `body.war ...` de acolo NU se aplica aici (body-ul aplicatiei n-are clasa
   `war`), deci tot ce ar fi venit din ele e scris in foaia asta. Tot ce e nou are prefixul
   `pt-` (foaia comuna n-are scope de modul).

   REGULI CARE SE APLICA AICI:
   · Corpul ramane crem, informatia sta pe display negru (design/aplicatie.html). Pe crem nu
     apare nicio cerneala noua sub 4,5:1: seria `BM—` se scrie cu --chink3 (#4E5255) si
     --orc (#922F15), nu cu --ink3/--or, care sunt facute pentru negru.
   · Seria BM—xx.y nu e text in DOM: o scrie CSS din `data-n` / `data-g`. Nu are ce traduce.
   · Nicio regula de aici nu atinge clasele altor file (comanda, profil, brain...): scheletul
     pastreaza clasele existente ale navigatiei si ale `.fila`.
   · `[hidden]` e batut de orice `display:` scris de autor: perechea lui e scrisa langa fiecare
     element pe care JS il ascunde.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Piesa adancita a War Room-ului: in style.css traieste sub `body.war`, care aici nu exista,
   deci `var(--mat-adancit)` din war.css ar ramane nedefinita si panourile ar pierde umbra. */
:root {
  --mat-adancit: inset 0 2px 6px -1px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.045);
}

/* ═══════ SCHELETUL: bara de sus ═══════ */

/* Logo-ul cu scris SUBTIRE (cerere Ali, 19-Sep): 500 in loc de 800. Litere putin mai largi,
   ca sa nu se piarda forma la greutatea mica. */
.bara-wm b { font-weight: 500; letter-spacing: .02em; font-size: 13.5px; }
.bara-wm span { font-weight: 500; }

/* Lampa de sub bara: o dunga scurta de portocaliu, ca pe pupitru. Decor pur. */
.bara-sus { box-shadow: inset 0 -1px 0 var(--disprule); }
.bara-sus::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 2px;
  background: var(--or); pointer-events: none;
}

/* ═══════ SCHELETUL: dock-ul si sub-filele ═══════ */

/* Pictogramele din dock poarta culoarea grupului, nu gri: pupitrul isi cunoaste zonele dupa
   culoare (aceeasi cheie ca seria BM—xx din antet, pusa de deseneazaDock prin `data-g`).
   Grupul curent ramane portocaliu (lampa aprinsa, regula din style.css). */
.dock-b[data-g="0"]  { --c: var(--ord); }
.dock-b[data-g="10"] { --c: var(--cyd); }
.dock-b[data-g="20"] { --c: var(--mgd); }
.dock-b[data-g="30"] { --c: var(--gnd); }
.dock-b[data-g="40"] { --c: var(--yed); }
.dock-b[data-g="50"] { --c: var(--bld); }
.dock-b[data-g] .dock-i { color: var(--c); }
.dock-b-activ[data-g] .dock-i { color: var(--or); }

/* Dunga de culoare a grupului sub banda de sub-file: de pe orice fila se vede in ce grup
   esti, si fara sa cobori privirea la dock. Decor pur, 2px. */
.subfile { --c: var(--disprule); box-shadow: inset 0 -2px 0 var(--c); }
.subfile[data-g="10"] { --c: var(--cyd); }
.subfile[data-g="20"] { --c: var(--mgd); }
.subfile[data-g="30"] { --c: var(--gnd); }
.subfile[data-g="40"] { --c: var(--yed); }
.subfile[data-g="50"] { --c: var(--bld); }

/* ═══════ SCHELETUL: antetul de fila ═══════ */

/* Pictograma filei pe o placa neagra (display), cu muchia jos in familia grupului; titlul
   si seria langa ea. `--c` il pune arataFila() prin clasa `wr-f-<fam>` a svg-ului. */
.pt-antet { display: flex; align-items: center; gap: var(--p4); }
.pt-antet-ic {
  box-sizing: content-box; width: 32px; height: 32px; padding: 10px; flex: none;
  background: var(--disp); border: 1px solid var(--disprule); border-radius: var(--r0);
  box-shadow: inset 0 -3px 0 var(--c, var(--ord));
}
.pt-antet-txt { min-width: 0; display: flex; flex-direction: column; gap: var(--p1); }
.pt-antet h1 { overflow-wrap: anywhere; }

/* Seria: mono, gravata. Pe display (`.pt-serie`) — portocaliu pe negru, cerneala; pe crem —
   cerneala inchisa, --orc pentru BM—. */
.pt-serie::before, .pt-antet-serie::before { content: "BM—"; color: var(--ord); }
.pt-serie::after, .pt-antet-serie::after { content: attr(data-n); }
.pt-antet-serie, .pt-cap-crem .wr-serie {
  color: var(--chink3);
}
.pt-antet-serie::before, .pt-cap-crem .wr-serie::before { color: var(--orc); }

/* Latimea corpului: 808px e buna pentru text, prea ingusta pentru diagrame. Doar cele trei
   file de aici se largesc (`data-fila` il pune arataFila() pe `.ecran`). */
.ecran[data-fila="acasa"] .continut,
.ecran[data-fila="leaduri"] .continut,
.ecran[data-fila="abonament"] .continut { max-width: 1120px; }
.ecran[data-fila="abonament"] .continut { max-width: 960px; }

/* ═══════ PANOUL (comun) ═══════ */

.pt-panou { margin: 0; }
.pt-panou .wr-panou-cap h2 {
  margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px;
  font-weight: 600; line-height: 1.35; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dispink);
}
.pt-panou-corp { min-width: 0; }
.pt-panou .wr-serie { flex: none; }

/* Compozitia pe 12 coloane: span-uri prin CLASE (nu inline: bat @media). Sub 1100px totul
   trece pe un rand — continutul are atunci ~740px sau mai putin, prea putin pentru doua
   panouri langa. `1 / -1` merge cu orice numar de coloane pe care il are grila. */
.pt-diag { margin-top: var(--p4); }
.pt-diag > .pt-s4 { grid-column: span 4; }
.pt-diag > .pt-s6 { grid-column: span 6; }
.pt-diag > .pt-s8 { grid-column: span 8; }
@media (max-width: 1100px) {
  .pt-diag > .pt-s4, .pt-diag > .pt-s6, .pt-diag > .pt-s8 { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .pt-diag { gap: var(--p3); } }

/* Graficul: etichetele de pe axa X nu cresc panoul (cuvinte lungi pe telefon). */
.pt-grafic { min-width: 0; }
.pt-grafic .wr-x span { overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pt-grafic .wr-chart { overflow: hidden; }
.pt-bare .wr-hr:first-child { padding-top: 0; }
.pt-bare .wr-bara { min-width: 0; }
.pt-bare .wr-hr-et { min-width: 0; }

/* ═══════ KPI-URILE (Acasa si Cine ți-a scris) ═══════ */

.pt-kpi .wr-kpi-val { font-size: clamp(26px, 2.6vw, 34px); }
.pt-kpi .wr-kpi-et { font-size: 11px; letter-spacing: .1em; overflow-wrap: anywhere; }
.pt-kpi .wr-serie { font-size: 10px; letter-spacing: .16em; }
.pt-kpi .wr-ic { width: 18px; height: 18px; }
.pt-kpi-bara { margin-top: var(--p2); height: 8px; width: 100%; }
.pt-kpi-bara i { background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 10px); }
.pt-kpi-bara { background: repeating-linear-gradient(90deg, var(--disprule) 0 8px, transparent 8px 10px); }

/* Grila de pe Acasa: placi `button.em-cel` care sunt si `wr-kpi`. Ordinea de incarcare face
   ca `wr-kpi` (war.css) sa bata `.em-cel` la aceeasi specificitate; aici se pun la loc doar
   lucrurile care conteaza pentru un buton: aliniere la stanga, latime, inaltime minima. */
#acasa-metrici { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p3); }
#acasa-metrici .em-cel.pt-kpi {
  justify-content: flex-start; align-items: stretch; gap: 3px; min-height: 108px;
  padding: var(--p3) var(--p4); text-align: left; white-space: normal;
  background: linear-gradient(180deg, var(--disp), var(--disp2));
  box-shadow: var(--mat-adancit), inset 0 2px 0 var(--c);
  font-family: var(--sans);
}
#acasa-metrici .em-cel.pt-kpi:hover { background: var(--disp2); }
#acasa-metrici .em-cel.pt-kpi .wr-kpi-cap { margin-bottom: var(--p1); }
#acasa-metrici .em-cel.pt-kpi .em-n { font-size: clamp(26px, 2.6vw, 34px); color: var(--c); }
#acasa-metrici .em-cel.pt-kpi .em-s { font-size: 12px; color: var(--dispink2); }
/* Sageata „duce in alta fila" ramane (button.em-cel .em-e::after din style.css). */

@media (max-width: 1100px) { #acasa-metrici { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { #acasa-metrici { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p2); } }
@media (max-width: 700px) {
  #acasa-metrici .em-cel.pt-kpi { padding: var(--p3); min-height: 96px; }
}

/* Cifra mare de sus a Acasa: aceeasi placa neagra, cu pictograma si lampa de sus. */
.pt-cifra {
  position: relative; box-shadow: var(--mat-adancit), inset 0 3px 0 var(--c, var(--ord));
  background: linear-gradient(180deg, var(--disp), var(--disp2));
}
.pt-cifra-ic { position: absolute; top: var(--p4); right: var(--p4); width: 24px; height: 24px; }
.pt-cifra .cifra { color: var(--c, var(--dispink)); }
.pt-cifra .cifra-eticheta { padding-right: 36px; }
@media (max-width: 560px) {
  .pt-cifra { display: flex; min-width: 0; width: 100%; padding: var(--p4); }
  .pt-cifra .cifra { font-size: 44px; }
}

/* Panourile graficelor de pe Acasa: aceeasi distanta fata de grila de deasupra. */
#acasa-grafice:empty { display: none; }
#acasa-grafice { margin-top: var(--p6); }

/* ═══════ CINE ȚI-A SCRIS ═══════ */

.pt-leaduri-sus { margin-bottom: var(--p6); }
.pt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pt-kpis { gap: var(--p2); } .pt-kpis .wr-kpi { padding: var(--p3); } }

/* Antetul listei de pe crem: titlu + serie, linie dedesubt. Titlul e h2 in DOM (era, nu se
   schimba nivelul), dar stilul din `h2` global (margini mari) se ia jos aici. */
.pt-lead-lista { margin-top: var(--p2); }
.pt-cap-crem {
  display: flex; align-items: baseline; gap: var(--p3); margin-bottom: var(--p3);
  padding-bottom: var(--p2); border-bottom: 1px solid var(--chrule2);
}
.pt-cap-crem h2 {
  margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--chink);
}

/* Randul unui lead: personajul intr-o placa neagra, in stanga; restul in coloana a doua.
   `row-gap: 0` — spatiile dintre linii sunt margini proprii ale copiilor (style.css). */
.lead.pt-lead {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: var(--p4); row-gap: 0;
  align-items: start; padding: var(--p3) var(--p4);
}
.pt-lead > * { grid-column: 2; min-width: 0; }
.pt-lead > button { justify-self: start; }
.pt-lead > .pt-lead-av { grid-column: 1; grid-row: 1 / span 12; }
.pt-lead-av {
  position: relative; width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--disp); border: 1px solid var(--disprule); border-radius: var(--r0);
  box-shadow: inset 0 -3px 0 var(--ye);
}
.pt-lead-av .wr-av { width: 44px; height: 44px; }
/* Emailul de notificare n-a plecat: muchie rosie + patrat in colt (mai spune si textul de
   pe rand, „Emailul n-a plecat" — culoarea nu e singurul semn). */
.pt-lead-av--nelivrat { box-shadow: inset 0 -3px 0 var(--rdd); border-color: var(--rdd); }
.pt-lead-av--nelivrat::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
  background: var(--rdd); border: 2px solid var(--ch0);
}
@media (max-width: 560px) {
  .lead.pt-lead { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--p3); padding: var(--p3); }
  .pt-lead-av { width: 48px; height: 48px; }
  .pt-lead-av .wr-av { width: 36px; height: 36px; }
}

/* ═══════ ABONAMENT ═══════ */

/* Panoul de aici e „aparat cu fisa in el": placuta neagra sus (pictograma + titlu + serie),
   iar dedesubt ramane fisa crem cu continutul care exista deja (`#abonament` e cerneala pe
   crem, cu butoane si fise proprii). Nu se intoarce nimic pe negru: n-ar mai avea contrast
   textul scris pentru crem. */
.pt-abo {
  padding: 0; background: none; box-shadow: none; border: 1px solid var(--muchie);
  border-radius: var(--r); overflow: hidden; margin-bottom: var(--p4);
}
.pt-abo > .wr-panou-cap {
  margin: 0; padding: var(--p3) var(--p4); border-bottom: 1px solid var(--disprule);
  background: linear-gradient(180deg, var(--disp), var(--disp2));
  box-shadow: inset 0 2px 0 var(--yed);
}
.pt-abo > #abonament { padding: var(--p4); background: var(--ch); }
@media (max-width: 560px) { .pt-abo > #abonament { padding: var(--p3); } }

/* Tabloul contoarelor (display negru, deja): pictograma apare doar in Abonament, contoarele
   primesc bare pe blocuri. In Comanda (unde `.cont` traieste si el) pictograma si barele
   stau ascunse — acolo tabloul ramane cum era. */
.pt-cont-ic, .pt-cont-bara { display: none; }
#contoare .cont-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2); }
#contoare .pt-cont-ic { display: block; flex: none; margin-right: var(--p1); }
#contoare .pt-cont-bara { display: block; margin-top: var(--p2); height: 8px; }
#contoare .pt-cont-bara i { background: repeating-linear-gradient(90deg, var(--cyd) 0 8px, transparent 8px 10px); }
#contoare .pt-cont-bara {
  background: repeating-linear-gradient(90deg, var(--disprule) 0 8px, transparent 8px 10px);
}
#contoare .cont { box-shadow: var(--mat-adancit), inset 0 2px 0 var(--cyd); border-radius: var(--r); }

/* ═══════ TELEFON: ajustari fine ═══════ */
@media (max-width: 700px) {
  /* Numele treptei („Aplicația+") e un cuvant, nu o cifra: pe doua coloane s-ar rupe la
     mijloc, deci placa lui ia tot randul. */
  #acasa-metrici .em-cel.pt-kpi-lat { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Bare orizontale: eticheta pe randul ei (intreaga), bara + cifra dedesubt — pe ~230px
     un titlu de pachet sau de postare nu incape langa bara fara sa fie taiat. */
  .pt-bare .wr-hr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 5px 0; }
  .pt-bare .wr-hr-et { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
}