/* ═══ KIOSCO APARKO — Negro / Naranja / Blanco ════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --aparko-orange: #F97316;
  --aparko-dark:   #111111;
  --aparko-white:  #ffffff;
  --aparko-light:  #F5F5F5;
  --aparko-border: #E0E0E0;
}

#pk-kiosk{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100vw;height:100vh;
  background:var(--aparko-white);
  display:flex;flex-direction:column;
  overflow:hidden;
  color:var(--aparko-dark);
  user-select:none;-webkit-user-select:none;
  z-index:9990;
}

#pk-fs-btn{
  position:fixed;top:10px;right:12px;z-index:100;
  background:rgba(255,255,255,.15);border:none;border-radius:8px;
  color:#fff;font-size:18px;width:34px;height:34px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* ─── SCREENS ─────────────────────────────────────────────── */
.pk-screen{display:none;flex-direction:column;}
/* Home screen fills normally in flow */
#pk-s-home{width:100%;height:100vh;}
#pk-s-home.active{display:flex;}
/* All other screens: fixed fullscreen overlay */
.pk-screen:not(#pk-s-home){
  position:fixed;inset:0;
  width:100vw;height:100vh;
  align-items:center;justify-content:center;
  background:var(--aparko-white);
  z-index:9991;
}
.pk-screen:not(#pk-s-home).active{display:flex;}
.pk-center{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:20px;padding:24px;
}

/* ─── HOME ────────────────────────────────────────────────── */
#pk-s-home{display:flex;flex-direction:column;height:100vh;}

/* HEADER — negro, solo logo */
.pk-header{
  background:var(--pk-header-bg, var(--aparko-dark));
  padding:10px 20px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;min-height:68px;
}

/* BÚSQUEDA */
.pk-top{
  background:var(--aparko-white);
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:14px 16px 10px;
  border-bottom:3px solid var(--aparko-orange);
  flex-shrink:0;
}

/* PLACA — naranja Aparko */
.pk-plate-box{
  background:var(--aparko-orange);
  border:3px solid var(--aparko-dark);
  border-radius:14px;
  padding:10px 32px 12px;
  text-align:center;
  box-shadow:0 5px 0 rgba(0,0,0,.2);
  min-width:260px;
}
.pk-plate-co{
  font-size:10px;font-weight:900;letter-spacing:4px;
  color:rgba(255,255,255,.85);margin-bottom:2px;
}
.pk-plate-num{
  font-family:'Courier New',Courier,monospace;
  font-size:clamp(50px,7vw,82px);
  font-weight:900;letter-spacing:6px;
  color:#fff;line-height:1;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* Hint */
.pk-hint-row{
  font-size:clamp(13px,1.8vw,17px);font-weight:600;
  min-height:22px;text-align:center;color:#666;
  transition:color .2s;
}

/* Sugerencias */
.pk-sugs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  min-height:54px;max-width:900px;width:100%;align-items:center;
}
.pk-sug{
  background:var(--aparko-white);
  border:2px solid var(--aparko-orange);
  border-radius:10px;padding:7px 16px;cursor:pointer;
  box-shadow:0 2px 8px rgba(249,115,22,.15);
  transition:transform .08s,box-shadow .08s;
}
.pk-sug:active{transform:translateY(2px);}
.pk-sug-pl{
  font-family:'Courier New',monospace;
  font-size:clamp(20px,3vw,30px);
  font-weight:900;color:var(--aparko-dark);letter-spacing:4px;
}
.pk-sug-cat{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;}

/* ─── TECLADO — blanco y negro, acento naranja ────────────── */
.pk-kb{
  flex:1;
  background:var(--aparko-light);
  display:flex;flex-direction:column;
  padding:8px 12px 10px;gap:5px;
  border-top:1px solid var(--aparko-border);
  overflow:hidden;
}
.pk-kb-row{flex:1;display:flex;justify-content:center;gap:4px;}

/* Tecla blanca, texto negro */
.pk-key{
  flex:1;max-width:80px;min-width:0;
  background:var(--aparko-white);
  color:var(--aparko-dark);
  border:1.5px solid var(--aparko-border);
  border-radius:10px;
  font-size:clamp(16px,2.2vw,26px);font-weight:800;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 #C8C8C8;
  transition:transform .07s,box-shadow .07s;
  -webkit-tap-highlight-color:transparent;
}
.pk-key:hover{background:#FAFAFA;box-shadow:0 3px 0 #bbb;}
.pk-key:active{
  background:var(--aparko-orange);
  color:var(--aparko-white);
  border-color:var(--aparko-orange);
  transform:translateY(3px);
  box-shadow:0 0 0 #bbb;
}

/* Números — fondo levemente distinto */
.pk-k-num{
  background:#F0F0F0;color:var(--aparko-dark);
  border-color:#D0D0D0;max-width:96px;
}
.pk-k-num:active{background:var(--aparko-orange);color:#fff;border-color:var(--aparko-orange);}

/* Acciones */
.pk-kb-actions{justify-content:center;gap:14px;}
.pk-k-clear{
  background:var(--aparko-white);color:#C62828;
  border:2px solid #C62828;max-width:200px;
  font-size:clamp(13px,1.8vw,18px);
  box-shadow:0 3px 0 #C62828;font-weight:800;
}
.pk-k-clear:active{background:#C62828;color:#fff;transform:translateY(3px);box-shadow:none;}
.pk-k-del{
  background:var(--aparko-white);color:#555;
  border:2px solid #BBB;max-width:200px;
  font-size:clamp(13px,1.8vw,18px);
  box-shadow:0 3px 0 #BBB;font-weight:800;
}
.pk-k-del:active{background:#555;color:#fff;transform:translateY(3px);box-shadow:none;}

@keyframes pkShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-8px);}75%{transform:translateX(8px);}}

/* ─── DETALLE ─────────────────────────────────────────────── */
#pk-s-detail{padding:20px;overflow-y:auto;background:var(--aparko-white);}

.pk-detail-wrap{
  background:var(--aparko-white);
  border:2px solid var(--aparko-orange);
  border-radius:16px;padding:22px;
  width:100%;max-width:560px;
  box-shadow:0 4px 20px rgba(249,115,22,.12);
  display:flex;flex-direction:column;gap:12px;
}
.pk-d-plate{
  background:var(--aparko-orange);
  border:3px solid var(--aparko-dark);border-radius:10px;
  text-align:center;padding:8px 16px;
  font-family:'Courier New',monospace;
  font-size:clamp(28px,5vw,50px);
  font-weight:900;letter-spacing:6px;color:#fff;
}
.pk-d-rows{display:flex;flex-direction:column;}
.pk-d-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid #F0F0F0;
  font-size:clamp(13px,1.8vw,16px);
}
.pk-d-row span{color:#888;font-weight:600;}
.pk-d-row b{color:var(--aparko-dark);font-weight:800;}
.pk-d-total{
  background:#FFF7ED;border:2px solid var(--aparko-orange);
  border-radius:12px;padding:12px 16px;
  display:flex;justify-content:space-between;align-items:center;
}
.pk-d-total span{font-size:13px;font-weight:700;color:var(--aparko-orange);}
.pk-d-total strong{font-size:clamp(26px,5vw,44px);font-weight:900;color:var(--aparko-orange);}

/* Botones */
.pk-btn{
  width:100%;padding:16px;border:none;border-radius:12px;
  font-family:inherit;font-size:clamp(16px,2.5vw,22px);font-weight:900;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s;
}
.pk-btn:active{transform:scale(.97);}
.pk-btn-pay{
  background:var(--aparko-dark);color:#fff;
  box-shadow:0 4px 0 #000;
}
.pk-btn-pay:hover{background:#222;}
.pk-btn-sec{background:#F5F5F5;color:#666;border:1px solid #DDD;margin-top:4px;}
.pk-btn-home{background:var(--aparko-orange);color:#fff;max-width:300px;}

/* ─── WAITING ─────────────────────────────────────────────── */
#pk-s-waiting{background:var(--aparko-white);}

.pk-card-anim{font-size:80px;animation:pkB 1.8s ease-in-out infinite;}
@keyframes pkB{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-12px) rotate(5deg);}}
.pk-wait-title{font-size:clamp(24px,4vw,38px);font-weight:900;color:var(--aparko-dark);text-align:center;line-height:1.2;}
.pk-wait-amount{
  background:#FFF7ED;border:2px solid var(--aparko-orange);border-radius:14px;
  padding:12px 32px;font-size:clamp(36px,6vw,60px);font-weight:900;color:var(--aparko-orange);
}
.pk-timer-bar{width:280px;height:8px;background:#EEE;border-radius:4px;overflow:hidden;}
.pk-timer-fill{height:100%;background:var(--aparko-orange);border-radius:4px;transition:width .5s linear;}
.pk-timer-txt{font-size:38px;font-weight:900;color:var(--aparko-orange);font-variant-numeric:tabular-nums;}

/* ─── RESULTS ─────────────────────────────────────────────── */

.pk-s-ok{background:#F0FDF4;}.pk-s-err{background:#FFF1F0;}
.pk-ico{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:900;color:#fff;}
.pk-res-title{font-size:clamp(24px,5vw,44px);font-weight:900;color:var(--aparko-dark);}
.pk-res-msg{font-size:clamp(14px,2.5vw,20px);color:#666;max-width:400px;line-height:1.5;text-align:center;}

/* Spinner */
.pk-spinner{width:60px;height:60px;border:5px solid #EEE;border-top-color:var(--aparko-orange);border-radius:50%;animation:pkS .75s linear infinite;}
@keyframes pkS{to{transform:rotate(360deg);}}
.pk-stxt{font-size:20px;font-weight:700;color:#666;}