/* ==========================================================================
   BencinasChile.cl · Piel «Tótem» (elegida por Pablo el 30-10-2026 entre tres del laboratorio)
   El letrero de precios de la bencinera, de noche: placas negras y cifras ámbar luminosas.
   Portada: tablero + jueves de ENAP + «¿dónde cargo?». Modo día y noche con [data-theme].
   ========================================================================== */

/* ---------- Componentes comunes ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tablero { background: var(--t-fondo); padding: 20px 0 24px; border-bottom: 1px solid var(--t-borde); }
.tablero-marco {
  max-width: 560px; margin: 0 auto; padding: 18px 18px 14px;
  background: var(--t-panel); border: var(--t-marco-borde); border-radius: var(--t-radio);
  box-shadow: var(--t-sombra); position: relative;
}
.tablero-cabeza {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-tenue);
}
.tablero-titulo { font-size: 22px; line-height: 1.2; margin: 8px 0 14px; color: var(--t-texto); font-weight: 900; }
.tab-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tab-fila {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 10px; background: var(--t-fila); border-radius: var(--t-radio-fila); border: var(--t-fila-borde);
}
.tab-comb {
  display: grid; place-items: center; height: 40px; border-radius: 6px;
  background: var(--t-etiqueta); color: var(--t-etiqueta-texto); font-weight: 900; font-size: 18px; letter-spacing: 0.02em;
}
.tab-nombre { color: var(--t-texto); font-weight: 700; font-size: 15px; }
.tab-cifra {
  font-family: var(--t-fuente-cifra); font-variant-numeric: tabular-nums; font-weight: var(--t-peso-cifra);
  font-size: 34px; line-height: 1; color: var(--t-cifra); text-shadow: var(--t-brillo); white-space: nowrap;
  display: flex; align-items: baseline; gap: 2px;
}
.tab-signo { font-size: 0.55em; opacity: 0.8; }
.tablero-pie { margin-top: 12px; font-size: 13px; color: var(--t-tenue); }
.tablero-pie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.franja-enap {
  display: block; background: var(--f-fondo); color: var(--f-texto); text-decoration: none;
  border-bottom: 1px solid var(--t-borde);
}
.franja-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 12px; padding-bottom: 12px; }
.franja-rotulo { font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-rotulo); }
.franja-datos { font-size: 14.5px; font-weight: 700; flex: 1 1 260px; }
.franja-ir { font-size: 18px; font-weight: 900; }
.enap-sube { color: var(--f-sube); }
.enap-baja { color: var(--f-baja); }
.franja-enap:hover .franja-datos, .franja-enap:focus-visible .franja-datos { text-decoration: underline; }

.donde-cargar { background: var(--a-fondo); padding: 24px 0 28px; border-bottom: 1px solid var(--t-borde); }
.donde-titulo { font-size: 22px; line-height: 1.25; font-weight: 900; color: var(--text-main); margin-bottom: 14px; }
.seg-grupo, .orden-grupo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.seg {
  min-height: 40px; padding: 8px 14px; border-radius: var(--a-radio);
  border: 2px solid var(--border-card); background: var(--bg-card); color: var(--text-main);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.seg[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.seg[aria-disabled="true"] { opacity: 0.55; cursor: help; }
.donde-controles { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.btn-ubicacion {
  min-height: 48px; border: 0; border-radius: var(--a-radio); background: var(--acento); color: var(--acento-texto);
  font-size: 16px; font-weight: 900; cursor: pointer; padding: 0 16px;
}
.donde-comuna input {
  width: 100%; height: 48px; padding: 0 14px; font-size: 16px; border-radius: var(--a-radio);
  border: 2px solid var(--border-card); background: var(--bg-card); color: var(--text-main);
}
.cerca-estado { font-size: 14px; color: var(--text-muted); margin: 6px 0 12px; }
.mapa-cerca { height: 300px; border-radius: var(--a-radio); overflow: hidden; border: 1px solid var(--border-card); margin-bottom: 12px; background: var(--bg-card-subtle); }
.lista-cerca { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.estacion-cerca {
  display: grid; grid-template-columns: 30px 1fr auto 44px; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--a-radio);
}
.estacion-cerca .puesto {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card-subtle); color: var(--text-main); font-weight: 900; font-size: 13px;
}
.estacion-cerca:first-child .puesto { background: var(--acento); color: var(--acento-texto); }
.estacion-cerca .datos { min-width: 0; }
.estacion-cerca .datos strong { display: block; font-size: 15px; color: var(--text-main); }
.estacion-cerca .dir { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.estacion-cerca .ahorro, .estacion-cerca .vale { display: block; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.estacion-cerca .ahorro { color: var(--ok); }
.vale.si { color: var(--ok); }
.vale.no { color: var(--text-muted); }
.estacion-cerca .valor { text-align: right; }
.estacion-cerca .valor b { display: block; font-family: var(--t-fuente-cifra); font-variant-numeric: tabular-nums; font-size: 20px; color: var(--text-main); }
.estacion-cerca .valor small { font-size: 12px; color: var(--text-muted); }
.estacion-cerca .ir {
  display: grid; place-items: center; height: 40px; border-radius: var(--a-radio);
  background: var(--bg-card-subtle); color: var(--text-main); font-weight: 900; text-decoration: none; font-size: 14px;
}
.btn-ver-mapa {
  margin: 12px 0 10px; min-height: 44px; width: 100%; border-radius: var(--a-radio); border: 2px solid var(--acento);
  background: transparent; color: var(--text-main); font-weight: 800; font-size: 15px; cursor: pointer;
}
.cerca-ajustes-caja { margin-top: 14px; }
.cerca-ajustes-caja summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--text-main); padding: 6px 0; }
.cerca-ajustes { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.cerca-ajustes label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.cerca-ajustes input { width: 150px; height: 40px; padding: 0 10px; font-size: 16px; border: 2px solid var(--border-card); border-radius: 6px; background: var(--bg-card); color: var(--text-main); }

/* Pines del mapa (Leaflet divIcon) */
.pin-precio span {
  display: inline-block; transform: translate(-50%, -100%); padding: 3px 7px; border-radius: 6px;
  background: var(--pin-fondo); color: var(--pin-texto); font: 800 12px/1.2 var(--t-fuente-cifra);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); white-space: nowrap;
}
.pin-primero span { background: var(--acento); color: var(--acento-texto); }
.leaflet-container .pin-yo { stroke: #fff; fill: var(--pin-yo); fill-opacity: 1; }

/* Celular: tablero compacto para que «¿dónde cargo?» asome en el primer pantallazo */
@media (max-width: 899px) {
  .tablero { padding: 14px 0 16px; }
  .tablero-marco { padding: 12px 12px 10px; }
  .tablero-titulo { font-size: 19px; margin: 6px 0 10px; }
  .tab-filas { gap: 6px; }
  .tab-fila { padding: 5px 8px; grid-template-columns: 44px 1fr auto; }
  .tab-comb { height: 32px; font-size: 16px; }
  .tab-cifra { font-size: 28px; }
  .tablero-pie { margin-top: 8px; }
}
/* Escritorio: tablero y «¿dónde cargo?» lado a lado, arriba */
@media (min-width: 900px) {
  .portada-arriba {
    display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: 28px; align-items: start;
    max-width: var(--max-w); margin: 0 auto; padding: 24px 16px 32px;
  }
  .portada-arriba .tablero, .portada-arriba .donde-cargar { background: none; border: 0; padding: 0; }
  .portada-arriba .container { max-width: none; padding: 0; }
  .portada-arriba .tablero-marco { max-width: none; }
  .portada-arriba .donde-titulo { margin-top: 2px; }
  .tablero-titulo { font-size: 24px; }
  .tab-cifra { font-size: 36px; }
  .donde-controles { grid-template-columns: 220px 1fr; }
  .mapa-cerca { height: 340px; }
  body:has(.portada-arriba) { background: var(--a-fondo); }
}
@media (max-width: 380px) {
  .tab-fila { grid-template-columns: 44px 1fr auto; gap: 8px; }
  .tab-cifra { font-size: 28px; }
  .tab-nombre { font-size: 14px; }
  .estacion-cerca { grid-template-columns: 26px 1fr auto; }
  .estacion-cerca .ir { grid-column: 2 / -1; height: 36px; }
}

/* ==========================================================================
   Piel A · Tótem (letrero de noche: placas negras, cifras ámbar luminosas)
   ========================================================================== */
[data-piel="totem"] {
  --t-fondo: #e9e7e2; --t-panel: #0d0d0f; --t-borde: #d6d3cc;
  --t-marco-borde: 6px solid #2a2a2e; --t-radio: 14px; --t-sombra: 0 18px 40px rgba(0, 0, 0, 0.35);
  --t-texto: #f5f5f4; --t-tenue: #a8a29e; --t-fila: #050506; --t-fila-borde: 1px solid #26262a; --t-radio-fila: 6px;
  --t-etiqueta: #f5f5f4; --t-etiqueta-texto: #0d0d0f;
  --t-cifra: #ffb31a; --t-brillo: 0 0 10px rgba(255, 170, 0, 0.55), 0 0 2px rgba(255, 200, 80, 0.9);
  --t-fuente-cifra: "Consolas", "SF Mono", "DejaVu Sans Mono", "Roboto Mono", monospace; --t-peso-cifra: 700;
  --f-fondo: #111113; --f-texto: #f5f5f4; --f-rotulo: #ffb31a; --f-sube: #ffb31a; --f-baja: #4ade80;
  --a-fondo: #f6f5f2; --a-radio: 8px; --acento: #111113; --acento-texto: #ffb31a; --ok: #15803d;
  --pin-fondo: #111113; --pin-texto: #ffb31a; --pin-yo: #2563eb;
  --bg-body: #f6f5f2; --bg-card: #ffffff; --bg-card-subtle: #efede8; --text-main: #1c1917; --text-muted: #57534e;
  --border-subtle: #e2ded6; --border-card: #d6d3cc; --brand-amber: #ffb31a;
}
[data-piel="totem"] .tablero-marco::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 4px 4px;
}
[data-piel="totem"] .site-header { background: #0d0d0f; border-bottom: 3px solid #ffb31a; }
[data-piel="totem"][data-theme="dark"] {
  --t-fondo: #050506; --t-borde: #1f1f23; --t-marco-borde: 6px solid #1c1c20; --t-sombra: 0 0 0 1px #2a2a2e, 0 20px 50px rgba(0, 0, 0, 0.6);
  --a-fondo: #0c0c0e; --bg-body: #0c0c0e; --bg-card: #151518; --bg-card-subtle: #1e1e22; --text-main: #f5f5f4; --text-muted: #a8a29e;
  --border-subtle: #26262a; --border-card: #303035; --acento: #ffb31a; --acento-texto: #0d0d0f; --ok: #4ade80;
  --pin-fondo: #0d0d0f; --pin-texto: #ffb31a;
}

/* Tótem en todo el sitio: los restos del azul marino de la plantilla pasan a la paleta del letrero */
[data-piel="totem"] {
  --brand-navy: #0d0d0f; --brand-navy-light: #1c1c20; --brand-navy-border: #2a2a2e;
}
[data-piel="totem"] .hero-tag {
  background: #0d0d0f; border: 1px solid #2a2a2e; color: #ffb31a; border-radius: 6px;
}
[data-piel="totem"] .site-footer { border-top: 3px solid #ffb31a; }
[data-piel="totem"] .data-table th { background: var(--bg-card-subtle); color: var(--text-main); }
[data-piel="totem"][data-theme="dark"] .data-table th { background: var(--bg-card-subtle); color: var(--text-main); }
[data-piel="totem"][data-theme="dark"] .data-table td { border-bottom-color: var(--border-subtle); color: #e7e5e4; }
[data-piel="totem"] .data-table tr:hover td { background: rgba(255, 179, 26, 0.08); }
[data-piel="totem"] .tabla-estaciones .mapa { color: #b45309; }
[data-piel="totem"][data-theme="dark"] .tabla-estaciones .mapa { color: #ffb31a; }
[data-piel="totem"] .stat-card .stat-value { font-variant-numeric: tabular-nums; }
/* Contraste AA del texto tenue (tarjetas y precios dudosos) en día y noche */
[data-piel="totem"] { --text-dim: #6b6560; }
[data-piel="totem"][data-theme="dark"] { --text-dim: #a8a29e; }
[data-piel="totem"] .stat-sub { color: var(--text-muted); }