/* === IMPORTAR FUENTE MANROPE === */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap'); /* === VARIABLES CSS GLOBALES === */ :root { /* Sobrescribimos el color primario de Bootstrap */ --bs-primary: #4c2882; --bs-primary-rgb: 19, 164, 236; /* Ajustamos el borde redondeado por defecto (más redondeado) */ --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.4rem; --bs-border-radius-lg: 0.75rem; /* Más redondeado para cards */ --bs-border-radius-xl: 1rem; --bs-border-radius-pill: 50rem; } /* === ESTILOS GLOBALES === */ body { font-family: 'Manrope', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; } .btn { border-radius: var(--bs-border-radius); } /* === ESTILOS GENERALES PARA TODAS LAS TARJETAS === */ .card { border-radius: var(--bs-border-radius-lg); border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Dejamos que Bootstrap maneje el background-color por defecto (blanco en light, oscuro en dark) */ } /* Efecto hover para TODAS las tarjetas */ .card:hover { /* Se mueve un poco hacia arriba */ transform: translateY(-5px); /* Sombra más pronunciada al pasar el mouse */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; } /* === ARREGLOS PARA EL MODO OSCURO === */ /* Todo lo que esté acá adentro solo aplica si el tiene data-bs-theme="dark" */ [data-bs-theme="dark"] { /* Botón "Iniciar Sesión" */ .navbar .btn-light { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-gray-700) !important; color: var(--bs-light) !important; } .navbar .btn-light:hover { background-color: var(--bs-gray-600) !important; border-color: var(--bs-gray-500) !important; } /* Botón Primario (azul) */ .navbar .btn-primary { filter: brightness(85%); } /* Tarjetas en modo oscuro */ .card { background-color: var(--bs-dark-bg-subtle); box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.05), 0 2px 4px -2px rgba(255, 255, 255, 0.05); } .card:hover { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.05), 0 4px 6px -4px rgba(255, 255, 255, 0.05) !important; } }