/* ============================================================
   UKKIN — Design System v4
   Paleta: Ámbar · Tipografía: Instrument Sans + IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  color-scheme:dark;
  /* Superficies oscuras */
  --bg-0:#0C0D0E;
  --bg-1:#141618;
  --bg-2:#1C1F22;
  --linea:#2A2E32;
  --linea-suave:#1F2225;

  /* Texto sobre oscuro */
  --txt-0:#F5F3F0;
  --txt-1:#A8ABAF;
  --txt-2:#9A9DA3;

  /* Superficies claras */
  --luz-0:#F5F3F0;
  --luz-1:#EBE8E3;
  --luz-linea:#D9D5CF;
  --luz-txt:#16181A;
  --luz-txt-1:#5A5E62;
  --luz-txt-2:#8A8E92;

  /* Acentos */
  --ambar:#E8A33D;
  --ambar-2:#C4842A;
  --verde:#4A9B6E;
  --rojo:#C4544A;
  --azul:#5B8FB9;

  /* Tipografía */
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Métrica */
  --nav-h:64px;
  --tick-h:34px;
  --max:1180px;
  --pad:clamp(1.15rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}

/* overflow-x:hidden vive en html, NO en body: en WebKit/WebViews táctiles (Safari iOS,
   Edge/WebView Android, navegador in-app de Telegram), poner overflow no-visible en body
   rompe el posicionamiento de los `position:fixed` (nav móvil, desplegables "Sectores"/
   "Más") — quedan hit-testeados contra una posición vieja durante/justo después del
   scroll, y un tap visualmente correcto dispara el link vecino. Bug real reportado por el
   usuario (comentarios + capturas): links "rotos" en el menú móvil y en el explorador de
   Telegram, y un análisis de Siembra que aterrizaba en Minería al tocar "Sectores". */
body{
  font-family:var(--sans);
  background:var(--bg-0);
  color:var(--txt-0);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

::selection{background:var(--ambar);color:var(--bg-0)}

:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:2px;
}

/* ---------- Idioma ---------- */
html[data-lang="es"] .en{display:none!important}
html[data-lang="en"] .es{display:none!important}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:rgba(12,13,14,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea-suave);
  display:flex;align-items:center;
  padding:0 var(--pad);
  gap:1rem;
}
.nav-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;flex-shrink:0;line-height:1.15}
.nav-logo{
  font-family:var(--mono);font-size:21px;font-weight:700;
  letter-spacing:.14em;color:var(--txt-0);
}
.nav-logo .cuneiform{font-size:14px;margin-left:.4rem;color:var(--ambar);opacity:.85}
.nav-tag{
  font-size:16px;color:var(--txt-1);letter-spacing:.01em;font-weight:600;
  white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-links a{
  font-size:14px;color:var(--txt-1);
  padding:7px 9px;border-radius:3px;
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--txt-0);background:var(--bg-2)}
.nav-links a[aria-current]{color:var(--txt-0)}
.nav-links .btn-nav{margin-left:.85rem}

/* Menú desplegable — agrupa items menos frecuentes, se abre al pasar el cursor */
.nav-drop{position:relative}
.nav-drop>button{
  font-size:14px;color:var(--txt-1);background:none;border:none;cursor:pointer;
  padding:7px 9px;border-radius:3px;font-family:inherit;
  display:inline-flex;align-items:center;gap:3px;
  transition:color .15s,background .15s;
}
.nav-drop>button:hover,.nav-drop.open>button{color:var(--txt-0);background:var(--bg-2)}
.nav-drop>button svg{width:9px;height:9px;transition:transform .15s}
.nav-drop.open>button svg{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:100%;left:0;margin-top:4px;min-width:170px;
  background:var(--bg-1);border:1px solid var(--linea);border-radius:4px;
  padding:.35rem;box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .15s,transform .15s;
}
.nav-drop-menu a{
  display:block;font-size:16.5px;color:var(--txt-1);padding:7px 10px;border-radius:3px;
}
.nav-drop-menu a:hover{color:var(--txt-0);background:var(--bg-2)}
/* ============================================================
   CONTRATO — NO ROMPER (ver tests/nav-touch.spec.js, tests A/C/F)
   Esta zona ya se rompió dos veces con el mismo síntoma visible
   ("toco un link y aterrizo en otro") por causas distintas: ronda 13
   (overflow-x en body, ver arriba en la línea ~50) y ronda 29 (abajo).
   Las dos reglas de .nav-drop-menu de abajo DEBEN quedar separadas en
   dos @media distintos — nunca fusionarlas de nuevo en un solo selector
   combinado tipo ".nav-drop:hover .nav-drop-menu,.nav-drop.open
   .nav-drop-menu{...}". Antes de tocar esto, correr
   `cd tests && npm test` (ver tests/README.md).
   ============================================================ */
@media(min-width:901px){
  /* El hover con :hover puro se limita a dispositivos con mouse real
     (hover:hover, pointer:fine). En pantallas táctiles a este ancho
     (laptop táctil, 2-en-1, tablet en horizontal) el :hover queda
     "pegado" tras un toque — sin mouseout real — y el menú desplegable
     se queda invisible pero interactivo (pointer-events:auto) encima de
     links cercanos, robando el siguiente toque y mandando a otra
     página. El toggle por clic/toque (clase .open, ver ukkin.js) sigue
     funcionando igual en todos los dispositivos — es la única vía en
     pantallas táctiles, y no se pega porque JS cierra el menú al tocar
     fuera. Bug reportado por el usuario 23-ago-2026, ronda 29.*/
  .nav-drop.open .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
  .nav-drop:hover .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
}

.lang{display:flex;gap:.35rem;flex-shrink:0;align-items:center}
.lang button{
  background:none;border:none;cursor:pointer;padding:0;
  width:24px;height:24px;border-radius:50%;overflow:hidden;
  opacity:.4;filter:grayscale(.55);
  transition:opacity .18s,filter .18s,box-shadow .18s;
  flex-shrink:0;line-height:0;
}
.lang button img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lang button:hover{opacity:.8;filter:grayscale(.2)}
.lang button[aria-pressed="true"]{
  opacity:1;filter:none;
  box-shadow:0 0 0 1.5px var(--ambar);
}

/* País de consulta — selector global inyectado por JS (montarPaisConsulta
   en ukkin.js) junto al selector de idioma en el nav de CUALQUIER página
   que cargue ukkin.js, sin tocar el HTML de cada archivo. Es el país que
   se está "consultando" (independiente de tu país de perfil) — ver
   PENDIENTES.md / CHANGELOG.md ronda 17 para el porqué. */
.pais-consulta{position:relative;flex-shrink:0}
.pais-consulta-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--linea);border-radius:20px;
  padding:6px 11px;cursor:pointer;font-family:var(--sans);
  font-size:14px;font-weight:600;color:var(--txt-1);
  transition:border-color .15s,color .15s;
}
.pais-consulta-btn:hover{border-color:var(--ambar);color:var(--txt-0)}
.pcs-sin-elegir{font-weight:400;color:var(--txt-2)}

/* Capa económica compartida — usada por renderCapaEconomicaSector()
   en ukkin.js (pesca, ganadería, minería, silvicultura). Movida aquí
   desde un <style> local de ukkin_ganaderia.html (1-sep-2026) para
   que las 4 páginas del sector rindan igual sin duplicar reglas. */
.eco-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:1rem}
.eco-card{border:1px solid var(--linea);border-radius:6px;padding:1rem 1.15rem;background:var(--bg-1);min-width:0}
.eco-card h4{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);margin-bottom:.6rem}
.eco-item{padding:.55rem 0;border-bottom:1px solid var(--linea-suave);min-width:0}
.eco-item:last-child{border-bottom:none}
.eco-item b{display:block;font-size:16.5px;margin-bottom:.2rem;overflow-wrap:anywhere;line-height:1.4}
.eco-item span{font-size:15.5px;color:var(--txt-1);line-height:1.55;display:block;overflow-wrap:anywhere}
.eco-vacio{font-size:15.5px;color:var(--txt-2);padding:.5rem 0}

/* Sistema de widgets del perfil (15-sep-2026, ver PENDIENTES.md FY).
   Marco visual compartido para cualquier widget embebido, sin importar
   de qué página venga su lógica — vive aquí (global) y no en el
   <style> de ukkin_perfil.html para que otra página que algún día
   también embeba widgets no tenga que duplicarlo. */
.widgets-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.widget-card{border:1px solid var(--linea);border-radius:6px;padding:1.1rem 1.25rem;background:var(--bg-1);min-width:0}
.widget-card .widget-card-titulo{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar);display:block;margin-bottom:.55rem}
.widget-card .widget-card-body{font-size:16px;color:var(--txt-1);line-height:1.55}
.pais-consulta-btn svg{width:9px;flex-shrink:0;opacity:.6}
.pais-consulta-menu{
  position:absolute;top:100%;right:0;margin-top:6px;
  width:230px;
  background:var(--bg-1);border:1px solid var(--linea);border-radius:4px;
  padding:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;
}
.pais-consulta-menu input{width:100%;margin-bottom:.4rem}
/* Solo la lista de resultados hace scroll (el buscador y la nota quedan
   fijos) — mismo patrón que .ubic-resultados del buscador genérico — y
   con scrollbar delgada en vez de la barra nativa gruesa con flechas
   (reportada como fea por el usuario, captura 22-ago-2026). Ajuste
   pedido para el cierre de la ronda de El Salvador. */
.pais-consulta-lista{
  display:flex;flex-direction:column;gap:2px;
  max-height:230px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.pais-consulta-lista::-webkit-scrollbar{width:6px}
.pais-consulta-lista::-webkit-scrollbar-track{background:transparent}
.pais-consulta-lista::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
.pais-consulta-lista::-webkit-scrollbar-thumb:hover{background:var(--ambar)}
.pais-consulta-lista button{
  text-align:left;background:none;border:none;border-radius:3px;
  padding:8px 9px;font-size:15px;color:var(--txt-1);cursor:pointer;
  font-family:var(--sans);
}
.pais-consulta-lista button:hover{background:var(--bg-2);color:var(--txt-0)}
.pais-consulta-lista button[aria-current="true"]{color:var(--ambar);font-weight:600}
/* Reemplaza la nota "algunos países, al azar" (ronda 22, pedido del
   usuario): 5 fijos sin aleatoriedad (MX/US/CA + los 2 de mayor PIB
   nominal ya cargados, ver ukkin.js) + este enlace a la página propia
   con el catálogo completo buscable (ukkin_paises.html). */
.pais-consulta-vermas{
  display:block;margin-top:.5rem;padding-top:.5rem;
  border-top:1px solid var(--linea-suave);
  font-size:13.5px;font-weight:600;color:var(--ambar);
  text-align:center;text-decoration:none;
}
.pais-consulta-vermas:hover{text-decoration:underline}
@media(max-width:900px){
  .pais-consulta-menu{position:static;margin-top:.4rem;width:100%;box-shadow:none}
}

.btn-nav{
  background:var(--ambar);color:var(--bg-0)!important;
  font-size:14.5px;font-weight:700;
  padding:8px 15px;border-radius:3px;border:none;cursor:pointer;
  transition:background .15s;white-space:nowrap;flex-shrink:0;
  min-width:118px;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-nav span{color:inherit}
.btn-nav:hover{background:#F2B052}

/* Menú móvil */
.nav-toggle{
  display:none;background:none;border:1px solid var(--linea);
  border-radius:3px;padding:7px 9px;cursor:pointer;flex-shrink:0;
}
.nav-toggle span{
  display:block;width:16px;height:1.5px;background:var(--txt-0);
  transition:transform .2s,opacity .2s;
}
.nav-toggle span+span{margin-top:4px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:900px){
  .nav-tag{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-1);border-bottom:1px solid var(--linea);
    padding:.5rem var(--pad) 1rem;margin-left:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .2s,opacity .2s;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{padding:12px 4px;border-bottom:1px solid var(--linea-suave);border-radius:0}
  .nav-links .btn-nav{margin-top:.75rem;margin-left:0;text-align:center;padding:12px}
  .nav-drop>button{width:100%;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--linea-suave);border-radius:0;color:var(--txt-2);cursor:default}
  .nav-drop>button svg{display:none}
  /* pointer-events NO se fija aquí a propósito — hereda de .nav-links
     (none cuando el menú móvil está cerrado, auto solo con .nav-links.open).
     Bug real encontrado 13-sep-2026: al forzar pointer-events:auto en este
     selector sin condición, el submenú "Sectores"/"Más" seguía siendo
     clicable aunque .nav-links estuviera cerrado e invisible (opacity:0).
     Como .nav-links es position:fixed anclado al viewport, ese panel
     fantasma viajaba con el scroll y quedaba encima de lo que el usuario
     veía en pantalla — footer incluido — robando el toque hacia el link
     invisible del submenú que casualmente ocupaba ese pixel. Reportado
     como "links del footer aterrizan en Minería/Ganadería/Transformación/
     Recursos naturales al azar". No relacionado con touch-adjustment del
     navegador ni con el fix de targets de 48px (ese sigue siendo válido,
     solo no era la causa). Antes de volver a fijar pointer-events:auto
     aquí, correr `cd tests && npm test`. */
  .nav-drop-menu{
    position:static;opacity:1;transform:none;
    box-shadow:none;border:none;background:none;padding:0 0 0 .75rem;margin-top:0;
  }
  .nav-drop-menu a{border-bottom:1px solid var(--linea-suave);border-radius:0;padding:10px 4px}
}

/* ============================================================
   TICKER DE DATOS
   ============================================================ */
.ticker{
  height:var(--tick-h);
  background:var(--bg-1);
  border-bottom:1px solid var(--linea-suave);
  display:flex;align-items:center;
  padding:0 var(--pad);
  gap:0;overflow-x:auto;
  scrollbar-width:none;
}
.ticker::-webkit-scrollbar{display:none}
.tk{
  display:flex;align-items:center;gap:7px;
  padding:0 15px;height:100%;white-space:nowrap;flex-shrink:0;
  border-right:1px solid var(--linea-suave);
}
.tk:first-child{padding-left:0}
.tk-l{
  font-family:var(--mono);font-size:13.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
}
.tk-v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--txt-0)}
.tk-v.up{color:var(--verde)}
.tk-v.down{color:var(--rojo)}
.tk-v.acc{color:var(--ambar)}

.pulse{position:relative;width:7px;height:7px;flex-shrink:0}
.pulse i{
  position:absolute;inset:0;border-radius:50%;
  background:var(--verde);opacity:.35;
  animation:pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
.pulse b{position:absolute;inset:1.5px;border-radius:50%;background:var(--verde)}
@keyframes pulse{
  0%{transform:scale(1);opacity:.4}
  70%{transform:scale(2.6);opacity:0}
  100%{opacity:0}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(3.5rem,9vw,6.5rem) 0}
.sec-luz{background:var(--luz-0);color:var(--luz-txt)}
.sec-luz .eyebrow{color:var(--ambar-2)}
.sec-luz p{color:var(--luz-txt-1)}

.eyebrow{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ambar);
  margin-bottom:1rem;display:block;
}

h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:600}
h1{font-size:clamp(2.1rem,6vw,4rem)}
h2{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.12}
h3{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.25;letter-spacing:-.02em}

.lead{
  font-size:clamp(1.05rem,1.8vw,1.25rem);
  line-height:1.7;color:var(--txt-1);max-width:60ch;
}
.sec-luz .lead{color:var(--luz-txt-1)}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;border-radius:3px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.btn-1{background:var(--ambar);color:var(--bg-0)}
.btn-1:hover{background:#F2B052}
.btn-2{background:transparent;color:var(--txt-0);border-color:var(--linea)}
.btn-2:hover{border-color:var(--txt-2);background:var(--bg-1)}
.sec-luz .btn-2{color:var(--luz-txt);border-color:var(--luz-linea)}
.sec-luz .btn-2:hover{border-color:var(--luz-txt-2);background:var(--luz-1)}

/* ============================================================
   COMPONENTES DE DATO
   ============================================================ */
/* Carrusel "Panorama de negocio por país" — reemplaza al antiguo
   stat-grid (números genéricos, 2 de ellos fijos y no verificables al
   volverse internacional). Usa datos reales por país en vez de conteos
   decorativos. Ver renderOportunidades() en index.html. */
.oport-sub{font-size:15px;color:var(--txt-2);margin-bottom:.6rem}
.oport-wrap{border:1px solid var(--linea-suave);background:var(--linea-suave)}
.oport-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.1rem;background:var(--bg-0)}
.oport-label{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.oport-nav{display:flex;gap:.4rem}
.oport-nav button{
  width:30px;height:30px;border-radius:3px;border:1px solid var(--linea);
  background:var(--bg-1);color:var(--txt-1);font-size:16px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;
}
.oport-nav button:hover{border-color:var(--ambar);color:var(--ambar)}
.oport-track{
  display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;background:var(--linea-suave);
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.oport-track::-webkit-scrollbar{height:6px}
.oport-track::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
.oport-card{
  scroll-snap-align:start;flex:0 0 min(320px,88vw);
  background:var(--bg-0);padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;
}
.oport-badge{
  align-self:flex-start;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ambar-2);border:1px solid var(--linea);border-radius:20px;
  padding:3px 10px;
}
.oport-titulo{font-size:16.5px;font-weight:600;color:var(--txt-0);letter-spacing:-.01em}
.oport-texto{
  font-size:15px;line-height:1.55;color:var(--txt-1);
  max-height:132px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.oport-texto::-webkit-scrollbar{width:5px}
.oport-texto::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
.oport-meta{font-family:var(--mono);font-size:12px;color:var(--txt-2);letter-spacing:.03em}
.oport-meta a{color:var(--txt-2);text-decoration:underline}
.oport-cta{
  margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--ambar);letter-spacing:.02em;text-decoration:none;
  border-bottom:1px solid var(--ambar);padding-bottom:1px;
}
.oport-cta:hover{color:#F2B052;border-color:#F2B052}
.oport-vacio{padding:1.5rem 1.15rem;color:var(--txt-2);font-size:15.5px;background:var(--bg-0);display:flex;align-items:center}

/* Barra de score — instrumento UKKIN */
.score{display:flex;align-items:center;gap:.85rem;padding:9px 0}
.score-l{
  font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-1);
  min-width:88px;flex-shrink:0;white-space:nowrap;
}
.score-track{
  flex:1;height:3px;background:var(--linea);position:relative;border-radius:2px;
}
.score-track::after{
  content:'';position:absolute;left:72%;top:-3px;
  width:1px;height:9px;background:var(--txt-2);opacity:.45;
}
.score-fill{
  position:absolute;left:0;top:0;height:3px;border-radius:2px;
  width:0;transition:width 1s cubic-bezier(.22,1,.36,1);
}
.score-n{
  font-family:var(--mono);font-size:16px;font-weight:600;
  width:26px;text-align:right;flex-shrink:0;
}
.f-alto{background:var(--verde)} .n-alto{color:var(--verde)}
.f-medio{background:var(--ambar)} .n-medio{color:var(--ambar)}
.f-bajo{background:var(--rojo)} .n-bajo{color:var(--rojo)}

/* Etiqueta */
.tag{
  display:inline-block;font-family:var(--mono);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;
  border-radius:2px;
}
.tag-rojo{color:var(--rojo)}
.tag-ambar{color:var(--ambar)}
.tag-verde{color:var(--verde)}

/* ============================================================
   TABLAS
   ============================================================ */
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--linea-suave)}
tbody tr:hover{background:var(--bg-1)}
td.num{font-family:var(--mono);text-align:right;font-size:16px}
.sec-luz thead th{color:var(--luz-txt-2);border-bottom-color:var(--luz-linea)}
.sec-luz tbody td{border-bottom-color:var(--luz-linea)}
.sec-luz tbody tr:hover{background:var(--luz-1)}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.field{margin-bottom:1rem}
.field label{
  display:block;font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
  margin-bottom:6px;
}
.input,select.input,textarea.input{
  width:100%;padding:11px 13px;
  background:var(--bg-1);border:1px solid var(--linea);
  border-radius:3px;font-size:15px;color:var(--txt-0);
  transition:border-color .15s;
}
.input:focus{outline:none;border-color:var(--ambar)}
.input::placeholder{color:var(--txt-2)}
.sec-luz .input{background:#fff;border-color:var(--luz-linea);color:var(--luz-txt)}
.sec-luz .field label{color:var(--luz-txt-2)}

/* ============================================================
   PIE
   ============================================================ */
.foot{
  border-top:1px solid var(--linea-suave);
  padding:2.75rem 0 2rem;font-size:14.5px;color:var(--txt-2);
}
.foot-grid{
  display:grid;gap:2rem;
  grid-template-columns:1.4fr repeat(3,1fr);
  margin-bottom:2.25rem;
}
@media(max-width:760px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
}
.foot h4{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
  margin-bottom:.85rem;
}
.foot a{display:block;padding:4px 0;color:var(--txt-1);transition:color .15s}
.foot a:hover{color:var(--ambar)}
/* Targets táctiles de 48px sin ampliar el ancho clicable — corrige
   "touch adjustment" del navegador (Chromium touch_adjustment.cc /
   WebKit nodeRespondingToClickEvents) robando el toque hacia el link
   vecino cuando los targets son <48px y están pegados entre sí. Bug
   reportado por el usuario 13-sep-2026 (footer, Edge y Safari móvil).
   inline-flex (no flex) en el anchor: mantiene el ancho clicable
   limitado al contenido real, nunca toda la columna. El padre en
   flex-direction:column preserva el apilamiento vertical que antes
   dependía de que el anchor fuera display:block. Solo aplica a
   pointer:coarse — desktop con mouse real queda intacto. */
@media (pointer:coarse){
  .foot-grid > div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .foot a{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    padding:6px 0;
    margin-bottom:2px;
    max-width:100%;
  }
  .foot h4{margin-bottom:14px}
}

.foot-base{
  border-top:1px solid var(--linea-suave);padding-top:1.5rem;
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-size:15.5px;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.mono{font-family:var(--mono)}
.center{text-align:center}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem}
.mt-3{margin-top:1.75rem} .mt-4{margin-top:2.75rem}
.row{display:flex;gap:.65rem;flex-wrap:wrap}
.hide-sm{display:initial}
@media(max-width:640px){.hide-sm{display:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------- Selector universal país→estado con búsqueda ---------- */
.ubic-selector{display:flex;flex-direction:column;gap:.6rem}
.ubic-paises{display:flex;gap:6px;flex-wrap:wrap}
.ubic-pais-chip{background:none;border:1px solid var(--linea);border-radius:20px;padding:6px 13px;font-size:15.5px;color:var(--txt-1);cursor:pointer;font-family:var(--sans)}
.ubic-pais-chip[aria-pressed="true"]{border-color:var(--ambar);color:var(--ambar);background:rgba(232,163,61,.08)}
.ubic-buscar input{width:100%}
/* Scrollbar delgada en vez de la barra nativa gruesa con flechas —
   mismo bug ya reportado y corregido para .pais-consulta-lista
   (22-ago-2026), pendiente aquí porque .ubic-resultados es el
   componente realmente compartido: lo usan montarBuscadorSimple() y
   montarSelectorUbicacion(), es decir TODOS los buscadores del sitio
   (cultivos, especies, minerales, categoría animal, tipo de servicio,
   frecuencia, país→estado, etc.) — reportado de nuevo por el usuario
   en ukkin_negocios.html, 1-sep-2026, mismo defecto visual, ahora
   corregido de raíz para las tres instancias que comparten esta clase. */
.ubic-resultados{
  display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.ubic-resultados::-webkit-scrollbar{width:6px}
.ubic-resultados::-webkit-scrollbar-track{background:transparent}
.ubic-resultados::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
.ubic-resultados::-webkit-scrollbar-thumb:hover{background:var(--ambar)}
.ubic-resultado{background:var(--bg-1);border:1px solid var(--linea);border-radius:3px;padding:8px 12px;font-size:16px;color:var(--txt-0);cursor:pointer;font-family:var(--sans)}
.ubic-resultado:hover{border-color:var(--ambar)}
.ubic-resultado span{font-family:var(--mono);font-size:13px;color:var(--txt-2);margin-left:4px}
.ubic-vacio{font-size:15.5px;color:var(--txt-2);padding:.5rem 0}
.ubic-aviso-aprox{font-size:14.5px;color:var(--ambar);padding:.3rem 0 .5rem;font-family:var(--mono)}
.ubic-chips{display:flex;flex-wrap:wrap;gap:6px}
.ubic-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(232,163,61,.08);border:1px solid var(--ambar);color:var(--ambar);border-radius:20px;padding:5px 8px 5px 13px;font-size:15.5px;font-family:var(--sans)}
.ubic-chip button{background:none;border:none;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 2px;font-family:var(--sans)}