/* ═══════════════════════════════════════════════════════════════════════════
   LA PUERTA CON CARA DE APP — entrar, registro, el código, elegir fichas y pagar
   en el teléfono (17-sep-2026, encargo de Ruben: «adáptalo más como si fuese app»)
   ───────────────────────────────────────────────────────────────────────────
   Qué cambia, y por qué cada cosa:

   · **La primera pantalla es la app entera.** Antes, en un teléfono, esto era
     una página web larga: tarjeta flotando sobre un gris, y debajo el folleto
     de venta con su logotipo, su titular y sus tres promesas — 1.353 px de alto
     sólo para entrar. Ahora el primer viewport es exactamente lo que es una
     pantalla de entrada de app: barra con la marca, título, campos, botón. El
     folleto **no se ve en el teléfono** (decisión de Ruben).
   · **Y se ve como Profile Manager, no como un formulario cualquiera** (segunda
     pasada, 17-sep: *«no me gusta el diseño, lo haría más moderno estilo profile
     manager»*). El idioma sale de `landing/estilo.css`, que es de donde viene el
     cliente: degradado lila con dos halos, píldora flotante con la marca arriba,
     tarjeta blanca de 24 px de radio con borde lila y sombra larga, campos de
     14 px de radio y botón violeta con sombra de su propio color.
     ⚠ Los valores están COPIADOS de la landing, no estimados. Si allí cambia la
     portada, aquí hay que traerlos otra vez o las dos dejan de parecer la misma
     casa — que es justo lo que había antes.
   · **Todo lo que se toca mide 48 px** y todo lo que se escribe, 16 px — por
     debajo de 16 px iOS hace zoom al enfocar el campo, y entonces la pantalla se
     descoloca sola y hay que volver a encuadrarla a mano. Un formulario que se
     mueve al tocarlo no parece una app.
   · **`dvh` y `safe-area`**: la barra del navegador aparece y desaparece al
     desplazarse, así que `100vh` deja un salto; y en los iPhone con isla, el pie
     se mete debajo del indicador de inicio si no se le resta `env()`.
   · **`:hover` no existe en un dedo.** Lo que sólo se veía al pasar el ratón se
     duplica en `:active`.

   ⚠ Este fichero lo cargan LAS DOS puertas (`pm_puerta_html` y
   `pm_puerta_partida`) y va DESPUÉS de `pm360.css` y de la capa `css/movil/*`:
   son reglas que tienen que ganarle a las dos sin repartir `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lo que vale en cualquier anchura ───────────────────────────────────── */

body.sp-body, body.puerta {
  -webkit-text-size-adjust: 100%;          /* el giro a apaisado no agranda la letra */
  -webkit-tap-highlight-color: transparent; /* el recuadro gris del toque, fuera */
}

/* El botón principal contesta al dedo. Sin esto, entre que se toca y que el
   servidor responde no pasa nada en pantalla y se toca dos veces. */
.sp-bt:active, .pbt:active, .fi-todas:active { transform: translateY(1px) }

/* La barra de la app: la marca arriba del todo. Vive dentro de la columna del
   formulario y sólo se ve en el teléfono; en el escritorio el logotipo sigue
   siendo el del argumento, a la izquierda. */
.sp-appbar, .sp-pie-marca { display: none }

/* ── El aviso neutro ────────────────────────────────────────────────────── */
/* `.sp-aviso` sin `mal` ni `bien` no tenía fondo: el «Has salido sin terminar el
   pago. No se ha cobrado nada» de la vuelta de Stripe salía como texto suelto
   encima del título, y lo primero que lee quien acaba de cancelar un pago no
   puede parecer un descuido. Ni rojo ni verde: no ha fallado nada. */
.sp-aviso { background: var(--s3); color: var(--md); border: 1px solid var(--ln) }
/* `mal` y `bien` traen fondo pero no borde, así que el gris de arriba les
   pintaría un marco que no es suyo. `pruebas` NO entra aquí: ése sí tiene su
   propio borde ámbar en `pm360.css` y quitárselo lo dejaría plano. */
.sp-aviso.mal, .sp-aviso.bien { border-color: transparent }

/* ── El botón mientras el servidor contesta ─────────────────────────────── */
/* Lo pone `pm_puerta_js()` al enviar. No apaga el botón (un `disabled` no
   mandaría su `name`), sólo lo marca: rueda a la izquierda del rótulo y nada
   que tocar hasta que llegue la respuesta. */
.sp-bt.cargando, .pbt.cargando {
  position: relative; pointer-events: none; opacity: .92;
}
.sp-bt.cargando::before, .pbt.cargando::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 9px;
  vertical-align: -3px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: sp-gira 800ms linear infinite;
}
/* El fantasma (Google) va sobre blanco: ahí la rueda blanca no se vería. */
.sp-bt.fantasma.cargando::before { border-color: var(--pr-b); border-top-color: var(--pr) }
.pmini.cargando { opacity: .6; pointer-events: none }
@media (prefers-reduced-motion: reduce) {
  .sp-bt.cargando::before, .pbt.cargando::before { animation: none }
}

/* ── Los tres permisos de «Conecta tu Google» (paso 1 del alta) ──────────── */
.sp-permisos { list-style: none; margin: 10px 0 0; padding: 0 }
.sp-permisos li {
  padding: 12px 0; border-top: 1px solid var(--ln2);
}
.sp-permisos li:first-child { border-top: 0; padding-top: 4px }
.sp-permisos b { display: block; font-size: 14.5px; font-weight: 650; color: #14142b; line-height: 1.35 }
.sp-permisos i { display: block; font-style: normal; margin-top: 3px; font-size: 13px; color: var(--dm) }

/* ── La rueda de «Confirmando el pago…» ─────────────────────────────────── */
.sp-espera { margin: 0 0 18px }
.sp-espera > span {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--pr-b); border-top-color: var(--pr);
  animation: sp-gira 900ms linear infinite;
}
@keyframes sp-gira { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .sp-espera > span { animation: none; border-top-color: var(--pr-b) }
}

/* Salir a mitad de alta. Es un botón porque salir cambia estado y va por POST,
   pero se lee como lo que es: una salida, no la acción de la pantalla. */
.sp-salir {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--dm); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sp-salir:hover { color: var(--pr) }

/* ══ Las piezas NUEVAS de la maqueta, en cualquier anchura ══════════════════
   El antetítulo, la fila «rótulo + enlace», la casilla de mantener la sesión y
   la caja de crear cuenta nacieron para el teléfono, pero el MISMO HTML se
   sirve en el escritorio: sin estas reglas, ahí salían un `<p>` suelto, una
   casilla de sistema y un icono de 300 px. Lo de dentro del `@media` de abajo
   son sólo las medidas del móvil. */
.sp-antetitulo {
  margin: 0 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pr);
}
.sp-cab h2 em { font-style: normal; color: var(--pr) }
.sp-lb-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.sp-lb-fila .plb { margin-bottom: 0 }
.sp-lb-fila a {
  font-size: 13px; color: var(--pr); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.sp-card .pform label.sp-recordar {
  display: flex; flex-direction: row; align-items: center; gap: 10px; margin-top: 16px;
  font-size: 14px; font-weight: 400; color: var(--md); cursor: pointer;
}
.sp-card .pform label.sp-recordar > input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: 0 0 auto; margin: 0; padding: 0;
  border: 2px solid #d5d2e8; border-radius: 6px; background: #fff; cursor: pointer;
}
.sp-card .pform label.sp-recordar > input:checked {
  background: var(--pr) no-repeat center/12px 12px; border-color: var(--pr);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4 5.6 10.5 11.5 4'/%3E%3C/svg%3E");
}
.sp-card .pform label.sp-recordar > input:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px }
.sp-nota-i {
  width: 19px; height: 19px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1.5px solid #d5d2e8; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--dm); font-style: normal;
}
.sp-alta {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 15px; border-radius: 16px; background: #f4f2fc;
}
.sp-alta-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; background: #e6e1fb; color: var(--pr);
}
/* ⚠ El tamaño del SVG NO es opcional: sin él, el icono de «crear cuenta» se
   pinta a su tamaño natural y ocupa media pantalla en el escritorio. */
.sp-alta-ico svg { width: 22px; height: 22px }
.sp-alta-tx { min-width: 0; flex: 1 1 auto }
.sp-alta-tx b { display: block; font-size: 13px; font-weight: 500; color: var(--md) }
.sp-alta-tx a {
  display: inline-block; margin-top: 2px; font-size: 14.5px; font-weight: 700;
  color: var(--pr); text-decoration: none;
}
.sp-alta ul {
  list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid #e0daf6;
  display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto;
}
.sp-alta li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--md) }
.sp-alta li svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--pr) }

@media (max-width: 760px) {

  /* ══════════════════════════════════════════════════════════════════════
     EL CALCO DE LA MAQUETA DE RUBEN (17-sep-2026, 03:40)
     ──────────────────────────────────────────────────────────────────────
     Tras dos diseños rechazados, Ruben mandó la pantalla dibujada y dijo
     «hazlo idéntico». Esto es eso: la maqueta está en
     `~/Desktop/Capturas/image.png` y copiada en
     `diseno-puerta/maqueta-ruben.png`. Las medidas salen de MEDIRLA (viene a
     2x de un teléfono de ~432 px), no de aproximar a ojo.

     El orden de la pantalla, de arriba abajo:
       logotipo + píldora «Todo tu negocio en una vista»
       RESEÑAS · DATOS · RESULTADOS
       ┌ tarjeta blanca ────────────────────────────┐
       │ BIENVENIDO                                 │
       │ **Entra** en tu cuenta                     │
       │ dos líneas de apoyo                        │
       │ campos, «mantener sesión», botón           │
       │ o continúa con → Google                    │
       │ ── 🔒 tus datos están seguros y cifrados ──│
       │ ┌ caja lila: crear cuenta + 3 ventajas ──┐ │
       └────────────────────────────────────────────┘
       MÁS RESEÑAS. MEJORES DECISIONES.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── El lienzo ────────────────────────────────────────────────────────
     Lila muy claro con dos ondas suaves. En la maqueta son dos formas
     dibujadas; aquí son degradados radiales, que cuestan cero y no hay que
     mantener un SVG. */
  body.sp-body, body.puerta {
    background:
      radial-gradient(120% 60% at 115% 8%,  rgba(255, 255, 255, .85), transparent 60%),
      radial-gradient(90% 45% at -20% 42%,  rgba(255, 255, 255, .7),  transparent 62%),
      radial-gradient(70% 38% at 88% 88%,   rgba(145, 72, 251, .10),  transparent 70%),
      linear-gradient(172deg, #f3f1fb 0%, #eeebf9 55%, #f1eefb 100%);
    background-repeat: no-repeat; background-size: 100% 100%;
  }

  .spuerta {
    display: flex; flex-direction: column; gap: 0; padding: 0;
    align-items: stretch; overflow: visible;
    min-height: 100vh; min-height: 100dvh;
  }
  .sp-mancha { display: none }
  .sp-izq { display: none }          /* el folleto no se ve en el teléfono */

  .sp-der {
    order: 1; justify-self: stretch; max-width: none;
    display: flex; flex-direction: column; box-sizing: border-box;
    min-height: 100vh; min-height: 100dvh;
  }

  /* ── La cabecera: marca a la izquierda, píldora a la derecha ─────────── */
  .sp-appbar {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    margin: 0; padding: calc(env(safe-area-inset-top) + 26px) 22px 0;
    background: none; border: 0; box-shadow: none; border-radius: 0; flex: 0 0 auto;
  }
  .sp-appbar img { display: block; height: 34px; width: auto }
  /* ── La tarjeta ───────────────────────────────────────────────────────── */
  .sp-card {
    flex: 0 0 auto;
    margin: 18px 14px calc(env(safe-area-inset-bottom) + 6px);
    padding: 26px 22px 24px;
    border-radius: 26px; background: #fff; border: 0;
    box-shadow: 0 2px 6px rgba(28, 20, 74, .04), 0 30px 60px -32px rgba(28, 20, 74, .32);
    display: flex; flex-direction: column;
  }
  .sp-card .pform { margin-top: 2px }

  /* ── BIENVENIDO + el titular ──────────────────────────────────────────── */
  .sp-antetitulo {            /* el «BIENVENIDO» */
    margin: 0 0 8px; font-size: 12.5px; font-weight: 650;
    letter-spacing: .22em; text-transform: uppercase; color: var(--pr);
  }
  .sp-cab { display: block }
  .sp-cab h2 {
    font-size: 32px; line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
    color: #0e0e1c;
  }
  /* La primera palabra en violeta: es lo que da carácter al titular. */
  .sp-cab h2 em { font-style: normal; color: var(--pr) }
  .sp-cab .sp-otra { display: block; margin-top: 8px; white-space: normal; font-size: 14px }
  .sp-lema { font-size: 15.5px; line-height: 1.5; color: #5f6379; margin: 12px 0 24px }

  /* ── Campos ───────────────────────────────────────────────────────────── */
  /* Rótulo oscuro y con peso, como en la maqueta: allí «Correo electrónico» es
     casi tan negro como el titular, no un gris pequeño. */
  .sp-card .plb, body.puerta .plb {
    font-size: 14.5px; font-weight: 700; color: #1a1a2e; margin-top: 18px;
  }
  .sp-card .pin, .puerta .pin {
    font-size: 16px; min-height: 56px; border-radius: 15px; padding: 16px 16px;
    background: #f4f3fa; border: 1px solid #ebe9f7; color: #0e0e1c;
  }
  .sp-card .pin::placeholder, .puerta .pin::placeholder { color: #8b88a8 }
  .sp-card .pin:focus, .puerta .pin:focus {
    background: #fff; border-color: var(--pr); box-shadow: 0 0 0 4px rgba(101, 100, 244, .13);
  }
  .sp-campo.con-ico .pin { padding-left: 50px }
  .sp-campo > svg { left: 17px; width: 21px; height: 21px; color: #6b6880 }
  .sp-ojo { width: 46px; height: 46px; right: 5px; color: #6b6880 }
  .sp-tel { border-radius: 15px; min-height: 56px; background: #f4f3fa; border-color: #ebe9f7 }
  .sp-tel select { font-size: 16px; padding-left: 15px }
  .fi-cup-in { font-size: 16px; min-height: 50px; border-radius: 14px }
  .fi-cup-bt { min-height: 50px; padding: 0 18px; border-radius: 14px }

  /* El rótulo con un enlace a la derecha («Contraseña · ¿Has olvidado…?»). */
  .sp-lb-fila {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  .sp-lb-fila .plb { margin-bottom: 0 }
  .sp-lb-fila a {
    font-size: 13.5px; color: var(--pr); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; padding: 6px 0;
  }

  /* ── «Mantener sesión iniciada» ───────────────────────────────────────── */
  /* ⚠ `.pform label.sp-recordar` y `.pform label.sp-recordar > input`, con el
     `label` delante: la regla base de `pm360.css` (`.pform label{flex-direction:
     column}` y `.pform label>input{width:100%}`) pesa más que un `.sp-recordar`
     a secas, y con ella la casilla salía como una BARRA violeta del ancho de la
     tarjeta con el texto debajo. Es la misma trampa que ya costó la fila de
     «Elige tus fichas». */
  .sp-card .pform label.sp-recordar {
    display: flex; flex-direction: row; align-items: center; gap: 11px; margin-top: 20px;
    font-size: 14.5px; font-weight: 400; color: #3c3f52; cursor: pointer;
  }
  .sp-card .pform label.sp-recordar > input {
    appearance: none; -webkit-appearance: none;
    width: 24px; height: 24px; flex: 0 0 auto; margin: 0; padding: 0;
    border: 2px solid #d5d2e8; border-radius: 7px; background: #fff; cursor: pointer;
  }
  .sp-card .pform label.sp-recordar > input:checked {
    background: var(--pr) no-repeat center/13px 13px;
    border-color: var(--pr);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4 5.6 10.5 11.5 4'/%3E%3C/svg%3E");
  }
  .sp-card .pform label.sp-recordar > input:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px }
  .sp-nota-i {
    width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1.5px solid #d5d2e8; border-radius: 50%;
    font-size: 11.5px; font-weight: 700; color: #9a96b8; font-style: normal;
  }

  /* ── Botones ──────────────────────────────────────────────────────────── */
  .sp-bt, .pbt {
    min-height: 58px; border-radius: 17px; font-size: 17px; font-weight: 700;
    padding: 16px 18px; letter-spacing: -.01em;
    box-shadow: 0 16px 30px -14px rgba(88, 73, 232, .75);
  }
  .sp-bt { margin-top: 22px }
  .sp-bt svg { width: 19px; height: 19px }
  .sp-bt.fantasma, .pbt.fantasma {
    border: 1px solid #e7e4f6; box-shadow: none; font-weight: 700; font-size: 16px;
  }
  .sp-o { margin: 24px 0 16px; font-size: 13.5px; color: #8b88a8 }
  .sp-o::before, .sp-o::after { background: #ebe9f7 }

  /* ── El sello de «tus datos están seguros», con líneas a los lados ────── */
  .sp-tras {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 22px 0 0; padding: 0; border: 0; font-size: 13.5px; color: #6b6880;
  }
  .sp-tras::before, .sp-tras::after { content: ""; flex: 1; height: 1px; background: #ebe9f7 }
  .sp-tras span { display: flex; align-items: center; gap: 8px; flex: 0 0 auto }
  .sp-tras svg { width: 17px; height: 17px; color: #6b6880 }
  .sp-tras a { display: inline-block; padding: 8px 0; color: #6b6880 }

  /* ── La caja de abajo: crear cuenta + las tres ventajas ───────────────── */
  .sp-alta {
    display: flex; align-items: center; gap: 14px; margin-top: 20px;
    padding: 16px; border-radius: 18px; background: #f4f2fc;
  }
  .sp-alta-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; background: #e6e1fb; color: var(--pr);
  }
  .sp-alta-ico svg { width: 23px; height: 23px }
  .sp-alta-tx { min-width: 0; flex: 1 1 auto }
  .sp-alta-tx b { display: block; font-size: 13.5px; font-weight: 500; color: #5f6379 }
  .sp-alta-tx a {
    display: inline-block; margin-top: 3px; font-size: 15px; font-weight: 700;
    color: var(--pr); text-decoration: none;
  }
  /* ⚠ En la maqueta las tres ventajas van a la derecha, con una raya en medio,
     porque está dibujada a 432 px. A 390 esa columna deja el texto de la
     izquierda en 90 px y «¿No tienes cuenta? / Crear cuenta» se parte en SEIS
     líneas. Así que por debajo de 430 px bajan a una fila propia, con la raya
     arriba en vez de al lado. Es la misma caja, no otra. */
  .sp-alta { flex-wrap: wrap }
  .sp-alta ul {
    list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid #e0daf6;
    display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto;
  }
  @media (max-width: 430px) {
    .sp-alta ul {
      flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 7px 15px;
      border-left: 0; border-top: 1px solid #e0daf6; padding: 12px 0 0; margin-top: 2px;
    }
  }
  .sp-alta li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4d5168 }
  .sp-alta li svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--pr) }

  /* ── El pie de la pantalla ────────────────────────────────────────────── */
  .sp-pie-marca {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 22px calc(env(safe-area-inset-bottom) + 20px);
    font-size: 10.5px; font-weight: 600; letter-spacing: .19em;
    text-transform: uppercase; color: #a5a1c0; text-align: center;
  }
  .sp-pie-marca::before, .sp-pie-marca::after {
    content: ""; flex: 1; height: 1px; background: #e2dff2;
  }

  /* ── Avisos y casillas ────────────────────────────────────────────────── */
  .sp-aviso { font-size: 14px; padding: 13px 15px; border-radius: 14px }
  .sp-card .pform label.pcheck { padding-left: 34px; min-height: 26px; margin-top: 18px }
  .sp-card .pform label.pcheck > input { width: 22px; height: 22px; top: 0 }
  .sp-card .pcheck-linea input { width: 22px; height: 22px }

  /* Empresa / Particular, en dos columnas: apiladas empujaban los siete campos
     del registro media pantalla hacia abajo. */
  .sp-card .ptipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
  .sp-card .pform label.pradio.con-ico {
    flex-direction: column; align-items: flex-start; gap: 9px;
    padding: 13px; border-radius: 16px; min-width: 0;
  }
  .sp-card .pradio .pr-ico { width: 32px; height: 32px; border-radius: 10px }
  .sp-card .pradio .pr-txt b { font-size: 14.5px }
  .sp-card .pradio .pr-txt i { font-size: 11.5px; line-height: 1.35 }

  /* ── La puerta clásica (código, olvidada, invitación) ──────────────────── */
  body.puerta { padding: 0; display: block }
  body.puerta .pwrap {
    display: flex; flex-direction: column; gap: 0;
    min-height: 100vh; min-height: 100dvh;
  }
  body.puerta .plado { display: none }
  body.puerta .pcard {
    order: 1; max-width: none; width: auto; box-sizing: border-box; flex: 0 0 auto;
    margin: calc(env(safe-area-inset-top) + 20px) 14px calc(env(safe-area-inset-bottom) + 20px);
    padding: 26px 22px 24px;
    border: 0; border-radius: 26px; background: #fff;
    box-shadow: 0 2px 6px rgba(28, 20, 74, .04), 0 30px 60px -32px rgba(28, 20, 74, .32);
  }
  body.puerta .plogo-mini { display: block; margin-bottom: 20px }
  body.puerta .plogo-mini img { height: 32px; width: auto }
  body.puerta .pcard h1 {
    font-size: 30px; line-height: 1.06; letter-spacing: -.035em; margin-top: 0; color: #0e0e1c;
  }
  body.puerta .pt { font-size: 14.5px; color: #5f6379 }
  body.puerta .pcard .pform + .pform { margin-top: 2px }
  body.puerta button.pmini { font-size: 13.5px; font-weight: 500; border-radius: 12px }
  body.puerta button.pmini.acento { font-weight: 650 }
  body.puerta .pmini { padding: 10px 2px; font-size: 14px }

  /* ── El código de seis dígitos ────────────────────────────────────────── */
  body.puerta .pin.cod, .sp-card .pin.cod {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 27px; text-align: center; min-height: 64px; border-radius: 16px; font-weight: 500;
  }
  body.puerta .pin.cod:not(:placeholder-shown), .sp-card .pin.cod:not(:placeholder-shown) {
    letter-spacing: .34em; text-indent: .34em;
  }

  /* ── Elegir fichas: el total y el botón, clavados abajo ───────────────── */
  .fi-pie {
    position: sticky; bottom: 0; z-index: 5;
    margin: 18px -22px -24px; padding: 14px 22px calc(env(safe-area-inset-bottom) + 18px);
    background: #fff; border-top: 1px solid #ebe9f7; border-radius: 0 0 26px 26px;
    box-shadow: 0 -10px 24px -18px rgba(28, 20, 74, .5);
  }
  .fi-pie .fi-precio { margin: 0; border-radius: 14px }
  .fi-pie .sp-bt { margin-top: 12px }
  .fi-cup > summary { padding: 11px 2px; font-size: 14px }
  .fi-lista { max-height: none; overflow: visible; gap: 10px }
  .fi-otras .fi-lista { max-height: none }
  .pform label.fi-fila { padding: 14px; border-radius: 16px }
  /* ⚠ 22 px de casilla ↔ `calc(100% - 33px)`: el reparto de la fila está en
     `pm360.css` L4681 con 18+11. Los dos números van juntos o la fila se parte
     en tres líneas. */
  .pform label.fi-fila > input { width: 22px; height: 22px }
  .fi-txt { flex: 1 1 calc(100% - 33px) }
  .fi-marca { margin-left: 33px }
  .fi-todas { min-height: 44px; padding: 10px 16px; font-size: 13px; border-radius: 12px }
  .pg-fila { padding: 14px 15px; font-size: 15px }
  .pg-fila.total { font-size: 16.5px }
}

/* ── Pantallas muy estrechas (360 px y menos: Android de gama media) ─────── */
@media (max-width: 380px) {
  .sp-card { padding-left: 15px; padding-right: 15px }
  .sp-cab h2 { font-size: 25px }
  .sp-izq, body.puerta .plado { padding-left: 15px; padding-right: 15px }
  body.puerta .pcard { padding-left: 15px; padding-right: 15px }
  .fi-pie { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px }
  .pin.cod, .pin.cod-app { font-size: 23px }
}

/* ── Apaisado y pantallas bajas ─────────────────────────────────────────── */
/* Con el teclado abierto, un iPhone en horizontal deja 300 px de alto: la
   pantalla completa y el pie empujado al fondo dejarían el botón fuera. */
@media (max-width: 760px) and (max-height: 520px) {
  .sp-der, .spuerta, body.puerta .pwrap { min-height: 0 }
  .sp-tras { margin-top: 26px }
}

/* ── Sin animaciones para quien las ha apagado ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-bt, .pbt, .fi-todas { transition: none }
  .sp-bt:active, .pbt:active, .fi-todas:active { transform: none }
}