/* =====================================================================
   Telas de autenticação (Login + Cadastro) — layout dividido:
   painel de marca à esquerda (headline + destaques + foto) e card de
   formulário à direita. Compartilhado pelas duas páginas (ver
   app/index.php e app/cadastro/index.php).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

.auth-screen {
    background: var(--prisma-bg);
    min-height: 100vh;
}

.auth-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Painel esquerdo — marca, headline, destaques, foto
   --------------------------------------------------------------------- */
.auth-hero {
    position: relative;
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    overflow: hidden;
    background-color: #fff;
    background-image:
        linear-gradient(100deg, #fff 0%, #fff 40%, rgba(255, 255, 255, .82) 54%, rgba(255, 255, 255, .35) 70%, rgba(255, 255, 255, 0) 88%),
        url('../../../images/auth/hands-care.jpg');
    background-size: cover;
    background-position: center;
}

.auth-hero-shape {
    position: absolute;
    pointer-events: none;
    filter: blur(1px);
}

.auth-hero-shape-top {
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
}

.auth-hero-shape-bottom {
    bottom: -50px;
    left: -70px;
    width: 200px;
    height: 200px;
}

.auth-hero-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-hero-brand-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--prisma-dark);
    line-height: 1.1;
}

.auth-hero-brand-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--prisma-primary);
}

.auth-hero-main {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.auth-hero-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--prisma-dark);
    margin-bottom: 14px;
}

.auth-hero-title span {
    color: var(--prisma-primary);
}

.auth-hero-subtitle {
    font-size: 15px;
    color: var(--prisma-text-2);
    line-height: 1.6;
    margin-bottom: 28px;
}

.auth-hero-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-hero-features li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-hero-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--prisma-primary-light);
    color: var(--prisma-primary);
}

.auth-hero-feature-icon.is-success { background: #DCFCE7; color: #16A34A; }
.auth-hero-feature-icon.is-info    { background: #E0F2FE; color: #0284C7; }

.auth-hero-feature-title {
    font-weight: 700;
    color: var(--prisma-dark);
    font-size: 14.5px;
    display: block;
}

.auth-hero-feature-sub {
    font-size: 13px;
    color: var(--prisma-text-2);
}

.auth-hero-quote {
    position: relative;
    z-index: 1;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    font-weight: 600;
    color: var(--prisma-primary-dark);
    line-height: 1.2;
}

.auth-hero-quote svg { display: block; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Painel direito — card de formulário
   --------------------------------------------------------------------- */
.auth-form-side {
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--prisma-bg);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--prisma-dark);
    margin-bottom: 4px;
    text-align: center;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--prisma-text-2);
    margin-bottom: 0;
    text-align: center;
}

.auth-form-card {
    width: 100%;
    max-width: 440px;
}

.auth-input-icon {
    position: relative;
}

.auth-input-icon > i.auth-icon-left {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--prisma-text-2);
    font-size: 14px;
}

.auth-input-icon input {
    padding-left: 42px;
}

.auth-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--prisma-text-2);
}

.auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 13.5px;
}

.auth-row-options .form-check-label {
    color: var(--prisma-text);
    font-size: 13.5px;
}

.auth-forgot-link {
    color: var(--prisma-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-forgot-link:hover { color: var(--prisma-primary-dark); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--prisma-text-2);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--prisma-border);
}

.auth-cta-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--prisma-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--prisma-radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color .12s, background .12s;
}

.auth-cta-box:hover {
    background: #DBEAFE;
    border-color: var(--prisma-primary);
}

.auth-cta-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--prisma-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.auth-cta-text-sub {
    display: block;
    font-size: 12.5px;
    color: var(--prisma-text-2);
}

.auth-cta-text-main {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--prisma-primary-dark);
}

.auth-footer-text {
    font-size: 13.5px;
    text-align: center;
    color: var(--prisma-text-2);
    margin-top: 20px;
    margin-bottom: 0;
}

.auth-footer-text a {
    color: var(--prisma-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-footer-text a:hover {
    color: var(--prisma-primary-dark);
}

.auth-protected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--prisma-text-2);
    margin-top: 18px;
}

.cadastro-secao {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--prisma-text-2);
    margin-top: 20px;
    margin-bottom: 8px;
}

.cadastro-secao:first-of-type {
    margin-top: 16px;
}

/* Mobile-first: o painel de marca só cabe em telas largas o suficiente
   pra não competir com o formulário — abaixo disso, só o form. */
@media (max-width: 991.98px) {
    .auth-hero { display: none; }

    .auth-shell { display: block; }

    .auth-form-side { min-height: 100vh; padding: 32px 20px; }
}