:root {
  --crema: #f6ead5;
  --crema-2: #efdcbc;
  --tinta: #4a2c1d;
  --tinta-2: #7a5340;
  --teja: #b5573a;
  --teja-osc: #8d3f28;
  --mostaza: #e2a93c;
  --borde: #6b4330;
  --sombra: 0 4px 0 #6b4330, 0 10px 24px rgba(60, 30, 15, .25);
  --sombra-boton: 0 3px 0 #6b4330;
  --radio: 18px;
  --fuente: "Fredoka", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #bcd6e6; color: var(--tinta);
  font-family: var(--fuente); font-size: 16px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }

#finca {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; height: 100vh;
  display: block; touch-action: none; cursor: grab; user-select: none;
}
#finca.arrastrando { cursor: grabbing; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- barra superior ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: calc(10px + var(--seguro-arriba)) 16px 10px;
  pointer-events: none;
}
.barra > * { pointer-events: auto; }
.marca {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 16px;
  padding: 6px 14px 7px; box-shadow: var(--sombra);
}
.logo { font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--teja-osc); line-height: 1; }
.cuenta { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; white-space: nowrap; }

.buscador { position: relative; flex: 1; max-width: 440px; margin-left: auto; }
.buscador .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); }
.buscador input {
  width: 100%; height: 48px; padding: 0 16px 0 42px;
  font: 500 16px var(--fuente); color: var(--tinta);
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 16px;
  box-shadow: var(--sombra); outline: none; -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: #9c7a66; }
.buscador input:focus { border-color: var(--teja); }
.buscador input::-webkit-search-cancel-button { display: none; }
.resultados {
  position: absolute; top: 56px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra);
  max-height: 50vh; overflow: auto;
}
.resultados li {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; font-weight: 500;
}
.resultados li small { color: var(--tinta-2); font-weight: 400; white-space: nowrap; }
.resultados li[aria-selected="true"], .resultados li:hover { background: var(--crema-2); }
.resultados li.nada { cursor: default; color: var(--tinta-2); font-weight: 400; display: block; line-height: 1.4; }
.resultados li.nada:hover { background: none; }

/* ---------- evento ---------- */
.evento {
  position: fixed; z-index: 4; left: 16px; top: calc(84px + var(--seguro-arriba));
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--tinta); color: var(--crema); border: 2.5px solid #2c1910; border-radius: 14px;
  padding: 7px 14px 8px 11px; box-shadow: 0 3px 0 #2c1910, 0 8px 18px rgba(30, 15, 5, .3);
}
.evento-txt { display: flex; flex-direction: column; line-height: 1.15; }
.evento-txt small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.evento-txt b { font-weight: 600; font-size: 15px; }
.evento-luz { width: 12px; height: 12px; border-radius: 50%; background: var(--mostaza); box-shadow: 0 0 0 3px rgba(226, 169, 60, .3); animation: latido 1.6s ease-in-out infinite; }
.evento[data-tipo="apagon"] .evento-luz { background: #8fa0c8; box-shadow: 0 0 0 3px rgba(143, 160, 200, .3); }
.evento[data-tipo="fuga"] .evento-luz { background: #5aa7e0; box-shadow: 0 0 0 3px rgba(90, 167, 224, .3); }
@keyframes latido { 50% { transform: scale(.7); opacity: .6; } }

/* ---------- metas por seguidores ---------- */
.metas {
  position: fixed; z-index: 4; left: 16px; top: calc(146px + var(--seguro-arriba)); width: 250px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-boton);
  padding: 8px 12px 10px;
}
.metas[hidden] { display: none; }
.metas-txt { display: flex; flex-direction: column; line-height: 1.15; }
.metas-txt b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metas-txt small { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metas-barra { height: 10px; border-radius: 6px; background: #e6d6ba; overflow: hidden; }
.metas-barra i { display: block; height: 100%; width: 0; background: var(--teja); border-radius: 6px; transition: width .6s; }
.metas-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.metas-lista li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: #fff8ea; border: 2px solid #e1cba6; }
.metas-lista li b { font-variant-numeric: tabular-nums; }
.metas-lista li small { color: var(--tinta-2); font-size: 12.5px; white-space: nowrap; }
.metas-lista li.hecho { border-color: #7aa36b; background: #eef5e6; }
.metas-lista li.hecho small { color: #4d7a3e; font-weight: 600; }
.espera { margin: 0; padding-left: 26px; columns: 2; column-gap: 20px; font-size: 14px; line-height: 1.6; max-height: 30vh; overflow: auto; }

/* ---------- controles ---------- */
.zoom {
  position: fixed; z-index: 4; right: 16px; bottom: calc(16px + var(--seguro-abajo));
  display: flex; flex-direction: column; gap: 8px;
}
.zoom button {
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-boton); display: grid; place-items: center; width: 48px; height: 48px;
}
.zoom button:active, .dock button:active, .boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--borde); }
.dock {
  position: fixed; z-index: 4; left: 16px; bottom: calc(16px + var(--seguro-abajo));
  display: flex; gap: 8px;
}
.dock button {
  height: 48px; padding: 0 16px 0 13px; display: inline-flex; align-items: center; gap: 7px;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-boton);
  font-weight: 600; font-size: 15px;
}
#mi-piso:not(.apagado) { background: var(--mostaza); }

/* ---------- ficha: barra compacta que se despliega ---------- */
.ficha {
  position: fixed; z-index: 6;
  background: var(--crema); border: 2.5px solid var(--borde); box-shadow: var(--sombra);
  padding: 10px 12px 12px; overflow: auto; overscroll-behavior: contain;
}
.ficha[hidden], .modal[hidden], .aviso[hidden] { display: none; }
@media (max-width: 759px) {
  .ficha {
    left: 8px; right: 8px; bottom: calc(8px + var(--seguro-abajo));
    max-height: 48vh; border-radius: 20px;
    animation: subir .28s cubic-bezier(.2, .9, .3, 1.1);
  }
  body.con-ficha .zoom, body.con-ficha .dock { display: none; }
}
@media (min-width: 760px) {
  .ficha {
    right: 16px; top: calc(84px + var(--seguro-arriba)); width: 380px;
    max-height: calc(100vh - 110px); border-radius: var(--radio);
    animation: entrar .28s cubic-bezier(.2, .9, .3, 1.1);
  }
  body.con-ficha .zoom { right: 412px; }
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
@keyframes entrar { from { transform: translateX(30px); opacity: 0; } }
.ficha .cerrar { position: absolute; top: 8px; right: 6px; }
.cerrar {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid transparent; background: transparent;
  display: grid; place-items: center; color: var(--tinta-2);
}
.cerrar:hover { background: var(--crema-2); }
.barra-ficha { display: flex; align-items: center; gap: 6px; padding-right: 40px; min-height: 44px; }
.quien { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.quien b { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quien small { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono { width: 40px; height: 40px; border-radius: 12px; background: #fff8ea; border: 2px solid #d9c09a; display: grid; place-items: center; flex: none; }
.icono:active { transform: translateY(1px); }
.boton.mini { flex: none; min-height: 40px; padding: 0 12px; font-size: 14px; }
.pista { margin: 8px 2px 0; font-size: 13.5px; color: var(--teja-osc); font-weight: 500; }
.rol { margin: 8px 2px 4px; font-size: 15px; line-height: 1.4; }
.mas { margin-top: 10px; }
.editor { margin-top: 8px; }
.editor-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.editor-cab h3 { margin: 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.editor h4 { margin: 12px 0 6px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); font-weight: 600; }
.editor h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 4px; }
.opciones.fila-scroll { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fila-scroll .opcion { flex: none; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.opcion.sala { width: 76px; height: 58px; padding: 2px; }
.opcion.obj { width: auto; height: 56px; }
.opcion.parte { width: 48px; height: 66px; }
.aviso {
  position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); top: calc(118px + var(--seguro-arriba));
  max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 10px 14px; border-radius: 14px;
  background: var(--tinta); color: var(--crema); font-size: 14.5px; line-height: 1.35; box-shadow: 0 6px 18px rgba(30, 15, 5, .3);
}
.etiqueta { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #e6d3b3; color: var(--tinta-2); }
.ficha-mania { margin: 10px 0 12px; font-size: 16px; line-height: 1.35; font-weight: 500; }
.ficha-mania span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 3px; }
.ficha h3 { margin: 0 0 7px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: #fff8ea; border: 2px solid #d9c09a; border-radius: 10px; padding: 4px 10px; font-size: 14px; font-weight: 500; }
.chips li.mun { border-color: var(--teja); }
.fila { display: flex; gap: 8px; flex-wrap: wrap; }
.fila + .fila { margin-top: 8px; }
.boton {
  flex: 1; min-height: 46px; padding: 0 14px; border-radius: 14px; font-weight: 600; font-size: 15px;
  background: #fff8ea; border: 2.5px solid var(--borde); box-shadow: var(--sombra-boton);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--tinta);
}
.boton.principal { background: var(--teja); color: #fff6e6; border-color: var(--teja-osc); box-shadow: 0 3px 0 #6e2e1c; }
.boton.discreto { background: transparent; box-shadow: none; border-color: transparent; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; flex: none; }
.boton.discreto:active { transform: none; box-shadow: none; }
.pie-ficha { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pie-ficha .boton.discreto { padding: 0 4px; min-height: 36px; font-size: 13.5px; }
.tuyo { background: var(--mostaza); color: var(--tinta); padding: 1px 7px; border-radius: 6px; }
.ficha-titulo { margin: 8px 0 2px; font-size: 14px; color: var(--tinta-2); }
.ficha-titulo b { color: var(--tinta); font-weight: 600; }
.ficha-estado { margin: 4px 0 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.ficha-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: #5fa86a; flex: none; }
.stats { display: grid; gap: 5px; margin: 4px 0 8px; padding: 10px 12px; background: #fff8ea; border: 2px solid #d9c09a; border-radius: 14px; }
.stat { display: grid; grid-template-columns: 70px 1fr 20px; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.stat b { text-align: right; font-weight: 600; }
.pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.pips i { height: 10px; border-radius: 3px; background: #e6d6ba; }
.pips i.on { background: var(--teja); }
.mejora { margin: 0 0 14px; font-size: 13.5px; color: var(--tinta-2); }
.noticias { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.35; }
.noticias li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; }
.noticias time { color: var(--tinta-2); font-size: 12.5px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.noticias.largo { max-height: 56vh; overflow: auto; }
.noticias li.ev { font-weight: 600; color: var(--teja-osc); }
h3.sub, .prob-opciones h3 { margin: 14px 0 6px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); font-weight: 600; }
.probador { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
#prob-lienzo { width: 120px; height: 240px; background: #fff8ea; border: 2px solid #d9c09a; border-radius: 14px; position: sticky; top: 0; }
.prob-opciones h3:first-child { margin-top: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { width: 46px; height: 58px; padding: 3px; border-radius: 10px; background: #fff8ea; border: 2px solid #d9c09a; display: grid; place-items: center; }
.opcion img { max-width: 100%; max-height: 100%; object-fit: contain; }
.opcion.pared { width: 62px; height: 48px; }
.opcion[aria-pressed="true"], .color[aria-pressed="true"] { border-color: var(--teja); box-shadow: 0 0 0 2px var(--teja); }
.opcion:disabled, .color:disabled { opacity: .4; cursor: not-allowed; }
.colores { display: flex; flex-wrap: wrap; gap: 6px; }
.color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #d9c09a; background: var(--c); }
.color[style*="transparent"] { background: repeating-linear-gradient(45deg, #fff8ea 0 5px, #e6d6ba 5px 10px); }
.candado { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--teja); margin-left: 4px; }
@media (max-width: 420px) { .probador { grid-template-columns: 1fr; } #prob-lienzo { position: static; margin: 0 auto; } }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: rgba(40, 22, 12, .45);
}
.modal-caja {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra);
  padding: 22px 22px 20px; animation: subir .25s ease-out;
}
.modal-caja h2 { margin: 0 44px 10px 0; font-size: 24px; line-height: 1.15; }
.modal-caja p { margin: 0 0 12px; line-height: 1.45; }
.modal-caja ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.45; }
.modal-caja li { margin-bottom: 6px; }
.modal-caja .nota { font-size: 13.5px; color: var(--tinta-2); }
.modal-caja a { color: var(--teja-osc); }
.eventos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.eventos .boton[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: #2c1910; }

/* ---------- cargando ---------- */
.cargando {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: #bcd6e6; transition: opacity .4s;
}
.cargando.fuera { opacity: 0; pointer-events: none; }
.cargando-caja {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 20px; padding: 18px 26px; box-shadow: var(--sombra);
}
.cargando-caja .logo { font-size: 30px; }
#cargando-txt { color: var(--tinta-2); font-weight: 500; }

@media (max-width: 759px) {
  .barra { flex-wrap: wrap; gap: 8px; padding: calc(8px + var(--seguro-arriba)) 10px 8px; }
  .marca { padding: 5px 11px 6px; }
  .logo { font-size: 18px; }
  .cuenta { font-size: 11.5px; }
  .buscador { flex-basis: 100%; max-width: none; order: 2; }
  .buscador input { height: 46px; }
  .evento { left: auto; right: 10px; top: calc(8px + var(--seguro-arriba)); padding: 5px 10px 6px 9px; max-width: calc(100vw - 170px); }
  .evento-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .metas { left: 10px; right: 10px; width: auto; top: calc(124px + var(--seguro-arriba)); flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px; }
  .metas-txt { flex: none; }
  .metas-txt b { font-size: 14px; }
  .metas-txt small { font-size: 11.5px; max-width: 150px; }
  .metas-barra { flex: 1; }
  body.con-ficha .metas { display: none; }
  .evento-txt b { font-size: 13.5px; }
  .evento-txt small { font-size: 10px; }
  .zoom { right: 10px; bottom: calc(12px + var(--seguro-abajo)); }
  .dock { left: 10px; bottom: calc(12px + var(--seguro-abajo)); gap: 6px; }
  .quien b { font-size: 16px; }
  .icono { width: 36px; height: 36px; }
  .boton.mini { padding: 0 10px; }
  .dock button { flex-direction: column; justify-content: center; gap: 1px; height: 56px; width: 70px; padding: 0; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- modo piso ---------- */
.volver {
  display: none; position: fixed; z-index: 7; left: 12px; top: calc(10px + var(--seguro-arriba));
  height: 44px; padding: 0 16px 0 10px; align-items: center; gap: 4px;
  background: var(--crema); border: 2.5px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-boton); font-weight: 600; font-size: 15px;
}
body.con-ficha .volver { display: inline-flex; }
body.con-ficha .barra, body.con-ficha .evento, body.con-ficha .metas, body.con-ficha .dock, body.con-ficha .zoom { display: none !important; }
@media (min-width: 760px) { .ficha { top: calc(14px + var(--seguro-arriba)); max-height: calc(100vh - 28px); } }
.editar-rapido { margin-top: 8px; }
.editar-rapido .boton { min-height: 42px; }
/* editor de la casa, al estilo de un catálogo por categorías */
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.pestana { flex: none; height: 34px; padding: 0 12px; border-radius: 999px; border: 2px solid #d9c09a; background: #fff8ea; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pestana[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.rejilla-obj { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 4px; }
.celda { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 7px; border-radius: 14px; border: 2px solid #e1cba6; background: #fff8ea; text-align: center; }
.celda .marco, .seleccion .marco { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 10px; background: #f3e6cf; }
.celda .marco img, .seleccion .marco img { max-width: 56px; max-height: 56px; object-fit: contain; }
.celda .nombre { font-size: 12px; font-weight: 500; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; }
.celda .da { font-size: 11px; color: var(--teja-osc); font-weight: 600; }
.celda[aria-pressed="true"] { border-color: var(--teja); box-shadow: 0 0 0 2px var(--teja); background: #fff1dc; }
.seleccion { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 6px 0 4px; border-radius: 14px; background: #eaf5fb; border: 2px solid #7fbfdc; }
.seleccion div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.seleccion b { font-size: 15px; }
.seleccion small { font-size: 12px; color: var(--tinta-2); }
.a-medida { margin-top: 6px; padding: 14px; border-radius: 14px; border: 2px dashed #c9a87c; background: #fff8ea; }
.a-medida b { display: block; font-size: 15px; margin-bottom: 4px; }
.a-medida p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tinta-2); }
.nivel { margin: 6px 0 4px; padding: 8px 10px; border-radius: 12px; background: #fff1dc; border: 2px solid #e8b97a; display: flex; flex-direction: column; line-height: 1.3; }
.nivel b { font-size: 15px; color: var(--teja-osc); }
.nivel small { font-size: 12.5px; color: var(--tinta-2); }
/* acciones con iconos (sin texto a la vista; la etiqueta queda para lectores de pantalla y como pista al pasar) */
.acciones { display: flex; gap: 8px; margin-top: 10px; }
.icono-accion {
  width: 52px; height: 48px; display: grid; place-items: center; flex: none;
  border-radius: 14px; background: #fff8ea; border: 2.5px solid var(--borde); box-shadow: var(--sombra-boton); color: var(--tinta);
}
.icono-accion .ico { width: 24px; height: 24px; }
.icono-accion span, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icono-accion:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--borde); }
.acciones .icono-accion:first-child { background: var(--teja); color: #fff6e6; border-color: var(--teja-osc); box-shadow: 0 3px 0 #6e2e1c; }
.sel-botones { display: flex; gap: 6px; }
.sel-botones .icono-accion { width: 44px; height: 42px; }
.escribir { flex-wrap: nowrap; margin-top: 6px; }
.escribir input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: 500 16px var(--fuente); color: var(--tinta);
  background: #fff; border: 2.5px solid var(--borde); border-radius: 12px; outline: none;
}
.escribir input:focus { border-color: var(--teja); }
.icono-accion[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* ---------- portada ---------- */
.portada {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: rgba(183, 211, 230, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .6s ease, transform .6s ease;
}
.portada.fuera { opacity: 0; transform: scale(1.06); pointer-events: none; }
.portada { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 720px) {
  .portada-tejado { width: min(240px, 66%); }
  .portada-logo { font-size: 44px; padding: 6px 22px 8px; }
  .portada-sub { margin-top: 12px; font-size: 15.5px; }
  .portada-lanza { padding: 10px 14px; }
  .portada-paso { font-size: 16.5px; }
  .portada-botones { margin-top: 12px; }
  .portada-botones .boton { min-height: 48px; }
}
.portada-caja { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.portada-tejado { width: min(340px, 86%); height: auto; margin-bottom: -6px; filter: drop-shadow(0 8px 10px rgba(60, 30, 15, .25)); animation: tejadoBaja .9s cubic-bezier(.2, .9, .3, 1.2); }
.portada-logo {
  margin: 0; padding: 8px 28px 10px; font-size: clamp(46px, 13vw, 72px); font-weight: 700; letter-spacing: .04em; line-height: 1;
  color: var(--teja-osc); background: var(--crema); border: 3px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra);
  animation: logoSube .7s .15s both cubic-bezier(.2, .9, .3, 1.3);
}
.portada-sub { margin: 18px 6px 6px; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--tinta); }
.portada-carga { margin: 6px 0 0; color: var(--tinta-2); font-weight: 500; }
.portada-botones { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 18px; animation: subir .4s ease-out; }
.portada-botones[hidden] { display: none; }
.portada-botones .boton { width: 100%; min-height: 54px; font-size: 17px; }
.portada-botones a.boton { display: grid; place-items: center; text-decoration: none; box-sizing: border-box; }
.portada-botones [hidden], .portada-botones a.boton[hidden] { display: none; }
.portada-lanza { width: 100%; margin-top: 4px; padding: 14px 16px 12px; background: var(--crema); border: 3px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); box-sizing: border-box; }
.portada-lanza[hidden] { display: none; }
.portada-paso { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--tinta); }
.portada-paso .clave { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--teja-osc); color: #fff6e6; font-weight: 700; letter-spacing: .03em; }
.cuenta-ig { color: var(--teja-osc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.portada-meta { margin-top: 12px; }
.portada-meta[hidden] { display: none; }
.portada-meta-barra { height: 14px; border-radius: 999px; background: #ead8b8; border: 2px solid var(--borde); overflow: hidden; }
.portada-meta-barra span { display: block; height: 100%; min-width: 6px; width: 0; background: var(--teja); border-radius: 999px; transition: width .8s ease; }
.portada-meta p { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.portada-gratis { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: #3f6b31; }
.portada-llave { margin: 8px 0 0; font-size: 14px; line-height: 1.35; color: #6e4b39; }
.portada-priv { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; }
@keyframes tejadoBaja { from { transform: translateY(-60px); opacity: 0; } }
@keyframes logoSube { from { transform: translateY(30px) scale(.9); opacity: 0; } }
@media (max-width: 759px) { .dock button { width: 64px; font-size: 11.5px; } }

/* ---------- mejorar estadísticas ---------- */
.stat.con-boton { grid-template-columns: 66px 1fr 18px 64px; }
.entrenar { justify-self: end; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 9px; border: 2px solid var(--borde); background: #fff8ea; font: 700 15px var(--fuente); color: var(--tinta); display: grid; place-items: center; }
.entrenar:disabled { opacity: .35; }
.entrenar.en-curso { border: 0; background: transparent; font-weight: 600; font-size: 13px; color: var(--teja-osc); font-variant-numeric: tabular-nums; }
.entrenar.max { border: 0; background: transparent; font-size: 12px; color: var(--tinta-2); }
.entrenar.listo { background: #7aa36b; border-color: #4d7a3e; color: #fff; font-size: 12.5px; animation: latido 1.2s ease-in-out infinite; }
.nota-stats { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-2); line-height: 1.35; }
.aviso-mejora { width: 100%; margin-top: 8px; min-height: 44px; border-radius: 12px; border: 2px solid #4d7a3e; background: #7aa36b; color: #fff; font-weight: 600; font-size: 14px; animation: latido 1.6s ease-in-out infinite; }
#mi-piso.aviso-listo { position: relative; }
#mi-piso.aviso-listo::after { content: ""; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: #7aa36b; border: 2px solid var(--crema); }
.noticias li.lore { color: #4d6f3e; font-weight: 500; }
/* ---------- chapas e insignias ---------- */
.insignia { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 1px 0 rgba(60,30,15,.25); }
.insignia svg { width: 66%; height: 66%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chapa-grande { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 10px 16px; border: 3px solid; border-radius: 14px; font-weight: 600; font-size: 20px; min-height: 58px; }
.chapa-grande span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rejilla-chapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.chapa-op, .insignia-op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; border: 2px solid #e1cba6; background: #fff8ea; text-align: center; }
.chapa-op[aria-pressed="true"], .insignia-op[aria-pressed="true"] { border-color: var(--teja); box-shadow: 0 0 0 2px var(--teja); }
.chapa-op:disabled, .insignia-op:disabled { opacity: .5; }
.chapa-muestra { width: 70px; height: 34px; display: grid; place-items: center; border: 2.5px solid; border-radius: 9px; font-weight: 700; font-size: 17px; }
.chapa-op .nombre, .insignia-op .nombre { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.chapa-op .candado { font-size: 11px; margin: 0; }
.rejilla-insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.insignia-op .como { font-size: 11px; color: var(--tinta-2); line-height: 1.2; }
.insignia-op:disabled .insignia { filter: grayscale(1); }
.insignias-ficha { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.insignia-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff8ea; border: 2px solid #e1cba6; font-size: 12.5px; font-weight: 600; }
/* ---------- duros, compras, buzón y guía ---------- */
.duros { margin-left: auto; margin-right: 8px; padding: 4px 10px; border-radius: 999px; background: #f0cf7a; border: 2px solid #b9892f; font-size: 13px; font-weight: 700; color: #3d2a08; white-space: nowrap; }
.celda.comprar { background: #f6efe3; border-style: dashed; }
.celda.comprar .marco img { opacity: .55; filter: grayscale(.4); }
.celda .precio { font-size: 11.5px; font-weight: 700; color: #8a5c08; }
.celda .req { font-size: 10.5px; color: var(--tinta-2); }
.icono-accion[data-nuevo]::after { content: ""; position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: #c9583e; border: 2px solid var(--crema); }
.icono-accion { position: relative; }
.acciones { flex-wrap: wrap; }
.noticias.buzon li { grid-template-columns: 46px 1fr; }
.noticias.buzon li small { display: block; color: var(--tinta-2); font-size: 12px; margin-top: 2px; }
.noticias.buzon li.nuevo { font-weight: 600; }
.guia table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font-size: 14px; }
.guia td, .guia th { padding: 5px 6px; border-bottom: 1px solid #e6d6ba; text-align: left; vertical-align: top; }
.guia th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.guia p { font-size: 14.5px; }
/* ---------- guía plegable ---------- */
.guia { display: grid; gap: 8px; margin-bottom: 10px; }
.guia-sec { border: 2px solid #e1cba6; border-radius: 16px; background: #fff8ea; overflow: hidden; }
.guia-sec[open] { border-color: var(--teja); background: #fffaf2; }
.guia-sec summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.guia-sec summary::-webkit-details-marker { display: none; }
.guia-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--teja); color: #fff6e6; }
.guia-ico .ico { width: 22px; height: 22px; }
.guia-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.guia-tit b { font-size: 15.5px; }
.guia-tit small { font-size: 12.5px; color: var(--tinta-2); }
.guia-sec .flecha { color: var(--tinta-2); transition: transform .2s; }
.guia-sec[open] .flecha { transform: rotate(180deg); }
.guia-cuerpo { padding: 0 12px 12px; animation: subir .25s ease-out; }
.guia-cuerpo p { font-size: 14.5px; margin: 0 0 8px; }
.guia-cuerpo .mini { font-size: 13px; color: var(--tinta-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cards.cuatro { grid-template-columns: repeat(2, 1fr); }
.cards.dos { grid-template-columns: repeat(2, 1fr); }
.casa-card, .mueble-card, .stat-card, .chapa-card, .ins-card, .duro-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: #fff; border: 2px solid #eadbbf; text-align: center; }
.casa-card img { width: 100%; border-radius: 8px; }
.mueble-card img { height: 54px; object-fit: contain; }
.casa-card b, .mueble-card b, .stat-card b, .chapa-card b, .ins-card b { font-size: 12.5px; line-height: 1.15; }
.mueble-card small, .stat-card small, .chapa-card small, .ins-card small { font-size: 11px; color: var(--tinta-2); line-height: 1.2; }
.pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--teja); color: #fff6e6; }
.pill.oro { background: #f0cf7a; color: #3d2a08; }
.duro-card { flex-direction: row; text-align: left; gap: 10px; }
.duro-card span { flex: 1; font-size: 13px; line-height: 1.2; }
.duro-card b { font-size: 17px; color: #8a5c08; }
.duro-card .guia-ico { width: 32px; height: 32px; border-radius: 10px; background: #f0cf7a; color: #3d2a08; }
.duro-card .guia-ico .ico { width: 18px; height: 18px; }
.linea { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.linea li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; position: relative; padding: 6px 0; font-size: 14px; }
.linea li::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #e1cba6; z-index: 0; }
.linea li:first-child::before { top: 50%; }
.linea li:last-child::before { bottom: 50%; }
.linea .dia { position: relative; z-index: 1; width: 44px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--tinta); color: var(--crema); font-size: 12px; font-weight: 700; }
@media (max-width: 420px) { .cards.dos { grid-template-columns: 1fr; } }
.gratis { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #eef5e6; border: 2px solid #7aa36b; font-size: 14px; line-height: 1.4; color: #2f4a26; }
.gratis b { color: #3d6b2e; }
.foto-story { display: block; width: min(100%, 300px); margin: 0 auto 12px; border-radius: 16px; border: 3px solid var(--borde); box-shadow: var(--sombra); }

/* ---------- la llave del piso ---------- */
.llave-codigo { margin: 4px 0 12px; padding: 14px 10px; text-align: center; font: 700 30px/1 var(--fuente); letter-spacing: .08em; color: var(--teja-osc); background: #fff8ea; border: 3px dashed var(--borde); border-radius: 16px; user-select: all; -webkit-user-select: all; }
.pasos { margin: 10px 0; padding-left: 22px; }
.pasos li { margin: 6px 0; line-height: 1.4; }
.fila a.boton { display: inline-grid; place-items: center; text-decoration: none; }
.llave-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; min-height: 48px; }
.llave-btn svg { width: 20px; height: 20px; }
.form-llave { display: grid; gap: 8px; margin: 12px 0; }
.form-llave label { font-weight: 600; }
.llave-in { width: 100%; box-sizing: border-box; padding: 12px 10px; text-align: center; font: 700 30px/1.1 var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--teja-osc); background: #fff8ea; border: 3px solid var(--borde); border-radius: 16px; }
.llave-in:focus { outline: 3px solid var(--teja); outline-offset: 2px; }
.llave-in::placeholder { color: #c9b28f; }
.llave-error { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fde6dc; color: #8a2b14; font-weight: 600; }
.llave-error[hidden] { display: none; }

/* ---------- votación del evento ---------- */
.evento-reloj { font-size: 11px !important; text-transform: none !important; letter-spacing: 0 !important; opacity: .85; font-variant-numeric: tabular-nums; }
.evento-reloj[hidden] { display: none; }
.ronda-reloj { margin: 4px 0 10px; }
.ronda-reloj b { font-variant-numeric: tabular-nums; color: var(--teja-osc); }
.ronda { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ronda li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff8ea; border: 2.5px solid #e1cba6; }
.ronda li.gana { border-color: var(--teja); background: #fff1dd; }
.ronda .pos { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--crema); border: 2px solid var(--borde); }
.ronda li.gana .pos { background: var(--teja); color: #fff6e6; border-color: var(--teja-osc); }
.ronda .que { display: flex; flex-direction: column; min-width: 0; }
.ronda .que b { font-size: 16px; overflow-wrap: anywhere; }
.ronda .que small { font-size: 12.5px; color: var(--tinta-2); }
.ronda .votos { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ronda .votos b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ronda .votos small { font-size: 11px; color: var(--tinta-2); }

/* ---------- cargos, bando y escritura ---------- */
.cargo-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #c8962c; color: #fff8e6; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.cargo-linea { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: #fff3d6; border: 2px solid #e4c47a; }
.cargo-linea span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.cargo-linea small { color: var(--tinta-2); }
.bando { position: fixed; z-index: 4; left: 16px; top: calc(222px + var(--seguro-arriba)); width: 250px; display: flex; align-items: center; gap: 10px; text-align: left;
  background: #fff3d6; border: 2.5px solid #c8962c; border-radius: 14px; box-shadow: var(--sombra-boton); padding: 7px 12px; font: inherit; color: var(--tinta); cursor: pointer; }
.bando[hidden] { display: none; }
.bando-ico svg { width: 22px; height: 22px; fill: none; stroke: #b8862a; stroke-width: 2; stroke-linejoin: round; }
.bando-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bando-txt small { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bando-txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bando-grande { font-size: 22px; font-weight: 600; line-height: 1.3; }
.portada-vecinos { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.portada-vecinos[hidden] { display: none; }
.campo { flex: 1; min-width: 0; font: 500 16px var(--fuente); padding: 10px 12px; border: 2.5px solid var(--borde); border-radius: 12px; background: #fff; color: var(--tinta); }
@media (max-width: 759px) { .bando { left: 10px; right: 10px; width: auto; top: calc(172px + var(--seguro-arriba)); } }
body.con-ficha .bando { display: none !important; }

/* ---------- menú de juego de mi piso (móvil primero) ---------- */
.misiones { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.misiones-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.misiones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.misiones-cab b { font-size: 15px; }
.misiones-cab small { font-size: 12.5px; color: var(--tinta-2); }
.mision { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; padding: 6px 6px; border-radius: 12px; border: 2px solid #e1cba6; background: #fff8ea; font: 600 13.5px var(--fuente); color: var(--tinta); text-align: left; cursor: pointer; }
.mision svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--tinta-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mision.hecha { background: #eef5e6; border-color: #7aa36b; color: #3f6b31; }
.mision.hecha span { text-decoration: line-through; }
.mision.hecha svg { stroke: #3f6b31; stroke-width: 2.6; }
.entrenando { margin: 0; padding: 8px 12px; border-radius: 12px; background: #4a2c1d; color: #fff8ea; font-size: 14px; font-weight: 600; }
.mejora-lista { width: 100%; padding: 10px 12px; border-radius: 12px; border: 2px solid #2c4d22; background: #3f6b31; color: #fff; font: 600 15px var(--fuente); box-shadow: 0 2px 0 #22391a; }
.dock-piso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.dock-boton { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; font: 600 12.5px var(--fuente); color: var(--tinta); cursor: pointer; }
.dock-circulo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff8ea; border: 2.5px solid var(--borde); box-shadow: 0 3px 0 #c9b28f; }
.dock-circulo svg { width: 25px; height: 25px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-boton.principal .dock-circulo { background: #a44a2f; border-color: #6e2e1c; box-shadow: 0 3px 0 #6e2e1c; }
.dock-boton.principal .dock-circulo svg { stroke: #fff8ea; }
.dock-boton[data-nuevo]::after { content: ''; position: absolute; top: 0; right: calc(50% - 30px); width: 13px; height: 13px; border-radius: 50%; background: #3f6b31; border: 2px solid var(--crema); }
.dock-boton:active .dock-circulo { transform: translateY(2px); box-shadow: 0 1px 0 #c9b28f; }
.panel-juego { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.panel-cab { display: flex; align-items: center; gap: 10px; }
.panel-cab b { font-size: 17px; }
.stat-lista { display: flex; flex-direction: column; gap: 8px; }
.stat-fila { display: grid; grid-template-columns: 70px 1fr 124px; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 14px; background: #fff8ea; border: 2px solid #e1cba6; }
.stat-fila > span:first-child { font-weight: 600; font-size: 15px; }
.stat-fila .pips { display: flex; gap: 2px; }
.stat-fila .pips i { flex: 1; height: 16px; max-width: 9px; border-radius: 3px; background: #e6d6ba; }
.stat-fila .pips i.on { background: var(--teja); }
.stat-boton { display: grid; place-items: center; min-height: 38px; padding: 0 6px; border-radius: 12px; border: 2px solid var(--borde); background: #fff8ea; font: 600 13px var(--fuente); white-space: nowrap; color: var(--tinta); text-align: center; font-variant-numeric: tabular-nums; }
.stat-boton:disabled { opacity: .5; }
.stat-boton.listo { background: #3f6b31; border-color: #2c4d22; color: #fff; box-shadow: 0 2px 0 #22391a; }
.stat-boton.en-curso { background: #4a2c1d; border-color: #4a2c1d; color: #fff8ea; }
.stat-boton.max { border-style: dashed; color: var(--tinta-2); }
.vecino-lista { display: flex; flex-direction: column; gap: 7px; }
.vecino-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #fff8ea; border: 2px solid #e1cba6; }
.vecino-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vecino-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vecino-txt small { font-size: 12.5px; color: var(--tinta-2); }
.vecino-fila .boton { min-height: 40px; padding: 0 12px; font-size: 14px; }
.plan-tarjeta { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 16px; background: #fff8ea; border: 2px solid #e1cba6; }
.plan-tarjeta.hecha { background: #eef5e6; border-color: #7aa36b; }
.plan-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, #fff8ea); }
.plan-ico svg { width: 27px; height: 27px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.plan-txt b { font-size: 15px; }
.plan-txt small { font-size: 12.5px; color: var(--tinta-2); }
.plan-tarjeta .boton { min-height: 40px; padding: 0 14px; font-size: 14px; }
.plan-ok { font-size: 13px; font-weight: 700; color: #3f6b31; padding-right: 4px; }
.plan-otros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.afinidad { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 16px; background: #fff0f3; border: 2px solid #e7a6b8; }
.afin-cab { display: flex; align-items: center; gap: 8px; }
.afin-cab b { font-size: 15.5px; flex: 1; }
.afin-cab small { font-size: 12.5px; color: #8a2b4c; font-weight: 600; }
.afin-corazon { width: 22px; height: 22px; fill: #d24f7a; stroke: none; }
.afin-barra { height: 12px; border-radius: 999px; background: #f7d6df; overflow: hidden; }
.afin-barra i { display: block; height: 100%; min-width: 4px; background: #d24f7a; border-radius: 999px; }
.afin-accion { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border-radius: 14px; border: 2px solid var(--borde); background: #fff8ea; color: var(--tinta); font-family: var(--fuente); cursor: pointer; }
.afin-accion svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.afin-accion span { display: flex; flex-direction: column; line-height: 1.2; }
.afin-accion b { font-size: 15px; }
.afin-accion small { font-size: 12.5px; opacity: .85; }
.afin-accion em { font-style: normal; font-weight: 700; font-size: 14px; }
.afin-accion.principal { background: #a44a2f; border-color: #6e2e1c; color: #fff8ea; box-shadow: 0 3px 0 #6e2e1c; }
.afin-accion:disabled { opacity: .55; }

/* ---------- tarjeta de una persona (pulsada dentro de un piso) ---------- */
.persona-sub { margin: -4px 0 10px; color: var(--tinta-2); font-size: 14px; }
.persona-stats { display: grid; gap: 6px; margin: 10px 0; }
.persona-stat { display: grid; grid-template-columns: 74px 1fr 24px; gap: 8px; align-items: center; font-size: 14.5px; }
.persona-stat span:first-child { font-weight: 600; }
.persona-stat .pips { display: flex; gap: 2px; }
.persona-stat .pips i { flex: 1; height: 14px; max-width: 12px; border-radius: 3px; background: #e6d6ba; }
.persona-stat .pips i.on { background: var(--teja); }
.persona-stat b { text-align: right; font-variant-numeric: tabular-nums; }
.persona-afin { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 15px; }
.bunker-cifra { margin: 0 0 10px; font-size: 18px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.bunker-cifra b { font-size: 34px; color: #2d5a2a; }
/* la llave del BUZÓN: código grande, copiar e ir al post */
.buzon-pasos { margin: 10px 0 14px; padding-left: 22px; display: grid; gap: 6px; line-height: 1.35; }
.buzon-codigo { margin: 4px 0 10px; padding: 14px 10px; text-align: center; font: 700 34px/1.1 var(--fuente); letter-spacing: .08em; color: var(--teja-osc); background: #fff8ea; border: 3px dashed var(--borde); border-radius: 16px; user-select: all; -webkit-user-select: all; }
.buzon-botones { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.buzon-botones .boton { justify-content: center; text-align: center; text-decoration: none; }
.buzon-estado { margin: 10px 0 0; font-size: 14px; color: #6e4b39; }
.llave-otra { margin-top: 14px; border-top: 2px solid #e1cba6; padding-top: 10px; }
.llave-otra summary { cursor: pointer; font-weight: 600; color: #6e4b39; }
#buzon-pedir { width: 100%; justify-content: center; }
/* los más famosos de la semana (en el diario) */
.famosos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.famoso { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 2px solid #e1cba6; background: #fff8ea; font: 500 15px var(--fuente); color: var(--tinta); text-align: left; cursor: pointer; }
.famoso .pos { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teja); color: #fff8ea; font-weight: 700; font-size: 14px; }
.famosos li:first-child .famoso .pos { background: #c8962c; }
.famoso .pts { font-weight: 700; font-size: 14px; color: var(--teja-osc); }
/* aviso cuando el servidor no responde */
.aviso-caida { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(92vw, 520px); padding: 12px 16px; border-radius: 16px; background: #4a2c1d; color: #fff8ea; font: 500 14.5px/1.35 var(--fuente); box-shadow: 0 6px 18px rgba(30,15,5,.35); text-align: center; }
.aviso-caida[hidden] { display: none; }