/* ============================================================
   Calle — sistema visual
   Marca DigitalBiel (azul + blanco, Bricolage Grotesque + DM Sans)
   aplicada a una app de campo: se usa de pie, con una mano, con sol
   dándole a la pantalla y a veces sin cobertura.
   ============================================================ */

:root {
  --azul: #2B5CFF;
  --azul-600: #1E45E6;
  --azul-400: #5B82FF;
  --azul-tenue: #EAF0FF;

  --verde: #0F9D58;
  --verde-tenue: #E6F6EE;
  --ambar: #B26A00;
  --ambar-tenue: #FDF1DF;
  --rojo: #C4362F;
  --rojo-tenue: #FBEBEA;

  --fondo: #FFFFFF;
  --fondo-2: #F4F7FF;
  --tarjeta: #FFFFFF;
  --titulo: #0A0E1A;
  --texto: #454F67;
  --apagado: #7B8699;
  --linea: #E5EAF4;
  --sombra: 0 1px 2px rgba(10, 14, 26, .05), 0 8px 24px rgba(10, 14, 26, .06);
  --sombra-alta: 0 -8px 40px rgba(10, 14, 26, .16);

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  --paso: cubic-bezier(.22, 1, .36, 1);
  --hoja: cubic-bezier(.32, .72, 0, 1);
  --t-rapido: 160ms;
  --t-medio: 260ms;
  --t-hoja: 420ms;

  --texto-base: 16px;
  --densidad: 1;

  --alto-barra: calc(58px + env(safe-area-inset-bottom));
}

[data-tema="oscuro"] {
  --fondo: #0A0E1A;
  --fondo-2: #0D1424;
  --tarjeta: #131B2E;
  --titulo: #FFFFFF;
  --texto: #C6CFE4;
  --apagado: #8995B3;
  --linea: rgba(255, 255, 255, .10);
  --azul-tenue: rgba(43, 92, 255, .16);
  --verde-tenue: rgba(15, 157, 88, .16);
  --ambar-tenue: rgba(178, 106, 0, .18);
  --rojo-tenue: rgba(196, 54, 47, .16);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --sombra-alta: 0 -8px 40px rgba(0, 0, 0, .5);
}

[data-movimiento="no"] *,
[data-movimiento="no"] *::before,
[data-movimiento="no"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo `hidden` del navegador es un simple display:none, y cualquier
   clase con display:flex o display:grid se lo come. Sin esto, la pantalla del
   PIN se queda flotando encima de la app aunque esté "oculta". */
[hidden] { display: none !important; }

html {
  font-size: var(--texto-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.45;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--alto-barra);
  min-height: 100dvh;
}

h1, h2, h3, h4, .titular {
  font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  color: var(--titulo);
  letter-spacing: -.02em;
  line-height: 1.08;
  font-weight: 700;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}

button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--linea);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}

.cabecera-fila { display: flex; align-items: center; gap: 12px; }
.cabecera h1 { font-size: 1.55rem; flex: 1; }
.cabecera .sub { color: var(--apagado); font-size: .85rem; margin-top: 2px; }

.marca-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }

/* ---------- Estado de conexión ---------- */
.aviso-red {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 16px;
  background: var(--ambar-tenue);
  color: var(--ambar);
}
.aviso-red.visible { display: flex; }
.aviso-red.sincronizando { background: var(--azul-tenue); color: var(--azul); }

/* ---------- Números grandes ---------- */
.marcador {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border-radius: var(--r-m);
  overflow: hidden;
  margin: 14px 16px 0;
}
.marcador div {
  background: var(--tarjeta);
  padding: calc(13px * var(--densidad)) 8px;
  text-align: center;
}
.marcador b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--titulo);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.marcador span { font-size: .72rem; color: var(--apagado); font-weight: 500; }
.marcador .destacado b { color: var(--azul); }

/* ---------- Filtros ---------- */
.filtros {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtros::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  color: var(--texto);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--paso), color var(--t-rapido) var(--paso), transform var(--t-rapido) var(--paso);
}
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* ---------- Lista de negocios ---------- */
.lista { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 10px; }

.tarjeta {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: calc(14px * var(--densidad)) 14px calc(13px * var(--densidad)) 18px;
  box-shadow: var(--sombra);
  transition: transform var(--t-rapido) var(--paso), box-shadow var(--t-rapido) var(--paso);
  overflow: hidden;
}
.tarjeta:active { transform: scale(.985); }

/* Filete de color a la izquierda: el tier se ve sin leer nada */
.tarjeta::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--apagado);
  opacity: .35;
}
.tarjeta[data-tier="A"]::before { background: var(--azul); opacity: 1; }
.tarjeta[data-tier="B"]::before { background: var(--azul-400); opacity: .85; }
.tarjeta[data-tier="X"]::before { opacity: .18; }
.tarjeta.visitado { opacity: .62; }

.tarjeta-alto { display: flex; align-items: flex-start; gap: 10px; }
.tarjeta-nombre {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--titulo);
  flex: 1;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.distancia {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .82rem;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.tarjeta-medio { font-size: .84rem; color: var(--apagado); margin-top: 3px; }
.tarjeta-bajo { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

.etiqueta {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--fondo-2);
  color: var(--apagado);
  letter-spacing: .01em;
}
.etiqueta.tier-A { background: var(--azul); color: #fff; }
.etiqueta.tier-B { background: var(--azul-tenue); color: var(--azul); }
.etiqueta.interesado { background: var(--verde-tenue); color: var(--verde); }
.etiqueta.volver { background: var(--ambar-tenue); color: var(--ambar); }
.etiqueta.no_interesado { background: var(--rojo-tenue); color: var(--rojo); }
.etiqueta.sinweb { background: var(--azul-tenue); color: var(--azul); }
.etiqueta.pendiente { background: var(--ambar-tenue); color: var(--ambar); }

.estrellas { font-size: .8rem; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Vacío y esqueletos ---------- */
.vacio { padding: 56px 32px; text-align: center; color: var(--apagado); }
.vacio h3 { font-size: 1.15rem; margin-bottom: 6px; }
.vacio p { font-size: .9rem; }

.hueso {
  height: 84px;
  border-radius: var(--r-m);
  background: linear-gradient(100deg, var(--fondo-2) 30%, color-mix(in srgb, var(--fondo-2) 60%, var(--linea)) 50%, var(--fondo-2) 70%);
  background-size: 220% 100%;
  animation: brillo 1.4s infinite linear;
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -20% 0; } }

/* ---------- Entrada escalonada de la lista ---------- */
.entra { animation: sube var(--t-medio) var(--paso) backwards; }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Barra inferior ---------- */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0 7px;
  color: var(--apagado);
  font-size: .68rem;
  font-weight: 600;
  transition: color var(--t-rapido) var(--paso);
}
.barra button svg { width: 23px; height: 23px; transition: transform var(--t-medio) var(--paso); }
.barra button[aria-current="page"] { color: var(--azul); }
.barra button[aria-current="page"] svg { transform: translateY(-2px) scale(1.06); }

/* ---------- Botón flotante ---------- */
.flotante {
  position: fixed;
  right: 16px;
  bottom: calc(var(--alto-barra) + 14px);
  z-index: 41;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(43, 92, 255, .38);
  transition: transform var(--t-medio) var(--paso);
}
.flotante:active { transform: scale(.9); }
.flotante svg { width: 26px; height: 26px; }

/* ---------- Vistas ---------- */
.vista { display: none; }
.vista.activa { display: block; animation: aparece var(--t-medio) var(--paso); }
@keyframes aparece { from { opacity: 0; } }

/* ---------- Mapa ---------- */
#mapa { height: calc(100dvh - var(--alto-barra) - 56px); width: 100%; background: var(--fondo-2); }
.leaflet-container { font: inherit; }

/* Los mapas de OpenStreetMap solo vienen en claro. De noche deslumbran, así que
   se invierten y se les gira el tono para que el agua siga siendo azul. */
[data-tema="oscuro"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92);
}
.pin {
  /* Los pines son <i>, que por defecto van en línea y se comen el ancho y el
     alto. Sin este display:block salen como una manchita alargada. */
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  background: var(--apagado);
}
.pin.A { background: var(--azul); width: 20px; height: 20px; }
.pin.B { background: var(--azul-400); }
.pin.visitado { background: var(--verde); }
.pin.yo {
  background: #fff;
  border: 4px solid var(--azul);
  width: 20px; height: 20px;
  box-shadow: 0 0 0 6px rgba(43, 92, 255, .2);
}

/* ---------- Hojas que suben ---------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 14, 26, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hoja) var(--hoja);
  backdrop-filter: blur(2px);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.hoja {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 51;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--t-hoja) var(--hoja), visibility 0s linear var(--t-hoja);
  will-change: transform;
}
.hoja.abierta {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-hoja) var(--hoja);
}

.hoja-tirador {
  flex: 0 0 auto;
  padding: 10px 0 4px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.hoja-tirador i {
  display: block;
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--linea);
}
.hoja-cuerpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(20px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.hoja-pie {
  flex: 0 0 auto;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--fondo);
}

/* ---------- Ficha ---------- */
.ficha-nombre { font-size: 1.6rem; margin-bottom: 4px; }
.ficha-sub { color: var(--apagado); font-size: .92rem; margin-bottom: 16px; }

.acciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px;
  border-radius: var(--r-m);
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  font-size: .7rem;
  font-weight: 600;
  color: var(--texto);
  transition: transform var(--t-rapido) var(--paso);
}
.accion:active { transform: scale(.94); }
.accion svg { width: 20px; height: 20px; color: var(--azul); }
.accion[disabled] { opacity: .35; }

.bloque {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: 16px;
  margin-bottom: 12px;
}
.bloque h4 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apagado);
  font-weight: 700;
  margin-bottom: 10px;
  font-family: "DM Sans", sans-serif;
}

.veredicto { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.veredicto .tier {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--azul);
  width: 46px;
  text-align: center;
}
.veredicto .tier.flojo { color: var(--apagado); }
.veredicto .que { flex: 1; }
.veredicto .que b { display: block; color: var(--titulo); font-size: 1rem; }
.veredicto .que span { font-size: .84rem; color: var(--apagado); }

.medidor { margin-bottom: 10px; }
.medidor .fila { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 5px; font-weight: 600; }
.medidor .fila span:last-child { font-variant-numeric: tabular-nums; color: var(--titulo); }
.medidor .via { height: 7px; border-radius: 4px; background: var(--fondo-2); overflow: hidden; }
.medidor .relleno {
  height: 100%;
  border-radius: 4px;
  background: var(--azul);
  width: 0;
  transition: width 700ms var(--paso);
}
.medidor.dolor .relleno { background: var(--azul-400); }

.puntos { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.puntos li { display: flex; gap: 9px; font-size: .88rem; line-height: 1.35; }
.puntos li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--azul); }
.puntos li i { display: block; font-style: normal; color: var(--apagado); font-size: .8rem; }

.guion {
  background: var(--azul-tenue);
  border: 1px solid color-mix(in srgb, var(--azul) 22%, transparent);
  border-radius: var(--r-m);
  padding: 15px 16px;
  margin-bottom: 12px;
}
.guion p { color: var(--titulo); font-size: .98rem; line-height: 1.45; }
.guion h4 { color: var(--azul); }

/* ---------- Botones ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--r-m);
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--t-rapido) var(--paso), background var(--t-rapido) var(--paso);
}
.btn:active { transform: scale(.975); background: var(--azul-600); }
.btn[disabled] { opacity: .5; }
.btn.suave { background: var(--fondo-2); color: var(--titulo); border: 1px solid var(--linea); }
.btn.suave:active { background: var(--linea); }
.btn.peligro { background: var(--rojo-tenue); color: var(--rojo); }
.btn svg { width: 19px; height: 19px; }

/* ---------- Registro de visita ---------- */
.resultados { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.resultado {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: var(--r-m);
  border: 2px solid var(--linea);
  background: var(--tarjeta);
  text-align: left;
  transition: transform var(--t-rapido) var(--paso), border-color var(--t-rapido) var(--paso), background var(--t-rapido) var(--paso);
}
.resultado:active { transform: scale(.98); }
.resultado b { font-size: .98rem; color: var(--titulo); display: block; }
.resultado span { font-size: .79rem; color: var(--apagado); }
.resultado .icono {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--fondo-2);
}
.resultado .icono svg { width: 19px; height: 19px; }
.resultado[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-tenue); }
.resultado[data-r="interesado"] .icono { background: var(--verde-tenue); color: var(--verde); }
.resultado[data-r="cerrado"] .icono { background: var(--azul-tenue); color: var(--azul); }
.resultado[data-r="volver"] .icono { background: var(--ambar-tenue); color: var(--ambar); }
.resultado[data-r="no_interesado"] .icono { background: var(--rojo-tenue); color: var(--rojo); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .8rem; font-weight: 700; color: var(--titulo); margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--linea);
  background: var(--fondo-2);
  color: var(--titulo);
  font-size: 1rem;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--azul);
  outline-offset: -1px;
  background: var(--fondo);
}
.campo textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.pista { font-size: .76rem; color: var(--apagado); margin-top: 5px; line-height: 1.4; }

/* ---------- Actividad ---------- */
.racha {
  background: var(--azul);
  color: #fff;
  border-radius: var(--r-l);
  padding: 22px;
  margin: 14px 16px;
  position: relative;
  overflow: hidden;
}
.racha b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}
.racha span { opacity: .85; font-size: .9rem; font-weight: 500; }
.racha .semana { display: flex; gap: 6px; margin-top: 18px; }
.racha .dia {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  opacity: .8;
}
.racha .dia i {
  display: block;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .2);
  position: relative;
  overflow: hidden;
}
.racha .dia i em {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 5px;
  transition: height 600ms var(--paso);
}
.racha .dia.hoy { opacity: 1; font-weight: 700; }

.linea-tiempo { padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 2px; }
.hito { display: flex; gap: 13px; padding: 11px 0; }
.hito .marca { flex: 0 0 auto; width: 34px; display: flex; flex-direction: column; align-items: center; }
.hito .punto { width: 11px; height: 11px; border-radius: 50%; background: var(--apagado); margin-top: 5px; }
.hito .punto.interesado { background: var(--verde); }
.hito .punto.cerrado { background: var(--azul); }
.hito .punto.volver { background: var(--ambar); }
.hito .punto.no_interesado { background: var(--rojo); }
.hito .linea { flex: 1; width: 2px; background: var(--linea); margin-top: 4px; }
.hito .cuerpo { flex: 1; padding-bottom: 4px; }
.hito .cuerpo b { display: block; color: var(--titulo); font-size: .95rem; }
.hito .cuerpo span { font-size: .8rem; color: var(--apagado); }
.hito .cuerpo p { font-size: .87rem; margin-top: 4px; }

/* ---------- Ajustes ---------- */
.grupo { margin: 18px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; }
.grupo > h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); padding: 13px 16px 8px; font-family: "DM Sans", sans-serif; font-weight: 700; }
.opcion { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--linea); }
.opcion:first-of-type { border-top: 0; }
.opcion .txt { flex: 1; }
.opcion .txt b { display: block; color: var(--titulo); font-size: .94rem; font-weight: 600; }
.opcion .txt span { font-size: .79rem; color: var(--apagado); }

.segmentos { display: flex; gap: 3px; background: var(--fondo-2); border-radius: var(--r-s); padding: 3px; }
.segmentos button {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--apagado);
  transition: background var(--t-rapido) var(--paso), color var(--t-rapido) var(--paso);
}
.segmentos button[aria-pressed="true"] { background: var(--tarjeta); color: var(--titulo); box-shadow: var(--sombra); }

/* ---------- Entrada por PIN ---------- */
.puerta {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--tinta, #0A0E1A);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
}
.puerta img { width: 54px; height: 54px; }
.puerta h2 { color: #fff; font-size: 1.5rem; }
.puerta .pin-huecos { display: flex; gap: 12px; }
.puerta .hueco {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  transition: background var(--t-rapido) var(--paso), transform var(--t-rapido) var(--paso);
}
.puerta .hueco.lleno { background: #fff; border-color: #fff; transform: scale(1.15); }
.puerta.mal .pin-huecos { animation: tiembla 420ms; }
@keyframes tiembla {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.teclado { display: grid; grid-template-columns: repeat(3, 74px); gap: 14px; }
.teclado button {
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  transition: transform var(--t-rapido) var(--paso), background var(--t-rapido) var(--paso);
}
.teclado button:active { transform: scale(.9); background: rgba(255, 255, 255, .22); }
.teclado button.vacio { background: none; }
.puerta .error { color: #FF9A94; font-size: .88rem; min-height: 20px; }

/* ---------- Aviso emergente ---------- */
.aviso {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(var(--alto-barra) + 14px);
  z-index: 70;
  background: var(--titulo);
  color: var(--fondo);
  padding: 13px 16px;
  border-radius: var(--r-m);
  font-size: .89rem;
  font-weight: 600;
  box-shadow: var(--sombra);
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-medio) var(--hoja), opacity var(--t-rapido) linear, visibility 0s linear var(--t-medio);
}
.aviso.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--t-medio) var(--hoja), opacity var(--t-rapido) linear;
}

/* ---------- Progreso de tarea ---------- */
.progreso { display: flex; align-items: center; gap: 11px; padding: 15px 0; }
.girando {
  width: 20px; height: 20px;
  border: 2.5px solid var(--linea);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: gira .8s linear infinite;
  flex: 0 0 auto;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Tirar para refrescar ---------- */
.refresco {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -40px);
  z-index: 20;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  transition: transform var(--t-medio) var(--paso);
}
.refresco svg { width: 17px; height: 17px; color: var(--azul); }