/**
 * CSC floating widget.
 *
 * Modelo: en las páginas con CSC la CARD reemplaza a John desde el load y
 * MORPHEA entre mini (sólo la barra) y expandida (el mismo elemento se agranda
 * revelando título + texto + botones). Enroque con John en el slot
 * abajo-derecha (mientras la card está activa, John se retira; el × la devuelve).
 *
 * Slide robusto: la card NO usa display:none (rompe la transición). Se mantiene
 * renderizada y se oculta con visibility/opacity/transform; el JS sólo togglea
 * .is-in.
 */

.ag-csc-float {
	pointer-events: none; /* sólo los overlays capturan eventos */
	font-family: var(--wp--preset--font-family--host-grotesk);
}
.ag-csc-float[hidden] { display: none; }

/* ── Slide (la card entra/sale desde abajo) ── */
.ag-csc-card {
	position: fixed;
	right: 28px;
	bottom: 28px;
	left: auto;
	z-index: 1000; /* por encima de John (999) */
	pointer-events: auto;
	opacity: 0;
	transform: translateY(120%);
	visibility: hidden;
	transition:
		transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.28s ease,
		visibility 0.34s;
}
.ag-csc-card.is-in {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* ── Card (morph mini ↔ expandida) ─────────────────────── */
.ag-csc-card {
	--csc-w: min(340px, calc(100vw - 56px));
	width: max-content; /* mini: ajustada al eyebrow (compacta, sin espacio al pedo) */
	max-width: var(--csc-w);
	background: var(--wp--preset--color--neutral-900, #171717);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--border-radius--large, 16px);
	box-shadow: var(--wp--custom--shadow--large, 0 24px 48px -12px rgba(0, 0, 0, 0.18));
	overflow: hidden;
}
.ag-csc-card__bar { display: flex; align-items: center; }
.ag-csc-card__toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px 14px 16px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: inherit;
}
.ag-csc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success, #16a34a);
}
.ag-csc-card__chev {
	display: inline-flex;
	color: var(--wp--preset--color--neutral-400, #a3a3a3);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ag-csc-card.is-expanded .ag-csc-card__chev { transform: rotate(180deg); }

/* × (cerrar → John): sólo visible en estado expandido */
.ag-csc-x {
	flex: 0 0 auto;
	display: none;
	margin-right: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--neutral-400, #a3a3a3);
	font-size: 18px;
	line-height: 1;
	padding: 4px;
	border-radius: 8px;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.ag-csc-card.is-expanded .ag-csc-x { display: inline-flex; }
.ag-csc-x:hover { color: var(--wp--preset--color--white, #fff); background: rgba(255, 255, 255, 0.08); }

/* El morph: la zona expandible crece de 0fr → 1fr (anima el alto sin saltos). */
.ag-csc-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	width: 0; /* colapsado no aporta ancho → la card queda compacta en mini */
	overflow: hidden;
	transition:
		grid-template-rows 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
		width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ag-csc-card.is-expanded .ag-csc-card__reveal { grid-template-rows: 1fr; width: var(--csc-w); }
.ag-csc-card__reveal-inner {
	width: var(--csc-w); /* ancho fijo: el contenido no se reacomoda mientras anima */
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.ag-csc-card.is-expanded .ag-csc-card__reveal-inner { opacity: 1; transition-delay: 0.08s; }
.ag-csc-card__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--white, #fff);
	margin: 0 16px 8px;
}
.ag-csc-card__text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 16px 16px;
}
.ag-csc-card__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }

/* ── Botones del card ──────────────────────────────────── */
.ag-csc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: var(--wp--custom--border-radius--small, 12px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-csc-btn__ic { display: inline-flex; }
.ag-csc-btn svg { width: 16px; height: 16px; display: block; }
.ag-csc-btn--green { background: var(--wp--preset--color--primary, #367c2b); color: var(--wp--preset--color--white); }
.ag-csc-btn--green:hover { background: var(--wp--preset--color--primary-dark, #2d6830); }
.ag-csc-btn--outline { border: 1px solid rgba(255, 255, 255, 0.25); color: var(--wp--preset--color--white); }
.ag-csc-btn--outline:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Enroque con John ──────────────────────────────────── */
.agronorte-john-float {
	transition: bottom 0.3s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.3s ease, visibility 0.36s ease;
}
body.has-csc-active .agronorte-john-float {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(120%);
}

/* ── Mobile: la card (toast mini + banner expandida) coincide en ancho con el
       resto del contenido — mismos márgenes laterales (--agronorte-layout-inline)
       que las secciones. left+right fijan el ancho al del container en ambos
       estados (width:auto deja que los márgenes manden, no max-content). ── */
@media (max-width: 768px) {
	.ag-csc-card {
		left: var(--agronorte-layout-inline);
		right: var(--agronorte-layout-inline);
		bottom: 12px;
		width: auto;
		max-width: none;
		--csc-w: calc(100vw - 2 * var(--agronorte-layout-inline));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ag-csc-card { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
	.ag-csc-card__reveal,
	.ag-csc-card__chev { transition: none; }
}

/* ── Horario CSC: oculto fuera del horario activo ── */
html:not(.agronorte-csc-open) .ag-csc-float { display: none; }