/* Calculadora del coste real — estilos autocontenidos.
   Van en el plugin, no en el tema: la herramienta debe seguir funcionando
   aunque el tema cambie en el futuro.

   Tokens: CONSUMEN los tokens del tema con respaldo al valor literal; si el
   tema está activo manda su paleta, si se desactiva la calculadora conserva
   su aspecto propio y sigue siendo legible.

   Rediseño 2026-08-16 (solo presentación — cero cambios de lógica): pieza
   premium de Cocheconomía, con el tablero oscuro (cuadro de instrumentos)
   reservado para el resultado, igual que en el CostSummaryBox de las fichas
   de modelo. Todos los selectores que calculadora.js necesita (name, id,
   data-salida, data-procedencia, data-accion, .cc-calc__resultado,
   .cc-calc__aviso*) se mantienen: ver templates/calculadora.php. */

.cc-calc{
	--calc-borde:var(--borde,#e2e0db);
	--calc-fondo:var(--papel,#f4f6f6);
	--calc-acento:var(--marca,#0b4f6c);
	--calc-tinta:var(--tinta,#161d20);

	/* La superficie es la tarjeta blanca, no el fondo gris de la página. */
	--calc-superficie:var(--superficie,#fff);
	--calc-tinta-suave:var(--tinta-2,#3a464b);
	--calc-tinta-tenue:var(--tinta-3,#556065);
	--calc-borde-fuerte:var(--borde-fuerte,#c3cacd);

	/* Tablero: el mismo fondo oscuro de marca que el CostSummaryBox de las
	   fichas de modelo. Reservado para el resultado, no para el formulario:
	   el oscuro no debe dominar la herramienta. */
	--calc-tablero:var(--tablero,#062f3e);
	--calc-tablero-tenue:var(--cc-petroleo-200,#b8d8e6);
	--calc-tablero-acento:var(--cc-verde-400,#4dbd9b);

	/* Sellos de confianza: los fija CC_CONFIANZA, no la estética del tema. */
	--calc-oficial:var(--cc-verde-700,#0b6b4f);
	--calc-mercado:var(--cc-ambar,#8a6100);
	--calc-estimacion:var(--cc-rojo,#a6432b);

	/* Texto sobre fondo de acento: siempre blanco, no es una superficie. */
	--calc-sobre-acento:#fff;

	/* Avisos de la propia herramienta (falta un dato, error de cálculo). */
	--calc-aviso-fondo:#fff4e5;
	--calc-aviso-borde:#e0b978;
	--calc-error-fondo:#fdecea;
	--calc-error-borde:#d99b93;

	--calc-radio:12px;
	--calc-radio-s:8px;

	display:grid;
	gap:1.75rem;
	margin:2.5rem 0;
}
@media(min-width:64rem){
	.cc-calc{grid-template-columns:minmax(0,1fr) minmax(0,23rem);align-items:start}
	/* El resultado se ha hecho más alto que muchos viewports de escritorio
	   (hero + secundarios + comparación + tabla + compartir + metodología).
	   Sin el tope de altura, un sticky más alto que la pantalla deja su
	   parte final inalcanzable mientras se rellena el formulario largo: el
	   scroll de la página no puede "entrar" en un elemento fijado. Se
	   acota su alto y se le da su propio scroll interno para ese caso. */
	.cc-calc__resultado{
		position:sticky;top:1.5rem;
		max-height:calc(100vh - 3rem);
		overflow-y:auto;
	}
}

/* ------------------------------ Introducción ------------------------------ */

.cc-calc__intro{grid-column:1/-1;max-width:40rem}
.cc-calc__intro-et{
	font-family:var(--display,inherit);
	font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:var(--calc-acento);margin:0 0 .5rem;
}
.cc-calc__intro-t{
	font-family:var(--display,inherit);
	font-size:clamp(1.35rem,3.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;
	line-height:1.2;color:var(--calc-tinta);margin:0 0 .6rem;
}
.cc-calc__intro-d{font-size:1rem;color:var(--calc-tinta-suave);line-height:1.55;margin:0}

/* -------------------------------- Formulario -------------------------------- */

.cc-calc__form{display:grid;gap:1.25rem;margin:0;align-content:start}

.cc-calc__grupo{
	border:1px solid var(--calc-borde);
	border-radius:var(--calc-radio);
	padding:1.35rem 1.35rem 1.1rem;
	margin:0;
	background:var(--calc-superficie);
}
.cc-calc__grupo legend{
	display:flex;align-items:center;gap:.55rem;
	font-family:var(--display,inherit);
	font-weight:700;
	font-size:.9375rem;
	letter-spacing:.005em;
	padding:0 .3rem;
	color:var(--calc-tinta);
}
.cc-calc__icono{width:20px;height:20px;flex:none;color:var(--calc-acento)}

.cc-calc__nota{font-size:.875rem;color:var(--calc-tinta-suave);margin:.6rem 0 1rem;line-height:1.5}

.cc-campo{margin-bottom:1.1rem}
.cc-campo:last-child{margin-bottom:0}
.cc-campo label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.4rem;color:var(--calc-tinta)}

.cc-campo input,.cc-campo select{
	width:100%;
	padding:.65rem .75rem;
	font-size:1rem; /* 16px evita el zoom automático en iOS */
	font-family:inherit;
	color:var(--calc-tinta);
	background:var(--calc-superficie);
	border:1px solid var(--calc-borde-fuerte);
	border-radius:var(--calc-radio-s);
	min-height:2.75rem; /* objetivo táctil cómodo */
	transition:border-color .12s ease;
}
.cc-campo input:hover,.cc-campo select:hover{border-color:var(--calc-tinta-tenue)}
.cc-campo input:focus-visible,.cc-campo select:focus-visible{
	outline:2px solid var(--calc-acento);
	outline-offset:1px;
	border-color:var(--calc-acento);
}

.cc-campo--doble{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cc-campo--doble .cc-campo__ayuda{grid-column:1/-1;margin-top:.15rem}

.cc-campo__ayuda{font-size:.8125rem;color:var(--calc-tinta-tenue);margin:.4rem 0 0;line-height:1.45}
.cc-campo__ayuda--oficial{color:var(--calc-oficial)}
.cc-campo__ayuda--mercado{color:var(--calc-mercado)}
.cc-campo__ayuda--estimacion{color:var(--calc-estimacion)}
/* Los tres testigos, con el mismo punto luminoso que el resto del sitio. */
.cc-campo__ayuda--oficial::before,
.cc-campo__ayuda--mercado::before,
.cc-campo__ayuda--estimacion::before{
	content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
	background:currentColor;margin-right:.4rem;vertical-align:middle;
}

.cc-calc__acciones{display:flex;flex-wrap:wrap;gap:.75rem}
.cc-calc__acciones--compartir{justify-content:center;margin:1.5rem 0 0}

.cc-btn{
	font:inherit;
	font-family:var(--display,inherit);
	font-weight:700;
	font-size:.9375rem;
	padding:.7rem 1.2rem;
	min-height:2.75rem;
	border-radius:var(--calc-radio-s);
	border:1px solid var(--calc-acento);
	background:var(--calc-acento);
	color:var(--calc-sobre-acento);
	cursor:pointer;
	transition:background-color .12s ease,color .12s ease;
}
.cc-btn:hover{background:color-mix(in srgb,var(--calc-acento) 85%,#000)}
.cc-btn--secundario{background:var(--calc-superficie);color:var(--calc-acento)}
.cc-btn--secundario:hover{background:var(--calc-fondo)}
.cc-btn--enlace{background:var(--calc-superficie);color:var(--calc-acento);border-color:var(--calc-borde-fuerte)}
.cc-btn--enlace:hover{background:var(--calc-fondo);border-color:var(--calc-acento)}
.cc-btn:focus-visible{outline:2px solid var(--calc-acento);outline-offset:2px}

/* ----------------------------- Resultado ----------------------------- */

.cc-calc__resultado{
	display:block;
	background:var(--calc-superficie);
	border:1px solid var(--calc-borde);
	border-radius:var(--calc-radio);
	/* Solo el eje horizontal: es lo único que hace falta para recortar el
	   tablero oscuro del hero a la esquina redondeada. Si aquí se pusiera
	   overflow:hidden (taquigrafía, resetea también overflow-y), anularía
	   el overflow-y:auto del punto de ruptura de escritorio, sin importar
	   el orden de las reglas — ver más arriba, "El resultado se ha hecho
	   más alto que muchos viewports". */
	overflow-x:hidden;
}

/* El hero: tablero oscuro, el mismo lenguaje que el CostSummaryBox de las
   fichas de modelo. Es la única zona oscura de toda la herramienta. */
.cc-resultado__hero{
	background:var(--calc-tablero);
	padding:1.75rem 1.5rem 1.5rem;
	text-align:center;
}
.cc-resultado__hero-frase{
	font-size:.9375rem;
	color:var(--calc-tablero-tenue);
	margin:0;
	line-height:1.3;
}
.cc-resultado__hero-frase--cierre{margin-top:.15rem}
.cc-resultado__hero-cifra{
	font-family:var(--display,inherit);
	font-size:clamp(2.25rem,9vw,3.25rem);
	font-weight:800;
	letter-spacing:-.03em;
	color:#fff;
	line-height:1.05;
	margin:.3rem 0;
	font-variant-numeric:tabular-nums;
}

.cc-resultado__secundarios{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1px;
	background:var(--calc-borde);
}
.cc-resultado__stat{
	background:var(--calc-superficie);
	padding:.9rem .75rem;
	text-align:center;
	display:flex;flex-direction:column;gap:.15rem;
}
.cc-resultado__stat-v{
	font-family:var(--display,inherit);
	font-size:clamp(1.05rem,3.4vw,1.3rem);
	font-weight:700;
	color:var(--calc-acento);
	font-variant-numeric:tabular-nums;
	line-height:1.15;
}
.cc-resultado__stat-l{font-size:.75rem;color:var(--calc-tinta-tenue)}

/* Compatibilidad: si en algún punto queda algún nodo con las clases
   antiguas (--destacados/--bloque/--cifra/--etiqueta), que no se vea roto. */
.cc-resultado__destacados{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center;padding:1rem}
.cc-resultado__cifra{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.cc-resultado__etiqueta{display:block;font-size:.75rem;color:var(--calc-tinta-tenue);margin-top:.2rem}

.cc-resultado__sindep{
	font-size:.875rem;
	color:var(--calc-tinta-suave);
	background:var(--calc-fondo);
	border-block:1px solid var(--calc-borde);
	padding:.75rem 1.25rem;
	margin:0;
	line-height:1.5;
}
.cc-resultado__sindep strong{font-variant-numeric:tabular-nums;color:var(--calc-tinta)}

.cc-resultado__tabla-wrap{padding:1.1rem 1.25rem .25rem;overflow-x:auto}
.cc-resultado__desglose{width:100%;border-collapse:collapse;font-size:.875rem}
.cc-resultado__desglose caption{
	text-align:left;
	font-family:var(--display,inherit);
	font-weight:700;
	font-size:.8125rem;
	letter-spacing:.02em;
	color:var(--calc-tinta-tenue);
	text-transform:uppercase;
	padding-bottom:.75rem;
}
.cc-resultado__desglose th,.cc-resultado__desglose td{
	text-align:left;
	padding:.55rem .3rem;
	border-bottom:1px solid var(--calc-borde);
}
.cc-resultado__desglose thead th{
	font-size:.6875rem;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--calc-tinta-tenue);
	font-weight:700;
}
.cc-resultado__desglose tbody th{font-weight:500;display:flex;align-items:center;gap:.5rem}
.cc-resultado__desglose td{font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-resultado__desglose tbody tr:last-child th,
.cc-resultado__desglose tbody tr:last-child td{border-bottom:0}
.cc-fila-dep th,.cc-fila-dep td{font-style:italic;color:var(--calc-tinta-suave)}

/* Un icono por partida, alineado con el orden fijo de CC_Coste::componentes()
   (combustible, seguro, ivtm, itv, mantenimiento, desgaste, imprevistos,
   depreciación — ese orden nunca cambia porque calculadora.js lo recorre con
   Object.keys() sobre CC_CALC.componentes, que preserva el orden del PHP).
   Si algún día se reordenan los componentes en class-cc-coste.php, estos
   iconos por posición dejarán de coincidir con su partida: actualizar aquí
   también. Los trazos reutilizan exactamente los del tema (cc_icono_coste)
   para que la misma partida se vea igual en toda la web. */
.cc-resultado__desglose tbody th::before{
	content:"";
	display:block;
	width:15px;height:15px;flex:none;
	background-color:var(--calc-tinta-tenue);
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
}
/* 1. Combustible — surtidor */
.cc-resultado__desglose tbody tr:nth-child(1) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v14'/%3E%3Cpath d='M2 20h13'/%3E%3Cpath d='M13 10h3l3 3v5a1.5 1.5 0 0 1-3 0v-4'/%3E%3Cpath d='M16 7l2-2'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v14'/%3E%3Cpath d='M2 20h13'/%3E%3Cpath d='M13 10h3l3 3v5a1.5 1.5 0 0 1-3 0v-4'/%3E%3Cpath d='M16 7l2-2'/%3E%3C/svg%3E");
}
/* 2. Seguro — escudo */
.cc-resultado__desglose tbody tr:nth-child(2) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6z'/%3E%3Cpath d='M9.5 12l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6z'/%3E%3Cpath d='M9.5 12l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
}
/* 3. IVTM y 4. ITV — documento/edificio oficial */
.cc-resultado__desglose tbody tr:nth-child(3) th::before,
.cc-resultado__desglose tbody tr:nth-child(4) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V9l6-4 6 4v11'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V9l6-4 6 4v11'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}
/* 5. Mantenimiento y 6. Desgaste — llave inglesa */
.cc-resultado__desglose tbody tr:nth-child(5) th::before,
.cc-resultado__desglose tbody tr:nth-child(6) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-8.4 8.4a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M17.5 3.5l3 3'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-8.4 8.4a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M17.5 3.5l3 3'/%3E%3C/svg%3E");
}
/* 7. Imprevistos — testigo de aviso */
.cc-resultado__desglose tbody tr:nth-child(7) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.2 7.5l2.6 1.5M17.2 15l2.6 1.5M4.2 16.5l2.6-1.5M17.2 9l2.6-1.5'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.2 7.5l2.6 1.5M17.2 15l2.6 1.5M4.2 16.5l2.6-1.5M17.2 9l2.6-1.5'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E");
}
/* 8. Depreciación — flecha descendente */
.cc-resultado__desglose tbody tr:nth-child(8) th::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l6 6 4-4 6 6'/%3E%3Cpath d='M20 15v-4h-4'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l6 6 4-4 6 6'/%3E%3Cpath d='M20 15v-4h-4'/%3E%3C/svg%3E");
}

.cc-barra{
	display:inline-block;
	width:var(--peso,0%);
	max-width:3.5rem;
	height:.4rem;
	margin-right:.4rem;
	vertical-align:middle;
	background:var(--calc-acento);
	opacity:.5;
	border-radius:2px;
}

.cc-resultado__metodologia{
	font-size:.8125rem;color:var(--calc-tinta-tenue);
	padding:1rem 1.25rem 1.25rem;margin:0;line-height:1.55;
	border-top:1px solid var(--calc-borde);
}

.cc-calc__aviso{
	background:var(--calc-aviso-fondo);
	border:1px solid var(--calc-aviso-borde);
	border-radius:var(--calc-radio-s);
	padding:.85rem 1rem;
	margin:0 0 1rem;
	font-size:.9375rem;
	line-height:1.5;
}
.cc-calc__aviso--incompleto{margin:0}
.cc-resultado__hero + .cc-calc__aviso--incompleto{border-radius:0;margin:0}
.cc-calc__aviso--error{
	background:var(--calc-error-fondo);
	border-color:var(--calc-error-borde);
	border-radius:0 0 var(--calc-radio) var(--calc-radio);
}

/* Sin JavaScript, la salida no aporta nada: se atenúa mientras carga. */
.cc-calc[data-estado="cargando"] .cc-calc__resultado{opacity:.5}
.cc-calc[data-estado="error"] .cc-calc__resultado{display:none}
/* Dato incompleto: el hero se atenúa para no parecer una cifra fiable. */
.cc-calc[data-completo="no"] .cc-resultado__hero-cifra{opacity:.35}

@media(prefers-reduced-motion:no-preference){
	.cc-calc__resultado{transition:opacity .15s ease}
}

@media(prefers-reduced-motion:reduce){
	.cc-campo input,.cc-campo select,.cc-btn{transition:none}
}