/* Tokens del anexo A. Se declaran una vez, aqui, y no se repite ningun
   hexadecimal a mano en ningun otro sitio del proyecto. */
:root {
  --papel: #fff9e8;
  --tinta: #141414;
  --acido: #c8ff4d;
  --coral: #ff6b4a;
  --tarjeta: #ffffff;
  --av-verde: #3f6e52;
  --av-tierra: #8a6d3b;

  /* Geometria del anexo A. */
  --borde: 3px;
  /* El anexo A dice 2,5 px. Chromium trunca border-width a pixeles CSS enteros,
     asi que 2,5 px se pintan a 2 y el valor de la referencia y este dan la misma
     imagen exacta. Se escribe 2 px para que el codigo diga lo que se ve; el
     anexo A especifica una geometria que el navegador no realiza, y eso es una
     decision que tiene que tomar quien hizo el diseno, no este fichero. */
  --borde-fino: 2px;
  --radio: 4px;
  --radio-pastilla: 99px;
  --radio-logo: 6px;
  --sombra-tarjeta: 5px 5px 0 var(--tinta);
  --sombra-campo: 4px 4px 0 var(--tinta);
  --sombra-fab: 0 6px 0 var(--coral);

  /* Hueco superior reservado para el safe-area del PWA. En un navegador de
     escritorio env() vale 0 y quedan los 36 px exactos de las referencias; en
     un movil con muesca, lo que haga falta. */
  --hueco-superior: max(36px, env(safe-area-inset-top, 0px));
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* display:block en una regla propia gana al atributo hidden, y entonces "hidden"
   deja de esconder nada. Pasa en cuanto se le da display a un elemento que a
   veces va oculto, y no se ve venir. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--papel);
  font-family: var(--sans);
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* Los campos son campos de verdad, pero tienen que pintar exactamente igual que
   el texto de las referencias: sin flecha de desplegable, sin fondo propio y
   con la misma caja. Un select sin appearance abre el selector del sistema, que
   con guantes y a las siete y media es mejor que cualquier lista propia. */
input.in,
select.in {
  display: block;
  width: 100%;
}
select.in {
  text-overflow: ellipsis;
}
.mini .m select.v {
  width: 100%;
  text-overflow: ellipsis;
}
.phin input.tel {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
/* El campo del codigo va invisible encima de las seis casillas: el vecino
   teclea en el sitio donde esta mirando y las casillas van rellenandose. */
.code {
  position: relative;
}
.code input.tapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  z-index: 2;
}

/* Una etiqueta transparente puesta encima de toda la fila.
   Es absoluta, asi que no ocupa sitio en la maquetacion y no puede mover un
   pixel; y como es una <label for=...>, tocarla enfoca el campo que nombra. Es
   lo que convierte un desplegable de 15 px de alto en un objetivo de fila
   entera sin cambiar el diseno.

   Lo que no vale, aunque lo parezca: display:contents —no genera caja, asi que
   no agranda nada, medido 91x17— ni relleno con margen negativo, que si mueve
   el texto del campo. Las dos se probaron. */
.toca-el-campo {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* ---- area de toque ------------------------------------------------------
   Lo que se ve y lo que se toca no tienen por que medir lo mismo. Un
   pseudoelemento que crece hacia fuera no ocupa sitio, no mueve ningun pixel y
   no aparece en ninguna captura: la referencia sigue siendo la referencia y el
   objetivo pasa a poderse acertar con guantes.

   Las medidas de partida las midio el adversario 4 sobre la aplicacion en
   marcha, no a ojo: pestanas de 21x34 y 19x34 dentro de una barra de 60 px que
   no hacia nada alrededor, desplegables de 15 y 17 px de alto, y el enlace de
   "me he equivocado de numero" —la unica salida de la pantalla del codigo— de
   15 px. La guia son 44x44. */
.toque-grande {
  position: relative;
}
.toque-grande::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: var(--toque-x, -12px);
  right: var(--toque-x, -12px);
  top: var(--toque-y, -14px);
  bottom: var(--toque-y, -14px);
}

/* ---- armazon de pantalla ---------------------------------------------- */

.screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
}

/* El hueco de la barra de estado ocupa su sitio y no pinta nada: en la
   aplicacion instalada ahi va el reloj del sistema. */
.sbar {
  height: var(--hueco-superior);
  flex: none;
}

.body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* El detalle mete su cabecera oscura por debajo del hueco de la barra de
   estado: el color sube hasta arriba del todo y el texto se queda donde debe. */
.body.bajo-barra {
  margin-top: calc(-1 * var(--hueco-superior));
}
.top.dark.alta {
  padding-top: calc(8px + var(--hueco-superior));
}

.tabbar {
  flex: none;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 6px;
  background: var(--papel);
  color: var(--tinta);
  border-top: var(--borde) solid var(--tinta);
}
.tabbar .ti {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  opacity: 0.62;
  letter-spacing: 0.05em;
}
.tabbar .ti.on {
  opacity: 1;
}
/* La barra mide 60 px de alto y el objetivo era el contenido: 21x34 y 19x34.
   Ahora cada pestana ocupa su mitad entera. */
.tabbar .ti::before {
  content: '';
  position: absolute;
  top: -13px;
  bottom: -13px;
  left: -60px;
  right: -60px;
}
.tabbar svg {
  width: 19px;
  height: 19px;
}

/* ---- cabecera ---------------------------------------------------------- */

.top {
  padding: 11px 17px 13px;
  border-bottom: var(--borde) solid var(--tinta);
  background: var(--acido);
}
.top.dark {
  background: var(--tinta);
  color: var(--acido);
}
.top .k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.top h3 {
  font-size: 29px;
  line-height: 0.95;
  margin: 7px 0 0;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-transform: uppercase;
  color: inherit;
}

.swap {
  display: flex;
  border-bottom: var(--borde) solid var(--tinta);
}
.swap b {
  flex: 1;
  text-align: center;
  padding: 11px 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--papel);
}
.swap b.on {
  background: var(--tinta);
  color: var(--acido);
}
.swap b:first-child {
  border-right: var(--borde) solid var(--tinta);
}

/* ---- feed y tarjetas --------------------------------------------------- */

/* El feed se desplaza. Con overflow:hidden, del cuarto coche en adelante no
   existia: quedaba fuera de pantalla y no habia forma de llegar a el. Con tres
   viajes —los de la semilla— no hay nada que desplazar, asi que las referencias
   no se mueven. La barra se oculta para que tampoco las mueva ella. */
.feed {
  padding: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* El hueco para que el ultimo coche no quede debajo del boton principal va
   dentro, como un elemento mas, y no como padding del feed. Puesto como padding
   con un margen negativo que lo compensaba, la caja del feed medía 487 px
   donde la referencia mide 408: invisible con los tres coches de la semilla y
   distinta en cuanto hubiera un cuarto. */
.hueco-fab {
  height: 79px;
}
.feed::-webkit-scrollbar {
  display: none;
}
.kard {
  background: var(--tarjeta);
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--sombra-tarjeta);
  display: block;
  width: 100%;
}
/* El texto de la tarjeta del coche que sale ya va en tinta, no en blanco.
   Blanco sobre coral da 2,82:1 y el minimo legible son 4,5; en tinta son 6,54.
   Es la tarjeta que se mira con el sol rasante de enero a las siete y media, y
   era la menos legible de toda la aplicacion. El cambio lo aprobo quien hizo el
   diseno mirando las dos versiones lado a lado, y las referencias se
   regeneraron con el. */
.kard.hot {
  background: var(--coral);
  color: var(--tinta);
}
.kard.completo {
  opacity: 0.62;
}
.kard .hr {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Un color por clase. Nada de atributos style: la CSP de produccion los ignora
   y el avatar se queda sin fondo. */
.av-coral {
  background: var(--coral);
}
.av-tinta {
  background: var(--tinta);
}
.av-verde {
  background: var(--av-verde);
}
.av-tierra {
  background: var(--av-tierra);
}

.av {
  border-radius: var(--radio);
  border: var(--borde-fino) solid var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--tarjeta);
  flex: none;
}
.kard .av {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.kard .nm {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.kard .sub {
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.72;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kard.hot .sub {
  opacity: 0.78;
}
/* El coche lleno se atenua entero, y el subtitulo no se atenua otra vez encima:
   0,62 de la tarjeta por 0,72 del subtitulo dejaban "Completo" —y "Vas tú"— en
   2,95:1, el texto menos legible que quedaba en la aplicacion. Sin doble
   atenuacion se queda en el mismo gris que el nombre que tiene al lado. */
.kard.completo .sub {
  opacity: 1;
}
.kard .hour {
  margin-left: auto;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.kard .line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 11px 0;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kard .arw {
  flex: 1;
  height: var(--borde);
  background: var(--tinta);
  position: relative;
}
.kard.hot .arw {
  background: var(--tinta);
}
.kard .arw:after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border: 4.5px solid transparent;
  border-left-color: var(--tinta);
}
.kard.hot .arw:after {
  border-left-color: var(--tinta);
}
.kard .br {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pill {
  border: var(--borde-fino) solid var(--tinta);
  border-radius: var(--radio-pastilla);
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--acido);
  white-space: nowrap;
}
.kard.hot .pill {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--acido);
}
.kard .btn {
  margin-left: auto;
  background: var(--tinta);
  color: var(--tarjeta);
  border: var(--borde-fino) solid var(--tinta);
  border-radius: var(--radio);
  padding: 8px 13px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kard.hot .btn {
  background: var(--tinta);
  color: var(--acido);
  border-color: var(--tinta);
}

/* ---- boton principal --------------------------------------------------- */

.fab {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 11px;
  background: var(--tinta);
  color: var(--acido);
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  padding: 14px;
  text-align: center;
  font-weight: 900;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--sombra-fab);
}
.fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 105px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 249 232 / 0) 0%, var(--papel) 58%);
}

/* ---- campos ------------------------------------------------------------ */

.lb {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.in {
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 12px;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: var(--sombra-campo);
}
.in.acido {
  background: var(--acido);
}
.fld {
  margin: 14px 17px 0;
}
.fld.sep {
  margin-top: 24px;
}
.fld.sep-18 {
  margin-top: 18px;
}
.fld.sep-6 {
  margin-top: 6px;
}
.fld.sep-16 {
  margin-top: 16px;
}
.empty {
  border: var(--borde) dashed var(--tinta);
  border-radius: var(--radio);
  padding: 11px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- entrada ----------------------------------------------------------- */

.oncenter {
  padding: 34px 22px 0;
  text-align: left;
}
.oncenter .logo {
  width: 70px;
  height: 70px;
  border: 4px solid var(--tinta);
  border-radius: var(--radio-logo);
  background: var(--acido);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 6px 6px 0 var(--tinta);
}
.oncenter h4 {
  font-size: 31px;
  line-height: 0.95;
  margin: 24px 0 0;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-transform: uppercase;
}
.oncenter p {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  opacity: 0.7;
  line-height: 1.55;
  margin: 13px 0 0;
  max-width: none;
}
.code {
  display: flex;
  gap: 7px;
  margin: 24px 22px 0;
}
.code b {
  flex: 1;
  height: 54px;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.code b.f {
  background: var(--acido);
  box-shadow: var(--sombra-campo);
}
.code.six {
  gap: 5px;
  margin: 20px 18px 0;
}
.code.six b {
  height: 48px;
  font-size: 19px;
}
.phin {
  display: flex;
  align-items: center;
  gap: 9px;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 11px;
  box-shadow: var(--sombra-campo);
}
.phin span {
  font-size: 13px;
  font-weight: 900;
  background: var(--acido);
  border: var(--borde-fino) solid var(--tinta);
  border-radius: 3px;
  padding: 3px 7px;
}
.phin b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.lnk {
  position: relative;
  margin: 18px 18px 0;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5px;
}
/* Es la unica salida de la pantalla del codigo y medía 15 px de alto. */
.lnk::before {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  top: -15px;
  bottom: -15px;
}
.hint {
  margin: 13px 18px 0;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.62;
  line-height: 1.5;
}

/* ---- hoja de publicar -------------------------------------------------- */

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 96px;
  background: var(--papel);
  border-top: var(--borde) solid var(--tinta);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 0 rgb(20 20 20 / 0.18);
}
.grab {
  width: 44px;
  height: 5px;
  background: var(--tinta);
  border-radius: var(--radio-pastilla);
  margin: 11px auto 0;
  /* La barra se ve de 44x5 y se toca en 120x38. Era la unica salida de la hoja
     sin publicar un viaje, y acertar en cinco pixeles de alto con guantes es
     una loteria. El area crece hacia fuera y no mueve ningun pixel. */
  position: relative;
}
.grab::before {
  content: '';
  position: absolute;
  left: -38px;
  right: -38px;
  top: -17px;
  /* Hacia abajo, que hacia arriba se saldria de la hoja. 5 + 17 + 25 = 47. */
  bottom: -25px;
}
.bigtime {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}
.bigtime .h {
  flex: 1;
  text-align: center;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
}
.bigtime .st {
  width: 52px;
  height: 52px;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  box-shadow: var(--sombra-campo);
}
.quick {
  display: flex;
  gap: 0;
  margin: 20px 18px 0;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-campo);
}
.quick b {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 10.5px;
  white-space: nowrap;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--tarjeta);
  border-right: var(--borde) solid var(--tinta);
}
.quick b:last-child {
  border-right: 0;
}
.quick b.on {
  background: var(--acido);
}
.mini {
  display: flex;
  gap: 9px;
  margin: 14px 18px 0;
}
.mini .m {
  position: relative;
  flex: 1;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 10px 11px;
  --relleno-y: 10px;
  --relleno-x: 11px;
}
.mini .m .l {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.62;
}
.mini .m .v {
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- detalle ----------------------------------------------------------- */

.stops {
  padding: 16px 18px 0;
}
.stop {
  display: flex;
  gap: 13px;
  position: relative;
  padding-bottom: 16px;
}
.stop:last-child {
  padding-bottom: 4px;
}
.stop .bul {
  width: 14px;
  height: 14px;
  border: 3.5px solid var(--tinta);
  background: var(--papel);
  flex: none;
  margin-top: 2px;
  z-index: 1;
  border-radius: 2px;
}
.stop .bul.f {
  background: var(--coral);
}
.stop:not(:last-child):after {
  content: '';
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: 0;
  width: var(--borde);
  background: var(--tinta);
}
.stop .nm {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.stop .tm {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.62;
  margin-top: 2px;
}
.rrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.rrow .av {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
}
.rrow .n {
  font-size: 13px;
  font-weight: 800;
}
.rrow .t {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.62;
  letter-spacing: 0.04em;
}

/* ---- perfil ------------------------------------------------------------ */

.prof {
  padding: 18px 17px 0;
  display: flex;
  align-items: center;
  gap: 13px;
}
.prof .av {
  width: 58px;
  height: 58px;
  font-size: 22px;
  box-shadow: var(--sombra-campo);
}
.prof .n {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  line-height: 1;
}
.prof .s {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.62;
  margin-top: 5px;
  letter-spacing: 0.05em;
}
.stats {
  display: flex;
  gap: 9px;
  padding: 16px 17px 0;
}
.stat {
  flex: 1;
  min-width: 0;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  padding: 11px 9px;
  background: var(--tarjeta);
}
.stat.acid {
  background: var(--acido);
  box-shadow: var(--sombra-campo);
}
.stat .v {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.stat .l {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 6px;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rows {
  margin: 16px 17px 0;
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tarjeta);
}
.rows .r {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 13px;
  border-bottom: var(--borde) solid var(--tinta);
  font-size: 13px;
  font-weight: 700;
}
.rows .r:last-child {
  border-bottom: 0;
}
.rows .r .v {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.62;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Los campos del perfil son campos, no texto: se escriben ahi mismo.
   field-sizing:content es lo que hace que ocupen exactamente lo que ocupaba el
   texto que sustituyen. Sin eso, un input trae de fabrica un ancho de veinte
   caracteres y desmonta la fila entera. */
.rows .r input.v,
.rows .r select.v {
  margin-left: auto;
  width: auto;
  field-sizing: content;
  text-align: right;
  text-align-last: right;
  min-width: 0;
}

/* ---- banda de aviso ---------------------------------------------------- */

/* Va por encima y no empuja nada: si un aviso desplazase el contenido, cada
   error dejaria las pantallas sin parecerse a sus referencias. */
.banda {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 78px;
  z-index: 5;
  background: var(--coral);
  /* En tinta y no en blanco, por lo mismo que la tarjeta del coche que sale:
     blanco sobre coral da 2,82:1 y lo legible empieza en 4,5. Aqui pesaba mas
     todavia, porque esta banda es justo el sitio donde se cuenta lo que ha
     salido mal. No sale en ninguna de las siete referencias, asi que no mueve
     un pixel de lo que el arnes compara. */
  color: var(--tinta);
  border: var(--borde) solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-campo);
  padding: 11px 12px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

/* Mientras algo tarda, el boton lo dice. Antes se podia tocar "Me apunto" y
   pasar nueve segundos sin que cambiase un solo pixel. */
/* Vale para cualquier cosa que se toque, no solo para el boton negro: la clase
   se ponia tambien en las pestanas, en los tres botones de repeticion y en el
   +/- y no la pintaba nadie. */
.esperando {
  opacity: 0.55;
  pointer-events: none;
}
.fab.esperando::after {
  content: ' …';
}

/* El boton de pedir otro codigo vive dentro de la pista, y solo aparece cuando
   la cuenta atras llega a cero: hasta entonces no hay nada que pedir. */
.reenviar {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5px;
  opacity: 1;
  padding: 8px 0;
}