/**
 * MIHA Cuentas de Cobro — estilos públicos (widget, ventana de consulta y
 * aviso de acceso).
 *
 * Unidad gráfica MIHA UI: vidrio cálido, tarjetas blancas premium, píldoras,
 * Urbanist (títulos) + Plus Jakarta Sans (texto) y el color del conjunto.
 * Desde la 1.5.0 los colores salen de MIHA UI (--mui-*); si MIHA UI no está
 * activo se usan los valores de respaldo. Los controles se blindan frente a
 * los estilos del tema y de Elementor (por eso algunos !important).
 *
 * @package MIHA Cuentas de Cobro
 */

/* =================================================================== Tokens */
.miha-ccw,
.miha-ccq-modal,
.miha-ccq,
.miha-ccq-prev,
.miha-cc-guard {
	--cc-a: var(--mui-acento, #372677);
	--cc-a-rgb: var(--mui-acento-rgb, 55, 38, 119);
	--cc-a-claro: var(--mui-acento-claro, #b5addb);
	--cc-a-suave: var(--mui-acento-suave, rgba(55, 38, 119, .12));
	--cc-a-oscuro: var(--mui-acento-oscuro, #2b1f62);
	--cc-tinta: var(--mui-tinta, #1e1838);
	--cc-texto: var(--mui-texto-2, #3a3456);
	--cc-tenue: var(--mui-tenue, #6e6886);
	--cc-ok: var(--mui-ok, #1f7a47);
	--cc-error: var(--mui-error, #c2372c);
	--cc-fuente: var(--mui-fuente, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--cc-display: var(--mui-display, "Urbanist", "Plus Jakarta Sans", system-ui, sans-serif);
	--cc-curva: var(--mui-curva, cubic-bezier(.2, .8, .2, 1));
	--cc-linea: rgba(30, 24, 56, .09);
	--cc-vidrio: linear-gradient(160deg, rgba(255, 252, 248, .84), rgba(243, 236, 228, .68));
	--cc-blanco: linear-gradient(160deg, #fff, rgba(252, 250, 255, .96));
	--cc-sombra: 0 2px 6px rgba(30, 22, 60, .05), 0 34px 64px -34px rgba(30, 22, 60, .55);
	box-sizing: border-box;
	font-family: var(--cc-fuente);
	color: var(--cc-tinta);
	-webkit-font-smoothing: antialiased;
}
.miha-ccw *, .miha-ccw *::before, .miha-ccw *::after,
.miha-ccq-modal *, .miha-ccq-modal *::before, .miha-ccq-modal *::after,
.miha-ccq-prev *, .miha-cc-guard * { box-sizing: border-box; }
.miha-ccw p, .miha-ccq p, .miha-ccq h2, .miha-ccq-side p, .miha-cc-guard p, .miha-cc-guard h3 { margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: normal; }

@keyframes ccq-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ccq-gira { to { transform: rotate(360deg); } }
@keyframes ccq-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ccq-brilla { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ============================================ Widget [miha_cuentas_cobro] */
.miha-ccw {
	/* La tarjeta escala con su ancho (conserva la proporción en el home). */
	container-type: inline-size;
	width: 100%;
	margin: 0 auto;
	line-height: 1.2;
}
.miha-ccw__in {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	font-size: clamp(11px, 3.6cqw, 16px);
	padding: 1.6em 1.6em 1.5em;
	border-radius: 2.1em;
	background: var(--cc-vidrio);
	-webkit-backdrop-filter: blur(26px) saturate(140%);
	backdrop-filter: blur(26px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 #fff, var(--cc-sombra);
	color: var(--cc-tinta);
	transition: transform .55s var(--cc-curva), box-shadow .55s var(--cc-curva);
	animation: ccq-sube .7s var(--cc-curva) both;
}
.miha-ccw__in::after {
	/* Halo de color del conjunto (decorativo). */
	content: "";
	position: absolute;
	right: -4em;
	top: -5em;
	width: 13em;
	height: 13em;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent);
	pointer-events: none;
	transition: transform 1.2s var(--cc-curva);
}
.miha-ccw:hover .miha-ccw__in { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(30, 22, 60, .05), 0 44px 70px -36px rgba(30, 22, 60, .6); }
.miha-ccw:hover .miha-ccw__in::after { transform: scale(1.25) translate(-1em, 1em); }
.miha-ccw--plain .miha-ccw__in { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.miha-ccw--plain .miha-ccw__in::after { display: none; }
.miha-ccw--plain:hover .miha-ccw__in { transform: none; box-shadow: none; }
.miha-ccw__in > * { position: relative; z-index: 1; }
.miha-ccw__in > :nth-child(2) { animation: ccq-sube .6s .08s var(--cc-curva) both; }
.miha-ccw__in > :nth-child(3) { animation: ccq-sube .6s .16s var(--cc-curva) both; }
.miha-ccw__in > :nth-child(4) { animation: ccq-sube .6s .24s var(--cc-curva) both; }

/* Título: «Cuentas de Cobro» grande y liviano */
.miha-ccw__head { display: flex; align-items: flex-end; gap: 1em; }
.miha-ccw__title { display: flex; flex-direction: column; min-width: 0; font-family: var(--cc-display); font-weight: 300; font-size: 2.35em; line-height: .98; letter-spacing: -.045em; color: var(--cc-tinta); }
.miha-ccw__t2 { color: var(--cc-tenue); }
.miha-ccw__line { flex: 1; height: 1px; margin-bottom: .55em; background: linear-gradient(90deg, var(--cc-linea), transparent); }

/* Cuerpo: icono + periodo + fecha */
.miha-ccw__body { display: flex; align-items: center; gap: .9em; }
.miha-ccw__icon {
	width: 3.2em;
	height: 3.2em;
	flex: none;
	border-radius: 1.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cc-a);
	color: #fff;
	box-shadow: 0 14px 26px -14px rgba(var(--cc-a-rgb), .95);
	transition: transform .6s var(--cc-curva);
}
.miha-ccw:hover .miha-ccw__icon { transform: rotate(-8deg) scale(1.05); }
.miha-ccw__svg { width: 1.45em; height: 1.45em; }
.miha-ccw__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.miha-ccw__chip { display: inline-flex; align-items: center; min-height: 2em; padding: 0 .95em; border-radius: 999px; background: var(--cc-tinta); color: #fff; font-size: .9em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.miha-ccw__status { display: flex; align-items: center; gap: .45em; font-size: .9em; line-height: 1.35; color: var(--cc-texto); }
.miha-ccw__status strong { color: var(--cc-tinta); font-weight: 700; }
.miha-ccw__check { width: 1.35em; height: 1.35em; flex: none; padding: .22em; border-radius: 50%; background: rgba(31, 122, 71, .14); color: var(--cc-ok); stroke-width: 3; }

/* Botones */
.miha-ccw__actions { display: flex; flex-direction: column; gap: .6em; }
.miha-ccw .miha-ccw__btn,
.miha-ccw .miha-ccw__hbtn {
	position: relative;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .55em;
	width: 100%;
	min-height: 3.2em !important;
	margin: 0 !important;
	padding: 0 1.4em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--cc-tinta) !important;
	color: #fff !important;
	font-family: var(--cc-fuente) !important;
	font-size: .95em !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
	box-shadow: 0 16px 30px -18px rgba(30, 24, 56, .9) !important;
	cursor: pointer;
	transition: transform .4s var(--cc-curva), background-color .3s ease, box-shadow .4s ease !important;
}
.miha-ccw .miha-ccw__btn::before,
.miha-ccw .miha-ccw__hbtn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22), transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}
.miha-ccw .miha-ccw__btn:hover,
.miha-ccw .miha-ccw__hbtn:hover { background: var(--cc-a) !important; color: #fff !important; transform: translateY(-2px); }
.miha-ccw .miha-ccw__btn:hover::before,
.miha-ccw .miha-ccw__hbtn:hover::before { animation: ccq-brilla .9s ease; }
.miha-ccw .miha-ccw__btn:active, .miha-ccw .miha-ccw__hbtn:active { transform: scale(.98); }
.miha-ccw .miha-ccw__btn--pay,
.miha-ccw .miha-ccw__hbtn--pay {
	background: rgba(255, 255, 255, .75) !important;
	color: var(--cc-tinta) !important;
	box-shadow: inset 0 0 0 1px rgba(30, 24, 56, .14) !important;
}
.miha-ccw .miha-ccw__btn--pay:hover,
.miha-ccw .miha-ccw__hbtn--pay:hover { background: #fff !important; color: var(--cc-a) !important; box-shadow: inset 0 0 0 1px rgba(var(--cc-a-rgb), .4), 0 16px 30px -20px rgba(30, 24, 56, .6) !important; }
.miha-ccw__bico, .miha-ccw__hbico { width: 1.2em; height: 1.2em; flex: none; }
/* Flecha del botón principal (píldora + círculo) */
.miha-ccw__go { width: 2.1em; height: 2.1em; margin-right: -.95em; margin-left: auto; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); transition: transform .5s var(--cc-curva), background-color .3s ease; }
.miha-ccw__go svg { width: 1em; height: 1em; }
.miha-ccw__btn:hover .miha-ccw__go { transform: translateX(3px) rotate(-10deg); background: rgba(255, 255, 255, .24); }
.miha-ccw__btn--go { justify-content: flex-start !important; }

/* Tarjeta: en 2 columnas de botones cuando hay espacio */
@container (min-width: 380px) {
	.miha-ccw--tarjeta .miha-ccw__actions { flex-direction: row; }
	.miha-ccw--tarjeta .miha-ccw__actions > * { flex: 1 1 0; }
	.miha-ccw--tarjeta .miha-ccw__btn--pay { flex: 0 1 auto !important; width: auto; }
}

/* Franja (diseno="compacto") */
.miha-ccw--compacto .miha-ccw__in { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1em 1.4em; font-size: clamp(11px, 1.7cqw, 15px); padding: 1.1em 1.2em 1.1em 1.6em; border-radius: 999px; }
.miha-ccw--compacto .miha-ccw__head { flex: none; }
.miha-ccw--compacto .miha-ccw__title { flex-direction: row; gap: .25em; font-size: 1.85em; white-space: nowrap; }
.miha-ccw--compacto .miha-ccw__line { display: none; }
.miha-ccw--compacto .miha-ccw__body { flex: 1; min-width: 0; }
.miha-ccw--compacto .miha-ccw__info { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .4em .8em; }
.miha-ccw--compacto .miha-ccw__icon { width: 2.8em; height: 2.8em; }
.miha-ccw--compacto .miha-ccw__actions { flex-direction: row; margin-left: auto; }
.miha-ccw--compacto .miha-ccw .miha-ccw__btn, .miha-ccw--compacto .miha-ccw__btn { width: auto; }
.miha-ccw--compacto .miha-ccw__search { flex-basis: 100%; }
.miha-ccw--compacto .miha-ccw__status { white-space: nowrap; }
@container (max-width: 640px) {
	.miha-ccw--compacto .miha-ccw__in { border-radius: 2em; font-size: clamp(11px, 3.4cqw, 15px); padding: 1.3em; }
	.miha-ccw--compacto .miha-ccw__actions { flex-direction: column; width: 100%; margin: 0; }
	.miha-ccw--compacto .miha-ccw__btn { width: 100% !important; }
}

/* Sin publicaciones todavía */
.miha-ccw--empty .miha-ccw__status { color: var(--cc-tenue); }

/* Buscador dentro de la tarjeta (modo="linea") */
.miha-ccw__search { font-size: 15px; }
.miha-ccw--inline.is-wide { max-width: none !important; }

/* Mosaico del home (diseno="home"): proporción de dos mosaicos */
.miha-ccw--home { height: 100%; }
.miha-ccw--home .miha-ccw__in {
	height: 100%;
	gap: .8em;
	font-size: clamp(9px, 4.6cqw, 15px);
	padding: 1em;
	border-radius: 1.7em;
	background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 252, 248, .74));
}
.miha-ccw--home .miha-ccw__in::after { width: 9em; height: 9em; right: -3em; top: -3.5em; }
.miha-ccw__hhead { display: flex; align-items: center; gap: .7em; min-width: 0; }
.miha-ccw__hicon { width: 2.7em; height: 2.7em; flex: none; border-radius: .95em; display: flex; align-items: center; justify-content: center; background: var(--cc-a); color: #fff; box-shadow: 0 12px 22px -12px rgba(var(--cc-a-rgb), .95); transition: transform .6s var(--cc-curva); }
.miha-ccw--home:hover .miha-ccw__hicon { transform: rotate(-8deg) scale(1.05); }
.miha-ccw__hsvg { width: 1.3em; height: 1.3em; }
.miha-ccw__htext { min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.miha-ccw__htext strong { font-family: var(--cc-display); font-size: 1.4em; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--cc-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miha-ccw__hsub { display: flex; align-items: center; flex-wrap: wrap; gap: .3em .45em; }
.miha-ccw__hchip { display: inline-flex; align-items: center; min-height: 1.7em; padding: 0 .7em; border-radius: 999px; background: var(--cc-tinta); color: #fff; font-size: .78em; font-weight: 700; }
.miha-ccw__hdate { display: inline-flex; align-items: center; gap: .25em; font-size: .78em; color: var(--cc-texto); white-space: nowrap; }
.miha-ccw__hck { width: 1.1em; height: 1.1em; color: var(--cc-ok); stroke-width: 3; }
.miha-ccw__hbtns { display: flex; gap: .45em; margin-top: auto; }
.miha-ccw .miha-ccw__hbtn { flex: 1 1 0; min-height: 2.8em !important; padding: 0 .8em !important; font-size: .88em !important; }
@container (max-width: 190px) {
	.miha-ccw__hbtns { flex-direction: column; }
}

/* ======================================================= Ventana de consulta */
html.miha-ccq-lock, html.miha-ccq-lock body { overflow: hidden !important; }
.miha-ccq-modal { position: fixed; inset: 0; z-index: 100000; display: block; line-height: 1.5; }
.miha-ccq-modal__overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(1200px 700px at 30% 20%, rgba(255, 250, 244, .55), rgba(243, 237, 230, .38)), rgba(30, 24, 56, .14);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
	opacity: 0;
	transition: opacity .45s ease;
}
.miha-ccq-modal.is-open .miha-ccq-modal__overlay { opacity: 1; }
.miha-ccq-modal.is-closing .miha-ccq-modal__overlay { opacity: 0; transition-duration: .28s; }
.miha-ccq-modal__stage { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; padding: 40px 24px; }

/* Composición: consulta (vidrio) + tarjeta oscura del periodo y el pago */
.miha-ccq-modal__comp {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 430px);
	grid-template-areas: "main";
	gap: 18px;
	margin: auto;
	width: 100%;
	max-width: 430px;
	transition: max-width .6s var(--cc-curva);
}
.miha-ccq-modal__comp.has-side { grid-template-columns: minmax(0, 430px) 290px; grid-template-areas: "main side"; max-width: 738px; }
.miha-ccq-modal__comp.is-wide { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" !important; max-width: 940px; }
.miha-ccq-modal__comp.is-wide .miha-ccq-side { display: none; }
.miha-ccq-modal__comp > .miha-ccq { grid-area: main; }

/* Entrada escalonada y salida por contracción */
.miha-ccq-modal__comp > * { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .5s ease, transform .7s var(--cc-curva); }
.miha-ccq-modal.is-open .miha-ccq-modal__comp > * { opacity: 1; transform: none; }
.miha-ccq-modal.is-open .miha-ccq-modal__comp > .miha-ccq { transition-delay: .04s; }
.miha-ccq-modal.is-open .miha-ccq-modal__comp > .miha-ccq-side { transition-delay: .16s; }
.miha-ccq-modal.is-open .miha-ccq-modal__comp > .miha-ccq-modal__x { transition-delay: .28s; }
.miha-ccq-modal.is-closing .miha-ccq-modal__comp > * { opacity: 0; transform: translateY(14px) scale(.94); transition-duration: .26s, .28s; transition-delay: 0s; }

.miha-ccq-modal .miha-ccq-modal__x {
	position: absolute;
	z-index: 3;
	right: -16px;
	top: -16px;
	width: 42px;
	height: 42px;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .85) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--cc-tinta) !important;
	box-shadow: 0 10px 24px -12px rgba(30, 20, 60, .55), inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
	cursor: pointer;
	transition: transform .5s var(--cc-curva), background-color .25s ease, color .25s ease, opacity .5s ease !important;
}
.miha-ccq-modal .miha-ccq-modal__x svg { width: 17px; height: 17px; }
.miha-ccq-modal .miha-ccq-modal__x:hover { transform: rotate(90deg); background: var(--cc-tinta) !important; color: #fff !important; }

/* Tarjeta de consulta (vidrio cálido) */
.miha-ccq {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 28px 24px;
	border-radius: 34px;
	background: var(--cc-vidrio);
	-webkit-backdrop-filter: blur(26px) saturate(140%);
	backdrop-filter: blur(26px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(40, 28, 70, .55);
	font-size: 15px;
	color: var(--cc-tinta);
}
.miha-ccq__head { display: flex; align-items: center; gap: 14px; }
.miha-ccq__badgeico { width: 48px; height: 48px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--cc-a); color: #fff; box-shadow: 0 14px 26px -14px rgba(var(--cc-a-rgb), .95); }
.miha-ccq__badgeico svg { width: 22px; height: 22px; }
.miha-ccq__titles { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.miha-ccq__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cc-tenue); }
.miha-ccq .miha-ccq__head h2 {
	margin: 0 !important;
	font-family: var(--cc-display) !important;
	font-size: 30px !important;
	font-weight: 300 !important;
	letter-spacing: -.04em !important;
	line-height: 1.02 !important;
	color: var(--cc-tinta) !important;
	text-transform: none !important;
}
.miha-ccq__body { min-width: 0; }
.miha-ccq__sr, .miha-ccq-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; padding: 0 !important; }
.miha-ccq__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Formulario */
.miha-ccq__form { display: flex; flex-direction: column; gap: 14px; animation: ccq-sube .5s var(--cc-curva) both; }
.miha-ccq__help { padding: 12px 16px; border-radius: 18px; background: rgba(var(--cc-a-rgb), .06); font-size: 13.5px !important; line-height: 1.55 !important; color: var(--cc-texto); }
.miha-ccq .miha-ccq__input {
	width: 100% !important;
	min-height: 56px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 1px solid rgba(30, 24, 56, .14) !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: inset 0 1px 2px rgba(30, 20, 60, .05) !important;
	color: var(--cc-tinta) !important;
	font-family: var(--cc-fuente) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	transition: border-color .25s ease, box-shadow .25s ease !important;
}
.miha-ccq .miha-ccq__input::placeholder { color: var(--cc-tenue); font-weight: 500; letter-spacing: 0; opacity: .8; }
.miha-ccq .miha-ccq__input:focus { border-color: rgba(var(--cc-a-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--cc-a-rgb), .14) !important; outline: 0 !important; }
.miha-ccq__input--fake { display: flex; align-items: center; min-height: 56px; padding: 0 22px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(30, 24, 56, .14); color: var(--cc-tenue); font-size: 15px; }

/* Botón principal: píldora oscura + círculo con flecha */
.miha-ccq .miha-ccq__submit {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	align-self: stretch;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px !important;
	margin: 0 !important;
	padding: 0 6px 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--cc-tinta) !important;
	color: #fff !important;
	font-family: var(--cc-fuente) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: 0 18px 34px -18px rgba(30, 24, 56, .9) !important;
	cursor: pointer;
	transition: background-color .3s ease, transform .4s var(--cc-curva) !important;
}
.miha-ccq .miha-ccq__submit:hover { background: var(--cc-a) !important; transform: translateY(-1px); }
.miha-ccq .miha-ccq__submit:active { transform: scale(.99); }
.miha-ccq .miha-ccq__submit > span { display: inline-flex; align-items: center; gap: 10px; }
.miha-ccq__submit .miha-ccq__go { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); transition: transform .5s var(--cc-curva), background-color .3s ease; }
.miha-ccq__submit:hover .miha-ccq__go { transform: translateX(2px) rotate(-10deg); background: rgba(255, 255, 255, .24); }
.miha-ccq__submit .miha-ccq__go svg { width: 18px; height: 18px; }
.miha-ccq__submit.is-busy { cursor: wait; opacity: .85; }
.miha-ccq__submit.is-busy .miha-ccq__go svg { animation: ccq-gira 1s linear infinite; }
.miha-ccq__msg { min-height: 0; font-size: 13.5px !important; font-weight: 600; color: var(--cc-error); }
.miha-ccq__msg:empty { display: none; }
.miha-ccq__msg:not(:empty) { padding: 10px 16px; border-radius: 16px; background: rgba(194, 55, 44, .08); animation: ccq-sube .4s var(--cc-curva) both; }
.miha-ccq__ico { width: 17px; height: 17px; flex: none; }

/* Pago (cuando no hay tarjeta lateral, p. ej. buscador en línea) */
.miha-ccq__paynote { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding: 12px 12px 12px 18px; border-radius: 22px; background: rgba(30, 24, 56, .045); font-size: 13.5px; color: var(--cc-texto); }

/* Botones secundarios */
.miha-ccq .miha-ccq__btn,
.miha-ccq-side .miha-ccq__btn,
.miha-ccq-prev .miha-ccq__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .8) !important;
	color: var(--cc-tinta) !important;
	box-shadow: inset 0 0 0 1px rgba(30, 24, 56, .14) !important;
	font-family: var(--cc-fuente) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .35s var(--cc-curva), box-shadow .3s ease !important;
}
.miha-ccq .miha-ccq__btn:hover { background: #fff !important; color: var(--cc-a) !important; box-shadow: inset 0 0 0 1px rgba(var(--cc-a-rgb), .4) !important; transform: translateY(-1px); }
.miha-ccq .miha-ccq__btn--primary { background: var(--cc-tinta) !important; color: #fff !important; box-shadow: 0 14px 28px -16px rgba(30, 24, 56, .85) !important; }
.miha-ccq .miha-ccq__btn--primary:hover { background: var(--cc-a) !important; color: #fff !important; box-shadow: 0 14px 28px -16px rgba(var(--cc-a-rgb), .9) !important; }
.miha-ccq .miha-ccq__btn--pay { background: var(--cc-a) !important; color: #fff !important; box-shadow: 0 14px 28px -16px rgba(var(--cc-a-rgb), .9) !important; }
.miha-ccq .miha-ccq__btn--pay:hover { background: var(--cc-a-oscuro) !important; color: #fff !important; }
.miha-ccq .miha-ccq__btn--ghost { background: transparent !important; box-shadow: none !important; color: var(--cc-texto) !important; }
.miha-ccq .miha-ccq__btn--ghost:hover { background: rgba(30, 24, 56, .06) !important; color: var(--cc-tinta) !important; box-shadow: none !important; }

/* Resultado */
.miha-ccq__result { display: flex; flex-direction: column; gap: 14px; }
.miha-ccq__result > * { animation: ccq-sube .55s var(--cc-curva) both; }
.miha-ccq__result > :nth-child(2) { animation-delay: .08s; }
.miha-ccq__result > :nth-child(3) { animation-delay: .16s; }
.miha-ccq__result > :nth-child(4) { animation-delay: .22s; }
.miha-ccq__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.miha-ccq__badge { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--cc-tinta); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.miha-ccq__chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--cc-a-suave); color: var(--cc-a); font-size: 13px; font-weight: 700; }
.miha-ccq__upd { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cc-tenue); }
.miha-ccq__upd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-ok); box-shadow: 0 0 0 4px rgba(31, 122, 71, .14); }
.miha-ccq__viewer { display: block; width: 100%; height: min(68vh, 760px); border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--cc-linea), 0 24px 50px -34px rgba(30, 22, 60, .6); }
.miha-ccq .miha-ccq__open {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 18px;
	border-radius: 26px;
	background: var(--cc-blanco);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 24px 46px -30px rgba(30, 22, 60, .55);
	color: var(--cc-tinta) !important;
	text-align: center;
	text-decoration: none !important;
	transition: transform .45s var(--cc-curva);
}
.miha-ccq .miha-ccq__open:hover { transform: translateY(-3px); }
.miha-ccq__bigico { width: 54px; height: 54px; padding: 13px; border-radius: 18px; background: var(--cc-a); color: #fff; margin-bottom: 4px; }
.miha-ccq__open strong { font-family: var(--cc-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.miha-ccq__open span { font-size: 13px; color: var(--cc-tenue); }
.miha-ccq__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.miha-ccq__note { display: flex; align-items: center; gap: 8px; font-size: 12.5px !important; color: var(--cc-tenue); }
.miha-ccq__note svg { width: 15px; height: 15px; flex: none; }

/* Tarjeta lateral oscura: periodo vigente + pago */
.miha-ccq-side {
	grid-area: side;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 100%;
	padding: 26px 26px 22px;
	border-radius: 34px;
	background: radial-gradient(420px 260px at 100% 0%, rgba(var(--cc-a-rgb), .55), transparent 70%), linear-gradient(160deg, #2a2148, #15112a);
	color: #fff;
	box-shadow: 0 40px 70px -36px rgba(20, 12, 45, .95);
	font-family: var(--cc-fuente);
}
.miha-ccq-side small { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.miha-ccq-side b { font-family: var(--cc-display); font-size: 38px; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.miha-ccq-side__date { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.miha-ccq-side__date svg { width: 18px; height: 18px; padding: 3px; flex: none; border-radius: 50%; background: rgba(110, 231, 160, .16); color: #8fe3b0; stroke-width: 3; }
.miha-ccq-side p { margin-top: 10px !important; max-width: 24ch; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.miha-ccq-side__ico { position: absolute; right: -22px; bottom: 70px; color: rgba(255, 255, 255, .06); pointer-events: none; animation: ccq-flota 8s ease-in-out infinite; }
.miha-ccq-side__ico svg { width: 150px; height: 150px; stroke-width: 1.2; }
.miha-ccq-side__pay {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 54px;
	margin-top: auto !important;
	padding: 0 6px 0 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--cc-tinta) !important;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .7);
	transition: transform .4s var(--cc-curva), background-color .3s ease;
}
.miha-ccq-side__pay > span { display: inline-flex; align-items: center; gap: 9px; }
.miha-ccq-side__pay i { width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cc-a); color: #fff; transition: transform .5s var(--cc-curva); }
.miha-ccq-side__pay i svg { width: 17px; height: 17px; }
.miha-ccq-side__pay:hover { transform: translateY(-2px); background: #fbf8ff; }
.miha-ccq-side__pay:hover i { transform: translateX(2px) rotate(-10deg); }
.miha-ccq-side__safe { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.miha-ccq-side__safe svg { width: 16px; height: 16px; flex: none; }
.miha-ccq-side__pay + .miha-ccq-side__safe { margin-top: 10px; }

/* Vista previa estática (Configuración en wp-admin) */
.miha-ccq-prev { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.miha-ccq-prev > .miha-ccq, .miha-ccq-prev > .miha-ccq-side { grid-area: auto; }
.miha-ccq-prev .miha-ccq { padding: 20px; gap: 12px; border-radius: 28px; }
.miha-ccq-prev .miha-ccq__head h2 { font-size: 26px !important; }
.miha-ccq-prev .miha-ccq__badgeico { width: 40px; height: 40px; border-radius: 14px; }
.miha-ccq-prev .miha-ccq-side { padding: 20px; border-radius: 28px; min-height: 0; }
.miha-ccq-prev .miha-ccq-side b { font-size: 28px; }
.miha-ccq-prev .miha-ccq__submit { pointer-events: none; }
.miha-ccq-prev .miha-ccq-side__pay { pointer-events: none; min-height: 46px; }
.miha-ccq-prev .miha-ccq-side__pay i { width: 34px; height: 34px; }
@media (max-width: 1100px) { .miha-ccq-prev { grid-template-columns: minmax(0, 1fr); } }

/* Móvil: una columna; la tarjeta del periodo baja. */
@media (max-width: 760px) {
	.miha-ccq-modal__stage { padding: 64px 14px 24px; }
	.miha-ccq-modal__comp, .miha-ccq-modal__comp.has-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; max-width: 460px; gap: 14px; }
	.miha-ccq-modal .miha-ccq-modal__x { right: 4px; top: -52px; }
	.miha-ccq { padding: 22px 20px 20px; border-radius: 30px; }
	.miha-ccq .miha-ccq__head h2 { font-size: 30px !important; }
	.miha-ccq-side { min-height: 0; border-radius: 30px; padding: 22px; }
	.miha-ccq-side b { font-size: 32px; }
	.miha-ccq-side p { display: none; }
	.miha-ccq-side__pay { margin-top: 14px !important; }
	.miha-ccq__bar .miha-ccq__btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.miha-ccw__in, .miha-ccw__in > *, .miha-ccq-modal__comp > *, .miha-ccq__form, .miha-ccq__result > * { animation: none !important; transition: none !important; }
}

/* ============================================ Aviso: sin sesión o permisos */
.miha-cc-guard {
	position: relative;
	max-width: 460px;
	margin: 0 auto 24px;
	padding: 28px;
	border-radius: 34px;
	background: var(--cc-vidrio);
	-webkit-backdrop-filter: blur(26px) saturate(140%);
	backdrop-filter: blur(26px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(40, 28, 70, .55);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	animation: ccq-sube .6s var(--cc-curva) both;
}
.miha-cc-guard__icon { width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--cc-a); color: #fff; box-shadow: 0 14px 26px -14px rgba(var(--cc-a-rgb), .95); }
.miha-cc-guard__svg { width: 24px; height: 24px; }
.miha-cc-guard h3 { font-family: var(--cc-display) !important; font-size: 34px !important; font-weight: 300 !important; letter-spacing: -.045em !important; line-height: 1.02 !important; color: var(--cc-tinta) !important; }
.miha-cc-guard > p { font-size: 14px; line-height: 1.55; color: var(--cc-texto); }
.miha-cc-guard .miha-acc-auth { width: 100%; max-width: none; margin: 4px 0 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.miha-cc-guard .miha-cc-guard__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--cc-tinta); color: #fff !important; font-weight: 700; text-decoration: none !important; transition: background-color .3s ease, transform .35s var(--cc-curva); }
.miha-cc-guard .miha-cc-guard__btn:hover { background: var(--cc-a); transform: translateY(-1px); }