/* Criollo Recomendador — floating bubble + modal (loaded site-wide, keep it light). */

/* ---------------- Bubble ---------------- */
.crc-bubble-wrap {
	--crc-b-size: 62px;
	--crc-b-ring: 3px;
	position: fixed;
	right: 20px;
	bottom: calc(var(--crc-b-offset, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transform: translateY(16px) scale(.9);
	transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.crc-bubble-wrap[hidden] { display: none; }
.crc-bubble-wrap.is-in { opacity: 1; transform: none; }
@media (max-width: 767px) {
	.crc-bubble-wrap { right: 14px; --crc-b-size: 56px; }
	.crc-bubble-wrap--sin-movil { display: none !important; }
}

.crc-bubble {
	position: relative;
	order: 2;
	width: var(--crc-b-size);
	height: var(--crc-b-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	background: transparent;
	cursor: pointer;
	isolation: isolate;
	box-shadow: 0 10px 26px rgba(75, 44, 32, .32), 0 0 22px rgba(138, 92, 255, .22);
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.crc-bubble:hover { transform: scale(1.06); box-shadow: 0 12px 30px rgba(75, 44, 32, .38), 0 0 30px rgba(61, 184, 255, .35); }
.crc-bubble:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Fast "AI" ring: a large conic gradient spinning behind the inner disc */
.crc-bubble::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: -2;
	background: conic-gradient(from 0deg, #ff3d77, #ff9a3d, #ffe45c, #3dffb0, #3db8ff, #8a5cff, #ff3d77);
	animation: crc-b-giro 2.6s linear infinite;
}

/* Slow brand gradient inside */
.crc-bubble__bg {
	position: absolute;
	inset: var(--crc-b-ring);
	z-index: -1;
	border-radius: 50%;
	background: linear-gradient(135deg, #4b2c20 0%, #5b7f6a 35%, #e0663a 65%, #4b2c20 100%);
	background-size: 300% 300%;
	animation: crc-b-flujo 12s ease-in-out infinite;
}

.crc-bubble__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.crc-bubble__icon svg { transform: rotate(-28deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }

/* Small sparkle, a hint of "smart" */
.crc-bubble__spark {
	position: absolute;
	top: 12px;
	right: 13px;
	width: 9px;
	height: 9px;
	background: #fff;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	animation: crc-b-destello 2.8s ease-in-out infinite;
}

/* Coffee bean (shared by bubble, modal title and loader) */
.crc-b-bean svg { display: block; overflow: visible; }
.crc-b-bean .crc-b-bean__e { fill: #fbf3e9; }
.crc-b-bean .crc-b-bean__p { fill: none; stroke: #4b2c20; stroke-width: 3; stroke-linecap: round; }

/* ---------------- Teaser ---------------- */
.crc-teaser {
	order: 1;
	position: relative;
	display: flex;
	align-items: center;
	max-width: 230px;
	background: #fffaf3;
	border: 1px solid #e3d8ca;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(47, 42, 37, .16);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.crc-teaser[hidden] { display: none; }
.crc-teaser.is-in { opacity: 1; transform: none; }
.crc-teaser::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -6px;
	background: #fffaf3;
	border-top: 1px solid #e3d8ca;
	border-right: 1px solid #e3d8ca;
	transform: rotate(45deg);
}
.crc-teaser button { font: inherit; margin: 0; background: none; border: 0; cursor: pointer; color: #2f2a25; box-shadow: none; text-transform: none; letter-spacing: normal; }
.crc-teaser__txt { padding: 11px 4px 11px 14px; text-align: left; font-size: .9rem; line-height: 1.3; font-weight: 600; }
.crc-teaser__txt:hover { color: #e0663a; background: none; }
.crc-teaser__x { align-self: flex-start; padding: 6px 10px 6px 4px; font-size: 1.1rem; line-height: 1; color: #8a7a6c; }
.crc-teaser__x:hover { color: #2f2a25; background: none; }

/* ---------------- Modal ---------------- */
html.crc-modal-open, html.crc-modal-open body { overflow: hidden; }

.crc-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.crc-modal[hidden] { display: none; }
.crc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(35, 24, 18, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .22s ease;
}
.crc-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(860px, 94vw);
	max-height: 90vh;
	background: #fbf3e9;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	overflow: hidden;
	opacity: 0;
	transform: translateY(18px) scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}
.crc-modal.is-open .crc-modal__overlay { opacity: 1; }
.crc-modal.is-open .crc-modal__panel { opacity: 1; transform: none; }

/* Thin animated "AI" line on top of the panel, echoing the bubble ring */
.crc-modal__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(90deg, #ff3d77, #ff9a3d, #ffe45c, #3dffb0, #3db8ff, #8a5cff, #ff3d77);
	background-size: 200% 100%;
	animation: crc-b-linea 3s linear infinite;
}

.crc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 22px; border-bottom: 1px solid #e3d8ca; }
.crc-modal__t { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; color: #2f2a25; }
.crc-b-bean--mini { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #4b2c20; }
.crc-b-bean--mini svg { width: 10px; height: 13px; transform: rotate(-28deg); }
.crc-modal__x {
	width: 44px; height: 44px; margin: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: transparent; box-shadow: none;
	font: inherit; font-size: 1.6rem; line-height: 1; color: #6d655d; cursor: pointer;
}
.crc-modal__x:hover { background: rgba(75, 44, 32, .08); color: #2f2a25; }
.crc-modal__x:focus-visible { outline: 3px solid rgba(91, 127, 106, .45); outline-offset: 1px; }

.crc-modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.crc-modal .crc-app { margin: 0 auto; border-radius: 0; background: transparent; }

.crc-modal__cargando { display: flex; justify-content: center; padding: 70px 0; }
.crc-b-bean--latido { display: block; width: 40px; height: 52px; }
.crc-b-bean--latido svg { width: 40px; height: 52px; }
.crc-b-bean--latido .crc-b-bean__e { fill: #4b2c20; }
.crc-b-bean--latido .crc-b-bean__p { stroke: #fbf3e9; }
.crc-b-bean--latido { animation: crc-b-latido 1.3s ease-in-out infinite; }
.crc-modal__error { padding: 40px 24px; text-align: center; color: #6d655d; }
.crc-b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 640px) {
	.crc-modal { align-items: flex-end; }
	.crc-modal__panel { width: 100%; height: 94vh; height: 94dvh; max-height: none; border-radius: 18px 18px 0 0; transform: translateY(40px); }
	.crc-modal__head { padding-left: 18px; }
}

/* ---------------- Keyframes ---------------- */
@keyframes crc-b-giro { to { transform: rotate(360deg); } }
@keyframes crc-b-flujo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes crc-b-linea { to { background-position: 200% 0; } }
@keyframes crc-b-destello { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes crc-b-latido {
	0%   { transform: rotate(-28deg) scale(.9);   opacity: .45; }
	15%  { transform: rotate(-28deg) scale(1.08); opacity: 1; }
	30%  { transform: rotate(-28deg) scale(.96);  opacity: .75; }
	45%  { transform: rotate(-28deg) scale(1.05); opacity: 1; }
	75%, 100% { transform: rotate(-28deg) scale(.9); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
	.crc-bubble::before, .crc-bubble__bg, .crc-bubble__spark, .crc-modal__panel::before { animation: none; }
	.crc-bubble-wrap, .crc-teaser, .crc-modal__panel, .crc-modal__overlay, .crc-bubble { transition: none; }
	.crc-b-bean--latido { animation: crc-b-fundido 2s ease-in-out infinite; transform: rotate(-28deg); }
}
@keyframes crc-b-fundido { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Shield against theme button styles (GeneratePress button:hover etc.) */
.crc-bubble-wrap .crc-bubble, .crc-bubble-wrap .crc-bubble:hover, .crc-bubble-wrap .crc-bubble:focus { background: transparent; color: inherit; }
.crc-modal .crc-modal__x:focus { background: transparent; }