@charset "utf-8";

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   VARIÁVEIS — LIGHT (padrão)
   ========================================================================== */
:root {
    /* Backgrounds */
    --bg:           #f5f7fb;
    --bg2:          #ffffff;
    --bg3:          #eef1f6;
    --bg4:          #f8fafc;
    --bg5:          #e4e7ef;

    /* Navegação */
    --nva:          rgba(59, 130, 246, .12);
    --border-nva:   rgba(59, 130, 246, .25);

    /* Bordas */
    --border:       rgba(0, 0, 0, 0.06);
    --border2:      rgba(0, 0, 0, 0.12);
    --border3:      rgba(255, 0, 0, 0.12);

    /* Texto */
    --text:         #1f2937;
    --text2:        #6b7280;
    --text3:        #9ca3af;

    /* Cores de destaque */
    --accent:       #3b82f6;
    --accent2:      #2563eb;

    /* Cores semânticas */
    --green:        #16a34a;
    --amber:        #d97706;
    --red:          #dc2626;
    --teal:         #0d9488;

    /* Sombras */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:       0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.12);

    /* Layout */
    --sidebar-w:        240px;
    --sidebar-collapsed: 52px;
    --top-h:            52px;
    --footer-h:         26px;

    /* Tipografia */
    --font:         'DM Sans', sans-serif;
    --mono:         'DM Mono', monospace;

    /* Bordas arredondadas */
    --radius:       8px;
    --radius-lg:    12px;
}

/* ==========================================================================
   VARIÁVEIS — DARK
   ========================================================================== */
body.dark {
    --bg:           #0d0f14;
    --bg2:          #13161e;
    --bg3:          #1a1e28;
    --bg4:          #1f2430;
    --bg5:          #252b38;

    --nva:          rgba(79, 142, 247, .12);
    --border-nva:   rgba(59, 130, 246, .25);

    --border:       rgba(255, 255, 255, 0.07);
    --border2:      rgba(255, 255, 255, 0.13);

    --text:         #f1f5f9;
    --text2:        #8890a4;
    --text3:        #555d72;

    --accent:       #4f8ef7;
    --accent2:      #2563eb;

    --green:        #22c55e;
    --amber:        #f59e0b;
    --red:          #ef4444;
    --teal:         #14b8a6;

    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow:       0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   BASE
   ========================================================================== */
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    overflow: hidden;
}

/* ==========================================================================
   OVERLAY GLOBAL (mobile / sidebar)
   ========================================================================== */
#overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
}
#overlay.open { display: block; }

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */
#main-conteiner {
    display: flex;
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--top-h) - var(--footer-h));
    margin-top: var(--top-h);
}

/* Área de conteúdo (iframe) — acompanha a sidebar */
#main {
    position: fixed;
    top: var(--top-h);
    left: var(--sidebar-collapsed);   /* recolhida por padrão */
    right: 0;
    bottom: var(--footer-h);
    display: flex;
    flex-direction: column;
    transition: left .25s ease;
}

/* Quando sidebar está expandida */
body.sidebar-open #main {
    left: var(--sidebar-w);
}

/* ==========================================================================
   IFRAME
   ========================================================================== */
#appFrame {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--bg);
    display: block;
}

#appFrame::-webkit-scrollbar       { width: 4px; }
#appFrame::-webkit-scrollbar-track { background: transparent; }
#appFrame::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ==========================================================================
   LOADER (barra de progresso topo)
   ========================================================================== */
#loader {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
    display: none;
    z-index: 50;
    animation: loaderIn .6s ease forwards;
}

@keyframes loaderIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ==========================================================================
   MÓDULO — BODY INTERNO (dentro do iframe)
   ========================================================================== */
.body-modulo {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    padding: 20px;
    margin: 0;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll !important;
    display: block;
}

.body-modulo::-webkit-scrollbar       { width: 4px; }
.body-modulo::-webkit-scrollbar-track { background: transparent; }
.body-modulo::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ==========================================================================
   CAMADAS / POPUPS
   ========================================================================== */
.layer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    z-index: 50;
    animation: overlayIn .2s ease;
}

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Container do popup */
.popup {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    inset: 0;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    overflow-y: auto;
}

/* Z-index por nível */
.popup.layer-1 { z-index: 100; }
.popup.layer-2 { z-index: 200; }
.popup.layer-3 { z-index: 300; }
.popup.layer-4 { z-index: 400; }
.popup.layer-5 { z-index: 500; }
.popup.layer-6 { z-index: 600; }
.popup.layer-7 { z-index: 700; }
.popup.layer-8 { z-index: 800; }
.popup.layer-9 { z-index: 900; }

/* Corpo do popup */
.popup-body {
    position: relative;
    margin: auto;
    background: var(--bg2);
    border: 1px solid var(--border2);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: popIn .22s cubic-bezier(.22, 1, .36, 1);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.popup-body > header {
    border-bottom: 2px solid var(--accent2);
    margin-bottom: 20px;
    padding-bottom: 12px;
}
.popup-body > header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}
.popup-body > header small {
    font-size: 12px;
    color: var(--text2);
}

/* Tamanhos */
.popup-body.fullscreen  { width: 96vw; }
.popup-body.large       { width: 860px;  max-width: 96vw; }
.popup-body.form-screen { width: 680px;  max-width: 96vw; }
.popup-body.small       { width: 420px;  max-width: 96vw; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 768px) {
    #main {
        left: 0 !important;
    }
    #overlay.open {
        display: block;
    }
}