/* =========================================================================
   Home dashboard layout.
   ========================================================================= */

.ssm-home { display: grid; grid-template-columns: 1fr 340px; gap: var(--ssm-sp-5); align-items: start; }
.ssm-home__main, .ssm-home__rail { display: flex; flex-direction: column; gap: var(--ssm-sp-5); min-width: 0; }

/*
 * Rotating Visión/Misión/Valores/Propósito hero (§5.1). Same slot/size as
 * the original static hero.
 *
 * .ssm-hero__track is a CSS grid where every slide shares the same cell
 * (grid-area: 1/1) — a "grid stack". This is deliberate over the previous
 * position:absolute approach: with everything absolutely positioned, the
 * track has no in-flow content to size itself from and collapses, so one
 * slide had to stay in-flow as a height fallback. That fallback slide kept
 * its layout box even while marked `hidden` (the `hidden` attribute lost to
 * this file's own `.ssm-hero__slide { display:flex }` at equal specificity,
 * since author CSS beats the UA stylesheet on a tie) — a full-height phantom
 * box sitting above the real active slide, which was the empty-space bug.
 * Grid stacking sizes the row from every slide's natural content height
 * (all remain real grid items, never display:none) with no fallback hack
 * needed, and hiding is done with `inert` + opacity so it can never again
 * fight a `display` declaration.
 */
.ssm-hero {
	position: relative;
	border-radius: var(--ssm-radius-lg);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.ssm-hero__track { display: grid; }
.ssm-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex; align-items: flex-end;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(12px);
	transition: opacity 420ms ease, transform 420ms ease, visibility 420ms;
	pointer-events: none;
}
.ssm-hero__slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.ssm-hero__slide::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ssm-item, var(--ssm-blue-900)) 25%, transparent) 0%, color-mix(in srgb, var(--ssm-item, var(--ssm-blue-900)) 88%, #050c14 40%) 100%);
}
.ssm-hero__content { position: relative; z-index: 1; padding: var(--ssm-sp-6); max-width: 560px; }
.ssm-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
	padding: 4px 10px; border-radius: var(--ssm-radius-full);
	margin-bottom: var(--ssm-sp-3);
}
.ssm-hero__title { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: var(--ssm-sp-3); }
.ssm-hero__body { font-size: 14px; opacity: .92; line-height: 1.55; margin-bottom: var(--ssm-sp-4); max-width: 480px; }
.ssm-hero__cta { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); padding: 10px 16px; border-radius: var(--ssm-radius-sm); font-weight: 600; font-size: 13.5px; transition: background 180ms ease, transform 180ms ease; }
.ssm-hero__cta:hover { background: rgba(255,255,255,.28); transform: translateX(2px); }

.ssm-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
	border: none; color: #fff; font-size: 20px; line-height: 1;
	cursor: pointer; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: background 180ms ease;
}
.ssm-hero__arrow:hover { background: rgba(255,255,255,.3); }
.ssm-hero__arrow--prev { left: var(--ssm-sp-4); }
.ssm-hero__arrow--next { right: var(--ssm-sp-4); }

.ssm-hero__dots { position: absolute; right: var(--ssm-sp-5); bottom: var(--ssm-sp-4); z-index: 2; display: flex; gap: 8px; }
.ssm-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; transition: background 180ms ease, width 180ms ease; }
.ssm-hero__dot.is-active { background: #fff; width: 22px; border-radius: var(--ssm-radius-full); }

@media (max-width: 640px) {
	.ssm-hero__arrow { display: none; }
}

/* Banner destacado — horizontal editorial strip, WP-admin managed (ssm_banner, type=destacado). */
/*
 * §3 (banner destacado) — supports two looks from the same markup so it
 * never becomes "one more flat rectangle": with a featured image, the
 * photo/illustration shows through a color-tinted overlay (same treatment
 * as the hero slides); without one, it falls back to a pure gradient +
 * icon. Both read the same --ssm-item color, so categories stay visually
 * distinct either way.
 */
.ssm-banner-featured {
	display: flex; align-items: center; gap: var(--ssm-sp-5);
	border-radius: var(--ssm-radius-lg);
	padding: var(--ssm-sp-5) var(--ssm-sp-6);
	background: linear-gradient(120deg, var(--ssm-item, var(--ssm-color-primary)) 0%, color-mix(in srgb, var(--ssm-item, var(--ssm-color-primary)) 70%, #0a1a2c) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.ssm-banner-featured--photo {
	background-size: cover;
	background-position: center;
}
.ssm-banner-featured--photo::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, color-mix(in srgb, var(--ssm-item, var(--ssm-color-primary)) 88%, #050c14 15%) 0%, color-mix(in srgb, var(--ssm-item, var(--ssm-color-primary)) 45%, transparent) 100%);
}
.ssm-banner-featured::after {
	content: ''; position: absolute; right: -40px; top: -40px;
	width: 160px; height: 160px; border-radius: 50%;
	background: rgba(255,255,255,.08);
}
.ssm-banner-featured__icon {
	width: 56px; height: 56px; border-radius: var(--ssm-radius-md);
	background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	position: relative; z-index: 1;
}
.ssm-banner-featured__icon .ssm-icon { width: 26px; height: 26px; }
.ssm-banner-featured__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ssm-banner-featured__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-bottom: 4px; }
.ssm-banner-featured__title { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.ssm-banner-featured__subtitle { font-size: 13px; opacity: .9; }
.ssm-banner-featured__cta {
	position: relative; z-index: 1; flex-shrink: 0;
	background: #fff; color: var(--ssm-item, var(--ssm-color-primary));
	padding: 9px 16px; border-radius: var(--ssm-radius-sm);
	font-size: 13px; font-weight: 700;
	transition: transform 180ms ease;
}
.ssm-banner-featured__cta:hover { transform: translateX(2px); }
@media (max-width: 640px) {
	.ssm-banner-featured { flex-wrap: wrap; }
	.ssm-banner-featured__cta { width: 100%; text-align: center; }
}

/* Banner importante — slim site-top alert, WP-admin managed (ssm_banner, type=importante). Sits above the sidebar/topbar shell, same slot as the DEMO banner. */
.ssm-banner-alert {
	display: flex; align-items: center; gap: var(--ssm-sp-3);
	padding: 10px var(--ssm-sp-5);
	font-size: 13px; font-weight: 600;
}
.ssm-banner-alert .ssm-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ssm-banner-alert a { text-decoration: underline; text-underline-offset: 2px; flex-shrink: 0; margin-left: auto; }
.ssm-banner-alert--informativo { background: var(--ssm-color-info-light); color: var(--ssm-blue-700); }
.ssm-banner-alert--importante { background: var(--ssm-color-warning-light); color: #6b4508; }
.ssm-banner-alert--urgente { background: var(--ssm-color-danger); color: #fff; }

/* Mini banner — small promo card in the right rail. */
.ssm-mini-banner {
	display: flex; align-items: center; gap: var(--ssm-sp-3);
	padding: var(--ssm-sp-4) var(--ssm-sp-5);
	border-radius: var(--ssm-radius-md);
	background: var(--ssm-item-wash, var(--ssm-blue-50));
	margin: 0 var(--ssm-sp-5) var(--ssm-sp-5);
}
.ssm-mini-banner__icon { width: 38px; height: 38px; border-radius: 50%; background: var(--ssm-item, var(--ssm-color-primary)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ssm-mini-banner__icon .ssm-icon { width: 18px; height: 18px; }
.ssm-mini-banner h4 { font-size: 13px; margin-bottom: 2px; color: var(--ssm-item, var(--ssm-text)); }
.ssm-mini-banner p { font-size: 12px; color: var(--ssm-text-muted); }

.ssm-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ssm-sp-4); }
/*
 * display:block explícito — es un <a>, que sin blockificar (display
 * inline por defecto) ignora aspect-ratio por completo. Dentro de un
 * contenedor flex (la grilla del archive) el navegador lo blockifica
 * solo, así que el bug quedó oculto ahí; en single-ssm_news.php, donde
 * este <a> cuelga directo de un <article> normal (no flex), colapsaba a
 * altura 0 pese al aspect-ratio — encontrado inspeccionando el DOM real,
 * no solo con lint.
 */
.ssm-news-card__img { display: block; aspect-ratio: 16/10; border-radius: var(--ssm-radius-md) var(--ssm-radius-md) 0 0; overflow: hidden; background: var(--ssm-bg); }
.ssm-news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ssm-news-card__body { padding: var(--ssm-sp-4); }
.ssm-news-card__meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ssm-text-muted); margin-bottom: 8px; }
.ssm-news-card__title { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.ssm-news-card__excerpt { font-size: 13px; color: var(--ssm-text-muted); margin-bottom: 8px; }
.ssm-news-card__link { font-size: 13px; font-weight: 600; color: var(--ssm-color-primary); display: inline-flex; align-items: center; gap: 4px; }

.ssm-content-communiques { display: flex; flex-direction: column; gap: var(--ssm-sp-2); }
.ssm-communique-row { display: flex; gap: var(--ssm-sp-3); padding: var(--ssm-sp-3) var(--ssm-sp-5); border-bottom: 1px solid var(--ssm-border); }
.ssm-communique-row:last-child { border-bottom: none; }
.ssm-communique-row__icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ssm-communique-row__icon .ssm-icon { width: 16px; height: 16px; }
.ssm-communique-row__title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.ssm-communique-row__meta { font-size: 11.5px; color: var(--ssm-text-muted); }

.ssm-community-composer { display: flex; gap: var(--ssm-sp-3); align-items: flex-start; padding: var(--ssm-sp-5); }
.ssm-community-composer__input { flex: 1; background: var(--ssm-bg); border: 1px solid var(--ssm-border); border-radius: var(--ssm-radius-md); padding: var(--ssm-sp-4); }
.ssm-community-composer__input textarea {
	width: 100%; border: none; background: transparent; resize: vertical; min-height: 40px;
	font-family: inherit; font-size: 13.5px; color: var(--ssm-text); margin-bottom: var(--ssm-sp-3); padding: 0;
}
.ssm-community-composer__input textarea:focus { outline: none; }
.ssm-community-composer__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ssm-composer-type-btn {
	background: var(--ssm-surface); border: 1px solid var(--ssm-border); border-radius: var(--ssm-radius-full);
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
	font-size: 12px; font-weight: 600; color: var(--ssm-text-muted); cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ssm-composer-type-btn .ssm-icon { width: 14px; height: 14px; }
.ssm-composer-type-btn:hover { background: var(--ssm-bg); }
.ssm-composer-type-btn.is-active { background: var(--ssm-color-primary-light); color: var(--ssm-color-primary); border-color: var(--ssm-color-primary-light); }

.ssm-birthday-wish-btn {
	background: none; border: 1px solid var(--ssm-border); border-radius: var(--ssm-radius-full);
	display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; margin-top: 6px;
	font-size: 11px; font-weight: 600; color: var(--ssm-item, var(--ssm-gold-600)); cursor: pointer;
	transition: background-color 160ms ease;
}
.ssm-birthday-wish-btn .ssm-icon { width: 13px; height: 13px; }
.ssm-birthday-wish-btn:hover { background: var(--ssm-item-wash, var(--ssm-gold-100)); }

.ssm-benefit-list { display: flex; flex-direction: column; gap: var(--ssm-sp-4); padding: var(--ssm-sp-5); }
.ssm-benefit-list li { display: flex; gap: var(--ssm-sp-3); }
.ssm-benefit-list__icon { width: 38px; height: 38px; border-radius: var(--ssm-radius-sm); background: var(--ssm-item-wash, var(--ssm-color-info-light)); color: var(--ssm-item, var(--ssm-color-primary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ssm-benefit-list h4 { font-size: 13.5px; margin-bottom: 2px; }
.ssm-benefit-list p { font-size: 12.5px; color: var(--ssm-text-muted); }

.ssm-integrations { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--ssm-sp-4); padding: var(--ssm-sp-5); }
.ssm-integration { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ssm-text-muted); }
.ssm-integration__icon { width: 48px; height: 48px; border-radius: var(--ssm-radius-md); border: 1px solid var(--ssm-border); display: flex; align-items: center; justify-content: center; background: var(--ssm-surface); }

/* --- Right rail --- */
.ssm-agenda-item { display: flex; gap: var(--ssm-sp-3); padding: var(--ssm-sp-3) var(--ssm-sp-5); }
.ssm-agenda-item__date { width: 44px; text-align: center; background: var(--ssm-item-wash, var(--ssm-color-primary-light)); color: var(--ssm-item, var(--ssm-color-primary)); border-radius: var(--ssm-radius-sm); padding: 4px 0; font-size: 11px; font-weight: 700; line-height: 1.2; flex-shrink: 0; }
.ssm-agenda-item__title { font-size: 13px; font-weight: 600; }
.ssm-agenda-item__meta { font-size: 11.5px; color: var(--ssm-text-muted); }

.ssm-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ssm-sp-3); padding: var(--ssm-sp-5); }
.ssm-quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: var(--ssm-sp-4) var(--ssm-sp-2); border: 1px solid var(--ssm-border); border-radius: var(--ssm-radius-md); font-size: 12px; font-weight: 600; position: relative; }
.ssm-quick-item:hover { background: var(--ssm-bg); }
.ssm-quick-item .ssm-icon { color: var(--ssm-color-primary); width: 22px; height: 22px; }
.ssm-quick-item .ssm-nav__badge { position: absolute; top: 6px; right: 6px; margin: 0; }

.ssm-birthday-row { display: flex; gap: var(--ssm-sp-4); padding: var(--ssm-sp-5); overflow-x: auto; }
.ssm-birthday-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; text-align: center; flex-shrink: 0; }
.ssm-birthday-item strong { display: block; font-size: 12px; }

.ssm-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: var(--ssm-sp-5); }
.ssm-gallery-grid a { aspect-ratio: 1; border-radius: var(--ssm-radius-sm); overflow: hidden; background: var(--ssm-bg); }
.ssm-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1180px) {
	.ssm-news-grid { grid-template-columns: repeat(2, 1fr); }
	.ssm-integrations { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
	.ssm-home { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ssm-news-grid { grid-template-columns: 1fr; }
	.ssm-quick-grid { grid-template-columns: repeat(3, 1fr); }
	.ssm-hero__title { font-size: 19px; }
}