/* ============================================================
   ESTILO COMPLETO - MS FILTROS Y ACEITES
   PALETA: NEGRO (#111111) + DORADO (#d4a847) + PLATA (#c0c0c0)
   SIN NINGÚN TONO DE AZUL
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: #e8e8e8; 
    color: #222; 
}
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
}

/* ===== HEADER NEGRO ===== */
.header { 
    background: #111111; 
    color: #fff; 
    padding: 15px 0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.6); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 3px solid #d4a847;
}
.header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 10px; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
.header .logo a { 
    color: #fff; 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.header .logo img { 
    height: 55px; 
    width: auto; 
    border-radius: 10px;
    border: 2px solid rgba(212,168,71,0.3);
    padding: 3px;
}
.header .logo .textos {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.header .logo .textos .filtros { 
    font-size: 24px; 
    font-weight: 900; 
    color: #d4a847;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.header .logo .textos .y-aceites { 
    font-size: 18px; 
    font-weight: 700; 
    color: #c0c0c0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.header .logo .textos .eslogan { 
    font-size: 11px; 
    opacity: 0.6; 
    font-weight: 300;
    color: #888;
}
.header .nav { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 5px; 
}
.header .nav a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 13px; 
    padding: 6px 14px; 
    border-radius: 6px; 
    transition: all 0.3s; 
}
.header .nav a:hover { 
    background: rgba(255,255,255,0.08); 
}
.header .nav .btn-catalogo { 
    background: #d4a847; 
    color: #111111;
    font-weight: 800; 
}
.header .nav .btn-catalogo:hover { 
    background: #e8c86a; 
    color: #111111;
}
.header .nav .btn-carrito { 
    background: #2d2d2d; 
    font-weight: 700; 
    color: #d4a847;
}
.header .nav .btn-carrito:hover { 
    background: #444; 
}
.header .nav .btn-admin { 
    background: #8b0000; 
    font-weight: 700; 
}
.header .nav .btn-admin:hover { 
    background: #a00000; 
}
.header .nav .usuario-info { 
    color: #d4a847; 
    font-weight: 700; 
    padding: 4px 10px; 
    font-size: 13px;
}
.header .nav .btn-logout {
    background: #8b0000;
    padding: 5px 14px;
    border-radius: 15px;
}
.header .nav .btn-logout:hover {
    background: #a00000;
}
.header .nav .btn-login {
    background: #333;
    padding: 5px 14px;
    border-radius: 15px;
}
.header .nav .btn-login:hover {
    background: #444;
}
.header .nav .btn-register {
    background: #2d2d2d;
    padding: 5px 14px;
    border-radius: 15px;
}
.header .nav .btn-register:hover {
    background: #444;
}

/* ===== BANNER ===== */
.banner { 
    background: #111111; 
    color: #fff; 
    padding: 40px 30px; 
    border-radius: 12px; 
    text-align: center; 
    margin-bottom: 30px;
    border-bottom: 4px solid #d4a847;
}
.banner h1 { 
    font-size: 32px; 
    margin-bottom: 10px; 
    color: #d4a847;
}
.banner p { 
    font-size: 16px; 
    opacity: 0.7; 
    color: #c0c0c0;
}
.banner-oferta { 
    margin-top: 15px; 
    background: rgba(212,168,71,0.12); 
    padding: 10px 25px; 
    border-radius: 30px; 
    display: inline-block; 
    border: 1px solid rgba(212,168,71,0.3);
    color: #c0c0c0;
}

/* ===== FILTROS Y BÚSQUEDA ===== */
.filtros-busqueda { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-bottom: 30px; 
    background: #fff; 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
    border-left: 4px solid #d4a847;
}
.filtros-busqueda .busqueda input { 
    flex: 1; 
    padding: 10px 15px; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    font-size: 14px; 
}
.filtros-busqueda .busqueda input:focus { 
    border-color: #d4a847; 
    outline: none; 
}
.filtros-busqueda .busqueda button { 
    padding: 10px 25px; 
    background: #111111; 
    color: #d4a847; 
    border: 1px solid #d4a847;
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600;
}
.filtros-busqueda .busqueda button:hover { 
    background: #d4a847; 
    color: #111111; 
}
.filtros-busqueda .categorias { 
    flex: 3; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
}
.filtros-busqueda .categoria-btn { 
    padding: 8px 16px; 
    background: #e8e8e8; 
    border-radius: 20px; 
    text-decoration: none; 
    color: #333; 
    font-size: 13px; 
    transition: 0.3s; 
}
.filtros-busqueda .categoria-btn:hover { 
    background: #d4a847; 
    color: #111111; 
}
.filtros-busqueda .categoria-btn.activo { 
    background: #111111; 
    color: #d4a847; 
    border: 1px solid #d4a847;
}

/* ===== PRODUCTOS ===== */
.productos-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; 
}
.producto-card { 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
    transition: transform 0.3s, box-shadow 0.3s; 
    border-top: 4px solid #d4a847;
}
.producto-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 30px rgba(0,0,0,0.15); 
}
.producto-imagen { 
    position: relative; 
    height: 180px; 
    background: #f5f5f5; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.producto-imagen img { 
    max-height: 150px; 
    max-width: 100%; 
    object-fit: contain; 
}
.producto-categoria { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    background: #111111; 
    color: #d4a847; 
    padding: 4px 12px; 
    border-radius: 15px; 
    font-size: 11px; 
    font-weight: 600;
    border: 1px solid #d4a847;
}
.producto-info { 
    padding: 15px; 
}
.producto-codigo { 
    font-size: 12px; 
    color: #888; 
    font-weight: bold; 
    background: #f0f0f0; 
    display: inline-block; 
    padding: 2px 10px; 
    border-radius: 10px; 
}
.producto-descripcion { 
    font-size: 14px; 
    margin: 8px 0; 
    height: 40px; 
    overflow: hidden; 
    color: #333;
}
.producto-aplicacion { 
    font-size: 12px; 
    color: #666; 
    height: 20px; 
    overflow: hidden; 
}
.producto-precio { 
    margin: 10px 0; 
}
.producto-precio .precio { 
    font-size: 22px; 
    font-weight: 700; 
    color: #b8960f; 
}
.producto-descuentos small { 
    color: #888; 
    font-size: 11px; 
}
.producto-acciones { 
    display: flex; 
    gap: 8px; 
    margin-top: 10px; 
    flex-wrap: wrap; 
}
.producto-acciones input { 
    width: 50px; 
    padding: 6px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    text-align: center; 
}
.producto-acciones .btn-agregar { 
    flex: 1; 
    padding: 8px; 
    background: #111111; 
    color: #d4a847; 
    border: 1px solid #d4a847;
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: 0.3s; 
}
.producto-acciones .btn-agregar:hover { 
    background: #d4a847; 
    color: #111111; 
}
.producto-acciones .btn-ver { 
    padding: 8px 12px; 
    background: #e8e8e8; 
    color: #333; 
    border: none; 
    border-radius: 6px; 
    text-decoration: none; 
    font-size: 13px; 
}
.producto-acciones .btn-ver:hover { 
    background: #d4a847; 
    color: #111111; 
}
.producto-stock { 
    margin-top: 8px; 
    font-size: 12px; 
}
.stock-disponible { 
    color: #2d2d2d; 
}
.stock-bajo { 
    color: #8b0000; 
    font-weight: bold; 
}

/* ===== CARRITO FLOTANTE ===== */
.carrito-flotante { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    background: #111111; 
    color: #d4a847; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 28px; 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
    transition: 0.3s; 
    z-index: 100; 
    border: 2px solid #d4a847;
}
.carrito-flotante:hover { 
    transform: scale(1.1); 
    background: #d4a847; 
    color: #111111; 
}
.carrito-count { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    background: #d4a847; 
    color: #111111; 
    font-size: 12px; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
}

/* ===== CARRITO ===== */
.carrito-tabla { 
    overflow-x: auto; 
    background: #fff; 
    border-radius: 12px; 
    padding: 20px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
    border-left: 4px solid #d4a847;
}
.carrito-tabla th { 
    background: #f0f0f0; 
    padding: 12px; 
    text-align: left; 
    font-size: 13px; 
}
.carrito-tabla td { 
    padding: 12px; 
    border-bottom: 1px solid #eee; 
    font-size: 14px; 
}
.carrito-tabla .fila-total td { 
    font-size: 18px; 
    border-top: 2px solid #111111; 
}
.carrito-tabla .fila-descuento td { 
    color: #8b0000; 
}
.carrito-acciones { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 20px; 
    flex-wrap: wrap; 
    gap: 10px; 
}
.btn-continuar { 
    padding: 12px 25px; 
    background: #e8e8e8; 
    color: #333; 
    text-decoration: none; 
    border-radius: 8px; 
}
.btn-continuar:hover { 
    background: #d4a847; 
    color: #111111; 
}
.btn-finalizar { 
    padding: 12px 30px; 
    background: #111111; 
    color: #d4a847; 
    border: 1px solid #d4a847;
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 16px; 
    font-weight: bold; 
}
.btn-finalizar:hover { 
    background: #d4a847; 
    color: #111111; 
}
.btn-eliminar { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 18px; 
}

/* ===== LOGIN / REGISTER ===== */
.login-page, .register-page { 
    background: #111111; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.login-container, .register-container { 
    width: 100%; 
    max-width: 420px; 
    padding: 20px; 
}
.login-box, .register-box { 
    background: #fff; 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
    border-top: 4px solid #d4a847;
}
.login-box h1, .register-box h1 { 
    text-align: center; 
    color: #111111; 
    font-size: 24px; 
    margin-bottom: 5px; 
}
.login-box h1 span, .register-box h1 span { 
    color: #d4a847; 
}
.login-box h2, .register-box h2 { 
    text-align: center; 
    color: #666; 
    font-size: 16px; 
    font-weight: normal; 
    margin-bottom: 25px; 
}
.login-box .campo, .register-box .campo { 
    margin-bottom: 15px; 
}
.login-box .campo label, .register-box .campo label { 
    display: block; 
    font-size: 14px; 
    font-weight: 600; 
    margin-bottom: 5px; 
}
.login-box .campo input, .register-box .campo input { 
    width: 100%; 
    padding: 10px; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    font-size: 14px; 
}
.login-box .campo input:focus, .register-box .campo input:focus { 
    border-color: #d4a847; 
    outline: none; 
}
.btn-login, .btn-register { 
    width: 100%; 
    padding: 12px; 
    background: #111111; 
    color: #d4a847; 
    border: 1px solid #d4a847;
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
}
.btn-login:hover, .btn-register:hover { 
    background: #d4a847; 
    color: #111111; 
}
.login-links, .register-links { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 15px; 
    font-size: 14px; 
}
.login-links a, .register-links a { 
    color: #111111; 
    text-decoration: none; 
}
.login-links a:hover, .register-links a:hover { 
    color: #d4a847; 
    text-decoration: underline; 
}
.alert-error { 
    background: #ffebee; 
    color: #8b0000; 
    padding: 12px 15px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    border: 1px solid #ffcdd2; 
}
.alert-success { 
    background: #e8f5e9; 
    color: #2d2d2d; 
    padding: 12px 15px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    border: 1px solid #c8e6c9; 
}

/* ===== FOOTER ===== */
.footer { 
    background: #111111; 
    color: #fff; 
    padding: 30px 0; 
    margin-top: 40px; 
    border-top: 3px solid #d4a847;
}
.footer .container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
.footer-content { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 20px; 
}
.footer-info h3 { 
    color: #d4a847; 
    font-size: 18px; 
}
.footer-info p { 
    opacity: 0.6; 
    font-size: 14px; 
    color: #c0c0c0;
}
.footer-links { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
}
.footer-links a { 
    color: #c0c0c0; 
    text-decoration: none; 
    opacity: 0.8; 
    font-size: 14px; 
}
.footer-links a:hover { 
    opacity: 1; 
    color: #d4a847; 
}
.footer-copy { 
    text-align: center; 
    margin-top: 20px; 
    padding-top: 15px; 
    border-top: 1px solid rgba(255,255,255,0.05); 
    font-size: 13px; 
    opacity: 0.4; 
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .header .container { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }
    .header .logo a { 
        justify-content: center; 
        flex-direction: column;
    }
    .header .logo img { 
        height: 45px; 
    }
    .header .logo .textos .filtros { 
        font-size: 20px; 
    }
    .header .logo .textos .y-aceites { 
        font-size: 16px; 
    }
    .header .nav { 
        justify-content: center; 
    }
    .header .nav a { 
        font-size: 12px; 
        padding: 5px 10px; 
    }
    .banner h1 { 
        font-size: 28px; 
    }
    .banner p { 
        font-size: 16px; 
    }
    .productos-grid { 
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    }
    .footer-content { 
        flex-direction: column; 
        text-align: center; 
    }
    .footer-links { 
        justify-content: center; 
    }
}
@media (max-width: 480px) {
    .header .logo img { 
        height: 40px; 
    }
    .header .logo .textos .filtros { 
        font-size: 17px; 
    }
    .header .logo .textos .y-aceites { 
        font-size: 14px; 
    }
    .header .logo .textos .eslogan { 
        font-size: 10px; 
    }
    .header .nav a { 
        font-size: 11px; 
        padding: 4px 8px; 
    }
    .banner { 
        padding: 30px 20px; 
    }
    .banner h1 { 
        font-size: 24px; 
    }
    .productos-grid { 
        grid-template-columns: 1fr; 
    }
    .login-box, .register-box { 
        padding: 25px; 
    }
}