/* ==========================================
   OLEOFREE PWA — Design System
   Mirrors WebInventarioAplicacion (Blazor Server):
   same tokens, sidebar, buttons, tables, forms, login.
   Light professional theme — corporate red/gray.
   Inter + Phosphor icons are self-hosted (offline-safe).
   ========================================== */

:root {
    --primary-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --primary-light: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --primary-dark: #991b1b;
    --primary-darker: #7f1d1d;
    --primary-accent: #dc2626;
    --secondary-accent: #b91c1c;
    --tertiary-accent: #ef4444;

    --surface-glass: rgba(0, 0, 0, 0.02);
    --surface-glass-hover: rgba(0, 0, 0, 0.04);
    --surface-card: #ffffff;
    --surface-elevated: #f9fafb;
    --surface-input: #ffffff;
    --surface-background: #f3f4f6;

    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-light: #6b7280;

    --accent-success: #10b981;
    --accent-success-dark: #059669;
    --accent-warning: #f59e0b;
    --accent-error: #ef4444;
    --accent-info: #3b82f6;

    --border-subtle: #e5e7eb;
    --border-glass: #d1d5db;
    --border-input: #d1d5db;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(220, 38, 38, 0.08);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --sidebar-width: 200px;
    --sidebar-collapsed-width: 76px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background: var(--surface-background);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}

h1:focus { outline: none; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .5rem; }
a { color: var(--primary-accent); }

.text-muted { color: var(--text-muted); }

/* Phosphor icons align with text */
.ph { vertical-align: -0.12em; }
.btn .ph { font-size: 1.1em; }
.btn-sm .ph { font-size: 1rem; }

/* ==========================================
   App layout — fixed sidebar + content
   ========================================== */
.app-container {
    display: flex;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    width: 100%;
    background: var(--surface-background);
    position: relative;
    overflow: hidden;
}

.app-container::before {
    content: "";
    position: fixed;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 100%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border-right: 1px solid var(--border-subtle);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-wrapper {
    flex: 1;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.content-area {
    flex: 1 1 0;
    min-height: 0;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-wrapper {
    /* 1100px dejaba ~15% de vacío por lado en 1920px; 1600px aprovecha
       monitores grandes sin estirar la lectura en laptops (1126px útiles). */
    max-width: 1600px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sidebar header / brand */
.nav-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    min-height: 58px;
    padding: 0 0.625rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

.brand-logo { width: 32px; height: 32px; min-width: 32px; flex-shrink: 0; }
.brand-logo-svg { width: 32px; height: 32px; display: block; }
.brand-logo .brand-logo-img { width: 32px; height: 32px; display: block; object-fit: contain; }
.brand-info { display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }
.brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--primary-accent); text-decoration: none; white-space: nowrap; }
.brand-subtitle { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }

/* Sidebar body / sections */
.nav-body { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.nav-menu { display: flex; flex-direction: column; padding: 0 0.5rem; }
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}
.nav-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.nav-section-title {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #374151;
    padding: 0.375rem 0.5rem 0.1rem;
    display: block;
}

.nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    color: #4b5563;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-link:hover { background: rgba(220, 38, 38, 0.05); color: #1f2937; }
.nav-link.active {
    color: var(--secondary-accent);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.10) 0%, rgba(185, 28, 28, 0.06) 100%);
}
.nav-link.active::before { transform: translateY(-50%) scaleY(1); opacity: 1; }

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    border-radius: 7px;
    background: rgba(243, 244, 246, 0.9);
    border: 1px solid rgba(209, 213, 219, 0.6);
    font-size: 0.95rem;
    color: #6b7280;
    transition: all 0.2s ease;
}

.nav-link:hover .nav-icon { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.2); }
.nav-link.active .nav-icon {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.30);
}

.nav-text { font-size: 0.78rem; font-weight: 600; flex: 1; line-height: 1.25; letter-spacing: -0.005em; }
/* Badge de pendientes en el enlace de Sincronización (mismo rojo del bottom-badge). */
.nav-badge { min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--primary-gradient); color: #fff; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Punto de "hay cambios sin ver" (Pedidos/Pagos): mismo aviso en el sidebar y en la barra inferior. */
.nav-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary-gradient); flex: 0 0 auto; margin-left: auto; }
.bottom-nav-item .nav-dot { position: absolute; top: 6px; right: calc(50% - 18px); margin-left: 0; }
.nav-link.active .nav-text { color: var(--secondary-accent); }

/* Sidebar footer (user + status + logout) */
.sidebar-footer {
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fbfbfc;
}
.sidebar-user { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sidebar-user .nav-icon { width: 30px; height: 30px; min-width: 30px; }
.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sidebar-user-name { font-size: 0.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-status { font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.online { background: var(--accent-success); box-shadow: 0 0 4px rgba(16, 185, 129, 0.6); }
.dot.offline { background: var(--accent-warning); box-shadow: 0 0 4px rgba(245, 158, 11, 0.6); }
.logout-btn { width: 100%; justify-content: center; }

/* Collapsed sidebar (desktop toggle) */
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .brand-info,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .logout-btn span { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 0.5rem; gap: 0; }
.sidebar.collapsed .nav-menu { padding: 0 0.375rem; }
.sidebar.collapsed .logout-btn { padding: 0.5rem 0; }
.main-wrapper.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); width: calc(100% - var(--sidebar-collapsed-width)); max-width: calc(100vw - var(--sidebar-collapsed-width)); }

.sidebar-toggle-btn {
    position: absolute;
    top: 64px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    z-index: 60;
    font-size: 0.8rem;
}
.sidebar-toggle-btn:hover { color: var(--primary-accent); border-color: var(--primary-accent); }

/* Mobile drawer + topbar (visible only on small screens) */
.mobile-topbar { display: none; }
.mobile-hamburger-btn { display: none; }
.mobile-backdrop { display: none; }

/* ==========================================
   Bottom tab bar + FAB (mobile-first chrome).
   Hidden on desktop: the sidebar covers navigation
   there and the header keeps the primary buttons.
   ========================================== */
.bottom-nav, .fab, .mob-list { display: none; }

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: stretch;
    justify-content: space-around;
    /* min-height (no height fija): si la fuente del dispositivo escala, la barra
       crece con su contenido en vez de dejar los ítems pintarse por fuera. */
    min-height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    /* Nada puede sangrar por debajo de la barra (cazado en captura del dueño). */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 4px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    transition: color var(--transition-fast);
}
.bottom-nav-item .ph { font-size: 1.4rem; line-height: 1; }
.bottom-nav-item:active { color: var(--primary-accent); }
.bottom-nav-item.active { color: var(--primary-accent); }
.bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

/* Floating action button — the page's primary action on phones
   (the header keeps its button on desktop via .desktop-only). */
.fab {
    position: fixed;
    right: 1.1rem;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 41;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 18px;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45);
    cursor: pointer;
    transition: transform var(--transition-fast);
}
.fab:active { transform: scale(0.92); }

/* Paginación de listas: botón "cargar más" + contador. */
.load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0 5.5rem;
}
.load-more-info { font-size: 0.75rem; color: var(--text-muted); }

/* ==========================================
   Mobile card lists (Pedidos, Visitas, Clientes, Pagos).
   Purpose-built for phones instead of squashed tables.
   ========================================== */
.mob-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.mob-card-main {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem 0.8rem;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-card-body { padding: 0.9rem 1rem 0.8rem; }
.mob-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.mob-card-id { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.mob-card-title { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.mob-card-amount { margin: 0.1rem 0 0.45rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.mob-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.95rem; font-size: 0.78rem; color: var(--text-light); }
.mob-card-meta .ph { font-size: 0.95rem; color: var(--text-muted); margin-right: 0.3rem; vertical-align: -0.15em; }
.mob-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.mob-card-detail { border-top: 1px dashed var(--border-subtle); background: var(--surface-elevated); padding: 0.85rem 1rem; }
.mob-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.65rem 1rem 0.85rem; border-top: 1px solid var(--border-subtle); background: #fcfcfd; }

/* Expanded detail: meta chips + product lines */
.mob-det-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.mob-det-chips:empty { display: none; }
.mob-lines { display: flex; flex-direction: column; }
.mob-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border-subtle); }
.mob-line:last-of-type { border-bottom: none; }
.mob-line-info { display: flex; flex-direction: column; min-width: 0; }
.mob-line-info strong { font-size: 0.88rem; color: var(--text-primary); }
.mob-line-info small { font-size: 0.75rem; color: var(--text-muted); }
.mob-line-total { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.mob-det-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 2px solid var(--border-subtle);
    font-size: 0.9rem; color: var(--text-secondary);
}
.mob-det-total strong { font-size: 1.1rem; color: var(--secondary-accent); }

/* Neutral chip (meta info without semantic color) */
.chip-neutral { background: #f3f4f6; color: #4b5563; }
.chip .ph { font-size: 0.9rem; vertical-align: -0.12em; }

/* ==========================================
   Snackbars globales (ToastService, render en MainLayout).
   Anclados ABAJO y position:fixed: visibles sin importar dónde
   esté el scroll — el usuario que trabaja al final de la página
   (mapa, formularios) también ve el mensaje.
   ========================================== */
.toast-stack {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    right: 1.25rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(26rem, calc(100vw - 2.5rem));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #1d4ed8;
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    line-height: 1.45;
    animation: toastIn 0.25s ease-out;
}
.toast .ph { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; color: #1d4ed8; }
.toast span { flex: 1; overflow-wrap: anywhere; }
.toast-success { border-left-color: #15803d; }
.toast-success .ph { color: #15803d; }
.toast-error { border-left-color: #b91c1c; }
.toast-error .ph { color: #b91c1c; }
.toast-close { background: none; border: none; cursor: pointer; color: var(--text-light); padding: 0 0 0 0.25rem; font-size: 0.95rem; flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }



/* ==========================================
   Page headers
   ========================================== */
.page-container { padding: 0; max-width: 100%; overflow-x: hidden; }
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 1rem;
}
.page-header h1 { margin: 0; }
.page-title { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.page-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.35);
    flex-shrink: 0;
}
.toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.page-header .toolbar { margin-bottom: 0; }

/* ==========================================
   Buttons (server .btn set)
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-smooth);
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.btn-primary { background: var(--primary-gradient); color: white; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(220, 38, 38, 0.45); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary { background: #d1d5db; color: #1f2937; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }
.btn-secondary:hover:not(:disabled) { background: #9ca3af; transform: translateY(-1px); }

.btn-success { background: linear-gradient(135deg, var(--accent-success), var(--accent-success-dark)); color: white; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); }
.btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }

.btn-danger { background: linear-gradient(135deg, var(--accent-error), #b91c1c); color: white; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
.btn-danger:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(239, 68, 68, 0.45); }

.btn-outline { background: transparent; color: var(--primary-accent); border: 1px solid var(--border-input); box-shadow: none; }
.btn-outline:hover:not(:disabled) { border-color: var(--primary-accent); background: rgba(220, 38, 38, 0.05); transform: translateY(-1px); }

.btn-danger-outline { background: transparent; color: var(--accent-error); border: 2px solid var(--accent-error); }
.btn-danger-outline:hover:not(:disabled) { background: var(--accent-error); color: white; }

.btn-ghost { background: transparent; color: var(--text-secondary); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-glass-hover); color: var(--text-primary); }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-login { width: 100%; padding: 1rem; font-size: 1rem; margin-top: 0.5rem; }

.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-icon:hover { background: var(--surface-glass-hover); color: var(--text-primary); }
.btn-icon.danger { color: var(--accent-error); }
.btn-icon.danger:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }
.btn-icon.primary { color: var(--primary-accent); }
.btn-icon.primary:hover { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); }
.btn-icon.success { color: #10b981; }
.btn-icon.success:hover { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }

/* File input styled as button */
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* El botón de archivo es un <label>: no debe heredar el rótulo de campo
   (mayúsculas, gris y margen) del formulario donde vive. */
.form-group label.file-btn {
    display: inline-flex;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-accent);
    text-transform: none;
    letter-spacing: normal;
}
.file-picked { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.file-picked > span { overflow-wrap: anywhere; }
.evidencia-thumb { width: 56px; height: 56px; object-fit: contain; background: var(--surface-elevated); border-radius: 8px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
/* La miniatura es ampliable: un lupa discreta lo hace evidente también en móvil. */
.evidencia-thumb-wrap { position: relative; display: inline-flex; flex: none; }
.evidencia-thumb-ver { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(17, 24, 39, .8); color: #fff; display: grid; place-items: center; font-size: .68rem; pointer-events: none; }
.evidencia-thumb-zoom { cursor: zoom-in; }
.evidencia-thumb-zoom:hover { transform: scale(1.06); border-color: var(--primary-accent); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15), var(--shadow-soft); }
.evidencia-thumb-zoom:focus-visible { outline: 2px solid var(--primary-accent); outline-offset: 2px; }

/* Lightbox: visor de imágenes dentro de la página (sin pestaña nueva). Ventana
   oscura con encabezado, imagen y barra de zoom; el zoom/arrastre lo maneja
   oleofree.zoom (index.html). */
.lightbox-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; animation: lightbox-aparecer .18s ease; }
.lightbox-modal.lightbox-fig { margin: 0; width: min(94vw, 1100px); max-height: calc(92vh - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; cursor: default; overflow: hidden; background: #111827; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl); box-shadow: 0 25px 60px rgba(0,0,0,.55); animation: lightbox-entrar .2s ease; --lightbox-img-h: 62vh; }
.lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.10); }
.lightbox-titulo { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.lightbox-titulo-icon { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--primary-gradient); color: #fff; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(220,38,38,.4); }
.lightbox-titulo-texto { min-width: 0; }
.lightbox-titulo-texto strong { display: block; font-size: .95rem; color: #f9fafb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox-titulo-texto small { display: block; font-size: .78rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox-header-acciones { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.lightbox-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #e5e7eb; text-decoration: none; }
.lightbox-btn:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); color: #fff; }
.lightbox-btn:disabled { opacity: .35; cursor: not-allowed; }
a.lightbox-btn { display: inline-flex; }
.lightbox-cerrar:hover:not(:disabled) { background: var(--primary-accent); border-color: var(--primary-accent); color: #fff; }
.lightbox-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 240px; overflow: hidden; background: radial-gradient(ellipse at center, #1b2740 0%, #0b1220 100%); }
.lightbox-body img {
    /* Escenario fijo: la foto llena el alto disponible (las pequeñas se
       amplían a tamaño legible, las grandes se reducen) sin deformarse. */
    width: 100%;
    height: var(--lightbox-img-h);
    object-fit: contain;
    border-radius: .75rem;
    /* La sombra sigue la foto, no la caja (el fondo es transparente). */
    filter: drop-shadow(0 20px 50px rgba(0,0,0,.5));
    /* El arrastre/zoom lo maneja oleofree.zoom; en móvil se deja el pellizco
       nativo del navegador y se evita el arrastre fantasma de la imagen. */
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox-error { text-align: center; color: #e5e7eb; padding: 3rem 1.5rem; }
.lightbox-error .ph-warning-circle { font-size: 2.5rem; color: var(--accent-warning); }
.lightbox-error p { margin: .75rem 0 1rem; }
.lightbox-reintentar { color: #e5e7eb; border-color: rgba(255,255,255,.25); }
.lightbox-reintentar:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .7rem 1rem; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.10); }
.lightbox-zoom-controles { display: flex; align-items: center; gap: .3rem; padding: .25rem .35rem; border-radius: var(--radius-full); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.lightbox-zoom-controles .lightbox-btn { width: 36px; height: 36px; border-radius: var(--radius-full); }
.lightbox-separador { width: 1px; height: 20px; background: rgba(255,255,255,.15); margin: 0 .15rem; }
.lightbox-zoom-valor { min-width: 3.4rem; padding: .4rem .3rem; text-align: center; font-size: .8rem; font-weight: 700; color: #fff; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; }
.lightbox-zoom-valor:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.lightbox-zoom-valor:disabled { opacity: .35; cursor: not-allowed; }
.lightbox-hint { margin: 0; font-size: .75rem; color: #9ca3af; }
.lightbox-hint-corto { display: none; }
@keyframes lightbox-aparecer { from { opacity: 0; } }
@keyframes lightbox-entrar { from { opacity: 0; transform: scale(.97) translateY(8px); } }
@media (max-width: 768px) {
    .lightbox-backdrop { padding: .5rem; }
    .lightbox-modal.lightbox-fig { width: 100%; max-height: calc(94vh - env(safe-area-inset-bottom, 0px)); --lightbox-img-h: 56vh; }
    .lightbox-header { padding: .6rem .75rem; }
    .lightbox-titulo-icon { width: 32px; height: 32px; font-size: 1rem; }
    .lightbox-body { padding: .5rem; min-height: 200px; }
    .lightbox-footer { justify-content: center; padding: .6rem .75rem calc(.7rem + env(safe-area-inset-bottom, 0px)); }
    /* Dedo fácil: los mismos 44px del resto de la app en móvil. */
    .lightbox-zoom-controles .lightbox-btn { width: 44px; height: 44px; }
    .lightbox-zoom-valor { min-height: 44px; }
    .lightbox-hint { width: 100%; text-align: center; }
    .lightbox-hint-completo { display: none; }
    .lightbox-hint-corto { display: inline; }
}
@media (max-height: 500px) {
    /* Móvil apaisado: la ventana cabe aunque la pantalla sea bajita. */
    .lightbox-modal.lightbox-fig { --lightbox-img-h: 44vh; }
    .lightbox-header { padding: .5rem .75rem; }
    .lightbox-body { padding: .5rem; min-height: 120px; }
    .lightbox-footer { padding: .5rem .75rem; }
    .lightbox-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox-backdrop, .lightbox-modal.lightbox-fig { animation: none; }
    .evidencia-thumb-zoom:hover { transform: none; }
}

/* ==========================================
   Tables (server .modern-table)
   ========================================== */
.modern-table-container, .table-wrap {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow-x: auto;
    box-shadow: var(--shadow-soft);
    max-width: 100%;
}
.modern-table, .data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.modern-table thead, .data-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-elevated);
    border-bottom: 2px solid var(--border-subtle);
}
.modern-table th, .data-table th {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.modern-table td, .data-table td {
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.modern-table tbody tr, .data-table tbody tr { transition: background var(--transition-fast); }
.modern-table tbody tr:hover, .data-table tbody tr:hover { background: var(--surface-elevated); }
.modern-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: none; }
.actions-cell, .col-actions { white-space: nowrap; text-align: right; }
.actions-cell .btn, .col-actions .btn { margin-left: 0.35rem; }
.modern-table .detail-row td, .data-table .detail-row td { background: #fafafa; padding: 0 1rem 1rem; }
.modern-table tr.detail-row:hover, .data-table tr.detail-row:hover { background: transparent; }
.data-table a { color: var(--primary-accent); font-weight: 600; }

/* Status badges + chips */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.online, .status-badge.approved, .status-badge.active { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.status-badge.offline, .status-badge.pending { background: rgba(251, 191, 36, 0.15); color: #b45309; }
.status-badge.rejected, .status-badge.inactive { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
.status-badge.neutral { background: #f3f4f6; color: #4b5563; }
.status-badge.info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

.chip { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.chip-success { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.chip-warning { background: rgba(251, 191, 36, 0.2); color: #b45309; }
.chip-info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.chip-danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.badge-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    background: var(--accent-info);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ==========================================
   Forms (server set)
   ========================================== */
.form-group { margin-bottom: 1.25rem; }
.form-group label, .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.form-group label .ph { font-size: 1rem; color: var(--text-muted); }

.form-input, .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 40px;
    background: var(--surface-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: all var(--transition-fast);
}
/* Un campo bloqueado (p. ej. el cliente al editar un pago) debe verse bloqueado. */
.form-input:disabled, .form-select:disabled {
    background: var(--surface-elevated);
    color: var(--text-muted);
    cursor: not-allowed;
}
select.form-input, .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(107,114,128,0.8)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.form-input::placeholder { color: var(--text-muted); }
.form-select option { background: var(--surface-card); color: var(--text-primary); }

/* Selector propio (input + lista Blazor, cero JS): misma silueta que el
   select nativo. El datalist anterior nunca abría su lista al tocar en
   móvil, así que la lista se pinta aquí y la flecha es un botón real que
   la alterna (área táctil completa, sin teclado al hojear). */
.selector-opcion { position: relative; }
.selector-opcion-input { padding-right: 2.6rem; }
.selector-opcion-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
}
.selector-opcion-toggle:disabled { cursor: default; opacity: 0.5; }
.selector-opcion-toggle .ph { transition: transform var(--transition-fast); }
.selector-opcion-toggle.abierta .ph { transform: rotate(180deg); }
.selector-opcion-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    /* El JS la pasa a position: fixed pegada al campo (no la recorta ninguna
       tarjeta con overflow). Por encima de la barra inferior móvil (41-55) y
       por debajo de modales/lightbox/toasts (1100+): un selector dentro de un
       modal necesitaría subir este valor. */
    z-index: 70;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-large);
    max-height: 13.5rem;
    overflow-y: auto;
}
.selector-opcion-opcion {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
}
.selector-opcion-opcion:hover { background: var(--surface-elevated); }
.selector-opcion-opcion.seleccionada {
    background: rgba(220, 38, 38, 0.07);
    color: var(--primary-accent);
    font-weight: 600;
}
.selector-opcion-vacia {
    padding: 0.9rem 0.75rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.form-row .form-group { flex: 1; min-width: 140px; }
.form-group-sm { max-width: 150px; }
/* Ciudad del formulario de dirección: 50% más ancha que el sm (150→225px) para
   que el desplegable muestre "Cartagena de Indias — Bolívar" sin apretarse;
   la Dirección cede ese espacio. */
.form-group-ciudad { flex: 1.3; min-width: 225px; }
.form-group-btn { flex: 0 0 auto; }
.validation-message { color: var(--accent-error); font-size: 0.82rem; margin-top: 0.25rem; }

.card-form {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-subtle);
}
.card-form h2 { margin-bottom: 1rem; font-size: 1rem; }
.form-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 1rem;
}
.form-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--primary-gradient);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.form-actions { display: flex; gap: 0.6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.toolbar .form-input { width: auto; }
.toolbar-field { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); position: relative; }
/* La lupa vive DENTRO del input (absoluta): fuera flotaba separada del borde. */
.toolbar-field .ph { font-size: 1.15rem; flex-shrink: 0; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.toolbar-field .form-input { padding-left: 2.3rem; }

/* Line-item editor (Pedidos): grouped inset box */
.line-editor {
    background: var(--surface-elevated);
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1rem 1rem 0;
    margin-bottom: 1.25rem;
}
.line-editor-caption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Scroll wrapper for inner tables + total summary bar */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}
.table-scroll > .lines-table { margin: 0; }
.total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.total-bar strong { font-size: 1.05rem; color: var(--secondary-accent); }

.lines-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.lines-table th, .lines-table td { padding: 0.5rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.lines-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.total-row { text-align: right; margin-bottom: 1rem; }
.form-hint { margin-top: 0.75rem; font-size: 0.82rem; color: var(--text-muted); }
.notas { margin-top: 0.5rem; font-style: italic; color: var(--text-muted); font-size: 0.85rem; }

/* ==========================================
   Alerts (server set)
   ========================================== */
.alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    border: 1px solid;
}
.alert .ph { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert span:last-child { flex: 1; line-height: 1.5; }
.alert-error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #991b1b; }
.alert-error .ph { color: var(--accent-error); }
.alert-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.3); color: #065f46; }
.alert-success .ph { color: var(--accent-success); }
.alert-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: #92400e; }
.alert-warning .ph { color: var(--accent-warning); }
.alert-info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.3); color: #1e40af; }
.alert-info .ph { color: var(--accent-info); }

.offline-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #92400e;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.offline-banner .ph { font-size: 1.05rem; flex-shrink: 0; color: var(--accent-warning); }

/* ==========================================
   Login (server set)
   ========================================== */
.login-layout { min-height: 100vh; }
.login-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-background);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}
.login-container::before {
    content: '';
    position: absolute;
    width: min(600px, 50vw);
    height: min(600px, 50vw);
    background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    top: -200px;
    left: -200px;
    pointer-events: none;
}
.login-container::after {
    content: '';
    position: absolute;
    width: min(400px, 35vw);
    height: min(400px, 35vw);
    background: radial-gradient(circle, rgba(185, 28, 28, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -150px;
    right: -150px;
    pointer-events: none;
}
.login-card {
    position: relative;
    z-index: 1;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-large), var(--shadow-glow);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.login-header {
    text-align: center;
    padding: 2.5rem 2rem 2rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(185, 28, 28, 0.03) 100%);
    border-bottom: 1px solid var(--border-subtle);
}
.login-header h1 { margin: 0; font-size: 2rem; font-weight: 800; color: var(--primary-accent); letter-spacing: -0.02em; }
.login-header p { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.logo-container {
    width: 108px;
    height: 108px;
    background: #ffffff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25), 0 0 0 5px rgba(220, 38, 38, 0.10);
    padding: 5px;
    border: 1.5px solid rgba(195, 36, 38, 0.18);
}
.logo-container .brand-logo-svg { width: 100%; height: 100%; }
.logo-container .brand-logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.login-form { padding: 2rem; }
.login-footer { text-align: center; padding: 1rem 2rem 1.5rem; border-top: 1px solid var(--border-subtle); background: var(--surface-elevated); }
.login-footer p { margin: 0; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.api-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

/* ==========================================
   Detail cards
   ========================================== */

.welcome-card, .card-cliente {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-subtle);
}
.contactos-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 1.5rem; }
/* Las direcciones llevan mapa y botones: con 250 px el mapa quedaba enano y los
   botones se apilaban de a uno por fila. */
.direcciones-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 1.5rem; }

/* ==========================================
   Ubicación en el mapa (fichas de dirección)
   ========================================== */
.mapa-ubicacion { margin-top: 0.75rem; }
.mapa-ubicacion-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.mapa-ubicacion-titulo .ph { font-size: 1rem; color: var(--primary-accent); }
.mapa-lienzo {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    /* Contiene los paneles internos de Leaflet (z-index altos): sin esto el mapa
       puede pintarse por encima de la barra de navegación o los snackbars. */
    isolation: isolate;
}
/* Atribución compacta de una línea: el aviso legal sin tapar el mapa. */
.mapa-lienzo .leaflet-control-attribution,
.mapa-manual-lienzo .leaflet-control-attribution,
.mapa-clientes-lienzo .leaflet-control-attribution {
    font-size: 10px;
    line-height: 1.5;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.8);
}
.mapa-lienzo .leaflet-control-attribution a,
.mapa-manual-lienzo .leaflet-control-attribution a,
.mapa-clientes-lienzo .leaflet-control-attribution a {
    color: #4b5563;
}
/* Mapa interactivo para marcar el punto a mano (Leaflet servido local): el
   operario arrastra el punto hasta la entrada del cliente. */
.mapa-manual-lienzo {
    display: block;
    width: 100%;
    height: 280px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    /* Leaflet maneja sus propios gestos: sin esto el navegador se queda el
       arrastre para hacer scroll mientras se mueve el punto. */
    touch-action: none;
    overflow: hidden;
    isolation: isolate;
}
.mapa-manual-lienzo:focus-visible { outline: 2px solid var(--primary-accent); outline-offset: 2px; }
/* Mapa de clientes (admin): todos los puntos a la vez, con popups. */
.mapa-clientes-lienzo {
    display: block;
    width: 100%;
    height: 420px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    /* El navegador no pelea el arrastre táctil con Leaflet (parpadeo/saltos en móvil). */
    touch-action: none;
    overflow: hidden;
    isolation: isolate;
}
.mapa-clientes-lienzo .leaflet-popup-content { line-height: 1.45; }
/* Doble defensa contra el parpadeo de las zonas al soltar el arrastre: el
   zoom va sin animación (mapa-punto.js, zoomAnimation: false) y de paso la
   capa svg nunca toma la clase "leaflet-zoom-animated" de Leaflet (la que
   trae will-change: transform y la deja promovida a compositor: al soltar,
   el transform cambia al instante y la re-proyección llega un frame más
   tarde = la zona da un salto atrás). Esta regla es la guardia por si
   alguien reactiva la animación: aunque la clase vuelva, el svg sigue sin
   promoción permanente. */
.mapa-lienzo svg.leaflet-zoom-animated,
.mapa-manual-lienzo svg.leaflet-zoom-animated,
.mapa-clientes-lienzo svg.leaflet-zoom-animated,
.mapa-zona-editor-lienzo svg.leaflet-zoom-animated {
    will-change: auto;
}
.mapa-localidades-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.5rem;
    cursor: pointer;
}
/* Nombre de la zona siempre visible sobre su área (pill con punto de color). */
.zona-etiqueta {
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}
.zona-etiqueta-punto {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.3rem;
}
@media (max-width: 768px) {
    .mapa-clientes-lienzo { height: 320px; }
}
/* Editor de zonificaciones (admin): mismo lienzo, un poco más bajo. */
.mapa-zona-editor-lienzo {
    display: block;
    width: 100%;
    height: 360px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    touch-action: none;
    overflow: hidden;
    isolation: isolate;
}
.mapa-zona-editor-lienzo .leaflet-control-attribution {
    font-size: 10px;
    line-height: 1.5;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.8);
}
.mapa-zona-editor-lienzo .leaflet-control-attribution a {
    color: #4b5563;
}
@media (max-width: 768px) {
    .mapa-zona-editor-lienzo { height: 300px; }
}
/* Vértice arrastrable del editor: punto blanco con anillo rojo, anclado al centro. */
.mapa-vertice {
    background: transparent;
    border: none;
}
.mapa-vertice-punto {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--primary-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: grab;
}
/* El punto que se guarda: aro tenue + punto sólido, anclado por el CENTRO
   (el centro del aro es exactamente la coordenada marcada). */
.mapa-pin-halo,
.mapa-pin-punto { position: absolute; border-radius: 50%; }
.mapa-pin-halo {
    inset: 0;
    background: rgba(220, 38, 38, 0.22);
    border: 1px solid rgba(185, 28, 28, 0.55);
}
.mapa-pin-punto {
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: #dc2626;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.mapa-aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    color: var(--text-muted);
    font-size: 0.82rem;
}
.mapa-aviso .ph { font-size: 1.15rem; flex-shrink: 0; }
.mapa-precision {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.mapa-precision .ph { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.mapa-precision-alerta { color: #b45309; }
.mapa-precision-alerta .ph { color: var(--accent-warning); }
.mapa-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* ==========================================
   Interruptor «Dirección principal»
   ========================================== */
.form-row .form-group-toggle { flex: 1 1 300px; min-width: 240px; max-width: 420px; }
.toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.toggle-card:hover { border-color: var(--primary-accent); background: rgba(220, 38, 38, 0.03); }
.toggle-card input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.toggle-card input:focus-visible + .toggle-card-icono { outline: 2px solid var(--primary-accent); outline-offset: 2px; }
.toggle-card-icono {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-elevated);
    color: var(--text-muted);
    font-size: 1.05rem;
    transition: all var(--transition-fast);
}
.toggle-card-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.toggle-card-texto strong { font-size: 0.88rem; color: var(--text-primary); }
.toggle-card-texto small { font-size: 0.75rem; color: var(--text-muted); }
.toggle-card-control {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 25px;
    border-radius: var(--radius-full);
    background: #d1d5db;
    transition: background var(--transition-fast);
}
.toggle-card-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-fast);
}
.toggle-card-activo { border-color: var(--primary-accent); background: rgba(220, 38, 38, 0.04); }
.toggle-card-activo .toggle-card-icono { background: rgba(220, 38, 38, 0.12); color: var(--primary-accent); }
.toggle-card-activo .toggle-card-control { background: var(--primary-accent); }
.toggle-card-activo .toggle-card-control::after { transform: translateX(19px); }
.page-container h2.section-title { margin: 1.25rem 0 0.75rem; }
.app-version { margin-top: 2rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.pending-banner { border-radius: 8px; margin-bottom: 1rem; }
.pending-banner a { font-weight: 600; margin-left: 0.5rem; }

/* ==========================================
   Loading / empty states (server set)
   ========================================== */
.loading { text-align: center; padding: 2.5rem; color: var(--text-muted); }
/* Ancho de la columna producto de la matriz de precios (los nombres son
   largos pero 5 columnas de inputs necesitan su espacio). */
.precios-matriz th:first-child, .precios-matriz td:first-child { width: 230px; }

/* Splash de arranque (index.html + Authorizing): reemplaza el «Cargando...»
   genérico con la marca. Blazor lo reemplaza solo al montar. */
.boot-splash { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 2rem; text-align: center; background: var(--surface-background); }
.boot-logo { width: 6rem; height: 6rem; border-radius: 1.5rem; box-shadow: var(--shadow-soft); margin-bottom: 0.5rem; }
.boot-nombre { font-size: 1.4rem; font-weight: 800; color: var(--primary-accent); letter-spacing: -0.01em; }
.boot-sub { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.boot-spinner { width: 2.5rem; height: 2.5rem; border: 4px solid var(--border-subtle); border-top-color: var(--primary-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.boot-texto { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 4px solid var(--border-subtle);
    border-top-color: var(--primary-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.05);
    border: 1.5px dashed rgba(220, 38, 38, 0.28);
    color: #d1d5db;
    font-size: 2rem;
}
.empty-state p { margin-bottom: 1rem; }

/* Home hero (greeting + date) */
.home-hero { margin-bottom: 1.5rem; }
.home-hero-date {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.home-hero-title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.home-hero-title .ph { color: var(--primary-accent); margin-right: 0.35rem; }

/* Accesos de administración en el inicio (solo rol admin) */
.admin-accesos { margin-bottom: 1.5rem; }
.admin-accesos .section-title { display: flex; align-items: center; gap: 0.45rem; }
.admin-accesos .section-title .ph { color: var(--primary-accent); }
.admin-accesos-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Celdas editables de la matriz de precios admin */
.precio-input { width: 7.5rem; }
.precio-vacio { color: var(--text-muted); }
/* Bloques de la vista por-tipo en Precios admin. El header es sticky para
   no perder el tipo ni el Guardar con listas largas (en móvil baja lo que
   ocupa la barra superior fija). En escritorio, 2 bloques por fila. */
@media (min-width: 1024px) {
    .tipos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: start; }
    /* Sin esto, el min-width:640px global de .modern-table reventaba cada
       columna y la segunda salía cortada con scroll horizontal. */
    .tipos-grid .modern-table, .tipos-grid .modern-table-container { min-width: 0; }
    /* El Guardar va PEGADO a su título: al extremo de la columna se leía
       como si fuera del bloque de al lado. */
    .tipo-bloque-head { justify-content: flex-start; }
    .tipo-bloque-guardar { margin-left: 0.75rem; }
}
.tipo-bloque-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.5rem; position: sticky; top: 0; z-index: 5; background: var(--surface-background); padding: 0.5rem 0; }
.tipo-bloque-head .historial-subtitulo { margin: 0; }
.tipo-bloque-tabla { margin-bottom: 1.25rem; }
/* Nombre de producto: bloque a la IZQUIERDA en escritorio (las tablas son
   left por diseño); en la tarjeta móvil el td es flex space-between y el
   bloque queda a la derecha como el resto de valores. */
.producto-nombre { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left; }
/* Celda de precio editada sin guardar. */
.precio-input.celda-sucia { border-color: #d97706; background: #fffbeb; }
/* × para limpiar el buscador admin (ocupa el lugar de la lupa). */
.toolbar-field .toolbar-clear { position: absolute; left: 0.45rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.25rem; color: var(--text-muted); cursor: pointer; display: flex; }
.toolbar-field .toolbar-clear .ph { position: static; transform: none; }
.admin-limpiar-btn { margin-left: auto; }

/* Edición de tipo admin: nombre + orden en una fila. */
.admin-edicion-tipo { display: flex; gap: 0.5rem; }
.admin-edicion-tipo .form-input:first-child { flex: 1; }

/* Total + conteo juntos a la derecha (en la tarjeta el td es flex y sin
   este wrapper se separaban). */
.total-con-detalle { margin-left: auto; display: inline-flex; gap: 0.35rem; align-items: baseline; }
/* Fila inactiva/eliminada (soft delete): tarjeta atenuada. */
.fila-inactiva { opacity: 0.72; }
/* Checkbox admin bajo el buscador (ver eliminados). */
.admin-check { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; }
.admin-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary-accent); }

/* Tabs y filtros de las páginas admin (segmented). OJO: el color del tab
   activo va AQUÍ (misma especificidad que la base del chip): si el activo
   usara una regla aparte, la base lo pisaba y el tab no se distinguía. */
.admin-tabs { display: inline-flex; gap: 0.25rem; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.25rem; }
.admin-tabs .chip { cursor: pointer; border: none; border-radius: 999px; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.1rem; color: var(--text-secondary); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; }
.admin-tabs .chip.chip-active { background: var(--primary-gradient); color: #fff; box-shadow: 0 1px 4px rgba(220, 38, 38, 0.35); }
.admin-tabs .chip:not(.chip-active):hover { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); }
/* Tabs (segmented): a su ancho en escritorio, tercios iguales en móvil. */
.admin-tabs-fila { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-filtros { margin-bottom: 1rem; }
/* Desde/Hasta lado a lado también en móvil (el form-row se apila). */
.admin-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* Vendedor + Estado lado a lado (en Visitas no hay estado: ocupa todo). */
.admin-filtros-2col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.75rem; }
.admin-filtros-2col > :only-child { grid-column: 1 / -1; }
/* Buscador + actualizar en una fila: el botón solo-icono ya no ocupa todo el ancho. */
.admin-buscar { display: flex; gap: 0.5rem; flex: 1 1 auto; align-items: center; min-width: min(100%, 18rem); }
.admin-buscar .toolbar-field { flex: 1; }
/* El input llena su campo también en escritorio (si no, quedaba angosto). */
.admin-buscar .toolbar-field .form-input { flex: 1; width: 100%; min-width: 0; }
/* Especificidad (0,3,0): vence al `.toolbar .btn` genérico del móvil. */
.toolbar .admin-buscar .btn { flex: 0 0 auto; }
.paginador { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }

@media (max-width: 768px) {
    /* --- Mobile-first chrome on --- */
    .bottom-nav { display: flex; }
    .fab { display: flex; }
    .mob-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .desktop-only { display: none !important; }

    /* Snackbars: sobre la tab bar y librando el FAB (margen derecho). */
    .toast-stack {
        left: 1rem;
        right: 4.9rem;
        bottom: calc(74px + env(safe-area-inset-bottom));
        max-width: none;
    }

    /* --- Drawer ---
       Cerrado NO pinta nada: además del translateX, visibility:hidden garantiza
       que ningún WebView (o caché vieja) deje asomar sus enlaces — visto en una
       captura del dueño, donde «Configuración» sangraba bajo la barra inferior.
       El cierre de visibilidad se retrasa lo justo para conservar la animación. */
    .sidebar {
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
        width: min(300px, 85vw);
        z-index: 55;
        box-shadow: none;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sidebar.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    }
    .sidebar.open .nav-text,
    .sidebar.open .nav-section-title,
    .sidebar.open .brand-info,
    .sidebar.open .sidebar-user-info { display: flex; }
    .sidebar.open .nav-section-title { display: block; }
    .sidebar.open .nav-link { padding: 0.7rem 0.75rem; }
    .sidebar.open .nav-text { font-size: 0.9rem; }
    .sidebar.open .nav-icon { width: 34px; height: 34px; min-width: 34px; font-size: 1.05rem; }
    .sidebar-toggle-btn { display: none; }
    .main-wrapper { margin-left: 0; width: 100%; max-width: 100vw; }

    /* --- Fixed top bar: menu + brand + online status --- */
    .mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 45;
        height: calc(56px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        padding-left: 0.25rem;
        padding-right: 1rem;
        align-items: center;
        gap: 0.25rem;
        background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }
    .mobile-hamburger-btn {
        display: flex;
        width: 48px;
        height: 48px;
        border: none;
        background: transparent;
        color: var(--primary-accent);
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        border-radius: 10px;
    }
    .mobile-hamburger-btn:active { background: rgba(220, 38, 38, 0.08); }
    .mobile-brand { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
    .mobile-brand-logo { width: 30px; height: 30px; display: inline-flex; flex-shrink: 0; }
    .mobile-brand-logo .brand-logo-svg { width: 30px; height: 30px; }
    .mobile-brand-logo .brand-logo-img { width: 30px; height: 30px; object-fit: contain; }
    .mobile-brand-name { font-weight: 800; color: var(--primary-accent); font-size: 1.05rem; letter-spacing: -0.02em; }
    .mobile-status { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem; }
.mobile-status-text { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
    .mobile-status .dot { width: 11px; height: 11px; }
    .mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.45);
        animation: backdropFadeIn 0.2s ease;
    }
    @keyframes backdropFadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* --- Content + headers (extra bottom padding clears the tab bar) --- */
    .content-area { padding: calc(56px + env(safe-area-inset-top) + 1rem) 1rem calc(1.25rem + env(safe-area-inset-bottom) + 66px); }
    .page-header { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .page-title { font-size: 1.15rem; gap: 0.6rem; }
    .page-title-icon { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
    /* Toolbar: search owns the full first row, buttons share the next one. */
    .page-header .toolbar { margin-bottom: 0; flex-direction: row; flex-wrap: wrap; }
    .page-header .toolbar .form-input { flex: 1 1 100%; width: 100%; }
    .page-header .toolbar .btn { width: auto; flex: 1 1 auto; }
    .page-header .toolbar .btn .btn-label { display: none; }
    .toolbar-suelta .btn .btn-label { display: none; }
    /* Keep at least one visible label when the row holds a single action. */
    .page-header .toolbar .btn-primary .btn-label { display: inline; }
    /* Toolbars de sección (p. ej. «Agregar contacto» / «Agregar dirección»):
       los botones reparten el ancho de la fila en partes iguales en vez de
       quedar cada uno de un ancho al contenido (177px vs 181px en la captura). */
    .toolbar .btn { flex: 1 1 auto; }
    .ped-header-actions .btn { flex: 1 1 auto; }
    .ped-header-actions .btn-outline .btn-label { display: none; }

    /* --- Touch targets (min 44px) --- */
    .btn { min-height: 48px; }
    .btn-sm { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.9rem; }
    .btn-icon { width: 44px; height: 44px; }
    .actions-cell .btn, .col-actions .btn { margin-left: 0; }

    /* --- Tables become stacked cards (labels from data-label) --- */
    .modern-table-container, .table-wrap {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow-x: visible;
    }
    .modern-table, .data-table { display: block; min-width: 0; width: 100%; }
    .modern-table thead, .data-table thead { display: none; }
    .modern-table tbody, .data-table tbody { display: flex; flex-direction: column; gap: 0.75rem; }
    .modern-table tbody tr, .data-table tbody tr {
        display: block;
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
        padding: 0.35rem 0;
        overflow: hidden;
    }
    .modern-table td, .data-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid #f3f4f6;
        padding: 0.55rem 1rem;
        text-align: right;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text-primary);
    }
    .modern-table td:last-child, .data-table td:last-child { border-bottom: none; }
    .modern-table td[data-label]::before, .data-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: 0;
    }
    .modern-table .actions-cell, .data-table .actions-cell,
    .modern-table .col-actions, .data-table .col-actions {
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
    .modern-table .actions-cell .btn, .data-table .actions-cell .btn,
    .modern-table .col-actions .btn, .data-table .col-actions .btn { flex: 1 1 auto; }
    /* Expandable detail row: plain strip with its own horizontal scroll */
    .modern-table tr.detail-row, .data-table tr.detail-row {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }
    .modern-table tr.detail-row > td, .data-table tr.detail-row > td {
        display: block;
        padding: 0.75rem;
        text-align: left;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--surface-card);
        border: 1px dashed var(--border-glass);
        border-radius: var(--radius-lg);
    }
    .modern-table tr.detail-row > td::before, .data-table tr.detail-row > td::before { content: none; }
    .modern-table tr.detail-row:hover, .data-table tr.detail-row:hover { background: transparent; }
    .lines-table { min-width: 480px; }

    /* --- Forms: 16px inputs stop iOS auto-zoom --- */
    .form-input, .form-select { font-size: 16px; min-height: 48px; }
    .form-row { flex-direction: column; align-items: stretch; gap: 0; }
    .form-group-sm { max-width: none; }
    .card-form { padding: 1rem; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions .btn { width: 100%; }
    .page-header .toolbar .toolbar-field { width: 100%; }
    .toolbar-field .form-input { flex: 1; }
    /* El buscador admin comparte la fila con su botón (no a ancho completo). */
    .page-header .toolbar .admin-buscar { flex: 1 1 100%; }
    .page-header .toolbar .admin-buscar .toolbar-field { width: auto; flex: 1; }
    .page-header .toolbar .admin-buscar .btn { flex: 0 0 auto; }
    .tipo-bloque-head { top: calc(56px + env(safe-area-inset-top)); }
    /* Tabs admin: tercios iguales a todo el ancho en móvil. */
    .admin-tabs { flex: 1 1 100%; }
    .admin-tabs .chip { flex: 1 1 0; justify-content: center; padding: 0.5rem 0.5rem; }
    /* En la tarjeta móvil el valor va a la derecha (convención del td flex). */
    .producto-nombre { align-items: flex-end; text-align: right; }
    /* La celda de producto es una tarjeta en móvil: el ancho fijo de escritorio
       la angostaba y el nombre quedaba flotando en medio. */
    .precios-matriz th:first-child, .precios-matriz td:first-child { width: auto; }
    .line-editor { padding: 0.85rem 0.85rem 0; }

    /* --- Cards, login, misc --- */
    .welcome-card, .card-cliente { padding: 1rem; }
    .contactos-list, .direcciones-list { grid-template-columns: 1fr; }
    .form-row .form-group-toggle { flex: 1 1 auto; max-width: none; }
    .mapa-lienzo { height: 220px; }
    /* En pantalla táctil el mapa es más alto: se marca con el dedo. */
    .mapa-manual-lienzo { height: 340px; }
    .login-container { padding: 1rem; padding-top: max(1.5rem, env(safe-area-inset-top)); }
    .login-header { padding: 1.75rem 1.5rem 1.5rem; }
    .login-header h1 { font-size: 1.6rem; }
    .logo-container { width: 88px; height: 88px; }
    .login-form { padding: 1.5rem; }
    .alert { font-size: 0.85rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Mi día (inicio) e historial del cliente: reutilizan mob-list/mob-lines/chips. */
.mi-dia { margin: 1rem 0; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 1.1rem 1.25rem; }
.mi-dia-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mi-dia-head .section-title { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.mi-dia-head { flex-wrap: wrap; }
.mi-dia-head .form-input { width: auto; }
.mi-dia-head .btn { width: auto; }
/* La fila del pedido atenúa su total: el único total fuerte es el del día. */
.mi-dia .mob-line-total { color: var(--text-secondary); font-weight: 600; }
.mi-dia .empty-state { padding: 1.5rem 1rem; }
.mi-dia .empty-state-icon { width: 56px; height: 56px; font-size: 1.5rem; }
/* Chip + conteo en la misma línea: alineación vertical pareja y gris legible. */
.mi-dia .mob-line-info small { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-light); }
@media (max-width: 768px) {
    /* Fecha a todo el ancho debajo del título en móvil. */
    .mi-dia-head .form-input { flex: 1 1 100%; }
    /* Crear a todo el ancho para dedo fácil (mismo patrón que el pie anterior). */
    .mi-dia-head .btn { flex: 1 1 100%; justify-content: center; }
    .pedidos-dia-head { flex-wrap: wrap; }
    .pedidos-dia-head .btn { flex: 1 1 100%; justify-content: center; }
    .mi-dia { padding: 1rem; }
}
.mi-dia .mob-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.historial-subtitulo { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; margin: 1rem 0 0.5rem; color: var(--text-primary); }
.historial-subtitulo .ph { color: var(--text-muted); }
.pedidos-dia-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 1rem 0 0.5rem; }
/* Sin márgenes propios: el botón centra exacto sobre el texto. */
.pedidos-dia-head .historial-subtitulo { margin: 0; }

/* Ficha del cliente: cada bloque (contactos, direcciones, historial) vive en su
   propia tarjeta en vez de flotar como texto suelto sobre el fondo. */
.detalle-seccion {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.page-container .detalle-seccion .section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}
.page-container .detalle-seccion .section-title .ph { color: var(--primary-accent); }
.detalle-seccion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.page-container .detalle-seccion-head .section-title { margin-bottom: 0; }
.detalle-seccion-head .toolbar { margin: 0; flex-shrink: 0; }
.detalle-seccion .contactos-list, .detalle-seccion .direcciones-list { margin-bottom: 0; }
/* Las fichas dentro de la tarjeta van en relieve hundido para no confundirse con ella. */
.detalle-seccion .contactos-list .card-cliente, .detalle-seccion .direcciones-list .card-cliente {
    background: var(--surface-elevated);
    box-shadow: none;
    margin-bottom: 0;
}
.detalle-seccion .card-form { margin-bottom: 1rem; }
.detalle-seccion > .text-muted:last-child { margin-bottom: 0.25rem; }
/* Historial: cada grupo separado por una línea, el primero pegado al título. */
.detalle-seccion .historial-subtitulo { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.detalle-seccion .historial-subtitulo:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.btn-volver { margin-bottom: 1rem; }
@media (max-width: 768px) {
    .detalle-seccion { padding: 1rem; }
    .detalle-seccion-head { flex-direction: column; align-items: stretch; }
}

/* Historial de la ficha: los productos de cada pedido, indentados bajo su total. */
.historial-pedido-item { padding-left: 1rem; }
.historial-pedido-item .mob-line-info strong { font-size: 0.82rem; font-weight: 600; }
.historial-pedido-item .mob-line-total { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }

/* Detalle de escritorio del pedido: producto con el ancho restante y cifras
   alineadas a la derecha. */
.detail-row .lines-table { table-layout: fixed; }
.detail-row .lines-table th:nth-child(1) { width: 58%; }
.detail-row .lines-table th:nth-child(2) { width: 10%; }
.detail-row .lines-table th:nth-child(3) { width: 15%; }
.detail-row .lines-table th:nth-child(4) { width: 17%; }
.detail-row .lines-table th:nth-child(n+2), .detail-row .lines-table td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.mob-det-chips .chip .ph { margin-right: 0.3rem; }

/* Botón propio de instalación PWA (InstalacionPwa.razor): CTA cuando Chrome
   captura beforeinstallprompt y tarjeta de instrucciones para iOS, que no
   tiene el evento (Compartir → Añadir a pantalla de inicio). */
.instalar-pwa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fef2f2;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
}
.instalar-pwa-info { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.instalar-pwa-info strong { font-size: 0.92rem; color: var(--secondary-accent); }
.instalar-pwa-info span { color: var(--text-light); }
.instalar-pwa-info .ph { vertical-align: -0.15em; }
.instalar-pwa .btn { flex-shrink: 0; }
.instalar-pwa-ios { border-color: var(--border-subtle); background: var(--surface-elevated); }
.instalar-pwa-ios .instalar-pwa-info strong { color: var(--text-primary); }

/* ---- Meta de ventas (/meta-ventas) ---- */
.meta-tarjeta h2 { margin-bottom: 0.4rem; }
.meta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0.9rem 0 1rem; }
.meta-stat { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; }
.meta-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.meta-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin-top: 0.15rem; }
.meta-progress { height: 0.75rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.meta-progress > span { display: block; height: 100%; background: var(--primary-gradient); border-radius: 999px; }
.meta-progress.completo > span { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.meta-progress.mini { height: 0.4rem; min-width: 4.5rem; margin-bottom: 0.25rem; }
.meta-avance-texto { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.meta-nota { font-size: 0.78rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.meta-input { width: 7.5rem; text-align: right; }
@media (max-width: 768px) {
    .meta-stats { grid-template-columns: 1fr; gap: 0.5rem; }
    .meta-input { width: 100%; }
}
.meta-subtitulo { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin: 1rem 0 0.4rem; }
.meta-num { text-align: right; white-space: nowrap; }

/* Aviso global: cambios que el sistema dejó de reintentar y piden decisión del vendedor. */
.aviso-atencion {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 1rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-large, 0 8px 24px rgba(0,0,0,.15));
    font-weight: 600;
    text-decoration: none;
}
.aviso-atencion strong { text-decoration: underline; }