:root {
    --app-sidebar-width: 270px;
    --app-topbar-height: 64px;
    --app-surface: #ffffff;
    --app-surface-strong: #ffffff;
    --app-border: #e2e8f0;
    --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
    --app-text: #1e293b;
    --app-text-secondary: #64748b;
    --app-muted: #94a3b8;
    --app-primary: #2596be;
    --app-primary-dark: #176b89;
    --app-primary-deep: #0f4f67;
    --app-accent: #7dc4da;
    --app-danger: #dc2626;
    --app-success: #16a34a;
    --app-warning: #d97706;
    --app-bg: #f8fafc;
    --app-bg-soft: #f1f5f9;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
}

html { scroll-behavior: smooth; }

body.app-body {
    min-height: 100vh;
    margin: 0;
    color: var(--app-text);
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    background: var(--app-bg);
}

body.auth-body {
    min-height: 100vh;
    margin: 0;
    color: var(--app-text);
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    background: var(--app-bg);
}

/* ── Auth / Login ─────────────────────────────── */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-login-card {
    width: min(480px, 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
}

.auth-login-topbar {
    height: 4px;
    background: var(--app-primary);
}

.auth-login-card-body { padding: 2rem; }

.auth-login-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.auth-login-brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: rgba(37, 150, 190, 0.08);
    border: 1px solid var(--app-border);
}

.auth-login-brand-mark img { width: 100%; height: 100%; display: block; }

.auth-login-brand h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--app-text);
    line-height: 1.15;
}

.auth-login-copy {
    margin: 0.4rem 0 0;
    color: var(--app-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-login-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}

.auth-login-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: var(--app-bg-soft);
    color: var(--app-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-form .form-label {
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--app-text);
}

.auth-badge, .auth-kicker, .dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auth-kicker, .dashboard-kicker { color: var(--app-primary); }

.auth-form { display: grid; gap: 1rem; }

.auth-input-group { box-shadow: none; }
.auth-input-group .input-group-text {
    background: var(--app-bg-soft);
    border-color: var(--app-border);
}

.auth-submit { min-height: 2.75rem; margin-top: 0.5rem; }

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 0;
}
.auth-alert span { min-width: 0; }

.auth-footer-note { color: var(--app-muted); font-size: 0.88rem; }

/* ── Dashboard Hero ───────────────────────────── */

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--app-primary-deep);
    color: #fff;
    box-shadow: var(--app-shadow);
}

.dashboard-hero h2 {
    margin: 0.25rem 0 0.4rem;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 800;
}

.dashboard-hero p { margin: 0; opacity: 0.85; font-size: 0.9rem; }

.dashboard-hero-meta {
    display: grid;
    gap: 0.75rem;
    min-width: 200px;
}

.dashboard-hero-meta div {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-hero-meta span {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-hero-meta strong { display: block; margin-top: 0.2rem; font-size: 1rem; }

.dashboard-strip-card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-soft);
}

.dashboard-strip-card h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; }

/* ── Dashboard Cards ──────────────────────────── */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}

.dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
}

.dashboard-card-primary .dashboard-card-icon { background: rgba(37,150,190,0.1); color: var(--app-primary); }
.dashboard-card-success .dashboard-card-icon { background: rgba(22,163,74,0.1); color: var(--app-success); }
.dashboard-card-dark .dashboard-card-icon { background: rgba(15,79,103,0.08); color: var(--app-primary-deep); }
.dashboard-card-warning .dashboard-card-icon { background: rgba(217,119,6,0.1); color: var(--app-warning); }

.dashboard-card h3, .dashboard-strip-card h3 { display: block; margin-bottom: 0.25rem; }
.dashboard-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }

.dashboard-card p, .dashboard-hero p, .dashboard-strip-card p {
    margin: 0;
    color: var(--app-text-secondary);
    font-size: 0.88rem;
}

.dashboard-card-link { margin-top: auto; align-self: flex-start; }

.dashboard-strip {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.dashboard-checklist {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--app-text-secondary);
    font-size: 0.88rem;
}
.dashboard-checklist li + li { margin-top: 0.5rem; }

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ── Topbar ───────────────────────────────────── */

.app-topbar {
    min-height: var(--app-topbar-height);
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--app-text);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.15rem;
    border-radius: var(--radius-sm);
    background: rgba(37,150,190,0.08);
    border: 1px solid var(--app-border);
}
.app-brand-mark img { width: 100%; height: 100%; display: block; }

.app-brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.app-brand-copy small {
    color: var(--app-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-menu-toggle {
    border-radius: var(--radius-sm);
    border-color: var(--app-border);
    color: var(--app-text);
}
.app-menu-toggle:hover, .app-menu-toggle:focus {
    color: var(--app-primary);
    border-color: var(--app-primary);
    background: rgba(37,150,190,0.06);
}

/* ── User Pill ────────────────────────────────── */

.app-user-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0.65rem 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--app-bg-soft);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.app-user-pill:hover,
.app-user-pill:focus {
    background: rgba(37,150,190,0.06);
    border-color: var(--app-primary);
    color: var(--app-text);
}

.app-user-pill strong { display: block; font-size: 0.88rem; line-height: 1.1; color: var(--app-text); }
.app-user-pill span { display: block; color: var(--app-muted); font-size: 0.72rem; }

.app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--app-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    overflow: hidden;
}

.app-user-avatar-image {
    background: var(--app-bg-soft);
}

.app-user-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Shell ────────────────────────────────────── */

.app-shell { padding: calc(var(--app-topbar-height) + 0.75rem) 0.5rem 0.75rem; }

/* ── Sidebar ──────────────────────────────────── */

.app-sidebar {
    color: var(--app-text);
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
}
.app-sidebar .offcanvas-header { border-bottom: 1px solid var(--app-border); }
.app-sidebar .btn-close { filter: none; }

.app-sidebar-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.app-sidebar-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--app-bg-soft);
    padding: 0.3rem;
    border: 1px solid var(--app-border);
}

.app-sidebar-brand strong { display: block; color: var(--app-text); font-size: 0.95rem; }
.app-sidebar-brand span {
    color: var(--app-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.app-sidebar-section {
    color: var(--app-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    padding-left: 0.5rem;
}

/* ── Sidebar Nav ──────────────────────────────── */

.app-nav-list, .app-nav-sublist { list-style: none; margin: 0; padding: 0; }
.app-nav-item + .app-nav-item { margin-top: 0.2rem; }

.app-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--app-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-nav-link:hover, .app-nav-link:focus {
    color: var(--app-text);
    background: var(--app-bg-soft);
}

.app-nav-link.active {
    color: var(--app-primary);
    background: rgba(37,150,190,0.08);
    font-weight: 700;
}

.app-nav-link-main { display: inline-flex; align-items: center; gap: 0.65rem; }

.app-nav-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--app-bg-soft);
    font-size: 0.9rem;
    color: var(--app-text-secondary);
}

.app-nav-link.active .app-nav-icon {
    background: rgba(37,150,190,0.12);
    color: var(--app-primary);
}

.app-nav-sublist {
    margin-top: 0.25rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--app-border);
}

.app-nav-sublist .app-nav-link { padding: 0.55rem 0.7rem; font-size: 0.88rem; }
.app-nav-sublist .app-nav-icon { width: 1.7rem; height: 1.7rem; font-size: 0.82rem; }

/* ── Sidebar Footer ───────────────────────────── */

.app-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

.app-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.12);
    color: var(--app-danger);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background-color 0.15s ease;
}
.app-logout:hover, .app-logout:focus {
    background: rgba(220,38,38,0.1);
    color: var(--app-danger);
}

/* ── Main ─────────────────────────────────────── */

.app-main { min-width: 0; }
.app-content-wrap { max-width: none; }

.app-breadcrumb { margin-bottom: 0.75rem; }
.app-breadcrumb .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 0.82rem; }
.app-breadcrumb .breadcrumb-item,
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--app-muted); }
.app-breadcrumb a { color: var(--app-primary); text-decoration: none; }

/* ── Page Header ──────────────────────────────── */

.app-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}

.app-page-header h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--app-text);
}

.app-page-kicker {
    margin: 0 0 0.25rem;
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-page-subtitle {
    margin: 0.35rem 0 0;
    color: var(--app-text-secondary);
    font-size: 0.88rem;
    max-width: 55ch;
}

.app-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: rgba(37,150,190,0.08);
    color: var(--app-primary-dark);
    font-weight: 600;
    font-size: 0.82rem;
    border: 1px solid rgba(37,150,190,0.12);
}

/* ── Card / Table / Alert / Form ──────────────── */

.card, .table, .alert, .modal-content, .offcanvas, .dropdown-menu { border-radius: var(--radius-lg); }
.card, .table-responsive, .alert, .modal-content { box-shadow: var(--app-shadow-soft); }

.card { border: 1px solid var(--app-border); background: var(--app-surface); }
.card .card-header { background: var(--app-bg-soft); border-bottom: 1px solid var(--app-border); }

.table-responsive { border-radius: var(--radius-md); }
.table { margin-bottom: 0; background: var(--app-surface); overflow: hidden; }

.table thead th {
    background: var(--app-bg-soft);
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table > :not(caption) > * > * {
    border-color: var(--app-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ── Form Controls ────────────────────────────── */

.form-control, .form-select, .input-group-text, .btn { border-radius: var(--radius-sm); }

.form-control, .form-select, .input-group-text {
    min-height: 2.75rem;
    border-color: var(--app-border);
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37,150,190,0.1);
}

.password-toggle-btn {
    min-width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: var(--app-border);
    background: var(--app-bg-soft);
    color: var(--app-text-secondary);
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    background: rgba(37,150,190,0.08);
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.password-toggle-btn .bi {
    pointer-events: none;
}

/* ── Buttons ──────────────────────────────────── */

.btn { font-weight: 600; padding: 0.55rem 1rem; font-size: 0.88rem; }

.btn-primary { background: var(--app-primary); border-color: var(--app-primary); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-dark); border-color: var(--app-primary-dark); }

.btn-success { background: var(--app-success); border-color: var(--app-success); color: #fff; box-shadow: none; }
.btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; }

.btn-info { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-primary-deep); box-shadow: none; }
.btn-info:hover, .btn-info:focus { background: #68b8d1; border-color: #68b8d1; color: var(--app-primary-deep); }

.btn-secondary { background: var(--app-bg-soft); border-color: var(--app-border); color: var(--app-text); box-shadow: none; }
.btn-secondary:hover, .btn-secondary:focus { background: #e2e8f0; border-color: #cbd5e1; color: var(--app-text); }

.btn-outline-secondary { color: var(--app-text-secondary); border-color: var(--app-border); background: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--app-bg-soft); color: var(--app-text); border-color: var(--app-border); }

.btn-light { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); }
.btn-light:hover, .btn-light:focus { background: var(--app-bg-soft); color: var(--app-text); }

/* ── Utility ──────────────────────────────────── */

.text-primary { color: var(--app-primary) !important; }
.text-secondary, .text-muted { color: var(--app-muted) !important; }

/* ── Alerts ───────────────────────────────────── */

.alert-info { background: rgba(37,150,190,0.06); border: 1px solid rgba(37,150,190,0.12); color: var(--app-primary-deep); }
.alert-success { background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.12); color: #15803d; }
.alert-warning { background: rgba(217,119,6,0.06); border: 1px solid rgba(217,119,6,0.12); color: #92400e; }
.alert-danger { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.12); color: #991b1b; }

/* ── DataTables ───────────────────────────────── */

.dt-container .row { row-gap: 0.65rem; }

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    border-radius: var(--radius-sm);
    border: 1px solid var(--app-border);
}

.content-card {
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}

.profile-photo-card {
    text-align: center;
}

.profile-photo-frame {
    width: 132px;
    height: 132px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(37,150,190,0.08);
    background: var(--app-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    font-size: 2.25rem;
    font-weight: 800;
}

.profile-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.crop-container {
    max-height: 450px;
    overflow: hidden;
    background: #1e293b;
    border-radius: var(--radius-sm);
}

.crop-container img {
    display: block;
    max-width: 100%;
}

.crop-preview-frame {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(37,150,190,0.15);
    background: var(--app-bg-soft);
}

.crop-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-meta-list {
    display: grid;
    gap: 0.75rem;
}

.profile-meta-item {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--app-border);
    background: var(--app-bg-soft);
}

.profile-meta-item span {
    display: block;
    font-size: 0.75rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.profile-meta-item strong {
    display: block;
    color: var(--app-text);
}

.pedido-builder {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(125, 196, 218, 0.24), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
}

.pedido-section-kicker {
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pedido-workspace-head {
    padding: 1rem;
    border: 1px solid rgba(37, 150, 190, 0.12);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top left, rgba(125, 196, 218, 0.2), transparent 22%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
}

.pedido-tabs-shell {
    display: grid;
    gap: 1rem;
}

.pedido-tabs-nav {
    gap: 0.75rem;
    padding: 0.4rem;
    border: 1px solid rgba(37, 150, 190, 0.12);
    border-radius: calc(var(--radius-lg) + 0.1rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94));
    box-shadow: var(--app-shadow-soft);
}

.pedido-tab-button {
    min-height: 3rem;
    border-radius: var(--radius-md) !important;
    color: var(--app-text-secondary);
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.pedido-tab-button:hover,
.pedido-tab-button:focus {
    color: var(--app-primary-deep);
    background: rgba(37, 150, 190, 0.08);
}

.pedido-tabs-nav .pedido-tab-button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary-deep), var(--app-primary));
    border-color: rgba(15, 79, 103, 0.2);
    box-shadow: 0 12px 24px rgba(15, 79, 103, 0.16);
}

.pedido-tabs-content .tab-pane {
    min-width: 0;
}

.pedido-history-table-wrap,
.pedido-history-table-wrap .dataTables_wrapper,
.pedido-history-table-wrap .row,
.pedido-history-table-wrap .col-sm-12 {
    width: 100%;
}

.pedido-history-table-wrap .dataTables_wrapper {
    overflow-x: auto;
}

.pedido-history-table-wrap table,
.pedido-history-table-wrap .table {
    width: 100% !important;
}

.pedido-action-copy {
    border-color: rgba(37, 150, 190, 0.18);
    background: rgba(37, 150, 190, 0.08);
    color: var(--app-primary-deep);
}

.pedido-action-copy:hover,
.pedido-action-copy:focus {
    border-color: var(--app-primary);
    background: rgba(37, 150, 190, 0.14);
    color: var(--app-primary-deep);
}

.pedido-action-edit {
    border-color: rgba(15, 79, 103, 0.18);
    background: rgba(15, 79, 103, 0.08);
    color: var(--app-primary-deep);
}

.pedido-action-edit:hover,
.pedido-action-edit:focus {
    border-color: var(--app-primary-deep);
    background: rgba(15, 79, 103, 0.14);
    color: var(--app-primary-deep);
}

.pedido-action-delete {
    background: var(--app-danger);
    border-color: var(--app-danger);
    color: #fff;
}

.pedido-action-delete:hover,
.pedido-action-delete:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.pedido-toolbar-actions {
    align-self: flex-start;
}

.pedido-inline-feedback,
.pedido-inline-error {
    border-radius: var(--radius-md);
    margin-bottom: 0.25rem;
}

.pedido-inline-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: #166534;
}

.pedido-inline-feedback-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.14);
    flex: 0 0 auto;
}

.pedido-inline-feedback strong,
.pedido-inline-error {
    font-size: 0.88rem;
}

.pedido-inline-feedback p {
    color: inherit;
    font-size: 0.82rem;
}

.pedido-inline-error {
    padding: 0.85rem 1rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.16);
    color: #991b1b;
}

.pedido-builder-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pedido-builder-kicker {
    margin: 0 0 0.2rem;
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pedido-builder-header h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--app-text);
}

.pedido-builder-copy {
    margin-top: 0.4rem;
    max-width: 56ch;
    color: var(--app-text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.pedido-builder-hint {
    max-width: 260px;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    background: rgba(37, 150, 190, 0.08);
    color: var(--app-primary-deep);
    font-size: 0.8rem;
    line-height: 1.35;
}

.pedido-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 180px;
    gap: 1rem;
    align-items: start;
}

.pedido-combobox-shell,
.pedido-qty-shell,
.pedido-action-shell {
    min-width: 0;
}

.pedido-combobox {
    position: relative;
}

.pedido-combobox-field {
    position: relative;
}

.pedido-combobox-field .bi-search {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    pointer-events: none;
}

.pedido-combobox-field .form-control {
    padding-left: 2.5rem;
    padding-right: 3rem;
    background: rgba(255, 255, 255, 0.95);
}

.pedido-combobox-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--app-text-secondary);
}

.pedido-combobox.is-open .pedido-combobox-toggle {
    color: var(--app-primary);
}

.pedido-combobox-status {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.55rem;
    color: var(--app-text-secondary);
    font-size: 0.78rem;
}

.pedido-combobox-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0.55rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(15, 79, 103, 0.12);
}

.pedido-combobox-loading {
    display: grid;
    gap: 0.5rem;
}

.pedido-combobox-loading span {
    display: block;
    height: 3.3rem;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.8), rgba(241, 245, 249, 1), rgba(226, 232, 240, 0.8));
    background-size: 200% 100%;
    animation: pedido-skeleton 1.1s linear infinite;
}

.pedido-combobox-list {
    display: grid;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
}

.pedido-combobox-option {
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--app-bg-soft);
    color: var(--app-text);
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.pedido-combobox-option-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.pedido-combobox-option:hover,
.pedido-combobox-option:focus {
    border-color: rgba(37, 150, 190, 0.28);
    background: rgba(37, 150, 190, 0.06);
    transform: translateY(-1px);
}

.pedido-combobox-option.active {
    border-color: var(--app-primary);
    background: rgba(37, 150, 190, 0.1);
}

.pedido-combobox-option-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.55rem;
    min-height: 1.9rem;
    border-radius: 999px;
    background: rgba(15, 79, 103, 0.1);
    color: var(--app-primary-deep);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

.pedido-combobox-option-copy {
    min-width: 0;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--app-text);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
}

.pedido-combobox-option-um {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    color: var(--app-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.pedido-combobox-empty {
    padding: 1rem;
    border: 1px dashed var(--app-border);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.9);
    color: var(--app-text-secondary);
    text-align: center;
    font-size: 0.88rem;
}

.pedido-qty-input {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}

.pedido-qty-help {
    margin: 0.45rem 0 0;
    color: var(--app-text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
}

.pedido-action-shell {
    display: flex;
    align-items: end;
}

.pedido-add-btn {
    width: 100%;
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pedido-detail-card {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: var(--app-shadow-soft);
}

.pedido-detail-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 79, 103, 0.08);
    color: var(--app-primary-deep);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.pedido-detail-table-wrap {
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: #fff;
}

.pedido-cantidad-input {
    min-width: 110px;
    text-align: center;
    font-weight: 700;
}

.pedido-side-stack {
    display: grid;
    gap: 1rem;
}

.pedido-summary-card {
    position: sticky;
    top: calc(var(--app-topbar-height) + 1rem);
    overflow: hidden;
    border: 1px solid rgba(15, 79, 103, 0.12);
    background:
        radial-gradient(circle at top right, rgba(125, 196, 218, 0.18), transparent 26%),
        linear-gradient(160deg, rgba(15, 79, 103, 0.98), rgba(23, 107, 137, 0.98));
}

.pedido-summary-card .card-body {
    color: #fff;
}

.pedido-summary-card .card-title,
.pedido-summary-card .text-muted,
.pedido-summary-card strong,
.pedido-summary-card small,
.pedido-summary-card span {
    color: inherit !important;
}

.pedido-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    font-weight: 700;
}

.pedido-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pedido-summary-grid article {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pedido-summary-grid span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.74;
}

.pedido-summary-grid strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.pedido-summary-grid small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 0.78;
}

.pedido-summary-json {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(6, 24, 32, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pedido-summary-json pre {
    margin: 0;
    max-height: 280px;
    overflow: auto;
    color: #d9f3fb;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

@keyframes pedido-skeleton {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

/* ── Responsive: < 992px ──────────────────────── */

@media (max-width: 991.98px) {
    .auth-shell { padding: 1rem; }
    .auth-login-card-body { padding: 1.5rem; }
    .auth-login-brand h1 { font-size: 1.35rem; }
    .auth-login-copy { max-width: none; }
    .dashboard-hero, .dashboard-strip { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
    .app-user-pill { padding: 0.35rem 0.5rem; }
    .app-user-pill strong, .app-user-pill span { display: none; }
    .app-shell { padding-left: 0.75rem; padding-right: 0.75rem; }
    .app-page-header { padding: 1rem; }
    .pedido-builder-grid {
        grid-template-columns: 1fr;
    }
    .pedido-builder-header {
        flex-direction: column;
    }
    .pedido-tabs-nav {
        gap: 0.5rem;
    }
    .pedido-builder-hint {
        max-width: none;
    }
    .pedido-combobox-option-topline {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .pedido-summary-card {
        position: static;
    }
}

/* ── Responsive: >= 992px ─────────────────────── */

@media (min-width: 992px) {
    .app-sidebar.offcanvas-lg {
        position: fixed;
        top: calc(var(--app-topbar-height) + 1px);
        left: 0;
        bottom: 0;
        width: var(--app-sidebar-width);
        height: auto;
        transform: none;
        visibility: visible;
        border-radius: 0;
        box-shadow: none;
        border-right: 1px solid var(--app-border);
    }
    .app-sidebar.offcanvas-lg .offcanvas-header { display: none; }
    .app-main { margin-left: calc(var(--app-sidebar-width) + 0.35rem); padding-right: 0.2rem; }
}

/* ── Responsive: < 768px ──────────────────────── */

@media (max-width: 767.98px) {
    .auth-shell { align-items: stretch; padding: 0.75rem; }
    .auth-login-card { margin: auto 0; }
    .auth-login-card-body { padding: 1.25rem; }
    .auth-login-brand { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
    .auth-login-brand-mark { width: 3rem; height: 3rem; }
    .auth-login-meta { gap: 0.4rem; margin-bottom: 1rem; }
    .auth-login-meta span { width: 100%; justify-content: flex-start; }
    .auth-form { gap: 0.85rem; }
    .auth-submit { min-height: 2.65rem; }
}

/* ── Responsive: < 576px ──────────────────────── */

@media (max-width: 575.98px) {
    .auth-login-card-body, .dashboard-hero { padding: 1rem; }
    .auth-login-brand h1 { font-size: 1.25rem; }
    .app-page-header { margin-bottom: 1rem; flex-direction: column; align-items: flex-start; }
    .app-sidebar-brand img { width: 38px; height: 38px; }
    .pedido-builder { padding: 0.85rem; }
    .pedido-workspace-head,
    .pedido-detail-card {
        padding: 0.85rem;
    }
    .pedido-tabs-nav {
        grid-template-columns: 1fr;
    }
    .pedido-tab-button {
        width: 100%;
    }
    .pedido-combobox-status {
        flex-direction: column;
        gap: 0.2rem;
    }
    .pedido-summary-grid {
        grid-template-columns: 1fr;
    }
}