.field-top-btn{position:relative;overflow:visible}.field-top-btn[data-state="active"]{color:var(--teal)}.field-top-btn[data-state="offline"],.field-top-btn[data-state="pending"]{color:var(--gold)}
.field-dot{position:absolute;right:-2px;top:-2px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--gold);color:var(--on-gold);font:700 9px/16px var(--mono);text-align:center;border:1px solid var(--ink)}
.field-sheet{width:min(520px,calc(100vw - 20px));max-height:min(760px,calc(100dvh - 24px));overflow:auto}.field-title{margin:0;font:700 22px/1.2 var(--display);letter-spacing:0}.field-lead{margin:8px 0 16px;color:var(--muted);font-size:13px;line-height:1.55}
.field-status{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.field-status dt{color:var(--muted);font-size:12px}.field-status dd{margin:0;font:600 12px/1.4 var(--mono);text-align:right}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;border-bottom:1px solid var(--line)}.field-row-main b{display:block;font-size:14px}.field-row-main small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}.field-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.field-actions button{min-height:40px}
.field-map-section{margin-top:18px}.field-map-section h3{margin:0 0 4px;font:650 16px/1.3 var(--display);letter-spacing:0}.field-map-section>p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.5}.field-map-item{padding:12px 0;border-top:1px solid var(--line)}.field-map-title{display:flex;justify-content:space-between;gap:8px}.field-map-title b{font-size:13px}.field-map-title span,.field-map-meta{font:11px var(--mono);color:var(--muted)}.field-map-meta{margin-top:4px}.field-progress{height:5px;background:var(--panel2);border-radius:3px;overflow:hidden;margin-top:8px}.field-progress span{display:block;height:100%;width:var(--progress,0%);background:var(--teal)}
@media(max-width:520px){.field-sheet{width:100%;max-height:calc(100dvh - 10px)}.field-actions{display:grid;grid-template-columns:1fr 1fr}.field-actions button{width:100%}}
.field-panel-body>section{padding:14px 0;border-top:1px solid var(--line)}.field-panel-body h3{margin:0 0 6px;font:650 16px/1.3 var(--display)}.field-panel-body p{margin:4px 0 10px;color:var(--muted);font-size:12px;line-height:1.5}
.field-summary,.field-map-row,.field-queue-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.field-summary{display:grid;grid-template-columns:1fr auto}.field-summary h3{grid-column:1/-1}.field-map-row,.field-queue-row{padding:10px 0;border-bottom:1px solid var(--line)}.field-map-row b,.field-queue-row b{display:block;font-size:13px}.field-map-row small,.field-queue-row small{display:block;margin-top:3px;color:var(--muted);font:11px/1.45 var(--mono)}.field-map-error{padding:9px 11px;border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--gold) 10%,transparent)}.field-attribution{font-size:10px!important}
.field-summary-proximamente{display:block}.field-proximamente-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold);font:700 10px/1.6 var(--mono);letter-spacing:.04em;vertical-align:middle}
/* Previsualización completa (openPreview, tarjeta "Modo campo -- Próximamente"
   de Inicio): el panel real difuminado e inerte, con una capa legible
   "Próximamente" encima, a la altura visual de la mitad del panel. */
.field-preview-wrap{position:relative}
.field-preview-full{filter:blur(3px) saturate(.65);opacity:.55;pointer-events:none;user-select:none}
.field-preview-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;background:color-mix(in srgb,var(--panel) 55%,transparent);border-radius:14px}
.field-preview-badge b{font:700 20px/1.2 var(--display);color:var(--gold);letter-spacing:.02em}
.field-preview-badge span{max-width:280px;color:var(--text);font-size:13px;line-height:1.5}
.field-offline-gate[hidden]{display:none}.field-offline-gate{position:fixed;inset:0;z-index:10030;display:grid;place-items:center;padding:20px;background:rgba(8,17,20,.72);backdrop-filter:blur(8px)}.field-offline-gate section{position:relative;width:min(430px,100%);padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.35);text-align:center}.field-offline-gate h2{margin:8px 0;font:700 23px/1.2 var(--display)}.field-offline-gate-copy{color:var(--muted);line-height:1.55}.field-offline-gate-ico{font-size:36px;color:var(--gold)}.field-offline-gate-x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:25px}.field-offline-gate-actions{display:grid;gap:9px;margin-top:18px}.field-offline-premium{background:var(--gold)!important;color:var(--on-gold)!important}.field-offline-back{background:transparent!important}

/* ==== Panel "Sin conexión" (rediseño 2026-09-15) ====
   Tokens locales: los tres colores semánticos (verde listo, ámbar aviso,
   rojo error) son los únicos que no salen del tema; se declaran aquí, una
   sola vez, y en el tema claro se sustituyen por sus versiones oscurecidas
   (mismo criterio que --ok/--warn en index.html: el vivo no contrasta sobre
   panel blanco). Como TEXTO se mezclan hacia --text; como marca (borde,
   punto, tinte) van tal cual. */
.field-sheet,.field-home-pill,.mapa-offline-aviso{
  --field-ok:var(--ok,#3FBF6F);
  --field-aviso:var(--warn,#E8B93D);
  --field-err:var(--alert,#E0473E);
  --field-ok-tx:color-mix(in srgb,var(--field-ok) 72%,var(--text));
  --field-aviso-tx:color-mix(in srgb,var(--field-aviso) 72%,var(--text));
  --field-err-tx:color-mix(in srgb,var(--field-err) 78%,var(--text));
}
html[data-bg^="claro"] .field-sheet,html[data-bg^="claro"] .field-home-pill,html[data-bg^="claro"] .mapa-offline-aviso{
  --field-ok:var(--ok,#2E9E57);--field-aviso:var(--warn,#A67C10);
}
.field-loading{padding:18px 0;color:var(--muted);font:12px/1.5 var(--mono)}

/* Botones del panel: uno primario (teal) y el resto apagados. */
.field-btn{flex:0 0 auto;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2);color:var(--text);font:600 12px/1.2 var(--mono);cursor:pointer;white-space:nowrap;transition:border-color var(--dur-1),background var(--dur-1),opacity var(--dur-1)}
.field-btn:hover{border-color:var(--teal)}
.field-btn.primaria{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.field-btn:disabled,.field-btn.primaria:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line)}

/* 3.1 Cabecera de estado: icono redondo + título + copy, y debajo los chips. */
.field-panel-body>section.field-hero{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;margin-top:4px;padding:14px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel2)}
.field-hero.listo{border-color:color-mix(in srgb,var(--field-ok) 45%,var(--line))}
.field-hero.aviso{border-color:color-mix(in srgb,var(--field-aviso) 50%,var(--line))}
.field-hero-ic{width:38px;height:38px;border-radius:var(--r-full);display:grid;place-items:center;font:700 18px/1 var(--display);color:var(--on-teal);box-shadow:var(--sh-1)}
.field-hero.listo .field-hero-ic{background:var(--field-ok)}
.field-hero.aviso .field-hero-ic{background:var(--field-aviso);color:var(--on-gold)}
.field-hero-tx{min-width:0}
.field-panel-body .field-hero-tx h3{margin:2px 0 4px;font:650 16px/1.25 var(--display)}
.field-panel-body .field-hero-tx p{margin:0;color:var(--text);opacity:.85;font-size:12px;line-height:1.5}
.field-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.field-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);color:var(--muted);font:600 11px/1.5 var(--mono)}
.field-chip .dot{width:7px;height:7px;border-radius:var(--r-full);background:var(--field-aviso);flex:0 0 auto}
.field-chip.ok{color:var(--text)}
.field-chip.ok .dot{background:var(--field-ok)}

/* 3.2 Filas de mapa: píldora, nombre, meta en monoespaciada, barra; botón a la derecha. */
.field-map-row{align-items:flex-start}
.field-map-txt{flex:1 1 auto;min-width:0}
.field-map-txt>b{margin-top:5px;overflow-wrap:anywhere}
.field-map-pill{display:inline-block;padding:2px 8px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--panel2);color:var(--muted);font:700 10px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.field-map-pill.ok{border-color:color-mix(in srgb,var(--field-ok) 45%,var(--line));background:color-mix(in srgb,var(--field-ok) 14%,transparent);color:var(--field-ok-tx)}
.field-map-pill.dl{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-on-panel,var(--teal))}
.field-map-pill.err{border-color:color-mix(in srgb,var(--field-err) 50%,var(--line));background:color-mix(in srgb,var(--field-err) 14%,transparent);color:var(--field-err-tx)}
.field-map-row small.field-map-detalle{margin-top:4px;overflow-wrap:anywhere}
.field-map-row .field-btn{margin-top:22px}

/* Aviso "Solo desde la app de Android", encima de las filas de mapa. */
.field-nota-plataforma{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.field-nota-ic{flex:0 0 auto;display:flex;color:var(--gold);margin-top:1px}
.field-nota-ic svg{width:18px;height:18px}
.field-nota-plataforma b{display:block;font-size:13px}
.field-nota-plataforma span:not(.field-nota-ic){display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}

/* Barra de progreso (descarga) y de frescura (copia local). */
.field-barra{height:5px;margin-top:8px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.field-barra span{display:block;height:100%;width:var(--progress,0%);background:var(--teal);transition:width var(--dur-2)}
.field-barra.agotada span{background:var(--field-aviso)}

/* 3.3 / 3.4: fila de texto + botón a la derecha. */
.field-fila-accion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 2px}
.field-fila-tx{flex:1 1 auto;min-width:0}
.field-fila-tx b{display:block;font-size:13px;overflow-wrap:anywhere}
.field-fila-tx small{display:block;margin-top:3px;color:var(--muted);font:11px/1.45 var(--mono)}
.field-queue-row{align-items:flex-start}
.field-queue-row>div{flex:1 1 auto;min-width:0}

/* 3.5 Pie: la burbuja, una sola fila discreta. */
.field-pie-burbuja{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:14px 0 2px;border-top:1px solid var(--line)}
.field-pie-burbuja b{display:block;font-size:13px;color:var(--muted)}
.field-pie-burbuja small{display:block;margin-top:3px;color:var(--muted);font:11px/1.45 var(--mono);opacity:.85}
.field-pie-burbuja .field-proximamente-tag{margin-left:0;flex:0 0 auto}

/* 6.1 Píldora de estado en vivo de la tarjeta "Sin conexión" de Inicio. */
.field-home-pill{flex:0 0 auto;padding:4px 10px;border-radius:var(--r-full);font:700 var(--fs-0,10px)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--muted);background:var(--panel2)}
.field-home-pill.listo{color:var(--field-ok-tx);background:color-mix(in srgb,var(--field-ok) 16%,transparent)}
.field-home-pill.aviso{color:var(--field-aviso-tx);background:color-mix(in srgb,var(--field-aviso) 16%,transparent)}

/* 6.2 El cartel del mapa (.mapa-offline-aviso, estilos base en index.html)
   ahora es un <button>: se le quitan los estilos de botón y se le pone el
   chevron para que se vea que se puede tocar. */
button.mapa-offline-aviso{width:calc(100% - 24px);box-sizing:border-box;font:inherit;color:var(--text);text-align:left;cursor:pointer;align-items:center;transition:border-color var(--dur-1),transform var(--dur-0)}
button.mapa-offline-aviso:hover{border-color:var(--gold)}
button.mapa-offline-aviso:active{transform:scale(.995)}
button.mapa-offline-aviso .mapa-offline-txt{flex:1 1 auto}
.mapa-offline-chev{flex:0 0 auto;align-self:center;color:var(--muted);font:600 22px/1 var(--display);padding-left:4px}

@media(max-width:420px){
  .field-map-row{flex-wrap:wrap}
  .field-map-row .field-btn{margin-top:0;margin-left:auto}
  .field-fila-accion{flex-wrap:wrap}
  .field-fila-accion .field-btn{margin-left:auto}
}