*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0f1117;
  --surface: #181c27;
  --surface2:#1f2435;
  --border:  #2a3048;
  --accent:  #4ade80;
  --danger:  #f87171;
  --muted:   #64748b;
  --text:    #e2e8f0;
  --text-dim:#94a3b8;
  --mono:    'DM Mono', monospace;
  --sans:    'Sora', sans-serif;
  --radius:  10px;
}

body {
  background:      var(--bg);
  color:           var(--text);
  font-family:     var(--sans);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             32px;
}

/* ── LOGO ── */
.logo {
  font-size:      28px;
  font-weight:    600;
  letter-spacing: -1px;
}
.logo span { color: var(--accent); }
.logo-sub  { font-size: 13px; color: var(--muted); margin-top: 4px; text-align: center; }

/* ── CARD ── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       32px 28px;
  width:         320px;
  display:       flex;
  flex-direction: column;
  gap:           24px;
}

/* ── DISPLAY PIN ── */
.pin-display {
  display:         flex;
  justify-content: center;
  gap:             14px;
  padding:         8px 0;
}
.pin-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  border:        2px solid var(--border);
  background:    transparent;
  transition:    background .15s, border-color .15s;
}
.pin-dot.filled {
  background:   var(--accent);
  border-color: var(--accent);
}
.pin-dot.error {
  background:   var(--danger);
  border-color: var(--danger);
  animation:    shake .3s ease;
}

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

/* ── TECLADO ── */
.keypad {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}
.key {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       16px 8px;
  font-size:     20px;
  font-family:   var(--mono);
  font-weight:   500;
  color:         var(--text);
  cursor:        pointer;
  text-align:    center;
  transition:    background .1s, border-color .1s, transform .08s;
  user-select:   none;
}
.key:hover  { background: #2a3048; border-color: var(--accent); }
.key:active { transform: scale(0.94); }
.key.del    { font-size: 16px; color: var(--muted); }
.key.del:hover { border-color: var(--danger); color: var(--danger); }
.key.zero   { grid-column: 2; }
.key.enter  { display: none; }   /* Enter automático al 4to dígito */

/* ── USUARIO LOGUEADO ── */
.bienvenida {
  text-align:  center;
  font-size:   15px;
  font-weight: 500;
  color:       var(--accent);
  display:     none;
}

/* ── TOAST ── */
@keyframes toastIn  { from { opacity:0; transform:translateX(110%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(110%); } }
.yumipos-toast {
  position: fixed; top: 24px; right: 24px;
  padding: 11px 18px; border-radius: 8px;
  font-size: 13px; font-family: var(--sans); font-weight: 500;
  color: #0f1117; z-index: 9999;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  animation: toastIn .3s cubic-bezier(.22,.68,0,1.2) forwards;
}
.yumipos-toast.saliendo { animation: toastOut .3s ease-in forwards; }








.btnInstalarApp {
    background-color: var(--accent); /* El verde de Tanyva */
    color: white;
    border: none;
    padding: clamp(3px, 3vw, 6px)6px;
    font-size: clamp(14px, 4vw, 18px);
    border-radius:10px;
    cursor: pointer;
    width: 90%;
    margin: 10px auto;
}