/* Panel del dueno.
 *
 * Al reves que el mostrador: esto se mira en un computador, con calma, y no
 * con una mano mientras alguien espera. Por eso es claro, de dos columnas, y
 * con la vista previa siempre a la vista.
 *
 * Es tambien la hoja madre: la entrada y el panel de plataforma la cargan
 * antes que la suya, asi que todo lo que se decide aca —radios, sombras,
 * alturas, escala de texto— lo heredan las tres pantallas claras. Las
 * decisiones viven en los tokens de :root; una medida suelta fuera de ellos
 * es un error, no una excepcion.
 *
 * El --acento de la vista previa lo pone tarjeta.js con el color que el dueno
 * este eligiendo en ese momento, no con el guardado. */

:root {
  /* Neutros apenas tenidos hacia el frio: el gris puro se ve a "sin disenar". */
  --fondo: #f3f3f6;
  --superficie: #ffffff;
  --superficie-tenue: #f7f7f9;
  --borde: #e3e3e8;
  --borde-fuerte: #c7c7cf;
  --texto: #141418;
  --tenue: #656570;
  --sutil: #9b9ba5;

  /* Un solo acento, y se gasta poco: foco, enlaces, la etiqueta de la puerta.
   * El boton principal es negro a proposito, para que el acento siga siendo
   * raro cuando aparece. */
  --acento: #2b6fe0;
  --acento-suave: #e9f0fd;
  --peligro: #c8342a;
  --peligro-suave: #fbeeed;
  --advertencia: #8a5a00;
  --advertencia-suave: #fbf3e3;

  /* Forma. Tres radios y tres sombras; no hay un cuarto. */
  --radio-chico: .5rem;
  --radio: .75rem;
  --radio-grande: 1.25rem;
  --sombra-chica: 0 1px 2px rgba(20, 20, 24, .05);
  --sombra: 0 2px 6px rgba(20, 20, 24, .06), 0 1px 2px rgba(20, 20, 24, .04);
  --sombra-grande: 0 18px 40px -12px rgba(20, 20, 24, .28);

  /* Todo control —campo, boton, selector— mide lo mismo de alto, para que una
   * fila con los tres quede a ras. */
  --control: 2.75rem;

  /* La tarjeta del cliente, que dibuja /comun/sellos.css: el radio de un
   * sello y el alto de la barra, que es como en el PNG unas ocho decimas del
   * diametro de un sello. */
  --sello-radio: 1.0625rem;
  --barra-alto: 1.75rem;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* El atributo `hidden` lo pisa cualquier regla de autor con `display`, y el
 * menu de la cabecera es flex: sin esto se veia en la pantalla de entrar, con
 * tres pestañas de un panel al que todavia nadie habia entrado. */
[hidden] { display: none !important; }

body {
  margin: 0; min-height: 100dvh;
  background: var(--fondo); color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { padding: 1.5rem; max-width: 64rem; margin: 0 auto; }

/* Escala de texto: cinco tamaños y nada entre medio. Los titulos van con el
 * tracking cerrado; es lo que mas separa un titulo de un parrafo en negrita. */
h1 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5rem;
}
h2 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 1rem; }
h3 { font-size: .9375rem; line-height: 1.3; margin: 1.5rem 0 .5rem; }

p { margin: 0 0 1rem; }
.ayuda { color: var(--tenue); font-size: .875rem; margin: .25rem 0 1rem; max-width: 60ch; }
.ayuda.advertencia { color: var(--advertencia); font-weight: 600; }
.ayuda.peligro { color: var(--peligro); font-weight: 600; }
.mono { font-family: var(--mono); }

/* La etiqueta en monoespaciada y mayusculas es la firma del producto: esta en
 * el panel, en el mostrador y dentro de la tarjeta. */
.etiqueta {
  display: block; font: 600 .6875rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
}

/* Foco visible en todo lo que se pueda pulsar, con el mismo anillo. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Cabecera ---------- */

/* Con el selector `header` a secas, esto tambien pintaba la cabecera de la
 * tarjeta de la vista previa, que tambien es un <header>: la dejaba blanca con
 * el texto gris encima, ilegible. Los selectores de etiqueta sueltos se
 * escapan; este va por id. */
#cabecera {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.5rem; background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.marca img { width: 2.25rem; height: 2.25rem; border-radius: var(--radio-chico); object-fit: contain; }
.marca strong { display: block; line-height: 1.2; letter-spacing: -.01em; }
.marca small { color: var(--tenue); font-size: .8125rem; }

#menu { display: flex; gap: .25rem; margin-left: auto; }
.pestana {
  background: none; border: none; margin: 0; height: auto;
  padding: .5rem .875rem; border-radius: var(--radio-chico);
  cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--tenue);
  transition: color .15s, background-color .15s;
}
.pestana:hover { color: var(--texto); background: var(--superficie-tenue); border: none; }
.pestana.activa { background: var(--fondo); color: var(--texto); font-weight: 600; }

/* ---------- Bloques ---------- */

/* Sobre un fondo tenido, una tarjeta se separa con el blanco y nada mas: ni
 * borde ni sombra encima. La sombra queda para lo que flota de verdad. */
.tarjeta {
  background: var(--superficie); border-radius: var(--radio);
  padding: 1.5rem; box-shadow: var(--sombra-chica);
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.angosta { max-width: 24rem; }

.dos-columnas { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; align-items: start; }
/* Dentro de la grilla las dos tarjetas son hermanas, y la regla de arriba
 * bajaba la de la derecha un renglon respecto de la izquierda. */
.dos-columnas > .tarjeta { margin-top: 0; }
.columna-derecha { position: sticky; top: 1.5rem; }
@media (max-width: 52rem) { .dos-columnas { grid-template-columns: 1fr; } .columna-derecha { position: static; } }

/* Un formulario largo se lee por bloques, no por campos. Cada <fieldset> es
 * una pregunta del dueño —que regalo, como se ve, con que reglas— y la raya
 * entre dos dice donde termina una y empieza la otra. */
fieldset.bloque { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.bloque + fieldset.bloque { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); }
/* Un legend se dibuja ENCIMA del borde del fieldset, partiendo la raya de
 * arriba por la mitad. Flotado deja de ser especial y se comporta como un
 * titulo cualquiera. */
fieldset.bloque legend {
  float: left; width: 100%; padding: 0; margin: 0 0 .25rem;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
fieldset.bloque > * { clear: both; }
fieldset.bloque > label { display: block; }
fieldset.bloque legend + .ayuda { margin-top: 0; }

/* ---------- Formularios ---------- */

form { display: flex; flex-direction: column; }
label { margin-top: 1rem; font: 600 .6875rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
label:first-of-type { margin-top: 0; }

input, select {
  width: 100%; height: var(--control); padding: 0 .75rem; margin-top: .375rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto); font-size: 1rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--sutil); }
/* Al enfocar cambia el borde Y aparece un anillo: el color solo no alcanza
 * para quien ve poco contraste. */
input:focus, select:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
input[type="color"] { padding: .25rem; width: var(--control); flex: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: calc(var(--radio-chico) - .25rem); }
input[type="file"] { border: none; padding-left: 0; height: auto; }
input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--texto); }
input[type="number"] { font-variant-numeric: tabular-nums; }

.fila { display: flex; gap: .5rem; align-items: center; }
.fila > input:not([type="color"]), .fila > select { flex: 1; min-width: 0; }
.fila > button { margin-top: 0; }

button {
  height: var(--control); padding: 0 1rem; margin-top: 1.25rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s, transform .1s;
}
button:hover { background: var(--superficie-tenue); border-color: var(--texto); }
button:active { transform: translateY(1px); }
button.primario { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
button.primario:hover { background: #2a2a31; border-color: #2a2a31; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.enlace {
  background: none; border: none; color: var(--tenue); height: auto;
  text-decoration: underline; text-underline-offset: .15em;
  padding: .5rem 0; font-weight: 400; font-size: .875rem;
}
button.enlace:hover { color: var(--texto); background: none; }
button.enlace.peligro { color: var(--peligro); }
button.enlace.peligro:hover { color: var(--peligro); }

/* Los botones que son una eleccion —ícono, que va dentro del sello, que color
 * viaja— marcan la elegida con el borde negro, no con el acento: hay muchas
 * elecciones en la pantalla y el acento no da para todas. */
.iconos { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.iconos button {
  margin: 0; width: var(--control); font-size: 1.25rem;
  display: grid; place-items: center; padding: 0;
}
.iconos button[aria-pressed="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }

/* Elegir cuál de los dos colores viaja a la wallet. Se muestra el color, no su
   nombre: "acento" no le dice nada a nadie, un cuadrado naranjo sí. */
.opciones-color { display: flex; gap: .5rem; margin-top: .5rem; }
.opciones-color button {
  margin: 0; flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0 .625rem; font-size: .8125rem; font-weight: 500;
}
.opciones-color button[aria-pressed="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); font-weight: 600; }
.opciones-color .muestra {
  width: 1.25rem; height: 1.25rem; border-radius: .3125rem; flex: none;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .12); background: var(--muestra, #17171B);
}

.codigo-grande {
  display: block; font: 700 1.75rem/1.2 var(--mono);
  letter-spacing: .2em; margin: .5rem 0;
}

/* ---------- Listas ---------- */

.lista { list-style: none; padding: 0; margin: 0; }
.lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--borde);
}
.lista li:last-child { border-bottom: none; }
.lista small { color: var(--tenue); font-size: .8125rem; }
.lista button { margin: 0; height: 2.125rem; padding: 0 .625rem; font-size: .8125rem; }
.lista li > div:last-child:not(:first-child) { display: flex; gap: .375rem; flex: none; }
.inactivo { opacity: .5; }

/* Una lista sin nada no es un hueco: dice que va ahi y que va a pasar. */
.lista li.vacio {
  display: block; text-align: center; color: var(--tenue);
  padding: 2rem 1rem; font-size: .9375rem;
}
.lista li.vacio strong { display: block; color: var(--texto); font-weight: 600; margin-bottom: .125rem; }

/* ---------- Cifras ---------- */

/* Tres por fila, siempre: con `auto-fit` la sexta quedaba sola abajo. */
.cifras { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; }
.cifra {
  background: var(--superficie); border-radius: var(--radio); padding: 1.125rem 1.25rem;
  box-shadow: var(--sombra-chica); min-width: 0;
}
.cifra .etiqueta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cifra strong {
  display: block; font: 700 2rem/1.1 var(--mono); margin-top: .375rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
@media (max-width: 40rem) { .cifras { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Vista previa de la tarjeta ---------- */

#vista-previa { margin-bottom: 1.5rem; }

/* El titulo y, a su derecha, que tarjeta se enseña; en un telefono no caben
 * los dos y el selector baja a su linea. Los botones van mas bajos que un
 * control: son para mirar, no para guardar nada. */
.encabezado-vista-previa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-bottom: 1rem;
}
.encabezado-vista-previa h2 { margin: 0; }
.encabezado-vista-previa .opciones-color { margin-top: 0; }
.encabezado-vista-previa .opciones-color button { flex: none; height: 2.125rem; padding: 0 .75rem; }

/* Todos los colores salen de variables que pone tarjeta.js con lo que el dueno
 * este eligiendo. Ninguno esta escrito aca: si estuvieran, la vista previa
 * mentiria en cuanto cambiara algo. Los sellos y la barra no estan en esta
 * hoja: son de /comun/sellos.css, la misma que usa el mostrador. */

#vista-previa { --vp-fondo: #17171b; --sello: #b8ff2e;
  --vp-tinta: #ffffff; --vp-tenue: #ffffff99; --vp-linea: #ffffff33; }

/* La unica tarjeta que flota: es un objeto, no un bloque de la pagina. */
.vp-tarjeta {
  background: var(--vp-fondo); color: var(--vp-tinta);
  border-radius: var(--radio-grande); padding: 1.25rem;
  box-shadow: var(--sombra-grande), inset 0 1px 0 color-mix(in srgb, var(--vp-tinta) 10%, transparent);
  transition: background .15s;
}
.vp-cabecera { display: flex; align-items: flex-start; gap: .875rem; background: none; }
.vp-titulo { flex: 1; min-width: 0; }
.vp-titulo strong { display: block; line-height: 1.25; letter-spacing: -.01em; }
.vp-derecha { text-align: right; }

/* Circulo y no cuadrado redondeado, porque asi lo pinta Google; y SIN fondo
 * blanco forzado, que era lo que escondia el problema: un logo blanco sobre un
 * cuadrito blanco se ve bien en el panel y como un agujero en la tarjeta.
 * Los 2.75rem son 44px, el tamaño de verdad. */
.vp-logo {
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; object-fit: contain;
}
.vp-logo-vacio {
  display: grid; place-items: center; background: none; border-radius: 50%;
  border: 1px dashed var(--vp-linea); color: var(--vp-tenue);
  font-size: .5rem; line-height: 1.15; text-align: center; padding: 0;
}

.vp-etiqueta {
  display: block; font: 600 .625rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vp-tenue);
}
/* Del color de los sellos, que es el que se ve sobre la tarjeta: el acento a
 * secas desapareceria si el dueno lo manda de fondo a la wallet. */
.vp-contador { font: 700 1.375rem/1 var(--mono); color: var(--sello); font-variant-numeric: tabular-nums; }
.vp-premio { font-size: 1.0625rem; }

.vp-codigo {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--vp-linea);
  text-align: center; font: 600 .9375rem/1 var(--mono); letter-spacing: .28em; color: var(--vp-tenue);
}

/* ---------- Aviso ---------- */

#aviso {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 10;
  width: min(30rem, calc(100% - 3rem)); padding: .875rem 1rem;
  border-radius: var(--radio); background: var(--texto); color: var(--superficie);
  box-shadow: var(--sombra-grande); font-size: .9375rem;
  animation: aviso-entra .22s ease-out both;
}
#aviso.error { background: var(--peligro); }
@keyframes aviso-entra {
  from { opacity: 0; transform: translate(-50%, .5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Los requisitos del logo y los avisos de uno recien subido. */
.requisitos { margin: .5rem 0 1rem; padding-left: 1.1rem; }
.requisitos li { margin-bottom: .25rem; }

.avisos-logo {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .5rem;
}
.avisos-logo li {
  background: var(--advertencia-suave);
  border-left: 3px solid var(--advertencia);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0; padding: .625rem .75rem;
  font-size: .875rem; line-height: 1.45;
}

/* Al mostrador, para no tener que escribir la direccion.
 * Discreto a proposito: es una salida ocasional, no una accion de la pantalla. */
.ir-a {
  /* Color propio y no la clase `.enlace`: esa esta escrita como
   * `button.enlace`, ligada al elemento, asi que un <a> no la toma y se queda
   * con el azul por defecto del navegador — ilegible sobre el fondo oscuro del
   * mostrador. */
  margin-left: auto; white-space: nowrap;
  color: var(--tenue); text-decoration: none;
  font-size: .875rem; padding: .5rem;
}
.ir-a:hover { color: var(--texto, var(--tinta)); text-decoration: underline; }
.ir-a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* El movimiento explica que cambio; a quien le marea, no le hace falta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* En angosto, la cabecera se parte en dos filas y las pestañas ocupan la suya. */
@media (max-width: 40rem) {
  main { padding: 1rem; }
  #cabecera { flex-wrap: wrap; gap: .75rem; padding: .75rem 1rem; }
  #menu { order: 3; width: 100%; margin-left: 0; }
  .ir-a { margin-left: auto; }
  .tarjeta { padding: 1.25rem; }
}