:root {
    --color-bg: #1b1f27;
    --color-panel: #262b36;
    --color-panel-alt: #2f3542;
    --color-primary: #2f80ed;
    --color-primary-dark: #1c5fbf;
    --color-success: #27ae60;
    --color-danger: #eb5757;
    --color-warning: #f2994a;
    --color-text: #eef1f5;
    --color-text-muted: #9aa4b2;
    --radius: 12px;
    font-size: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

button, input, select {
    font-family: inherit;
    font-size: 1rem;
}

button {
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    background: var(--color-panel-alt);
    color: var(--color-text);
    padding: 14px 18px;
    min-height: 52px;
    transition: background 0.15s ease, transform 0.05s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.primary { background: var(--color-primary); }
button.primary:hover { background: var(--color-primary-dark); }
button.success { background: var(--color-success); }
button.danger { background: var(--color-danger); }
button.warning { background: var(--color-warning); }
button.ghost { background: transparent; border: 1px solid var(--color-text-muted); }

input, select {
    background: var(--color-panel-alt);
    color: var(--color-text);
    border: 1px solid #3d4351;
    border-radius: var(--radius);
    padding: 12px 14px;
    min-height: 48px;
}
input::placeholder { color: var(--color-text-muted); }

/* ---------- Login ---------- */
.login-screen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
}
.login-screen h1 { margin: 0; font-size: 1.6rem; letter-spacing: 1px; }
.pin-display {
    width: 260px;
    height: 56px;
    background: var(--color-panel);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    letter-spacing: 12px;
}
.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 84px);
    gap: 14px;
}
.pin-pad button {
    width: 84px;
    height: 84px;
    font-size: 1.6rem;
    border-radius: 50%;
}
.login-error {
    color: var(--color-danger);
    min-height: 24px;
    font-weight: 600;
}
.oculto { display: none !important; }

.restaurantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    width: min(560px, 90vw);
}
.restaurantes-grid button {
    min-height: 96px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--color-panel);
    border: 2px solid transparent;
}
.restaurantes-grid button:hover { border-color: var(--color-primary); }

/* ---------- Layout general ---------- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: var(--color-panel);
    border-bottom: 1px solid #333a47;
}
.app-header .user-info { display: flex; gap: 12px; align-items: center; }
.badge {
    background: var(--color-primary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
}
.app-header nav { display: flex; gap: 10px; }

.pos-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    height: calc(100vh - 76px);
}

.productos-panel {
    padding: 16px;
    overflow-y: auto;
}
.search-bar { margin-bottom: 14px; display: flex; gap: 10px; }
.search-bar input { flex: 1; }

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.producto-card {
    background: var(--color-panel);
    border-radius: var(--radius);
    padding: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100px;
}
.producto-card .nombre { font-weight: 600; }
.producto-card .precio { color: var(--color-success); font-weight: 700; }
.producto-card .stock-bajo { color: var(--color-warning); font-size: 0.75rem; }
.producto-card:disabled { opacity: 0.35; }

.carrito-panel {
    background: var(--color-panel);
    border-left: 1px solid #333a47;
    display: flex;
    flex-direction: column;
    padding: 16px;
}
.carrito-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.carrito-item {
    background: var(--color-panel-alt);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.carrito-item .info { flex: 1; }
.carrito-item .qty-controls { display: flex; align-items: center; gap: 6px; }
.carrito-item .qty-controls button { min-height: 36px; padding: 4px 10px; }

.totales { border-top: 1px solid #3d4351; margin-top: 12px; padding-top: 12px; }
.totales .fila { display: flex; justify-content: space-between; padding: 3px 0; }
.totales .fila.total { font-size: 1.3rem; font-weight: 700; color: var(--color-success); }

.propina-botones, .metodo-botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.propina-botones button, .metodo-botones button { flex: 1; min-width: 60px; }
.propina-botones button.activo, .metodo-botones button.activo { background: var(--color-primary); }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
}
.modal-overlay.oculto { display: none; }
.modal {
    background: var(--color-panel);
    border-radius: var(--radius);
    padding: 24px;
    width: min(480px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal h2 { margin: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

.pago-linea { display: flex; gap: 8px; align-items: center; background: var(--color-panel-alt); padding: 8px; border-radius: var(--radius); }
.pago-linea input, .pago-linea select { flex: 1; }

/* ---------- Admin ---------- */
.admin-layout { padding: 20px; max-width: 1200px; margin: 0 auto; }
.tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-panel { display: none; }
.tab-panel.activo { display: block; }

table { width: 100%; border-collapse: collapse; background: var(--color-panel); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #333a47; }
th { background: var(--color-panel-alt); }
tr.stock-bajo td { color: var(--color-warning); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--color-text-muted); }

.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--color-panel-alt); padding: 12px 20px; border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 100; display: none;
}
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-success); }