/* ============================================================
   EL CARTEL DEL CÓDIGO PRIVADO

   Lo dibuja `js/sala-privada.js` y lo usan el tablero y el lobby: un solo
   cartel y una sola hoja, para que no haya dos que se desacomoden.

   Es una VENTANA, y no un cartel dentro de la página, porque el código se
   muestra una sola vez: mientras está a la vista nada puede taparlo. El
   módulo apaga el resto del cuerpo con `inert` y lo muda al `<body>`; acá va
   el velo y el metal.
   ============================================================ */

/* El velo. Por encima del cajón del menú (90) y de su velo (80): el cajón
   manda sobre la página, pero el código manda sobre todo.

   Tocar el velo NO cierra —eso lo decide el módulo—: el toque de más en el
   velo es el accidente típico, y acá cuesta el código. */
.codigo-privado {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El cartel es alto: en un teléfono apaisado se desliza dentro del velo en
     vez de salirse de la pantalla. */
  overflow-y: auto;
  padding: 16px;
  background: rgba(4, 4, 6, 0.84);
  backdrop-filter: blur(3px);
}

/* `hidden` solo no alcanza contra el `display: flex` de arriba. */
.codigo-privado[hidden] {
  display: none;
}

body.con-cartel-abierto {
  overflow: hidden;
}

/* Con el cartel abierto, el botón de soporte se va.
   ─────────────────────────────────────────────────────────────────────────
   El cartel deja `inert` a todo lo demás del cuerpo, así que esa píldora
   verde flotando sobre la carta no se puede tocar: es un adorno que estorba,
   y en un teléfono queda justo encima de los tres botones.

   Va acá y no en `tablero.css` porque la condición es del CARTEL, no del
   tablero: el día que el cartel se abra desde otra pantalla, esto lo
   acompaña sin que nadie se acuerde.

   Lo que esto NO arregla: que en algunos teléfonos la página se vea más
   angosta de lo que mide. Eso es lo que persigue el bloque que sigue. */
body.con-cartel-abierto .boton-soporte {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   QUE NADA DEL CARTEL PUEDA ESTIRAR LA PÁGINA

   Medido en dos teléfonos Android distintos, con el mismo resultado: al
   entrar al tablero el documento medía 360, y al crear la sala privada
   pasaba a 419. Cincuenta y nueve píxeles de más, que se ven como una banda
   muerta al costado y que cortan el botón de copiar contra el borde: se veía
   negro porque la mitad dorada quedaba afuera de la pantalla.

   En el emulador de escritorio, cero. La diferencia es la tipografía del
   aparato, que dibuja más anchos los mismos textos.

   Ya se descartaron, midiendo en el aparato: la dirección del link (se parte
   sola), los `select` del panel, el cajón del menú (`visibility: hidden`, no
   llega a pintar) y la tabla de «Mis salas» (la contiene su propio
   `overflow-x`). Queda el cartel, que es lo único que aparece justo cuando
   el número cambia.

   No se llegó a saber CUÁL de sus partes lo estira, y no valía seguir
   pidiendo mediciones a alguien con el teléfono en la mano: estas cuatro
   reglas tapan a todas las partes a la vez.

   ── Por qué `min-width: 0` ──

   Un hijo de flex nace con `min-width: auto`: no baja del ancho mínimo de su
   contenido por más que `width` diga otra cosa. Acá todo son flex anidados
   —el velo, la placa, la fila del link, la botonera—, así que un texto que
   no puede partirse empuja a su caja, y su caja a la de arriba.

   ── Por qué `max-width: 100%` ──

   Es el cinturón: aunque algo calcule un ancho mayor, no se pasa de su
   contenedor.

   ── Por qué se permite partir palabras ──

   Porque las cadenas largas de acá son códigos y direcciones, que no traen
   espacios donde cortar. Entre una palabra partida y la página corrida, se
   elige la palabra partida. Las dos excepciones —el código de la placa y el
   del link— se defienden más abajo, cada una con su motivo.

   Es de riesgo cero donde ya entraba: nada de esto cambia un ancho que no
   estuviera desbordándose. */
.codigo-privado,
.codigo-privado * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------------------------------- la carta

   Marco doble —un filo grueso de oro por fuera y uno fino por dentro—, fondo
   casi negro con una luz tibia arriba, y un halo dorado alrededor para
   despegarla del velo. */
.cartel-tarot {
  position: relative;
  /* ───────────────────────────────────────────────────────────────────
     SIN ESTO, EL CARTEL SE SALE DE LA PANTALLA

     Es hijo de un flex, y un hijo de flex nace con `min-width: auto`: no baja
     del ancho mínimo de su contenido, por más que `width` diga otra cosa. Con
     la letra del sistema agrandada —Android lo permite— el código crecía, no
     podía partirse, y empujaba el cartel más allá del `min(520px, 100%)`
     hasta sacarlo de la pantalla.

     Se vio en un teléfono de verdad: el aspa de cerrar y el botón de copiar
     quedaban cortados contra el borde derecho. */
  min-width: 0;
  /* 520 y no 440: con 440 el título se partía en dos también en pantalla
     grande, y en la referencia va en un renglón. */
  width: min(520px, 100%);
  margin: auto;
  padding: 30px 24px 24px;
  text-align: center;
  /* La banda dorada del marco: siete píxeles con degradado, no una línea.

     El truco es el borde transparente con dos fondos: los oscuros se pintan
     dentro del relleno (`padding-box`) y el degradado dorado ocupa la caja
     entera (`border-box`), así que asoma justo por el anillo del borde. Es la
     única manera de tener un borde con degradado que además respete el
     redondeo. */
  border: 7px solid transparent;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(212, 168, 67, 0.12), transparent 70%) padding-box,
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(184, 115, 51, 0.08), transparent 70%) padding-box,
    linear-gradient(170deg, #12100c 0%, #0a0a08 55%, #070706 100%) padding-box,
    linear-gradient(155deg, #f6e3a1 0%, #dbbd6a 22%, #8a6d2a 46%, #f0d060 62%, #bda05a 78%, #7c5a1e 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(240, 208, 96, 0.18),
    0 30px 70px rgba(0, 0, 0, 0.7),
    0 0 50px -12px rgba(212, 168, 67, 0.45);
}

/* El filo interior, el que hace el marco doble. Va en un pseudoelemento y no
   en un segundo `box-shadow`: así se despega del borde y queda el aire de una
   carta, no dos líneas pegadas. */
.cartel-tarot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212, 168, 67, 0.45);
  border-radius: 4px;
  pointer-events: none;
}

.cartel-tarot:focus-visible {
  outline: none;
}

/* ------------------------------------------- los rizos de las esquinas

   Un solo dibujo, cuatro veces, espejado con CSS: una carta lleva el mismo
   adorno en las cuatro puntas, y cuatro dibujos distintos serían cuatro cosas
   para mantener. */
.cartel-tarot > .rizo {
  position: absolute;
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  opacity: 0.8;
  pointer-events: none;
}

.cartel-tarot > .rizo .tenue {
  opacity: 0.45;
}

.cartel-tarot > .rizo circle {
  fill: var(--oro);
  stroke: none;
}

.cartel-tarot > .rizo:nth-of-type(1) { top: 9px; left: 9px; }
.cartel-tarot > .rizo:nth-of-type(2) { top: 9px; right: 9px; transform: scaleX(-1); }
.cartel-tarot > .rizo:nth-of-type(3) { bottom: 9px; left: 9px; transform: scaleY(-1); }
.cartel-tarot > .rizo:nth-of-type(4) { bottom: 9px; right: 9px; transform: scale(-1); }

/* --------------------------------------------------- la cruz de cerrar

   Cierra y deja la página como estaba: la sala ya existe y queda listada en
   «Mis salas». Lo que no vuelve es el código, y por eso el aviso está en
   negrita dos líneas más abajo. */
.cerrar-cartel {
  position: absolute;
  /* A la altura de la corona, como en la referencia: más arriba se cruzaba
     con el rizo de su esquina. */
  top: 24px;
  right: 16px;
  z-index: 1;
  /* Área de toque de dedo, aunque el aspa se vea chica. Cuarenta y cuatro es
     el mínimo que pide Apple; estaba en cuarenta, que se queda corto en un
     teléfono y encima es el botón que cierra algo. */
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--oro);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.cerrar-cartel:hover,
.cerrar-cartel:focus-visible {
  color: var(--oro-claro);
  transform: scale(1.1);
}

/* ------------------------------------------------------- la corona

   Arriba del título, entre dos líneas que se desvanecen. Los dos diamantes
   van dentro del mismo dibujo: son parte del adorno, no elementos sueltos. */
.corona {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 8px 10px;
}

.corona::before,
.corona::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.55), transparent);
}

.corona svg {
  width: 88px;
  height: auto;
  flex: none;
  fill: var(--oro);
  filter: drop-shadow(0 0 8px rgba(212, 168, 67, 0.45));
}

/* -------------------------------------------------------- el título */

.codigo-privado .titulo-codigo {
  margin: 0;
  /* Playfair y no Cinzel: el Cinzel del sitio trae sólo las letras de MEMORIE
     LEGENDS —son 1,8 KB a propósito— y acá hacen falta la T, la U, la A, la
     P, la V, la B y la Á. */
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 5vw, 1.5rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  /* Si no entra en un renglón, dos parejos: sin esto quedaba «ABIERTA» sola
     abajo, que se lee como otra cosa. */
  text-wrap: balance;
  background: linear-gradient(180deg, #fff3cd 0%, var(--oro-claro) 38%, var(--oro) 68%, var(--oro-hondo) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* El relieve va con `drop-shadow`: un `text-shadow` sobre un degradado
     recortado a las letras se pinta encima y ensucia el dorado. */
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(240, 208, 96, 0.3));
}

/* --------------------------------------------- la placa del código

   Dos cajas apiladas y recortadas con la misma forma: la de atrás dorada y la
   de adelante, dos píxeles más chica, casi negra. Es la única manera de tener
   un filo que siga a un `clip-path`: `border` no lo sigue. */
.placa-codigo {
  --corte: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 20px);
  margin: 18px 0 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 45%, var(--oro-hondo) 100%);
  clip-path: polygon(
    0 var(--corte), var(--corte) 0,
    calc(100% - var(--corte)) 0, 100% var(--corte),
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    var(--corte) 100%, 0 calc(100% - var(--corte))
  );
  filter: drop-shadow(0 0 18px rgba(212, 168, 67, 0.35));
}

.placa-codigo::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(180deg, #16140f, #0b0b09 60%, #080807);
  clip-path: inherit;
}

.placa-codigo > * {
  position: relative;
}

/* Los rombos, a los costados del código.

   Antes era una estrella de cuatro puntas cóncava, y a doce píxeles se leía
   como un signo «+». Un rombo parado —más alto que ancho— se lee como lo que
   es a cualquier tamaño, y va con los ángulos de la placa. */
.diamante {
  width: 9px;
  height: 16px;
  flex: none;
  background: linear-gradient(180deg, #fff3cd, var(--oro));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* El código, la única vez que se ve.

   En serif y grande, como el resto del metal del juego. La letra de máquina
   era por si hay que dictarlo por teléfono, y eso ya está resuelto donde
   corresponde: el alfabeto del servidor no tiene I, L, O, 0 ni 1, que son los
   que se confunden al dictar. A este tamaño, un 8 y una B tampoco. */
.codigo-grande {
  margin: 0;
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  /* ───────────────────────────────────────────────────────────────────
     POR QUÉ NO HAY PISO EN `rem`

     Antes decía `clamp(1.45rem, 7vw, 2.6rem)`. El piso en `rem` era el
     problema: con la letra del sistema al 125% valía 29px y le ganaba al
     `7vw`, así que el código crecía aunque la pantalla fuera la misma. Con
     `white-space: nowrap` no podía partirse, y arrastraba el cartel afuera.

     Ahora escala con la PANTALLA y se topa en 2.6rem para que no se vuelva
     gigante en un monitor. El techo sigue en `rem` a propósito: ahí agrandar
     la letra del sistema sí lo agranda, porque sobra lugar.

     El costo, dicho de frente: en un teléfono con la letra agrandada, el
     código NO crece. Es el precio de que la placa siga siendo una placa de un
     solo renglón. Todo lo demás del cartel —el título, el aviso, el link—
     sigue escalando. */
  font-size: min(7vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 2px;
  /* Los números, a la altura de las mayúsculas. Playfair los dibuja por
     omisión más bajos —«K7M2» quedaba con el 7 y el 2 a media altura— y en la
     referencia miden lo mismo que las letras. */
  font-variant-numeric: lining-nums tabular-nums;
  /* En un solo renglón: partido en dos, la placa deja de ser una placa. El
     tamaño se achica con la pantalla hasta que entre. */
  white-space: nowrap;
  background: linear-gradient(180deg, #fff6d8 0%, var(--oro-claro) 40%, var(--oro) 72%, #9d7a3a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(240, 208, 96, 0.35));
  /* En dos grupos, «ABCD EFGH»: si no entra en un renglón, se parte en el
     espacio y no a la mitad de un grupo. */
  word-break: normal;
}

/* En un teléfono, el código más chico y con las letras más juntas.
   ─────────────────────────────────────────────────────────────────────────
   La placa es la caja más ancha del cartel: nueve caracteres en serif con
   dos píxeles de aire entre cada uno, más los dos rombos y sus huecos. A 420
   de pantalla se le baja el cuerpo y el aire, y se le permite partirse.

   `min(1.35rem, 6vw)` y no `1.35rem` a secas: un tamaño fijo en `rem` es
   exactamente lo que se sacó de este archivo en «El cartel aguanta la letra
   grande del sistema». Al 200% valdría 43px, y volveríamos al principio. El
   tope en `vw` lo ata a la pantalla, que es la que no cambia.

   `white-space: normal` acompaña al `overflow-wrap`: sin él gana el `nowrap`
   de arriba y permitir el corte no significa nada. A este cuerpo los nueve
   caracteres entran de sobra, así que en la práctica no se parte: es un
   seguro, no un cambio de diseño. */
@media (max-width: 420px) {
  .codigo-grande {
    font-size: min(1.35rem, 6vw);
    letter-spacing: 1px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------- el aviso y el reloj */

/* El aviso va en dorado, como el resto de la carta. Medido contra el negro
   del fondo: 8,9:1, muy por encima del 4,5:1 que pide la WCAG AA. */
.codigo-privado .aviso-codigo {
  margin: 0;
  font-size: 0.86rem;
  color: var(--oro);
  line-height: 1.5;
}

.codigo-privado .aviso-codigo b {
  color: var(--oro-claro);
}

/* La vigencia, entre dos líneas que se desvanecen, como la corona. El reloj
   va AL LADO del texto y no adentro: `#vigenciaCodigo` dice exactamente
   «Vale 30 minutos.», y una prueba lo compara tal cual. */
/* ───────────────────────────────── el link de invitación

   Va debajo del código y arriba del reloj. Es la forma CÓMODA de pasar la
   sala —quien lo toca llega al lobby con el código puesto— y el código de
   arriba es la forma que se puede dictar.

   Se muestra entero y no acortado: alguien lo va a querer leer para
   comprobar que dice lo que dice antes de mandarlo. Si no entra, se parte. */
.fila-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px;
}

.link-invitacion {
  color: var(--oro-suave, #e3c77a);
  /* 0.8rem eran 12,8px y costaba leerlo en un teléfono. Este link existe para
     que alguien lo mire y compruebe que dice lo que dice antes de mandarlo. */
  font-size: 0.875rem;
  /* Parte donde haga falta... */
  overflow-wrap: anywhere;
  opacity: 0.92;
}

/* ...MENOS en el código, que va entero o no va.

   Con `anywhere` a secas, en un teléfono angosto el link se cortaba a mitad
   del código: `…/s/DZ2TP` en una línea y `UDH` en la otra. Un código partido
   en dos se lee mal, se dicta peor, y alguien lo va a copiar a mano sin la
   segunda mitad.

   Por eso el código viaja en su propio elemento: el resto de la dirección se
   parte si no entra, y él no. */
.link-codigo {
  white-space: nowrap;
}

.copiar-link {
  flex: none;
  display: grid;
  place-items: center;
  /* Treinta era cómodo de dibujar y incómodo de tocar. Cuarenta y cuatro es el
     mínimo para un dedo; el ícono adentro sigue midiendo quince. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(212, 168, 67, 0.45);
  border-radius: 6px;
  background: transparent;
  color: var(--oro, #d4a843);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.copiar-link:hover {
  border-color: var(--oro, #d4a843);
}

.copiar-link svg {
  width: 15px;
  height: 15px;
  /* Más gordo que el 1.8 de arriba porque éste es el ícono más chico del
     cartel: el trazo se dibuja en el sistema del `viewBox`, que mide 24, y al
     bajar la caja a 15 queda en 1,1 px reales. A 2,6 termina en 1,6, que es lo
     que mide el del botón grande y lo que se llega a ver en dorado sobre
     negro. */
  stroke-width: 2.6;
}

/* El acuse: el botón es sólo un ícono, así que la confirmación tiene que ser
   visual. El rótulo para lectores de pantalla lo cambia el JavaScript. */
.copiar-link.copiado {
  border-color: #25d366;
  color: #25d366;
}

.fila-reloj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 8px 0;
  color: var(--oro);
  font-size: 0.86rem;
}

.fila-reloj[hidden] {
  display: none;
}

.fila-reloj::before,
.fila-reloj::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.45), transparent);
}

.fila-reloj .reloj {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  .cerrar-cartel {
    transition: none;
  }

  .cerrar-cartel:hover,
  .cerrar-cartel:focus-visible {
    transform: none;
  }
}

/* Arriba del botón de crear: qué se va a crear, sin casilla que elegir. */
.ayuda-privada {
  margin: 4px 0 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texto-tenue);
  text-align: center;
}

/* En columna y del mismo ancho: tres placas del mismo juego, una debajo de
   la otra. Con el ancho de su contenido, cada una terminaba de un tamaño y
   parecían de tres juegos distintos apilados. */
.botonera-codigo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.botonera-codigo > .accion {
  /* 356 y no 330: con 330, el contenido del botón de WhatsApp llegaba al
     borde y al glifo le quedaban seis píxeles de aire a la izquierda, por
     debajo del espacio de respeto que pide el kit. Medido hasta que los dos
     lados pasaran los catorce. */
  width: min(100%, 356px);
}

/* ------------------------------------------------ los botones del cartel

   Tres placas con los extremos en punta, la misma forma y el mismo ángulo,
   con tres pesos distintos: negra la de copiar —lo opcional—, verde la de
   WhatsApp —la marca— y de oro lleno la de entrar, que es la acción que sigue
   y va sola al final. Si copiar y entrar fueran las dos doradas, la carta
   tendría dos botones gritando lo mismo.

   EL FILO QUE SIGUE A LA PUNTA

   `border` no sigue a un `clip-path`, y `outline` tampoco. Van dos cajas
   apiladas con el mismo recorte: la de atrás con el degradado dorado y, dos
   píxeles adentro, un `::before` con el color propio. Es la misma técnica de
   la placa del código.

   Los selectores llevan `.botonera-codigo >` para ganarle a
   `button.accion.sobria` y a `a.accion`, que ponen su propio fondo, su
   `display`, su redondeo y sus mayúsculas. */

.botonera-codigo > .accion {
  /* Un solo ángulo para los tres: tres ángulos serían tres decisiones donde
     alcanza con una. */
  --punta: 16px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 26px;
  border: none;
  border-radius: 0;
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  /* Se topa con la PANTALLA, por lo mismo que el código de arriba: la placa
     mide `min(100%, 356px)` y la etiqueta lleva `nowrap`, así que una letra
     que crece con el sistema se sale del botón. Pasaba de verdad: al 150%,
     «COMPARTIR POR WhatsApp» desbordaba el verde y «ENTRAR A LA SALA» quedaba
     cortado a «ENTRAR A LA SAL».

     En pantalla ancha gana `0.95rem` y todo queda como estaba. */
  /* Tres topes, y cada uno ataja una cosa:
       0.95rem  el tamaño de diseño, el que manda cuando todo es normal;
       4.2vw    para que se achique en pantallas angostas;
       15px     para que la letra del sistema no lo infle en ESCRITORIO, donde
                `4.2vw` vale sesenta píxeles y no topa nada, pero la placa
                sigue midiendo 356 fijos. */
  font-size: min(0.95rem, 4.2vw, 15px);
  /* El filo: la caja de atrás, dorada y entera. */
  background: linear-gradient(155deg, #f6e3a1 0%, #dbbd6a 22%, #8a6d2a 48%, #f0d060 70%, #7c5a1e 100%);
  box-shadow: none;
  clip-path: polygon(
    var(--punta) 0, calc(100% - var(--punta)) 0,
    100% 50%,
    calc(100% - var(--punta)) 100%, var(--punta) 100%,
    0 50%
  );
  /* El halo va con `drop-shadow` y no con `box-shadow`: box-shadow dibujaría
     la sombra del rectángulo entero y se verían las puntas recortadas contra
     una sombra cuadrada. */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* La cara de adentro. `clip-path: inherit` repite el recorte sobre una caja
   cuatro píxeles más chica, y lo que asoma alrededor es el filo. */
.botonera-codigo > .accion::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  pointer-events: none;
}

/* El contenido va por encima de la cara. */
.botonera-codigo > .accion > * {
  position: relative;
}

/* El separador entre el ícono y la palabra: una línea fina del color del
   botón. En el verde separa DOS marcas —el glifo de WhatsApp y nuestro
   texto—, que es justo lo que las normas del kit piden no mezclar. */
.botonera-codigo > .accion > .texto {
  padding-left: 12px;
  border-left: 1px solid;
  /* En un renglón. Sin esto, la caja del texto se encoge antes que la letra y
     «COMPARTIR POR WhatsApp» se parte en dos, con la placa creciendo a lo
     alto. */
  white-space: nowrap;
}

/* Y si aun así no entra, en dos renglones antes que de largo.
   ─────────────────────────────────────────────────────────────────────────
   Contradice al comentario de arriba a propósito, y el de arriba se queda
   porque explica qué se pierde: la etiqueta se parte, la placa crece a lo
   alto y las tres dejan de medir lo mismo.

   Es el precio, y es más barato que el otro. Con `nowrap` a secas, una
   etiqueta que no entra no se parte NI se encoge: EMPUJA. Y lo que empuja
   acá corre la página entera, que es el defecto que se está persiguiendo. */
.botonera-codigo > .accion,
.botonera-codigo > .accion > .texto {
  max-width: 100%;
  white-space: normal;
}

/* Cómo se dibujan los íconos del cartel, en UN solo lugar.
   ─────────────────────────────────────────────────────────────────────────
   Estas cuatro líneas vivían adentro de `.botonera-codigo > .accion > .icono`,
   y el botón chico de copiar —el que va al lado del link— no es hijo de ningún
   `.accion`. Se quedaba sin ellas.

   Un `<svg>` sin `fill` se pinta en NEGRO MACIZO por omisión. El dibujo de
   copiar es un `<rect>` y un `<path>`, así que sin esto era un cuadrado negro
   sobre una carta casi negra: el botón se veía VACÍO, con su borde dorado y
   nada adentro. No faltaba el ícono ni dejaba de cargar. Estaba, y era
   invisible.

   Va por cartel y no por botón porque es la misma decisión de dibujo para
   todos: contorno del color de la letra, sin relleno. El tamaño sí es de cada
   uno y sigue donde estaba.

   No se puede ver en una captura —negro sobre negro es negro— ni leyendo el
   HTML, donde el `<svg>` está y es correcto. Se ve leyendo `fill`, y eso es lo
   que hace la prueba «los íconos del cartel se dibujan con trazo». */
.codigo-privado .icono {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botonera-codigo > .accion > .icono {
  width: 22px;
  height: 22px;
  flex: none;
}

/* ---------------------------------------------------------- copiar */

.botonera-codigo > .boton-copiar {
  color: var(--oro-claro);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.botonera-codigo > .boton-copiar::before {
  background: linear-gradient(180deg, #16140f 0%, #0b0b09 60%, #080807 100%);
}

.botonera-codigo > .boton-copiar > .texto {
  border-color: rgba(212, 168, 67, 0.4);
}

/* ------------------------------------------------- compartir por WhatsApp

   Verde oficial por dentro y el glifo BLANCO del kit, que es el que
   corresponde sobre ese verde. El logo no se toca: ni el dibujo ni el color.

   «Compartir por» va en mayúsculas y «WhatsApp» con su grafía, que es como la
   escribe la marca: en mayúsculas enteras sería otra palabra. */

.botonera-codigo > .boton-whatsapp {
  /* Catorce de aire a cada lado del glifo: 12 de hueco más 2 de margen a la
     derecha, y 14 de relleno a la izquierda. */
  gap: 12px;
  padding-left: 14px;
  color: #fff;
  letter-spacing: 0.3px;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.botonera-codigo > .boton-whatsapp::before {
  /* El verde, PLANO y sin nada encima: ni degradado, ni transparencia, ni
     mezcla. Las normas del kit no dejan modificar el color de la marca, y un
     degradado —por suave que sea— es una modificación: aclaraba arriba y
     oscurecía abajo, y lo que se veía ya no era #25d366.

     El relieve de esta placa lo hace el filo dorado que asoma alrededor, que
     está AFUERA del verde y no encima. */
  background-color: #25d366;
}

.botonera-codigo > .boton-whatsapp > .texto {
  border-color: rgba(255, 255, 255, 0.45);
}

.boton-whatsapp .mayusculas {
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* La flecha, que dice «esto te lleva afuera». Va en un pseudoelemento a
   propósito: el `innerText` del enlace tiene que seguir diciendo exactamente
   «Compartir por WhatsApp», y lo que pone el CSS no entra ahí. */
.botonera-codigo > .boton-whatsapp::after {
  content: "→";
  position: relative;
  /* En `em`, o sea atada a la letra DEL BOTÓN, y no a la raíz ni a la
     pantalla.

     Era el último tamaño suelto del botón. En `rem` crecía con la letra del
     sistema —al 200% medía 35px y empujaba ocho píxeles fuera del verde—, y
     topada en `vw` quedaba desproporcionada: a 320px de ancho la flecha medía
     14,7 al lado de una etiqueta de 10.

     Con `em` acompaña a su etiqueta en cualquier ancho y a cualquier escala,
     sin un número por caso. En pantalla grande da 17px, que es lo que daba el
     `1.1rem` original. */
  font-size: 1.15em;
  line-height: 1;
  opacity: 0.9;
}

/* El glifo del kit, a 28, con su aire alrededor.

   Las normas piden un espacio de respeto a su alrededor, y el que se toma es
   la mitad de su alto: 14 px. A la izquierda lo da el relleno del botón; a la
   derecha, el hueco hasta el separador. Con los 12 px de antes quedaba
   apretado contra la línea, y con 8 en el teléfono, más. */
.boton-whatsapp img {
  width: 28px;
  height: 28px;
  flex: none;
  margin-right: 2px;
}

/* --------------------------------------------------------- entrar */

.botonera-codigo > .boton-entrar {
  color: #1a1206;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}

.botonera-codigo > .boton-entrar::before {
  background: linear-gradient(145deg, #b8892e 0%, var(--oro) 34%, var(--oro-claro) 62%, var(--oro) 100%);
}

.botonera-codigo > .boton-entrar > .texto {
  border-color: rgba(26, 18, 6, 0.35);
}

/* ------------------------------------------------------- los tres */

.botonera-codigo > .accion:hover:not(:disabled),
.botonera-codigo > .accion:focus-visible {
  transform: scale(1.02);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) brightness(1.08);
}

/* Menos el verde: `brightness` le subiría el tono al color de la marca, que no
   es un estado. Acá lo que contesta es la sombra y la escala. */
.botonera-codigo > .boton-whatsapp:hover:not(:disabled),
.botonera-codigo > .boton-whatsapp:focus-visible {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.botonera-codigo > .accion:active:not(:disabled) {
  transform: scale(0.99);
}

.botonera-codigo > .accion:focus-visible {
  /* Sin `outline`: sobre una forma recortada se dibuja el rectángulo entero y
     se ven las esquinas que el recorte sacó. El foco se marca con la misma
     luz del halo, más fuerte. */
  outline: none;
  filter: drop-shadow(0 0 0 2px var(--oro-claro)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

/* En un teléfono angosto, «COMPARTIR POR WhatsApp» no entra en un renglón con
   el cuerpo de los otros dos: es la etiqueta más larga de las tres. Se achica
   sólo ésa, lo justo para que no se parta en dos. */
@media (max-width: 480px) {
  .botonera-codigo > .boton-whatsapp {
    /* Se achica la letra, no el aire del glifo: el espacio de respeto es del
       kit y no se negocia con el ancho de la pantalla.

       Con el tope en `vw` por el mismo motivo que el resto de la botonera: es
       la etiqueta más larga de las tres y la primera en desbordarse. */
    padding-right: 14px;
    /* 3 y no 3.4: a 320px de ancho —el teléfono más angosto que soportamos—
       con 3.4 la etiqueta desbordaba el verde por nueve píxeles, y con 3.15
       todavía por dos. Los números salieron de medir cada vez, no de tantear.
       El aire del glifo no se toca: eso lo pide el kit de la marca. */
    font-size: min(0.76rem, 3vw);
  }

  .botonera-codigo > .boton-whatsapp > .texto {
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .botonera-codigo > .accion,
  .botonera-codigo > .accion:hover,
  .botonera-codigo > .accion:active {
    transition: none;
    transform: none;
  }
}