/* Nota de Azi — sistemul vizual.
   Un singur fișier, fără framework: se descarcă într-o clipă și merge offline.
   Regula de bază a design-ului: aerisit. Spațiul alb face diferența între un
   catalog pe care profesorul îl deschide zilnic și unul pe care îl evită. */

/* ------------------------------------------------------------------ jetoane */

:root {
  color-scheme: light dark;

  --fundal:        #f4f6f9;
  --suprafata:     #ffffff;
  --suprafata-2:   #f8fafc;
  --cerneala:      #0f1722;
  --cerneala-slab: #5a6779;
  --cerneala-sters:#8895a7;
  --linie:         #e4e9ef;
  --linie-tare:    #cfd7e1;

  --accent:        #2f4ad0;
  --accent-apasat: #2439a8;
  --accent-slab:   #eaeeff;
  --accent-text:   #ffffff;

  --succes:        #0d7a4f;
  --succes-slab:   #e6f6ee;
  --atentie:       #9a5b06;
  --atentie-slab:  #fdf1de;
  --eroare:        #b4231d;
  --eroare-slab:   #fdeceb;

  --umbra-mica: 0 1px 2px rgba(15, 23, 34, .05), 0 1px 3px rgba(15, 23, 34, .04);
  --umbra:      0 2px 4px rgba(15, 23, 34, .04), 0 8px 24px rgba(15, 23, 34, .07);
  --umbra-mare: 0 12px 48px rgba(15, 23, 34, .18);

  --rotund-mic: 10px;
  --rotund:     16px;
  --rotund-mare:22px;

  --pas: 8px;
  --latime: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
  --font-cifre: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundal:        #0e1116;
    --suprafata:     #171c24;
    --suprafata-2:   #1e242e;
    --cerneala:      #eef2f7;
    --cerneala-slab: #a2aebe;
    --cerneala-sters:#71808f;
    --linie:         #262e39;
    --linie-tare:    #38424f;

    --accent:        #7b8fff;
    --accent-apasat: #92a3ff;
    --accent-slab:   #1c2340;
    --accent-text:   #0b1020;

    --succes:        #4ed494;
    --succes-slab:   #12291f;
    --atentie:       #f0b357;
    --atentie-slab:  #2c2213;
    --eroare:        #ff8a80;
    --eroare-slab:   #2e1614;

    --umbra-mica: 0 1px 2px rgba(0, 0, 0, .4);
    --umbra:      0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
    --umbra-mare: 0 16px 56px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------------------------------------------- bază */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundal);
  color: var(--cerneala);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { overflow-x: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent); }

.mic     { font-size: .8125rem; }
.slab    { color: var(--cerneala-slab); }
.sters   { color: var(--cerneala-sters); }
.cifre   { font-variant-numeric: tabular-nums; }
.centrat { text-align: center; }
.gros    { font-weight: 650; }

/* --------------------------------------------------------------- structură */

.aplicatie {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.antet {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fundal) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}

.antet-interior {
  max-width: var(--latime);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.antet .titlu { flex: 1; min-width: 0; }
.antet .titlu h1 { font-size: 1.16rem; }
.antet .titlu .sub {
  font-size: .78rem;
  color: var(--cerneala-slab);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.continut {
  flex: 1;
  width: 100%;
  max-width: var(--latime);
  margin: 0 auto;
  padding: 28px 20px calc(96px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .continut { padding: 36px 32px 64px; }
  .antet-interior { padding: 18px 32px; }
}

.sectiune { margin-bottom: 36px; }
.sectiune > .cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sectiune > .cap h2 { font-size: 1.06rem; }

.stiva     { display: flex; flex-direction: column; gap: 14px; }
.stiva-mica{ display: flex; flex-direction: column; gap: 8px; }
.rand      { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rand-lipit{ display: flex; align-items: center; gap: 8px; }
.impinge   { margin-left: auto; }

.grila {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ------------------------------------------------------------------ carduri */

.card {
  background: var(--suprafata);
  border: 1px solid var(--linie);
  border-radius: var(--rotund);
  padding: 22px;
  box-shadow: var(--umbra-mica);
}
.card.strans  { padding: 16px; }
.card.lipit   { padding: 0; overflow: hidden; }
.card h3 + p  { margin-top: 6px; }

.card-apasabil {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card-apasabil:hover  { border-color: var(--linie-tare); box-shadow: var(--umbra); }
.card-apasabil:active { transform: scale(.992); }

/* Cifra mare dintr-un card de statistică. */
.stat .valoare {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .eticheta {
  font-size: .8125rem;
  color: var(--cerneala-slab);
  margin-top: 6px;
}
.stat.succes .valoare  { color: var(--succes); }
.stat.atentie .valoare { color: var(--atentie); }
.stat.eroare .valoare  { color: var(--eroare); }

/* ------------------------------------------------------------------ butoane */

.buton {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--rotund-mic);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  font-size: .94rem;
  padding: 12px 18px;
  min-height: 46px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s ease, transform .1s ease, opacity .12s ease;
  text-decoration: none;
}
.buton:hover  { background: var(--accent-apasat); }
.buton:active { transform: scale(.98); }
.buton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.buton.secundar {
  background: var(--suprafata);
  color: var(--cerneala);
  border-color: var(--linie-tare);
}
.buton.secundar:hover { background: var(--suprafata-2); }

.buton.sters { background: transparent; color: var(--cerneala-slab); }
.buton.sters:hover { background: var(--suprafata-2); color: var(--cerneala); }

.buton.pericol { background: var(--eroare); color: #fff; }
.buton.mic { min-height: 38px; padding: 8px 14px; font-size: .85rem; }
.buton.lat { width: 100%; }

/* ------------------------------------------------------------------ insigne */

.insigna {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--suprafata-2);
  color: var(--cerneala-slab);
  border: 1px solid var(--linie);
}
.insigna.succes  { background: var(--succes-slab);  color: var(--succes);  border-color: transparent; }
.insigna.atentie { background: var(--atentie-slab); color: var(--atentie); border-color: transparent; }
.insigna.eroare  { background: var(--eroare-slab);  color: var(--eroare);  border-color: transparent; }
.insigna.accent  { background: var(--accent-slab);  color: var(--accent);  border-color: transparent; }
.insigna .punct  { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ formular */

.camp { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.camp > label { font-size: .875rem; font-weight: 600; }
.camp > .ajutor { font-size: .8rem; color: var(--cerneala-slab); }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  font: inherit;
  width: 100%;
  padding: 13px 14px;
  min-height: 48px;
  border: 1px solid var(--linie-tare);
  border-radius: var(--rotund-mic);
  background: var(--suprafata);
  color: var(--cerneala);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
.buton:focus-visible, .card-apasabil:focus-visible, .fila:focus-visible,
.nav-jos a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Alegere din mai multe variante — mai ușor de atins cu degetul decât un select. */
.optiuni { display: grid; gap: 10px; }
@media (min-width: 560px) { .optiuni.doua { grid-template-columns: 1fr 1fr; } }

.optiune {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linie-tare);
  border-radius: var(--rotund-mic);
  background: var(--suprafata);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.optiune:hover { border-color: var(--accent); }
.optiune input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.optiune.aleasa { border-color: var(--accent); background: var(--accent-slab); }
.optiune .nume { font-weight: 600; font-size: .94rem; }
.optiune .desc { font-size: .8rem; color: var(--cerneala-slab); margin-top: 2px; }

/* ------------------------------------------------------------------ liste */

.lista { display: flex; flex-direction: column; }
.lista > * + * { border-top: 1px solid var(--linie); }

.element {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
button.element { cursor: pointer; }
button.element:hover { background: var(--suprafata-2); }
.element .corp { flex: 1; min-width: 0; }
.element .corp .titlu { font-weight: 600; font-size: .95rem; }
.element .corp .sub {
  font-size: .8125rem;
  color: var(--cerneala-slab);
  margin-top: 2px;
}
.element .sageata { color: var(--cerneala-sters); flex: none; }

.avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-slab);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: .85rem;
}

/* ------------------------------------------------------------------ note */

/* Note şi absenţe: forma spune ce e, culoarea spune cât de grav.

   Înainte, nota bună şi absenţa motivată erau amândouă pătrăţele verzi, iar nota
   slabă şi absenţa nemotivată amândouă roşii. Culoarea ducea tot înţelesul, deci
   la o privire rapidă — singura pe care o face un părinte — se confundau.

   Acum:
     * NOTA e un cerc. E un număr, un punctaj, ceva rotund şi închis.
     * ABSENŢA e un pătrat tăiat. E o gaură în orar, un colţ, ceva care lipseşte.
     * Absenţa NEMOTIVATĂ e plină şi tare — e lucrul care doare.
     * Absenţa MOTIVATĂ e goală, doar conturată — s-a rezolvat, nu mai strigă.

   Diferenţa se vede şi fără culoare: cine nu distinge roşu de verde vede tot un
   cerc şi un pătrat, plin şi gol. */

.note { display: flex; flex-wrap: wrap; gap: 6px; }
.nota {
  min-width: 32px; height: 32px;
  padding: 0 7px;
  border-radius: 999px;            /* cerc: nota e un punctaj */
  display: grid; place-items: center;
  font-weight: 650; font-size: .88rem;
  font-variant-numeric: tabular-nums;
  background: var(--suprafata-2);
  border: 1.5px solid var(--linie-tare);
  color: var(--cerneala);
}
.nota.buna  { background: var(--succes-slab);  color: var(--succes);  border-color: transparent; }
.nota.slaba { background: var(--eroare-slab);  color: var(--eroare);  border-color: transparent; }
.nota.teza  { box-shadow: 0 0 0 2px var(--accent-slab), inset 0 -3px 0 var(--accent); }

/* Absenţele: pătrate, ca să nu semene cu notele nici din colţul ochiului. */
.absente-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.abs {
  width: 28px; height: 28px;
  border-radius: 6px;              /* colţuri vii, nu rotunde ca nota */
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
  cursor: default;
  position: relative;
  /* nemotivată: plină, tare — e lucrul care costă bursa şi purtarea */
  background: var(--eroare);
  color: #fff;
  border: 1.5px solid var(--eroare);
}
/* motivată: goală, doar conturată. S-a rezolvat, nu mai are de ce să strige. */
.abs.motivata {
  background: transparent;
  color: var(--cerneala-sters);
  border: 1.5px dashed var(--linie-tare);
  font-weight: 600;
}
/* linia subţire peste pătratul gol: „bifat, închis” */
.abs.motivata::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  top: 50%;
  border-top: 1.5px solid var(--succes);
  transform: rotate(-32deg);
  opacity: .7;
}

/* Legenda: o dată pe ecran, acolo unde apar amândouă. Fără ea, primul părinte
   care vede ecranul trebuie să ghicească ce înseamnă formele. */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-size: .78rem;
  color: var(--cerneala-slab);
}
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda .nota, .legenda .abs {
  width: 22px; height: 22px; min-width: 22px;
  font-size: .62rem; padding: 0;
}

/* ------------------------------------------------------------------ bare */

.bara {
  height: 8px;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}
.bara > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.bara.atentie > span { background: var(--atentie); }
.bara.eroare  > span { background: var(--eroare); }

/* ------------------------------------------------------------------ mesaje */

.nota-info {
  display: flex;
  gap: 12px;
  padding: 15px 17px;
  border-radius: var(--rotund-mic);
  background: var(--accent-slab);
  color: var(--cerneala);
  font-size: .89rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.nota-info .semn { flex: none; font-size: 1.05rem; line-height: 1.35; }
.nota-info.succes  { background: var(--succes-slab); }
.nota-info.atentie { background: var(--atentie-slab); }
.nota-info.eroare  { background: var(--eroare-slab); }

.gol {
  text-align: center;
  padding: 48px 24px;
  color: var(--cerneala-slab);
}
.gol .semn { font-size: 2.4rem; opacity: .5; display: block; margin-bottom: 12px; }
.gol .titlu { font-weight: 650; color: var(--cerneala); margin-bottom: 4px; }

/* ------------------------------------------------------------------ file */

.file {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--suprafata-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.file::-webkit-scrollbar { display: none; }
.fila {
  flex: none;
  border: none;
  background: none;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--cerneala-slab);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.fila.activa { background: var(--suprafata); color: var(--cerneala); box-shadow: var(--umbra-mica); }

/* ------------------------------------------------------------ navigare jos */

.nav-jos {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--suprafata) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-jos ul {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav-jos li { flex: 1; }
.nav-jos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 10px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--cerneala-sters);
  text-decoration: none;
  border-radius: var(--rotund-mic);
}
.nav-jos a.activ { color: var(--accent); }
.nav-jos .pictograma { font-size: 1.22rem; line-height: 1; }
.nav-jos .bulina {
  position: absolute;
  transform: translate(12px, -4px);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--eroare);
  color: #fff;
  font-size: .62rem;
  display: grid; place-items: center;
}

/* --------------------------------------------------------------- fereastră */

.fundal-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 12, 20, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: apare .18s ease;
}
@media (min-width: 640px) {
  .fundal-modal { align-items: center; padding: 24px; }
}

.modal {
  background: var(--suprafata);
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--rotund-mare) var(--rotund-mare) 0 0;
  box-shadow: var(--umbra-mare);
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  animation: urca .26s cubic-bezier(.2,.9,.25,1);
}
@media (min-width: 640px) {
  .modal { border-radius: var(--rotund-mare); padding: 30px; }
}
.modal .cap-modal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.modal .cap-modal h2 { flex: 1; }

@keyframes apare { from { opacity: 0 } }
@keyframes urca  { from { transform: translateY(18px); opacity: .4 } }

/* ------------------------------------------------------------------ toast */

.toasturi {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(430px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  background: var(--cerneala);
  color: var(--fundal);
  padding: 13px 17px;
  border-radius: var(--rotund-mic);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--umbra);
  animation: urca .22s ease;
}
.toast.succes { background: var(--succes); color: #fff; }
.toast.eroare { background: var(--eroare); color: #fff; }

/* --------------------------------------------------------------- încărcare */

.schelet {
  background: linear-gradient(90deg, var(--linie) 25%, var(--suprafata-2) 50%, var(--linie) 75%);
  background-size: 200% 100%;
  animation: luceste 1.3s linear infinite;
  border-radius: var(--rotund-mic);
  height: 76px;
}
@keyframes luceste { to { background-position: -200% 0 } }

.rotitor {
  width: 20px; height: 20px;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: roteste .7s linear infinite;
}
@keyframes roteste { to { transform: rotate(360deg) } }

/* ------------------------------------------------------------------ intrare */

.ecran-intrare {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 22px calc(40px + env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
}
.ecran-intrare .marca { text-align: center; margin-bottom: 34px; }
.ecran-intrare .marca svg { width: 62px; height: 62px; }
.ecran-intrare .marca h1 { margin-top: 14px; font-size: 1.7rem; }
.ecran-intrare .marca p { color: var(--cerneala-slab); margin-top: 6px; font-size: .94rem; }

.conturi-demo {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
}
.conturi-demo .titlu-mic {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cerneala-sters);
  font-weight: 700;
  margin-bottom: 12px;
}
.chei { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cheie {
  border: 1px solid var(--linie-tare);
  background: var(--suprafata);
  border-radius: var(--rotund-mic);
  padding: 11px 13px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cheie:hover { border-color: var(--accent); }
.cheie .rol { font-weight: 650; font-size: .86rem; }
.cheie .cod { font-family: var(--font-cifre); font-size: .74rem; color: var(--cerneala-slab); }

.subsol {
  margin-top: 40px;
  text-align: center;
  font-size: .74rem;
  line-height: 1.7;
  color: var(--cerneala-sters);
}

/* --------------------------------------------------------- tabel catalog */

.tabel-invelis {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rotund);
  border: 1px solid var(--linie);
  background: var(--suprafata);
}
table.catalog { border-collapse: collapse; width: 100%; font-size: .875rem; }
table.catalog th, table.catalog td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.catalog th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cerneala-slab);
  font-weight: 700;
  background: var(--suprafata-2);
  position: sticky; top: 0;
}
table.catalog tbody tr:last-child td { border-bottom: none; }
table.catalog tbody tr:hover td { background: var(--suprafata-2); }
table.catalog td.elev { position: sticky; left: 0; background: var(--suprafata); font-weight: 600; }
table.catalog tbody tr:hover td.elev { background: var(--suprafata-2); }

/* ------------------------------------------------------------------ altele */

.ascuns { display: none !important; }
.doar-cititor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------- intrarea cu PIN şi contul nou

   Ecranele astea sunt singurele pe care le vede un om care n-a mai folosit
   niciodată aplicaţia. De aceea au mai mult aer decât restul: un lucru pe ecran,
   scris mare, cu spaţiu în jur. */

.camp-pin { margin-bottom: 18px; }

.pin-rand { position: relative; display: flex; align-items: center; }

.pin-camp {
  flex: 1;
  font-family: var(--font-cifre);
  font-size: 1.9rem;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;        /* compensează spaţierea de după ultima cifră */
  padding: 18px 44px 18px 16px;
  font-variant-numeric: tabular-nums;
}
.pin-camp::placeholder { letter-spacing: .3em; opacity: .35; }

.pin-ochi {
  position: absolute;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  padding: 10px;
  cursor: pointer;
  opacity: .4;
  transition: opacity .15s ease;
}
.pin-ochi:hover, .pin-ochi.activ { opacity: .9; }

.cod-camp {
  font-family: var(--font-cifre);
  font-size: 1.35rem;
  letter-spacing: .22em;
  text-align: center;
  text-indent: .22em;
  text-transform: uppercase;
  padding: 16px;
}

.alt-drum {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ca-link {
  margin-top: 20px;
  color: var(--cerneala-sters);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* paşii înscrierii: patru liniuţe, nu un procent — se înţelege dintr-o privire */
.pasi {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
}
.pasi span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--linie-tare);
  transition: background .25s ease;
}
.pasi span.plin { background: var(--accent); }

.ecran-intrare .marca.strans { margin-bottom: 26px; text-align: left; }
.ecran-intrare .marca.strans h1 { margin-top: 0; font-size: 1.5rem; }

.semn-mare { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }

/* alegerea rolului: ţinte mari, de apăsat cu degetul mare, pe un telefon ţinut
   într-o mână în staţia de autobuz */
.alegeri { display: flex; flex-direction: column; gap: 12px; }

.alegere {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 20px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--rotund);
  background: var(--suprafata);
  box-shadow: var(--umbra-mica);
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.alegere:hover:not(:disabled) { border-color: var(--accent); }
.alegere:active:not(:disabled) { transform: scale(.99); }
.alegere:disabled { opacity: .5; cursor: not-allowed; }
.alegere .semn { font-size: 1.7rem; line-height: 1; }
.alegere .text { display: flex; flex-direction: column; gap: 3px; }
.alegere .text strong { font-size: 1.02rem; }

/* ------------------------------------------------------- cabinetul medical */

/* Butoane unul lângă altul, care se aşază unul sub altul pe telefon. */
.actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.actiuni .buton { flex: 1 1 auto; min-width: 140px; }

/* Adeverinţa trebuie văzută, nu ghicită: poza ia tot ce poate din ecran. */
.document-mare {
  background: var(--suprafata-2);
  border: 1px solid var(--linie);
  border-radius: var(--rotund-mic);
  overflow: auto;
  max-height: 62vh;
}
.document-mare img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------- semnătura cu degetul */

.semnatura {
  position: relative;
  background: var(--suprafata);
  border: 1px solid var(--linie-tare);
  border-radius: var(--rotund-mic);
  height: 180px;
  overflow: hidden;
  touch-action: none;          /* altfel degetul derulează pagina în loc să semneze */
}
.semnatura-panza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
/* Linia pe care se semnează, ca pe un formular tipărit. */
.semnatura-linie {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 46px;
  border-bottom: 1px dashed var(--linie-tare);
  pointer-events: none;
}
.semnatura-indiciu {
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  text-align: center;
  font-size: .82rem;
  color: var(--cerneala-sters);
  pointer-events: none;
  transition: opacity .2s ease;
}
.semnatura-indiciu.ascuns { opacity: 0; }
.semnatura-sterge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

@media (prefers-color-scheme: dark) {
  /* Semnătura se desenează cu cerneală închisă, deci panza rămâne albă şi în
     tema întunecată — altfel părintele ar semna cu negru pe negru. */
  .semnatura { background: #f7f9fc; }
  .semnatura-linie { border-bottom-color: #c9d3e0; }
  .semnatura-indiciu { color: #7d8da1; }
}

/* ------------------------------------------------- varianta de calculator

   Aceeaşi aplicaţie, aceleaşi ecrane — doar navigarea se mută. Pe telefon, bara
   stă jos, unde ajunge degetul mare. Pe un monitor, degetul mare nu există: bara
   de jos devine o fâşie ciudată la marginea ecranului, departe de conţinut. De la
   900 px în sus o aducem sus, lângă titlu, ca un rând de file.

   Nu e un al doilea site şi nici un al doilea cod: e acelaşi HTML, aşezat altfel. */

@media (min-width: 900px) {
  .nav-jos {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
    border-bottom: 1px solid var(--linie);
    padding-bottom: 0;
    order: -1;                       /* sub antet, deasupra conţinutului */
  }
  .nav-jos ul {
    max-width: var(--latime);
    padding: 0 32px;
    gap: 4px;
  }
  .nav-jos li { flex: 0 0 auto; }
  .nav-jos a {
    flex-direction: row;
    gap: 9px;
    padding: 13px 18px 12px;
    font-size: .9rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .nav-jos a .pictograma { font-size: 1rem; }
  .nav-jos a.activ {
    border-bottom-color: var(--accent);
    background: transparent;
  }

  /* fără bara de jos, conţinutul nu mai are nevoie de spaţiul rezervat ei */
  .continut { padding-bottom: 72px; }

  /* Aplicaţia e o coloană: antet, file, conţinut. */
  .aplicatie { display: flex; flex-direction: column; min-height: 100dvh; }
  .antet { order: -2; }

  /* Pe lat, cardurile de scutiri şi listele n-au de ce să se întindă pe tot
     monitorul: un rând de text de 1100 px se citeşte prost. */
  .stiva { max-width: 820px; }
  .ecran-intrare { max-width: 420px; }
}

@media (min-width: 1280px) {
  .continut { padding-left: 48px; padding-right: 48px; }
}

/* numărul din catalog, în listele de elevi */
.numar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--suprafata-2);
  border: 1px solid var(--linie);
  font-family: var(--font-cifre);
  font-size: .78rem;
  color: var(--cerneala-slab);
  flex-shrink: 0;
}

/* Eticheta de deasupra unui grup de note sau de absenţe. Mică, dar scoate orice
   urmă de îndoială: forma spune ce e, iar cuvântul confirmă. */
.eticheta-grup {
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cerneala-sters);
  margin-top: 14px;
}

/* în legendă, pastilele sunt <i>, nu <span> — ca să nu moştenească stilul listei */
.legenda i { font-style: normal; display: grid; place-items: center; }

/* Cele două uşi pentru personalul şcolii: profesor şi secretariat.
   Stau jos, discret — nouăzeci la sută dintre oameni intră cu codul personal de
   sus. Dar cine are nevoie de ele trebuie să le găsească din prima, nu să ghicească
   că se ascund după un link de text. */
.usi-personal {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.usi-personal .buton {
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--rotund-mic);
}
.usi-personal .buton:hover { border-color: var(--accent); }
.usi-personal .semn { font-size: 1.25rem; line-height: 1; }