/* ========================================================================== Intermedia — Hoja de estilos principal -------------------------------------------------------------------------- Se apoya en Bootstrap 5.3 y sólo añade lo que el framework no cubre. La paleta se define con variables CSS para que el cambio entre tema claro y oscuro no requiera duplicar reglas. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variables de la marca -------------------------------------------------------------------------- */ :root { --yh-primario: #2563eb; --yh-primario-oscuro: #1d4ed8; --yh-exito: #16a34a; --yh-whatsapp: #25d366; --yh-radio: 0.75rem; --yh-sombra: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); --yh-sombra-elevada: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05); --yh-transicion: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* Ajustes propios del tema oscuro. Bootstrap conmuta data-bs-theme en . */ [data-bs-theme="dark"] { --yh-sombra: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3); --yh-sombra-elevada: 0 10px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } /* El cambio de tema no debe producir un parpadeo brusco de colores. */ body, .card, .navbar, .list-group-item { transition: background-color var(--yh-transicion), border-color var(--yh-transicion), color var(--yh-transicion); } /* -------------------------------------------------------------------------- 3. Componentes -------------------------------------------------------------------------- */ .card { border-radius: var(--yh-radio); box-shadow: var(--yh-sombra); } /* Elevación al pasar el cursor, sólo en las tarjetas que la declaren. */ .card-elevable { transition: transform var(--yh-transicion), box-shadow var(--yh-transicion); } .card-elevable:hover { transform: translateY(-2px); box-shadow: var(--yh-sombra-elevada); } .btn { border-radius: 0.5rem; font-weight: 500; } .badge { font-weight: 500; letter-spacing: 0.01em; } /* Botón de cambio de tema: se comporta como un icono, no como un enlace. */ #botonTema { text-decoration: none; padding: 0.5rem 0.75rem; } #botonTema:hover { color: var(--yh-primario); } /* -------------------------------------------------------------------------- 4. Utilidades del proyecto -------------------------------------------------------------------------- */ .texto-whatsapp { color: var(--yh-whatsapp); } /* Tarjeta de indicador para el panel administrativo (Módulo 4). */ .tarjeta-metrica { border-left: 4px solid var(--yh-primario); } .tarjeta-metrica .metrica-valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; } .tarjeta-metrica .metrica-etiqueta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } /* -------------------------------------------------------------------------- 5. Accesibilidad -------------------------------------------------------------------------- */ /* Foco visible en la navegación por teclado. */ :focus-visible { outline: 2px solid var(--yh-primario); outline-offset: 2px; } /* Respeta la preferencia del sistema de reducir el movimiento. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 6. Impresión -------------------------------------------------------------------------- */ @media print { .navbar, footer, .btn { display: none !important; } .card { box-shadow: none; border: 1px solid #dee2e6; } }