.kiosk-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 40px 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    text-align: center;
}

.kiosk-clock {
    font-size: 2.4rem;
    font-weight: 700;
    color: #27272a;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.kiosk-date {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 24px;
    text-transform: capitalize;
}

.kiosk-card h2 {
    font-size: 1rem;
    color: #71717a;
    font-weight: 600;
    margin-bottom: 16px;
}

.tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

.tipo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    border-radius: 14px;
    border: 1.5px solid #e4e4e7;
    background: #fafafa;
    color: #52525b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.tipo-btn .tipo-icon { font-size: 1.4rem; }
.tipo-btn:hover { border-color: #fdba74; transform: translateY(-2px); }
.tipo-btn.active {
    background: linear-gradient(135deg, #fb923c, #f97316);
    border-color: #f97316;
    color: #fff;
    box-shadow: 0 8px 20px rgba(249,115,22,0.3);
}

.pin-display {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
}
.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d4d4d8;
    transition: background .15s, border-color .15s, transform .15s;
}
.pin-dot.filled { background: #f97316; border-color: #f97316; transform: scale(1.15); }

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.key {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #e4e4e7;
    background: #fafafa;
    color: #27272a;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.key:hover { background: #f4f4f5; }
.key:active { transform: scale(0.94); }
.key.key-action { color: #a1a1aa; font-size: 0.78rem; font-weight: 700; }

.feedback {
    margin-top: 22px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
}
.feedback.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.feedback.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

@media (max-width: 480px) {
    .kiosk-card { padding: 28px 22px 32px; }
    .kiosk-clock { font-size: 2rem; }
}