/* Mapa del campo (F4): colores de las capas, leyenda, etiquetas sobre el mapa y editor del administrador.
   La página pública (sección Campo) y el admin (pestaña Mapa) cargan este archivo después de base.css.
   mapa-comun.js lee las variables --capa-* para pintar el mapa con los mismos colores que la leyenda. */
:root {
  --capa-fondo: #3B5A33;          /* fondo «pasto» de las muestras de la leyenda (las líneas blancas se ven) */
  --capa-casco: #1B1B1B;          /* borde oscuro de líneas e íconos para que resalten sobre el satélite */
  --capa-resaltado: #F2B516;      /* elemento seleccionado en el editor (dorado del club) */
  --capa-salida-azules: #1E73BE;
  --capa-salida-blancas: #FFFFFF;
  --capa-salida-doradas: #F2B516;
  --capa-salida-rojas: #D32F2F;
  --capa-salida-otra: #9E9E9E;
  --capa-bandera: #D32F2F;
  --capa-green: #9BE15D;    --capa-green-borde: #E6FFD0;
  --capa-fairway: #43A047;  --capa-fairway-borde: #A5D6A7;
  --capa-bunker: #F3E2B3;   --capa-bunker-borde: #C8A86B;
  --capa-agua: #1E88E5;     --capa-agua-borde: #90CAF9;
  --capa-ob: #FFFFFF;
  --capa-rojas: #E53935;
  --capa-amarillas: #FFEB3B;
  --capa-relief: #AB47BC;   --capa-relief-borde: #F3E5F5;
  --capa-ruta: #F2B516;
  --marca-fondo: rgba(2, 13, 31, .84);
}

/* ---------- etiquetas sobre el mapa (no reciben clics) ---------- */
.mapa-etiqueta { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 700 11px/1 var(--fuente); }
.mapa-etiqueta.marca { background: var(--marca-fondo); color: #fff; padding: 3px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.mapa-etiqueta.relief { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  text-shadow: 0 0 3px var(--capa-casco), 0 0 2px var(--capa-casco), 0 0 1px var(--capa-casco); }
.mapa-etiqueta.vertice { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--capa-casco); }
.mapa-etiqueta.vertice.primero { background: var(--capa-resaltado); }
.mapa-marcador { line-height: 0; }
.mapa-marcador svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }

/* ---------- muestras de color (leyenda y botones del editor): siempre con su texto al lado ---------- */
.muestra { position: relative; display: inline-block; flex: none; width: 1.7rem; height: 1.1rem; border-radius: 4px;
  background: var(--capa-fondo); vertical-align: middle; overflow: hidden; }
.muestra::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; }
.muestra.m-green::after { background: var(--capa-green); border: 1px solid var(--capa-green-borde); }
.muestra.m-fairway::after { background: var(--capa-fairway); border: 1px solid var(--capa-fairway-borde); inset: 2px; }
.muestra.m-bunker::after { background: var(--capa-bunker); border: 1px solid var(--capa-bunker-borde); }
.muestra.m-agua::after { background: var(--capa-agua); border: 1px solid var(--capa-agua-borde); }
.muestra.m-relief::after { background: var(--capa-relief); border: 1px solid var(--capa-relief-borde); }
.muestra.m-ob::after, .muestra.m-rojas::after, .muestra.m-amarillas::after, .muestra.m-ruta::after {
  inset: auto 2px; top: calc(50% - 2px); height: 4px; border-radius: 2px; box-shadow: 0 0 0 1px var(--capa-casco); }
.muestra.m-ob::after { background: var(--capa-ob); }
.muestra.m-rojas::after { background: var(--capa-rojas); }
.muestra.m-amarillas::after { background: var(--capa-amarillas); }
.muestra.m-ruta::after { box-shadow: none; height: 0; background: none; border-top: 3px dashed var(--capa-ruta); }
.muestra.m-salida::after { inset: auto; left: calc(50% - 6px); top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%;
  background: var(--c, var(--capa-salida-otra)); box-shadow: 0 0 0 2px var(--capa-casco), 0 0 0 3px #fff; }
.muestra.m-bandera { display: inline-flex; align-items: center; justify-content: center; }
.muestra.m-bandera svg { width: 14px; height: 18px; }
.muestra.m-marca { width: auto; height: auto; padding: 1px 6px; border-radius: 999px; background: var(--marca-fondo); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }

.mapa-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.mapa-leyenda li { display: flex; gap: .55rem; align-items: center; font-size: .86rem; color: var(--titulo); }

/* ---------- admin: pestaña Mapa ---------- */
.mapa-ajustes { margin-bottom: .75rem; padding: .55rem 1rem; }
.mapa-ajustes > summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; list-style: none; }
.mapa-ajustes > summary::-webkit-details-marker { display: none; }
.mapa-ajustes > summary::before { content: "▸"; color: var(--azul-boton); font-weight: 700; }
.mapa-ajustes[open] > summary::before { content: "▾"; }
.mapa-ajustes > summary h2 { margin: 0; font-size: 1rem; }
.mapa-ajustes .form-fila { margin: .6rem 0 .3rem; }
.mapa-ajustes .campo-llave { width: 25rem; max-width: 100%; font-family: Consolas, "Segoe UI Mono", monospace; font-size: .88rem; }
.mapa-ajustes .campo-mapid { width: 14rem; font-family: Consolas, "Segoe UI Mono", monospace; font-size: .88rem; }
.mapa-ajustes .campo-ir { width: 15rem; }
.estado-chip.error { background: var(--error-fondo); color: var(--error); }
.mapa-pasos { margin: .5rem 0 .2rem; padding: .7rem 1rem; background: var(--fondo-2); border-radius: 8px; font-size: .9rem; color: var(--titulo); }
.mapa-pasos h3 { margin: 0 0 .3rem; }
.mapa-pasos ol { margin: .2rem 0 0; padding-left: 1.3rem; }
.mapa-pasos li { margin: .25rem 0; }
.mapa-pasos code { background: var(--fondo); padding: 0 .3rem; border-radius: 4px; font-size: .85rem; }
.mapa-recargar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; background: var(--aviso-fondo); border-left: 5px solid var(--aviso);
  border-radius: 8px; padding: .45rem .8rem; color: var(--titulo); font-weight: 600; margin: .4rem 0; }
.mapa-error-llave { background: var(--error-fondo); border-left: 6px solid var(--error); border-radius: 8px; padding: .7rem 1rem; color: var(--titulo); margin-bottom: .75rem; }
.mapa-error-llave ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.mapa-hoyos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .4rem; margin-bottom: .6rem; }
.hoyo-btn { font: inherit; display: grid; gap: 0; justify-items: center; background: var(--fondo); border: 2px solid var(--linea); border-radius: 8px;
  padding: .3rem .2rem; cursor: pointer; color: var(--titulo); min-height: 44px; line-height: 1.2; }
.hoyo-btn strong { font-size: .95rem; }
.hoyo-btn small { font-size: .72rem; color: var(--texto); }
.hoyo-btn small.listo { color: var(--ok); font-weight: 700; }
.hoyo-btn small.medias { color: var(--aviso); font-weight: 700; }
.hoyo-btn:hover { background: var(--azul-claro); }
.hoyo-btn[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 0 -4px 0 var(--dorado); }

.mapa-editor { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 20rem; gap: .75rem; align-items: start; }
.mapa-herramientas { display: grid; gap: .28rem; }
.mapa-herramientas .titulo-herr { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto); margin: 0 0 .1rem; }
.herr { display: flex; align-items: center; gap: .5rem; font: inherit; font-size: .86rem; text-align: left; background: var(--fondo);
  border: 2px solid var(--linea); border-radius: 8px; padding: .28rem .45rem; cursor: pointer; color: var(--titulo); min-height: 34px; }
.herr:hover { background: var(--azul-claro); }
.herr[aria-pressed="true"] { border-color: var(--azul-boton); background: var(--azul-claro); font-weight: 700; }
.herr .cuantos { margin-left: auto; font-size: .72rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.mapa-interruptor { display: flex; gap: .4rem; align-items: center; font-size: .86rem; margin-top: .4rem; font-weight: 600; }

.mapa-instr { min-height: 2.5rem; background: var(--azul-claro); color: var(--titulo); border-radius: 8px; padding: .4rem .75rem; margin-bottom: .5rem;
  font-size: .88rem; line-height: 1.4; }
.mapa-instr > .muestra { margin-right: .35rem; }
.mapa-instr.dibujando { background: var(--aviso-fondo); border-left: 5px solid var(--aviso); }
.mapa-instr.error { background: var(--error-fondo); border-left: 5px solid var(--error); }
.mapa-instr .teclas { display: block; font-size: .78rem; color: var(--texto); }
/* Mientras se traza, los íconos de salida y bandera (Marker sin Map ID, y su «blanco» transparente para el ratón) dejan
   pasar el clic al mapa: si no, un vértice sobre la bandera (al trazar el green) se perdería. AdvancedMarkerElement ya lo hace. */
.mapa-lienzo.dibujando :is(img[src^="data:image/svg+xml"], img[src*="mapfiles/transparent.png"]),
.mapa-lienzo.dibujando div:has(> :is(img[src^="data:image/svg+xml"], img[src*="mapfiles/transparent.png"])) { pointer-events: none !important; }
.mapa-lienzo { height: max(400px, calc(100vh - 25rem)); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--fondo-2); }

/* El panel no pasa del alto del mapa: lo que no quepa (la lista larga) se desplaza dentro. */
.mapa-panel { display: grid; gap: .6rem; align-content: start; min-width: 0; max-height: calc(max(400px, 100vh - 25rem) + 6.6rem); overflow: auto; }
.mapa-panel h2 { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mapa-panel h2 small { font-weight: 400; color: var(--texto); font-size: .82rem; }
.mapa-panel h3 { margin: .2rem 0 0; font-size: .9rem; }
.mapa-dist { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mapa-dist th { text-align: left; font-weight: 600; color: var(--texto); font-size: .76rem; padding: .2rem .2rem; border-bottom: 1px solid var(--linea); }
.mapa-dist td { padding: .3rem .2rem; border-bottom: 1px solid var(--linea); color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mapa-dist td.salida { display: flex; gap: .35rem; align-items: center; }
.mapa-dist .muestra { width: 1.2rem; }
.dif-pct { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem; white-space: nowrap; }
.dif-pct.ok { background: var(--ok-fondo); color: var(--ok); }
.dif-pct.revisar { background: var(--aviso-fondo); color: var(--aviso); }
.dif-pct.nada { background: var(--fondo-2); color: var(--texto); font-weight: 600; }
.mapa-falta { color: var(--aviso); font-weight: 600; font-size: .86rem; margin: 0; }
.mapa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 15rem; overflow: auto; }
.mapa-lista li { display: flex; gap: .3rem; align-items: center; }
.mapa-lista .elegir { flex: 1; min-width: 0; display: flex; gap: .45rem; align-items: center; font: inherit; font-size: .86rem; text-align: left; background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 6px; padding: .25rem .4rem; cursor: pointer; color: var(--titulo); min-height: 32px; }
.mapa-lista .elegir:hover { background: var(--azul-claro); }
.mapa-lista li.sel .elegir { border: 2px solid var(--dorado); background: var(--azul-claro); font-weight: 700; }
.mapa-lista .quitar { font: inherit; font-size: .78rem; background: none; border: 0; color: var(--error); cursor: pointer; font-weight: 600; padding: .2rem .3rem; }
.mapa-lista .quitar:hover { text-decoration: underline; }
.mapa-sel { background: var(--fondo-2); border-radius: 8px; padding: .5rem .6rem; font-size: .86rem; display: grid; gap: .35rem; }
.mapa-sel .fila { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Ventana para elegir el color de la salida */
.opciones-salida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; }
.opciones-salida .boton { justify-content: flex-start; }
.opciones-salida .muestra { width: 1.4rem; }

@media (max-width: 1150px) {
  .mapa-editor { grid-template-columns: 10rem minmax(0, 1fr); }
  .mapa-panel { grid-column: 1 / -1; }
  .mapa-hoyos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- foto satelital, GPS y acciones del trazo (23-oct) */
.mapa-barra { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.mapa-fotos { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.titulo-fotos { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto); margin-right: .2rem; }
.foto-btn { font: inherit; font-size: .86rem; background: var(--fondo); border: 2px solid var(--linea); border-radius: 999px;
  padding: .25rem .8rem; min-height: 40px; cursor: pointer; color: var(--titulo); }
.foto-btn:hover { background: var(--azul-claro); }
.foto-btn[aria-pressed="true"] { border-color: var(--azul-boton); background: var(--azul-claro); font-weight: 700; }
#mapa-yo { min-height: 40px; }
#mapa-yo[aria-pressed="true"] { border-color: var(--azul-boton); background: var(--azul-claro); font-weight: 700; }
.mapa-lienzo-caja { position: relative; }
.mapa-acciones { position: absolute; top: .5rem; left: .5rem; right: auto; max-width: calc(100% - 4rem); z-index: 5; display: flex; gap: .4rem; flex-wrap: wrap;
  pointer-events: none; }                       /* entre botones, el toque llega al mapa */
.mapa-acciones .boton { pointer-events: auto; min-height: 44px; box-shadow: var(--sombra); }
.mapa-acciones [hidden] { display: none; }
.mapa-credito { margin: 0 0 4px 4px; background: rgba(255, 255, 255, .88); color: #202020; font-size: 11px; line-height: 1.4;
  padding: 1px 6px; border-radius: 4px; }
.mapa-credito[hidden] { display: none; }
/* Punto azul de «Mi ubicación» (el círculo claro alrededor es el margen de error del GPS). */
.mapa-etiqueta.yo { width: 16px; height: 16px; border-radius: 50%; background: #1E73BE; border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 2px rgba(30, 115, 190, .45); }
/* En pantallas táctiles no hay teclado: los atajos sobran (están los botones de .mapa-acciones). */
@media (hover: none) { .mapa-instr .teclas { display: none; } }

/* Celular (Gerry en el campo): herramientas y hoyos en franjas que se deslizan, mapa a lo ancho, panel debajo. */
@media (max-width: 760px) {
  .mapa-editor { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mapa-herramientas { display: flex; overflow-x: auto; gap: .3rem; padding-bottom: .25rem; }
  .mapa-herramientas .titulo-herr { display: none; }
  .mapa-herramientas .herr { flex: none; min-height: 44px; }
  .mapa-herramientas .mapa-interruptor { flex: none; margin: 0 .3rem; white-space: nowrap; }
  .mapa-hoyos { display: flex; overflow-x: auto; padding-bottom: .25rem; }
  .mapa-hoyos .hoyo-btn { flex: none; min-width: 4.6rem; }
  .mapa-lienzo { height: 62vh; min-height: 320px; }
  .mapa-panel { grid-column: auto; max-height: none; }
  .mapa-instr { font-size: .84rem; }
  .mapa-acciones { max-width: calc(100% - 1rem); gap: .3rem; }
  .mapa-acciones .boton { font-size: .8rem; padding-left: .55rem; padding-right: .55rem; }
  .mapa-credito { max-width: 15rem; }          /* en dos líneas, sin pasar bajo los botones de acercar */
}
/* Textos cortos de la barra de acciones en el celular: cabe en una fila y tapa menos mapa. */
.mapa-acciones .corto { display: none; }
@media (max-width: 760px) {
  .mapa-acciones .largo { display: none; }
  .mapa-acciones .corto { display: inline; }
}