/* =====================================================================
   Semáforo del inmueble — versión con datos abiertos del IGAC (1-oct-2026)

   Coherencia con la página /estudio-de-titulos/:
   - SIN tarjeta: igual que el certificado guiado, el componente vive sobre
     el papel de la página y el único objeto físico es la HOJA.
   - La hoja reutiliza el tratamiento aprobado del certificado guiado
     (papel #F4EEDD con ruido, giro 2D, sombras en capas, esquina doblada,
     letra de registro, anotación de alerta con anillo de cobre, números
     marinos en el margen que se corresponden con la leyenda de abajo).
   - Los campos usan el lenguaje aprobado de la Consulta SECOP: una línea
     inferior que se enciende en cobre; sin caja.
   - NADA DE 3D (manual §5): el faro es plano, de frente.
   Todo acotado bajo .ej-semaforo (manual §4).
   ===================================================================== */

.ej-semaforo.ej-sf {
	--sf-tinta: var(--p-tinta, #14171C);
	--sf-marino: var(--marino, #141C2C);
	--sf-gris: var(--gris, #5A616B);
	--sf-tenue: var(--p-tenue, #8B9097);
	--sf-filete: var(--p-filete, #DCDED8);
	--sf-papel: var(--papel, #F3F4F1);
	--sf-cobre: var(--cobre, #B47840);
	--sf-cobre-osc: var(--cobre-osc, #8A6A34);
	--sf-marfil: var(--marfil, #F4F0EC);
	--sf-hoja: #F4EEDD;
	--sf-rojo: #A8432F;
	--sf-amarillo: #B98512;
	--sf-verde: #2F7A58;
	--sf-out: var(--ease-out, cubic-bezier(.23, 1, .32, 1));
	--sf-sans: 'Public Sans', system-ui, -apple-system, sans-serif;
	--sf-serif: 'Aleo', Georgia, serif;

	box-sizing: border-box;
	max-width: none;
	margin: 30px 0 0;
	color: var(--sf-tinta);
	font-family: var(--sf-serif);
}
.ej-semaforo.ej-sf *,
.ej-semaforo.ej-sf *::before,
.ej-semaforo.ej-sf *::after { box-sizing: border-box; }

/* ---------- Rótulos (el de «PLAZO:» y «PRECIO:» de la página) ---------- */
.ej-sf .ej-sf__rotulo {
	display: block; margin: 0;
	font: 600 11px/1.2 var(--sf-sans); letter-spacing: .2em; text-transform: uppercase;
	color: var(--sf-cobre-osc);
}

/* ---------- La consulta ---------- */
.ej-sf .ej-sf__instruccion {
	margin: 0 0 24px; font: 400 14.5px/1.55 var(--sf-sans); color: var(--sf-gris); text-align: left;
}
.ej-sf .ej-sf__campos {
	display: grid; grid-template-columns: 1fr 1.35fr .9fr; gap: 26px; align-items: end;
}
.ej-sf .ej-sf__campo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ej-sf .ej-sf__campo label {
	font: 600 11px/1 var(--sf-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-gris);
}
.ej-sf .ej-sf__campo select,
.ej-sf .ej-sf__campo input {
	width: 100%; min-width: 0; margin: 0;
	border: 0; border-radius: 0; background: transparent; color: var(--sf-tinta);
	font: 400 17px/1.3 var(--sf-serif); padding: 4px 0 9px;
	box-shadow: inset 0 -1px 0 rgba(23, 24, 27, .7);
	transition: box-shadow 240ms var(--sf-out);
	-webkit-appearance: none; appearance: none;
}
.ej-sf .ej-sf__campo select {
	padding-right: 22px; cursor: pointer; text-overflow: ellipsis;
	background-image: linear-gradient(45deg, transparent 50%, var(--sf-gris) 50%),
	                  linear-gradient(135deg, var(--sf-gris) 50%, transparent 50%);
	background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%;
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.ej-sf .ej-sf__campo input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ej-sf .ej-sf__campo input::placeholder { color: #A9ADB2; font-style: italic; font-weight: 300; }
.ej-sf .ej-sf__campo select:focus,
.ej-sf .ej-sf__campo input:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--sf-cobre); }

.ej-sf .ej-sf__accion {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px;
}
/* El botón de consultar es el mismo de la Consulta SECOP: marino, con su cuadro de cobre. */
.ej-sf .ej-sf__consultar {
	display: inline-flex; align-items: center; gap: 14px; margin: 0;
	padding: 5px 5px 5px 20px; border: 0; border-radius: 2px; cursor: pointer;
	background: var(--sf-marino); color: var(--sf-marfil);
	font: 600 15px/1 var(--sf-sans); letter-spacing: .01em;
	transition: transform 160ms var(--sf-out), background-color 200ms ease;
}
.ej-sf .ej-sf__consultar:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ej-sf .ej-sf__consultar:hover { background: #0B111C; } }
.ej-sf .ej-sf__consultar:focus-visible { outline: 2px solid var(--sf-cobre); outline-offset: 3px; }
.ej-sf .ej-sf__consultar:disabled { cursor: not-allowed; opacity: .45; }
.ej-sf .ej-sf__consultar span {
	width: 38px; height: 38px; display: grid; place-items: center; background: var(--sf-cobre); border-radius: 2px;
}
.ej-sf .ej-sf__consultar svg { width: 18px; height: 18px; fill: none; stroke: var(--sf-marino); stroke-width: 2.2; }
.ej-sf .ej-sf__eco { margin: 0; font: 400 13.5px/1.4 var(--sf-sans); color: var(--sf-gris); }
.ej-sf .ej-sf__eco b { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- El veredicto: el faro plano y la lectura ---------- */
.ej-sf .ej-sf__veredicto {
	scroll-margin-top: 96px; /* el menú fijo, como .articulo [id] en el tema */
	display: flex; gap: 22px; align-items: center;
	margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--sf-filete);
}
.ej-sf .ej-sf__veredicto .ej-sf__rotulo { margin-bottom: 8px; }
.ej-sf .ej-sf__titulo {
	margin: 0; font: 300 clamp(26px, 3.2vw, 31px)/1.18 var(--sf-serif); letter-spacing: -.01em;
	color: var(--sf-marino); text-wrap: balance;
}
.ej-sf .ej-sf__texto {
	margin: 18px 0 0; font: 400 17.5px/1.65 var(--sf-serif);
	text-align: justify; hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty;
}

/* La E de la firma con su pluma, en el lugar donde estaba el semáforo (1-oct, Héctor: «algo más
   ingenioso que un semáforo, un objeto como el que usamos en la página principal»). Es el mismo
   objeto y el mismo gesto de la portada: «la pluma subraya la duda» (assets/certif-pluma.js). */
.ej-sf .ej-sf__marca { flex: none; width: 46px; line-height: 0; }
.ej-sf .ej-sf__marca svg { display: block; width: 100%; height: auto; overflow: visible; }
.ej-sf .ej-sf__marca .pluma.en-vuelo { opacity: 0; }
/* La pluma viajera y su tinta: copiadas de .ejc-pen / .ejc-ul de la portada. */
.ej-sf .ej-sf__resultado { position: relative; }
.ej-sf .ej-sf__pen { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 6; opacity: 0; }
.ej-sf .ej-sf__pen svg { display: block; width: 100%; height: 100%; }
.ej-sf .ej-sf__ul { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 5; }
.ej-sf .ej-sf__ul path { fill: none; stroke: #B47840; stroke-linecap: round; }

/* ---------- La hoja: el extracto del folio, con el tratamiento del certificado guiado ---------- */
.ej-sf .ej-sf__hoja-marco { margin-top: 34px; padding: 14px 6px 10px 0; }
.ej-sf .ej-sf__hoja {
	position: relative; isolation: isolate;
	background: var(--sf-hoja); padding: 24px 24px 28px 46px; transform: rotate(-.5deg);
	border: 1px solid rgba(20, 28, 44, .14);
	box-shadow: 0 1px 0 rgba(20, 28, 44, .08), 0 20px 40px -14px rgba(20, 28, 44, .22),
	            0 46px 70px -32px rgba(20, 28, 44, .22);
}
.ej-sf .ej-sf__hoja::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ej-sf .ej-sf__hoja::after {
	content: ""; position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px;
	background: linear-gradient(135deg, transparent 50%, #E4D9BC 50.5%, #D8C9A4 100%);
	box-shadow: -3px -3px 6px -3px rgba(20, 28, 44, .35) inset;
}
.ej-sf .ej-sf__etiqueta {
	position: absolute; right: 14px; top: -11px; z-index: 2; background: var(--sf-papel); padding: 2px 8px;
	font: 400 10.5px/1.4 var(--sf-sans); color: var(--sf-tenue); letter-spacing: .05em;
}
.ej-sf .ej-sf__reg {
	font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1.5; color: #26241C;
	filter: contrast(.94) brightness(.98);
}
/* El tema le pone tamaño a todo «p» del artículo y le ganaba a la hoja (salía a ~15 px).
   Como en el certificado guiado: los párrafos de la hoja HEREDAN los 11 px de registro. */
.ej-sf .ej-sf__reg p { margin: 0; font-size: inherit; line-height: inherit; font-family: inherit;
	color: inherit; text-align: left; hyphens: manual; }
.ej-sf .ej-sf__reg p.ej-sf__cab { text-align: center; font-weight: 700; font-size: 13.5px; line-height: 1.45; }
.ej-sf .ej-sf__reg p.ej-sf__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ej-sf .ej-sf__reg p.ej-sf__meta + p.ej-sf__meta { margin-top: 2px; }
.ej-sf .ej-sf__meta b { font-size: 12px; }
.ej-sf .ej-sf__reg p.ej-sf__leyenda-cab { margin-top: 10px; text-align: center; font-weight: 700; line-height: 1.45; }
.ej-sf .ej-sf__regla {
	margin-top: 8px; height: 6px;
	border-top: 1.5px dashed #8E8A78; border-bottom: 1.5px dashed #8E8A78;
}
.ej-sf .ej-sf__anot { position: relative; padding: 10px 0 12px; border-bottom: 1px dotted #9A9584; }
.ej-sf .ej-sf__anot p + p { margin-top: 3px; }
.ej-sf .ej-sf__anot .doble { display: flex; justify-content: space-between; gap: 16px; }
/* Solo el valor queda rígido. En el certificado guiado el último hijo SIEMPRE era el valor;
   aquí el valor falta en la mayoría de folios y el «Doc:» quedaba rígido: 997 px sin partirse. */
.ej-sf .ej-sf__anot .doble > .doc { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ej-sf .ej-sf__anot .doble > .valor { flex: none; }
.ej-sf .ej-sf__anot--rojo {
	margin-inline: -12px; padding-inline: 12px; background: rgba(180, 120, 64, .12);
	box-shadow: inset 0 0 0 1.5px var(--sf-cobre); border-bottom-color: transparent;
}
.ej-sf .ej-sf__anot--rojo .espec { font-weight: 700; color: #6E4415; }
.ej-sf .ej-sf__anot--amarillo {
	margin-inline: -12px; padding-inline: 12px; background: rgba(180, 120, 64, .055);
	box-shadow: inset 0 0 0 1px rgba(180, 120, 64, .55);
}
.ej-sf .ej-sf__anot--amarillo .espec { font-weight: 700; color: #6E4415; }
.ej-sf .ej-sf__pin {
	position: absolute; left: -36px; top: 9px; width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--sf-marino); color: var(--sf-marfil);
	font: 600 11px/1 var(--sf-sans); box-shadow: 0 4px 10px -3px rgba(20, 28, 44, .5);
}
.ej-sf .ej-sf__anot--rojo .ej-sf__pin,
.ej-sf .ej-sf__anot--amarillo .ej-sf__pin { left: -24px; }
.ej-sf .ej-sf__pin--rojo { background: var(--sf-cobre); }
.ej-sf .ej-sf__fin { margin-top: 12px; text-align: center; font-weight: 700; letter-spacing: .04em; color: #5C5848; }

/* ---------- La leyenda: la misma de «Las partes del certificado» ---------- */
.ej-sf .ej-sf__lista { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--sf-filete); }
.ej-sf .ej-sf__lista li { display: flex; gap: 14px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--sf-filete); }
.ej-sf .ej-sf__lista li::before { content: none; }
.ej-sf .ej-sf__num {
	flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
	background: var(--sf-marino); color: var(--sf-marfil);
	font: 600 11.5px/1 var(--sf-sans); display: flex; align-items: center; justify-content: center;
}
.ej-sf .ej-sf__num--rojo { background: var(--sf-cobre); }
.ej-sf .ej-sf__lista b {
	display: block; margin-bottom: 4px; font: 600 14.5px/1.35 var(--sf-sans); color: var(--sf-tinta);
}
.ej-sf .ej-sf__lista p {
	margin: 0; font: 400 16px/1.6 var(--sf-serif);
	text-align: justify; hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty;
}

/* ---------- Cierre ---------- */
/* La frase que hace preguntar «¿qué más falta?»: destacada, sobre un filete de cobre. */
.ej-sf .ej-sf__cierre-fuerte {
	margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--sf-cobre);
	font: 400 17.5px/1.55 var(--sf-serif); text-align: justify; hyphens: auto;
	hyphenate-limit-chars: 7 3 3; text-wrap: pretty;
}
.ej-sf .ej-sf__cierre-fuerte strong { font-weight: 700; color: var(--sf-marino); }
.ej-sf .ej-sf__aviso {
	margin: 16px 0 0; font: 400 14px/1.55 var(--sf-sans); color: var(--sf-gris);
	text-align: justify; hyphens: auto;
}
/* El llamado es la banda de los puentes del tema (.articulo .ej-puente), con sus clases. */
.ej-sf .ej-sf__banda { margin-bottom: 0; }
/* El «sin costo» dentro de la banda marino: un llamado cálido, no un rótulo de contraste. */
.ej-sf .ej-sf__banda.ej-puente .ej-sf__banda-costo {
	margin: 2px 0 22px; font: 400 17px/1.5 var(--sf-serif); color: #DCB463;
}
.ej-sf .ej-sf__cargando { opacity: .55; pointer-events: none; }

/* ---------- Celular ---------- */
@media (max-width: 600px) {
	.ej-sf .ej-sf__campos { grid-template-columns: 1fr; gap: 22px; }
	.ej-sf .ej-sf__veredicto { gap: 16px; align-items: flex-start; }
	.ej-sf .ej-sf__marca { width: 38px; }
	.ej-sf .ej-sf__hoja { padding: 22px 14px 24px 34px; transform: rotate(-.35deg); }
	.ej-sf .ej-sf__meta { flex-direction: column; gap: 2px; }
	.ej-sf .ej-sf__anot .doble { flex-direction: column; gap: 2px; }
	.ej-sf .ej-sf__pin { left: -30px; width: 20px; height: 20px; font-size: 10.5px; }
	.ej-sf .ej-sf__anot--rojo .ej-sf__pin,
	.ej-sf .ej-sf__anot--amarillo .ej-sf__pin { left: -18px; }
}

/* Con menos movimiento la pluma no viaja: el subrayado queda puesto (lo hace el JS). */