/* RingPago · forma de las pantallas (DATOS.md, apartados 10 y 54), con la forma de la muestra aprobada de la v3: recuadros
 * con un borde fino, botones como rectángulos redondeados y un solo botón naranja a la vista. La letra, Mont con sus
 * cinco grosores: Black solo en el titular de cada pantalla, Heavy en el de cada parte, Bold en las cifras, los botones
 * y los nombres, SemiBold en el menú y las etiquetas y Regular en el texto (54.4).
 *
 * Sin colores: todos salen de colores.css. Primero el móvil (de 360 a 390 px). Desde la v3 (54.5), tres tamaños: el
 * móvil, con la barra de abajo; la tableta (de 720 a 1023 px), con la barra y el contenido de 720 px como mucho; y el
 * ordenador (desde 1024 px), con el menú a la izquierda, el contenido a lo ancho y las listas en columnas. Los efectos
 * (cristal y brillo), solo en lo de los clientes (54.6), al final del archivo con su apagado.
 * Las piezas que se repiten (botones con su motivo, tarjetas, teclado del PIN, hojas, barra, el menú) son las de
 * js/piezas.js y js/rutas.js.
 */

@font-face { font-family: 'Mont RP'; src: url('../fuentes/mont/Mont-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mont RP'; src: url('../fuentes/mont/Mont-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Mont RP'; src: url('../fuentes/mont/Mont-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Mont RP'; src: url('../fuentes/mont/Mont-Heavy.woff') format('woff'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Mont RP'; src: url('../fuentes/mont/Mont-Black.woff') format('woff'); font-weight: 900; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--fondo); color: var(--texto); }
body {
  font-family: 'Mont RP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--suave); opacity: 1; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; } /* el título que recibe el foco al cambiar de pantalla (para los lectores) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* El grueso del trazo de los iconos lo heredan del <svg> de cada uno (así el sobre de la entrada puede ir más fino, 54.6). */
svg { stroke-width: 1.8; }
.icono-linea { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.icono-hueco { stroke: var(--t-pildora-fondo); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sin-partir { white-space: nowrap; } /* un código (RP-R-000001) no se parte por el guion */

/* ---------------------------------------------------------------- la columna de la app y el armazón (DATOS.md, 54.5) */
/* Hasta 719 px, el móvil: una columna de 460 px como mucho y la barra de abajo. Desde 720 px, la tableta: la barra de
   abajo y el contenido centrado, de 720 px como mucho, sin el marco de móvil (ni esquinas ni sombra). Desde 1024 px, con
   el menú de la izquierda (.app.con-lado), el ordenador. Los dos menús se pintan siempre (js/rutas.js) y aquí se enseña
   uno u otro: al cambiar el ancho no se vuelve a pintar nada. El que no se ve lleva display: none (ni se toca, ni recibe
   el foco, ni lo lee un lector de pantalla). isolation: el brillo de los clientes va detrás de todo, dentro de la app. */
.app { position: relative; max-width: 460px; margin: 0 auto; min-height: 100vh; padding: 18px 18px 120px; background: var(--fondo); isolation: isolate; }
.app.sin-barra { padding-bottom: 32px; }
.lado, .arriba-ancha { display: none; }
@media (min-width: 720px) {
  .app { max-width: 720px; padding: 24px 24px 120px; }
  .app.sin-barra { padding-bottom: 36px; }
}
@media (min-width: 1024px) {
  .app.con-lado { max-width: none; padding: 0; }
  .app.con-lado .lado { position: fixed; top: 0; bottom: 0; left: 0; width: 268px; overflow-y: auto; z-index: 15; background: var(--lado); border-right: 1px solid var(--borde); padding: 24px 18px; display: flex; flex-direction: column; }
  .app.con-lado .cuerpo { margin-left: 268px; min-width: 0; }
  .app.con-lado.lado-oculto .lado { display: none; }
  .app.con-lado.lado-oculto .cuerpo { margin-left: 0; }
  .app.con-lado .barra { display: none; }
  .app.con-lado .arriba-ancha { display: flex; }
  .app.con-lado .pantalla { max-width: 1200px; padding: 28px 32px 48px; }
  /* Lo que es una columna (formularios, fichas, textos, resultados), a 720 px como mucho; las rejillas, las baldosas,
     las tarjetas y lo de a lo ancho del inicio del cliente, a lo ancho (54.5.9). */
  .app.con-lado .pantalla > * { max-width: 720px; }
  .app.con-lado .pantalla > .arriba,
  .app.con-lado .pantalla > .rejilla,
  .app.con-lado .pantalla > .mosaico,
  .app.con-lado .pantalla > .pila,
  .app.con-lado .pantalla > .inicio-fila,
  .app.con-lado .pantalla > .zona-promo,
  .app.con-lado .pantalla > .inicio-mov { max-width: none; }
  /* El aviso «Sin conexión» (#red, fuera de la app) va en una línea, y el menú y la fila de arriba empiezan debajo de él
     mientras se ve: así no tapa el botón del menú, la miga ni el logo. */
  .red { height: 36px; white-space: nowrap; }
  body:has(> #red:not([hidden])) .app.con-lado .lado,
  body:has(> #red:not([hidden])) .app.con-lado .arriba-ancha { top: 36px; }
}

/* Lo que solo se ve en un tamaño (54.5.5): .solo-movil, hasta 1023 px (o sin el menú de la izquierda); .solo-ordenador,
   desde 1024 px con el menú. Las dos quitan la pieza del todo. .solo-ancho (el h1 de las pantallas de inicio) es lo
   contrario de .solo-lector: escondido a la vista hasta 1023 px, pero para el lector de pantalla sigue ahí. */
.solo-ancho { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app:not(.con-lado) .solo-ordenador { display: none !important; }
@media (max-width: 1023px) {
  .solo-ordenador { display: none !important; }
}
@media (min-width: 1024px) {
  .app.con-lado .solo-movil { display: none !important; }
  .app.con-lado .solo-ancho { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

/* ---------------------------------------------------------------- el menú de la izquierda (desde 1024 px; 54.5.3) */
/* Como en la muestra: arriba el logo (y «Oficina»), quién ha entrado y, después, sus elementos y sus grupos; abajo, con una
   línea encima, «Tu perfil» y «Salir». Cada elemento es un enlace (lleva a otra pantalla); dónde estás, con su fondo, su
   borde y la raya de 3 × 18 px a la derecha, en el color de lo elegido. Sin efectos. */
.lado-marca { padding: 0 6px; }
.lado-marca .logo-lado { height: 22px; }
.lado-sub { display: block; font-size: 12px; font-weight: 600; color: var(--tenue); margin-top: 4px; }
.lado-quien { padding: 26px 6px 22px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; }
.lado-quien b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; }
.lado-quien span { display: block; font-size: 12.5px; font-weight: 400; color: var(--tenue); margin-top: 8px; line-height: 1.4; }
.lado-lista, .lado-grupos { display: flex; flex-direction: column; gap: 2px; }
.lado a, .lado-salir, .lado-grupo.con-icono {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 13px; border: 1px solid transparent;
  background: none; color: var(--suave); font-size: 14.5px; font-weight: 600; text-decoration: none; text-align: left; position: relative; width: 100%;
}
.lado a svg, .lado-salir svg, .lado-grupo svg { width: 20px; height: 20px; flex: none; }
.lado a.hijo { padding-left: 44px; min-height: 36px; font-size: 13.5px; }
/* La etiqueta de un grupo sin icono (el cliente), pequeña y en --tenue; con icono (la oficina), como un elemento más. */
.lado-grupo { display: block; font-size: 12.5px; font-weight: 600; color: var(--tenue); padding: 14px 8px 8px; }
.lado a[aria-current="page"] { background: var(--activo); border-color: var(--borde); color: var(--texto); }
.lado a[aria-current="page"]::after { content: ''; position: absolute; right: 12px; top: 50%; margin-top: -9px; width: 3px; height: 18px; border-radius: 2px; background: var(--elegido-borde); }
.lado .insignia { position: static; margin-left: auto; flex: none; }
.lado a[aria-current="page"] .insignia { margin-right: 12px; }
@media (hover: hover) and (pointer: fine) {
  .lado a:hover, .lado-salir:hover { background: var(--activo); }
}
.lado-abajo { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 2px; }

/* ---------------------------------------------------------------- la fila de arriba y la miga (desde 1024 px; 54.5.4 y 54.5.5) */
.arriba-ancha { position: sticky; top: 0; z-index: 10; min-height: 68px; align-items: center; gap: 12px; padding: 0 32px; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.boton-lado { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--borde); background: none; color: var(--suave); display: grid; place-items: center; padding: 0; flex: none; }
.boton-lado svg { width: 16px; height: 16px; }
.miga { min-width: 0; }
.miga ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--tenue); line-height: 1.3; }
.miga li { display: flex; align-items: center; gap: 10px; }
.miga .miga-ic { color: var(--suave); }
.miga .miga-ic svg { width: 20px; height: 20px; display: block; }
.miga a { color: inherit; text-decoration: none; }
.miga a:hover { text-decoration: underline; text-underline-offset: 3px; }
.miga [aria-current="page"] { color: var(--texto); }

/* ---------------------------------------------------------------- cabecera */
.arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 8px; }
.arriba .logo { height: 21px; display: block; }
.arriba .titulo { font-weight: 900; font-size: 17px; text-align: center; flex: 1; min-width: 0; margin: 0; letter-spacing: -0.01em; }
.arriba .titulo.grande { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; text-align: left; }
.arriba .hueco-redondo { width: 42px; flex: none; }
.redondo { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--boton-fondo); color: var(--texto); display: grid; place-items: center; flex: none; padding: 0; }
.redondo svg { width: 19px; height: 19px; }
.pista { font-size: 13px; font-weight: 400; color: var(--suave); margin: -2px 2px 12px; }
/* En el ordenador (54.5.5), el h1 de cada pantalla a la izquierda, grande, con «atrás» a su izquierda y la ayuda a la
   derecha. Solo dentro de las pantallas: el teclado del PIN (en #capas) lleva su cabecera de siempre. */
@media (min-width: 1024px) {
  .app.con-lado .pantalla > .arriba { justify-content: flex-start; gap: 14px; margin: 0 0 18px; }
  .app.con-lado .pantalla > .arriba .titulo { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; text-align: left; flex: 1; min-width: 0; }
  .app.con-lado .pantalla > .arriba .hueco-redondo { display: none; }
}

/* ---------------------------------------------------------------- los logos (DATOS.md, 54.7) */
/* RP.p.logo: dos <img> en un .logo-par, la de cada tema; solo se ve la del tema puesto (al imprimir, la clara). */
.logo-par { display: block; flex: none; line-height: 0; }
.logo-par > img { display: block; height: 100%; width: auto; max-width: none; }
@media screen {
  :root[data-tema="claro"] .solo-oscuro,
  :root:not([data-tema="claro"]) .solo-claro { display: none; }
}
@media print {
  .solo-oscuro { display: none !important; }
}

/* ---------------------------------------------------------------- botones */
/* Un rectángulo redondeado con un borde fino, como en la muestra. Un solo botón naranja a la vista: el principal
   (DATOS.md, 54.3.2). «suave» es igual que el de siempre: una sola manera (la clase se queda para no tocar el JavaScript). */
.boton {
  height: 54px; border-radius: 16px; border: 1px solid var(--borde); padding: 0 18px;
  background: var(--boton-fondo); color: var(--boton-texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 700; font-size: 14px; white-space: nowrap; max-width: 100%;
}
.boton svg { width: 16px; height: 16px; flex: none; }
.boton.principal { background: var(--principal-fondo); border-color: var(--principal-fondo); color: var(--principal-texto); }
/* Con una hoja o el teclado del PIN abiertos, lo de debajo queda inerte y su principal pierde el naranja: el único naranja
   a la vista es el de la capa de arriba (al cerrarla, vuelve solo). */
[inert] .boton.principal:not(.gris) { background: var(--boton-fondo); border-color: var(--borde); color: var(--boton-texto); }
.boton.suave { background: var(--boton-fondo); color: var(--boton-texto); }
.boton.chico { height: 40px; border-radius: 12px; font-size: 13px; padding: 0 14px; }
.boton.ancho { width: 100%; }
/* Después de .principal: un principal en gris sale gris. */
.boton.gris, .boton:disabled { background: var(--gris-fondo); border-color: transparent; color: var(--gris-texto); }
.boton.ocupado { opacity: 0.7; }
/* Mientras espera, la rueda ocupa el sitio del icono: así el texto sigue cabiendo (a 360 px, «Confirmar con PIN» con el
   icono y la rueda a la vez no cabía en su botón). */
.boton.ocupado svg { display: none; }
.boton.ocupado::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar 0.8s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Una acción: el botón y, debajo o al lado, el motivo cuando está en gris. Nunca desaparece. */
.accion { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.accion .motivo { font-size: 12.5px; font-weight: 400; color: var(--suave); line-height: 1.35; padding: 0 6px; }
.accion.ancha .motivo { text-align: center; }
.accion.en-linea { flex-direction: row; align-items: center; gap: 10px; }
.accion.en-linea .boton { flex: none; }
.accion.en-linea .motivo { padding: 0; }

.pildora { height: 40px; border-radius: 999px; border: 0; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; background: var(--fuerte-fondo); color: var(--fuerte-texto); white-space: nowrap; }
.pildora svg { width: 15px; height: 15px; }
.pildora.chica { height: 32px; font-size: 12.5px; padding: 0 12px; background: var(--superficie-2); color: var(--texto); }
.abajo-centro { display: flex; justify-content: center; margin-top: 22px; }

.segmentos { display: flex; gap: 6px; background: var(--superficie); border-radius: 999px; padding: 4px; }
.segmentos button { flex: 1; height: 38px; border-radius: 999px; border: 0; background: transparent; color: var(--suave); font-weight: 700; font-size: 13.5px; white-space: nowrap; padding: 0 10px; }
.segmentos button[aria-pressed="true"] { background: var(--fuerte-fondo); color: var(--fuerte-texto); }

.enlace { border: 0; background: none; padding: 6px 2px; color: var(--texto); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- inicio */
.mini { width: 24px; height: 16px; border-radius: 4px; background: var(--t-mini-eur); display: inline-block; flex: none; }
.mini.usd { background: var(--t-mini-usd); }
.mini.grande { width: 36px; height: 24px; border-radius: 6px; }
.saldo { text-align: center; font-weight: 700; font-size: clamp(36px, 12vw, 46px); letter-spacing: -0.035em; margin: 4px 0 8px; line-height: 1.1; white-space: nowrap; }
.saldo small { font-size: 0.58em; font-weight: 700; margin-left: 5px; letter-spacing: -0.02em; }
.retenido { display: table; margin: 0 auto; font-size: 12.5px; font-weight: 700; color: var(--suave); background: var(--superficie-2); border-radius: 999px; padding: 6px 13px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.dos .boton { width: 100%; padding: 0 10px; font-size: 13.5px; }
.fila-gris { margin-top: 10px; }
.fila-gris .boton { width: calc(50% - 5px); height: 42px; font-size: 13px; }

/* La invitación a recargar: un recuadro más, con la moneda oscura y la R en plata dentro (DATOS.md, 54.3.1 y 54.7). */
.promo { margin-top: 14px; border-radius: 22px; background: var(--superficie); color: var(--texto); padding: 15px 16px; display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--borde); text-align: left; }
.promo > div { flex: 1; min-width: 0; }
.promo b { display: block; font-weight: 800; font-size: 15px; margin-bottom: 3px; }
.promo span { font-size: 12.5px; font-weight: 400; color: var(--suave); line-height: 1.35; display: block; }
.promo .moneda { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--promo-moneda); border: 1px solid var(--borde); }
.promo .moneda img { display: block; width: 18px; height: 22px; }

.aviso-arriba { display: flex; align-items: center; gap: 12px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--borde); padding: 12px 12px 12px 14px; margin: 6px 0 4px; }
.aviso-arriba .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); flex: none; }
.aviso-arriba div { flex: 1; min-width: 0; }
.aviso-arriba b { display: block; font-size: 14px; font-weight: 800; }
.aviso-arriba small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }

.panel { margin-top: 14px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 14px 14px 10px; }
.panel .cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.panel .cab .enlace { font-size: 13px; font-weight: 700; color: var(--suave); text-decoration: none; padding: 4px 0; }
/* Una etiqueta en la cabecera de un recuadro («precio en € y US$» del catálogo): no es un botón (DATOS.md, 54.4). */
.panel .cab .cab-nota { font-size: 13px; font-weight: 600; color: var(--suave); text-decoration: none; flex: none; }
.cab-titulo { font-size: 15px; font-weight: 800; margin: 0; }
.vacio { font-size: 13px; font-weight: 400; color: var(--suave); padding: 8px 2px 10px; line-height: 1.45; margin: 0; }

.mov { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.mov + .mov { border-top: 1px solid var(--borde); }
.mov .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; color: var(--texto); }
.mov .ic svg { width: 17px; height: 17px; }
.mov .que { flex: 1; min-width: 0; }
.mov b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov small { display: block; font-size: 12px; color: var(--suave); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov .imp { font-weight: 700; font-size: 14px; flex: none; white-space: nowrap; }
.mov .imp.mas { color: var(--exito-texto); }
/* Lo que no se movió (rechazado, cancelado, caducado): más flojo por su color, no por el grosor (es un importe: 700). */
.mov .imp.nada { font-weight: 700; font-size: 13px; color: var(--suave); }

/* ---------------------------------------------------------------- el inicio del cliente (DATOS.md, 54.5.12) */
/* En el móvil, como el bloque 2 de la muestra: el saludo con la R y las iniciales, «Tu saldo · ‹de cuándo›», el saldo
   grande a la izquierda, «y ‹la otra›», la tarjeta compacta y los tres botones en una fila. En el ordenador, como el
   bloque 3: «Tu saldo», «Al día: ‹de cuándo›» y una fila de tres (las dos tarjetas y «¿Qué quieres hacer?»). Cada pieza
   se pinta una vez y se ve en un solo tamaño. */
.saludo-cliente { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 17px; font-weight: 600; color: var(--texto); }
.saludo-cliente .logo-par { height: 27px; }
.saludo-cliente span { min-width: 0; overflow-wrap: anywhere; }
.iniciales { width: 38px; height: 38px; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borde); display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.de-cuando { margin: 12px 2px 0; font-size: 13px; font-weight: 600; color: var(--suave); }
.de-cuando .cuando { font-size: 12.5px; font-weight: 400; }
.zona-saldo .saldo { text-align: left; margin: 2px 0 0; }
.saldo-otra { font-size: 17px; font-weight: 700; color: var(--suave); margin: 0 0 2px; }
.zona-saldo .retenido { margin: 8px 0 0; }
.tarjeta-inicio { min-height: 0; margin-top: 14px; padding: 16px 20px; }
.tarjeta-inicio .t-pie { margin-top: 18px; }
.tarjeta-inicio .t-saldo { font-size: 18px; margin: 0; }
.tarjeta .t-retenido { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.inicio-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; align-items: start; }
/* Los tres botones con la forma de la muestra: el icono arriba y el texto debajo (que puede ir en dos líneas). */
.inicio-acciones .boton { width: 100%; height: auto; min-height: 92px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 12px; border-radius: 18px; white-space: normal; text-align: left; font-size: 13.5px; line-height: 1.25; }
.inicio-acciones .boton svg { width: 22px; height: 22px; }
.inicio-acciones .motivo { padding: 0 4px; }
@media (min-width: 1024px) {
  .app.con-lado .de-cuando { display: inline-block; line-height: 34px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); margin: 0 0 22px; }
  .app.con-lado .de-cuando .cuando { font-size: 13px; font-weight: 600; }
  .app.con-lado .inicio-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 18px; align-items: stretch; }
  .app.con-lado .inicio-fila > .zona-saldo,
  .app.con-lado .inicio-fila > .zona-tarjetas { display: contents; }
  .app.con-lado .inicio-fila .tarjeta { min-height: 196px; }
  /* En la fila de tres, la tarjeta es estrecha: el saldo va en su propia línea, a todo lo ancho (debajo del tipo y de la
     R), y no al lado de la R y la moneda, donde a 1024 px no cabía. */
  .app.con-lado .inicio-fila .tarjeta .t-cab { flex-wrap: wrap; }
  .app.con-lado .inicio-fila .tarjeta .t-cab > div { display: contents; }
  .app.con-lado .inicio-fila .tarjeta .t-tipo { flex: 1; min-width: 0; }
  .app.con-lado .inicio-fila .tarjeta .t-der { order: 1; }
  .app.con-lado .inicio-fila .tarjeta .t-saldo { order: 2; flex-basis: 100%; margin-top: 2px; }
  .app.con-lado .inicio-fila .tarjeta .t-retenido { order: 3; flex-basis: 100%; margin-top: 0; }
  .app.con-lado .inicio-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; border-radius: 22px; border: 1px solid var(--borde); background: var(--superficie); padding: 20px 22px; }
  .app.con-lado .inicio-acciones h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 2px; }
  .app.con-lado .inicio-acciones .boton { min-height: 0; height: 54px; flex-direction: row; align-items: center; justify-content: center; border-radius: 16px; padding: 0 18px; white-space: nowrap; font-size: 14px; }
  .app.con-lado .inicio-acciones .boton svg { width: 16px; height: 16px; }
  .app.con-lado .inicio-acciones .motivo { text-align: center; }
}

/* ---------------------------------------------------------------- el inicio del operador (DATOS.md, 54.5.13) */
/* Como el bloque 5 de la muestra (Adrián, 01/11/2026): el saludo de arriba, el del cliente, con «Tu caja»; «Abierta · desde
   las 9:02»; dos baldosas y los botones uno debajo de otro. Sin cristal ni brillo: es la oficina (54.6). En el ordenador, las
   mismas piezas en la primera columna; «Abierta · …» va en su recuadro pequeño, como «Al día» del cliente. */
.caja-estado { margin-top: 20px; }
/* Mientras se lee la caja, «Mirando tu caja…» va en la línea de «Abierta · …», sin la rueda: nada salta al llegar (55.4). */
.caja-estado.cargando { padding: 0; text-align: left; font-size: 13px; font-weight: 600; }
.caja-estado.cargando::before { content: none; }
.caja-baldosas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.caja-baldosas .baldosa { min-height: 110px; padding: 18px 16px; gap: 0; }
.caja-baldosas .baldosa .b-cab { font-size: 13px; }
/* La cifra, a 23 px, como en la muestra; algo menos en un móvil estrecho. Si aun así no cabe, se parte por el espacio:
   «123.456,78» y, debajo, «US$». */
.caja-baldosas .baldosa b { margin-top: auto; font-size: clamp(19px, 5.6vw, 23px); letter-spacing: -0.03em; }
.caja-inicio .vacio { padding: 8px 2px 0; }
.caja-nota > span { display: block; }
.caja-botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.caja-botones .boton { font-size: 16px; }
.caja-espera { margin-top: 10px; }
.caja-espera .aviso-arriba { margin: 0; }
.caja-espera .vacio { padding: 2px 2px 0; }
.caja-espera:empty { display: none; }
@media (min-width: 1024px) {
  .app.con-lado .caja-estado { margin: 0; }
  .app.con-lado .rejilla-caja > div > .panel:first-child { margin-top: 0; }
}

/* ---------------------------------------------------------------- barra flotante */
/* Con la forma de la muestra (54.5.7): un rectángulo redondeado y cada botón, un cuadrado redondeado. */
.barra {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 440px; height: 64px; border-radius: 22px; background: var(--barra); display: flex; align-items: center; justify-content: space-around; padding: 0 9px;
  box-shadow: var(--sombra-barra); z-index: 20;
}
.barra button { position: relative; width: 46px; height: 46px; border-radius: 15px; border: 0; background: transparent; display: grid; place-items: center; color: var(--barra-icono); padding: 0; }
.barra button[aria-current="page"] { background: var(--barra-activa-fondo); color: var(--barra-activa-icono); }
.barra svg { width: 20px; height: 20px; }
/* La barra es oscura en los dos temas: el marco del foco, en el claro de la barra (54.5.8). */
.barra :focus-visible { outline-color: var(--barra-activa-fondo); }
.insignia { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 999px; background: var(--naranja); color: var(--sobre-naranja); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }

/* ---------------------------------------------------------------- tarjetas */
.pila { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.tarjeta { position: relative; overflow: hidden; border-radius: 22px; padding: 16px 18px; min-height: 172px; color: var(--t-texto); display: flex; flex-direction: column; justify-content: space-between; border: 0; width: 100%; text-align: left; }
.tarjeta .t-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; z-index: 1; width: 100%; }
.tarjeta .t-cab > div { min-width: 0; }
.tarjeta .t-tipo { font-size: 12.5px; font-weight: 600; }
.tarjeta .t-nombre { font-size: 13.5px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .t-saldo { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; white-space: nowrap; }
/* Arriba a la derecha, la R en plata (16 × 20) delante de la etiqueta de la moneda (DATOS.md, 54.3.3 y 54.7). */
.tarjeta .t-der { display: flex; align-items: center; gap: 9px; flex: none; }
.tarjeta .t-marca { height: 20px; }
.tarjeta .t-marca > img, .tarjeta img.t-marca { display: block; width: 16px; height: 20px; }
.tarjeta .t-moneda { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 8px; flex: none; }
.tarjeta .t-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; z-index: 1; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; margin-top: 14px; white-space: nowrap; width: 100%; }
.tarjeta .elegida { display: inline-flex; align-items: center; gap: 6px; background: var(--t-pildora-fondo); color: var(--t-pildora-texto); border-radius: 999px; padding: 6px 10px 6px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.tarjeta .elegida svg { width: 14px; height: 14px; }
/* Personal: grafito en oscuro y blanca en claro, con su letra y un borde fino (sigue al tema). */
.t-personal-eur { background: var(--t-personal-eur); color: var(--t-texto-personal); box-shadow: inset 0 0 0 1px var(--borde); }
.t-personal-usd { background: var(--t-personal-usd); color: var(--t-texto-personal); box-shadow: inset 0 0 0 1px var(--borde); }
/* Laboral y Operador: grafito en los dos temas, con el filo izquierdo de 4 px en plata. */
.t-laboral-eur, .t-operador-eur { background: var(--t-laboral-eur); }
.t-laboral-usd, .t-operador-usd { background: var(--t-laboral-usd); }
.t-laboral-eur::after, .t-laboral-usd::after, .t-operador-eur::after, .t-operador-usd::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t-filo); }
/* Negocios: plata clara en los dos temas. */
.t-negocios-eur { background: var(--t-negocios-eur); color: var(--t-texto-negocios); box-shadow: inset 0 0 0 1px var(--t-borde-negocios); }
.t-negocios-usd { background: var(--t-negocios-usd); color: var(--t-texto-negocios); box-shadow: inset 0 0 0 1px var(--t-borde-negocios); }
.hueco { border-radius: 22px; border: 1.5px dashed var(--borde); padding: 14px 16px; font-size: 13px; font-weight: 400; color: var(--suave); line-height: 1.45; margin: 0; }
.hueco b { color: var(--texto); font-weight: 700; }

/* ---------------------------------------------------------------- formularios */
.campo { display: block; margin-top: 14px; }
.campo > span { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin: 0 4px 7px; }
/* El borde de un campo, en --borde-campo: con el --borde de los recuadros no llegaría a 3 (DATOS.md, 54.3.4). */
.entrada-texto { width: 100%; height: 54px; border-radius: 16px; border: 1.5px solid var(--borde-campo); background: var(--superficie); color: var(--texto); padding: 0 16px; font-size: 17px; font-weight: 400; }
.entrada-texto:focus { outline: none; border-color: var(--texto); }
.entrada-texto.oculto { -webkit-text-security: disc; } /* las claves: puntos, sin ser un campo de contraseña */
.entrada-texto.codigo { text-align: center; letter-spacing: 0.5em; font-size: 26px; font-weight: 700; padding-left: calc(16px + 0.5em); }
.error-campo { font-size: 12.5px; font-weight: 600; color: var(--error-texto); margin: 7px 4px 0; line-height: 1.35; }
.etiqueta-sec { font-size: 13px; font-weight: 600; color: var(--suave); margin: 18px 2px 9px; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- recargar */
.para { border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.para .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--superficie-2); flex: none; }
.para .datos { flex: 1; min-width: 0; }
.para small { display: block; font-size: 12px; font-weight: 600; color: var(--suave); margin-bottom: 4px; }
.para .con-prefijo { display: flex; align-items: center; gap: 8px; }
.para .prefijo { font-weight: 700; font-size: 17px; flex: none; }
.para input { flex: 1; min-width: 0; width: 100%; height: 40px; border: 0; border-bottom: 1.5px solid var(--borde-campo); background: transparent; color: var(--texto); font-size: 18px; font-weight: 700; padding: 0 2px; border-radius: 0; }
.para input:focus { outline: none; border-bottom-color: var(--texto); }
.recientes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.productos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.producto { border-radius: 18px; background: var(--superficie); padding: 11px 13px; border: 1px solid var(--borde); text-align: left; color: var(--texto); min-width: 0; }
.producto small { display: block; font-size: 12px; font-weight: 600; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto b { display: block; font-size: 15px; font-weight: 700; margin-top: 2px; }
.producto span { display: block; font-size: 13.5px; font-weight: 700; color: var(--suave); margin-top: 1px; }
.producto[aria-pressed="true"] { border-color: var(--elegido-borde); }
.producto[aria-pressed="true"] span { color: var(--acento-texto); }
.precio-grande { text-align: center; font-weight: 700; font-size: clamp(36px, 12vw, 46px); letter-spacing: -0.035em; margin: 16px 0 2px; line-height: 1.1; white-space: nowrap; }
.precio-nota { text-align: center; font-size: 13px; font-weight: 400; color: var(--suave); margin: 4px 8px 12px; }
.desde { border-radius: 18px; background: var(--superficie); border: 1px solid var(--borde); padding: 10px 12px; display: flex; align-items: center; gap: 11px; }
.desde > div { flex: 1; min-width: 0; }
.desde b { display: block; font-size: 14px; font-weight: 700; }
.desde small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.nota-gris { font-size: 12.5px; font-weight: 400; color: var(--suave); margin: 8px 6px 0; line-height: 1.4; }
.pie-fijo { position: sticky; bottom: 0; padding: 18px 0 calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--fondo) 28%); margin-top: 8px; z-index: 5; }

/* ---------------------------------------------------------------- resultado de una recarga */
.resultado { text-align: center; padding: 18px 4px 6px; }
.resultado .sello { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; margin: 6px auto 16px; }
.resultado .sello svg { width: 34px; height: 34px; }
.resultado .sello.hecha { background: var(--exito-fondo); color: var(--exito-texto); }
.resultado .sello.proceso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.resultado .sello.devuelta { background: var(--superficie-2); color: var(--texto); }
.resultado h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 8px; }
.resultado p { font-size: 14.5px; font-weight: 400; color: var(--suave); margin: 0 auto 10px; max-width: 34em; line-height: 1.5; }
.resultado p.fuerte { color: var(--texto); }
.resultado p.nota-ayuda { font-size: 13px; }
.ficha { border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 6px 16px; margin-top: 16px; }
.ficha .linea { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; font-size: 13.5px; }
.ficha .linea + .linea { border-top: 1px solid var(--borde); }
.ficha .linea span { color: var(--suave); font-weight: 600; flex: none; }
.ficha .linea b { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.botones { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------- pendientes */
.solicitud { border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 14px 15px; margin-top: 12px; }
.solicitud .s-cab { display: flex; align-items: flex-start; gap: 11px; }
.solicitud .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; }
.solicitud .ic svg { width: 18px; height: 18px; }
.solicitud .s-que { flex: 1; min-width: 0; }
.solicitud .s-que b { display: block; font-size: 14.5px; font-weight: 700; }
.solicitud .s-que small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); margin-top: 2px; overflow-wrap: anywhere; }
.solicitud .s-imp { font-size: 19px; font-weight: 700; white-space: nowrap; flex: none; }
.solicitud .s-imp.mas { color: var(--exito-texto); }
.solicitud .s-acciones { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; margin-top: 14px; }
.solicitud .s-acciones .boton { width: 100%; height: 46px; padding: 0 8px; font-size: 13.5px; }
.estado { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--superficie-2); color: var(--suave); white-space: nowrap; }
.estado.bien { background: var(--exito-fondo); color: var(--exito-texto); }
.estado.en-espera { background: var(--aviso-fondo); color: var(--aviso-texto); } /* no «.espera»: es la capa de «Enviando…» */

/* ---------------------------------------------------------------- perfil */
.bloque { margin-top: 16px; }
.bloque h2 { font-size: 13px; font-weight: 600; color: var(--suave); margin: 0 4px 9px; letter-spacing: 0.02em; }
.quien { display: flex; align-items: center; gap: 14px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 14px; margin-top: 8px; }
.quien .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); font-weight: 700; font-size: 17px; flex: none; }
.quien b { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.quien small { display: block; font-size: 13px; font-weight: 600; color: var(--suave); }
.version { text-align: center; font-size: 12px; font-weight: 400; color: var(--suave); margin-top: 26px; }

/* ---------------------------------------------------------------- entrada */
.entrada { max-width: 400px; margin: 0 auto; padding-top: 6vh; }
.entrada .logo-grande { height: 30px; display: block; margin: 0 0 30px; }
.entrada h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 8px; line-height: 1.15; }
.entrada p { font-size: 14.5px; font-weight: 400; color: var(--suave); margin: 0 0 6px; line-height: 1.5; }
.entrada .botones { margin-top: 22px; }
.entrada .mensaje { border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); padding: 12px 14px; font-size: 13.5px; font-weight: 400; margin: 0 0 18px; }
.entrada .nota-gris { margin-top: 22px; }

/* ---------------------------------------------------------------- capas: PIN, hojas, espera y avisos */
/* El teclado del PIN y las hojas, a la misma altura: la que se abre después queda encima (el aviso de la sesión que
   sale con el teclado del PIN abierto se ve y se puede usar; el teclado de debajo queda inerte). */
.capa-pin { position: fixed; inset: 0; z-index: 40; background: var(--fondo); overflow-y: auto; }
.capa-pin .dentro { max-width: 460px; margin: 0 auto; padding: 18px 18px 28px; min-height: 100%; }
.resumen { text-align: center; margin-top: 18px; }
.resumen small { display: block; font-size: 13px; font-weight: 600; color: var(--suave); }
.resumen b { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; }
.puntos { display: flex; justify-content: center; gap: 13px; margin: 28px 0 14px; }
.puntos i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--suave); }
.puntos i.lleno { background: var(--texto); border-color: var(--texto); }
.error-pin { min-height: 38px; text-align: center; font-size: 13px; font-weight: 600; color: var(--error-texto); margin: 0 8px 8px; line-height: 1.4; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.tecla { height: 58px; border-radius: 18px; background: var(--tecla); border: 1px solid var(--borde); display: grid; place-items: center; font-weight: 700; font-size: 22px; color: var(--texto); padding: 0; }
/* El destello de 140 ms al pulsar una cifra del PIN: el naranja con la letra negra. */
.tecla.pulsada { background: var(--naranja); border-color: var(--naranja); color: var(--sobre-naranja); }
.tecla.vacia { background: transparent; border-color: transparent; visibility: hidden; }
.tecla svg { width: 24px; height: 24px; }
.aviso-pin { text-align: center; font-size: 12.5px; font-weight: 400; color: var(--suave); margin-top: 18px; display: flex; gap: 6px; justify-content: center; align-items: center; }
.aviso-pin svg { width: 14px; height: 14px; flex: none; }

.velo { position: fixed; inset: 0; background: var(--velo); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
/* La hoja, en --superficie con un borde fino, como la del aviso de la muestra: lo que va dentro en un recuadro (el número,
   una ficha) pasa a --superficie-2, para que se distinga (DATOS.md, 54.3.2). */
.hoja { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: 28px 28px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-hoja); }
@media (min-width: 720px) {
  .velo { align-items: center; }
  .hoja { border-radius: 28px; }
}
.hoja h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.hoja p { font-size: 14px; font-weight: 400; color: var(--suave); line-height: 1.5; margin: 0 0 10px; }
.hoja p b { color: var(--texto); font-weight: 700; }
.hoja .numero { display: flex; align-items: center; gap: 12px; border-radius: 18px; background: var(--superficie-2); padding: 12px 14px; margin: 10px 0; }
.hoja .numero div { min-width: 0; }
.hoja .numero small { display: block; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.hoja .numero b { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.hoja button.numero { width: 100%; border: 1px solid var(--borde); text-align: left; color: var(--texto); }
.hoja .ficha { background: var(--superficie-2); }
/* Lo que se vuelve a pintar con la hoja abierta (la de una caja, la de un asiento): solo un envoltorio, sin caja propia. */
.hoja-viva { display: contents; }
.hoja dl { margin: 0; }
.hoja dt { font-size: 14.5px; font-weight: 700; margin-top: 14px; }
.hoja dd { margin: 4px 0 0; font-size: 13.5px; font-weight: 400; color: var(--suave); line-height: 1.5; }
/* El icono de aviso de una hoja (RP.p.hoja con «icono»: la diferencia de caja grande, 54.10.6), como en la muestra. */
.ic-aviso { width: 46px; height: 46px; border-radius: 15px; background: var(--aviso-fondo); color: var(--aviso-texto); display: grid; place-items: center; margin: 0 0 16px; }
.ic-aviso svg { width: 24px; height: 24px; }

.espera { position: fixed; inset: 0; z-index: 50; background: var(--velo); display: grid; place-items: center; padding: 24px; }
.espera .caja { max-width: 340px; border-radius: 26px; background: var(--fondo); border: 1px solid var(--borde); padding: 26px 22px; text-align: center; }
.espera .rueda { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--superficie-2); border-top-color: var(--texto); margin: 0 auto 16px; animation: girar 0.9s linear infinite; }
.espera b { display: block; font-size: 17px; font-weight: 800; }
.espera p { font-size: 13.5px; font-weight: 400; color: var(--suave); margin: 8px 0 0; line-height: 1.5; }

.avisos { position: fixed; left: 0; right: 0; top: 12px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 14px; }
.aviso { max-width: 420px; width: 100%; border-radius: 18px; background: var(--fuerte-fondo); color: var(--fuerte-texto); padding: 12px 16px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra-barra); line-height: 1.4; }
.aviso.mal { background: var(--error-fondo); color: var(--error-texto); }

.red { position: sticky; top: 0; z-index: 25; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 13px; font-weight: 600; text-align: center; padding: 9px 14px; line-height: 1.4; }

.cargando { text-align: center; color: var(--suave); font-size: 14px; font-weight: 400; padding: 40px 0; }
.cargando::before { content: ''; display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--superficie-2); border-top-color: var(--texto); margin: 0 auto 12px; animation: girar 0.9s linear infinite; }
.caja-error { border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 18px 16px; margin-top: 14px; text-align: center; }
.caja-error b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.caja-error p { font-size: 13.5px; font-weight: 400; color: var(--suave); margin: 0 0 14px; line-height: 1.5; }

/* ---------------------------------------------------------------- la oficina: operador, supervisor y contable */
/* Las mismas piezas de la lámina (superficies redondeadas, píldoras, letra Mont), algo más densas. Nada de tablas:
   en el móvil no caben; cada dato va en una fila que puede partirse en dos líneas sin cortar nada. */
/* «Hola, Sara»: un saludo no es un titular (DATOS.md, 54.4): SemiBold, como en la muestra. */
.saludo { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 2px 4px; line-height: 1.15; }
.nota-oficina { border-radius: 18px; background: var(--superficie-2); padding: 11px 14px; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 10px 0 2px; }
.nota-oficina b { font-weight: 700; }

.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.baldosa { border: 1px solid var(--borde); border-radius: 22px; background: var(--superficie); color: var(--texto); padding: 13px 14px; text-align: left; display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 112px; }
.baldosa .b-cab { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.baldosa .b-cab svg { width: 16px; height: 16px; flex: none; }
/* text-wrap: pretty, para que a 360 px una unidad («US$», «%.») no se quede sola en la última línea */
.baldosa b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; text-wrap: pretty; }
.baldosa small { display: block; font-size: 12px; font-weight: 400; color: var(--suave); line-height: 1.35; overflow-wrap: anywhere; text-wrap: pretty; }
.baldosa.bien b { color: var(--exito-texto); }
.baldosa.mal b { color: var(--error-texto); }
/* Desde la v2: una baldosa de algo que todavía no está puesto (el aviso de Ding sin cifra, la copia fuera sin ninguna) */
.baldosa.gris b { color: var(--suave); }
/* Y una nota en rojo (una clave que Ding o elTOQUE no aceptan) */
.nota-oficina.mal { background: var(--error-fondo); color: var(--error-texto); }

.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
/* Las rejillas (54.5.9), para todas las funciones: las baldosas, en 2 columnas, 3 desde 720 px y 4 desde 1360; la
   rejilla de dos, desde 1024; las tarjetas, en 2 desde 720. Desde 1024, «Hola, Sara» no sale: el nombre está en el menú. */
@media (min-width: 720px) {
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pila > :not(.tarjeta) { grid-column: 1 / -1; }
  .saludo { font-size: 30px; }
}
@media (min-width: 1024px) {
  .rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rejilla > .ancho-entero { grid-column: 1 / -1; }
  .app.con-lado .saludo { display: none; }
}
@media (min-width: 1360px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fila { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; width: 100%; }
.fila + .fila { border-top: 1px solid var(--borde); }
button.fila { border: 0; border-radius: 0; background: none; color: var(--texto); text-align: left; }
.fila .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; color: var(--texto); }
.fila .ic svg { width: 17px; height: 17px; }
.fila .que { flex: 1; min-width: 0; }
.fila .que b { display: block; font-size: 13.5px; font-weight: 700; overflow-wrap: break-word; line-height: 1.35; }
.fila .que small { display: block; font-size: 12px; font-weight: 400; color: var(--suave); overflow-wrap: break-word; margin-top: 2px; line-height: 1.4; }
/* Una etiqueta larga («Corrige RP-A-…», los avisos de una recarga): debajo del texto, no en la columna estrecha de los
   importes, donde a 360 px no cabía y se montaba sobre el texto. */
.fila .que .marca-fila { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fila .que .marca-fila .estado { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.fila .der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; max-width: 46%; }
.fila .imp { font-weight: 700; font-size: 14px; white-space: nowrap; }
.fila .der small { font-size: 12px; font-weight: 400; color: var(--suave); white-space: nowrap; }
.fila .imp.mas { color: var(--exito-texto); }
.fila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.fila-acciones .accion.en-linea { flex-wrap: wrap; }
.estado.mal { background: var(--error-fondo); color: var(--error-texto); }

.formulario { margin-top: 4px; }
.dos-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 560px) { .dos-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.entrada-texto.area { height: auto; min-height: 88px; padding: 12px 16px; resize: vertical; line-height: 1.45; font-size: 15px; }
.entrada-texto:disabled { background: var(--gris-fondo); color: var(--gris-texto); border-color: transparent; }
.entrada-texto.mayusculas { text-transform: uppercase; }
.entrada-texto.mayusculas::placeholder { text-transform: none; }
.selector, .campo > .selector { position: relative; display: block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.selector select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; }
.selector .flecha { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: var(--suave); }
.ayuda-campo { font-size: 12.5px; font-weight: 400; color: var(--suave); margin: 7px 4px 0; line-height: 1.4; }
.ayuda-campo.fuerte { color: var(--texto); }

.cifra { font-size: clamp(24px, 7.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; margin: 2px 0; }
.cifra small { font-size: 0.6em; font-weight: 700; margin-left: 4px; }
.panel .cab .estado { flex: none; }
/* Una ficha dentro de un recuadro (o de un comprobante) va sin su propio recuadro. */
.panel .ficha { background: none; border: 0; padding: 0; margin-top: 4px; }
.panel .pie-panel { padding: 4px 0 6px; }

.lista-problemas { margin: 6px 0 4px; padding: 0 0 0 18px; }
.lista-problemas li { font-size: 13px; font-weight: 400; margin: 5px 0; line-height: 1.45; overflow-wrap: anywhere; }
.huella { font-size: 12px; font-weight: 400; color: var(--suave); overflow-wrap: anywhere; margin: 6px 2px 0; line-height: 1.4; }
.resultado.chico { padding-top: 6px; }
.resultado.chico .sello { width: 60px; height: 60px; margin-bottom: 10px; }
.resultado.chico .sello svg { width: 28px; height: 28px; }
.resultado.chico h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.resultado .sello.mal { background: var(--error-fondo); color: var(--error-texto); }

/* ---------------------------------------------------------------- tercera parte (DATOS.md, apartados 13 a 17) */
/* Una nota de ayuda suelta (fuera de un resultado o de una hoja, que ya llevan la suya). */
.nota-ayuda { font-size: 13px; font-weight: 400; color: var(--suave); line-height: 1.45; margin: 8px 2px 0; }
.nota-ayuda b { color: var(--texto); font-weight: 700; }

/* Elegir una opción con su explicación (qué se propone con una recarga): como un producto de «Recargar», la elegida con
   el borde de lo elegido; en gris, con su motivo debajo (la pieza RP.p.opcion). */
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion { width: 100%; border: 1px solid var(--borde); border-radius: 18px; background: var(--superficie); color: var(--texto); padding: 11px 13px; display: flex; align-items: flex-start; gap: 11px; text-align: left; }
.opcion .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; }
.opcion .ic svg { width: 16px; height: 16px; }
.opcion .que { flex: 1; min-width: 0; }
.opcion b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.opcion small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); margin-top: 3px; line-height: 1.4; overflow-wrap: break-word; }
.opcion[aria-pressed="true"] { border-color: var(--elegido-borde); }
.opcion:disabled { background: var(--gris-fondo); border-color: transparent; color: var(--gris-texto); }
.opcion:disabled small, .opcion:disabled .ic { color: var(--gris-texto); }
.opcion-caja .motivo { text-align: left; }

/* Una propuesta que espera a otro supervisor: qué, de qué recarga, quién, por qué y sus tres botones (cada uno, en gris,
   con su motivo al lado o debajo). */
.propuesta { padding: 12px 0; }
.propuesta + .propuesta { border-top: 1px solid var(--borde); }
.propuesta .p-cab { display: flex; align-items: flex-start; gap: 11px; }
.propuesta .p-cab .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; }
.propuesta .p-cab .ic svg { width: 17px; height: 17px; }
.propuesta .p-que { flex: 1; min-width: 0; }
.propuesta .p-que b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.propuesta .p-que small { display: block; font-size: 12px; font-weight: 400; color: var(--suave); margin-top: 2px; line-height: 1.4; overflow-wrap: break-word; }
.propuesta .p-cab .estado { flex: none; }
.propuesta .cita { font-size: 13px; font-weight: 400; line-height: 1.45; margin: 9px 0 0; overflow-wrap: anywhere; }
.propuesta .p-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.propuesta .p-acciones .accion.en-linea { flex-wrap: wrap; row-gap: 4px; }
@media (min-width: 1024px) {
  .propuesta .p-acciones { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
}

/* Una fila con una acción debajo, a todo lo ancho (alineada con el texto): «Proponer una solución» en «Para revisar». */
.fila.con-pie { flex-wrap: wrap; }
.fila .pie-fila { flex: 1 0 100%; padding-left: 49px; min-width: 0; }
.fila .pie-fila .accion.en-linea { flex-wrap: wrap; row-gap: 4px; }

/* Dentro de un panel, el selector de dos opciones («¿Recuerda su PIN?») va sobre el tono de al lado (si no, no se ve). */
.panel .segmentos { background: var(--superficie-2); }

/* La ficha de una persona en «Dar de baja». */
.ficha-persona { margin-top: 14px; border-radius: 18px; background: var(--superficie-2); padding: 12px 14px 4px; }
.ficha-persona .cab { margin-bottom: 0; }
.ficha-persona .ficha .linea + .linea { border-top-color: var(--borde); }

/* En una hoja, lo que se explica después de una ficha va algo separado de ella. */
.hoja .ficha + p { margin-top: 14px; }

/* El aviso «Tu sesión se cerrará en 2 minutos»: lo que queda, grande. */
.hoja p.cuenta-atras { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--texto); text-align: center; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- v2: la entrada, el cliente y el operador (DATOS.md, 46) */
/* El mensaje de la entrada (con el enlace a la otra dirección si se salió por SITIO_EQUIVOCADO) y la línea de debajo. */
.entrada .mensaje p { color: var(--texto); font-size: 13.5px; margin: 0; }
.entrada .mensaje p + p { margin-top: 8px; }
.entrada .otra-direccion { margin-top: 14px; }
a.enlace { padding: 0; }

/* «Antes de empezar»: las condiciones y la privacidad, en texto llano; el borrador, en un recuadro. */
.recuadro-borrador { border-radius: 16px; background: var(--aviso-fondo); color: var(--aviso-texto); padding: 12px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.45; margin: 10px 0 4px; }
.version-textos { margin: 0 2px 4px; }
.documento { margin-top: 18px; }
.documento h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 0 2px 8px; }
.documento h3 { font-size: 14.5px; font-weight: 800; margin: 16px 2px 6px; line-height: 1.35; }
.documento p { font-size: 14px; font-weight: 400; color: var(--suave); line-height: 1.55; margin: 0 2px 8px; overflow-wrap: break-word; }
.documento p.punto-lista { padding-left: 14px; text-indent: -14px; }


/* Un movimiento que se toca (una devolución entregada, para ver su comprobante). */
button.mov { width: 100%; border: 0; border-radius: 0; background: none; color: var(--texto); text-align: left; padding: 8px 0; }

/* «Otro país» en «Recargar móvil»: la lista con su buscador. */
.lista-paises { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pais { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--borde); border-radius: 18px; background: var(--superficie); color: var(--texto); padding: 10px 12px; text-align: left; }
.pais[aria-pressed="true"] { border-color: var(--elegido-borde); }
.pais .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--superficie-2); flex: none; }
.pais .que { flex: 1; min-width: 0; }
.pais b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: break-word; }
.pais small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }

/* Una devolución aprobada: «Entrega 20,00 € al cliente», en grande. Es sobre todo una cifra: Bold, no Black (54.4). */
.resultado h1.entrega { font-size: 30px; font-weight: 700; line-height: 1.15; }
.solicitud .nota-ayuda { margin: 10px 2px 0; }
.solicitud .botones { margin-top: 12px; }

/* El comprobante de una devolución. */
.comprobante { border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); padding: 18px 16px 10px; margin-top: 6px; }
.comprobante .logo-grande { height: 26px; display: block; margin: 0 0 14px; }
.comprobante h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.cifra-comprobante { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 6px; white-space: nowrap; }
.comprobante .ficha { background: none; border: 0; padding: 0; margin-top: 6px; }

/* El estado de un movimiento que espera algo (una devolución esperando a un supervisor), en su propia línea: se parte si
   no cabe, pero no se corta (revisión de la v2: a 390 px salía «Devolución en efectivo (esp…»). */
.mov small.estado-mov { white-space: normal; overflow: visible; text-overflow: clip; color: var(--texto); }

/* ---------------------------------------------------------------- las listas en columnas (DATOS.md, 54.5.11) */
/* Una sola lista: hasta 1023 px, en filas, exactamente como siempre; desde 1024 px con el menú, en columnas con su fila de
   cabecera (RP.p.cabTabla, solo para la vista). La línea pequeña de debajo del título va en trozos (RP.p.trozos), cada
   uno en su <span data-col>, con su « · » en .sep: en el móvil dice lo mismo que siempre; en el ordenador cada trozo va a
   su columna y los de «Qué» se apilan debajo del título. Las columnas de cada lista se escriben una vez aquí, con sus
   líneas con nombre (.t-<lista>), y cada fila las toma con subgrid, para que se alineen con la cabecera. Sin subgrid (un
   navegador viejo), la lista sigue en filas también en el ordenador. */
.tabla-cab { display: none; }
.imps { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
/* En filas, los trozos de la línea pequeña no tienen caja propia: la línea es la de siempre (también el «…» de la de un
   movimiento, que corta la línea entera, no un trozo). */
small [data-col], small .sep { display: contents; }
/* El estado de un movimiento: en el móvil, texto en la línea pequeña (como siempre); en el ordenador, su etiqueta. */
/* (sin caja propia, como los trozos: así el «…» de la línea lo corta con ella) */
.estado.texto-movil, .estado.texto-movil.bien, .estado.texto-movil.en-espera, .estado.texto-movil.mal { display: contents; background: none; color: inherit; padding: 0; border-radius: 0; font: inherit; white-space: inherit; }
@supports (grid-template-columns: subgrid) {
  @media (min-width: 1024px) {
    .app.con-lado .t-mov, .app.con-lado .t-ultimas, .app.con-lado .t-solicitudes { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [estado] auto [importe] auto; }
    .app.con-lado .t-libro { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [quien] auto [importe] auto; }
    .app.con-lado .t-registro { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [quien] auto; }
    .app.con-lado .t-decididas { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [propuso] auto [decidio] auto [cuando] auto [estado] auto; }
    .app.con-lado .t-recargas { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [estado] auto [precio] auto; }
    .app.con-lado .t-cajas-abiertas { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [importe] auto; }
    .app.con-lado .t-cajas-cerradas { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [contado] auto [importe] auto [estado] auto; }
    .app.con-lado .t-cambio { grid-template-columns: [ic] 38px [que] minmax(180px, 1fr) [cuando] auto [estado] auto; }
    .app.con-lado .tabla { display: grid; column-gap: 16px; }
    .app.con-lado .tabla > * { grid-column: 1 / -1; min-width: 0; }
    /* column-gap: normal, el de la lista: con el de las filas (11 px) las columnas se correrían frente a la cabecera */
    .app.con-lado .tabla > .tabla-cab,
    .app.con-lado .tabla > .fila,
    .app.con-lado .tabla > .mov { display: grid; grid-template-columns: subgrid; column-gap: normal; row-gap: 2px; align-items: center; }
    /* La cabecera: los nombres de las columnas, como .tabla th de la muestra. */
    .app.con-lado .tabla > .tabla-cab { padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; color: var(--tenue); line-height: 1.3; }
    /* Cada fila, como .tabla td de la muestra: 13 px de relleno y una línea debajo (la de antes de la siguiente). */
    .app.con-lado .tabla > .fila, .app.con-lado .tabla > .mov { padding: 13px 0; }
    .app.con-lado .tabla .que,
    .app.con-lado .tabla .der,
    .app.con-lado .tabla .que > small:not([data-col]) { display: contents; }
    .app.con-lado .tabla .ic { grid-column: ic; grid-row: 1 / span 2; align-self: center; }
    /* «Qué»: el título y, debajo, sus trozos, que se parten en líneas si no caben (nada se corta con «…»). */
    .app.con-lado .tabla .que > b { grid-column: que; grid-row: 1; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
    /* Cada celda, a la izquierda (la de .der, a la derecha, no pasa a las celdas) y sin partir (cifras, códigos, fechas);
       las de «Qué» y los nombres, abajo, sí se parten. */
    .app.con-lado .tabla [data-col] { text-align: left; white-space: nowrap; }
    .app.con-lado .tabla [data-col="que"],
    .app.con-lado .tabla .que > .marca-fila { grid-column: que; white-space: normal; overflow-wrap: break-word; }
    .app.con-lado .tabla .que > small[data-col],
    .app.con-lado .tabla small [data-col] { display: block; }
    .app.con-lado .tabla .pie-fila { grid-column: que / -1; padding-left: 0; }
    /* Las demás columnas: en la línea del título. */
    .app.con-lado .tabla [data-col]:not([data-col="que"]) { grid-row: 1; align-self: center; }
    .app.con-lado .tabla [data-col="cuando"] { grid-column: cuando; }
    .app.con-lado .tabla [data-col="estado"] { grid-column: estado; }
    .app.con-lado .tabla [data-col="importe"] { grid-column: importe; text-align: right; }
    .app.con-lado .tabla [data-col="precio"] { grid-column: precio; text-align: right; }
    .app.con-lado .tabla [data-col="contado"] { grid-column: contado; text-align: right; white-space: normal; } /* «contado 1,00 € y 0,00 US$»: cada cifra entera */
    .app.con-lado .tabla [data-col="quien"] { grid-column: quien; white-space: normal; }
    .app.con-lado .tabla [data-col="propuso"] { grid-column: propuso; white-space: normal; }
    .app.con-lado .tabla [data-col="decidio"] { grid-column: decidio; white-space: normal; }
    .app.con-lado .tabla .imps { align-items: flex-end; }
    .app.con-lado .tabla .sep { display: none; }
    .app.con-lado .tabla .imp { white-space: nowrap; }
    /* El estado de una etiqueta larga («Esperando a un supervisor») puede ir en dos líneas, dentro de su etiqueta. */
    .app.con-lado .tabla [data-col="estado"] .estado { white-space: normal; max-width: 13em; }
    .app.con-lado .tabla .estado.texto-movil { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--superficie-2); color: var(--suave); }
    .app.con-lado .tabla .estado.texto-movil.bien { background: var(--exito-fondo); color: var(--exito-texto); }
    .app.con-lado .tabla .estado.texto-movil.en-espera { background: var(--aviso-fondo); color: var(--aviso-texto); }
    .app.con-lado .tabla .estado.texto-movil.mal { background: var(--error-fondo); color: var(--error-texto); }
  }
}

/* ---------------------------------------------------------------- el icono de la app y la tarjeta elegida */
/* El icono de la entrada de los clientes (54.6): un cuadrado de 104 × 104 con la R en plata (o, en la pantalla del
   código, el sobre en la letra naranja pequeña, con el trazo más fino). Sin los efectos, un recuadro más. */
.icono-app { position: relative; width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; margin: 0 0 26px; background: var(--superficie); border: 1px solid var(--borde); }
.icono-app .logo-par { height: 56px; }
.icono-app svg { width: 44px; height: 44px; color: var(--acento-texto); stroke-width: 1.4; }

/* ---------------------------------------------------------------- los efectos: solo en lo de los clientes (DATOS.md, 54.6) */
/* Solo con #app[data-efectos="si"] (la función cliente, o la entrada fuera de la dirección de la oficina). El brillo, una
   capa fija detrás de todo, sin filtros ni animaciones: nunca alarga la página ni la saca de lado. El cristal, una regla
   por pieza y sin :is() (así cada pieza pesa lo mismo al encender y al apagar, y gana la de después). Como mucho cinco
   piezas con desenfoque a la vez, todas pequeñas. Sobre el brillo, solo --texto o --suave; sobre el cristal del inicio,
   que puede quedar encima del brillo, solo --texto (54.3.4). Se apagan solos al final del archivo. */
.app[data-efectos="si"][data-brillo]::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.app[data-efectos="si"][data-brillo="abajo"]::before { background: radial-gradient(90% 30% at 50% 88%, var(--brillo), transparent); }
.app[data-efectos="si"][data-brillo="arriba"]::before { background: radial-gradient(80% 27.5% at 50% 5.5%, var(--brillo), transparent); }
@media (min-width: 1024px) {
  .app.con-lado[data-efectos="si"][data-brillo="arriba"]::before { background: radial-gradient(28% 35% at 80% 5%, var(--brillo-ancho), transparent); }
}
.app[data-efectos="si"] .promo,
.app[data-efectos="si"] .aviso-arriba,
.app[data-efectos="si"] .icono-app {
  background: var(--cristal-fondo); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.app[data-efectos="si"] .promo span,
.app[data-efectos="si"] .aviso-arriba small { color: var(--texto); }
.app[data-efectos="si"] .tarjeta.t-personal-eur,
.app[data-efectos="si"] .tarjeta.t-personal-usd {
  border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
/* El brillo de la esquina, del tamaño y en el sitio de la muestra (220 × 200, que sale 60 px por la derecha y 70 por
   arriba, y la tarjeta lo corta), con el cristal debajo. */
.app[data-efectos="si"] .tarjeta.t-personal-eur { background: radial-gradient(closest-side, var(--t-brillo-eur), transparent) right -60px top -70px / 220px 200px no-repeat, var(--cristal-fondo); }
.app[data-efectos="si"] .tarjeta.t-personal-usd { background: radial-gradient(closest-side, var(--t-brillo-usd), transparent) right -60px top -70px / 220px 200px no-repeat, var(--cristal-fondo); }
.app[data-efectos="si"] .barra { background: var(--barra-cristal); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.app[data-efectos="si"] .icono-app::before { content: ''; position: absolute; inset: -60px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--brillo), transparent); }
/* La tarjeta elegida en el inicio del ordenador (54.5.12), con el borde de lo elegido: va después del cristal, pesa lo
   mismo y le gana (y no es un efecto: también sin ellos). */
.tarjeta[aria-pressed="true"],
.app[data-efectos] .tarjeta[aria-pressed="true"] { border: 1px solid var(--elegido-borde); }

/* Se apagan solos (54.6): donde el navegador no dibuja el desenfoque, o cuando la persona pide menos movimiento o menos
   transparencia. Queda el negro liso, que se entiende igual. Van al final: pesan lo mismo que las de encender y ganan
   por ir después. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app[data-efectos="si"] .promo,
  .app[data-efectos="si"] .aviso-arriba,
  .app[data-efectos="si"] .icono-app { background: var(--superficie); border-color: var(--borde); }
  .app[data-efectos="si"] .tarjeta.t-personal-eur { background: var(--t-personal-eur); }
  .app[data-efectos="si"] .tarjeta.t-personal-usd { background: var(--t-personal-usd); }
  .app[data-efectos="si"] .barra { background: var(--barra); }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  .app[data-efectos="si"] .promo,
  .app[data-efectos="si"] .aviso-arriba,
  .app[data-efectos="si"] .icono-app { background: var(--superficie); border-color: var(--borde); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app[data-efectos="si"] .tarjeta.t-personal-eur { background: var(--t-personal-eur); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app[data-efectos="si"] .tarjeta.t-personal-usd { background: var(--t-personal-usd); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app[data-efectos="si"] .barra { background: var(--barra); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app[data-efectos="si"][data-brillo]::before,
  .app[data-efectos="si"] .icono-app::before { content: none; }
}

/* Al imprimir (el comprobante): en blanco y negro (los colores, en colores.css), sin la barra, los botones ni los avisos;
   desde la v3 (DATOS.md, 54.8), tampoco el menú de la izquierda, la fila de arriba ni la miga, y sin el hueco del menú. El
   logo, el claro (RP.p.logo: oscuro sobre el papel blanco). */
@media print {
  .barra, .botones, .arriba, .avisos, .red, #capas, .lado, .arriba-ancha, .miga { display: none !important; }
  body { padding: 0; }
  .app, .app.con-lado { max-width: none; min-height: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .app.con-lado, .cuerpo { margin-left: 0 !important; }
  /* sin el borde de la pantalla (revisión de la v3, 55.4): en el papel, sin marco, como en la v2 */
  .comprobante { padding: 0; border: 0; border-radius: 0; }
  img { filter: grayscale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}