/* ═══════════════════════════════════════════════════════════
   LOTIZACIÓN CSS - Compatible iOS · Android · Desktop
   ═══════════════════════════════════════════════════════════ */

/* ─── Hotspot del plano en el suelo ─── */
/* El plano SVG tiene viewBox 6617×9356 (portrait).
   El container usa el mismo aspect ratio (6617/9356 ≈ 0.7072):
   ancho=3600 → alto=3600×9356/6617=5090.16
   Así plano.svg fondo y overlay SVG se superponen EXACTOS sin deformación. */
.lotizacion-hotspot-container {
  position: relative;
  width: 3600px;
  height: 5090.16px;
  transform-origin: center center;
  /* Permite que los hijos participen del espacio 3D real (movimiento XYZ) */
  transform-style: preserve-3d;
  /* Anti-aliasing suave */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Wrapper interno: rotación y desplazamiento (lotes-data.js → plano) */
.lotizacion-plano-transform {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Fondo inline del plano (div que contiene el <svg> inyectado) */
.lotizacion-plano-img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.lotizacion-plano-img svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lotizacion-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

/* ─── Manzanas en el SVG overlay ─── */
.manzana-group {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lote-path {
  -webkit-tap-highlight-color: transparent;
  transition: fill 0.15s ease;
}

/* ─── Overlay oscuro (fondo panel) ─── */
#overlay-oscuro {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 900;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#overlay-oscuro.visible {
  display: block;
}

/* ─── Panel de manzana ─── */
#panel-manzana {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  background: linear-gradient(160deg, #0d1b2a 0%, #112233 100%);
  color: #fff;
  z-index: 1000;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  border-left: 1px solid rgba(0, 200, 100, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#panel-manzana.visible {
  display: flex;
  transform: translateX(0);
}

/* Mobile: panel a pantalla completa */
@media (max-width: 500px) {
  #panel-manzana {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 75%;
    border-left: none;
    border-top: 1px solid rgba(0, 200, 100, 0.3);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  #panel-manzana.visible {
    display: flex;
    transform: translateY(0);
  }
}

/* ─── Header del panel ─── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 200, 100, 0.08);
  flex-shrink: 0;
}

.panel-header-info h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #00ff88;
  letter-spacing: 0.5px;
}

#panel-manzana-total {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  display: block;
}

.panel-cerrar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s;
}

.panel-cerrar:hover {
  background: rgba(255, 60, 60, 0.3);
}

/* ─── Cuerpo del panel ─── */
.panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* ─── Preview SVG de la manzana ─── */
.panel-preview {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-preview svg {
  max-width: 100%;
  max-height: 100%;
}

/* ─── Info del lote seleccionado ─── */
.panel-lote-info {
  margin: 10px 14px 0;
  padding: 10px 14px;
  background: rgba(0, 200, 100, 0.1);
  border: 1px solid rgba(0, 200, 100, 0.3);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.badge-disponible   { color: rgba(255,255,255,0.8); font-weight: 700; }
.badge-reservado    { color: #FFB400; font-weight: 700; }
.badge-vendido      { color: #FF5555; font-weight: 700; }
.badge-nodisponible { color: #6FB7FF; font-weight: 700; }

/* ─── Leyenda ─── */
.panel-leyenda {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.ley-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}

.ley-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.ley-disponible::before  { background: transparent;                border: 1px solid #9aa5b1; }
.ley-reservado::before   { background: rgba(241,196,15,0.65);      border: 1px solid #f39c12; }
.ley-vendido::before     { background: rgba(231,76,60,0.65);       border: 1px solid #c0392b; }
.ley-nodisponible::before{ background: rgba(26,46,110,0.75);       border: 1px solid #0d1e4f; }

/* ─── Lista de lotes ─── */
.panel-lista-lotes {
  padding: 0 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lote-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
  font-size: 12px;
}

.lote-item:hover,
.lote-item:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.lote-num {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.lote-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 3px;
}

.estado-disponible .lote-badge {
  background: transparent;
  color: rgba(255,255,255,0.85);
}

.estado-reservado .lote-badge {
  background: rgba(241,196,15,0.22);
  color: #f1c40f;
}

.estado-vendido .lote-badge {
  background: rgba(231,76,60,0.22);
  color: #e74c3c;
}

.estado-nodisponible .lote-badge {
  background: rgba(26,46,110,0.30);
  color: #8ea8e6;
}

/* ─── Safe area para iOS (notch/home indicator) ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #panel-manzana,
  #panel-lote {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ═══════════════════════════════════════════════════════════
   MODO AJUSTE DEL PLANO (mover XYZ + esquinas)
   ═══════════════════════════════════════════════════════════ */

/* Capa de arrastre sobre el plano (solo en modo ajuste) */
.plano-drag-layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  cursor: move;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body.plano-editando .lotizacion-overlay {
  pointer-events: none;
}

body.plano-editando .plano-drag-layer {
  display: block;
}

body.plano-editando .lotizacion-plano-img {
  opacity: 0.92;
}

/* Handles de las 4 esquinas */
.plano-corner {
  display: none;
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.22);
  border: 3px solid #00ff88;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.6), inset 0 0 8px rgba(0, 255, 136, 0.4);
  z-index: 30;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  user-select: none;
}

.plano-corner:active {
  cursor: grabbing;
}

.plano-corner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #00ff88;
}

/* Handle de esquina BLOQUEADA / FIJADA (rojo/dorado fijo) */
.plano-corner.bloqueada {
  background: rgba(255, 68, 68, 0.35);
  border: 3px solid #ff4444;
  box-shadow: 0 0 16px rgba(255, 68, 68, 0.8), inset 0 0 8px rgba(255, 68, 68, 0.5);
  cursor: not-allowed;
}

.plano-corner.bloqueada::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  background: transparent;
  font-size: 14px;
  line-height: 1;
}

.plano-corner-label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #00ff88;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 136, 0.4);
  pointer-events: none;
  white-space: nowrap;
}

.plano-corner.bloqueada .plano-corner-label {
  color: #ff6b6b;
  border-color: rgba(255, 68, 68, 0.5);
}

body.plano-editando .plano-corner {
  display: block;
}

/* ─── Botones de bloqueo de esquinas en editor ─── */
.pe-esq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 12px;
}

.pe-esq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 7px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pe-esq-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.pe-esq-btn.bloqueado {
  background: rgba(255, 68, 68, 0.2);
  border-color: #ff4444;
  color: #ff8888;
}

.pe-seccion-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #FFD700;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

/* ─── Botón ⚙ modo ajuste ─── */
#plano-editar-btn {
  position: fixed;
  bottom: 128px;
  right: 14px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFD700;
  cursor: pointer;
  z-index: 500;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

#plano-editar-btn:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: #FFD700;
  transform: scale(1.05);
}

#plano-editar-btn:active {
  transform: scale(0.95);
}

#plano-editar-btn.activo {
  background: rgba(255, 215, 0, 0.28);
  border-color: #FFD700;
}

#plano-editar-btn svg {
  pointer-events: none;
}

/* ─── Panel del editor ─── */
#plano-editor {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: min(92vw, 360px);
  max-height: min(70vh, 520px);
  background: linear-gradient(160deg, rgba(13, 27, 42, 0.96), rgba(17, 34, 51, 0.96));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  color: #fff;
  z-index: 1300;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#plano-editor.visible {
  display: block;
}

.pe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.08);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  position: sticky;
  top: 0;
}

.pe-cerrar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pe-cerrar:hover {
  background: rgba(255, 60, 60, 0.35);
}

.pe-cuerpo {
  padding: 10px 14px 14px;
}

.pe-hint {
  margin: 4px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.pe-fila {
  display: grid;
  grid-template-columns: 108px 1fr 52px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}

.pe-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-rango {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.pe-rango::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.pe-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: #FFD700;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.pe-rango::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.pe-rango::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFD700;
  border: 2px solid rgba(0, 0, 0, 0.4);
}

.pe-val {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #FFD700;
  font-weight: 600;
}

.pe-botones {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pe-btn {
  flex: 1;
  padding: 9px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s;
}

.pe-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.pe-btn-primary {
  background: rgba(255, 215, 0, 0.16);
  border-color: rgba(255, 215, 0, 0.55);
  color: #FFD700;
}

.pe-btn-primary:hover {
  background: rgba(255, 215, 0, 0.28);
}

.pe-nota {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* ─── Toast ─── */
#plano-toast {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  max-width: min(88vw, 480px);
  padding: 10px 18px;
  background: rgba(13, 27, 42, 0.95);
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 24px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#plano-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile adjustments */
@media (max-width: 500px) {
  #plano-editar-btn {
    bottom: 138px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  .pe-fila {
    grid-template-columns: 96px 1fr 46px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #plano-editar-btn {
    bottom: calc(128px + env(safe-area-inset-bottom) * 0.4);
  }
}

/* ═══════════════════════════════════════════════════════════
   PANEL DE DETALLE DE UN SOLO LOTE · diseño claro
   (croquis y medidas se mantienen intactos)
   ═══════════════════════════════════════════════════════════ */

#panel-lote {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  background: #ffffff;
  color: #2c3e50;
  z-index: 1000;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#panel-lote.visible {
  display: flex;
  transform: translateX(0);
}

/* ─── Encabezado (lp-header) ─── */
#panel-lote .lp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1a2e6e 0%, #233d8f 100%);
  border-bottom: 3px solid #f5c518;
}

#panel-lote .lp-header h3 {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

#panel-lote .lp-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.15s;
}

#panel-lote .lp-close:hover { background: rgba(255, 255, 255, 0.25); }
#panel-lote .lp-close:active { transform: scale(0.92); }

/* ─── Cuerpo ─── */
#panel-lote .lp-body {
  flex: 1;
  padding-bottom: 20px;
}

.lp-subtitle {
  margin: 2px 16px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #8a94a6;
}

/* Fila: badge de estado + consulta rápida */
.lp-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 14px;
}

.lp-status-badge {
  padding: 6px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lp-badge-disponible { background: #eef1f4; color: #495057;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.lp-badge-reservado  { background: #f39c12; }
.lp-badge-vendido    { background: #e74c3c; }
.lp-badge-nodisponible { background: #2980b9; }

.ll-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(73 231 68 / 34%);
  color: #128c1e;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.15s;
}

.ll-btn-wa:hover { background: rgb(73 231 68 / 55%); }
.ll-btn-wa:active { transform: scale(0.96); }

.ll-btn-wa svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: #128c1e;
}

/* ─── Divisor y filas etiqueta/valor ─── */
.lp-divider {
  height: 1px;
  background: #e8ecf1;
  margin: 2px 16px 14px;
}

.lp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px 14px;
  font-size: 14.5px;
}

.lp-label {
  color: #7b8794;
  font-weight: 600;
}

.lp-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #bcddff;
  color: #1f2d3d;
  font-weight: 800;
  line-height: 1;
}

/* ─── Grilla de medidas del lote (Frente, Fondo, Izquierdo, Derecho) ─── */
.lp-medidas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 14px 14px;
}

.lp-medida-item {
  background: #f4f7fa;
  border: 1px solid #e1e7ec;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-medida-label {
  font-size: 12px;
  color: #6c7a89;
  font-weight: 600;
}

.lp-medida-val {
  font-size: 13px;
  font-weight: 700;
  color: rgb(0, 15, 133);
}

/* Mobile: hoja inferior a pantalla completa */
@media (max-width: 500px) {
  #panel-lote {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 75%;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  #panel-lote.visible {
    display: flex;
    transform: translateY(0);
  }
}

/* ─── Croquis del lote (fondo blanco, marco azul) ─── */
.panel-lote-croquis {
  margin: 0 14px;
  background: #ffffff;
  border: 5px solid rgb(0 15 133);
  border-radius: 10px;
  padding: 6px;
}

.croquis-vacio {
  padding: 30px 10px;
  text-align: center;
  color: #8a94a6;
  font-size: 13px;
}

/* ─── Sin datos ─── */
.lote-sin-datos {
  margin: 16px 14px;
  padding: 18px 16px;
  background: rgba(243, 156, 18, 0.09);
  border: 1px dashed rgba(243, 156, 18, 0.55);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: #5a6672;
}

.lote-sin-datos strong { color: #1f2d3d; }

.lote-sin-datos .hint {
  font-size: 11px;
  color: #98a2ae;
}

/* ═══════════════════════════════════════════════════════════
   BOTÓN DE WHATSAPP (visible para compradores)
   ═══════════════════════════════════════════════════════════ */

#whatsapp-btn {
  position: fixed;
  bottom: 70px;
  left: 14px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(37, 211, 102, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

#whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(37, 211, 102, 0.3);
}

#whatsapp-btn:active {
  transform: scale(0.94);
}

#whatsapp-btn svg {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

@media (max-width: 500px) {
  #whatsapp-btn {
    bottom: 80px;
    left: 10px;
    width: 52px;
    height: 52px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #whatsapp-btn {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   DETALLES DEL LOTE · precio establecido (visible compradores)
   ═══════════════════════════════════════════════════════════ */

:root{--blue:#0055a5;--blue-light:#e6f0fa;--blue-dark:#003d73;--gray-50:#f8fafc;--gray-200:#e2e8f0;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-900:#0f172a;--yellow:#f5c518;--green:#16a34a;--red:#dc2626}

/* ══════════════════════════════════════════
   COTIZADOR — panel lateral (igual referencia)
   ══════════════════════════════════════════ */
.lp-cotizador{margin-top:6px}
.lp-cotizador.hidden{display:none !important}
.cotizador-title{font-size:0.95rem;font-weight:800;text-transform:uppercase;letter-spacing:0.15em;color:var(--blue,#0055a5);margin:0 16px 12px;padding-bottom:6px;border-bottom:3px solid var(--yellow,#f5c518)}
.cotizador-title::before{content:'';display:inline-block;width:5px;height:18px;background:var(--yellow,#f5c518);border-radius:2px;margin-right:10px;vertical-align:-3px}
.cot-fase-badge{display:inline-block;font-size:0.72rem;font-weight:700;color:var(--blue-dark,#003d73);background:var(--blue-light,#e6f0fa);border:1.5px solid rgba(0,85,165,0.25);border-radius:20px;padding:5px 12px;margin:0 16px 14px}
.cot-fase-badge--especial{background:rgba(245,197,24,0.18);color:#b8860b;border-color:rgba(245,197,24,0.35)}
.cot-modo-toggle{display:flex;gap:0;margin:0 16px 14px;border-radius:10px;overflow:hidden;border:2px solid var(--blue,#0055a5);background:#fff}
.cot-modo-btn{flex:1;padding:9px 12px;border:none;font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;transition:all 0.2s;background:#fff;color:var(--blue,#0055a5)}
.cot-modo-btn.active{background:var(--blue,#0055a5);color:#fff}
.cot-modo-btn:not(.active):hover{background:rgba(0,85,165,0.08)}
.cot-row-cuotas-precio{margin-top:10px}
.cot-divider-sm{height:1px;background:rgba(0,85,165,0.12);margin:12px 0}
.cot-contado-box.modo-active{border-color:var(--blue,#0055a5);box-shadow:0 3px 16px rgba(0,85,165,0.18)}
.cot-cuotas-section.modo-active .cot-cuotas-title{color:var(--blue,#0055a5)}
.cot-contado-box{background:linear-gradient(145deg,rgba(0,85,165,0.08),rgba(245,197,24,0.10));border:2px solid rgba(0,85,165,0.25);border-radius:14px;padding:16px 14px;margin:0 16px 6px;position:relative;box-shadow:0 3px 12px rgba(0,85,165,0.10)}
.cot-contado-header{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--blue,#0055a5);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid rgba(0,85,165,0.15)}
.cot-contado-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:2px dashed rgba(0,85,165,0.12)}
.cot-contado-label{font-size:0.85rem;font-weight:700;color:var(--gray-700,#334155);text-transform:uppercase;letter-spacing:0.05em}
.cot-contado-value{font-size:1.6rem;font-weight:900;color:var(--blue,#0055a5);font-family:'DM Mono',ui-monospace,monospace;text-shadow:0 1px 2px rgba(0,85,165,0.12)}
.cot-divider-lg{height:2px;background:linear-gradient(90deg,rgba(0,85,165,0.20),rgba(245,197,24,0.25),rgba(0,85,165,0.20));border-radius:2px;margin:16px 16px}
.cot-cuotas-section{padding:2px 16px}
.cot-cuotas-section.hidden{display:none !important}
.cot-cuotas-title{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--gray-700,#334155);margin-bottom:14px;padding-bottom:6px;border-bottom:2px solid var(--yellow,#f5c518)}
.cot-inicial-block{margin-bottom:14px;padding:12px;background:rgba(0,85,165,0.03);border-radius:10px;border:1px solid rgba(0,85,165,0.10)}
.cot-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:0.85rem;padding:10px 0;border-bottom:1px solid rgba(0,85,165,0.06)}
.cot-row-lg{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,85,165,0.10)}
.cot-row-label{color:var(--gray-600,#475569);font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em}
.cot-row-value{font-weight:700;color:var(--gray-900,#0f172a);font-family:'DM Mono',ui-monospace,monospace;font-size:1.05rem}
.cot-row-value--blue{color:var(--blue,#0055a5)}
.cot-row-value--accent{color:#d97706;font-size:1.15rem}
.cot-row-value--highlight{font-size:1.25rem;color:var(--blue,#0055a5)}
.cot-slider-block{margin-top:14px}
.cot-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cot-slider-head label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--gray-600,#475569)}
.cot-slider-value{font-size:0.90rem;font-weight:800;color:var(--blue,#0055a5);font-family:'DM Mono',ui-monospace,monospace}
.cot-range{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:var(--gray-200,#e2e8f0);border-radius:999px;outline:none;cursor:pointer}
.cot-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--blue,#0055a5);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,85,165,0.35)}
.cot-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue,#0055a5);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,85,165,0.35)}
.cot-range-hint{font-size:0.68rem;color:var(--gray-500,#64748b);margin-top:4px}
.cot-result-card{margin:0 16px;margin-top:16px;padding:16px 14px;border-radius:12px;background:linear-gradient(145deg,rgba(0,85,165,0.07),rgba(245,197,24,0.08));border:2px solid rgba(0,85,165,0.20)}
.cot-result-card .cot-row-label{color:var(--gray-600,#475569)}
.cot-result-card .cot-row-value{color:var(--gray-900,#0f172a)}
.cot-cuota-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:2px solid rgba(0,85,165,0.15)}
.cot-cuota-label{font-size:0.85rem !important;color:var(--blue,#0055a5) !important}
.cot-cuota-value{font-size:1.55rem;font-weight:900;color:var(--blue,#0055a5);font-family:'DM Mono',ui-monospace,monospace;text-shadow:0 1px 2px rgba(0,85,165,0.12)}
#cot-content.hidden{display:none !important}
.cot-unavailable{font-size:0.85rem;color:var(--gray-500,#64748b);font-style:italic;padding:10px 16px}
.cot-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 32px);margin:14px 16px;padding:12px 16px;background:#25d366;color:#fff;border:none;border-radius:10px;font-size:0.88rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background 0.2s,transform 0.15s;box-shadow:0 3px 14px rgba(37,211,102,0.35)}
.cot-wa-btn:hover{background:#1ebe5d;transform:translateY(-1px)}
.cot-wa-btn:active{transform:translateY(0)}
.cot-wa-btn svg{width:20px;height:20px;flex-shrink:0}
.cot-admin-options{margin:16px;padding:14px;border-radius:12px;background:rgba(0,85,165,0.05);border:1.5px dashed rgba(0,85,165,0.30)}
.cot-admin-options.hidden{display:none !important}
.cot-opt-group{margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cot-opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.cot-opt-label{font-size:0.70rem;font-weight:700;color:var(--gray-600,#475569);text-transform:uppercase;letter-spacing:0.04em;display:flex;flex-direction:column;gap:4px}
.cot-opt-input{width:100%;box-sizing:border-box;padding:7px 9px;border-radius:6px;font-size:0.85rem;background:#fff;border:1.5px solid rgba(0,85,165,0.20);color:#0f172a;outline:none;transition:border-color 0.15s}
.cot-opt-input:focus{border-color:var(--blue,#0055a5)}
.cot-opt-save{width:100%;padding:9px 14px;border-radius:8px;font-size:0.80rem;font-weight:700;background:var(--blue,#0055a5);color:#fff;border:none;cursor:pointer;transition:background 0.2s}
.cot-opt-save:hover{background:#003d73}
.cot-status-card{text-align:center;padding:18px 14px;margin:12px 16px;border-radius:14px;background:linear-gradient(145deg,rgba(0,85,165,0.06),rgba(245,197,24,0.07));border:1.5px solid rgba(0,85,165,0.18)}
.cot-status-card.hidden{display:none !important}
.cot-status-icon{font-size:2.2rem;margin-bottom:10px}
.cot-status-title{font-size:1.05rem;font-weight:800;color:var(--blue,#0055a5);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.04em}
.cot-status-desc{font-size:0.85rem;color:var(--gray-600,#475569);line-height:1.5;margin-bottom:10px}
.cot-status-cta{font-size:0.82rem;font-weight:700;color:var(--yellow,#f5c518);letter-spacing:0.03em}
#cot-phase-selector{padding:3px 8px;border-radius:4px;font-size:0.75rem;font-weight:600;cursor:pointer;outline:none}
#lp-body{max-height:calc(100dvh - 108px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#lp-diagram{flex-shrink:0}
@media (max-width:640px){.lot-panel{width:calc(100vw - 16px) !important;right:8px !important;left:8px !important;top:auto !important;bottom:8px !important;max-height:calc(100dvh - 56px)}#lp-body{max-height:calc(100dvh - 140px)}.cot-admin-grid{grid-template-columns:1fr}#wa-float-btn{bottom:calc(8px + min(72vh, 520px))}.cot-contado-value{font-size:1.4rem}.cot-cuota-value{font-size:1.35rem}}

/* ─── Pie del panel (mensaje final) ─── */
.lp-footer{margin:16px 16px 6px;padding-top:12px;border-top:2px solid #f5c518;font-size:0.72rem;text-align:center;color:#1a2e6e;font-weight:600;border-radius:0 0 8px 8px}
.lp-footer-titulo{color:#f39c12;font-weight:700;font-size:0.9rem;margin-bottom:4px}
.lp-footer-sub{font-size:0.75rem;color:#666;font-style:italic}

/* ═══════════════════════════════════════════════════════════
   MODO ADMINISTRADOR · botón 🔑 · login · edición de lotes
   ═══════════════════════════════════════════════════════════ */

#admin-btn {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#admin-btn:hover {
  opacity: 1;
  background: rgba(140, 140, 150, 0.4);
}

#admin-btn.activo {
  opacity: 1;
  background: rgba(80, 170, 255, 0.35);
  border-color: rgba(120, 190, 255, 0.55);
  color: #d6ecff;
}

#admin-btn svg {
  pointer-events: none;
  width: 15px;
  height: 15px;
}

@media (max-width: 500px) {
  #admin-btn {
    top: 10px;
    right: 10px;
    left: auto;
    width: 32px;
    height: 32px;
  }
}

@supports (top: env(safe-area-inset-top)) {
  #admin-btn {
    top: calc(10px + env(safe-area-inset-top));
  }
}

/* ─── Modal de acceso ─── */
#admin-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1500;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#admin-modal.visible {
  display: flex;
}

.admin-card {
  position: relative;
  width: min(88vw, 320px);
  background: linear-gradient(160deg, #0d1b2a 0%, #112233 100%);
  border: 1px solid rgba(80, 170, 255, 0.4);
  border-radius: 14px;
  padding: 22px 20px 20px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.admin-card h3 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 1px;
  color: #6fb7ff;
  text-align: center;
}

.admin-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.admin-cerrar:hover {
  background: rgba(255, 60, 60, 0.35);
}

#admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#admin-form input {
  width: 100%;
  padding: 11px 13px;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

#admin-form input:focus {
  border-color: #6fb7ff;
  box-shadow: 0 0 0 2px rgba(80, 170, 255, 0.25);
}

.admin-enviar,
.admin-logout {
  width: 100%;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #2f7fd6, #22558f);
  border: 1px solid rgba(120, 190, 255, 0.5);
  border-radius: 9px;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.15s;
}

.admin-enviar:hover { filter: brightness(1.15); }
.admin-enviar:disabled { opacity: 0.6; }

.admin-vista-sesion p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.admin-logout {
  background: rgba(255, 60, 60, 0.16);
  border-color: rgba(255, 100, 100, 0.5);
}

/* Vista según sesión */
body.modo-admin #admin-modal .admin-vista-login { display: none; }
body:not(.modo-admin) #admin-modal .admin-vista-sesion { display: none; }

/* Defensa extra: sin sesión admin nunca se ven controles de edición */
body:not(.modo-admin) .admin-box,
body:not(.modo-admin) .admin-select-estado { display: none !important; }
/* En dashboard admin (/admin/*) los controles deben verse aunque lotizacion.js aún no haya puesto .modo-admin */
body.dashboard-mode .admin-box { display: block !important; }

/* ── Editar lote TAL CUAL ProyectoLotizacionPlayas (pills + fase selector) ── */
.admin-box .lp-status-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.admin-box .lp-status-option{padding:6px 12px;border-radius:20px;font-size:0.7rem;font-weight:600;border:1px solid #cbd5e1;cursor:pointer;background:#fff;color:#334155;display:flex;align-items:center;gap:6px;transition:all 0.15s;}
.admin-box .lp-status-option .lp-status-check{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;flex-shrink:0;}
.admin-box .lp-status-option:hover{border-color:#0055a5;}
.admin-box .lp-status-option.active-libre{background:#f0fdf4;border-color:#16a34a;color:#16a34a;}
.admin-box .lp-status-option.active-libre .lp-status-check{background:#2ecc71;border-color:#2ecc71;}
.admin-box .lp-status-option.active-separado{background:#fffbeb;border-color:#b45309;color:#b45309;}
.admin-box .lp-status-option.active-separado .lp-status-check{background:#f1c40f;border-color:#f1c40f;}
.admin-box .lp-status-option.active-comprado{background:#fef2f2;border-color:#dc2626;color:#dc2626;}
.admin-box .lp-status-option.active-comprado .lp-status-check{background:#e74c3c;border-color:#e74c3c;}
.admin-box .lp-status-option.active-bloqueado{background:rgba(26,46,110,0.12);border-color:#1a2e6e;color:#1a2e6e;}
.admin-box .lp-status-option.active-bloqueado .lp-status-check{background:#8fa3d8;border-color:#8fa3d8;}
.admin-box .lp-admin-message{margin-top:8px;font-size:0.75rem;padding:8px;border-radius:6px;background:#f0fdf4;color:#16a34a;display:none;}
.admin-box .lp-admin-message.visible{display:block;}
.admin-box .lp-admin-message.error{background:rgba(231,76,60,0.15);color:#e74c3c;}
#cot-fase-selector{padding:3px 8px;border-radius:6px;font-size:0.72rem;font-weight:700;background:var(--blue-light,#e6f0fa);border:1px solid rgba(0,85,165,0.25);color:var(--blue-dark,#003d73);cursor:pointer;outline:none;margin-left:8px;}

/* ─── Editor dentro del panel del lote ─── */
.admin-box {
  margin: 14px 14px 18px;
  padding: 12px 14px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.admin-box-titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #6fb7ff;
  margin-bottom: 10px;
}

.admin-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.admin-fila label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.admin-box select,
.admin-box input[type="number"] {
  flex: 1;
  max-width: 170px;
  padding: 8px 10px;
  font-size: 13px;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  outline: none;
}

.admin-box select:focus,
.admin-box input[type="number"]:focus {
  border-color: #6fb7ff;
}

.admin-guardar-btn {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #2f7fd6, #22558f);
  border: 1px solid rgba(120, 190, 255, 0.5);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.15s;
}

.admin-guardar-btn:hover { filter: brightness(1.15); }
.admin-guardar-btn:disabled { opacity: 0.6; }

/* Selector rápido por lote en la lista de la manzana */
.lote-item .admin-select-estado {
  padding: 3px 4px;
  font-size: 9.5px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.lote-item .admin-select-estado[data-estado="disponible"] { background: rgba(46,204,113,.18); border-color: #2ecc71; color: #2ecc71; }
.lote-item .admin-select-estado[data-estado="reservado"] { background: rgba(241,196,15,.18); border-color: #f1c40f; color: #f1c40f; }
.lote-item .admin-select-estado[data-estado="vendido"] { background: rgba(231,76,60,.18); border-color: #e74c3c; color: #e74c3c; }
.lote-item .admin-select-estado[data-estado="nodisponible"] { background: rgba(120,140,200,.18); border-color: #8fa3d8; color: #cdd8f5; }
.lote-item .admin-select-estado option { background: #17233b; color: #fff; }
}

/* ─── Editor de WhatsApp general (solo admin, dentro del modal) ─── */
.admin-wa {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(80, 170, 255, 0.25);
  text-align: left;
}

.admin-wa-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #6fb7ff;
  margin-bottom: 9px;
}

.admin-wa input,
.admin-wa textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}

.admin-wa input:focus,
.admin-wa textarea:focus {
  border-color: #6fb7ff;
}

.admin-enviar-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-color: rgba(37, 211, 102, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN DENTRO DEL PANEL CLARO DEL LOTE (solo sesión admin)
   ═══════════════════════════════════════════════════════════ */

#panel-lote .admin-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

/* ─── Alta calidad antialias para cuadros independientes (evitar dientes de sierra) ─── */
.cuadro-independiente-container,
.cuadro-independiente-container svg,
.cuadro-independiente-container rect,
.cuadro-independiente-container polygon {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  image-rendering: auto;
}
.cuadro-independiente-container svg {
  vector-effect: non-scaling-stroke;
}
.lote-path {
  shape-rendering: geometricPrecision;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ══════════════════════════════════════════
   BRÚJULA (compass-widget) — igual referencia
   En modo admin logueado se oculta (dashboard no la usa, igual que Proyecto)
   ══════════════════════════════════════════ */
body.modo-admin #compass-widget,
body.dashboard-mode #compass-widget{display:none !important;}
#compass-widget{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:74px;height:74px;z-index:500;pointer-events:none;-webkit-user-select:none;user-select:none}
#compass-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,rgba(20,30,60,0.82) 40%,rgba(15,23,42,0.72) 100%);border:1.5px solid rgba(245,197,24,0.55);box-shadow:0 0 0 1px rgba(255,255,255,0.06),0 4px 18px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);will-change:transform;transition:transform 0.08s linear}
.compass-label{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:flex-start;justify-content:center;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:800;line-height:1;letter-spacing:0.03em;padding-top:5px;box-sizing:border-box;color:#94a3b8;pointer-events:none}
.lbl-n{color:#f5c518;font-size:12px;text-shadow:0 0 8px rgba(245,197,24,0.7)}
.lbl-e{transform:rotate(90deg)} .lbl-s{transform:rotate(180deg);color:#e2e8f0} .lbl-o{transform:rotate(270deg)}
#compass-needle{position:absolute;top:50%;left:50%;width:4px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.needle-n{width:3px;height:20px;background:linear-gradient(to bottom,#ef4444,#b91c1c);border-radius:2px 2px 0 0;box-shadow:0 0 6px rgba(239,68,68,0.6);margin-bottom:0}
.needle-s{width:3px;height:18px;background:linear-gradient(to top,#e2e8f0,#94a3b8);border-radius:0 0 2px 2px}
#compass-center{position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#f5c518 0%,#d97706 100%);box-shadow:0 0 6px rgba(245,197,24,0.6);pointer-events:none;z-index:1}
@media (max-width:480px){#compass-widget{top:14px;width:62px;height:62px}.compass-label{font-size:9.5px;padding-top:4px}.lbl-n{font-size:10.5px}.needle-n{height:16px}.needle-s{height:14px}#compass-center{width:7px;height:7px}}
.lote-no-click{pointer-events:none !important;cursor:default !important}
.lote-no-click .lote-badge{opacity:0.7}

/* ══════════════════════════════════════════
   HEADER ADMIN en la misma web (sin /admin/*)
   Mi Link · Imagen · Mapa SVG · PDF · Lista · Cerrar sesión
   Solo visible con body.modo-admin
   ══════════════════════════════════════════ */
#admin-topbar{
  position:fixed;top:0;left:0;width:100%;height:48px;z-index:1200;
  display:none;align-items:center;justify-content:space-between;
  padding:0 16px;background:rgba(15,23,42,0.96);color:#fff;font-size:0.875rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-sizing:border-box;
}
body.modo-admin #admin-topbar{display:flex;}
body.modo-admin #pano{top:0;height:100%;}
#admin-topbar-left{display:flex;align-items:center;gap:10px;white-space:nowrap;}
.admin-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e88;flex-shrink:0;}
.topbar-sep{width:1px;height:20px;background:rgba(255,255,255,0.2);}
.topbar-label{color:#94a3b8;font-weight:400;font-size:0.78rem;}
#topbar-actions{display:flex;align-items:center;gap:8px;}
#topbar-actions button,#topbar-actions a{
  display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  font-size:0.8rem;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,0.18);transition:all 0.15s;font-family:inherit;
}
#topbar-actions svg{width:14px;height:14px;flex-shrink:0;}
#btn-mi-link{background:linear-gradient(135deg,#6c63ff,#4a90e2);border-color:rgba(255,255,255,0.25);color:#fff;font-weight:700;}
#btn-mi-link:hover{filter:brightness(1.12);}
#topbar-actions .btn-export{background:#2ecc71;border-color:rgba(255,255,255,0.18);color:#fff;}
#topbar-actions .btn-export:hover{background:#27ae60;}
#topbar-actions .btn-export.svg-btn{background:#e67e22;}
#topbar-actions .btn-export.svg-btn:hover{background:#d35400;}
#topbar-actions .btn-export.pdf-btn{background:#e74c3c;}
#topbar-actions .btn-export.pdf-btn:hover{background:#c0392b;}
#btn-lista-lotes{background:rgba(255,255,255,0.08);color:#e8eaf6;}
#btn-lista-lotes:hover{background:rgba(255,255,255,0.16);}
#btn-admin-logout{background:rgba(255,255,255,0.1);color:#fff;}
#btn-admin-logout:hover{background:rgba(255,255,255,0.22);}
#hamburger-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;cursor:pointer;padding:0;}
#hamburger-btn span{display:block;width:17px;height:2px;background:#fff;border-radius:2px;transition:all 0.25s ease;}
#hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#hamburger-btn.open span:nth-child(2){opacity:0;}
#hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#topbar-overlay{display:none;position:fixed;inset:0;z-index:1198;background:transparent;}
#topbar-overlay.open{display:block;}
#topbar-dropdown{display:none;position:fixed;top:52px;right:12px;min-width:190px;background:#1a2035;border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px;flex-direction:column;gap:6px;z-index:1201;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
#topbar-dropdown.open{display:flex;}
#topbar-dropdown button,#topbar-dropdown a{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:8px;
  font-size:0.82rem;font-weight:600;cursor:pointer;text-decoration:none;border:none;font-family:inherit;
}
#btn-mi-link-m{background:linear-gradient(135deg,#6c63ff,#4a90e2);color:#fff;font-weight:700;width:100%;}
#topbar-dropdown .btn-export{background:#2ecc71;color:#fff;width:100%;}
#topbar-dropdown .btn-export.svg-btn{background:#e67e22;}
#topbar-dropdown .btn-export.pdf-btn{background:#e74c3c;}
#btn-lista-lotes-m{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:#e8eaf6;}
#btn-admin-logout-m{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;}
/* Panel Mi Link */
#mi-link-panel{
  position:fixed;top:56px;right:16px;width:380px;max-width:calc(100vw - 32px);
  background:#1a2035;border:1px solid rgba(108,99,255,0.35);border-radius:16px;padding:20px;
  z-index:1202;box-shadow:0 16px 40px rgba(0,0,0,0.5);display:none;
  flex-direction:column;gap:10px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;
  box-sizing:border-box;
}
#mi-link-panel.open{display:flex;}
.mlp-title{font-size:0.95rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;}
.mlp-subtitle{font-size:0.75rem;color:rgba(255,255,255,0.5);}
.mlp-divider{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:4px 0;}
.mlp-wa-input{padding:8px 12px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#fff;font-size:0.83rem;width:100%;box-sizing:border-box;font-family:inherit;}
.mlp-wa-input:focus{outline:none;border-color:#6c63ff;}
.mlp-wa-input::placeholder{color:rgba(255,255,255,0.35);}
.mlp-msg{font-size:0.75rem;color:#2ecc71;text-align:center;min-height:16px;}
.mlp-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;}
.mlp-card-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.mlp-card-display{color:#fff;font-weight:700;font-size:0.82rem;}
.mlp-card-slug{color:#6c63ff;font-family:monospace;font-weight:700;font-size:0.78rem;}
.mlp-card-wa{color:rgba(255,255,255,0.5);font-size:0.72rem;}
.mlp-card-actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
.mlp-card-btn{padding:5px 10px;border:none;border-radius:6px;font-size:0.7rem;font-weight:700;cursor:pointer;color:#fff;font-family:inherit;}
.mlp-card-btn.copy{background:#6c63ff;}
.mlp-card-btn.edit{background:#0055a5;}
.mlp-card-btn.del{background:#e63946;}
.mlp-card-btn.save{background:#2ecc71;}
.mlp-card-btn.cancel{background:rgba(255,255,255,0.15);}
.mlp-card-edit-input{padding:7px 10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#fff;font-size:0.8rem;width:100%;box-sizing:border-box;font-family:inherit;}
@media (max-width:600px){
  #topbar-actions > *:not(#hamburger-btn){display:none !important;}
  #hamburger-btn{display:flex !important;}
  #admin-topbar{padding:0 12px;}
  .topbar-label{display:none;}
}

/* ── Modo claro / oscuro para Lotización (sincronizado con nav) ── */
html.theme-light body { background-color:#eef2f7; color:#0f172a; }
html.theme-light #pano { filter: brightness(1.02); }
html.theme-light #panel-manzana { background: linear-gradient(160deg,#f8fafc 0%, #eef2f7 100%); color:#0f172a; border-left-color: rgba(0,85,165,0.15); }
html.theme-light #panel-lote { background:#ffffff; color:#0f172a; }
html.theme-light .panel-header { background: rgba(0,85,165,0.06); border-bottom-color: rgba(0,0,0,0.08); }
html.theme-light .panel-header-info h2 { color:#0055a5; }
html.theme-light #plano-editor { background: linear-gradient(160deg, rgba(248,250,252,0.98), rgba(241,245,249,0.98)); border-color: rgba(0,85,165,0.25); color:#0f172a; }
html.theme-light .pe-header { color:#0055a5; background: rgba(0,85,165,0.07); border-bottom-color: rgba(0,85,165,0.15); }