@layer reset, base, components, utilities, site, states;

@layer components {
	.asistente-ia {
		--asistente-color: var(--brand-text, #2854c5);
		--asistente-color-oscuro: var(--brand-secondary, #17398b);
		--asistente-fondo: #f5f7fb;
		--asistente-texto: #172033;

		position: fixed;
		right: max(22px, env(safe-area-inset-right));
		bottom: max(22px, env(safe-area-inset-bottom));
		z-index: 1200;
		font-family: var(--font-sans);
		font-size: max(16px, 1rem);
	}

	.asistente-ia .asistente-ia__panel[hidden],
	.asistente-ia .asistente-ia__centro[hidden],
	.asistente-ia .asistente-ia__chat[hidden] {
		display: none;
	}

	.cookie-consent ~ .asistente-ia {
		display: none;
	}

	.asistente-ia__launcher {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		min-height: 54px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: linear-gradient(135deg, var(--asistente-color), var(--asistente-color-oscuro));
		box-shadow: 0 14px 35px rgb(20 45 105 / 28%);
		color: #fff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
		transition:
			transform 0.2s ease,
			box-shadow 0.2s ease;
	}

	.asistente-ia__launcher span {
		display: none;
	}

	.asistente-ia__launcher svg,
	.asistente-ia__form svg,
	.asistente-ia__canal svg {
		width: 23px;
		height: 23px;
		fill: none;
		stroke: currentcolor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
	}

	.asistente-ia__launcher:hover,
	.asistente-ia__launcher:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 18px 42px rgb(20 45 105 / 35%);
	}

	.asistente-ia__panel {
		position: absolute;
		right: 0;
		bottom: 68px;
		width: min(390px, calc(100vw - 28px));
		height: min(610px, calc(100dvh - 110px));
		overflow: hidden;
		border: 1px solid rgb(31 55 101 / 12%);
		border-radius: 22px;
		background: #fff;
		box-shadow: 0 26px 70px rgb(22 36 70 / 24%);
		color: var(--asistente-texto);
	}

	.asistente-ia[data-vista='centro'] .asistente-ia__panel {
		height: auto;
		max-height: min(610px, calc(100dvh - 110px));
	}

	.asistente-ia__centro {
		display: flex;
		max-height: min(610px, calc(100dvh - 110px));
		flex-direction: column;
	}

	.asistente-ia__chat {
		display: grid;
		grid-template-rows: auto minmax(190px, 1fr) auto auto auto;
		height: 100%;
	}

	.asistente-ia__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 18px 16px;
		background: linear-gradient(135deg, var(--asistente-color), var(--asistente-color-oscuro));
		color: #fff;
	}

	.asistente-ia__header span {
		display: block;
		margin-bottom: 3px;
		font-size: 0.68em;
		font-weight: 800;
		letter-spacing: 0.13em;
		opacity: 0.82;
	}

	.asistente-ia__header h2 {
		margin: 0;
		color: inherit;
		font-size: 1.05em;
		line-height: 1.25;
	}

	.asistente-ia__header-actions,
	.asistente-ia__titulo-chat {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.asistente-ia__header-actions button,
	.asistente-ia__cerrar,
	.asistente-ia__volver {
		display: grid;
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		padding: 0;
		place-items: center;
		border: 0;
		border-radius: 50%;
		background: rgb(255 255 255 / 12%);
		color: #fff;
		font: inherit;
		font-size: 1.35em;
		cursor: pointer;
	}

	.asistente-ia__header-actions button:hover,
	.asistente-ia__header-actions button:focus-visible,
	.asistente-ia__cerrar:hover,
	.asistente-ia__cerrar:focus-visible,
	.asistente-ia__volver:hover,
	.asistente-ia__volver:focus-visible {
		background: rgb(255 255 255 / 24%);
	}

	.asistente-ia__centro-contenido {
		display: flex;
		min-height: 0;
		padding: 18px;
		flex: 1;
		flex-direction: column;
		overflow-y: auto;
		background: var(--asistente-fondo);
	}

	.asistente-ia__centro-contenido > p {
		margin: 0 0 14px;
		color: #5d6678;
		font-size: 0.86em;
		line-height: 1.5;
	}

	.asistente-ia__canales {
		display: grid;
		gap: 9px;
	}

	.asistente-ia__canal {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 64px;
		padding: 10px 12px;
		border: 1px solid #e0e5ef;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 3px 10px rgb(24 41 79 / 4%);
		color: var(--asistente-texto);
		font: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition:
			border-color 0.18s ease,
			box-shadow 0.18s ease,
			transform 0.18s ease;
	}

	.asistente-ia__canal:hover,
	.asistente-ia__canal:focus-visible {
		border-color: rgb(40 84 197 / 45%);
		box-shadow: 0 8px 20px rgb(24 41 79 / 9%);
		color: var(--asistente-texto);
		transform: translateY(-1px);
	}

	.asistente-ia__canal--destacado {
		border-color: rgb(40 84 197 / 24%);
		background: linear-gradient(135deg, #f4f7ff, #fff);
	}

	.asistente-ia__canal-icono {
		display: grid;
		width: 42px;
		height: 42px;
		place-items: center;
		border-radius: 12px;
		background: #eef3ff;
		color: var(--asistente-color);
	}

	.asistente-ia__canal > span:nth-child(2) {
		display: grid;
		min-width: 0;
		gap: 2px;
	}

	.asistente-ia__canal b {
		font-size: 0.86em;
		font-weight: 700;
	}

	.asistente-ia__canal small {
		overflow: hidden;
		color: #687287;
		font-size: 0.72em;
		font-weight: 400;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.asistente-ia__canal i {
		color: #7c879b;
		font-size: 1.25em;
		font-style: normal;
	}

	.asistente-ia__ayuda {
		align-self: center;
		margin-top: 16px;
		color: var(--asistente-color-oscuro);
		font-size: 0.78em;
		font-weight: 700;
		text-decoration: none;
	}

	.asistente-ia__ayuda:hover,
	.asistente-ia__ayuda:focus-visible {
		text-decoration: underline;
	}

	.asistente-ia__mensajes {
		overflow-y: auto;
		padding: 18px;
		background: var(--asistente-fondo);
		scroll-behavior: smooth;
	}

	.asistente-ia__mensaje {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 12px;
	}

	.asistente-ia__mensaje p {
		max-width: 86%;
		margin: 0;
		padding: 11px 14px;
		border-radius: 15px 15px 15px 4px;
		background: #fff;
		box-shadow: 0 4px 14px rgb(24 41 79 / 7%);
		font-size: 0.88em;
		line-height: 1.55;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.asistente-ia__mensaje--cliente {
		justify-content: flex-end;
	}

	.asistente-ia__mensaje--cliente p {
		border-radius: 15px 15px 4px;
		background: var(--asistente-color);
		color: #fff;
	}

	.asistente-ia__mensaje--estado p {
		box-shadow: none;
		background: transparent;
		color: #667085;
		font-size: 0.78em;
		font-style: italic;
	}

	.asistente-ia__fuentes {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
		margin-top: 7px;
	}

	.asistente-ia__fuentes a,
	.asistente-ia__sugerencias button {
		border: 1px solid rgb(40 84 197 / 22%);
		border-radius: 999px;
		background: #fff;
		color: var(--asistente-color-oscuro);
		font: inherit;
		font-size: 0.74em;
		font-weight: 700;
		text-decoration: none;
	}

	.asistente-ia__fuentes a {
		padding: 6px 9px;
	}

	.asistente-ia__sugerencias {
		display: flex;
		gap: 7px;
		overflow-x: auto;
		padding: 8px 14px 4px;
		background: #fff;
	}

	.asistente-ia__sugerencias:empty {
		display: none;
	}

	.asistente-ia__sugerencias button {
		flex: 0 0 auto;
		max-width: 260px;
		padding: 7px 10px;
		cursor: pointer;
	}

	.asistente-ia__form {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 42px;
		gap: 8px;
		align-items: end;
		padding: 10px 14px;
		border-top: 1px solid #e8ebf2;
		background: #fff;
	}

	.asistente-ia__form > label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.asistente-ia__form textarea {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		box-sizing: border-box;
		width: 100%;
		height: 42px;
		min-height: 42px;
		max-height: 110px;
		resize: none;
		padding: 10px 12px;
		border: 1px solid #d6dbe7;
		border-radius: 12px;
		background: #fff;
		color: var(--asistente-texto);
		font: inherit;
		font-size: 0.88em;
		line-height: 1.35;
	}

	.asistente-ia__form textarea:focus {
		border-color: var(--asistente-color);
		box-shadow: 0 0 0 3px rgb(40 84 197 / 12%);
	}

	.asistente-ia__form .contador-caracteres {
		display: none;
	}

	.asistente-ia__form button {
		grid-column: 2;
		grid-row: 1;
		display: grid;
		width: 42px;
		height: 42px;
		padding: 0;
		place-items: center;
		border: 0;
		border-radius: 12px;
		background: var(--asistente-color);
		color: #fff;
		cursor: pointer;
	}

	.asistente-ia__form button:disabled,
	.asistente-ia__form textarea:disabled {
		cursor: wait;
		opacity: 0.62;
	}

	.asistente-ia__legal {
		margin: 0;
		padding: 0 14px 11px;
		background: #fff;
		color: #6d7482;
		font-size: 0.66em;
		line-height: 1.4;
	}

	.asistente-ia__legal a {
		color: inherit;
		text-decoration: underline;
	}

	@media (width <= 560px) {
		.asistente-ia {
			right: 14px;
			bottom: max(14px, env(safe-area-inset-bottom));
		}

		.asistente-ia__panel {
			right: -7px;
			bottom: 64px;
			width: calc(100vw - 14px);
			height: min(650px, calc(100dvh - 88px));
			border-radius: 18px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.asistente-ia__launcher,
		.asistente-ia__canal,
		.asistente-ia__mensajes {
			scroll-behavior: auto;
			transition: none;
		}
	}
}

/* Neutraliza únicamente la cascada global de app.utomaki.com y recupera las reglas canónicas de la capa components. */
.asistente-ia,
.asistente-ia * {
	all: revert-layer;
	box-sizing: border-box;
}