/* assets/css/app.css
   Sistema visual "RT Gestão" — navegação por navbar superior (sem sidebar
   fixa) + launcher de ícones no Dashboard. Paleta sóbria de saúde, cartões
   com elevação suave e microanimações de hover, pensado para desktop,
   tablet e telas de posto de enfermagem. */

:root {
    --marca-cor: #0d6efd;
    --marca-cor-escura: #0a4fb8;
    --marca-navy: #10233f;
    --marca-navy-2: #16314f;
    --fundo-app: #eef1f7;
    --sombra-suave: 0 .35rem 1.1rem rgba(16, 35, 63, .07);
    --sombra-media: 0 .6rem 1.75rem rgba(16, 35, 63, .12);
    --raio-card: .9rem;
}

html, body {
    min-height: 100vh;
    background: var(--fundo-app);
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------
   Navbar superior (substitui a sidebar) — libera espaço horizontal
   e mantém a navegação sempre acessível via dropdowns.
   --------------------------------------------------------------- */
.navbar-premium {
    background: linear-gradient(90deg, var(--marca-navy) 0%, var(--marca-navy-2) 100%);
    box-shadow: 0 .25rem .9rem rgba(16, 35, 63, .18);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.navbar-premium .navbar-brand {
    font-weight: 600;
    letter-spacing: .01em;
}

.brand-selo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
}

.navbar-premium .nav-link {
    color: rgba(255, 255, 255, .85);
    border-radius: .5rem;
    padding: .5rem .7rem;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-premium .nav-link:hover,
.navbar-premium .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.navbar-premium .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, .14);
    font-weight: 600;
}

.navbar-premium .dropdown-menu {
    border-radius: .7rem;
    padding: .4rem;
    min-width: 15rem;
}

.navbar-premium .dropdown-item {
    border-radius: .5rem;
    padding: .5rem .65rem;
    transition: background-color .15s ease, transform .15s ease;
}

.navbar-premium .dropdown-item:hover {
    background-color: #eef3ff;
    transform: translateX(2px);
}

.navbar-premium .dropdown-item.active {
    background-color: var(--marca-cor);
    color: #fff;
}

.navbar-premium .dropdown-item.active i {
    color: #fff !important;
}

.avatar-usuario {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--marca-cor);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.page-title-bar {
    background: #fff;
    border-bottom: 1px solid rgba(16, 35, 63, .08);
    padding: .85rem 0;
}

.page-title-bar h1 {
    color: var(--marca-navy);
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Cartões premium (usados em todo o sistema)
   --------------------------------------------------------------- */
.card {
    border: none;
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-suave);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid rgba(16, 35, 63, .07);
    font-weight: 600;
    color: var(--marca-navy);
}

/* ---------------------------------------------------------------
   Launcher de ícones do Dashboard: acesso rápido aos módulos sem
   depender de menu lateral. Ícones compactos, com animação de
   entrada e microinteração de hover (elevação + leve rotação do ícone).
   --------------------------------------------------------------- */
.launcher-categoria {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

.launcher-categoria::before {
    content: "";
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--marca-cor);
    display: inline-block;
}

.icone-modulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: .85rem .4rem;
    border-radius: .9rem;
    text-decoration: none;
    color: var(--marca-navy);
    background: #fff;
    border: 1px solid rgba(16, 35, 63, .06);
    position: relative;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease;
    animation: icone-entrar .35s ease both;
}

.icone-modulo:hover,
.icone-modulo:focus {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--sombra-media);
    border-color: rgba(13, 110, 253, .25);
    color: var(--marca-navy);
}

.icone-modulo .icone-modulo-selo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(13, 110, 253, .1);
    color: var(--marca-cor);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, color .2s ease;
}

.icone-modulo:hover .icone-modulo-selo {
    transform: rotate(-8deg) scale(1.12);
    background: var(--marca-cor);
    color: #fff;
}

.icone-modulo .icone-modulo-label {
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.15;
}

.icone-modulo .icone-modulo-badge {
    position: absolute;
    top: .4rem;
    right: .4rem;
}

@keyframes icone-entrar {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards clicáveis (alertas do dashboard): o link em volta do card não deve
   herdar a cor azul padrão de link, e sim a cor de texto normal do card. */
a.card-link-alerta {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: var(--raio-card);
}

a.card-link-alerta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-media);
}

/* ---------------------------------------------------------------
   Tabelas e abas do painel de indicadores
   --------------------------------------------------------------- */
.nav-tabs {
    border-bottom: none;
    gap: .25rem;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: .6rem .6rem 0 0;
    color: #64748b;
    font-weight: 600;
    padding: .6rem 1rem;
}

.nav-tabs .nav-link.active {
    color: var(--marca-cor);
    background: #fff;
    box-shadow: var(--sombra-suave);
}

/* ---------------------------------------------------------------
   Responsividade: tablet/posto de enfermagem e mobile
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table {
        font-size: .85rem;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .icone-modulo .icone-modulo-label {
        font-size: .68rem;
    }
}

/* ---------------------------------------------------------------
   Tela de login (login.php)
   --------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left, var(--marca-navy-2), var(--marca-navy) 60%);
}

.login-card {
    border-radius: 1.1rem;
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .35);
}

.login-icone {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(13, 110, 253, .1);
    color: var(--marca-cor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}