/* Calculator UI: form on the left, live result on the right. Uses theme.json custom properties with safe fallbacks. */
.ces-tool {
	--ces-border: var(--wp--preset--color--border, #d0d5dd);
	--ces-accent: var(--wp--preset--color--accent, #0b6b57);
	--ces-accent-text: var(--wp--preset--color--accent-contrast, #ffffff);
	--ces-surface: var(--wp--preset--color--surface, #f5f7fa);
	--ces-text: var(--wp--preset--color--contrast, #14202e);
	--ces-error: var(--wp--preset--color--error, #a1121b);
	--ces-muted: var(--ces-c-muted, #4a5563);
	margin-block: 1.5rem;
	color: var(--ces-text);
}
.ces-tool.is-ready .ces-tool__fallback { display: none; }
.ces-tool__fallback { padding: 1rem; border: 1px dashed var(--ces-border); border-radius: 8px; }

/* ---------- Layout ---------- */
.ces-workbench {
	display: grid; gap: 1.5rem; align-items: start;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.ces-tool__form {
	display: grid; gap: 1.1rem 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	padding: 1.5rem; background: var(--ces-c-card, #fff); border: 1px solid var(--ces-border); border-radius: 16px;
}
.ces-tool__results {
	position: sticky; top: 1rem; align-self: start; min-height: 12rem;
	padding: 1.5rem; background: var(--ces-c-card, #fff); border: 1px solid var(--ces-border); border-radius: 16px;
	transition: opacity 0.15s ease;
}
.ces-tool__results.is-stale { opacity: 0.55; }
.ces-tool__details { margin-top: 1.5rem; }
.ces-tool__status { color: var(--ces-error); font-weight: 600; }

/* ---------- Form ---------- */
.ces-field[hidden] { display: none; }
.ces-field--wide { grid-column: 1 / -1; }
.ces-field label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; }
.ces-field input:not([type="range"]), .ces-field select {
	width: 100%; min-height: 48px; padding: 0.5rem 0.85rem; font: inherit; font-size: 1.0625rem; color: inherit;
	background: var(--ces-c-card, #fff); border: 1px solid var(--ces-c-field-border, #7a8494); border-radius: 10px; box-sizing: border-box;
	font-variant-numeric: tabular-nums;
}
.ces-field__group { position: relative; }
.ces-field__group input { padding-right: 3.5rem; }
.ces-field__unit { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ces-muted); pointer-events: none; }
.ces-field__hint { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--ces-muted); }
.ces-field__error { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--ces-error); font-weight: 600; }
.ces-field input[aria-invalid="true"], .ces-field select[aria-invalid="true"] { border-color: var(--ces-error); border-width: 2px; }
.ces-field input:focus-visible, .ces-field select:focus-visible, .ces-table-wrap:focus-visible {
	outline: 3px solid var(--ces-accent); outline-offset: 2px;
}

/* Slider: a pointer shortcut for the text field above it. */
.ces-field__range {
	-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0.9rem 0 0.25rem; padding: 0;
	border-radius: 3px; cursor: pointer; --p: 0%;
	background: linear-gradient(to right, var(--ces-accent) var(--p), var(--ces-c-track, #d0d5dd) var(--p));
}
.ces-field__range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
	background: var(--ces-c-card, #fff); border: 3px solid var(--ces-accent); box-shadow: 0 1px 3px rgba(15, 20, 32, 0.3);
}
.ces-field__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ces-c-card, #fff); border: 3px solid var(--ces-accent); }
.ces-field__range::-moz-range-track { background: transparent; }

/* ---------- Result ---------- */
.ces-hero { margin: 0 0 1.25rem; }
.ces-hero__label { margin: 0; font-size: 0.9375rem; color: var(--ces-muted); }
.ces-hero__value {
	margin: 0.15rem 0 0; font-size: clamp(2.125rem, 6vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
	color: var(--ces-accent); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; transition: opacity 0.2s ease;
}

.ces-chart { margin: 0 0 1.25rem; }
.ces-chart__title { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ces-muted); }
.ces-chart__bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--ces-c-track, #d0d5dd); }
.ces-seg { display: block; height: 100%; border-right: 2px solid var(--ces-c-card, #fff); box-sizing: border-box; }
.ces-seg:last-child { border-right: 0; }
.ces-tone--0 { background: var(--ces-accent); }
.ces-tone--1 { background: #e59a1a; }
.ces-tone--2 { background: var(--ces-c-tone2, #64748b); }
.ces-tone--3 { background: var(--ces-c-tone3, #b8c2d0); }
.ces-chart__legend { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9375rem; }
.ces-chart__legend li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.ces-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ces-chart__name { flex: 1; }
.ces-chart__pct { font-variant-numeric: tabular-nums; font-weight: 600; }

.ces-summary { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--ces-border); }
.ces-summary__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--ces-border); }
.ces-summary dt { flex: 1; font-size: 0.9375rem; color: var(--ces-muted); }
.ces-summary dd { margin: 0; flex: none; white-space: nowrap; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- Table and notes ---------- */
.ces-table-wrap { overflow-x: auto; border: 1px solid var(--ces-border); border-radius: 12px; }
.ces-table { width: 100%; border-collapse: collapse; background: var(--ces-c-card, #fff); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ces-table caption { text-align: left; font-weight: 700; padding: 0.75rem 1rem; background: var(--ces-surface); }
.ces-table th, .ces-table td { padding: 0.55rem 1rem; border-bottom: 1px solid var(--ces-border); text-align: right; white-space: nowrap; }
.ces-table th:first-child, .ces-table td:first-child { text-align: left; }
.ces-table tbody tr:last-child td { border-bottom: 0; }
.ces-notes { margin: 1rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; color: var(--ces-muted); }
.ces-tool__provenance { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ces-muted); }
.ces-tool__notice { padding: 0.75rem; border: 1px dashed var(--ces-border); }

/* Phones: form first, result below, and a slim bar that follows while the form scrolls. */
.ces-bar { display: none; }
@media (max-width: 860px) {
	.ces-workbench { display: block; }
	.ces-tool__form { padding: 1.1rem; }
	.ces-tool__results { position: static; margin-top: 1rem; padding: 1.1rem; }
	.ces-bar:not([hidden]) {
		display: flex; position: sticky; bottom: 0.5rem; z-index: 5; justify-content: space-between; align-items: baseline; gap: 1rem;
		margin-top: 0.75rem; padding: 0.7rem 1rem; color: var(--ces-accent-text); background: var(--ces-accent);
		border-radius: 12px; box-shadow: 0 6px 18px rgba(15, 20, 32, 0.3);
	}
	.ces-bar__label { font-size: 0.875rem; }
	.ces-bar__value { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* Ads: separated from the tool, labelled, space reserved once shown. */
.ces-ad { margin: 2rem 0; }
.ces-ad[hidden] { display: none; }
.ces-ad__label { margin: 0 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ces-c-muted, #4a5563); }
.ces-ad__box { min-height: 280px; }

.ces-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.ces-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--ces-c-muted, #4a5563); }
.ces-related ul { padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) { .ces-tool__results { transition: none; } }
@media print { .ces-ad, .ces-bar, .ces-field__range { display: none; } .ces-tool__results { position: static; } }

/* Consentimiento de cookies (AdSense): franja fija que no bloquea la página, y botón flotante para revisar la decisión. */
.ces-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 0 1rem 1rem; }
.ces-consent[hidden] { display: none; }
.ces-consent__box {
	max-width: 640px; margin-inline: auto; padding: 1rem 1.25rem;
	background: var(--ces-c-card, #fff); border: 1px solid var(--wp--preset--color--border, #d0d5dd);
	border-radius: 14px; box-shadow: 0 8px 24px var(--ces-c-shadow, rgba(15, 20, 32, 0.08));
}
.ces-consent__text { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--ces-c-muted, #4a5563); }
.ces-consent__text a { color: var(--wp--preset--color--accent, #0b6b57); }
.ces-consent__actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.ces-consent__actions button {
	font: inherit; font-weight: 700; font-size: 0.9375rem; padding: 0.55rem 1.1rem; border-radius: 10px; cursor: pointer;
	border: 1px solid var(--wp--preset--color--border, #d0d5dd); background: var(--ces-c-card, #fff); color: inherit;
}
.ces-consent__accept {
	border-color: var(--wp--preset--color--accent, #0b6b57); background: var(--wp--preset--color--accent, #0b6b57);
	color: var(--wp--preset--color--accent-text, #fff);
}
.ces-consent__manage {
	position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 40;
	display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
	color: inherit; background: var(--ces-c-card, #fff); border: 1px solid var(--wp--preset--color--border, #d0d5dd);
	border-radius: 10px; box-shadow: 0 4px 12px var(--ces-c-shadow, rgba(15, 20, 32, 0.08));
}
.ces-consent__manage[hidden] { display: none; }
.ces-consent__manage:hover { background: var(--wp--preset--color--surface, #f5f7fa); }
.ces-consent__manage:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #0b6b57); outline-offset: 2px; }
.ces-consent__manage svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media print { .ces-consent, .ces-consent__manage { display: none; } }