/* ==========================================================================
   QR Code Generator (app 56).

   First app to ship its own stylesheet instead of a new section at the bottom of
   main.css — loaded through the $app_styles hook in system/views/header.php, which is
   why :root's tokens (--wp-ouro, --wp-ciano, --wp-preto) are already defined by the
   time anything here runs.

   The layout is a cabinet: a control deck on the left, a screen on the right. On a
   phone the screen jumps to the top and sticks there, because watching the square
   change while you type IS the product, and a preview below the fold is no preview.

   Accent colour is always var(--wp-app-cor), injected by the app frame from apps.color.
   No hex is hardcoded except the neutral greys and the three signal colours in the
   readability meter, which mean the same thing on every app that ever borrows them.
   ========================================================================== */

.wp-qr-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 0 0 2rem;
}

/* ---------- control deck ---------- */

.wp-qr-deck {
  min-width: 0;
}

/* The type row. Scrolls sideways rather than wrapping into four ragged lines: eleven
   types is a lot of buttons, and a row that scrolls reads as a row. */
.wp-qr-tipos {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0 0 0.6rem;
  margin: 0 0 1.1rem;
  scrollbar-width: thin;
}

.wp-qr-tipo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 0.85em 0.9em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.wp-qr-tipo svg {
  font-size: 1rem;
}

.wp-qr-tipo:hover,
.wp-qr-tipo:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.wp-qr-tipo--on {
  color: #fff;
  border-color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 14px -6px var(--wp-app-cor), inset 0 0 20px -18px var(--wp-app-cor);
}

.wp-qr-tipo--on svg {
  color: var(--wp-app-cor);
}

.wp-qr-campos {
  margin: 0 0 1.25rem;
}

/* main.css dresses text/email/password/number/select and stops there. This app is the
   first to need a textarea, a tel and a datetime-local, so it finishes the set rather
   than leaving three raw browser controls in the middle of a styled form. Same values as
   the originals on purpose — if those ever change, these follow by hand. */
.wp-qr-studio .wp-auth-campo textarea,
.wp-qr-studio .wp-auth-campo input[type="tel"],
.wp-qr-studio .wp-auth-campo input[type="datetime-local"] {
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.7em 0.85em;
  color: #fff;
  resize: vertical;
}

.wp-qr-studio .wp-auth-campo textarea:focus,
.wp-qr-studio .wp-auth-campo select:focus {
  outline: none;
  border-color: var(--wp-app-cor);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* the native picker icon is black on black otherwise */
.wp-qr-studio input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

/* two fields on one line where they belong together (first/last name, lat/lon) and
   stacked the moment the column gets narrow */
.wp-qr-dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 0.9rem;
}

.wp-qr-dica {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
  margin: -0.4rem 0 1rem;
}

.wp-qr-check {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin: 0 0 0.8rem;
}

.wp-qr-check input {
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--wp-app-cor);
  cursor: inherit;
}

.wp-qr-faixa {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.9rem;
}

.wp-qr-faixa input[type="range"] {
  flex: 1;
  accent-color: var(--wp-app-cor);
}

.wp-qr-rotulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.7rem;
}

/* ---------- collapsible style panels ---------- */

.wp-qr-secao {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  margin: 0 0 0.75rem;
}

.wp-qr-secao > summary {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.5;
  color: #fff;
  padding: 1.05em 1.1em;
  cursor: pointer;
  list-style: none;
}

.wp-qr-secao > summary::-webkit-details-marker {
  display: none;
}

.wp-qr-secao > summary svg {
  font-size: 1.05rem;
  color: var(--wp-app-cor);
}

/* the chevron, drawn instead of imported: one character, no icon request */
.wp-qr-secao > summary::after {
  content: "+";
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
}

.wp-qr-secao[open] > summary::after {
  content: "–";
}

.wp-qr-secao[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.wp-qr-secao > *:not(summary) {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

.wp-qr-secao > *:not(summary):first-of-type {
  margin-top: 1.1rem;
}

.wp-qr-secao > *:last-child {
  margin-bottom: 1.1rem;
}

/* ---------- palette ---------- */

.wp-qr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.wp-qr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.45em 0.85em 0.45em 0.5em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-qr-chip:hover,
.wp-qr-chip:focus-visible,
.wp-qr-chip--on {
  color: #fff;
  border-color: var(--wp-app-cor);
}

/* the swatch shows the gradient over the background colour, so a preset can be judged
   without applying it */
.wp-qr-chip__amostra {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
}

.wp-qr-cores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wp-qr-cor {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.wp-qr-cor input[type="color"] {
  width: 100%;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: inherit;
}

/* ---------- shape pickers ---------- */

.wp-qr-formas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.wp-qr-forma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-qr-forma svg {
  width: 1.4rem;
  height: 1.4rem;
}

.wp-qr-forma:hover,
.wp-qr-forma:focus-visible {
  color: rgba(255, 255, 255, 0.7);
}

.wp-qr-forma--on {
  color: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
  box-shadow: 0 0 12px -6px var(--wp-app-cor);
}

.wp-qr-logo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* the file input is a <label> dressed as a button — same padding as the real ones so
   the row does not look assembled from spare parts */
.wp-qr-logo-acoes .wp-carteira-btn {
  cursor: pointer;
}

/* ---------- the screen ---------- */

.wp-qr-palco {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

.wp-qr-tela {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: 2rem 1.5rem;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.45) 70%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

/* bezel corners, the arcade-cabinet trick .wp-card and .wp-scanner-terminal already use */
.wp-qr-tela::before,
.wp-qr-tela::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--wp-app-cor);
  opacity: 0.7;
  pointer-events: none;
}

.wp-qr-tela::before {
  top: 7px;
  left: 7px;
  border-right: none;
  border-bottom: none;
}

.wp-qr-tela::after {
  bottom: 7px;
  right: 7px;
  border-left: none;
  border-top: none;
}

.wp-qr-tela__quadro {
  position: relative;
  width: min(320px, 100%);
  max-width: 100%;
  line-height: 0;
  /* Only ever seen through a transparent code, which is exactly when it is needed:
     without it a white-on-nothing QR is an invisible square on a dark page. */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.wp-qr-tela__quadro:empty {
  display: none;
}

.wp-qr-tela__quadro svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the scanline sweep, fired once per redraw by studio.js. It lives on the frame rather
   than the SVG because the SVG is replaced wholesale on every keystroke. */
.wp-qr-tela__quadro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--wp-app-cor);
  opacity: 0;
  pointer-events: none;
}

.wp-qr-tela--scan .wp-qr-tela__quadro::after {
  animation: wp-qr-varredura 0.55s linear;
}

@keyframes wp-qr-varredura {
  0%   { opacity: 0.9; transform: translateY(0); }
  99%  { opacity: 0.35; transform: translateY(320px); }
  100% { opacity: 0; transform: translateY(320px); }
}

.wp-qr-tela__vazio {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  max-width: 22ch;
}

.wp-qr-info {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  margin: 0.9rem 0 0;
  min-height: 0.8rem;
}

/* ---------- readability meter ---------- */

.wp-qr-medidor {
  margin: 1.1rem 0 0;
  text-align: center;
}

.wp-qr-medidor__barras {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.wp-qr-medidor__barras span {
  width: 2.2rem;
  height: 0.5rem;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.25s ease;
}

/* Three signal colours, and they are hardcoded on purpose: green/gold/red mean the same
   thing to everyone, and borrowing the app's accent here would make "fine" and "about to
   fail" the same shade on a red-themed app. */
.wp-qr-medidor--ok .wp-qr-medidor__barras span {
  background: #39ff14;
}

.wp-qr-medidor--risky .wp-qr-medidor__barras span:nth-child(-n + 3) {
  background: var(--wp-ouro);
}

.wp-qr-medidor--bad .wp-qr-medidor__barras span:nth-child(-n + 1) {
  background: #ff3b3b;
}

.wp-qr-medidor__estado {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.6;
  margin: 0 0 0.4rem;
}

.wp-qr-medidor--ok .wp-qr-medidor__estado    { color: #39ff14; }
.wp-qr-medidor--risky .wp-qr-medidor__estado { color: var(--wp-ouro); }
.wp-qr-medidor--bad .wp-qr-medidor__estado   { color: #ff3b3b; }

.wp-qr-medidor__motivo {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- actions ---------- */

.wp-qr-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.3rem 0 0;
}

.wp-qr-acoes .wp-carteira-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.wp-qr-acoes .wp-carteira-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wp-qr-copiado {
  color: #39ff14;
  border-color: rgba(57, 255, 20, 0.5);
}

.wp-qr-salvar {
  margin: 1rem 0 0;
}

.wp-qr-salvar__nota {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.7rem 0 0;
}

/* gold, because on this site gold is what an account buys you */
.wp-qr-salvar__nota--publico,
.wp-qr-salvar__nota--bloqueado {
  color: var(--wp-ouro);
}

.wp-qr-salvar__nota--ok {
  color: #39ff14;
}

/* ---------- history panels ---------- */

/* The lists themselves are .wp-scanner-* from main.css, reused whole. This only adds the
   per-row buttons the scanner never needed. */
.wp-qr-paineis {
  margin-top: 1.5rem;
}

.wp-qr-paineis .wp-scanner-list__item {
  display: flex;
  align-items: stretch;
}

.wp-qr-paineis .wp-scanner-list__link {
  flex: 1;
  min-width: 0;
}

.wp-qr-item-acoes {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.6rem;
  flex-shrink: 0;
}

/* ---------- a saved code's own page ---------- */

.wp-qr-pagina {
  text-align: center;
}

.wp-qr-pagina .wp-qr-acoes,
.wp-qr-pagina .wp-loteria-links {
  justify-content: center;
}

.wp-qr-pagina .wp-qr-acoes .wp-carteira-btn {
  flex: 0 1 auto;
}

.wp-qr-pagina__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.wp-qr-pagina__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 1.2rem 0 0;
}

.wp-qr-tela--sozinha {
  max-width: 26rem;
  margin: 0 auto;
}

/* ---------- the premium page's one addition ---------- */

.wp-qr-honestidade {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  max-width: 60ch;
  margin: 0 auto 2rem;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .wp-qr-studio {
    grid-template-columns: 1fr;
  }

  /* the screen first, and it stays put: watching the code change while typing is the
     whole point, and below the fold it may as well not exist */
  .wp-qr-palco {
    order: -1;
    position: sticky;
    top: 0.5rem;
    z-index: 1;
    background: var(--wp-preto);
    padding-bottom: 0.5rem;
  }

  .wp-qr-tela {
    min-height: 0;
    padding: 1.5rem 1rem;
  }

  .wp-qr-tela__quadro {
    width: min(220px, 70vw);
  }

  @keyframes wp-qr-varredura {
    0%   { opacity: 0.9; transform: translateY(0); }
    99%  { opacity: 0.35; transform: translateY(220px); }
    100% { opacity: 0; transform: translateY(220px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-qr-tela--scan .wp-qr-tela__quadro::after {
    animation: none;
  }

  .wp-qr-tipo,
  .wp-qr-chip,
  .wp-qr-forma,
  .wp-qr-medidor__barras span {
    transition: none;
  }
}

/* ---------- print ---------- */

/*
 * Printing is a real use for this app: the wifi code on the wall, the menu on the table,
 * the sticker on the shop window. visibility rather than display, so nothing reflows and
 * the square lands where the browser already measured it.
 */
@media print {
  body.wp-qr-imprimindo * {
    visibility: hidden !important;
  }

  body.wp-qr-imprimindo .wp-qr-tela--imprimir,
  body.wp-qr-imprimindo .wp-qr-tela--imprimir * {
    visibility: visible !important;
  }

  body.wp-qr-imprimindo .wp-qr-tela--imprimir {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  body.wp-qr-imprimindo .wp-qr-tela--imprimir::before,
  body.wp-qr-imprimindo .wp-qr-tela--imprimir::after,
  body.wp-qr-imprimindo .wp-qr-tela__quadro::after {
    display: none;
  }

  body.wp-qr-imprimindo .wp-qr-tela__quadro {
    width: 12cm;
    background-image: none;
  }
}