/* =======================================================
   css/style.css - ESTILO DASHBOARD MODERNO
   ======================================================= */

/* 1. CONFIGURACIÓN BASE */
body {
    background-color: #f3f4f6 !important; /* Gris suave de fondo */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
}

/* 2. NAVBAR (Barra Superior) */
.navbar-custom {
    background-color: #111827 !important; /* Gris oscuro casi negro */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 3. UTILIDADES KPI (Círculos de colores en los indicadores) */
.rounded-circle-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 50%;
}
.ls-1 { letter-spacing: 1px; }


/* =======================================================
   4. TARJETAS DEL DASHBOARD (DISEÑO MÓDULOS)
   ======================================================= */

.card-dashboard {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left-width: 5px; /* Borde grueso a la izquierda para el color */
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: block; /* Para que el enlace ocupe todo */
}

/* Animación al pasar el mouse (sube y sombra) */
.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Círculo del icono */
.card-dashboard .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

/* Animación del icono al pasar el mouse */
.card-dashboard:hover .icon-circle {
    transform: scale(1.1) rotate(5deg);
}

/* --- COLORES ESPECÍFICOS POR MÓDULO --- */

/* 1. AGENDAR (Azul Vibrante) */
.mod-agendar { border-left-color: #2563eb; }
.mod-agendar .icon-circle { background-color: #eff6ff; color: #2563eb; }
.mod-agendar:hover { border-color: #2563eb; }

/* 2. AGENDA (Índigo) */
.mod-agenda { border-left-color: #6366f1; }
.mod-agenda .icon-circle { background-color: #eef2ff; color: #6366f1; }
.mod-agenda:hover { border-color: #6366f1; }

/* 3. CLIENTES (Verde) */
.mod-clientes { border-left-color: #10b981; }
.mod-clientes .icon-circle { background-color: #ecfdf5; color: #059669; }
.mod-clientes:hover { border-color: #10b981; }

/* 4. PRODUCTOS (Cyan) */
.mod-productos { border-left-color: #06b6d4; }
.mod-productos .icon-circle { background-color: #cffafe; color: #0891b2; }
.mod-productos:hover { border-color: #06b6d4; }

/* 5. INVENTARIO (Naranja) */
.mod-inventario { border-left-color: #f97316; }
.mod-inventario .icon-circle { background-color: #fff7ed; color: #ea580c; }
.mod-inventario:hover { border-color: #f97316; }

/* 6. TÉCNICOS (Rosa) */
.mod-tecnicos { border-left-color: #ec4899; }
.mod-tecnicos .icon-circle { background-color: #fdf2f8; color: #db2777; }
.mod-tecnicos:hover { border-color: #ec4899; }

/* 7. SISTEMA/AJUSTES (Gris Oscuro) */
.mod-sistema { border-left-color: #475569; }
.mod-sistema .icon-circle { background-color: #f1f5f9; color: #475569; }
.mod-sistema:hover { border-color: #475569; }


.card-hover-effect { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover-effect:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; cursor: pointer; }


/* =======================================================
   ANIMACIÓN DE TARJETAS KPI (VISITAS/PENDIENTES/STOCK)
   ======================================================= */
.card-hover-effect {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.card-hover-effect:hover {
    transform: translateY(-5px); /* Se mueve hacia arriba */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; /* Sombra más fuerte */
    border-color: #cbd5e1;
}