/* SISTEMA DE DESIGN - GRUPO J R 
    Direção Técnica: Camilo J. Rosa 
    Versão: 1.4 (Sincronizada com Protocolo de Segurança e Administração 2026)
*/

:root {
    /* Paleta Institucional */
    --verde: #2ecc71;
    --verde-dark: #27ae60;
    --preto-puro: #000000;
    --preto-card: #0a0a0a;
    --preto-bg: #050505;
    --branco: #ffffff;
    
    /* Cores de Estado e Segurança */
    --alerta: #f1c40f;   /* Amarelo para Avisos e Atenção */
    --erro: #e74c3c;     /* Vermelho para Alertas Críticos e Logout */
    --info: #3498db;     /* Azul para informações informativas */
    
    /* Tipografia e Espaçamento */
    --fonte-principal: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --transicao: 0.3s ease-in-out;
}

/* 1. Configurações Base e Proteção Orgânica */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--preto-puro);
    color: var(--branco);
    font-family: var(--fonte-principal);
    line-height: 1.6;
    overflow-x: hidden;
    /* Bloqueio de Extração de Dados */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1, h2, h3, h4 { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
a { text-decoration: none; color: inherit; transition: var(--transicao); }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 2. Componentes de Interface (Botões e Badges) */
.btn-jr {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; padding: 12px 25px; border-radius: 4px; font-weight: bold;
    text-transform: uppercase; font-size: 0.85rem; cursor: pointer;
    border: none; transition: var(--transicao); text-align: center;
}

.btn-verde { background-color: var(--verde); color: var(--preto-puro); }
.btn-verde:hover { background-color: var(--verde-dark); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3); }

.btn-outline { background: transparent; border: 1px solid var(--verde); color: var(--verde); }
.btn-outline:hover { background: var(--verde); color: var(--preto-puro); }

.badge-restrito-label {
    position: absolute; top: 15px; left: 15px; z-index: 5;
    background: var(--erro); color: #fff; font-size: 0.6rem; padding: 4px 10px;
    border-radius: 4px; text-transform: uppercase; font-weight: 900;
}

/* 3. Formulários Administrativos e Cadastro */
.admin-form-group { margin-bottom: 20px; text-align: left; }
.admin-form-group label { display: block; color: var(--verde); font-size: 0.7rem; text-transform: uppercase; margin-bottom: 8px; font-weight: 800; }
.admin-form-control {
    width: 100%; background: #000; border: 1px solid #222; color: #fff;
    padding: 12px; border-radius: 4px; font-size: 0.85rem; transition: var(--transicao);
}
.admin-form-control:focus { border-color: var(--verde); outline: none; background: #050505; }

/* 4. Governança e LGPD */
.lgpd-wrapper { padding: 60px 0 80px; max-width: 900px; margin: auto; }
.lgpd-card { background: var(--preto-card); border: 1px solid #111; padding: 50px; border-radius: 12px; color: #ccc; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.lgpd-card h1 { color: var(--verde); margin-bottom: 30px; font-size: 2.2rem; }
.lgpd-card h2 { color: #fff; margin-top: 40px; font-size: 1.3rem; text-transform: uppercase; border-left: 4px solid var(--verde); padding-left: 15px; }
.lgpd-card p { margin-bottom: 20px; font-size: 0.95rem; text-align: justify; }
.lgpd-card ul { margin-bottom: 25px; padding-left: 25px; list-style: none; }
.lgpd-card li { margin-bottom: 12px; font-size: 0.9rem; position: relative; }
.lgpd-card li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--verde); position: absolute; left: -30px; }

.highlight-box { background: #000; border-left: 4px solid var(--alerta); padding: 25px; margin: 30px 0; font-style: italic; color: #eee; }

/* 5. Acervo e Catálogo */
.acervo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.pce-card { background: var(--preto-card); border: 1px solid #111; border-radius: 10px; overflow: hidden; transition: var(--transicao); position: relative; display: flex; flex-direction: column; }
.pce-card:hover { border-color: var(--verde); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.pce-img { width: 100%; height: 220px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.pce-img img { width: 100%; height: 100%; object-fit: contain; opacity: 0.8; transition: 0.6s; padding: 10px; }
.pce-info { padding: 25px; text-align: center; flex-grow: 1; }
.pce-calibre { display: inline-block; padding: 4px 15px; background: rgba(46, 204, 113, 0.1); color: var(--verde); border-radius: 20px; font-size: 0.75rem; font-weight: 800; }

/* 6. Ficha Técnica Detalhada */
.product-details-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; background: var(--preto-card); padding: 40px; border-radius: 12px; border: 1px solid #111; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 35px; }
.spec-box { background: #0a0a0a; padding: 14px; border: 1px solid #1a1a1a; border-radius: 4px; font-size: 0.8rem; color: #999; }
.spec-box strong { color: var(--verde); font-size: 0.65rem; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* 7. Gestão Administrativa */
.management-table { width: 100%; background: var(--preto-card); border-collapse: collapse; border-radius: 8px; overflow: hidden; font-size: 0.85rem; border: 1px solid #111; }
.management-table th { background: #080808; color: var(--verde); padding: 15px; text-align: left; font-size: 0.7rem; text-transform: uppercase; }
.management-table td { padding: 15px; border-bottom: 1px solid #0f0f0f; color: #888; }
.management-table tr:hover { background: rgba(255,255,255,0.02); }

.btn-action { padding: 8px; border-radius: 4px; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; }
.btn-edit { background: rgba(241, 196, 15, 0.05); color: var(--alerta); border: 1px solid var(--alerta); }
.btn-edit:hover { background: var(--alerta); color: #000; }

/* Scrollbar e Utilidades */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--preto-puro); }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--verde); }

@media (max-width: 900px) { .product-details-grid { grid-template-columns: 1fr; } .acervo-grid { grid-template-columns: 1fr; } }