/* Swipe My Bill. Tapete verde billete, tiques de papel térmico encima y un
   solo color de señal, el oro: lo que se puede pulsar para pagar o pedir. */

@font-face { font-family:'Archivo'; src:url('/tipos/archivo.woff2') format('woff2'); font-weight:500 900; font-display:swap }
@font-face { font-family:'Plex Mono'; src:url('/tipos/plexmono.woff2') format('woff2'); font-weight:400 600; font-display:swap }

:root {
  --tapete: #0f2e25;
  --tapete-2: #16402f;
  --papel: #fbfbf7;
  --tinta: #1d211f;
  --tinta-suave: #6b716d;
  --suave: rgba(251,251,247,.72);
  --oro: #e2b84a;
  --si: #2fbf71;
  --no: #e5484d;
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font: 16px/1.5 var(--texto); color: var(--papel);
  background: radial-gradient(120% 70% at 50% 0%, var(--tapete-2), var(--tapete) 70%) var(--tapete);
  display: flex; flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
a { color: var(--oro); }
h1, h2 { font-family: var(--display); letter-spacing: -.02em; text-wrap: balance; line-height: 1.05; }

.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; width: 100%; padding: 18px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.marca { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--papel); text-decoration: none; letter-spacing: -.02em; }
.marca span { color: var(--oro); }
.cabecera nav { display: flex; gap: 18px; flex-wrap: wrap; }
.cabecera nav a { color: var(--suave); text-decoration: none; font-weight: 600; font-size: .95rem; }
.cabecera nav a:hover { color: var(--papel); }

.portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; padding: 32px 0 40px; }
.tesis h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 900; margin: 0 0 18px; }
.tesis p { color: var(--suave); font-size: 1.1rem; max-width: 46ch; margin: 0 0 14px; }
.tesis .cifras { font-family: var(--mono); font-size: .85rem; }
.tesis .cifras b { color: var(--papel); }

.boton-oro, .boton-claro { display: inline-block; font: 700 1rem var(--texto); border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer; text-decoration: none; }
.boton-oro { background: var(--oro); color: var(--tinta); }
.boton-claro { background: var(--papel); color: var(--tinta); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.juego { display: grid; gap: 14px; }
.mazo { position: relative; height: 470px; }
.tique {
  position: absolute; inset: 0; margin: auto; width: 100%; max-width: 360px; height: fit-content;
  background: var(--papel); color: var(--tinta); font-family: var(--mono); padding: 22px 20px 26px;
  border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.35); touch-action: none; user-select: none; cursor: grab;
  transform-origin: 50% 120%;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x;
}
.tique.detras1 { transform: scale(.95) translateY(14px); filter: brightness(.86); }
.tique.detras2 { transform: scale(.9) translateY(28px); filter: brightness(.72); }
.tique .emisor { text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.tique .sub { text-align: center; font-size: .72rem; color: var(--tinta-suave); margin-top: 2px; }
.tique hr { border: 0; border-top: 1px dashed #b9bdb8; margin: 14px 0; }
.linea { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.total strong { font-family: var(--display); font-weight: 900; font-size: 2.3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.quien { font-family: var(--texto); font-size: .95rem; line-height: 1.4; }
.quien b { display: block; font-family: var(--mono); font-weight: 400; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); margin-bottom: 3px; }
.codigo { margin-top: 14px; height: 30px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px, var(--tinta) 8px 11px, transparent 11px 12px); }
.etiqueta { position: absolute; top: 8px; right: 10px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); border: 1px solid currentColor; padding: 1px 6px; border-radius: 3px; }
.sello { position: absolute; top: 36%; font-family: var(--display); font-weight: 900; font-size: 1.8rem; padding: 4px 12px; border: 4px solid; border-radius: 6px; opacity: 0; pointer-events: none; text-transform: uppercase; }
.sello.si { left: 16px; color: var(--si); transform: rotate(-14deg); }
.sello.no { right: 16px; color: var(--no); transform: rotate(12deg); }
.vacio { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--suave); }
.vacio h2 { color: var(--papel); margin: 0 0 6px; }

.botones { display: flex; justify-content: center; align-items: center; gap: 18px; }
.botones form { margin: 0; }
.botones button { border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: transform .12s; }
.botones button:active { transform: scale(.94); }
.botones .no { width: 60px; height: 60px; border-radius: 50%; background: var(--papel); color: var(--no); font-size: 1.5rem; }
.botones .si { height: 60px; border-radius: 999px; padding: 0 26px; background: var(--si); color: #fff; font: 700 1.05rem var(--texto); }
.botones .si:disabled { opacity: .45; cursor: not-allowed; }
.desglose { text-align: center; font-family: var(--mono); font-size: .78rem; color: var(--suave); margin: 0; }

.aviso { background: rgba(226,184,74,.12); border: 1px solid rgba(226,184,74,.4); color: var(--papel); padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; font-size: .92rem; }
.como { padding: 24px 0 56px; max-width: 760px; }
.como h2 { font-size: 2rem; margin: 0 0 16px; }
.como ol { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; color: var(--suave); }
.como b { color: var(--papel); }
.nota { color: var(--suave); font-size: .92rem; }

.hoja { max-width: 680px; padding: 24px 0 56px; }
.hoja.centro { text-align: center; margin: 0 auto; }
.hoja h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; margin: 8px 0 14px; }
.hoja h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.hoja p, .hoja li { color: var(--suave); }
.texto ul { padding-left: 1.2em; display: grid; gap: 6px; }
.oro { color: var(--oro); }

.formulario { display: grid; gap: 14px; margin-top: 20px; }
.formulario label { display: grid; gap: 6px; font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.formulario small { text-transform: none; letter-spacing: 0; font-family: var(--texto); font-size: .82rem; }
.formulario input, .formulario select, .formulario textarea {
  font: 1rem var(--texto); color: var(--papel); background: rgba(0,0,0,.25); border: 1px solid rgba(251,251,247,.18);
  border-radius: 8px; padding: 11px 12px; text-transform: none; letter-spacing: 0; width: 100%; }
.formulario select option { color: var(--tinta); }
.formulario textarea { resize: vertical; min-height: 70px; }
.formulario .casilla { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-family: var(--texto); font-size: .92rem; }
.formulario .casilla input { width: auto; margin-top: 4px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dos > * { min-width: 0; }
.fila-form { grid-template-columns: 1fr auto; align-items: end; }
.error { color: #ff9a9d; min-height: 1.5em; margin: 0; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fila { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; background: rgba(0,0,0,.2); border-radius: 8px; color: var(--papel) !important; }
.fila small { color: var(--suave); }
.derecha { text-align: right; font-family: var(--mono); font-size: .9rem; white-space: nowrap; }
.pos { display: inline-block; min-width: 1.6em; font-family: var(--mono); color: var(--oro); }
.estado { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: rgba(251,251,247,.12); }
.estado-pagada { background: var(--si); color: #fff; }
.estado-publicada { background: var(--oro); color: var(--tinta); }
.estado-rechazada { background: var(--no); color: #fff; }
.revisar { display: grid; grid-template-columns: 220px 1fr; gap: 16px; background: rgba(0,0,0,.2); padding: 14px; border-radius: 8px; }
.revisar img { width: 100%; border-radius: 4px; }
.revisar form { display: inline-block; margin: 10px 8px 0 0; }

.pie { text-align: center; color: var(--suave); font-size: .85rem; padding: 24px 16px 32px; border-top: 1px solid rgba(251,251,247,.1); }
.pie p { margin: 4px 0; }

@media (max-width: 820px) {
  .portada { grid-template-columns: 1fr; gap: 28px; padding-top: 12px; }
  .tesis h1 { font-size: 2.2rem; }
  .mazo { height: 450px; }
  .revisar { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .dos { grid-template-columns: 1fr; } .fila { flex-direction: column; } .derecha { text-align: left; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }