* {
    box-sizing: border-box;
}

:root {
    --navy: #073b67;
    --blue: #0876ad;
    --blue2: #0b5f8d;
    --light: #f3f6f8;
    --text: #173247;
    --muted: #71808c;
    --border: #dce5eb;
    --white: #ffffff;
    --shadow: 0 18px 45px rgba(11, 45, 70, .12);
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: #eef2f5;
}

/* LOGIN */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(20,126,177,.22), transparent 32%),
        linear-gradient(135deg, #06395f, #0b719f 55%, #dce9ee);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.login-shell {
    width: 100%;
    max-width: 930px;
}

.login-card {
    display: grid;
    grid-template-columns: 43% 57%;
    background: rgba(255,255,255,.97);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.25);
}

.login-brand {
    min-height: 560px;
    padding: 48px 38px;
    color: white;
    background: linear-gradient(160deg, #06375e, #0877aa);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login-brand img {
    width: 235px;
    max-width: 90%;
    background: white;
    padding: 18px;
    border-radius: 18px;
    margin-bottom: 35px;
}

.brand-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
}

.brand-subtitle {
    margin-top: 9px;
    opacity: .82;
    font-size: 14px;
}

.login-form {
    padding: 58px 60px;
}

.login-form h1 {
    margin: 0 0 8px;
    font-size: 32px;
}

.muted {
    color: var(--muted);
    margin: 0 0 35px;
}

.login-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 19px 0 8px;
    color: #395468;
}

.input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccd9e1;
    border-radius: 10px;
    background: white;
    overflow: hidden;
}

.input-wrap span {
    width: 45px;
    text-align: center;
    color: var(--blue);
}

.input-wrap input {
    border: 0;
    outline: none;
    width: 100%;
    padding: 14px 12px 14px 0;
    font-size: 15px;
}

.btn-primary {
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #075b89, #0b86b7);
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(8,118,173,.25);
}

.btn-primary:hover {
    filter: brightness(1.06);
}

.alert {
    padding: 12px 14px;
    border-radius: 9px;
    background: #fff1f1;
    color: #a12626;
    border: 1px solid #f1caca;
    font-size: 13px;
}

.login-footer {
    margin-top: 50px;
    text-align: center;
    color: #9aa8b2;
    font-size: 12px;
}

/* APP */
.app-page {
    min-height: 100vh;
    background: #f2f5f7;
}

.topbar {
    background: linear-gradient(90deg, #06385f, #075985, #0879aa);
    color: white;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.topbar-inner {
    max-width: 1450px;
    margin: auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 28px;
}

.brand-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.brand-mini img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    background: white;
    border-radius: 8px;
    padding: 5px;
}

.brand-mini strong {
    display: block;
    letter-spacing: 1.5px;
    font-size: 18px;
}

.brand-mini small {
    opacity: .7;
}

.main-nav {
    display: flex;
    align-self: stretch;
    flex: 1;
    justify-content: center;
}

.main-nav a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-left: 1px solid rgba(255,255,255,.15);
    transition: background .2s;
}

.main-nav a:hover {
    background: rgba(255,255,255,.12);
}

.logout-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: white;
    text-decoration: none;
    font-size: 22px;
}

.content {
    max-width: 1250px;
    margin: auto;
    padding: 38px 24px 70px;
}

.welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.welcome h1 {
    margin: 5px 0;
    font-size: 31px;
}

.welcome p {
    color: var(--muted);
    margin: 0;
}

.eyebrow {
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.level-pill, .counter {
    background: #e0f1f8;
    color: #08638f;
    font-weight: 800;
    border-radius: 999px;
    padding: 10px 17px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-bottom: 25px;
}

.info-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 21px;
    display: flex;
    gap: 15px;
    box-shadow: 0 7px 22px rgba(30,65,85,.05);
}

.card-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e9f4f8;
    color: var(--blue);
    font-size: 19px;
}

.card-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #8a9aa5;
    margin-bottom: 4px;
}

.info-card strong {
    display: block;
    font-size: 17px;
}

.info-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.panel, .quick-actions {
    background: white;
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 26px;
    box-shadow: 0 7px 22px rgba(30,65,85,.05);
    margin-bottom: 25px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.panel h2, .quick-actions h2 {
    margin: 5px 0 0;
    font-size: 21px;
}

.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 13px;
}

.cost-card {
    border: 1px solid #dfe8ed;
    border-radius: 12px;
    padding: 17px;
    background: #fbfcfd;
}

.cost-code {
    font-size: 12px;
    font-weight: 800;
    color: var(--blue);
}

.cost-name {
    font-size: 16px;
    font-weight: 700;
    margin: 7px 0 13px;
}

.active-dot {
    color: #70808b;
    font-size: 11px;
}

.active-dot span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #39a56b;
    margin-right: 5px;
}

.empty {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    background: #f7f9fa;
    border-radius: 10px;
}

.action-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.action-card {
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 16px 18px;
    color: var(--text);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    transition: .2s;
}

.action-card:hover {
    border-color: #8bc5db;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.action-card b {
    color: var(--blue);
}

.footer {
    text-align: center;
    padding: 18px;
    color: #7f8e98;
    font-size: 12px;
    border-top: 1px solid #dce4e8;
    background: white;
}

@media (max-width: 850px) {
    .login-card {
        grid-template-columns: 1fr;
    }

    .login-brand {
        min-height: auto;
        padding: 32px;
    }

    .login-brand img {
        width: 170px;
        margin-bottom: 20px;
    }

    .login-form {
        padding: 35px 28px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .topbar-inner {
        flex-wrap: wrap;
        padding: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        min-height: 48px;
    }

    .main-nav a {
        padding: 0 13px;
        white-space: nowrap;
    }
}

/* Menu superior sempre visível */
.topbar{
    position:sticky;
    top:0;
    z-index:1000;
}

/* MENÚ PRINCIPAL UNIFICADO */
.topbar{
    position: sticky;
    top: 0;
    z-index: 1000;
}
.topbar-inner{
    width: 100%;
    max-width: 1500px;
}
.brand-mini{
    flex: 0 0 auto;
}
.main-nav{
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    justify-content: center;
}
.main-nav a{
    flex: 0 0 auto;
    white-space: nowrap;
}
.logout-btn{
    flex: 0 0 42px;
}
@media (max-width: 1050px){
    .topbar-inner{gap:10px;padding:0 12px}
    .brand-mini{min-width:165px}
    .brand-mini img{width:46px;height:46px}
    .brand-mini strong{font-size:15px}
    .main-nav{justify-content:flex-start}
    .main-nav a{padding:0 12px;font-size:13px}
}

/* MENÚ ESTÁTICO GLOBAL - versión estable */
.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    width:100%;
}
.topbar-inner{
    width:100%;
    max-width:1500px;
    box-sizing:border-box;
}
.main-nav{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    justify-content:center !important;
    scrollbar-width:thin;
}
.main-nav a{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center;
    white-space:nowrap !important;
    visibility:visible !important;
}
.logout-btn{
    flex:0 0 42px !important;
}
@media(max-width:1100px){
    .topbar-inner{gap:8px;padding:0 10px}
    .brand-mini{min-width:155px}
    .main-nav{justify-content:flex-start !important}
    .main-nav a{padding-left:10px !important;padding-right:10px !important;font-size:13px !important}
}

/* Corrección menú módulo Consultas */
.topbar{position:sticky !important;top:0 !important;z-index:9999 !important;width:100%;}
.topbar-inner{width:100%;max-width:1500px;box-sizing:border-box;}
.main-nav{display:flex !important;flex:1 1 auto !important;min-width:0 !important;overflow-x:auto !important;overflow-y:hidden !important;justify-content:center !important;}
.main-nav a{display:flex !important;flex:0 0 auto !important;align-items:center;white-space:nowrap !important;visibility:visible !important;}
.main-nav a.current{background:rgba(255,255,255,.10);}
@media(max-width:1100px){
.topbar-inner{gap:8px;padding:0 10px;}
.brand-mini{min-width:155px;}
.main-nav{justify-content:flex-start !important;}
.main-nav a{padding-left:10px !important;padding-right:10px !important;font-size:13px !important;}
}