/* assets/css/style.css */
:root {
    /* Paleta Dimafer */
    --dimafer-orange: #FEBC35;
    --dimafer-black: #000000;
    --dimafer-bg: #f4f7f6;
    
    /* Sobrescritura de Colores de Bootstrap */
    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-warning: #FEBC35;
    --bs-warning-rgb: 254, 188, 53;
    
    /* Configuración de bordes y sombras */
    --card-radius: 20px;
    --input-radius: 12px;
    --btn-radius: 12px;
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 15px 50px rgba(0, 0, 0, 0.08);
}

body {
    background-color: var(--dimafer-bg) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ESTILOS DEL LOGIN (index.php) */
.login-body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dimafer-bg) !important;
}

.login-card {
    background-color: #ffffff;
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-soft) !important;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.brand-logo {
    color: var(--dimafer-black);
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

.brand-logo span {
    color: var(--dimafer-orange);
}

/* Botón Dimafer Específico */
.btn-dimafer {
    background-color: var(--dimafer-orange) !important;
    color: var(--dimafer-black) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 0.8rem !important;
    transition: all 0.3s ease;
}

.btn-dimafer:hover {
    background-color: #e5a82e !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 188, 53, 0.3);
}

/* Ajustes de Formulario Fino */
.form-control {
    border-radius: var(--input-radius) !important;
    border: 1px solid #ddd !important;
    background-color: #fcfcfc !important;
}

.form-control:focus {
    border-color: var(--dimafer-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(254, 188, 53, 0.2) !important;
}

/* Estilos para el resto del sistema (Cards y Tablas) */
.card {
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* =========================================
   MEJORAS VISUALES - DASHBOARD VENDEDOR
   ========================================= */

/* Logo Dimafer mediante etiqueta HTML */
.logo-dimafer-top {
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.05));
}
.logo-dimafer-top:hover {
    transform: scale(1.05);
}

/* Fondos para íconos en tarjetas */
.icon-bg-orange {
    background-color: rgba(254, 188, 53, 0.15); /* Naranja clarito */
    box-shadow: inset 0 0 10px rgba(254, 188, 53, 0.1);
}

.icon-bg-dark {
    background-color: rgba(0, 0, 0, 0.05); /* Gris/Negro muy tenue */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
}

/* Opción B: Logo Dimafer como Fondo CSS (Por si lo querés usar en un <div> vacío en el futuro) */
.dimafer-logo-bg {
    background-image: url('../img/logo-dimafer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 50px;
}