/* Vista «Lockers» · estilo japandi: roble claro, colores apagados, sombras suaves.
   Cada puerta es una hoja con grosor real (cara, canto de triplay y dorso) que gira en 3D.
   Libre = la puerta abierta y escondida: se ve el hueco vacío. Ocupado = puerta cerrada con su candado. */

/* ---------- Paleta ---------- */
#vistaLockers{
  --roble: #ddc9a7; --roble-2: #d3bd98; --roble-canto: #c2a77d; --roble-dorso: #e7d9c0;
  --hueco: #f3efe8; --hueco-2: #e9e3d9; --repisa: #d8c6a5; --marco: #e9e1d3; --tinta: #2f2d2a; --tinta-2: #6d6355;
}
/* Estados: tonos apagados. Libre = verde (candado abierto); ocupado = grafito (candado cerrado). */
.e-libre      { --lk: #6e9a74; }
.e-activo     { --lk: #55504a; }
.e-por_vencer { --lk: #c39c52; }
.e-vencido    { --lk: #b86f5a; }
.e-apartado   { --lk: #978cb6; }
.e-fuera      { --lk: #aaa59d; }

/* ---------- Cabecera, contadores, leyenda ---------- */
.lk-cabeza{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lk-cabeza h2{ margin: 4px 0 2px; font: 300 30px/1.1 Outfit, sans-serif; letter-spacing: -.02em; }
.lk-cabeza p{ margin: 0; font-size: 13px; color: var(--ink-2); }
.lk-cabeza .sc-kicker{ font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.lk-vestidores{ display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); }
.lk-vestidores button{ height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 600 12.5px Inter, sans-serif; color: var(--ink-2); cursor: pointer; transition: background .3s, color .3s; }
.lk-vestidores button[aria-pressed="true"]{ background: var(--tinta); color: #f3efe8; }
.lk-como{ height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-2); font: 600 12px Inter, sans-serif; color: var(--ink-2); cursor: pointer; }

.lk-kpis{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lk-kpi{ display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink); cursor: pointer; font-family: Inter, sans-serif; transition: transform .3s var(--spring), box-shadow .3s, background .3s; }
.lk-kpi:hover{ transform: translateY(-1px); }
.lk-kpi:active{ transform: scale(.97); }
.lk-kpi i{ width: 8px; height: 8px; border-radius: 50%; background: var(--lk); }
.lk-kpi b{ font: 300 21px Outfit, sans-serif; font-variant-numeric: tabular-nums; }
.lk-kpi span{ font-size: 12px; color: var(--ink-2); }
.lk-kpi.on{ box-shadow: inset 0 0 0 1.5px var(--lk); background: var(--glass-2); }
.lk-ingreso{ cursor: default; margin-left: auto; background: var(--tinta); color: #f3efe8; border-color: transparent; }
.lk-ingreso span{ color: #b9b2a6; }
.lk-ingreso:hover{ transform: none; }

.lk-leyenda{ list-style: none; margin: 0 0 16px; padding: 12px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-edge); }
.lk-leyenda li{ display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-2); }
.lk-leyenda i{ grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; background: var(--lk); margin-top: 4px; }
.lk-leyenda b{ color: var(--ink); font-size: 12.5px; font-weight: 600; }

.lk-guia{ display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-edge); }
.lk-guia ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; }
.lk-guia li{ display: flex; gap: 10px; }
.lk-guia li > span{ flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #f3efe8; font: 600 11px Inter, sans-serif; }
.lk-guia b{ font-size: 13px; }
.lk-guia p{ margin: 2px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Distribución ---------- */
.lk-cuerpo{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.lk-muro{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lk-bloque{ min-width: 0; padding: 16px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); }
/* Los dos bloques miden lo mismo; el mueble de cuadrados se centra con proporción de cuadro */
.f-cuadro .lk-mueble{ max-width: calc(var(--cols) * 148px); margin: 0 auto; }
.lk-bloque header{ display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12px; flex-wrap: wrap; }
.lk-bloque header b{ font-size: 13px; font-weight: 600; }
.lk-bloque header span{ color: var(--ink-3); }

/* ---------- El mueble ---------- */
.lk-mueble{ display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; padding: 6px; border-radius: 12px; perspective: 1600px;
  background: var(--marco); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 40px -30px rgba(60,45,25,.55); }
.f-cuadro .lk-mueble{ grid-template-rows: repeat(var(--filas), minmax(82px, 1fr)); }
.f-z .lk-mueble{ grid-template-rows: repeat(10, minmax(36px, 1fr)); }
/* En Z: la de arriba ocupa renglones 1–6 y la de abajo 5–10; el escalón se recorta */
.lk-puerta.z-arriba{ grid-row: 1 / span 6 !important; --recorte: polygon(0 0, 100% 0, 100% 100%, 56% 100%, 56% 66.7%, 0 66.7%); }
.lk-puerta.z-abajo{ grid-row: 5 / span 6 !important; --recorte: polygon(0 0, 56% 0, 56% 33.3%, 100% 33.3%, 100% 100%, 0 100%); }

/* El botón no recibe el clic: lo recibe la cara, que tiene la silueta recortada (la Z incluida) */
.lk-puerta{ position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; pointer-events: none; font: inherit; color: inherit; z-index: 0; }
.lk-puerta .lk-cara{ pointer-events: auto; }
.lk-puerta:focus-visible{ outline: none; }

/* Hueco (interior): solo se ve cuando la puerta se abre en la ficha o sobresale al tocarla */
.lk-hueco{ position: absolute; inset: 0; clip-path: var(--recorte, none); border-radius: 3px; overflow: hidden; background: var(--hueco);
  box-shadow: inset 0 14px 18px -14px rgba(70,52,30,.35), inset 10px 0 14px -12px rgba(70,52,30,.28), inset -6px 0 10px -10px rgba(70,52,30,.2); transition: box-shadow .8s ease; }
.lk-hueco::before{ content: ""; position: absolute; inset: 9% 8% 7% 10%; background: var(--hueco-2); border-radius: 2px; }
.lk-hueco i{ position: absolute; display: block; }
.lk-barra{ height: 2px; border-radius: 1px; background: #a7a197; }
.lk-div{ width: 2px; background: var(--repisa); }
.lk-rep, .lk-piso{ height: 2px; background: var(--repisa); }
.z-arriba .lk-barra{ left: 12%; right: 47%; top: 13%; }
.z-arriba .lk-div{ left: 55%; top: 9%; height: 37%; }
.z-arriba .lk-rep.r1{ left: 55%; right: 8%; top: 25%; }
.z-arriba .lk-rep.r2{ left: 55%; right: 8%; top: 45%; }
.z-arriba .lk-piso{ left: 0; right: 0; top: 66.2%; }
.z-abajo .lk-piso{ left: 0; right: 0; top: 33%; }
.z-abajo .lk-barra{ left: 12%; right: 47%; top: 42%; }
.z-abajo .lk-div{ left: 55%; top: 38%; height: 32%; }
.z-abajo .lk-rep.r1{ left: 55%; right: 8%; top: 52%; }
.z-abajo .lk-rep.r2{ left: 55%; right: 8%; top: 69%; }

/* Hoja: cara + un canto por cada lado de su silueta + dorso. Se mueve siempre suave. */
.lk-hoja{ position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center;
  transition: transform .9s cubic-bezier(.22,.8,.2,1), opacity .4s ease; }
.lk-cara, .lk-dorso{ position: absolute; inset: 0; clip-path: var(--recorte, none); border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lk-cara{ overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 38%, rgba(80,60,30,.05)),
    repeating-linear-gradient(90deg, rgba(120,90,50,.05) 0 1px, transparent 1px 7px),
    radial-gradient(70% 45% at 50% 58%, rgba(150,115,65,.1), transparent 70%),
    linear-gradient(var(--roble), var(--roble-2));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(110,85,50,.14); transition: filter .6s ease; }
.lk-dorso{ transform: translateZ(-9px) rotateY(180deg); background: linear-gradient(90deg, var(--roble-dorso), #ddcbac); }
/* Cantos de triplay (capas finas, como en la foto). Se ven cuando la puerta sobresale o gira. */
.lk-canto{ position: absolute; display: block; backface-visibility: visible; }
.lk-canto.v{ width: 11px; transform-origin: left center; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #c8ad83 0 1.5px, #b1956a 1.5px 2.6px); }
.lk-canto.h{ height: 11px; transform-origin: center top; transform: rotateX(-90deg); background: repeating-linear-gradient(180deg, #d0b78e 0 1.5px, #b99d72 1.5px 2.6px); }

/* Número, cerradura de combinación y candado de estado */
.lk-cara .lk-num{ position: absolute; top: 8px; left: 9px; font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .08em; color: #6b5f4d; }
.lk-cerradura{ position: absolute; right: 13%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle, #3a3936 0 30%, #1d1c1a 32% 100%); box-shadow: 0 0 0 1.5px #2a2826, 0 1px 1px rgba(0,0,0,.25); }
.z-arriba .lk-cerradura{ top: 86%; right: 18%; }
.z-abajo .lk-cerradura{ top: 50%; }
.lk-candado{ position: absolute; right: calc(13% + 16px); top: 50%; width: 17px; height: 22px; margin-top: -13px; color: var(--lk); overflow: visible; transition: color .8s ease; }
.z-arriba .lk-candado{ top: 86%; right: calc(18% + 16px); }
.z-abajo .lk-candado{ top: 50%; }
.f-cuadro .lk-candado{ width: 19px; height: 25px; margin-top: -14px; }
.lk-arco{ transform-box: fill-box; transform-origin: 100% 100%; transition: transform .7s cubic-bezier(.22,.8,.2,1); }
.lk-candado.abierto .lk-arco{ transform: translateY(-4px) rotate(-22deg); }
.lk-mini{ position: absolute; left: 9px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font: 500 10.5px Inter, sans-serif; color: var(--tinta-2); white-space: nowrap; overflow: hidden; }
.lk-mini b{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.lk-mini em{ font-style: normal; font-weight: 600; color: var(--lk); }
.lk-mini.libre b{ color: var(--lk); letter-spacing: .02em; }
.z-arriba .lk-mini{ bottom: calc(33.3% + 8px); right: 46%; flex-direction: column; gap: 0; }
.e-fuera .lk-cara{ filter: saturate(.2) brightness(.95); }

/* ---------- Tocar: el locker sobresale suave y se ve su grosor ---------- */
.lk-mueble .lk-puerta.sel{ z-index: 3; }
.lk-mueble .lk-puerta.sel .lk-hoja{ transform: translateZ(30px) rotateX(5deg) rotateY(-7deg); }
.lk-mueble .lk-puerta.sel .lk-hueco{ box-shadow: inset 0 0 0 999px rgba(60,45,28,.16); }
.lk-mueble .lk-puerta.sel .lk-cara{ filter: brightness(1.04); }
@media (hover: hover){
  .lk-mueble .lk-puerta:not(.sel):has(.lk-cara:hover) .lk-hoja{ transform: translateZ(7px); }
  .lk-mueble .lk-puerta:not(.sel):has(.lk-cara:hover){ z-index: 2; }
}
.lk-puerta:focus-visible .lk-hoja{ transform: translateZ(12px); }
.lk-puerta.tenue .lk-cara{ opacity: .32; }

/* Entrada al abrir la vista */
.lk-muro.entrada .lk-cara{ animation: lk-aparece .6s ease both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes lk-aparece{ from{ opacity: 0; } }

/* Cobrar: la puerta late hacia el frente y el candado se cierra. Liberar: el arco sube. */
.lk-puerta.anim-pago .lk-hoja{ animation: lk-latido 1.5s cubic-bezier(.22,.8,.2,1) both; }
@keyframes lk-latido{ 0%{ transform: translateZ(0); } 35%{ transform: translateZ(22px); } 100%{ transform: translateZ(var(--z-fin, 0px)); } }
.lk-puerta.sel.anim-pago .lk-hoja{ animation: none; }
.lk-puerta.anim-pago .lk-arco{ animation: lk-cierra-arco .9s cubic-bezier(.22,.8,.2,1) .35s both; }
@keyframes lk-cierra-arco{ from{ transform: translateY(-4px) rotate(-22deg); } to{ transform: none; } }
.lk-puerta.anim-libera .lk-arco{ animation: lk-abre-arco .9s cubic-bezier(.22,.8,.2,1) both; }
@keyframes lk-abre-arco{ from{ transform: none; } to{ transform: translateY(-4px) rotate(-22deg); } }

/* ---------- Ficha ---------- */
.lk-ficha{ position: sticky; top: 16px; padding: 18px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.lk-ficha:not(.abierta) > *{ display: none; }
.lk-ficha:not(.abierta)::before{ content: "Toca cualquier locker: sobresale y se abre. Adentro ves quién lo tiene, su celular y cuántos días le quedan."; margin: auto; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 230px; }
.lk-ficha.abierta{ animation: lk-ficha .4s var(--spring); }
@keyframes lk-ficha{ from{ transform: translateX(12px); opacity: 0; } }
.lk-f-cab{ display: flex; justify-content: space-between; align-items: flex-start; }
.lk-f-cab h2{ margin: 2px 0; font: 300 36px/1 Outfit, sans-serif; letter-spacing: -.02em; }
.lk-f-cab p{ margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* Escena: el mismo locker del muro (misma silueta e interior), en grande y en 3D.
   Al abrir la ficha se inclina suave, la puerta gira mostrando su grosor y adentro está la persona. */
.lk-escena{ position: relative; height: 300px; padding: 14px 18px; border-radius: 16px; background: var(--marco); perspective: 1200px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.lk-escena.f-z{ height: 380px; }
.lk-escena.f-cuadro{ height: 250px; }
.lk-escena.z-arriba{ --recorte: polygon(0 0, 100% 0, 100% 100%, 56% 100%, 56% 66.7%, 0 66.7%); }
.lk-escena.z-abajo{ --recorte: polygon(0 0, 56% 0, 56% 33.3%, 100% 33.3%, 100% 100%, 0 100%); }
.lk-caja{ position: absolute; inset: 14px 18px; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.22,.8,.2,1); }
.lk-escena.abre .lk-caja{ transform: rotateY(9deg) rotateX(3deg); }
.lk-escena.ya-abierta .lk-caja{ transform: rotateY(9deg) rotateX(3deg); transition: none; }
.lk-escena .lk-hueco, .lk-escena .lk-hoja{ inset: 0; }
.lk-escena .lk-hueco, .lk-escena .lk-cara, .lk-escena .lk-dorso{ border-radius: 6px; }
.lk-escena .lk-canto.v{ width: 12px; } .lk-escena .lk-canto.h{ height: 12px; }
.lk-escena .lk-dorso{ transform: translateZ(-12px) rotateY(180deg); }
.lk-escena .lk-cara .lk-num{ top: 12px; left: 12px; font-size: 12px; }
.lk-escena .lk-mini{ display: none; }
.lk-escena .lk-cerradura{ width: 13px; height: 13px; margin-top: -6px; }
.lk-escena .lk-candado{ width: 24px; height: 31px; margin-top: -17px; right: calc(13% + 22px); }
.lk-escena.z-arriba .lk-candado{ right: calc(18% + 22px); }
.lk-escena .lk-hoja{ transition: transform 1.25s cubic-bezier(.22,.8,.2,1) .15s, opacity .45s ease 1.05s; }
.lk-escena.abre .lk-hoja, .lk-escena.ya-abierta .lk-hoja{ transform: rotateY(-108deg); opacity: 0; }
.lk-escena.ya-abierta .lk-hoja{ transition: none; }
.lk-escena:not(.e-libre) .lk-hueco i{ display: none; }
/* La tarjeta va en la parte grande del locker */
.lk-escena.z-arriba .lk-dentro{ bottom: 33.3%; }
.lk-escena.z-abajo .lk-dentro{ top: 33.3%; }

/* Lo que hay dentro */
.lk-dentro{ position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease .55s, transform .5s ease .55s; }
.lk-escena.abre .lk-dentro, .lk-escena.ya-abierta .lk-dentro{ opacity: 1; transform: none; }
.lk-escena.ya-abierta .lk-dentro{ transition: none; }
.lk-dentro.vacio b{ font: 300 26px Outfit, sans-serif; color: var(--tinta); }
.lk-dentro.vacio span{ font-size: 12px; color: var(--tinta-2); }
.lk-avatar{ position: relative; width: 96px; height: 96px; flex: none; }
.lk-avatar svg{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lk-avatar .pista{ fill: none; stroke: #ddd4c6; stroke-width: 3; }
.lk-avatar .avance{ fill: none; stroke: var(--lk); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s ease .8s; }
.lk-foto{ position: absolute; inset: 9px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tinta); color: #f3efe8; font: 500 24px Outfit, sans-serif; letter-spacing: .02em; }
.lk-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-d-nombre{ margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.lk-d-dias{ display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.lk-d-dias em{ font: 300 28px/1 Outfit, sans-serif; font-style: normal; color: var(--lk); filter: brightness(.85); font-variant-numeric: tabular-nums; }
.lk-d-contacto{ display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.lk-d-tel, .lk-d-wa{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font: 600 12px Inter, sans-serif; text-decoration: none; }
.lk-d-tel{ background: rgba(255,255,255,.75); color: var(--tinta); box-shadow: inset 0 0 0 1px #ddd4c6; font-variant-numeric: tabular-nums; }
.lk-d-wa{ background: #5e8f6c; color: #fff; }
.lk-d-wa svg{ width: 15px; height: 15px; }
.lk-d-wa:hover{ background: #527f5f; }
.lk-d-sin{ font-size: 11.5px; color: #9b8f7d; }

.lk-f-estado{ display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--lk) 10%, transparent); }
.lk-f-estado i{ flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--lk); }
.lk-f-estado b{ display: block; font-size: 13.5px; } .lk-f-estado span{ font-size: 12.5px; color: var(--ink-2); }
.lk-ver-socio{ font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lk-ver-socio:hover{ color: var(--ink); }
.lk-f-datos{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lk-f-datos div{ padding: 9px 11px; border-radius: 12px; background: var(--field); }
.lk-f-datos dt{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.lk-f-datos dd{ margin: 3px 0 0; font-size: 13px; }
.lk-f-acciones{ display: flex; flex-wrap: wrap; gap: 8px; }
.lk-f-acciones .btn{ flex: 1 1 auto; justify-content: center; }
.lk-f-ayuda{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* Formularios dentro de la ficha */
.lk-campo{ display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lk-campo input, .lk-campo select{ height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); padding: 0 12px; font: 500 13px Inter, sans-serif; color: var(--ink); }
.lk-resultados{ list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.lk-resultados button{ width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; background: var(--field); text-align: left; cursor: pointer; color: var(--ink); }
.lk-resultados button:hover:not(:disabled){ box-shadow: inset 0 0 0 1px var(--ink-3); }
.lk-resultados button:disabled{ opacity: .5; cursor: default; }
.lk-resultados b{ display: block; font-size: 13px; } .lk-resultados small{ font-size: 11.5px; color: var(--ink-3); }
.lk-resultados .vacio{ font-size: 12px; color: var(--ink-3); padding: 6px; }
.lk-av{ flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: #f3efe8; font: 600 12px Inter, sans-serif; }
.lk-elegido{ width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--field); }
.lk-elegido b{ flex: 1; font-size: 13px; }
.lk-quitar{ width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--glass-2); cursor: pointer; color: var(--ink); }
.lk-meses{ width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lk-meses button{ display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--field); cursor: pointer; color: var(--ink); transition: transform .3s var(--spring); }
.lk-meses button:active{ transform: scale(.95); }
.lk-meses b{ font: 300 20px Outfit, sans-serif; } .lk-meses span{ font-size: 11px; color: var(--ink-3); } .lk-meses em{ font-style: normal; font-size: 11.5px; font-weight: 600; }
.lk-meses button[aria-checked="true"]{ background: var(--tinta); color: #f3efe8; border-color: transparent; }
.lk-meses button[aria-checked="true"] span{ color: #b9b2a6; }
.lk-pregunta{ margin: 0; font-size: 13px; }
.lk-ya{ display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--field); cursor: pointer; font-size: 12px; color: var(--ink-2); }
.lk-ya input{ margin-top: 2px; accent-color: var(--tinta); }
.lk-ya b{ display: block; color: var(--ink); font-size: 13px; }

/* Modo demo del recorrido */
.lk-modo-demo .lk-cuerpo{ position: relative; }
.lk-modo-demo .lk-cuerpo::before{ content: "Demo · nada de esto es real ni se guarda"; position: absolute; z-index: 3; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px;
  background: #efe3c4; color: #5b4a22; font: 600 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); white-space: nowrap; }
.lk-modo-demo .lk-mueble{ outline: 1.5px dashed #d9c79c; outline-offset: 4px; }

/* ---------- Tablet y teléfono ---------- */
@media (max-width: 1150px){
  .lk-cuerpo{ grid-template-columns: minmax(0, 1fr); }
  .lk-ficha{ position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; max-height: 82vh; overflow: auto; z-index: 65; transform: translateY(calc(100% + 24px)); transition: transform .45s var(--spring);
    background: var(--bg); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.4); }
  .lk-ficha.abierta{ transform: none; animation: none; }
  .lk-ficha:not(.abierta)::before{ display: none; }
  .lk-leyenda{ grid-template-columns: 1fr 1fr; }
  .lk-guia ol{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .lk-ficha{ left: 8px; right: 8px; bottom: 8px; max-height: 88vh; border-radius: 24px; }
  .lk-escena{ height: 250px; } .lk-escena.f-cuadro{ height: 220px; }
  .lk-bloque{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lk-bloque.f-z .lk-mueble{ min-width: 540px; }
  .lk-bloque.f-cuadro .lk-mueble{ min-width: calc(var(--cols) * 74px); }
  .lk-bloque header::after{ content: "Desliza →"; color: var(--ink-3); font-size: 11px; }
}
@media (max-width: 640px){ .lk-leyenda{ grid-template-columns: 1fr; } .lk-ingreso{ margin-left: 0; } }
@media (prefers-reduced-motion: reduce){
  .lk-hoja, .lk-arco, .lk-ficha, .lk-dentro, .lk-caja{ transition: none !important; animation: none !important; }
  .lk-muro .lk-cara, .lk-candado{ animation: none !important; }
}

/* Texto del locker libre en la escena: sobre una base suave para que no lo crucen las repisas */
.lk-dentro.vacio b, .lk-dentro.vacio span{ padding: 2px 10px; border-radius: 8px; background: color-mix(in srgb, var(--hueco) 88%, transparent); }
/* Sombra suave bajo el locker que sobresale */
.lk-mueble .lk-puerta.sel::after{ content: ""; position: absolute; inset: 6% 4% -4% 6%; z-index: -1; border-radius: 6px; background: rgba(50,38,22,.28); filter: blur(10px); transform: translateZ(-2px); animation: lk-sombra .9s ease both; pointer-events: none; }
@keyframes lk-sombra{ from{ opacity: 0; } }