/* * ==================================================================== * BASE DE ESTILOS PERSONALIZADOS * Instituto Warrington - Complemento a las clases de Tailwind CSS * ==================================================================== */ /* Directivas de Tailwind - Necesarias si se compila este archivo */ /* Si estás usando solo el CDN, estas directivas no tienen efecto. */ @tailwind base; @tailwind components; @tailwind utilities; /* -------------------------------------------------- * 1. Estilos Globales (Tomados de horarios.html) * -------------------------------------------------- */ body { /* Usar la fuente Inter, definida en la configuración de Tailwind */ font-family: 'Inter', sans-serif; /* Fondo gris claro suave consistente en todo el sitio */ background-color: #f7f9fc; color: #1f2937; /* Color de texto base (gray-800) */ } /* -------------------------------------------------- * 2. Lógica de Cambio de Idioma (Tomada de spanish_courses.html) * -------------------------------------------------- */ /* * Estas clases controlan qué contenido (español o inglés) se muestra * basándose en la clase 'lang-mode-es' o 'lang-mode-en' en la etiqueta . */ .lang-mode-es .lang-en { display: none; } .lang-mode-en .lang-es { display: none; } /* -------------------------------------------------- * 3. Estilos para Componentes de Acordeón (details/summary - Tomados de horarios.html) * -------------------------------------------------- */ details { /* Las clases de Tailwind 'shadow-lg' y 'rounded-xl' ya se aplicaron en el HTML. */ transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra base para detalles */ margin-bottom: 1rem; background-color: white; border-radius: 0.5rem; overflow: hidden; border: 1px solid #e5e7eb; /* Border (gray-200) */ } /* El summary es el encabezado colapsable */ summary { cursor: pointer; padding: 1rem 1.5rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; background-color: #f3f4f6; /* Fondo gris claro (gray-100) */ color: #1f2937; /* Texto oscuro (gray-800) */ border-radius: 0.5rem 0.5rem 0 0; list-style: none; /* Elimina el marcador por defecto en algunos navegadores */ } summary:hover { background-color: #e5e7eb; /* Fondo ligeramente más oscuro al pasar el ratón (gray-200) */ } /* Línea de separación cuando el acordeón está abierto */ details[open] summary { border-bottom: 1px solid #e5e7eb; } /* Indicador de estado (+/-) */ summary::after { content: 'expand_more'; /* Usando un ícono de Material/Lucide si estuviera cargado, pero mantendremos el + para compatibilidad sin librerías de iconos */ content: '+'; font-size: 1.5rem; transition: transform 0.3s ease; font-weight: 400; /* Para que el '+' no sea demasiado grueso */ } details[open] summary::after { /* Cambia a '-' y rota el ícono para indicar que está abierto */ content: '-'; transform: rotate(0deg); } /* Contenido interno del acordeón */ .details-content { padding: 1.5rem; line-height: 1.75; color: #4b5563; /* Texto gris (gray-600) */ } .details-content p { margin-bottom: 0.75rem; } /* -------------------------------------------------- * 4. Ajustes Responsivos (ejemplo, aunque Tailwind lo maneja) * -------------------------------------------------- */ /* Asegura que el contenedor principal no se estire demasiado en escritorios grandes */ .max-w-7xl-custom { max-width: 80rem; /* Un poco más ancho que 7xl de Tailwind (1280px) */ margin-left: auto; margin-right: auto; }