/* /Paneles/App.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA ARMAZÓN — lo que este componente dibuja y nadie más.

   ⚠ TODO LO QUE ESTÁ ACÁ ES DEL SHELL. Las clases compartidas (`.panel` `.cuerpo` `.barra` `.btn`
   `.hoja` `.t-*` `.vacio`) viven en `wwwroot/css/app.css` y no se tocan desde acá: siete caras
   escribiendo un CSS común es la receta del choque. Lo de una cara va en SU `.razor.css`.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ LA CABECERA ═══════════════════════════════════════════════════════════════════════════════
   ⚠ EL RELLENO DE ARRIBA SUMA EL `safe-area`, Y EN MAUI NO HACE FALTA. Allá la ventana no dibuja
   debajo de la barra de estado; acá sí — `index.html` declara `viewport-fit=cover` y
   `apple-mobile-web-app-status-bar-style: black-translucent`, o sea que la app instalada ocupa la
   franja del reloj. Sin este `env()`, el saludo queda debajo de la hora en todo iPhone sin botón. */
.cabecera[b-jybv1cjde6] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 10px;
  /* ⚠ `flex: none` en las tres piezas fijas del panel. `.panel` es una columna flex y `.cuerpo` se
     lleva el resto con `flex: 1`; un ítem flex ENCOGE por defecto, así que con una lista muy larga
     el navegador puede recortar la cabecera y la barra antes que el contenido. Se ve como «se me
     movió el título» y no tiene otra explicación a la vista. Estas reglas viven acá y no en
     `app.css` porque son de la ARMAZÓN: el CSS con alcance sólo alcanza a los elementos de este
     componente, así que no le tocan la barra a nadie más. */
  flex: none;
}

.barra[b-jybv1cjde6] { flex: none; }

.cabecera__quien[b-jybv1cjde6] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Los 12 px que en MAUI son el `ColumnSpacing` entre el texto y el grupo de la derecha. */
  margin-inline-end: 8px;
}

/* El `<h1>` del título: sin esto arrastra el margen del navegador y descuadra la fila entera. */
.cabecera__quien h1[b-jybv1cjde6] { margin: 0; }

/* ⚠ 48×48 Y NO EL TAMAÑO DEL DIBUJO. El ícono mide 22; el área que responde al dedo tiene que ser
   la del pulgar. Es el mismo `Grid WidthRequest=48` que envuelve al ícono en el XAML. */
.cabecera__toque[b-jybv1cjde6] {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.cabecera__toque:disabled[b-jybv1cjde6] { cursor: default; }

/* ⚠ LA VUELTA DEL ÍCONO ES LA ÚNICA SEÑA DE QUE ALGO ESTÁ PASANDO. En MAUI el refresco tarda lo
   mismo y no avisa; acá gira mientras `Cargando` está en alto, que es el tercer desenlace dicho con
   el único elemento que ya estaba en pantalla. `::deep` porque el `<svg>` es de otro componente. */
.cabecera[b-jybv1cjde6]  .gira { animation: gira-b-jybv1cjde6 1s linear infinite; }

@keyframes gira-b-jybv1cjde6 { to { transform: rotate(360deg); } }

/* ══ EL AVATAR — la única puerta a Cuenta ═════════════════════════════════════════════════════ */
.avatar[b-jybv1cjde6] {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--primario-tinte);
  /* ⚠ `--primario` Y NO `--primario-fuerte`, Y ES UNA MEDICIÓN, NO UN GUSTO. El par
     `--primario-fuerte` sobre `--primario-tinte` da 7.25:1 en claro y **4.08:1 en OSCURO** — debajo
     del AA de 4.5 que el resto de la paleta sí cumple. Se ve a simple vista mirando la app en
     oscuro: las iniciales quedan lavadas sobre el disco.

     Medidos los tres candidatos sobre `--primario-tinte` (claro / oscuro):
       --primario-fuerte  7.25 / 4.08 ✗     ← lo que había
       --primario         5.00 / 5.50 ✓     ← esto
       --texto           13.26 / 7.28 ✓     pero pierde la marca: iniciales grises en un disco rosa

     ⚠ NO SE TOCÓ `tema.css`, a propósito: sus hexes están medidos uno por uno y cambiar uno para
     arreglar UN par rompería los otros usos. Lo que estaba mal no era un color, era CUÁL de los dos
     elegía este componente. `--primario` sobre `--primario-tinte` es además el par canónico de MD3
     (`onPrimaryContainer` sobre `primaryContainer`), que es el que da vuelta bien con el modo. */
  color: var(--primario);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* ⚠ CUENTA NO TIENE PESTAÑA, ASÍ QUE LA BARRA NO PUEDE DECIR QUE ESTÁS AHÍ. Sin esta marca, estando
   en «Mi cuenta» los cinco íconos de abajo se ven apagados y la app parece no estar en ningún lado.
   El anillo lo dice donde corresponde: en el botón por el que se entró. */
.avatar--activo[b-jybv1cjde6] {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

/* ══ LAS DOS CARAS DE UNA PESTAÑA ══════════════════════════════════════════════════════════════
   Pestañas SUBRAYADAS y no una píldora: una píldora dice «opción entre pares» y encima del segmento
   de «Vigentes | Guardados | Archivo» daba dos controles idénticos apilados, que no son del mismo
   nivel — el de arriba cambia de QUÉ se habla, el de abajo filtra DENTRO de eso. */
.segmento[b-jybv1cjde6] {
  flex: none;
  display: flex;
  padding: 0 20px;
}
.segmento__item[b-jybv1cjde6] {
  flex: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: var(--tenue);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
/* ⚠ LA RAYA INACTIVA ES LA LÍNEA DE BASE, NO UN HUECO: sin ella el rótulo activo parece colgado y
   los dos saltan de lugar al cambiar de cara. */
.segmento__raya[b-jybv1cjde6] {
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--borde);
}
.segmento__item--activo[b-jybv1cjde6] { color: var(--primario-fuerte); font-weight: 700; }
.segmento__item--activo .segmento__raya[b-jybv1cjde6] { background: var(--primario-fuerte); }

/* ══ EL GESTO CENTRAL, ELEVADO ═════════════════════════════════════════════════════════════════
   ⚠ EN ANDROID ESTE BOTÓN NO PUEDE VIVIR ADENTRO DE LA BARRA Y ACÁ SÍ, y la diferencia vale
   escribirla porque el comentario de MAUI dice lo contrario con razón: allá el sistema no entrega
   los toques que caen fuera de los límites del padre, así que la mitad que sobresale es decorativa
   —un toque en el centro del botón abría la pestaña de al lado— y hubo que colgarlo del Grid raíz.
   En web el impacto no se recorta al padre: un elemento posicionado que se sale de su caja sigue
   recibiendo el toque entero mientras nadie declare `overflow:hidden`. Por eso acá se ancla en su
   propia columna, que además lo deja centrado SOBRE SU CELDA.

   ⚠ Y ESO ARREGLA UN DEFECTO REAL DEL ORIGINAL. MAUI centra el botón contra la PANTALLA, no contra
   la columna del gesto; el `.jshell` de `consumoregional` declara SEIS columnas (cinco pestañas más
   el gesto), y con seis el centro de la pantalla cae en el BORDE entre la tercera y la cuarta. Acá
   no puede pasar: el ancla es la celda. */
.barra__gesto[b-jybv1cjde6] {
  flex: 1;
  position: relative;
}

.escanear[b-jybv1cjde6] {
  position: absolute;
  left: 50%;
  top: 0;
  /* El centro del círculo, exactamente sobre la línea de arriba de la barra. */
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  /* El aro del color del piso: es lo que separa el círculo de la barra sin dibujar una sombra. */
  border: 4px solid var(--superficie);
  background: var(--primario);
  color: var(--sobre-primario);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.escanear:active[b-jybv1cjde6] { opacity: .85; }

/* ⚠ EL HUECO QUE DEJA EL BOTÓN, PEDIDO POR SU NOMBRE. `app.css` reserva
   `calc(16px + var(--alto-barra, 0px) + safe-area)` al pie de `.cuerpo`; la barra es un hermano y no
   lo necesita, pero la MITAD DE ARRIBA del círculo flota sobre el contenido. Sin estos 34 px, la
   última fila de toda lista queda debajo del botón y no se puede tocar. Va sólo cuando el botón
   existe: una marca sin CompraGana no tiene por qué perder 34 px. */
.app--gesto[b-jybv1cjde6] { --alto-barra: 34px; }

/* ══ LAS CAPAS DE LAS CARAS ════════════════════════════════════════════════════════════════════
   El detalle de un premio, una publicación del bazar: una cara los dibuja con
   `<div class="panel capa">` y quedan encima de todo.

   ⚠ EL `z-index` ES OBLIGATORIO Y POR ESO LO PONE EL SHELL Y NO CADA CARA. La barra viene DESPUÉS
   de `.cuerpo` en el documento, así que sin esto se dibujaría ENCIMA del detalle a pantalla completa
   — y peor que verse mal: sus botones seguirían recibiendo los toques. Se define acá, una vez, para
   que las siete caras no tengan que acordarse. `::deep` alcanza a la marca de una cara porque
   `.cuerpo` sí es un elemento de este componente. */
.cuerpo[b-jybv1cjde6]  .capa { z-index: 20; }

/* ══ EL CANDADO ════════════════════════════════════════════════════════════════════════════════ */
.candado__centro[b-jybv1cjde6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 36px;
  text-align: center;
}
.candado__disco[b-jybv1cjde6] {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
}
.candado__titulo[b-jybv1cjde6] { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; }
.candado__texto[b-jybv1cjde6] { margin: 0; line-height: 1.5; }
.candado__pie[b-jybv1cjde6] {
  padding: 0 28px calc(44px + env(safe-area-inset-bottom, 0px));
}

/* ══ EL ESCÁNER (el hueco) ═════════════════════════════════════════════════════════════════════ */
.escaner__barra[b-jybv1cjde6] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px 12px;
}

/* ══ EL SELECTOR DE APLICATIVO ═════════════════════════════════════════════════════════════════
   ⚠ TODO LO DE ACÁ ES NUEVO Y NADA TOCA EL TEMA. No hay un solo hex: los cuatro colores salen de
   los tokens que `wwwroot/css/tema.css` ya define, así que la tanda que le dé a cada programa su
   tono no tiene que volver por este bloque — le va a cambiar los tokens y esto la sigue. */

/* La flecha del botón de la cabecera apunta ABAJO: es un menú que se despliega, no un «siguiente».
   Se rota el mismo glifo en vez de agregar una geometría al catálogo — dos dibujos para la misma
   figura son dos cosas que después nadie sabe cuál usar. */
.cabecera__cambiar[b-jybv1cjde6]  .ico { transform: rotate(90deg); }

.selector__nota[b-jybv1cjde6] { margin: 0 0 4px; line-height: 1.45; }

/* ⚠ ES UN `.hoja` Y NO UN `.btn`: cada renglón es una TARJETA con dos líneas, no una acción. La
   clase compartida trae el fondo, el radio y el borde; acá sólo va lo que la vuelve una fila
   tocable. */
.selector__item[b-jybv1cjde6] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  color: var(--texto);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.selector__item:active[b-jybv1cjde6] { opacity: .85; }

.selector__quien[b-jybv1cjde6] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* EL QUE ESTÁ PUESTO. ⚠ Se marca con un ANILLO y no cambiándole el fondo: el fondo de `.hoja` es el
   mismo token que usa media app, y pisarlo acá haría que la fila puesta se leyera como deshabilitada
   en oscuro. El anillo dice «éste» sin discutirle nada al tema. */
.selector__item--puesto[b-jybv1cjde6] {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
  color: var(--primario-fuerte);
}
/* /Paneles/Caras/Bazar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE LA CARA «BAZAR» — CSS con alcance de componente.

   ⚠ ACÁ NO SE DEFINE UN SOLO COLOR: todo sale de los tokens de `tema.css`, cuyos contrastes están
   MEDIDOS (el `--sutil` subió a #806F71 porque el anterior daba 4.48:1 contra el AA de 4.5, y los
   cinco acentos de sección comparten lightness y chroma en OKLCH variando sólo el matiz). Un hex
   «ajustado a ojo» acá deshace una medición ya pagada.

   ⚠ EL ACENTO DE ESTA SECCIÓN ES `--seccion-bazar` Y NO `--primario`, y es una divergencia
   deliberada contra MAUI: allá todo era magenta porque no había otro acento, y `tema.css` explica
   por qué eso se cambió — «hasta el 2026-08-30 el magenta hacía todos los trabajos, y ésa es la
   razón de que la pantalla se viera correcta y muerta».

   ⚠ Y SE USA EL PAR `-tinte` / `-texto`, NUNCA `--seccion-bazar` MACIZO CON BLANCO ENCIMA. En claro
   el acento es #A24300 (blanco encima anda), pero en oscuro es #F6AA73 —un naranja claro— y el mismo
   blanco quedaría ilegible. El par tinte/texto está definido en los dos modos justamente para ir
   junto: es el único que no puede romperse al cambiar el tema.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ Los márgenes por defecto de `p` y `h2` NO conviven con `gap`: se suman, y una lista que en MAUI
   tiene 14 de separación termina con 30 en unos lados y 14 en otros. Acá se apagan y la separación
   la decide una sola cosa. Va con alcance, así que no le toca nada a nadie más. */
.bazar p[b-jvt9hzuhh6], .bazar h2[b-jvt9hzuhh6], .bazar-hoja p[b-jvt9hzuhh6], .bazar-hoja h2[b-jvt9hzuhh6] { margin: 0; }

/* El `Spacing="14"` de `SecBazar` (`MainPage.xaml:358`). */
.bazar[b-jvt9hzuhh6] { gap: 14px; }

/* ══ EL SEGMENTO DE TRES ═══════════════════════════════════════════════════════════════════════
   Una tarjeta con tres celdas, igual que el `Border Padding="6"` con su `Grid` de tres columnas. */
.bazar__segmento[b-jvt9hzuhh6] {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.bazar__seg[b-jvt9hzuhh6] {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tenue);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
/* ⚠ SE MARCA CON FONDO Y NO SÓLO CON COLOR DE TEXTO: en una fila de tres, un texto de otro tono se
   lee como «deshabilitado» tan fácil como «elegido». */
.bazar__seg--activa[b-jvt9hzuhh6] {
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
  font-weight: 700;
}

/* ══ LOS CHIPS ═════════════════════════════════════════════════════════════════════════════════
   ⚠ LA FILA SANGRA HASTA EL BORDE DE LA PANTALLA. El `.cuerpo` del shell tiene 16 de relleno, así
   que sin el margen negativo el último chip se corta contra un margen en blanco y parece que no hay
   más — que es justo lo contrario de lo que una fila que se desplaza tiene que insinuar.
   ⚠ Y SIN BARRA DE DESPLAZAMIENTO VISIBLE: en un teléfono se arrastra con el dedo, y en escritorio
   una barra horizontal debajo de los chips los hace ver como un cuadro de lista. */
.bazar__chips[b-jvt9hzuhh6] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 2px;
  scrollbar-width: none;
}
.bazar__chips[b-jvt9hzuhh6]::-webkit-scrollbar { display: none; }

.chip[b-jvt9hzuhh6] {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 44px;          /* el piso táctil de MAUI para un chip */
  padding: 8px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--elevada);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.chip--activo[b-jvt9hzuhh6] {
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}
.chip--activo .chip__rotulo[b-jvt9hzuhh6] { font-weight: 700; }
/* El pie dice el precio; `Nucleo.Bazar.PorMes` ya decide qué escribir cuando no hay tarifa, y por
   eso acá no hay ninguna regla que lo esconda. */
.chip__pie[b-jvt9hzuhh6] { font-size: 10px; color: var(--sutil); }
.chip--activo .chip__pie[b-jvt9hzuhh6] { color: var(--seccion-bazar-texto); opacity: .85; }

/* ══ EL BUSCADOR ═══════════════════════════════════════════════════════════════════════════════
   Se dibuja como un `.campo` del framework, pero es una FILA (ícono + entrada + ✕), así que el
   marco lo lleva el contenedor y la entrada va pelada adentro. */
.bazar__buscar[b-jvt9hzuhh6] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alto-tactil);
  padding: 0 14px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  color: var(--sutil);
}
.bazar__buscar:focus-within[b-jvt9hzuhh6] { border-color: var(--primario); }
.bazar__campo[b-jvt9hzuhh6] {
  border: 0;
  background: none;
  color: var(--texto);
  font-family: inherit;
  /* ⚠ 16 px NO ES ESTÉTICA: por debajo de eso iOS hace zoom al enfocar y la pantalla salta. */
  font-size: var(--texto-campo);
  min-width: 0;
  padding: 0;
}
.bazar__campo[b-jvt9hzuhh6]::placeholder { color: var(--sutil); }
/* ⚠ WebKit dibuja SU propia ✕ en un `type="search"`, y esa no dispara la búsqueda: quedarían dos
   cruces, una que limpia de verdad y otra que sólo borra el texto y deja la lista filtrada. */
.bazar__campo[b-jvt9hzuhh6]::-webkit-search-cancel-button { display: none; }
.bazar__x[b-jvt9hzuhh6] {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--sutil);
  cursor: pointer;
}

/* ══ LA TARJETA DE UNA PUBLICACIÓN ═════════════════════════════════════════════════════════════ */
.bazar__tarjeta[b-jvt9hzuhh6] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* Sólo lo que se abre se comporta como tocable. */
button.bazar__tarjeta[b-jvt9hzuhh6] { cursor: pointer; }
button.bazar__tarjeta:active[b-jvt9hzuhh6] { background: var(--elevada); }

/* LA MINIATURA VA A LA IZQUIERDA Y EL TEXTO A LA DERECHA — el orden con el que se recorre una
   lista: la imagen decide si uno se detiene, el texto decide si uno toca. */
.bazar__mini[b-jvt9hzuhh6] {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--seccion-bazar-tinte);
}
/* ⚠ SI NO HAY BYTES NO SE PINTA UNA IMAGEN ROTA: el hueco queda con su seña. Una tarjeta con un
   recuadro fallado se lee como un defecto del producto; una con un ícono se lee como lo que es —
   todavía sin foto. */
.bazar__mini--hueco[b-jvt9hzuhh6] {
  display: grid;
  place-items: center;
  color: var(--seccion-bazar-texto);
}
.bazar__mini--grande[b-jvt9hzuhh6] {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 340px;
  border-radius: var(--radio-tarjeta);
}
.bazar__foto[b-jvt9hzuhh6] { width: 100%; height: 100%; object-fit: cover; }

.bazar__texto[b-jvt9hzuhh6] { gap: 5px; }
/* La categoría arriba y en el color de la sección: es la seña que ordena una lista larga. */
.bazar__cat[b-jvt9hzuhh6] { color: var(--seccion-bazar-texto); font-weight: 700; }
.bazar__titulo[b-jvt9hzuhh6] { font-size: 15px; font-weight: 700; line-height: 1.3; }
/* Dos renglones y corta — el `MaxLines="2"` + `TailTruncation` de la tarjeta de MAUI. */
.bazar__desc[b-jvt9hzuhh6] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* El pie de una publicación que NO está en la vitrina se dice con el acento: es lo que hay que
   atender (un borrador sin publicar, algo vencido), no un dato de más. */
.bazar__pie--ojo[b-jvt9hzuhh6] { color: var(--seccion-bazar-texto); }
/* ⚠ `::deep` PORQUE EL `<svg>` ES DE OTRO COMPONENTE. El CSS con alcance sólo marca los elementos
   ESCRITOS EN ESTE ARCHIVO, y el chevron lo dibuja `<Icono>`: sin `::deep` la regla se compila,
   no falla, y no aplica — la clase viaja y no la agarra nadie. Es el mismo remedio que
   `App.razor.css:60` usa para el ícono que gira. El ancla (`.bazar__tarjeta`) sí es mío. */
.bazar__tarjeta[b-jvt9hzuhh6]  .bazar__chevron { flex: none; align-self: center; color: var(--sutil); }

/* ══ «VENDER ALGO» — el punto de entrada que TODAVÍA NO LO ES ══════════════════════════════════
   Del tamaño de una acción principal, porque ése es su lugar en la cara. Pero con borde punteado y
   sin fondo macizo: la persona tiene que poder ver de un vistazo que esto todavía no se toca. Un
   rectángulo lleno e idéntico al del teléfono sería una promesa que la pantalla no puede cumplir. */
.bazar__vender[b-jvt9hzuhh6] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px dashed var(--seccion-bazar);
  border-radius: var(--radio-tarjeta);
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}
.bazar__vender-texto[b-jvt9hzuhh6] { gap: 4px; }
.bazar__vender .t-minimo[b-jvt9hzuhh6] { opacity: .85; line-height: 1.45; }

/* ══ LO MÍO — los puestos ══════════════════════════════════════════════════════════════════════ */
.bazar__rotulo[b-jvt9hzuhh6] { font-weight: 700; margin-top: 6px; }
.bazar__espacio[b-jvt9hzuhh6] { display: flex; flex-direction: column; gap: 3px; }
.bazar__falla-suelta[b-jvt9hzuhh6] { color: var(--error-texto); line-height: 1.45; }

/* ══ LA CARTERA ════════════════════════════════════════════════════════════════════════════════ */
.bazar__saldo[b-jvt9hzuhh6] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 16px;
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}
.bazar__saldo-rotulo[b-jvt9hzuhh6] { opacity: .85; }
.bazar__saldo-cifra[b-jvt9hzuhh6] { font-size: 32px; font-weight: 700; line-height: 1.1; }
.bazar__saldo-pie[b-jvt9hzuhh6] { opacity: .8; }

.bazar__mov[b-jvt9hzuhh6] { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.bazar__mov-texto[b-jvt9hzuhh6] { gap: 2px; }
.bazar__monto[b-jvt9hzuhh6] { flex: none; font-size: 14px; font-weight: 700; }
/* Lo que ENTRA se marca; lo que sale se escribe con el color del texto, que es lo normal en un
   libro. Pintar los cargos de rojo convertiría el libro entero en una advertencia. */
.bazar__monto--entra[b-jvt9hzuhh6] { color: var(--seccion-bazar-texto); }

/* ══ LA HOJA DE UNA PUBLICACIÓN (la capa) ══════════════════════════════════════════════════════
   El `z-index` lo pone el shell (`App.razor.css`: `.cuerpo ::deep .capa`), así que acá sólo va lo
   de adentro.

   ⚠ EL ATRÁS VA A LA IZQUIERDA Y ES LO PRIMERO: en pantalla completa el gesto es «volver», y volver
   vive a la izquierda en los dos sistemas. Y el relleno de arriba suma `safe-area-inset-top` porque
   instalada la app dibuja debajo del reloj (`viewport-fit=cover`). */
.bazar-hoja__barra[b-jvt9hzuhh6] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px 4px;
  border-bottom: 1px solid var(--borde);
}
.bazar-hoja__atras[b-jvt9hzuhh6] {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.bazar-hoja__sena[b-jvt9hzuhh6] {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--seccion-bazar-tinte);
  color: var(--seccion-bazar-texto);
}
.bazar-hoja__quien[b-jvt9hzuhh6] { gap: 1px; }
.bazar-hoja__titulo[b-jvt9hzuhh6] {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  /* Dos renglones como máximo: el título de una publicación puede ser largo y la barra no crece. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bazar-hoja__desc[b-jvt9hzuhh6] { line-height: 1.5; }
.bazar-hoja__datos[b-jvt9hzuhh6] { gap: 8px; }
.bazar-hoja__rotulo[b-jvt9hzuhh6] { flex: none; width: 130px; }
.bazar-hoja__lamina[b-jvt9hzuhh6] { gap: 6px; padding: 14px 12px; }
/* /Paneles/Caras/Canales.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE LA PLAZA — el port de `TarjetaCanal` (`MainPage.xaml.cs:2224`).

   Va en CSS con alcance de componente —Blazor le pone un atributo generado a cada elemento— y no
   en `wwwroot/css/app.css`, que es el framework COMPARTIDO: siete caras escribiendo un CSS común
   es la receta del choque. Acá no hay una sola clase que otra cara pueda ver.

   ⚠ NINGÚN COLOR ES UN HEX. Todo sale de un token de `tema.css`, incluido el acento de esta
   sección: los cinco acentos comparten lightness y chroma en OKLCH y sólo cambian de matiz, así
   que un valor «ajustado a ojo» deshace una medición ya pagada y rompe la pareja con las otras
   cuatro secciones. `--seccion-plaza-texto` es la variante que ya está medida para texto; el
   `--seccion-plaza` pelado va sobre superficie, nunca sobre el tinte.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ EL RÓTULO Y EL AVISO ══════════════════════════════════════════════════════════════════════
   Los `<p>` traen margen del navegador y descuadran el aire de arriba de la lista. */
.plaza__donde[b-hremwstz3d] { margin: 0 0 12px; }

/* El error de una escritura. ⚠ Es `--error-texto` y no `--error`: éste es el tono medido para
   TEXTO sobre superficie; el pelado es de relleno y sobre fondo claro se lee lavado. */
.plaza__aviso[b-hremwstz3d] { margin: 0 0 12px; color: var(--error-texto); }

/* ⚠ ACÁ ESTABA `.plaza__deuda` —el cartel que avisaba que tocar un canal no hacía nada— y se fue
   con la deuda que describía: el mercado ya abre. Ver el encabezado del `.razor`. */


/* ══ LA FILA DE UN CANAL ═══════════════════════════════════════════════════════════════════════
   Tres columnas —cuerpo · pin · botón— y ~78 px de alto, que es lo que MAUI midió para que entren
   cinco canales sin que el quinto quede tapado por el botón de escanear. El relleno baja de los
   16 px de `.hoja` a los 12/10 del `EstiloTarjeta` de allá: con 16 la fila crece a ~96 px y se
   pierde uno de los cinco.

   ⚠ EL RELLENO PASÓ DE LA TARJETA AL BOTÓN QUE ABRE, y no es un acomodo: con el relleno acá, la
   franja de 10 px de arriba y de abajo NO sería tocable y la fila respondería sólo en su banda
   central. Se le da al botón para que el área tocable sea el cuerpo entero. La tarjeta se queda con
   el margen derecho, que es donde viven el pin y «Seguir». */
.canal[b-hremwstz3d] { padding: 0 12px 0 0; gap: 6px; }

/* ══ EL CUERPO, QUE ES LA PUERTA DEL MERCADO ═══════════════════════════════════════════════════
   Un `<button>` pelado: sin borde, sin fondo y con la tipografía heredada, porque lo que se ve tiene
   que seguir siendo la fila y no un control. Lo único que se agrega es la respuesta al dedo
   (`:active`) — y el foco de teclado lo pone el reset del framework sobre `:focus-visible`. */
.canal__abrir[b-hremwstz3d] {
  gap: 12px;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.canal__abrir:not(:disabled):active[b-hremwstz3d] { opacity: .8; }
/* Una fila sin id no se puede abrir. Queda apagada y sin cursor de mano, no invisible: el canal
   existe y sus otros dos botones también. */
.canal__abrir:disabled[b-hremwstz3d] { cursor: default; opacity: .6; }

/* La seña de que la fila LLEVA a algún lado. Callada a propósito: compite con nada. */
.canal__chevron[b-hremwstz3d] { flex: none; color: var(--sutil); }

/* ⚠ LA INICIAL Y NO UN ÍCONO: los cinco canales usarían el mismo dibujo de tienda y no distinguiría
   ninguno. La de «Moda», «Salud» y «Comida» sí. El círculo es de 46 px, como el `Border` de MAUI. */
.canal__sena[b-hremwstz3d] {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
  font-size: 19px;
  font-weight: 700;
  /* Una letra sola queda alta dentro del círculo con la altura de línea del cuerpo. */
  line-height: 1;
}

.canal__texto[b-hremwstz3d] { display: flex; flex-direction: column; gap: 2px; }

/* ⚠ UNA LÍNEA Y CON PUNTOS SUSPENSIVOS, las dos. Es el `MaxLines = 1` +
   `LineBreakMode.TailTruncation` de MAUI, y no es estética: un nombre largo que envuelve empuja el
   alto de SU fila y la lista deja de tener un ritmo, que es lo único que hace que se recorra rápido.
   El corte funciona porque `.crece` trae `min-width: 0`; sin eso el texto empuja el botón fuera. */
.canal__nombre[b-hremwstz3d],
.canal__alcance[b-hremwstz3d] {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canal__nombre[b-hremwstz3d] { font-size: 16px; font-weight: 700; line-height: 1.25; }


/* ══ EL BOTÓN DE SEGUIR ════════════════════════════════════════════════════════════════════════
   ⚠ SE COMPONE SOBRE `.btn`/`.btn--contorno` EN VEZ DE INVENTAR UN BOTÓN, y de ahí salen gratis
   tres cosas que MAUI cablea a mano: el apagado mientras la escritura viaja (`.btn:disabled`), el
   `:active`, y el anillo de foco del teclado. Acá sólo se cambia el ACENTO —`.btn--contorno` es
   magenta porque su default es el primario— y el estado «siguiendo».

   ⚠ Y MIDE 48 Y NO 40. MAUI le pone `HeightRequest = 40` a un control que se toca, y el propio tema
   declara 48 como piso de cualquier cosa tocable (`--alto-tactil`). El piso lo pone `.btn`; acá no
   se le baja. */
.canal__seguir[b-hremwstz3d] {
  flex: none;
  color: var(--seccion-plaza);
}

/* ⚠ «SIGUIENDO» SE MARCA CON FONDO Y NO SÓLO CON OTRO TONO DE TEXTO. En una fila con un solo botón,
   un texto de otro color se lee como «deshabilitado» tan fácil como «elegido» — es el mismo criterio
   con el que los segmentos de premios se marcan con fondo. El borde se apaga: con tinte adentro, el
   contorno lo deja pareciendo dos botones encimados. */
.canal__seguir--sigo[b-hremwstz3d] {
  border-color: transparent;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
}


/* ══ EL PIN ════════════════════════════════════════════════════════════════════════════════════
   El segundo gesto de la fila: guardar el canal en «Mis favoritos». Sólo se dibuja sobre un canal
   que ya se sigue, así que la fila de quien no sigue nada queda EXACTAMENTE como estaba.

   ⚠ CUADRADO DE 48 Y NO MÁS CHICO. `.btn` trae `min-height: var(--alto-tactil)` —el piso de
   cualquier cosa tocable que el tema declara— y acá tampoco se le baja: es la misma nota que ya está
   escrita arriba para `.canal__seguir`. Lo único que se le quita es el relleno lateral de 14 px que
   `.btn--contorno` pone para un rótulo de TEXTO: adentro va un dibujo, no una palabra, y con ese
   relleno el botón salía de 48 de alto por ~76 de ancho y le comía a la fila el espacio que el
   NOMBRE del canal necesita —que ya está apretado, porque corta con puntos suspensivos a una línea—.
   Con el ancho igual al alto queda un cuadrado y el nombre conserva casi 30 px más.

   ⚠⚠ Y AUN ASÍ EL PIN LE CUESTA ANCHO AL NOMBRE. NO SE ESCONDE, SE MIDE — en el navegador, sobre la
   fila real, con la columna de texto de una fila SEGUIDA (que es la única que lo lleva) contra una
   sin seguir:

        375 px de teléfono →  86 px de nombre con pin ·  172 px sin él
        390 px             → 101 px                   ·  187 px
        430 px             → 141 px                   ·  227 px

   O sea 60 px menos (48 del botón + 12 del `gap`), y en el teléfono más chico eso son ~10 caracteres
   antes de los puntos suspensivos. Es el precio real de este gesto y hay que saberlo antes de
   «arreglarlo»; las tres salidas obvias son PEORES y por eso no se tomaron:
     · bajarle el ancho al botón → un blanco táctil por debajo del piso que el tema declara, en la
       pantalla que más se toca;
     · dejar que el nombre envuelva a dos líneas → el alto de la fila deja de ser constante y la
       lista pierde el ritmo, que es lo único que la hace recorrible (está escrito arriba);
     · sacar el renglón de alcance en las filas con pin → borrar información para hacer lugar.
   La cuarta —rediseñar la fila entera, por ejemplo que «Siguiendo» deje de ser una palabra— es un
   cambio de la plaza y no de este gesto, y se decide aparte. Mientras tanto: el pin sólo aparece en
   las filas SEGUIDAS, así que la fila de alguien que todavía no sigue nada conserva sus 172/187/227
   px enteros — que es justo la fila donde el nombre importa más, porque es la que se está eligiendo.

   ⚠ Y EL COLOR ES EL DE LA SECCIÓN, no el primario que `.btn--contorno` trae por defecto: el pin es
   de la plaza y tiene que leerse del mismo color que el botón de al lado. Ningún hex acá — los cinco
   acentos comparten lightness y chroma en OKLCH y sólo cambian de matiz, así que un valor «ajustado
   a ojo» deshace una medición ya pagada. */
.canal__fijar[b-hremwstz3d] {
  flex: none;
  width: var(--alto-tactil);
  padding: 0;
  color: var(--seccion-plaza);
}

/* PUESTO: el mismo criterio que «Siguiendo» —fondo, no sólo otro tono—, y por una razón que acá pesa
   MÁS que allá: el otro botón dice su estado con una PALABRA distinta («Seguir» / «Siguiendo») y
   éste no dice ninguna. Sin el tinte, los dos estados del pin se distinguirían sólo por el relleno
   del dibujo, que a 20 px es una diferencia de dos píxeles de trazo. Son DOS señales para el mismo
   hecho a propósito. */
.canal__fijar--puesto[b-hremwstz3d] {
  border-color: transparent;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
}
/* /Paneles/Caras/Cuenta.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE «MI CUENTA» — el port de las cinco piezas de `SecCuenta` (MainPage.xaml:483-574).

   Va en CSS con alcance de componente —Blazor le pone un atributo generado a cada elemento de
   ESTE archivo— y no en `wwwroot/css/app.css`, que es el framework COMPARTIDO: siete caras
   editando un CSS común es la receta del choque. Lo compartido (`.hoja` `.fila` `.pila` `.btn`
   `.t-*` `.vacio` `.crece`) se usa desde acá y no se toca.

   ⚠ NINGÚN COLOR NUEVO. Todo sale de los tokens de `tema.css`, cuyos contrastes están MEDIDOS
   —el `sutil` subió a #806F71 porque #847375 daba 4.48:1 contra el AA de 4.5—. Un hex «ajustado a
   ojo» acá deshace una medición ya pagada, y encima sólo estaría bien en uno de los dos modos.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Los 14 px de `Spacing` del `VerticalStackLayout` de `SecCuenta`. Pisa el 12 de `.pila`: el
   atributo de alcance suma especificidad, así que `.cuenta` gana sin `!important`. */
.cuenta[b-dbh7487oj3] { gap: 14px; }

/* Rótulo + tarjeta van juntos en un grupo con su propio aire, en vez de darle a cada `<h2>` un
   margen a mano como hace el XAML (`Margin="4,6,0,0"`, `"4,10,0,8"`, `"0,8,0,0"` — tres valores
   distintos para el mismo problema). Así la etiqueta queda PEGADA a lo que rotula y la separación
   entre grupos es una sola, la del contenedor. */
.cuenta__grupo[b-dbh7487oj3] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ⚠ SON ETIQUETAS DE GRUPO, NO TÍTULOS DE SECCIÓN, y por eso van en `Menor` tenue y no en `t-sub`:
   el XAML las declara `FontSize=Menor` + negrita + tenue (`:506`, `:530`, `:564`). El `<h2>` es por
   el esquema del documento —hay un `FocusOnNavigate` sobre el `<h1>` de la cabecera y esto cuelga
   de ahí—, no por el tamaño. */
.cuenta__rotulo[b-dbh7487oj3] {
  margin: 0 0 0 4px;
  font-weight: 700;
  color: var(--tenue);
}

/* El par nombre/renglón chico: los 2 px de `Spacing` que el XAML repite en la ficha, en el candado
   y en cada región. `min-width: 0` o un nombre largo revienta la fila que lo contiene. */
.cuenta__par[b-dbh7487oj3] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}


/* ══ ① LA FICHA ════════════════════════════════════════════════════════════════════════════════ */

.cuenta__ficha[b-dbh7487oj3] {
  gap: 14px;      /* el `ColumnSpacing` del Grid */
  padding: 18px;  /* el `Padding` del Border */
}

/* El disco de 52 con las iniciales — `PrimarioTinte` de piso y `PrimarioFuerte` de tinta, igual que
   el avatar de la cabecera. `flex: none` o la fila se lo come cuando el nombre es largo. */
.cuenta__disco[b-dbh7487oj3] {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}


/* ══ ② CÓMO SE VE ══════════════════════════════════════════════════════════════════════════════
   Tres columnas iguales dentro de la tarjeta, con el `Padding=6` y el `ColumnSpacing=4` del XAML
   (`:509-520`). */

.cuenta__temas[b-dbh7487oj3] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
}

.cuenta__tema[b-dbh7487oj3] {
  /* ⚠ 48 y no «lo que mida el texto»: `--alto-tactil` es el piso de cualquier cosa que se toque, y
     éstos son tres blancos angostos uno al lado del otro. */
  min-height: var(--alto-tactil);
  /* ⚠ EL RADIO DE ADENTRO ES EL DE LA TARJETA MENOS SU RELLENO (14 − 6 = 8). Con `--radio-control`
     (12) la esquina del botón encendido queda MÁS redonda que la de la hoja que lo contiene y se ve
     desalineada — es el detalle que delata una tarjeta con controles metidos adentro. */
  border-radius: 8px;
  border: 0;
  padding: 0 6px;
  background: none;
  color: var(--tenue);
  font-family: inherit;
  font-size: var(--menor);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease;
}

/* ⚠ SE MARCA CON FONDO Y NO SÓLO CON COLOR DE TEXTO. En una fila de tres, un texto de otro tono se
   lee como «deshabilitado» tan fácil como «elegido», y la persona no sabe cuál está puesto — que es
   lo único que este control tiene que comunicar (`MainPage.xaml.cs:2000`). */
.cuenta__tema--activo[b-dbh7487oj3] {
  background: var(--primario-tinte);
  /* ⚠ EL MISMO PAR QUE EL AVATAR, Y LA MISMA CORRECCIÓN — la razón larga está en `App.razor.css`.
     `--primario-fuerte` sobre `--primario-tinte` da 4.08:1 en OSCURO, debajo del AA de 4.5;
     `--primario` da 5.50 allá y 5.00 en claro. Acá muerde MÁS que en el avatar: éste es el único
     lugar donde se lee cuál de los tres modos está puesto —el comentario de arriba dice que por eso
     se marca con fondo y no sólo con color—, así que un texto lavado sobre el chip encendido
     deshace justo lo que el control existe para comunicar.
     ⚠ Que dos agentes distintos hayan caído en el mismo par no es casualidad: es el que uno escribe
     buscando «el texto fuerte de la marca» sin medirlo en los DOS modos. */
  color: var(--primario);
  font-weight: 700;
}


/* ══ ③ EL CANDADO ══════════════════════════════════════════════════════════════════════════════ */

.cuenta__candado[b-dbh7487oj3] {
  gap: 12px;
  padding: 14px 16px;   /* el `Padding="16,12"` del XAML, con un pelo más de aire vertical */
}

/* ⚠ ES UN BOTÓN Y NO UN `<input type="checkbox">`, y es la traducción exacta de por qué MAUI usa
   `Toggled` y no un binding de dos vías (`MainPage.xaml:542`). Un checkbox guarda su estado EN EL
   DOM: el navegador lo mueve al tocarlo y Blazor sólo lo devuelve si el valor del MODELO cambió
   entre dos renders. Cancelar la huella deja el modelo igual, así que el checkbox se quedaría
   mostrando «prendido» sobre un candado apagado — alguien creería que su app está protegida y no lo
   estaría. Un botón no tiene estado propio: lo que se ve es `aria-checked`, o sea lo que
   `Candado.Encendido` dice.

   ⚠ Y LA CAJA QUE RECIBE EL DEDO ES MÁS ALTA QUE EL DIBUJO: el riel mide 32 y el botón 48, que es el
   piso táctil. El `Switch` de MAUI trae su propia área de toque; en web hay que pedirla. */
.interruptor[b-dbh7487oj3] {
  flex: none;
  width: 56px;
  min-height: var(--alto-tactil);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.interruptor:disabled[b-dbh7487oj3] { opacity: .5; cursor: default; }

.interruptor__riel[b-dbh7487oj3] {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  /* ⚠ APAGADO VA `--borde-fuerte` Y NO `--borde`. El `--borde` es la línea de una tarjeta —2.96:1,
     corto a propósito— y acá el riel se dibuja SOBRE una tarjeta: con ese tono el interruptor
     apagado casi desaparece, sobre todo en oscuro. `--borde-fuerte` mide 3.73:1 y se lee como
     control. Encendido usa `PrimarioFuerte`, que es el `OnColor` explícito del XAML (`:553`). */
  background: var(--borde-fuerte);
  transition: background-color .15s ease;
}
.interruptor[aria-checked="true"] .interruptor__riel[b-dbh7487oj3] { background: var(--primario-fuerte); }

/* La bolita es `Superficie` en los dos modos, igual que el `ThumbColor` del XAML (`:554`), que allá
   también es un brush con `AppThemeBinding`. La sombra la separa del riel cuando los dos tonos
   quedan cerca. */
.interruptor__bolita[b-dbh7487oj3] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
  transition: transform .15s ease;
}
.interruptor[aria-checked="true"] .interruptor__bolita[b-dbh7487oj3] { transform: translateX(20px); }


/* ══ ④ DÓNDE JUEGAS ════════════════════════════════════════════════════════════════════════════ */

.cuenta__regiones[b-dbh7487oj3] { gap: 10px; }   /* el `Spacing=10` de `ListaRegiones` */

.cuenta__region[b-dbh7487oj3] {
  gap: 12px;
  padding: 14px;
}

/* El pin va en `Primario` (`MainPage.xaml.cs:1038` lo pinta con ese pincel). El color se pone en el
   PADRE y no en el ícono: el `<svg>` de `Icono` dibuja con `currentColor` — poner un parámetro de
   color sería inventar un contrato que ese componente no tiene. */
.cuenta__pin[b-dbh7487oj3] {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--primario);
}

.cuenta__region-nombre[b-dbh7487oj3] { font-weight: 700; }

/* ⚠ `.vacio` está pensado para una PANTALLA vacía y trae 40 px de aire arriba y abajo; acá es el
   hueco de una sección que tiene otras cuatro encima, y con esa altura empuja los dos botones del
   pie fuera de la vista. Se recorta desde acá y no tocando `app.css`, que es de todos. */
.cuenta__hueco[b-dbh7487oj3] {
  padding: 18px 12px;
  gap: 6px;
}
.cuenta__hueco p[b-dbh7487oj3] { margin: 0; max-width: 32ch; }

/* El titular de la falla pesa; el motivo que viene debajo es el detalle. Los dos toman su color de
   `.vacio--falla`, así que acá sólo se decide la jerarquía. */
.cuenta__falla[b-dbh7487oj3] { font-weight: 700; }


/* ══ ⑤ LAS DOS SALIDAS ═════════════════════════════════════════════════════════════════════════
   Los `Margin="0,8,0,0"` del XAML (`:572`). Van al final y separadas del resto: son las dos únicas
   cosas de esta pantalla que no se pueden deshacer con otro toque. */
.cuenta__salidas[b-dbh7487oj3] {
  margin-top: 8px;
  gap: 8px;
}
/* /Paneles/Caras/Favoritos.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE «MIS FAVORITOS».

   Va en CSS con alcance de componente —Blazor le pone un atributo generado a cada elemento— y no en
   `wwwroot/css/app.css`, que es el framework COMPARTIDO: ocho caras escribiendo un CSS común es la
   receta del choque. Acá no hay una sola clase que otra cara pueda ver.

   ⚠ NINGÚN COLOR ES UN HEX. Todo sale de un token de `tema.css`. Esta cara NO tiene acento propio y
   eso es deliberado: los cinco `--seccion-*` nombran los cinco macrodominios que la barra muestra
   (cg, plaza, muro, bazar, sorteo), y «favoritos» no es un macrodominio — es una vista TRANSVERSAL,
   con filas que salen de `base`, de `base` otra vez y de `mp`. Pintarla con el verde de la plaza
   diría que es de la plaza; inventarle un sexto matiz rompería la pareja medida en OKLCH de los
   cinco (comparten lightness y chroma, sólo cambian de matiz) y agregaría un acento que ningún
   `.jshell` puede nombrar. Se usa el `--primario` que `.btn--contorno` ya trae.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ LAS TRES SECCIONES ═══════════════════════════════════════════════════════════════════════
   `.pila` (12 px) es el aire ENTRE FILAS; entre secciones hace falta más o los tres bloques se leen
   como una lista sola de trece renglones con tres títulos sueltos adentro. 8 px de más alcanzan
   porque el `<h2>` ya trae su propio peso visual. */
.favs > .favs__seccion + .favs__seccion[b-48ovtwskvf] { margin-top: 8px; }

.favs__seccion[b-48ovtwskvf] { display: flex; flex-direction: column; gap: 12px; }

/* Los `<h2>` traen margen del navegador y descuadran el aire que `.favs__seccion` ya declara con
   `gap`. Es el mismo reseteo que `.vacio p` hace en el framework, y por la misma razón: en un
   contenedor flex los márgenes NO se colapsan, se SUMAN al `gap`. */
.favs__rotulo[b-48ovtwskvf] { margin: 0; }

/* La frase de ayuda debajo de un rótulo y la deuda al pie: las dos son texto suelto entre bloques y
   las dos vienen con margen de navegador. */
.favs__pie[b-48ovtwskvf] { margin: 0; line-height: 1.5; }

/* El error de una escritura, y el aviso de que «dónde juegas» no llegó.
   ⚠ Es `--error-texto` y no `--error`: éste es el tono medido para TEXTO sobre superficie; el pelado
   es de relleno y sobre fondo claro se lee lavado. */
.favs__aviso[b-48ovtwskvf] { margin: 0; color: var(--error-texto); }

/* ⚠ EL DE ARRIBA NECESITA SU PROPIO HUECO Y EL DE ADENTRO NO, y por eso son dos clases y no una.
   El aviso de una escritura fallada vive FUERA de `.favs`, o sea que no lo alcanza ningún `gap`:
   sin este margen queda pegado al «Regiones» de abajo y se lee como si fuera parte del rótulo (se
   vio así en el banco de pruebas). El aviso de «no pudimos leer dónde juegas», en cambio, está
   DENTRO de una `.favs__seccion`, donde el `gap: 12px` ya lo separa — darle margen ahí sumaría 24 px
   en vez de 12, porque en un contenedor flex los márgenes no se colapsan. Es la misma trampa que
   `app.css` documenta al resetear el `<p>` de `.vacio`. */
.favs__aviso--arriba[b-48ovtwskvf] { margin-bottom: 12px; }

/* ⚠ EL CARTEL DE SECCIÓN ES MÁS BAJO QUE EL DE PANTALLA. `.vacio` trae `padding: 40px 24px`, que es
   la medida de un cartel que ocupa la pantalla ENTERA —el de la plaza, el de premios—. Acá pueden
   caer TRES a la vez, y con 40 px arriba y abajo cada uno la persona termina desplazándose por 360
   px de nada para llegar a la sección que sí tiene filas. Se baja el vertical y se deja el
   horizontal, que es lo que mantiene el texto centrado sin tocar los bordes. */
.favs__cartel[b-48ovtwskvf] { padding: 24px 24px; }


/* ══ LA FILA ══════════════════════════════════════════════════════════════════════════════════
   Tres columnas —seña · texto · marcador—, la misma forma que `.canal` de la plaza y por la misma
   razón: una columna para decir dos cosas cortas desperdicia el alto, y con doce favoritos el
   duodécimo queda debajo de la barra. El relleno baja de los 16 px de `.hoja` a 10/12 para que la
   fila mida lo mismo que allá — dos listas de la misma app con distinto ritmo se notan.
   ⚠ Medido en el navegador, las dos dan **70 px** de alto (10 + 46 + 10 + 2 de borde), no los ~78
   que el comentario de `.canal` heredó de la medición de MAUI. Se deja el número medido acá y no se
   toca aquel texto, que es de otra tanda; pero si alguien ajusta el ritmo de una de las dos listas,
   el número que vale es éste. */
.fav[b-48ovtwskvf] { padding: 10px 12px; gap: 12px; }

/* ⚠ APAGADO ≠ ESCONDIDO. Un programa suspendido o un negocio que no está activo se muestran, y se
   muestran así: es el dato con el que la persona decide quitarlo. `opacity` y no un gris —el gris
   habría que elegirlo, y sería un hex nuevo— y NO sobre el botón, que tiene que seguir siendo
   tocable y con su contraste entero: quitar el favorito de algo apagado es justamente el gesto que
   esta fila necesita ofrecer. */
.fav--apagado .fav__sena[b-48ovtwskvf],
.fav--apagado .fav__texto[b-48ovtwskvf] { opacity: .55; }


/* ══ LA SEÑA, Y EL LOGO ENCIMA ════════════════════════════════════════════════════════════════
   La inicial es el port de `.canal__sena` (46 px, redonda). Acá hace además de PISO del logo, que se
   pinta encima. */
.fav__sena[b-48ovtwskvf] {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--elevada);
  color: var(--tenue);
  font-size: 19px;
  font-weight: 700;
  /* Una letra sola queda alta dentro del círculo con la altura de línea del cuerpo. */
  line-height: 1;
}

/* ⚠⚠ EL LOGO ES UN FONDO DE PSEUDO-ELEMENTO Y NO UN `<img>`, Y ES UNA CORRECCIÓN MEDIDA. La primera
   versión de esta cara ponía un `<img class="fav__logo">` absoluto encima de la letra, con un
   comentario que afirmaba que una imagen rota «no dibuja nada y queda a la vista la inicial de
   atrás». Se miró en el navegador y es FALSO: con `width/height: 100%` el elemento reemplazado
   conserva sus 46×46 aunque `naturalWidth` sea 0, así que tapa la letra igual — y según el navegador
   puede además pintar el glifo de imagen rota. Un fondo que da 404 no pinta NADA, y ahí sí queda la
   inicial. Es el modo de falla que importa: el día que alguien renombre el workspace, estas URLs se
   rompen sin levantar un solo error, exactamente como ya pasó con las dos líneas de `directorio.jz`
   que arman la misma dirección a mano.

   ⚠ Y VA EN `::after` Y NO EN EL `background` DEL PROPIO CÍRCULO: un fondo se pinta DEBAJO del
   contenido, o sea que la letra quedaría encima del logo cuando SÍ carga. Un pseudo-elemento
   posicionado se pinta encima. El caso de falla y el normal salen los dos bien, sin una línea de JS.

   `cover` porque un logo puede venir en cualquier proporción y deformarlo es peor que recortarlo. La
   URL la pone el markup en `--fav-logo`; la FORMA se queda acá, que es donde se busca. */
.fav__sena--logo[b-48ovtwskvf]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fav-logo) center / cover no-repeat;
}

.fav__texto[b-48ovtwskvf] { display: flex; flex-direction: column; gap: 2px; }

/* ⚠ UNA LÍNEA Y CON PUNTOS SUSPENSIVOS, las dos — el port de `.canal__nombre`. No es estética: un
   nombre largo que envuelve empuja el alto de SU fila y la lista deja de tener un ritmo, que es lo
   único que hace que se recorra rápido. El corte funciona porque `.crece` trae `min-width: 0`; sin
   eso el texto empuja el botón fuera de la fila. */
.fav__nombre[b-48ovtwskvf],
.fav__detalle[b-48ovtwskvf] {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav__nombre[b-48ovtwskvf] { font-size: 16px; font-weight: 700; line-height: 1.25; }


/* ══ EL MARCADOR ══════════════════════════════════════════════════════════════════════════════
   ⚠ SE COMPONE SOBRE `.btn`/`.btn--contorno` EN VEZ DE INVENTAR UN BOTÓN, y de ahí salen gratis
   tres cosas: el apagado mientras la escritura viaja (`.btn:disabled`), el `:active`, y el anillo de
   foco del teclado.

   ⚠ CUADRADO DE 48 Y NO MÁS CHICO. `--alto-tactil` es el piso que el tema declara para cualquier
   cosa tocable, y `.btn` ya lo pone; acá no se le baja. Lo único que se le quita es el relleno
   lateral de 14 px que `.btn--contorno` pone para un rótulo de TEXTO: adentro va un dibujo, no una
   palabra, y con ese relleno el botón salía de 48 × ~76 y le comía al nombre —que corta a una
   línea— casi 30 px. */
.fav__marcar[b-48ovtwskvf] {
  flex: none;
  width: var(--alto-tactil);
  padding: 0;
}

/* PUESTO se marca con FONDO y no sólo con el relleno del dibujo. En un botón sin texto, la
   diferencia entre marcado y no marcado sería un trazo de dos píxeles a 20 px de tamaño; son DOS
   señales para el mismo hecho a propósito. El borde se apaga: con tinte adentro, el contorno lo deja
   pareciendo dos botones encimados. */
.fav__marcar--puesto[b-48ovtwskvf] {
  border-color: transparent;
  background: var(--primario-tinte);
  color: var(--primario-fuerte);
}
/* /Paneles/Caras/Inicio.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE «INICIO» — el port de lo que `MainPage.xaml:152-274` y `FilaCorta` dibujan a mano.

   ⚠ NADA DE ACÁ VA EN `app.css`. Las clases compartidas (`.panel` `.cuerpo` `.pila` `.fila` `.hoja`
   `.btn` `.t-*` `.vacio`) son el framework de las siete caras; lo de UNA cara vive en SU
   `.razor.css`, que Blazor acota con un atributo generado. Siete agentes editando un CSS común es
   la receta del choque.

   ⚠ Y NINGÚN COLOR SE ESCRIBE A OJO: todo sale de un token de `tema.css`. La única excepción son
   los cuatro pares del talón del boleto, y abajo está la razón medida de por qué NO pueden ser
   tokens.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* El aire de MAUI entre secciones: `VerticalStackLayout Spacing="16"` (`MainPage.xaml:152`).
   `.cuerpo` ya pone los 16 px de los costados, así que acá sólo va el ritmo vertical. */
.inicio[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Los rótulos internos («Lo último que ganaste», «Dónde jugar»): `Margin="0,4,0,0"` en el XAML, y
   sin el margen que el navegador le pone a un `<h2>` — que descuadraría el ritmo de arriba. */
.inicio__rotulo[b-2q129hsyyu] {
  margin: 4px 0 0;
}

/* ⚠ LA LÍNEA DE «FALLÓ», Y NO UN CARTEL CENTRADO. `.vacio--falla` es para una cara entera; acá esto
   es una sección de tres que tiene la plaza arriba y el directorio abajo. Lo que la regla de la casa
   pide es que «vacío» y «falló» no se confundan, no que ocupen media pantalla — el color de error y
   el ícono de aviso alcanzan, y ninguna de las dos cosas aparece en el vacío. */
.inicio__falla[b-2q129hsyyu] {
  margin: 0;
  align-items: flex-start;
  color: var(--error-texto);
}

/* ══ ① LA PLAZA ════════════════════════════════════════════════════════════════════════════════
   El `Border` tocable de `MainPage.xaml:159`, con su Grid de tres columnas. Sobre `.hoja--elevada`,
   que ya trae el piso, el borde y el radio. */
.plaza[b-2q129hsyyu] {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  /* El texto de un `<button>` se centra y hereda la tipografía del navegador: las dos cosas hay que
     apagarlas o la tarjeta se ve como un botón de formulario. */
  text-align: start;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  /* El chevrón de la derecha hereda de acá; los textos ponen el suyo. */
  color: var(--sutil);
}
.plaza:active[b-2q129hsyyu] { opacity: .8; }

.plaza__texto[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plaza__nombre[b-2q129hsyyu] {
  font-size: var(--cuerpo);
  font-weight: 700;
  color: var(--texto);
}

/* ⚠ `::deep` Y NO UN `style=` EN EL `<Icono>`. El componente declara CUATRO parámetros —`D`,
   `Tamano`, `Relleno`, `Clase`— y no captura atributos sueltos, así que un `style=` no tiene dónde
   entrar. `Clase` pone la clase en el `<svg>`, que es de OTRO componente y por eso necesita `::deep`
   para que el atributo de alcance no lo deje afuera. Es el mismo patrón que `App.razor.css` usa con
   `.gira`. */
.plaza[b-2q129hsyyu]  .plaza__ico { color: var(--primario); }

/* ══ ② LA ACCIÓN PRINCIPAL ═════════════════════════════════════════════════════════════════════
   Del tamaño de la acción principal: relleno 20, radio 16 y el primario macizo (`MainPage.xaml:204`).
   No usa `.hoja` porque no es una tarjeta — es el único elemento de la pantalla que se pinta con el
   color de la marca. */
.escaneo[b-2q129hsyyu] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: var(--primario);
  color: var(--sobre-primario);
  text-align: start;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.escaneo:active[b-2q129hsyyu] { opacity: .85; }

.escaneo__texto[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.escaneo__titulo[b-2q129hsyyu] { font-size: var(--subtitulo); font-weight: 700; }
.escaneo__sub[b-2q129hsyyu]    { font-size: var(--menor); opacity: .82; }

.escaneo[b-2q129hsyyu]  .escaneo__chevron { opacity: .7; }

/* ══ ③ LOS DOS NÚMEROS ═════════════════════════════════════════════════════════════════════════
   Dos y no un tablero: un tablero de métricas acá sería ruido (`MainPage.xaml:223`). El Grid de
   `*,*` con `ColumnSpacing=12`. */
.cifras[b-2q129hsyyu] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* `.hoja` trae piso, borde y radio; acá sólo el relleno de 14 del XAML y la columna. */
.cifra[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  /* ⚠ `min-width: 0` sobre un ítem de grid: sin esto un rótulo largo estira su columna y las dos
     tarjetas dejan de medir lo mismo. Es la misma razón que `.crece` documenta en `app.css`. */
  min-width: 0;
}

/* El ícono hereda `--tenue` de acá — el rótulo es la etiqueta del número, no el número. */
.cifra__rotulo[b-2q129hsyyu] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tenue);
}

.cifra__n[b-2q129hsyyu] {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
}

/* ⚠ EL AVISO SÓLO CUANDO HAY ALGO QUE AVISAR. Con cero el número vuelve al color de texto: un «0»
   en naranja dice que pasa algo justamente cuando no pasa nada (`PintarInicio:907`). */
.cifra__n--aviso[b-2q129hsyyu] { color: var(--aviso); }

/* ══ ④ EL BOLETO ═══════════════════════════════════════════════════════════════════════════════
   El port de `Vistas/Ticket.cs`. ⚠ LAS MUESCAS SON LA SEÑAL, NO EL FESTÓN: se probaron cuatro cortes
   con el dueño y el veredicto fue neto — con el borde ondulado solo el ojo lee «tarjeta con un borde
   bonito», y en cuanto aparecen los dos semicírculos del troquel lee «boleto».

   ⚠ Y ACÁ SON HUECOS DE VERDAD, no dos círculos pintados del color del fondo. La `mask` recorta el
   elemento, así que por la muesca se ve LO QUE HAYA DETRÁS —sea el fondo claro, el oscuro o lo que
   venga—, que es exactamente lo que `Ticket.cs` consigue con `FillRule.EvenOdd` y la razón que su
   propio comentario da: pintados funcionan sobre UNA pantalla y sobre otra aparecen dos puntos
   claros flotando.

   ⚠ LAS DOS CAPAS DE LA MÁSCARA NO SE SUPERPONEN A PROPÓSITO. Varias capas de `mask` se componen
   SUMÁNDOSE, así que dos gradientes de alto completo se taparían el agujero uno al otro y no habría
   muesca. Cada una cubre la mitad que le toca (`top / 100% 50%` y `bottom / 100% 50%`) y por eso la
   suma da el recorte que se busca sin depender de `mask-composite`, que en WebKit se escribe con
   otras palabras clave. */
.boleto[b-2q129hsyyu] {
  /* Los tres números de `Ticket.cs`: `AnchoTalon = 86`, `RadioMuesca = 7.7` —bajado un 30 % por el
     dueño al verlo en pantalla, con 11 competía con el dentado— y `AltoFila = 104`. */
  --talon: 86px;
  --muesca: 7.7px;

  /* ⚠⚠ LOS DOS TONOS DEL TALÓN SON LITERALES Y NO `var(--seccion-cg)`, Y ESTO NO SE «ARREGLA».
     `tema.css` define `--seccion-cg` en los TRES bloques del tema: en oscuro vale `#FD9EB2`, un rosa
     claro. El talón lleva TEXTO BLANCO encima —es una superficie de color propio, como una
     credencial impresa, y no cambia con el modo—, así que con el token el boleto saldría blanco
     sobre rosa claro en modo oscuro. Es la misma trampa que MAUI ya documenta en `ParDeSeccion`
     (`MainPage.xaml.cs:1184`): usa `ColorLiteral` y no `ColorDe` porque «estas claves YA nombran un
     tono concreto». Los valores son los del bloque claro de `tema.css` —el hondo ya es invariante
     ahí (`--seccion-cg-hondo`), el claro no— y se toman los dos del mismo lado para que el par no se
     parta. */
  --talon-claro: #A73156;   /* = --seccion-cg      en el bloque claro de tema.css */
  --talon-hondo: #7A1338;   /* = --seccion-cg-hondo (invariante) */

  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 104px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;      /* `RadioEsq = 10`: esquinas chicas, un boleto y no una tarjeta de app */
  background: var(--superficie);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  /* El radio no recorta el fondo de un hijo por sí solo: sin esto el talón asoma en cuadrado por las
     dos esquinas de la izquierda. */
  overflow: hidden;

  -webkit-mask:
    radial-gradient(circle var(--muesca) at var(--talon) 0,    #0000 98%, #000) top    / 100% 50% no-repeat,
    radial-gradient(circle var(--muesca) at var(--talon) 100%, #0000 98%, #000) bottom / 100% 50% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at var(--talon) 0,    #0000 98%, #000) top    / 100% 50% no-repeat,
    radial-gradient(circle var(--muesca) at var(--talon) 100%, #0000 98%, #000) bottom / 100% 50% no-repeat;
}
.boleto:active[b-2q129hsyyu] { filter: brightness(.97); }

/* «Vence pronto» toma el naranja del bazar y los terminales van en gris: un premio ya usado o
   vencido no lleva color, y el gris ahí SÍ es la decisión (`ParDeSeccion`). Mismos literales, misma
   razón que arriba. */
.boleto--porvencer[b-2q129hsyyu] { --talon-claro: #A24300; --talon-hondo: #712C00; }
.boleto--terminal[b-2q129hsyyu]  { --talon-claro: #8A7B7D; --talon-hondo: #5E5153; }

/* EL TALÓN. El degradado va de (0,0) a (0.85,1) en MAUI; sobre una caja de 86×104 ese vector cae en
   145° medidos como los mide CSS (0° = hacia arriba). */
.boleto__talon[b-2q129hsyyu] {
  flex: none;
  width: var(--talon);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 7px 9px 7px;
  /* ⚠ EL TOKEN Y NO `#FFF`. `--blanco` (`tema.css:112`) está declarado UNA sola vez, o sea que es
     invariante en los tres bloques del tema — que es justo la propiedad que este talón necesita: el
     texto va sobre el color propio de la credencial y no sobre la superficie, así que no debe girar
     con el modo. Los DOS literales de arriba (`--talon-claro`/`--talon-hondo`) sí se quedan
     literales y está argumentado ahí; éste era el que se escapó, y no había razón. */
  color: var(--blanco);
  background: linear-gradient(145deg, var(--talon-claro), var(--talon-hondo));

  /* ⚠ LA COSTURA DEL TROQUEL, Y NO LOS SIETE AGUJEROS DE MAUI. `Ticket.cs` los hace como subpaths
     huecos de la misma figura; replicarlos acá pediría una tercera capa de máscara que se
     superpondría a las dos de la muesca (y volvería a taparlas), y la salida fácil —siete puntos
     pintados del color del fondo— es exactamente lo que el comentario de `Ticket.cs` prohíbe. Se
     deja la línea del troquel, que va SOBRE el color del talón y por lo tanto no depende del fondo.
     Las muescas hacen el trabajo; esto acompaña. */
  border-right: 1px dashed rgb(255 255 255 / .38);
}

/* El rótulo, centrado en lo que sobra entre el ícono y el folio. */
.boleto__caja[b-2q129hsyyu] {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ⚠ EN WEB EL TEXTO VERTICAL NO TIENE LA TRAMPA QUE MAUI DOCUMENTA, y conviene decirlo para que
   nadie «arregle» lo que no está roto. Allá `Rotation` gira EL PÍXEL y no el lugar que ocupa: el
   Label se medía con los 86 px de ANCHO del talón, «ÚLTIMO DÍA» no entraba, se partía en dos
   renglones y recién entonces se giraba — dos líneas verticales encimadas. Por eso allá las medidas
   van cruzadas a mano. `writing-mode` cambia el FLUJO, no sólo la pintura, así que el navegador ya
   mide a lo largo del alto y no hace falta ninguna medida cruzada. El `nowrap` se conserva igual:
   una etiqueta larga tiene que recortarse, no partirse. */
.boleto__rotulo[b-2q129hsyyu] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;   /* el `CharacterSpacing = 2.2` sobre 11 px */
  line-height: 1;
}

/* ⚠ CON AIRE A LOS COSTADOS: sin él un folio de 10 caracteres llega justo a los dos bordes del
   talón, y el derecho es la línea del troquel. */
.boleto__folio[b-2q129hsyyu] {
  max-width: 100%;
  padding: 0 2px;
  font-family: var(--letra-cifras);
  font-size: 8px;
  letter-spacing: .04em;
  opacity: .62;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boleto__cuerpo[b-2q129hsyyu] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--sutil);   /* el chevrón hereda de acá */
}

.boleto__texto[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.boleto__marca[b-2q129hsyyu] {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--sutil);
}

/* ⚠ UNA SOLA LÍNEA CON PUNTOS SUSPENSIVOS, igual que el `TailTruncation`/`MaxLines=1` del XAML: un
   nombre largo que se parte en dos renglones estira la fila y rompe la silueta del boleto — que es
   lo único que esta tarjeta tiene para decir qué es de un vistazo. */
.boleto__nombre[b-2q129hsyyu],
.boleto__donde[b-2q129hsyyu] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boleto__nombre[b-2q129hsyyu] { font-size: 15.5px; font-weight: 700; color: var(--texto); }
.boleto__donde[b-2q129hsyyu]  { font-size: 12px;   color: var(--tenue); }

.boleto__vence[b-2q129hsyyu] { font-size: 11.5px; font-weight: 700; color: var(--exito-texto); }
.boleto__vence--urge[b-2q129hsyyu] { color: var(--error-texto); }

.inicio__boletos[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ══ ⑤ DÓNDE JUGAR ═════════════════════════════════════════════════════════════════════════════ */

.inicio__negocios[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sobre `.hoja`: sólo la columna y el relleno de 14 del XAML. */
.negocio[b-2q129hsyyu] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}
.negocio__nombre[b-2q129hsyyu]  { font-size: 15px; font-weight: 700; }
.negocio__premios[b-2q129hsyyu] { font-size: 13px; line-height: 1.35; color: var(--tenue); }
.negocio__donde[b-2q129hsyyu]   { font-size: 12px; color: var(--sutil); }
/* /Paneles/Caras/Mercado.razor.rz.scp.css */
/* ═══ EL MERCADO — la capa del escaparate y la ficha ═══════════════════════════════════════════

   Es la forma de `Bazar.razor.css ▸ .bazar-hoja` con otro nombre: la misma barra (atrás · seña ·
   quién · acción) y el mismo cuerpo con scroll propio. Se copió la FORMA y no las reglas por una
   razón concreta del framework: los `.razor.css` van con `::deep`/scope por componente, así que una
   clase de otra cara no alcanza a ésta ni podría — y compartirlas de verdad sería subirlas a
   `app.css`, que es del framework y no de una tanda.

   ⚠ CERO COLORES LITERALES. Todo sale de los tokens de `tema.css`, así que el día que el tono
   cambie por programa —que es la tanda de al lado— esta cara lo sigue sin volver acá. Los de
   sección son los de la PLAZA (`--seccion-plaza-*`), porque el mercado se entra desde la plaza y es
   la misma superficie: darle un color propio inventaría una sexta sección que el tema no tiene.

   ⚠ EL `z-index` DE `.capa` LO PONE EL SHELL (`App.razor.css`: `.cuerpo ::deep .capa`) y por eso no
   está acá. Sin él la barra de abajo se dibujaría ENCIMA de esta capa y —peor que verse mal— sus
   botones seguirían recibiendo los toques. */

.merc p[b-pdqcero1ef], .merc h2[b-pdqcero1ef], .merc h3[b-pdqcero1ef] { margin: 0; }

/* ══ LA BARRA ══════════════════════════════════════════════════════════════════════════════════
   ⚠ EL ATRÁS VA A LA IZQUIERDA Y ES LO PRIMERO: en pantalla completa el gesto es «volver», y volver
   vive a la izquierda en los dos sistemas. El relleno de arriba suma `safe-area-inset-top` porque
   instalada la app dibuja debajo del reloj (`viewport-fit=cover`). */
.merc__barra[b-pdqcero1ef] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 4px;
  border-bottom: 1px solid var(--borde);
}

.merc__atras[b-pdqcero1ef] {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
}

/* La seña es redonda como la del canal y la de «Mis favoritos» —es la misma clase de sujeto: un
   lugar con nombre propio— y no cuadrada como la del bazar, que rotula un OBJETO en venta. */
.merc__sena[b-pdqcero1ef] {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--seccion-plaza-tinte);
  color: var(--seccion-plaza-texto);
  font-size: 19px;
  font-weight: 700;
  /* Una letra sola queda alta dentro del círculo con la altura de línea del cuerpo. */
  line-height: 1;
}

/* ⚠ EL LOGO ES EL FONDO DE UN `::after` Y NO UN `<img>`. Es la corrección que «Mis favoritos» pagó
   mirando la pantalla: un `<img>` con `width/height:100%` conserva su caja aunque la imagen no
   cargue, así que TAPA la inicial igual —y según el navegador pinta además el glifo de imagen rota—.
   Un fondo que da 404 no pinta nada y queda la letra. Va en el pseudo-elemento y no en el
   `background` del círculo porque un fondo se pinta DEBAJO del texto. */
.merc__sena--logo[b-pdqcero1ef]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--merc-logo) center / cover no-repeat;
}

.merc__quien[b-pdqcero1ef] { gap: 1px; }
.merc__titulo[b-pdqcero1ef] {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  /* Dos renglones como máximo: el nombre de un negocio puede ser largo y la barra no crece. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ══ EL CUERPO ═════════════════════════════════════════════════════════════════════════════════
   ⚠ NO HEREDA EL `padding-bottom` DE `.cuerpo` DEL FRAMEWORK, Y HAY QUE DEJARLO CLARO: aquél
   reserva el hueco de la barra de abajo, y sobre una CAPA la barra no se ve. Ese hueco acá sería
   una franja muerta al final de toda lista. Queda el resguardo del gesto del sistema. */
.merc__cuerpo[b-pdqcero1ef] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.merc__resumen[b-pdqcero1ef] { margin-top: -2px; }

/* El rótulo de una sección de la ficha. Va en mayúsculas chicas para que separe sin competir con
   los nombres de los productos, que son lo que se vino a leer. */
.merc__rotulo[b-pdqcero1ef] {
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

.merc__seccion[b-pdqcero1ef] {
  margin-top: 2px;
  color: var(--seccion-plaza-texto);
  font-weight: 700;
}

.merc__vitrina[b-pdqcero1ef] { gap: 8px; }

/* «Todavía no publicó nada» y sus hermanas: un renglón, no un `.vacio` de tres piezas. Un vacío
   grande por sección partiría la ficha en dos pantallas de cartel. */
.merc__nada[b-pdqcero1ef] { padding: 2px 2px 4px; }

/* La falla de UNA de las dos mitades. Lleva el color de error pero no el ícono ni el botón del
   `.vacio--falla`: la otra mitad de la pantalla llegó bien y sigue siendo verdad. */
.merc__falla-suelta[b-pdqcero1ef] { color: var(--error-texto); padding: 2px 2px 4px; }

/* El error de una escritura. Mismo lugar y mismo tono que `plaza__aviso`. */
.merc__aviso[b-pdqcero1ef] { color: var(--error-texto); }

/* ══ EL BUSCADOR ═══════════════════════════════════════════════════════════════════════════════
   Se dibuja como un `.campo` del framework, pero es una FILA (ícono + entrada + ✕), así que el
   marco lo lleva el contenedor y la entrada va pelada adentro. */
.merc__buscar[b-pdqcero1ef] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alto-tactil);
  padding: 0 14px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  color: var(--sutil);
}
.merc__buscar:focus-within[b-pdqcero1ef] { border-color: var(--primario); }

.merc__campo[b-pdqcero1ef] {
  border: 0;
  background: none;
  color: var(--texto);
  font-family: inherit;
  /* ⚠ 16 px NO ES ESTÉTICA: por debajo de eso iOS hace zoom al enfocar y la pantalla salta. */
  font-size: var(--texto-campo);
  min-width: 0;
  padding: 0;
}
.merc__campo[b-pdqcero1ef]::placeholder { color: var(--sutil); }
/* ⚠ WebKit dibuja SU propia ✕ en un `type="search"` y esa no pasa por nuestro handler: quedarían
   dos cruces, una que limpia de verdad y otra que sólo borra el texto. */
.merc__campo[b-pdqcero1ef]::-webkit-search-cancel-button { display: none; }

.merc__limpiar[b-pdqcero1ef] {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--sutil);
  cursor: pointer;
}

/* ══ LA ESTRELLA ═══════════════════════════════════════════════════════════════════════════════
   Se compone sobre `.btn`/`.btn--contorno` en vez de inventar un botón: de ahí salen gratis el
   apagado de `:disabled`, el `:active` y el anillo de foco del teclado. Cuadrado y de 48, que es el
   piso táctil que el tema declara (`--alto-tactil`). */
.merc__marcar[b-pdqcero1ef],
.merc-neg__marcar[b-pdqcero1ef] {
  flex: none;
  width: 48px;
  padding: 0;
}
/* Puesto: el mismo tinte de sección que la seña. El relleno del dibujo ya distingue los dos
   estados; el fondo es para que se vea de lejos en una lista de doce. */
.merc__marcar--puesto[b-pdqcero1ef],
.merc-neg__marcar--puesto[b-pdqcero1ef] {
  background: var(--seccion-plaza-tinte);
  border-color: transparent;
  color: var(--seccion-plaza-texto);
}

/* ══ UNA FILA DEL ESCAPARATE ═══════════════════════════════════════════════════════════════════
   La tarjeta es un `div` con DOS botones hermanos (abrir · marcar) y no un botón con algo adentro:
   un `<button>` dentro de otro es HTML inválido y el toque en la estrella abriría además la ficha.
   El relleno lo lleva el botón de abrir para que el área tocable sea la tarjeta entera. */
.merc-neg[b-pdqcero1ef] { padding: 0 10px 0 0; gap: 6px; }

.merc-neg__abrir[b-pdqcero1ef] {
  gap: 10px;
  padding: 12px 4px 12px 14px;
  min-height: var(--alto-tactil);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.merc-neg__abrir:active[b-pdqcero1ef] { opacity: .8; }

.merc-neg__sena[b-pdqcero1ef] {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--elevada);
  color: var(--tenue);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.merc-neg__texto[b-pdqcero1ef] { gap: 1px; }
.merc-neg__nombre[b-pdqcero1ef] {
  font-size: 15px;
  font-weight: 600;
  /* Un renglón: el nombre largo se corta y el detalle de abajo sigue siendo legible. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El chevron es la seña de que la fila LLEVA a algún lado — la única promesa que la tarjeta hace, y
   ahora sí la cumple. */
.merc-neg__chevron[b-pdqcero1ef] { flex: none; color: var(--sutil); }

/* ══ UN PRODUCTO DE LA VITRINA ═════════════════════════════════════════════════════════════════ */
.merc-prod[b-pdqcero1ef] { padding: 10px 12px; align-items: flex-start; }

/* ⚠ EL AGOTADO SE ATENÚA **Y ADEMÁS LO DICE CON LA PALABRA**. La opacidad sola sería la mentira
   visual de siempre: quien no distingue el tono lo lee como disponible. El renglón «Agotado» lo
   escribe `Nucleo.Mercado.Disponibilidad` y esto sólo lo acompaña. */
.merc-prod--agotado .merc-prod__foto[b-pdqcero1ef],
.merc-prod--agotado .merc-prod__texto[b-pdqcero1ef] { opacity: .55; }

.merc-prod__foto[b-pdqcero1ef] {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--elevada);
  color: var(--sutil);
}
/* Mismo mecanismo que el logo de la barra: fondo, no `<img>`. Acá además importa porque la fuente
   puede ser una `data:` de varios cientos de KB o una URL del sitio que puede dar 404 — las dos
   fallan sin dejar un recuadro roto.

   ⚠⚠ PERO LA IMAGEN ENTRA POR `background-image` EN LÍNEA Y **NO** POR UNA CUSTOM PROPERTY, Y ESA
   DIFERENCIA ES TODO EL ARREGLO DEL 2026-09-03. Acá decía `background: var(--merc-foto) …` y el
   `.razor` sellaba `--merc-foto: url('data:…')`. **Chrome DESCARTA una custom property cuyo valor
   pase de 2 MiB (2 097 152 caracteres), y lo hace EN SILENCIO**: sin error de consola, con el
   `style=` en el DOM trayendo la foto entera y `getPropertyValue('--merc-foto')` devolviendo
   cadena vacía. Medido con una sonda binaria en el navegador: pinta a 2 097 130 caracteres y no
   pinta a 2 097 182. Y la foto de un producto es la ORIGINAL —no hay miniatura en el servidor:
   1,3 MB de promedio en la base de demo, 1,9 MB la mayor— que en base64 crece un 33 %, así que
   **más de la mitad de las fotos de un catálogo caían del lado que no pinta**: en «Cenaduría La
   Placita», 9 de 17, cada una con su recuadro de 56 px reservado y vacío. Es la falla muda de
   manual. `background-image` en línea NO tiene ese tope (probado con 2,6 MB: pinta), así que el
   valor va directo y esta regla se queda con la geometría. El color de respaldo sigue puesto por
   el `background` de `.merc-prod__foto`: una capa de imagen encima no lo borra. */
.merc-prod__foto--hay[b-pdqcero1ef] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.merc-prod__texto[b-pdqcero1ef] { gap: 2px; padding-top: 1px; }
.merc-prod__nombre[b-pdqcero1ef] { font-size: 15px; font-weight: 600; }
.merc-prod__desc[b-pdqcero1ef] {
  line-height: 1.4;
  /* Tres renglones: una descripción larga no puede empujar el precio fuera de la vista. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.merc-prod__derecha[b-pdqcero1ef] { flex: none; align-items: flex-end; gap: 2px; }
.merc-prod__precio[b-pdqcero1ef] { font-size: 15px; font-weight: 700; }
/* El agotado lleva el color de aviso y no el de error: no falló nada, hoy no hay. */
.merc-prod__agotado[b-pdqcero1ef] { color: var(--aviso-texto); font-weight: 600; }

/* ══ UNA NOVEDAD ═══════════════════════════════════════════════════════════════════════════════ */
.merc-nov[b-pdqcero1ef] { gap: 3px; padding: 12px 14px; }
.merc-nov__titulo[b-pdqcero1ef] { font-size: 15px; font-weight: 600; }
.merc-nov__cuerpo[b-pdqcero1ef] { line-height: 1.45; }
/* /Paneles/Caras/Muro.razor.rz.scp.css */
/* Lo propio del MURO — el port de `TarjetaNovedad` (`MainPage.xaml.cs:2078`), medida por medida.
   Va en CSS con alcance de componente y no en `app.css`, que es el framework COMPARTIDO: una clase
   que sólo usa una cara no tiene por qué poder chocar con otra.

   ⚠ ACÁ NO HAY NINGUNA MEDIDA INVENTADA. Cada número de abajo sale de la tarjeta de MAUI, que es la
   que ya está en el teléfono de alguien: Padding 14, Spacing 5, y 12/15/13/12 de tamaño de letra.
   Los tamaños se escriben con los TOKENS que ya valen eso (--minimo 12 · --cuerpo 15 · --menor 13)
   en vez de con el píxel, para que la escala siga siendo una sola. */

/* La tarjeta: `.hoja` pone el piso, el borde y el radio; acá sólo cambia lo que MAUI tiene distinto
   —14 de relleno en vez de 16— y se arma la columna con su separación de 5. */
.muro__hoja[b-vbb0rwgd8k] {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ⚠ EL NAVEGADOR LE PONE MARGEN A `<h2>` Y A `<p>`, Y MAUI NO TIENE MARGEN NINGUNO: sin este
   reseteo la columna quedaría con la separación del navegador ENCIMA del `gap` de 5, o sea el doble
   de aire y desparejo entre las cuatro líneas. */
.muro__hoja > *[b-vbb0rwgd8k] { margin: 0; }

/* QUIÉN PUBLICÓ. ⚠ MAUI lo pinta con `Primario`; acá lleva el ACENTO DE LA SECCIÓN, que en
   `Tema.xaml:148-153` existe (`SeccionMuro*`) y no lo usaba nadie. Es la variante `-texto`, que es
   la calibrada para leerse SOBRE la superficie de la tarjeta — el `--seccion-muro` pelado es el
   color de la marca de sección, no un color de texto. */
.muro__quien[b-vbb0rwgd8k] {
  font-size: var(--minimo);
  font-weight: 700;
  color: var(--seccion-muro-texto);
}

/* LA LÍNEA QUE SE LEE SIN ENTRAR — en un muro la mayoría de la gente lee sólo esto
   (`novedad.myef`, el `help` de `titulo`). Es un `<h2>` por semántica, así que hay que devolverle a
   mano el tamaño: el del navegador es 1.5em y aplastaría la jerarquía de la cara. */
.muro__titulo[b-vbb0rwgd8k] {
  font-size: var(--cuerpo);
  font-weight: 700;
  line-height: 1.3;
  color: var(--texto);
}

/* EL TEXTO DE LA PUBLICACIÓN.
   ⚠ `pre-wrap` NO ES COSMÉTICA: el `cuerpo` es un campo `text` que alguien escribe a mano, y un
   Label de MAUI respeta los saltos de línea que esa persona tecleó. HTML los colapsa a un espacio,
   así que sin esto una publicación de tres renglones —«Abrimos el domingo. / Hasta las 6. / Traigan
   su ticket.»— llegaría al teléfono como un párrafo corrido que ella no escribió.
   ⚠ Y `overflow-wrap: anywhere` porque en un muro se pegan direcciones: una URL sin espacios es una
   sola «palabra» y estira la tarjeta hasta romper la columna. */
.muro__cuerpo[b-vbb0rwgd8k] {
  font-size: var(--menor);
  line-height: 1.45;
  color: var(--tenue);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La seña del producto enlazado: se dice, no se pinta (ver el comentario del `.razor`). */
.muro__producto[b-vbb0rwgd8k] {
  font-size: var(--minimo);
  color: var(--sutil);
}

/* El rótulo del conteo. `<p>` trae margen del navegador arriba y abajo; arriba sobra —`.cuerpo` ya
   pone su relleno— y abajo se fija en los 12 que usa `.pila` entre tarjetas, para que el aire sea el
   mismo de punta a punta. */
.muro__rotulo[b-vbb0rwgd8k] {
  margin: 0 0 12px;
}
/* /Paneles/Caras/Premios.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO PROPIO DE «MIS PREMIOS» — el segmento de las tres pilas, la tarjeta de premio y la hoja del
   código para el mostrador.

   ⚠ VA ACÁ Y NO EN `wwwroot/css/app.css`. Ese archivo es el framework COMPARTIDO y lo leen las
   siete caras; una clase que sólo usa esta pantalla no tiene por qué poder chocar con otra. Blazor
   le pone un atributo generado a cada elemento de este componente, así que `.tarjeta` de acá y una
   `.tarjeta` de otra cara no se ven nunca.

   ⚠ Y LOS COLORES SALEN DE `tema.css` POR TOKEN, con UNA excepción declarada: los tres literales de
   la tarjeta blanca del QR (`#FFFFFF`, `#201A1B`, `#524346`). Están copiados del XAML
   (`MainPage.xaml:672-679`) y no son un olvido: un QR se lee por contraste, y pintarlo con el tema
   oscuro es un código que el lector del mostrador no toma. La razón larga está en la cabecera del
   `.razor`.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* El `Spacing="14"` del `SecPremios` de MAUI: entre el segmento y lo que venga abajo. */
.premios[b-n0trcpqdp5] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ══ LAS TRES PILAS ════════════════════════════════════════════════════════════════════════════
   El port del `Border` de `MainPage.xaml:290` (piso elevado, padding 4, radio 12) con su Grid de
   tres columnas y `ColumnSpacing="4"`. Es una PÍLDORA segmentada y no unas pestañas subrayadas: las
   subrayadas ya las usa el shell arriba para «Premios | Mis números», y las dos formas dicen cosas
   distintas —aquélla cambia de QUÉ se habla, ésta filtra DENTRO de eso—. Que se vean distintas es
   la mitad del mensaje (`ArmarSegmentosPremios:733`). */
.pilas[b-n0trcpqdp5] {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--elevada);
  border-radius: 12px;
}

/* ⚠ 40 px DE ALTO ES EL NÚMERO DE MAUI (`ArmarSegmentos:709`) y no el `--alto-tactil` de 48. Se
   porta el 40: la celda ocupa un tercio del ancho, así que el área del dedo la da la columna, y
   subirlo a 48 correría 8 px hacia abajo toda la lista contra la maqueta ya vista en el teléfono.
   Si alguna vez se sube, se sube en las dos cabezas. */
.pilas__item[b-n0trcpqdp5] {
  flex: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--tenue);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* La pila elegida se levanta al color de tarjeta sobre el piso elevado del riel — es la misma
   inversión que en MAUI (`PintarPremios:928`), donde el activo pasa a `Superficie` y el resto queda
   transparente. */
.pilas__item--activo[b-n0trcpqdp5] {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 700;
}

.pilas__cuenta[b-n0trcpqdp5] {
  font-size: 11px;
  font-weight: 700;
  color: var(--tenue);
  /* Cifras de ancho fijo: el contador cambia al archivar y sin esto el rótulo se corre de lugar. */
  font-variant-numeric: tabular-nums;
}
.pilas__item--activo .pilas__cuenta[b-n0trcpqdp5] { color: var(--primario); }

/* ══ LA TARJETA DE UN PREMIO ═══════════════════════════════════════════════════════════════════
   `Tarjeta(p)` (`MainPage.xaml.cs:1198`): la hoja compartida (`EstiloTarjeta` = `.hoja`) con el
   padding en cero, porque adentro hay dos zonas con paddings propios separadas por una línea.

   ⚠ `overflow: hidden` NO ES COSMÉTICO: las dos acciones de abajo pintan fondo al tocarlas, y sin
   el recorte ese fondo asoma por fuera de las esquinas redondeadas de la hoja. */
.tarjeta[b-n0trcpqdp5] {
  padding: 0;
  overflow: hidden;

  /* ⚠ LOS CUATRO PARES DE COLOR VIVEN ACÁ Y NO EN C#, y es la única diferencia real de estructura
     contra MAUI: allá `Medallon` y `Pildora` repiten cada uno su `switch` sobre el estado
     (`:1273` y `:1298`), o sea el mismo hecho decidido en dos lugares. Acá el estado viaja como
     CLASE y estas variables se redefinen una vez por estado, abajo. Los valores son los mismos. */
  --medalla-fondo: var(--primario-lavado);
  --medalla-tinta: var(--primario);
  --pildora-fondo: var(--exito-tinte);
  --pildora-tinta: var(--exito-texto);
}

.tarjeta--porvencer[b-n0trcpqdp5] {
  --medalla-fondo: var(--aviso-tinte);
  --medalla-tinta: var(--aviso);
  --pildora-fondo: var(--aviso-tinte);
  --pildora-tinta: var(--aviso-texto);
}

.tarjeta--vencido[b-n0trcpqdp5] {
  --medalla-fondo: var(--error-tinte);
  --medalla-tinta: var(--error);
  --pildora-fondo: var(--error-tinte);
  --pildora-tinta: var(--error-texto);
}

/* Un premio ya canjeado no lleva color de alarma: no pasó nada malo, ya no está en juego. */
.tarjeta--usado[b-n0trcpqdp5] {
  --medalla-fondo: var(--elevada);
  --medalla-tinta: var(--sutil);
  --pildora-fondo: var(--elevada);
  --pildora-tinta: var(--tenue);
}

/* El borde en primario es el ÚNICO cambio que produce guardar en la tarjeta entera
   (`Tarjeta:1246`), y por eso tiene que verse desde lejos: es lo que hace que la pila «Guardados»
   se reconozca sin leerla. */
.tarjeta--marcado[b-n0trcpqdp5] { border-color: var(--primario); }

/* ── la cabeza: abre el detalle ────────────────────────────────────────────────────────────── */
.tarjeta__cabeza[b-n0trcpqdp5] {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
/* La única seña de que es tocable —MAUI tampoco pone chevron acá, al revés que en la fila corta de
   Inicio—, así que el realce del toque hace todo el trabajo. */
.tarjeta__cabeza:not(:disabled):active[b-n0trcpqdp5] { background: var(--elevada); }
/* Sin código no hay detalle que abrir; la cabeza lo dice con una línea y deja de responder. */
.tarjeta__cabeza:disabled[b-n0trcpqdp5] { cursor: default; }

/* El medallón: 44×44, radio 11, anclado ARRIBA (`Medallon:1281 VerticalOptions.Start`) para que no
   se centre contra una tarjeta que crece cuando el nombre ocupa dos renglones. */
.tarjeta__medalla[b-n0trcpqdp5] {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--medalla-fondo);
  /* El `<Icono>` hereda el color: `currentColor` es todo el cableado que hace falta. */
  color: var(--medalla-tinta);
}

.tarjeta__quien[b-n0trcpqdp5] {
  flex: 1;
  min-width: 0;              /* o un nombre largo revienta la fila */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tarjeta__nombre[b-n0trcpqdp5] {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
}

/* La píldora del estado: `Pildora(p)` (`:1296`) — radio 999, alineada al arranque de la columna y
   con 2 px de aire arriba, que es su `Margin` en MAUI. */
.tarjeta__pildora[b-n0trcpqdp5] {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pildora-fondo);
  color: var(--pildora-tinta);
  font-size: 11px;
}

/* ── las dos acciones ──────────────────────────────────────────────────────────────────────── */
/* La línea de arriba y la del medio son los dos `BoxView` de 1 px de `Tarjeta:1252` y `:1259`. */
.tarjeta__acciones[b-n0trcpqdp5] {
  display: flex;
  border-top: 1px solid var(--borde);
}

.tarjeta__accion[b-n0trcpqdp5] {
  flex: 1;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--tenue);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tarjeta__accion + .tarjeta__accion[b-n0trcpqdp5] { border-left: 1px solid var(--borde); }
.tarjeta__accion:active[b-n0trcpqdp5] { background: var(--elevada); }

/* ⚠ EL MAGENTA ACÁ ES ESTADO Y NO INVITACIÓN: dice «esto YA está guardado». Por eso lo lleva sólo
   este botón y nunca «Archivar», que es la misma decisión que `PintarBotonesDetalle:1363` escribe
   para los botones de la hoja. */
.tarjeta__accion--marcado[b-n0trcpqdp5] { color: var(--primario); }

/* ══ LA HOJA DEL CÓDIGO ════════════════════════════════════════════════════════════════════════
   `PanelDetalle` (`MainPage.xaml:653`): un velo oscuro y una hoja pegada abajo.

   ⚠ `.panel` trae `background: var(--fondo)` y se pisa acá a propósito: el piso lo pone el velo, que
   es un elemento aparte para poder recibir el toque. La regla gana por especificidad —el CSS con
   alcance agrega el atributo del componente— sin importar el orden de los archivos. */
.detalle[b-n0trcpqdp5] {
  background: transparent;
  justify-content: flex-end;
}

/* El `#73000000` del XAML: negro al 45 %. Es un botón de verdad y no un `div` pintado — así el
   navegador le da su manejo de puntero sin cablear nada. */
.detalle__velo[b-n0trcpqdp5] {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(0 0 0 / .45);
  cursor: pointer;
}

.detalle__hoja[b-n0trcpqdp5] {
  position: relative;        /* por encima del velo, que es su hermano absoluto */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 20px 28px;
  /* ⚠ EL `safe-area` NO ESTÁ EN MAUI Y ACÁ HACE FALTA: la app instalada dibuja debajo de la franja
     del gesto de inicio, y sin este hueco los dos botones quedan debajo de algo que el sistema
     pinta encima y el dedo no alcanza. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-radius: 22px 22px 0 0;
  /* ⚠ TAMPOCO ESTÁ EN MAUI, y es del medio: acá la ventana puede ser mucho más baja (un teléfono
     acostado, o el navegador con su barra de URL desplegada) y una hoja más alta que la pantalla
     dejaría los botones fuera de alcance, sin scroll y sin aviso. */
  max-height: 100%;
  overflow-y: auto;
}

/* El agarre: 38×4, radio 2, centrado (`MainPage.xaml:657`). */
.detalle__agarre[b-n0trcpqdp5] {
  flex: none;
  align-self: center;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--borde);
}

.detalle__cabeza[b-n0trcpqdp5] { align-items: flex-start; }

.detalle__nombre[b-n0trcpqdp5] {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--texto);
}
.detalle__donde[b-n0trcpqdp5] { margin: 3px 0 0; }

/* 48×48 y no el tamaño del dibujo: el ícono mide 22, el área que responde es la del pulgar. Es el
   mismo `Grid WidthRequest=48` que envuelve al ícono en el XAML (`:666`). */
.detalle__cerrar[b-n0trcpqdp5] {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}

/* ── la tarjeta blanca: acá vive la excepción de color ─────────────────────────────────────── */
/* ⚠ BLANCA Y CON TINTA OSCURA EN LOS DOS MODOS. Un QR se lee por contraste; en tema oscuro sería un
   código que el lector del mostrador no toma, y quien lo mira no tendría cómo saber por qué. La
   zona tranquila del código —cuatro módulos, parte del estándar— sale del `viewBox` del SVG y cae
   sobre este blanco, así que no hay que reservarle padding. */
.detalle__papel[b-n0trcpqdp5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: #FFFFFF;
}

.detalle__qr[b-n0trcpqdp5] {
  /* 176 es el lado de `CodigoPintado` en MAUI. El `min()` es del medio: en una pantalla de 320 px el
     ancho útil de la tarjeta es menor y un cuadro fijo se saldría del papel. */
  width: min(176px, 100%);
  height: auto;
  aspect-ratio: 1;
}

/* ⚠ EN CIFRAS DE ANCHO FIJO, y no es gusto: el código es Crockford —sin I, L, O ni U, justo para
   que no se confundan— y una tipografía de texto vuelve a juntar el 0 con la O cuando alguien lo
   dicta sobre el ruido de un local. Es el mismo criterio que `.campo--cifras` ya aplica en la
   puerta al campo donde se teclea el código de entrar. */
.detalle__codigo[b-n0trcpqdp5] {
  margin: 0;
  font-family: var(--letra-cifras);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;          /* compensa el espaciado del último carácter, o el texto se ve corrido */
  text-align: center;
  color: #201A1B;
}

/* `white-space: pre-line` porque el texto trae el salto de línea del original
   (`AbrirDetalle:1349`): «Muéstralo en el mostrador.» y debajo «Vence el …». */
.detalle__pie[b-n0trcpqdp5] {
  margin: 0;
  font-size: var(--minimo);
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  color: #524346;
}

.detalle__botones[b-n0trcpqdp5] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* `.btn--contorno` pinta el texto en `--primario`; los dos de acá son secundarios y arrancan en
   `--tenue`. La regla gana por especificidad (el atributo del componente), no por el orden. */
.detalle__accion[b-n0trcpqdp5] { color: var(--tenue); }

/* El magenta vuelve sólo para decir «ya está guardado» — estado, no invitación. */
.detalle__accion--marcado[b-n0trcpqdp5] { color: var(--primario); }
/* /Paneles/Caras/Sorteos.razor.rz.scp.css */
/* Lo propio de «MIS NÚMEROS». Va en CSS con alcance de componente —Blazor le pone un atributo
   generado a cada elemento que ESTA cara rinde— y no en `app.css`, que es el framework COMPARTIDO:
   un boleto de sorteo no lo dibuja nadie más, así que su clase no tiene por qué poder chocar con
   otra pantalla. Lo compartido —`.pila`, `.hoja`, `.crece`, `.vacio`, `.t-cifra`— ya está allá y
   acá no se repite.

   ⚠ LA TARJETA NO SE REDEFINE. `.hoja` ya es exactamente el `Tarjeta` de MAUI —superficie, borde de
   1 px, radio 14, relleno 16 (`Tema.xaml:328`)— así que el boleto sólo agrega su LAYOUT. Volver a
   declarar el fondo o el radio acá sería una segunda fuente de verdad para la misma tarjeta. */

/* ⚠ EL NAVEGADOR LE PONE `margin-block: 1em` A CADA `<p>`, Y MAUI NO TIENE MARGEN NINGUNO — y en un
   contenedor flex los márgenes NO SE COLAPSAN: se SUMAN al `gap`.

   La línea de origen (`Sorteos.razor:100-102`) es hija directa del `.pila` de `:87`, que separa con
   12 px, así que sin este reseteo queda con ~13 px de aire muerto ARRIBA —encima de los 16 del
   `.cuerpo`— y ~25 px hasta la lista, donde `SecSorteos` (`MainPage.xaml:472`) pide `Spacing="12"`
   exactos. El `<ul>` de abajo ya lo tenía resuelto; los `<p>` se escaparon.

   ⚠ ES LA MISMA TRAMPA QUE DOS CARAS HERMANAS DOCUMENTAN POR SU NOMBRE: `Muro.razor.css:20-22`
   («sin este reseteo la columna quedaría con la separación del navegador ENCIMA del `gap`») y
   `Canales.razor.css:16-17`, que resuelve el mismo elemento —un `<p>` de contexto arriba de una
   lista— con `margin: 0 0 12px`. Acá el `gap` del `.pila` ya pone los 12, así que alcanza con apagar
   el margen y no hay que reponerlo.

   ⚠ `> p` Y NO `p` A SECAS, que es lo que lo deja preciso: el CSS con alcance le pega el atributo
   generado al ÚLTIMO elemento del selector, o sea `.pila > p[b-xxx]`. Eso toma la línea de origen y
   NO los `<p>` de adentro de `.vacio`, que no son hijos directos del `.pila` — ésos son de las siete
   caras y los resetea el framework en `app.css`, que es donde va lo compartido. */
.pila > p[b-dtg7ixwwmc] { margin: 0; }

/* ⚠ LA LISTA ES UNA `<ul>` DE VERDAD, y estas tres líneas son lo que cuesta. A cambio, quien navega
   con lector de pantalla oye «lista, 3 elementos» antes del primer número — que es justo el dato que
   esta pantalla contesta— en vez de tres bloques sueltos. `.pila` (del framework) sigue poniendo el
   hueco de 12 px entre filas, el mismo `Spacing="12"` de `SecSorteos`.

   ⚠⚠ Y POR ESO EL `<ul>` LLEVA `role="list"` EN EL MARKUP. `list-style: none` le SACA a Safari la
   semántica de lista —VoiceOver deja de anunciar «lista, 3 elementos»— así que sin ese role este
   comentario sería falso justo en iOS, que es media audiencia de un teléfono. El role la repone y
   no cuesta nada. */
.sorteos__lista[b-dtg7ixwwmc] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La fila del boleto: el número a la izquierda, el detalle a la derecha — el port del Grid
   `ColumnDefinitions="Auto,*"` con `ColumnSpacing = 14` de `MainPage.xaml.cs:991-992`.
   ⚠ No usa `.fila` del framework porque ésa separa con 10 px y acá el número necesita los 14 de
   MAUI: pegado, el bloque de texto se lee como parte de la cifra. */
.sorteos__boleto[b-dtg7ixwwmc] {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* EL NÚMERO — lo único grande de la pantalla, porque en un boleto lo que se busca es el número.
   ⚠ 26 px CRUDOS Y NO UN TOKEN, a propósito: la escala tipográfica va de `--titulo` (22) a
   `--titulo-grande` (40) y ninguno de los dos es esto. No es un encabezado: es una CIFRA de
   exhibición, la misma medida que `MainPage.xaml.cs:998` fijó mirando el teléfono.

   ⚠ EL COLOR ES EL ACENTO DE LA SECCIÓN Y NO EL PRIMARIO. MAUI usa el magenta porque se escribió
   cuando el magenta hacía todos los trabajos; `tema.css` nombra eso como la razón de que la app se
   viera «correcta y muerta», y los cinco acentos nacieron para repartirlo. Contrastes MEDIDOS, no
   elegidos a ojo: #86409B sobre `--superficie` clara = 6.5:1, #DDA6EE sobre la oscura = 8.8:1 —
   los dos pasan AA tratándolos como texto normal, y esto es texto grande. */
.sorteos__numero[b-dtg7ixwwmc] {
  font-size: 26px;
  font-weight: 700;
  /* El `CharacterSpacing = 2` de MAUI, que son unidades absolutas sobre una letra de 26: 2/26 ≈ .08.
     En `em` la separación sigue al tamaño en vez de quedarse clavada si algún día cambia. */
  letter-spacing: .08em;
  color: var(--seccion-sorteo);

  /* ⚠ EL PISO DE ANCHO ES LO QUE ALINEA LA COLUMNA. El número es el correlativo de su sorteo con
     tantas cifras como declare `sorteo.cifras` —4 por defecto, «0007»— y con `4ch` sobre la letra
     monoespaciada de `.t-cifra` todos los boletos de ancho normal arrancan su texto en la misma
     vertical. Es un PISO y no un ancho fijo: un sorteo de 5 o 6 cifras empuja y no se recorta.
     ⚠ Y el `text-indent` compensa el espacio que `letter-spacing` agrega DESPUÉS del último dígito;
     sin él, un número centrado se ve corrido a la izquierda. Misma corrección que
     `Puerta.razor.css` hace en el campo del código. */
  min-width: 4ch;
  text-align: center;
  text-indent: .08em;
}

/* El detalle. `.crece` (del framework) ya le da `flex:1` y el `min-width:0` que evita que un nombre
   de sorteo largo reviente la fila; acá sólo se apila, con el `Spacing="3"` de MAUI. */
.sorteos__detalle[b-dtg7ixwwmc] {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ⚠ LA ESCALA SE TRADUCE, NO SE COPIA. MAUI usa 14 y 12 px crudos; acá van los dos tokens vecinos
   de la escala móvil —`--cuerpo` (15) y `--menor` (13)— que conservan la misma distancia de 2 px y
   la misma jerarquía. Clavar 14 px sería meter un tamaño que no existe en el sistema para copiar un
   número de otro. */
.sorteos__sorteo[b-dtg7ixwwmc] {
  font-size: var(--cuerpo);
  font-weight: 700;
  color: var(--texto);
}

.sorteos__cuando[b-dtg7ixwwmc] {
  font-size: var(--menor);
  color: var(--tenue);
}

/* ⚠ EL BOLETO QUE SALIÓ SE VE. Es lo ÚNICO que esta cara agrega a MAUI, donde las tres variantes del
   «cuándo» comparten el mismo gris: entre doce filas iguales, el único hecho que la pantalla existe
   para contar quedaba indistinguible. El texto es el mismo —«Ya se celebró · ¡salió!»—; lo que
   cambia es que se lea de un vistazo. Sin ícono y sin banda: eso ya sería diseño inventado. */
.sorteos__cuando--salio[b-dtg7ixwwmc] {
  color: var(--exito-texto);
  font-weight: 700;
}
/* /Paneles/Puerta.razor.rz.scp.css */
/* Lo propio de LA PUERTA. Va en CSS con alcance de componente —Blazor le pone un atributo generado
   a cada elemento— y no en `app.css`, que es el framework COMPARTIDO: una clase que sólo usa un
   panel no tiene por qué poder chocar con otro. */

.puerta[b-cxtv8njm7r] {
  /* La puerta no tiene barra abajo, así que recupera el aire que `.cuerpo` reserva para ella —pero
     conservando el `safe-area`, que sigue existiendo. */
  padding: 36px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.puerta__paso[b-cxtv8njm7r] {
  margin-top: 24px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

/* La lada: se muestra, no se teclea. Mismo alto que el campo de al lado o la fila queda coja. */
.puerta__lada[b-cxtv8njm7r] {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-tactil);
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-size: var(--texto-campo);
  color: var(--texto);
}

/* El código: seis caracteres Crockford, grandes y separados. El `text-transform` es visual y la
   normalización de verdad la hace `AlEntrar` con `ToUpperInvariant` — un `text-transform` sólo
   cambia cómo se DIBUJA, y confiar en él para el valor es de los errores más viejos del oficio. */
.puerta__codigo[b-cxtv8njm7r] {
  min-height: 60px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .3em;
  text-indent: .3em;      /* compensa el espaciado del último carácter, o el texto se ve corrido */
  text-transform: uppercase;
}

.puerta__falla[b-cxtv8njm7r] { color: var(--error-texto); }
/* /Vistas/Icono.razor.rz.scp.css */
/* ⚠ `block` Y `flex:none`, LAS DOS POR LA MISMA RAZÓN: un `<svg>` es `inline` por defecto, y eso
   trae dos problemas que sólo se ven al lado de un texto. Como inline, se sienta sobre la línea base
   y deja ~4 px de aire abajo que descuadran toda fila que lo mezcle con un rótulo. Y dentro de un
   `.fila` (flex) es un ítem más: sin `flex:none` se ENCOGE cuando el texto de al lado es largo, y el
   dibujo sale ovalado. */
.ico[b-bqc8e6i905] {
  display: block;
  flex: none;
}