/* ============================================================================
   P4S — COMPONENTES. El CSS que respalda a WEB-INF/tags/*.tag

   Es la tercera hoja propia, y existe porque las otras dos no podian con esto:

     p4s-tokens.css  es SOLO tokens. Un componente no cabe ahi sin romper la
                     regla de que ese archivo es la paleta y nada mas.
     p4s-app.css     va scopeada bajo `.main-content` -- el contenedor de
                     privateLayout-- y solo la carga privateLayout. Un componente
                     que se use desde el marco legado no recibiria ninguna regla.

   Por eso esta hoja NO lleva scope de contenedor y la cargan LOS DOS marcos
   (privateLayout.jsp y c_head_r_New.jsp). Durante la migracion una misma vista
   puede servirse desde cualquiera de los dos: el componente tiene que verse igual
   en ambos, o la migracion por vistas produce dos aspectos en vez de uno.

   REGLA: aqui no se escribe ningun hex. Todo color sale de var(--p4s-*), que
   conmuta claro/oscuro con `body.dark` (HU-1.5). Si falta un rol, se anade el
   token en p4s-tokens.css -- no la excepcion aqui.

   Ref ENA-1.24 (#172)
   ========================================================================== */

/* ----- AVISO -------------------------------------------------------------
   Banda a ancho completo para algo que el usuario tiene que ver antes que el
   contenido: una inscripcion a medias, una cuenta por confirmar.

   Nacio como un <style> incrustado DOS VECES dentro de
   00-inicio/inscripcionRecuerdaUsuarioLogin.jsp (ENA-1.20). Funcionaba, pero se
   repetia en cada rama del componente y no lo podia reutilizar nadie mas: el caso
   exacto que ENA-1.24 viene a cerrar. */
.p4s-aviso {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.4;
}

.p4s-aviso a {
    color: inherit;
    text-decoration: underline;
}

.p4s-aviso a:hover,
.p4s-aviso a:focus {
    color: inherit;
}

/* Tono por defecto: superficie de marca. El texto es --p4s-on-brand, que NO
   conmuta con el tema porque la banda teal es la misma en claro y en oscuro. */
.p4s-aviso--marca {
    background-color: var(--p4s-accent-fill);
    color: var(--p4s-on-accent-fill);
}

.p4s-aviso--peligro {
    background-color: var(--p4s-danger-fill);
    color: var(--p4s-on-danger-fill);
}

/* Tono discreto: para un aviso que informa sin urgencia. Aqui si hace falta
   borde, porque el fondo esta a un paso del de la pagina. */
.p4s-aviso--suave {
    background-color: var(--p4s-surface-alt);
    color: var(--p4s-text);
    border: 1px solid var(--p4s-border);
}

/* ----- BOTON -------------------------------------------------------------
   Estilo PROPIO, sin delegar en `.btn` de Bootstrap, y esa es la decision que
   hace al componente reutilizable de verdad.

   El marco legado (integratorNew -> c_head_r_New) carga Foundation y CERO
   Bootstrap. Un componente que emitiera `btn btn-primary` saldria ahi como un
   enlace pelado -- que es exactamente BUG-1.8 (#40), y por eso hay vistas con
   `class="tiny radius button"` escrito a mano para esquivarlo. Con estilo propio
   el boton se ve igual en los dos marcos y esa decision desaparece.

   Tampoco pelea con Cork: al no llamarse `.btn-primary` no entra en la guerra de
   `!important` que `assets4/assets/css/main.css` tiene montada. */
.p4s-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.p4s-boton:hover { text-decoration: none; }

/* El foco se marca SIEMPRE y con :focus-visible, no con :focus: asi el anillo
   sale a quien navega con teclado y no a cada clic de raton. */
.p4s-boton:focus-visible {
    outline: 2px solid var(--p4s-accent);
    outline-offset: 2px;
}

.p4s-boton[disabled],
.p4s-boton[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.p4s-boton--pequeno {
    padding: .3rem .75rem;
    font-size: .8125rem;
}

/* Relleno de marca. Usa --p4s-accent-fill y NO --p4s-accent: en tema oscuro son
   hex distintos a proposito, porque este lleva texto blanco encima y aquel se lee
   sobre la tarjeta. Ver el bloque 3b de p4s-tokens.css. */
.p4s-boton--principal {
    background-color: var(--p4s-accent-fill);
    color: var(--p4s-on-accent-fill);
}
.p4s-boton--principal:hover  { background-color: var(--p4s-accent-fill-hover);  color: var(--p4s-on-accent-fill); }
.p4s-boton--principal:active { background-color: var(--p4s-accent-fill-active); color: var(--p4s-on-accent-fill); }

.p4s-boton--peligro {
    background-color: var(--p4s-danger-fill);
    color: var(--p4s-on-danger-fill);
}
.p4s-boton--peligro:hover  { background-color: var(--p4s-danger); color: var(--p4s-on-danger-fill); }
.p4s-boton--peligro:active { background-color: var(--p4s-danger); color: var(--p4s-on-danger-fill); }

.p4s-boton--contorno {
    background-color: transparent;
    border-color: var(--p4s-accent);
    color: var(--p4s-accent);
}
.p4s-boton--contorno:hover {
    background-color: var(--p4s-accent-fill);
    border-color: var(--p4s-accent-fill);
    color: var(--p4s-on-accent-fill);
}

.p4s-boton--enlace {
    background-color: transparent;
    color: var(--p4s-accent);
    padding-left: .25rem;
    padding-right: .25rem;
}
.p4s-boton--enlace:hover { color: var(--p4s-accent-light); text-decoration: underline; }

/* ----- BANNER DE ENTIDAD -------------------------------------------------
   La foto de portada de un ecosistema, un evento o una startup.

   `max-height` es lo que arregla el fallo que motivo el componente: antes era
   `width:100%` SIN limite de alto, asi que la PROPORCION DE LA IMAGEN decidia
   la altura de la pagina. En el contenedor ancho de v3 (`container-xxl`) una
   portada normal crecia hasta unos 800 px y empujaba el nombre, el eslogan y
   el boton de registro fuera de la pantalla.

   `object-fit: contain` (no `cover`): a diferencia de `cover`, nunca recorta
   la imagen -- una portada con texto (el caso mas comun: nombre del evento,
   fechas) puede perder ese texto por los bordes con `cover` si su proporcion
   no calza con la del contenedor. `contain` deja franjas vacias a los lados
   en vez de recortar; el fondo (`--p4s-surface-alt`) las disimula.

   `max-height` subio de 280 a 420: con 280, la mayoria de portadas reales
   (proporcion ~16:9/1.9:1, mas anchas que altas) quedaban recortadas de
   ALTO por el limite y dejaban una franja de fondo plano arriba/abajo --
   "se ve muy plano y cortante" (feedback real, HU-1.40, 2026-09-14). Con
   420 una portada tipica cabe completa sin franja; sigue respetando
   `max-height`, asi que el fallo original (altura sin techo, ENA-1.24
   #172) no vuelve -- solo una portada MUY vertical seguiria recortando
   por ancho al centrarse con `contain`. Borde + sombra suave (no un
   bloque de color plano) para que la foto se sienta enmarcada en vez de
   flotando sola contra el fondo de la pagina. */
.p4s-banner-entidad {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
    background: var(--p4s-surface-alt);
    border: 1px solid var(--p4s-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(0, 0, 0, 0.1);
}

/* En movil se baja el alto: 420 px sobre una pantalla de 640 es casi toda
   la pantalla. El contenido tiene que empezar a verse sin desplazar. */
@media (max-width: 767px) {
    .p4s-banner-entidad { max-height: 220px; }
}

/* ----- COMPARTIR ---------------------------------------------------------
   Los botones de AddToAny (private/component/shareSocialMediaButtons.jsp), que
   incluyen 10 vistas. El fragmento ya era compartido; lo que no tenia era
   presentacion propia, asi que cada vista lo dejaba donde caia -- en el marco v3
   acababa flotando sobre el fondo, por encima del contenido y sin margen.

   Los iconos los pinta AddToAny con sus propios colores de marca (Facebook,
   WhatsApp...), que NO son los nuestros y no deben tokenizarse: son marcas de
   terceros. Aqui solo se decide COLOCACION y aire. */
.p4s-compartir {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: flex-end;
    margin: .75rem 0 1rem;
}

@media (max-width: 575px) {
    .p4s-compartir { justify-content: center; }
}

/* ----- PAGINA PUBLICA DE ENTIDAD -----------------------------------------
   Piezas comunes de las paginas publicas migradas al marco moderno: empresa
   (HU-1.48), proyecto (HU-1.49) y, cuando se toquen, perfil (HU-1.44) y charla
   (HU-1.46), que hoy llevan su copia en linea.

   Las <img> van con DOS clases de especificidad: la global de p4s-app.css
   `.main-content img{max-width:100%;height:auto}` (0,1,1) le gana a una clase
   suelta y deformaba avatares y portadas (BUG-1.45). Ref HU-1.48 (#245)
   ------------------------------------------------------------------------ */
.p4s-pagina { color: var(--p4s-text); }
.p4s-pagina-card {
    background: var(--p4s-surface);
    border: 1px solid var(--p4s-border);
    border-radius: 14px;
    box-shadow: var(--p4s-shadow-card);
    color: var(--p4s-text);
    overflow: hidden;
}
.p4s-pagina-card + .p4s-pagina-card { margin-top: 1.5rem; }
.p4s-pagina-card__cuerpo { padding: 1.5rem; }
.p4s-pagina-card__titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--p4s-text);
}
.p4s-pagina-vacio { text-align: center; padding: 2rem 1rem; color: var(--p4s-muted); }
.p4s-pagina .tab-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* Cabecera: banner a ancho completo + logo/avatar + datos. */
.p4s-pagina-cabecera .p4s-pagina-cabecera__banner {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    background: var(--p4s-surface-alt);
}
.p4s-pagina-cabecera__cuerpo { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem; }
.p4s-pagina-cabecera__marco {
    width: 132px;
    height: 132px;
    margin-top: -80px;
    align-self: flex-start;
    flex-shrink: 0;
    border-radius: 18px;
    padding: 6px;
    background: var(--p4s-surface);
    box-shadow: var(--p4s-shadow-card);
}
.p4s-pagina-cabecera__marco .p4s-pagina-cabecera__logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 12px;
    object-fit: contain;
    background: var(--p4s-surface);
}
.p4s-pagina-cabecera__datos { flex: 1 1 320px; min-width: 0; }
.p4s-pagina-cabecera__titulo { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; color: var(--p4s-text); }
.p4s-pagina-cabecera__bio { font-size: 1.05rem; color: var(--p4s-text-soft); margin: 0 0 1rem; }
@media (max-width: 767.98px) {
    .p4s-pagina-cabecera__cuerpo { justify-content: center; text-align: center; }
    .p4s-pagina-cabecera__marco { align-self: center; }
    .p4s-chips, .p4s-redes { justify-content: center; }
}

/* Chips de categorias / etiquetas. */
.p4s-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.p4s-chip {
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--p4s-surface-alt);
    border: 1px solid var(--p4s-border);
    font-size: .85rem;
    color: var(--p4s-text);
}

/* Contacto y redes: solo se pintan las que tienen valor. */
.p4s-redes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.p4s-red {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--p4s-border);
    background: var(--p4s-surface);
    color: var(--p4s-accent);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.p4s-red:hover { background: var(--p4s-surface-alt); color: var(--p4s-accent); }
.p4s-red i { font-size: 1rem; }

/* Pestanas (mismo componente que HU-1.40/1.44/1.46); JS: scripts/p4s-pestanas.js */
.p4s-pestanas.nav-tabs {
    border-bottom: 2px solid var(--p4s-border);
    margin: 1.5rem 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.p4s-pestanas .nav-link {
    border: none;
    color: var(--p4s-text-soft);
    font-weight: 500;
    padding: 1rem 1.25rem;
    border-radius: 8px 8px 0 0;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.p4s-pestanas .nav-link:hover { color: var(--p4s-accent); background: var(--p4s-surface-alt); }
.p4s-pestanas .nav-link.active { color: var(--p4s-accent); background: var(--p4s-surface); border-bottom: 3px solid var(--p4s-accent); }
.p4s-pestanas__cuenta {
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--p4s-surface-alt);
    color: var(--p4s-muted);
}

/* Miembros de un equipo. */
.p4s-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.p4s-miembro { text-align: center; text-decoration: none; color: var(--p4s-text); }
.p4s-miembro:hover { color: var(--p4s-accent); }
.p4s-miembro .p4s-miembro__foto {
    display: block;
    width: 84px;
    height: 84px;
    max-width: none;
    margin: 0 auto .5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    border: 3px solid var(--p4s-surface);
    box-shadow: var(--p4s-shadow-card);
    background: var(--p4s-surface-alt);
}
.p4s-miembro__nombre { display: block; font-weight: 600; line-height: 1.25; }
.p4s-miembro__rol { display: block; font-size: .8rem; color: var(--p4s-muted); }

/* Insignias en fila (mismo patron que el perfil, HU-1.44). */
.p4s-insignias-fila { display: flex; flex-wrap: wrap; gap: .75rem; }
.p4s-insignias-fila .p4s-insignia-fila__icono {
    width: 56px;
    height: 56px;
    max-width: none;
    border-radius: 50%;
    object-fit: contain;
}

/* Comentarios (listados de comentariosCharla.jsp / comentariosStartup.jsp). */
.p4s-comentario { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--p4s-border); }
.p4s-comentario:last-child { border-bottom: 0; }
.p4s-comentario .p4s-comentario__foto {
    width: 44px;
    height: 44px;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--p4s-surface-alt);
}
.p4s-comentario__cuerpo { min-width: 0; flex: 1; }
.p4s-comentario__autor { font-weight: 600; color: var(--p4s-accent); text-decoration: none; }
.p4s-comentario__fecha { font-size: .8rem; color: var(--p4s-muted); margin-left: .5rem; }
.p4s-comentario__tipo {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--p4s-surface-alt);
    color: var(--p4s-text-soft);
    margin: .35rem .5rem .35rem 0;
}
.p4s-comentario__texto { margin: .25rem 0 0; overflow-wrap: anywhere; }
.p4s-comentario__link { font-size: .9rem; color: var(--p4s-accent); overflow-wrap: anywhere; }
.p4s-pagina-comentar { border-top: 1px solid var(--p4s-border); margin-top: 1rem; padding-top: 1.25rem; }

/* Texto largo de descripcion (HTML del autor). */
.p4s-pagina-texto { line-height: 1.7; overflow-wrap: anywhere; }
.p4s-pagina-texto img { max-width: 100%; border-radius: 8px; }

/* Tarjeta de servicio / producto de una empresa (BUG-1.52). Logo en caja fija:
   sin ella la global `.main-content img{max-width:100%}` lo estiraba a todo el
   ancho y el texto quedaba en una columna de una palabra por linea. */
.p4s-servicio-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
    background: var(--p4s-surface);
    border: 1px solid var(--p4s-border);
    border-radius: 14px;
    box-shadow: var(--p4s-shadow-card);
    text-decoration: none;
    color: var(--p4s-text);
    transition: box-shadow .2s ease, transform .2s ease;
}
.p4s-servicio-card:hover { transform: translateY(-2px); color: var(--p4s-text); }
.p4s-servicio-card__marco {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 12px;
    padding: 6px;
    background: var(--p4s-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.p4s-servicio-card__marco .p4s-servicio-card__logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border-radius: 8px;
}
.p4s-servicio-card__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.p4s-servicio-card__nombre { font-weight: 700; color: var(--p4s-accent); line-height: 1.25; }
.p4s-servicio-card__slogan {
    font-size: .9rem;
    color: var(--p4s-text-soft);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagina de servicio / producto (HU-1.53). */
.p4s-chip--acento { background: var(--p4s-accent); border-color: var(--p4s-accent); color: var(--p4s-on-accent-fill); font-weight: 600; }
/* Sin banner el logo no se monta sobre nada: sin el margen negativo. */
.p4s-pagina-cabecera__cuerpo--sin-banner .p4s-pagina-cabecera__marco { margin-top: 0; }
.p4s-servicio-de {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding: .4rem .9rem .4rem .4rem;
    border-radius: 999px;
    background: var(--p4s-surface-alt);
    color: var(--p4s-text);
    text-decoration: none;
}
.p4s-servicio-de:hover { color: var(--p4s-accent); }
.p4s-servicio-de .p4s-servicio-de__logo {
    width: 32px;
    height: 32px;
    max-width: none;
    border-radius: 50%;
    object-fit: contain;
    background: var(--p4s-surface);
}
.p4s-pagina-cita {
    margin: 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--p4s-accent);
    background: var(--p4s-surface-alt);
    border-radius: 0 10px 10px 0;
    line-height: 1.7;
}

/* ----- PAGINA DE PROYECTO (HU-1.49) -------------------------------------- */
/* Votos like/dislike: el conteo va DENTRO del <i> (lo reescribe script.js);
   el icono de Font Awesome es su ::before. */
.p4s-voto {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--p4s-border);
    background: var(--p4s-surface);
    color: var(--p4s-accent);
    cursor: pointer;
}
.p4s-voto:hover { background: var(--p4s-surface-alt); }
.p4s-voto i { font-size: 1.15rem; font-style: normal; }
.p4s-voto i::before { margin-right: .4rem; }
.p4s-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
.p4s-chip .p4s-chip__icono { width: 16px; height: 16px; max-width: none; margin-right: .35rem; vertical-align: -3px; }

/* Vincularse como emprendedor o mentor: lo que la pagina tiene que destacar. */
.p4s-vincular {
    border-top: 1px solid var(--p4s-border);
    padding: 1.25rem 1.5rem;
    background: var(--p4s-surface-alt);
}
.p4s-vincular__titulo { font-weight: 700; margin: 0 0 .25rem; }
.p4s-vincular__texto { color: var(--p4s-text-soft); margin: 0 0 1rem; font-size: .92rem; }
.p4s-vincular__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.p4s-vincular__opcion {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--p4s-surface);
    border: 1px solid var(--p4s-border);
}
.p4s-vincular__opcion b { display: flex; align-items: center; gap: .5rem; }
.p4s-vincular__opcion small { color: var(--p4s-text-soft); }
.p4s-estado {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}
.p4s-estado--espera { background: var(--p4s-warning-tint); color: var(--p4s-text); }
.p4s-estado--rechazo { background: var(--p4s-danger-tint); color: var(--p4s-text); }
.p4s-estado--ok { background: var(--p4s-success-tint); color: var(--p4s-text); }

/* Votar en eventos. */
.p4s-votar { border-top: 1px solid var(--p4s-border); padding: 1.25rem 1.5rem 1.5rem; }
.p4s-votar__lista { display: flex; flex-wrap: wrap; gap: 1rem; }
.p4s-votar__item { flex: 0 1 220px; text-align: center; padding: 1rem; border-radius: 12px; background: var(--p4s-surface-alt); }
.p4s-votar__item a { color: var(--p4s-accent); font-weight: 600; text-decoration: none; }
.p4s-votar__item .p4s-votar__img { width: 56px; height: auto; max-width: none; cursor: pointer; margin: .5rem 0; }

/* Radar (amCharts). */
.p4s-radar { width: 100%; height: 460px; }
.p4s-radar-progreso { text-align: center; font-size: 1.05rem; margin: 0 0 .5rem; }
.p4s-radar-progreso b { color: var(--p4s-accent); font-size: 1.4rem; }

/* Linea de tiempo: hitos y actividades. */
.p4s-progreso { height: 8px; border-radius: 999px; background: var(--p4s-surface-alt); overflow: hidden; }
.p4s-progreso__barra { height: 100%; border-radius: 999px; background: var(--p4s-accent); }
.p4s-hitos { position: relative; padding-left: 2rem; }
.p4s-hitos::before { content: ""; position: absolute; left: .7rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--p4s-border); }
.p4s-hito { position: relative; margin-bottom: 2rem; }
.p4s-hito__punto {
    position: absolute;
    left: -2rem;
    top: 1.1rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--p4s-accent);
    color: var(--p4s-on-accent-fill);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.p4s-hito__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; }
.p4s-hito__nombre { font-size: 1.15rem; font-weight: 700; margin: 0; }
.p4s-hito__fechas { font-size: .85rem; color: var(--p4s-muted); }
.p4s-actividades { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.p4s-actividad {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--p4s-surface-alt);
}
.p4s-actividad__nombre { font-weight: 700; margin: 0; }
.p4s-actividad__persona { display: flex; align-items: center; gap: .5rem; color: var(--p4s-text); text-decoration: none; font-size: .9rem; }
.p4s-actividad__persona .p4s-actividad__foto { width: 32px; height: 32px; max-width: none; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.p4s-actividad__dato { font-size: .82rem; color: var(--p4s-text-soft); }
.p4s-actividad details summary { cursor: pointer; font-size: .85rem; color: var(--p4s-accent); }
.p4s-actividad details p { font-size: .88rem; margin: .4rem 0 0; }