/* ========================================= */
/* 🔥 ESTÉTICA PREMIUM BRASA (DARK MODE) 🔥 */
/* ========================================= */
:root {
    --bg-main: #0a0808; 
    --panel-bg: rgba(30, 22, 20, 0.75); 
    --accent: #ff5722; 
    --accent-dark: #d32f2f; 
    --text-light: #f5f5f5;
    --text-dim: #bdaea9;
    --border-glass: 1px solid rgba(255, 87, 34, 0.3);
    --shadow-glow: 0 8px 32px rgba(0, 0, 0, 0.8);
    --glow-active: 0 0 15px rgba(255, 87, 34, 0.6);
}

html, body { overscroll-behavior-y: none; }

body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--bg-main); 
    background-image: radial-gradient(circle at 50% 0%, #4a1708 0%, #0a0808 60%);
    background-attachment: fixed;
    color: var(--text-light); 
    margin: 0; 
    display: flex; 
    justify-content: center; 
}

#app { width: 100%; max-width: 480px; min-height: 100vh; padding: 20px; box-sizing: border-box; position: relative; }

.glass-card { 
    background: var(--panel-bg); border-radius: 16px; box-shadow: var(--shadow-glow); 
    padding: 20px; border: var(--border-glass); cursor: pointer; transition: all 0.3s ease; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    box-sizing: border-box; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); user-select: none;
}

.glass-card:active { transform: scale(0.98); box-shadow: var(--glow-active); border-color: var(--accent); }

.btn-rect { 
    width: 100%; margin-bottom: 15px; border-radius: 12px; padding: 16px; font-weight: bold; 
    text-align: left; display: block; box-sizing: border-box; 
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
    color: white !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); border: none; letter-spacing: 0.5px;
}

.btn-rect:hover { box-shadow: var(--glow-active); }

.btn-warning { background: linear-gradient(135deg, #f57c00 0%, #e65100 100%) !important; color: white !important; border:none;}
.btn-disabled { background: rgba(50,50,50,0.8) !important; border: 1px solid #444 !important; color: #777 !important; pointer-events: none; box-shadow: none !important;}

.nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; width: 100%; position: relative; }
.nav-group { display: flex; gap: 10px; position: relative;}
.nav-btn { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 0; background: rgba(0,0,0,0.5); border: 1px solid #444;}

.dropdown-menu {
    position: absolute; background: rgba(20, 15, 15, 0.95); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9); padding: 10px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px; min-width: 250px;
    border: 1px solid var(--accent); backdrop-filter: blur(10px);
}

.dropdown-item { padding: 12px; font-weight: bold; text-align: left; border-radius: 8px; cursor: pointer; color: var(--text-light); transition: 0.2s; font-size: 13px; background: rgba(255,255,255,0.05); display: flex; align-items: center; gap: 8px; }
.dropdown-item:active { background: var(--accent); color: white; }

input, select, textarea { padding: 15px; border-radius: 12px; border: 1px solid #555; background: rgba(0,0,0,0.5); color: white; width: 100%; box-sizing: border-box; margin-bottom: 10px; font-family: inherit; font-size: 15px; transition: 0.3s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 8px rgba(255, 87, 34, 0.5); }
input::placeholder, textarea::placeholder { color: #888; }
select option { background: var(--bg-main); color: white; }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; padding: 0; box-shadow: none; appearance: auto; cursor: pointer; accent-color: var(--accent); }

.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.icon-lg { font-size: 50px; margin-bottom: 10px; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5)); }

.badge { background: var(--accent-dark); color: white; border-radius: 50%; width: 24px; height: 24px; font-size: 12px; display: flex; align-items: center; justify-content: center; position: absolute; top: -8px; right: -8px; border: 2px solid var(--bg-main); font-weight: bold; box-shadow: var(--glow-active); }

.tooltip { position: absolute; z-index: 100; cursor: pointer; }
.tooltip .tooltiptext { visibility: hidden; opacity: 0; width: max-content; max-width: 250px; background-color: rgba(20, 20, 20, 0.98) !important; color: #fff !important; text-align: center; border-radius: 8px; padding: 12px; position: absolute; z-index: 9999; bottom: 140%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease, visibility 0.3s ease; font-size: 13px; font-weight: normal; line-height: 1.5; box-shadow: 0px 8px 20px rgba(0,0,0,0.9); pointer-events: none; border: 1px solid var(--accent); white-space: normal; word-wrap: break-word; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: var(--accent) transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.borda-vermelha { border: 2px solid var(--accent) !important; box-shadow: var(--glow-active) !important; }
.borda-azul { border: 2px solid #2196F3 !important; box-shadow: 0 0 15px rgba(33, 150, 243, 0.6) !important; }
.hidden { display: none !important; }

.item-lista { display: flex; justify-content: space-between; padding: 15px; border-radius: 12px; align-items: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 10px; }
.sacola { margin-top: 20px; padding: 15px; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); border-radius: 15px; }

.action-btn { padding: 8px 12px; border-radius: 8px; border: none; background: rgba(255,255,255,0.1); color: white; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.action-btn:active { background: var(--accent); transform: scale(0.95); }
.btn-sm { padding: 6px 10px !important; font-size: 13px !important; border-radius: 6px !important; }
.dragging { opacity: 0.5; border: 2px dashed var(--accent) !important; }

h1, h2, h3 { color: var(--text-light); text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
.logo-text { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 900; text-shadow: 0 0 10px rgba(255, 87, 34, 0.8), 0 0 20px rgba(211, 47, 47, 0.8); }

.logo-img { width: 100%; max-width: 220px; border-radius: 20px; margin: 0 auto 15px auto; display: block; box-shadow: var(--glow-active); border: 2px solid var(--accent-dark); }

/* 🔥 ESTÉTICA DO GOD MODE 🔥 */
body.god-mode {
    --bg-main: #004494 !important; background-image: none !important; --text-light: #ffffff !important;
    --accent: #ffeb3b !important; --panel-bg: #0055cc !important; --border-glass: 2px solid #ffffff !important;
    --shadow-glow: 4px 4px 0px rgba(0,0,0,0.8) !important; font-family: 'Courier New', Courier, monospace !important;
}
body.god-mode .glass-card { border-radius: 0px !important; backdrop-filter: none !important; }
body.god-mode input, body.god-mode select, body.god-mode textarea { border-radius: 0px !important; border: 2px solid #000000; background: #ffffff !important; color: #000000 !important; }
body.god-mode h1, body.god-mode h2, body.god-mode h3, body.god-mode h4, body.god-mode .logo-text { color: #ffeb3b !important; text-shadow: none !important; }
body.god-mode .btn-rect { background: #003399 !important; border: 2px solid #ffeb3b !important; border-radius: 0px !important; box-shadow: 4px 4px 0px #000 !important; }

.btn-god-delete {
    background: #ff0000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 0px !important;
    font-family: 'Courier New', Courier, monospace; font-weight: bold; padding: 10px 15px; cursor: pointer;
    box-shadow: 4px 4px 0px #000000 !important; display: block; margin-bottom: 15px; width: 100%; text-align: center; text-transform: uppercase;
}
.btn-god-delete:active { transform: scale(0.95); box-shadow: 0px 0px 0px #000000 !important; }

/* 🔥 ESTÉTICA DO TEST MODE (LABORATÓRIO CLARO) 🔥 */
body.test-mode {
    --bg-main: #eef2f5 !important; 
    background-image: none !important; 
    --panel-bg: #ffffff !important; 
    --accent: #9c27b0 !important; 
    --accent-dark: #6a1b9a !important; 
    --text-light: #212121 !important;
    --text-dim: #666666 !important;
    --border-glass: 2px solid rgba(156, 39, 176, 0.4) !important;
    --shadow-glow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    --glow-active: 0 0 15px rgba(156, 39, 176, 0.5) !important;
}
body.test-mode .glass-card { box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; border: 1px solid #ddd !important; background: #ffffff !important; }
body.test-mode .btn-rect { background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%) !important; color: white !important; text-shadow: none !important; }
body.test-mode input, body.test-mode select, body.test-mode textarea { background: #f5f5f5 !important; border: 1px solid #bbb !important; color: #212121 !important; }
body.test-mode h1, body.test-mode h2, body.test-mode h3, body.test-mode h4, body.test-mode .logo-text { color: #212121 !important; text-shadow: none !important; }
body.test-mode .dropdown-menu { background: #ffffff !important; border: 1px solid var(--accent) !important; }
body.test-mode .dropdown-item { color: #212121 !important; }
body.test-mode .dropdown-item:hover { background: #f0f0f0 !important; }
body.test-mode .item-lista { background: #f9f9f9 !important; border-color: #ddd !important;}

/* 🔥 MÁGICA DA IMPRESSÃO A4 🔥 */
@media print {
    @page { size: A4 portrait; margin: 0.5cm; }
    body, html { margin: 0; padding: 0; background: white !important; height: 100%; }
    #app { padding: 0 !important; max-width: none !important; }
    #app > div:not(#view-print) { display: none !important; }
    #global-header, #config-dropdown, #notif-dropdown { display: none !important; }
    
    #view-print { 
        display: grid !important; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 49vh 49vh; 
        width: 100%; 
        height: 100%; 
        background: white; 
        box-sizing: border-box;
        position: absolute;
        top: 0; left: 0;
    }
    .print-quarter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed #999;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 20px;
    }
    .print-quarter h2 { color: black !important; font-size: 22px; text-shadow: none !important; margin: 0 0 15px 0; text-align: center; }
    .print-quarter img { width: 200px !important; height: 200px !important; display: block; margin: 0 auto; }
    .print-quarter p { color: black !important; font-weight: bold; font-size: 16px; margin: 15px 0 0 0; text-align: center; }
}