/* ===== Estilo compartilhado das telas de acesso (login, senha, atualização) ===== */
:root {
    --azul: #2f6fed;
    --azul-2: #1e56c8;
    --laranja: #f39c12;
    --laranja-2: #d35400;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #eef3fb 0%, #e6ecf5 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 24px 12px;
}

/* Card central */
.card-acesso {
    max-width: 440px;
    width: 100%;
    margin: auto;
    border: none;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(30, 50, 90, .12);
    padding: 34px 30px !important;
    animation: cardUp .5s cubic-bezier(.2,.8,.2,1);
}
.card-acesso.wide { max-width: 500px; }
@keyframes cardUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.logo { max-width: 92px; }

h1, .h4, .h5 { color: #1f2d3d; }

/* Inputs */
.form-control, .form-select {
    border-radius: 12px;
    border: 1.5px solid #e4e9f2;
    padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(47,111,237,.14);
}
.form-floating > label { color: #8794a5; }

/* Botões */
.btn-primary {
    background: linear-gradient(135deg, var(--azul), var(--azul-2));
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(47,111,237,.28);
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(47,111,237,.36); filter: brightness(1.03); }
.btn-outline-primary {
    border-radius: 12px; padding: 12px 16px; font-weight: 600;
    border: 1.5px solid var(--azul); color: var(--azul);
    transition: transform .15s, background .2s, color .2s;
}
.btn-outline-primary:hover { transform: translateY(-2px); background: var(--azul); border-color: var(--azul); }
.btn-outline-secondary { border-radius: 12px; }

/* CTAs da landing de login */
.cta { padding: 18px; border-radius: 14px; font-weight: 700; text-align: center; }
.cta .small { font-weight: 500; }
.cta:hover .text-muted, .cta:hover .text-white-50 { color: rgba(255,255,255,.9) !important; }

.hidden { display: none !important; }

/* Alerts arredondados */
.alert { border-radius: 12px; }

/* ===== Popup de ajuda ===== */
.help-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(20,30,50,.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.help-overlay.show { opacity: 1; pointer-events: auto; }
.help-modal {
    background: #fff; border-radius: 20px; max-width: 520px; width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden;
    transform: translateY(24px) scale(.96); opacity: 0;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
.help-overlay.show .help-modal { transform: translateY(0) scale(1); opacity: 1; }
.help-head { background: linear-gradient(135deg, var(--azul), var(--azul-2)); color: #fff; padding: 22px 24px; position: relative; }
.help-head h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.help-head p { margin: 6px 0 0; font-size: .9rem; opacity: .92; }
.help-close {
    position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.2);
    border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%;
    font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .2s;
}
.help-close:hover { background: rgba(255,255,255,.35); }
.help-body { padding: 8px 22px 22px; }
.help-opt {
    display: flex; gap: 14px; padding: 16px; border-radius: 14px;
    border: 1px solid #eef2f7; margin-top: 14px; opacity: 0; transform: translateY(10px);
    animation: helpIn .45s ease forwards;
}
.help-opt:nth-child(1) { animation-delay: .12s; }
.help-opt:nth-child(2) { animation-delay: .24s; }
@keyframes helpIn { to { opacity: 1; transform: translateY(0); } }
.help-opt .ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; }
.help-opt.upd .ico { background: linear-gradient(135deg, var(--laranja), var(--laranja-2)); }
.help-opt.log .ico { background: linear-gradient(135deg, var(--azul), var(--azul-2)); }
.help-opt h3 { font-size: 1rem; font-weight: 700; margin: 0 0 3px; }
.help-opt p { font-size: .86rem; color: #5a6b7b; margin: 0; line-height: 1.5; }

/* Botão flutuante Dúvidas (pulando devagar) */
.help-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    background: linear-gradient(135deg, var(--azul), var(--azul-2)); color: #fff; border: none;
    padding: 12px 18px; border-radius: 50px; font-weight: 600; font-size: .92rem;
    box-shadow: 0 8px 22px rgba(47,111,237,.4); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    animation: fabBounce 2.4s ease-in-out infinite;
}
.help-fab:hover { animation-play-state: paused; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(47,111,237,.5); }
.help-fab i { font-size: 1.1rem; }
@keyframes fabBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
    .help-fab { animation: none; }
}