/* =====================================================================
   La ciudad de CardiosVIP — mapa 3D minimalista (HTML5 + CSS3 3D + JS)
   ===================================================================== */
:root {
  --fondo: #0F1520;
  --pergamino: #EFE8D8;
  --tinta: #1D1A15;
  --muro: #E6DECB;
  --oro: #D4A72C;
  --publico: #A39C8C;
  --alumno: #4A9FE0;
  --profesor: #E0962E;
  --admin: #E6DECB;
  --nosotros: #D4A72C;

  --d: min(70vw, 680px);
  --incl: 56deg;
  --giro: 0deg;
  --zoom: 1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--pergamino);
  font-family: 'Work Sans', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Cabecera ---------- */
.cabecera { padding: 22px 24px 4px; text-align: center; position: relative; }
.volver { position: absolute; left: 20px; top: 18px; color: #B7AF9E; font-size: 13px; text-decoration: none; }
.volver:hover { color: var(--pergamino); text-decoration: underline; }
.cabecera h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: .08em;
  margin: 18px 0 6px;
}
.bajada { margin: 0 auto; max-width: 560px; color: #A8A090; font-size: 15px; }

/* ---------- Perfiles ---------- */
.perfiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 16px 16px 4px; }
.perfil {
  font: 500 14px 'Work Sans', sans-serif;
  color: #CFC7B5;
  background: transparent;
  border: 1px solid #333C4A;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.perfil:hover { border-color: #6B7383; color: var(--pergamino); }
.perfil.activo { background: var(--pergamino); color: var(--tinta); border-color: var(--pergamino); }
.perfil:focus-visible, .controles button:focus-visible, .punto:focus-visible, .ir:focus-visible, .item-lugar:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------- Distribución ---------- */
.contenedor {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  padding: 8px 20px 20px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Escena ---------- */
.escena {
  position: relative;
  height: min(76vh, 720px);
  min-height: 420px;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 30%;
  background: radial-gradient(ellipse 70% 55% at 50% 58%, #1A2331 0%, var(--fondo) 75%);
  border-radius: 18px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.escena.arrastrando { cursor: grabbing; }
.camara {
  position: absolute; left: 50%; top: 54%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: scale(var(--zoom));
  transition: transform .4s ease;
}
.mundo {
  position: absolute;
  left: calc(var(--d) / -2); top: calc(var(--d) / -2);
  width: var(--d); height: var(--d);
  transform-style: preserve-3d;
  transform: rotateX(var(--incl)) rotateZ(var(--giro));
}
.suelo, .galerias { position: absolute; inset: 0; transform-style: preserve-3d; }
.galerias { transform: translateZ(-140px); }

.disco {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .5s, background-color .5s;
}
.disco[data-zona="publico"]  { background: #18202C; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.disco[data-zona="alumno"]   { background: #1C2737; }
.disco[data-zona="profesor"] { background: #213044; }
.disco[data-zona="admin"]    { background: #263A52; }
.disco.encendido[data-zona="publico"]  { background: #232C38; }
.disco.encendido[data-zona="alumno"]   { background: #1E3550; }
.disco.encendido[data-zona="profesor"] { background: #3A2E1E; }
.disco.encendido[data-zona="admin"]    { background: #34465E; }

.camino {
  position: absolute; left: 50%; top: 50%;
  background: rgba(230, 222, 203, .10);
  transform: translate(-50%, -50%) translateZ(1px);
  transition: opacity .5s;
}

.muro-capa {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  border-style: solid;
  pointer-events: none;
  transition: opacity .5s;
}
.torre-capa { position: absolute; border-radius: 2px; pointer-events: none; transition: opacity .5s; }

.galeria-red, .tuberia {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .5s;
}
.galeria-red { background: radial-gradient(circle, rgba(212,167,44,.22) 0 1.5px, transparent 2px) 0 0 / 22px 22px, #0B1018; border: 1px solid rgba(212,167,44,.5); }
.tuberia { border: 1px dashed rgba(212,167,44,.6); }

/* ---------- Marcadores ---------- */
.pin { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.pin-cuerpo {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  transform: translateZ(3px) rotateZ(calc(var(--giro) * -1)) rotateX(calc(var(--incl) * -1)) translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: opacity .4s;
}
.punto {
  width: 14px; height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--fondo);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .2s;
}
.punto::after { content: ''; position: absolute; inset: -14px; }   /* área táctil de 42px */
.punto { position: relative; }
.pin-cuerpo:hover .punto, .pin.seleccionado .punto { transform: scale(1.5); }
.pin-nombre {
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--tinta); background: var(--pergamino);
  border-radius: 5px; padding: 2px 7px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.pin-cuerpo:hover .pin-nombre, .pin.seleccionado .pin-nombre, .punto:focus-visible + .pin-nombre { opacity: 1; transform: none; }
.pin.seleccionado .pin-nombre { background: var(--oro); }

/* Nombres de los anillos */
.anillo-nombre {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(239, 232, 216, .78);
  pointer-events: none;
  transition: opacity .4s, color .4s;
}
.anillo-nombre.encendido { color: #FFFFFF; }

/* ---------- Estados ---------- */
.atenuado { opacity: .12 !important; }
.pin-cuerpo.atenuado .punto { pointer-events: none; }
body.modo-galerias .disco, body.modo-galerias .camino { opacity: .1; }
body.modo-galerias .muro-capa, body.modo-galerias .torre-capa { opacity: .12; }
body.modo-galerias .galeria-red, body.modo-galerias .tuberia { opacity: 1; }
body:not(.modo-galerias) .galerias .pin-cuerpo { opacity: 0 !important; visibility: hidden; }

/* ---------- Controles ---------- */
.controles { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.controles button {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid #333C4A; background: rgba(15, 21, 32, .85);
  color: var(--pergamino); font-size: 18px; cursor: pointer;
}
.controles button:hover { border-color: #6B7383; }
.ayuda { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: 12px; color: #7F8796; pointer-events: none; }

/* ---------- Panel ---------- */
.panel {
  background: #161D29;
  border: 1px solid #2A3341;
  border-radius: 18px;
  padding: 22px;
  align-self: start;
}
.panel h2, .panel h3 { font-family: 'Cinzel', Georgia, serif; margin: 0 0 8px; color: var(--pergamino); font-weight: 700; }
.panel h2 { font-size: 20px; }
.panel h3 { font-size: 18px; }
.panel p { margin: 0 0 12px; line-height: 1.55; font-size: 14px; color: #B9B1A0; }
.lista-zonas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.zona-titulo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #CFC7B5; margin-bottom: 4px; }
.punto-zona { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.items { display: flex; flex-wrap: wrap; gap: 4px; }
.item-lugar {
  font: 500 13px 'Work Sans', sans-serif;
  color: #DDD5C4; background: #1F2734; border: 1px solid #2E3746;
  border-radius: 8px; padding: 6px 9px; min-height: 32px; cursor: pointer;
}
.item-lugar:hover { border-color: #6B7383; }
.item-lugar.activo { background: var(--oro); color: var(--tinta); border-color: var(--oro); }
.panel-lugar { border-top: 1px solid #2A3341; margin-top: 18px; padding-top: 16px; }
.etiqueta { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.entran { font-size: 13px; color: #B9B1A0; margin-bottom: 14px; }
.entran strong { color: #DDD5C4; }
.ir {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--pergamino); color: var(--tinta); text-decoration: none;
  font-weight: 600; font-size: 14px; border-radius: 999px; padding: 0 20px;
}
.ir:hover { background: #FFFFFF; }
.restringido { font-size: 13px !important; font-style: italic; color: #8E8778 !important; }

.pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px 22px; font-size: 13px; color: #7F8796; max-width: 1280px; width: 100%; margin: 0 auto; }
.pie a { color: #CFC7B5; }

@media (max-width: 900px) {
  :root { --d: min(88vw, 520px); }
  .contenedor { grid-template-columns: 1fr; padding: 8px 12px 16px; }
  .escena { height: 54vh; min-height: 340px; }
  .volver { position: static; display: inline-block; }
  .anillo-nombre { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 600px) {
  .anillo-nombre:not(.encendido) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .camara, .disco, .muro-capa, .pin-cuerpo, .punto { transition: none; }
}