/*
 * Panel del comercio — Stepfy
 *
 * La paleta y las tipografías son las mismas de step-fy.com, para que quien
 * entra desde la web no sienta que cambió de producto.
 *
 * Lo que manda el diseño: el mostrador mira esto de reojo, de pie, con el local
 * lleno. De ahí los números grandes, el contraste alto y los botones que se
 * pueden tocar con el pulgar sin apuntar.
 */

:root {
  --ink: #0F1B2D;
  --ink-soft: #16283F;
  --deep: #0B1421;
  --acc: #01A060;
  --acc-dk: #0B7A52;
  --acc-lo: #4FCB94;
  --wash: #EFF9F4;
  --white: #FFFFFF;
  --gris: #8A97A8;
  --linea: #E4EAF1;
  --rojo: #D9344A;
  --rojo-lo: #FDECEE;
  --ambar: #B8860B;

  --f-d: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-b: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, monospace;

  --r: 16px;
  --sombra: 0 2px 10px rgba(15, 27, 45, .06);
  --sombra-alta: 0 18px 50px rgba(15, 27, 45, .18);
}

* { box-sizing: border-box; }

/*
 * El atributo hidden tiene que ganar siempre.
 *
 * El navegador lo aplica con `display: none` en su hoja de estilos propia, que
 * pierde contra cualquier regla nuestra. Sin esta línea, un `.resultado { display:
 * grid }` deja la capa del resultado tendida sobre toda la pantalla aunque esté
 * marcada como oculta: invisible, pero tapando cada botón del panel.
 *
 * Es el tipo de error que no se ve mirando, y que deja el panel inservible.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--f-b);
  color: var(--ink);
  background: #F6F9FC;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--f-d); font-weight: 800; letter-spacing: -.02em; margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------- estructura */

.envoltura {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 100px;
}

#barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--sombra);
}

.barra-interna {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.marca { display: flex; align-items: center; gap: 9px; font-family: var(--f-d); font-weight: 800; }
.marca img { height: 26px; width: auto; display: block; }

.barra-interna .crece { flex: 1; }

#quien { font-size: 13px; color: #B9C6D6; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#btn-salir {
  background: rgba(255, 255, 255, .1);
  border: 0; color: var(--white);
  border-radius: 10px; padding: 7px 12px;
  font-size: 13px; cursor: pointer;
}
#btn-salir:hover { background: rgba(255, 255, 255, .18); }

/*
 * La navegación va abajo en el teléfono y arriba en pantalla grande.
 * Abajo porque el pulgar llega; arriba porque con mouse es donde se busca.
 */
.nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 25;
  display: grid;
  /*
   * Tantas columnas como botones haya a la vista, sin escribir el número.
   *
   * Antes decía `repeat(6, 1fr)`, con un comentario que avisaba de lo que iba
   * a pasar si alguien agregaba una pestaña y se olvidaba de actualizarlo. Pasó
   * dos veces: la versión de escritorio de más abajo se quedó en cinco y el
   * sexto botón caía a una segunda fila; y una cuenta de mostrador, que no ve
   * tres de las seis secciones, dejaba la barra con tres botones apretados a la
   * izquierda y media barra vacía.
   *
   * Con `grid-auto-flow: column` las columnas las cuentan los hijos. Y un botón
   * escondido no cuenta, porque `hidden` es `display:none` y un elemento así no
   * genera columna. Un número menos que mantener a mano.
   */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--white);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav button {
  background: none; border: 0; cursor: pointer;
  padding: 10px 2px 12px;
  min-width: 0;                 /* sin esto una etiqueta larga ensancha su columna */
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--gris);
}
.nav button span.ico { font-size: 20px; line-height: 1; }
/* Los iconos son SVG: toman el color del botón, así que cambian solos cuando
   la pestaña está activa y no hace falta una segunda versión de cada uno. */
.nav button svg.ico { width: 22px; height: 22px; display: block; flex: none; }
/* Con seis pestañas, a 320 px el texto no entra. Se achica antes de partirse
   en dos líneas, que es lo que de verdad rompe la barra: dos filas se comen
   media pantalla de un teléfono chico y tapan el contenido. */
@media (max-width: 380px) {
  .nav button { font-size: 9.5px; padding-left: 0; padding-right: 0; }
  .nav button span.ico { font-size: 17px; }
  .nav button svg.ico { width: 19px; height: 19px; }
}
.nav button.activo { color: var(--acc); }

@media (min-width: 720px) {
  .nav {
    position: sticky; top: 50px; bottom: auto;
    max-width: 880px; margin: 14px auto 0;
    /* Acá las columnas se ajustan a cada botón en vez de repartirse el ancho:
       en escritorio sobra lugar y seis botones estirados se leen como seis
       cajas, no como un menú. */
    grid-template-columns: repeat(5, auto);
    justify-content: start;
    gap: 4px;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: 6px;
  }
  .nav button { flex-direction: row; gap: 8px; font-size: 14px; padding: 9px 16px; border-radius: 11px; }
  .nav button.activo { background: var(--wash); }
  .envoltura { padding-bottom: 40px; }
}

/* ------------------------------------------------------------------ comunes */

.tarjeta {
  background: var(--white);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-top: 16px;
}

.titulo-seccion { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; }
.titulo-seccion h2 { font-size: 22px; flex: 1; }

.ayuda { color: var(--gris); font-size: 14px; line-height: 1.6; margin: 6px 0 0; }

.boton {
  background: var(--acc); color: var(--white);
  border: 0; border-radius: 12px;
  padding: 14px 20px;
  font-weight: 700; cursor: pointer;
  width: 100%;
}
.boton:hover { background: var(--acc-dk); }
.boton:disabled { opacity: .55; cursor: wait; }

/*
 * El selector lleva `a` además de `button`.
 *
 * Decía sólo `button.chico`, y había un `<a class="chico">` —el de abrir en
 * Google Maps— que no agarraba NADA: salía como el enlace azul subrayado que
 * pone el navegador por omisión, en una fila donde todo lo demás son pastillas.
 * La clase estaba puesta; el estilo no la alcanzaba.
 */
button.chico, a.chico {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--wash); color: var(--acc-dk);
  border: 0; border-radius: 9px;
  padding: 8px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
button.chico:hover, a.chico:hover { background: #DFF3E9; }
button.chico.tenue { background: #F2F5F9; color: var(--ink-soft); }

/*
 * La variante «se abre afuera».
 *
 * Sin relleno y en gris: al lado de «Estoy en el local», que es la acción de
 * esta fila, abrir el mapa es nada más ir a mirar. Dos pastillas verdes
 * iguales harían elegir entre dos cosas que no pesan lo mismo.
 *
 * El color recién aparece al pasar por encima, y el subrayado nunca: lo que
 * dice que es tocable es la flechita, que además adelanta que se va a abrir
 * otra pestaña.
 */
a.chico.fuera {
  background: none;
  color: var(--gris);
  padding-left: 8px; padding-right: 8px;
}
a.chico.fuera svg {
  width: 13px; height: 13px;
  flex: none;
  opacity: .65;
  /* Un pelín arriba: el icono es cuadrado y el texto no, así que alineados por
     la caja quedan desfasados a la vista. */
  margin-top: -1px;
  transition: transform .15s ease, opacity .15s ease;
}
a.chico.fuera:hover {
  background: var(--wash);
  color: var(--acc-dk);
}
a.chico.fuera:hover svg {
  opacity: 1;
  /* Se va hacia afuera, que es a dónde lleva. Un píxel alcanza. */
  transform: translate(1px, -1px);
}
/* El foco del teclado sí se tiene que ver, y fuerte: sin relleno de fondo, el
   contorno es lo único que dice dónde está parado. */
a.chico.fuera:focus-visible {
  background: var(--wash); color: var(--acc-dk);
  outline: 2px solid var(--acc); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  a.chico.fuera svg { transition: none; }
  a.chico.fuera:hover svg { transform: none; }
}

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 11px;
  padding: 12px 14px;
  background: var(--white);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--acc-lo); box-shadow: 0 0 0 3px rgba(79, 203, 148, .22);
}
.campo textarea { min-height: 76px; resize: vertical; }
.campo .pista { font-size: 12px; color: var(--gris); margin-top: 5px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.chip {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
}
.chip.activo   { background: var(--wash); color: var(--acc-dk); }
.chip.pausado  { background: #FFF6E0; color: var(--ambar); }
.chip.borrador { background: #F2F5F9; color: var(--gris); }

.tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  background: #F2F5F9; color: var(--ink-soft);
}
.tag.usado  { background: var(--wash); color: var(--acc-dk); }
.tag.activo { background: #FFF6E0; color: var(--ambar); }

.cargando { color: var(--gris); font-size: 14px; padding: 18px 0; }

.vacio { padding: 10px 0; }
.vacio p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

#aviso {
  position: fixed; left: 16px; right: 16px; bottom: 76px;
  z-index: 60;
  padding: 14px 16px; border-radius: 13px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--sombra-alta);
}
#aviso.error { background: var(--rojo); color: var(--white); }
#aviso.ok    { background: var(--acc); color: var(--white); }
@media (min-width: 720px) {
  #aviso { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
}

/* Un botón que se lee como enlace: «Olvidé mi contraseña» no compite con
   «Entrar», así que no tiene que verse como un botón. */
.enlace {
  display: block; width: 100%;
  background: none; border: 0;
  color: var(--acc-dk); font-size: 13.5px; font-weight: 600;
  padding: 12px 0 2px; cursor: pointer; text-align: center;
}
.enlace:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- login */

.entrar {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background: linear-gradient(170deg, var(--ink) 0%, var(--deep) 100%);
}
.entrar-caja {
  width: 100%; max-width: 420px;
  background: var(--white);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: var(--sombra-alta);
}
.entrar-marca { text-align: center; margin-bottom: 4px; }
/* Más grande que en el resto de la aplicación a propósito: acá la marca es lo
   único que dice de quién es esta pantalla, y es donde alguien confirma que
   está escribiendo su contraseña en el lugar correcto. Adentro, en cambio, va
   chica porque lo que importa es el contenido. */
.entrar-marca img { height: 52px; }
.entrar-caja h1 { font-size: 22px; text-align: center; margin: 14px 0 4px; }
.entrar-caja .ayuda { text-align: center; margin-bottom: 20px; }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #F2F5F9; border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.pestanas button { background: none; border: 0; border-radius: 9px; padding: 10px; font-weight: 700; font-size: 14px; color: var(--gris); cursor: pointer; }
.pestanas button.activo { background: var(--white); color: var(--ink); box-shadow: var(--sombra); }

/* ----------------------------------------------------------------- validar */

.validar-caja { text-align: center; }

#casillas {
  display: flex; justify-content: center; gap: 8px;
  margin: 6px 0 18px;
}
#casillas span {
  width: 46px; height: 60px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--f-m); font-size: 28px; font-weight: 700;
  background: var(--white);
}
#casillas span.lleno { border-color: var(--acc); background: var(--wash); }
#casillas span.cursor { border-color: var(--acc-lo); box-shadow: 0 0 0 3px rgba(79, 203, 148, .22); }

@media (max-width: 400px) {
  #casillas { gap: 6px; }
  #casillas span { width: 42px; height: 54px; font-size: 24px; }
}

/* El campo real queda invisible pero recibe el teclado físico y el foco. */
#codigo {
  position: absolute; opacity: 0; pointer-events: none;
  height: 1px; width: 1px;
}

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  max-width: 320px;
  margin: 0 auto;
}
.teclado button {
  background: var(--white);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 17px 0;
  font-size: 24px; font-weight: 700;
  cursor: pointer;
  /* Sin esto, mantener el dedo en una tecla selecciona el número. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.teclado button:active { background: var(--wash); transform: scale(.97); }
.teclado button.aux { font-size: 15px; font-weight: 600; color: var(--ink-soft); background: #F2F5F9; }

#validando { color: var(--gris); font-size: 14px; margin-top: 14px; }

/*
 * El resultado tapa todo a propósito.
 *
 * Es la única cosa que quien atiende tiene que leer, y tiene que poder leerla
 * de reojo a medio metro. Nada compite con ella en pantalla.
 */
.resultado {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid; place-items: center;
  padding: 24px;
  text-align: center;
  animation: aparecer .18s ease-out;
}
.resultado.si { background: var(--acc); color: var(--white); }
.resultado.no { background: var(--rojo); color: var(--white); }

@keyframes aparecer { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

#res-icono { font-size: 72px; line-height: 1; font-weight: 700; }
#res-titulo { font-size: 32px; margin: 14px 0 6px; }
#res-premio { font-size: 21px; font-weight: 700; opacity: .95; }
#res-mensaje { font-size: 16px; opacity: .88; margin: 10px auto 26px; max-width: 320px; line-height: 1.55; }

#btn-otro {
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .55);
  color: var(--white);
  border-radius: 13px;
  padding: 15px 34px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
#btn-otro:hover { background: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- resumen */

.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}
@media (min-width: 560px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.numero {
  background: var(--white);
  border: 1px solid var(--linea);
  border-radius: 13px;
  padding: 14px;
  text-align: center;
}
.numero strong { display: block; font-family: var(--f-d); font-size: 27px; }
.numero span { font-size: 12px; color: var(--gris); font-weight: 600; }

/* ---------------------------------------------------------------- premios */

.premio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "emoji cuerpo puntos" ". acciones acciones";
  gap: 12px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 16px;
  margin-top: 12px;
}
.premio.pausado { opacity: .62; }
/*
 * El cuadrado de la izquierda, lleve foto o ícono.
 *
 * Mide lo mismo en los dos casos, y eso NO es cosmético. Cada ficha es su
 * propia grilla con la primera columna en `auto`, así que si el ícono midiera
 * lo que ocupa el carácter y la foto 52 px, una lista con algunos premios con
 * foto y otros sin quedaría con los títulos arrancando en sitios distintos.
 * Fijando el lado, las dos variantes ocupan la misma huella y la columna de
 * texto empieza siempre en el mismo lugar.
 */
.premio-emoji {
  grid-area: emoji;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
}
/* `object-fit: cover` recorta en vez de deformar: las fotos de productos
   llegan en cualquier proporción y una botella estirada se ve peor que una
   botella recortada. */
.premio-foto {
  border-radius: 12px;
  overflow: hidden;
  background: var(--wash);
}
.premio-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.premio-cuerpo { grid-area: cuerpo; min-width: 0; }
.premio-cuerpo h3 { font-size: 16px; }
.premio-desc { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.5; }
.premio-meta { font-size: 12px; color: var(--gris); margin: 6px 0 0; }
.premio-puntos { grid-area: puntos; text-align: right; }
.premio-puntos strong { display: block; font-family: var(--f-d); font-size: 22px; color: var(--acc-dk); }
.premio-puntos span { font-size: 11px; color: var(--gris); }
.premio-acciones { grid-area: acciones; display: flex; gap: 8px; }

dialog {
  border: 0; border-radius: 20px;
  padding: 24px;
  width: min(460px, calc(100vw - 32px));
  box-shadow: var(--sombra-alta);
}
dialog::backdrop { background: rgba(11, 20, 33, .55); }
dialog h2 { font-size: 20px; margin-bottom: 16px; }
.dialogo-pie { display: flex; gap: 10px; margin-top: 6px; }
.dialogo-pie .boton { flex: 1; }

.fila-check { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 14px; }
.fila-check input { width: auto; }

/* ------------------------------------------------------------- movimiento */

.filtros { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.filtros .campo { margin: 0; }
.filtros button { white-space: nowrap; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gris);
  padding: 8px 6px; border-bottom: 1px solid var(--linea);
}
.tabla td { padding: 11px 6px; border-bottom: 1px solid #F2F5F9; }
.tabla .mono { font-family: var(--f-m); font-weight: 700; }

.nota {
  background: #FFF6E0;
  border: 1px solid #F3E3B8;
  border-radius: 13px;
  padding: 14px 16px;
  font-size: 14px; line-height: 1.6;
  color: #6B5410;
  margin-top: 16px;
}

/* ---------------------------------------------------------------- tablero */

.selector-chico {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px; font-weight: 600;
  background: var(--white);
}

.cabecera-tarjeta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cabecera-tarjeta h3 { font-size: 18px; margin-top: 2px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gris);
}

.pildora {
  background: var(--wash); color: var(--acc-dk);
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

.numero em {
  display: block; font-style: normal;
  font-size: 11px; font-weight: 700; margin-top: 3px;
  color: var(--acc-dk);
}
/* `baja` es «mala noticia», no «número menor»: en el costo, subir es malo, así
   que lo decide quien pinta y no el signo del número. */
.numero em.baja { color: var(--rojo); }
/* Ni bueno ni malo: una descripción. En verde se leería como un logro, que es
   lo que pasaba con «7 % de los códigos sin retirar». */
.numero em.neutro { color: var(--gris); }
.numero em:empty { display: none; }

.numeros.tres { grid-template-columns: repeat(3, 1fr); }

/*
 * El gráfico de barras.
 *
 * Sin librería: son divs con una altura en porcentaje. Una librería de
 * gráficos para catorce barras son doscientos kilobytes y una dependencia que
 * mantener, a cambio de nada que acá se note.
 */
.grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 130px; margin-top: 14px;
}
.grafico.chico { height: 86px; }

.grafico i {
  flex: 1;
  background: linear-gradient(180deg, var(--acc-lo), var(--acc));
  border-radius: 4px 4px 2px 2px;
  min-height: 3px;
  position: relative;
  transition: filter .12s;
}
.grafico i:hover { filter: brightness(1.12); }
/* El último es hoy: va en otro color porque el día todavía no terminó y su
   barra siempre va a estar más baja que las demás. */
.grafico i.hoy { background: linear-gradient(180deg, #FFB365, #E8893C); }
.grafico i.cero { background: var(--linea); }

.grafico-pie {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--gris); margin-top: 7px;
}
#g-horas-rotulos { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; }

.dos-columnas { display: grid; gap: 16px; }
@media (min-width: 760px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

.dos-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.dos-numeros strong { display: block; font-family: var(--f-d); font-size: 27px; }
.dos-numeros span { font-size: 12px; color: var(--gris); }

.barra { height: 8px; background: #F2F5F9; border-radius: 999px; overflow: hidden; margin-top: 14px; }
.barra i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }

/* una fila del top de premios o de los últimos entregados */
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #F2F5F9;
}
.fila:last-child { border-bottom: 0; }
.fila .izq { flex: 1; min-width: 0; }
.fila .izq b { display: block; font-size: 14px; font-weight: 600; }
.fila .izq span { font-size: 12px; color: var(--gris); }
.fila .der { text-align: right; white-space: nowrap; }
.fila .der b { font-family: var(--f-d); font-size: 16px; color: var(--acc-dk); }
.fila .der span { display: block; font-size: 11px; color: var(--gris); }

.fila .progreso { height: 5px; background: #F2F5F9; border-radius: 999px; margin-top: 6px; }
.fila .progreso i { display: block; height: 100%; background: var(--acc-lo); border-radius: 999px; }

/* ------------------------------------------------- mostrador (Caja) */
/*
 * La fila de quien está esperando que le entreguen. El botón va grande y
 * verde: lo toca alguien atendiendo, muchas veces con una mano y mirando al
 * cliente, no a la pantalla.
 */
.espera {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--linea);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.espera .t { flex: 1; min-width: 0; }
.espera .acciones { flex: 0 0 auto; }
.espera .chico.verde { padding: 10px 16px; font-size: 14px; }

/*
 * La vista previa del cartel.
 *
 * Grande y al lado de los botones, no escondida abajo. Esto se imprime y se
 * pega en una pared: quien lo baja quiere ver qué va a salir de la impresora
 * ANTES de gastar una hoja, y sobre todo quiere ver que el código es el de su
 * local y no el de otro.
 *
 * La sombra y el borde no son adorno: hacen que se lea como una hoja de papel
 * y no como un bloque de la página.
 */
.cartel-fila { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.cartel-lado { flex: 1; min-width: 220px; }
.cartel-caja {
  flex: 0 0 300px; width: 300px;
  border: 1px solid var(--linea); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 20px rgba(15, 27, 45, .10);
}
/*
 * El HIJO DIRECTO, no cualquier svg de adentro.
 *
 * El cartel lleva el QR como un <svg> anidado con su propio tamaño. Un
 * selector descendente le pegaba también a ése y lo estiraba al 100% del
 * cartel: el código salía gigante, desbordado y encima del texto. Sólo se ve
 * en la vista previa, porque ahí el cartel está escalado por CSS; el archivo
 * que se descarga estaba bien, que es lo que lo hacía difícil de creer.
 */
.cartel-caja > svg { width: 100%; height: auto; display: block; }
.cartel-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* El globo con cuántos esperan. Va en la pestaña: quien atiende no está
   mirando el panel, y el número tiene que verse desde la otra punta. */
.globo {
  display: inline-block; min-width: 17px; padding: 0 4px;
  margin-left: 3px; border-radius: 9px;
  background: var(--acc, #00A05E); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.vacio { color: var(--gris); font-size: 13.5px; padding: 18px 0; text-align: center; }

/* ===========================================================================
   ETAPA 1 — navegación lateral, diálogo propio, cuenta y movimiento
   ===========================================================================

   La navegación en columna es para la pantalla ancha y nada más. En el
   teléfono se queda la barra de abajo: quien atiende usa el panel de pie, con
   una mano, y el pulgar llega al borde inferior y no al lateral. Cambiar eso
   por prolijidad sería empeorar el caso de uso más frecuente.                */

/* El logo de la columna sólo existe en pantalla ancha. Va ANTES del media
   query: un media query no suma especificidad, así que una regla suelta
   escrita después le gana y el logo no aparecería nunca. */
.nav-marca { display: none; }

@media (min-width: 960px) {
  /* Todo se corre: la columna es fija, así que el lugar se hace con padding
     en el body y no con márgenes repartidos por cada bloque.

     Va con `.dentro` y no suelto. Sin esa condición el hueco quedaba
     reservado también en la pantalla de login, donde la columna está
     escondida: aparecía una franja blanca de 252 px a la izquierda y el
     degradado arrancaba corrido. La clase la pone `mostrarPantalla()` con el
     mismo booleano que esconde la columna, así que no pueden desincronizarse:
     o están las dos o no está ninguna. */
  body.dentro { padding-left: 252px; }

  .nav {
    position: fixed; inset: 0 auto 0 0;
    width: 252px; height: 100vh;
    margin: 0; max-width: none;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--white);
    border: 0; border-right: 1px solid var(--linea);
    border-radius: 0;
    padding: 0 12px 14px;
    overflow-y: auto;
  }
  .nav-marca { display: block; padding: 20px 10px 18px; }
  .nav-marca img { height: 26px; width: auto; display: block; }

  .nav button {
    flex-direction: row; justify-content: flex-start;
    gap: 11px; font-size: 14.5px; font-weight: 600;
    padding: 11px 13px; border-radius: 11px;
    position: relative;
    transition: background .14s ease, color .14s ease;
  }
  .nav button span.ico { font-size: 18px; }
  .nav button svg.ico { width: 20px; height: 20px; }
  .nav button:hover { background: #F4F7FA; color: var(--ink); }
  .nav button.activo { background: var(--wash); color: var(--acc-dk); }
  /* La barrita verde a la izquierda: con seis ítems, el fondo claro solo no
     alcanza para ver cuál está elegido de un vistazo. */
  .nav button.activo::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--acc);
  }
  /* El globo de la Caja va al final de la fila, no pegado al texto. */
  .nav button .globo { margin-left: auto; }

  /* El logo ya está arriba de la columna: repetirlo en la barra es ruido. */
  #barra .marca { display: none; }
  .barra-interna { max-width: 1040px; }
  .envoltura { max-width: 1040px; padding-bottom: 48px; }
}

/* ------------------------------------------------------------------- cuenta */

.cuenta-btn {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 13px 5px 5px;
  color: var(--white);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .14s ease;
  max-width: 230px;
}
.cuenta-btn:hover { background: rgba(255, 255, 255, .15); }
.cuenta-inicial {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--acc); color: var(--white);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800;
  flex: none;
}
.cuenta-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .cuenta-nombre { display: none; } .cuenta-btn { padding-right: 5px; } }

/* ------------------------------------------------------------------ diálogo */

#dialogo { position: fixed; inset: 0; z-index: 80; display: flex;
           align-items: center; justify-content: center; padding: 20px; }
.dlg-fondo { position: absolute; inset: 0; background: rgba(11, 20, 33, .55);
             animation: dlg-fondo .18s ease-out; }
.dlg-caja {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow: var(--sombra-alta);
  animation: dlg-entra .2s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes dlg-fondo { from { opacity: 0 } to { opacity: 1 } }
@keyframes dlg-entra {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.dlg-icono {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 23px;
  background: var(--wash); margin-bottom: 14px;
}
.dlg-icono.alerta { background: var(--rojo-lo); }
.dlg-caja h3 { font-family: var(--f-d); font-size: 20px; margin: 0 0 8px; }
#dlg-texto { color: var(--gris); font-size: 14.5px; line-height: 1.6; overflow-y: auto; }
#dlg-texto b { color: var(--ink); font-weight: 700; }
#dlg-texto .dato { display: flex; justify-content: space-between; gap: 14px;
                   padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
#dlg-texto .dato:last-child { border-bottom: 0; }
#dlg-texto .dato span { color: var(--gris); }
#dlg-texto .dato b { color: var(--ink); text-align: right; word-break: break-all; }
.dlg-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex: none; }
.dlg-botones .boton, .dlg-botones .boton-fantasma { width: auto; padding: 11px 20px; }
.boton-fantasma {
  background: none; border: 1px solid var(--linea); border-radius: 12px;
  padding: 11px 20px; font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--ink); cursor: pointer;
}
.boton-fantasma:hover { background: #F4F7FA; }
/* Cerrar sesión y pausar un premio no son lo mismo que confirmar: el botón que
   hace algo que cuesta deshacer se ve distinto antes de tocarlo. */
.boton.peligro { background: var(--rojo); }
.boton.peligro:hover { background: #B8293C; }

/* ---------------------------------------------------------------- movimiento
   Discreto y corto. Esto se mira de pie y de reojo con el local lleno: una
   animación de medio segundo acá no es elegante, es una espera.             */

[data-pantalla]:not([hidden]) { animation: pantalla-entra .22s ease-out; }
@keyframes pantalla-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tarjeta { transition: box-shadow .16s ease, transform .16s ease; }
.nav button, .cuenta-btn, .boton, .chico { -webkit-tap-highlight-color: transparent; }
.boton:active, .chico:active, .nav button:active { transform: scale(.98); }

/* Quien pidió menos movimiento no tiene por qué ver nada de esto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ========================================================== tablero ampliado
 *
 * Cuatro números arriba y los grupos abajo. El orden no es decorativo: quien
 * abre esto entre dos clientes mira treinta segundos y se va; quien se sienta
 * a revisar baja. Si todo pesa lo mismo, el que mira treinta segundos no se
 * lleva nada.
 */

.lectura {
  font-size: 15px; line-height: 1.55; color: var(--ink);
  margin: 10px 0 0; font-weight: 600;
}

.numeros.chicos { margin-top: 10px; }
.numeros.chicos .numero { padding: 13px 14px; }
.numeros.chicos .numero strong { font-size: 21px; }


.grupo-kpi { margin-top: 30px; }
.grupo-titulo {
  font-family: var(--f-d); font-size: 18px; font-weight: 800;
  margin: 0 0 2px; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.grupo-titulo::before {
  content: ''; width: 4px; height: 17px; border-radius: 3px; background: var(--acc);
}

.dos-destacados {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea);
}
.dos-destacados span { display: block; color: var(--gris); font-size: 12px; }
.dos-destacados b { font-size: 15px; color: var(--ink); }

/* Un aviso que no es un error: el costo está bien calculado, lo que pasa es
   que le faltan premios. Ámbar y no rojo. */
.aviso-suave {
  margin-top: 10px; padding: 11px 14px;
  background: #FFF6E0; border-radius: 12px;
  color: #7A5B08; font-size: 13px; line-height: 1.5;
}

.tabla-envuelta { overflow-x: auto; margin-top: 12px; }
.tabla-kpi { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-kpi th {
  text-align: left; padding: 9px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gris); border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla-kpi td { padding: 11px 10px; border-bottom: 1px solid var(--linea); color: var(--ink-soft); }
.tabla-kpi tbody tr:last-child td { border-bottom: 0; }
.tabla-kpi .principal { font-weight: 600; color: var(--ink); }
/* Los números a la derecha y con cifras de ancho fijo: así se comparan en
   vertical, que es para lo que sirve ponerlos en columna. */
.tabla-kpi .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-kpi .flojo { color: var(--gris); font-size: 12px; }

.fichas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ficha {
  background: #F4F7FA; border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}

@media (max-width: 560px) {
  .dos-destacados { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- historial que se toca */

.tabla-tocable tbody tr {
  cursor: pointer;
  transition: background .12s ease;
}
.tabla-tocable tbody tr:hover { background: #F7FAFC; }
.tabla-tocable tbody tr:focus-visible {
  outline: 2px solid var(--acc-lo); outline-offset: -2px;
}
/* La flecha aparece al pasar por encima: siempre visible sería una columna
   más de ruido en una tabla que ya tiene seis. */
.tabla-tocable tbody tr td:last-child { position: relative; padding-right: 26px; }
.tabla-tocable tbody tr td:last-child::after {
  content: '›';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--gris); font-size: 18px; opacity: 0;
  transition: opacity .12s ease;
}
.tabla-tocable tbody tr:hover td:last-child::after,
.tabla-tocable tbody tr:focus-visible td:last-child::after { opacity: 1; }

/* La nota del final del detalle: qué pasó y si hay que hacer algo. */
.dlg-nota {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--wash); border-radius: 12px;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.55;
}
#dlg-texto .dato b .tag { font-size: 11.5px; }
#dlg-texto .mono { font-family: var(--f-m); letter-spacing: .04em; }

/* ===================================================== la caja (mostrador)
 *
 * Esto se mira de pie, de reojo, con alguien enfrente. Lo que tiene que
 * resolver de un vistazo es a quién llamo y qué le doy: por eso el nombre y
 * el premio son lo grande, y el código, los puntos y la distancia son
 * contexto que se lee sólo si hace falta.
 */

.espera {
  background: var(--white);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--acc);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-top: 12px;
  animation: espera-llega .26s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes espera-llega {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.espera-quien { display: flex; align-items: center; gap: 11px; }
.espera-inicial {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--wash); color: var(--acc-dk);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; flex: none;
}
.espera-quien > div { flex: 1; min-width: 0; }
.espera-quien strong { font-size: 16.5px; display: block; }
.espera-quien .pie { margin: 1px 0 0; font-size: 12.5px; }

.espera-vence {
  flex: none; font-size: 12px; font-weight: 700;
  color: var(--gris); white-space: nowrap;
}
/* Sólo los últimos cinco minutos se pintan. En rojo permanente nadie lo
   miraría justo cuando importa. */
.espera-vence.urgente { color: var(--rojo); }

.espera-premio {
  margin: 13px 0 14px; padding-top: 13px;
  border-top: 1px solid var(--linea);
}
.espera-premio b { font-family: var(--f-d); font-size: 19px; display: block; }
.espera-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.chip-dato {
  background: #F4F7FA; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--gris);
}
.chip-dato.mono { font-family: var(--f-m); letter-spacing: .05em; color: var(--ink-soft); }
/* Cerca del local se marca en verde. Lejos NO se marca en rojo: el margen de
   error del teléfono puede ser de cientos de metros, y pintar de rojo a quien
   está enfrente haría que lo rechacen. */
.chip-dato.cerca { background: var(--wash); color: var(--acc-dk); }

/* Ancho completo: se toca con el pulgar sin apuntar, que es la única forma en
   que esto se va a usar de verdad. */
.entregar-grande { width: 100%; font-size: 16px; padding: 14px; }

.vacio-lindo {
  text-align: center; padding: 38px 24px;
  background: var(--white); border: 1px dashed var(--linea);
  border-radius: var(--r); margin-top: 12px;
}
.vacio-ico { font-size: 34px; display: block; margin-bottom: 10px; }
.vacio-lindo b { font-family: var(--f-d); font-size: 17px; display: block; }
.vacio-lindo p { color: var(--gris); font-size: 14px; line-height: 1.6; margin: 7px auto 0; max-width: 380px; }

@media (min-width: 620px) {
  /* Con lugar, el botón va al costado: la tarjeta queda más corta y entran
     más personas esperando sin desplazar. */
  .espera { display: grid; grid-template-columns: 1fr auto; gap: 0 18px; align-items: center; }
  .espera-quien { grid-column: 1; }
  .espera-premio { grid-column: 1; margin-bottom: 0; }
  .entregar-grande { grid-column: 2; grid-row: 1 / span 2; width: auto; padding: 14px 24px; }
}

/* ======================================================= el mapa de Mi local
 *
 * El pin está clavado en el centro y lo que se mueve es el mapa. Es al revés
 * de lo que suena y es lo que hacen las aplicaciones que se usan con el dedo:
 * un pin tiene veinte píxeles y el dedo que lo agarra lo tapa justo cuando
 * hay que ver dónde se lo está poniendo.
 */

.buscar-dir { display: flex; gap: 8px; }
.buscar-dir input { flex: 1; min-width: 0; }

.resultados-dir {
  margin-top: 6px; border: 1px solid var(--linea); border-radius: 12px;
  background: var(--white); overflow: hidden;
}
.resultado-dir {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--linea);
  padding: 11px 13px; font-family: inherit; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; line-height: 1.45;
}
.resultado-dir:last-child { border-bottom: 0; }
.resultado-dir:hover { background: var(--wash); }
.sin-resultados { margin: 0; padding: 13px; font-size: 13px; color: var(--gris); line-height: 1.55; }

.mapa-caja {
  position: relative; height: 290px; margin-top: 10px;
  border: 1px solid var(--linea); border-radius: 14px;
  overflow: hidden; background: #E8EDF2;
}
@media (max-width: 480px) { .mapa-caja { height: 240px; } }

/*
 * El mapa lo dibuja Google adentro de `.mapa-lienzo`; lo de acá es lo que va
 * ENCIMA: el pin, y el cartel de cuando no hay mapa.
 *
 * Ya no hay reglas de arrastre ni de tiles. Las manejaba el motor propio, que
 * se fue el día que no quedó ninguna fuente de imágenes usable sin pagar o sin
 * incumplir la política de alguien.
 */
.mapa-lienzo { position: absolute; inset: 0; }

/* El pin, clavado en el centro. La punta es la que marca el punto, así que el
   dibujo se corre media altura hacia arriba: centrarlo pondría el local medio
   pin más al sur, que a esta escala son metros. */
.mapa-pin {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -22px 0 0 -11px;
  /* Sin esto el pin se come los clics y el mapa no se puede mover: está
     justo en el medio, que es donde uno apoya el dedo. */
  pointer-events: none;
  z-index: 2;
  background: var(--acc);
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(11, 20, 33, .4);
}
/* Sin mapa no va pin: uno flotando sobre una caja gris parece que marca algo,
   y no marca nada. */
.mapa.sin-mapa .mapa-pin { display: none; }

/*
 * Editando: un borde que lo diga.
 *
 * El mapa trabado y el mapa suelto se ven exactamente igual, y la diferencia
 * importa: en uno se puede arrastrar sin consecuencias y en el otro cada
 * arrastre cambia dónde está el local. El borde es lo que separa «estoy
 * mirando» de «estoy moviendo».
 */
.mapa.editando {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}
/* Trabado, el cursor no promete un arrastre que no va a pasar. */
.mapa.bloqueado { cursor: default; }

/*
 * El cartel de estado.
 *
 * Existe porque este mapa depende de un script de afuera, y cuando ese script
 * no llega —sin clave, sin señal, cuota agotada, el dominio sin permitir en la
 * clave— lo que se ve sin esto es un rectángulo gris sin ninguna explicación.
 * Acá se dice qué pasó, con el motivo de Google traducido a algo accionable.
 */
.mapa-estado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--gris);
  background: #E8EDF2;
  z-index: 3;
}
.mapa-estado.malo { color: var(--ink-soft); }
.mapa-estado[hidden] { display: none; }

.mapa-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: space-between; margin-top: 10px;
}
.coordenadas { font-family: var(--f-m); font-size: 12px; color: var(--gris); }
.mapa-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================================================== subir una imagen
 *
 * La imagen se sube apenas se elige, no al guardar: así se ve enseguida si
 * quedó bien, que es cuando se decide. Guardar después es instantáneo porque
 * la foto ya está arriba.
 */

.subir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--linea); border-radius: 14px;
  padding: 14px; background: #FAFCFE;
}
.subir-vista {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 12px; flex: none;
  box-shadow: 0 0 0 1px rgba(15, 27, 45, .1);
}
/* El logo se ve redondo porque así se muestra en la ficha del local: si acá
   fuera cuadrado, nadie sabría que le van a recortar las esquinas. */
.subir-vista.redondo { border-radius: 50%; }

.subir-vacio { flex: 1; min-width: 150px; }
.subir-vacio b { display: block; font-size: 14px; color: var(--ink); }
.subir-vacio span { font-size: 12.5px; color: var(--gris); line-height: 1.5; }

.subir-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
/* La etiqueta que abre el selector de archivos tiene que verse como un botón.
   El estilo de los botones chicos está escrito como `button.chico`, y esto es
   un <label>: sin repetirlo acá queda como texto suelto en negrita, que fue
   exactamente lo que pasó. */
.subir-boton {
  cursor: pointer; display: inline-flex; align-items: center;
  padding: 9px 15px; border-radius: 11px;
  background: var(--wash); color: var(--acc-dk);
  font-size: 13.5px; font-weight: 700; border: 0;
}
.subir-boton:hover { background: #DFF3E9; }

/* Sacar la imagen es destructivo y tiene que verse distinto de elegirla. */
button.chico.rojo { background: var(--rojo-lo); color: var(--rojo); }
button.chico.rojo:hover { background: #F9DADF; }
/* Mientras sube, el botón dice que está subiendo. Una foto de teléfono por
   datos móviles tarda, y sin esto parece que el botón no hizo nada. */
.subir-boton.subiendo { pointer-events: none; opacity: .6; }
.subir-boton.subiendo::after { content: '…'; margin-left: 5px; }

/* La nota que explica por qué una cuenta de mostrador ve menos secciones.
   Discreta y en el verde de la casa: es una aclaración, no un error. Un cartel
   ámbar o rojo haría pensar que algo salió mal cuando no salió nada mal. */
.nota-rol {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--wash);
  border: 1px solid rgba(1, 160, 96, .18);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ==================== el horario, día por día ====================
   Siete filas con sus horas. Reemplaza al campo de texto libre, que se
   mostraba y nada más: con esto la app puede decir «Abierto · cierra 19:00»,
   que es lo que se pregunta quien mira un local en el mapa.

   Grid y no tabla: a 420 px las columnas de horas se apilan debajo del día
   en vez de salirse de la pantalla, y el panel se usa desde el teléfono del
   mostrador tanto como desde una computadora. */
.horarios { display: flex; flex-direction: column; gap: 6px; }

.horario-dia {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
}
.horario-dia.cerrado { background: #FAFBFC; }
.horario-dia > b { font-size: 12.5px; font-weight: 700; }
.horario-dia.cerrado > b { color: var(--gris); font-weight: 600; }

.horario-tramos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.horario-tramos input[type="time"] {
  width: 104px; padding: 5px 7px; font-size: 13px;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff;
}
.horario-tramos .a { font-size: 12px; color: var(--gris); }
.horario-tramos .vacio { font-size: 12.5px; color: var(--gris); }

/* Los botones de la derecha son chicos y sin fondo: son acciones de ajuste,
   no decisiones. El de guardar el perfil es el único que tiene que pesar. */
.horario-dia button {
  background: none; border: 0; padding: 3px 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--verde-o, #0E7C4A);
  border-radius: 6px; white-space: nowrap;
}
.horario-dia button:hover { background: rgba(14,124,74,.08); }
.horario-dia button.quitar { color: var(--gris); }

.opcional { font-weight: 400; color: var(--gris); font-size: 12px; }

@media (max-width: 460px) {
  .horario-dia { grid-template-columns: 46px 1fr; }
  .horario-dia > :last-child { grid-column: 2; justify-self: start; }
  /* Dos campos al lado del otro en un teléfono angosto dejan treinta
     píxeles útiles cada uno. En «Mi local» eso le toca a Instagram y al
     WhatsApp, que son los dos que se escriben con el teclado abierto. */
  .dos { grid-template-columns: 1fr; }
}