/* ── Sistema visual: comprobante fiscal ─────────────────── */

:root{
  --papel:#ffffff;
  --papel-2:#f6f6f4;
  --tinta:#14161a;
  --tinta-2:#5a6068;
  --tinta-3:#878d95;
  --fio:#dcdde0;
  --fio-fuerte:#b9bbbf;
  --carmin:#a4123f;
  --verde:#1b6e4a;
  --ambar:#8a5a00;

  --display:'Archivo',system-ui,sans-serif;
  --cuerpo:'Source Sans 3',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --r:2px;
  --anchura:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 16px/1.55 var(--cuerpo);
  font-feature-settings:"kern" 1;
}
a{color:var(--carmin);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--carmin);outline-offset:2px}

.envoltura{max-width:var(--anchura);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.saltar{position:absolute;left:-999px}
.saltar:focus{left:12px;top:12px;background:var(--tinta);color:#fff;padding:8px 12px;z-index:99}

/* ── Cabecera ─────────────────────────────────────────── */
.tope{border-bottom:1px solid var(--fio)}
.tope-fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px}
.marca{display:flex;align-items:baseline;gap:9px;color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca-sigla{
  font:700 15px/1 var(--display);letter-spacing:.14em;
  border:1.5px solid var(--carmin);color:var(--carmin);
  padding:6px 7px 5px;border-radius:var(--r);
}
.marca-texto{font:600 16px/1 var(--display);letter-spacing:-.01em}
.tope-nav{display:flex;gap:22px;font-size:14.5px}
.tope-nav a{color:var(--tinta-2)}
.tope-nav a:hover{color:var(--carmin)}
@media(max-width:600px){
  .tope-nav{gap:16px;font-size:13.5px}
  .marca-texto{display:none}
}

/* ── Campo fiscal: el elemento firma ──────────────────── */
.campo{
  border:1px solid var(--fio-fuerte);
  border-radius:var(--r);
  background:var(--papel);
  padding:9px 12px 11px;
  position:relative;
}
.campo-rotulo{
  display:block;
  font:600 10.5px/1 var(--display);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-3);
  margin-bottom:5px;
}
.campo-valor{font-size:16px;line-height:1.4;word-break:break-word}
.campo-valor.mono{font-size:15px;letter-spacing:.02em}
.campo-vacio{color:var(--tinta-3)}

/* ── Buscador ─────────────────────────────────────────── */
.busca-bloque{padding:44px 0 34px;border-bottom:1px solid var(--fio)}
.busca-titulo{
  font:700 clamp(26px,4.4vw,38px)/1.12 var(--display);
  letter-spacing:-.02em;margin:0 0 10px;max-width:20ch;
}
.busca-bajada{color:var(--tinta-2);margin:0 0 24px;max-width:62ch;font-size:16.5px}
.busca-forma{display:flex;gap:10px;align-items:stretch;max-width:660px}
.busca-campo{flex:1;padding-bottom:6px}
.busca-input{
  width:100%;border:0;padding:0;background:transparent;
  font:500 20px/1.3 var(--mono);color:var(--tinta);
  letter-spacing:.01em;
}
.busca-input::placeholder{color:var(--tinta-3);font-family:var(--cuerpo);font-weight:400;letter-spacing:0}
.busca-input:focus{outline:0}
.busca-campo:focus-within{border-color:var(--carmin)}
.boton{
  border:1px solid var(--carmin);background:var(--carmin);color:#fff;
  font:600 15px/1 var(--display);letter-spacing:.01em;
  padding:0 24px;border-radius:var(--r);cursor:pointer;
}
.boton:hover{background:#8c0f36;border-color:#8c0f36}
.busca-ayuda{margin:12px 0 0;font-size:14px;color:var(--tinta-2)}
@media(max-width:560px){
  .busca-forma{flex-direction:column}
  .boton{padding:13px 24px}
}

/* ── Resultados ───────────────────────────────────────── */
.seccion{padding:30px 0}
.seccion-tope{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.seccion-titulo{font:600 19px/1.3 var(--display);letter-spacing:-.01em;margin:0}
.conteo{font-size:14px;color:var(--tinta-2)}
.conteo strong{font-family:var(--mono);font-weight:500;color:var(--tinta)}

.lista{border-top:1px solid var(--fio)}
.fila{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;
  padding:15px 0;border-bottom:1px solid var(--fio);align-items:center;
}
.fila-ruc{font:500 14px/1 var(--mono);color:var(--tinta-2);letter-spacing:.04em}
.fila-nombre{font:600 16.5px/1.35 var(--display);letter-spacing:-.005em;margin:3px 0 0}
.fila-nombre a{color:var(--tinta)}
.fila-lugar{font-size:14px;color:var(--tinta-2);margin:3px 0 0}
.fila-marcas{display:flex;gap:6px;flex-wrap:wrap;justify-self:end}
@media(max-width:640px){
  .fila{grid-template-columns:1fr}
  .fila-marcas{justify-self:start;margin-top:6px}
}

/* ── Marcas de estado ─────────────────────────────────── */
.marca-estado{
  font:600 11px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--r);border:1px solid;white-space:nowrap;
}
.tono-ok{color:var(--verde);border-color:#bcd8c9;background:#f2f8f5}
.tono-baja{color:var(--carmin);border-color:#e8c2cf;background:#fdf4f6}
.tono-alerta{color:var(--ambar);border-color:#e5d3ab;background:#fbf7ee}

/* ── Ficha ────────────────────────────────────────────── */
.ficha-tope{padding:32px 0 24px;border-bottom:1px solid var(--fio)}
.migas{font-size:13.5px;color:var(--tinta-3);margin:0 0 14px}
.migas a{color:var(--tinta-2)}
.ficha-nombre{font:700 clamp(22px,3.6vw,31px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 14px;max-width:26ch}
.ficha-marcas{display:flex;gap:8px;flex-wrap:wrap}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin:24px 0}
.rejilla-ancha{grid-column:1/-1}

.copiar{
  position:absolute;top:7px;right:7px;
  border:1px solid var(--fio);background:var(--papel);color:var(--tinta-2);
  font:600 10.5px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--r);cursor:pointer;
}
.copiar:hover{border-color:var(--carmin);color:var(--carmin)}
.copiar[data-hecho]{border-color:var(--verde);color:var(--verde)}

/* ── Filtros ──────────────────────────────────────────── */
.filtros{
  border:1px solid var(--fio);border-radius:var(--r);
  padding:16px;margin:0 0 22px;background:var(--papel-2);
}
.filtros-fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filtro{display:flex;flex-direction:column;gap:5px;min-width:170px}
.filtro label{font:600 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.filtro select{
  border:1px solid var(--fio-fuerte);border-radius:var(--r);background:var(--papel);
  padding:8px 9px;font:400 14.5px/1.2 var(--cuerpo);color:var(--tinta);
}
.boton-2{
  border:1px solid var(--fio-fuerte);background:var(--papel);color:var(--tinta);
  font:600 13.5px/1 var(--display);padding:10px 16px;border-radius:var(--r);cursor:pointer;
}
.boton-2:hover{border-color:var(--carmin);color:var(--carmin);text-decoration:none}

/* ── Avisos y vacíos ──────────────────────────────────── */
.aviso{
  border:1px solid var(--fio-fuerte);border-left:3px solid var(--carmin);
  border-radius:var(--r);padding:14px 16px;margin:0 0 20px;
  font-size:15px;color:var(--tinta-2);background:var(--papel-2);
}
.aviso strong{color:var(--tinta)}
.vacio{padding:44px 0;text-align:center;color:var(--tinta-2)}
.vacio p{margin:0 0 8px}

/* ── Paginación ───────────────────────────────────────── */
.paginas{display:flex;gap:8px;align-items:center;justify-content:center;padding:26px 0;font-size:14px}
.paginas a,.paginas span{
  border:1px solid var(--fio);border-radius:var(--r);padding:8px 13px;
  font-family:var(--mono);color:var(--tinta-2);
}
.paginas a:hover{border-color:var(--carmin);color:var(--carmin);text-decoration:none}
.paginas .actual{border-color:var(--tinta);color:var(--tinta);font-weight:500}

/* ── Prosa (guías y artículos) ────────────────────────── */
.prosa{max-width:68ch;padding:34px 0}
.prosa h1{font:700 clamp(24px,4vw,34px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 14px}
.prosa h2{font:600 21px/1.3 var(--display);letter-spacing:-.01em;margin:32px 0 10px}
.prosa p{margin:0 0 15px}
.prosa ul{margin:0 0 15px;padding-left:20px}
.prosa li{margin-bottom:6px}

/* ── Pie ──────────────────────────────────────────────── */
.pie{border-top:1px solid var(--fio);margin-top:40px;padding:32px 0 34px;background:var(--papel-2)}
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.pie-titulo{font:600 11px/1 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 10px}
.pie-nota{font-size:14px;color:var(--tinta-2);margin:0 0 8px}
.pie-rejilla a{display:block;font-size:14.5px;color:var(--tinta-2);margin-bottom:6px}
.pie-rejilla a:hover{color:var(--carmin)}
.pie-legal{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--fio);
  font-size:13px;color:var(--tinta-3);max-width:78ch;
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Empresas relacionadas ── */
.relacionadas h2{font-size:1rem;font-weight:600;color:var(--texto,#1c2530);margin:1.5rem 0 .6rem;}
.relacionadas h2:first-child{margin-top:0;}
.relacionadas-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.35rem .9rem;}
.relacionadas-lista li{margin:0;}
.relacionadas-lista a{display:block;padding:.4rem .1rem;font-size:.92rem;line-height:1.4;color:var(--enlace,#1c4e80);text-decoration:none;border-bottom:1px solid var(--borde,#e6e9ee);}
.relacionadas-lista a:hover{text-decoration:underline;}
.relacionadas-mas{margin:.8rem 0 0;font-size:.9rem;}