:root {
    --color-primary: rgb(6, 182, 196);
    --color-secondary: rgb(52, 167, 228);
    --color-dark: #2c3e50;
    --color-light: #f8f9fa;
	
    --icon-registrar: #28a745;        /* Verde */
    --icon-editar: #ffc107;           /* Amarillo */
    --icon-eliminar: #dc3545;         /* Rojo */
    --icon-buscar: #17a2b8;           /* Cyan */
    --icon-lista: #6f42c1;            /* Morado */
    --icon-estado: #fd7e14;           /* Naranja */
    --icon-reporte: #20c997;          /* Verde turquesa (clientes) */
    --icon-volver: #0dcaf0;           /* Azul claro */
    --icon-usuarios: #0d6efd;         /* Azul Bootstrap */
    --icon-productos: #28a745;        /* Verde */
    --icon-consultar: #0d6efd;        /* Azul Bootstrap */
    --icon-masvendidos: #28a745;      /* Verde éxito */
    --icon-menosdemanda: #fd7e14;     /* Naranja advertencia */
    --icon-reporte-productos: #6f42c1; /* Morado (productos) */
	--icon-crear-cotizacion: #28a745;        /* Verde */
	--icon-editar-cotizacion: #0d6efd;       /* Azul */
	--icon-eliminar-cotizacion: #dc3545;     /* Rojo */
	--icon-estado-cotizaciones: #fd7e14;     /* Naranja */
	--icon-buscar-cotizacion: #17a2b8;       /* Cyan */
	--icon-generar-pdf: #6f42c1;             /* Morado */
	--icon-reporte-periodo: #198754;         /* Verde oscuro */
	--icon-reporte-monto: #ffc107; 
	--visita-registrar: #28a745;        /* Verde */
	--visita-editar: #0d6efd;           /* Azul */
	--visita-eliminar: #dc3545;         /* Rojo */
	--visita-estado: #fd7e14;           /* Naranja */
	--visita-consultar: #17a2b8;        /* Cyan */
	--visita-relacionar: #6f42c1;       /* Morado */
	--visita-reporte: #198754;
	--tarea-registrar: #28a745;        /* Verde */
	--tarea-modificar: #0d6efd;        /* Azul */
	--tarea-eliminar: #dc3545;         /* Rojo */
	--tarea-relacionar: #6f42c1;       /* Morado */
	--tarea-consultar: #17a2b8;        /* Cyan */
	--tarea-adjuntar: #fd7e14;         /* Naranja */
	--tarea-estado: #198754;           /* Verde oscuro */
	--tarea-reporte: #20c997;          /* Verde turquesa */
}
.main-custom {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    min-height: 100vh;
    padding-top: 80px;
}

.navbar-custom {
    background-image: url("imagenes/taco.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100px;
    padding: 20px 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.navbar-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 0;
}

.navbar-custom .container,
.navbar-custom .navbar-nav,
.navbar-custom .navbar-toggler {
    position: relative;
    z-index: 1;
}

.navbar-custom .nav-link {
    color: #000 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 5px;
    margin: 0 2px;
}

.navbar-custom .nav-link.active {
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.1);
    color: #000 !important;
}

.navbar-custom .nav-link:hover {
    color: #222 !important;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Breadcrumb*/
.breadcrumb {
    background-color: transparent;
    padding: 0.75rem 0;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb-item a:hover {
    opacity: 1;
}

.breadcrumb-item.active {
    color: #fff;
    opacity: 1;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}
/* Contenedores de iconos */
.card-icon-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.dashboard-card:hover .card-icon-container {
    transform: scale(1.05);
}

/* IMPORTANTE: Esta regla debe estar PRIMERO */
.card-icon-container.solid {
    border: none !important;
}

/* Clases específicas para iconos de la pagina clientes */
.card-icon-container.solid.registrar {
    background-color: var(--icon-registrar);
}

.card-icon-container.solid.editar {
    background-color: var(--icon-editar);
}

.card-icon-container.solid.eliminar {
    background-color: var(--icon-eliminar);
}

.card-icon-container.solid.buscar {
    background-color: var(--icon-buscar);
}

.card-icon-container.solid.lista {
    background-color: var(--icon-lista);
}

.card-icon-container.solid.estado {
    background-color: var(--icon-estado);
}

.card-icon-container.solid.reporte {
    background-color: var(--icon-reporte); /* Para clientes */
}

.card-icon-container.solid.volver {
    background-color: var(--icon-volver);
}

/* Clases específicas para iconos de la pagina admnistrador */
.card-icon-container.solid.usuarios {
    background-color: var(--icon-usuarios);
}

.card-icon-container.solid.productos {
    background-color: var(--icon-productos);
}

/* Clases específicas para iconos de la pagina prodcutos*/
.card-icon-container.solid.consultar {
    background-color: var(--icon-consultar);
}

.card-icon-container.solid.masvendidos {
    background-color: var(--icon-masvendidos);
}

.card-icon-container.solid.menosdemanda {
    background-color: var(--icon-menosdemanda);
}

.card-icon-container.solid.reporte-productos {
    background-color: var(--icon-reporte-productos);
}

/* Clases para iconos de cotizaciones */
.card-icon-container.crear-cotizacion.solid {
    background-color: var(--icon-crear-cotizacion);
}

.card-icon-container.editar-cotizacion.solid {
    background-color: var(--icon-editar-cotizacion);
}

.card-icon-container.eliminar-cotizacion.solid {
    background-color: var(--icon-eliminar-cotizacion);
}

.card-icon-container.estado-cotizaciones.solid {
    background-color: var(--icon-estado-cotizaciones);
}

.card-icon-container.buscar-cotizacion.solid {
    background-color: var(--icon-buscar-cotizacion);
}

.card-icon-container.generar-pdf.solid {
    background-color: var(--icon-generar-pdf);
}

.card-icon-container.reporte-periodo.solid {
    background-color: var(--icon-reporte-periodo);
}

.card-icon-container.reporte-monto.solid {
    background-color: var(--icon-reporte-monto);
}

/* Clases para iconos de visits */
.card-icon-container.registrar-visita.solid {
    background-color: var(--visita-registrar);
}

.card-icon-container.editar-visita.solid {
    background-color: var(--visita-editar);
}

.card-icon-container.eliminar-visita.solid {
    background-color: var(--visita-eliminar);
}

.card-icon-container.estado-visitas.solid {
    background-color: var(--visita-estado);
}

.card-icon-container.consultar-visita.solid {
    background-color: var(--visita-consultar);
}

.card-icon-container.relacionar-visita.solid {
    background-color: var(--visita-relacionar);
}

.card-icon-container.reporte-visitas.solid {
    background-color: var(--visita-reporte);
}

/* Clases específicas para iconos de la pagina tareas*/
/* Iconos dentro de los contenedores */
.card-icon-container img,
.card-icon-container i {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Iconos blancos cuando el fondo es de color sólido */
.card-icon-container.solid img {
    filter: brightness(0) invert(1);
}

.card-icon-container.solid i {
    color: white !important; /* !important para forzar color blanco */
}

/* ===== TAMAÑO DE ICONOS ===== */
.card-icon-container i.fs-2 {
    font-size: 2.5rem !important;
}

.card-icon-container i.fs-3 {
    font-size: 2rem !important;
}

/* Títulos y texto */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .main-custom {
        padding-top: 70px;
    }
    
    .card-icon-container {
        width: 80px;
        height: 80px;
    }
    
    .card-icon-container img {
        width: 50px;
        height: 50px;
    }
}

/* ===== DASHBOARD CARDS ===== */
.dashboard-card {
    transition: all 0.3s ease;
    border-radius: 15px;
    border: none;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ===== RESPONSIVE ===== Checar en movile si es necesario*/
@media (max-width: 768px) {
    .main-custom {
        padding-top: 15px;
        margin-top: 56px;
    }
    
    .card-icon-container {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
    }
    
    .card-icon-container img {
        width: 50px;
        height: 50px;
    }
    
    .card-icon-container i {
        font-size: 2rem;
    }
    
    .dashboard-card .card-body {
        padding: 1.5rem !important;
    }
    
    .display-5 {
        font-size: 1.8rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    /* Ajustes para breadcrumb en móvil */
    .breadcrumb {
        font-size: 0.9rem;
        padding: 0.5rem 0;
    }
}

@media (max-width: 576px) {
    .card-icon-container {
        width: 70px;
        height: 70px;
    }
    
    .card-icon-container img {
        width: 40px;
        height: 40px;
    }
    
    .card-icon-container i {
        font-size: 1.5rem;
    }
    
    .dashboard-card .card-body {
        padding: 1rem !important;
    }
} /*Hasta aqui checar en el celular*/