/** * UPN Accordion — Frontend Styles * Universidad Pedagógica Nacional * * Tokens de color: * --upn-blue: #001C7C (institucional) * --upn-orange: #FE6D00 (acento) */ /* ============================================================ Variables locales (espejo de los tokens del tema UPN) ============================================================ */ .upn-accordion { --acc-bg: #ffffff; --acc-border: #e5e7eb; --acc-trigger-bg: #f4f6f9; --acc-trigger-text: #111827; --acc-trigger-hover:#e8ecf0; --acc-body-bg: #ffffff; --acc-body-text: #374151; --acc-icon-color: #6b7280; --acc-focus-ring: #001C7C; --acc-radius: 0.5rem; --acc-transition: 0.25s ease; } /* Dark mode — activado por la clase .dark en */ .dark .upn-accordion { --acc-bg: #1f2937; --acc-border: #374151; --acc-trigger-bg: #1f2937; --acc-trigger-text: #f3f4f6; --acc-trigger-hover:#374151; --acc-body-bg: #111827; --acc-body-text: #d1d5db; --acc-icon-color: #9ca3af; --acc-focus-ring: #60a5fa; } /* ============================================================ Wrapper ============================================================ */ .upn-accordion { margin-bottom: 0.375rem; border-radius: var(--acc-radius); overflow: hidden; border: 1px solid var(--acc-border); background: var(--acc-bg); transition: border-color var(--acc-transition), background var(--acc-transition); } /* ============================================================
— elemento nativo ============================================================ */ .upn-accordion__details { display: block; } /* ============================================================ Trigger () ============================================================ */ .upn-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; cursor: pointer; list-style: none; /* Oculta el triángulo nativo en Firefox */ background: var(--acc-trigger-bg); color: var(--acc-trigger-text); font-weight: 600; font-size: 1rem; line-height: 1.5; transition: background var(--acc-transition), color var(--acc-transition); user-select: none; -webkit-user-select: none; } /* Ocultar triángulo nativo en Chrome/Safari/Edge */ .upn-accordion__trigger::-webkit-details-marker { display: none; } .upn-accordion__trigger:hover { background: var(--acc-trigger-hover); } /* Focus accesible (WCAG AA) */ .upn-accordion__trigger:focus { outline: none; } .upn-accordion__trigger:focus-visible { outline: 2px solid var(--acc-focus-ring); outline-offset: -2px; } /* ============================================================ Etiqueta del título ============================================================ */ .upn-accordion__title-text { flex: 1; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } /* ============================================================ Ícono Phosphor (ph-caret-down) ============================================================ */ .upn-accordion__icon { flex-shrink: 0; font-size: 1.125rem; color: var(--acc-icon-color); transition: transform var(--acc-transition), color var(--acc-transition); pointer-events: none; } /* Rota el ícono cuando el acordeón está abierto */ .upn-accordion__details[open] > .upn-accordion__trigger > .upn-accordion__icon { transform: rotate(180deg); } /* ============================================================ Cuerpo (
) ============================================================ */ .upn-accordion__body { padding: 1rem 1.25rem; background: var(--acc-body-bg); color: var(--acc-body-text); font-size: 0.9375rem; line-height: 1.7; transition: background var(--acc-transition), color var(--acc-transition); } /* Animación de entrada (fade + slide sutil) */ .upn-accordion__details[open] > .upn-accordion__body { animation: upn-acc-open var(--acc-transition) both; } @keyframes upn-acc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Desactivar animaciones si el usuario lo prefiere */ @media (prefers-reduced-motion: reduce) { .upn-accordion, .upn-accordion__trigger, .upn-accordion__icon, .upn-accordion__body { transition: none; } .upn-accordion__details[open] > .upn-accordion__body { animation: none; } } /* ============================================================ Variante: primary (encabezado azul UPN) ============================================================ */ .upn-accordion--primary { --acc-trigger-bg: #001C7C; --acc-trigger-text: #ffffff; --acc-trigger-hover:#003570; --acc-icon-color: rgba(255, 255, 255, 0.75); --acc-border: #001C7C; --acc-focus-ring: #FE6D00; } .dark .upn-accordion--primary { --acc-trigger-bg: #003570; --acc-trigger-hover:#001C7C; --acc-border: #003570; } /* ============================================================ Variante: faq (pregunta + respuesta, con borde izquierdo naranja) ============================================================ */ .upn-accordion--faq { --acc-trigger-bg: #f4f6f9; --acc-trigger-text: #001C7C; --acc-trigger-hover:#e8ecf0; --acc-border: #e5e7eb; } .dark .upn-accordion--faq { --acc-trigger-text: #93c5fd; --acc-trigger-bg: #1f2937; --acc-trigger-hover:#374151; --acc-border: #374151; } .upn-accordion--faq .upn-accordion__body { border-left: 3px solid #FE6D00; padding-left: 1.5rem; } /* ============================================================ Variante: bordered (borde lateral naranja en el cuerpo) ============================================================ */ .upn-accordion--bordered .upn-accordion__body { border-left: 4px solid #001C7C; padding-left: 1.5rem; } .dark .upn-accordion--bordered .upn-accordion__body { border-left-color: #60a5fa; } /* ============================================================ Grupo de acordeones (upn/accordion-group) Acerca los ítems entre sí para que formen una sola unidad visual ============================================================ */ .upn-accordion-group { display: flex; flex-direction: column; gap: 0; } .upn-accordion-group .upn-accordion { margin-bottom: 0; border-radius: 0; border-bottom-width: 0; } .upn-accordion-group .upn-accordion:first-child { border-radius: var(--acc-radius) var(--acc-radius) 0 0; } .upn-accordion-group .upn-accordion:last-child { border-radius: 0 0 var(--acc-radius) var(--acc-radius); border-bottom-width: 1px; } /* ============================================================ Contenido dentro del cuerpo (tipografía) ============================================================ */ .upn-accordion__body > *:first-child { margin-top: 0; } .upn-accordion__body > *:last-child { margin-bottom: 0; } .upn-accordion__body a { color: #001C7C; text-decoration: underline; text-underline-offset: 2px; } .upn-accordion__body a:hover { color: #003570; } .dark .upn-accordion__body a { color: #93c5fd; } .dark .upn-accordion__body a:hover { color: #bfdbfe; }