/* Recorridos virtuales en el CRM: sección de la ficha, visor a pantalla completa y editor.
   Capas: cajón 60 < recorrido 70 < diálogos del CRM 80 < avisos 100. */

/* ── Sección "Recorrido virtual" de la ficha ── */
.tour-portada {
  position: relative; aspect-ratio: 1200 / 630; border-radius: var(--r); overflow: hidden;
  background: var(--marca-fondo) center / cover no-repeat; display: grid; place-items: center;
}
.tour-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 31, 61, .55)); }
.tour-portada .btn { position: relative; z-index: 1; box-shadow: var(--sombra2); }
.tour-sin { position: relative; z-index: 1; color: var(--marca-txt); font-size: 13px; }
.tour-datos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; font-size: 12.5px; color: var(--txt2); }
.tour-vacio p { margin: 0 0 10px; font-size: 13px; color: var(--txt2); }

/* ── Capa a pantalla completa (visor y editor) ── */
.tour-capa { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--marca-fondo); color: var(--marca-txt); }
.tour-capa-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--marca-fondo2); border-bottom: 1px solid #243246;
}
.tour-capa-cab h3 { color: #fff; font-size: 15px; flex: 1; min-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-capa-cab .btn { min-height: 32px; }
/* Los botones del CRM heredan el color del texto: sobre el fondo oscuro de la capa quedarían blancos sobre blanco */
.tour-capa .btn { color: var(--txt); }
.tour-capa .btn.pri { color: #fff; }
.tour-capa .btn.peligro { color: var(--mal); }
.tour-capa-visor { position: relative; flex: 1; min-height: 0; }
.tour-capa .aviso { padding: 8px 16px; font-size: 12.5px; background: var(--adv-s); color: var(--adv); }

/* ── Editor ── */
.te-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.te-lado { overflow-y: auto; padding: 14px; background: #fff; color: var(--txt); border-right: 1px solid var(--borde); display: flex; flex-direction: column; gap: 12px; }
.te-lado h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt3); }
.te-titulo { background: #fff; }
.te-ambientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.te-amb {
  display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 8px; border: 1px solid var(--borde);
  border-radius: var(--r); background: #fff; cursor: pointer;
}
.te-amb.on { border-color: var(--ac); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 22%, transparent); }
.te-amb img { width: 72px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--gris-s); }
.te-amb input[type=text] { min-height: 30px; padding: 4px 8px; font-size: 13px; }
.te-amb .te-fila { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--txt2); }
.te-amb .te-fila label.check { font-size: 12px; margin-right: auto; }
.te-subir { position: relative; overflow: hidden; }
.te-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.te-progreso { font-size: 12.5px; color: var(--txt2); }
.te-progreso:empty { display: none; }
.te-barra { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--gris-s); overflow: hidden; }
.te-barra span { display: block; height: 100%; width: 0; background: var(--ac2); transition: width .2s; }
.te-centro { position: relative; min-width: 0; display: flex; flex-direction: column; }
.te-visor { position: relative; flex: 1; min-height: 0; }
.te-vacio { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--marca-txt2); }
.te-ayuda { padding: 8px 14px; font-size: 12.5px; background: var(--marca-fondo2); color: var(--marca-txt); border-top: 1px solid #243246; }
.te-ayuda b { color: #fff; }
.te-flechas { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 12px; background: var(--marca-fondo2); }
.te-flechas:empty { display: none; }
.te-flecha-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #243246; color: #fff; font-size: 12.5px; }
.te-flecha-item .b { font-size: 11px; }
.te-flecha-item .btn { min-height: 24px; padding: 2px 8px; font-size: 12px; }

/* Marcador de flecha sobre la foto (modo edición) */
.te-marca {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(11, 46, 89, .9); color: #fff; font: 600 12.5px/1.2 "Inter", "Segoe UI", system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); white-space: nowrap; transform: translateY(-4px);
}
.te-marca.revisar { background: rgba(138, 106, 18, .95); }
.te-marca.sel { outline: 3px solid #ffd257; }

/* Menú "¿a qué ambiente lleva?" */
.te-menu {
  position: absolute; z-index: 5; min-width: 220px; max-width: 280px; max-height: 60%; overflow: auto;
  background: #fff; color: var(--txt); border-radius: var(--r); box-shadow: var(--sombra2); padding: 8px;
}
.te-menu h5 { margin: 2px 4px 6px; font-size: 12px; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; }
.te-menu button.op { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.te-menu button.op:hover { background: var(--hover); }
.te-menu label.check { margin: 6px 4px 2px; font-size: 12.5px; }
.te-menu .te-menu-pie { display: flex; justify-content: flex-end; margin-top: 6px; }

@media (max-width: 820px) {
  .te-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .te-lado { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--borde); }
}