/* ============================================================
   PuraFarma · Turnero — estilos del kiosko (tótem 1080x1920)
   Extraído del export original. Fuentes servidas localmente
   desde fonts/ para que funcione 100% offline (sin Google Fonts).
   ============================================================ */

/* ---- Tipografías (Fraunces display + Work Sans texto) ---- */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/worksans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/worksans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/worksans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/worksans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/worksans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/worksans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Layout del kiosko ---- */
html,body{margin:0;height:100%;background:#1E2A26}
.stage{width:1080px;height:1920px;background:#F6F2E9;position:relative;overflow:hidden;font-family:'Work Sans',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:48px 0 0;margin:0 auto;transform-origin:top center}
.logo{width:320px;height:96px;filter:brightness(0) opacity(.93)}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.hd{margin-top:30px;text-align:center}
.hd h1{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:56px;line-height:1.1;color:#0F1713;letter-spacing:.01em}
.hd p{margin:12px 0 0;font-size:25px;color:#34647A;letter-spacing:.06em}
.cards{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:26px 0 24px;min-height:0}
.card{width:620px;flex:1;min-height:0;background:#F6F2E9;border:3px solid #0F1713;border-radius:30px;box-shadow:0 8px 22px rgba(30,42,38,.14);cursor:pointer;display:flex;align-items:center;gap:38px;padding:0 46px;text-align:left;font-family:inherit;transition:transform .12s ease, box-shadow .12s ease}
.card:hover{box-shadow:0 14px 36px rgba(30,42,38,.34)}
.card:active{transform:scale(.975);box-shadow:0 4px 14px rgba(30,42,38,.3)}
.card:focus-visible{outline:5px solid #8FA99A;outline-offset:5px}
.seal{flex:none;width:188px;height:188px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0F1713;position:relative}
.dash{position:absolute;inset:11px;border-radius:50%;border:2px dashed rgba(246,242,233,.55)}
.seal span{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:104px;color:#F6F2E9;line-height:1}
.svc{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:44px;color:#1E2A26;line-height:1.05}
.foot{width:620px;display:flex;align-items:baseline;justify-content:center;gap:28px;padding:0 8px 44px}
.clock{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:31px;color:#0F1713;font-variant-numeric:tabular-nums}
.addr{font-size:21px;color:#34647A;letter-spacing:.1em;text-transform:uppercase}
.ov{position:absolute;inset:0;z-index:10;background:rgba(30,42,38,.86);display:none;align-items:center;justify-content:center;cursor:pointer}
.ov.show{display:flex;animation:ovIn .25s ease}
.tk{width:640px;background:#F6F2E9;border-radius:34px;padding:80px 60px 64px;display:flex;flex-direction:column;align-items:center;animation:tkIn .35s cubic-bezier(.2,.8,.3,1);box-shadow:0 30px 80px rgba(0,0,0,.4);text-align:center}
.tk .k{font-size:23px;font-weight:500;color:#34647A;letter-spacing:.18em;text-transform:uppercase}
.tk .code{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:220px;line-height:1.05;color:#0F1713}
.tk .rule{width:70%;border-top:2px dashed #8FA99A;margin:28px 0 30px}
.tk .nm{font-family:'Fraunces',Georgia,serif;font-size:35px;color:#1E2A26}
.tk .msg{margin-top:18px;font-size:23px;color:#34647A}
.tk .back{margin-top:44px;font-size:20px;color:#8FA99A;letter-spacing:.08em}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes tkIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============================================================
   Paso 2 — elementos nuevos (login, generando, error, reauth).
   Estilos deliberadamente SIMPLES y en variables, para que los
   reemplaces al diseñar. Reusan la paleta del kiosko.
   ============================================================ */
:root{
  --kv-fondo:#F6F2E9; --kv-tinta:#0F1713; --kv-verde:#34647A;
  --kv-salvia:#8FA99A; --kv-oscuro:#1E2A26;
}

/* IMPORTANTE: el atributo [hidden] debe ganar SIEMPRE. Sin esto, reglas como
   .login{display:flex} o .card{display:flex} anulan el display:none del
   navegador y el elemento "oculto" sigue visible (y tapando toques). */
[hidden]{display:none !important}

/* Tarjetas deshabilitadas mientras se genera el turno (anti doble toque) */
.cards.is-busy .card{pointer-events:none;opacity:.5;filter:saturate(.6)}

/* Overlay "generando turno" */
.ov--gen{background:rgba(30,42,38,.9)}
.genbox{display:flex;flex-direction:column;align-items:center;gap:34px}
.spinner{width:120px;height:120px;border-radius:50%;
  border:10px solid rgba(246,242,233,.25);border-top-color:var(--kv-fondo);
  animation:spin 1s linear infinite}
.genmsg{font-family:'Fraunces',Georgia,serif;font-size:46px;color:var(--kv-fondo)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Overlay de error de conexión */
.ov--err{background:rgba(30,42,38,.92)}
.errbox{width:680px;background:var(--kv-fondo);border-radius:34px;
  padding:80px 60px;text-align:center;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:tkIn .3s ease}
.errtitle{font-family:'Fraunces',Georgia,serif;font-size:54px;color:var(--kv-tinta)}
.errmsg{font-size:30px;color:var(--kv-verde)}
.errbox .back{margin-top:30px;font-size:22px;color:var(--kv-salvia);letter-spacing:.08em}

/* Banner discreto de reconexión (personal, no cliente) */
.reauth{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;
  background:rgba(30,42,38,.82);color:var(--kv-fondo);border:none;border-radius:999px;
  padding:12px 24px;font-size:18px;font-family:inherit;letter-spacing:.04em;
  cursor:pointer;opacity:.85}
.reauth:hover{opacity:1}

/* Pantalla de login del tótem */
.login{position:fixed;inset:0;z-index:100;background:var(--kv-oscuro);
  display:flex;align-items:center;justify-content:center}
.loginbox{width:560px;background:var(--kv-fondo);border-radius:34px;
  padding:64px 56px;display:flex;flex-direction:column;gap:18px;text-align:center}
.loginbox .logo{width:260px;height:78px;margin:0 auto 10px;filter:brightness(0) opacity(.9)}
.loginbox .logo img{width:100%;height:100%;object-fit:contain}
.loginbox h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:40px;color:var(--kv-tinta)}
.loginhint{margin:0 0 10px;font-size:19px;color:var(--kv-verde)}
.loginbox label{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  font-size:18px;color:var(--kv-verde);text-align:left}
.loginbox input{width:100%;box-sizing:border-box;padding:16px 18px;font-size:22px;
  border:2px solid var(--kv-salvia);border-radius:14px;font-family:inherit;background:#fff;color:var(--kv-tinta)}
.loginbox input:focus{outline:none;border-color:var(--kv-verde)}
.loginbox button{margin-top:12px;padding:18px;font-size:24px;font-family:inherit;
  background:var(--kv-tinta);color:var(--kv-fondo);border:none;border-radius:16px;cursor:pointer}
.loginbox button:disabled{opacity:.5;cursor:default}
.loginerr{color:#b23b3b;font-size:18px;min-height:1em}

/* Iframe de impresión: fuera de pantalla, nunca visible */
#printFrame{position:fixed;width:0;height:0;border:0;visibility:hidden}