:root{ --nav:#0b2545; --nav-2:#12305a; --azul:#2563eb; --escuro:#0a2540; --line:#e9ecf3; --ink:#1e2430; }

*{ -webkit-font-smoothing:antialiased; }
body{ background:#f6f7fb; color:var(--ink);
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.006em; }
h1,h2,h3,h4,h5{ letter-spacing:-.02em; }

/* Login */
.portal-login{ min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(1000px 500px at 15% -10%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(135deg, var(--nav), var(--nav-2)); padding:1rem; }
.login-card{ background:#fff; border-radius:22px; padding:2.5rem 2.25rem; width:100%; max-width:390px;
    box-shadow:0 18px 40px -12px rgba(16,24,40,.28); }
.login-logo{ width:66px; height:66px; border-radius:18px; margin:0 auto; color:#fff; font-size:2rem;
    background:linear-gradient(135deg, var(--azul), #1d4ed8); display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -8px var(--azul); }
.portal-login .form-control{ border-radius:11px; }

/* Login split (marca do cliente | formulario) */
.split-login{ background:#fff; }
.split-wrap{ display:flex; min-height:100vh; }
.split-brand{ flex:1 1 50%; position:relative; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:2.5rem;
    background:
        radial-gradient(900px 500px at 20% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(150deg, var(--marca,#0b2545), var(--marca-2,#12305a)); }
.split-brand-in{ text-align:center; }
.cliente-logo{ max-width:min(360px,70%); max-height:52vh; width:auto; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)); }
.cliente-logo-fb{ color:#fff; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.cliente-logo-fb i{ font-size:5rem; opacity:.9; }
.cliente-logo-fb span{ font-size:1.9rem; font-weight:750; letter-spacing:-.02em; line-height:1.1; max-width:12ch; }
.split-brand-foot{ position:absolute; bottom:1.75rem; left:0; right:0; text-align:center;
    color:rgba(255,255,255,.72); font-size:.85rem; }
.split-form{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:2rem; }
.split-form-in{ width:100%; max-width:400px; }
.form-brasao{ max-height:64px; width:auto; }
.split-form .form-control{ border-radius:12px; padding:.72rem 1rem; background:#fff; border-color:#e3e7ef; }
.split-form .form-control:focus{ border-color:var(--marca,#0b2545);
    box-shadow:0 0 0 .2rem color-mix(in srgb, var(--marca,#0b2545) 18%, transparent); }
.btn-entrar{ background:var(--marca,#0b2545); border:none; color:#fff; border-radius:12px; }
.btn-entrar:hover{ filter:brightness(1.12); color:#fff; }
.btn-cadastrar{ background:var(--marca-3,#f5b301); border:none; color:#1e2430; border-radius:12px; }
.btn-cadastrar:hover{ filter:brightness(1.06); color:#1e2430; }
.link-esqueci{ color:var(--marca-3,#f5b301); font-weight:600; text-decoration:none; }
.link-esqueci:hover{ text-decoration:underline; }
@media (max-width: 768px){
    .split-wrap{ flex-direction:column; }
    .split-brand{ flex:0 0 auto; min-height:34vh; padding:2rem 1.5rem 2.75rem; }
    .cliente-logo{ max-height:24vh; }
    .split-brand-foot{ bottom:.6rem; font-size:.78rem; }
    .split-form{ padding:2rem 1.25rem; }
}

/* App topbar */
.portal-topbar{ background:linear-gradient(120deg, var(--nav), var(--nav-2)); color:#fff;
    padding:.85rem 1.6rem; display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 2px 10px rgba(11,37,69,.25); }
.portal-topbar .brand{ font-weight:750; font-size:1.18rem; }
.portal-topbar .btn-light{ border-radius:999px; border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.1); color:#fff; font-weight:500; }
.portal-topbar .btn-light:hover{ background:rgba(255,255,255,.2); color:#fff; }
.portal-topbar .dropdown-toggle{ border-radius:999px; }
.portal-topbar .badge{ background:rgba(255,255,255,.2) !important; }

/* Cards de sistema (ladrilho escuro uniforme; a cor do sistema aparece no "Abrir" e no brilho do hover) */
.sistema-card{
    --line-dark:rgba(255,255,255,.09);
    display:flex; flex-direction:column; gap:.85rem; height:100%; padding:1.3rem;
    text-decoration:none; color:var(--ink); border-radius:18px;
    border:1px solid var(--line-dark);
    background:linear-gradient(160deg, #1a2438, #0e1524);
    box-shadow:0 1px 2px rgba(0,0,0,.2);
    position:relative; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sistema-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 40px -18px color-mix(in srgb, var(--cor,var(--azul)) 75%, transparent);
    border-color:color-mix(in srgb, var(--cor,var(--azul)) 55%, var(--line-dark));
}
.sistema-info{ min-width:0; flex:1; display:flex; flex-direction:column; }
.sistema-nome{ font-weight:700; font-size:.98rem; color:#f4f6fb; }
.sistema-desc{ color:rgba(244,246,251,.56); font-size:.8rem; line-height:1.4; margin-top:.2rem; flex:1; }
.sistema-abrir{
    display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem;
    color:color-mix(in srgb, var(--cor,var(--azul)) 70%, #fff); font-weight:650; font-size:.78rem;
    border-top:1px solid var(--line-dark);
}
.sistema-abrir i{ transition:transform .18s ease; }
.sistema-card:hover .sistema-abrir i{ transform:translate(3px,-3px); }

/* Modo "Organizar cards" (so admin): arrastar ou usar as setas; clique nao abre o sistema */
#cards.organizando .card-slot{ cursor:grab; position:relative; }
#cards.organizando .sistema-card{ pointer-events:none; outline:2px dashed rgba(37,99,235,.55); outline-offset:3px; animation:balancar .35s ease-in-out infinite alternate; }
#cards.organizando .card-slot.arrastando{ opacity:.45; }
#cards.organizando .sistema-card{ padding-top:2.7rem; }
.ordem-barra{ position:absolute; left:calc(var(--bs-gutter-x, 1rem) / 2); right:calc(var(--bs-gutter-x, 1rem) / 2); top:.5rem; z-index:3; display:flex; align-items:center; gap:.3rem; padding:0 .55rem; color:#fff; pointer-events:none; }
.ordem-btn{ pointer-events:auto; border:0; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.ordem-btn:hover, .ordem-btn:focus-visible{ background:rgba(255,255,255,.34); outline:2px solid #fff; }
@keyframes balancar{ from{ transform:rotate(-.25deg); } to{ transform:rotate(.25deg); } }
@media (prefers-reduced-motion: reduce){ #cards.organizando .sistema-card{ animation:none; } }

.card{ border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.btn{ border-radius:11px; font-weight:550; }
.btn-primary{ background:var(--azul); border-color:var(--azul); }
.btn-primary:hover{ background:#1d4ed8; border-color:#1d4ed8; }
.form-control,.form-select{ border-radius:11px; border-color:var(--line); }
.form-control:focus,.form-select:focus{ border-color:var(--azul); box-shadow:0 0 0 .2rem rgba(37,99,235,.16); }