/* =============================================================================
   EL BUSCADOR DE PROYECTOS PRIVADOS

   Con la paleta, la letra y la geometria de sondeva.es: los mismos tokens que
   `src/styles/global.css` de la web (tinta, papel, linea, acento), esquinas de
   4 px, rotulos en versalitas espaciadas, botones en tinta y la Inter variable
   servida desde aqui, porque la CSP no deja traerla de fuera.
   ============================================================================= */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fuentes/inter.woff2") format("woff2-variations");
}

:root {
  --tinta: #0a111a;
  --gris: #3b4754;
  --gris-suave: #5f6b78;
  --borde: #e2e6eb;
  --papel: #ffffff;
  --fondo: #fbfbfc;
  --superficie: #f4f5f7;
  --acento: #0f4c81;
  --acento-suave: #eef3f8;
  --verde: #047857;
  --verde-suave: #ecfdf5;
  --rojo: #991b1b;
  --rojo-suave: #fef2f2;
  --ambar: #92400e;
  --ambar-suave: #fffbeb;
  --sombra: 0 4px 20px -4px rgba(0, 0, 0, .05);
  --sombra-alta: 0 12px 32px -8px rgba(10, 17, 26, .14);
  --r: 4px;
  --ancho: 72rem;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 0.9375rem/1.55 "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--acento); color: #fff; }

button, input, select, textarea { font: inherit; color: inherit; }
button {
  border: 1px solid var(--borde); background: var(--papel); border-radius: var(--r);
  padding: 0.5rem 0.875rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
button:hover { background: var(--superficie); }
button.principal { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
button.principal:hover { background: color-mix(in srgb, var(--tinta) 90%, transparent); }
button.suave { color: var(--gris); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
button:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
/* Cualquier `display:` puesto por una clase gana al `[hidden]` del navegador, y el
   elemento se ve aunque el código lo haya escondido. Pasó con la caja del aviso por
   correo, que es `.perfiles` y por tanto `display: flex`. Una vez y para todos. */
[hidden] { display: none !important; }

/* ── LA BARRA DE ARRIBA ─────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--fondo); border-bottom: 1px solid var(--borde); padding: 0.75rem 1.5rem;
}
.marca { font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 0.625rem; }
.marca svg { width: 1.5rem; height: 1.5rem; color: var(--acento); flex: 0 0 auto; }
.producto { font-weight: 500; color: var(--gris); font-size: 0.875rem; }
.estado-datos { color: var(--gris); font-size: 0.8125rem; }

/* ── LA PORTADA ─────────────────────────────────────────────────────────────── */
.portada { max-width: var(--ancho); margin: 0 auto; padding: 2rem 1.5rem 1.5rem; }
.ceja {
  margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gris); display: flex; align-items: center; gap: 0.5rem;
}
.punto { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--acento); }
h1 { margin: 0 0 0.5rem; font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.15; letter-spacing: -.02em; }
.entradilla { margin: 0 0 1.25rem; color: var(--gris); max-width: 64ch; }
.caja-busqueda { display: flex; gap: 0.5rem; max-width: 47.5rem; }
.caja-busqueda input {
  flex: 1 1 auto; min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--papel); box-shadow: var(--sombra); font-size: 1.0625rem;
}
.caja-busqueda button { flex: 0 0 auto; padding-inline: 1.25rem; }
.pista-busqueda { margin: 0.4375rem 0 0; }
.pista-busqueda kbd {
  font: inherit; font-size: 0.75rem; border: 1px solid var(--borde); border-radius: 0.25rem;
  padding: 0 0.25rem; background: var(--superficie);
}
/* Lo que la frase se ha convertido, y de dónde sale. Este no se borra solo, al
   contrario que `.aviso`: dice por qué la pantalla enseña lo que enseña. */
.interpretado {
  margin: 0.625rem 0 0; max-width: 47.5rem; font-size: 0.8125rem; color: var(--gris);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 0.5rem 0.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.5rem;
}
.interpretado .por-ia { color: var(--acento); font-weight: 600; }
.interpretado button { padding: 0.125rem 0.5rem; font-size: 0.75rem; margin-left: auto; }
.caja-busqueda input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent), var(--sombra);
}
.perfiles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.875rem; }
.perfiles label { font-size: 0.8125rem; font-weight: 600; color: var(--gris); }
.perfiles select { padding: 0.4375rem 0.625rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); min-width: 10rem; }
.sin-guardar { font-size: 0.8125rem; color: var(--ambar); background: var(--ambar-suave); border-radius: 99px; padding: 0.125rem 0.625rem; }
.aviso { font-size: 0.8125rem; color: var(--gris); }
.perfiles.avisar { margin-top: 0.5rem; }
.perfiles.avisar select { min-width: 8rem; }
.pista { font-size: 0.8125rem; color: var(--gris); }


/* ── EL CUERPO ──────────────────────────────────────────────────────────────── */
.cuerpo {
  max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem 3rem;
  display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start;
}
.filtros { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: 0.375rem; scrollbar-width: thin; }
.titulo-filtros { font-size: 0.6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); margin: 0.25rem 0 0.5rem; }
fieldset { border: 0; border-top: 1px solid var(--borde); margin: 0; padding: 0.75rem 0; }
legend { font-weight: 600; font-size: 0.8125rem; padding: 0; margin-bottom: 0.375rem; }
.op {
  display: flex; align-items: flex-start; gap: 0.5625rem; font-size: 0.875rem; color: var(--gris);
  padding: 0.3125rem 0.5rem; margin: 0.0625rem -0.5rem; border-radius: var(--r); cursor: pointer;
}
.op:hover { background: var(--superficie); color: var(--tinta); }
.op:has(input:checked) { color: var(--acento); background: var(--acento-suave); font-weight: 600; }
.op input { margin-top: 0.25rem; accent-color: var(--acento); }
.op .n { margin-left: auto; color: var(--gris-suave); font-variant-numeric: tabular-nums; font-size: 0.8125rem; font-weight: 400; }
.op.vacia { color: var(--gris-suave); }
.rango { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 0.25rem; }
.rango input { width: 4.375rem; padding: 0.25rem 0.375rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); }
.nota { font-size: 0.75rem; color: var(--gris-suave); margin: 0.375rem 0 0; line-height: 1.45; }
textarea { width: 100%; border: 1px solid var(--borde); border-radius: var(--r); padding: 0.5rem; resize: vertical; margin-bottom: 0.375rem; background: var(--papel); }
select#dias { width: 100%; padding: 0.4375rem 0.625rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); }
.ver-mas {
  background: none; border: 0; color: var(--acento); padding: 0.125rem 0; font-size: 0.8125rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde);
}
.ver-mas:hover { background: none; text-decoration-color: var(--acento); }

/* ── LO QUE SE ESTA FILTRANDO Y EL RECUENTO ─────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; min-height: 1.875rem; }
.chips .etiqueta { font-size: 0.6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); margin-right: 0.25rem; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; background: var(--papel); border: 1px solid var(--borde); border-radius: 99px; padding: 0.125rem 0.375rem 0.125rem 0.6875rem; }
.chip button { border: 0; padding: 0 0.25rem; background: none; color: var(--gris); font-size: 0.9375rem; line-height: 1; }
.chip button:hover { background: none; color: var(--tinta); }
.cabecera-resultados { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.625rem 0 0.875rem; }
.recuento { margin: 0; font-size: 1.0625rem; }
.recuento strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.recuento span { color: var(--gris); font-size: 0.9375rem; }
.acciones { display: flex; gap: 0.5rem; }

/* ── LAS FICHAS ─────────────────────────────────────────────────────────────── */
.tarjeta {
  position: relative; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 1rem 1.125rem 0.875rem; margin-bottom: 0.75rem; box-shadow: var(--sombra);
  transition: border-color .15s ease; overflow-wrap: anywhere;
}
.tarjeta:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.tarjeta .cab { display: flex; justify-content: space-between; gap: 1.125rem; }
.tarjeta h3 { margin: 0; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--acento); }
.titulo-largo { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mw { text-align: right; white-space: nowrap; }
.mw strong { display: block; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.mw span { font-size: 0.75rem; color: var(--gris-suave); }
.promotor { margin: 0.5rem 0 0.625rem; font-size: 0.875rem; }
.promotor .cif { color: var(--gris); font-variant-numeric: tabular-nums; }
.promotor.sin { color: var(--gris-suave); font-style: italic; }
.promotor.limite { color: var(--rojo); font-style: normal; }
.pie { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center; font-size: 0.8125rem; color: var(--gris); }
.pie > * + *:not(.insignia):not(.abrir)::before { content: "·"; display: inline-block; margin-right: 0.75rem; color: var(--gris-suave); }
.insignia { font-size: 0.75rem; font-weight: 600; border-radius: var(--r); padding: 0.125rem 0.5rem; }
.insignia.vivo { background: var(--verde-suave); color: var(--verde); }
.insignia.desistido, .insignia.fuera { background: var(--superficie); color: var(--gris-suave); }
.insignia.caducado { background: var(--ambar-suave); color: var(--ambar); }
.insignia.denegado { background: var(--rojo-suave); color: var(--rojo); }
.insignia.cliente { background: var(--ambar-suave); color: var(--ambar); }
.insignia.hibrida { background: var(--acento-suave); color: var(--acento); }
/* Compartir nudo es lo más accionable que hay en la ficha —el RD-ley 7/2026
   obliga a esos promotores a acordarse antes del 22-03-2027—, así que se ve. */
.insignia.nudo { background: var(--tinta); color: var(--papel); }
.detras { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--gris); }
.detras strong { color: var(--tinta); font-weight: 600; }
.fuente-dato { color: var(--gris-suave); }
.nudo { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--gris); }
.nudo strong { color: var(--tinta); font-weight: 600; }
/* Lo que le queda al nudo, de la CNMC. En rojo cuando está lleno, que es el caso
   que cambia una decisión: el proyecto está pidiendo sitio donde no lo hay. */
.capacidad { font-variant-numeric: tabular-nums; }
.capacidad::before { content: " · "; color: var(--gris-suave); }
.capacidad.hay { color: var(--verde); }
.capacidad.lleno { color: var(--rojo); }
.ident { font-variant-numeric: tabular-nums; }
button.abrir { margin-left: auto; background: var(--tinta); border-color: var(--tinta); color: var(--papel); padding: 0.3125rem 0.75rem; font-size: 0.8125rem; }
button.abrir:hover { background: color-mix(in srgb, var(--tinta) 90%, transparent); }
.vacio { background: var(--papel); border: 1px dashed var(--borde); border-radius: var(--r); padding: 2.5rem 1.25rem; color: var(--gris); text-align: center; }
.mas-resultados { color: var(--gris); font-size: 0.8125rem; text-align: center; }

/* ── LA CUENTA ──────────────────────────────────────────────────────────────── */
.cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; margin-top: 0.75rem; font-size: 0.84375rem; color: var(--gris); }
.cuenta .plan { font-weight: 600; color: var(--tinta); background: var(--papel); border: 1px solid var(--borde); border-radius: 99px; padding: 0.125rem 0.625rem; }
.cuenta .correo { color: var(--tinta); }
.cuenta .simular { display: inline-flex; align-items: center; gap: 0.375rem; }
.cuenta select { padding: 0.25rem 0.5rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); }
.cuenta button { padding: 0.25rem 0.75rem; font-size: 0.8125rem; }

/* ── LO QUE EL PLAN NO DEJA VER ─────────────────────────────────────────────── */
.borrosos { position: relative; }
.falsas { filter: blur(4px); opacity: .7; pointer-events: none; user-select: none; }
.tarjeta.falsa { height: 6.75rem; }
.raya { height: 0.75rem; border-radius: var(--r); background: var(--borde); margin: 0.625rem 0; width: 60%; }
.raya.larga { width: 85%; height: 0.875rem; }
.raya.corta { width: 35%; }
.mejorar { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; text-align: center; padding: 1rem; }
.mejorar strong { font-size: 1.0625rem; }
.mejorar span { color: var(--gris); font-size: 0.875rem; max-width: 46ch; }

/* ── ENTRAR: EL DIALOGO Y LA PAGINA DEL ENLACE ──────────────────────────────── */
.dialogo {
  border: 1px solid var(--borde); border-radius: var(--r); padding: 1.5rem; color: var(--tinta);
  width: min(27.5rem, calc(100vw - 2rem)); box-shadow: var(--sombra-alta); background: var(--papel);
}
.dialogo::backdrop { background: rgba(10, 17, 26, .45); }
.dialogo h2 { margin: 0 0 0.5rem; font-size: 1.25rem; letter-spacing: -.01em; }
.dialogo .explica { margin: 0 0 1rem; color: var(--gris); font-size: 0.875rem; }
.dialogo label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gris); margin-bottom: 0.25rem; }
.dialogo input[type="email"] { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); }
.dialogo input[type="email"]:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent); }
.turnstile { margin-top: 0.75rem; }
.estado { font-size: 0.875rem; color: var(--tinta); min-height: 1.5em; margin: 0.75rem 0 0; }
.letra-pequena { font-size: 0.75rem; color: var(--gris-suave); margin: 0.625rem 0 0; }
.letra-pequena a { color: var(--gris); }
.botones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.entrar { max-width: 35rem; margin: 0 auto; padding: 3.5rem 1.5rem; }
.entrar a { color: var(--acento); }
button.grande { padding: 0.625rem 1.75rem; font-size: 1rem; }

/* ── EL PIE ─────────────────────────────────────────────────────────────────── */
.pie-pagina {
  max-width: var(--ancho); margin: 0 auto; padding: 1.125rem 1.5rem 2.25rem; border-top: 1px solid var(--borde);
  color: var(--gris); font-size: 0.78125rem;
}
.pie-pagina a { color: var(--gris); }

@media (max-width: 53.75rem) {
  .cuerpo { grid-template-columns: 1fr; }
  .filtros { position: static; max-height: none; overflow: visible; }
  .tarjeta .cab { flex-direction: column; gap: 0.375rem; }
  .mw { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }