/* Cargá Barato · estilos propios. La base (colores, letra, botones) viene de zojim-ui.css. */

/* Color de Cargá Barato: fucsia (llama la atención como un cartel de oferta; se distingue de todas las apps en el lanzador). */
[data-app="cargabarato"] {
  --z-app-1: #f0abfc;
  --z-app-2: #e879f9;
  --z-app-tinta: #2a0430;
  --cb-acento: #f0abfc;           /* fucsia claro para textos sobre negro (contraste 12:1) */
  --cb-bajo: #7ee2a8;             /* verde: bajó */
  --cb-alerta: #f5cb6e;           /* amarillo: dato que puede estar viejo */
}
/* Por si zojim-ui.css no carga (sin internet la primera vez) */
html { font-size: 112.5%; }
body { margin: 0; background: #09090a; color: #f5f3ee; font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }

.contenedor { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }
main { padding-top: 12px; padding-bottom: 32px; outline: none; }
[hidden] { display: none !important; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 1000; background: rgba(9, 9, 10, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--z-borde, rgba(255,255,255,.12)); padding-top: env(safe-area-inset-top); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--z-texto, #f5f3ee) !important; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; }
.marca img { width: 44px; height: 44px; border-radius: 22%; box-shadow: 0 10px 26px -12px #e879f9; }
.btn-mis { min-height: 48px; padding: 8px 16px; font-size: 1rem; white-space: nowrap; text-decoration: none; }
.btn-mis[aria-current="page"] { border-color: var(--cb-acento); color: var(--cb-acento); }
@media (max-width: 380px) { .marca span { font-size: 1.1rem; } .btn-mis { padding: 8px 12px; } }

/* Portada */
.portada { margin: 12px 0 18px; }
.titulo { margin: 4px 0 8px; font-size: clamp(1.9rem, 7vw, 2.8rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
.titulo em { font-family: var(--z-serif, Georgia, serif); font-style: italic; font-weight: 400; background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.bajada { margin: 0; color: var(--z-texto-2, #d4d0c8); font-size: var(--z-t-medio, 1.11rem); max-width: 40rem; }
.volver { display: flex; width: fit-content; margin: 0 0 8px -4px; padding-left: 4px; text-decoration: none; }
.cargando { display: flex; align-items: center; gap: 12px; padding: 20px 0; color: var(--z-texto-2, #d4d0c8); }

/* Combustibles: botones grandes, todos a la vista */
.combustibles { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.combustibles legend { padding: 0; margin-bottom: 8px; }
.combustibles-botones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.combustibles-botones .combustible:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .combustibles-botones { grid-template-columns: repeat(5, 1fr); } .combustibles-botones .combustible:last-child { grid-column: auto; } }
.combustible { min-height: 56px; padding: 8px 10px; border-radius: 999px; border: 2px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); background: rgba(255,255,255,.04); color: var(--z-texto, #f5f3ee); font: 600 1.05rem/1.15 var(--z-sans, sans-serif); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.combustible:hover { background: rgba(255,255,255,.08); }
.combustible[aria-pressed="true"] { border-color: var(--cb-acento); background: rgba(240, 171, 252, .14); color: #fff; box-shadow: inset 0 0 0 1px var(--cb-acento); }
.combustible[aria-pressed="true"]::before { content: "✓ "; color: var(--cb-acento); }

/* Buscar */
.buscar { display: grid; gap: 10px; margin-bottom: 16px; }
.nota-ubicacion { margin: 0 0 4px; color: var(--z-texto-2, #d4d0c8); font-size: 1rem; }
.zona { margin-bottom: 16px; }
.zona-titulo { margin: 0 0 12px; font-size: var(--z-t-h3, 1.33rem); }
.zona .z-campo { margin-bottom: 14px; }
.zona select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f5f3ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 22px; }

/* Mendoza de un toque */
.mendoza { margin: 8px 0 24px; }
.mendoza-titulo { margin: 0 0 8px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 48px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); background: transparent; color: var(--z-texto, #f5f3ee); font: 500 1rem/1.2 var(--z-sans, sans-serif); cursor: pointer; }
.chip:hover { border-color: var(--cb-acento); color: var(--cb-acento); }

/* Resultados */
.resultados { margin: 8px 0 24px; scroll-margin-top: 90px; outline: none; }
.res-titulo { margin: 0 0 4px; font-size: var(--z-t-h3, 1.33rem); line-height: 1.25; }
.res-resumen { margin: 0 0 14px; color: var(--z-texto-2, #d4d0c8); }
.res-resumen b { color: var(--z-texto, #f5f3ee); }
.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px; border: 2px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); border-radius: 999px; padding: 4px; }
.vistas button { min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--z-texto, #f5f3ee); font: 600 1.05rem var(--z-sans, sans-serif); cursor: pointer; }
.vistas button[aria-pressed="true"] { background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); color: var(--z-app-tinta); }
.actualizado { margin: 12px 0 0; color: var(--z-texto-3, #aaa69e); font-size: var(--z-t-chico, .875rem); }

.lista-est { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.est { position: relative; padding: 20px 20px 18px !important; }
.est-primera { border-color: rgba(240, 171, 252, .55) !important; box-shadow: 0 0 0 1px rgba(240, 171, 252, .25), 0 20px 50px -30px #e879f9 !important; }
.est-etiqueta { display: inline-block; margin: 0 0 6px; padding: 2px 12px; border-radius: 999px; background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); color: var(--z-app-tinta); font-weight: 700; font-size: .95rem; }
.est-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.est-precio { margin: 0; font-size: clamp(2.1rem, 9vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.est-precio .unidad { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--z-texto-2, #d4d0c8); }
.est-km { margin: 0; font-weight: 700; color: var(--cb-acento); font-size: 1.1rem; }
.est-nombre { margin: 8px 0 0; font-size: 1.1rem; font-weight: 600; line-height: 1.4; }
.bandera { display: inline-block; padding: 1px 10px; margin-right: 4px; border-radius: 8px; border: 1px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); background: rgba(255,255,255,.06); font-weight: 700; font-size: .95em; }
.est-lugar { margin: 2px 0 0; color: var(--z-texto-2, #d4d0c8); }
.empresa { font-size: .95em; }
.est-fecha { margin: 6px 0 0; color: var(--z-texto-2, #d4d0c8); }
.fecha-vieja { color: var(--cb-alerta); }
.est-ahorro { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(126, 226, 168, .1); border: 1px solid rgba(126, 226, 168, .35); }
.est-ahorro b { color: var(--cb-bajo); }
.est-botones { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.est-botones .z-btn { flex: 1 1 10rem; text-decoration: none; }
.btn-llegar { border-color: var(--cb-acento) !important; color: var(--cb-acento) !important; }
.btn-guardar[aria-pressed="true"] { color: var(--z-dorado, #d6b264); border-color: var(--z-dorado, #d6b264); }
.cambio { display: inline-block; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px; font-weight: 700; }
.cambio-baja { background: rgba(126, 226, 168, .14); color: var(--cb-bajo); }
.cambio-sube { background: rgba(245, 203, 110, .14); color: var(--cb-alerta); }

/* Estaciones que no informan */
.sin-precio { margin-top: 16px; padding: 4px 20px !important; }
.sin-precio summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style-position: inside; }
.sin-precio summary::-webkit-details-marker { color: var(--cb-acento); }
.sin-precio ul { list-style: none; margin: 8px 0 12px; padding: 0; }
.sin-precio li { padding: 12px 0; border-top: 1px solid var(--z-borde, rgba(255,255,255,.12)); }
.sin-precio li p { margin: 0; }
.sin-detalle { color: var(--z-texto-2, #d4d0c8); }
.sin-precio .z-btn-texto { padding-left: 0; }

/* Mapa */
.mapa { height: min(62vh, 520px); min-height: 340px; border-radius: 20px; overflow: hidden; border: 1px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); margin-bottom: 14px; background: #1b1b1d; }
.leaflet-container { font-family: var(--z-sans, sans-serif); font-size: 1rem; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 26px !important; color: #111 !important; text-decoration: none !important; }
.leaflet-control-attribution a { color: #0e5f73 !important; }
.leaflet-control-attribution { font-size: 12px; }
.pin-caja { background: none; border: 0; }
.pin { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; padding: 4px 10px; border-radius: 12px; background: #09090a; color: #fff; border: 2px solid #fff; font: 700 15px/1.2 var(--z-sans, sans-serif); box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: pointer; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.pin-1 { background: #f0abfc; color: #2a0430; border-color: #2a0430; font-size: 17px; }
.pin-1::after { border-top-color: #2a0430; }
.pin-sin { padding: 0 6px; background: #3a3a3d; color: #ddd; border-color: #888; font-size: 12px; opacity: .9; }
.pin-sin::after { border-top-color: #888; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 14px 16px; color: #111; font-size: 16px; line-height: 1.4; }
.globo p { margin: 0 0 4px; }
.globo-precio { font-size: 22px; font-weight: 800; }
.globo-precio span { font-size: 14px; font-weight: 500; }
.globo-llegar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 16px; border-radius: 999px; background: #2a0430; color: #fff !important; font-weight: 700; text-decoration: none; }

/* Mis estaciones, avisos y cuenta */
.bloque { margin: 16px 0; }
.bloque h2 { margin: 0 0 10px; font-size: var(--z-t-h3, 1.33rem); }
.historial { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--z-borde, rgba(255,255,255,.12)); }
.grafico { width: 100%; height: auto; max-height: 200px; background: rgba(255,255,255,.03); border-radius: 12px; }
.campo-litros { max-width: 12rem; }
.cuenta-numero { margin: 4px 0; font-size: 2.2rem; font-weight: 700; color: var(--cb-bajo); }
.cuenta-numero span { font-size: 1.1rem; font-weight: 500; color: var(--z-texto-2, #d4d0c8); }

/* Pro */
.pro-precio { margin: 0 0 6px; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; }
.pro-precio span { font-size: 1.1rem; font-weight: 500; color: var(--z-texto-2, #d4d0c8); letter-spacing: 0; }
.sellos { margin: 10px 0 4px; font-weight: 600; color: var(--z-texto-2, #d4d0c8); text-align: center; }
.clave { font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; word-break: break-all; }
.z-tarjeta .z-btn-ancho { margin-top: 8px; }
.links-legales { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 20px 0; }
.links-legales a { display: inline-flex; align-items: center; min-height: 48px; color: var(--z-texto-2, #d4d0c8); }
.portada .z-aviso { margin: 8px 0 14px; }

/* Instalar */
.pasos { margin: 16px 0; padding-left: 1.4rem; display: grid; gap: 14px; font-size: 1.1rem; }

/* Aviso legal de los precios */
.aviso-precios { margin-top: 32px; }
.aviso-precios p { margin: 0 0 10px; }
.aviso-precios a { color: var(--z-texto, #f5f3ee); }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.aviso-botones .z-btn { text-decoration: none; }

/* Mensajes y "sin internet" */
.aviso-red { margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; border: 2px solid rgba(245, 203, 110, .7); background: rgba(245, 203, 110, .1); font-weight: 600; }
.mensaje { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2000; width: min(92vw, 34rem); box-sizing: border-box; padding: 16px 20px; border-radius: 18px; background: #f5f3ee; color: #09090a; font-weight: 700; font-size: 1.05rem; box-shadow: 0 20px 50px -10px rgba(0,0,0,.8); }
.mensaje-error { background: #f8a59b; color: #1a0503; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .cabecera, .mensaje, .buscar, .combustibles, .mendoza { display: none !important; } }

/* Páginas de texto (Sobre los precios, Condiciones) */
.pagina h2 { margin: 28px 0 8px; font-size: var(--z-t-h3, 1.33rem); line-height: 1.25; }
.pagina p, .pagina li { max-width: 42rem; }
.pagina ul { padding-left: 1.3rem; display: grid; gap: 8px; }
.pagina a:not(.z-btn) { color: var(--cb-acento); }

/* Los enlaces con forma de botón de la app: letra oscura sobre el fucsia (si no, el color de enlace la pinta clara) */
a.z-btn-app, a.z-btn-app:hover, a.z-btn-app:visited { color: var(--z-app-tinta) !important; text-decoration: none; }