/* --- VARIABLES DE DISEÑO --- */
:root {
    --help-primary: #1e3a8a;
    --help-accent: #3b82f6;
    --help-bg: #f4f7fc;
    --val-success: #166534;
    --val-danger: #991b1b;
    --border-erp: #d1d9e6;
    --text: #1e293b;
    --text-muted: #64748b;
}

/* --- ESTRUCTURA BASE --- */
.container { width: min(1200px, 95%); margin: 0 auto; padding: 20px 0; }
.glass-card { background: #fff; border: 1px solid var(--border-erp); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

/* --- GRID INTELIGENTE (Detecta Pantallas) --- */
.bunker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

/* --- TABLAS QUE SE CONVIERTEN EN TARJETAS (Móvil) --- */
@media (max-width: 850px) {
    .erp-table thead { display: none; }
    .erp-table tr { 
        display: block; 
        margin-bottom: 15px; 
        border: 1px solid var(--border-erp) !important; 
        border-radius: 10px;
        background: #fff;
        padding: 15px;
    }
    .erp-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 10px 0 !important;
        border: none !important;
        text-align: right !important;
    }
    .erp-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .header-bunker { flex-direction: column; gap: 15px; align-items: flex-start !important; }
}

/* --- BOTONES Y ENTRADAS PWA --- */
.btn { 
    padding: 12px 20px; 
    border-radius: 8px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.input-erp { width: 100%; padding: 12px; border: 1px solid var(--border-erp); border-radius: 8px; }