/*!
 * Proactivo · Calculadora de costo de TI — estilos (DISENO §4.4 y §7).
 *
 * ⛔ Ni un hex, ni un rgba() con números, ni un font-family. Los colores son
 * los colores globales de Personalizar → Colores (`var(--slug)`), los
 * translúcidos son color-mix() sobre esos tokens, y los radios y sombras son
 * los de `:root` del tema. Si se cambia un color de la marca en el panel, la
 * calculadora lo sigue sola. Sin el tema, los bordes caen a currentColor.
 *
 * ⛔ La TIPOGRAFÍA de las cifras grandes (.pdct-total, .pdct-bloque__v,
 * .pdct-comp__v) no se declara aquí: la pone la regla de selector
 * personalizado de Personalizar → Tipografía (deploy/calc-ti/01-tema.php y
 * deploy/mockupC/02-tipografia.php). Un font-family en este archivo ganaría
 * al Personalizador y el panel pasaría a mentir.
 *
 * Tampoco se declara color ni fondo sobre body ni sobre h1-h6.
 *
 * Los cortes van por CONTENEDOR, no por ventana: la calculadora funciona
 * igual a ancho completo que dentro de una columna de 760 px (§4.1 del
 * requerimiento). 880 · 860 · 520, los del §12.
 */

.pdct {
	container: pdct / inline-size;
}

.pdct [hidden] {
	display: none;
}

/* ── Sin JS, o con el JS roto: solo lectura (§4.3) ─────────────────────── */

.pdct-sinjs {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--pd-r-s, 10px);
	border: 1px solid var(--borde-oro, currentColor);
	background-color: var(--tinte-oro, transparent);
	color: var(--texto-fuerte, inherit);
	font-size: 15px;
	line-height: 1.55;
}

.pdct:not(.pdct--js) .pdct-entradas,
.pdct:not(.pdct--js) .pdct-sup,
.pdct:not(.pdct--js) .pdct-sup__st,
.pdct:not(.pdct--js) .pdct-captura,
.pdct--js .pdct-sinjs {
	display: none;
}

/* sin_js.modo = «ocultar»: el literal del §12 (la sección entera fuera). */
.pdct[data-pdct-sinjs="ocultar"]:not(.pdct--js) {
	display: none;
}

/* ── Encabezado ──────────────────────────────────────────────────────── */

.pdct-cab {
	max-width: 720px;
	margin: 0 0 28px;
}

.pdct-cab__t {
	margin: 0 0 10px;
}

.pdct-cab__st,
.pdct-cab__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-medio, inherit);
}

.pdct-cab__st {
	font-weight: 600;
	color: var(--texto-fuerte, inherit);
	margin-bottom: 6px;
}

/* ── Campos ──────────────────────────────────────────────────────────── */

.pdct-preguntas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pdct-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pdct-campo__l {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--texto-fuerte, inherit);
}

.pdct-campo__ayuda {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--texto-suave, inherit);
}

.pdct .pdct-select,
.pdct .pdct-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--acero, currentColor);
	border-radius: var(--pd-r-s, 10px);
	background-color: var(--blanco, transparent);
	color: var(--texto-fuerte, inherit);
	font-size: 15px;
	line-height: 1.3;
}

/* Áreas táctiles (§12): desplegables de 48 px, campos de 46 px. */
.pdct .pdct-select {
	min-height: 48px;
	padding: 10px 40px 10px 14px;
	appearance: none;
	-webkit-appearance: none;
	text-overflow: ellipsis;
	/* La flecha: dos triángulos con el color del texto, sin imagen ni hex. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--texto-medio, currentColor) 50%),
		linear-gradient(135deg, var(--texto-medio, currentColor) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.pdct .pdct-input {
	min-height: 46px;
	padding: 10px 14px;
	font-variant-numeric: tabular-nums;
}

.pdct .pdct-input[aria-invalid="true"] {
	border-color: var(--coral-texto, currentColor);
	box-shadow: 0 0 0 1px var(--coral-texto, currentColor);
}

.pdct :is(select, input, summary, a, button):focus-visible {
	outline: 2px solid var(--esmeralda-texto, currentColor);
	outline-offset: 2px;
}

/* Con 15 px Safari amplía la página al tocar un campo. Nunca maximum-scale. */
@media (max-width: 720px), (pointer: coarse) {
	.pdct .pdct-select,
	.pdct .pdct-input {
		font-size: 16px;
	}
}

/* ── Resultado ───────────────────────────────────────────────────────── */

.pdct-res {
	padding: 28px 28px 24px;
	border: 2px solid var(--borde-esmeralda, currentColor);
	border-radius: var(--pd-r-l, 24px);
	background-color: var(--blanco, transparent);
	box-shadow: var(--pd-sombra-m, none);
}

.pdct-res p {
	margin: 0;
}

.pdct-res__l {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--esmeralda-texto, inherit);
}

.pdct-total {
	margin: 6px 0 8px;
	font-size: clamp(36px, 6.5cqi, 54px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--texto-fuerte, inherit);
	font-variant-numeric: tabular-nums;
}

.pdct-res .pdct-sub {
	margin-bottom: 22px;
	max-width: 760px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-medio, inherit);
}

.pdct-sub b,
.pdct-reveal b,
.pdct-bloque__d b,
.pdct-comp__d b {
	color: var(--texto-fuerte, inherit);
}

/* Los tres bloques (§7.1): borde superior de color. Los colores son
   decorativos; el rótulo lleva el significado. */
.pdct-bloques {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.pdct-bloque {
	padding: 14px 16px 16px;
	border-top: 4px solid var(--acero, currentColor);
	border-radius: var(--pd-r-s, 10px);
	background-color: var(--papel, transparent);
}

.pdct-bloque--b1 { border-top-color: var(--gris-azulado, currentColor); }
.pdct-bloque--b2 { border-top-color: var(--oro, currentColor); }
.pdct-bloque--b3 { border-top-color: var(--coral, currentColor); }

.pdct-bloque__l,
.pdct-comp__l {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--texto-medio, inherit);
}

.pdct-res .pdct-bloque__v {
	margin: 4px 0 4px;
	font-size: clamp(22px, 3.2cqi, 26px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--texto-fuerte, inherit);
	font-variant-numeric: tabular-nums;
}

.pdct-bloque__d,
.pdct-comp__d {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--texto-medio, inherit);
}

/* El comparativo: tu modelo actual frente al gestionado. */
.pdct-comp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
}

.pdct-comp__c {
	height: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	border-radius: var(--pd-r-m, 16px);
	border: 1px solid var(--linea, currentColor);
	background-color: var(--papel, transparent);
}

.pdct-comp__c--gestionado {
	border-color: var(--borde-esmeralda, currentColor);
	background-color: var(--tinte-esmeralda, transparent);
}

.pdct-res .pdct-comp__v {
	margin: 4px 0 6px;
	font-size: clamp(20px, 3cqi, 24px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--texto-fuerte, inherit);
	font-variant-numeric: tabular-nums;
}

.pdct-res .pdct-comp__frente {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--texto-suave, inherit);
}

/* La revelación: la negrita dorada es oro-texto (el oro puro no llega a AA). */
.pdct-res .pdct-reveal {
	margin-bottom: 18px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--texto-medio, inherit);
}

.pdct-oro,
.pdct-res b.pdct-oro {
	color: var(--oro-texto, inherit);
}

/* El veredicto: fondo y borde por estado. El color no es lo único que lo
   distingue: el título en negrita cambia con el estado. */
.pdct-veredicto {
	padding: 16px 18px;
	border-left: 4px solid var(--acero, currentColor);
	border-radius: var(--pd-r-s, 10px);
	background-color: var(--papel, transparent);
	color: var(--texto-medio, inherit);
	font-size: 15px;
	line-height: 1.6;
}

.pdct-veredicto[data-estado="A"] { border-left-color: var(--coral, currentColor);     background-color: var(--tinte-coral, transparent); }
.pdct-veredicto[data-estado="B"] { border-left-color: var(--oro, currentColor);       background-color: var(--tinte-oro, transparent); }
.pdct-veredicto[data-estado="C"] { border-left-color: var(--esmeralda, currentColor); background-color: var(--tinte-esmeralda, transparent); }

.pdct-veredicto__t {
	color: var(--texto-fuerte, inherit);
}

.pdct-riesgos {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--texto-fuerte, currentColor) 12%, transparent);
}

.pdct-veredicto .pdct-riesgos p {
	margin: 0;
}

.pdct-riesgos b {
	color: var(--texto-fuerte, inherit);
}

.pdct-riesgos__l {
	list-style: none;
	margin: 8px 0;
	padding: 0;
}

.pdct-riesgos__l li {
	position: relative;
	padding: 2px 0 2px 18px;
	color: var(--texto-fuerte, inherit);
}

.pdct-riesgos__l li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--coral, currentColor);
}

/* ── Supuestos ───────────────────────────────────────────────────────── */

.pdct-sup__st {
	margin: 28px 0 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--texto-medio, inherit);
}

.pdct-sup {
	border: 1px solid var(--linea-fuerte, currentColor);
	border-radius: var(--pd-r-m, 16px);
	background-color: var(--blanco, transparent);
}

/* El botón del acordeón: entre 44 y 52 px (§12). */
.pdct-sup__s {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 48px;
	max-height: 52px;
	padding: 8px 18px;
	cursor: pointer;
	list-style: none;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--texto-fuerte, inherit);
	border-radius: var(--pd-r-m, 16px);
}

.pdct-sup__s::-webkit-details-marker {
	display: none;
}

.pdct-sup__t {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* El galón: dos bordes de un cuadrado girado, del color del texto. */
.pdct-sup__s::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s var(--pd-curva, ease);
}

.pdct-sup[open] > .pdct-sup__s::after {
	transform: translateY(2px) rotate(-135deg);
}

.pdct-sup__rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 20px;
	padding: 6px 18px 20px;
}

/* ── Captura (formulario de GB Pro) ──────────────────────────────────── */

.pdct-captura {
	margin-top: 32px;
	padding: 26px 26px 22px;
	border: 1px solid var(--linea, currentColor);
	border-radius: var(--pd-r-l, 24px);
	background-color: var(--blanco, transparent);
}

.pdct-captura__t {
	margin: 0 0 6px;
}

.pdct-captura__x,
.pdct-captura__respaldo {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-medio, inherit);
}

.pdct-captura .gb-form button[type="submit"],
.pdct-captura .gb-form [type="submit"] {
	min-height: 44px;
	max-height: 52px;
}

.pdct-captura__estado {
	margin: 10px 0 0;
	font-weight: 700;
	color: var(--esmeralda-texto, inherit);
}

.pdct-captura__estado:empty {
	display: none;
}

.pdct-nota {
	margin: 22px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texto-suave, inherit);
}

.pdct-nota b {
	color: var(--texto-medio, inherit);
}

/* ── Cortes por contenedor (§12 del requerimiento) ───────────────────── */

@container pdct (max-width: 879px) {
	.pdct-preguntas {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container pdct (max-width: 859px) {
	.pdct-bloques,
	.pdct-comp {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdct-sup__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pdct-res {
		padding: 22px 18px 18px;
	}
}

@container pdct (max-width: 519px) {
	.pdct-sup__rejilla {
		grid-template-columns: minmax(0, 1fr);
		padding: 4px 14px 16px;
	}

	/* En una columna estrecha el título del acordeón va en dos líneas (sin
	   cortarlo con «…») y el botón sigue dentro de los 52 px. */
	.pdct-sup__s {
		padding: 6px 14px;
		font-size: 14.5px;
		line-height: 1.2;
	}

	.pdct-sup__t {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.pdct-captura {
		padding: 20px 16px 16px;
	}
}