/* =====================================================================
   panouri.css — CSS-ul panourilor dashboard-ului de clinică.
   SURSA UNICĂ: importat de projects/dental-site (Layout.astro, LayoutDemo.astro),
   projects/systemic-ai-site (Layout.astro) și, când există, de dashboard-ul real.
   Secțiunea „panoul de lucru" de la sfârșit a fost extrasă din blocul <style> al
   lui demo.astro pe 10 sept 2026 (E1 din plan): acolo au rămas DOAR regulile
   paginii de marketing (.demo-*). Un test în scripts/check-demo.mjs pică dacă
   demo.astro capătă din nou un selector care nu începe cu .demo-. Nu se copiază în
   global.css al niciunui site (lessons.md: „două lucruri care trebuie să
   rămână egale se leagă în cod, import, nu copie"). Depinde de variabilele
   --bg-2 --line --line-2 --fg --fg-2 --fg-3 --fg-4 --accent --accent-deep
   --mono --ease și de .btn/.mono din global.css al site-ului gazdă.
   Extras din global.css pe 9 sept 2026, identic în ambele site-uri.
   ===================================================================== */

/* device = ramă de sticlă cu „ecranul" produsului */
.device {
  position: relative; border-radius: 26px; padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.screen { position: relative; overflow: hidden; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; grid-template-columns: 220px 1fr; min-height: 420px; }
.screen__cover { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 80% at 30% 20%, rgba(91,156,255,.30), transparent 60%), radial-gradient(60% 70% at 80% 90%, rgba(31,79,168,.35), transparent 60%); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1.05); } to { transform: translate3d(3%, 3%, 0) scale(1.12); } }
.screen__side { position: relative; z-index: 1; border-right: 1px solid var(--line); padding: 1.1rem; display: grid; align-content: start; gap: .5rem; background: rgba(6,7,10,.55); }
.screen__side .mono { margin-bottom: .4rem; }
.screen__item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; font-size: .86rem; color: var(--fg-2); }
.screen__item i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-4); }
.screen__item.is-on { background: rgba(255,255,255,.07); color: var(--fg); }
.screen__item.is-on i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.screen__main { position: relative; z-index: 1; padding: 1.1rem 1.2rem; display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; }
.chat__head { display: flex; align-items: center; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.chat__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-deep), var(--accent)); display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; }
.chat__who { font-weight: 500; font-size: .95rem; line-height: 1.2; }
.chat__who small { display: block; color: var(--fg-3); font-size: .78rem; font-weight: 400; margin-top: .15rem; }
.chat__demo { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line); padding: .25rem .5rem; border-radius: 999px; }
.chat__log { display: grid; gap: .6rem; align-content: start; }
.msg { max-width: 82%; padding: .7rem .9rem; border-radius: 16px; font-size: .92rem; line-height: 1.45; position: relative; }
.msg time { display: block; font-size: .7rem; color: var(--fg-3); margin-top: .3rem; font-family: var(--mono); }
.msg--in { justify-self: start; background: rgba(255,255,255,.07); border-bottom-left-radius: 6px; }
.msg--out { justify-self: end; background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: #fff; border-bottom-right-radius: 6px; }
.msg--out time { color: rgba(255,255,255,.7); }
.chat__foot { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .9rem; color: var(--fg-3); font-size: .85rem; }
.chat__foot b { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .9rem; }
@media (max-width: 760px) {
  .screen { grid-template-columns: 1fr; min-height: 0; }
  .device { padding: 8px; border-radius: 20px; }
  .msg { max-width: 90%; }
}


.tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); }
.tag--on { border-color: rgba(91,156,255,.5); color: var(--accent); background: rgba(91,156,255,.1); }

/* =====================================================================
   Tab-urile: radio + label, doar CSS, zero JS. Cinci id-uri pe landing
   (conv · prog · crm · react · raport) și șase în /demo/, reorganizate pe
   10 sept 2026 după modelul Kura (agenda · mesaje · crm · auto · raport ·
   setari); `crm` e comun. Produsul real e al patrulea consumator al listei.
   ===================================================================== */
.screen__radio { position: absolute; }
.screen__item { cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.screen__item:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.screen__radio:focus-visible ~ .screen__side label { outline: none; }
.panel { display: none; grid-template-rows: auto 1fr auto; gap: .9rem; min-height: 100%; animation: panel-in .18s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#d-conv:checked ~ .screen__main .panel--conv, #d-prog:checked ~ .screen__main .panel--prog, #d-crm:checked ~ .screen__main .panel--crm, #d-react:checked ~ .screen__main .panel--react, #d-raport:checked ~ .screen__main .panel--raport, #d-agenda:checked ~ .screen__main .panel--agenda, #d-mesaje:checked ~ .screen__main .panel--mesaje, #d-setari:checked ~ .screen__main .panel--setari, #d-auto:checked ~ .screen__main .panel--auto { display: grid; }
#d-conv:checked ~ .screen__side label[for="d-conv"], #d-prog:checked ~ .screen__side label[for="d-prog"], #d-crm:checked ~ .screen__side label[for="d-crm"], #d-react:checked ~ .screen__side label[for="d-react"], #d-raport:checked ~ .screen__side label[for="d-raport"], #d-agenda:checked ~ .screen__side label[for="d-agenda"], #d-mesaje:checked ~ .screen__side label[for="d-mesaje"], #d-setari:checked ~ .screen__side label[for="d-setari"], #d-auto:checked ~ .screen__side label[for="d-auto"] { background: rgba(255,255,255,.07); color: var(--fg); }
#d-conv:checked ~ .screen__side label[for="d-conv"] i, #d-prog:checked ~ .screen__side label[for="d-prog"] i, #d-crm:checked ~ .screen__side label[for="d-crm"] i, #d-react:checked ~ .screen__side label[for="d-react"] i, #d-raport:checked ~ .screen__side label[for="d-raport"] i, #d-agenda:checked ~ .screen__side label[for="d-agenda"] i, #d-mesaje:checked ~ .screen__side label[for="d-mesaje"] i, #d-setari:checked ~ .screen__side label[for="d-setari"] i, #d-auto:checked ~ .screen__side label[for="d-auto"] i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.screen__radio:focus-visible ~ .screen__side { box-shadow: inset 0 0 0 2px var(--accent); }
.panel__head { display: flex; align-items: center; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.panel__head b { display: block; font-weight: 500; font-size: .95rem; line-height: 1.2; }
.panel__head small { display: block; color: var(--fg-3); font-size: .78rem; margin-top: .15rem; }
.panel__head .chat__demo { margin-left: auto; }
.panel__p { color: var(--fg-2); font-size: .9rem; margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.rows li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.rows li:last-child { border-bottom: 0; }
.rows time { font-family: var(--mono); font-size: .8rem; color: var(--fg-2); flex: none; width: 3.2rem; }
.rows li > div { flex: 1; min-width: 0; }
.rows b { display: block; font-weight: 500; }
.rows small { display: block; color: var(--fg-3); font-size: .78rem; }
.rows .tag { flex: none; max-width: 46%; white-space: normal; text-align: right; line-height: 1.3; }
.btn--xs { padding: .4rem .75rem; font-size: .78rem; flex: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; background: rgba(255,255,255,.04); }
.fisa { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; font-size: .9rem; align-content: start; }
.fisa dt { color: var(--fg-3); }
.fisa dd { margin: 0; }
.note { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .82rem; }
.note b { width: 100%; font-weight: 500; color: var(--fg-2); font-size: .78rem; }
.note span { padding: .3rem .65rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--fg-2); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; align-content: start; }
.kpis div { padding: .9rem 1rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.kpis b { display: block; font-size: 1.8rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.kpis small { display: block; color: var(--fg-3); font-size: .78rem; margin-top: .35rem; }
@media (max-width: 760px) {
  /* meniul lateral devine rând orizontal, scrollabil — nu se ascunde */
  .screen__side { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line); padding: .7rem .8rem; gap: .3rem; align-items: center; }
  .screen__side::-webkit-scrollbar { display: none; }
  .screen__side .mono { display: none; }
  .screen__item { flex: none; white-space: nowrap; padding: .45rem .7rem; font-size: .82rem; }
  .rows .tag { max-width: 40%; font-size: .62rem; }
  .kpis b { font-size: 1.5rem; }
}


/* ---------- doar în /demo/: ecrane „în curând", transcript la clic, listă pe zile ---------- */
.tag--soon { border-style: dashed; color: var(--fg-3); }
.screen__item .tag--soon { margin-left: auto; font-size: .58rem; padding: .15rem .4rem; }
.panel--soon .panel__body { display: grid; align-content: start; gap: .8rem; color: var(--fg-2); font-size: .92rem; line-height: 1.5; }
.panel--soon .panel__body p { margin: 0; }
.panel--soon .soon__ce { color: var(--fg-3); font-size: .82rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.conv { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.conv > li { border-bottom: 1px solid var(--line); }
.conv > li:last-child { border-bottom: 0; }
.conv summary { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; cursor: pointer; font-size: .9rem; list-style: none; }
.conv summary::-webkit-details-marker { display: none; }
.conv summary > time { font-family: var(--mono); font-size: .8rem; color: var(--fg-2); flex: none; width: 5.6rem; }
.conv summary > div { flex: 1; min-width: 0; }
.conv summary b { display: block; font-weight: 500; font-family: var(--mono); font-size: .85rem; }
.conv summary small { display: block; color: var(--fg-3); font-size: .78rem; }
.conv summary .tag { flex: none; max-width: 40%; white-space: normal; text-align: right; line-height: 1.3; }
.conv .chat__log { padding: .2rem 0 .9rem; }
.conv details[open] summary { color: var(--fg); }
.zi { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: .9rem 0 .3rem; }
.rows li:first-child .zi { padding-top: 0; }
@media (max-width: 760px) {
  /* pe mobil: ora și starea pe primul rând, telefonul și rezumatul pe al doilea, nimic nu se rupe pe litere */
  .conv summary { flex-wrap: wrap; gap: .3rem .6rem; }
  .conv summary > time { width: auto; font-size: .72rem; white-space: nowrap; }
  .conv summary .tag { order: 1; margin-left: auto; max-width: 60%; font-size: .62rem; }
  .conv summary > div { order: 2; flex-basis: 100%; }
  .conv summary b { white-space: nowrap; }
}


/* =====================================================================
   Panoul de lucru — ecranele Agendă · Mesaje · CRM · Automatizări · Raport ·
   Setări, ferestrele și stările programării. Folosit de /demo/ și de produs.
   Extras din demo.astro pe 10 sept 2026; nu se copiază înapoi.
   ===================================================================== */
.rows__zi { padding: 0 !important; border-bottom: 0 !important; }

/* butoane de aplicație (Kura: „Nueva cita" plin, restul contur) */
.btn-app { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--fg-2); font-size: .7rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn-app:hover { color: var(--fg); border-color: rgba(91,156,255,.45); }
.btn-app--pri { background: var(--accent); border-color: var(--accent); color: #06121f; }
.btn-app--mic { padding: .22rem .55rem; font-size: .64rem; }
.btn-app--ok { color: #7ee2a8; border-color: rgba(74,222,128,.4); }
.btn-app--ok:hover { border-color: rgba(74,222,128,.65); color: #a8ecc4; }
.btn-app--pri.btn-app--ok { background: rgba(74,222,128,.9); border-color: rgba(74,222,128,.9); color: #06210f; }
.kpis--raport { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.kpi--afara b { color: var(--accent); }
.kpi--afara small { color: var(--fg-2); }
.btn-app--rau { color: #ff8f8f; border-color: rgba(255,143,143,.35); }
.btn-app--rau:hover { border-color: rgba(255,143,143,.6); color: #ffb3b3; }

/* câmpul de căutare din Mesaje și din CRM */
.cauta { padding: 0 0 .6rem; }
.cauta input { width: 100%; font: inherit; font-size: .74rem; color: var(--fg-2); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .7rem; }
.cauta input::placeholder { color: var(--fg-3); }

/* intervalul programării */
.interval { display: inline-flex; flex-direction: column; line-height: 1.15; }
.interval i { font-style: normal; color: var(--fg-3); font-size: .9em; }

/* răspunsul scris din panou */
.scrie { display: flex; gap: .4rem; align-items: center; padding: .2rem 0 .3rem; }
.scrie input { flex: 1; font: inherit; font-size: .74rem; color: var(--fg-3); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .7rem; }
.scrie__p { margin: 0 0 .6rem; font-size: .68rem; line-height: 1.5; color: var(--fg-3); }

/* antetul fișei, cu acțiuni */
.fisa2__cap { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .2rem .1rem; flex-wrap: wrap; }
.fisa2__cap b { font-size: .84rem; font-weight: 500; margin-right: .4rem; }
.fisa2__act { display: flex; gap: .4rem; }
.set__n--mod { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }

/* bara de vizualizare a agendei */
.app-bar { display: flex; align-items: center; gap: .8rem; padding: .1rem 0 .7rem; flex-wrap: wrap; }
.ag-nav { display: inline-flex; gap: .3rem; }
.ag-nav .btn-app { padding: .22rem .5rem; }
.seg__v { padding: .25rem .6rem; font-size: .66rem; color: var(--fg-3); cursor: pointer; }
.seg__v:hover { color: var(--fg-2); }
#v-lista:checked ~ .screen__main .seg__v--lista,
#v-zi:checked ~ .screen__main .seg__v--zi { background: rgba(91,156,255,.16); color: var(--accent); }

/* cele două vederi ale agendei (Săptămâna și Luna: tăiate 10 sept 2026) */
.ag { display: none; }
#v-lista:checked ~ .screen__main .ag--lista,
#v-zi:checked ~ .screen__main .ag--zi { display: block; }
.per { display: none; }
.per.per--on { display: block; }
.per__t { margin: 0 0 .5rem; font-size: .78rem; font-weight: 500; text-transform: capitalize; }
.per__gol { margin: .5rem 0 0; font-size: .72rem; color: var(--fg-3); }

/* grila pe ore (vederea Zi) */
.grila { display: grid; grid-template-columns: 3.2rem 1fr; align-items: stretch; }
.grila__o { font-family: var(--mono); font-size: .62rem; color: var(--fg-3); padding: .35rem .4rem 0 0; text-align: right; }
.grila__c { border-top: 1px solid var(--line); min-height: 1.7rem; padding: .2rem 0 .2rem .4rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.ev { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 100%; padding: .2rem .5rem; border-radius: 8px; background: rgba(91,156,255,.16); border: 1px solid rgba(91,156,255,.35); color: var(--fg); font-size: .7rem; cursor: pointer; overflow: hidden; }
.ev b { font-family: var(--mono); font-size: .64rem; color: var(--accent); font-weight: 500; }
.ev small { color: var(--fg-3); font-size: .64rem; }
.ev--mic { font-size: .62rem; padding: .12rem .35rem; white-space: nowrap; }
.ev:hover { border-color: rgba(91,156,255,.6); }

/* min-width:0 pe lanțul de grid-uri: fără el, un panou lat crește și e tăiat de
   .screen (overflow:hidden) în loc să se strângă. Rămâne și după tăierea
   vederilor late — apără vederea Zi pe telefon. */
.screen__main, .panel, .ag, .per { min-width: 0; }
.app-bar__t { font-size: .74rem; color: var(--fg-3); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg b, .seg i { padding: .25rem .6rem; font-size: .66rem; font-style: normal; font-weight: 500; color: var(--fg-3); }
.seg b { background: rgba(91,156,255,.16); color: var(--accent); }
.rows--agenda li:not(.rows__zi) { display: flex; align-items: center; gap: .6rem; }
.rows--agenda .btn-app { margin-left: .2rem; }

/* file de filtrare, cu contor (Kura: Atención · Pendiente · Escalado IA · Todas) */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 0 .7rem; }
.tabs__t { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; color: var(--fg-3); cursor: pointer; }
.tabs__t b { font-size: .64rem; padding: 0 .35rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--fg-2); }
.tabs__t:hover { color: var(--fg-2); }
#f-toate:checked ~ .screen__main .tabs__t--toate,
#f-om:checked ~ .screen__main .tabs__t--om,
#f-prog:checked ~ .screen__main .tabs__t--prog,
#f-rez:checked ~ .screen__main .tabs__t--rez,
#p-toti:checked ~ .screen__main .tabs__t--toti,
#p-azi:checked ~ .screen__main .tabs__t--azi,
#p-react:checked ~ .screen__main .tabs__t--react { background: rgba(91,156,255,.16); border-color: rgba(91,156,255,.45); color: var(--accent); }
#f-om:checked ~ .screen__main .conv--msg > li:not(.f--om),
#f-prog:checked ~ .screen__main .conv--msg > li:not(.f--prog),
#f-rez:checked ~ .screen__main .conv--msg > li:not(.f--rez),
#p-azi:checked ~ .screen__main .dir > li:not(.dir__cap):not(.p--azi),
#p-react:checked ~ .screen__main .dir > li:not(.dir__cap):not(.p--react) { display: none; }

/* director de pacienți, în coloane ca la Kura */
.dir { list-style: none; margin: 0; padding: 0; }
.dir > li { border-bottom: 1px solid var(--line); }
.dir > li:last-child { border-bottom: 0; }
.dir__cap, .dir summary { display: grid; grid-template-columns: 1.6rem 1.7fr .95fr 1.5fr .45fr 1.15fr; gap: .6rem; align-items: center; padding: .5rem .2rem; }
.dir__cap { grid-template-columns: 1.6rem 1.7fr .95fr 1.5fr .45fr 1.15fr; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.dir__cap span:first-child { grid-column: 1 / 3; }
.dir summary { cursor: pointer; list-style: none; }
.dir summary::-webkit-details-marker { display: none; }
.dir summary:hover { background: rgba(255,255,255,.02); }
.av { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: rgba(91,156,255,.16); color: var(--accent); font-size: .58rem; font-weight: 600; }
.dir__n b { display: block; font-size: .78rem; font-weight: 500; }
.dir__n small { color: var(--fg-3); font-size: .64rem; }
.dir__c { font-size: .7rem; color: var(--fg-2); }

/* fișa deschisă */
.fisa2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; padding: .2rem .2rem 1rem; }
.fisa2__b { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; }
.fisa2 .cap, .set h4 { margin: 0 0 .5rem; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: .4rem; }
.fisa2__r { display: flex; justify-content: space-between; gap: .8rem; margin: 0 0 .35rem; font-size: .72rem; }
.fisa2__r b { font-weight: 500; color: var(--fg-3); }
.fisa2__r span { color: var(--fg-2); text-align: right; }
.fisa2__nota { margin: 0 0 .4rem; font-size: .72rem; line-height: 1.5; color: var(--fg-2); }
.fisa2 .btn-app { margin-top: .3rem; }
.drawer__act { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 0 .6rem; }

/* secțiunile „în curând", în ecranul de care aparțin */
.soon-in { border: 1px dashed var(--line); border-radius: 12px; padding: .7rem .8rem; margin-top: .8rem; }
.soon-in b { font-size: .74rem; font-weight: 500; margin-right: .4rem; }
.soon-in p { margin: .3rem 0 .7rem; font-size: .72rem; line-height: 1.5; color: var(--fg-3); }
.soon-in p:last-child { margin-bottom: 0; }

/* setări */
.set__n { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .55rem; }
.set__n b { display: block; font-size: .74rem; font-weight: 500; }
.set__n small { font-size: .66rem; color: var(--fg-3); line-height: 1.4; }
.sw { width: 1.9rem; height: 1.05rem; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid var(--line); position: relative; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: .8rem; height: .8rem; border-radius: 999px; background: var(--fg-3); }
.sw--on { background: rgba(91,156,255,.3); border-color: rgba(91,156,255,.5); }
.sw--on::after { left: auto; right: 1px; background: var(--accent); }

/* stările programării: verde confirmat · albastru efectuat · roșu anulat */
.st--ok { border-color: rgba(74,222,128,.5); color: #7ee2a8; background: rgba(74,222,128,.10); }
.st--facut { border-color: rgba(91,156,255,.5); color: var(--accent); background: rgba(91,156,255,.10); }
.st--anulat { border-color: rgba(255,120,120,.5); color: #ff9c9c; background: rgba(255,120,120,.10); }
.st--absent { border-color: rgba(255,120,120,.28); color: rgba(255,156,156,.75); background: rgba(255,120,120,.06); }
.st--astept { border-color: var(--line-2); color: var(--fg-3); background: rgba(255,255,255,.03); }
/* chip-ul din calendar preia culoarea stării; ora rămâne text, nu bulină */
.ev.st--ok { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.4); }
.ev.st--facut { background: rgba(91,156,255,.14); border-color: rgba(91,156,255,.4); }
.ev.st--anulat { background: rgba(255,120,120,.12); border-color: rgba(255,120,120,.4); }
.ev.st--absent { background: rgba(255,120,120,.07); border-color: rgba(255,120,120,.25); }
.ev.st--astept { background: rgba(255,255,255,.05); border-color: var(--line-2); }
.ev.st--ok b { color: #7ee2a8; }
.ev.st--facut b { color: var(--accent); }
.ev.st--anulat b, .ev.st--absent b { color: #ff9c9c; }
.ev.st--astept b { color: var(--fg-3); }
.ev.st--anulat, .ev.st--absent { text-decoration: line-through; text-decoration-color: rgba(255,156,156,.55); }
.leg.st--ok i { background: #7ee2a8; }
.leg.st--facut i { background: var(--accent); }
.leg.st--anulat i { background: #ff9c9c; }
.leg.st--absent i { background: rgba(255,156,156,.7); }
.leg.st--astept i { background: var(--fg-3); }
.leg { border: 0 !important; background: none !important; }
.legenda { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 0 .6rem; }
.leg { display: inline-flex; align-items: center; gap: .35rem; font-size: .64rem; color: var(--fg-3); }
.leg i { width: .5rem; height: .5rem; border-radius: 2px; display: inline-block; }

/* istoricul din fișă */
.fisa2__b--lat { grid-column: 1 / -1; }
.ist { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; }
.ist li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .6rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.ist li:last-child { border-bottom: 0; }
.ist time { font-size: .7rem; color: var(--fg-2); display: flex; flex-direction: column; }
.ist time i { font-style: normal; font-family: var(--mono); font-size: .62rem; color: var(--fg-3); }
.ist__s { font-size: .72rem; color: var(--fg-2); }
.ist__s small { display: block; font-size: .64rem; color: var(--fg-3); }

/* ecranul Automatizări */
.auto__cap { margin: 0 0 .2rem; font-size: .7rem; line-height: 1.5; color: var(--fg-3); border: 1px dashed var(--line); border-radius: 10px; padding: .5rem .7rem; }
.auto { display: grid; align-content: start; }
.auto__r { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.auto__r:last-child { border-bottom: 0; }
.auto__r--off { opacity: .55; }
.auto__t b { display: block; font-size: .8rem; font-weight: 500; }
.auto__t small { display: block; font-size: .7rem; line-height: 1.5; color: var(--fg-3); margin: .2rem 0 .35rem; }
.auto__m { display: flex; flex-wrap: wrap; gap: .3rem; }
.auto__m .tag { font-size: .58rem; padding: .15rem .4rem; }

/* fereastra de programare */
.modal { display: none; position: absolute; inset: 0; z-index: 30; }
#m-noua:checked ~ .screen__main .modal:not(.modal--edit):not(.modal--sterge):not(.modal--confirm),
#m-edit:checked ~ .screen__main .modal--edit,
#m-sterge:checked ~ .screen__main .modal--sterge,
#m-confirm:checked ~ .screen__main .modal--confirm { display: block; }
.modal__fund { position: absolute; inset: 0; background: rgba(4,8,14,.6); backdrop-filter: blur(2px); cursor: pointer; }
/* sus, nu la mijloc: ecranul demo e înalt, iar o fereastră centrată pe el ar
   cădea sub marginea de jos a browserului. */
.modal__box { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); width: min(92%, 26rem); max-height: 90%; overflow: auto; background: var(--bg-2, #0d141d); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.modal__cap { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.modal__cap b { font-size: .84rem; }
.modal__x { cursor: pointer; color: var(--fg-3); font-size: .8rem; }
.modal__c { padding: .9rem 1rem; display: grid; gap: .55rem; }
.modal__2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.modal__3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.modal__box--mic { width: min(92%, 22rem); }
.modal__c label { display: grid; gap: .25rem; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.modal__c input, .modal__c textarea { width: 100%; font: inherit; font-size: .74rem; text-transform: none; letter-spacing: 0; color: var(--fg-2); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem; resize: none; }
.modal__p { margin: .2rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--fg-3); }
.modal__f { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem .9rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  /* pe telefon, ora rămâne pe un rând și serviciul trece dedesubt */
  .ev { flex-wrap: wrap; }
  .ev b { white-space: nowrap; flex: 0 0 auto; }
  .ev small { flex-basis: 100%; }
  .grila { grid-template-columns: 2.6rem 1fr; }
  .fisa2 { grid-template-columns: 1fr; }
  .dir__cap { display: none; }
  /* pe telefon rămân avatarul, numele și numărul de programări; telefonul,
     coloana WhatsApp și ultima vizită se citesc din fișa deschisă. */
  .dir summary { grid-template-columns: 1.6rem 1fr auto; }
  .dir summary .dir__c:nth-child(3),
  .dir summary .dir__c:nth-child(4),
  .dir summary .dir__c:nth-child(6) { display: none; }
  /* pe telefon rândul din agendă se rupe controlat: ora + numele pe primul
     rând, starea și butoanele pe al doilea. Fără asta, numele se strivea pe
     două-trei rânduri ca să încapă tag-ul și butoanele lângă el. */
  .rows--agenda li:not(.rows__zi) { flex-wrap: wrap; align-items: center; }
  .rows--agenda li:not(.rows__zi) > time { flex: 0 0 auto; order: 0; }
  .rows--agenda li:not(.rows__zi) > div { flex: 1 1 auto; min-width: 0; order: 1; }
  .rows--agenda li:not(.rows__zi)::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .rows--agenda li:not(.rows__zi) .tag { order: 3; margin-top: .1rem; }
  .rows--agenda li:not(.rows__zi) .btn-app { order: 4; margin: .1rem 0 0 .2rem; }
  .ist li { grid-template-columns: 1fr auto; }
  .ist time { flex-direction: row; gap: .35rem; }
}