/* ─────────────────────────────────────────────────────────────────────────────
   Sellers Unidos — expediente sobrio.

   Estilo: burocrático-terminal ("Papers, Please") pero RELAJADO. La idea es que
   parezca un sistema serio y bien hecho, no un juego ni una terminal agresiva:

   1. MONOESPACIADA en todo. Es lo que da el carácter de expediente y hace que
      las cifras se alineen solas. Se usa una fuente de sistema legible, no una
      de máquina de escribir.
   2. OSCURA Y CALMADA. Fondo carbón (no negro puro, que cansa la vista) y un
      acento ámbar de sello. Nada de neón ni de saturación alta.
   3. CAJAS DEFINIDAS. Bordes finos y esquinas casi rectas: cada bloque se lee
      como un campo de un formulario oficial.
   4. DISCRETA. Nada en pantalla delata qué se vende. Sin imágenes, sin nombres
      explícitos en títulos ni en la pestaña.
   5. EL PULGAR MANDA. Primero teléfono: acciones abajo y objetivos grandes.

   Nota: el tema ya NO se hereda de Telegram. Antes los colores los ponía la app
   del usuario y la identidad se perdía —cada quien veía una web distinta—; hoy
   el diseño es el mismo en todas partes. De Telegram solo se respetan las áreas
   seguras (notch y barra inferior).
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Superficies ── */
  --papel:        #0d0f12;   /* fondo general: carbón, no negro puro */
  --superficie:   #14171c;   /* tarjetas y barras */
  --superficie-2: #1a1e25;   /* zonas hundidas, campos */
  --borde:        #262b34;
  --borde-fuerte: #333a45;

  /* ── Tinta ── */
  --tinta:        #dfe3ea;
  --tinta-suave:  #98a0ad;
  --tinta-tenue:  #6b7481;

  /* ── Acento: ámbar de sello ── */
  --acento:        #d9a441;
  --acento-tinta:  #1a1408;   /* texto sobre el ámbar */
  --acento-suave:  #2a2113;

  /* ── Estados, todos desaturados ── */
  --exito:        #7aa96b;
  --exito-suave:  #1a241a;
  --alerta:       #c99a4a;
  --alerta-suave: #262013;
  --error:        #c26a5f;
  --error-suave:  #271918;

  /* ── Forma ── */
  --radio:     6px;
  --radio-sm:  4px;
  --radio-lg:  8px;
  --hueco:     0.9rem;
  --ancho:     760px;
  --transicion: 140ms cubic-bezier(.4, 0, .2, 1);

  /* Área segura del teléfono (notch y barra inferior). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
          "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

/* Tema claro: expediente en papel. Se mantiene por si alguien lo prefiere, con
   el mismo lenguaje de sello ámbar. */
:root[data-tema="light"] {
  --papel: #edeae3; --superficie: #f7f5f0; --superficie-2: #e9e5dc;
  --borde: #d6d0c4; --borde-fuerte: #bdb5a5;
  --tinta: #211d16; --tinta-suave: #5f584c; --tinta-tenue: #857d6e;
  --acento: #9a6b16; --acento-tinta: #fdfaf4; --acento-suave: #f0e6d2;
  --exito: #4d7a3f; --exito-suave: #e6efe1;
  --alerta: #966c1f; --alerta-suave: #f4ead6;
  --error: #a2453a; --error-suave: #f6e3e0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--mono), var(--emoji);
  font-size: 15px;                 /* la monoespaciada se ve más grande */
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  /* Trama muy tenue: da textura de papel/pantalla sin ensuciar la lectura. */
  background-image:
    repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(255, 255, 255, .012) 3px, rgba(255, 255, 255, .012) 4px);
  -webkit-font-smoothing: antialiased;
}
:root[data-tema="light"] body { background-image: none; }

/* Los campos a 16px o iOS hace zoom al enfocarlos. */
input, select, textarea, button { font-family: inherit; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

header.barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  padding-top: var(--safe-top);
}
header.barra .interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: .7rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
header.barra .marca {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; color: var(--tinta); text-decoration: none;
  border-left: 3px solid var(--acento); padding-left: .55rem;
}
header.barra .acciones { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

main { padding: 1.5rem 0 calc(66px + var(--safe-bottom) + 1.5rem); }

/* ── Tipografía ───────────────────────────────────────────────────────────── */

h1 {
  font-size: 1.15rem; line-height: 1.3; margin: 0 0 .2rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
h2 {
  font-size: .78rem; margin: 2rem 0 .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
  display: flex; align-items: center; gap: .6rem;
}
/* Línea de separación que sale del título, como una sección de formulario. */
h2::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}
h3 { font-size: .92rem; margin: 0 0 .3rem; font-weight: 650; letter-spacing: .02em; }
p  { margin: 0 0 .75rem; }
p.guia { color: var(--tinta-suave); font-size: .87rem; }

a { color: var(--acento); }
.enlace {
  color: var(--acento); text-decoration: none;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.enlace:hover { border-bottom-style: solid; }

code, .clave {
  font-family: var(--mono);
  background: var(--superficie-2); border: 1px solid var(--borde);
  padding: .12em .4em; border-radius: var(--radio-sm); font-size: .92em;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.tarjeta, .vidrio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
}
/* La tarjeta del saldo lleva el sello ámbar al costado. */
.tarjeta.saldo {
  border-left: 3px solid var(--acento);
  background: linear-gradient(180deg, var(--acento-suave) 0%, var(--superficie) 60%);
}

.etiqueta {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 650;
}
.cifra {
  font-size: 2rem; font-weight: 700; letter-spacing: -.01em;
  margin: .15rem 0 0; font-variant-numeric: tabular-nums;
}
.cifra.chica { font-size: 1.15rem; }
.sub { color: var(--tinta-tenue); font-size: .78rem; margin: .1rem 0 0;
       letter-spacing: .1em; text-transform: uppercase; }

.rejilla {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ── Listas tipo expediente ───────────────────────────────────────────────── */

.lista {
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: var(--superficie);
}
.fila {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .9rem; min-height: 54px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--borde);
  transition: background var(--transicion);
}
.lista .fila:last-child { border-bottom: none; }
a.fila:hover { background: var(--superficie-2); }
.fila .icono {
  font-size: 1.1rem; width: 1.7rem; text-align: center; flex: none;
  font-family: var(--emoji), var(--mono);
}
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .titulo { font-weight: 620; font-size: .92rem; }
.fila .detalle { color: var(--tinta-tenue); font-size: .78rem; }
.fila .valor { color: var(--tinta-suave); font-size: .85rem;
               font-variant-numeric: tabular-nums; }
.fila .flecha { color: var(--tinta-tenue); flex: none; }

/* Los pasos numerados de la portada van en cajita, como el folio de un trámite.
   Es lo único decorativo de la página, y ni siquiera insinúa qué se vende. */
.fila .icono.num {
  font-size: .8rem; font-weight: 700; color: var(--tinta-tenue);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  width: 1.6rem; height: 1.6rem; line-height: 1.5rem;
  font-family: var(--mono);
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.portada { text-align: center; padding: 3.5rem 1rem 2.5rem; }
.portada h1 { font-size: 1.55rem; letter-spacing: .1em; margin-bottom: .6rem; }
/* Doble filete bajo el título: el gesto de "documento sellado" sin recargar. */
.portada h1::after {
  content: ""; display: block; width: 56px; height: 0; margin: .9rem auto 0;
  border-top: 1px solid var(--acento); border-bottom: 1px solid var(--acento);
  padding-top: 3px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem 1.1rem; border-radius: var(--radio);
  background: var(--acento); color: var(--acento-tinta);
  border: 1px solid var(--acento);
  font-size: .86rem; font-weight: 700; font-family: inherit;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: filter var(--transicion), transform var(--transicion);
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton.ancho { width: 100%; }
.boton.chico { padding: .45rem .7rem; font-size: .72rem; }
.boton.fantasma {
  background: transparent; color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
}
.boton.fantasma:hover { background: var(--superficie-2); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Fila de filtros: en teléfono se desliza en vez de partirse en tres renglones,
   que era lo que empujaba la tabla fuera de la pantalla.  [web-filtros] */
.filtros {
  display: flex; gap: .4rem; margin-bottom: 1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: .3rem; scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtros .boton { flex: none; }

/* ── Fichas de opción ─────────────────────────────────────────────────────── */
/* Un <select> esconde las opciones detrás de un toque y no deja ver de un
   vistazo con qué se puede pagar. Estas son radios de verdad: funcionan sin
   JavaScript y el teclado las recorre solo.  [web-chips] */

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 1rem; }

.chip-in {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem; border-radius: var(--radio-sm);
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-suave); cursor: pointer;
  font-size: .8rem; letter-spacing: .04em;
  transition: border-color var(--transicion), color var(--transicion);
  min-height: 44px;                 /* objetivo cómodo para el pulgar */
}
.chip:hover { color: var(--tinta); border-color: var(--tinta-tenue); }
.chip-in:checked + .chip {
  border-color: var(--acento); color: var(--acento);
  background: var(--acento-suave);
}
.chip-in:focus-visible + .chip { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Ficha que representa el valor PUESTO de un ajuste. No es un radio (cada una
   es su propio formulario, para que funcione sin JavaScript), asi que el
   estado se marca con una clase en vez de con :checked.  [ajustes-catalogo] */
.chip.puesto {
  border-color: var(--acento); color: var(--acento);
  background: var(--acento-suave); font-weight: 700;
}
table.matriz { width: 100%; border-collapse: collapse; }
table.matriz th {
  text-align: left; padding: .45rem .6rem .45rem 0;
  font-size: .8rem; white-space: nowrap; vertical-align: middle;
  color: var(--tinta-suave); font-weight: 650;
}
table.matriz td { padding: .25rem 0; }

/* ── Pantalla de pago ─────────────────────────────────────────────────────── */

.pago {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .pago { grid-template-columns: 260px 1fr; }
}
/* Fondo blanco fijo: un QR sobre fondo oscuro no lo lee ningún lector, y aquí
   escanear importa más que la coherencia del tema. */
.qr {
  background: #fff; padding: .9rem; border-radius: var(--radio);
  line-height: 0; width: 100%; max-width: 260px; margin: 0 auto;
}
.qr svg { width: 100%; height: auto; display: block; }

/* ── Campos ───────────────────────────────────────────────────────────────── */

.campo { margin-bottom: .9rem; }
.campo label {
  display: block; margin-bottom: .3rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 650;
}
input, select, textarea, .entrada {
  width: 100%; padding: .75rem .8rem;
  font-family: var(--mono); font-size: 16px;   /* 16px evita el zoom de iOS */
  color: var(--tinta); background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  transition: border-color var(--transicion);
}
input:focus, select:focus, textarea:focus, .entrada:focus {
  outline: none; border-color: var(--acento);
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }

/* ── Avisos: banda lateral, como un sello en el margen ────────────────────── */

.aviso {
  border: 1px solid var(--borde); border-left: 3px solid var(--tinta-tenue);
  border-radius: var(--radio-sm);
  padding: .75rem .9rem; margin: 0 0 1rem; font-size: .87rem;
  background: var(--superficie);
}
.aviso.bueno { border-left-color: var(--exito); background: var(--exito-suave); }
.aviso.malo  { border-left-color: var(--error); background: var(--error-suave); }
.aviso.ojo   { border-left-color: var(--alerta); background: var(--alerta-suave); }

/* ── Píldoras de estado ───────────────────────────────────────────────────── */

.pildora {
  display: inline-block; padding: .18rem .5rem; border-radius: var(--radio-sm);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
  background: var(--superficie-2);
}
.pildora.ok     { color: var(--exito);  border-color: var(--exito);  background: var(--exito-suave); }
.pildora.malo   { color: var(--error);  border-color: var(--error);  background: var(--error-suave); }
.pildora.espera { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-suave); }
.pildora.info   { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }

/* ── Copiable ─────────────────────────────────────────────────────────────── */

.copiable {
  font-family: var(--mono); word-break: break-all; cursor: pointer;
  background: var(--superficie-2); border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm); padding: .6rem .7rem; display: block;
  font-size: .85rem;
}
.copiable:hover { border-color: var(--acento); }

/* ── Tablas ───────────────────────────────────────────────────────────────── */

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .55rem .6rem; text-align: left; vertical-align: middle; }
thead th {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 700;
  border-bottom: 1px solid var(--borde-fuerte);
}
tbody tr { border-top: 1px solid var(--borde); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Navegación inferior: donde llega el pulgar ───────────────────────────── */

nav.abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--superficie) 96%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  padding-bottom: var(--safe-bottom);
}
nav.abajo a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .25rem .55rem; text-decoration: none;
  color: var(--tinta-tenue); font-size: .62rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  border-top: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
nav.abajo a .ic { font-size: 1.15rem; line-height: 1; font-family: var(--emoji); }
nav.abajo a[aria-current="page"] {
  color: var(--acento); border-top-color: var(--acento);
}

nav.arriba { display: none; }
nav.arriba a {
  text-decoration: none; color: var(--tinta-suave);
  font-size: .72rem; font-weight: 650; padding: .35rem .55rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--radio-sm); transition: color var(--transicion);
}
nav.arriba a:hover { color: var(--tinta); }
nav.arriba a[aria-current="page"] { color: var(--acento); }

@media (min-width: 760px) {
  nav.abajo { display: none; }
  nav.arriba { display: flex; gap: .1rem; align-items: center; }
  main { padding-bottom: 3rem; }
}
@media (max-width: 759px) {
  header.barra .acciones .solo-escritorio { display: none; }
}

/* Dentro de Telegram la navegación NO cambia con el ancho: en Telegram de
   escritorio la ventana pasa de 760px y la misma app enseñaba botones distintos
   según el tamaño.  [webapp-nav] */
:root[data-telegram="1"] nav.abajo  { display: flex !important; }
:root[data-telegram="1"] nav.arriba { display: none  !important; }
:root[data-telegram="1"] main {
  padding-bottom: calc(66px + var(--safe-bottom) + 1.5rem) !important;
}
:root[data-telegram="1"] nav.abajo { padding-bottom: max(var(--safe-bottom), .35rem); }

/* ── Menú de la barra (engranaje) ─────────────────────────────────────────── */
/* <details> nativo: se abre sin JavaScript y el teclado lo maneja solo; el JS
   únicamente lo cierra al tocar fuera. Sustituye a la pestaña «Más» del
   rediseño del 16 ago 2026.  [web-navegacion] */

.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; cursor: pointer; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones .panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 250px; padding: .35rem;
}
.menu-acciones .fila { min-height: 44px; padding: .55rem .7rem; }

/* Tarjetas de panel con píldora de estado en el título («en el bot»): el
   flex evita que la píldora baile respecto al emoji y el texto.  [owner-panel] */
.rejilla .vidrio h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ── Velo modal ───────────────────────────────────────────────────────────── */
/* Para el popup de contraseña de respaldo. Uno solo por pantalla y siempre
   cerrable: bloquear del todo deja fuera al que viene con prisa.
     [identity-backup-auth] */

.velo {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0, 0, 0, .65);
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}