/**
 * CuantoConsume — Calculadora pública
 * ────────────────────────────────────────────────────────────────
 * Sistema de tokens (decisiones deliberadas, no valores por defecto):
 *
 * Color — evita el cliché "IA": nada de crema+terracota ni negro+neón.
 *   Verde esmeralda profundo como color de marca (electricidad/ahorro,
 *   asociacion natural con "verde = eficiencia"), acento ambar calido
 *   para el dinero/coste (deliberadamente distinto del terracota
 *   D97757), superficie casi blanca con un punto verdoso.
 *
 * Tipografia — pila de sistema (sin fuentes externas: un widget
 *   incrustado en la web de un tercero no debe añadir peticiones de
 *   red que ralenticen la pagina). Serif calida para titulares y las
 *   cifras protagonistas (transmite confianza, no "SaaS frio");
 *   sans de sistema para etiquetas y datos secundarios, con
 *   tabular-nums para que las cifras no "salten" al recalcular.
 *
 * Firma — el "medidor": una franja de pequeñas marcas verticales,
 *   como el dial de un contador electrico analogico, que separa el
 *   formulario del resultado y pulsa suavemente mientras se calcula.
 */

.cc-calculadora {
	--cc-ink: #10231c;
	--cc-paper: #ffffff;
	--cc-surface: #f2f6f3;
	--cc-primary: #0b6e4f;
	--cc-primary-dark: #075c41;
	--cc-accent: #e2952f;
	--cc-accent-ink: #6b4713;
	--cc-border: #dde5e0;
	--cc-danger: #b3261e;
	--cc-danger-surface: #fbeceb;
	--cc-muted: #5b6b63;

	--cc-font-display: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
	--cc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--cc-radius: 14px;
	--cc-radius-sm: 8px;

	all: initial;
	display: block;
	box-sizing: border-box;
	font-family: var(--cc-font-body);
	color: var(--cc-ink);
	max-width: 560px;
	margin: 0 auto;
}

.cc-calculadora *,
.cc-calculadora *::before,
.cc-calculadora *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.cc-calculadora__card {
	background: var(--cc-paper);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	padding: clamp(18px, 4vw, 28px);
	box-shadow: 0 1px 2px rgba(16, 35, 28, 0.04), 0 8px 24px rgba(16, 35, 28, 0.06);
}

.cc-calculadora__titulo {
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 4px;
	color: var(--cc-ink);
}

.cc-calculadora__subtitulo {
	font-size: 0.9rem;
	color: var(--cc-muted);
	margin: 0 0 20px;
	line-height: 1.5;
}

/* ── Campos del formulario ─────────────────────────────────────── */

.cc-campo {
	margin-bottom: 16px;
}

.cc-campo__etiqueta {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cc-ink);
	margin-bottom: 6px;
}

.cc-campo__ayuda {
	display: block;
	font-size: 0.78rem;
	color: var(--cc-muted);
	margin-top: 4px;
}

.cc-input,
.cc-select {
	width: 100%;
	padding: 11px 12px;
	font-size: 1rem;
	line-height: 1.3;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-paper);
	color: var(--cc-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-input:focus,
.cc-select:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.15);
}

.cc-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 420px) {
	.cc-fila {
		grid-template-columns: 1fr;
	}
}

.cc-precio {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cc-precio .cc-input {
	max-width: 140px;
}

.cc-precio__etiqueta-inline {
	font-size: 0.78rem;
	color: var(--cc-muted);
}

/* ── Ajustes avanzados (colapsable) ───────────────────────────── */

.cc-avanzado {
	border-top: 1px dashed var(--cc-border);
	margin-top: 4px;
	padding-top: 10px;
}

.cc-avanzado__boton {
	all: unset;
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cc-primary);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cc-avanzado__boton:hover {
	color: var(--cc-primary-dark);
	text-decoration: underline;
}

.cc-avanzado__contenido {
	margin-top: 12px;
	display: none;
}

.cc-avanzado__contenido.cc-visible {
	display: block;
}

/* ── Botón calcular ────────────────────────────────────────────── */

.cc-boton-calcular {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 6px;
	padding: 13px 20px;
	background: var(--cc-primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	border-radius: var(--cc-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.cc-boton-calcular:hover {
	background: var(--cc-primary-dark);
}

.cc-boton-calcular:active {
	transform: scale(0.99);
}

.cc-boton-calcular[disabled] {
	background: var(--cc-muted);
	cursor: default;
}

/* ── El "medidor": divisor firma + estado de carga ────────────── */

.cc-medidor {
	height: 10px;
	margin: 22px 0;
	background-image: repeating-linear-gradient(
		to right,
		var(--cc-border) 0,
		var(--cc-border) 2px,
		transparent 2px,
		transparent 8px
	);
	background-position: center;
	background-repeat: repeat-x;
	background-size: 100% 10px;
	opacity: 0.9;
}

.cc-medidor.cc-medidor--activo {
	background-image: repeating-linear-gradient(
		to right,
		var(--cc-accent) 0,
		var(--cc-accent) 2px,
		transparent 2px,
		transparent 8px
	);
	animation: cc-medidor-pulso 1.1s ease-in-out infinite;
}

@keyframes cc-medidor-pulso {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-medidor.cc-medidor--activo {
		animation: none;
		opacity: 0.9;
	}
}

/* ── Panel de resultado ───────────────────────────────────────── */

.cc-resultado {
	display: none;
}

.cc-resultado.cc-visible {
	display: block;
}

.cc-resultado__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.cc-resultado__hero-item {
	background: var(--cc-surface);
	border-radius: var(--cc-radius-sm);
	padding: 14px 16px;
}

.cc-resultado__hero-valor {
	font-family: var(--cc-font-display);
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
	font-weight: 700;
	color: var(--cc-primary-dark);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cc-resultado__hero-etiqueta {
	font-size: 0.78rem;
	color: var(--cc-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-resultado__secundario {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 2px;
	border-top: 1px solid var(--cc-border);
	border-bottom: 1px solid var(--cc-border);
	margin-bottom: 16px;
}

.cc-resultado__secundario-item {
	text-align: center;
	flex: 1;
}

.cc-resultado__secundario-valor {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
}

.cc-resultado__secundario-etiqueta {
	font-size: 0.72rem;
	color: var(--cc-muted);
}

.cc-resultado__consumo {
	font-size: 0.85rem;
	color: var(--cc-muted);
	margin-bottom: 14px;
	line-height: 1.6;
}

.cc-resultado__consumo strong {
	color: var(--cc-ink);
	font-variant-numeric: tabular-nums;
}

.cc-aviso {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	padding: 10px 12px;
	font-size: 0.8rem;
	color: var(--cc-muted);
	line-height: 1.5;
}

.cc-aviso--personalizado {
	background: #eaf4ef;
	border-color: #cfe6da;
	color: var(--cc-primary-dark);
}

.cc-aviso__icono {
	flex-shrink: 0;
	font-size: 1rem;
	line-height: 1;
}

/* ── Errores ──────────────────────────────────────────────────── */

.cc-error {
	display: none;
	background: var(--cc-danger-surface);
	border: 1px solid #e8b9b5;
	color: var(--cc-danger);
	border-radius: var(--cc-radius-sm);
	padding: 12px 14px;
	font-size: 0.88rem;
	margin-top: 14px;
	line-height: 1.5;
}

.cc-error.cc-visible {
	display: block;
}

.cc-error__titulo {
	font-weight: 700;
	display: block;
	margin-bottom: 2px;
}

/* ── Pie ──────────────────────────────────────────────────────── */

.cc-calculadora__pie {
	margin-top: 16px;
	font-size: 0.74rem;
	color: var(--cc-muted);
	text-align: center;
}