/**
 * SwiftFind — Componente: shell del modal (envoltura, layout principal, footer, toast).
 * Equivale a legacy .modal / .m-main / .m-footer / .toast (sin cambios visuales).
 */

@layer wvn-components {
	/*
	 * Contención del ancho: el shell ocupa el ancho real disponible y nunca
	 * desborda el viewport. Rompe el max-width del tema (constrained layout)
	 * para que el grid interno calcule columnas sobre el ancho correcto.
	 */
	.wvn-search-app {
		max-width: 100%;
		overflow-x: clip;
	}
	/* El ancho completo solo cuando se pide explícitamente (--full) o cuando el
	 * shell es inline. Los paneles overlay (drawer/modal/dropdown) controlan su
	 * propio ancho y NO deben heredar width:100%. */
	.wvn-search-presentation--inline.wvn-search-app,
	.wvn-search-app--full { width: 100%; }
	/* Cuando el tema constriñe el contenido (constrained layout), permite que el
	 * shell recupere el ancho de su columna sin desbordar. El padre alignfull lo
	 * lleva a ancho completo (ver shortcode). */
	.wvn-search-app--full { width: 100%; }
	/* Cadena de contención: cada nivel de grid/flex puede encoger por debajo de
	 * su contenido (min-width:0) para que ningún hijo desborde al padre. */
	.wvn-search-app .wvn-modal,
	.wvn-search-app .wvn-main,
	.wvn-search-app .wvn-results,
	.wvn-search-app .wvn-results__content {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
	.wvn-search-app .wvn-results { width: 100%; }

	/*
	 * Modal embebido INLINE por defecto (fluye en la página, sin position:fixed)
	 * para no romper el layout ni desbordar. Como OVERLAY a pantalla completa
	 * solo cuando un trigger añade `.wvn-modal--overlay` (ver bloque de triggers).
	 */
	.wvn-modal {
		position: relative;
		background: var(--wvn-color-surface);
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 70vh;
	}
	.wvn-modal--overlay {
		position: fixed;
		inset: 0;
		z-index: var(--wvn-z-modal);
		min-height: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}
	.wvn-modal--overlay.wvn-is-active { opacity: 1; pointer-events: auto; }
	.wvn-modal__inner { display: contents; }

	/* Layout principal: sidebar + resultados */
	.wvn-main {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		overflow: hidden;
		min-height: 0;
	}

	/* Footer */
	.wvn-footer {
		border-top: 1px solid var(--wvn-color-line);
		padding: var(--wvn-space-5) var(--wvn-space-9);
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--wvn-color-muted);
		font-size: 12px;
	}
	.wvn-footer__kbds { display: flex; gap: var(--wvn-space-5); }

	/* Toast */
	.wvn-toast {
		position: fixed;
		bottom: 80px;
		left: 50%;
		transform: translateX(-50%);
		background: var(--wvn-color-ink);
		color: var(--wvn-color-on-ink);
		padding: 11px 18px;
		border-radius: var(--wvn-radius-pill);
		font-size: 13px;
		font-weight: 500;
		box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4);
		z-index: var(--wvn-z-toast);
		display: inline-flex;
		align-items: center;
		gap: var(--wvn-space-3);
		animation: wvn-toast-in .25s ease;
	}
	.wvn-toast__ok {
		background: var(--wvn-color-accent);
		color: var(--wvn-color-ink);
		width: 18px;
		height: 18px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
		font-size: 11px;
	}
	@keyframes wvn-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

	/* Landing (botón para abrir el modal) */
	.wvn-landing {
		min-height: 100vh;
		display: grid;
		place-content: center;
		gap: var(--wvn-space-5);
		background: radial-gradient(circle at 20% 10%, #ececea 0%, var(--wvn-color-bg) 60%);
		text-align: center;
	}
	.wvn-landing__title {
		font-family: var(--wvn-font-display);
		font-size: 42px;
		margin: 0;
		letter-spacing: var(--wvn-tracking-tight);
	}
	.wvn-landing__subtitle { color: var(--wvn-color-muted); margin: 0; }
}