/* =========================================================
   CarburApp — hoja de estilos única
   Tokens en :root, modo oscuro automático y respetando el
   conmutador del sistema. Sin dependencias externas salvo
   la tipografía de titulares.
   ========================================================= */

:root {
  color-scheme: light;

  --fondo:      #f7f6f3;   /* papel cálido, no gris clínico */
  --panel:      #ffffff;
  --panel-2:    #f1efe9;
  --borde:      #e3e0d8;
  --borde-2:    #d3cfc4;

  --tinta:      #111a24;
  --tinta-2:    #4d5560;
  --tinta-3:    #646c77;

  --marca:      #0f4c81;
  --marca-2:    #1668ab;
  --marca-suave:#e6eef6;

  --acento:     #e2562a;   /* naranja de señal: precios, llamadas a la acción */
  --acento-2:   #ffb08a;
  --acento-suave:#fcece5;

  --barato:     #0e7a4f;
  --barato-suave:#e3f3ec;
  --caro:       #b4402a;

  /* Series de las gráficas (validadas para daltonismo) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  --sombra-1: 0 1px 2px rgba(17,26,36,.06), 0 2px 8px rgba(17,26,36,.04);
  --sombra-2: 0 2px 4px rgba(17,26,36,.06), 0 12px 28px rgba(17,26,36,.09);

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", var(--fuente);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo:      #11151b;
    --panel:      #1a1f27;
    --panel-2:    #232933;
    --borde:      #2d343f;
    --borde-2:    #3b434f;

    --tinta:      #f3f4f6;
    --tinta-2:    #b9c0ca;
    --tinta-3:    #868e99;

    --marca:      #6aa9e0;
    --marca-2:    #8cc0ee;
    --marca-suave:#1b2a38;

    --acento:     #ff7a4d;
    --acento-2:   #b8532f;
    --acento-suave:#2e1d16;

    --barato:     #35b07b;
    --barato-suave:#14291f;
    --caro:       #e08055;

    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;

    --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
    --sombra-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.62 var(--fuente);
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marca-2); }

::selection { background: var(--acento); color: #fff; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 12px; top: 12px; z-index: 50; background: var(--marca); color: #fff;
  padding: 10px 16px; border-radius: var(--r-s); text-decoration: none;
}

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* ---------------- Cabecera ---------------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; max-width: 1120px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); flex: 0 0 auto; }
.logo-icono {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--marca-2), var(--marca));
  display: grid; place-items: center;
}
.logo-icono svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; }
.logo-marca { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.025em; }

.nav-principal { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav-principal a {
  color: var(--tinta-2); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-principal a:hover { background: var(--panel-2); color: var(--tinta); }

/* ---------------- Buscador ---------------- */
.buscador { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 150px; }
.buscador-caja { position: relative; display: flex; align-items: center; }
.buscador-caja svg {
  position: absolute; left: 13px; width: 16px; height: 16px; pointer-events: none;
  stroke: var(--tinta-3); fill: none; stroke-width: 2;
}
.buscador input {
  width: 100%; font: inherit; font-size: .93rem; color: var(--tinta);
  padding: 9px 14px 9px 37px;
  background: var(--panel); border: 1px solid var(--borde-2); border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.buscador input::placeholder { color: var(--tinta-3); }
.buscador input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent);
}

.sugerencias {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-m);
  box-shadow: var(--sombra-2); overflow: hidden; max-height: 68vh; overflow-y: auto;
}
.sugerencias[hidden] { display: none; }
.sug-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
             color: var(--tinta-3); padding: 10px 14px 5px; font-weight: 600; }
.sug-item {
  display: block; padding: 8px 14px; text-decoration: none; color: var(--tinta);
  border-left: 3px solid transparent;
}
.sug-item:hover, .sug-item.activo { background: var(--marca-suave); border-left-color: var(--marca); }
.sug-texto { display: block; font-size: .92rem; font-weight: 500; line-height: 1.35; }
.sug-detalle { display: block; font-size: .8rem; color: var(--tinta-3); }
.sug-vacio { padding: 14px; font-size: .9rem; color: var(--tinta-3); }

/* ---------------- Portada ---------------- */
.hero {
  margin: 0 0 8px; padding: 46px 0 40px;
  background:
    radial-gradient(1100px 400px at 12% -10%, color-mix(in srgb, var(--marca) 24%, transparent), transparent 62%),
    radial-gradient(800px 340px at 92% 0%, color-mix(in srgb, var(--acento) 15%, transparent), transparent 60%),
    var(--panel-2);
  border-bottom: 1px solid var(--borde);
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem); line-height: 1.08;
  letter-spacing: -.035em; margin: 0 0 14px; max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--marca); }
.hero p { font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--tinta-2); max-width: 56ch; margin: 0 0 24px; }

.buscador-hero { max-width: 560px; }
.buscador-hero input { padding: 15px 18px 15px 46px; font-size: 1.02rem; border-radius: var(--r-m); }
.buscador-hero .buscador-caja svg { left: 17px; width: 19px; height: 19px; }
.buscador-hero .sugerencias { border-radius: var(--r-m); }

.hero-pistas { margin-top: 12px; font-size: .86rem; color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.hero-pistas a {
  color: var(--tinta-2); text-decoration: none; background: var(--panel);
  border: 1px solid var(--borde); padding: 3px 10px; border-radius: 999px; font-size: .82rem;
}
.hero-pistas a:hover { border-color: var(--marca); color: var(--marca); }

/* ---------------- Tipografía ---------------- */
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; }
main h1 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.15rem); line-height: 1.18; margin: 22px 0 10px; }
h2 { font-size: 1.36rem; margin: 42px 0 14px; }
h3 { font-size: 1.06rem; margin: 26px 0 8px; }

.entradilla { color: var(--tinta-2); font-size: 1.04rem; margin: 0 0 8px; max-width: 72ch; }
.actualizado { color: var(--tinta-3); font-size: .86rem; margin: 0 0 26px; }
.actualizado::before { content: "●"; color: var(--barato); font-size: .6rem; vertical-align: 2px; margin-right: 6px; }

.vacio {
  color: var(--tinta-3); background: var(--panel-2); border: 1px dashed var(--borde-2);
  border-radius: var(--r-m); padding: 18px; font-size: .93rem;
}

/* ---------------- Migas ---------------- */
.migas { font-size: .84rem; margin: 16px 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; color: var(--tinta-3); margin-right: 7px; }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--marca); text-decoration: underline; }
.migas span { color: var(--tinta-3); }

/* ---------------- Tarjetas de cifra ---------------- */
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin: 24px 0 8px; }
.cifra {
  position: relative; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 16px 18px 15px; box-shadow: var(--sombra-1);
  overflow: hidden; transition: transform .16s ease, box-shadow .16s ease;
}
.cifra::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--marca), var(--acento));
  opacity: .85;
}
.cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.cifra-etiq { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 6px; font-weight: 600; }
.cifra-valor { font-family: var(--display); font-size: 1.62rem; font-weight: 700; letter-spacing: -.03em; margin: 0; font-variant-numeric: tabular-nums; }
.cifra-nota { font-size: .83rem; color: var(--tinta-2); margin: 5px 0 0; }
.sube { color: var(--caro); font-weight: 600; } .baja { color: var(--barato); font-weight: 600; }

/* ---------------- Tablas ---------------- */
.tabla-envoltorio {
  overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-m);
  background: var(--panel); box-shadow: var(--sombra-1);
}
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
caption { text-align: left; padding: 14px 16px 2px; color: var(--tinta-2); font-size: .86rem; }
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--borde); }
thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
  font-weight: 700; white-space: nowrap; background: var(--panel-2);
  position: sticky; top: 0;
}
tbody tr { transition: background .12s; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

.mejor { color: var(--barato); font-weight: 700; }
.destacada td { background: var(--barato-suave); }
.destacada td:first-child { box-shadow: inset 3px 0 0 var(--barato); }
.pos { color: var(--tinta-3); font-variant-numeric: tabular-nums; width: 2.6rem; font-size: .85rem; }
tbody tr:nth-child(1) .pos, tbody tr:nth-child(2) .pos, tbody tr:nth-child(3) .pos {
  color: var(--tinta); font-weight: 700;
}

.barra { display: inline-block; width: 92px; height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.barra-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--s1), var(--marca-2)); }

/* ---------------- Gráficas ---------------- */
.figura {
  margin: 18px 0 8px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 16px; box-shadow: var(--sombra-1);
}
.figura figcaption { font-size: .85rem; color: var(--tinta-2); margin-top: 10px; line-height: 1.5; }
.grafica { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-eje { fill: var(--tinta-3); font-size: 11px; font-family: var(--fuente); }
.g-etiq { fill: var(--tinta-2); font-size: 11px; font-weight: 600; font-family: var(--fuente); }
.g-etiq-val { fill: var(--tinta-3); font-weight: 400; }
.g-linea { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.g-banda { fill: var(--s1); opacity: .11; stroke: none; }
.g-s1 { stroke: var(--s1); } circle.g-s1 { fill: var(--s1); stroke: var(--panel); stroke-width: 2; }
.g-s2 { stroke: var(--s2); } circle.g-s2 { fill: var(--s2); stroke: var(--panel); stroke-width: 2; }
.g-s3 { stroke: var(--s3); } circle.g-s3 { fill: var(--s3); stroke: var(--panel); stroke-width: 2; }

details { margin-top: 14px; }
summary { cursor: pointer; font-size: .9rem; color: var(--marca); font-weight: 500; }

/* ---------------- Listas de enlaces ---------------- */
.rejilla-enlaces {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 18px; padding: 0; margin: 14px 0; list-style: none;
}
.rejilla-enlaces li { font-size: .93rem; padding: 5px 0; border-bottom: 1px solid transparent; }
.rejilla-enlaces a { text-decoration: none; }
.rejilla-enlaces a:hover { text-decoration: underline; }
.rejilla-enlaces .cuenta { color: var(--tinta-3); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------------- Píldoras y avisos ---------------- */
.etiqueta {
  display: inline-block; font-size: .73rem; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--tinta-2); margin-right: 5px;
  white-space: nowrap; font-weight: 500; border: 1px solid var(--borde);
}
.etiqueta-alta { background: var(--barato-suave); color: var(--barato); border-color: transparent; font-weight: 600; }

.aviso {
  background: var(--marca-suave); border: 1px solid transparent;
  border-left: 3px solid var(--marca); padding: 15px 18px;
  border-radius: 0 var(--r-m) var(--r-m) 0; font-size: .93rem; margin: 26px 0;
}
.aviso a { font-weight: 600; }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 26px; margin: 18px 0; }
.ficha dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-top: 15px; font-weight: 600; }
.ficha dd { margin: 3px 0 0; font-size: .97rem; }

.prosa { max-width: 72ch; }
.prosa p, .prosa li { color: var(--tinta-2); }
.prosa strong { color: var(--tinta); }

/* ---------------- Resultados de búsqueda ---------------- */
.resultados { display: grid; gap: 10px; margin: 14px 0 32px; padding: 0; list-style: none; }
.resultado {
  display: flex; align-items: center; gap: 14px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--r-m); padding: 13px 16px;
  text-decoration: none; color: inherit; box-shadow: var(--sombra-1);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.resultado:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--marca); }
.resultado-cuerpo { flex: 1 1 auto; min-width: 0; }
.resultado-titulo { font-weight: 600; font-size: .98rem; display: block; }
.resultado-detalle { font-size: .85rem; color: var(--tinta-3); display: block; }
.resultado-precio {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap;
}
.resultado-icono {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca); font-size: .95rem;
}

/* ---------------- Pie ---------------- */
.pie {
  margin-top: 64px; border-top: 1px solid var(--borde); background: var(--panel-2);
  padding: 32px 0 36px; font-size: .87rem; color: var(--tinta-2);
}
.pie-fuentes, .pie-aviso { max-width: 82ch; margin: 0 0 11px; }
.pie-aviso { color: var(--tinta-3); }
.pie-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 12px; }
.pie-nav a { text-decoration: none; font-weight: 500; }
.pie-nav a:hover { text-decoration: underline; }
.pie-copy { color: var(--tinta-3); margin: 0; }

/* ---------------- Móvil ---------------- */
@media (max-width: 860px) {
  .cabecera-fila { flex-wrap: wrap; row-gap: 10px; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .nav-principal { margin-left: auto; }
}
@media (max-width: 640px) {
  th, td { padding: 10px 12px; }
  .barra { display: none; }
  .hero { padding: 32px 0 30px; }
  h2 { margin-top: 34px; }
  .nav-principal a { padding: 6px 9px; font-size: .85rem; }
}

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

/* ---------------- Cómo llegar ---------------- */
.icono-mapa {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--marca-suave); color: var(--marca);
  border: 1px solid transparent; transition: background .14s, transform .14s, border-color .14s;
}
.icono-mapa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.icono-mapa:hover { background: var(--marca); color: #fff; transform: scale(1.08); }
td .icono-mapa { vertical-align: middle; }

.btn-mapa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; text-decoration: none;
  background: var(--marca); color: #fff; font-weight: 600; font-size: .94rem;
  box-shadow: var(--sombra-1); transition: background .14s, transform .14s, box-shadow .14s;
}
.btn-mapa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.btn-mapa:hover { background: var(--marca-2); color: #fff; transform: translateY(-1px); box-shadow: var(--sombra-2); }

/* Fila de acciones bajo el título de una ficha */
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 6px; }
.acciones .dato-suelto { font-size: .9rem; color: var(--tinta-2); }

/* El icono va pegado al nombre, no en una columna al final: en una tabla
   ancha esa última columna se sale del área visible justo en el móvil, que es
   donde más falta hace. */
.celda-nombre { white-space: nowrap; }
.celda-nombre a:first-child { margin-right: 6px; }
.celda-nombre .icono-mapa { width: 26px; height: 26px; vertical-align: -7px; }
.celda-nombre .icono-mapa svg { width: 14px; height: 14px; }

/* Texto solo para lectores de pantalla */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Aviso de instalación ---------------- */
.instalar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
  background: var(--panel); border: 1px solid var(--borde-2);
  border-radius: var(--r-m); box-shadow: var(--sombra-2);
  animation: subir .28s ease-out;
}
.instalar[hidden] { display: none; }
@keyframes subir { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.instalar-fila { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 640px; }
.instalar-icono { flex: 0 0 auto; display: grid; place-items: center; }
.instalar-icono img { border-radius: 9px; display: block; }
.instalar-texto { margin: 0; font-size: .88rem; line-height: 1.4; flex: 1 1 auto; min-width: 0; }
.instalar-texto strong { display: block; font-size: .95rem; }
.instalar-texto span { color: var(--tinta-2); }

.instalar-boton {
  flex: 0 0 auto; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--marca); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px;
  transition: background .14s;
}
.instalar-boton:hover { background: var(--marca-2); }
.instalar-boton[hidden] { display: none; }

.instalar-cerrar {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; font-size: 1.5rem;
  line-height: 1; color: var(--tinta-3); padding: 2px 4px; border-radius: 6px;
}
.instalar-cerrar:hover { color: var(--tinta); }

/* En modo aplicación instalada no hace falta el pie legal completo ni el aviso */
@media (display-mode: standalone) {
  .instalar { display: none; }
  .pie { margin-top: 40px; }
}

@media (max-width: 520px) {
  .instalar-fila { padding: 11px 12px; gap: 10px; }
  .instalar-texto { font-size: .82rem; }
}

/* Aviso de datos desfasados en una zona concreta */
.aviso-atencion {
  background: var(--acento-suave);
  border-left-color: var(--acento);
  color: var(--tinta);
}