/* reportes.repos.mx — la hoja del portal del dueño (E17-21, E17-31).
 *
 * Ni un color literal: todo sale de repos-tokens.css (docs/IDENTIDAD_REPOS.md).
 * Lo que esta hoja NO define lo pone broadsheet.css — .card, .tag, .btn,
 * .text-muted —, que ya deriva de los mismos tokens.
 *
 * E17-58 — cada selector de aquí aparece en una vista de Views/ o en un JS de
 * wwwroot/js (TableroDelClienteLayoutTests.Css_SinSelectoresMuertos). Hay UNA
 * tarjeta (`.tablero-tarjeta` / `.tablero-card-panel`, la misma regla) y UN
 * esqueleto (`.tablero-esqueleto`, con su brillo). Lo que se deja de pintar se
 * borra aquí también: las cifras, sucursales, barras y el masonry de E17-21 y
 * E17-31 se fueron cuando el tablero pasó a KPIs y Chart.js (f3c2e8b1).
 *
 * E17-94 — dos cortes y nada más: `@media (max-width: 1199.98px)` (tableta y
 * celular) y `@media (max-width: 599.98px)` (celular), los tres anchos de
 * DECISIONES_VIGENTES. Antes había 860, 900, 1100 y 600 sueltos y, entre 860
 * y 1199, el rail convivía con la plantilla de una columna.
 */

.tablero-kicker {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

/* ---------- las tablas de Reportes ---------- */

.tablero-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tablero-tabla th,
.tablero-tabla td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--repos-border-subtle);
}

.tablero-tabla th {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--repos-fg-muted);
}

.tablero-tabla .tablero-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* E17-59 — Reportes: un índice, un periodo y un botón de descarga (propuesta
 * 2026-09-28 §4.8, pantalla 07-reportes.png). A la izquierda los cinco reportes,
 * uno a la vez y cada uno con su URL; arriba el control de periodo común y
 * «Descargar» (CSV y PDF en un <details>); en el reporte, cuatro cifras, la
 * gráfica que le toca y la tabla con su renglón de total. Todo con los tokens
 * y las tarjetas del Tablero: nada de esto es un color ni una tarjeta nueva. */

.rep-arriba {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 20px;
}

/* Compuesto: `.rep-encabezado` se define más abajo y ganaría. */
.rep-encabezado.rep-cabeza {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.rep-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.rep-descargar {
  position: relative;
}

.rep-descargar > summary {
  list-style: none;
  cursor: pointer;
  background: var(--repos-surface);
}

.rep-descargar > summary::-webkit-details-marker {
  display: none;
}

.rep-descargar > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.rep-descargar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  box-shadow: 0 8px 24px var(--repos-shadow);
}

.rep-descargar-menu a {
  padding: 8px 12px;
  border-radius: var(--repos-radius-sm);
  color: var(--repos-fg);
  font-size: 14px;
  text-decoration: none;
}

.rep-descargar-menu a:hover {
  background: var(--repos-bg);
}

.rep-cuerpo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.rep-indice {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rep-indice-enlace {
  padding: 10px 12px;
  border-radius: var(--repos-radius-sm);
  color: var(--repos-fg);
  text-decoration: none;
}

.rep-indice-enlace:hover {
  background: var(--repos-border-subtle);
}

.rep-indice-marcado,
.rep-indice-marcado:hover {
  background: var(--repos-cian-100);
  color: var(--repos-cian-700);
  font-weight: 700;
}

.rep-indice-nota {
  margin: 0;
  padding: 12px 12px 0;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.rep-reporte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* «Caja»: el mismo aspecto que las pastillas del periodo, con su rótulo dentro. */
.rep-cajas {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
}

.rep-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Una cifra que es una frase o un nombre («Efectivo», «Sin datos suficientes…»): en la letra del portal, no en mono grande. */
.tablero-kpi-cifra.rep-cifra-texto {
  font-family: var(--repos-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.tablero-card-header.rep-grafica-cabeza {
  flex-wrap: wrap;
  align-items: center;
}

.rep-grafica-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.rep-leyenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.rep-leyenda-trazo {
  width: 18px;
  height: 3px;
  background: var(--repos-cian-600);
}

.rep-leyenda-punteada {
  width: 18px;
  border-top: 2px dashed var(--repos-cian-800);
}

.rep-grafica {
  position: relative;
  height: 260px;
}

.rep-dona {
  height: 300px;
}

a.tablero-btn-toggle {
  display: inline-block;
  text-decoration: none;
}

/* La tabla ocupa la tarjeta entera: sus renglones llegan a los bordes. */
.tablero-tarjeta.rep-tabla {
  padding: 0;
  overflow-x: auto;
}

.rep-tabla .tablero-tabla th:first-child,
.rep-tabla .tablero-tabla td:first-child {
  padding-left: 20px;
}

.rep-tabla .tablero-tabla th:last-child,
.rep-tabla .tablero-tabla td:last-child {
  padding-right: 20px;
}

.rep-tabla .tablero-numero {
  font-family: var(--repos-font-mono);
}

.rep-tabla-titulo {
  margin: 16px 20px 0;
  font-size: 16px;
}

/* El renglón de total, abajo: en negritas y sobre el fondo de la hoja. */
.rep-total th,
.rep-total td {
  border-bottom: 0;
  background: var(--repos-bg);
  color: var(--repos-fg);
  font-weight: 700;
}

.rep-total th {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.rep-sin-cortar {
  font-size: 11px;
  padding: 3px 8px;
}

@media (max-width: 1199.98px) {
  .rep-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .rep-indice {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rep-indice-nota {
    flex-basis: 100%;
    padding-top: 4px;
  }

  .rep-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rep-acciones {
    justify-content: flex-start;
  }
}

/* ---------- la tarjeta sin datos ---------- */

.tablero-vacio {
  border: 1px dashed var(--repos-border);
  border-radius: var(--repos-radius-sm);
  padding: 1.5rem;
  color: var(--repos-fg-muted);
  font-size: 14px;
}

/* ==========================================================================
 * E17-31 — reportes.repos.mx como aplicación aparte.
 *
 * El dueño lo pidió literal: «ReportesRepos es un sitio para el cliente y
 * [el menú del home] ya no va, también el footer; reportes debe sentirse como
 * una aplicación diferente con su propio layout: menú lateral, estadísticas
 * del dashboard con tarjetas dentro de un contenedor tipo masonry».
 *
 * Esta hoja ya no se carga ENCIMA de landing.css: `_LayoutReportes.cshtml`
 * carga repos-tokens + broadsheet + ésta, y nada más. Por eso aparecen aquí
 * `.wrap` y `.rep-marca`, que antes ponía la landing: el portal las necesita y
 * el folleto de ventas ya no viene con ellas.
 * ========================================================================== */

/* ---------- el cascarón ---------- */

.rep-app {
  background: var(--repos-bg);
  max-width: 100vw;
  overflow-x: hidden;
}

.rep-marco {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

/* E17-52 (D-9 a) — el rail es el de Oficina: fondo del encabezado y los
 * tokens `--of-rail-*`, ni un color literal. Va a todo lo alto para que
 * «Tu cuenta» se quede al pie. */
.rep-lateral {
  flex: 0 0 232px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background: var(--repos-header-bg);
  color: var(--of-rail-fg);
  padding: 18px 12px;
}

.rep-lateral-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 8px;
  margin-bottom: 18px;
}

.rep-marca {
  display: inline-flex;
  align-items: center;
}

.rep-marca img {
  height: 20px;
  width: auto;
}

/* E17-95/AC-1 — la sección y el negocio de la franja: sólo en el celular
 * (abajo, en el corte de 599.98). En tableta y PC el negocio está en la placa
 * «Viendo» del menú. */
.rep-franja-titulo,
.rep-franja-negocio {
  display: none;
}

.rep-contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 32px 72px;
}

/* Login y recuperar: el mismo marco, sin menú y centrado. */
.rep-contenido-solo {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 48px;
}

/* E17-33 — el login lleva detrás, a pantalla completa, una de las dieciocho
 * fotos del sitio legado (la elige `FondoAleatorio` en cada carga). Va fija
 * y detrás de todo; la tarjeta queda encima con su propio fondo, así que el
 * texto no se lee sobre la foto. Recuperar contraseña no la lleva. */
.rep-login-fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--repos-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.rep-login-encima {
  position: relative;
  z-index: 1;
}

/* Las pantallas que todavía se maquetan con `.wrap` (Negocio, Instalaciones,
 * Catálogos, Reportes, Facturación, Login) ya no lo reciben de landing.css.
 * Dentro del marco no vuelve a centrar ni a meter su propio ancho: de eso se
 * ocupa `.rep-contenido`. */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- el menú lateral ---------- */

.rep-menu-interruptor {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* El botón del teléfono. En escritorio no existe: el menú está siempre ahí. */
.rep-menu-boton {
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  color: var(--repos-header-fg);
  border: 1px solid var(--of-rail-linea);
  border-radius: var(--repos-radius-sm);
}

.rep-menu-rayas,
.rep-menu-rayas::before,
.rep-menu-rayas::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--repos-header-fg);
}

.rep-menu-rayas {
  position: relative;
}

.rep-menu-rayas::before,
.rep-menu-rayas::after {
  content: "";
  position: absolute;
  left: 0;
}

.rep-menu-rayas::before { top: -5px; }
.rep-menu-rayas::after { top: 5px; }

/* E17-52/AC-1 — tres grupos: Consulta, Configuración y, al pie, Tu cuenta. */
.rep-menu {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rep-menu-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rep-menu-grupo-titulo {
  padding: 0 10px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--of-rail-fg-muted);
}

.rep-menu-pie {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--of-rail-linea);
}

.rep-menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rep-menu-enlace {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--repos-radius-sm);
  font-size: 14px;
  text-decoration: none;
  color: var(--of-rail-fg);
}

.rep-menu-enlace:hover {
  background: var(--of-rail-chip);
  color: var(--repos-header-fg);
}

/* La sección actual no es un enlace: es la marcada. */
.rep-menu-actual {
  background: var(--repos-accent);
  color: var(--repos-fg-sobre-relleno);
  font-weight: 600;
}

.rep-menu-salir {
  color: var(--of-rail-fg-muted);
}

/* E17-51 — el negocio y la sucursal, arriba del menú: se eligen una vez y
 * todas las secciones los leen. Sin JS: un formulario con su botón. */
/* E17-52 — el contexto es la placa de arriba del rail («Viendo»). */
.rep-contexto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--of-rail-chip);
}

.rep-contexto-etiqueta {
  font-size: 12px;
  color: var(--of-rail-fg-muted);
}

/* E17-94 — el selector va a todo lo ancho de la placa y «Cambiar» debajo:
 * lado a lado, en los 208 px del rail sólo se leía «Fonda La». */
.rep-contexto-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rep-contexto-select {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 8px;
  border: 1px solid var(--of-rail-linea);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-header-bg);
  color: var(--repos-header-fg);
}

.rep-contexto-boton {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--of-rail-linea);
  border-radius: var(--repos-radius-sm);
  background: var(--of-rail-chip);
  color: var(--repos-header-fg);
  cursor: pointer;
}

.rep-contexto-unico {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--repos-header-fg);
}

/* E17-92 — «Cambiar de negocio»: vuelve a «¿A qué negocio quieres entrar?».
 * E17-94 — estas reglas y las de `.rep-elegir-*` y `.rep-suscripcion-aviso`
 * se perdieron en b85bd07d4 (E30-03) y la pantalla salía sin estilo: con
 * botones del navegador y viñetas. Vuelven tal cual las escribió E17-92. */
.rep-contexto-cambiar {
  font-size: 13px;
  color: var(--repos-header-fg);
  text-decoration: underline;
}

/* E17-92 — «¿A qué negocio quieres entrar?»: una tarjeta (botón) por licencia. */
.rep-elegir {
  max-width: 780px;
}

.rep-elegir-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.rep-elegir-lista form {
  margin: 0;
  height: 100%;
}

.rep-elegir-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: var(--repos-touch-min);
  padding: 16px 20px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  color: var(--repos-fg);
  font-family: var(--repos-font);
  text-align: left;
  cursor: pointer;
}

.rep-elegir-tarjeta:focus-visible,
.rep-elegir-tarjeta[aria-current="true"] {
  border-color: var(--repos-accent);
}

.rep-elegir-nombre {
  font-size: 18px;
  font-weight: 700;
}

.rep-elegir-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.rep-elegir-estado[data-estado="Vencida"],
.rep-elegir-estado[data-estado="Suspendida"],
.rep-elegir-estado[data-estado="Cancelada"] {
  color: var(--repos-danger);
  font-weight: 600;
}

.rep-elegir-actual {
  font-size: 12px;
  color: var(--repos-accent);
}

.rep-elegir-salir {
  margin-top: 20px;
  font-size: 14px;
}

/* E17-52/AC-5 — el aviso de la cuenta demo: una franja de una línea. */
.rep-aviso-demo {
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px solid var(--repos-warning-border);
  border-radius: 10px;
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* E21-62/AC-2 — Carta › Pedidos: la caja sigue en demo y los pedidos están
 * pausados. Misma franja que el aviso del demo, a las líneas que necesite. */
.rep-aviso-pausa {
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 1px solid var(--repos-warning-border);
  border-radius: 10px;
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
  font-size: 13px;
}

/* E17-94 — en el celular la frase entera (88 caracteres) no cabe en una
 * línea y se cortaba a la mitad: ahí la franja crece a dos. */
@media (max-width: 599.98px) {
  .rep-app .rep-aviso-demo {
    white-space: normal;
  }
}

/* E17-57 — táctil y foco de todo el portal (propuesta 2026-09-28 §2.6 U-27/U-28
 * y §4.6; pantallas 03-tablero-telefono y 06-componentes). Un solo bloque,
 * junto al marco, para que ningún control quede fuera:
 *   · Por debajo de 1200 px (tableta y teléfono) todo control mide como mínimo
 *     `--repos-touch-min` (44 px): botones, enlaces-botón, pestañas, pastillas
 *     de periodo, campos, selectores, casillas con su etiqueta e interruptores.
 *     Los enlaces dentro de un párrafo (WCAG 2.5.8) se quedan en su línea.
 *   · Foco visible (`:focus-visible`) con los tokens en el rail, la barra
 *     inferior, las pestañas y el periodo; el rail oscuro usa el cian claro.
 *     `aria-current` marca lo actual y `aria-pressed` los conmutadores
 *     (Monto/Cantidad).
 * El prefijo `.rep-app` (el <body> del portal) sube la especificidad para que
 * este bloque gane a las reglas de más abajo sin repetir cada media query. */
.rep-app .rep-menu-enlace:focus-visible,
.rep-app .rep-contexto-select:focus-visible,
.rep-app .rep-contexto-boton:focus-visible,
.rep-app .rep-marca:focus-visible,
.rep-app .rep-menu-interruptor:focus-visible ~ .rep-marco .rep-menu-boton,
.rep-app .rep-menu-interruptor:focus-visible ~ .rep-marco label.rep-franja-negocio {
  outline: 2px solid var(--repos-cian-400);
  outline-offset: -2px;
}

.rep-app .rep-barra-enlace:focus-visible,
.rep-app .rep-menu-interruptor:focus-visible ~ .rep-barra .rep-barra-mas,
.rep-app .alertas-pestana:focus-visible,
.rep-app .carta-pestana:focus-visible,
.rep-app .periodo-opcion:focus-visible,
.rep-app .rep-indice-enlace:focus-visible,
.rep-app .rep-configurar-indice a:focus-visible,
.rep-app .rep-descargar-menu a:focus-visible,
.rep-app .tablero-btn-toggle:focus-visible,
.rep-app .tablero-alertas-enlace:focus-visible,
.rep-app .alertas-agregar > summary:focus-visible,
.rep-app .carta-direccion summary:focus-visible,
.rep-app a.tag:focus-visible,
.rep-app .btn:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: -2px;
}

.rep-app .rep-campo-casilla input:focus-visible,
.rep-app .rep-catalogo-inactivos input:focus-visible,
.rep-app .periodo-campo input:focus-visible,
.rep-app .carta-mesas-buscar:focus-visible,
.rep-app .carta-mesas-formulario input:focus-visible,
.rep-app .carta-mesa-panel input:focus-visible,
.rep-app .carta-icono:focus-visible,
.rep-app .input:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 2px;
}

@media (max-width: 1199.98px) {
  .rep-app .btn,
  .rep-app .rep-menu-enlace,
  .rep-app .rep-menu-boton,
  .rep-app .rep-contexto-select,
  .rep-app .rep-contexto-boton,
  .rep-app .rep-indice-enlace,
  .rep-app .rep-configurar-indice a,
  .rep-app .rep-descargar > summary,
  .rep-app .rep-descargar-menu a,
  .rep-app .periodo-opcion,
  .rep-app .periodo-campo input,
  .rep-app .rep-campo input:not([type="checkbox"]):not([type="radio"]),
  .rep-app .rep-campo select,
  .rep-app .rep-campo textarea,
  .rep-app .input,
  .rep-app input[type="file"],
  .rep-app .rep-catalogo-buscar,
  .rep-app .rep-catalogo-campo,
  .rep-app .rep-catalogo-inactivos,
  .rep-app .rep-campo-casilla,
  .rep-app .tablero-btn-toggle,
  .rep-app .tablero-alertas-enlace,
  .rep-app .carta-pestana,
  .rep-app .alertas-pestana,
  .rep-app .alertas-agregar > summary,
  .rep-app .carta-direccion summary,
  .rep-app .transferencia-rechazo > summary,
  .rep-app .carta-mesas-buscar,
  .rep-app .carta-mesas-panel > summary,
  .rep-app .carta-mesas-formulario input,
  .rep-app .carta-mesa-panel input,
  .rep-app .carta-icono,
  .rep-app a.tag {
    min-height: var(--repos-touch-min);
  }

  /* Un enlace o un resumen es una caja en línea: para que los 44 px sean
   * área tocable y el texto quede al centro, se vuelven cajas flexibles. */
  .rep-app .rep-indice-enlace,
  .rep-app .rep-descargar-menu a {
    display: flex;
    align-items: center;
  }

  .rep-app .tablero-alertas-enlace,
  .rep-app .carta-direccion summary {
    display: inline-flex;
    align-items: center;
  }

  .rep-app .tablero-btn-toggle {
    padding: 0 16px;
  }

  .rep-app .rep-contexto-boton {
    padding: 0 14px;
  }

  /* La casilla es lo que se toca, y la etiqueta entera con ella. */
  .rep-app .rep-campo-casilla input,
  .rep-app .rep-catalogo-inactivos input {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin: 0;
  }

  /* E17-94 — salvo el interruptor de Parámetros, que también vive en una
   * `.rep-campo-casilla`: la regla de arriba lo dejaba en 24 × 24 y su pista
   * de 38 px se pintaba encima del nombre del parámetro. */
  .rep-app .rep-campo-casilla input.rep-interruptor {
    flex: 0 0 var(--repos-touch-min);
    width: var(--repos-touch-min);
    height: var(--repos-touch-min);
  }

  /* La muestra de color de Carta, en su caja de 44 px. */
  .rep-app .rep-campo input.carta-color-muestra {
    flex: 0 0 var(--repos-touch-min);
    width: var(--repos-touch-min);
    height: var(--repos-touch-min);
    min-height: var(--repos-touch-min);
  }

  .rep-app .carta-color-caja {
    padding-block: 0;
  }

  /* El interruptor «Activo» de Catálogos: la pista de 38 × 22 se queda, pero
   * el control (lo que recibe el dedo) es una caja de 44 × 44, como el de Alertas. */
  .rep-app .rep-interruptor {
    box-sizing: border-box;
    width: var(--repos-touch-min);
    height: var(--repos-touch-min);
    border-radius: var(--repos-radius-sm);
    background: transparent;
  }

  .rep-app .rep-interruptor::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 3px;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--repos-gris-300);
    transition: background 0.15s ease;
  }

  .rep-app .rep-interruptor:checked {
    background: transparent;
  }

  .rep-app .rep-interruptor:checked::before {
    background: var(--repos-accent);
  }

  .rep-app .rep-interruptor::after {
    top: 14px;
    left: 6px;
  }

  .rep-app .rep-interruptor:checked::after {
    left: 22px;
  }
}

/* ---------- el encabezado del tablero ---------- */

.rep-encabezado {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--repos-border);
}

.rep-encabezado h1 {
  font-size: 28px;
  margin: 0 0 4px;
}

.rep-encabezado-nota {
  margin: 0;
  font-size: 14px;
}

/* E17-49/AC-4 — el mismo encabezado en las pantallas de tarjeta (elegir o
   recuperar la contraseña): centrado, sin la raya de abajo. */
.rep-encabezado-tarjeta {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: 32px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---------- E17-56 — la plantilla «Configurar» ----------
 * Negocio, Facturación, Carta digital y Catálogos: mismo encabezado (con el
 * chip «Guardado hoy 12:40»), índice de 200 px fijo al desplazar, columna de
 * 720 px, tarjetas por tema y la barra de guardar fija abajo
 * (docs/diseno/portal-dueno/pantallas/05-configuracion-negocio.png).
 * El ancho es UNO: ninguna vista lleva su `max-width` en línea. */

.rep-configurar {
  display: grid;
  grid-template-columns: 200px minmax(0, 720px);
  gap: 32px;
  align-items: start;
  padding-bottom: 96px; /* la barra de guardar fija no tapa la última tarjeta */
}

.rep-configurar-indice {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rep-configurar-indice a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--repos-radius-sm);
  color: var(--repos-fg-muted);
  font-size: 14px;
  text-decoration: none;
}

.rep-configurar-indice a:hover {
  background: color-mix(in srgb, var(--repos-fg) 6%, transparent);
}

.rep-configurar-indice a[aria-current] {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-weight: 700;
}

.rep-configurar-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Negocio envuelve sus dos tarjetas en el formulario: la columna las separa igual. */
.rep-configurar-columna > form[data-configurar] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rep-configurar-tarjeta {
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  padding: 22px 24px;
  gap: 0;
  /* el destino de un ancla del índice no queda pegado al borde de arriba */
  scroll-margin-top: 20px;
}

.rep-tarjeta-titulo {
  margin: 0;
  font-size: 18px;
}

.rep-tarjeta-nota {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.rep-tarjeta-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rep-csd-estado {
  margin: 12px 0 0;
  font-size: 14px;
}

/* El campo: etiqueta arriba, ayuda debajo. */
.rep-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.rep-campo label {
  font-size: 13px;
  font-weight: 600;
}

.rep-campo input,
.rep-campo select,
.rep-campo textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--repos-fg);
  background: var(--repos-surface);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
}

.rep-campo input:focus-visible,
.rep-campo select:focus-visible,
.rep-campo textarea:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 0;
}

.rep-campo small {
  font-size: 12px;
  color: var(--repos-fg-muted);
}

.rep-campo-fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.rep-campo-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* E05-156 — Negocio › Parámetros por sección: el subtítulo de un grupo, el
 * número con su unidad y la tabla de canales. Sólo tokens. */
.rep-grupo-titulo {
  margin: 20px 0 0;
  font-size: 15px;
}

.rep-grupo-parametros:first-of-type > .rep-grupo-titulo {
  margin-top: 8px;
}

.rep-campo-numero {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rep-campo-numero input {
  flex: 1 1 auto;
  min-width: 0;
}

.rep-campo-unidad {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

/* La etiqueta que sólo lee el lector de pantalla (cada celda de la tabla de canales). */
.rep-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rep-matriz-canales {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

/* E05-156 — en el teléfono la tabla por canal se apila: un bloque por
   ajuste, una línea por canal con su nombre (la columna no cabe a 390 px); el
   corte es el de teléfono del portal (< 600). */
@media (max-width: 599.98px) {
  .rep-matriz,
  .rep-matriz tbody,
  .rep-matriz tr,
  .rep-matriz th,
  .rep-matriz td {
    display: block;
    width: 100%;
  }

  .rep-matriz thead {
    display: none;
  }

  .rep-matriz tbody th {
    min-width: 0;
  }

  .rep-matriz td[data-vacia="1"] {
    display: none;
  }

  .rep-matriz td::before {
    content: attr(data-canal);
    display: block;
    font-size: 12px;
    color: var(--repos-fg-muted);
  }
}

.rep-matriz th,
.rep-matriz td {
  vertical-align: top;
}

.rep-matriz tbody th {
  min-width: 160px;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--repos-fg);
}

.rep-matriz .rep-matriz-ayuda {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--repos-fg-muted);
}

.rep-matriz .rep-campo-celda {
  margin-bottom: 0;
}

.rep-matriz .rep-campo-celda input:not([type="checkbox"]) {
  min-width: 72px;
}

.rep-logo-actual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.rep-logo-actual img {
  max-width: 200px;
  max-height: 80px;
  padding: 8px;
  background: var(--repos-bg);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
}

/* «Revisa esto antes de guardar» y los avisos amarillos de la plantilla. */
.rep-configurar-problemas {
  margin: 0;
  padding: 16px;
  background: var(--repos-warning-bg);
  border: 1px solid var(--repos-warning-border);
  border-radius: var(--repos-radius-sm);
  color: var(--repos-warning-fg);
  font-size: 14px;
}

.rep-configurar-problemas ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Con reportes-configurar.js la barra de abajo es el Guardar y el botón de
 * cada formulario sobra; sin él (red a medias) es el único. */
[data-configurar-activo] .rep-solo-sin-js {
  display: none;
}

/* La barra de guardar: fija abajo, a la derecha del menú lateral. */
.rep-barra-guardar {
  position: fixed;
  left: 232px;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: var(--repos-surface);
  border-top: 1px solid var(--repos-border);
  box-shadow: var(--repos-elev-2);
}

.rep-barra-guardar-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rep-barra-guardar-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--repos-warning-border);
}

.rep-barra-guardar-acciones {
  display: flex;
  gap: 10px;
}

/* El diálogo de «salir con cambios»: el contrato de repos-dialog del POS.
 * E21-48 — por encima de cualquier control de terceros (los de Leaflet van a
 * 1000), aunque el mapa ya se apila aparte (.carta-mapa-lienzo). */
.rep-dialogo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--repos-modal-overlay);
}

.rep-dialogo-caja {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: var(--repos-surface);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  box-shadow: var(--repos-elev-2);
}

.rep-dialogo-titulo {
  font-size: 18px;
  font-weight: 700;
}

.rep-dialogo-texto {
  margin-top: 8px;
  font-size: 14px;
  color: var(--repos-fg-muted);
}

.rep-dialogo-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 1199.98px) {
  /* Una columna, con el mismo tope de 720 px que en PC: a 1024 los campos no
   * se estiran a 990 px. Catálogos (data-tabla-ancha) la abre más abajo. */
  .rep-configurar {
    grid-template-columns: minmax(0, 720px);
    gap: 16px;
  }

  /* En celular y tableta el índice es una fila que se desliza, no una columna
   * fija (los 44 px los pone el bloque táctil de E17-57). */
  .rep-configurar-indice {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .rep-configurar-indice a {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  .rep-configurar-tarjeta {
    padding: 18px 16px;
  }

  .rep-campo-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La barra ocupa todo el ancho y el primario queda abajo, como en el POS. */
  .rep-barra-guardar {
    left: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }

  .rep-barra-guardar-acciones {
    flex-direction: column-reverse;
  }

  .rep-barra-guardar-acciones .btn,
  .rep-dialogo-botones .btn {
    min-height: 48px;
  }
}

/* E21-38 — Carta digital en cuatro pestañas (docs/diseno/portal-dueno/pantallas/09-carta-apariencia.png).
 * Encabezado con la carta publicada y sus tres acciones, la franja de estado,
 * las pestañas (enlaces con su URL, como las de Alertas) y, en Apariencia, el
 * formulario en tarjetas con el teléfono de la vista previa al lado. Los
 * colores de las muestras de tema son del restaurante y llegan por variables
 * (--muestra-*) del elemento; todo lo demás sale de los tokens. */
.carta-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.carta-publicada {
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  font-size: 14px;
}

.carta-direccion summary {
  color: var(--repos-accent);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

/* Abierto, el formulario baja a su propia fila en vez de encogerse junto al enlace. */
.carta-direccion[open] {
  flex-basis: 100%;
}

.carta-direccion-cuerpo {
  max-width: 480px;
  margin-top: 8px;
}

.carta-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--repos-border);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.carta-chip-ok {
  border-color: color-mix(in srgb, var(--repos-success) 30%, transparent);
  background: color-mix(in srgb, var(--repos-success) 12%, var(--repos-surface));
  color: var(--repos-success);
}

.carta-chip-aviso {
  border-color: var(--repos-warning-border);
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
}

.carta-chip-neutro {
  background: var(--repos-bg);
  color: var(--repos-fg-muted);
}

.carta-estado {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 18px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
}

.carta-estado-detalle {
  flex: 1 1 240px;
  font-size: 14px;
}

.carta-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--repos-border);
}

.carta-pestana {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--repos-fg-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.carta-pestana:hover,
.carta-pestana[aria-current="page"] {
  color: var(--repos-fg);
}

.carta-pestana[aria-current="page"] {
  border-bottom-color: var(--repos-accent);
}

/* El cuerpo de la pestaña: lo de abajo lo tapa la barra de guardar fija si no hay este aire. */
.carta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 96px;
  min-width: 0;
}

.carta-cuerpo-ancho {
  max-width: 880px;
}

.carta-apariencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

.carta-apariencia-formularios {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.carta-formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rep-tarjeta-nota-lado {
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.rep-configurar-tarjeta .rep-tarjeta-cabeza {
  margin-bottom: 14px;
}

/* Los cinco temas como muestras: el radio real es la caja entera, invisible pero con foco. */
.carta-temas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.carta-tema {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--repos-border);
  border-radius: 12px;
  background: var(--repos-surface);
  cursor: pointer;
}

.carta-tema input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.carta-tema:has(input:checked) {
  border-color: var(--repos-accent);
  box-shadow: 0 0 0 1px var(--repos-accent);
}

.carta-tema:has(input:focus-visible) {
  outline: 2px solid var(--repos-accent);
  outline-offset: 2px;
}

.carta-tema-muestra {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 64px;
  padding: 8px;
  border-radius: var(--repos-radius-sm);
  background: var(--muestra-fondo);
}

.carta-tema-aa {
  font-size: 20px;
  font-weight: 700;
  color: var(--muestra-texto);
}

.carta-tema-punto {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muestra-acento);
}

.carta-tema-nombre {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.carta-colores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
}

.carta-color-caja {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--repos-border);
  border-radius: 8px;
  background: var(--repos-surface);
}

.rep-campo .carta-color-muestra {
  flex: 0 0 28px;
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  background: none;
  cursor: pointer;
}

.carta-color-muestra::-webkit-color-swatch-wrapper {
  padding: 0;
}

.carta-color-muestra::-webkit-color-swatch {
  border: 0;
  border-radius: 4px;
}

.carta-color-codigo {
  font-family: var(--repos-font-mono);
  font-size: 14px;
}

.carta-aviso-contraste {
  margin-bottom: 14px;
}

/* E21-40 — «Ubicación del negocio y radio de entrega» (Carta → Pedidos): tres
 * campos en una fila, «Usar mi ubicación actual» debajo y el aviso de que sin
 * ubicación no se ofrece «A domicilio». Sólo tokens. */
.carta-entrega-nota {
  margin: 0 0 16px;
  font-size: 13px;
}

.carta-entrega-aviso {
  margin-bottom: 16px;
}

.carta-entrega-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 16px;
}

.carta-entrega-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.carta-entrega-acciones [hidden],
.carta-entrega-estado[hidden] {
  display: none;
}

.carta-entrega-estado {
  margin: 12px 0 0;
}

/* E21-45 — the map that picks the business point: full width, a height that
 * fits a phone, and Leaflet's own attribution left visible. Sólo tokens. */
.carta-mapa {
  margin: 0 0 16px;
}

.carta-mapa[hidden],
#avisoDelMapa[hidden] {
  display: none;
}

.carta-mapa-ayuda {
  margin: 0 0 8px;
  font-size: 13px;
}

/* E21-48 — `isolation` encierra los z-index de Leaflet (400 las capas, 1000
 * los controles) en el lienzo: ni la barra de guardar ni el diálogo quedan
 * debajo del mapa. */
.carta-mapa-lienzo {
  isolation: isolate;
  width: 100%;
  height: 320px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  overflow: hidden;
}

@media (max-width: 599.98px) {
  .carta-mapa-lienzo {
    height: 260px;
  }
}

/* E21-64 — «Horario»: un renglón por día (interruptor y nombre, luego sus
 * turnos). Apagado, el día dice «Cerrado» y esconde las horas; con :has() eso
 * pasa también sin JavaScript. */
.carta-horario {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--repos-border-subtle);
}

.carta-horario-dia {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: start;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--repos-border-subtle);
}

.carta-horario-nombre {
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
}

.carta-horario-cerrado {
  display: none;
  align-self: center;
  font-size: 14px;
  color: var(--repos-fg-muted);
}

.carta-horario-dia:has(input[name="DiasAbiertos"]:not(:checked)) .carta-horario-turnos {
  display: none;
}

.carta-horario-dia:has(input[name="DiasAbiertos"]:not(:checked)) .carta-horario-cerrado {
  display: block;
}

.carta-horario-turnos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.carta-horario-turno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.carta-horario-turno[hidden] {
  display: none;
}

.carta-horario-turno input[type="time"] {
  width: 8.5rem;
  min-height: 40px;
  padding: 6px 10px;
  font: inherit;
  font-family: var(--repos-font);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--repos-fg);
  background: var(--repos-surface);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
}

.carta-horario-turno input[type="time"]:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 0;
}

.carta-horario-a {
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.carta-horario-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.carta-horario-enlace,
.carta-horario-quitar {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--repos-accent);
  font-family: var(--repos-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.carta-horario-enlace:hover,
.carta-horario-quitar:hover {
  text-decoration: underline;
}

.carta-horario-quitar {
  color: var(--repos-fg-muted);
}

.carta-horario-enlace[hidden],
.carta-horario-quitar[hidden] {
  display: none;
}

.carta-horario-nota {
  margin: 12px 0 16px;
  font-size: 12px;
  color: var(--repos-fg-muted);
}

.carta-horario-zona {
  max-width: 26rem;
}

.carta-imagen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--repos-border);
}

.carta-imagen-vista {
  flex: 0 0 120px;
  font-size: 12px;
}

.carta-imagen-vista img {
  max-width: 120px;
  max-height: 80px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
}

.carta-imagen-acciones {
  flex: 1 1 240px;
}

.carta-imagen-acciones p {
  margin: 4px 0;
  font-size: 12px;
}

.form-imagen-carta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.carta-imagen-quitar {
  margin-top: 8px;
}

/* La vista previa: un teléfono que se queda a la vista al desplazar. */
.carta-vista-previa {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.carta-vista-previa-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
  text-align: center;
}

.carta-telefono {
  width: 300px;
  height: 600px;
  border: 10px solid var(--repos-fg);
  border-radius: 36px;
  background: var(--repos-surface);
  overflow: hidden;
}

.carta-telefono iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* «Copiar enlace» sin el portapapeles moderno: una caja que no se ve ni mueve la página. */
.carta-copiar-auxiliar {
  position: fixed;
  top: 0;
  left: -9999px;
}

@media (max-width: 1199.98px) {
  .carta-apariencia {
    grid-template-columns: minmax(0, 1fr);
  }

  .carta-vista-previa {
    position: static;
  }

  .carta-temas {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }

  .carta-colores {
    grid-template-columns: minmax(0, 1fr);
  }

  .carta-acciones {
    justify-content: flex-start;
  }
}

/* E17-94 — en el celular el chip de «Guardado» va en su renglón y las
 * acciones se reparten el ancho de dos en dos (la tercera, «Hoja de QR», a lo
 * ancho), en vez de envolverse cada una a su tamaño. */
@media (max-width: 599.98px) {
  .carta-acciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .carta-acciones > .tag {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .carta-acciones > .btn:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

/* E21-39 — Mesas y QR (docs/diseno/portal-dueno/pantallas/10-carta-mesas-y-qr.png).
 * A la izquierda las mesas como tarjetas con su QR, su estado y tres acciones;
 * a la derecha quién ve la cuenta al escanear y el alta de la Wi-Fi de
 * invitados. Los paneles de agregar, renombrar y borrar son <details>: se abren
 * sin JavaScript. Todo sale de los tokens. */
.carta-mesas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.carta-mesas-lado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.carta-mesas-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.carta-mesas-cuenta {
  color: var(--repos-fg-muted);
  font-weight: 500;
}

.carta-mesas-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
}

.carta-mesas-buscar {
  flex: 1 1 180px;
  min-height: var(--repos-touch-min);
  padding: 0 12px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-surface);
  color: var(--repos-fg);
  font: inherit;
}

.carta-mesas-panel > summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--repos-touch-min);
}

.carta-mesas-panel > summary::-webkit-details-marker {
  display: none;
}

/* Abierto, el formulario baja a su propia fila, a todo el ancho. */
.carta-mesas-panel[open] {
  flex-basis: 100%;
  order: 2;
}

.carta-mesas-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-bg);
}

.carta-mesas-formulario label,
.carta-mesa-panel label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.carta-mesas-formulario input,
.carta-mesa-panel input {
  min-height: var(--repos-touch-min);
  padding: 0 12px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-surface);
  color: var(--repos-fg);
  font: inherit;
  box-sizing: border-box;
}

.carta-mesas-rango input[type="number"] {
  width: 96px;
}

.carta-mesas-rango-nota {
  flex-basis: 100%;
  margin: 0;
}

.carta-mesas-sugerencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--repos-warning-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
  font-size: 14px;
}

.carta-mesas-vacio {
  margin: 8px 0 0;
}

.carta-mesas-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carta-mesa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
}

.carta-mesa[hidden] {
  display: none;
}

.carta-mesa-qr {
  width: 112px;
  height: 112px;
  border-radius: var(--repos-radius-sm);
}

.carta-mesa-nombre {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 15px;
}

.carta-mesa-acciones {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.carta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--repos-touch-min);
  height: var(--repos-touch-min);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-surface);
  color: var(--repos-fg);
  cursor: pointer;
  list-style: none;
}

.carta-icono::-webkit-details-marker {
  display: none;
}

.carta-icono:hover {
  background: var(--repos-bg);
}

.carta-icono-peligro {
  color: var(--repos-danger);
}

/* Sin position en el <details>: el panel abierto se ancla a la tarjeta y la cubre por abajo. */
.carta-mesa-panel {
  position: absolute;
  inset: auto 6px 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  box-shadow: var(--repos-elev-2);
  font-size: 13px;
}

.carta-mesa-panel p {
  margin: 0;
}

.carta-borrar {
  border-color: var(--repos-danger);
  color: var(--repos-danger);
}

.carta-mesas-pie {
  margin: 14px 0 0;
  text-align: center;
}

.carta-red-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.carta-red {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
}

.carta-red p {
  margin: 2px 0 0;
  color: var(--repos-fg-muted);
}

.carta-red-marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--repos-bg);
  color: var(--repos-fg-muted);
  font-size: 13px;
  font-weight: 700;
}

.carta-red-marca-ok {
  background: color-mix(in srgb, var(--repos-success) 12%, var(--repos-surface));
  color: var(--repos-success);
}

.carta-red-marca-pin {
  padding: 0 6px;
  font-family: var(--repos-font-mono);
  font-size: 11px;
}

.carta-red-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.carta-red-acciones form[hidden] {
  display: none;
}

.carta-invitados {
  border-color: var(--repos-accent);
}

.carta-invitados-qr {
  max-width: 200px;
  margin: 8px auto 12px;
}

.carta-invitados-qr[hidden] {
  display: none;
}

.carta-invitados-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.carta-invitados-pasos {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 14px;
}

@media (max-width: 1199.98px) {
  .carta-mesas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- E17-60 — Catálogos como tabla editable ----------
 * docs/diseno/portal-dueno/pantallas/08-catalogos.png. Pestañas con conteo (las
 * de Alertas), el filtro por grupo en el índice de la plantilla, y una tabla
 * cuyos renglones se editan en línea: el campo parece texto hasta que el
 * renglón se toca o se enfoca (:focus-within, sin JS). Cada campo se ata a su
 * formulario con form="…", así que el POST por renglón sigue sirviendo sin JS. */

/* La tabla pide más ancho que la columna de formulario de 720 px: sólo
 * Catálogos lo declara (data-tabla-ancha). El resto de la plantilla no cambia. */
.rep-configurar[data-tabla-ancha] {
  grid-template-columns: 220px minmax(0, 960px);
}

.rep-configurar[data-tabla-ancha][data-sin-indice] {
  grid-template-columns: minmax(0, 960px);
}

.rep-encabezado-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rep-configurar-indice-rotulo {
  padding: 0 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
}

.rep-configurar-indice-cuenta,
.rep-catalogo-cuenta {
  font-family: var(--repos-font-mono);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--repos-fg-muted);
}

.rep-catalogo-tarjeta {
  padding: 0;
  overflow: hidden;
}

.rep-catalogo-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--repos-border);
}

.rep-catalogo-buscar {
  flex: 1 1 220px;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--repos-fg);
  background: var(--repos-surface);
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
}

.rep-catalogo-buscar:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 0;
}

.rep-catalogo-inactivos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* La etiqueta del buscador: para el lector de pantalla, no para el ojo. */
.rep-catalogo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rep-catalogo-nota {
  margin: 0;
  padding: 12px 20px 8px;
}

.rep-catalogo-vacio {
  margin: 0;
  padding: 20px;
  font-size: 14px;
}

.rep-catalogo-pie {
  margin: 0;
  padding: 12px 20px;
}

.rep-catalogo-envoltura {
  overflow-x: auto;
}

.rep-catalogo-tabla {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

.rep-catalogo-tabla th {
  padding: 12px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--repos-fg-muted);
  background: var(--repos-bg);
  border-top: 1px solid var(--repos-border);
  border-bottom: 1px solid var(--repos-border);
}

.rep-catalogo-tabla td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--repos-border-subtle);
}

.rep-catalogo-tabla th:first-child,
.rep-catalogo-tabla td:first-child {
  padding-left: 20px;
}

.rep-catalogo-tabla th:last-child,
.rep-catalogo-tabla td:last-child {
  padding-right: 20px;
}

.rep-catalogo-tabla .rep-catalogo-num {
  text-align: right;
  font-family: var(--repos-font-mono);
  font-variant-numeric: tabular-nums;
}

.rep-catalogo-tabla .rep-catalogo-centro {
  text-align: center;
}

.rep-catalogo-forma {
  margin: 0;
}

/* El campo: parece texto hasta que el renglón se toca. */
.rep-catalogo-campo {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--repos-radius-sm);
}

select.rep-catalogo-campo {
  width: auto;
  max-width: 100%;
}

.rep-catalogo-campo-importe,
.rep-catalogo-campo-corto {
  text-align: right;
  font-family: var(--repos-font-mono);
  appearance: textfield;
  -moz-appearance: textfield;
}

.rep-catalogo-campo-importe {
  width: 110px;
}

.rep-catalogo-campo-corto {
  width: 70px;
}

.rep-catalogo-campo::-webkit-inner-spin-button,
.rep-catalogo-campo::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.rep-catalogo-fila:hover .rep-catalogo-campo {
  border-color: var(--repos-border);
}

/* El renglón que se está editando: fondo cian claro y campos con borde. */
.rep-catalogo-fila:focus-within {
  background: var(--color-accent-100);
}

.rep-catalogo-fila:focus-within .rep-catalogo-campo {
  background: var(--repos-surface);
  border-color: var(--repos-border);
}

.rep-catalogo-fila .rep-catalogo-campo:focus-visible {
  border-color: var(--repos-accent);
  outline: 2px solid var(--repos-accent);
  outline-offset: 0;
}

/* Lo apagado se atenúa (el diseño lo pinta gris). */
.rep-catalogo-fila:has(.rep-interruptor:not(:checked)) .rep-catalogo-campo,
.rep-catalogo-fila:has(.rep-interruptor:not(:checked)) .rep-catalogo-dinero {
  color: var(--repos-fg-muted);
}

.rep-catalogo-fila-rechazada {
  background: var(--repos-warning-bg);
}

.rep-catalogo-fila .rep-catalogo-campo[aria-invalid="true"] {
  border-color: var(--repos-warning-border);
}

.rep-catalogo-dinero {
  display: inline-flex;
  align-items: center;
}

.rep-catalogo-dinero::before {
  content: "$";
  color: var(--repos-fg-muted);
}

/* Lo cambiado y no guardado: la marca y el importe anterior tachado. */
.rep-catalogo-cambiado {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 1px 9px;
  border: 1px solid var(--repos-warning-border);
  border-radius: 999px;
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.rep-catalogo-cambiado[hidden] {
  display: none;
}

/* Con la marca puesta, el nombre le deja sitio en su misma línea.
 * E17-94 — y nunca se aprieta hasta «Agu»: con menos ancho que la tabla, la
 * tabla se desliza dentro de su caja (.rep-catalogo-envoltura). */
.rep-catalogo-nombre {
  min-width: 180px;
  white-space: nowrap;
}

.rep-catalogo-fila:has(.rep-catalogo-cambiado:not([hidden])) .rep-catalogo-nombre .rep-catalogo-campo {
  width: calc(100% - 96px);
}

.rep-catalogo-anterior {
  margin-right: 6px;
  color: var(--repos-fg-muted);
}

.rep-catalogo-error {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  font-family: var(--repos-font);
  color: var(--repos-warning-fg);
}

.rep-catalogo-error[hidden] {
  display: none;
}

.rep-catalogo-fila-nota td {
  padding-top: 0;
  padding-bottom: 8px;
}

.rep-catalogo-fila-nota small {
  display: block;
  font-size: 12.5px;
}

.rep-catalogo-aviso {
  color: var(--repos-warning-fg);
}

/* El interruptor «Activo»: una casilla de verdad (teclado y lector de pantalla) con cara de interruptor. */
.rep-interruptor {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--repos-gris-300);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}

.rep-interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--repos-gris-0);
  transition: left 0.15s ease;
}

.rep-interruptor:checked {
  background: var(--repos-accent);
}

.rep-interruptor:checked::after {
  left: 19px;
}

.rep-interruptor:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 2px;
}

.rep-interruptor:disabled {
  cursor: default;
  opacity: 0.6;
}

@media (max-width: 1199.98px) {
  .rep-configurar[data-tabla-ancha],
  .rep-configurar[data-tabla-ancha][data-sin-indice] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- la tarjeta ---------- */

/* E17-58 — una sola tarjeta. E17-53: y un solo nombre, `.tablero-tarjeta`,
 * para las cifras y las gráficas (antes también `.tablero-card-panel`). */
.tablero-tarjeta {
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.tablero-tarjeta > h2,
.tablero-card-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

/* ---------- el esqueleto y el fallo ---------- */

/* Un solo esqueleto: la línea, la cifra y el hueco de la gráfica brillan igual. */
@keyframes tableroShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.tablero-esqueleto,
.tablero-esqueleto-chart {
  border-radius: var(--repos-radius-sm);
  background: linear-gradient(90deg, var(--repos-border-subtle) 25%, var(--repos-surface) 50%, var(--repos-border-subtle) 75%);
  background-size: 200% 100%;
  animation: tableroShimmer 1.5s infinite;
}

.tablero-esqueleto {
  height: 14px;
  margin: 8px 0;
}

.tablero-esqueleto-cifra {
  height: 28px;
  display: inline-block;
  width: 80%;
}

.tablero-esqueleto-chart {
  width: 100%;
  height: 220px;
}

.tablero-esqueleto-lineas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

/* Una tarjeta que falla lo DICE. Nunca se queda en blanco ni con el esqueleto
 * girando para siempre: eso es lo que hace que el dueño crea que su tablero se
 * rompió y llame por teléfono. */
.tablero-fallo {
  border: 1px dashed var(--repos-border);
  border-radius: var(--repos-radius-sm);
  padding: 16px;
  font-size: 14px;
  color: var(--repos-fg-muted);
}

.tablero-fallo p {
  margin: 0 0 10px;
}

/* ---------- lo más vendido ---------- */

.tablero-top {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
}

.tablero-top-renglon {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--repos-border-subtle);
}

.tablero-top-cantidad,
.tablero-top-importe {
  font-variant-numeric: tabular-nums;
}

.tablero-top-cantidad {
  color: var(--repos-fg-muted);
  font-size: 13px;
}

/* ---------- E17-54: partes del todo ----------
   Grupos, categorías y las formas de pago con más de tres partes: lista
   ordenada con barra y %. La barra es de la rampa cian (sin morado: ése es
   de las alertas). La dona sólo con 2 o 3 partes, con el % al centro. */

.tablero-partes {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 14px;
}

.tablero-parte {
  display: grid;
  grid-template-columns: 1fr auto 3.5em;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
  padding: 6px 0;
}

.tablero-parte-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablero-parte-valor,
.tablero-parte-pct {
  font-family: var(--repos-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tablero-parte-pct {
  color: var(--repos-fg-muted);
  font-size: 13px;
}

.tablero-parte-barra {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--repos-radius-sm);
  background: var(--repos-cian-100);
  overflow: hidden;
}

.tablero-parte-relleno {
  display: block;
  height: 100%;
  background: var(--repos-cian-600);
}

.tablero-dona-centro {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.tablero-dona-pct {
  font-family: var(--repos-font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--repos-fg);
}

.tablero-dona-nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
}

/* ---------- E17-94 — una sola navegación por ancho ----------
 * Los tres anchos de DECISIONES_VIGENTES («Layout responsivo»), y ningún
 * otro corte en esta hoja (PortalCelularUITests.Css_SoloLosTresCortes):
 *   · PC (≥ 1200): el rail de Oficina, siempre abierto.
 *   · Tableta (600–1199): el rail se pliega en una franja con «Menú»; el
 *     contenido se queda con todo el ancho (a 768 el rail le dejaba 472 px).
 *   · Celular (< 600): la barra inferior de cuatro; «Menú» se va y «Más»
 *     abre el mismo menú entero (más abajo).
 * Ninguna sección se pierde: las tres formas pintan el mismo
 * `SeccionesDelPanel.Grupos()`. */

@media (max-width: 1199.98px) {
  .rep-marco {
    display: block;
  }

  .rep-lateral {
    position: static;
    height: auto;
    padding: 12px 16px;
  }

  .rep-lateral-marca {
    margin-bottom: 0;
  }

  .rep-menu-boton {
    display: inline-flex;
  }

  /* Plegado por omisión, abierto cuando la casilla está marcada. Sin una línea
   * de JS: el dueño que abre esto con la red del local a medias no se queda
   * con un menú que no responde porque un archivo no llegó. */
  .rep-menu {
    display: none;
    padding-top: 12px;
  }

  .rep-menu-interruptor:checked ~ .rep-marco .rep-menu {
    display: flex;
  }

  .rep-contenido {
    padding: 20px 16px 56px;
  }
}

/* ---------- E17-52/AC-3 — el teléfono: barra inferior de cuatro ----------
 * Por debajo de 600 px el botón «Menú» se va y abajo quedan En vivo, Tablero,
 * Alertas y «Más», que es la etiqueta de la misma casilla: abre el menú
 * entero encima de la página, sin JS. */

.rep-barra {
  display: none;
}

.rep-barra-enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  font-size: 12px;
  color: var(--repos-fg-muted);
  text-decoration: none;
  cursor: pointer;
}

.rep-barra-enlace svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rep-barra-actual,
.rep-menu-interruptor:checked ~ .rep-barra .rep-barra-mas {
  color: var(--repos-accent);
  font-weight: 600;
}

@media (max-width: 599.98px) {
  .rep-menu-boton {
    display: none;
  }

  /* E17-95/AC-1 — la franja oscura como la pantalla 03: el título de la
   * sección a la izquierda y «<negocio> ▾» a la derecha, que abre el menú con
   * la placa «Viendo». El logotipo cede su lugar: la marca ya está en la
   * franja y en la app. Un nombre largo se recorta con «…», nunca empuja la
   * franja fuera de la pantalla. */
  .rep-lateral-marca .rep-marca {
    display: none;
  }

  .rep-franja-titulo {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    color: var(--repos-header-fg);
  }

  .rep-franja-negocio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 62%;
    min-height: var(--repos-touch-min);
    padding: 0 12px;
    border-radius: var(--repos-radius-sm);
    background: var(--of-rail-chip);
    color: var(--repos-header-fg);
    font-size: 14px;
    font-weight: 600;
  }

  label.rep-franja-negocio {
    cursor: pointer;
  }

  .rep-franja-negocio-nombre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rep-franja-flecha {
    flex: none;
    font-size: 12px;
  }

  .rep-barra {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--repos-surface);
    border-top: 1px solid var(--repos-border);
  }

  /* E17-94 — `align-self: stretch`: el rail trae `flex-start` de PC, y en un
   * Chromium reciente (el WebView de la app incluido) una caja fija con
   * `align-self` distinto de stretch mide lo de su contenido e ignora el
   * `bottom`: crecía a 950 px, no se deslizaba, y «Ayuda» y «Cerrar sesión»
   * quedaban debajo de la barra, fuera de alcance. */
  .rep-menu-interruptor:checked ~ .rep-marco .rep-lateral {
    position: fixed;
    inset: 0 0 calc(52px + env(safe-area-inset-bottom, 0px));
    align-self: stretch;
    z-index: 19;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  .rep-menu-interruptor:checked ~ .rep-marco .rep-lateral .rep-menu {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .rep-contenido {
    padding-bottom: 88px;
  }

  /* E17-56 — the save bar sits above the bottom bar, never under it. */
  .rep-barra-guardar {
    bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

/* ---------- E17-52/AC-4 — Suscripción ---------- */

/* E17-92/AC-5 — «Renovar suscripción» del punto de venta con otra cuenta abierta. */
.rep-suscripcion-aviso {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--repos-warning-border);
  border-radius: 10px;
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
  font-size: 14px;
}

.rep-suscripcion {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* E17-94 — un correo largo («Entras con …», las cuentas vinculadas) parte la
 * línea en vez de sacar la tarjeta de la pantalla del celular. */
.rep-suscripcion-tarjeta {
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--repos-border);
}

.rep-suscripcion-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rep-suscripcion-cabeza h2 {
  margin: 0;
  font-size: 18px;
}

.rep-suscripcion-estado {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--repos-bg);
  color: var(--repos-fg-muted);
}

.rep-suscripcion-estado[data-estado="vigente"] {
  background: var(--of-chip-ok-bg);
  color: var(--of-chip-ok-fg);
}

.rep-suscripcion-estado[data-estado="por-vencer"] {
  background: var(--repos-warning-bg);
  color: var(--repos-warning-fg);
}

.rep-suscripcion-estado[data-estado="vencida"] {
  background: var(--of-chip-danger-bg);
  color: var(--of-chip-danger-fg);
}

.rep-suscripcion-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
}

.rep-suscripcion-datos dt {
  font-size: 12px;
  color: var(--repos-fg-muted);
}

.rep-suscripcion-datos dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.rep-suscripcion-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rep-suscripcion-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rep-suscripcion-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--repos-radius-sm);
  background: var(--repos-bg);
}

/* ==========================================================================
   Dashboard de Ventas en Tiempo Real — Filtros, KPIs y Gráficos Chart.js
   ========================================================================== */

/* E17-53 — la cifra primero (propuesta 2026-09-28 §4.2, §4.6; pantallas
 * 01-tablero-escritorio y 03-tablero-telefono). Arriba: el título con el día
 * contable, y a su derecha la frescura y el control de periodo; debajo, la
 * cifra con su comparación y su línea de 7 días y las cuatro de apoyo. En el
 * DOM la cifra va ANTES que el periodo (AC-1): la rejilla los acomoda. */

.tablero-arriba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "cabeza periodo"
    "cifras cifras";
  align-items: end;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.tablero-cabeza {
  grid-area: cabeza;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.tablero-periodo {
  grid-area: periodo;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.tablero-frescura {
  margin: 0;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.tablero-frescura:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--repos-success);
}

.tablero-cifras {
  grid-area: cifras;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tablero-cifras-aviso {
  grid-column: 1 / -1;
}

.tablero-cifras-aviso:empty {
  display: none;
}

.tablero-cifra-principal {
  border-color: var(--repos-accent);
}

.tablero-kpi-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
}

.tablero-kpi-cifra {
  margin: 8px 0 4px;
  font-family: var(--repos-font-mono);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.tablero-cifra-principal .tablero-kpi-cifra {
  font-size: 40px;
}

.tablero-kpi-sub {
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.tablero-sube {
  color: var(--repos-success);
}

.tablero-baja {
  color: var(--repos-danger);
}

.tablero-linea {
  width: 100%;
  height: 24px;
  margin-top: 10px;
}

.tablero-linea-trazo {
  fill: none;
  stroke: var(--repos-cian-600);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* El control de periodo (_ControlDePeriodo.cshtml): enlaces, sin JS. */

.periodo-opciones {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
}

.periodo-opcion {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--repos-radius-sm);
  font-size: 13px;
  color: var(--repos-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.periodo-opcion:hover {
  color: var(--repos-fg);
  background: var(--repos-bg);
}

.periodo-opcion-marcada,
.periodo-opcion-marcada:hover {
  background: var(--repos-fg);
  color: var(--repos-surface);
  font-weight: 600;
}

.periodo-elegir {
  position: relative;
}

.periodo-elegir > summary {
  list-style: none;
}

.periodo-elegir > summary::-webkit-details-marker {
  display: none;
}

.periodo-fechas {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  box-shadow: var(--repos-shadow);
}

.periodo-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
}

.periodo-campo input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-bg);
  color: var(--repos-fg);
  font: inherit;
  font-size: 14px;
}

/* La franja de alertas (AC-5): el morado es de la inteligencia. Descuentos y
 * cancelaciones van aquí en el tono neutro del texto secundario. */

.tablero-franja-alertas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 20px;
  padding: 14px 20px;
  border: 1px solid var(--repos-border);
  border-left: 4px solid var(--repos-inteligencia);
  border-radius: var(--repos-radius-lg);
  background: var(--repos-surface);
  font-size: 14px;
}

.tablero-alertas-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--repos-morado-100);
  color: var(--repos-morado-700);
  font-size: 12px;
  font-weight: 600;
}

.tablero-alertas-chip-cero {
  background: var(--repos-bg);
  color: var(--repos-fg-muted);
}

.tablero-alertas-ultimas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  flex: 1;
  min-width: 0;
}

.tablero-alertas-neutro {
  margin: 0;
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.tablero-alertas-enlace {
  font-weight: 600;
}

@media (max-width: 1199.98px) {
  .tablero-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tablero-cifra-principal {
    grid-column: 1 / -1;
  }
}

/* En el teléfono (03-tablero-telefono): el periodo es una fila de pastillas
 * de 44 px que se desliza, y «Elegir fechas» sube como hoja desde abajo. */
@media (max-width: 599.98px) {
  .tablero-contenedor {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .tablero-arriba {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cabeza"
      "periodo"
      "cifras";
    gap: 12px;
  }

  .tablero-periodo,
  .periodo {
    min-width: 0;
    max-width: 100%;
  }

  /* E17-94 — como en 03-tablero-telefono: las pastillas primero y la
   * frescura debajo (E30-03 había quitado este orden al ajustar el desborde). */
  .tablero-periodo {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 6px;
  }

  /* E17-94 — Reportes: el periodo y «Descargar» ocupan el renglón y las
   * pastillas se deslizan dentro; antes medían 455 px y «Elegir fechas»
   * quedaba fuera de la pantalla, cortado por el marco. */
  .rep-acciones {
    flex: 1 1 100%;
    min-width: 0;
  }

  .rep-acciones .periodo {
    flex: 1 1 100%;
  }

  .periodo-opciones {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    border: 0;
    background: none;
    scrollbar-width: none;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .periodo-opcion {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--repos-border);
    border-radius: 999px;
    background: var(--repos-surface);
    font-size: 15px;
  }

  .periodo-opcion-marcada,
  .periodo-opcion-marcada:hover {
    background: var(--repos-fg);
    color: var(--repos-surface);
    border-color: var(--repos-fg);
  }

  .periodo-fechas {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    border-radius: var(--repos-radius-lg) var(--repos-radius-lg) 0 0;
  }

  .periodo-campo input {
    min-height: 44px;
  }

  .tablero-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tablero-tarjeta {
    padding: 14px 16px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tablero-kpi-cifra {
    font-size: 22px;
  }

  .tablero-cifra-principal .tablero-kpi-cifra {
    font-size: 36px;
  }

  .tablero-franja-alertas {
    padding: 12px 16px;
  }

  .tablero-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .tablero-col-span-2 {
    grid-column: 1 / -1;
  }

  .tablero-chart-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .tablero-card-header {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------- Grilla del Dashboard ---------- */

.tablero-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.tablero-col-span-2 {
  grid-column: span 2;
}

@media (max-width: 1199.98px) {
  .tablero-col-span-2 {
    grid-column: span 1;
  }
}

.tablero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.tablero-chart-container {
  position: relative;
  width: 100%;
  min-height: 250px;
  flex: 1;
}

.tablero-canvas {
  width: 100% !important;
  max-height: 280px;
}

/* ---------- Botones de Alternancia Monto/Cantidad ---------- */

.tablero-btn-toggle-group {
  display: inline-flex;
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-sm);
  overflow: hidden;
}

.tablero-btn-toggle {
  background: var(--repos-bg);
  border: none;
  color: var(--repos-fg-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tablero-btn-toggle.active {
  background: var(--repos-accent);
  color: var(--repos-accent-fg);
}

/* ---------- Destacados y Operativos ---------- */

.tablero-operativos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tablero-operativo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--repos-bg);
  border-radius: var(--repos-radius-sm);
  border: 1px solid var(--repos-border);
}

.tablero-operativo-label {
  font-size: 13px;
  color: var(--repos-fg-muted);
}

.tablero-operativo-val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Alertas ---------- */

/* E21-37 — Alertas en dos pestañas y una matriz (pantalla 04-alertas.png).
 * Las pestañas son enlaces (sin JS); la actual lleva aria-current y la raya
 * cian. El morado (inteligencia) sólo en «N hoy»: es un aviso, no un botón.
 * Cada interruptor es un botón de 44 px (48 en teléfono) que pinta la pista
 * de 38 × 22 de la hoja de componentes. */
.alertas-prueba,
.alertas-respuesta form,
.alertas-quitar,
.alertas-celda form {
  margin: 0;
}

.alertas-aviso {
  margin: 0 0 16px;
}

.alertas-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--repos-border);
}

.alertas-pestana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--repos-fg-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.alertas-pestana:hover,
.alertas-pestana[aria-current="page"] {
  color: var(--repos-fg);
}

.alertas-pestana[aria-current="page"] {
  border-bottom-color: var(--repos-accent);
}

/* E17-94 — en el celular las pestañas (Alertas, Negocio, Catálogos y Carta)
 * son UNA fila que se desliza, como el índice de la plantilla y el periodo:
 * envueltas, las nueve de Catálogos ocupaban cuatro renglones antes de la
 * tabla. La raya va por sombra porque una caja que se desliza recorta lo que
 * se sale de ella (el margen de -1 px de cada pestaña). */
@media (max-width: 599.98px) {
  .alertas-pestanas,
  .carta-pestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--repos-border);
  }

  .alertas-pestana,
  .carta-pestana {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
  }
}

.alertas-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--repos-morado-200);
  background: var(--repos-morado-100);
  color: var(--repos-inteligencia);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.alertas-computadoras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.alertas-tarjeta {
  border: 1px solid var(--repos-border);
  border-radius: var(--repos-radius-lg);
  padding: 20px;
}

.alertas-nota {
  margin: 0;
  font-size: 13px;
}

.alertas-vacio {
  margin: 0;
  font-size: 14px;
}

.alertas-bitacora {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alertas-recibida {
  padding: 12px 16px;
  background: var(--repos-bg);
  border-radius: var(--repos-radius-sm);
}

.alertas-recibida-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.alertas-cuando {
  font-size: 12.5px;
  margin-top: 2px;
}

.alertas-asunto {
  font-size: 13.5px;
  margin-top: 2px;
}

.alertas-error {
  color: var(--repos-danger);
  font-size: 13px;
  margin: 0;
}

.alertas-respuesta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.alertas-avisos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.alertas-matriz {
  padding: 0;
  overflow: hidden;
}

.alertas-tabla-caja {
  overflow-x: auto;
}

.alertas-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.alertas-tabla th,
.alertas-tabla td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--repos-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.alertas-tabla thead th {
  background: var(--repos-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--repos-fg-muted);
}

.alertas-tabla tbody th {
  font-weight: 400;
}

.alertas-tabla .alertas-columna,
.alertas-tabla .alertas-celda {
  text-align: center;
  white-space: nowrap;
}

.alertas-correo,
.alertas-quien,
.alertas-aviso-nombre,
.alertas-aviso-cuando {
  display: block;
}

.alertas-correo,
.alertas-aviso-nombre {
  color: var(--repos-fg);
}

.alertas-aviso-nombre {
  font-weight: 700;
}

.alertas-aviso-cuando {
  font-size: 13px;
  margin-top: 2px;
}

.alertas-interruptor {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.alertas-interruptor::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 3px;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--repos-gris-300);
  transition: background 0.15s ease;
}

.alertas-interruptor::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--repos-gris-0);
  transition: left 0.15s ease;
}

.alertas-interruptor[aria-checked="true"]::before {
  background: var(--repos-accent);
}

.alertas-interruptor[aria-checked="true"]::after {
  left: 22px;
}

.alertas-interruptor[aria-busy="true"],
.alertas-interruptor[aria-disabled="true"] {
  cursor: default;
  opacity: 0.6;
}

.alertas-interruptor:focus-visible {
  outline: 2px solid var(--repos-accent);
  outline-offset: 2px;
  border-radius: var(--repos-radius-sm);
}

.alertas-matriz-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
}

.alertas-agregar > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  cursor: pointer;
  color: var(--repos-accent);
  font-weight: 600;
}

.alertas-agregar-forma {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  margin-top: 8px;
  font-size: 13px;
}

.alertas-como-leer h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.alertas-como-leer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1199.98px) {
  .alertas-avisos {
    grid-template-columns: 1fr;
  }

  .alertas-interruptor {
    height: 48px;
  }

  .alertas-interruptor::before {
    top: 13px;
  }

  .alertas-interruptor::after {
    top: 16px;
  }
}

/* ---------- E21-31/F-1: rechazar una transferencia ---------- */

/* Irreversible: danger colour and a second step (<details>, works without JS)
 * that names the amount before the real submit, away from «Confirmar pago
 * recibido». Touching «Rechazar…» again closes it (cancel). */
.btn-peligro {
  color: var(--repos-danger);
  border-color: var(--repos-danger);
}

.btn-peligro:hover {
  background: color-mix(in srgb, var(--repos-danger) 10%, transparent);
}

.transferencia-rechazo {
  display: inline-block;
  margin-left: 1.5rem;
  vertical-align: top;
}

.transferencia-rechazo > summary {
  list-style: none;
  cursor: pointer;
}

.transferencia-rechazo > summary::-webkit-details-marker {
  display: none;
}

.transferencia-rechazo-paso {
  max-width: 320px;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--repos-danger);
  border-radius: var(--repos-radius-sm);
  font-size: 13px;
}

.transferencia-rechazo-paso p {
  margin: 0 0 0.5rem;
}

/* ---------- E17-71 / E17-97 — Fidelización ----------
 * El resumen del programa arriba, las tarjetas de puntos de la licencia y los
 * movimientos de una. E17-97: the open card has eight columns (kind, branch,
 * folio, employee, reason…), so it goes on top of the list, full width, at
 * every size; on the phone each row is a block with the label of its column
 * (`data-columna`), with no table to scroll sideways. */

.rep-fidelizacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.rep-fidelizacion-con-tarjeta .rep-fidelizacion-detalle {
  order: 0;
}

/* E17-97/AC-2 — five figures: as many per row as fit, never narrower than a figure. */
.rep-fidelizacion-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.rep-fidelizacion-mensaje {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--repos-border);
  border-left: 3px solid var(--repos-success);
  border-radius: var(--repos-radius-sm);
  background: var(--repos-surface);
  font-size: 14px;
}

.rep-fidelizacion-mensaje-error {
  border-left-color: var(--repos-danger);
}

/* E17-97/AC-2 — the manual adjustment of the open card. */
.rep-fidelizacion-ajuste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0 20px 16px;
}

.rep-fidelizacion-ajuste-operacion {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 40px;
}

.rep-fidelizacion-ajuste-operacion legend {
  float: left;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
}

.rep-fidelizacion-ajuste-campo,
.rep-fidelizacion-descarga label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--repos-fg-muted);
}

.rep-fidelizacion-ajuste-campo .input {
  width: 120px;
  min-height: 40px;
}

.rep-fidelizacion-ajuste-motivo {
  flex: 1 1 220px;
}

.rep-fidelizacion-ajuste-motivo .input {
  width: 100%;
}

/* E17-97/AC-2 — the CSV of every movement, at the foot of the list. */
.rep-fidelizacion-descarga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--repos-border-subtle);
}

.rep-fidelizacion-descarga-titulo {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
}

.rep-fidelizacion-descarga .input {
  min-height: 40px;
}

.rep-fidelizacion-descarga-nota {
  align-self: center;
  font-size: 12px;
}

.rep-fidelizacion-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.rep-fidelizacion-cabeza h2 {
  margin: 0;
  font-size: 16px;
}

.rep-fidelizacion-nota {
  margin: 4px 0 0;
  font-size: 13px;
}

.rep-fidelizacion-buscar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* 40 px en escritorio, como el buscador de Catálogos; bajo 1200 px `.input`
 * toma el mínimo táctil del bloque de E17-57. */
.rep-fidelizacion-campo {
  width: 260px;
  max-width: 100%;
  min-height: 40px;
}

/* La etiqueta del buscador: para el lector de pantalla, no para el ojo. */
.rep-fidelizacion-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rep-fidelizacion-vacio {
  margin: 0;
  padding: 4px 20px 20px;
  font-size: 14px;
  color: var(--repos-fg-muted);
}

.rep-fidelizacion-vacio p {
  margin: 0 0 8px;
}

.rep-fidelizacion-pie {
  margin: 0;
  padding: 0 20px 12px;
  font-size: 13px;
}

.rep-fidelizacion-tabla td a {
  font-family: var(--repos-font-mono);
  font-weight: 600;
}

.rep-fidelizacion-tabla .tag {
  margin-left: 6px;
}

.rep-fidelizacion-actual td {
  background: var(--color-accent-100);
}

/* E21-64 — en el celular el día va arriba y sus turnos debajo, a lo ancho. */
@media (max-width: 599.98px) {
  .carta-horario-dia {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .carta-horario-turnos {
    grid-column: 1 / -1;
  }

  .carta-horario-turno input[type="time"] {
    flex: 1 1 6.5rem;
    width: auto;
    min-height: var(--repos-touch-min);
  }

  .carta-horario-enlace,
  .carta-horario-quitar {
    min-height: var(--repos-touch-min);
  }
}

@media (max-width: 599.98px) {
  .rep-fidelizacion-campo {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  /* El buscador ocupa el renglón y el botón se queda junto al campo. */
  .rep-fidelizacion-buscar {
    flex: 1 1 100%;
    flex-wrap: nowrap;
  }

  /* E17-97 — the adjustment and the download: one field per row, full width. */
  .rep-fidelizacion-ajuste-campo,
  .rep-fidelizacion-descarga label {
    flex: 1 1 100%;
  }

  .rep-fidelizacion-ajuste-campo .input,
  .rep-fidelizacion-descarga .input {
    width: 100%;
  }

  .rep-fidelizacion-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rep-fidelizacion-tabla tr {
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid var(--repos-border-subtle);
  }

  .rep-fidelizacion-tabla td,
  .rep-tabla .rep-fidelizacion-tabla td:first-child,
  .rep-tabla .rep-fidelizacion-tabla td:last-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
  }

  /* El rótulo es texto, aunque la cifra de su celda vaya en la mono. */
  .rep-fidelizacion-tabla td::before {
    content: attr(data-columna);
    color: var(--repos-fg-muted);
    font-family: var(--repos-font);
    font-size: 12px;
    text-align: left;
  }
}

/* E33-02 — los paquetes de timbres del bloque «Timbres» de Facturación. */
.rep-timbres-paquetes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

.rep-timbres-paquete {
  margin: 0;
}