/* ============================================================================
   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; }
}