/* Página de inicio de Kipu Factura (hosting). Usa la tipografía Geist incluida en la app. */
@font-face { font-family: "Geist"; src: url("/static/fuentes/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #F5F5F3;
  --superficie: #FFFFFF;
  --campo: #F3F4F7;
  --tinta: #0B0B0C;
  --tinta-2: #57575C;
  --tinta-3: #8E8E93;
  --linea: #E7E6E2;
  --acento: #0B0B0C;
  --sobre-acento: #FFFFFF;
  --azul: #2563EB;
  --azul-claro: #6EA0FF;
  --mal: #B3261E; --mal-suave: #FCEBEA;
  --ok: #0F7A3A;
  --marca-1: #050507;
  --marca-2: #0E1220;
  --foco: 0 0 0 4px color-mix(in srgb, var(--azul) 22%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #000000; --superficie: #0F0F10; --campo: #18181B; --tinta: #F2F2F3; --tinta-2: #B4B4BB; --tinta-3: #85858C;
    --linea: #26262A; --acento: #F2F2F3; --sobre-acento: #0B0B0C; --mal: #F2B8B5; --mal-suave: #3A1715; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #000000; --superficie: #0F0F10; --campo: #18181B; --tinta: #F2F2F3; --tinta-2: #B4B4BB; --tinta-3: #85858C;
  --linea: #26262A; --acento: #F2F2F3; --sobre-acento: #0B0B0C; --mal: #F2B8B5; --mal-suave: #3A1715; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--superficie); color: var(--tinta); font: 15px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.ing { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ---------------------------------------------------------------- lado de la marca */
.ing-marca { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 28px;
  padding: 40px clamp(28px, 4.5vw, 64px) 36px; color: #F4F5F8;
  background: radial-gradient(120% 90% at 100% 0%, #1B2A6B 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, #142251 0%, transparent 60%),
    linear-gradient(160deg, var(--marca-2), var(--marca-1)); }
.ing-rejilla { position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(85% 75% at 60% 35%, #000 25%, transparent 80%); }
.ing-halo { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; }
.ing-halo.h1 { width: 420px; height: 420px; right: -120px; top: -80px; background: #2563EB; animation: flotar 14s ease-in-out infinite; }
.ing-halo.h2 { width: 320px; height: 320px; left: -110px; bottom: 60px; background: #4F46E5; opacity: .32; animation: flotar 18s ease-in-out infinite reverse; }
@keyframes flotar { 50% { transform: translate(-30px, 26px) scale(1.06); } }

.ing-logo { display: flex; align-items: center; gap: 12px; }
.ing-logo img { border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); }
.ing-logo b { display: block; font-size: 17px; letter-spacing: -.01em; }
.ing-logo span { font-size: 12.5px; color: rgba(244, 245, 248, .62); }

.ing-flotantes { position: absolute; top: 40px; right: clamp(24px, 4vw, 56px); width: 290px; display: grid; gap: 14px; }
.flot { background: rgba(255, 255, 255, .97); color: #0B0B0C; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .5) inset; animation: entra .7s cubic-bezier(.2, .8, .2, 1) both; }
.f-saga { animation-delay: .12s; margin-left: 26px; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; }
.f-prog { animation-delay: .24s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin-right: 22px; }
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.flot-cab { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #6B7280; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); animation: latido 2s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } }
.flot-num { display: block; margin: 6px 0 8px; font-size: 17px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.flot-pie { display: flex; justify-content: space-between; align-items: center; }
.chip-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #0F7A3A; background: #E7F5EC; padding: 3px 8px; border-radius: 999px; }
.chip-ok svg { width: 13px; height: 13px; }
.flot-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.flot-ico svg { width: 19px; height: 19px; }
.flot-ico.saga { background: #ECFCCB; color: #3F6212; }
.flot-ico.prog { background: #DBEAFE; color: #1D4ED8; }
.flot b { font-size: 13.5px; }
.flot small { display: block; font-size: 11.5px; color: #6B7280; }
.flot-pasos { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: #F4F5F7; display: grid; gap: 4px; font-size: 12px; color: #374151; }
.flot-pasos li { display: flex; align-items: center; gap: 7px; }
.flot-pasos li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.flot-pasos li:nth-child(1)::before { animation: tic .4s .6s both; } .flot-pasos li:nth-child(2)::before { animation: tic .4s 1s both; } .flot-pasos li:nth-child(3)::before { animation: tic .4s 1.4s both; }
@keyframes tic { from { transform: scale(0); } }

.ing-texto { margin-top: auto; max-width: 560px; }
.ing-sello { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ing-sello svg { width: 15px; height: 15px; color: var(--azul-claro); }
.ing-texto h1 { margin: 18px 0 14px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; font-weight: 750; }
.ing-texto h1 em { font-style: normal; background: linear-gradient(90deg, #9BBCFF, #6EA0FF 45%, #A5B4FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ing-texto p { margin: 0; font-size: 16px; color: rgba(244, 245, 248, .74); max-width: 500px; }

.ing-funciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.ing-funciones li { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background .2s, transform .2s; }
.ing-funciones li:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #0B0B0C; margin-bottom: 10px; }
.fi svg { width: 19px; height: 19px; }
.ing-funciones b { display: block; font-size: 13.5px; }
.ing-funciones small { display: block; font-size: 12px; color: rgba(244, 245, 248, .6); line-height: 1.35; }

.ing-cifras { display: flex; gap: clamp(20px, 3vw, 40px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); max-width: 640px; }
.ing-cifras b { display: block; font-size: 26px; letter-spacing: -.02em; }
.ing-cifras span { font-size: 12.5px; color: rgba(244, 245, 248, .6); }

/* ---------------------------------------------------------------- lado del ingreso */
.ing-panel { display: flex; flex-direction: column; padding: 28px clamp(20px, 3.5vw, 48px); background: var(--superficie); }
.ing-arriba { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 40px; }
.ing-negocio { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.ing-tema { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); display: grid; place-items: center; cursor: pointer; color: var(--tinta-2); }
.ing-tema svg { width: 18px; height: 18px; }
.ing-tema:hover { color: var(--tinta); }
.ing-tema:focus-visible { outline: none; box-shadow: var(--foco); }

.ing-caja { width: 100%; max-width: 380px; margin: auto; padding: 32px 0; }
.ing-movil-logo { display: none; border-radius: 12px; margin-bottom: 18px; }
.ing-form h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.03em; font-weight: 720; }
.ing-sub { margin: 0 0 26px; color: var(--tinta-2); font-size: 14.5px; }
.ing-sub code { font-size: 12.5px; }
.ing-campo { display: grid; gap: 7px; margin-bottom: 16px; }
.ing-campo > span:first-child { font-size: 13.5px; font-weight: 600; }
.ing-campo input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid transparent; background: var(--campo);
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.ing-campo input::placeholder { color: var(--tinta-3); }
.ing-campo input:focus { border-color: var(--azul); background: var(--superficie); box-shadow: var(--foco); }
.ing-clave { position: relative; display: block; }
.ing-clave input { padding-right: 50px; }
.ing-ojo { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--tinta-3); }
.ing-ojo svg { width: 19px; height: 19px; }
.ing-ojo[aria-pressed="true"], .ing-ojo:hover { color: var(--tinta); }
.ing-ojo:focus-visible { outline: none; box-shadow: var(--foco); }
.ing-btn { width: 100%; height: 52px; margin-top: 8px; border: 0; border-radius: 14px; background: var(--acento); color: var(--sobre-acento);
  font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(11, 11, 12, .55); transition: transform .12s, box-shadow .2s, opacity .2s; }
.ing-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.ing-btn:hover svg { transform: translateX(3px); }
.ing-btn:active { transform: scale(.985); }
.ing-btn:focus-visible { outline: none; box-shadow: var(--foco); }
.ing-btn.cargando { opacity: .7; pointer-events: none; }
.ing-btn.cargando span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.ing-error { margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--mal-suave); color: var(--mal); font-size: 13.5px; font-weight: 550; }
.ing-ico-2fa { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--campo); margin-bottom: 18px; }
.ing-ico-2fa svg { width: 26px; height: 26px; }
.ing-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
.ing-otp input { height: 56px; text-align: center; font-size: 22px; font-weight: 650; border-radius: 14px; border: 1px solid transparent; background: var(--campo); outline: none; min-width: 0; }
.ing-otp input:focus { border-color: var(--azul); background: var(--superficie); box-shadow: var(--foco); }
.ing-recup { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--linea); background: var(--campo); margin-bottom: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ing-qr { display: grid; justify-items: center; gap: 8px; margin: -8px 0 18px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); }
.ing-qr svg { width: 168px; height: 168px; }
.ing-qr code { font-size: 12.5px; color: #374151; letter-spacing: .06em; }
.ing-enlaces { display: flex; justify-content: space-between; margin-top: 14px; }
.ing-link { border: 0; background: none; padding: 4px 0; color: var(--azul); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ing-link:hover { text-decoration: underline; }
.ing-lista-codigos { list-style: none; padding: 14px; margin: 0 0 14px; border-radius: 14px; background: var(--campo); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ing-lista-codigos code { font-size: 15px; letter-spacing: .06em; }
.ing-nota-chica { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.ing-aviso { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin-top: 30px; padding: 16px; border-radius: 16px; background: var(--campo); color: var(--tinta-2); }
.ing-aviso svg { width: 20px; height: 20px; color: var(--azul); }
.ing-aviso p { margin: 0; font-size: 13px; line-height: 1.5; }
.ing-pie { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinta-3); }
.sacudir { animation: sacudir .38s; }
@keyframes sacudir { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------------------------------------------------------------- pantallas medianas y celulares */
@media (max-width: 1180px) { .ing-flotantes { display: none; } .ing-texto { margin-top: 40px; } }
@media (max-width: 980px) {
  .ing { grid-template-columns: 1fr; }
  .ing-marca { order: 2; padding: 32px 20px; }
  .ing-funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ing-texto { margin-top: 0; }
  .ing-panel { min-height: 100vh; min-height: 100dvh; padding: 20px 16px; }
  .ing-movil-logo { display: block; }
}
@media (max-width: 420px) {
  .ing-funciones { grid-template-columns: 1fr; }
  .ing-cifras { flex-wrap: wrap; gap: 16px 24px; }
  .ing-otp { gap: 6px; }
  .ing-form h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* las tarjetas flotantes no deben tapar el titular: en pantallas de poca altura queda solo la boleta */
@media (max-height: 1040px) {
  .ing-flotantes { width: 270px; }
  .f-saga, .f-prog { display: none; }
  .ing-texto h1 { font-size: clamp(32px, 3.2vw, 46px); }
  .ing-funciones li { padding: 12px; }
  .fi { width: 30px; height: 30px; margin-bottom: 8px; }
}
@media (max-height: 1040px) and (min-width: 1500px) {
  .f-saga { display: grid; }  /* debajo de la boleta, nunca encima del titular */
}
@media (max-height: 860px) { .ing-flotantes { display: none; } }
input.secreto { -webkit-text-security: disc; text-security: disc; letter-spacing: .08em; }
input.secreto.visible { -webkit-text-security: none; text-security: none; letter-spacing: 0; }

/* menú del clic derecho: solo Copiar, Cortar y Pegar */
.menu-edicion { position: fixed; z-index: 2147483000; min-width: 190px; padding: 5px; border-radius: 12px; background: var(--superficie, #fff);
  color: var(--tinta, #0B0B0C); box-shadow: 0 14px 40px -12px rgba(0,0,0,.35), 0 0 0 1px var(--linea, #E7E6E2); font: 13.5px/1.2 "Geist", system-ui, sans-serif; }
.menu-edicion[hidden] { display: none; }
.menu-edicion button { width: 100%; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.menu-edicion button:hover:not(:disabled), .menu-edicion button:focus-visible { background: var(--superficie-2, var(--campo, #F3F4F7)); outline: none; }
.menu-edicion button:disabled { opacity: .38; cursor: default; }
.menu-edicion svg { width: 17px; height: 17px; }
.menu-edicion kbd { font: 11.5px/1 "Geist", system-ui, sans-serif; color: var(--tinta-3, #8E8E93); }
/* v60 · con las dos tarjetas apiladas, el titular se corta antes para no rozarlas */
@media (min-width: 1181px) and (max-width: 1799px) and (min-height: 861px) { .ing-texto h1 { max-width: 430px; } }