/**
 * Estilos propios del cotizador — solo lo que gg.bundle.css (del theme) no
 * trae ya hecho. Usa las mismas variables del theme (--gg-mint, --gg-glass,
 * --gg-r-lg, --gg-line, --gg-ease, etc.) para heredar el estilo del sitio.
 * Si el theme no está cargado (por ejemplo al previsualizar este plugin
 * solo), se incluyen valores de respaldo equivalentes a los del sitio.
 */

/*
 * OJO: esto tiene que ser un selector normal (.ggcot-wrap), NO
 * :where(.ggcot-wrap) — :where() anula la especificidad de todo lo que
 * envuelve, así que el max-width de acá perdía siempre contra el
 * .gg-wrap del theme (misma especificidad, pero gg.bundle.css se carga
 * antes) y la tarjeta terminaba ocupando los 1240px completos del
 * contenedor en vez de quedar en una columna angosta de lectura.
 */
.ggcot-wrap {
	--ggcot-mint: var(--gg-mint, #65efd4);
	--ggcot-ink: var(--gg-ink, #04121a);
	--ggcot-text: var(--gg-text, #eaf4f3);
	--ggcot-text-2: var(--gg-text-2, #b8cdd0);
	--ggcot-muted: var(--gg-muted, #86a1a6);
	--ggcot-line: var(--gg-line, rgba(101, 239, 212, .14));
	--ggcot-line-2: var(--gg-line-2, rgba(234, 244, 243, .08));
	--ggcot-glass: var(--gg-glass, linear-gradient(180deg, rgba(16, 74, 90, .38), rgba(6, 28, 59, .30)));
	--ggcot-r-lg: var(--gg-r-lg, 24px);
	--ggcot-r: var(--gg-r, 16px);
	--ggcot-ease: var(--gg-ease, cubic-bezier(.2, .7, .2, 1));
	--ggcot-font: var(--gg-font, "Inter", ui-sans-serif, system-ui, sans-serif);
	--ggcot-font-display: var(--gg-font-display, "Sora", ui-sans-serif, system-ui, sans-serif);
	/* !important: la página que aloja el cotizador usa un bloque de
	   WordPress con layout "constrained" y justifyContent:"left" (ver
	   templates/page.html del theme), que fuerza alineación izquierda a
	   sus hijos con más especificidad que una clase simple — sin esto el
	   ancho se reducía a 640px pero quedaba pegado a la izquierda en vez
	   de centrado (reportado por Geo con captura). */
	max-width: 640px !important;
	width: 100% !important;
	margin-inline: auto !important;
}

/* El shortcode ya vive dentro del .gg-sec de la plantilla de página (ese
   padding-block ya separa el banner del contenido), así que la sección
   propia del cotizador NO repite ese padding completo — solo un respiro
   chico y responsivo arriba, para no sumar dos paddings de sección y
   dejar un hueco negro enorme (reportado por Geo con captura). */
.ggcot-section {
	padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px);
}

/* El hueco seguía grande porque la plantilla de la página (page.html, fuera
   de este plugin) también envuelve el contenido en SU propio .gg-sec, con
   hasta 120px de padding arriba — eso se suma a lo de arriba y no lo
   controla este CSS. Lo acoto solo para esta página (WordPress agrega la
   clase "page-id-593" al <body> automáticamente, ID real de la página
   /cotizador/) en vez de tocar de nuevo la plantilla compartida por todo
   el sitio. */
body.page-id-593 .gg-page-hero {
	padding-block: clamp(24px, 3vw, 40px) clamp(12px, 1.5vw, 20px);
}
body.page-id-593 .gg-page-hero__logo img {
	height: 32px;
}
/* Título más chico solo acá — "COTIZADOR SOLAR" a tamaño de titular de
   sección normal, no de portada, para no competir con el logo ni dejar
   tanto peso visual antes de llegar al formulario. */
body.page-id-593 .gg-page-hero .wp-block-post-title,
body.page-id-593 .gg-page-hero h1 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}
body.page-id-593 .gg-sec {
	padding-block: clamp(16px, 2vw, 28px);
}

/* Franja de marca/confianza — el título de la página ya lo pone el theme
   (banner estándar, igual en todo el sitio), así que esta franja no repite
   título: da calidez con color (glow + fondo vidrio) y sellos de confianza
   desde el inicio, en vez de arrancar en texto plano sobre fondo negro. */
.ggcot-intro {
	text-align: center;
	padding: 22px 24px 20px;
	margin-bottom: 22px;
	border-radius: var(--ggcot-r-lg);
	background: var(--ggcot-glass);
	border: 1px solid var(--ggcot-line);
	box-shadow: 0 0 60px -20px rgba(101, 239, 212, .35);
}
.ggcot-intro__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(101, 239, 212, .12);
	border: 1px solid var(--ggcot-line);
	color: var(--ggcot-mint);
	font: 700 .75rem/1 var(--ggcot-font);
	letter-spacing: .02em;
	margin-bottom: 12px;
}
.ggcot-intro__sub {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--ggcot-text);
	max-width: 460px;
	margin: 0 auto;
}
.ggcot-intro__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ggcot-line-2);
	color: var(--ggcot-text-2);
	font-size: .78125rem;
}

.ggcot-progress {
	margin-bottom: 20px;
}
.ggcot-progress__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--ggcot-line-2);
	overflow: hidden;
}
.ggcot-progress__fill {
	height: 100%;
	background: var(--ggcot-mint);
	border-radius: 999px;
	transition: width .35s var(--ggcot-ease);
}
.ggcot-progress__label {
	margin-top: 10px;
	font: 600 .75rem/1 var(--ggcot-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ggcot-text-2);
}

.ggcot-card {
	padding: clamp(22px, 4vw, 36px);
}

.gg-step__n {
	margin-bottom: 14px;
}

.ggcot-sub {
	color: var(--ggcot-text-2);
	font-size: .92rem;
	margin: 0 0 20px;
}

.ggcot-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* El atributo HTML "hidden" (usado para alternar boleta $ / consumo kWh,
   y para "Volver" en el paso 1) perdía contra esta clase: ambos tienen la
   misma especificidad, pero una regla de autor (esta) siempre le gana a
   la hoja de estilos del navegador, así que [hidden] quedaba sin efecto
   y los dos campos se mostraban a la vez (encontrado por Geo: el toggle
   cambiaba de color pero no ocultaba nada). */
.ggcot-field[hidden] {
	display: none;
}
/* Mismo problema con el botón "Volver" (oculto en el paso 1): la clase
   .gg-btn del theme también fija display:inline-flex y le gana al
   atributo hidden. */
.ggcot-nav [hidden] {
	display: none !important;
}
.ggcot-field span {
	font: 600 .85rem/1 var(--ggcot-font);
	color: var(--ggcot-text-2);
}
.ggcot-field--full {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.gg-form__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.ggcot-intro { padding: 18px 16px 16px; }
	.ggcot-intro__kicker { font-size: .7rem; padding: 6px 12px; white-space: normal; }
	.ggcot-intro__badges { font-size: .72rem; gap: 6px 12px; }
}

.ggcot-direccion-row {
	display: flex;
	gap: 8px;
}
.ggcot-direccion-row .gg-input {
	flex: 1;
	min-width: 0;
}
.ggcot-direccion-row .ggcot-buscar-direccion {
	flex: none;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.ggcot-direccion-row { flex-direction: column; }
}

.ggcot-mapa {
	height: 280px;
	margin-top: 16px;
	border-radius: var(--ggcot-r);
	border: 1px solid var(--ggcot-line-2);
	overflow: hidden;
	background: var(--ggcot-glass);
}
/* El propio Leaflet pinta tiles claros (OSM); si el contenedor aún no
   cargó, que al menos se vea oscuro y no un rectángulo blanco roto. */
.ggcot-mapa .leaflet-container {
	background: #0a1f2c;
	font: inherit;
}
/* Atribución de Leaflet/OpenStreetMap: es obligatoria por la licencia de
   uso de los tiles de OSM (no se puede quitar), pero sí se puede dejar
   bien discreta en vez del cartel blanco por defecto — texto chico, fondo
   semitransparente oscuro acorde al resto del sitio. */
.ggcot-mapa .leaflet-control-attribution {
	background: rgba(4, 18, 26, .55);
	color: var(--ggcot-muted);
	font-size: .625rem;
	line-height: 1.3;
	padding: 1px 5px;
	border-radius: 4px 0 0 0;
}
.ggcot-mapa .leaflet-control-attribution a {
	color: var(--ggcot-muted);
}
.ggcot-mapa-hint {
	margin-top: 10px;
}

.ggcot-choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 560px) {
	.ggcot-choices { grid-template-columns: 1fr; }
}
.ggcot-choice {
	/*
	 * NO "all: unset" acá — esta clase se usa junto con .gg-card y
	 * .gg-card--hover (fondo, borde, radio, sombra del theme) y
	 * "all: unset" los borraba todos, dejando el botón como texto plano
	 * sin tarjeta. Solo reseteamos lo mínimo que un <button> trae por
	 * defecto del navegador.
	 */
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
	background: none;
	appearance: none;
	cursor: pointer;
	padding: 20px 16px;
	border-radius: var(--ggcot-r);
	text-align: center;
	font: 600 .95rem/1.3 var(--ggcot-font);
	color: var(--ggcot-text);
	transition: border-color .2s var(--ggcot-ease), color .2s var(--ggcot-ease), transform .2s var(--ggcot-ease);
}
.ggcot-choice:focus-visible {
	outline: 2px solid var(--ggcot-mint);
	outline-offset: 2px;
}
.ggcot-choice[aria-pressed="true"] {
	border-color: var(--ggcot-mint) !important;
	color: var(--ggcot-mint);
	box-shadow: 0 0 0 1px var(--ggcot-mint) inset;
}

.ggcot-unidad-tabs {
	display: flex;
	gap: 8px;
}
button.ggcot-unidad {
	border: none;
	cursor: pointer;
}
button.ggcot-unidad[aria-pressed="true"] {
	color: var(--ggcot-mint);
	border-color: var(--ggcot-line);
	background: rgba(101, 239, 212, .07);
}

.ggcot-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}
.ggcot-nav .ggcot-siguiente {
	margin-left: auto;
}

.ggcot-footnote {
	text-align: center;
	color: var(--ggcot-muted);
	font-size: .8rem;
	margin-top: 18px;
}

/* Sello de confianza (instaladores SEC) al pie de la tarjeta — mismo
   patrón visual que .gg-trust del hero del sitio, en versión compacta. */
.ggcot-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ggcot-line-2);
	color: var(--ggcot-text-2);
	font-size: .8125rem;
}
.ggcot-trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ggcot-trust span::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ggcot-mint) 0 3px, rgba(101, 239, 212, .18) 4px);
}

/* Consentimientos del paso 6: dos checks separados (T&C vs. datos). */
.ggcot-consent {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 6px 0 20px;
}
.ggcot-consent .gg-check {
	margin: 0;
}
.ggcot-consent .gg-check a {
	color: var(--ggcot-mint);
	text-decoration: underline;
}

/* --- Resultado (paso 6) -------------------------------------------------- */

.ggcot-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 18px 0 20px;
}
@media (max-width: 560px) {
	.ggcot-kpis { grid-template-columns: 1fr; }
}

/* Resumen del sistema (paneles · generación · equipo) — bloque compacto
   con ícono, en vez de dos líneas de texto plano sueltas. */
.ggcot-resumen {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	margin: 18px 0;
	border: 1px solid var(--ggcot-line-2);
	border-radius: var(--ggcot-r);
	background: rgba(234, 244, 243, .03);
}
.ggcot-resumen p {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: .85rem;
	line-height: 1.4;
}
.ggcot-resumen p::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--ggcot-mint);
}
.ggcot-resumen-sistema {
	color: var(--ggcot-text);
	font-weight: 600;
}
.ggcot-resumen-equipo {
	color: var(--ggcot-text-2);
}

/* Valor total del proyecto — tarjeta hero propia en vez de dos líneas
   de texto perdidas entre el resumen y las opciones de pago. */
.ggcot-valor-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 22px 18px;
	margin: 0 0 22px;
	border-radius: var(--ggcot-r-lg);
	border: 1px solid var(--ggcot-line);
	background:
		radial-gradient(120% 140% at 50% -20%, rgba(101, 239, 212, .16), transparent 60%),
		var(--ggcot-glass);
}
.ggcot-valor-hero__label {
	font: 600 .72rem/1 var(--ggcot-font);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ggcot-text-2);
}
.ggcot-valor-hero__monto {
	font: 800 clamp(1.9rem, 6vw, 2.4rem)/1.1 var(--ggcot-font-display);
	color: var(--ggcot-text);
	letter-spacing: -.01em;
}
.ggcot-valor-hero__nota {
	font-size: .75rem;
	color: var(--ggcot-text-2);
}
.ggcot-valor-hero__badge {
	/* En flujo normal (no absoluto) para que nunca se superponga con la
	   etiqueta en pantallas angostas — ver bug reportado 2026-10-11. */
	font: 700 .7rem/1 var(--ggcot-font);
	letter-spacing: .02em;
	color: var(--ggcot-ink);
	background: var(--ggcot-mint);
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
	margin-bottom: 2px;
}

.ggcot-financiamiento-label {
	font: 700 .78rem/1 var(--ggcot-font);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ggcot-text-2);
	margin: 0 0 10px;
}

.ggcot-financiamiento {
	display: grid;
	gap: 10px;
	margin-bottom: 8px;
}
.ggcot-opcion-pago {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	gap: 14px;
	border: 1px solid transparent;
	transition: border-color .2s var(--ggcot-ease);
}
.ggcot-opcion-pago--destacada {
	border-color: var(--ggcot-line);
}
.ggcot-opcion-pago__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(101, 239, 212, .12);
	color: var(--ggcot-mint);
	font: 700 .95rem/1 var(--ggcot-font-display);
}
.ggcot-opcion-pago__info {
	flex: 1;
	min-width: 0;
}
.ggcot-opcion-pago__fila-nombre {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ggcot-opcion-pago__nombre {
	font: 700 .92rem/1.2 var(--ggcot-font-display);
	color: var(--ggcot-text);
}
.ggcot-opcion-pago__chip {
	font: 700 .65rem/1 var(--ggcot-font);
	letter-spacing: .02em;
	color: var(--ggcot-ink);
	background: var(--ggcot-mint);
	padding: 3px 7px;
	border-radius: 999px;
	white-space: nowrap;
}
.ggcot-opcion-pago__detalle {
	font-size: .78rem;
	color: var(--ggcot-text-2);
	margin-top: 2px;
}
.ggcot-opcion-pago__monto {
	text-align: right;
	font: 800 1.1rem/1 var(--ggcot-font-display);
	color: var(--ggcot-mint);
	white-space: nowrap;
}
.ggcot-opcion-pago__monto small {
	display: block;
	font: 500 .72rem/1 var(--ggcot-font);
	color: var(--ggcot-text-2);
	margin-top: 3px;
}
.ggcot-opcion-pago__monto--consulta {
	font: 700 .82rem/1.3 var(--ggcot-font);
	color: var(--ggcot-text-2);
	max-width: 140px;
	white-space: normal;
}
.ggcot-financiamiento-nota {
	font-size: .72rem;
	color: var(--ggcot-text-2);
	margin: 2px 0 20px;
}

.ggcot-error {
	color: #ff8a8a;
	font-size: .9rem;
}