/* ================================================================= Vista archive-event.php — rediseño en acordeón (Figma 22-Events-Desktop, node 4508:16332, archivo BdUd1g6K6cuVm4036Z5p6p). Condicional (is_post_type_archive('event'), inc/enqueue.php). El listado (.event-pagination/.event-list) queda centrado a 995px de ANCHO FIJO en el eje del VIEWPORT completo (no del .container de 1200px) — medido contra el Figma: el bloque "events" (x=223, w=995) queda centrado en la página de 1440px, no dentro del área útil de 1200px del container. Mismo patrón de wrapper de 2 niveles que .resource-hero/.resource-results (archive-resource.css): padding-inline fluido en el wrapper de ancho completo, max-width+auto-margin sin padding propio en el hijo. ================================================================= */ @layer views { .event-hero { padding-block: 3rem; padding-inline: clamp(var(--space-m), 6vw, 7.5rem); border-bottom: 1px solid #e5e5e5; } .event-hero__inner { max-width: var(--container); margin-inline: auto; } .event-hero__desc { max-width: 36.5rem; /* 585px, valor literal del Figma */ } .event-results { padding-inline: clamp(var(--space-m), 6vw, 7.5rem); } .event-results #results { max-width: 62.1875rem; /* 995px */ margin-inline: auto; } /* Dimmed + spinner reposicionable durante la carga htmx del cambio de mes — mismo patrón que .resource-spinner (archive-resource.css)/.story-spinner (archive-stories.css): event-spinner.js reposiciona el elemento (position:fixed, coords de viewport) sobre el botón prev/next clickeado en htmx:beforeRequest. */ body.is-loading .event-results #results { opacity: .6; transition: opacity .2s; } .event-spinner { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); width: 20px; height: 20px; opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0s linear .3s; } .event-spinner.htmx-request { opacity: 1; transition-delay: .3s; } .event-spinner__ring { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #d0d1d3; border-top-color: var(--dia-color-text-primary, #121212); animation: event-spinner-spin .7s linear infinite; } @keyframes event-spinner-spin { to { transform: rotate(360deg); } } /* ---- Paginación por mes ---- */ /* padding-block 80px/48px en desktop (bug real reportado, era 40px/32px) — 2 pasos más en tablet/mobile (media queries de este mismo archivo, abajo) guardando la misma proporción ~60% top/bottom que ya usa el resto del sitio en paddings equivalentes de paginación (.resource-pagination/.project-pagination/.story-pagination: 80px/120px desktop → 48px/64px mobile, un solo escalón sin tablet propio porque esas viven ABAJO del grid, antes del footer; acá arriba SÍ hace falta un paso intermedio porque además el layout completo cambia en esos mismos 2 breakpoints, 64rem/48rem, ver el resto del archivo). */ .event-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: 5rem 3rem; /* 80px / 48px */ } .event-month-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dia-color-border-strong, #232323); border-radius: var(--dia-radius-sm, 4px); background: transparent; padding: 17px 24px; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .event-month-btn svg { width: 16px; height: 16px; } /* Hover — mismo "botón gris" consolidado que TODOS los botones de paginación del sitio (--dia-btn-gray-gradient/--dia-btn-gray-shadow, base.css, §12.76 de gotchas.md), border-color #a7b7ca (mismo literal que .resource-page-prev/next, archive-resource.css). */ .event-month-btn:hover { border-color: #a7b7ca; background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } /* Clamp propio (no el de .hero-title): 24px móvil → 40px desktop, un rango distinto al del hero — antes era un salto duro (2.5rem fijo + override a 1.5rem en @media width<48rem, ver abajo, ya removido). event-day__num usa el MISMO rango/fórmula (mismo tamaño en el Figma). */ .event-pagination__label { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.43vw, 2.5rem); /* 24px → 40px desktop */ line-height: 1.25; letter-spacing: -1px; color: var(--dia-color-text-primary, #121212); } /* ---- Lista de eventos ---- */ .event-list { display: flex; flex-direction: column; gap: 24px; padding-block-end: 7.5rem; } .event-row { background: var(--dia-color-bg-subtle, #fafbfb); border: 1px solid transparent; border-radius: var(--dia-radius-lg, 12px); } .event-row--open { border-color: #cdd6e1; } /* Hover SOLO en filas con acordeón real (has_content, ver card-event.php — únicas que llevan la clase --collapsible) — de los 5 eventos del Figma, 2 no tienen cuerpo/imagen/botón de recursos y se muestran como fila simple sin nada que expandir; esas NO deben insinuar que son clicables con un hover que en realidad no hace nada (bug real reportado). */ .event-row--collapsible:hover { border-color: #cdd6e1; background: #fafbfb; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .08), 0 16px 40px 0 rgba(0, 0, 0, .04); } /* Toda la fila (no solo el botón +/-) es clicable para expandir/colapsar (@click en .event-row__head, ver card-event.php) — el hover del botón +/- se dispara también al pasar el mouse por cualquier parte de la fila, para que se perciba como UN solo target clicable en vez de "la fila hace algo" + "el botón hace otra cosa". */ .event-row--collapsible:hover .event-toggle { border-color: transparent; background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } .event-row__head { display: flex; align-items: flex-start; gap: var(--space-s); padding: var(--space-m); } .event-row--collapsible .event-row__head { cursor: pointer; } .event-row--open .event-row__head { border-bottom: 1px solid #e5e5e5; } /* ---- Day box ---- */ /* Bug real reportado (mobile, captura del usuario): la caja tenía un tamaño fijo por breakpoint (4.5rem mobile / 7.75rem desktop, salto duro) mientras el número adentro (.event-day__num) YA escalaba fluido (clamp) — a ciertos anchos el número + el mes ya no cabían en los 72px fijos de mobile y el overflow:hidden de acá recortaba el número, dando el efecto visual de "montado" sobre el mes. Fix: la caja TAMBIÉN es un clamp ahora, a la MISMA proporción que el resto del day box (72px → 124px, mismo rango que .event-day__num de abajo), para que guarden el ratio entre sí en cualquier ancho, no solo en los 2 breakpoints fijos de antes. */ .event-day { flex-shrink: 0; width: clamp(4.5rem, 3.57rem + 4.64vw, 7.75rem); /* 72px → 124px desktop */ height: clamp(4.5rem, 3.57rem + 4.64vw, 7.75rem); display: flex; flex-direction: column; align-items: center; background: #e6eaf0; border: 1px solid #e5e5e5; border-radius: var(--dia-radius-md, 6px); overflow: hidden; } .event-day__month { margin: 0; width: 100%; padding-inline: 8px; /* padding-block fluido (antes 12px fijo): con la caja completa (.event-day) ya escalando como clamp, un padding vertical FIJO acá hacía que la franja del mes casi no encogiera en mobile mientras el número sí — terminaban de alto casi igual (bug real reportado, en vez de la proporción ~32%/68% mes/número que se ve bien en tablet/desktop). Valores calculados para que la franja del mes mantenga ESA MISMA proporción (~32% del alto de .event-day) en cualquier ancho: 12px desktop (con el font-size/line-height de acá arriba, da 39.6px total = 32% de 124px) → 4px mobile (da ~23.6px total ≈ 32% de 72px). */ padding-block: clamp(4px, 1.3px + .74vw, 12px); background: var(--dia-color-bg-page, #fff); text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.2; /* antes heredaba el line-height del body (~1.6) — ver comentario de .event-day */ letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-secondary, #767778); } .event-day__num { margin: 0; flex: 1; min-height: 0; /* el default de un flex item es min-height:auto (= su alto de contenido), que ignora el flex-shrink y puede desbordar el overflow:hidden del padre — mismo gotcha que min-height:0 en .event-row__body (ver comentario del acordeón más abajo) */ display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.43vw, 2.5rem); /* 24px → 40px desktop, mismo clamp que .event-pagination__label */ line-height: 1; /* antes heredaba el line-height del body (~1.6) — ver comentario de .event-day */ letter-spacing: -1px; color: var(--dia-color-text-primary, #121212); } /* ---- Info (título + tags) ---- */ .event-row__info { flex: 1; min-width: 0; } .event-row__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + .5vw, 1.5rem); /* 18px → 24px desktop */ line-height: 1.3; /* unitless: escala junto con el clamp, un line-height fijo en px no lo hacía */ letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); } .event-tag { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .event-tag--dept { color: var(--dia-color-brand-secondary, #3e8391); /* Ahora es (antes

) — liga al Department correspondiente, pedido explícito 2026-07-29. text-decoration:none: sin reset global de en base.css (solo `a { color: inherit }`), se subrayaba por default. */ text-decoration: none; } .event-tag--dept:hover { text-decoration: underline; } .event-tag svg { flex-shrink: 0; width: 16px; height: 16px; } /* ---- Toggle (expandir/colapsar) ---- */ .event-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--dia-color-border-strong, #232323); border-radius: var(--dia-radius-sm, 4px); background: transparent; /* Sin esto, un