/* ============================================================
   Gasolina — estilos
   Pensados para un celular en la mano, a veces dentro del coche:
   números grandes, mucho contraste, y el veredicto antes que el
   detalle. Nada que obligue a hacer zoom.
   ============================================================ */

:root {
  --fondo: #0b0f14;
  --tarjeta: #151c25;
  --tarjeta-alta: #1d2733;
  --borde: #263241;
  --texto: #e9eff6;
  --tenue: #8ea0b5;
  --apagado: #5d6e82;

  --verde: #3fb950;
  --verde-tenue: #12341a;
  --rojo: #f85149;
  --rojo-tenue: #3a1513;
  --ambar: #d29922;
  --ambar-tenue: #352506;
  --acento: #4aa3df;

  --r: 16px;
  --sombra: 0 2px 14px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f4f6f9;
    --tarjeta: #ffffff;
    --tarjeta-alta: #eef2f7;
    --borde: #d8e0ea;
    --texto: #16202c;
    --tenue: #5a6b7e;
    --apagado: #8496a9;
    --verde: #1a7f37;
    --verde-tenue: #dcf5e2;
    --rojo: #cf222e;
    --rojo-tenue: #ffe6e4;
    --ambar: #9a6700;
    --ambar-tenue: #fff3d4;
    --acento: #0969da;
    --sombra: 0 1px 8px rgba(20, 35, 55, .1);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

body {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 14px calc(84px + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* --- Encabezado ------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 2px 10px;
  background: linear-gradient(var(--fondo) 72%, transparent);
}
header .logo { font-size: 22px; }
header h1 { font-size: 19px; flex: 1; }
header .frescura {
  font-size: 11.5px; color: var(--tenue); text-align: right;
  line-height: 1.25; max-width: 128px;
}
header .frescura b { color: var(--texto); font-weight: 600; }

/* --- Selector de combustible ------------------------------ */
.segmentos {
  display: flex; gap: 4px; padding: 4px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 13px; margin-bottom: 14px;
}
.segmentos button {
  flex: 1; padding: 9px 4px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tenue);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.segmentos button[aria-pressed="true"] { background: var(--tarjeta-alta); color: var(--texto); }

/* --- Tarjeta de veredicto --------------------------------- */
.veredicto {
  border-radius: var(--r); padding: 16px; margin-bottom: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}
.veredicto.si { border-color: color-mix(in srgb, var(--verde) 45%, var(--borde)); background: linear-gradient(var(--verde-tenue), var(--tarjeta) 55%); }
.veredicto.no { border-color: color-mix(in srgb, var(--rojo) 32%, var(--borde)); background: linear-gradient(var(--rojo-tenue), var(--tarjeta) 55%); }
.veredicto.ojo { border-color: color-mix(in srgb, var(--ambar) 38%, var(--borde)); background: linear-gradient(var(--ambar-tenue), var(--tarjeta) 55%); }

.titular {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .055em; margin-bottom: 11px;
}
.veredicto.si .titular { color: var(--verde); }
.veredicto.no .titular { color: var(--rojo); }
.veredicto.ojo .titular { color: var(--ambar); }

.estacion { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.estacion .nombre { font-size: 25px; font-weight: 680; letter-spacing: -.022em; line-height: 1.15; }
.estacion .marca {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tenue); border: 1px solid var(--borde); border-radius: 999px; padding: 2px 8px;
}

.precio {
  font-size: 46px; font-weight: 720; letter-spacing: -.04em;
  line-height: 1.02; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.precio span { font-size: 17px; font-weight: 500; color: var(--tenue); letter-spacing: 0; }

/* Lo que de verdad sales pagando */
.montos {
  display: flex; gap: 8px; margin: 13px 0 11px;
}
.monto {
  flex: 1; background: var(--tarjeta-alta); border-radius: 11px;
  padding: 9px 11px; border: 1px solid var(--borde);
}
.monto .etq { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.monto .val { font-size: 21px; font-weight: 680; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

.explica { font-size: 14px; color: var(--tenue); margin: 10px 0 0; }
.explica b { color: var(--texto); font-weight: 620; }

.ahorro {
  display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.ahorro.mas { background: var(--verde-tenue); color: var(--verde); }
.ahorro.menos { background: var(--rojo-tenue); color: var(--rojo); }

/* --- Botones ---------------------------------------------- */
.acciones { display: flex; gap: 8px; margin-top: 14px; }
.btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--tarjeta-alta); color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 620; cursor: pointer;
  text-decoration: none; transition: filter .15s;
}
.btn:active { filter: brightness(1.25); }
.btn.fuerte { background: var(--verde); color: #04140a; border-color: transparent; }
@media (prefers-color-scheme: light) { .btn.fuerte { color: #fff; } }
.btn.sutil { background: transparent; color: var(--tenue); }

/* --- Secciones y listas ----------------------------------- */
.seccion { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.seccion h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 680; }
.seccion .raya { flex: 1; height: 1px; background: var(--borde); }

.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 13px; margin-bottom: 8px;
  text-decoration: none; color: inherit;
}
.fila .izq { flex: 1; min-width: 0; }
.fila .nom { font-weight: 620; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .sub { font-size: 12.5px; color: var(--tenue); margin-top: 1px; }
.fila .der { text-align: right; }
.fila .p { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fila .n { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fila .n.mas { color: var(--verde); }
.fila .n.menos { color: var(--rojo); }

/* --- Semáforo de confianza -------------------------------- */
.conf {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--tenue);
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); flex: none; }
.punto.alta { background: var(--verde); }
.punto.media { background: var(--ambar); }
.punto.baja { background: var(--rojo); }

/* --- Formularios ------------------------------------------ */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 6px; font-weight: 560; }
.campo .pista { font-size: 12px; color: var(--apagado); margin-top: 5px; line-height: 1.4; }
input[type="number"], input[type="text"], select {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 16px;
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.dos { display: flex; gap: 10px; }
.dos > * { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--tenue);
  font: inherit; font-size: 13.5px; font-weight: 580; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--acento); border-color: transparent; color: #fff; }

/* --- Barra de navegación ---------------------------------- */
nav.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; gap: 2px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
}
nav.barra button {
  flex: 1; max-width: 160px; border: 0; background: transparent; cursor: pointer;
  color: var(--apagado); font: inherit; font-size: 10.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; border-radius: 11px;
}
nav.barra button .ic { font-size: 19px; line-height: 1; }
nav.barra button[aria-current="page"] { color: var(--acento); }

/* --- Avisos y estados ------------------------------------- */
.aviso {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--ambar-tenue); border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
  font-size: 13.5px; color: var(--texto); margin-bottom: 12px; line-height: 1.4;
}
.aviso.malo { background: var(--rojo-tenue); border-color: color-mix(in srgb, var(--rojo) 32%, transparent); }

.vacio { text-align: center; padding: 44px 20px; color: var(--tenue); }
.vacio .ic { font-size: 40px; display: block; margin-bottom: 12px; opacity: .65; }

.cargando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 42px; color: var(--tenue); font-size: 14.5px; }
.giro {
  width: 17px; height: 17px; border: 2px solid var(--borde);
  border-top-color: var(--acento); border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.esqueleto { background: var(--tarjeta); border-radius: var(--r); height: 230px; animation: late 1.3s ease-in-out infinite; }
@keyframes late { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }

.pie { text-align: center; font-size: 11.5px; color: var(--apagado); margin: 26px 0 8px; line-height: 1.6; }

.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}