/**
 * P.R.E.V.I.A. — Basado en lemeit-design
 * Paleta: "X-Wing Poe Dameron" (profe.lemeit.ar)
 */

:root {
  /* Modo Claro (default / creme) */
  --lm-bg:          #FAF7F2;
  --lm-surface:     #FFFFFF;
  --lm-surface-2:   #F0EBE2;
  --lm-border:      #E0D9CC;
  --lm-text:        #2A211A;
  --lm-text-dim:    #6B5C4E;
  --lm-accent:      #9B3D00;
  --lm-accent-dim:  #F0DDCC;
  --lm-good:        #4C7A3D;
  --lm-moderate:    #A6720A;
  --lm-bad:         #A33131;
  --lm-shadow:      rgba(43, 30, 20, 0.12);

  --lm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lm-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --lm-radius: 8px;
  --lm-radius-sm: 4px;
}

:root[data-theme="dark"] {
  /* Modo Oscuro (negro cálido) */
  --lm-bg:          #1A1612;
  --lm-surface:     #221E18;
  --lm-surface-2:   #2B241D;
  --lm-border:      #3D3028;
  --lm-text:        #F2ECE4;
  --lm-text-dim:    #C9BEB2;
  --lm-accent:      #D9691F;
  --lm-accent-dim:  #3D2A1A;
  --lm-good:        #8FB56B;
  --lm-moderate:    #D9A441;
  --lm-bad:         #D9736F;
  --lm-shadow:      rgba(0, 0, 0, 0.4);
}

body, html {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--lm-font-sans);
  background: var(--lm-bg);
  color: var(--lm-text);
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

#map { width: 100%; height: 100vh; }

/* Panel Auditoría P.R.E.V.I.A. */
.panel-auditoria {
  position: absolute; top: 12px; left: 60px; z-index: 1000;
  background: var(--lm-surface); color: var(--lm-text);
  border-radius: var(--lm-radius); box-shadow: 0 8px 24px var(--lm-shadow);
  font-size: 11px; width: 235px; border: 1px solid var(--lm-border);
  user-select: none;
}

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--lm-surface-2);
  border-bottom: 1px solid var(--lm-border);
  border-top-left-radius: var(--lm-radius); border-top-right-radius: var(--lm-radius);
  cursor: move;
}
.panel-header h1 {
  font-size: 17px; font-weight: 700;
  letter-spacing: 0; color: var(--lm-accent); margin: 0; pointer-events: none;
}
.marca-mapa { display:flex; align-items:center; gap:8px; }
.marca-mapa img { display:block; width:52px; height:52px; flex-shrink:0; pointer-events:none; }
.marca-mapa .marca-ia { border-bottom:1px solid var(--lm-accent); }
.marca h1 .marca-minuscula,.marca-mapa h1 .marca-minuscula { color:var(--lm-text); }
.marca-zona { display:block; margin-top:5px; color:var(--lm-text-dim); font-size:9px; }

.panel-controls { display: flex; align-items: center; gap: 6px; }
.badge-db {
  font-size: 8px; font-family: var(--lm-font-mono); color: var(--lm-good);
  background: color-mix(in srgb, var(--lm-good) 14%, transparent);
  border: 1px solid var(--lm-good); padding: 1px 4px; border-radius: 3px;
}
.btn-toggle { background: none; border: none; color: var(--lm-text-dim); cursor: pointer; font-size: 10px; padding: 0; }

.panel-body { padding: 10px; }
.panel-body.collapsed { display: none; }

.control-label {
  font-size: 9px; color: var(--lm-text-dim); text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 3px; display: block; font-weight: 600;
}

.select-audio, .input-odo {
  width: 100%; padding: 4px 6px; background: var(--lm-surface-2); color: var(--lm-text);
  border: 1px solid var(--lm-border); border-radius: var(--lm-radius-sm); font-size: 10px;
  font-family: var(--lm-font-mono); margin-bottom: 6px; box-sizing: border-box; outline: none;
}

.odometro-box {
  background: var(--lm-surface-2); padding: 6px; border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border); margin-bottom: 8px;
}

.progress-box { margin-bottom: 8px; }
.progress-info {
  display: flex; justify-content: space-between; font-size: 9px;
  color: var(--lm-text-dim); margin-bottom: 3px; font-family: var(--lm-font-mono);
}
.progress-bar {
  width: 100%; background: var(--lm-surface-2); border-radius: 3px;
  height: 5px; overflow: hidden; border: 1px solid var(--lm-border);
}
.progress-fill { height: 100%; background: var(--lm-good); width: 0%; transition: width 0.3s ease; }

.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }

.btn-action {
  color: #ffffff; border: 1px solid transparent; padding: 5px 6px;
  border-radius: var(--lm-radius-sm); cursor: pointer; font-size: 10px;
  font-weight: 500; text-align: center; transition: all 0.15s ease;
  box-sizing: border-box; width: 100%; font-family: var(--lm-font-sans);
}
.btn-action:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-magnet { background: var(--lm-accent); grid-column: span 2; }
.btn-magnet.activo { background: var(--lm-good); }
.btn-undo { background: var(--lm-surface-2); color: var(--lm-text); border: 1px solid var(--lm-border); grid-column: span 1; display: none; }
.btn-clear { background: rgba(163, 49, 49, 0.15); color: var(--lm-bad); border: 1px solid var(--lm-bad); grid-column: span 1; display: none; }

.btn-green { background: var(--lm-good); }
.btn-blue { background: #009688; } /* Marca lemeit AQ/Chips */
.btn-reset { background: transparent; color: var(--lm-bad); border-color: var(--lm-bad); grid-column: span 2; font-size: 9px; margin-top: 4px; }
.btn-reset:hover { background: rgba(163, 49, 49, 0.1); }

.status-panel {
  position: absolute; bottom: 12px; left: 12px; z-index: 1000;
  background: var(--lm-surface); color: var(--lm-text); padding: 4px 8px;
  border-radius: var(--lm-radius-sm); box-shadow: 0 2px 8px var(--lm-shadow);
  font-size: 9px; font-family: var(--lm-font-mono); border: 1px solid var(--lm-border);
}

.popup-edit { color: var(--lm-text); font-size: 10px; }
.popup-edit input, .popup-edit select, .popup-edit textarea {
  width: 100%; margin-bottom: 4px; box-sizing: border-box; font-size: 10px;
  font-family: var(--lm-font-mono); padding: 3px; border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-sm); background: var(--lm-surface-2); color: var(--lm-text);
}

/* MARCADORES E INSIGNIA AUDITADA (LEMEIT) */
.custom-icon {
  background: none !important;
  border: none !important;
}

.custom-marker-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
}

.marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px var(--lm-shadow);
  display: block;
  box-sizing: border-box;
}

/* Estilo del ícono base */
.custom-marker-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
}

/* Badge de auditado integrado EXACTAMENTE sobre el punto */
.badge-auditado {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--lm-good, #2e7d32);
  color: #ffffff;
  font-size: 8px;
  font-weight: bold;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Control de Capas de Leaflet (Rutas, Hitos, Trazas) con paleta Lemeit */
.leaflet-control-layers-expanded {
  background-color: var(--lm-surface-2, #252a36) !important;
  color: var(--lm-text, #e1e6ed) !important;
  border: 1px solid var(--lm-border, #2b303c) !important;
  border-radius: var(--lm-radius-sm, 6px) !important;
  padding: 8px 12px !important;
  font-family: var(--lm-font-sans, system-ui, -apple-system, sans-serif) !important;
  font-size: 11px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.leaflet-control-layers-overlays label,
.leaflet-control-layers-base label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

.leaflet-control-layers-overlays input[type="checkbox"],
.leaflet-control-layers-base input[type="radio"] {
  accent-color: var(--lm-accent, #0097A7) !important;
  cursor: pointer !important;
}

/* Badge de auditado en esquina inferior derecha */
.badge-auditado {
  position: absolute;
  bottom: -2px; 
  right: -2px;
  background: #009688; 
  color: #FFFFFF;
  font-size: 8px; 
  font-weight: bold;
  line-height: 9px; 
  text-align: center;
  width: 10px; 
  height: 10px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  box-shadow: 0 1px 2px var(--lm-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-control-layers {
  background: var(--lm-surface) !important; color: var(--lm-text) !important;
  border: 1px solid var(--lm-border) !important; border-radius: var(--lm-radius) !important;
  font-size: 10px; padding: 6px; box-shadow: 0 2px 8px var(--lm-shadow) !important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--lm-surface) !important; color: var(--lm-text) !important; border: 1px solid var(--lm-border);
}

.portal-salidas{margin-top:12px;padding-top:10px;border-top:1px solid var(--lm-border)}
.portal-boton{display:block;width:100%;min-height:34px;margin:6px 0;padding:9px 8px;text-align:center;text-decoration:none;font:inherit;font-size:11px;font-weight:600;color:var(--lm-text);background:var(--lm-surface-2);border:1px solid var(--lm-border);border-radius:var(--lm-radius-sm);cursor:pointer}
.portal-boton:hover{border-color:var(--lm-accent);background:var(--lm-surface-2)}
.portal-formatos{margin-top:8px;font-size:11px;color:var(--lm-text-dim)}
.portal-formatos summary{cursor:pointer;padding:6px 0}
.portal-formatos-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.panel-auditoria{max-height:calc(100dvh - 24px);display:flex;flex-direction:column}
.panel-header{flex-shrink:0}
.panel-body{min-height:0;overflow-y:auto}

.marca h1 img.marca-a,.marca-mapa h1 img.marca-a{display:inline-block;width:1em;height:1em;vertical-align:-.16em;margin-left:-.08em;object-fit:contain}

/* Herramientas de la ventana flotante: una sola jerarquía de acciones. */
.panel-auditoria{width:250px;left:58px;max-width:calc(100vw - 76px)}
.panel-body .portal-boton{font-size:12px;min-height:36px}
.panel-body .principal{background:var(--lm-accent);color:var(--lm-text)}
.vista-panel[hidden]{display:none}
.herramientas-accesos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.accion-volver{background:transparent;border:0;color:var(--lm-text-dim);font:inherit;font-size:12px;padding:6px 0;cursor:pointer}
.accion-volver:hover{color:var(--lm-text)}
.titulo-herramienta{font-size:15px;margin:10px 0 16px;color:var(--lm-text)}
.origen-estado,.ayuda-panel{font-size:10px;color:var(--lm-text-dim);margin:8px 0}
.accion-texto{background:none;border:0;color:var(--lm-text);text-decoration:underline;cursor:pointer;font:inherit;padding:4px 0;display:block}
.opcion-capa{display:block;font-size:12px;margin:8px 0}.opcion-capa input{accent-color:var(--lm-accent)}
.leyenda-compacta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;font-size:10px;color:var(--lm-text-dim)}
.leyenda-compacta span:before{content:'●';color:var(--color);margin-right:5px}
.estado-integrado{position:static;margin-top:12px;padding-top:10px;border-top:1px solid var(--lm-border);font-size:10px;color:var(--lm-text-dim);line-height:1.5;overflow-wrap:anywhere}
.historial-dialog{box-sizing:border-box;width:min(940px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--lm-border);border-radius:var(--lm-radius);background:var(--lm-surface);color:var(--lm-text);padding:22px;font:13px var(--lm-font-sans)}
.historial-dialog::backdrop{background:rgba(0,0,0,.55)}
.historial-cabecera{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.historial-cabecera h2{font-size:19px;margin:0}
.historial-dialog .rec-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}.historial-dialog #resultados{max-height:45vh;overflow:auto}
.historial-dialog .registro,.historial-dialog .version{padding:12px 0;border-bottom:1px solid var(--lm-border)}
.historial-dialog .registro button,.historial-dialog .btn{font:inherit;background:var(--lm-surface-2);color:var(--lm-text);border:1px solid var(--lm-border);border-radius:var(--lm-radius-sm);padding:10px;cursor:pointer}
.historial-dialog .registro button{width:100%;text-align:left}.historial-dialog .btn{display:inline-block;text-decoration:none;margin:4px}
.historial-dialog input,.historial-dialog select{box-sizing:border-box;width:100%;margin:8px 0 14px;padding:9px;background:var(--lm-surface-2);color:var(--lm-text);border:1px solid var(--lm-border);border-radius:var(--lm-radius-sm)}
.historial-dialog p{color:var(--lm-text-dim);line-height:1.5;overflow-wrap:anywhere}.historial-dialog button:disabled{opacity:.5}
@media(max-width:650px){.historial-dialog .rec-grid{grid-template-columns:1fr}.historial-dialog #resultados{max-height:25vh}}