/* TPV Cloud - Tema Profesional */
:root {
    --tpv-primary: #1a56db;
    --tpv-primary-dark: #1342a8;
    --tpv-secondary: #6b7280;
    --tpv-success: #059669;
    --tpv-danger: #dc2626;
    --tpv-warning: #d97706;
    --tpv-info: #0891b2;
    --tpv-dark: #111827;
    --tpv-bg: #f3f4f6;
    --tpv-card: #ffffff;
    --tpv-border: #e5e7eb;
    --tpv-text: #1f2937;
    --tpv-muted: #6b7280;
    --tpv-radius: 12px;
    --tpv-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --tpv-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --tpv-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --tpv-transition: all .2s ease;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tpv-bg);
    color: var(--tpv-text);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

/* Navbar */
.navbar-tpv {
    background: linear-gradient(135deg, var(--tpv-dark) 0%, #1e293b 100%);
    padding: .5rem 1rem;
    box-shadow: var(--tpv-shadow-md);
    position: sticky; top: 0; z-index: 1040;
}
.navbar-tpv .navbar-brand { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.navbar-tpv .navbar-brand i { color: var(--tpv-primary); }
.navbar-tpv .navbar-brand.tpv-brand {
    display: inline-flex; align-items: center; gap: .65rem;
    padding-top: .15rem; padding-bottom: .15rem;
}
.navbar-tpv .navbar-brand.tpv-brand .brand-mark,
.tpv-brand .brand-mark {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(145deg, #0f3d2e, #185a44);
    color: #f7f2ea; font-size: 1.05rem;
    box-shadow: 0 6px 16px rgba(15, 61, 46, 0.35);
}
.navbar-tpv .navbar-brand.tpv-brand .brand-mark i,
.tpv-brand .brand-mark i { color: #f7f2ea; }
.navbar-tpv .navbar-brand.tpv-brand .brand-text,
.tpv-brand .brand-text {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.03em; line-height: 1;
}
.navbar-tpv .nav-link { color: rgba(255,255,255,.7); font-size: .875rem; transition: var(--tpv-transition); }
.navbar-tpv .nav-link:hover { color: #fff; }
.navbar-tpv .nav-user { color: rgba(255,255,255,.5); font-size: .8rem; }

/* Cards */
.card-tpv {
    background: var(--tpv-card);
    border: 1px solid var(--tpv-border);
    border-radius: var(--tpv-radius);
    box-shadow: var(--tpv-shadow);
    transition: var(--tpv-transition);
}
.card-tpv:hover { box-shadow: var(--tpv-shadow-md); transform: translateY(-2px); }
.card-tpv .card-body { padding: 1.25rem; }

/* Stat cards */
.stat-card { border-left: 4px solid transparent; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tpv-muted); }

/* Module link cards */
.module-card {
    display: block; text-decoration: none; color: var(--tpv-text);
    background: var(--tpv-card); border: 1px solid var(--tpv-border);
    border-radius: var(--tpv-radius); box-shadow: var(--tpv-shadow);
    transition: var(--tpv-transition); text-align: center; padding: 1.5rem 1rem;
}
.module-card:hover { box-shadow: var(--tpv-shadow-lg); transform: translateY(-4px); color: var(--tpv-text); border-color: var(--tpv-primary); }
.module-card .module-icon { font-size: 2.25rem; margin-bottom: .5rem; display: block; }
.module-card .module-title { font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.module-card .module-desc { font-size: .8rem; color: var(--tpv-muted); margin: 0; }

/* Login page */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tpv-dark) 0%, #1e3a5f 50%, var(--tpv-primary) 100%);
    padding: 1rem;
}
.login-card {
    background: var(--tpv-card); border-radius: 16px;
    box-shadow: var(--tpv-shadow-lg); width: 100%; max-width: 420px; padding: 2.5rem 2rem;
}
.login-card .login-logo { font-size: 2.5rem; color: var(--tpv-primary); }
.login-card .tpv-brand {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    margin: 0 0 .35rem;
}
.login-card .tpv-brand .brand-mark {
    width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem;
}
.login-card .tpv-brand .brand-text {
    color: var(--tpv-text); font-size: 1.75rem;
}
.login-card h2 { font-weight: 700; font-size: 1.5rem; margin: .75rem 0 .25rem; }
.login-card .login-subtitle { color: var(--tpv-muted); font-size: .9rem; margin-bottom: 1rem; }
.login-demo-creds {
    text-align: left;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
    color: var(--tpv-text);
}
.login-demo-title {
    font-weight: 600;
    color: var(--tpv-primary);
    margin-bottom: .25rem;
}
.login-demo-line { color: var(--tpv-muted); line-height: 1.45; }
.login-demo-line strong { color: var(--tpv-text); font-weight: 600; }

/* Login: ojo contraseña */
.login-password-toggle { position: relative; }
.login-password-toggle .form-control { padding-right: 2.75rem; }
.login-password-toggle .login-pwd-eye {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 2;
    border: none; background: transparent; color: var(--tpv-muted);
    padding: 0 .75rem; border-left: 1px solid var(--tpv-border);
}
.login-password-toggle .login-pwd-eye:hover { color: var(--tpv-primary); }

/* Captcha comida (Font Awesome 5 food) */
.captcha-food {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.captcha-food-btn {
    width: 48px; height: 48px; border: 2px solid var(--tpv-border);
    border-radius: 10px; background: var(--tpv-bg); color: #94a3b8;
    font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tpv-transition);
}
.captcha-food-btn:hover { border-color: var(--tpv-primary); color: var(--tpv-primary); }
.captcha-food-btn.captcha-colored { color: var(--tpv-success); border-color: var(--tpv-success); background: rgba(5, 150, 105, .08); }
.captcha-food-btn.captcha-selected { box-shadow: 0 0 0 3px var(--tpv-primary); }

/* Buttons */
.btn-tpv { background: var(--tpv-primary); color: #fff; border: none; border-radius: 8px; font-weight: 600; padding: .625rem 1.25rem; transition: var(--tpv-transition); }
.btn-tpv:hover { background: var(--tpv-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--tpv-shadow-md); }
.btn-tpv-success { background: var(--tpv-success); color: #fff; border: none; border-radius: 8px; font-weight: 600; padding: .625rem 1.25rem; transition: var(--tpv-transition); }
.btn-tpv-success:hover { background: #047857; color: #fff; }
.btn-tpv-danger { background: var(--tpv-danger); color: #fff; border: none; border-radius: 8px; font-weight: 600; padding: .625rem 1.25rem; transition: var(--tpv-transition); }
.btn-tpv-danger:hover { background: #b91c1c; color: #fff; }
.btn-tpv-warning { background: var(--tpv-warning); color: #fff; border: none; border-radius: 8px; font-weight: 600; padding: .625rem 1.25rem; transition: var(--tpv-transition); }
.btn-tpv-warning:hover { background: #b45309; color: #fff; }

/* Forms */
.form-control-tpv { border-radius: 8px; border: 1px solid var(--tpv-border); padding: .625rem .875rem; transition: var(--tpv-transition); }
.form-control-tpv:focus { border-color: var(--tpv-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }

/* Floor plan mesas */
.floor-plan { min-height: 500px; background: #e5e7eb; border-radius: var(--tpv-radius); position: relative; overflow: hidden; }
.mesa-chip {
    position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-weight: 700; font-size: .9rem; user-select: none;
    transition: var(--tpv-transition); box-shadow: var(--tpv-shadow);
}
.mesa-chip.libre    { background: var(--tpv-success); color: #fff; }
.mesa-chip.ocupada  { background: var(--tpv-danger); color: #fff; }
.mesa-chip.reservada { background: var(--tpv-warning); color: #fff; }
.mesa-chip:hover { transform: scale(1.05); box-shadow: var(--tpv-shadow-md); }

/* Comandero */
.cat-pill {
    display: inline-block; padding: .5rem 1rem; border-radius: 50px; font-weight: 600; font-size: .875rem;
    background: var(--tpv-card); border: 2px solid var(--tpv-border); cursor: pointer;
    transition: var(--tpv-transition); white-space: nowrap;
}
.cat-pill.active, .cat-pill:hover { background: var(--tpv-primary); color: #fff; border-color: var(--tpv-primary); }

.product-tile {
    background: var(--tpv-card); border: 1px solid var(--tpv-border); border-radius: var(--tpv-radius);
    padding: 1rem; cursor: pointer; text-align: center; transition: var(--tpv-transition);
    min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.product-tile:hover, .product-tile:active { border-color: var(--tpv-success); box-shadow: var(--tpv-shadow-md); }
.product-tile .product-name { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.product-tile .product-price { color: var(--tpv-success); font-weight: 700; font-size: .95rem; }

/* Cart bar */
.cart-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    background: var(--tpv-card); border-top: 1px solid var(--tpv-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,.1); padding: .75rem 1rem;
}

/* KDS */
.kds-body { background: #0f172a; color: #e2e8f0; min-height: 100vh; }
.kds-card {
    background: #1e293b; border-radius: var(--tpv-radius); padding: 1rem;
    border-left: 5px solid transparent; transition: var(--tpv-transition);
}
.kds-card.pendiente  { border-left-color: var(--tpv-warning); }
.kds-card.preparando { border-left-color: var(--tpv-info); }
.kds-card.listo      { border-left-color: var(--tpv-success); }
.kds-card .kds-mesa { font-weight: 700; font-size: 1.15rem; color: #fff; }
.kds-card .kds-time { font-size: .8rem; color: #94a3b8; }
.kds-card .kds-item { font-size: 1rem; padding: .25rem 0; }

/* Page header */
.page-header { margin-bottom: 1.5rem; }
.page-header h2 { font-weight: 700; font-size: 1.5rem; margin: 0; }
.page-header .breadcrumb { font-size: .8rem; margin: 0; }

/* Badge estados */
.badge-libre    { background: var(--tpv-success); }
.badge-ocupada  { background: var(--tpv-danger); }
.badge-reservada { background: var(--tpv-warning); }

/* Responsive */
@media (max-width: 768px) {
    .stat-card .stat-value { font-size: 1.35rem; }
    .module-card { padding: 1rem .75rem; }
    .module-card .module-icon { font-size: 1.75rem; }
    .module-card .module-title { font-size: .9rem; }
}

/* Animaciones sutiles */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .3s ease forwards; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Print */
@media print {
    .navbar-tpv, .cart-bar, .btn { display: none !important; }
    body { background: #fff; }
}