/* pisos.css — puertas de los pisos (entrada) y selector compacto de piso (barra lateral). v4.1 */

/* ---------- entrada: "Pisos de la casa" ---------- */
.hall { max-width: 760px; margin: -10px auto 44px; }
.hall-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hall-titulo h2 { font-size: 15px; margin: 0; }
.hall-titulo .apagado { font-size: 12px; }
.hall-pisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.puerta {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: start;
  padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none; position: relative; min-width: 0;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.puerta.abrible:hover { border-color: var(--acento); box-shadow: var(--sombra-2); transform: translateY(-1px); text-decoration: none; }
.puerta.actual { border-color: var(--acento-borde); background: var(--acento-suave); }
.puerta.pronto { opacity: .72; }
.puerta-icono { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--linea); }
.puerta-textos { display: grid; gap: 2px; min-width: 0; }
.puerta-nombre { font-weight: 700; font-size: 14px; line-height: 1.25; }
.puerta-nombre small { font-weight: 500; color: var(--apagado); font-size: 11px; }
.puerta-desc { font-size: 12.5px; color: var(--texto-2); line-height: 1.35; }
.puerta-estado { grid-column: 2; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.puerta-estado.actual { color: var(--acento); }
.puerta-estado.abrir { color: var(--ok, var(--verde)); }
.puerta-estado.pronto { color: var(--apagado); }

/* ---------- barra lateral: "Piso: Content & Sales ▾" ---------- */
.piso-selector { margin-bottom: 4px; }
.piso-sel-details { position: relative; }
.piso-sel-details > summary { list-style: none; }
.piso-sel-details > summary::-webkit-details-marker { display: none; }
.piso-sel {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  color: var(--texto-2); font-size: 12.5px; user-select: none;
}
.piso-sel:hover { background: var(--capa); color: var(--texto); }
.piso-sel.solo-lectura { cursor: default; }
.piso-sel-icono { width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--linea); flex-shrink: 0; }
.piso-sel-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.piso-sel-etiqueta { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.piso-sel-nombre { font-weight: 650; font-size: 12.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piso-sel-caret { margin-left: auto; font-size: 11px; color: var(--apagado); }
.piso-sel-lista { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 6px 8px; }
.piso-sel-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12px; color: var(--texto-2); text-decoration: none; }
.piso-sel-item small { margin-left: auto; font-size: 10px; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; }
a.piso-sel-item:hover { background: var(--capa); color: var(--texto); text-decoration: none; }
.piso-sel-item.pronto { opacity: .7; cursor: default; }

/* la barra lateral se pliega a iconos entre 760 y 1100 px: el selector muestra solo el icono */
@media (max-width: 1100px) and (min-width: 761px) {
  .piso-sel { justify-content: center; padding: 8px 0; }
  .piso-sel-texto, .piso-sel-caret, .piso-sel-lista { display: none; }
}