/* v1-geo.css — mapa esquemático propio (geo-map.js), pantalla de geovalla y piezas de fichaje con ubicación (chip, aviso, cola).
   Solo usa tokens existentes (claro/oscuro salen solos). Nada depende solo del color: los estados llevan forma (círculo, triángulo, rombo) y texto. */

/* ---------- Mapa SVG ---------- */
.gm-host { min-width: 0; }
.gm { display: block; width: 100%; height: auto; max-height: 460px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-2); touch-action: none; user-select: none; }
.gm__bg { fill: var(--surface-2); }
.gm__grid { stroke: var(--line); stroke-width: 1; }
.gm__ring { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; }
.gm__ring--edit { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke-dasharray: none; stroke-width: 2.5; }
.gm__fence .gm__ring { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: var(--ink-3); stroke-dasharray: 6 5; stroke-width: 1.5; }
.gm__fence.is-sel .gm__ring { stroke: var(--accent); }
.gm__ctr { fill: var(--ink-3); }
.gm__lbl { fill: var(--ink-2); font: 600 12px var(--font-ui); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
.gm__lbl--pt { font-weight: 500; }
.gm__empty { fill: var(--ink-3); font: 500 14px var(--font-ui); }
.gm__acc { fill: color-mix(in srgb, var(--ink) 6%, transparent); stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.gm__pt { stroke: var(--surface); stroke-width: 2; }
.gm__pt--inside { fill: var(--ok); }
.gm__pt--outside { fill: var(--err); }
.gm__pt--unverified { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 2; }
.gm__pt--no_fence { fill: var(--ink-3); }
.gm__pt.is-sel { stroke: var(--ink); stroke-width: 3; }
[data-gm-pt] { cursor: pointer; }
.gm__scale path { fill: none; stroke: var(--ink-2); stroke-width: 2; } .gm__scale text, .gm__north text { fill: var(--ink-2); font: 600 12px var(--font-ui); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.gm__north path { fill: var(--ink-2); }
.gm__pin { cursor: grab; outline: none; } .gm__pin:active { cursor: grabbing; }
.gm__pin-hit { fill: transparent; }
.gm__pin-s { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.gm__pin-d { fill: var(--surface); }
.gm__pin:focus-visible .gm__pin-s { stroke: var(--focus); stroke-width: 3; }
.gm-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.gm-list li { flex-shrink: 0; display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-3); min-height: 40px; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; }
.gm-list li:hover { background: var(--surface-2); } .gm-list li:focus-visible { background: var(--surface-2); outline: 2px solid var(--focus); outline-offset: -2px; }
.gm-sh { display: inline-block; width: 14px; height: 14px; flex: none; }
.gm-sh--inside { background: var(--ok); border-radius: 50%; }
.gm-sh--outside { background: var(--err); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gm-sh--unverified { background: var(--ink-2); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gm-sh--no_fence { background: var(--ink-3); border-radius: 2px; }
.geo-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-2); }
.geo-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Pantalla de geovalla ---------- */
.geo-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 960px) { .geo-split { grid-template-columns: 300px minmax(0, 1fr); } }
.geo-side .v1-item.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.geo-form .geo-map { min-width: 0; }
.geo-hint { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; }
.geo-radius { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: var(--s-3); align-items: center; }
.geo-radius input[type=range] { width: 100%; accent-color: var(--accent); min-height: 40px; }
.geo-unit { color: var(--ink-3); }
.geo-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.geo-actions--end { justify-content: flex-end; }
.geo-empty { margin: var(--s-3) 0 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.geo-opt { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--control-line); border-radius: var(--r-md); background: var(--raised); cursor: pointer; flex: 1 1 100%; min-height: 56px; }
.geo-opt input { margin-top: 4px; accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
.geo-opt b { display: block; } .geo-opt small { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
.geo-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.geo-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.geo-notice { max-height: 220px; overflow: auto; padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: var(--s-4); }
.geo-notice p { margin: 0 0 var(--s-2); }
.geo-filters { align-items: end; }
.geo-daymap { margin-top: var(--s-2); }
.v1-notice p { margin: 0 0 var(--s-3); }

/* ---------- Fichar con ubicación (Inicio) ---------- */
.v1-clockx { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.v1-geochip { display: inline-flex; align-items: center; gap: var(--s-2); padding: .3em .8em; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); max-width: 100%; }
.v1-geochip > span { min-width: 0; overflow-wrap: anywhere; }
.v1-geochip--inside { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.v1-geochip--outside { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.v1-geochip--unverified { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.v1-clockres { margin: var(--s-2) 0 0; }
.v1-clockres--warn { color: var(--warn); font-weight: 600; } .v1-clockres--ok { color: var(--ink-2); }
.v1-offq { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; padding: var(--s-3) var(--s-4); margin-top: var(--s-3); background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-sm); }
.v1-offq > span { flex: 1 1 220px; min-width: 0; }
.v1-offq .ic { color: var(--warn); flex: none; }

/* Aviso de ubicación: resumen corto + «Más información» desplegable */
.v1-notice__lead { margin: 0 0 var(--s-3); }
.v1-notice__more { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.v1-notice__more > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; color: var(--accent-strong); }
.v1-notice__more p { margin: var(--s-2) 0; }

/* Geovalla: estado vacío útil, cuadrícula más legible y leyenda del mapa */
.gm__grid { stroke: color-mix(in srgb, var(--ink) 16%, transparent); }
.geo-emptyhelp { position: relative; min-height: 280px; display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-md); overflow: hidden; padding: var(--s-5) var(--s-4); }
.geo-emptyhelp__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo-emptyhelp__grid path { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.geo-emptyhelp__c { position: relative; max-width: 440px; text-align: center; display: grid; gap: var(--s-2); justify-items: center; background: var(--surface); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); }
.geo-emptyhelp__c h3 { margin: 0; font-size: var(--fs-lg); }
.geo-emptyhelp__c p { margin: 0; color: var(--ink-2); }
.geo-emptyhelp__c .art { width: 96px; height: auto; }
.geo-emptyhelp__a { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; margin: var(--s-2) 0; }
.geo-legend--edit { margin: var(--s-2) 0 var(--s-3); }
.gm-lg { display: inline-block; width: 16px; height: 16px; flex: none; box-sizing: border-box; }
.gm-lg--ring { border: 2px solid var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gm-lg--pin { background: var(--accent); clip-path: polygon(50% 100%, 0 40%, 15% 8%, 50% 0, 85% 8%, 100% 40%); }
.gm-lg--grid { border: 1px solid var(--ink-3); background-image: linear-gradient(var(--ink-3) 1px, transparent 1px), linear-gradient(90deg, var(--ink-3) 1px, transparent 1px); background-size: 8px 8px; opacity: .7; }
.geo-form .input::placeholder { font-style: italic; opacity: .6; }

/* Ronda 3 · mapa del día: puntos lejanos en el borde, leyenda legible y sin posición */
.gm__far-arrow { fill: var(--ink-2); }
.gm__lbl--far { font-weight: 600; fill: var(--ink); }
.geo-legend--day { margin: var(--s-3) 0 var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); row-gap: var(--s-2); }
.geo-legend--day .gm-sh { width: 16px; height: 16px; }
.geo-legend--day .gm-lg--ring { border-color: var(--ink-3); border-style: dashed; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.geo-nopos { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-2) 0 0; }
.v1-note + .geo-filters { margin-top: var(--s-4); }
/* El SVG conserva su proporción 640×420: sin bandas laterales sin cuadrícula cuando el contenedor es más ancho que alto permite */
.geo-daymap .gm, .geo-map .gm { width: auto; max-width: 100%; aspect-ratio: 640 / 420; margin-inline: auto; }