/* Brandkit PagoLink VE 0.4 — fuente: brandkit/pagolink-ve/assets/design-tokens.css */
@font-face { font-family: 'IBM Plex Sans'; src: url('/fuentes/ibm-plex-sans.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fuentes/ibm-plex-mono-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --papel: #080d12;
  --fondo: #080d12;          /* fondo de pagina; no cambia dentro de .claro */
  --superficie: #111d25;
  --hundido: #0c151b;        /* campos y paneles anidados */
  --elevado: #1a2a35;        /* pulgar del segmento, codigo */
  --tinta: #f2f5fc;
  --tinta-2: #acbdc8;
  --tinta-3: #8fa3b0;
  --linea: #1e2e39;
  --linea-fuerte: #6e8999;
  --accion: #bce6f2;
  --accion-hover: #d3eff7;
  --accion-suave: #16303b;
  --sobre: #080d12;          /* texto sobre --accion */
  /* El kit no define color de error: coral, lejos del azul de "por verificar". */
  --rojo: #ff8f80;
  --rojo-suave: #3a1d20;
  --rojo-tinta: #ffb4a8;
  --aviso: #c5dcec;
  --aviso-tinta: #174958;
  --hover: rgb(242 245 252 / 0.06);
  --anillo: rgb(188 230 242 / 0.28);
  --luz: inset 0 1px 0 rgb(255 255 255 / 0.3);
  --radio: 24px;
  --radio-sm: 12px;
  --sombra: inset 0 1px 0 rgb(242 245 252 / 0.04), 0 16px 32px -20px rgb(0 0 0 / 0.7);
  --sombra-alta: 0 12px 32px -8px rgb(0 0 0 / 0.75);
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --resorte: var(--ease);
  --t-presion: 120ms;
  --t-rapido: 160ms;
  --t-entrar: 240ms;
  --t-salir: 150ms;
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --resorte: linear(0, 0.22 8%, 0.58 18%, 0.85 28%, 1 38%, 1.04 48%, 1.03 58%, 1.01 72%, 1); }
}

/* Superficie clara (pagina de pago): mismos nombres, valores para fondo blanco frio.
   El hielo no contrasta sobre blanco, asi que la accion pasa a petroleo. */
.claro {
  --papel: #e7edf2;
  --superficie: #f2f5fc;
  --hundido: #ffffff;
  --elevado: #ffffff;
  --tinta: #080d12;
  --tinta-2: #305c72;
  --tinta-3: #4f6b7a;
  --linea: #d5dee6;
  --linea-fuerte: #5f7887;
  --accion: #174958;
  --accion-hover: #0f3642;
  --accion-suave: #dceff5;
  --sobre: #f2f5fc;
  --rojo: #b3261e;
  --rojo-suave: #fbe9e7;
  --rojo-tinta: #8c1d18;
  --hover: rgb(8 13 18 / 0.05);
  --anillo: rgb(23 73 88 / 0.22);
  --luz: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --sombra: 0 24px 48px -28px rgb(0 0 0 / 0.6);
  background: var(--superficie);
  color: var(--tinta);
  color-scheme: light;
}
@media (prefers-contrast: more) {
  :root { --linea: #6e8999; --tinta-3: #acbdc8; }
  .claro { --linea: #5f7887; --tinta-3: #305c72; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% -20%, rgb(23 73 88 / 0.35), transparent 60%) no-repeat top / 100% 100dvh var(--papel);
  color: var(--tinta);
  font: 400 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
::selection { background: var(--accion-suave); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, summary, .boton, .pestanas a { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opcional { color: var(--tinta-3); font-weight: 400; }

.marca-producto { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.marca-producto::before { content: ''; width: 28px; height: 28px; flex: none; background: url('/marca.svg') center / contain no-repeat; }

.demo {
  background: var(--aviso);
  color: var(--aviso-tinta);
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 16px;
  text-align: center;
}
.demo strong { font-weight: 600; }
.demo code { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.icono { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Campos */
.campo { display: grid; gap: 6px; }
.campo + .campo, .fila + .campo, .campo + .fila { margin-top: 14px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila .campo + .campo { margin-top: 0; }
label, .etiqueta { font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.entrada {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--hundido);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  font-size: 16px;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.entrada::placeholder { color: var(--tinta-3); opacity: 0.75; }
.entrada:focus { outline: none; border-color: var(--accion); box-shadow: 0 0 0 3px var(--anillo); }
.entrada:disabled { opacity: 0.6; }
.entrada[aria-invalid='true'] { border-color: var(--rojo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 25%, transparent); }
.entrada:-webkit-autofill { -webkit-text-fill-color: var(--tinta); caret-color: var(--tinta); box-shadow: 0 0 0 100px var(--hundido) inset; }
.entrada:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--hundido) inset, 0 0 0 3px var(--anillo); }
select.entrada { appearance: none; padding-right: 34px; background: var(--hundido) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.con-sufijo { position: relative; }
.con-sufijo .sufijo { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--tinta-3); pointer-events: none; }
.ayuda { font-size: 13px; color: var(--tinta-3); }
.error-campo { font-size: 13px; color: var(--rojo); }

.casilla { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; cursor: pointer; font-size: 15px; color: var(--tinta); font-weight: 400; }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accion); flex: none; cursor: pointer; }
.casilla small { display: block; color: var(--tinta-3); font-size: 13px; }

/* Botones: responden al tocar, no al soltar */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px; width: 100%;
  border: 0; border-radius: var(--radio-sm);
  background: var(--accion); color: var(--sobre);
  box-shadow: var(--luz);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background-color var(--t-rapido), transform var(--t-presion) ease-out;
  text-decoration: none;
}
.boton:active { transform: scale(0.97); }
.boton:disabled { opacity: 0.55; cursor: progress; }
.boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); box-shadow: none; min-height: 44px; font-weight: 500; }
.boton.texto { background: none; box-shadow: none; color: var(--tinta-2); min-height: 44px; width: auto; padding: 0 8px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea-fuerte); }
.girando { width: 18px; height: 18px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.alerta { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radio-sm); background: var(--rojo-suave); color: var(--rojo-tinta); font-size: 14px; margin-top: 16px; }
.alerta .icono { margin-top: 1px; }
.nota { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--tinta-3); font-size: 13px; margin-top: 16px; }
.nota .icono { width: 15px; height: 15px; }

.esqueleto { background: linear-gradient(90deg, var(--hundido), var(--linea), var(--hundido)); background-size: 200% 100%; animation: brillo 1.2s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }
@keyframes fundir { from { opacity: 0; } }

[hidden] { display: none !important; }

/* El hover solo existe donde hay puntero fino: en tactil se queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .entrada:hover { border-color: var(--tinta-2); }
  .entrada:focus:hover { border-color: var(--accion); }
  .boton:hover { background: var(--accion-hover); }
  .boton.secundario:hover { background: var(--hover); }
  .boton.texto:hover { background: none; color: var(--tinta); text-decoration-color: currentColor; }
}

/* Movimiento reducido: se conserva el fundido, se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .resultado, .sello, .detalle div, .pago-detalle, .metodo-campos, .agregar form, .creado, .foto-lista, .resumen div, .aviso { animation: fundir 200ms ease both !important; }
  .esqueleto { animation: none !important; }
  .boton:active, .copiar:active { transform: none; }
  .interruptor input::after { transition: none; }
}