@import url("/stil.css?v=25c7acdeca");
:root { --mlogo-ink: light-dark(#242d3b, #ebe9e2); --mlogo-acc: light-dark(#8f5a0a, #ee9d1c); --mlogo-word: light-dark(#242d3b, #ebe9e2);
--rosu: light-dark(#c0392b, #e0776b); --rosu-fond: light-dark(#f7e6e3, #3a1f1c); --rosu-text: light-dark(#a32e22, #ffc2ba); --verde: light-dark(#3f7a5a, #6fb08d);
--verde-fond: light-dark(#e6f0ea, #1b3026); --verde-text: light-dark(#2f5f47, #bfe5cf); }
.mlogo { display: block; }
button, input { font: inherit; }
.portal-login { min-height: 100vh; display: grid; grid-template-columns: 560px minmax(0, 1fr); }
.portal-aside { display: flex; flex-direction: column; gap: 32px; padding: 48px; background: var(--subsol); color: var(--subsol-text);
--mlogo-ink: #ebe9e2; --mlogo-acc: #ee9d1c; --mlogo-word: #ebe9e2; }
.portal-aside .mlogo { width: 222px; height: 60px; }
.portal-slogan { display: flex; flex-direction: column; gap: 24px; margin-top: 160px; }
.portal-aside .slogan { font-size: var(--text-titlu); line-height: var(--lh-titlu); letter-spacing: var(--ls-titlu); font-weight: 700; }
.portal-linie { width: 96px; height: 4px; background: var(--accent); }
.portal-aside p { max-width: 440px; }
.portal-main { position: relative; display: grid; align-items: start; padding: 160px 48px 48px;
grid-template-columns: max(0px, round(down, (100% - 440px) / 2, 1px)) minmax(0, 440px) minmax(0, 1fr); }
.portal-main > .card-portal { grid-column: 2; }
.portal-main > .tema-buton { position: absolute; top: 24px; right: 24px; }
.card-portal { width: 440px; max-width: 100%; display: flex; flex-direction: column; background: var(--plansa);
border: 1px solid var(--linie-tare); border-top: 4px solid var(--accent); }
.card-portal-cap { padding: 12px 24px 13px; border-bottom: 1px solid var(--linie); }
.card-portal-cap h1 { font-size: var(--text-corp); line-height: var(--lh-corp); font-weight: 700; letter-spacing: var(--ls-caps);
margin-right: calc(-1 * var(--ls-caps)); text-transform: uppercase; }
.card-portal-corp { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.card-portal .btn { width: 100%; }
.camp { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.camp input { height: 48px; padding: 0 12px; border: 1px solid var(--linie-tare); border-radius: 0; background: var(--fond);
color: var(--text); font: inherit; font-weight: 400; }
.camp input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.eroare, .bine { padding: 10px 14px; border-left: 4px solid; }
.eroare { background: var(--rosu-fond); border-color: var(--rosu); color: var(--rosu-text); }
.bine { background: var(--verde-fond); border-color: var(--verde); color: var(--verde-text); }
.legaturi { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linie); }
.legaturi a { color: var(--stins); }
.legaturi a:hover { color: var(--text); }
.portal-cap { height: 80px; padding: 0 var(--margine); display: flex; align-items: center; gap: 24px; background: var(--fond);
box-shadow: inset 0 -1px 0 var(--linie); }
.portal-cap .mlogo { width: 222px; height: 60px; }
.portal-cap .titlu { font-weight: 500; color: var(--stins); padding-left: 24px; border-left: 1px solid var(--linie); }
.portal-cap .dreapta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.portal-cap form { margin: 0; display: flex; }
.insigna { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--linie-tare);
color: var(--text); }
.insigna-punct { width: 8px; height: 8px; background: var(--verde); }
.insigna-punct.asteapta { background: var(--accent); }
.portal-corp { max-width: 1344px; margin: 0 auto; padding: 48px var(--margine) 64px; display: grid;
grid-template-columns: minmax(0, 1fr) 440px; gap: var(--jg); align-items: start; }
.panou-asistent, .panou-parola { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--plansa);
border: 1px solid var(--linie-tare); border-top: 4px solid var(--accent); }
.panou-asistent .cap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panou-asistent h1 { font-size: var(--text-titlu); line-height: var(--lh-titlu); letter-spacing: var(--ls-titlu); }
.panou-asistent > .insigna { align-self: flex-start; }
.pict-asistent-mare { display: grid; place-items: center; width: 48px; height: 48px; background: var(--subsol); color: var(--accent); }
.panou-parola h2 { font-size: var(--text-corp); line-height: var(--lh-corp); letter-spacing: 0; font-weight: 700; }
.panou-parola .btn { width: 100%; }
@media (max-width: 1199px) {
.portal-login { grid-template-columns: 440px minmax(0, 1fr); }
.portal-corp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.portal-login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.portal-aside { padding: 24px 16px; }
.portal-slogan { margin-top: 0; }
.portal-main { padding: 24px 16px 32px; }
.portal-main > .tema-buton { position: static; grid-column: 1 / -1; justify-self: end; margin-bottom: 16px; }
.portal-cap { height: 64px; padding: 0 16px; }
.portal-cap .mlogo { width: 176px; height: 48px; }
.portal-cap .titlu, .portal-cap .insigna { display: none; }
.portal-corp { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 32px; }
}
@media (max-width: 480px) {
.portal-cap { gap: 12px; }
.portal-cap .tema-buton { display: none; }
.portal-cap .btn { padding: 0 12px; }
}
