/* ================================================================
   SELECTOR DE EMPRESAS — Landing previa a la Vitrina
   Usa la misma paleta de variables definidas en vitrina.css (--vb, --vs, etc.)
   ================================================================ */
 
#selector-empresas {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--vb);
  color: var(--vtx);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}
 
/* ── Barra superior de aviso ── */
.sel-emp-topbar {
  position: relative;
  /* Más alto que .sel-emp-hero (z-index:1, más abajo en el documento
     pero SIN un .sel-emp-header propio que la contenga en su propio
     contexto de apilamiento, ya que .sel-emp-header no tiene z-index) —
     con el mismo z-index:1 de antes, un empate se resuelve por orden en
     el HTML y .sel-emp-hero (más abajo) le ganaba, pintándose encima
     del desplegable "Crear cuenta" que cuelga de acá. */
  z-index: 50;
  text-align: center;
  font-size: 13px;
  color: var(--vtx2);
  background: var(--vs);
  border-bottom: 1px solid var(--vbor);
  padding: 9px 16px;
}
.sel-emp-topbar b { color: var(--vtx); font-weight: 600; }
.sel-emp-topbar a {
  color: var(--vtx2);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
  transition: color 0.15s var(--ease-apple);
}
.sel-emp-topbar a:hover { color: var(--va); }

.sel-emp-topbar-link {
  background: none;
  border: none;
  font: inherit;
  color: var(--vtx2);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
  cursor: pointer;
  transition: color 0.15s var(--ease-apple);
}
.sel-emp-topbar-link:hover { color: var(--va); }

/* ── Encabezado / Hero ── */
.sel-emp-header {
  position: relative;
  background: var(--vb);
  border-bottom: 1px solid var(--vbor);
}

.sel-emp-hero {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px 44px;
  text-align: center;
}

.sel-emp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--vbor);
  color: var(--vtx2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.sel-emp-hero-eyebrow i { color: var(--va); }

.sel-emp-logo {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--va);
  margin-bottom: 12px;
}
.sel-emp-logo span { color: var(--vtx); font-weight: 300; }

.sel-emp-hero-titulo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--vtx2);
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto 14px;
}

.sel-emp-hero-desc {
  font-size: 15px;
  color: var(--txt-cuerpo);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 28px;
}

/* Buscador grande embebido en el hero */
.sel-emp-hero-buscador {
  max-width: 560px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vs2);
  border: 1px solid var(--vbor);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.15s var(--ease-apple);
}
.sel-emp-hero-buscador i { color: var(--va); font-size: 17px; flex-shrink: 0; }
.sel-emp-hero-buscador input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--vtx);
  font-size: var(--fs-input);
  padding: 9px 0;
}
.sel-emp-hero-buscador input::placeholder { color: var(--txt-tenue); }
.sel-emp-hero-buscador button {
  background: var(--vag);
  color: var(--va);
  border: 1px solid var(--vbor2);
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple);
}
.sel-emp-hero-buscador button:hover {
  background: var(--vag2);
  border-color: var(--va);
}

/* Chips de filtros (país / región / ciudad) + limpiar */
.sel-emp-hero-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sel-emp-hero-chips select {
  background: transparent;
  border: 1px solid var(--vbor);
  color: var(--vtx2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.sel-emp-hero-chips select:hover { border-color: var(--va); color: var(--va); }
.sel-emp-hero-chips select:focus { border-color: var(--va); color: var(--va); box-shadow: var(--shadow-focus-soft); }
.sel-emp-hero-chips select option { background: var(--vs2); color: var(--vtx2); }

.sel-emp-hero-limpiar {
  background: transparent;
  border: 1px solid var(--vbor);
  color: var(--txt-sub);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease-apple);
}
.sel-emp-hero-limpiar:hover {
  border-color: var(--vred);
  color: var(--vred);
}

@media (max-width: 700px) {
  .sel-emp-hero { padding: 40px 20px 32px; }
  .sel-emp-logo { font-size: 34px; }
  .sel-emp-hero-titulo { font-size: 15px; }
  .sel-emp-hero-buscador { flex-wrap: wrap; border-radius: 16px; padding: 12px; }
  .sel-emp-hero-buscador input { width: 100%; order: 1; padding: 6px 0; }
  .sel-emp-hero-buscador i { order: 0; }
  .sel-emp-hero-buscador button { order: 2; width: 100%; padding: 11px; }
}
 
/* ── Contador ── */
.sel-emp-conteo {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  color: var(--txt-sub);
  padding-bottom: 8px;
}
 
/* ── Grilla de tarjetas ── */
.sel-emp-grid-wrap {
  flex: 1;
  padding: 12px 24px 48px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
 
.sel-emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
 
.sel-emp-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  display: flex;
  flex-direction: column;
  min-height: 150px;
  animation: surgir 0.3s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 25ms), 300ms);
}
.sel-emp-card:hover {
  border-color: var(--vbor2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(206,147,216,0.12);
}
 
/* ── Logo de fondo (difuminado) + degradado para legibilidad ── */
/* ── Logo de fondo: completo, sin recortar ni distorsionar ── */
.sel-emp-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--sel-emp-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sel-emp-card:not(.con-fondo) .sel-emp-card-bg { display: none; }
 
.sel-emp-card.con-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0d0d0d;
  pointer-events: none;
}
 
.sel-emp-card.con-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.35) 0%, rgba(13,13,13,0.82) 100%);
  pointer-events: none;
}
 
.sel-emp-card-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
 
/* ── Líneas de info: ubicación, dirección, teléfono ── */
.sel-emp-card-linea {
  font-size: 12px;
  color: var(--txt-sub);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
}
.sel-emp-card.con-fondo .sel-emp-card-nombre { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.sel-emp-card.con-fondo .sel-emp-card-linea  { color: rgba(255,255,255,0.82); }
 
.sel-emp-card-btn { margin-top: auto; }
 
.sel-emp-card-nombre {
  font-size: 16px;
  font-weight: 700;
  color: var(--vtx);
  line-height: 1.3;
  margin-left: -2px;
}
 
/* ── Estado vacío / cargando ── */
.sel-emp-empty,
.sel-emp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--txt-sub);
  text-align: center;
  grid-column: 1 / -1;
}
.sel-emp-empty i,
.sel-emp-loading i { font-size: 44px; }
 
@media (max-width: 700px) {
  .sel-emp-grid-wrap { padding: 12px 16px 32px; }
  .sel-emp-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; }
}

/* El desplegable "Crear cuenta" que colgaba del botón "Súmate" se
   retiró: esa alta ahora es la página /registro-empresa. Sus ~100 líneas
   de CSS quedaron sin marcado que las usara. */

/* ════════════════════════════════════════════════════════════════
   FONDOS DEL HOME (Admin → Portada → Fondo del inicio)
   ════════════════════════════════════════════════════════════════
   Cada fondo es una clase que vitrina.js le pone a #vit-pagina-home
   según el id guardado en empresas.fondo_home. Solo se guarda el id —
   nunca CSS — así que agregar un fondo es agregar una clase acá y su
   id a FONDOS_HOME_VALIDOS (api/index.ts) y a FONDOS_HOME (admin.js).

   Van en ::before y no en el background del elemento por dos razones:
   position:fixed los deja quietos mientras se scrollea (el Home es
   largo; un degradado que sube con el contenido se nota artificial), y
   z-index:0 con el contenido en z-index:1 evita tener que tocar el
   apilado de todo lo que ya vive adentro. Sin pointer-events, para no
   comerse clicks. */
[class*="fondo-home-"] { position: relative; }
[class*="fondo-home-"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[class*="fondo-home-"] > * { position: relative; z-index: 1; }

/* .sel-emp-header envuelve TODO el Home y trae su propio fondo opaco
   (var(--vb)): con él encima, el fondo de acá abajo no se veía en
   ninguna parte. Se destapa solo cuando hay un fondo elegido — con "Sin
   fondo" queda exactamente como estaba. Las tarjetas y el banner sí
   siguen opacos, que es lo que se quiere: el fondo asoma entre ellos. */
[class*="fondo-home-"] .sel-emp-header { background: transparent; }

/* OJO con dónde se concentra cada fondo: arriba del viewport están el
   navbar y el banner, que son opacos y tapan todo. La primera versión de
   estos fondos ponía el dibujo justo ahí (y en malla/líneas lo apagaba
   hacia abajo con un degradado) — resultado: invisible, porque donde se
   dibujaba estaba tapado y donde se veía ya no había dibujo. Cubren la
   pantalla entera a propósito. */

/* Aurora: resplandor morado difuso, grande y bajo, para que se derrame
   por debajo del banner. */
.fondo-home-aurora::before {
  background:
    radial-gradient(75% 55% at 50% 38%, rgba(206,147,216,0.15), transparent 72%),
    radial-gradient(55% 45% at 88% 78%, rgba(139,92,180,0.13), transparent 72%);
}

/* Malla: puntos tenues en cuadrícula, parejos en toda la pantalla. */
.fondo-home-malla::before {
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Líneas: diagonales muy suaves, textura de tela a contraluz. */
.fondo-home-lineas::before {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.075) 0 1px, transparent 1px 13px);
}

/* Degradado: morado apagado que baja hacia el negro. El más sobrio de
   todos, no hay ninguna forma que distraiga. */
.fondo-home-degradado::before {
  background: linear-gradient(180deg, rgba(91,58,117,0.32) 0%, rgba(91,58,117,0.16) 55%, transparent 100%);
}

/* Resplandor: dos focos en las esquinas de abajo, deja el centro
   limpio para el banner y las tarjetas. */
.fondo-home-resplandor::before {
  background:
    radial-gradient(50% 45% at 0% 100%, rgba(206,147,216,0.18), transparent 72%),
    radial-gradient(50% 45% at 100% 100%, rgba(120,90,200,0.18), transparent 72%);
}

/* ── Fondos con color (neón) ──────────────────────────────────────────
   Mismos gradientes puros de siempre (cero peso, cero librerías), pero
   con color en vez de blanco/morado. Las opacidades están bajas a
   propósito: el fondo tiene que dar ambiente, no competirle al banner
   ni a las tarjetas. */

/* Neón: cian y magenta en esquinas opuestas, el dúo cyberpunk. */
.fondo-home-neon::before {
  background:
    radial-gradient(60% 50% at 8% 92%, rgba(0,229,255,0.16), transparent 70%),
    radial-gradient(60% 50% at 92% 8%, rgba(255,0,170,0.14), transparent 70%);
}

/* Retícula: cuadrícula morada fina sobre un lavado cian. */
.fondo-home-reticula::before {
  background-image:
    linear-gradient(rgba(206,147,216,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,147,216,0.10) 1px, transparent 1px),
    radial-gradient(70% 60% at 50% 40%, rgba(0,229,255,0.08), transparent 75%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

/* Circuito: cuadrícula con un nodo encendido en cada cruce. */
.fondo-home-circuito::before {
  background-image:
    radial-gradient(rgba(0,229,255,0.28) 1.6px, transparent 1.6px),
    linear-gradient(rgba(0,229,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.07) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
}

/* Cuadros: papel milimetrado, cuadrícula chica dentro de una grande. */
.fondo-home-cuadros::before {
  background-image:
    linear-gradient(rgba(167,120,255,0.13) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(167,120,255,0.13) 1.5px, transparent 1.5px),
    linear-gradient(rgba(167,120,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,120,255,0.06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px;
}

/* Horizonte: la grilla en perspectiva del synthwave. Es el único fondo
   que necesita una segunda capa, porque la grilla va inclinada y el
   ::before ya está tomado por el tinte rosado de abajo. El ::after se
   declara entero acá (la regla compartida de más arriba sólo cubre
   ::before) y se ancla al piso del viewport, no del documento. */
.fondo-home-horizonte::before {
  background: linear-gradient(180deg, transparent 50%, rgba(255,0,170,0.07) 100%);
}
.fondo-home-horizonte::after {
  content: '';
  position: fixed;
  left: -60%; right: -60%; bottom: 0; height: 46%;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,229,255,0.40) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,0,170,0.32) 0 1px, transparent 1px 56px);
  transform: perspective(190px) rotateX(60deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}

/* Aurora color: la Aurora de siempre, pero policroma. */
.fondo-home-auroracolor::before {
  background:
    radial-gradient(50% 40% at 20% 30%, rgba(139,92,246,0.18), transparent 70%),
    radial-gradient(45% 35% at 78% 55%, rgba(0,229,255,0.13), transparent 70%),
    radial-gradient(45% 35% at 45% 95%, rgba(255,0,170,0.12), transparent 70%);
}

/* Puntos neón: dos retículas de puntos entrelazadas, cian y rosa. */
.fondo-home-puntosneon::before {
  background-image:
    radial-gradient(rgba(0,229,255,0.20) 1.4px, transparent 1.4px),
    radial-gradient(rgba(255,0,170,0.16) 1.4px, transparent 1.4px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}

/* Diagonales: trama en X, violeta cruzada con cian. */
.fondo-home-diagonales::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(167,120,255,0.075) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(0,229,255,0.06) 0 1px, transparent 1px 22px);
}

/* ── Galería de fondos en Admin → Portada ── */
.fondo-galeria { display: flex; flex-wrap: wrap; gap: 10px; }
.fondo-opcion {
  width: 104px; padding: 0; cursor: pointer;
  background: none; border: none; text-align: center;
}
.fondo-muestra {
  height: 62px; border-radius: var(--rl);
  border: 2px solid var(--vbor);
  background-color: var(--vb);
  position: relative; overflow: hidden;
  transition: border-color 0.15s var(--ease-apple);
}
.fondo-opcion:hover .fondo-muestra { border-color: var(--vbor2); }
.fondo-opcion.activo .fondo-muestra { border-color: var(--va); }
.fondo-opcion-nombre { display: block; font-size: 11px; color: var(--txt-sub); margin-top: 5px; }
.fondo-opcion.activo .fondo-opcion-nombre { color: var(--vtx); }

/* La miniatura repite el dibujo del fondo real, pero en su propia caja
   (no fixed ni a pantalla completa) para que se vea dentro del cuadrito.
   Los tamaños de la malla se achican para que se note la trama. */
.fondo-muestra-aurora {
  background-image:
    radial-gradient(75% 60% at 50% 38%, rgba(206,147,216,0.34), transparent 72%),
    radial-gradient(55% 50% at 88% 78%, rgba(139,92,180,0.28), transparent 72%);
}
.fondo-muestra-malla {
  background-image: radial-gradient(rgba(255,255,255,0.20) 1px, transparent 1px);
  background-size: 11px 11px;
}
.fondo-muestra-lineas {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 8px);
}
.fondo-muestra-degradado {
  background-image: linear-gradient(180deg, rgba(91,58,117,0.70) 0%, rgba(91,58,117,0.32) 55%, transparent 100%);
}
.fondo-muestra-resplandor {
  background-image:
    radial-gradient(55% 55% at 0% 100%, rgba(206,147,216,0.38), transparent 72%),
    radial-gradient(55% 55% at 100% 100%, rgba(120,90,200,0.38), transparent 72%);
}

/* Miniaturas de los fondos con color. Las tramas van más apretadas que
   en el fondo real para que se lean dentro del cuadrito, y con más
   opacidad porque la muestra es chica. */
.fondo-muestra-neon {
  background-image:
    radial-gradient(65% 60% at 8% 92%, rgba(0,229,255,0.38), transparent 70%),
    radial-gradient(65% 60% at 92% 8%, rgba(255,0,170,0.34), transparent 70%);
}
.fondo-muestra-reticula {
  background-image:
    linear-gradient(rgba(206,147,216,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,147,216,0.22) 1px, transparent 1px),
    radial-gradient(75% 70% at 50% 40%, rgba(0,229,255,0.20), transparent 75%);
  background-size: 15px 15px, 15px 15px, 100% 100%;
}
.fondo-muestra-circuito {
  background-image:
    radial-gradient(rgba(0,229,255,0.55) 1.4px, transparent 1.4px),
    linear-gradient(rgba(0,229,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.16) 1px, transparent 1px);
  background-size: 17px 17px, 17px 17px, 17px 17px;
}
.fondo-muestra-cuadros {
  background-image:
    linear-gradient(rgba(167,120,255,0.30) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(167,120,255,0.30) 1.5px, transparent 1.5px),
    linear-gradient(rgba(167,120,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,120,255,0.14) 1px, transparent 1px);
  background-size: 31px 31px, 31px 31px, 11px 11px, 11px 11px;
}
.fondo-muestra-horizonte {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,229,255,0.34) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, transparent 45%, rgba(255,0,170,0.22) 100%);
}
.fondo-muestra-auroracolor {
  background-image:
    radial-gradient(55% 50% at 20% 30%, rgba(139,92,246,0.42), transparent 70%),
    radial-gradient(50% 45% at 78% 55%, rgba(0,229,255,0.30), transparent 70%),
    radial-gradient(50% 45% at 45% 95%, rgba(255,0,170,0.28), transparent 70%);
}
.fondo-muestra-puntosneon {
  background-image:
    radial-gradient(rgba(0,229,255,0.42) 1.2px, transparent 1.2px),
    radial-gradient(rgba(255,0,170,0.34) 1.2px, transparent 1.2px);
  background-size: 13px 13px, 13px 13px;
  background-position: 0 0, 6.5px 6.5px;
}
.fondo-muestra-diagonales {
  background-image:
    repeating-linear-gradient(45deg, rgba(167,120,255,0.17) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(0,229,255,0.14) 0 1px, transparent 1px 12px);
}