/* Semáforo UOL · todos los valores salen de las variables --us-* que define el bloque. */
.uol-sem{
	--us-on: var(--us-muted);
	line-height: 1.55;
	color: var(--us-text);
	box-sizing: border-box;
}
/* Fuentes y tamaños: solo se fijan si se eligieron; si no, manda el tema. */
.uol-sem--fb{ font-family: var(--us-font-body); }
.uol-sem--fs{ font-size: var(--us-b-size); }
.uol-sem--fh .uol-sem__title,.uol-sem--fh .uol-sem__color,.uol-sem--fh .uol-sem__chart text{ font-family: var(--us-font-head); }
.uol-sem--fw .uol-sem__title,.uol-sem--fw .uol-sem__color,.uol-sem--fw .uol-sem__chart text{ font-weight: var(--us-h-weight); }
/* Ancho total de pantalla forzado, para temas que no permiten "ancho completo". */
.uol-sem--viewport{
	width: 100vw; max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.uol-sem *,.uol-sem *::before,.uol-sem *::after{ box-sizing: border-box; }
.uol-sem[data-light="red"]{ --us-on: var(--us-red); }
.uol-sem[data-light="amber"]{ --us-on: var(--us-amber); }
.uol-sem[data-light="green"]{ --us-on: var(--us-green); }

.uol-sem__card{
	background: var(--us-bg);
	border: var(--us-border-w) solid var(--us-border);
	border-radius: var(--us-radius);
	container: uolsem / inline-size;
	max-width: var(--us-card-w);
	margin-inline: auto;
	padding: var(--us-pad-top) var(--us-pad-right) var(--us-pad-bottom) var(--us-pad-left);
	display: grid;
	gap: calc(var(--us-gap) * 2);
	position: relative;
	overflow: hidden;
}
.uol-sem--sin-tarjeta .uol-sem__card{ background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.uol-sem--sin-tarjeta .uol-sem__card::before{ display: none; }
.uol-sem--sombra .uol-sem__card{
	box-shadow: 0 1px 2px rgba(16,22,26,.06), 0 12px 32px -12px rgba(16,22,26,.18), 0 40px 80px -40px rgba(16,22,26,.22);
}
/* Halo sutil del color encendido, arriba a la derecha. */
.uol-sem__card::before{
	content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--us-on) 16%, transparent), transparent);
	pointer-events: none; transition: background .6s ease; opacity: 0;
}
.uol-sem[data-light] .uol-sem__card::before{ opacity: 1; }
.uol-sem[data-light=""] .uol-sem__card::before{ opacity: 0; }
.uol-sem__card > *{ position: relative; }

/* Encabezado */
.uol-sem__head{ display: grid; gap: 10px; max-width: 46rem; }
.uol-sem__eyebrow{
	margin: 0; display: inline-flex; align-items: center; gap: 10px;
	font-size: .74em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--us-muted);
}
.uol-sem__head .uol-sem__eyebrow::before{
	content: ""; width: 30px; height: 8px; flex: none;
	background:
		radial-gradient(circle 4px at 4px 4px, var(--us-red) 98%, transparent) ,
		radial-gradient(circle 4px at 15px 4px, var(--us-amber) 98%, transparent),
		radial-gradient(circle 4px at 26px 4px, var(--us-green) 98%, transparent);
}
.uol-sem__title{
	margin: 0;
	font-size: clamp(calc(var(--us-h-size) * .62), 5.4vw, var(--us-h-size));
	line-height: .98; letter-spacing: -.005em; text-transform: var(--us-h-case); text-wrap: balance; color: var(--us-text);
}
.uol-sem__sub{ margin: 0; color: var(--us-muted); max-width: 38rem; }

/* Cuerpo: semáforo + preguntas */
.uol-sem__body{
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(18px, 4vw, calc(var(--us-gap) * 3)); align-items: start;
}
.uol-sem__aside{ position: sticky; top: 24px; display: grid; gap: 16px; justify-items: center; }

.uol-sem__signal{
	--l: var(--us-lamp);
	position: relative; display: grid; gap: calc(var(--l) * .2);
	padding: calc(var(--l) * .24) calc(var(--l) * .2);
	border-radius: calc(var(--l) * .42);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--us-housing) 82%, #fff) 0%, var(--us-housing) 14%, var(--us-housing) 86%, color-mix(in srgb, var(--us-housing) 80%, #000) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.45);
}
.uol-sem__visor{ display: none; }
.uol-sem__lamp{
	--c: var(--us-red);
	display: block; width: var(--l); height: var(--l); border-radius: 50%; position: relative;
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 30%, #111) 0%, color-mix(in srgb, var(--c) 14%, #0a0a0a) 70%);
	box-shadow: inset 0 3px 8px rgba(0,0,0,.6), 0 0 0 calc(var(--l) * .05) rgba(0,0,0,.35);
	transition: background .45s ease, box-shadow .45s ease, transform .45s ease;
}
/* Reflejo de vidrio */
.uol-sem__lamp::after{
	content: ""; position: absolute; inset: 12% 22% 52% 22%; border-radius: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.uol-sem__lamp--amber{ --c: var(--us-amber); }
.uol-sem__lamp--green{ --c: var(--us-green); }
.uol-sem[data-light="red"] .uol-sem__lamp--red,
.uol-sem[data-light="amber"] .uol-sem__lamp--amber,
.uol-sem[data-light="green"] .uol-sem__lamp--green{
	background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 35%, #fff) 0%, var(--c) 42%, color-mix(in srgb, var(--c) 70%, #000) 100%);
	box-shadow: inset 0 -3px 8px rgba(0,0,0,.25), 0 0 calc(var(--l) * .5) color-mix(in srgb, var(--c) 70%, transparent), 0 0 calc(var(--l) * 1.1) color-mix(in srgb, var(--c) 35%, transparent);
}

.uol-sem__progress{ width: calc(var(--us-lamp) * 1.4); display: grid; gap: 6px; text-align: center; }
.uol-sem__bar{ height: 4px; border-radius: 4px; background: var(--us-border); overflow: hidden; }
.uol-sem__bar span{ display: block; height: 100%; background: var(--us-on); border-radius: inherit; transition: width .4s ease, background .4s ease; }
.uol-sem__count{ margin: 0; font-size: .78em; color: var(--us-muted); font-variant-numeric: tabular-nums; }
.uol-sem__count strong{ color: var(--us-text); }

/* Preguntas */
.uol-sem__qs{ list-style: none; margin: 0; padding: 0; display: grid; }
.uol-sem__q{
	--qc: var(--us-muted);
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px calc(var(--us-gap) * 1.2); align-items: center;
	padding-block: calc(var(--us-gap) * 1.1);
	border-top: 1px solid var(--us-border);
}
.uol-sem__q:last-child{ border-bottom: 1px solid var(--us-border); }
.uol-sem__q[data-v="yes"]{ --qc: var(--us-green); }
.uol-sem__q[data-v="unsure"]{ --qc: var(--us-amber); }
.uol-sem__q[data-v="no"]{ --qc: var(--us-red); }

.uol-sem__badge{
	width: calc(var(--us-icon) * 2.05); height: calc(var(--us-icon) * 2.05); border-radius: calc(var(--us-icon) * .6);
	display: grid; place-items: center; background: var(--us-surface); color: var(--us-text);
	transition: background .3s ease, color .3s ease;
}
.uol-sem__q[data-v] .uol-sem__badge{ background: color-mix(in srgb, var(--qc) 16%, var(--us-bg)); color: color-mix(in srgb, var(--qc) 78%, var(--us-text)); }
.uol-sem__ico{ width: var(--us-icon); height: var(--us-icon); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.uol-sem__qtext{ display: grid; gap: 2px; min-width: 0; }
.uol-sem__qlabel{ font-size: .72em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--us-muted); }
.uol-sem__qtext p{ margin: 0; text-wrap: pretty; }

.uol-sem__answers{
	display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--us-surface);
	border: 1px solid var(--us-border);
}
.uol-sem__ans{
	--ac: var(--us-green);
	appearance: none; border: 0; background: transparent; color: var(--us-muted); cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
	font: 600 .84em/1 inherit; white-space: nowrap;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.uol-sem__ans--unsure{ --ac: var(--us-amber); }
.uol-sem__ans--no{ --ac: var(--us-red); }
.uol-sem__ans:hover{ color: var(--us-text); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.uol-sem__ans[aria-pressed="true"]{
	background: var(--ac); color: #fff;
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ac) 70%, transparent);
}
.uol-sem__ans--unsure[aria-pressed="true"]{ color: #1d1606; }
.uol-sem__ans:focus-visible,.uol-sem__btn:focus-visible,.uol-sem__link:focus-visible{ outline: 2px solid var(--us-text); outline-offset: 2px; }
.uol-sem__ans-ico,.uol-sem__btn-ico{ width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Resultado */
.uol-sem__result{
	display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(0, 220px);
	gap: clamp(18px, 3vw, calc(var(--us-gap) * 2.5)); align-items: center;
	padding: clamp(16px, 3vw, calc(var(--us-pad-top) * .7));
	border-radius: calc(var(--us-radius) * .8);
	background: color-mix(in srgb, var(--us-on) 7%, var(--us-surface));
	border: 1px solid color-mix(in srgb, var(--us-on) 30%, var(--us-border));
	animation: uol-sem-in .5s ease both;
}
.uol-sem__result[hidden]{ display: none; }
@keyframes uol-sem-in{ from{ opacity: .4; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.uol-sem__chart svg{ width: 100%; height: auto; display: block; overflow: visible; }
.uol-sem__chart .seg{ transition: opacity .3s; }
.uol-sem__chart text{ fill: var(--us-text); }
.uol-sem__verdict{ display: grid; gap: 8px; min-width: 0; }
.uol-sem__color{
	margin: 0; text-transform: var(--us-h-case);
	font-size: clamp(calc(var(--us-h-size) * .7), 6vw, calc(var(--us-h-size) * 1.1)); line-height: .9;
	color: color-mix(in srgb, var(--us-on) 85%, var(--us-text));
}
.uol-sem__score{ margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.uol-sem__text{ margin: 0; color: var(--us-muted); max-width: 34rem; }
.uol-sem__legend{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.uol-sem__legend li{
	display: inline-flex; align-items: center; gap: 6px; font-size: .78em; padding: 4px 10px 4px 8px; border-radius: 999px;
	background: var(--us-bg); border: 1px solid var(--us-border);
}
.uol-sem__legend i{ width: 8px; height: 8px; border-radius: 50%; display: block; }
.uol-sem__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.uol-sem__btn{
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; cursor: pointer;
	font: 600 .95em/1 inherit; text-decoration: none; border: 1.5px solid var(--us-accent);
	transition: transform .15s ease, box-shadow .2s ease;
}
.uol-sem__btn:hover{ transform: translateY(-1px); }
.uol-sem__btn--cta{ background: var(--us-accent); color: var(--us-accent-text); box-shadow: 0 8px 20px -10px var(--us-accent); }
.uol-sem__btn--cta:hover,.uol-sem__btn--cta:visited{ color: var(--us-accent-text); }
.uol-sem__btn--wa{ background: transparent; color: var(--us-text); }
.uol-sem__note{ margin: 0; font-size: .8em; color: var(--us-muted); }
.uol-sem__minor{ display: flex; flex-wrap: wrap; gap: 4px 18px; }
.uol-sem__link{
	appearance: none; border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--us-muted);
	font: 500 .84em inherit; display: inline-flex; align-items: center; gap: 6px;
}
.uol-sem__link:hover{ color: var(--us-text); }
.uol-sem__msg{ margin: 0; font-size: .84em; color: var(--us-text); }
.uol-sem__preview{ margin: 0; display: grid; gap: 6px; justify-items: center; }
.uol-sem__preview img{
	width: 100%; max-width: 220px; border-radius: 12px; display: block;
	box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); background: var(--us-surface); aspect-ratio: 1;
}
.uol-sem__preview figcaption{ font-size: .72em; color: var(--us-muted); letter-spacing: .04em; }

/* Pantallas medianas y chicas */
/* Se adapta al ancho real del bloque (no al de la pantalla), así funciona igual en una columna angosta. */
@container uolsem (max-width: 860px){
	.uol-sem__result{ grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
	.uol-sem__preview{ grid-column: 1 / -1; }
}
@media (max-width: 720px){
	.uol-sem__card{ padding-left: var(--us-pad-m); padding-right: var(--us-pad-m); padding-top: min(var(--us-pad-top), 32px); padding-bottom: min(var(--us-pad-bottom), 32px); }
}
@container uolsem (max-width: 680px){
	.uol-sem__body{ grid-template-columns: minmax(0, 1fr); }
	.uol-sem__aside{ position: static; grid-auto-flow: column; justify-content: start; align-items: center; }
	.uol-sem__signal{ --l: calc(var(--us-lamp) * .6); grid-auto-flow: column; }
	.uol-sem__q{ grid-template-columns: auto minmax(0, 1fr); }
	.uol-sem__answers{ grid-column: 2; justify-self: start; }
	.uol-sem__result{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.uol-sem__chart{ width: min(220px, 70%); }
}
@media (prefers-reduced-motion: reduce){
	.uol-sem *,.uol-sem__result{ transition: none !important; animation: none !important; }
}