/* Portal ESCOLA — mobil întâi. Stil portat din prototipul aprobat (_brain/escola-ui-src/estilo.css): aceleași culori, tipografie, butoane și carduri. Regulile măsurabile (UI-TELAS.md, bin/portal-ui-check.mjs): body >=17px, orice buton/input/select >=48px, fără overflow orizontal la 375px, majuscule doar prin CSS. */ /* ============================================================================================ Copiat integral din _brain/escola-ui-src/estilo.css (protótipo aprovado, 22.09) — não editar as regras abaixo desta cópia; ver docs/PARITATE-PROTOTIP.md. */ :root{ --bg:#f8f7f1; --sup:#ffffff; --sup2:#f5f4ec; --sup3:#ebe9dd; --tx:#0d1e22; --tx2:#4d6469; --ln:#e7e4d8; --ln2:#d4d0bf; --ac:#0b7466; --ac2:#1a5fae; --acTx:#ffffff; --acSup:#e3f2ef; --ok:#0c6b3a; --okSup:#e4f4ea; --at:#8a5300; --atSup:#fcf0db; --er:#a4211c; --erSup:#fdeceb; --notaBg:#fff8e3; --notaLn:#e7d7a4; --notaTx:#493a10; --g1:#0b7466; --g2:#1a5fae; --g3:#6a3fb5; --grad:linear-gradient(135deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%); --heroA:#05272f; --heroB:#0a3a61; --heroC:#281a58; --heroTx:#f3fbfb; --heroTx2:#b7d3dd; --claro1:#5ce6c8; --claro2:#8bbcff; --sh1:0 1px 2px rgba(10,30,40,.05), 0 3px 10px rgba(10,30,40,.06); --sh2:0 2px 6px rgba(10,30,40,.06), 0 16px 40px rgba(10,30,40,.12); --sh3:0 3px 10px rgba(10,30,40,.08), 0 28px 64px rgba(10,30,40,.18); --r:20px; --r2:16px; --lado:274px; /* densitate — valorile de baza (telefon/tableta: tinte de atingere >=44px) */ --fs:17px; --fsSub:18px; --fsSt:16px; --h1:34px; --h2:23px; --h3:19px; --btnH:52px; --btnPy:13px; --btnPx:22px; --btnF:18px; --navH:48px; --navPy:10px; --navPx:18px; --navF:17px; --sideH:50px; --sideF:17px; --bigH:100px; --bigP:20px; --bigF:19px; --campoH:52px; --campoPy:13px; --ico:20px; --icoG:26px; --appPy:26px; --appPx:28px; --tbPy:12px; --elevH:98px; --elevMin:252px; --anelG:236px; --rosto:46px; } /* ---------- densitate pe desktop: o interogare media + variabile ---------- */ @media (min-width:900px){ :root{ --fs:15px; --fsSub:16px; --fsSt:13.5px; --h1:27px; --h2:19px; --h3:16px; --btnH:40px; --btnPy:8px; --btnPx:16px; --btnF:15px; --navH:36px; --navPy:6px; --navPx:14px; --navF:14px; --sideH:40px; --sideF:15px; --bigH:72px; --bigP:14px; --bigF:16px; --campoH:44px; --campoPy:10px; --ico:18px; --icoG:22px; --appPy:18px; --appPx:24px; --tbPy:8px; --elevH:64px; --elevMin:206px; --anelG:180px; --rosto:36px; --lado:240px; } } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#080e11; --sup:#151f24; --sup2:#1b272d; --sup3:#233238; --tx:#e9f3f1; --tx2:#a5babf; --ln:#2a3a40; --ln2:#3b4d54; --ac:#4fd0bc; --ac2:#7ab4ff; --acTx:#04211d; --acSup:#0f322d; --ok:#6fdd9c; --okSup:#0e2c1d; --at:#f2c37c; --atSup:#332613; --er:#ff9d95; --erSup:#3a1a18; --notaBg:#242012; --notaLn:#4b4224; --notaTx:#f0e3bd; --g1:#2bb9a3; --g2:#4a8ef0; --g3:#a274ff; --sh1:0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.3); --sh2:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.42); --sh3:0 3px 10px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ --bg:#080e11; --sup:#151f24; --sup2:#1b272d; --sup3:#233238; --tx:#e9f3f1; --tx2:#a5babf; --ln:#2a3a40; --ln2:#3b4d54; --ac:#4fd0bc; --ac2:#7ab4ff; --acTx:#04211d; --acSup:#0f322d; --ok:#6fdd9c; --okSup:#0e2c1d; --at:#f2c37c; --atSup:#332613; --er:#ff9d95; --erSup:#3a1a18; --notaBg:#242012; --notaLn:#4b4224; --notaTx:#f0e3bd; --g1:#2bb9a3; --g2:#4a8ef0; --g3:#a274ff; --sh1:0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.3); --sh2:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.42); --sh3:0 3px 10px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.55); } *{box-sizing:border-box} [hidden]{display:none !important} html,body{margin:0;padding:0;max-width:100%} html{scroll-behavior:auto} body{ background: radial-gradient(900px 520px at 12% -14%, rgba(11,116,102,.11), rgba(0,0,0,0) 62%), radial-gradient(820px 480px at 94% -8%, rgba(26,95,174,.11), rgba(0,0,0,0) 60%), var(--bg); background-attachment:fixed; color:var(--tx); font:var(--fs)/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; overflow-wrap:break-word;-webkit-text-size-adjust:100%; } h1{font-size:var(--h1);line-height:1.14;margin:2px 0 6px;letter-spacing:-.02em;font-weight:800} h2{font-size:var(--h2);margin:var(--h2mt,30px) 0 12px;letter-spacing:-.015em;font-weight:700} h3{font-size:var(--h3);margin:0 0 6px;font-weight:700} p{margin:8px 0} b,strong{font-weight:700} .sub{color:var(--tx2);margin:0 0 16px;font-size:var(--fsSub)} .esconde{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} :focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:12px} h1[tabindex]:focus,h1[tabindex]:focus-visible{outline:none} button{font:inherit;color:inherit;cursor:pointer;font-family:inherit} .nums{font-variant-numeric:tabular-nums} svg.ic{width:var(--ico);height:var(--ico);flex:0 0 auto;display:inline-block;vertical-align:-.17em; stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* ---------- cadrul de aplicație ---------- */ .shell{display:grid;grid-template-columns:var(--lado) minmax(0,1fr);min-height:100vh} .side{ position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px; padding:18px 14px;border-right:1px solid var(--ln);z-index:30; background:linear-gradient(185deg, color-mix(in srgb, var(--g1) 7%, var(--sup)) 0%, var(--sup) 300px); } .marca{display:flex;gap:12px;align-items:center;padding:6px 8px 16px} .marca .sig{width:42px;height:42px;border-radius:13px;background:var(--sigBg,var(--grad));flex:0 0 auto; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px; box-shadow:0 6px 16px rgba(30,61,43,.22)} .marca .nm{min-width:0;line-height:1.16} .marca .nm b{display:block;font-size:17px;letter-spacing:-.015em} .marca .nm span{display:block;color:var(--tx2);font-size:14px} .quem{display:flex;gap:11px;align-items:center;padding:12px;margin:0 0 14px;border-radius:var(--r2); background:var(--sup2);border:1px solid var(--ln)} .quem .nm{min-width:0;line-height:1.24} .quem .nm b{display:block;font-size:16px} .quem .rosto svg.ic{width:20px;height:20px} .quem .nm span{display:block;color:var(--tx2);font-size:14px} .side-lista{display:flex;flex-direction:column;gap:4px;overflow:auto;flex:1 1 auto;margin:0 -4px;padding:0 4px} .side-t{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2); font-weight:700;margin:6px 8px 6px} .side-it{display:flex;gap:11px;align-items:center;width:100%;text-align:left;min-height:var(--sideH); padding:7px 12px;border:1px solid rgba(0,0,0,0);background:none;border-radius:12px;font-size:var(--sideF); transition:background .14s ease, transform .14s ease, color .14s} .side-it .ic{font-size:var(--ico);line-height:1;width:var(--ico);height:var(--ico);text-align:center;flex:0 0 auto} .side-it:hover{background:var(--sup2);border-color:var(--ln)} .side-it[aria-current="page"]{background:var(--ac);color:var(--acTx);font-weight:700;border-color:rgba(0,0,0,0); box-shadow:none} .side-pe{border-top:1px solid var(--ln);padding-top:8px;margin-top:8px;display:flex;flex-direction:column;gap:4px} .topbar{position:sticky;top:0;z-index:25;display:flex;gap:12px;align-items:center;flex-wrap:wrap; padding:var(--tbPy) var(--appPx);background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)} .topbar .cresce{flex:1 1 auto;min-width:0;max-width:520px} .topbar .dir{display:flex;gap:8px;margin-left:auto;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0} /* după regula de bază, altfel aceasta o anulează și iconițele ies peste căutare */ @media (min-width:900px){.topbar{flex-wrap:nowrap}.topbar .dir{flex:0 0 auto;flex-wrap:nowrap}.topbar .usuario{flex:0 0 auto}} .icobtn{min-height:var(--navH);min-width:var(--navH);padding:var(--navPy) var(--navPx);border-radius:999px; border:1px solid var(--ln);display:inline-flex;gap:7px;align-items:center;justify-content:center; background:var(--sup);font-size:var(--navF);box-shadow:var(--sh1);white-space:nowrap;transition:border-color .14s, background .14s} .icobtn:hover{border-color:var(--ac);background:var(--acSup)} .app{max-width:1340px;margin:0 auto;padding:var(--appPy) var(--appPx) 110px} .main{min-width:0;display:block} .topbar .tit{min-width:0;font-size:var(--fs);font-weight:700;letter-spacing:-.01em;white-space:nowrap;max-width:280px} body.com-busca-propria .topbar .cresce{display:none} body.sem-shell .side{display:none} body.sem-shell .topbar{background:none;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none} body.sem-shell .topbar .tit,body.sem-shell .topbar .cresce{display:none} body.sem-shell .shell{grid-template-columns:minmax(0,1fr)} section[data-tela]{display:none} section[data-tela].on{display:block} section[data-tela].on{animation:entra .28s cubic-bezier(.22,.7,.3,1) both} @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .esc{animation:sobe .46s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 55ms)} /* ---------- topo intern (Voltar / context / Início) ---------- */ .topo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px} .ctx{flex:1 1 180px;min-width:0;font-size:15px;line-height:1.25;color:var(--tx2)} .ctx b{display:inline;font-weight:700;color:var(--tx)} .ctx span{display:inline} .ctx b::after{content:" · "} .nav{min-height:var(--navH);min-width:var(--navH);padding:var(--navPy) var(--navPx);border:1px solid var(--ln); background:var(--sup);display:inline-flex;gap:7px;align-items:center;justify-content:center; border-radius:999px;font-size:var(--navF);box-shadow:var(--sh1);transition:border-color .14s, background .14s, transform .14s} .nav:hover{border-color:var(--ac);background:var(--acSup);transform:translateY(-2px)} .pe{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 8px;padding-top:18px;border-top:1px solid var(--ln)} /* ---------- cărămizi ---------- */ .grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));margin:16px 0} .big{display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;min-height:var(--bigH);padding:var(--bigP); border:1px solid var(--ln);border-radius:var(--r);background:var(--sup);box-shadow:var(--sh1); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;position:relative;overflow:hidden} .big::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad); opacity:0;transition:opacity .18s} .big:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--ln2)} .big:hover::after{opacity:1} .big .ic{font-size:var(--icoG);width:var(--icoG);height:var(--icoG);line-height:1.05;flex:0 0 auto;color:var(--ac)} .big b{display:block;font-size:var(--bigF);letter-spacing:-.01em} .big i{display:block;font-style:normal;color:var(--tx2);margin-top:3px} .cartao{background:var(--sup);border:1px solid var(--ln);border-radius:var(--r);padding:18px;margin:14px 0; box-shadow:var(--sh1)} .cartao.calmo{background:var(--sup2);box-shadow:none} .linha{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap; width:100%;text-align:left;background:var(--sup);border:1px solid var(--ln);border-radius:var(--r2); padding:15px 20px;margin:10px 0;min-height:64px;box-shadow:var(--sh1);transition:border-color .14s, background .14s, transform .14s} button.linha:hover{border-color:var(--ac);background:var(--acSup);transform:translateX(3px)} .st{display:inline-flex;gap:6px;align-items:center;border-radius:999px;padding:4px 11px;font-weight:600;font-size:var(--fsSt);white-space:nowrap} p.st,div.st{white-space:normal;max-width:100%;border-radius:14px;font-size:calc(var(--fsSt) + 1px)} .st-ok{background:var(--okSup);color:var(--ok)} .st-at{background:var(--atSup);color:var(--at)} .st-er{background:var(--erSup);color:var(--er)} .st-fa{background:var(--sup3);color:var(--tx2)} .st-ac{background:var(--acSup);color:var(--ac)} .btn{min-height:var(--btnH);padding:var(--btnPy) var(--btnPx);border-radius:12px;border:1px solid var(--ln); background:var(--sup);display:inline-flex;gap:7px;align-items:center;justify-content:center; font-size:var(--btnF);box-shadow:var(--sh1);transition:transform .14s, box-shadow .14s, border-color .14s} .btn:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--sh2)} .pri{background:var(--grad);color:#fff;border-color:rgba(0,0,0,0);font-weight:700;box-shadow:var(--sh2)} .pri:hover{filter:saturate(1.08) brightness(1.04)} .pri:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.6);transform:none} .acoes{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 6px} .acoes .btn{flex:1 1 180px} .tecla{display:inline-block;border:1px solid var(--ln2);border-bottom-width:2px;border-radius:7px; padding:1px 7px;font-size:14px;color:var(--tx2);background:var(--sup2);margin-left:6px;font-weight:600} .passo{margin:16px 0 18px;max-width:560px} .passo-txt{font-weight:700} .bara{height:12px;border-radius:999px;background:var(--sup3);overflow:hidden;margin-top:7px;border:1px solid var(--ln)} .bara i{display:block;height:100%;background:var(--grad);transition:width .4s cubic-bezier(.2,.7,.3,1)} label{display:block;font-weight:600;margin:16px 0 5px} input,select,textarea{width:100%;min-height:var(--campoH);font:inherit;padding:var(--campoPy) 14px;border:1px solid var(--ln); border-radius:13px;background:var(--sup);color:var(--tx);transition:border-color .14s, box-shadow .14s} input:hover,select:hover,textarea:hover{border-color:var(--ln2)} input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 4px var(--acSup);outline:none} textarea{min-height:104px} .dica{color:var(--tx2)} .dica.fim{margin:14px 0 0} .cifras{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0} .cifra{background:var(--sup);border:1px solid var(--ln);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh1)} .cifra b{display:block;font-size:40px;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .cifra span{color:var(--tx2)} .aviso{border-left:5px solid var(--ac);background:var(--acSup);border-radius:var(--r2);padding:14px 16px;margin:14px 0} .aviso.at{border-color:var(--at);background:var(--atSup)} .aviso.er{border-color:var(--er);background:var(--erSup)} ul.lista{list-style:none;padding:0;margin:8px 0} ul.lista li{padding:11px 0;border-bottom:1px solid var(--ln)} ul.lista li:last-child{border-bottom:0} .nota{display:block;background:var(--notaBg);border:1px dashed var(--notaLn);color:var(--notaTx); border-radius:var(--r2);padding:14px 16px;margin:26px 0 6px;font-size:17px} .nota b{display:block;margin-bottom:4px} .nota span{display:block;margin-top:4px} .nota .tag{display:inline-block;border:1px solid var(--notaLn);border-radius:999px;padding:2px 10px;font-weight:600} body.sem-notas .nota{display:none} .flutua{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .flutua button{min-height:48px;padding:11px 18px;border-radius:999px;border:1px solid var(--ln); background:var(--sup);box-shadow:var(--sh2);font-size:17px} .salvo{color:var(--ok);font-weight:600} .rosto{width:var(--rosto);height:var(--rosto);border-radius:999px;background:var(--acSup);color:var(--ac); display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto} .rosto.g{width:62px;height:62px;font-size:22px} .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0} .tabs button{min-height:var(--navH);padding:var(--navPy) var(--navPx);border-radius:999px;border:1px solid var(--ln);background:var(--sup);font-size:var(--navF)} .tabs button:hover{border-color:var(--ac)} .tabs button[aria-selected="true"]{background:var(--ac);color:var(--acTx);border-color:rgba(0,0,0,0);font-weight:700} .mapa-g{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .mapa-g button{min-height:var(--navH);text-align:left;padding:12px 16px;border:1px solid var(--ln); border-radius:12px;background:var(--sup);box-shadow:var(--sh1)} .mapa-g button:hover{border-color:var(--ac);background:var(--acSup)} /* ---------- două coloane (wizard, ficha) ---------- */ .duas{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start} .duas.ficha{grid-template-columns:330px minmax(0,1fr)} .duas>.col-a{min-width:0} .lado{min-width:0;position:sticky;top:96px;background:var(--sup);border:1px solid var(--ln); border-radius:var(--r);padding:18px;box-shadow:var(--sh1)} .lado h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)} .lado ul{list-style:none;padding:0;margin:8px 0 0} .lado li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--ln);font-size:17px} .lado li:last-child{border-bottom:0} .lado li .mk{flex:0 0 auto;width:22px;text-align:center} .lado li.feito{color:var(--ok)} .lado li.agora{font-weight:700;position:static;top:auto;bottom:auto;width:auto;background:none;border-radius:0;z-index:auto;box-shadow:none} .lado li.depois{color:var(--tx2)} @media (max-width:1080px){.duas,.duas.ficha{grid-template-columns:minmax(0,1fr)}.lado{position:static}} /* ================= HERO — banda de deschidere ================= */ .hero{ position:relative;isolation:isolate;overflow:hidden;border-radius:30px; padding:46px 50px 60px;color:var(--heroTx); background:linear-gradient(118deg, var(--heroA) 0%, var(--heroB) 48%, var(--heroC) 100%); box-shadow:0 26px 64px rgba(6,26,40,.34), inset 0 1px 0 rgba(255,255,255,.10); display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:center; } .hero .aurora{position:absolute;inset:-34%;z-index:-2;pointer-events:none; background: radial-gradient(34% 44% at 20% 34%, rgba(64,226,196,.40), rgba(0,0,0,0) 62%), radial-gradient(32% 42% at 66% 16%, rgba(78,152,255,.36), rgba(0,0,0,0) 62%), radial-gradient(38% 48% at 52% 96%, rgba(150,96,255,.34), rgba(0,0,0,0) 64%); filter:blur(26px);animation:deriva 32s ease-in-out infinite alternate} @keyframes deriva{ 0%{transform:translate3d(-3%,-2%,0) scale(1)} 50%{transform:translate3d(3%,2%,0) scale(1.08)} 100%{transform:translate3d(-1%,2%,0) scale(1.03)}} .hero .pontos{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55; background-image:radial-gradient(rgba(255,255,255,.22) 1.1px, rgba(0,0,0,0) 1.2px); background-size:26px 26px; -webkit-mask-image:radial-gradient(74% 96% at 84% 6%, #000 0%, rgba(0,0,0,0) 72%); mask-image:radial-gradient(74% 96% at 84% 6%, #000 0%, rgba(0,0,0,0) 72%)} .hero-txt{min-width:0} .hero-ctx{margin:0 0 14px;font-size:15.5px;color:rgba(243,251,251,.72);letter-spacing:.01em} .hero-ctx b{color:#fff;font-weight:700} .hero-ctx b::after{content:" · "} .hero-ctx span{color:rgba(243,251,251,.68)} .hero h1{font-size:clamp(34px, 4.1vw, 60px);line-height:1.02;letter-spacing:-.035em;font-weight:800; margin:0 0 16px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)} .hero .frase{font-size:21px;line-height:1.5;color:rgba(243,251,251,.80);margin:0 0 22px;max-width:680px} .hero .frase b{color:#8ef2d6;font-weight:700;letter-spacing:-.005em; text-shadow:0 0 22px rgba(92,230,200,.35)} .hero-pe{margin:0} .selo-v{display:inline-flex;gap:8px;align-items:center;padding:9px 17px;border-radius:999px;font-size:16px; font-weight:600;color:#eaf6f8;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hero-anel{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:center} .hero-anel::before{content:"";position:absolute;width:290px;height:290px;top:-28px;left:50%; transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle, rgba(92,230,200,.24) 0%, rgba(0,0,0,0) 66%)} .hero-anel .anel-g{width:248px;height:248px} .hero-anel .anel-g .trilho{stroke:rgba(255,255,255,.14)} .hero-anel .anel-g .arco{stroke:url(#gradClaro);filter:drop-shadow(0 0 14px rgba(92,230,200,.55))} .hero-anel .anel-g .meio b{font-size:60px;color:#fff;letter-spacing:-.045em} .hero-anel .anel-g .meio span{color:rgba(243,251,251,.78);font-size:16px} .hero-leg{margin:0;font-size:16.5px;font-weight:600;color:#bdf0de;text-align:center; background:rgba(92,230,200,.13);border:1px solid rgba(92,230,200,.26);border-radius:999px;padding:8px 16px} .hero-prox{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px; padding:24px;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.28)} .hero-prox .ic{font-size:var(--icoG);width:var(--icoG);height:var(--icoG);line-height:1} .hero-prox b{font-size:21px;line-height:1.24;color:#fff;letter-spacing:-.015em} .hero-prox .det{font-size:16px;color:rgba(243,251,251,.76);line-height:1.35} .hero-prox .btn-enorme{width:100%;margin-top:10px} .hero + .painel,.hero + .tablou,.hero + .fileira,.hero + h2{margin-top:24px} .busca-flutua{position:relative;z-index:8;margin:-28px 40px 26px} .busca-flutua .busca-cx.grande input{min-height:47px;font-size:15px;padding:11px 20px 11px 52px;border-radius:14px;border-color:rgba(0,0,0,0); background:var(--sup);box-shadow:0 10px 22px rgba(8,30,44,.14), 0 1px 4px rgba(8,30,44,.08)} .busca-flutua .busca-cx.grande input:focus{border-color:var(--ac);box-shadow:0 10px 22px rgba(8,30,44,.14), 0 0 0 4px var(--acSup)} .busca-flutua .busca-cx.grande .lupa{left:18px;font-size:17px} /* fileira de cifre cu inele */ .fileira{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 22px} .fileira.tres{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1120px){.fileira,.fileira.tres{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.fileira,.fileira.tres{grid-template-columns:minmax(0,1fr)}} .fcard{display:flex;gap:14px;align-items:center;text-align:left;width:100%;min-height:var(--bigH); padding:18px 20px;border:1px solid var(--ln);border-radius:var(--r);background:var(--sup);box-shadow:var(--sh1); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s} button.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--ln2)} .fcard .mini{position:relative;width:70px;height:70px;flex:0 0 auto} .fcard .fnum{flex:0 0 auto;min-width:70px;text-align:center;font-size:42px;font-weight:800;line-height:1; letter-spacing:-.035em;font-variant-numeric:tabular-nums} .fcard .ftx{min-width:0} .fcard .ftx b{display:block;font-size:17.5px;color:var(--tx);line-height:1.25;letter-spacing:-.01em} .fcard .ftx i{display:block;font-style:normal;font-size:15.5px;color:var(--tx2);margin-top:3px;line-height:1.3} /* ---------- panouri ---------- */ .saudacao{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 6px} .saudacao h1{font-size:40px} .selo{display:inline-flex;gap:8px;align-items:center;padding:7px 15px;border-radius:999px; background:var(--sup);border:1px solid var(--ln);box-shadow:var(--sh1);font-size:16px;color:var(--tx2);font-weight:600} .frase{font-size:20px;color:var(--tx2);margin:0 0 20px;max-width:1000px} .frase b{color:var(--tx)} .tablou{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 360px;align-items:start;margin:0 0 6px} .tablou .painel{display:flex;flex-direction:column} .tablou [data-wow="linha-do-dia"] .dia-cx{flex:1 1 auto;display:flex;flex-direction:column} .tablou [data-wow="linha-do-dia"] .dia-faixa{flex:0 0 auto;min-height:176px} .grade.dois{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){.grade.dois{grid-template-columns:minmax(0,1fr)}} .tablou>*{min-width:0} .tablou-col{display:flex;flex-direction:column;min-width:0} .tablou-col>*{min-width:0} .tablou.iguais{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))} @media (max-width:1120px){.tablou{grid-template-columns:minmax(0,1fr)}} .painel{background:var(--sup);border:1px solid var(--ln);border-radius:var(--r);padding:22px;box-shadow:var(--sh2);position:relative;overflow:hidden} .painel.larga{margin:0 0 22px} .painel>h2{margin:0 0 16px;font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2);font-weight:700} .painel.brilho::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.04;pointer-events:none} .anel-g{position:relative;width:var(--anelG);height:var(--anelG);max-width:100%} .anel-g svg{width:100%;height:100%;display:block;transform:rotate(-90deg)} .anel-g .trilho{fill:none;stroke:var(--sup3);stroke-width:15} .anel-g .arco{fill:none;stroke:var(--ac);stroke:url(#gradAnel);stroke-width:15;stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.25,1)} .anel-g .meio{position:absolute;inset:0;padding:0 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .anel-g .meio b{font-size:52px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .anel-g .meio span{color:var(--tx2);font-size:16px;margin-top:6px;line-height:1.2} .mini svg{width:100%;height:100%;transform:rotate(-90deg);display:block} .mini .t{fill:none;stroke:var(--sup3);stroke-width:6} .mini .a{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.25,1)} .mini em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-style:normal;font-weight:800;font-size:19px;color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .c-ok{color:var(--ok)} .c-at{color:var(--at)} .c-er{color:var(--er)} .c-ac{color:var(--ac)} /* linia zilei */ .dia-cx{position:relative;padding-top:30px} .dia-regua{display:flex;justify-content:space-between;color:var(--tx2);font-size:14px;margin-bottom:8px;font-variant-numeric:tabular-nums} .dia-faixa{position:relative;display:flex;gap:8px;align-items:stretch;min-height:120px} .dia-bl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px; padding:14px 15px;border:1px solid var(--ln);border-radius:16px;text-align:left;background:var(--sup2); font-size:15px;line-height:1.28;transition:transform .16s, box-shadow .16s, border-color .16s;position:relative} .dia-bl b{font-size:17px;display:block;white-space:normal;letter-spacing:-.01em} .dia-bl>span{color:var(--tx2);font-size:15px;display:block;white-space:normal} .dia-bl .mk{font-weight:700;font-size:15px} button.dia-bl:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--ln2)} .dia-bl.feito{background:var(--okSup);border-color:color-mix(in srgb, var(--ok) 26%, transparent)} .dia-bl.feito b,.dia-bl.feito .mk{color:var(--ok)} .dia-bl.falta{background:var(--atSup);border-color:color-mix(in srgb, var(--at) 30%, transparent)} .dia-bl.falta b,.dia-bl.falta .mk{color:var(--at)} .dia-bl.vem{background:var(--sup2)} .dia-bl.vem .mk{color:var(--tx2)} .dia-bl.pausa{flex:0 0 96px;background:var(--sup3);border-style:dashed;color:var(--tx2);align-items:center; justify-content:center;text-align:center;padding:10px 6px} .dia-bl.pausa b{font-size:15px;color:var(--tx2);font-weight:600} .dia-bl.atual{box-shadow:0 0 0 2px var(--ac), 0 14px 30px rgba(8,30,44,.16);transform:translateY(-3px);z-index:2} .agora:not(li){position:absolute;top:26px;bottom:2px;width:2px;background:linear-gradient(180deg,var(--er),rgba(164,33,28,.10)); border-radius:2px;z-index:5;box-shadow:0 0 14px rgba(220,60,50,.6)} .agora b{position:absolute;top:-25px;left:50%;transform:translateX(-50%);background:var(--er);color:#fff; font-size:13.5px;padding:3px 11px;border-radius:999px;white-space:nowrap;font-weight:700; box-shadow:0 5px 14px rgba(164,33,28,.4)} .agora.fim b{left:auto;right:0;transform:none} .agora.ini b{left:0;transform:none} .proxima{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:16px;border-radius:var(--r2); background:var(--acSup);border:1px solid var(--ln)} .proxima .txt{flex:1 1 220px;min-width:0} .proxima .txt b{display:block;font-size:20px} .proxima .txt span{color:var(--tx2)} .btn-enorme{min-height:62px;padding:16px 28px;font-size:19px;font-weight:700;border-radius:16px; background:linear-gradient(120deg,#12b39c 0%,#3d8ef0 100%);color:#fff;border:0; box-shadow:0 14px 32px rgba(10,80,120,.38);transition:transform .16s, box-shadow .16s, filter .16s} .btn-enorme:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(10,80,120,.5);filter:brightness(1.05)} .precisa .it{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:calc(var(--btnPy) + 2px) var(--btnPx); border:1px solid var(--ln);border-radius:var(--r2);background:var(--sup2);margin-bottom:8px;min-height:calc(var(--btnH) + 8px); transition:transform .14s, border-color .14s, background .14s} .precisa .it:hover{transform:translateX(4px);border-color:var(--ac);background:var(--acSup)} .precisa .it .ic{font-size:var(--ico);width:var(--ico);height:var(--ico);line-height:1.1;flex:0 0 auto;color:var(--ac)} .precisa .it .nm{min-width:0} .precisa .it .nm b{display:block;font-size:17px;line-height:1.28} .precisa .it .nm span{display:block;color:var(--tx2);font-size:16px;line-height:1.3;margin-top:2px} .precisa-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .precisa-g .it{margin:0} @media (max-width:760px){.precisa-g{grid-template-columns:minmax(0,1fr)}} /* căsuța „O que você quer fazer?" */ .busca-cx{position:relative;width:100%} .busca-cx.grande input{min-height:68px;font-size:21px;padding:16px 22px 16px 60px;border-radius:18px;box-shadow:var(--sh2)} .busca-cx input{padding-left:50px;border-radius:999px;font-size:17px} .busca-cx .lupa{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:var(--ico);pointer-events:none;opacity:.7} .busca-cx.grande .lupa{left:24px;font-size:23px} .busca-cx .atalho{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none} .sugestoes{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:var(--sup); border:1px solid var(--ln);border-radius:var(--r);box-shadow:var(--sh3);overflow:hidden;padding:6px} .sugestoes button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;min-height:var(--btnH); padding:8px 13px;border:0;background:none;border-radius:12px;font-size:var(--fs)} .sugestoes button .ic{font-size:var(--ico);width:var(--ico);height:var(--ico);text-align:center;flex:0 0 auto;color:var(--ac)} .sugestoes button .nm{min-width:0} .sugestoes button .nm b{display:block} .sugestoes button .nm span{display:block;color:var(--tx2);font-size:15px} .sugestoes button[aria-selected="true"]{background:var(--acSup);color:var(--ac)} .sugestoes .vazio{padding:12px 14px;color:var(--tx2)} /* ---------- harta rețelei ---------- */ .mapa-cx{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:24px;align-items:start} @media (max-width:1080px){.mapa-cx{grid-template-columns:minmax(0,1fr)}} .mapa-palco{position:relative;min-width:0} .mapa-svg{width:100%;height:auto;display:block;border-radius:22px; background:linear-gradient(142deg,#04222b 0%,#093251 52%,#1d1a4c 100%); box-shadow:inset 0 0 70px rgba(0,0,0,.45), 0 14px 36px rgba(6,26,40,.22)} .mapa-svg .agua{fill:rgba(92,186,255,.17)} .mapa-svg .quarteirao{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.055);stroke-width:1} .mapa-svg .rua{stroke:rgba(255,255,255,.11);stroke-width:1.8;fill:none;stroke-linecap:round} .mapa-svg .avenida{stroke:rgba(255,255,255,.17);stroke-width:5;fill:none;stroke-linecap:round} .mapa-svg .margem{stroke:rgba(140,215,255,.35);stroke-width:1.6;fill:none} .mapa-svg .rio{fill:rgba(160,220,255,.55);font-size:15px;font-weight:600;letter-spacing:.14em} .mapa-svg .rotulo{fill:#f0fbfb;font-size:16.5px;font-weight:700;letter-spacing:-.005em; paint-order:stroke;stroke:rgba(3,18,26,.82);stroke-width:4;stroke-linejoin:round} .mapa-svg .rotulo2{fill:#a9e6d8;font-size:15.5px;font-weight:700; paint-order:stroke;stroke:rgba(3,18,26,.8);stroke-width:3.6;stroke-linejoin:round} .mapa-svg .ponto{cursor:pointer} .mapa-svg .ponto .bola{fill:currentColor;stroke:rgba(255,255,255,.62);stroke-width:1.6; filter:drop-shadow(0 0 9px currentColor)} .mapa-svg .ponto .halo{fill:currentColor;opacity:.30;transform-origin:center;transform-box:fill-box; animation:pulsar 3s ease-out infinite} .mapa-svg .ponto .nucleo{fill:#ffffff;opacity:.55} .mapa-svg .ponto:hover .bola,.mapa-svg .ponto:focus-visible .bola{stroke:#fff;stroke-width:3.4} .mapa-svg .ponto:focus-visible{outline:none} .mapa-svg .c-ok{color:#35dc9b} .mapa-svg .c-at{color:#fbbf3c} .mapa-svg .c-er{color:#ff6f61} @keyframes pulsar{0%{transform:scale(.8);opacity:.42}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}} .mapa-cartao{position:absolute;z-index:14;min-width:250px;max-width:300px;padding:16px 18px;border-radius:18px; background:var(--sup);border:1px solid var(--ln);box-shadow:var(--sh3);pointer-events:none; transform:translate(-50%,-100%);margin-top:-18px} .mapa-cartao b{display:block;font-size:18px;letter-spacing:-.015em;margin-bottom:6px} .mapa-cartao span{display:block;color:var(--tx2);font-size:16px;line-height:1.4} .mapa-cartao .vai{display:block;margin-top:9px;color:var(--ac);font-weight:700;font-size:16px} .mapa-legenda{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0} .mapa-lado{min-width:0} .mapa-lado h3{margin:18px 0 10px} .escola-it{display:flex;gap:13px;align-items:center;width:100%;text-align:left;padding:var(--btnPy) var(--btnPx);min-height:calc(var(--btnH) + 6px); border:1px solid var(--ln);border-radius:var(--r2);background:var(--sup2);margin-bottom:10px; transition:transform .14s, border-color .14s, background .14s} .escola-it:hover{border-color:var(--ac);background:var(--acSup);transform:translateX(4px)} .escola-it .pt{width:15px;height:15px;border-radius:999px;flex:0 0 auto;background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent)} .escola-it .nm{flex:1 1 auto;min-width:0} .escola-it .nm b{display:block;font-size:17px;color:var(--tx)} .escola-it .nm span{display:block;color:var(--tx2);font-size:15.5px} /* cartonașul copilului (responsável) */ .filho{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap} .filho .anel-g{width:176px;height:176px} .filho .anel-g .meio b{font-size:36px} .filho .anel-g .meio span{font-size:13.5px;line-height:1.2;margin-top:4px} .filho .dados{flex:1 1 280px;min-width:0} .filho .dados h3{margin:0 0 4px;font-size:25px;letter-spacing:-.02em;color:var(--tx)} /* ================= ecranul de intrare ================= */ /* aceeasi familie ca interiorul: fundal deschis, fara stralucire radiala. Tema intunecata vine doar din comutator / prefers-color-scheme. */ .entrada{position:relative;display:flex;flex-direction:column;padding:0 0 16px} .entrada .aurora,.entrada .pontos{display:none} .entrada>*{position:relative;z-index:1} .entrada-cab{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .entrada .marca-g{display:flex;gap:13px;align-items:center;flex:1 1 auto;min-width:0} .entrada .marca-g>div{min-width:0} .entrada .marca-g .sig{width:46px;height:46px;border-radius:15px;font-size:19px;background:var(--sigBg,var(--grad)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex:0 0 auto; box-shadow:0 8px 20px rgba(30,61,43,.2)} .entrada h1{font-size:var(--h1);letter-spacing:-.03em;margin:0;color:var(--tx);line-height:1.08;font-weight:800} .entrada .lema{font-size:var(--fsSub);color:var(--ac);margin:2px 0 0;font-weight:600;letter-spacing:-.01em} .entrada .lema2{display:none} .entrada .provas{display:flex;gap:8px;flex-wrap:wrap;margin:0;flex:1 1 auto;justify-content:flex-end} .entrada .provas .selo-v{padding:5px 12px;font-size:var(--fsSt);background:var(--sup);border:1px solid var(--ln); color:var(--tx2);box-shadow:var(--sh1);-webkit-backdrop-filter:none;backdrop-filter:none} .entrada .provas .selo-v svg.ic{color:var(--ac)} .entrada .quem-e{font-size:var(--h2);margin:0 0 2px;color:var(--tx)} .entrada .sub{color:var(--tx2);margin:0 0 12px;font-size:var(--fs)} .retratos{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media (min-width:1000px){.retratos{grid-template-columns:repeat(3,1fr)}} .retrato{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px 17px; min-height:178px;border:1px solid var(--ln);border-radius:var(--r);background:var(--sup);color:var(--tx); box-shadow:var(--sh1);position:relative;overflow:hidden; transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s} .retrato::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ac)} .retrato:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:var(--sh2)} .retrato .cara{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--acSup);color:var(--ac);border:1px solid color-mix(in srgb, var(--ac) 20%, transparent);flex:0 0 auto} .retrato .cara svg.ic{width:21px;height:21px} .retrato b{font-size:17px;letter-spacing:-.015em;color:var(--tx);line-height:1.2} .retrato .papel{color:var(--ac);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase} .retrato i{font-style:normal;color:var(--tx2);font-size:13.5px;line-height:1.4} .retrato .vai{margin-top:auto;color:var(--ac);font-weight:600;font-size:13px} .entrada .rodape{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px} .vidro-cx{flex:1 1 480px;padding:14px 16px;border-radius:var(--r2);background:var(--sup2); border:1px solid var(--ln);-webkit-backdrop-filter:none;backdrop-filter:none} .vidro-cx .rodape-t{margin:0;color:var(--tx2);font-size:var(--fsSt)} .vidro-cx .rodape-t b{color:var(--tx)} .vidro-cx .acoes{margin:10px 0 0} .vidro-cx label{flex:1 1 230px;margin:0;color:var(--tx2);font-size:var(--fsSt);font-weight:600} .vidro-cx input{margin-top:5px;background:var(--sup);border-color:var(--ln);color:var(--tx)} .vidro-cx input:focus{border-color:var(--ac);box-shadow:0 0 0 4px var(--acSup)} /* chamada în grilă */ [data-ch-lista]{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(var(--elevMin),1fr));margin:14px 0} .elev{display:grid;grid-template-columns:46px minmax(0,1fr);gap:7px 11px;align-items:center;width:100%; text-align:left;border:1px solid var(--ln);border-radius:var(--r2);background:var(--sup);padding:12px; min-height:var(--elevH);box-shadow:var(--sh1);transition:transform .12s, border-color .12s, background .12s} .elev:hover{transform:translateY(-2px);border-color:var(--ln2)} .elev .rosto{grid-row:1 / span 2} .elev .nm{min-width:0;font-size:16px;align-self:end} .elev .nm b{font-size:17px;display:block} .elev [data-chip]{grid-column:2;align-self:start;justify-self:start} .elev .st{font-size:15px;padding:5px 10px;white-space:normal} .elev.faltou{background:var(--erSup);border-color:var(--er)} .elev.just{background:var(--atSup);border-color:var(--at)} .barra-fix{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r); background:var(--sup);border:1px solid var(--ln);box-shadow:var(--sh1);margin:14px 0;position:sticky;top:76px;z-index:12} .barra-fix .grande{font-size:22px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .barra-fix .cresce{flex:1 1 auto} /* notas ca foaie de cálculo */ .nt-cab,.nlinha{display:grid;gap:6px 14px;align-items:center; grid-template-columns:46px minmax(0,1fr) 168px 118px; grid-template-areas:"num nome marca nota"} .nt-cab{padding:11px 16px;color:var(--tx2);font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; background:var(--sup2);border:1px solid var(--ln);border-bottom:0;border-radius:var(--r) var(--r) 0 0} [data-nt-lista]{counter-reset:nl;border:1px solid var(--ln);border-radius:0 0 var(--r) var(--r);overflow:hidden; background:var(--sup);box-shadow:var(--sh1);margin:0 0 14px} .nlinha{background:var(--sup);border:0;border-bottom:1px solid var(--ln);border-radius:0;margin:0;padding:8px 16px;min-height:60px} .nlinha:nth-child(4n+1){background:var(--sup2)} .nlinha:hover{background:var(--acSup)} .nlinha::before{grid-area:num;counter-increment:nl;content:counter(nl);color:var(--tx2);font-variant-numeric:tabular-nums;font-size:15px} .nlinha .nm{grid-area:nome;margin:0;font-weight:500} .nlinha .nm b{font-weight:600} .nlinha [data-marca]{grid-area:marca;justify-self:start} .nlinha input{grid-area:nota;width:100%;min-width:0;min-height:46px;text-align:center;font-size:19px;font-weight:600} .nlinha input.ruim{border-color:var(--er);background:var(--erSup);color:var(--er)} .erro-nota{color:var(--er);font-weight:600;margin:0;padding:2px 16px 12px 62px;background:var(--erSup)} @media (max-width:760px){ .nt-cab{display:none} [data-nt-lista]{border-radius:var(--r)} .nt-cab,.nlinha{grid-template-columns:32px minmax(0,1fr) 96px;grid-template-areas:"num nome nota" ". marca marca"} .erro-nota{padding-left:16px} } /* ---------- lățimi ---------- */ @media (max-width:1240px){ .hero{grid-template-columns:minmax(0,1fr) 290px;gap:28px;padding:40px 36px 56px} .hero-anel .anel-g{width:222px;height:222px} .hero-anel .anel-g .meio b{font-size:52px} } @media (max-width:1180px){:root{--lado:236px}.app{padding:22px 20px 110px}.topbar{padding:10px 20px}} @media (max-width:1000px){ .hero{grid-template-columns:minmax(0,1fr);gap:26px;padding:34px 28px 52px;text-align:left} .hero-anel{justify-self:start} .hero-anel::before{display:none} .busca-flutua{margin:-30px 20px 26px} } @media (max-width:860px){ .dia-faixa{flex-direction:column;min-height:0} .dia-bl{min-height:64px;flex:1 1 auto} .dia-bl.pausa{flex:0 0 auto;min-height:48px;align-items:flex-start;text-align:left;justify-content:center} .agora:not(li){position:static;width:auto;height:auto;background:none;box-shadow:none;margin:12px 0 0;display:block} .agora b{position:static;transform:none;display:inline-block} } @media (max-width:900px){ .topbar .tit{display:none} .icobtn{font-size:14.5px;padding:8px 12px} .entrada .provas{justify-content:flex-start} .entrada-cab{gap:12px} .shell{grid-template-columns:minmax(0,1fr)} .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;align-items:center;gap:6px; padding:8px 10px;border-right:0;border-top:1px solid var(--ln);overflow-x:auto;box-shadow:var(--sh3);background:var(--sup)} .side .marca,.side .quem,.side .side-t{display:none} .side-lista{flex-direction:row;overflow-x:auto;overflow-y:hidden;flex:1 1 auto;gap:6px;padding-bottom:2px} .side-it{flex-direction:column;gap:2px;min-width:78px;font-size:13px;text-align:center;padding:6px 8px;min-height:56px;white-space:nowrap} .side-it .ic{width:auto;font-size:21px} .side-it .rot{max-width:74px;overflow:hidden} .side-pe{flex-direction:row;border-top:0;border-left:1px solid var(--ln);padding:0 0 0 6px;margin:0} .app{padding:18px 16px 130px} .topbar{padding:10px 16px} .flutua{bottom:86px} h1{font-size:28px} .saudacao h1{font-size:30px} .anel-g{width:200px;height:200px} .mapa-cartao{min-width:200px;max-width:230px} } @media (max-width:480px){ .app{padding:14px 12px 130px} .topbar{padding:8px 12px} .cartao,.painel{padding:16px} .big{padding:16px} .hero{padding:26px 20px 44px;border-radius:24px} .hero .frase{font-size:18.5px} .hero-anel .anel-g{width:192px;height:192px} .hero-anel .anel-g .meio b{font-size:46px} .hero-prox{padding:18px} .busca-flutua{margin:-26px 8px 22px} .busca-flutua .busca-cx.grande input{min-height:64px;font-size:17px;padding-left:52px} .anel-g{width:178px;height:178px} .anel-g .meio b{font-size:42px} .fcard{padding:14px} .entrada .marca-g{gap:12px} .entrada .marca-g .sig{width:54px;height:54px;font-size:21px;border-radius:17px} } /* ---------- densitate pe desktop: regulile care nu se exprima prin variabile ---------- */ @media (min-width:900px){ :root{--h2mt:22px} h2{margin:22px 0 9px} .app{padding-bottom:76px} .grade{gap:12px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:12px 0} .grade.dois{grid-template-columns:repeat(2,minmax(0,1fr))} .painel{padding:16px} .painel>h2{margin:0 0 10px;font-size:13px} .painel.larga{margin:0 0 14px} .cartao{padding:14px;margin:10px 0} .acoes{gap:10px;margin:16px 0 4px} .pe{margin:26px 0 6px;padding-top:14px} .cifras{gap:12px;margin:12px 0} .cifra{padding:12px 14px} .cifra b{font-size:30px} .rosto.g{width:50px;height:50px;font-size:18px} .btn-enorme{min-height:40px;padding:9px 18px;font-size:15px;border-radius:12px} .aviso{padding:10px 14px;margin:10px 0;border-left-width:4px} .lado{padding:16px;top:78px} .lado li{font-size:14px;padding:7px 0} .tecla{font-size:12px} .marca{padding:4px 6px 12px} .marca .sig{width:34px;height:34px;border-radius:11px;font-size:15px} .marca .nm b{font-size:14.5px} .marca .nm span{font-size:12px} .quem{padding:9px 10px;margin:0 0 10px;gap:9px} .quem .nm b{font-size:13.5px} .quem .nm span{font-size:12px} .side{padding:14px 10px;gap:4px} .side-t{font-size:11px;margin:4px 6px 4px} .side-pe{padding-top:6px;margin-top:6px} /* ---- banda de salut (fost hero) ---- */ .hero{padding:15px 22px;border-radius:20px;gap:22px;grid-template-columns:minmax(0,1fr) auto; align-items:center;box-shadow:0 12px 30px rgba(6,26,40,.22)} .hero .aurora{filter:blur(30px)} .hero-ctx{margin:0 0 3px;font-size:12.5px} .hero h1{font-size:30px;line-height:1.06;margin:0} .hero .frase{font-size:15px;line-height:1.42;margin:5px 0 0;max-width:740px} .hero-pe{margin:7px 0 0} .hero-pe .selo-v{padding:0;background:none;border:0;box-shadow:none;font-size:12.5px; color:rgba(243,251,251,.74);font-weight:600;-webkit-backdrop-filter:none;backdrop-filter:none} .hero-anel{gap:5px} .hero-anel::before{display:none} .hero-anel .anel-g{width:96px;height:96px} .hero-anel .anel-g .trilho,.hero-anel .anel-g .arco{stroke-width:9} .hero-anel .anel-g .meio{padding:0 4px} .hero-anel .anel-g .meio b{font-size:25px;letter-spacing:-.03em} .hero-anel .anel-g .meio span{display:none} .hero-leg{font-size:11.5px} .hero-prox{padding:13px 15px;gap:4px;border-radius:16px;max-width:310px} .hero-prox b{font-size:15px;line-height:1.22} .hero-prox .det{font-size:12.5px;line-height:1.3} .hero-prox .btn-enorme{margin-top:7px} .hero + .painel,.hero + .tablou,.hero + .fileira,.hero + h2{margin-top:14px} .busca-flutua{position:static;margin:12px 0 14px} .busca-cx.grande input{min-height:44px;font-size:15px;padding:10px 18px 10px 44px;border-radius:12px; box-shadow:var(--sh1);border-color:var(--ln)} .busca-cx.grande .lupa{left:16px;font-size:17px} .busca-cx input{padding-left:44px} /* ---- indicatori ---- */ .fileira{gap:12px;margin:0 0 14px} .fcard{padding:12px 14px;gap:12px} .fcard .mini{width:52px;height:52px} .fcard .mini em{font-size:15px} .fcard .mini em[data-sufixo="%"]{font-size:12.5px} .fcard .fnum{min-width:50px;font-size:30px} .fcard .ftx b{font-size:15px} .fcard .ftx i{font-size:13px;margin-top:1px} /* ---- linia zilei ---- */ .tablou{gap:14px;grid-template-columns:minmax(0,1fr) 320px} .dia-cx{padding-top:24px} .dia-faixa{min-height:88px;gap:6px} .tablou [data-wow="linha-do-dia"] .dia-faixa{min-height:104px} .dia-bl{padding:9px 11px;font-size:13px;border-radius:12px;gap:2px} .dia-bl b{font-size:14px} .dia-bl>span,.dia-bl .mk{font-size:12.5px} .dia-bl.pausa{flex:0 0 76px} .dia-bl.pausa b{font-size:12.5px} .dia-regua{font-size:12px;margin-bottom:6px} .agora:not(li){top:20px} .agora b{font-size:11.5px;padding:2px 9px;top:-20px} .proxima{padding:12px;gap:10px;margin-top:12px} .proxima .txt b{font-size:16px} .precisa .it .nm b{font-size:14.5px} .precisa .it .nm span{font-size:13px;margin-top:1px} .precisa-g{gap:10px} /* ---- chamada ---- */ .elev{grid-template-columns:34px minmax(0,1fr);gap:1px 9px;padding:8px 10px;border-radius:12px} .elev .rosto{width:34px;height:34px;font-size:13px} .elev .nm{font-size:13px} .elev .nm b{font-size:14px} .elev .st{font-size:12px;padding:2px 8px} [data-ch-lista]{gap:8px;margin:10px 0} .barra-fix{padding:9px 14px;margin:10px 0;top:60px;gap:12px} .barra-fix .grande{font-size:17px} /* ---- notas ---- */ .nt-cab{padding:8px 14px;font-size:12px} .nlinha{min-height:44px;padding:5px 14px} .nlinha input{min-height:34px;font-size:15px} .nlinha::before{font-size:13px} .erro-nota{padding:2px 14px 9px 58px} /* ---- harta ---- */ .escola-it{padding:9px 13px;min-height:44px;margin-bottom:8px} .escola-it .nm b{font-size:14.5px} .escola-it .nm span{font-size:13px} .mapa-lado h3{margin:12px 0 8px} .mapa-cx{gap:18px} /* ---- ficha copil ---- */ .filho{gap:16px} .filho .anel-g{width:132px;height:132px} .filho .anel-g .meio b{font-size:28px} .filho .dados h3{font-size:19px} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .entrada .aurora,.hero .aurora{animation:none} .mapa-svg .ponto .halo{animation:none;opacity:.26} } /* ================= v5 — cadru calm: bară laterală bej pal (bleumarin doar în tema întunecată) + bară de sus albă ================= Piese reutilizabile pe toate ecranele: .side (bleumarin), .topbar (albă, cu .usuario), .hero (antet simplu, fără gradient), .fcard cu .quad/.rot/.cif/.seta, .tab + .pastila. */ :root{ --nav:#f2f1e8; --navSup:#ffffff; --navTx:#2c4636; --navTx2:#75806c; --navFt:#1e3d2b; --navAt:#e0e8cf; --navLn:rgba(30,61,43,.13); --navHv:rgba(30,61,43,.07); --navRo:rgba(30,61,43,.09); --az:#1a5fae; --azSup:#e7eefb; --r:16px; --r2:13px; /* v5 pas 6 — sigla verde + cartele pastel (doar în tema deschisă). --fpB/--fpL/--fpQ sunt 0%/0%/0% în tema întunecată, deci color-mix întoarce exact culorile de acum: tema întunecată rămâne neatinsă. */ --sigBg:var(--navFt); --fpB:10%; --fpL:28%; --fpQ:100%; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --nav:#0c1729; --navSup:#16243c; --navTx:#e4edf7; --navTx2:#93a8c6; --navFt:#fff; --navHv:rgba(255,255,255,.08); --navRo:rgba(255,255,255,.10); --navAt:#22385d; --navLn:rgba(255,255,255,.09); --az:#7ab4ff; --azSup:#13243c; --sigBg:var(--grad); --fpB:0%; --fpL:0%; --fpQ:0%; } } :root[data-theme="dark"]{ --nav:#0c1729; --navSup:#16243c; --navTx:#e4edf7; --navTx2:#93a8c6; --navFt:#fff; --navHv:rgba(255,255,255,.08); --navRo:rgba(255,255,255,.10); --navAt:#22385d; --navLn:rgba(255,255,255,.09); --az:#7ab4ff; --azSup:#13243c; --sigBg:var(--grad); --fpB:0%; --fpL:0%; --fpQ:0%; } /* ---- bara laterală ---- */ .side{background:var(--nav);border-right:1px solid var(--navLn);color:var(--navTx)} .side .marca .nm b{color:var(--navFt)} .side .marca .nm span{color:var(--navTx2)} .side .quem{background:var(--navSup);border:1px solid var(--navLn);padding:9px 10px;margin:0 0 12px;gap:9px} .side .quem .nm b{color:var(--navFt);font-size:13.5px} .side .quem .nm span{color:var(--navTx2);font-size:12px} .side .quem .rosto{background:var(--navRo);color:var(--navTx);width:32px;height:32px} .side .side-t{color:var(--navTx2)} .side .side-it{color:var(--navTx);border-color:rgba(0,0,0,0)} .side .side-it .ic{color:var(--navTx2)} .side .side-it:hover{background:var(--navHv);border-color:rgba(0,0,0,0);color:var(--navFt)} .side .side-it:hover .ic{color:var(--navFt)} .side .side-it[aria-current="page"]{background:var(--navAt);color:var(--navFt);font-weight:600;box-shadow:none} .side .side-it[aria-current="page"] .ic{color:var(--navFt)} .side .side-pe{border-top:1px solid var(--navLn)} /* desen decorativ în josul barei laterale (ramură cu frunze + o frază scurtă) */ .side-desen{flex:0 0 auto;pointer-events:none;-webkit-user-select:none;user-select:none; margin:14px 8px 4px;color:var(--navTx2)} .side-desen svg{display:block;width:58px;height:78px;margin:0 0 9px -3px;opacity:.42} .side-desen p{margin:0;font-size:12.5px;line-height:1.5;font-style:italic;letter-spacing:.005em; color:var(--navTx2);opacity:.85} @media (max-height:719px){.side-desen{display:none}} @media (max-width:900px){.side-desen{display:none}} /* ---- bara de sus ---- */ .topbar{background:var(--sup);border-bottom:1px solid var(--ln); -webkit-backdrop-filter:none;backdrop-filter:none;gap:12px} .topbar .cresce{flex:1 1 auto;max-width:520px} .topbar .dir{gap:4px;align-items:center;flex-wrap:nowrap} .icobtn.so-ico{position:relative;padding:0;width:var(--navH);min-width:var(--navH); background:none;border-color:rgba(0,0,0,0);box-shadow:none;color:var(--tx2)} .icobtn.so-ico:hover{background:var(--sup2);border-color:var(--ln);color:var(--tx)} .icobtn .ponto-av{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%; background:var(--er);border:2px solid var(--sup)} .usuario{display:flex;gap:9px;align-items:center;padding:2px 4px;margin-left:6px;min-width:0} .usuario .av{width:34px;height:34px;flex:0 0 auto;border-radius:999px;background:var(--acSup);color:var(--ac); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .usuario .nm{min-width:0;line-height:1.2} .usuario .nm b{display:block;font-size:14px;letter-spacing:-.01em;white-space:nowrap} .usuario .nm span{display:block;font-size:12.5px;color:var(--tx2);white-space:nowrap} .painel{box-shadow:var(--sh1)} /* ---- antetul paginii (fostul hero cu gradient) ---- */ .hero{background:none;box-shadow:none;border-radius:0;color:var(--tx);padding:2px 0 0;overflow:visible; grid-template-columns:minmax(0,1fr);gap:20px;align-items:center} /* ponytail: 2ª coluna (auto) só faz sentido quando existe .hero-anel (anel de presença) — sem ela, o .frase (texto livre) disputava a faixa com o h1 e podia espremê-lo a quase zero (resp-inicio, frase mais longa que o fixture de sec-inicio escondia o bug). */ .hero:has(.hero-anel){grid-template-columns:minmax(0,1fr) auto} /* pe telefon inelul trece sub text; altfel coloana auto a inelului lasă textului o literă pe rând (rede-inicio, 04.10) */ @media (max-width:640px){.hero:has(.hero-anel){grid-template-columns:minmax(0,1fr)}.hero-anel{justify-self:center}} .hero .aurora,.hero .pontos{display:none} .hero-ctx{color:var(--tx2);margin:0 0 4px} .hero-ctx b{color:var(--tx)} .hero-ctx span{color:var(--tx2)} .hero h1{font-size:clamp(26px,2.7vw,34px);color:var(--tx);text-shadow:none;letter-spacing:-.03em;margin:0} .hero .frase{color:var(--tx2);font-size:15.5px;margin:6px 0 0} .hero .frase b{color:var(--tx);text-shadow:none;font-weight:700} .hero-pe .selo-v{color:var(--tx2);background:none;border:0;box-shadow:none;padding:0;font-size:12.5px; -webkit-backdrop-filter:none;backdrop-filter:none} .hero-anel::before{display:none} .hero-anel .anel-g .trilho{stroke:var(--sup3)} .hero-anel .anel-g .arco{stroke:url(#gradAnel);filter:none} .hero-anel .anel-g .meio b{color:var(--tx)} .hero-anel .anel-g .meio span{color:var(--tx2)} .hero-leg{color:var(--ac);background:var(--acSup);border:1px solid var(--ln)} .hero-prox{background:var(--sup);border:1px solid var(--ln);box-shadow:var(--sh1);color:var(--tx); -webkit-backdrop-filter:none;backdrop-filter:none} .hero-prox b{color:var(--tx)} .hero-prox .det{color:var(--tx2)} .hero-prox .ic{color:var(--ac)} .hero-ano{display:flex;flex-direction:column;gap:4px;align-items:flex-start} .hero-ano .et{font-size:12.5px;color:var(--tx2)} .hero-ano .val{display:inline-flex;gap:10px;align-items:center;min-height:36px;padding:6px 12px; border:1px solid var(--ln);border-radius:10px;background:var(--sup);font-weight:600;font-size:14.5px;color:var(--tx)} .hero-ano .val i{font-style:normal;color:var(--tx2);font-size:11px} .hero + .painel,.hero + .tablou,.hero + .fileira,.hero + h2,.hero + .busca-flutua{margin-top:14px} /* ---- căutarea, sub antet ---- */ .busca-flutua{position:static;margin:14px 0 16px;max-width:560px} .busca-flutua .busca-cx.grande input{background:var(--sup);border:1px solid var(--ln);border-radius:12px; box-shadow:none} .busca-flutua .busca-cx.grande input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acSup)} /* ---- cartele de indicatori: pătrățel + etichetă + cifră + săgeată ---- */ .fcard{border-radius:14px;box-shadow:none;border:1px solid var(--ln);background:var(--sup); padding:14px 16px;gap:13px;align-items:center} button.fcard:hover{transform:none;box-shadow:var(--sh1);border-color:var(--ln2)} .fcard .quad{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:flex; align-items:center;justify-content:center;background:var(--sup2);color:var(--tx2)} .fcard .quad svg.ic{width:22px;height:22px} .fcard.c-ac .quad{background:var(--acSup);color:var(--ac)} .fcard.c-ok .quad{background:var(--okSup);color:var(--ok)} .fcard.c-at .quad{background:var(--atSup);color:var(--at)} .fcard.c-er .quad{background:var(--erSup);color:var(--er)} .fcard.c-az .quad{background:var(--azSup);color:var(--az)} .fcard .txt{flex:1 1 auto;min-width:0} .fcard .rot{display:block;font-size:14px;color:var(--tx2);line-height:1.2} .fcard .cif{display:block;font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1.12; margin-top:1px;font-variant-numeric:tabular-nums;color:var(--tx)} .fcard.c-ac .cif{color:var(--ac)} .fcard.c-ok .cif{color:var(--ok)} .fcard.c-at .cif{color:var(--at)} .fcard.c-er .cif{color:var(--er)} .fcard.c-az .cif{color:var(--az)} .fcard .seta{flex:0 0 auto;margin-left:auto;padding-left:6px;color:var(--tx2);font-size:21px;line-height:1} /* cartelele cu cifre: fond pastel foarte pal + contur în aceeași nuanță, puțin mai închis. În tema întunecată --fpB/--fpL/--fpQ sunt 0%/0%/0%, deci color-mix întoarce var(--sup)/var(--ln)/culoarea de acum — aspectul întunecat nu se schimbă. */ .fcard.c-ac{background:color-mix(in srgb,var(--ac) var(--fpB),var(--sup)); border-color:color-mix(in srgb,var(--ac) var(--fpL),var(--ln))} .fcard.c-ok{background:color-mix(in srgb,var(--ok) var(--fpB),var(--sup)); border-color:color-mix(in srgb,var(--ok) var(--fpL),var(--ln))} .fcard.c-at{background:color-mix(in srgb,var(--at) var(--fpB),var(--sup)); border-color:color-mix(in srgb,var(--at) var(--fpL),var(--ln))} .fcard.c-az{background:color-mix(in srgb,var(--az) var(--fpB),var(--sup)); border-color:color-mix(in srgb,var(--az) var(--fpL),var(--ln))} .fcard.c-er{background:color-mix(in srgb,var(--er) var(--fpB),var(--sup)); border-color:color-mix(in srgb,var(--er) var(--fpL),var(--ln))} button.fcard.c-ac:hover{border-color:color-mix(in srgb,var(--ac) var(--fpL),var(--ln2))} button.fcard.c-ok:hover{border-color:color-mix(in srgb,var(--ok) var(--fpL),var(--ln2))} button.fcard.c-at:hover{border-color:color-mix(in srgb,var(--at) var(--fpL),var(--ln2))} button.fcard.c-az:hover{border-color:color-mix(in srgb,var(--az) var(--fpL),var(--ln2))} button.fcard.c-er:hover{border-color:color-mix(in srgb,var(--er) var(--fpL),var(--ln2))} /* pătrățelul iconiței rămâne mai deschis decât cartela, ca să se vadă */ .fcard.c-ac .quad{background:color-mix(in srgb,var(--sup) var(--fpQ),var(--acSup))} .fcard.c-ok .quad{background:color-mix(in srgb,var(--sup) var(--fpQ),var(--okSup))} .fcard.c-at .quad{background:color-mix(in srgb,var(--sup) var(--fpQ),var(--atSup))} .fcard.c-az .quad{background:color-mix(in srgb,var(--sup) var(--fpQ),var(--azSup))} .fcard.c-er .quad{background:color-mix(in srgb,var(--sup) var(--fpQ),var(--erSup))} .fcard .anel-g{width:52px;height:52px;flex:0 0 auto} .fcard .anel-g .trilho{stroke:var(--sup3);stroke-width:17} .fcard .anel-g .arco{stroke-width:17} .fcard .anel-g .meio{padding:0} .fcard .anel-g .meio b{font-size:14.5px;letter-spacing:-.02em;color:var(--tx)} /* ---- tabel curat cu pastile de stare ---- */ .painel-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px} .painel-cab h2{margin:0;font-size:17px;text-transform:none;letter-spacing:-.015em;color:var(--tx)} .painel-cab .sub{font-size:13.5px;color:var(--tx2);flex:1 1 200px;min-width:0} .lig{margin-left:auto;background:none;border:0;padding:4px 2px;color:var(--ac);font-weight:600;font-size:14px; white-space:nowrap} .lig:hover{text-decoration:underline} .tab-cx{overflow-x:auto} .tab{width:100%;border-collapse:collapse;font-size:14.5px} .tab th{text-align:left;font-weight:600;color:var(--tx2);font-size:12.5px;letter-spacing:.02em; padding:8px 10px;border-bottom:1px solid var(--ln);white-space:nowrap} .tab td{padding:11px 10px;border-bottom:1px solid var(--ln);color:var(--tx);vertical-align:middle} .tab tr:last-child td{border-bottom:0} .tab td:first-child,.tab th:first-child{padding-left:2px} .tab .sec{color:var(--tx2)} .tab .aco{text-align:right;width:44px} .pastila{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px; font-size:13px;font-weight:600;white-space:nowrap} .pastila::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto} .pastila.ok{background:var(--okSup);color:var(--ok)} .pastila.at{background:var(--atSup);color:var(--at)} .pastila.az{background:var(--azSup);color:var(--az)} .acao-pt{width:34px;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,0);background:none; color:var(--tx2);font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center} .acao-pt:hover{background:var(--sup2);border-color:var(--ln);color:var(--tx)} @media (max-width:900px){ .side{background:var(--nav);border-top:1px solid var(--navLn)} .topbar .usuario .nm{display:none} .usuario{margin-left:2px} .lig,.acao-pt{min-height:44px} .acao-pt{width:44px} .tab th:nth-child(2),.tab td:nth-child(2),.tab th:nth-child(4),.tab td:nth-child(4){display:none} .busca-flutua{max-width:none} } .fcard .cif.ml{font-size:16.5px;font-weight:700;letter-spacing:-.015em} .tablou-col .painel + .painel{margin-top:14px} .painel.tabela{padding:16px 18px} /* ================= v5 — entrar: intrarea arată ca școala ================= Antet cu stemă, fotografia clădirii, trei cartele pastel, pastile mici, desen în linie. Tot ce e aici e legat de ecranul „entrar" (body.tela-entrar / .ent5). */ :root{ --eBg:#f7f2e4; --eTx:#1e3d2b; --eTx2:#5d7060; --eLn:#e2d9c3; --eSup:rgba(255,255,255,.62); --eSup2:#ffffff; --eAur:#c8992c; --eEscudo:#1f4b33; --eProf:#e4ecdb; --eProfTx:#2b5438; --eSec:#f8ecce; --eSecTx:#6d4c15; --eDir:#dde7f5; --eDirTx:#24466e; --eDesen:#b9c7a6; --eSol:#e0b64a; --eFoto:1; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --eBg:#101f1c; --eTx:#e7efe5; --eTx2:#9db19f; --eLn:rgba(255,255,255,.15); --eSup:rgba(255,255,255,.06); --eSup2:rgba(255,255,255,.12); --eAur:#e7c163; --eEscudo:#2f5c41; --eProf:#20382a; --eProfTx:#cce2d1; --eSec:#352a10; --eSecTx:#f0dcab; --eDir:#16273e; --eDirTx:#c6daf5; --eDesen:#46583f; --eSol:#8d7433; --eFoto:.88; } } :root[data-theme="dark"]{ --eBg:#101f1c; --eTx:#e7efe5; --eTx2:#9db19f; --eLn:rgba(255,255,255,.15); --eSup:rgba(255,255,255,.06); --eSup2:rgba(255,255,255,.12); --eAur:#e7c163; --eEscudo:#2f5c41; --eProf:#20382a; --eProfTx:#cce2d1; --eSec:#352a10; --eSecTx:#f0dcab; --eDir:#16273e; --eDirTx:#c6daf5; --eDesen:#46583f; --eSol:#8d7433; --eFoto:.88; } /* ---- cadrul: fără bară de sus în flux, doar butoanele mici în colț ---- */ body.tela-entrar{background:var(--eBg)} body.tela-entrar .shell{position:relative} body.tela-entrar .topbar{position:absolute;top:0;left:0;right:0;width:auto;max-width:1320px; margin:0 auto;justify-content:flex-end;z-index:30; padding:19px var(--appPx) 10px;background:none;border-bottom:0;box-shadow:none} body.tela-entrar .topbar .icobtn[data-sino]{display:none} body.tela-entrar .app{max-width:1320px;padding-top:14px;padding-bottom:28px} /* ---- antetul școlii ---- */ .ent5{padding:0;gap:0;color:var(--eTx)} .ent5 .ent-topo{display:flex;align-items:center;gap:14px;min-height:46px;margin:0 0 12px;padding-right:104px} .ent5 .ent-marca{display:flex;align-items:center;gap:12px;min-width:0} .ent5 .ent-nome{min-width:0} .ent5 .brasao{width:36px;height:42px;flex:0 0 auto} .ent5 .brasao .b-escudo{fill:var(--eEscudo);stroke:var(--eEscudo);stroke-width:1.4;stroke-linejoin:round} .ent5 .brasao .b-sol{fill:none;stroke:var(--eAur);stroke-width:1.7;stroke-linecap:round} .ent5 .brasao .b-livro{fill:none;stroke:#f5ecd6;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round} .ent5 h1{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--eTx)} .ent5 .ent-lema{margin:3px 0 0;font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--eTx2)} .ent5 .ent-ajuda{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:48px; padding:5px 14px;border-radius:999px;border:1px solid var(--eLn);background:var(--eSup); color:var(--eTx);font-size:14px;font-weight:600;flex:0 0 auto} .ent5 .ent-ajuda:hover{background:var(--eSup2);border-color:var(--eTx2)} .ent5 .ent-ajuda svg.ic{width:17px;height:17px;color:var(--eTx2)} /* ---- fotografia clădirii ---- */ .ent5 .ent-foto{height:252px;border-radius:22px;overflow:hidden;background:var(--eLn)} .ent5 .ent-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%; opacity:var(--eFoto)} /* ---- titlul mare ---- */ .ent5 .ent-tit{text-align:center;margin:17px 0 15px} .ent5 .ent-tit h2{margin:0;font-size:35px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--eTx)} .ent5 .ent-tit .sub{margin:5px 0 0;font-size:16px;color:var(--eTx2)} /* ---- trei cartele mari ---- */ .ent5 .ent-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ent5 .ent-cards .retrato{align-items:center;justify-content:center;text-align:center;gap:0; min-height:186px;padding:20px 16px;border:1px solid rgba(31,61,43,.10);border-radius:22px; box-shadow:none;overflow:hidden} .ent5 .ent-cards .retrato::before{display:none} .ent5 .ent-cards .retrato:hover{transform:translateY(-3px);border-color:rgba(31,61,43,.22); box-shadow:0 8px 24px rgba(31,61,43,.14)} .ent5 .ent-cards [data-perfil="prof"]{background:var(--eProf);color:var(--eProfTx)} .ent5 .ent-cards [data-perfil="sec"]{background:var(--eSec);color:var(--eSecTx)} .ent5 .ent-cards [data-perfil="dir"]{background:var(--eDir);color:var(--eDirTx)} .ent5 .r-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto} .ent5 .r-ico svg.ic{width:46px;height:46px;stroke-width:1.4;color:inherit} .ent5 .r-txt{display:flex;flex-direction:column;align-items:center;min-width:0} .ent5 .ent-cards .retrato b{margin-top:13px;font-size:25px;font-weight:800;letter-spacing:-.02em; line-height:1.15;color:inherit} .ent5 .r-nome{margin-top:4px;font-size:14px;color:inherit;opacity:.76} .ent5 .r-seta{margin-top:12px;font-size:21px;line-height:1;color:inherit;opacity:.85} /* ---- pastilele mici ---- */ .ent5 .ent-min{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:15px} .ent5 .ent-min .retrato{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;min-height:36px; padding:6px 15px;border-radius:999px;border:1px solid var(--eLn);background:var(--eSup); color:var(--eTx);box-shadow:none;text-align:left} .ent5 .ent-min .retrato::before{display:none} .ent5 .ent-min .retrato:hover{transform:none;background:var(--eSup2);border-color:var(--eTx2);box-shadow:none} .ent5 .ent-min .retrato svg.ic{width:16px;height:16px;color:var(--eTx2)} .ent5 .ent-min .retrato b{font-size:13.5px;font-weight:700;line-height:1.2;color:inherit} .ent5 .ent-min .retrato span{font-size:13px;color:var(--eTx2)} /* ---- „Já tem senha?" — desfăcut la cerere ---- */ .ent5 .ent-senha{width:100%;max-width:540px;margin:11px auto 0;text-align:center} .ent5 .ent-senha>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer; padding:4px 4px;font-size:13.5px;color:var(--eTx2);border-bottom:1px solid transparent} .ent5 .ent-senha>summary::-webkit-details-marker{display:none} .ent5 .ent-senha>summary:hover,.ent5 .ent-senha[open]>summary{color:var(--eTx);border-bottom-color:currentColor} .ent5 .ent-senha-cx{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;text-align:left} .ent5 .ent-senha-cx label{flex:1 1 220px;margin:0;font-size:12.5px;font-weight:600;color:var(--eTx2)} .ent5 .ent-senha-cx input{margin-top:5px;width:100%;background:var(--eSup2);border:1px solid var(--eLn); color:var(--eTx)} /* ---- desenul de jos + subsolul ---- */ .ent5 .ent-desen{display:block;width:100%;height:132px;margin:8px 0 0;color:var(--eDesen)} .ent5 .ent-desen .d-l{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ent5 .ent-desen .d-sol{fill:none;stroke:var(--eSol);stroke-width:1.6;stroke-linecap:round} .ent5 .ent-rodape{margin:2px 0 0;text-align:center;font-size:12px;color:var(--eTx2)} .ent5 .ent-rodape .ent-sep{margin:0 8px;opacity:.5} .ent5 .ent-rodape .ent-produto{text-transform:uppercase} /* ---- telefon ---- */ @media (max-width:640px){ body.tela-entrar .app{padding-top:10px} body.tela-entrar .topbar{padding:8px var(--appPx) 8px} .ent5 .ent-topo{padding-right:108px;min-height:44px;gap:10px} .ent5 h1{font-size:19px} .ent5 .ent-lema{font-size:9px;letter-spacing:.12em} .ent5 .ent-ajuda{min-height:48px;width:48px;padding:0;justify-content:center;flex:0 0 auto} .ent5 .ent-ajuda span{display:none} .ent5 .ent-ajuda svg.ic{width:19px;height:19px} .ent5 .ent-foto{height:160px;border-radius:16px} .ent5 .ent-tit{margin:14px 0 12px} .ent5 .ent-tit h2{font-size:25px} .ent5 .ent-tit .sub{font-size:15px} .ent5 .ent-cards{grid-template-columns:1fr;gap:10px} .ent5 .ent-cards .retrato{flex-direction:row;justify-content:flex-start;text-align:left; min-height:74px;padding:13px 16px;gap:14px;border-radius:18px} .ent5 .r-ico svg.ic{width:32px;height:32px} .ent5 .r-txt{align-items:flex-start;flex:1 1 auto} .ent5 .ent-cards .retrato b{margin-top:0;font-size:20px} .ent5 .r-seta{margin-top:0;margin-left:auto} .ent5 .ent-min .retrato{min-height:44px;padding:8px 16px} .ent5 .ent-desen{margin-top:14px;height:78px} } /* ---- dir-inicio: subtitlul tabelului pe rând propriu, sub titlu ---- */ [data-tela="dir-inicio"] .painel.tabela .painel-cab{flex-wrap:wrap} [data-tela="dir-inicio"] .painel.tabela .painel-cab h2{flex:0 0 auto;order:1} [data-tela="dir-inicio"] .painel.tabela .painel-cab .lig{order:2} [data-tela="dir-inicio"] .painel.tabela .painel-cab .sub{flex:1 0 100%;order:3;margin-top:-4px} /* Sub 1180px linia zilei ia toată lățimea; „Precisa de você" coboară sub ea (regula de la 900px o strângea în 422px). */ @media (min-width:900px) and (max-width:1180px){.tablou{grid-template-columns:minmax(0,1fr)}} /* ================= v5 pas 9 — paginile de început: secretaria, professor, rede, responsável ================= Reguli scrise cu selector de context (pagina sau containerul-părinte), ca să nu atingă #dir-inicio, #entrar sau celelalte ecrane. Culorile vin din variabile, deci tema întunecată rămâne folosibilă. */ /* --- 1. rândul de trei cifre (sec-inicio, rede-inicio) rămâne 3 coloane și la ~1032px. Până acum regula de la 1120px îl rupea în 2+1, cu o cartelă singură pe rândul doi. (.fileira fără .tres — cele 4 cifre ale direcției — nu e atinsă.) --- */ @media (min-width:861px) and (max-width:1120px){ .fileira.tres{grid-template-columns:repeat(3,minmax(0,1fr))} .fileira.tres .fcard{padding:13px 12px;gap:10px} .fileira.tres .fcard .quad{width:38px;height:38px;border-radius:11px} .fileira.tres .fcard .quad svg.ic{width:19px;height:19px} .fileira.tres .fcard .rot{font-size:13.5px} .fileira.tres .fcard .cif{font-size:24px} .fileira.tres .fcard .seta{display:none} } /* --- 2. inelele mari de prezență: arcul folosea gradientul turcoaz→bleumarin al mărcii, care la 100–250px citea albastru pe fond luminos. Pe paginile astea arcul ia culoarea stării („prezență bună" = verde), definită prin variabilă. --- */ [data-tela="sec-inicio"] .hero-anel .anel-g .arco, [data-tela="rede-inicio"] .hero-anel .anel-g .arco, [data-tela="resp-inicio"] .filho .anel-g .arco{stroke:var(--ok)} [data-tela="resp-inicio"] .filho .anel-g .meio b{color:var(--ok)} /* --- 3. prof-inicio: banda zilei are 7 blocuri cu text lung („11:00 · Planejamento"). Sub ~1200px fiecare bloc ajungea la ~75px utili și cuvintele se rupeau la mijloc („Planejamen / to"). Blocurile primesc o lățime minimă și banda se derulează pe orizontală, ca tabelele (.tab-cx) din restul machetei. --- */ @media (max-width:1200px){ [data-tela="prof-inicio"] .dia-cx{overflow-x:auto;overflow-y:hidden; scrollbar-width:thin;padding-bottom:4px} [data-tela="prof-inicio"] .dia-faixa{min-width:945px} [data-tela="prof-inicio"] .dia-regua{min-width:945px} /* marginea din dreapta se stinge puțin, ca să se vadă că banda continuă (altfel ultimul bloc pare tăiat) */ [data-tela="prof-inicio"] .dia-cx{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.22)); mask-image:linear-gradient(to right,#000 calc(100% - 56px),rgba(0,0,0,.22))} } [data-tela="prof-inicio"] .dia-bl b{overflow-wrap:normal;word-break:normal} /* sub 860px banda e coloană (blocuri unul sub altul): lățimea minimă de derulare orizontală de mai sus ar împinge textul centrat în afara ecranului (demo 29.09, 375px: blocuri goale). */ @media (max-width:860px){ [data-tela="prof-inicio"] .dia-faixa,[data-tela="prof-inicio"] .dia-regua{min-width:0} [data-tela="prof-inicio"] .dia-cx{-webkit-mask-image:none;mask-image:none} } /* --- 4. resp-inicio: cele două cartonașe de copil au aceeași înălțime și aceleași butoane, ca să nu pară două ecrane lipite. --- */ [data-tela="resp-inicio"] .tablou.iguais > .painel{display:flex;flex-direction:column} [data-tela="resp-inicio"] .filho{flex:1 1 auto} [data-tela="resp-inicio"] .filho .acoes{margin-top:auto;padding-top:4px} [data-tela="resp-inicio"] .filho .acoes .btn{min-height:44px} /* ============================================================================================ Regras próprias do portal — classes que não existem no protótipo (antet*, nav-baixo, mat-*, busca-*, foto*, avatar, ch-*, nt-lista, tabela, estados, etc.), SEM redefinir as variáveis --* do :root do protótipo acima. */ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; } body { min-height: 100vh; background: radial-gradient(900px 520px at 12% -14%, rgba(11,116,102,.11), rgba(0,0,0,0) 62%), radial-gradient(820px 480px at 94% -8%, rgba(26,95,174,.11), rgba(0,0,0,0) 60%), var(--bg); background-attachment: fixed; color: var(--tx); font: var(--fs)/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; } #app { max-width: 720px; margin: 0 auto; padding: 16px 16px 40px; } h1 { font-size: var(--h1); line-height: 1.14; margin: 8px 0 8px; letter-spacing: -.02em; font-weight: 800; } h2 { font-size: var(--h2); line-height: 1.2; margin: 24px 0 12px; letter-spacing: -.015em; font-weight: 700; } h3 { font-size: var(--h3); margin: 0 0 6px; font-weight: 700; } p { margin: 8px 0; } .sub { color: var(--tx2); margin: 0 0 16px; font-size: var(--fsSub); } :focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; border-radius: 12px; } svg.ic { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* protótipo: section[data-tela]{display:none} até ganhar .on (estilo.css:151) — o roteador do portal (src/portal/app.js) nunca adiciona .on, então a seção teria de ficar escondida para sempre; portal sobrescreve display para ela aparecer sempre. REGRA UI SUPRASCRISĂ (ver docs/PARITATE-PROTOTIP.md). */ section[data-tela] { display: block; animation: entra .28s ease-out; } @keyframes entra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } } /* ---------- butoane și câmpuri: ținta de atingere >=48px ---------- */ input, button, select, textarea { font: inherit; min-height: 48px; } button, .btn { min-height: var(--btnH); min-width: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 16px; background: var(--grad); color: #fff; font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; box-shadow: var(--sh1); transition: transform .14s, box-shadow .14s, border-color .14s, background .14s; } button:hover, .btn:hover { transform: translateY(-2px); box-shadow: var(--sh2); } button:active { transform: none; opacity: .9; } button:disabled { opacity: .55; cursor: default; transform: none; } button.secundario, .btn.secundario, button.nav { background: var(--sup); color: var(--tx); border-color: var(--ln); font-weight: 600; } button.secundario:hover, button.nav:hover { border-color: var(--ac); } button.nav { min-height: 48px; padding: 10px 18px; border-radius: 999px; font-size: 17px; } button.nav:hover { background: var(--acSup); } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ln2); border-radius: 12px; color: var(--tx); background: var(--sup); } input:focus, select:focus, textarea:focus { border-color: var(--ac); outline: 3px solid var(--acSup); outline-offset: 0; } label { display: block; font-weight: 600; margin: 12px 0 4px; } label:has(> input[type=radio]), label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 4px 0; font-weight: 500; cursor: pointer; } input[type=radio], input[type=checkbox] { width: 24px; height: 24px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--ac); } /* ---------- carduri ---------- */ .cartao, .painel { background: var(--sup); border: 1px solid var(--ln); border-radius: var(--r); padding: 18px; margin: 12px 0; box-shadow: var(--sh1); } .painel > h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.015em; color: var(--tx); } /* ---------- stări: culoare + desen + cuvânt (regula 8) ---------- */ .presente { color: var(--ok); font-weight: 700; } .falta { color: var(--er); font-weight: 700; } .falta-justificada { color: var(--at); font-weight: 700; } .erro { color: var(--er); margin-top: 4px; } .erro:empty { display: none; } /* ---------- antetul comun (desenat de app.js pe orice ecran în afară de entrar) ---------- */ .antet { margin: -16px -16px 16px; } .antet-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--sup); border-bottom: 1px solid var(--ln); } .antet-foto { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; box-shadow: 0 6px 16px rgba(30,61,43,.22); } .antet-escola { flex: 1 1 auto; min-width: 0; line-height: 1.16; } .antet-escola b { display: block; font-size: 17px; letter-spacing: -.015em; } .antet-escola span { display: block; color: var(--tx2); font-size: 14px; } .antet-escola span:empty { display: none; } .antet-eu-wrap { flex: 0 0 auto; } .antet-busca { display: none; } .mat-resumo { display: none; } .antet-ctx { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px 0; } .antet-quem { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 15px; line-height: 1.25; color: var(--tx2); } .antet-quem b { color: var(--tx); } .antet-quem b::after { content: " · "; } .antet-quem span:empty { display: none; } .antet-nav { display: flex; gap: 8px; } /* P1b: o icobtn da barra de cima do cadru (data-tema/data-sino/data-notas-toggle) usa o estilo do protótipo (pílula com borda, .icobtn base + .so-ico, linha ~145/848). Este flat só é do botão de tema PRÓPRIO da tela entrar (.ent5 .ent-topo), que não faz parte do cadru comum. */ .ent5 button.icobtn { width: 48px; min-width: 48px; padding: 0; background: none; border-color: transparent; box-shadow: none; color: var(--tx2); font-size: 20px; font-weight: 400; border-radius: 12px; } .ent5 button.icobtn:hover { background: var(--sup2); border-color: var(--ln); color: var(--tx); transform: none; box-shadow: none; } /* ================= entrar — v5 do protótipo (_brain/escola-ui-src/estilo.css „v5 — entrar") ================= Antet com brasão e nome da escola, foto do prédio, três cartões pastel, pílulas pequenas, desenho em linha. */ body.tela-entrar { background: var(--eBg); } .ent5 { color: var(--eTx); padding-bottom: 8px; } .ent5 .ent-topo { display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0 0 12px; } .ent5 .ent-nome { flex: 1 1 auto; min-width: 0; } .ent5 .ent-topo .icobtn { color: var(--eTx2); } .ent5 .brasao { width: 36px; height: 42px; flex: 0 0 auto; } .ent5 .brasao .b-escudo { fill: var(--eEscudo); stroke: var(--eEscudo); stroke-width: 1.4; stroke-linejoin: round; } .ent5 .brasao .b-sol { fill: none; stroke: var(--eAur); stroke-width: 1.7; stroke-linecap: round; } .ent5 .brasao .b-livro { fill: none; stroke: #f5ecd6; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .ent5 h1 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--eTx); } .ent5 .ent-lema { margin: 3px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--eTx2); } .ent5 .ent-foto { height: 160px; border-radius: 16px; overflow: hidden; background: var(--eLn); } .ent5 .ent-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: var(--eFoto, 1); } .ent5 .ent-tit { text-align: center; margin: 14px 0 12px; } .ent5 .ent-tit h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--eTx); } .ent5 .ent-tit .sub { margin: 5px 0 0; font-size: 15px; color: var(--eTx2); } .ent5 .ent-cards { display: grid; grid-template-columns: 1fr; gap: 10px; } .ent5 .ent-cards .retrato { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 74px; padding: 13px 16px; text-align: left; font-weight: 400; border: 1px solid rgba(31,61,43,.10); border-radius: 18px; box-shadow: none; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .ent5 .ent-cards .retrato:hover, .ent5 .ent-cards .retrato:focus-visible { transform: translateY(-3px); border-color: rgba(31,61,43,.22); box-shadow: 0 8px 24px rgba(31,61,43,.14); } .ent5 .ent-cards [data-perfil="prof"] { background: var(--eProf); color: var(--eProfTx); } .ent5 .ent-cards [data-perfil="sec"] { background: var(--eSec); color: var(--eSecTx); } .ent5 .ent-cards [data-perfil="dir"] { background: var(--eDir); color: var(--eDirTx); } .ent5 .r-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .ent5 .r-ico svg.ic { width: 32px; height: 32px; stroke-width: 1.4; } .ent5 .r-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; } .ent5 .ent-cards .retrato b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .ent5 .ent-cards .r-nome { margin-top: 4px; font-size: 14px; opacity: .76; } .ent5 .r-seta { margin-left: auto; font-size: 21px; line-height: 1; opacity: .85; } .ent5 .ent-min { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; } .ent5 .ent-min .retrato { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--eLn); background: var(--eSup); color: var(--eTx); box-shadow: none; font-weight: 400; text-align: left; } .ent5 .ent-min .retrato:hover { transform: none; background: var(--eSup2); border-color: var(--eTx2); box-shadow: none; } .ent5 .ent-min .retrato svg.ic { width: 16px; height: 16px; color: var(--eTx2); } .ent5 .ent-min .retrato b { font-size: 13.5px; font-weight: 700; line-height: 1.2; } .ent5 .ent-min .retrato .r-nome { font-size: 13px; color: var(--eTx2); } .ent5 .ent-senha { max-width: 540px; margin: 11px auto 0; text-align: center; } .ent5 .ent-senha > summary { display: inline-flex; align-items: center; min-height: 48px; padding: 4px; font-size: 13.5px; list-style: none; cursor: pointer; color: var(--eTx2); border-bottom: 1px solid transparent; } .ent5 .ent-senha > summary::-webkit-details-marker { display: none; } .ent5 .ent-senha > summary:hover, .ent5 .ent-senha[open] > summary { color: var(--eTx); border-bottom-color: currentColor; } .ent5 .ent-como { font-weight: 700; margin: 8px 0 0; } .ent5 .ent-como:empty { display: none; } .ent5 .ent-senha-cx { text-align: left; margin-top: 10px; } .ent5 .ent-senha-cx label { color: var(--eTx2); } .ent5 .ent-senha-cx input { margin-top: 5px; background: var(--eSup2); border-color: var(--eLn); color: var(--eTx); } .ent5 .ent-senha-cx button { width: 100%; margin-top: 16px; } .ent5 .ent-desen { display: block; width: 100%; height: 78px; margin: 14px 0 0; color: var(--eDesen); } .ent5 .ent-desen .d-l { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ent5 .ent-desen .d-sol { fill: none; stroke: var(--eSol); stroke-width: 1.6; stroke-linecap: round; } .ent5 .ent-rodape { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--eTx2); } @media (min-width: 641px) { .ent5 h1 { font-size: 23px; } .ent5 .ent-lema { font-size: 10px; letter-spacing: .16em; } .ent5 .ent-foto { height: 252px; border-radius: 22px; } .ent5 .ent-tit { margin: 17px 0 15px; } .ent5 .ent-tit h2 { font-size: 35px; } .ent5 .ent-tit .sub { font-size: 16px; } .ent5 .ent-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } .ent5 .ent-cards .retrato { flex-direction: column; justify-content: center; text-align: center; gap: 0; min-height: 186px; padding: 20px 16px; border-radius: 22px; } .ent5 .r-ico svg.ic { width: 46px; height: 46px; } .ent5 .r-txt { align-items: center; flex: 0 0 auto; } .ent5 .ent-cards .retrato b { margin-top: 13px; font-size: 25px; } .ent5 .r-seta { margin: 12px 0 0; } .ent5 .ent-desen { height: 132px; margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* responsável */ .hero { color: var(--tx); padding: 2px 0 0; margin: 0 0 14px; } .hero .aurora, .hero .pontos { display: none; } .hero h1 { font-size: clamp(26px, 2.7vw, 34px); color: var(--tx); letter-spacing: -.03em; margin: 0; } .hero .frase { color: var(--tx2); font-size: 17px; margin: 6px 0 0; } .hero .frase b { color: var(--tx); font-weight: 700; } .hero-pe { margin: 6px 0 0; } .selo-v { color: var(--tx2); font-size: 15px; } .tablou.iguais { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); } .tablou.iguais > .painel { margin: 0; display: flex; flex-direction: column; box-shadow: var(--sh2); } /* .tablou[data-tablou] (páginas de início sec/prof, docs/UI-TELAS.md): principal + lado de 360px no desktop (≥1120px, prototipo _brain/escola-ui.html .tablou), uma coluna abaixo disso — sem regra extra, o próprio grid de 1 coluna já empilha na ordem do DOM (principal primeiro). Seletor com [data-tablou] para não colidir com .tablou.iguais (tela-resp-inicio.js), que não tem o atributo. */ .tablou[data-tablou] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 6px; } .tablou[data-tablou] > [data-col] { min-width: 0; } @media (min-width: 1120px) { .tablou[data-tablou] { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } } /* faixa do dia (prof-inicio, prototipo _brain/escola-ui.html .dia-faixa/.dia-bl ~L395): um bloco por aula com hora, cor conforme chamada feita ou não. */ .dia-faixa { display: flex; flex-direction: column; gap: 8px; } .dia-bl { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; border: 1px solid var(--ln); border-radius: 14px; text-align: left; background: var(--sup2); font-size: 15px; line-height: 1.28; transition: transform .16s, box-shadow .16s, border-color .16s; } .dia-bl b { font-size: 16px; display: block; letter-spacing: -.01em; } .dia-bl > span { color: var(--tx2); font-size: 14px; display: block; } .dia-bl .mk { font-weight: 700; font-size: 14px; } button.dia-bl:hover { transform: translateY(-2px); box-shadow: var(--sh1); border-color: var(--ln2); } .dia-bl.feito { background: var(--okSup); border-color: color-mix(in srgb, var(--ok) 26%, transparent); } .dia-bl.feito b, .dia-bl.feito .mk { color: var(--ok); } .dia-bl.falta { background: var(--atSup); border-color: color-mix(in srgb, var(--at) 30%, transparent); } .dia-bl.falta b, .dia-bl.falta .mk { color: var(--at); } @media (min-width: 900px) { .dia-faixa { flex-direction: row; flex-wrap: wrap; gap: 10px; } .dia-bl { flex: 1 1 220px; } } .filho { display: flex; gap: 18px 22px; align-items: flex-start; flex-wrap: wrap; flex: 1 1 auto; } .filho .dados { flex: 1 1 260px; min-width: 0; } .filho .dados h3 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.02em; } .filho .acoes { margin-top: 14px; } .anel-g { position: relative; width: 168px; height: 168px; max-width: 100%; margin: 0 auto; } .anel-g svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); } .anel-g .trilho { fill: none; stroke: var(--sup3); stroke-width: 9; } .anel-g .arco { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; animation: enche 1.2s cubic-bezier(.2,.7,.25,1); } @keyframes enche { from { stroke-dashoffset: 100; } } .anel-at .arco { stroke: var(--at); } .anel-fa .arco { stroke: none; } .anel-g .meio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .anel-g .meio b { font-size: 36px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .anel-ok .meio b { color: var(--ok); } .anel-at .meio b { color: var(--at); } .anel-g .meio span { color: var(--tx2); font-size: 17px; margin-top: 4px; line-height: 1.2; } .st { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 11px; font-weight: 600; font-size: 17px; white-space: nowrap; } p.st { white-space: normal; max-width: 100%; border-radius: 14px; } /* profesor — chamada și notas, portat din prototip (prof-inicio, chamada, notas-escolher, notas-lancar) */ .dica { color: var(--tx2); font-size: var(--fs); } .aviso { border-left: 5px solid var(--ac); background: var(--acSup); border-radius: var(--r2); padding: 14px 16px; margin: 14px 0; } .aviso.ok { border-color: var(--ok); background: var(--okSup); } .salvo { color: var(--ok); font-weight: 600; } .salvo:empty { display: none; } .acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; } .acoes > button { flex: 1 1 180px; } .st { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 11px; font-weight: 600; font-size: 17px; white-space: normal; } .st-ok { background: var(--okSup); color: var(--ok); } .st-at { background: var(--atSup); color: var(--at); } .st-er { background: var(--erSup); color: var(--er); } .st-fa { background: var(--sup3); color: var(--tx2); } ul.lista { list-style: none; padding: 0; margin: 8px 0; } ul.lista li { padding: 11px 0; border-bottom: 1px solid var(--ln); } ul.lista li:last-child { border-bottom: 0; } .acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; } .acoes .btn { flex: 1 1 180px; } @media (min-width: 760px) { .anel-g { margin: 0; } } .st-ac { background: var(--acSup); color: var(--ac); } .linha { display: flex; gap: 10px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; text-align: left; background: var(--sup); color: var(--tx); font-weight: 400; border: 1px solid var(--ln); border-radius: var(--r2); padding: 15px 18px; margin: 10px 0; min-height: 64px; box-shadow: var(--sh1); } /* dir-inicio: tabela "Turmas do ano letivo" (P21) — derula no próprio wrap, nunca na página */ .tabela-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--ln); border-radius: var(--r2); box-shadow: var(--sh1); background: var(--sup); } table.tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs); } table.tabela th, table.tabela td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ln); white-space: nowrap; } table.tabela thead th { color: var(--tx2); font-weight: 600; font-size: 14px; letter-spacing: .02em; background: var(--sup2); } table.tabela tbody tr:last-child td { border-bottom: 0; } .linha .nm { min-width: 0; } .linha .acoes { flex: 1 1 100%; margin: 4px 0 0; } button.linha:hover { border-color: var(--ac); background: var(--acSup); transform: translateX(3px); } button.linha.escolhida { border-color: var(--ac); background: var(--acSup); box-shadow: inset 5px 0 0 var(--ac); } .barra-fix { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin: 14px 0; background: var(--sup); border: 1px solid var(--ln); border-radius: var(--r); box-shadow: var(--sh1); position: sticky; top: 8px; z-index: 5; } .barra-fix .grande { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .barra-fix .cresce { flex: 1 1 auto; } /* chamada: un cartonaș pe elev, atingerea schimbă starea */ .ch-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 14px 0; } button.elev { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 11px; align-items: center; justify-items: start; width: 100%; text-align: left; padding: 12px; min-height: 84px; background: var(--sup); color: var(--tx); font-weight: 400; border: 1px solid var(--ln); border-radius: var(--r2); } button.elev:disabled { opacity: 1; } .elev .rosto { grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sup3); color: var(--tx2); font-weight: 700; font-size: 17px; } .elev .nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .elev .nm b { font-size: 17px; font-weight: 600; } .elev > .st { grid-column: 2; } .elev.faltou { background: var(--erSup); border-color: var(--er); } .elev.faltou .rosto { background: var(--er); color: var(--sup); } .elev.just { background: var(--atSup); border-color: var(--at); } .elev.just .rosto { background: var(--at); color: var(--sup); } /* notas: foaie de calcul, un elev pe rând */ .nt-cab, .nlinha { display: grid; gap: 6px 14px; align-items: center; grid-template-columns: 36px minmax(0, 1fr) 168px 110px; } .nt-cab { padding: 11px 16px; color: var(--tx2); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--sup2); border: 1px solid var(--ln); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; } .nt-lista { counter-reset: nl; border: 1px solid var(--ln); border-radius: 0 0 var(--r) var(--r); overflow: hidden; background: var(--sup); box-shadow: var(--sh1); margin: 0 0 14px; } .nlinha { border-bottom: 1px solid var(--ln); padding: 8px 16px; min-height: 60px; } .nlinha::before { counter-increment: nl; content: counter(nl); color: var(--tx2); font-variant-numeric: tabular-nums; } .nlinha .nm { margin: 0; font-weight: 500; } .nlinha .nm b { font-weight: 600; } .nlinha .media { color: var(--tx2); } .nlinha > .st { justify-self: start; } .nlinha input { min-width: 0; text-align: center; font-size: 19px; font-weight: 600; } .nlinha input:disabled { background: var(--okSup); color: var(--ok); border-color: transparent; opacity: 1; } .nlinha input.ruim { border-color: var(--er); background: var(--erSup); color: var(--er); } .media-col { display: none; } .erro-nota { color: var(--er); font-weight: 600; margin: 0; padding: 2px 16px 12px 66px; background: var(--erSup); } .erro-nota:empty { display: none; } @media (max-width: 760px) { .nt-cab { display: none; } .nt-lista { border-radius: var(--r); } .nlinha { grid-template-columns: 28px minmax(0, 1fr) 96px; grid-template-areas: "num nome nota" ". marca marca"; } .nlinha::before { grid-area: num; } .nlinha .nm { grid-area: nome; } .nlinha > .st { grid-area: marca; } .nlinha input { grid-area: nota; } .erro-nota { padding-left: 58px; } } /* P15: poza (blob URL) sau avatar cu inițiale */ .foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .foto.avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--tx2); color: #fff; font-weight: 700; font-size: 22px; } .foto-antet { width: 44px; height: 44px; font-size: 17px; } .antet-eu-wrap { flex: 0 0 auto; } .aluno-id { display: flex; align-items: center; gap: 12px; } .aluno-id h3 { margin: 0; } /* P20 mat-*: assistente de matrícula — barra de passo nativa + "mais dados" (regra 4/9 de UI-TELAS) */ .mat-passo progress { width: 100%; height: 10px; accent-color: var(--ac); border-radius: 999px; } details.mat-mais { margin: 10px 0; } details.mat-mais > summary { cursor: pointer; font-weight: 600; color: var(--ac); min-height: 48px; display: flex; align-items: center; } details.mat-mais > summary::marker { color: var(--ac); } /* v5: avatar da barra de cima como .usuario .av do protótipo; pílulas do entrar sem a frase no telefone */ .antet .foto-antet { width: 34px; height: 34px; font-size: 13px; } .antet .foto-antet.avatar { background: var(--acSup); color: var(--ac); } @media (max-width: 480px) { .ent5 .ent-min .retrato .r-nome { display: none; } } /* ================= v5b — interioarele ca prototipul (_brain/escola-ui-src/estilo.css „v5") ================= Cartele pastel .fcard (pătrățel cu iconiță, etichetă, cifră, săgeată), butoane secundare cu raza 12px, bara de jos pe telefon, caseta demo de pe entrar. */ button.secundario, .btn.secundario { border-radius: 12px; } .fileira { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin: 14px 0; } .hero + .fileira, .hero + h2 { margin-top: 14px; } button.fcard { display: flex; gap: 13px; align-items: center; justify-content: flex-start; text-align: left; width: 100%; min-height: 100px; padding: 14px 16px; border: 1px solid var(--ln); border-radius: 14px; background: var(--sup); color: var(--tx); font-weight: 400; box-shadow: none; } button.fcard:hover { transform: none; box-shadow: var(--sh1); border-color: var(--ln2); } .fcard .quad { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--sup2); color: var(--tx2); } .fcard .quad svg.ic { width: 22px; height: 22px; } .fcard .txt { flex: 1 1 auto; min-width: 0; } .fcard .rot { display: block; font-size: 14px; color: var(--tx2); line-height: 1.2; } .fcard .cif { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; margin-top: 1px; font-variant-numeric: tabular-nums; color: var(--tx); } .fcard .cif.ml { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; } .fcard .seta { flex: 0 0 auto; margin-left: auto; padding-left: 6px; color: var(--tx2); font-size: 21px; line-height: 1; } /* cartela só de cifra (dir-inicio: alunos, presença): sem destino, sem clique nem seta */ button.fcard[data-so-cifra] { pointer-events: none; } button.fcard[data-so-cifra] .seta { visibility: hidden; } .fcard.c-ac .cif { color: var(--ac); } .fcard.c-ok .cif { color: var(--ok); } .fcard.c-at .cif { color: var(--at); } .fcard.c-er .cif { color: var(--er); } .fcard.c-az .cif { color: var(--az); } .fcard.c-ac { background: color-mix(in srgb, var(--ac) var(--fpB), var(--sup)); border-color: color-mix(in srgb, var(--ac) var(--fpL), var(--ln)); } .fcard.c-ok { background: color-mix(in srgb, var(--ok) var(--fpB), var(--sup)); border-color: color-mix(in srgb, var(--ok) var(--fpL), var(--ln)); } .fcard.c-at { background: color-mix(in srgb, var(--at) var(--fpB), var(--sup)); border-color: color-mix(in srgb, var(--at) var(--fpL), var(--ln)); } .fcard.c-az { background: color-mix(in srgb, var(--az) var(--fpB), var(--sup)); border-color: color-mix(in srgb, var(--az) var(--fpL), var(--ln)); } .fcard.c-er { background: color-mix(in srgb, var(--er) var(--fpB), var(--sup)); border-color: color-mix(in srgb, var(--er) var(--fpL), var(--ln)); } .fcard.c-ac .quad { background: color-mix(in srgb, var(--sup) var(--fpQ), var(--acSup)); color: var(--ac); } .fcard.c-ok .quad { background: color-mix(in srgb, var(--sup) var(--fpQ), var(--okSup)); color: var(--ok); } .fcard.c-at .quad { background: color-mix(in srgb, var(--sup) var(--fpQ), var(--atSup)); color: var(--at); } .fcard.c-az .quad { background: color-mix(in srgb, var(--sup) var(--fpQ), var(--azSup)); color: var(--az); } .fcard.c-er .quad { background: color-mix(in srgb, var(--sup) var(--fpQ), var(--erSup)); color: var(--er); } /* prof-inicio: o rând per oră, starea sub text pe telefon */ .linha .estados { display: flex; flex-wrap: wrap; gap: 6px; } /* bara de jos: doar pe telefon (<=900px, ca .side din prototip); .side-ul desktop (nav[data-lado]) se ascunde acolo */ .nav-baixo { display: none; } @media (max-width: 900px) { .side[data-lado] { display: none; } .nav-baixo { display: flex; z-index: 20; } .nav-baixo .nb-it { flex: 1 1 0; min-width: 0; } .nav-baixo .side-lista { margin: 0; padding: 0; } .barra-fix { bottom: 80px; } body:not(.sem-shell) #app { padding-bottom: 96px; } } /* cadrul de desktop: #app (regula #app de mai sus, mai specifică decât .app) ia lățimea/paddingul .app din prototip */ @media (min-width: 901px) { #app.app { max-width: 1340px; padding: var(--appPy) var(--appPx) 110px; } } /* entrar: caixa do modo demo público (só aparece quando /api/v1/demo/contas responde 200) */ .ent5 .ent-demo { max-width: 540px; margin: 14px auto 0; padding: 12px 16px; border: 1px dashed var(--eTx2); border-radius: 14px; background: var(--eSup); color: var(--eTx); font-size: 14px; text-align: left; overflow-wrap: anywhere; } .ent5 .ent-demo p { margin: 4px 0; color: var(--eTx2); } .ent5 .ent-demo ul { margin: 4px 0; padding-left: 18px; } /* ================= v5c — interioarele cu stil comun aduse la prototip (chamada, notas, resp-boletim, mat-*) ================= Valorile sunt cele măsurate cu getComputedStyle pe prototip la 375px (tokenii de telefon --btnF/--btnPy/--campoPy). */ input, select, textarea { padding-top: 13px; padding-bottom: 13px; border-radius: 13px; } .topbar .busca-cx input { padding-top: var(--campoPy); padding-bottom: var(--campoPy); min-height: var(--campoH); } button.elev { min-height: 98px; } .acoes > button, .acoes > .btn, .barra-fix button, .cartao > button { font-size: 18px; padding: 13px 22px; } .barra-fix { gap: 14px; padding: 14px 18px; } .linha { gap: 12px; padding: 15px 20px; } .nlinha:nth-child(4n+1) { background: var(--sup2); } .nlinha:hover { background: var(--acSup); } .nlinha::before { font-size: 15px; } @media (max-width: 640px) { .cartao { padding: 16px; } } /* passo do assistente como .passo/.bara do protótipo: texto em negrito + barra de 12px com o gradiente */ .mat-passo { margin: 16px 0 18px; max-width: 560px; } .mat-passo .passo-txt { margin: 0; font-weight: 700; color: var(--tx); font-size: var(--fs); } .mat-passo progress { display: block; appearance: none; -webkit-appearance: none; height: 12px; margin-top: 7px; overflow: hidden; border: 1px solid var(--ln); border-radius: 999px; background: var(--sup3); } .mat-passo progress::-webkit-progress-bar { background: var(--sup3); border-radius: 999px; } .mat-passo progress::-webkit-progress-value { background: var(--grad); border-radius: 999px; } .mat-passo progress::-moz-progress-bar { background: var(--grad); border-radius: 999px; } /* nav[data-lado] e chiar .side din index.html (cadrul prototipului): fără reguli proprii aici. */ @media (min-width: 900px) { .ch-turmas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .ch-turmas > .linha, .atalhos > .linha { margin: 0; } .atalhos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-cab, .nlinha { grid-template-columns: 36px minmax(0, 1fr) 168px 110px 120px; } .media-col { display: block; text-align: right; font-variant-numeric: tabular-nums; color: var(--tx2); } .nlinha .nm .media { display: none; } .side-lista { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1 1 auto; } .side-it { display: flex; gap: 11px; align-items: center; justify-content: flex-start; width: 100%; text-align: left; min-height: 44px; padding: 7px 12px; border: 1px solid transparent; border-radius: 12px; font-size: 15px; color: var(--tx); text-decoration: none; } .side-it:hover { background: var(--sup2); border-color: var(--ln); } .side-it[aria-current="page"] { background: var(--ac); color: var(--acTx); font-weight: 700; } .side-pe { border-top: 1px solid var(--ln); padding-top: 8px; margin-top: 8px; } .side-sair:hover { transform: none; box-shadow: none; } /* caixa "O que você quer fazer?" no antet de cima (tasta / foca; scratchpad/proto.html L442-448) */ .antet-busca { display: flex; flex: 1 1 260px; max-width: 420px; } .busca-cx { position: relative; width: 100%; } .busca-cx .lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .7; color: var(--tx2); } .busca-cx .lupa .ic { width: 17px; height: 17px; } .busca-cx .atalho { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--tx2); border: 1px solid var(--ln); border-radius: 6px; padding: 1px 6px; } .busca-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; overflow: auto; max-height: 60vh; background: var(--sup); border: 1px solid var(--ln); border-radius: var(--r2); box-shadow: var(--sh2); padding: 6px; } .busca-res:empty { display: none; } .busca-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--tx); text-decoration: none; font-size: 14px; } .busca-item:hover { background: var(--sup2); } section:has(> .mat-resumo) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; align-items: start; } section:has(> .mat-resumo) > * { grid-column: 1; } section:has(> .mat-resumo) > .mat-resumo { display: block; grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 16px; background: var(--sup); border: 1px solid var(--ln); border-radius: var(--r2); padding: 16px 18px; } .mat-resumo h2 { margin: 0 0 10px; } .mat-resumo .mr-it { padding: 8px 0; border-top: 1px solid var(--ln); } .mat-resumo .mr-it span { display: block; font-size: 13px; color: var(--tx2); } .mat-resumo .mr-it p { margin: 2px 0 0; overflow-wrap: anywhere; } } /* ══ P2 · secretaria + matrícula — regulile rolului DOAR între aceste două rânduri ══ */ /* cadrul matrículei: .topo are propriul „Voltar” (cel din bara de sus se ascunde ca la responsável); „o que você já preencheu” stă în .lado (pașii feito/agora/depois) — la telefon rămâne ascuns (contractul p20e c11) */ body:has(section[data-tela^="mat-"] .topo) [data-voltar]{display:none} section[data-tela^="mat-"] .lado .mat-resumo{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ln)} @media (min-width:900px){section[data-tela^="mat-"] .lado .mat-resumo{display:block}} section[data-tela^="mat-"] .lado h3+ul{margin-top:8px} section[data-tela^="mat-"] .linha:not(button){display:flex;align-items:center;gap:12px;justify-content:space-between} /* ══ sfârșit P2 · secretaria + matrícula ══ */ /* ── separator ── */ /* ══ P2 · professor — regulile rolului DOAR între aceste două rânduri ══ */ /* prof-inicio: marcajul „agora" stă în ora în curs (sau ca item al faixei), nu ca linie absolută pe procente: faixa se împachetează pe mai multe rânduri și procentul nu ar mai cădea pe ora reală. */ [data-tela="prof-inicio"] .agora:not(li){position:static;flex:0 0 auto;align-self:center; width:auto;height:auto;background:none;box-shadow:none;margin:0} [data-tela="prof-inicio"] .agora b{position:static;transform:none;display:inline-block;color:#fff} /* ora care urmează: titlul în culoarea textului (fără regulă, din