:root {
  --bg: #f6f8fa;
  --bg-secondary: #ffffff;
  --bg-overlay: #ffffff;
  --bg-hover: #f3f4f6;
  --border: #d0d7de;
  --text: #1f2328;
  --text-secondary: #656d76;
  --primary: #e91e63;
  --primary-hover: #c2185b;
  --success: #1a7f37;
  --danger: #d1242f;
  --warning: #9a6700;
  --shadow: rgba(31, 35, 40, 0.04);
  --shadow-md: rgba(31, 35, 40, 0.12);
  --radius: 12px;
  --radius-sm: 6px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --header-h: 56px;
  --bottom-nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

/* === ESTRUTURA === */
.app-container { display: flex; min-height: 100vh; }
.main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); height: var(--header-h); display: none; }
.app-header-content { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: bold; }

/* Sidebar Desktop */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex-shrink: 0;
}
.sidebar-brand { font-size: 1.4rem; font-weight: bold; color: var(--primary); margin-bottom: 30px; }
.nav-list { display: flex; flex-direction: column; gap: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-sm); border: none; background: none;
  color: var(--text-secondary); cursor: pointer; transition: 0.2s; text-align: left;
  font-size: 0.95rem; font-family: inherit;
}
.nav-item.active { background: #fce4ec; color: var(--primary); font-weight: 600; }
.nav-item:hover:not(.active) { background: var(--bg-hover); }

/* Main Content */
main { padding: 24px; flex: 1; }
.tab-content { display: none; animation: fadeIn 0.2s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: 0; } }

/* Mobile Nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h);
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  display: none; grid-template-columns: repeat(4, 1fr); z-index: 100;
}
.nav-btn {
  border: none; background: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text-secondary);
}
.nav-btn.active { color: var(--primary); font-weight: bold; }
.nav-btn .ico { font-size: 1.2rem; }

/* === COMPONENTES GERAIS === */
.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.btn { 
    padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    cursor: pointer; font-weight: 500; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: var(--primary); color: white; border: none; }
.btn-sm { padding: 4px 8px; font-size: 0.8rem; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-overlay); color: var(--text); }

/* === RESPONSIVO === */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .app-header { display: block; }
    .bottom-nav { display: grid; }
    main { padding: 15px; padding-bottom: 80px; }
}

/* === NOVO SISTEMA DE VISUALIZAÇÃO E IMPRESSÃO (CORRIGIDO) === */

/* Quando o print-area está vazio, ele não ocupa espaço nem bloqueia cliques */
#print-area:empty { 
    display: none; 
}

/* Quando aberto, cobre o ecrã para visualização da ficha no iPad/Browser */
#print-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10000;
    overflow-y: auto;
    padding: 0;
}

@media print {
    /* Esconde tudo o que está no body para uma impressão limpa */
    body * { 
        visibility: hidden; 
    } 

    /* Torna apenas a área da ficha técnica visível */
    #print-area, #print-area * { 
        visibility: visible; 
    }

    /* Posiciona para o início da página de impressão */
    #print-area { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
    }

    /* Esconde botões de ação (Fechar, Baixar Stock) na folha de papel */
    .no-print { 
        display: none !important; 
    }

    /* Estilo da Ficha na Impressão */
    .ficha {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    @page {
        margin: 1cm;
    }
}