/* ==========================================================
   CRAS CENTRAL • PREFEITURA DE EXTREMA
   Interface interna - versão visual 2.0
   Predominância: azul institucional + branco
========================================================== */

:root{
    --azul-950:#082b5f;
    --azul-900:#0a3471;
    --azul-800:#0d4696;
    --azul-700:#0f56b7;
    --azul-600:#1769d2;
    --azul-500:#2a7be3;
    --azul-100:#e8f2ff;
    --azul-50:#f3f8ff;
    --branco:#ffffff;
    --fundo:#f4f7fb;
    --texto:#172033;
    --texto-2:#5d6b82;
    --borda:#e1e8f2;
    --verde:#149257;
    --verde-bg:#eaf8f1;
    --amarelo:#b87500;
    --amarelo-bg:#fff6df;
    --vermelho:#cc3d4a;
    --vermelho-bg:#fff0f2;
    --cinza:#778397;
    --sombra:0 10px 30px rgba(13,52,113,.08);
    --sombra-forte:0 18px 55px rgba(13,52,113,.16);
    --radius:18px;
    --radius-sm:12px;
    --sidebar:282px;
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:var(--fundo);
}

body{
    margin:0;
    min-height:100vh;
    color:var(--texto);
    background:
        radial-gradient(circle at 88% -5%, rgba(42,123,227,.10), transparent 28%),
        var(--fundo);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{
    font:inherit;
}

button,a,input,select,textarea{
    -webkit-tap-highlight-color:transparent;
}

a{
    color:inherit;
}

/* ==========================================================
   LOGIN
========================================================== */

body.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:32px;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(23,105,210,.17), transparent 31%),
        radial-gradient(circle at 90% 88%, rgba(15,86,183,.10), transparent 27%),
        linear-gradient(135deg,#eef5fd 0%,#f9fbfe 48%,#edf4fb 100%);
}

.login-shell{
    width:min(1120px,100%);
    min-height:660px;
    display:grid;
    grid-template-columns:46% 54%;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(8,52,113,.10);
    border-radius:28px;
    box-shadow:0 28px 80px rgba(7,43,95,.16);
}

.login-brand{
    position:relative;
    min-width:0;
    padding:54px 52px 42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
        linear-gradient(145deg,#062b61 0%,#083c84 56%,#0f56b7 100%);
}

.login-brand::before,
.login-brand::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.login-brand::before{
    width:390px;height:390px;right:-220px;top:-190px;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018);
}
.login-brand::after{
    width:235px;height:235px;left:-130px;bottom:-100px;
    background:rgba(255,255,255,.04);
}

.login-brand-content,.login-brand-footer{position:relative;z-index:1}

.login-logo-box{
    width:255px;
    height:178px;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:14px 16px;
    margin-bottom:54px;
    background:#fff;
    border:1px solid rgba(255,255,255,.74);
    border-radius:21px;
    box-shadow:0 16px 42px rgba(0,0,0,.18);
}
.login-logo-box img{max-width:86%;max-height:86%;width:auto;height:auto;object-fit:contain;object-position:center center;display:block;margin:0 auto}

.login-brand .eyebrow{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:8px 11px;
    margin-bottom:15px;
    color:#d9eaff;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    font-size:10.5px;
    font-weight:850;
    letter-spacing:.105em;
    text-transform:uppercase;
}

.login-brand h1{
    margin:0;
    color:#fff;
    font-size:44px;
    line-height:1.02;
    letter-spacing:-.04em;
}
.login-system-title{
    margin:9px 0 18px;
    color:#bcd9ff!important;
    font-size:19px!important;
    line-height:1.25!important;
    font-weight:700;
}
.login-brand-copy{
    max-width:390px!important;
    margin:0!important;
    color:#d6e7fb!important;
    font-size:14.5px!important;
    line-height:1.72!important;
}

.login-brand-footer{
    display:flex;
    align-items:center;
    gap:11px;
    color:#c7def9;
    font-size:12.5px;
}
.login-brand-footer .dot{
    flex:0 0 8px;
    width:8px;height:8px;
    border-radius:50%;
    background:#65e6aa;
    box-shadow:0 0 0 5px rgba(101,230,170,.11);
}

.login-panel{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:64px 70px;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.login-form-box{width:min(405px,100%)}
.login-mobile-logo{display:none;overflow:hidden}
.login-mobile-logo img{max-width:84%;max-height:84%;width:auto;height:auto;object-fit:contain;object-position:center center;display:block;margin:0 auto}

.login-panel-header{margin-bottom:31px}
.login-panel-header .mini-brand{
    color:var(--azul-700);
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.login-panel-header h2{
    margin:8px 0 8px;
    color:var(--azul-950);
    font-size:36px;
    line-height:1.05;
    letter-spacing:-.04em;
}
.login-panel-header p{
    margin:0;
    color:var(--texto-2);
    font-size:14px;
    line-height:1.65;
}

.login-form .field{margin-bottom:17px}
.login-form label{
    display:block;
    margin-bottom:7px;
    color:#33425b;
    font-size:12.5px;
    font-weight:800;
}
.login-input-wrap{position:relative}
.login-field-icon{
    position:absolute;
    left:17px;
    top:50%;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    color:#7d8da5;
    pointer-events:none;
    z-index:2;
}
.login-field-icon svg{width:20px;height:20px;display:block}
.login-input-wrap input{
    width:100%;
    min-height:52px;
    margin:0;
    padding:0 16px 0 58px;
    color:#1a2638;
    background:#fff;
    border:1px solid #d9e3ef;
    border-radius:13px;
    outline:none;
    box-shadow:0 1px 1px rgba(8,52,113,.02);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.login-input-wrap.has-toggle input{padding-right:56px}
.login-input-wrap input::placeholder{color:#9aa7b8}
.login-input-wrap input:focus{
    border-color:#4f8edc;
    box-shadow:0 0 0 4px rgba(23,105,210,.10);
    background:#fff;
}

.password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    width:40px;height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transform:translateY(-50%);
    color:#65758c;
    background:transparent;
    border:0;
    border-radius:10px;
    box-shadow:none;
}
.password-toggle svg{position:static;width:19px;height:19px;display:block;transform:none;pointer-events:none}
.password-toggle:hover{color:var(--azul-700);background:var(--azul-50)}

.login-submit{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:7px;
    color:#fff;
    background:linear-gradient(135deg,#0d4696,#1769d2);
    border:0;
    border-radius:13px;
    box-shadow:0 12px 28px rgba(15,86,183,.20);
    font-weight:800;
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.login-submit:hover{filter:brightness(1.035);box-shadow:0 14px 34px rgba(15,86,183,.25);transform:translateY(-1px)}
.login-submit:active{transform:translateY(0)}

.login-help{
    margin:23px 0 0;
    padding-top:20px;
    color:#8490a1;
    border-top:1px solid #e9eef5;
    font-size:11.5px;
    text-align:center;
    line-height:1.55;
}

/* Compatibilidade com a tela antiga, caso algum arquivo ainda utilize .login. */
.login{
    width:min(440px,calc(100% - 32px));
    margin:8vh auto;
    padding:38px;
    background:#fff;
    border:1px solid var(--borda);
    border-radius:22px;
    box-shadow:var(--sombra-forte);
}
.login h1{margin:0;text-align:center;color:var(--azul-900)}
.login h3{margin:8px 0 26px;text-align:center;color:var(--texto-2)}

/* ==========================================================
   LAYOUT GERAL
========================================================== */

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

.menu{
    position:sticky;
    top:0;
    flex:0 0 var(--sidebar);
    width:var(--sidebar);
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:22px 18px 18px;
    overflow-y:auto;
    color:#fff;
    background:linear-gradient(180deg,#082f68 0%,#0a397d 54%,#082e66 100%);
    border-right:1px solid rgba(255,255,255,.08);
    z-index:120;
}

.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

.menu-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:5px 5px 18px;
    margin-bottom:9px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.menu-brand-logo{
    flex:0 0 62px;
    width:62px;
    height:54px;
    padding:4px 6px;
    border-radius:12px;
    background:#fff;
}

.menu-brand-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.menu-brand-text strong{
    display:block;
    font-size:17px;
    line-height:1.15;
    letter-spacing:-.02em;
}

.menu-brand-text span{
    display:block;
    margin-top:4px;
    color:#afcef3;
    font-size:11px;
    line-height:1.3;
}

.menu-section-title{
    padding:14px 11px 7px;
    color:#8fb9ec;
    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.menu-nav{
    display:grid;
    gap:4px;
}

.menu-link{
    min-height:45px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    color:#dbeaff;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:12px;
    font-size:13.5px;
    font-weight:650;
    transition:.18s ease;
}

.menu-link svg{
    width:19px;
    height:19px;
    flex:0 0 19px;
    opacity:.88;
}

.menu-link:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.08);
    transform:translateX(2px);
}

.menu-link.active{
    color:var(--azul-950);
    background:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.14);
}

.menu-link.active svg{color:var(--azul-700);opacity:1}

.menu-spacer{flex:1;min-height:15px}

.menu-user{
    margin-top:16px;
    padding:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.055);
}

.menu-user-main{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-avatar{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    border-radius:11px;
    color:var(--azul-950);
    background:#fff;
    font-weight:900;
}

.menu-user strong{
    display:block;
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:13px;
}

.menu-user small{
    display:block;
    margin-top:2px;
    color:#a9c9ee;
    font-size:11px;
    text-transform:capitalize;
}

.menu-logout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:38px;
    margin-top:11px;
    color:#dceaff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;
    font-size:12px;
    font-weight:750;
    transition:.18s ease;
}

.menu-logout:hover{background:rgba(255,255,255,.09);color:#fff}
.menu-logout svg{width:16px;height:16px}

.mobile-menu-button,
.menu-overlay{
    display:none;
}

.conteudo{
    flex:1;
    min-width:0;
    width:calc(100% - var(--sidebar));
    padding:30px clamp(22px,3vw,44px) 52px;
}

.topo{
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 0 22px;
    margin-bottom:22px;
    border-bottom:1px solid var(--borda);
}

.topo h1{
    margin:0;
    color:var(--azul-950);
    font-size:clamp(25px,2.4vw,34px);
    line-height:1.15;
    letter-spacing:-.035em;
}

.topo p{
    margin:7px 0 0;
    color:var(--texto-2);
    font-size:14px;
}

.topo > span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:260px;
    padding:10px 14px;
    border:1px solid var(--borda);
    border-radius:999px;
    color:#41506a;
    background:#fff;
    box-shadow:0 4px 14px rgba(13,52,113,.04);
    font-size:12.5px;
    font-weight:700;
}

.topo > span::before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#35b779;
    box-shadow:0 0 0 4px rgba(53,183,121,.11);
}

.painel{
    margin-bottom:22px;
    padding:24px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--borda);
    border-radius:var(--radius);
    box-shadow:var(--sombra);
}

.painel h2{
    margin:0 0 18px;
    color:var(--azul-950);
    font-size:18px;
    letter-spacing:-.018em;
}

.painel > p{
    color:var(--texto-2);
    line-height:1.65;
}

/* ==========================================================
   COMPONENTES / FORMULÁRIOS
========================================================== */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
    width:100%;
    min-height:45px;
    margin:0;
    padding:10px 13px;
    color:var(--texto);
    background:#fff;
    border:1px solid #d8e1ed;
    border-radius:11px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea{
    min-height:100px;
    resize:vertical;
    line-height:1.5;
}

input::placeholder,textarea::placeholder{color:#98a4b6}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
    border-color:#73a9ec;
    box-shadow:0 0 0 4px rgba(42,123,227,.10);
}

input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0 7px 0 0;
    vertical-align:-4px;
    accent-color:var(--azul-700);
}

label{
    color:#43516a;
    font-size:13px;
    font-weight:700;
}

button:not(.password-toggle):not(.login-submit),.btn{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 17px;
    color:#fff;
    background:linear-gradient(180deg,var(--azul-600),var(--azul-700));
    border:1px solid var(--azul-700);
    border-radius:11px;
    box-shadow:0 5px 14px rgba(15,86,183,.18);
    cursor:pointer;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

button:not(.password-toggle):not(.login-submit):hover,.btn:hover{
    filter:brightness(.97);
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(15,86,183,.24);
}

button:not(.password-toggle):not(.login-submit):active,.btn:active{transform:translateY(0)}

.btn-secondary{
    color:var(--azul-800);
    background:#fff;
    border-color:#cbd9eb;
    box-shadow:none;
}

.btn-danger{
    color:#a52735;
    background:#fff5f6;
    border-color:#f1c2c8;
    box-shadow:none;
}

.erro,.sucesso{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 18px;
    padding:13px 15px;
    border-radius:12px;
    font-size:13.5px;
    line-height:1.5;
    font-weight:650;
}

.erro{
    color:#a42b38;
    background:var(--vermelho-bg);
    border:1px solid #f2c5cb;
}

.sucesso{
    color:#117244;
    background:var(--verde-bg);
    border:1px solid #c3ead6;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.form-grid textarea,
.form-grid button{
    grid-column:1 / -1;
}

.painel form:not(.filtro):not(.form-grid){
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

.painel form:not(.filtro):not(.form-grid) > input:not([type="hidden"]),
.painel form:not(.filtro):not(.form-grid) > select{
    flex:1 1 230px;
}

.painel form:not(.filtro):not(.form-grid) > label{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 4px;
}

.filtro{
    display:flex;
    align-items:center;
    gap:11px;
    flex-wrap:wrap;
}

.filtro input:not([type="checkbox"]),
.filtro select{
    width:auto;
    min-width:180px;
}

.filtro .pesquisa-agenda{
    min-width:280px;
    margin-left:auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23778597' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:13px center;
    padding-left:40px;
}

/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard-welcome{
    position:relative;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:24px;
    overflow:hidden;
    margin-bottom:24px;
    padding:28px 30px;
    color:#fff;
    background:linear-gradient(115deg,var(--azul-950),var(--azul-700));
    border-radius:22px;
    box-shadow:0 15px 40px rgba(13,52,113,.20);
}

.dashboard-welcome::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-170px;
    top:-160px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.dashboard-welcome > *{position:relative;z-index:1}
.dashboard-welcome .eyebrow{color:#bcd8f9;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.dashboard-welcome h2{margin:7px 0 9px;color:#fff;font-size:27px;letter-spacing:-.035em}
.dashboard-welcome p{max-width:620px;margin:0;color:#d6e7fb;line-height:1.6;font-size:14px}
.dashboard-date{align-self:center;justify-self:end;text-align:right}
.dashboard-date strong{display:block;font-size:36px;letter-spacing:-.04em}
.dashboard-date span{display:block;margin-top:2px;color:#c5dcf8;font-size:13px;text-transform:capitalize}

.cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:23px;
}

.card{
    position:relative;
    overflow:hidden;
    min-height:142px;
    padding:21px;
    background:#fff;
    border:1px solid var(--borda);
    border-radius:17px;
    box-shadow:var(--sombra);
}

.card::before{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    right:-22px;
    top:-24px;
    border-radius:50%;
    background:var(--azul-100);
}

.card h3{
    margin:0;
    color:#5f6e84;
    font-size:12px;
    font-weight:800;
    letter-spacing:.015em;
}

.card p{
    margin:14px 0 0;
    color:var(--azul-950);
    font-size:34px;
    line-height:1;
    font-weight:850;
    letter-spacing:-.045em;
}

.card small{
    display:block;
    margin-top:11px;
    color:#8a96a8;
    font-size:11.5px;
}

.card.card-success::before{background:#e7f7ef}
.card.card-success p{color:#148554}
.card.card-warning::before{background:#fff4d9}
.card.card-warning p{color:#a96e05}
.card.card-red::before{background:#ffebee}
.card.card-red p{color:#bf3744}

.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);
    gap:22px;
}

.quick-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.quick-action{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:76px;
    padding:15px;
    color:var(--texto);
    text-decoration:none;
    border:1px solid var(--borda);
    border-radius:14px;
    background:#fbfdff;
    transition:.18s ease;
}

.quick-action:hover{border-color:#b9d1ef;background:var(--azul-50);transform:translateY(-1px)}
.quick-action-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;align-self:center;flex:0 0 42px;color:var(--azul-700);background:var(--azul-100);border-radius:12px;line-height:0}
.quick-action-icon svg{width:21px;height:21px;display:block}
.quick-action-body{display:block;flex:1;min-width:0}
.quick-action-body strong{display:block;font-size:13px;color:var(--azul-950);line-height:1.25}
.quick-action-body span{display:block;margin-top:4px;color:var(--texto-2);font-size:11.5px;line-height:1.35}

.status-list{display:grid;gap:10px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #edf1f6}
.status-row:last-child{border-bottom:0}
.status-row .left{display:flex;align-items:center;gap:9px;color:#425169;font-size:13px;font-weight:700}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--azul-500)}
.status-dot.green{background:#29aa6b}.status-dot.orange{background:#e9a31b}.status-dot.red{background:#dd5260}
.status-row strong{color:var(--azul-950);font-size:14px}

/* ==========================================================
   TABELAS
========================================================== */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
}

th{
    padding:12px 14px;
    color:#59708c;
    background:#f5f8fc;
    border-top:1px solid #e2e9f2;
    border-bottom:1px solid #e2e9f2;
    text-align:left;
    font-size:11px;
    font-weight:850;
    letter-spacing:.045em;
    text-transform:uppercase;
}

th:first-child{border-left:1px solid #e2e9f2;border-radius:11px 0 0 11px}
th:last-child{border-right:1px solid #e2e9f2;border-radius:0 11px 11px 0}

td{
    padding:13px 14px;
    color:#334158;
    border-bottom:1px solid #edf1f6;
    vertical-align:middle;
}

tbody tr:last-child td{border-bottom:0}
table tr:hover td{background:#fbfdff}

td button{min-height:36px;padding:7px 11px;font-size:11.5px}
td input:not([type="checkbox"]):not([type="radio"]),td select{min-height:39px;padding:7px 9px;font-size:12px}

.table-scroll,.tabela-area{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================
   AGENDA
========================================================== */

.tabela-area{
    margin-top:14px;
    border:1px solid var(--borda);
    border-radius:14px;
    background:#fff;
}

.agenda{
    min-width:1080px;
    border-spacing:0;
}

.agenda th{
    position:sticky;
    top:0;
    z-index:4;
    padding:13px 10px;
    color:#fff;
    background:var(--azul-900);
    border-color:rgba(255,255,255,.08);
    text-align:center;
    font-size:11px;
}

.agenda th:first-child{
    left:0;
    z-index:6;
    min-width:90px;
    border-radius:0;
}

.agenda th:last-child{border-radius:0}
.agenda td{min-width:174px;padding:8px;border-right:1px solid #edf1f6;background:#fff}
.agenda td:last-child{border-right:0}
.agenda tr:hover td{background:#fbfdff}

.hora{
    position:sticky;
    left:0;
    z-index:3;
    min-width:90px!important;
    color:var(--azul-900)!important;
    background:#f3f7fc!important;
    border-right:1px solid #dce7f3!important;
    text-align:center;
    font-weight:850;
    font-size:12px;
}

.celula-livre,.celula-bloqueada{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    border-radius:11px;
    text-align:center;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.celula-livre{
    color:#3d6d9d;
    background:#f5f9fe;
    border:1px dashed #a9c8e8;
    transition:.16s ease;
}

.celula-livre:hover{
    color:#fff;
    background:var(--azul-600);
    border-color:var(--azul-600);
    transform:none;
}

.celula-bloqueada{
    color:#788598;
    background:#f0f3f6;
    border:1px solid #e2e7ed;
    cursor:not-allowed;
}

.ag-card{
    min-height:94px;
    padding:12px;
    border:1px solid transparent;
    border-left-width:4px;
    border-radius:11px;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
}

.ag-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(13,52,113,.10)}
.ag-card strong{display:block;margin-bottom:6px;color:#24324a;font-size:12.5px;line-height:1.3}
.ag-card small{display:block;margin-top:3px;color:#66758c;font-size:10.5px;line-height:1.35}
.ag-card small:last-child{margin-top:8px}

.agendado{background:var(--amarelo-bg);border-color:#ffe3a4;border-left-color:#e3a21e}
.compareceu{background:var(--verde-bg);border-color:#c7ebd8;border-left-color:#27a869}
.faltou{background:var(--vermelho-bg);border-color:#f1c9ce;border-left-color:#d44a57}
.cancelado{background:#f1f3f6;border-color:#e0e5eb;border-left-color:#8995a6}

.legenda{
    display:flex;
    gap:8px;
    margin:3px 0 15px;
    flex-wrap:wrap;
}

.legenda span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    color:#506078;
    background:#fff;
    border:1px solid var(--borda);
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.legenda span::before{content:"";width:8px;height:8px;border-radius:50%}
.leg-agendado::before{background:#e3a21e}.leg-compareceu::before{background:#27a869}.leg-faltou::before{background:#d44a57}.leg-cancelado::before{background:#8995a6}

.linha-periodo td{
    padding:9px 13px!important;
    color:#6f7f95!important;
    background:#eef4fb!important;
    border-top:1px solid #dce8f6!important;
    border-bottom:1px solid #dce8f6!important;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.hide-search{display:none!important}

/* ==========================================================
   MODAIS
========================================================== */

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:500;
    padding:28px 18px;
    overflow-y:auto;
    background:rgba(8,26,52,.58);
    backdrop-filter:blur(5px);
}

.modal-box{
    position:relative;
    width:min(560px,100%);
    margin:4vh auto;
    padding:26px;
    background:#fff;
    border:1px solid rgba(255,255,255,.35);
    border-radius:20px;
    box-shadow:0 28px 90px rgba(4,25,56,.28);
    animation:modalIn .17s ease-out;
}

@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.modal-box h2{
    margin:0 42px 7px 0;
    color:var(--azul-950);
    font-size:22px;
    letter-spacing:-.025em;
}

.modal-box > p{margin:0 0 19px;color:var(--texto-2);font-size:13px;line-height:1.5}

.modal-box form{margin-top:20px}
.modal-box form:not(.form-grid){display:grid;gap:12px}

.fechar{
    position:absolute;
    right:16px;
    top:15px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    float:none;
    color:#718096;
    background:#f3f6fa;
    border-radius:10px;
    cursor:pointer;
    font-size:24px;
    line-height:1;
}

.fechar:hover{color:var(--azul-800);background:var(--azul-100)}
body.modal-open{overflow:hidden}

/* ==========================================================
   DETALHES E UTILIDADES
========================================================== */

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:850;
}

.empty-state{padding:36px 18px;text-align:center;color:var(--texto-2)}
.section-note{margin:-8px 0 18px;color:var(--texto-2);font-size:12.5px;line-height:1.55}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:1180px){
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
    :root{--sidebar:282px}

    .sistema{display:block}
    .conteudo{width:100%;padding:78px 16px 36px}

    .menu{
        position:fixed;
        left:0;
        top:0;
        transform:translateX(-105%);
        box-shadow:18px 0 45px rgba(4,28,63,.22);
        transition:transform .22s ease;
    }

    body.menu-open .menu{transform:translateX(0)}

    .mobile-menu-button{
        position:fixed;
        left:14px;
        top:14px;
        z-index:130;
        width:46px;
        height:46px;
        display:grid;
        place-items:center;
        padding:0;
        color:var(--azul-900);
        background:#fff;
        border:1px solid var(--borda);
        border-radius:13px;
        box-shadow:0 7px 22px rgba(13,52,113,.13);
    }

    .mobile-menu-button svg{width:22px;height:22px}

    .menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:110;
        background:rgba(7,25,49,.45);
        opacity:0;
        visibility:hidden;
        transition:.2s ease;
    }

    body.menu-open .menu-overlay{opacity:1;visibility:visible}

    .topo{min-height:auto;padding:0 0 18px;margin-bottom:18px;align-items:flex-start}
    .topo > span{display:none}

    .painel{padding:18px;border-radius:15px}
    .form-grid{grid-template-columns:1fr}
    .form-grid textarea,.form-grid button{grid-column:auto}

    .filtro{align-items:stretch}
    .filtro label{width:100%;margin-bottom:-4px}
    .filtro input:not([type="checkbox"]),.filtro select,.filtro .pesquisa-agenda{width:100%;min-width:0;margin-left:0}
    .filtro button{flex:1}

    .dashboard-welcome{grid-template-columns:1fr;padding:24px}
    .dashboard-date{justify-self:start;text-align:left}

    .login-shell{grid-template-columns:1fr;min-height:auto;max-width:520px}
    .login-brand{display:none}
    .login-panel{padding:42px 34px}
    .login-mobile-logo{width:170px;height:110px;display:grid;place-items:center;margin:0 0 27px;padding:10px;background:#fff;border:1px solid var(--borda);border-radius:15px;box-shadow:0 8px 24px rgba(13,52,113,.08)}
}

@media (max-width:620px){
    body.login-page{padding:14px}
    .login-shell{border-radius:20px}
    .login-panel{padding:30px 22px}
    .login-mobile-logo{width:150px;height:98px;margin-bottom:24px}
    .login-panel-header h2{font-size:29px}

    .conteudo{padding-left:12px;padding-right:12px}
    .topo h1{font-size:25px}
    .topo p{font-size:12.5px;line-height:1.5}

    .cards{grid-template-columns:1fr 1fr;gap:10px}
    .card{min-height:126px;padding:17px}
    .card h3{font-size:10.5px;line-height:1.35}
    .card p{font-size:29px}
    .card small{font-size:10px}

    .quick-actions{grid-template-columns:1fr}

    .painel{padding:15px}
    .painel h2{font-size:17px}

    button:not(.password-toggle):not(.login-submit),.btn{width:100%}
    .filtro button{width:auto}
    td button{width:auto}

    .modal{padding:14px 10px}
    .modal-box{margin:2vh auto;padding:21px 17px;border-radius:16px}
    .modal-box h2{font-size:20px}

    .agenda{min-width:920px}
    .agenda td{min-width:155px;padding:6px}
    .celula-livre,.celula-bloqueada{min-height:76px}
}

@media (max-width:410px){
    .cards{grid-template-columns:1fr}
    .card{min-height:112px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Tabelas administrativas continuam utilizáveis em telas estreitas. */
.painel > table{min-width:680px;}
.painel:has(> table){overflow-x:auto;}