/* ==========================================
   VARIABLES DE DISEÑO (Grupo Diforma + Win11)
   ========================================== */
:root {
    --w11-bg: #f3f3f3;          
    --w11-card: #ffffff;        
    --w11-text: #202020;        
    --w11-border: #e5e5e5;      
    --diforma-red: #D41B2C;     /* Rojo Corporativo Grupo Diforma */
    --diforma-red-hover: #b31725;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 16px rgba(0,0,0,0.06);
}

/* ==========================================
   GENERALES Y BARRA SUPERIOR ERP
   ========================================== */
body { 
    background-color: var(--w11-bg); 
    font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; 
    color: var(--w11-text); 
    padding: 0; /* Quitamos el padding para la barra superior */
    margin: 0;
}

/* Franja roja superior estilo Odoo V19 Diforma */
.erp-top-bar {
    background-color: var(--diforma-red);
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: white;
    box-shadow: var(--shadow-sm);
}

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

/* ==========================================
   TARJETAS Y PANELES
   ========================================== */
.card { 
    background: var(--w11-card); 
    border: 1px solid var(--w11-border); 
    border-radius: var(--radius-lg); 
    box-shadow: var(--shadow-sm); 
}

.card-header-main { 
    background: var(--w11-card); 
    color: var(--w11-text); 
    border-bottom: 1px solid var(--w11-border); 
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; 
    padding: 16px 20px; 
}

/* ==========================================
   BOTONES Y CONTROLES
   ========================================== */
.btn { border-radius: var(--radius-md); font-weight: 500; font-size: 0.85rem; padding: 0.4rem 1rem; transition: all 0.15s ease;}
.btn-primary { background-color: var(--diforma-red); border-color: var(--diforma-red); color: white; }
.btn-primary:hover { background-color: var(--diforma-red-hover); border-color: var(--diforma-red-hover); color: white;}

.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--w11-border);
    background-color: #fbfbfb;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--diforma-red);
    box-shadow: 0 0 0 3px rgba(212, 27, 44, 0.15);
}
.form-label { font-size: 0.8rem; font-weight: 600; color: #555; }

/* ==========================================
   BADGES Y TABS
   ========================================== */
.badge-version { background-color: var(--w11-bg); color: #555; border: 1px solid var(--w11-border); font-weight: normal; }
.badge-nacional { background-color: #fceded; color: var(--diforma-red); border: 1px solid #f5c2c4; font-weight: 600;}
.step-badge { background-color: #f8f9fa; color: var(--diforma-red); border: 1px solid var(--w11-border); border-radius: var(--radius-md); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-right: 8px; }

.nav-tabs { border-bottom: 1px solid var(--w11-border); }
.nav-tabs .nav-link { border: none; color: #666; font-weight: 600; padding: 0.8rem 1.5rem; background: transparent; transition: color 0.2s; }
.nav-tabs .nav-link:hover { color: var(--diforma-red); border: none; }
.nav-tabs .nav-link.active { color: var(--diforma-red); border-bottom: 2px solid var(--diforma-red) !important; background: transparent; }

/* ==========================================
   TABLAS LIMPIAS
   ========================================== */
.table-items { font-size: 0.85rem; }
.table-items th { background-color: var(--w11-card); color: #555; font-size: 0.75rem; font-weight: 600; border-bottom: 2px solid var(--w11-border); padding: 12px 8px; }
.table-items td { vertical-align: middle; padding: 0.5rem; border-bottom: 1px solid var(--w11-border); }