@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('./app-shell.css');


/* ==========================================
LOTRIX DESIGN SYSTEM 2026
========================================== */


:root{

    --primary:#16834B;
    --primary-hover:#166534;
    --primary-dark:#14532D;

    --secondary:#2563EB;

    --background:#F4F7F8;

    --surface:#FFFFFF;

    --surface-subtle:#F8FAFC;

    --text:#0B1C2A;

    --text-light:#64748B;

    --border:#DCE6E8;

    --border-strong:#CBD5E1;

    --success:#16A34A;

    --warning:#F59E0B;

    --danger:#DC2626;

    --radius:16px;

    --radius-sm:10px;


    --shadow:

    0 10px 25px rgba(15,23,42,.08);

}





/* ==========================================
RESET
========================================== */


*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    width:100%;

    min-height:100%;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}




body{

    width:100%;

    min-width:320px;

    min-height:100vh;

    overflow-x:hidden;


    font-family:

    "Inter",
    Arial,
    sans-serif;


    font-size:14px;

    line-height:1.5;


    background:

    var(--background);


    color:

    var(--text);

}



a{

    text-decoration:none;

    color:inherit;

}



button,
input,
select,
textarea{

    font-family:inherit;

}



button{

    cursor:pointer;

}






/* ==========================================
LAYOUT PRINCIPAL
CORREÇÃO SIDEBAR + DASHBOARD
========================================== */



.layout{

    display:flex;

    width:100%;

    min-height:100vh;

    position:relative;

}





/*
A sidebar é fixa.
O conteúdo precisa respeitar os 250px.
*/


.content{

    flex:1;

    width:

    calc(100% - 250px);


    margin-left:250px;


    min-height:100vh;


    padding:

    32px 40px 50px;


    box-sizing:border-box;


    position:relative;


    top:0;

}





.dashboard-page{

    position:relative;

    top:0;

}






/* ==========================================
BOTÕES
========================================== */

button,
.button,
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 11px 18px;

    border: none;
    border-radius: var(--radius-sm);

    background: var(--primary);
    color: white;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    position: relative;
    overflow: hidden;

    transition:
        transform .15s ease,
        background .2s ease,
        box-shadow .2s ease;

    box-shadow: 0 8px 20px rgba(37,99,235,.20);

    -webkit-tap-highlight-color: transparent;
}

/* Movimento ao passar o mouse */
button:hover,
.button:hover,
.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37,99,235,.25);
}

/* Movimento ao clicar */
button:active,
.button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: scale(.96);
    box-shadow: 0 4px 10px rgba(37,99,235,.15);
}

/* Botões desativados */
button:disabled,
.button:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botão secundário */
.btn-secondary {
    background: #EFF6FF;
    color: var(--primary);
    border: 1px solid #BFDBFE;
    box-shadow: none;
}

.btn-secondary:hover {
    background: #DBEAFE;
    transform: translateY(-2px);
}

/* Botão perigo */
.btn-danger {
    background: var(--danger);
}

.btn-danger:hover {
    background: #B91C1C;
    transform: translateY(-2px);
}

/* Efeito de onda ao clicar */
.button-ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: buttonRipple .5s ease-out forwards;
}

@keyframes buttonRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .8;
    }

    100% {
        transform: translate(-50%, -50%) scale(18);
        opacity: 0;
    }
}


/* ==========================================
INPUTS
========================================== */





input,
select,
textarea{


    width:100%;


    min-height:44px;


    padding:

    10px 12px;


    border:

    1px solid var(--border-strong);


    border-radius:

    var(--radius-sm);


    background:

    var(--surface);


    color:

    var(--text);


}



input:focus,
select:focus,
textarea:focus{


    outline:none;


    border-color:

    var(--primary);


    box-shadow:

    0 0 0 4px rgba(37,99,235,.15);


}



label{


    display:block;


    margin-bottom:6px;


    font-size:13px;


    font-weight:600;


}



.campo,
.input-group{


    margin-bottom:18px;


}







/* ==========================================
BOXES PADRÃO
========================================== */


.form-box,
.table-box,
.dashboard-box{


    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    25px;



    margin-top:

    25px;



    box-shadow:

    var(--shadow);


}




.form-box h2,
.table-box h2,
.dashboard-box h2{


    font-size:

    18px;



    font-weight:

    700;



    margin-bottom:

    20px;


}








/* ==========================================
CARDS
========================================== */


.card{


    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    22px;



    box-shadow:

    var(--shadow);



    transition:.25s;


}



.card:hover{


    transform:

    translateY(-3px);


}








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


.table-box{


    width:100%;


    overflow-x:auto;


}



table{


    width:100%;


    border-collapse:collapse;


}



thead{


    background:

    var(--surface-subtle);


}



th{


    padding:

    14px;



    text-align:left;



    font-size:

    12px;



    text-transform:

    uppercase;



    letter-spacing:

    .03em;



    color:#475569;


}



td{


    padding:

    14px;



    color:#475569;



    border-bottom:

    1px solid var(--border);


}



tbody tr{


    transition:.15s;


}



tbody tr:hover{


    background:

    #EFF6FF;


}








/* ==========================================
BADGES
========================================== */


.status,
.badge{


    display:inline-flex;



    align-items:center;



    padding:

    5px 12px;



    border-radius:

    999px;



    font-size:

    12px;



    font-weight:

    600;


}



.badge-green{


    background:#DCFCE7;


    color:#166534;


}



.badge-blue{


    background:#DBEAFE;


    color:#1E40AF;


}



.badge-red{


    background:#FEE2E2;


    color:#991B1B;


}



.status-warning{


    background:#FEF3C7;


    color:#92400E;


}








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


.modal-sac,
.modal-usuario{


    display:none;


    position:fixed;


    inset:0;



    background:

    rgba(15,23,42,.55);



    justify-content:center;


    align-items:center;



    z-index:

    9999;


}




.modal-content,
.usuario-modal{


    width:

    500px;



    max-width:

    95%;



    background:

    var(--surface);



    padding:

    30px;



    border-radius:

    var(--radius);



    box-shadow:

    0 20px 50px rgba(15,23,42,.25);


}








/* ==========================================
ANIMAÇÕES
========================================== */


@keyframes aparecer{


    from{


        opacity:0;


        transform:

        translateY(10px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}




.animar{


    animation:

    aparecer .3s ease;


}








/* ==========================================
SCROLL
========================================== */


::-webkit-scrollbar{


    width:

    8px;


}



::-webkit-scrollbar-track{


    background:

    #E2E8F0;


}



::-webkit-scrollbar-thumb{


    background:

    #94A3B8;



    border-radius:

    20px;


}



::-webkit-scrollbar-thumb:hover{


    background:

    #64748B;


}
/* ==========================================
RESPONSIVIDADE
========================================== */


@media(max-width:1100px){


    .content{


        margin-left:

        230px;


        width:

        calc(100% - 230px);



        padding:

        25px;



    }


}







@media(max-width:900px){


    .content{


        margin-left:

        80px;



        width:

        calc(100% - 80px);



        padding:

        24px;



    }



}







@media(max-width:640px){


    .content{


        margin-left:

        0;



        width:

        100%;



        padding:

        16px 16px 90px;



    }




    .form-box,
    .table-box,
    .dashboard-box{


        padding:

        18px;



        border-radius:

        12px;


    }




    .modal-content,
    .usuario-modal{


        width:

        100%;



        max-width:

        100%;



        max-height:

        calc(100vh - 30px);



        overflow-y:auto;



        border-radius:

        16px 16px 0 0;



    }




    .modal-sac,
    .modal-usuario{


        align-items:

        flex-end;


    }


}









/* ==========================================
DARK MODE LOTRIX
========================================== */


[data-theme="dark"]{


    --background:#0B1220;


    --surface:#111827;


    --surface-subtle:#1E293B;


    --text:#F8FAFC;


    --text-light:#94A3B8;


    --border:#334155;


    --border-strong:#475569;



    --primary:#2563EB;


    --primary-hover:#3B82F6;



    --shadow:

    0 15px 35px rgba(0,0,0,.45);


}






[data-theme="dark"] body{


    background:

    var(--background);


    color:

    var(--text);


}





[data-theme="dark"] .card,
[data-theme="dark"] .form-box,
[data-theme="dark"] .table-box,
[data-theme="dark"] .dashboard-box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .usuario-modal{


    background:

    var(--surface);



    border-color:

    var(--border);



    box-shadow:

    var(--shadow);


}








/* ==========================================
IA LOTRIX
========================================== */


.ia-box{


    background:

    linear-gradient(
        135deg,
        #EFF6FF,
        #FFFFFF
    );



    border:

    1px solid #BFDBFE;



    border-radius:

    var(--radius);



    padding:

    25px;



    margin-top:

    25px;


}





.ia-box h2{


    color:

    var(--primary);



    font-size:

    20px;



    margin-bottom:

    10px;


}





.ia-box p{


    color:

    var(--text-light);


}





#mensagemIA{


    margin-bottom:

    15px;


}





#respostaIA{


    background:

    var(--surface-subtle);



    border:

    1px solid var(--border);



    border-radius:

    12px;



    padding:

    18px;



    min-height:

    80px;



    white-space:

    pre-line;


}






.ia-botoes,
.ia-acoes,
.pergunta-rapida{


    display:flex;


    flex-wrap:wrap;



    gap:

    10px;



    margin-top:

    15px;


}





.ia-botoes button,
.ia-acoes button{


    background:

    var(--primary);



    color:white;



    border:none;



    border-radius:

    8px;



    padding:

    10px 15px;


}




.ia-botoes button:hover,
.ia-acoes button:hover{


    background:

    var(--primary-hover);



    transform:translateY(-2px);


}







/* RESPOSTA IA */


.ia-resposta{


    margin-top:

    15px;



    padding:

    18px;



    border-radius:

    12px;



    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-left:

    5px solid var(--primary);



    box-shadow:

    var(--shadow);


}







/* ==========================================
UTILITÁRIOS
========================================== */


.text-primary{

    color:

    var(--primary);

}



.text-success{

    color:

    var(--success);

}



.text-danger{

    color:

    var(--danger);

}



.text-warning{

    color:

    var(--warning);

}



.mt-10{

    margin-top:

    10px;

}



.mt-20{

    margin-top:

    20px;

}



.hidden{

    display:none!important;

}



.flex{

    display:flex;

}



.center{

    align-items:center;

    justify-content:center;

}








/* ==========================================
CORREÇÃO FINAL DASHBOARD
EVITA DESLOCAMENTO VERTICAL
========================================== */


.layout,
.sidebar,
.content{


    transform:none !important;


}


.dashboard-page{


    top:

    0 !important;


}

/* =========================================================
   LOTRIX — CORREÇÃO FINAL DO BOTÃO DO MENU MOBILE
========================================================= */

button.menu-toggle {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    z-index: 100001 !important;

    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;
}

button.menu-toggle svg,
button.menu-toggle i {
    pointer-events: none !important;
}
/* =========================================================
   LOTRIX — CABEÇALHO MOBILE
   Botão do menu + título sem sobreposição
========================================================= */

@media (max-width: 900px) {

    /* Espaço para o botão não ficar em cima do título */
    .page-header,
    .header,
    .content-header,
    main > header {
        padding-left: 70px !important;
        position: relative !important;
    }

    /* Caso o título esteja dentro de um container */
    .page-title,
    .content-title,
    .header-title {
        margin-left: 0 !important;
    }

    /* Botão do menu */
    button.menu-toggle {
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 100001 !important;
    }

    /* Evita que o título fique escondido atrás do botão */
    main {
        padding-top: 8px !important;
    }

    /* Título da página */
    h1 {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Listas do Lotrix: transformar tabelas de dados em cartões no celular. */
@media (max-width: 700px) {
    .lotrix-mobile-table-box {
        overflow-x: hidden !important;
        padding: 14px !important;
    }

    table.lotrix-mobile-cards {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }

    table.lotrix-mobile-cards thead { display: none; }
    table.lotrix-mobile-cards tbody { display: grid; gap: 8px; }

    table.lotrix-mobile-cards tbody tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--border, #dbe3ef);
        border-radius: 11px;
        background: var(--surface, #fff);
        box-shadow: 0 2px 7px rgb(15 23 42 / 5%);
    }

    table.lotrix-mobile-cards tbody td {
        display: grid;
        grid-template-columns: minmax(82px, 36%) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: auto;
        padding: 7px 10px;
        border-bottom: 1px solid var(--border, #edf1f7);
        color: var(--text, #334155);
        font-size: 12px;
        line-height: 1.35;
        text-align: left;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.lotrix-mobile-cards tbody td::before {
        content: attr(data-label);
        color: var(--text-light, #64748b);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    table.lotrix-mobile-cards tbody td:last-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        border-bottom: 0;
    }

    table.lotrix-mobile-cards tbody td:last-child::before { margin-right: auto; }
    table.lotrix-mobile-cards tbody td[colspan] { display: block; text-align: center !important; }
    table.lotrix-mobile-cards tbody td[colspan]::before { content: none; }

    table.lotrix-mobile-cards tbody td:last-child button,
    table.lotrix-mobile-cards tbody td:last-child a {
        flex: 0 0 auto;
        width: auto;
        min-width: 36px;
        min-height: 34px;
        padding: 6px 9px;
    }
}
/* ==========================================
   LOTRIX — LOGO OCULTA QUANDO MENU RECOLHIDO
========================================== */

.sidebar.collapsed .sidebar-brand {
    display: none !important;
}

/* Mantém a área superior limpa quando recolhido */
.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding-top: 12px !important;
}

/* =========================================================
   LOTRIX — SIDEBAR DESKTOP
   CORREÇÃO DEFINITIVA DO BOTÃO #sidebarMenuToggle

   O botão desktop fica independente da animação/recolhimento
   da sidebar. Assim ele nunca desaparece ao clicar.
   ========================================================= */

@media (min-width: 901px) {

    /* O botão desktop permanece sempre acima da sidebar */
    #sidebarMenuToggle {
        position: fixed !important;
        top: 14px !important;
        left: 103px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 110000 !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;

        overflow: visible !important;
        touch-action: manipulation !important;
    }

    /* Impede o efeito global de hover/active de mover o botão */
    #sidebarMenuToggle:hover,
    #sidebarMenuToggle:active,
    #sidebarMenuToggle:focus,
    #sidebarMenuToggle:focus-visible {
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
    }

    #sidebarMenuToggle svg,
    #sidebarMenuToggle i {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        pointer-events: none !important;
    }

    /*
       Sidebar aberta:
       250px de largura -> centro = 125px.
       Botão tem 44px -> left = 103px.
    */

    /* Sidebar recolhida:
       80px de largura -> centro = 40px.
       Botão tem 44px -> left = 18px.
    */
    body.sidebar-collapsed #sidebarMenuToggle {
        left: 18px !important;
    }

    /*
       Em telas entre 901px e 1100px a sidebar normalmente usa
       230px de largura.
    */
    @media (min-width: 901px) and (max-width: 1100px) {

        #sidebarMenuToggle {
            left: 93px !important;
        }

        body.sidebar-collapsed #sidebarMenuToggle {
            left: 18px !important;
        }
    }

    /* Garante que o cabeçalho não corte o botão */
    .sidebar,
    .sidebar-header {
        overflow: visible !important;
    }

    /*
       Quando recolhida, os ícones continuam centralizados.
    */
    .sidebar.collapsed .menu a {
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar.collapsed .menu a i,
    .sidebar.collapsed .menu a svg {
        margin-left: auto !important;
        margin-right: auto !important;
    }
} 

/* =========================================================
   FIM — CORREÇÃO DO ALINHAMENTO DA SIDEBAR
   ========================================================= */


/* =========================================================
   EMPRESA � EXIBIR SOMENTE NO RODAP�
   ========================================================= */

.empresa-usuario-lotrix {
    display: none !important;
}



/* =========================================================
   LOTRIX — BOTÃO MOBILE SEPARADO DO BOTÃO DESKTOP
   ========================================================= */

@media (min-width: 901px) {
    button.menu-toggle:not(#sidebarMenuToggle) {
        display: none !important;
        pointer-events: none !important;
    }
}

@media (max-width: 900px) {
    button.menu-toggle:not(#sidebarMenuToggle) {
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        right: auto !important;
        bottom: auto !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        z-index: 110000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
    }

    button.menu-toggle:not(#sidebarMenuToggle):hover,
    button.menu-toggle:not(#sidebarMenuToggle):active {
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
    }
}