:root {
  --black: #111111;
  --white: #ffffff;
  --gray-light: #f4f4f4;
  --gray-mid: #cfcfcf;
  --gray-text: #8a8a8a;
  --red: #ff3b3b;
  --green: #1f9d55;
  --amber: #d98a1a;
  --radius: 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--gray-light);
  color: var(--black);
  overflow: hidden;
}
.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.btn-black {
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 14px;
}
.btn-black:hover { background: #2b2b2b; }
.btn-black:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: 8px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 14px;
}

.btn-danger {
  background: transparent;
  color: #c0392b;
  border: 1.5px solid #c0392b;
  border-radius: 8px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 13px;
}

/* ===================== LOGIN ===================== */
.login-screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #111 0%, #2b2b2b 100%);
}
.login-card {
  background: var(--white);
  padding: 40px 36px;
  border-radius: 16px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-card h1 {
  font-size: 20px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-align: center;
}
.login-sub {
  text-align: center;
  color: var(--gray-text);
  margin: 0 0 24px;
  font-size: 13px;
}
.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 14px;
}
.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 14px;
}
.login-card input:focus { outline: none; border-color: var(--black); }
.login-card .btn-black { width: 100%; margin-top: 8px; }
.error-msg {
  background: #fdeeee;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.ok-msg {
  background: #eafaf0;
  color: #1f9d55;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ===================== APP SHELL ===================== */
.app-screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--white);
  border-bottom: 1px solid #eaeaea;
  flex: 0 0 auto;
}
.app-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
}
.profile-wrap { position: relative; }
.profile-icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.6px solid var(--black);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.dropdown-panel {
  position: absolute;
  top: 52px; right: 0;
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  z-index: 60;
}
.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
}
.dropdown-item:hover { background: rgba(255,255,255,0.12); }
.dropdown-sep { height: 1px; background: rgba(255,255,255,0.15); margin: 4px 0; }

.app-main {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--gray-light);
}

/* ===================== FLOOR SELECTOR ===================== */
.floor-selector {
  position: absolute;
  left: 24px; bottom: 24px;
  z-index: 40;
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
  overflow: hidden;
  min-width: 170px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.floor-selector-head {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chev { font-size: 11px; }
.floor-selector-list { display: block; }
.floor-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.floor-item:hover { background: rgba(255,255,255,0.1); }
.floor-item.active { background: var(--white); color: var(--black); font-weight: 700; }

/* ===================== PLAN ===================== */
.plan-viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.plan-viewport.panning {
  cursor: grabbing;
}
.plan-canvas {
  position: relative;
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
}
#plan-image {
  display: block;
  max-width: min(88vw, 1400px);
  max-height: 82vh;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.hotspot-layer {
  position: absolute;
  inset: 0;
}
.hotspot {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.hotspot:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.35); }
.hotspot.selected { border-color: var(--black); background: rgba(0,0,0,0.1); }
.hotspot.cat-bodega { border-color: rgba(180,120,20,0.0); }
.hotspot.status-venta { box-shadow: inset 0 0 0 2px rgba(255,59,59,0.8); }
.hotspot.status-renta { box-shadow: inset 0 0 0 2px rgba(217,138,26,0.8); }
.hotspot.status-nodisp { box-shadow: inset 0 0 0 2px rgba(60,60,60,0.35); }

/* etiqueta de departamento / disponibilidad sobre el plano */
.hotspot-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--white);
  background: rgba(17,17,17,0.82);
  border-radius: 4px;
  padding: 1px 4px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.hotspot-label.label-venta { background: rgba(214,39,39,0.88); }
.hotspot-label.label-renta { background: rgba(197,120,10,0.9); }
.hotspot-label.label-nodisp { background: rgba(50,50,50,0.82); }

/* modo calibración */
.hotspot-layer.calibrating .hotspot {
  background: rgba(31,157,85,0.12);
  border-color: rgba(31,157,85,0.6);
  /* Evita que el navegador intente hacer scroll/zoom nativo mientras se
     arrastra un cajón con el dedo — si no, el gesto de mover el cajón
     compite con el gesto de scroll de la página y el cajón no responde
     bien al tacto. */
  touch-action: none;
}
.hotspot-layer.calibrating .hotspot.selected {
  background: rgba(31,157,85,0.25);
  border-color: #1f9d55;
}
.resize-handle {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 12px; height: 12px;
  background: #1f9d55;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  touch-action: none;
}
/* En pantallas táctiles el punto de agarre de 12px es difícil de tocar
   con precisión — se agranda el área de contacto sin cambiar el tamaño
   visual del punto verde, usando un pseudo-elemento invisible más grande. */
@media (pointer: coarse) {
  .resize-handle { width: 14px; height: 14px; }
  .resize-handle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
  }
}

/* ===================== ZOOM ===================== */
.zoom-controls {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zoom-btn {
  width: 42px; height: 42px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.zoom-reset { font-size: 15px; }

.calib-toggle {
  position: absolute;
  right: 24px; top: 20px;
  z-index: 40;
  background: var(--white);
  border: 1.6px solid var(--black);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.calib-toggle.active {
  background: #1f9d55;
  border-color: #1f9d55;
  color: var(--white);
}

.export-bar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 14px;
}

/* ===================== DETAIL PANEL ===================== */
.detail-panel {
  position: absolute;
  top: 20px;
  right: 24px;
  bottom: 24px;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: var(--black);
  color: var(--white);
  border-radius: 14px;
  padding: 20px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.detail-head h2 {
  font-size: 20px;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.detail-head h2[contenteditable="true"] {
  border-bottom: 1px dashed rgba(255,255,255,0.5);
  outline: none;
}
.detail-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--white);
  width: 30px; height: 30px;
  border-radius: 7px;
  font-size: 14px;
}
.icon-btn:hover { background: rgba(255,255,255,0.22); }

.detail-field { margin-bottom: 12px; }
.detail-field label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.detail-field input,
.detail-field select,
.detail-field textarea {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 14px;
}
.detail-field input:disabled,
.detail-field select:disabled,
.detail-field textarea:disabled {
  background: #e9e9e9;
  color: #555;
}
.detail-field textarea { resize: vertical; min-height: 50px; }
.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.detail-actions .btn-black, .detail-actions .btn-outline {
  flex: 1;
  padding: 10px;
  font-size: 13px;
}
.detail-actions .btn-black { background: var(--white); color: var(--black); }
.detail-actions .btn-black:hover { background: #e2e2e2; }
.detail-actions .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); }
.detail-meta {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* ===================== TOAST ===================== */
.toast {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 80;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.toast.error { background: #c0392b; }
.toast.success { background: #1f9d55; }

/* ===================== MODALS ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--white);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 26px 26px;
}
.modal-card-wide { max-width: 640px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-close { background: var(--gray-light); color: var(--black); }
.modal-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin: 12px 0 4px;
}
.modal-body input, .modal-body select {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 14px;
}
.modal-body hr { border: none; border-top: 1px solid #eee; margin: 18px 0; }
.modal-body h4 { margin: 0 0 6px; font-size: 14px; }
.muted { color: var(--gray-text); font-size: 13px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }

.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th, .users-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
}
.role-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.role-admin { background: #111; color: #fff; }
.role-editor { background: #d98a1a; color: #fff; }
.role-lector { background: #e5e5e5; color: #333; }
.link-btn {
  background: none; border: none; color: #333; font-size: 12px;
  text-decoration: underline; padding: 4px;
}

/* ===================== VERSIONES ===================== */
.new-version-form {
  display: flex;
  gap: 10px;
  margin: 10px 0 4px;
}
.new-version-form input {
  flex: 1;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 14px;
}
.new-version-form .btn-black { flex: 0 0 auto; }
.versions-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.versions-table th, .versions-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
}
.versions-table td.actions-cell { text-align: right; }
.versions-table td.actions-cell .link-btn { white-space: nowrap; }
.versions-table .link-btn.danger { color: #c0392b; }

/* ===================== APARIENCIA / BRANDING ===================== */
.branding-field { margin-bottom: 20px; }
.branding-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
}
.branding-preview {
  width: 100%;
  height: 110px;
  border-radius: 10px;
  border: 1.5px dashed #ddd;
  background: var(--gray-light) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-text);
  font-size: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.branding-preview-logo { height: 80px; background-size: contain; }
.branding-preview img { max-width: 100%; max-height: 100%; }
.branding-field input[type="file"] { font-size: 12px; margin-bottom: 6px; }

/* Logotipo sobre la tarjeta de login */
.login-logo {
  display: block;
  max-width: 160px;
  max-height: 80px;
  margin: 0 auto 14px;
}
/* Cuando hay imagen de fondo personalizada, la pantalla de login la usa
   cubriendo todo el alto/ancho, con la tarjeta blanca encima. */
.login-screen.has-bg {
  background-size: cover;
  background-position: center;
}

@media (max-width: 720px) {
  /* En móvil el scroll lo maneja la página completa (html/body), no un
     contenedor interno: es el único mecanismo que funciona igual en
     todos los navegadores móviles reales (Safari iOS incluido), sin
     depender de que un hijo flex calcule bien su alto con la barra de
     direcciones dinámica. .app-screen y .app-main dejan de tener una
     altura fija/recortada y simplemente crecen con el contenido. */
  html, body { height: auto; min-height: 100%; }
  body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .app-screen {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-header { padding: 14px 16px; }
  .app-title { font-size: 16px; }

  /* En pantallas chicas, el plano y los controles pasan a flujo normal
     (uno debajo del otro), y .app-main ya no recorta ni hace scroll por
     su cuenta — así ningún botón queda fuera de la vista ni tapado. */
  .app-main {
    display: block;
    flex: none;
    height: auto;
    overflow: visible;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .plan-viewport {
    position: relative;
    inset: auto;
    height: 54vh;
    min-height: 300px;
  }
  .floor-selector,
  .zoom-controls,
  .calib-toggle,
  .export-bar {
    position: static;
    margin: 12px auto 0;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .zoom-controls { flex-direction: row; }
  .export-bar { flex-direction: row; transform: none; }

  .detail-panel {
    position: fixed;
    left: 12px; right: 12px; width: auto; top: auto;
    bottom: 0;
    border-radius: 14px 14px 0 0;
    max-height: 70vh;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .toast { position: fixed; }
}