:root {
    /* Global Dark Theme (App Launcher) */
    --mac-bg: #f3f6fb;
    --mac-topbar: #ffffff;
    --mac-text: #1d1d1f;
    --mac-muted: #667085;

    /* Global Light Theme (Inner Modules) */
    --app-bg: #f5f5f7;
    --app-panel: #ffffff;
    --app-text: #1d1d1f;
    --app-muted: #86868b;
    --app-border: #e2e2e5;

    /* Accents & Status */
    --accent-blue: #0066cc;
    --accent-blue-hover: #0077ed;
    --danger: #ff3b30;
    --warning: #ff9500;
    --success: #34c759;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.12);
}

body[data-theme="dark"] {
    --mac-bg: #09111d;
    --mac-topbar: rgba(10, 18, 29, 0.92);
    --mac-text: #edf3ff;
    --mac-muted: #95a6bd;
    --app-bg: #0b1320;
    --app-panel: #0f1b2d;
    --app-text: #eef4ff;
    --app-muted: #91a4bf;
    --app-border: rgba(148, 163, 184, 0.16);
    --accent-blue: #5da9ff;
    --accent-blue-hover: #7bb8ff;
    --danger: #ff6b8a;
    --warning: #ffb24a;
    --success: #47d7a1;
    --shadow-sm: 0 10px 24px rgba(2, 8, 20, 0.26);
    --shadow-md: 0 18px 36px rgba(2, 8, 20, 0.3);
    --shadow-lg: 0 28px 52px rgba(2, 8, 20, 0.36);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 133, 161, 0.5) transparent;
}

body {
    min-height: 100vh;
    background: linear-gradient(180deg, #edf2fb 0%, #dfe9f7 100%);
    color: var(--app-text);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(168, 183, 201, 0.9), rgba(136, 154, 176, 0.9));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(140, 163, 189, 0.95), rgba(109, 130, 152, 0.95));
    background-clip: padding-box;
}

body[data-theme="dark"] * {
    scrollbar-color: rgba(112, 146, 190, 0.55) transparent;
}

body[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(74, 109, 150, 0.96), rgba(45, 74, 109, 0.96));
    background-clip: padding-box;
}

body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(92, 131, 178, 0.98), rgba(58, 92, 132, 0.98));
    background-clip: padding-box;
}

/* ----------------------------------
   1. MAC OS WINDOW SHELL
---------------------------------- */
.os-window {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
    display: flex;
    flex-direction: column;
    position: relative;
}

body[data-theme="dark"] .os-window {
    background:
        radial-gradient(circle at top right, rgba(61, 106, 176, 0.14), transparent 28%),
        linear-gradient(180deg, #0b1320 0%, #0a1624 100%);
}

/* Login Shell */
.login-shell {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(circle at top left, rgba(26, 82, 118, 0.36), transparent 34%),
        radial-gradient(circle at bottom right, rgba(191, 106, 26, 0.28), transparent 30%),
        linear-gradient(135deg, rgba(7, 14, 25, 0.96) 0%, rgba(12, 28, 44, 0.94) 52%, rgba(24, 33, 46, 0.96) 100%);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-shell > .login-card {
    display: none;
}

.login-stage {
    width: min(900px, calc(100vw - 48px));
    height: min(550px, calc(100vh - 72px));
    min-height: 550px;
    display: grid;
    grid-template-columns: minmax(312px, 0.83fr) minmax(0, 1.17fr);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 32px 72px rgba(3, 9, 19, 0.34);
    background: rgba(10, 18, 31, 0.32);
    margin: auto;
}

.login-hero {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5f7fb;
    background-color: #0f172a;
    overflow: hidden;
}

.login-card {
    position: relative;
    z-index: 1;
}

.login-hero-media,
.login-hero-overlay,
.login-hero-vignette,
.login-hero-grain {
    position: absolute;
    inset: 0;
}

.login-hero-media {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.045);
    filter: saturate(1.02) contrast(1.02) brightness(0.96);
    animation: loginHeroReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: filter 320ms ease;
}

.login-hero-overlay {
    background:
        linear-gradient(120deg, rgba(8, 15, 28, 0.42) 0%, rgba(8, 15, 28, 0.18) 36%, rgba(8, 15, 28, 0.34) 100%),
        linear-gradient(90deg, rgba(10, 18, 31, 0.12) 0%, rgba(10, 18, 31, 0.04) 54%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
}

.login-hero-vignette {
    background:
        radial-gradient(circle at center, transparent 46%, rgba(4, 10, 20, 0.14) 78%, rgba(4, 10, 20, 0.28) 100%),
        linear-gradient(180deg, rgba(4, 10, 20, 0.06) 0%, rgba(4, 10, 20, 0.18) 100%);
    pointer-events: none;
}

.login-hero-grain {
    opacity: 0.055;
    mix-blend-mode: soft-light;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6) 0.6px, transparent 0.8px),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.35) 0.7px, transparent 0.9px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.45) 0.6px, transparent 0.85px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.28) 0.7px, transparent 0.95px);
    background-size: 18px 18px, 22px 22px, 24px 24px, 20px 20px;
    pointer-events: none;
}

.login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 38px;
    color: #152031;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 252, 0.98) 100%);
    font-family: 'Inter', 'Outfit', sans-serif;
}

.login-card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.login-card .brand-mark {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-card input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f1f5f9;
    color: #122033;
    outline: none;
    transition: all 0.3s ease;
}

.login-card input:focus {
    border-color: #007bff;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.16), 0 0 0 4px rgba(0, 123, 255, 0.12);
}

.login-card button {
      width: 100%;
      min-height: 50px;
      padding: 0 18px;
      border-radius: 12px;
      border: none;
      background: #007bff;
      color: #ffffff;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      margin-top: 4px;
      box-shadow: 0 16px 30px rgba(0, 123, 255, 0.28);
      transition: all 0.3s ease;
}

.login-card button:hover {
    background: #0069d9;
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(0, 123, 255, 0.32);
}

.login-card button:disabled {
    cursor: wait;
    opacity: 0.84;
    transform: none;
}

.error-copy {
    color: #c53434;
    background: #fff1f1;
    border: 1px solid #f1c9c9;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 0.85rem;
    display: none;
    margin: -4px 0 0;
}

.login-hero-placeholder {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.82) 100%);
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@keyframes loginHeroReveal {
    0% {
        opacity: 0;
        transform: scale(1.08) translate3d(0, 0, 0);
        filter: saturate(0.98) contrast(0.98) brightness(0.92) blur(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1.045);
        filter: saturate(1.02) contrast(1.02) brightness(0.96) blur(0);
    }
}

@media (max-width: 1080px) {
    .login-stage {
        grid-template-columns: 1fr;
        width: min(560px, calc(100vw - 28px));
        height: auto;
        min-height: 0;
    }

    .login-hero {
        order: -1;
        min-height: 220px;
    }

    .login-hero-media {
        transform: scale(1.03);
    }
}

@media (max-width: 640px) {
    .login-shell {
        padding: 14px;
    }

    .login-card,
    .login-hero {
        padding: 28px 22px;
    }
}

/* Topbar */
.mac-topbar {
    height: 76px;
    background: var(--mac-topbar);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    color: var(--mac-text);
    z-index: 100;
}

.mac-controls {
    display: flex;
    gap: 10px;
    min-width: 86px;
}

.mac-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #444;
}

.mac-dot.close {
    background: #ff5f56;
}

.mac-dot.min {
    background: #ffbd2e;
}

.mac-dot.max {
    background: #27c93f;
}

.mac-title {
    font-weight: 700;
    font-size: 1.14rem;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    position: static;
    transform: none;
    min-width: 0;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mac-title > span:first-child {
    display: none;
}

.mac-title-label {
    color: #16324f;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mac-title-search {
    background: rgba(15, 23, 42, 0.04);
    border-radius: 12px;
    padding: 0 16px;
    height: 44px;
    font-size: 0.96rem;
    color: var(--app-text);
    border: 1px solid rgba(15, 23, 42, 0.08);
    width: min(540px, 100%);
    text-align: left;
    outline: none;
}

.mac-title-search::placeholder {
    color: rgba(15, 23, 42, 0.38);
}

.mac-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 200px;
    justify-content: flex-end;
}

.mac-actions-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--mac-muted);
    margin-left: auto;
    font-size: 0.96rem;
}

.theme-switch-shell {
    position: relative;
}

.theme-switch-trigger {
    width: 82px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,253,0.94)),
        linear-gradient(135deg, rgba(15,118,255,0.04), rgba(255,186,74,0.04));
    color: var(--mac-text);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.74);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.theme-switch-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.82);
    filter: saturate(1.04);
}

.theme-switch-track {
    position: relative;
    width: 66px;
    height: 30px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 205, 92, 0.26), rgba(95, 161, 255, 0.2)),
        linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.42),
        inset 0 -1px 3px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

body[data-theme="dark"] .theme-switch-trigger {
    border-color: rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(17, 29, 46, 0.96), rgba(12, 22, 36, 0.96));
    box-shadow: 0 18px 34px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .theme-switch-track {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.18), rgba(56, 189, 248, 0.14));
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.04), inset 0 -1px 3px rgba(2, 8, 20, 0.24);
}

.theme-switch-sun,
.theme-switch-moon {
    position: relative;
    z-index: 1;
    font-size: 0.84rem;
    line-height: 1;
    pointer-events: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.theme-switch-sun {
    color: #c97a00;
    text-shadow: 0 0 12px rgba(255, 187, 0, 0.18);
}

.theme-switch-moon {
    color: #355d9b;
    text-shadow: 0 0 12px rgba(72, 114, 188, 0.16);
}

.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,0.96), rgba(255,255,255,0.72) 42%, transparent 44%),
        linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.84);
    transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

body[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(36px);
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.24), rgba(255,255,255,0.06) 44%, transparent 46%),
        linear-gradient(180deg, #dfe9ff 0%, #b7cbf3 100%);
    box-shadow:
        0 10px 22px rgba(2, 8, 20, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

body[data-theme="dark"] .theme-switch-sun {
    opacity: 0.45;
}

body[data-theme="light"] .theme-switch-moon {
    opacity: 0.48;
}

.kpi-tag {
    background: rgba(0, 102, 204, 0.08);
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 102, 204, 0.1);
}

.kpi-tag span {
    color: var(--accent-blue);
}

#refresh-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    color: var(--accent-blue);
    font-weight: 700;
    cursor: pointer;
    font-size: 0;
}

#refresh-all::before {
    content: "↻";
    font-size: 0.95rem;
}

#server-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 28px;
    border-radius: 999px;
    background: rgba(52, 199, 89, 0.12);
    color: #197a3a !important;
    font-size: 0;
    font-weight: 700;
    white-space: nowrap;
}

#server-indicator::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
}

#server-indicator::after {
    content: "En linea";
    font-size: 0.78rem;
}

.mac-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #34c759;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.mac-avatar:hover,
.mac-avatar.active {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(52, 199, 89, 0.28);
}

.profile-menu-shell {
    position: relative;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dbe4ee;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
    z-index: 220;
}

.profile-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 14px;
    border-bottom: 1px solid #e7edf4;
    margin-bottom: 10px;
}

.profile-menu-avatar,
.profile-form-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a6cb4 0%, #34c759 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.profile-menu-avatar.has-image,
.profile-form-avatar.has-image,
.mac-avatar.has-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
    overflow: hidden;
}

.profile-menu-copy,
.profile-form-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-menu-copy strong,
.profile-form-copy strong {
    color: #182535;
    font-size: 0.94rem;
}

.profile-menu-copy span,
.profile-form-copy span {
    color: #708095;
    font-size: 0.82rem;
}

.profile-menu-actions {
    display: grid;
    gap: 6px;
}

.profile-menu-action {
    width: 100%;
    border: 1px solid transparent;
    background: #f8fbfd;
    border-radius: 14px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: grid;
    gap: 3px;
}

.profile-menu-action strong {
    color: #182535;
    font-size: 0.9rem;
}

.profile-menu-action span {
    color: #708095;
    font-size: 0.79rem;
}

.profile-menu-action:hover {
    background: #f1f7fc;
    border-color: #d3e1ef;
}

.profile-menu-action.danger {
    background: #fff6f6;
}

.profile-menu-action.danger strong {
    color: #b63c3c;
}

.profile-form-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid #e2eaf2;
    margin-bottom: 18px;
}

.profile-photo-row {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.profile-photo-row label {
    flex: 1;
}

.inspection-add-hint {
    display: none !important;
}

.search-results {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.12);
    border-radius: 18px;
    overflow: hidden;
    z-index: 120;
}

.search-result-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 14px 16px;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
}

.search-result-item:hover {
    background: rgba(0, 102, 204, 0.05);
}

.search-result-item strong {
    color: var(--app-text);
}

.search-result-item span {
    color: var(--app-muted);
    font-size: 0.82rem;
}

/* ----------------------------------
   2. APP LAUNCHER (HOME)
---------------------------------- */
#view-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 42px 54px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 12%, rgba(18, 118, 255, 0.05), transparent 22%),
        radial-gradient(circle at 88% 16%, rgba(44, 201, 168, 0.05), transparent 20%),
        linear-gradient(180deg, #f8fbfe 0%, #eef3f8 48%, #e9eef5 100%);
    position: relative;
}

#view-home::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.66),
        0 20px 46px rgba(15, 23, 42, 0.035);
    pointer-events: none;
}

.launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 24px 24px;
    width: min(1220px, 100%);
    margin: 18px auto 0;
    position: relative;
    z-index: 1;
}

.module-card {
    border: 1px solid rgba(178, 196, 220, 0.96);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(241,246,252,0.99));
    box-shadow:
        0 16px 30px rgba(23, 38, 63, 0.075),
        0 6px 14px rgba(23, 38, 63, 0.035);
    padding: 20px 16px 18px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: auto;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    border-radius: 26px;
    min-height: 196px;
    overflow: hidden;
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent 44%);
    pointer-events: none;
}

.module-card:hover {
    transform: translateY(-5px);
    filter: none;
    border-color: rgba(112, 138, 176, 0.92);
    box-shadow:
        0 22px 40px rgba(23, 38, 63, 0.11),
        0 8px 18px rgba(23, 38, 63, 0.05);
}

.module-card:focus-visible {
    outline: 3px solid rgba(41, 121, 255, 0.28);
    outline-offset: 3px;
    border-color: rgba(41, 121, 255, 0.64);
}

.module-cobranzas,
.module-cuentas-pagar {
    border-color: rgba(143, 164, 194, 0.98);
    box-shadow:
        0 18px 32px rgba(23, 38, 63, 0.085),
        0 8px 18px rgba(23, 38, 63, 0.045);
}

.module-cobranzas {
    background:
        radial-gradient(circle at top right, rgba(255, 108, 132, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(255,244,246,0.99));
}

.module-cuentas-pagar {
    background:
        radial-gradient(circle at top right, rgba(49, 130, 246, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(240,248,255,0.99));
}

.module-cobranzas:hover,
.module-cuentas-pagar:hover {
    border-color: rgba(78, 103, 145, 0.96);
}

.module-cobranzas .module-copy strong,
.module-cuentas-pagar .module-copy strong {
    color: #0f172a;
}

body[data-theme="dark"] .module-card {
    background: linear-gradient(180deg, rgba(14, 23, 36, 0.98), rgba(10, 18, 29, 0.98));
    border: 1px solid rgba(107, 132, 165, 0.14);
    box-shadow:
        0 18px 34px rgba(2, 8, 20, 0.28),
        0 6px 12px rgba(2, 8, 20, 0.16);
}

body[data-theme="dark"] .module-card::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 42%);
}

body[data-theme="dark"] .module-card:hover {
    filter: none;
    border-color: rgba(130, 153, 183, 0.22);
    box-shadow:
        0 22px 40px rgba(2, 8, 20, 0.32),
        0 8px 16px rgba(2, 8, 20, 0.2);
}

body[data-theme="dark"] .mac-topbar {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 18px 36px rgba(2, 8, 20, 0.18);
}

body[data-theme="dark"] .mac-title-label,
body[data-theme="dark"] .profile-menu-copy strong,
body[data-theme="dark"] .profile-form-copy strong,
body[data-theme="dark"] .theme-option-copy strong {
    color: var(--app-text);
}

body[data-theme="dark"] .mac-title-search,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background: rgba(12, 23, 38, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
    color: var(--app-text);
}

body[data-theme="dark"] .mac-title-search::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: rgba(196, 208, 224, 0.42);
}

body[data-theme="dark"] .profile-menu,
body[data-theme="dark"] .search-results,
body[data-theme="dark"] .theme-switch-menu,
body[data-theme="dark"] .lookup-suggestions {
    background: rgba(11, 21, 35, 0.96);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 26px 54px rgba(2, 8, 20, 0.32);
}

body[data-theme="dark"] .lookup-item {
    background: rgba(11, 21, 35, 0.96);
    color: #e7eefb;
}

body[data-theme="dark"] .lookup-item + .lookup-item {
    border-top-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .lookup-item:hover {
    background: rgba(20, 33, 52, 0.98);
}

body[data-theme="dark"] .lookup-item strong {
    color: #f8fbff;
}

body[data-theme="dark"] .lookup-item span {
    color: rgba(196, 208, 224, 0.78);
}

body[data-theme="dark"] .profile-menu-action,
body[data-theme="dark"] .theme-switch-option,
body[data-theme="dark"] .profile-form-preview {
    background: rgba(17, 29, 46, 0.92);
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .profile-menu-action:hover,
body[data-theme="dark"] .theme-switch-option:hover {
    background: rgba(22, 37, 58, 0.96);
}

body[data-theme="dark"] #view-home {
    background:
        radial-gradient(circle at top right, rgba(61, 106, 176, 0.18), transparent 28%),
        linear-gradient(180deg, #0a1422 0%, #0b1726 100%);
}

body[data-theme="dark"] .module-card,
body[data-theme="dark"] .document-card,
body[data-theme="dark"] .record-item,
body[data-theme="dark"] .vehicle-card,
body[data-theme="dark"] .kanban-card {
    background: linear-gradient(180deg, rgba(14, 25, 40, 0.96), rgba(12, 22, 36, 0.96));
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 24px 44px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .panel,
body[data-theme="dark"] .app-header {
    background: transparent;
}

body[data-theme="dark"] .panel {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(12, 23, 38, 0.96), rgba(10, 20, 33, 0.96));
}

body[data-theme="dark"] .inspection-modal .app-header,
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .inspection-modal-content,
body[data-theme="dark"] .modal-content {
    background: linear-gradient(180deg, rgba(10, 20, 33, 0.98), rgba(8, 16, 28, 0.98));
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .inspection-modal .app-actions .btn.secondary {
    background: rgba(17, 29, 46, 0.96);
    border-color: rgba(148, 163, 184, 0.14);
    color: var(--app-text);
}

body[data-theme="dark"] .inspection-modal .app-actions .inspection-cancel-btn {
    background: rgba(84, 25, 37, 0.92);
    border-color: rgba(255, 112, 148, 0.2);
    color: #ffc1d2;
}

body[data-theme="dark"] .modal-overlay {
    background: rgba(3, 8, 16, 0.72);
    backdrop-filter: blur(12px);
}

body[data-theme="dark"] .modal-content {
    box-shadow:
        0 32px 64px rgba(2, 8, 20, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-footer {
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .modal-close {
    color: #8ea4bf;
}

body[data-theme="dark"] .modal-close:hover {
    background: rgba(148, 163, 184, 0.08);
    color: #d9e8ff;
}

body[data-theme="dark"] .module-copy strong,
body[data-theme="dark"] .document-card-code,
body[data-theme="dark"] .panel-header h2,
body[data-theme="dark"] .panel-header h3,
body[data-theme="dark"] .app-header-title h1,
body[data-theme="dark"] .record-title {
    color: var(--app-text);
}

body[data-theme="dark"] .module-copy span,
body[data-theme="dark"] .record-muted,
body[data-theme="dark"] .panel-header p,
body[data-theme="dark"] .profile-menu-copy span,
body[data-theme="dark"] .profile-form-copy span {
    color: var(--app-muted);
}

body[data-theme="dark"] .panel strong,
body[data-theme="dark"] .panel h1,
body[data-theme="dark"] .panel h2,
body[data-theme="dark"] .panel h3,
body[data-theme="dark"] .panel h4,
body[data-theme="dark"] .panel h5,
body[data-theme="dark"] .panel label,
body[data-theme="dark"] .panel span,
body[data-theme="dark"] .panel p,
body[data-theme="dark"] .panel li,
body[data-theme="dark"] .panel dt,
body[data-theme="dark"] .panel dd,
body[data-theme="dark"] .modal-content strong,
body[data-theme="dark"] .modal-content h1,
body[data-theme="dark"] .modal-content h2,
body[data-theme="dark"] .modal-content h3,
body[data-theme="dark"] .modal-content h4,
body[data-theme="dark"] .modal-content h5,
body[data-theme="dark"] .modal-content label,
body[data-theme="dark"] .modal-content span,
body[data-theme="dark"] .modal-content p,
body[data-theme="dark"] .modal-content li,
body[data-theme="dark"] .modal-content dt,
body[data-theme="dark"] .modal-content dd,
body[data-theme="dark"] .bot-drawer strong,
body[data-theme="dark"] .bot-drawer h1,
body[data-theme="dark"] .bot-drawer h2,
body[data-theme="dark"] .bot-drawer h3,
body[data-theme="dark"] .bot-drawer h4,
body[data-theme="dark"] .bot-drawer label,
body[data-theme="dark"] .bot-drawer span,
body[data-theme="dark"] .bot-drawer p {
    color: inherit;
}

body[data-theme="dark"] .btn.secondary,
body[data-theme="dark"] .btn.ghost {
    background: rgba(14, 25, 40, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
    color: var(--app-text);
}

body[data-theme="dark"] .btn.secondary:hover,
body[data-theme="dark"] .btn.ghost:hover {
    background: rgba(20, 34, 54, 0.96);
}

body[data-theme="dark"] .document-card-meta div,
body[data-theme="dark"] .document-summary-card,
body[data-theme="dark"] .fuel-control {
    background: rgba(17, 29, 46, 0.92);
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .document-tab-card {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(13, 24, 39, 0.98) 0%, rgba(12, 22, 36, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 18px 38px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .document-tab-card strong,
body[data-theme="dark"] .document-summary-card strong,
body[data-theme="dark"] .document-card-meta dd,
body[data-theme="dark"] .document-card-type {
    color: var(--app-text);
}

body[data-theme="dark"] .document-card-type {
    background: rgba(26, 45, 72, 0.92);
    border: 1px solid rgba(116, 169, 255, 0.16);
    color: #b7d7ff;
}

body[data-theme="dark"] .document-tab-card b {
    color: #d9e8ff;
}

body[data-theme="dark"] .document-tab-card.active {
    border-color: rgba(116, 169, 255, 0.26);
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.2), transparent 44%),
        linear-gradient(180deg, rgba(15, 28, 45, 0.98) 0%, rgba(13, 24, 39, 0.98) 100%);
    box-shadow: 0 24px 46px rgba(2, 8, 20, 0.28);
}

body[data-theme="dark"] .document-tab-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
}

body[data-theme="dark"] .document-card-meta dt,
body[data-theme="dark"] .document-card-empty p,
body[data-theme="dark"] .document-summary-card span {
    color: var(--app-muted);
}

body[data-theme="dark"] .app-header {
    border-bottom-color: rgba(148, 163, 184, 0.1);
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.08);
}

body[data-theme="dark"] .app-tab {
    color: rgba(191, 205, 224, 0.68);
}

body[data-theme="dark"] .app-tab:hover {
    color: var(--app-text);
}

body[data-theme="dark"] .app-tab.active {
    color: #8fc2ff;
}

body[data-theme="dark"] .app-tab.active::after {
    background: linear-gradient(90deg, #5da9ff, #8bd3ff);
}

body[data-theme="dark"] .data-table th,
body[data-theme="dark"] .data-table td {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(93, 169, 255, 0.06);
}

body[data-theme="dark"] .table-wrapper-premium {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(17, 29, 46, 0.96), rgba(12, 23, 39, 0.94));
}

body[data-theme="dark"] .data-table-premium th,
body[data-theme="dark"] .data-table-premium td {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .data-table-premium th {
    background: rgba(30, 41, 59, 0.6);
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .data-table-premium tbody tr:hover {
    background: rgba(93, 169, 255, 0.08);
}

body[data-theme="dark"] .data-table-premium tbody tr:last-child td {
    border-bottom: none;
}

body[data-theme="dark"] .document-card::before {
    background: linear-gradient(90deg, #5da9ff, #6ee7f9);
}

body[data-theme="dark"] .module-mark {
    background: linear-gradient(180deg, #1d2b3d, #121c2b);
    box-shadow:
        0 14px 24px rgba(2, 8, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .module-mark::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 42%, rgba(0,0,0,0.1));
}

body[data-theme="dark"] .module-glyph path,
body[data-theme="dark"] .module-glyph circle {
    stroke: #f2f7ff;
}

body[data-theme="dark"] .module-kpi {
    color: #e6edf7;
    background: rgba(20, 31, 48, 0.96);
    border-color: rgba(102, 124, 154, 0.32);
    box-shadow: 0 10px 18px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .mac-avatar,
body[data-theme="dark"] .profile-menu-avatar,
body[data-theme="dark"] .profile-form-avatar {
    box-shadow: 0 12px 24px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .reception-chip {
    background: rgba(18, 31, 48, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
    color: #8ea4bf;
}

body[data-theme="dark"] .reception-chip.done {
    background: rgba(24, 67, 46, 0.92);
    border-color: rgba(82, 179, 120, 0.34);
    color: #b6f1cb;
}

body[data-theme="dark"] .photo-dropzone,
body[data-theme="dark"] .photo-thumb,
body[data-theme="dark"] .document-card-empty {
    background: rgba(14, 25, 40, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
}

body[data-theme="dark"] .kanban-column {
    background: rgba(10, 20, 33, 0.72);
    border-color: rgba(148, 163, 184, 0.1);
}

body[data-theme="dark"] .lookup-suggestion-item:hover,
body[data-theme="dark"] .search-result-item:hover {
    background: rgba(93, 169, 255, 0.08);
}

body[data-theme="dark"] .search-result-item strong,
body[data-theme="dark"] .lookup-suggestion-item strong,
body[data-theme="dark"] .metric-card .value,
body[data-theme="dark"] .inspection-meta-strip strong,
body[data-theme="dark"] .inspection-empty-state strong,
body[data-theme="dark"] .inspection-issue-head strong,
body[data-theme="dark"] .inspection-type-chip,
body[data-theme="dark"] .quote-summary-line strong,
body[data-theme="dark"] .watermark-preview-empty strong,
body[data-theme="dark"] .timeline-step,
body[data-theme="dark"] .pending-label {
    color: var(--app-text);
}

body[data-theme="dark"] .search-result-item span,
body[data-theme="dark"] .lookup-suggestion-item span,
body[data-theme="dark"] .metric-card h4,
body[data-theme="dark"] .inspection-field > span,
body[data-theme="dark"] .inspection-meta-strip span,
body[data-theme="dark"] .inspection-empty-state p,
body[data-theme="dark"] .inspection-photo-drop span,
body[data-theme="dark"] .inspection-photo-empty,
body[data-theme="dark"] .watermark-preview-empty,
body[data-theme="dark"] .quote-summary-line span,
body[data-theme="dark"] .text-muted,
body[data-theme="dark"] small {
    color: var(--app-muted);
}

body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .inspection-visual,
body[data-theme="dark"] .inspection-meta-strip,
body[data-theme="dark"] .inspection-empty-state,
body[data-theme="dark"] .inspection-issue-card,
body[data-theme="dark"] .inspection-type-chip,
body[data-theme="dark"] .inspection-photo-drop,
body[data-theme="dark"] .inspection-photo-preview,
body[data-theme="dark"] .inspection-photo-empty,
body[data-theme="dark"] .watermark-preview-empty,
body[data-theme="dark"] .quote-summary-card,
body[data-theme="dark"] .timeline-step {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.06), transparent 38%),
        linear-gradient(180deg, rgba(14, 25, 40, 0.96), rgba(11, 21, 35, 0.96));
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .inspection-visual,
body[data-theme="dark"] .inspection-photo-preview {
    box-shadow: 0 20px 40px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .inspection-diagram-image {
    mix-blend-mode: screen;
    filter: contrast(1.02) brightness(0.94);
}

body[data-theme="dark"] .inspection-photo-drop:hover,
body[data-theme="dark"] .inspection-photo-drop.dragging,
body[data-theme="dark"] .timeline-step.active,
body[data-theme="dark"] .timeline-step.current {
    border-color: rgba(116, 169, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.12), transparent 40%),
        linear-gradient(180deg, rgba(18, 32, 52, 0.98), rgba(14, 25, 40, 0.98));
}

body[data-theme="dark"] .directory-view-switch,
body[data-theme="dark"] .directory-table-shell,
body[data-theme="dark"] .entity-card,
body[data-theme="dark"] .entity-stat,
body[data-theme="dark"] .entity-profile-section,
body[data-theme="dark"] .entity-timeline-item {
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .directory-view-switch,
body[data-theme="dark"] .directory-table-shell,
body[data-theme="dark"] .entity-profile-main {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.06), transparent 38%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .directory-view-btn {
    color: var(--app-muted);
}

body[data-theme="dark"] .directory-view-btn.active,
body[data-theme="dark"] .entity-card,
body[data-theme="dark"] .entity-stat,
body[data-theme="dark"] .entity-profile-section,
body[data-theme="dark"] .entity-timeline-item {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(14, 25, 40, 0.97), rgba(11, 21, 35, 0.97));
    color: var(--app-text);
}

body[data-theme="dark"] .entity-profile-section-premium {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(16, 28, 45, 0.99), rgba(12, 22, 36, 0.99));
}

body[data-theme="dark"] .entity-profile-section {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(16, 28, 45, 0.96), rgba(12, 22, 36, 0.96));
    box-shadow:
        0 20px 38px rgba(2, 8, 20, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

body[data-theme="dark"] #view-entity-profile {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.1), transparent 22%),
        linear-gradient(180deg, #0b1320 0%, #0a1624 100%);
}

body[data-theme="dark"] .entity-workspace-shell {
    box-shadow: 0 30px 64px rgba(2, 8, 20, 0.34);
}

body[data-theme="dark"] .entity-card-copy strong,
body[data-theme="dark"] .entity-stat strong,
body[data-theme="dark"] .entity-profile-section-head strong,
body[data-theme="dark"] .entity-timeline-item strong {
    color: var(--app-text);
}

body[data-theme="dark"] .entity-card-copy p,
body[data-theme="dark"] .entity-stat span,
body[data-theme="dark"] .entity-profile-section-head span,
body[data-theme="dark"] .entity-timeline-item span {
    color: var(--app-muted);
}

body[data-theme="dark"] .entity-card-code {
    background: rgba(17, 29, 46, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
    color: #cfe0ff;
}

body[data-theme="dark"] .entity-card-badge,
body[data-theme="dark"] .entity-pill {
    background: rgba(26, 45, 72, 0.92);
    border-color: rgba(116, 169, 255, 0.16);
    color: #b7d7ff;
}

body[data-theme="dark"] .entity-profile-back {
    background: linear-gradient(180deg, rgba(16, 28, 45, 0.98), rgba(12, 22, 36, 0.98));
    border-color: rgba(148, 163, 184, 0.14);
    color: #e7f0ff;
    box-shadow: 0 16px 30px rgba(2, 8, 20, 0.24);
}

body[data-theme="dark"] .entity-profile-back span {
    background: rgba(26, 45, 72, 0.92);
    color: #b7d7ff;
}

body[data-theme="dark"] .directory-table tbody tr:hover,
body[data-theme="dark"] .entity-timeline-item:hover {
    background: rgba(93, 169, 255, 0.08);
}

body[data-theme="dark"] .entity-vehicle-photo-preview {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(14, 25, 40, 0.97), rgba(11, 21, 35, 0.97));
}

body[data-theme="dark"] .entity-photo-empty {
    color: var(--app-muted);
}

body[data-theme="dark"] .entity-profile-aside {
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}

body[data-theme="dark"] select option {
    background: #0f1b2d;
    color: #eef4ff;
}

body[data-theme="dark"] .quote-card {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(14, 25, 40, 0.97), rgba(12, 22, 36, 0.97));
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 22px 42px rgba(2, 8, 20, 0.24);
}

body[data-theme="dark"] .quote-origin {
    background: rgba(26, 45, 72, 0.9);
    color: #b7d7ff;
}

body[data-theme="dark"] .quote-origin.additional {
    background: rgba(78, 45, 16, 0.92);
    color: #ffd099;
}

body[data-theme="dark"] .quote-status-editor {
    background: rgba(17, 29, 46, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
}

body[data-theme="dark"] .quote-status-editor.done {
    background: rgba(24, 67, 46, 0.92);
    border-color: rgba(82, 179, 120, 0.26);
    color: #b6f1cb;
}

body[data-theme="dark"] .quote-status-editor.danger {
    background: rgba(84, 25, 37, 0.92);
    border-color: rgba(255, 112, 148, 0.22);
    color: #ffc1d2;
}

body[data-theme="dark"] .quote-status-editor.info {
    background: rgba(26, 45, 72, 0.92);
    border-color: rgba(116, 169, 255, 0.18);
    color: #b7d7ff;
}

body[data-theme="dark"] .quote-status-editor.pending,
body[data-theme="dark"] .quote-status-editor.progress {
    background: rgba(76, 57, 19, 0.92);
    border-color: rgba(255, 196, 107, 0.22);
    color: #ffd899;
}

body[data-theme="dark"] .quote-note,
body[data-theme="dark"] .quote-amount-block strong {
    color: var(--app-text);
}

body[data-theme="dark"] .bot-drawer {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.09), transparent 28%),
        linear-gradient(180deg, rgba(10, 20, 33, 0.99), rgba(8, 16, 28, 0.99));
    border-left-color: rgba(148, 163, 184, 0.12);
    box-shadow: -18px 0 46px rgba(2, 8, 20, 0.34);
}

body[data-theme="dark"] .bot-header {
    background: rgba(12, 23, 38, 0.96);
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .bot-header h3 {
    color: #9cc9ff;
}

body[data-theme="dark"] .bot-context {
    background: rgba(17, 29, 46, 0.92);
    color: #95a6bd;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .bot-msg.ai {
    background: linear-gradient(180deg, rgba(17, 29, 46, 0.96), rgba(14, 24, 39, 0.96));
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--app-text);
}

body[data-theme="dark"] .bot-msg.user {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.26);
}

body[data-theme="dark"] .bot-input {
    border-top-color: rgba(148, 163, 184, 0.12);
    background: rgba(10, 20, 33, 0.98);
}

body[data-theme="dark"] .bot-fab {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    box-shadow: 0 20px 36px rgba(37, 99, 235, 0.3);
}

body[data-theme="dark"] .badge {
    background: rgba(17, 29, 46, 0.9);
    border-color: rgba(148, 163, 184, 0.14);
    color: #d9e8ff;
}

body[data-theme="dark"] .badge.done {
    background: rgba(24, 67, 46, 0.92);
    border-color: rgba(82, 179, 120, 0.24);
    color: #b6f1cb;
}

body[data-theme="dark"] .badge.danger {
    background: rgba(84, 25, 37, 0.92);
    border-color: rgba(255, 112, 148, 0.2);
    color: #ffc1d2;
}

body[data-theme="dark"] .badge.progress,
body[data-theme="dark"] .badge.pending,
body[data-theme="dark"] .badge.warning {
    background: rgba(76, 57, 19, 0.92);
    border-color: rgba(255, 196, 107, 0.22);
    color: #ffd899;
}

body[data-theme="dark"] .badge.info {
    background: rgba(26, 45, 72, 0.92);
    border-color: rgba(116, 169, 255, 0.16);
    color: #b7d7ff;
}

.module-card-top {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.module-mark {
    width: 94px;
    height: 94px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #f8fbff, #e8eff7);
    box-shadow:
        0 12px 22px rgba(43, 59, 83, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(191, 205, 223, 0.82);
    position: relative;
    overflow: hidden;
}

.module-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%, rgba(15,23,42,0.08));
    pointer-events: none;
}

.module-glyph {
    width: 52px;
    height: 52px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

.module-glyph path,
.module-glyph circle {
    fill: none;
    stroke: var(--glyph-color, #ffffff);
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Module color backgrounds (light) --- */
.module-recepcion .module-mark    { --glyph-color:#ffffff; background: linear-gradient(135deg, #2bb6f4 0%, #1198e2 46%, #0c6db6 100%) !important; border-color: rgba(2,132,199,0.34) !important; box-shadow: 0 14px 24px rgba(14,165,233,0.22) !important; }
.module-taller .module-mark       { --glyph-color:#ffffff; background: linear-gradient(135deg, #f89a41 0%, #ef7b1a 48%, #c95a0f 100%) !important; border-color: rgba(249,115,22,0.34) !important; box-shadow: 0 14px 24px rgba(249,115,22,0.22) !important; }
.module-cotizaciones .module-mark { --glyph-color:#ffffff; background: linear-gradient(135deg, #31cf94 0%, #17b77f 48%, #0a8d60 100%) !important; border-color: rgba(16,185,129,0.34) !important; box-shadow: 0 14px 24px rgba(16,185,129,0.2) !important; }
.module-documentos .module-mark   { --glyph-color:#ffffff; background: linear-gradient(135deg, #26ccb9 0%, #17b19f 48%, #118376 100%) !important; border-color: rgba(20,184,166,0.34) !important; box-shadow: 0 14px 24px rgba(20,184,166,0.2) !important; }
.module-ventas .module-mark       { --glyph-color:#ffffff; background: linear-gradient(135deg, #29cdea 0%, #0fb1cb 48%, #0d8fa7 100%) !important; border-color: rgba(6,182,212,0.34) !important; box-shadow: 0 14px 24px rgba(6,182,212,0.2) !important; }
.module-cobranzas .module-mark    { --glyph-color:#ffffff; background: linear-gradient(135deg, #5d9ff6 0%, #367de8 48%, #215fd1 100%) !important; border-color: rgba(59,130,246,0.42) !important; box-shadow: 0 18px 30px rgba(59,130,246,0.28) !important; }
.module-cuentas-pagar .module-mark{ --glyph-color:#ffffff; background: linear-gradient(135deg, #fb6a85 0%, #ef4a68 48%, #d9224b 100%) !important; border-color: rgba(244,63,94,0.44) !important; box-shadow: 0 18px 30px rgba(244,63,94,0.28) !important; }
.module-vehiculos .module-mark    { --glyph-color:#ffffff; background: linear-gradient(135deg, #29cdea 0%, #0fb1cb 48%, #0d8fa7 100%) !important; border-color: rgba(6,182,212,0.34) !important; box-shadow: 0 14px 24px rgba(6,182,212,0.2) !important; }
.module-clientes .module-mark     { --glyph-color:#ffffff; background: linear-gradient(135deg, #26ccb9 0%, #17b19f 48%, #118376 100%) !important; border-color: rgba(20,184,166,0.34) !important; box-shadow: 0 14px 24px rgba(20,184,166,0.2) !important; }
.module-inventario .module-mark   { --glyph-color:#ffffff; background: linear-gradient(135deg, #f4bc2e 0%, #e59d12 48%, #c4760d 100%) !important; border-color: rgba(245,158,11,0.34) !important; box-shadow: 0 14px 24px rgba(245,158,11,0.2) !important; }
.module-colaboradores .module-mark{ --glyph-color:#ffffff; background: linear-gradient(135deg, #bb80f5 0%, #9f57ec 48%, #7d2fd1 100%) !important; border-color: rgba(168,85,247,0.34) !important; box-shadow: 0 14px 24px rgba(168,85,247,0.2) !important; }
.module-asistencia .module-mark   { --glyph-color:#ffffff; background: linear-gradient(135deg, #4ad777 0%, #28bf59 48%, #18913f 100%) !important; border-color: rgba(34,197,94,0.34) !important; box-shadow: 0 14px 24px rgba(34,197,94,0.2) !important; }
.module-agenda .module-mark       { --glyph-color:#ffffff; background: linear-gradient(135deg, #fb6f88 0%, #e84a69 42%, #c4244c 100%) !important; border-color: rgba(244,63,94,0.34) !important; box-shadow: 0 14px 24px rgba(244,63,94,0.2) !important; }
.module-reportes .module-mark     { --glyph-color:#ffffff; background: linear-gradient(135deg, #5d9ff6 0%, #367de8 48%, #215fd1 100%) !important; border-color: rgba(59,130,246,0.34) !important; box-shadow: 0 14px 24px rgba(59,130,246,0.2) !important; }
.module-config .module-mark       { --glyph-color:#ffffff; background: linear-gradient(135deg, #b9c4d4 0%, #90a0b8 48%, #64748b 100%) !important; border-color: rgba(100,116,139,0.34) !important; box-shadow: 0 14px 24px rgba(100,116,139,0.18) !important; }

/* --- Module color backgrounds (dark) --- glassmorphism style */
body[data-theme="dark"] .module-recepcion .module-mark    { --glyph-color:#e0f2fe; background: radial-gradient(circle at top right, rgba(56,189,248,0.55), transparent 58%), linear-gradient(180deg, rgba(14,39,69,0.98), rgba(8,20,34,0.98)) !important; border-color: rgba(56,189,248,0.52) !important; box-shadow: 0 18px 32px rgba(14,165,233,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-taller .module-mark       { --glyph-color:#fff7ed; background: radial-gradient(circle at top right, rgba(251,146,60,0.58), transparent 58%), linear-gradient(180deg, rgba(63,28,7,0.98), rgba(22,13,8,0.98)) !important; border-color: rgba(251,146,60,0.52) !important; box-shadow: 0 18px 32px rgba(249,115,22,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-cotizaciones .module-mark { --glyph-color:#ecfdf5; background: radial-gradient(circle at top right, rgba(52,211,153,0.56), transparent 58%), linear-gradient(180deg, rgba(6,54,42,0.98), rgba(6,25,21,0.98)) !important; border-color: rgba(52,211,153,0.50) !important; box-shadow: 0 18px 32px rgba(16,185,129,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-documentos .module-mark   { --glyph-color:#f0fdfa; background: radial-gradient(circle at top right, rgba(45,212,191,0.56), transparent 58%), linear-gradient(180deg, rgba(8,60,55,0.98), rgba(7,24,23,0.98)) !important; border-color: rgba(45,212,191,0.50) !important; box-shadow: 0 18px 32px rgba(20,184,166,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-ventas .module-mark       { --glyph-color:#ecfeff; background: radial-gradient(circle at top right, rgba(34,211,238,0.56), transparent 58%), linear-gradient(180deg, rgba(7,56,69,0.98), rgba(7,22,28,0.98)) !important; border-color: rgba(34,211,238,0.50) !important; box-shadow: 0 18px 32px rgba(6,182,212,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-cobranzas .module-mark    { --glyph-color:#eff6ff; background: radial-gradient(circle at top right, rgba(93,159,246,0.56), transparent 58%), linear-gradient(180deg, rgba(17,43,96,0.98), rgba(8,18,46,0.98)) !important; border-color: rgba(93,159,246,0.50) !important; box-shadow: 0 20px 34px rgba(59,130,246,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-cuentas-pagar .module-mark{ --glyph-color:#fff1f2; background: radial-gradient(circle at top right, rgba(251,113,133,0.58), transparent 58%), linear-gradient(180deg, rgba(89,16,44,0.98), rgba(35,10,22,0.98)) !important; border-color: rgba(251,113,133,0.52) !important; box-shadow: 0 20px 34px rgba(244,63,94,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-vehiculos .module-mark    { --glyph-color:#ecfeff; background: radial-gradient(circle at top right, rgba(34,211,238,0.56), transparent 58%), linear-gradient(180deg, rgba(7,56,69,0.98), rgba(7,22,28,0.98)) !important; border-color: rgba(34,211,238,0.50) !important; box-shadow: 0 18px 32px rgba(6,182,212,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-clientes .module-mark     { --glyph-color:#f0fdfa; background: radial-gradient(circle at top right, rgba(45,212,191,0.56), transparent 58%), linear-gradient(180deg, rgba(8,60,55,0.98), rgba(7,24,23,0.98)) !important; border-color: rgba(45,212,191,0.50) !important; box-shadow: 0 18px 32px rgba(20,184,166,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-inventario .module-mark   { --glyph-color:#fffbeb; background: radial-gradient(circle at top right, rgba(251,191,36,0.56), transparent 58%), linear-gradient(180deg, rgba(70,44,7,0.98), rgba(28,19,8,0.98)) !important; border-color: rgba(251,191,36,0.52) !important; box-shadow: 0 18px 32px rgba(245,158,11,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-colaboradores .module-mark{ --glyph-color:#faf5ff; background: radial-gradient(circle at top right, rgba(192,132,252,0.58), transparent 58%), linear-gradient(180deg, rgba(60,20,88,0.98), rgba(22,9,33,0.98)) !important; border-color: rgba(192,132,252,0.50) !important; box-shadow: 0 18px 32px rgba(168,85,247,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-asistencia .module-mark   { --glyph-color:#f0fdf4; background: radial-gradient(circle at top right, rgba(74,222,128,0.56), transparent 58%), linear-gradient(180deg, rgba(10,63,28,0.98), rgba(8,24,14,0.98)) !important; border-color: rgba(74,222,128,0.50) !important; box-shadow: 0 18px 32px rgba(34,197,94,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-agenda .module-mark       { --glyph-color:#fff1f2; background: radial-gradient(circle at top right, rgba(251,113,133,0.58), transparent 58%), linear-gradient(180deg, rgba(90,16,45,0.98), rgba(34,10,18,0.98)) !important; border-color: rgba(251,113,133,0.52) !important; box-shadow: 0 18px 32px rgba(225,29,72,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-reportes .module-mark     { --glyph-color:#eff6ff; background: radial-gradient(circle at top right, rgba(96,165,250,0.58), transparent 58%), linear-gradient(180deg, rgba(18,39,90,0.98), rgba(10,17,36,0.98)) !important; border-color: rgba(96,165,250,0.52) !important; box-shadow: 0 18px 32px rgba(59,130,246,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important; }
body[data-theme="dark"] .module-config .module-mark       { --glyph-color:#f8fafc; background: radial-gradient(circle at top right, rgba(148,163,184,0.50), transparent 58%), linear-gradient(180deg, rgba(30,41,59,0.98), rgba(11,18,29,0.98)) !important; border-color: rgba(148,163,184,0.42) !important; box-shadow: 0 18px 32px rgba(100,116,139,0.22), inset 0 1px 0 rgba(255,255,255,0.10) !important; }

.module-kpi {
    position: absolute;
    top: 4px;
    right: 14px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #36506f;
    background: rgba(248, 251, 255, 0.98);
    box-shadow: 0 8px 14px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(194, 209, 228, 0.95);
}

.module-copy strong {
    display: block;
    font-size: 1.04rem;
    margin-bottom: 0;
    color: #162033;
    font-weight: 800;
    letter-spacing: 0.01em;
    min-height: 0;
    line-height: 1.2;
    display: grid;
    align-items: start;
    text-align: center;
}

.module-copy {
    display: grid;
    gap: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    align-content: start;
    min-height: 48px;
}

.module-copy span,
.module-copy p {
    display: none;
}

body[data-theme="dark"] .module-copy strong {
    color: #f2f6ff;
}

body[data-theme="dark"] .module-copy span,
body[data-theme="dark"] .module-copy p {
    color: rgba(145, 164, 191, 0.72);
    opacity: 1;
}


.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.report-kpi-card {
    min-height: 132px;
    justify-content: center;
}

.report-kpi-card small {
    color: #6b7a90;
    font-size: 0.83rem;
}

.report-overview-grid,
.report-layout-grid {
    margin-top: 20px;
}

.report-panel {
    border-radius: 24px;
    border: 1px solid rgba(106, 122, 150, 0.18);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.06);
}

.report-stack {
    display: grid;
    gap: 12px;
}

.report-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.report-action-card {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(106, 122, 150, 0.16);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(240, 246, 255, 0.92));
    color: #122033;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.report-action-card strong {
    font-size: 0.98rem;
}

.report-action-card span {
    color: #66758d;
    font-size: 0.82rem;
}

.report-action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 102, 204, 0.24);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.report-priority-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(106, 122, 150, 0.14);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.94));
}

.report-priority-item strong {
    display: block;
    font-size: 0.98rem;
}

.report-priority-item p {
    margin: 6px 0 0;
}

.report-priority-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-priority-meta span {
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
    font-weight: 800;
}

.report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.inventory-layout-grid {
    align-items: start;
}

.inventory-purchase-grid,
.inventory-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.inventory-purchase-card,
.inventory-provider-card {
    border: 1px solid rgba(106, 122, 150, 0.16);
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.94));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.inventory-purchase-head,
.inventory-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.inventory-purchase-head strong,
.inventory-provider-head strong {
    font-size: 0.98rem;
}

.inventory-purchase-head span,
.inventory-provider-head span {
    color: #66758d;
    font-size: 0.82rem;
}

.inventory-purchase-copy p {
    margin: 0 0 6px;
    font-weight: 700;
    color: #122033;
}

.inventory-purchase-copy span,
.inventory-provider-meta span {
    color: #66758d;
    font-size: 0.84rem;
}

.inventory-purchase-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(170px, 0.9fr);
    gap: 12px;
    margin-bottom: 14px;
}

.compra-line-item {
    display: grid;
    gap: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    padding: 16px;
}

/* Autocomplete search wrapper */
.compra-repuesto-search-wrap {
    position: relative;
}
.compra-repuesto-autocomplete {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.compra-repuesto-autocomplete:focus {
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}
.compra-repuesto-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 2px;
}
.compra-repuesto-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
}
.compra-repuesto-suggestion:last-child { border-bottom: none; }
.compra-repuesto-suggestion:hover { background: #f0f7ff; }
.compra-repuesto-suggestion strong { font-size: 0.85rem; color: var(--text, #111827); }
.compra-repuesto-suggestion span { font-size: 0.75rem; color: var(--text-muted, #6b7280); }
.compra-repuesto-suggestion small { font-size: 0.7rem; color: var(--text-muted, #6b7280); font-weight: 600; }

.compra-line-head {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: end;
}

.compra-line-head .action-row {
    display: grid;
    grid-template-columns: 96px 140px auto;
    gap: 10px;
}

.inventory-purchase-lines {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.inventory-purchase-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(236, 242, 249, 0.92);
    border: 1px solid rgba(190, 202, 219, 0.8);
}

.inventory-purchase-line strong {
    color: #122033;
    font-size: 0.84rem;
}

.inventory-purchase-line span {
    color: #66758d;
    font-size: 0.8rem;
}

.inventory-provider-meta {
    display: grid;
    gap: 6px;
}

.inventory-provider-total {
    margin-top: 14px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0066cc;
}

.inventory-workspace {
    display: grid;
    gap: 18px;
}

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

@keyframes fadeInList {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#view-inventario .app-tabs {
    display: inline-grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    width: min(950px, 100%);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(238, 245, 255, 0.96));
    border: 1px solid rgba(126, 151, 189, 0.2);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

#view-inventario .app-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #4a5f7a;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#view-inventario .app-tab::after {
    display: none;
}

#view-inventario .app-tab:hover {
    color: #143252;
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(144, 166, 201, 0.26);
    transform: translateY(-1px);
}

#view-inventario .app-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0f6bff 0%, #0a58d6 100%);
    border-color: rgba(15, 107, 255, 0.34);
    box-shadow: 0 16px 28px rgba(15, 107, 255, 0.26);
}

.inventory-hero-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(120, 156, 204, 0.2);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,249,255,0.96));
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}

.inventory-hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.inventory-hero-copy h2 {
    font-size: 1.3rem;
    color: #10233c;
    margin-bottom: 6px;
}

.inventory-hero-copy p {
    color: #66758d;
    max-width: 650px;
}

.inventory-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Hero Search Input */
.inventory-hero-search {
    flex: 1;
    min-width: 280px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(106, 122, 150, 0.16);
    background: white;
    color: var(--app-text);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inventory-hero-search:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.inventory-hero-search::placeholder {
    color: var(--app-muted);
}

.inventory-product-filters {
    flex: 1;
    min-width: 200px;
}

.inventory-product-filters input {
    width: 100%;
    max-width: 320px;
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Botón primario destacado en inventario */
.inventory-hero-actions .app-actions .btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    font-weight: 700;
    padding: 10px 18px;
    gap: 6px;
}

.inventory-hero-actions .app-actions .btn.primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
    transform: translateY(-2px);
}

.inventory-hero-actions .app-actions .btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Botones compactos para header de Proveedores */
#view-inventario .inventory-hero-actions .btn {
    padding: 7px 12px;
    font-size: 0.8rem;
}

#view-inventario .inventory-hero-actions .btn svg {
    width: 14px;
    height: 14px;
}

/* Header compacto para Servicios */
#view-inventario .inventory-hero-card .inventory-hero-actions {
    gap: 6px;
}

#view-inventario .inventory-hero-card .directory-view-switch {
    padding: 4px;
}

#view-inventario .inventory-hero-card .directory-view-btn {
    min-height: 34px;
    padding: 0 12px;
}

#view-inventario .inventory-hero-card .directory-view-btn svg {
    width: 14px;
    height: 14px;
}

/* Panel de servicios más compacto */
#view-inventario .inventory-surface-panel .panel-header {
    margin-bottom: 12px;
}

#view-inventario .inventory-toolbar-cluster {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

#view-inventario .inventory-toolbar-cluster input,
#view-inventario .inventory-toolbar-cluster select {
    padding: 8px 12px;
    min-height: 38px;
}

/* Inventory Toolbar Premium */
#view-inventario .inventory-toolbar-premium {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(106, 122, 150, 0.12);
    background: rgba(248, 251, 255, 0.4);
    border-radius: 16px 16px 0 0;
}

#view-inventario .inventory-toolbar-search {
    flex: 1;
    min-width: 220px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(106, 122, 150, 0.16);
    background: white;
    color: var(--app-text);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#view-inventario .inventory-toolbar-search:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#view-inventario .inventory-toolbar-select {
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(106, 122, 150, 0.16);
    background: white;
    color: var(--app-text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 140px;
}

#view-inventario .inventory-toolbar-select:hover {
    border-color: rgba(37, 99, 235, 0.5);
}

#view-inventario .inventory-toolbar-select:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#view-inventario .inventory-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

#view-inventario .inventory-result-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.08);
    color: rgba(37, 99, 235, 0.9);
    font-size: 0.75rem;
    font-weight: 600;
}

#view-inventario .inventory-products-grid {
    gap: 12px;
}

#view-inventario .inventory-product-shell {
    padding: 12px;
    border-radius: 16px;
    position: relative;
}

#view-inventario .inventory-product-top {
    gap: 10px;
}

#view-inventario .inventory-product-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

#view-inventario .inventory-product-info {
    gap: 4px;
}

#view-inventario .inventory-product-actions {
    gap: 6px;
}

#view-inventario .inventory-product-meta {
    gap: 8px;
    font-size: 0.8rem;
}

#view-inventario .inventory-product-footer {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(106, 122, 150, 0.1);
}

#view-inventario .inventory-product-footer .btn {
    padding: 6px 10px;
    font-size: 0.8rem;
}

/* Dashboard compacto */
#view-inventario .inventory-metrics {
    gap: 12px;
    margin-bottom: 12px !important;
}

#view-inventario .inventory-kpi {
    padding: 14px;
}

#view-inventario .inventory-kpi-extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
}

#view-inventario .inventory-kpi-extra article {
    padding: 12px;
    border-radius: 14px;
    background: rgba(248, 251, 255, 0.6);
    border: 1px solid rgba(120, 156, 204, 0.12);
}

#view-inventario .inventory-chart-container {
    height: 140px;
    padding: 12px 0;
}

#view-inventario .inventory-chart-summary {
    padding: 10px 14px;
    gap: 16px;
}

#view-inventario .inventory-top-list li {
    padding: 8px 12px;
}

#view-inventario .top-rank {
    width: 24px;
    height: 24px;
}

/* Proveedores compacto */
#view-inventario .inventory-provider-category-toolbar {
    padding: 10px 14px;
    gap: 6px;
}

#view-inventario .purchase-filter-tag {
    padding: 6px 10px;
    border-radius: 8px;
}

#view-inventario .inventory-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

#view-inventario .inventory-provider-shell {
    padding: 12px;
    border-radius: 16px;
}

#view-inventario .inventory-provider-shell-head {
    gap: 8px;
    margin-bottom: 8px;
}

#view-inventario .inventory-provider-shell-head strong {
    display: block;
}

#view-inventario .inventory-provider-shell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

#view-inventario .provider-category-badge {
    padding: 2px 6px;
}

#view-inventario .inventory-provider-shell-notes {
    padding: 8px 0;
    margin-bottom: 8px;
}

#view-inventario .inventory-provider-shell-footer {
    padding-top: 8px;
    border-top: 1px solid rgba(106, 122, 150, 0.1);
}

/* Compras compacto */
#view-inventario .inventory-purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

#view-inventario .inventory-purchase-shell {
    padding: 12px;
    border-radius: 16px;
}

#view-inventario .inventory-purchase-shell-head {
    gap: 8px;
    margin-bottom: 8px;
}

#view-inventario .inventory-purchase-shell-head strong {
    display: block;
}

#view-inventario .inventory-purchase-status-badges {
    display: flex;
    gap: 6px;
}

#view-inventario .inventory-purchase-status-badges .badge {
    padding: 3px 7px;
}

#view-inventario .inventory-purchase-shell-copy {
    margin-bottom: 8px;
}

#view-inventario .inventory-purchase-shell-copy strong {
    display: block;
}

#view-inventario .inventory-purchase-lines {
    margin-bottom: 8px;
}

#view-inventario .inventory-purchase-line {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.5);
    margin-bottom: 6px;
}

#view-inventario .inventory-purchase-shell-footer {
    padding-top: 8px;
    border-top: 1px solid rgba(106, 122, 150, 0.1);
    display: flex;
    gap: 8px;
    align-items: center;
}

#view-inventario .inventory-purchase-shell-footer .btn {
    padding: 6px 10px;
}

#view-inventario .purchase-delete-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#view-inventario .inventory-pagination {
    padding: 10px 14px;
    margin-top: 12px;
}

#view-inventario .inventory-pagination .btn {
    padding: 7px 12px;
}

/* Compras toolbar compacto */
#view-inventario .purchase-toolbar-premium {
    padding: 10px 14px;
    gap: 8px;
}

#view-inventario .purchase-toolbar-search {
    padding: 7px 11px;
    min-height: 36px;
}

#view-inventario .purchase-toolbar-select {
    padding: 7px 10px;
    min-height: 36px;
}

#view-inventario .purchase-result-count {
    padding: 4px 8px;
}

#view-inventario .purchase-filters-active {
    padding: 8px 14px;
    gap: 6px;
}

#view-inventario .purchase-filters-active .purchase-filter-tag {
    padding: 4px 8px;
}

#view-inventario .inventory-purchase-shell-footer .btn.primary {
    padding: 6px 10px;
}

#view-inventario .inventory-promise {
    display: none !important;
}

.inventory-product-filters #inventario-search {
    grid-column: 1 / -1;
}

.inventory-image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    border-radius: 18px;
    border: 2px dashed #c7d6e8;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(241, 247, 255, 0.94));
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.inventory-image-dropzone svg {
    color: #66758d;
    opacity: 0.6;
}
.inventory-image-dropzone strong {
    color: #10233c;
    font-size: 1rem;
}
.inventory-image-dropzone p {
    margin: 0;
    color: #66758d;
    font-size: 0.85rem;
}
.inventory-image-dropzone.dragging,
.inventory-image-dropzone:hover,
.inventory-image-dropzone:focus-visible {
    border-color: rgba(15, 118, 255, 0.4);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}
.inventory-image-dropzone.dragging {
    border-color: var(--brand, #2563eb);
    background: rgba(240, 247, 255, 0.98);
}

/* Image Gallery Preview */
.rep-image-gallery {
    margin-top: 16px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 16px;
    background: var(--surface-50, #f9fafb);
}
.gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.rep-image-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.rep-image-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--app-border);
    background: white;
    transition: all 0.15s ease;
}
.rep-image-thumb:hover {
    border-color: var(--brand, #2563eb);
    transform: scale(1.02);
}
.rep-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rep-image-thumb .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rep-image-thumb:hover .remove-btn {
    opacity: 1;
}
.rep-image-thumb .file-size {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Imágenes existentes vs nuevas */
.rep-image-thumb.existing {
    border-color: var(--brand, #2563eb);
}

.rep-image-thumb.existing.es-principal {
    border-color: #10b981;
    border-width: 3px;
}

.rep-image-thumb.existing .image-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rep-image-thumb.existing:hover .image-actions {
    opacity: 1;
}

.image-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.image-action-btn.preview:hover {
    background: #3b82f6;
    color: white;
}

.image-action-btn.delete:hover {
    background: #ef4444;
    color: white;
}

.image-badge {
    position: absolute;
    bottom: 28px;
    left: 4px;
    right: 4px;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

.rep-image-thumb.new .image-actions {
    display: none;
}

/* Gallery actions header */
.gallery-actions {
    display: flex;
    gap: 8px;
}

/* Lightbox para imágenes */
.image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.image-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.image-lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.image-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.image-lightbox-close:hover {
    color: #ef4444;
}

.inventory-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.inventory-overview-card {
    border: 1px solid rgba(106, 122, 150, 0.16);
    border-radius: 20px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(250,252,255,0.98), rgba(244,248,255,0.94));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 6px;
}

.inventory-overview-card span,
.inventory-product-shell-meta span,
.inventory-provider-shell-meta span {
    color: #66758d;
    font-size: 0.82rem;
}

.inventory-provider-shell-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.4);
    margin-top: -4px;
}

.inventory-provider-shell-notes span {
    font-size: 0.78rem;
    color: #4a5f7a;
    line-height: 1.4;
}

.inventory-provider-note {
    font-style: italic;
    opacity: 0.8;
}

.inventory-overview-card strong {
    color: #10233c;
    font-size: 1.18rem;
}

.inventory-overview-card small {
    color: #7a8ca2;
}

.inventory-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
}

.inventory-products-grid .inventory-empty-state-premium,
.inventory-purchase-grid .inventory-empty-state-premium,
.inventory-provider-grid .inventory-empty-state-premium {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
}

.inventory-detail-headerbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.inventory-detail-headercopy {
    display: grid;
    gap: 4px;
}

.inventory-detail-headercopy strong {
    font-size: 1.18rem;
    color: #10233c;
}

.inventory-detail-headercopy span {
    color: #66758d;
}

.inventory-inline-back {
    align-self: center;
}

.inventory-reorder-grid {
    display: grid;
    gap: 12px;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.inventory-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.96));
    border: 1px solid rgba(120, 156, 204, 0.15);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    margin-top: 16px;
}

.inventory-pagination-info span {
    color: #4a5f7a;
    font-size: 0.84rem;
    font-weight: 600;
}

.inventory-pagination-size {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inventory-pagination-label {
    color: #66758d;
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 4px;
}

.inventory-page-size-btn {
    border: 1px solid rgba(106, 122, 150, 0.2);
    background: rgba(255,255,255,0.8);
    color: #4a5f7a;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inventory-page-size-btn:hover {
    background: rgba(15, 107, 255, 0.08);
    border-color: rgba(15, 107, 255, 0.3);
    color: #0f6bff;
}

.inventory-page-size-btn.active {
    background: linear-gradient(135deg, #0f6bff, #0a58d6);
    color: #fff;
    border-color: rgba(15, 107, 255, 0.4);
    box-shadow: 0 4px 12px rgba(15, 107, 255, 0.2);
}

.inventory-pagination-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-page-btn {
    border: 1px solid rgba(106, 122, 150, 0.2);
    background: rgba(255,255,255,0.9);
    color: #4a5f7a;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inventory-page-btn:hover:not(:disabled) {
    background: rgba(15, 107, 255, 0.08);
    border-color: rgba(15, 107, 255, 0.3);
    color: #0f6bff;
}

.inventory-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.inventory-page-indicator {
    color: #66758d;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0 8px;
}

/* ─── Purchase status badges ─────────────────────────────────── */
.inventory-purchase-status-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inventory-purchase-shell-footer {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(190, 202, 219, 0.5);
}

/* ─── Dashboard Chart ────────────────────────────────────────── */
.inventory-chart-panel {
    padding: 20px 22px;
}

.inventory-chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    height: 200px;
    padding: 20px 10px 10px;
    margin: 10px 0 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(236, 242, 249, 0.5), rgba(244, 249, 255, 0.3));
    border: 1px solid rgba(190, 202, 219, 0.3);
}

.inventory-chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    height: 100%;
}

.inventory-chart-bar {
    width: 100%;
    max-width: 64px;
    min-height: 4%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #0f6bff 0%, #0a58d6 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(15, 107, 255, 0.18);
    position: relative;
}

.inventory-chart-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 107, 255, 0.28);
}

.inventory-chart-bar-value {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.inventory-chart-bar-label {
    color: #66758d;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inventory-chart-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(236, 242, 249, 0.6);
    border: 1px solid rgba(190, 202, 219, 0.3);
}

.inventory-chart-summary span {
    color: #4a5f7a;
    font-size: 0.86rem;
}

.inventory-chart-summary strong {
    color: #10233c;
    font-weight: 800;
}

/* ─── Products Grid (referenced) ─────────────────────────────── */

.inventory-reorder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e4ecf6;
    border-radius: 16px;
    background: rgba(251, 253, 255, 0.95);
}

.inventory-reorder-item div:first-child {
    display: grid;
    gap: 4px;
}

.inventory-reorder-item strong {
    color: #10233c;
}

.inventory-reorder-item span {
    color: #66758d;
    font-size: 0.88rem;
}

.inventory-reorder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-product-shell,
.inventory-purchase-shell,
.inventory-provider-shell,
.inventory-surface-panel {
    border: 1px solid rgba(106, 122, 150, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(250,252,255,0.98), rgba(242,247,255,0.94));
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

/* Simplified Product Card */
.inventory-product-shell {
    padding: 12px;
    display: grid;
    gap: 10px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.inventory-product-shell-head {
    display: flex;
    gap: 12px;
    align-items: center;
}
.product-card-code {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.5px;
}
.product-card-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #111827);
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-card-price {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}
.product-card-price strong {
    color: var(--accent-blue, #2563eb);
    font-weight: 700;
}
/* Botón eliminar en esquina superior derecha */
.inventory-product-shell {
    position: relative;
}

.inventory-product-shell-actions-top {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.inventory-product-shell:hover .inventory-product-shell-actions-top {
    opacity: 1;
}

.product-delete-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    background: rgba(254, 242, 242, 0.95);
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-delete-btn:hover {
    background: rgba(254, 226, 226, 1);
    border-color: #dc2626;
    color: #b91c1c;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.2);
}

.product-delete-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* Sell button */
.product-sell-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    padding: 6px 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.product-sell-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
body[data-theme="dark"] .product-sell-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Barcode section in product detail */
.pd-barcode-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--app-border);
}
.pd-barcode-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.collaborator-directory-card {
    cursor: pointer;
}

.inventory-product-shell:hover,
.inventory-purchase-shell:hover,
.inventory-provider-shell:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.1);
    border-color: rgba(80, 115, 168, 0.24);
}

/* Product Detail Modal */
.product-detail-modal-content {
    display: grid;
    gap: 20px;
}
.product-detail-hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: start;
    padding: 16px;
    background: linear-gradient(135deg, rgba(240,246,255,0.9), rgba(230,240,255,0.7));
    border-radius: 18px;
    border: 1px solid rgba(106,122,150,0.12);
}
.product-detail-media {
    width: 160px;
    height: 160px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
    border: 1px solid #d6e1ed;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.product-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    font-weight: 800;
    color: #1c3551;
}
.product-detail-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--app-text);
}
.product-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.product-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.product-detail-section {
    padding: 16px;
    background: linear-gradient(180deg, rgba(250,252,255,0.96), rgba(242,247,255,0.92));
    border-radius: 16px;
    border: 1px solid rgba(106,122,150,0.12);
}
.product-detail-section h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    margin: 0 0 12px 0;
}
.product-detail-list {
    display: grid;
    gap: 8px;
}
.product-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(106,122,150,0.08);
    font-size: 0.88rem;
}
.product-detail-row:last-child {
    border-bottom: none;
}
.product-detail-row span {
    color: var(--app-muted);
}
.product-detail-row strong {
    color: var(--app-text);
    font-weight: 600;
}

.inventory-product-shell:hover,
.inventory-purchase-shell:hover,
.inventory-provider-shell:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.1);
    border-color: rgba(80, 115, 168, 0.24);
}

.inventory-product-shell-head {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.inventory-product-shell-media {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
    border: 1px solid #d6e1ed;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-weight: 800;
    color: #1c3551;
}

.inventory-product-shell-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attendance-welcome-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendance-welcome-media {
    width: 52px;
    height: 52px;
    min-width: 52px;
}

.attendance-welcome-card {
    border: 1px solid rgba(33, 150, 243, 0.18);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

#asistencia-biometrica-result {
    min-height: 0;
}

#modal-asistencia-biometrica .stack-grid > .btn.primary {
    width: 100%;
}

@media (max-width: 980px) {
    body {
        overflow: auto;
        align-items: stretch;
    }

    .os-window {
        min-height: 100vh;
        height: auto;
    }

    .mac-topbar {
        min-height: auto;
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .mac-title {
        width: 100%;
        order: 3;
        justify-content: flex-start;
        padding: 0;
        font-size: 1rem;
    }

    .mac-toolbar {
        width: 100%;
        order: 4;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .mac-search {
        min-width: 0;
        flex: 1 1 220px;
    }

    .module-grid,
    .inventory-products-grid,
    .document-results-grid,
    .document-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    .modal-content,
    .modal-content.entity-profile-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
}

@media (max-width: 760px) {
    .module-grid,
    .inventory-products-grid,
    .document-results-grid,
    .document-card-grid,
    .inventory-provider-grid {
        grid-template-columns: 1fr;
    }

    .form-grid.two,
    .form-grid.three,
    .form-grid.four {
        grid-template-columns: 1fr;
    }

    .app-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .app-actions .btn,
    #modal-asistencia-biometrica .form-grid.two .btn {
        width: 100%;
    }

    .inventory-product-shell-head,
    .inventory-provider-shell-head {
        align-items: flex-start;
        gap: 10px;
    }

    .inventory-product-shell-meta,
    .inventory-provider-shell-meta {
        grid-template-columns: 1fr;
    }

    .attendance-welcome-head {
        align-items: flex-start;
    }

    .attendance-welcome-media,
    .inventory-product-shell-media {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    #modal-asistencia-biometrica .modal-body {
        padding-bottom: 96px;
    }

    .login-stage {
        width: 100%;
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    .login-hero {
        min-height: 34vh;
    }
}

.inventory-product-shell-copy {
    display: grid;
    gap: 4px;
}

.inventory-product-shell-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.inventory-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #d8e4f1;
    background: #f7fbff;
    color: #35506f;
    font-size: 0.76rem;
    font-weight: 700;
}

.inventory-chip.soft {
    background: #f9fbfd;
    color: #66758d;
}

.inventory-product-shell-copy strong {
    color: #10233c;
    font-size: 1rem;
}

.inventory-product-shell-copy span,
.inventory-product-shell-copy small {
    color: #66758d;
}

.inventory-product-detail {
    display: grid;
    gap: 18px;
}

.inventory-product-detail-hero {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.inventory-product-detail-media {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    border: 1px solid #d6e1ed;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-weight: 900;
    color: #1c3551;
}

.inventory-product-detail-media.is-clickable {
    cursor: zoom-in;
}

.inventory-product-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-product-detail-copy {
    display: grid;
    gap: 6px;
}

.inventory-product-detail-copy strong {
    font-size: 1.25rem;
    color: #10233c;
}

.inventory-product-detail-copy span,
.inventory-product-detail-copy small {
    color: #66758d;
}

.inventory-product-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.inventory-inline-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

.inventory-inline-nav span {
    min-width: 60px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.inventory-product-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.inventory-detail-list {
    display: grid;
    gap: 10px;
}

.inventory-detail-list span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid #e4ecf6;
    background: rgba(251, 253, 255, 0.95);
    color: #66758d;
}

.inventory-detail-list strong {
    color: #10233c;
    text-align: right;
}

/* ─── Compatibilidad Panel ─────────────────────────────────────────── */

.compat-panel .panel-header {
    margin-bottom: 12px;
}

.compat-section {
    min-height: 60px;
}

.compat-loading {
    text-align: center;
    padding: 24px;
    color: #70839b;
    font-size: 0.9rem;
}

.compat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.compat-card {
    border-radius: 14px;
    border: 1px solid #e4ecf6;
    background: rgba(251, 253, 255, 0.95);
    padding: 14px 16px;
    display: grid;
    gap: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.compat-card:hover {
    border-color: #c5d5e8;
    box-shadow: 0 2px 8px rgba(16, 35, 60, 0.06);
}

.compat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.compat-card-head strong {
    color: #10233c;
    font-size: 0.95rem;
}

.compat-year {
    display: block;
    color: #66758d;
    font-size: 0.82rem;
    margin-top: 2px;
}

.compat-card-motor {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eef4fb;
    font-size: 0.82rem;
}

.compat-card-motor span {
    color: #70839b;
}

.compat-card-motor strong {
    color: #10233c;
}

.compat-card-notes {
    font-size: 0.82rem;
    color: #66758d;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(238, 244, 251, 0.5);
    line-height: 1.45;
}

.compat-empty-state {
    text-align: center;
    padding: 32px 20px;
    display: grid;
    gap: 6px;
    align-items: center;
}

.compat-empty-icon {
    font-size: 2.5rem;
    opacity: 0.4;
}

.compat-empty-state strong {
    color: #10233c;
    font-size: 1rem;
}

.compat-empty-state p {
    color: #70839b;
    font-size: 0.85rem;
    margin: 0;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #70839b;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-icon:hover {
    background: #fee;
    color: #c0392b;
    border-color: #f5c6cb;
}

.btn-icon.danger:hover {
    background: #fee;
    color: #c0392b;
    border-color: #f5c6cb;
}

.inventory-product-shell-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.inventory-product-shell-stats > div {
    border-radius: 16px;
    border: 1px solid #e1e8f1;
    background: #fbfdff;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.inventory-product-shell-stats span {
    color: #70839b;
    font-size: 0.78rem;
}

.inventory-product-shell-stats strong {
    color: #10233c;
}

.inventory-product-shell-meta {
    display: grid;
    gap: 8px;
}

.inventory-product-shell-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inventory-product-shell-summary > div {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid #e4ecf6;
    border-radius: 14px;
    background: rgba(251, 253, 255, 0.95);
}

.inventory-product-shell-summary span {
    color: #70839b;
    font-size: 0.76rem;
}

.inventory-product-shell-summary strong {
    color: #10233c;
    font-size: 0.9rem;
}

.inventory-product-shell-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inventory-product-shell-notes span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(246, 250, 255, 0.98);
    border: 1px solid #dfe9f5;
    color: #516276;
    font-size: 0.78rem;
}

.inventory-product-shell-meta span,
.inventory-provider-shell-meta span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ecf6;
    border-radius: 14px;
    background: rgba(251, 253, 255, 0.95);
}

.inventory-product-shell-meta strong,
.inventory-provider-shell-meta strong {
    color: #10233c;
}

.inventory-product-shell-actions,
.inventory-purchase-shell-footer,
.inventory-provider-shell-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-surface-panel {
    padding: 22px;
}

.inventory-purchase-shell,
.inventory-provider-shell {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.inventory-purchase-shell-head,
.inventory-provider-shell-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.inventory-purchase-shell-head strong,
.inventory-provider-shell-head strong {
    color: #10233c;
    font-size: 1rem;
}

.inventory-purchase-shell-head span,
.inventory-provider-shell-head span {
    color: #66758d;
    font-size: 0.82rem;
}

.inventory-purchase-shell-copy {
    display: grid;
    gap: 5px;
}

.inventory-purchase-shell-copy strong {
    color: #10233c;
}

.inventory-purchase-shell-copy span {
    color: #66758d;
    font-size: 0.84rem;
}

.inventory-provider-shell-meta {
    display: grid;
    gap: 8px;
}

.inventory-purchase-line {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e4ecf6;
    background: rgba(251, 253, 255, 0.95);
}

.inventory-purchase-shell-footer,
.inventory-provider-shell-footer {
    padding-top: 4px;
    justify-content: flex-end;
}

.inventory-provider-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(0, 102, 204, 0.08);
    border: 1px solid rgba(0, 102, 204, 0.12);
}

body[data-theme="dark"] .report-kpi-card small,
body[data-theme="dark"] .report-action-card span {
    color: #90a1b8;
}

body[data-theme="dark"] .report-panel {
    border-color: rgba(120, 144, 178, 0.16);
    box-shadow: 0 22px 46px rgba(2, 8, 20, 0.24);
}

body[data-theme="dark"] .report-action-card,
body[data-theme="dark"] .report-priority-item {
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.96), rgba(14, 24, 38, 0.92));
    border-color: rgba(120, 144, 178, 0.14);
    color: #e7eefb;
}

body[data-theme="dark"] .report-priority-meta span {
    background: rgba(69, 163, 255, 0.14);
    color: #7ec1ff;
}

body[data-theme="dark"] .inventory-purchase-card,
body[data-theme="dark"] .inventory-provider-card {
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.96), rgba(14, 24, 38, 0.92));
    border-color: rgba(120, 144, 178, 0.14);
    box-shadow: 0 18px 38px rgba(2, 8, 20, 0.24);
}

body[data-theme="dark"] .inventory-hero-card,
body[data-theme="dark"] .inventory-overview-card,
body[data-theme="dark"] .inventory-product-shell,
body[data-theme="dark"] .inventory-purchase-shell,
body[data-theme="dark"] .inventory-provider-shell,
body[data-theme="dark"] .inventory-surface-panel,
body[data-theme="dark"] .inventory-image-dropzone {
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.96), rgba(14, 24, 38, 0.92));
    border-color: rgba(120, 144, 178, 0.14);
    box-shadow: 0 18px 38px rgba(2, 8, 20, 0.24);
}
body[data-theme="dark"] .product-delete-btn {
    background: rgba(127, 29, 29, 0.3);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .product-delete-btn:hover {
    background: rgba(127, 29, 29, 0.5);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}
body[data-theme="dark"] .inventory-image-dropzone.dragging,
body[data-theme="dark"] .inventory-image-dropzone:hover {
    border-color: rgba(96, 165, 250, 0.4);
}

/* Dark mode - Image Gallery */
body[data-theme="dark"] .rep-image-gallery {
    background: #1f2937;
    border-color: #374151;
}
body[data-theme="dark"] .rep-image-thumb {
    background: #374151;
    border-color: #4b5563;
}
body[data-theme="dark"] .rep-image-thumb:hover {
    border-color: #60a5fa;
}

body[data-theme="dark"] .compat-card {
    background: rgba(22, 33, 48, 0.9);
    border-color: rgba(120, 144, 178, 0.15);
}

body[data-theme="dark"] .compat-card:hover {
    border-color: rgba(120, 144, 178, 0.3);
    box-shadow: 0 2px 10px rgba(2, 8, 20, 0.3);
}

body[data-theme="dark"] .compat-card-head strong,
body[data-theme="dark"] .compat-card-motor strong {
    color: #e7eefb;
}

body[data-theme="dark"] .compat-year,
body[data-theme="dark"] .compat-card-notes {
    color: #90a1b8;
}

body[data-theme="dark"] .compat-card-motor {
    background: rgba(30, 45, 65, 0.6);
}

body[data-theme="dark"] .compat-card-notes {
    background: rgba(30, 45, 65, 0.35);
}

body[data-theme="dark"] .compat-empty-state strong {
    color: #e7eefb;
}

body[data-theme="dark"] .compat-empty-state p,
body[data-theme="dark"] .compat-loading {
    color: #90a1b8;
}

body[data-theme="dark"] .btn-icon:hover {
    background: rgba(192, 57, 43, 0.15);
    color: #e74c3c;
    border-color: rgba(192, 57, 43, 0.3);
}

body[data-theme="dark"] .inventory-hero-copy h2,
body[data-theme="dark"] .inventory-overview-card strong,
body[data-theme="dark"] .inventory-image-dropzone strong,
body[data-theme="dark"] .inventory-product-shell-copy strong,
body[data-theme="dark"] .inventory-product-shell-stats strong,
body[data-theme="dark"] .inventory-product-shell-meta strong,
body[data-theme="dark"] .inventory-purchase-shell-head strong,
body[data-theme="dark"] .inventory-purchase-shell-copy strong,
body[data-theme="dark"] .inventory-provider-shell-head strong,
body[data-theme="dark"] .inventory-provider-shell-meta strong {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-hero-copy p,
body[data-theme="dark"] .inventory-overview-card span,
body[data-theme="dark"] .inventory-overview-card small,
body[data-theme="dark"] .inventory-image-dropzone p,
body[data-theme="dark"] .inventory-product-shell-copy span,
body[data-theme="dark"] .inventory-product-shell-copy small,
body[data-theme="dark"] .inventory-product-detail-copy span,
body[data-theme="dark"] .inventory-product-detail-copy small,
body[data-theme="dark"] .inventory-product-shell-meta span,
body[data-theme="dark"] .inventory-product-shell-summary span,
body[data-theme="dark"] .inventory-purchase-shell-head span,
body[data-theme="dark"] .inventory-purchase-shell-copy span,
body[data-theme="dark"] .inventory-provider-shell-head span,
body[data-theme="dark"] .inventory-provider-shell-meta span {
    color: #90a1b8;
}

body[data-theme="dark"] .inventory-hero-search {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 39, 0.6);
    color: var(--app-text);
}

body[data-theme="dark"] .inventory-hero-search:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

body[data-theme="dark"] .inventory-hero-search::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

body[data-theme="dark"] #view-inventario .app-tabs {
    background: linear-gradient(180deg, rgba(17, 25, 39, 0.98), rgba(13, 20, 33, 0.96));
    border-color: rgba(71, 85, 105, 0.46);
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.34);
}

body[data-theme="dark"] #view-inventario .app-tab {
    color: #9fb0c8;
}

body[data-theme="dark"] #view-inventario .app-tab:hover {
    color: #f8fbff;
    background: rgba(27, 39, 58, 0.92);
    border-color: rgba(84, 104, 138, 0.54);
}

body[data-theme="dark"] #view-inventario .app-tab.active {
    color: #f8fbff;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    border-color: rgba(59, 130, 246, 0.44);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.26);
}

body[data-theme="dark"] .inventory-product-shell-media {
    background: linear-gradient(135deg, rgba(28, 44, 66, 0.96), rgba(20, 34, 52, 0.94));
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
}

/* Dark mode: new inventory components */
body[data-theme="dark"] .inventory-pagination {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 20, 35, 0.94));
    border-color: rgba(106, 122, 150, 0.18);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.2);
}

body[data-theme="dark"] .inventory-pagination-info span {
    color: #9fb0c8;
}

body[data-theme="dark"] .inventory-page-size-btn,
body[data-theme="dark"] .inventory-page-btn {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(106, 122, 150, 0.24);
    color: #9fb0c8;
}

body[data-theme="dark"] .inventory-page-size-btn:hover,
body[data-theme="dark"] .inventory-page-btn:hover:not(:disabled) {
    background: rgba(15, 107, 255, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #5da9ff;
}

body[data-theme="dark"] .inventory-page-size-btn.active {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border-color: rgba(59, 130, 246, 0.5);
}

body[data-theme="dark"] .inventory-page-indicator {
    color: #7a8fa6;
}

body[data-theme="dark"] .inventory-chart-container {
    background: linear-gradient(180deg, rgba(20, 34, 52, 0.6), rgba(15, 25, 40, 0.4));
    border-color: rgba(106, 122, 150, 0.18);
}

body[data-theme="dark"] .inventory-chart-bar {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24);
}

body[data-theme="dark"] .inventory-chart-bar:hover {
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.36);
}

body[data-theme="dark"] .inventory-chart-bar-label {
    color: #7a8fa6;
}

body[data-theme="dark"] .inventory-chart-summary {
    background: rgba(20, 34, 52, 0.5);
    border-color: rgba(106, 122, 150, 0.18);
}

body[data-theme="dark"] .inventory-chart-summary span {
    color: #9fb0c8;
}

body[data-theme="dark"] .inventory-chart-summary strong {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-purchase-shell-footer {
    border-top-color: rgba(106, 122, 150, 0.25);
}

/* Purchase Delete Button */
.purchase-delete-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(239,68,68,0.2) !important;
    border-radius: 8px !important;
    background: rgba(254,242,242,0.5) !important;
    color: #dc2626 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    margin-left: auto !important;
}

.purchase-delete-btn:hover {
    background: rgba(254,226,226,0.9) !important;
    border-color: #dc2626 !important;
    color: #b91c1c !important;
    transform: scale(1.05) !important;
}

body[data-theme="dark"] .purchase-delete-btn {
    background: rgba(127,29,29,0.2) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #f87171 !important;
}

body[data-theme="dark"] .purchase-delete-btn:hover {
    background: rgba(127,29,29,0.4) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}

body[data-theme="dark"] .inventory-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

body[data-theme="dark"] .inventory-product-detail-media {
    background: linear-gradient(135deg, rgba(28, 44, 66, 0.96), rgba(20, 34, 52, 0.94));
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-product-shell-stats > div {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
}

body[data-theme="dark"] .inventory-product-shell-meta span,
body[data-theme="dark"] .inventory-detail-list span,
body[data-theme="dark"] .inventory-provider-shell-meta span,
body[data-theme="dark"] .inventory-purchase-line {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
}

body[data-theme="dark"] .inventory-product-shell-summary > div,
body[data-theme="dark"] .inventory-product-shell-notes span {
    background: rgba(24, 37, 55, 0.72);
    border-color: rgba(120, 144, 178, 0.14);
    color: #c5d5e8;
}

/* ─── Skeleton Loading States ─────────────────────────────────── */
@keyframes skeleton-pulse {
    0%, 100% { background: #e5e7eb; }
    50% { background: #f3f4f6; }
}

.inventory-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.inventory-skeleton-card {
    background: white;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.skeleton-img {
    height: 100px;
    background: #e5e7eb;
    border-radius: 12px;
    animation: skeleton-pulse 1.5s infinite;
    margin-bottom: 12px;
}

.skeleton-line {
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    animation: skeleton-pulse 1.5s infinite;
    margin-bottom: 8px;
}

.skeleton-line.short {
    width: 60%;
}

/* ─── Empty States ────────────────────────────────────────────── */
.inventory-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
    border-radius: 18px;
    background: var(--app-panel);
    border: 2px dashed var(--app-border);
}

.inventory-empty-state-icon {
    width: 64px;
    height: 64px;
    color: var(--app-muted);
    opacity: 0.5;
}

.inventory-empty-state h3 {
    font-size: 1.1rem;
    color: var(--app-text);
    font-weight: 600;
    margin: 0;
}

.inventory-empty-state p {
    font-size: 0.9rem;
    color: var(--app-muted);
    margin: 0;
    max-width: 400px;
}

/* ─── Premium Empty States with Illustrations ────────────────── */
.inventory-empty-state-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 32px;
    text-align: center;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    animation: fadeInCards 0.4s ease-out;
    grid-column: 1 / -1;
    width: 100%;
}

.inventory-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    text-align: center;
    grid-column: 1 / -1;
    width: 100%;
}

.inventory-empty-state-illustration {
    width: 160px;
    height: 160px;
    margin-bottom: 8px;
    animation: floatIllustration 3s ease-in-out infinite;
}

.inventory-empty-state-illustration svg {
    width: 100%;
    height: 100%;
}

.inventory-empty-state-premium h3 {
    font-size: 1.4rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0;
}

.inventory-empty-state-premium p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

.inventory-empty-state-premium .btn.primary {
    margin-top: 8px;
    padding: 12px 24px;
    font-weight: 600;
}

@keyframes floatIllustration {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ─── Additional KPI Styles ───────────────────────────────────── */
.inventory-kpi-extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.inventory-kpi-extra article {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inventory-kpi-extra article span {
    font-size: 0.75rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.inventory-kpi-extra article strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--app-text);
}

/* ─── Top Products List ───────────────────────────────────────── */
.inventory-top-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inventory-top-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    gap: 12px;
}

.inventory-top-list li:last-child {
    border-bottom: none;
}

.inventory-top-list .top-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.inventory-top-list .top-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--app-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-top-list .top-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--app-muted);
    flex-shrink: 0;
}

/* Dark theme variants for new components */
body[data-theme="dark"] .inventory-skeleton-card {
    background: var(--app-panel);
    border-color: var(--app-border);
}

body[data-theme="dark"] .skeleton-img,
body[data-theme="dark"] .skeleton-line {
    background: #374151;
    animation-name: skeleton-pulse-dark;
}

@keyframes skeleton-pulse-dark {
    0%, 100% { background: #374151; }
    50% { background: #4b5563; }
}

body[data-theme="dark"] .inventory-empty-state {
    background: var(--app-panel);
    border-color: var(--app-border);
}

body[data-theme="dark"] .inventory-empty-state-icon {
    color: var(--app-muted);
}

body[data-theme="dark"] .inventory-empty-state h3 {
    color: var(--app-text);
}

body[data-theme="dark"] .inventory-empty-state p {
    color: var(--app-muted);
}

/* Dark mode premium empty states */
body[data-theme="dark"] .inventory-empty-state-premium {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
    border-color: rgba(71, 85, 105, 0.4);
}

body[data-theme="dark"] .inventory-empty-state-premium h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .inventory-empty-state-premium p {
    color: #94a3b8;
}

body[data-theme="dark"] .inventory-kpi-extra article {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(106, 122, 150, 0.2);
}

body[data-theme="dark"] .inventory-kpi-extra article span {
    color: #9fb0c8;
}

body[data-theme="dark"] .inventory-kpi-extra article strong {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-top-list li {
    border-bottom-color: rgba(106, 122, 150, 0.2);
}

body[data-theme="dark"] .inventory-top-list .top-rank {
    background: #2563eb;
}

body[data-theme="dark"] .inventory-top-list .top-name {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-top-list .top-count {
    color: #9fb0c8;
}

/* Responsive for new components */
@media (max-width: 768px) {
    .inventory-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .inventory-kpi-extra {
        grid-template-columns: repeat(2, 1fr);
    }

    .inventory-empty-state {
        padding: 40px 16px;
    }

    .inventory-empty-state-icon {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .inventory-kpi-extra {
        grid-template-columns: 1fr;
    }
}
body[data-theme="dark"] .inventory-product-shell-notes span,
body[data-theme="dark"] .inventory-chip {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
}

body[data-theme="dark"] .inventory-chip,
body[data-theme="dark"] .inventory-chip.soft {
    color: #d6e3f5;
}

body[data-theme="dark"] .inventory-product-shell-summary strong {
    color: #e7eefb;
}

body[data-theme="dark"] .compra-line-item {
    border-color: rgba(120, 144, 178, 0.14);
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.96), rgba(14, 24, 38, 0.92));
    box-shadow: 0 18px 38px rgba(2, 8, 20, 0.24);
}
body[data-theme="dark"] .compra-repuesto-autocomplete {
    background: #1f2937;
    border-color: #374151;
    color: white;
}
body[data-theme="dark"] .compra-repuesto-autocomplete:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
body[data-theme="dark"] .compra-repuesto-suggestions {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .compra-repuesto-suggestion {
    border-bottom-color: #374151;
}
body[data-theme="dark"] .compra-repuesto-suggestion:hover {
    background: #1e3a5f;
}

body[data-theme="dark"] .inventory-purchase-head span,
body[data-theme="dark"] .inventory-provider-head span,
body[data-theme="dark"] .inventory-purchase-copy span,
body[data-theme="dark"] .inventory-provider-meta span {
    color: #90a1b8;
}

body[data-theme="dark"] .inventory-purchase-copy p {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-purchase-line {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
}

body[data-theme="dark"] .inventory-purchase-line strong {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-purchase-line span {
    color: #90a1b8;
}

body[data-theme="dark"] .inventory-provider-total {
    color: #7ec1ff;
    background: rgba(41, 121, 255, 0.12);
    border-color: rgba(126, 193, 255, 0.18);
}

body[data-theme="dark"] .inventory-product-detail-copy strong,
body[data-theme="dark"] .inventory-detail-list strong,
body[data-theme="dark"] .inventory-detail-headercopy strong,
body[data-theme="dark"] .inventory-reorder-item strong {
    color: #e7eefb;
}

body[data-theme="dark"] .inventory-detail-headercopy span,
body[data-theme="dark"] .inventory-reorder-item span {
    color: #90a1b8;
}

body[data-theme="dark"] .inventory-reorder-item {
    border-color: rgba(120, 144, 178, 0.16);
    background: rgba(24, 37, 55, 0.92);
}

@media (max-width: 860px) {
    .inventory-purchase-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-product-filters,
    .inventory-product-detail-grid,
    .inventory-product-detail-hero,
    .inventory-detail-headerbar {
        grid-template-columns: 1fr;
    }

    .compat-grid {
        grid-template-columns: 1fr;
    }

    .compra-line-head {
        grid-template-columns: 1fr;
    }

    .compra-line-head .action-row {
        grid-template-columns: 1fr 1fr auto;
    }
}

/* ORION - POS Multi-session Dock */
.pos-suspended-dock {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: 2500;
    pointer-events: none;
}

.pos-session-widget {
    pointer-events: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideUp 0.3s ease-out;
    width: 280px;
}

.pos-session-widget:hover {
    transform: translateX(-5px);
    border-color: #3b82f6;
    background: #f8fafc;
}

.pos-session-icon {
    width: 40px;
    height: 40px;
    background: #0f172a;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pos-session-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.pos-session-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-session-meta {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

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

body[data-theme="dark"] .pos-session-widget {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

body[data-theme="dark"] .pos-session-title {
    color: #f8fafc;
}

body[data-theme="dark"] .pos-session-meta {
    color: #94a3b8;
}

body[data-theme="dark"] .pos-session-icon {
    background: #3b82f6;
}


.launcher-pager {
    display: flex;
    gap: 8px;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.pager-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(13, 59, 102, 0.14);
}

.pager-dot.active {
    width: 34px;
    background: linear-gradient(135deg, #0066cc, #45a3ff);
    box-shadow: 0 10px 18px rgba(0, 102, 204, 0.22);
}

body[data-theme="dark"] #view-home {
    background:
        radial-gradient(circle at 12% 12%, rgba(42, 108, 189, 0.18), transparent 20%),
        radial-gradient(circle at 88% 16%, rgba(33, 169, 142, 0.12), transparent 18%),
        linear-gradient(180deg, #0b1420 0%, #0d1826 46%, #0a131f 100%);
}

body[data-theme="dark"] #view-home::before {
    border-color: rgba(120, 144, 178, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 26px 60px rgba(2, 8, 20, 0.18);
}

body[data-theme="dark"] .pager-dot {
    background: rgba(148, 163, 184, 0.22);
}

.launcher-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.launcher-app:hover {
    transform: scale(1.05);
}

.app-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: #ffffff;
    position: relative;
    background: linear-gradient(135deg, #eee, #ccc);
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Ensure images/SVGs inside icons are fully opaque and clear */
.app-icon img, .app-icon svg {
    width: 60%;
    height: 60%;
    object-fit: contain;
    opacity: 1 !important;
    filter: brightness(1.1) contrast(1.1);
}

.launcher-app:hover .app-icon {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.app-icon.recepcion {
    background: linear-gradient(135deg, #0cebeb, #20e3b2, #29ffc6);
}

.app-icon.taller {
    background: linear-gradient(135deg, #f12711, #f5af19);
}

.app-icon.inspeccion {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.app-icon.cotizaciones {
    background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.app-icon.ventas {
    background: linear-gradient(135deg, #007aff, #00b4ff);
}

.app-icon.vehiculos {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
    color: #e83e8c;
}

.app-icon.clientes {
    background: linear-gradient(135deg, #34e89e, #0f3443);
}

.app-icon.inventario {
    background: linear-gradient(135deg, #b224ef, #7579ff);
}

.app-icon.agenda {
    background: #fff;
    color: #333;
}

.app-icon.agenda::before {
    content: "OCT";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #ff3b30;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    height: 32px;
    border-radius: 22px 22px 0 0;
    line-height: 32px;
    text-align: center;
}

.app-icon.agenda::after {
    content: "15";
    display: block;
    font-size: 2.5rem;
    font-weight: 600;
    margin-top: 16px;
}

.app-icon.reportes {
    background: linear-gradient(135deg, #4b6cb7, #182848);
}

.app-icon.config {
    background: linear-gradient(135deg, #e6d0ce, #272727);
}

.app-icon.crear {
    background: #fff;
    color: #007aff;
    border: 2px dashed #ccc;
    box-shadow: none;
    font-size: 4rem;
}

.launcher-app span {
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.3px;
}

.launcher-pager {
    display: flex;
    gap: 12px;
    margin-top: 60px;
}

.pager-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.pager-dot.active {
    background: white;
}

/* ----------------------------------
   3. INNER APP VIEWS (LIGHT MODE)
---------------------------------- */
.view-section {
    display: none;
    flex: 1;
    background: var(--app-bg);
    overflow-y: auto;
    color: var(--app-text);
}

.view-section.active {
    display: block;
    /* Home overrides this to flex */
}

.inspection-modal {
    z-index: 2600;
    align-items: stretch;
    padding: 20px;
}

.inspection-modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.inspection-modal .app-header {
    background: #ffffff;
}

.inspection-modal .app-header .app-tabs {
    margin-bottom: 0;
}

.inspection-modal .app-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    min-height: 0;
    scrollbar-width: none;
}

.inspection-modal .app-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.inspection-modal .layout-2col {
    align-items: stretch;
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(760px, 2fr) minmax(360px, 1fr);
}

.inspection-modal .layout-2col > .panel:first-child {
    position: relative;
    min-width: 0;
}


.inspection-modal .layout-2col > .panel:last-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(96vh - 210px);
    overflow: hidden;
}

.inspection-modal .app-actions .btn.secondary,
.inspection-modal .app-actions .btn.primary {
    border-radius: 999px;
    min-height: 46px;
    padding-inline: 20px;
    font-weight: 700;
}

#view-inspeccion .app-content {
    overflow: visible;
    padding-bottom: 20px;
}

#view-inspeccion .layout-2col {
    align-items: stretch;
    grid-template-columns: minmax(760px, 2fr) minmax(360px, 1fr);
}

#view-inspeccion .layout-2col > .panel:first-child {
    position: relative;
    min-width: 0;
}

#view-inspeccion .layout-2col > .panel:last-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#view-inspeccion .app-actions .btn.secondary,
#view-inspeccion .app-actions .btn.primary {
    border-radius: 999px;
    min-height: 46px;
    padding-inline: 20px;
    font-weight: 700;
}

#view-inspeccion .app-header {
    position: static !important;
    top: auto !important;
}

.inspection-modal .app-actions .btn.secondary {
    background: #ffffff;
    border-color: #d7dee8;
    color: #4f5f73;
}

.inspection-modal .app-actions .inspection-cancel-btn {
    background: #fff4f4;
    border-color: #efc7c7;
    color: #b43b3b;
}

.inspection-modal .app-actions .inspection-cancel-btn:hover {
    background: #ffeaea;
    border-color: #e7b2b2;
    color: #9f2f2f;
}

.inspection-modal .app-actions .btn.primary {
    box-shadow: 0 12px 30px rgba(15, 123, 255, 0.22);
}

.inspection-warning-note {
    display: none !important;
}

/* App Header inside View */
.app-header {
    background: var(--app-panel);
    border-bottom: 1px solid var(--app-border);
    padding: 24px 40px 0 40px;
    position: static;
    top: auto;
    z-index: 50;
}

.app-header-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.app-header-title h1 {
    font-size: 1.8rem;
    font-weight: 600;
}

.btn-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(233,240,248,0.98));
    border: 1px solid rgba(166, 182, 204, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.28rem;
    color: #0f172a;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.72);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn-back:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(220,231,244,1));
    border-color: rgba(94, 124, 166, 0.92);
    box-shadow:
        0 14px 24px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.82);
    transform: translateY(-1px);
}

.btn-back:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

body[data-theme="dark"] .btn-back {
    background: rgba(17, 29, 46, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--app-text);
    box-shadow: 0 10px 22px rgba(2, 8, 20, 0.2);
}

body[data-theme="dark"] .btn-back:hover {
    background: rgba(23, 39, 61, 0.98);
    border-color: rgba(116, 169, 255, 0.18);
    color: #f3f7ff;
}

.launcher-nav {
    width: min(220px, 90vw);
    margin: 14px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 2;
}

.launcher-nav-title {
    margin: 0 0 2px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a97ac;
}

.launcher-nav-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.launcher-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.launcher-pager {
    display: flex;
    align-items: center;
    position: relative;
    width: 135px;
    height: 38px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #c5d2e3;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,252,0.96));
    box-shadow:
        0 8px 20px rgba(103, 128, 170, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.9);
    overflow: hidden;
    justify-content: stretch;
}

.launcher-dot {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    height: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.launcher-dot-label {
    font-size: 0.96rem;
    font-weight: 800;
    color: #8a94a5;
    transition: color 0.2s ease, transform 0.2s ease;
}

.launcher-dot:hover {
    transform: scale(1.03);
}

.launcher-dot:hover .launcher-dot-label {
    color: #66758a;
}

.launcher-pager-page-1 {
    background:
        linear-gradient(90deg, #3f8cff 0%, #2968ea 50%, transparent 50%, transparent 100%),
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,252,0.96));
}

.launcher-pager-page-2 {
    background:
        linear-gradient(90deg, transparent 0%, transparent 50%, #3f8cff 50%, #2968ea 100%),
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,252,0.96));
}

.launcher-pager-page-1 .launcher-dot:first-child,
.launcher-pager-page-2 .launcher-dot:last-child {
    background: linear-gradient(135deg, #3f8cff, #2968ea);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 8px 20px rgba(45, 104, 234, 0.2);
}

.launcher-dot.active .launcher-dot-label {
    color: #ffffff;
}

.launcher-dot:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 3px;
}

body[data-theme="dark"] .launcher-nav-btn {
    border-color: #c5d2e3;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,252,0.96));
    box-shadow:
        0 10px 30px rgba(103, 128, 170, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

body[data-theme="dark"] .launcher-nav-title {
    color: #8a97ac;
}

body[data-theme="dark"] .launcher-dot-label {
    color: #8a94a5;
}

body[data-theme="dark"] .launcher-dot:hover .launcher-dot-label {
    color: #66758a;
}

body[data-theme="dark"] .launcher-dot.active .launcher-dot-label {
    color: #ffffff;
}

@media (max-width: 640px) {
    .launcher-nav {
        gap: 4px;
        margin-top: 12px;
    }

    .launcher-nav-title {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
    }

    .launcher-nav-row {
        width: 100%;
    }

    .launcher-pager {
        width: 124px;
        height: 36px;
    }

    .launcher-dot-label {
        font-size: 0.92rem;
    }
}

.app-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

/* Modern SaaS Tabs */
.app-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 2px solid transparent;
    /* Container bottom handled by header */
}

/* Compact spacing for Colaboradores and similar views */
#view-colaboradores .app-content {
    padding-top: 16px;
}

#view-colaboradores .taller-toolbar-panel {
    margin-top: 0;
    margin-bottom: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#view-inventario .app-content {
    padding-top: 16px;
}

#view-inventario #inventario-metrics:empty {
    display: none;
}

#view-asistencia .app-content {
    padding-top: 16px;
}

.segmented-chip {
    border: 1px solid #d9e2ee;
    background: #f6f8fb;
    color: #546274;
    border-radius: 16px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.segmented-chip:hover {
    background: #eef3f8;
    border-color: #cbd8e8;
    color: #233142;
}

.segmented-chip.active {
    background: #3b4148;
    border-color: #3b4148;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(32, 39, 49, 0.18);
}

.app-tab {
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
    position: relative;
}

.app-tab:hover {
    color: var(--app-text);
}

.app-tab.active {
    color: var(--accent-blue);
    font-weight: 600;
}

.app-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 3px 3px 0 0;
}

/* App Content Area */
.app-content {
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* White Panels (Cards) */
.panel {
    background: var(--app-panel);
    border-radius: 16px;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-header h2,
.panel-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.panel-header p {
    color: var(--app-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* ----------------------------------
   4. COMPONENTS (Forms, Buttons, Tables)
---------------------------------- */
.btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.btn.primary {
    background: var(--accent-blue);
    color: white;
}

.btn.primary:hover {
    background: var(--accent-blue-hover);
}

.btn.secondary {
    background: white;
    border-color: var(--app-border);
    color: var(--app-text);
}

.btn.secondary:hover {
    background: #f9f9fb;
}

.btn.secondary.active {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.btn.secondary.active:hover {
    background: #e0e9ff;
}

.btn.danger {
    background: linear-gradient(180deg, #fff5f7 0%, #ffe9ee 100%);
    border-color: #f3b8c6;
    color: #bf3256;
    box-shadow: 0 10px 22px rgba(219, 39, 119, 0.12);
}

.btn.danger:hover {
    background: linear-gradient(180deg, #ffeef3 0%, #ffdfe8 100%);
    border-color: #ea9db1;
    box-shadow: 0 12px 24px rgba(219, 39, 119, 0.18);
}

.btn.small {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.btn.icon.small {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.btn.ghost {
    background: #f6f8fc;
    border-color: #d9e1ee;
    color: #516175;
}

.btn.ghost:hover {
    background: #eef3fa;
    border-color: #c6d1e3;
}

.btn.warning {
    background: linear-gradient(180deg, #fff9e6 0%, #fff0cc 100%);
    border-color: #f0d060;
    color: #b8860b;
    box-shadow: 0 10px 22px rgba(255, 193, 7, 0.12);
}

.btn.warning:hover {
    background: linear-gradient(180deg, #fff4cc 0%, #ffe8a8 100%);
    border-color: #e0c050;
    box-shadow: 0 12px 24px rgba(255, 193, 7, 0.18);
}

.btn.warning.small {
    padding: 7px 12px;
    font-size: 0.82rem;
}

/* Product Form Sections */
.product-form-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid var(--app-border);
}

.product-form-section .section-title {
    margin: 0 0 14px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--app-border);
}

.collapsible-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.collapsible-section .section-header:hover {
    opacity: 0.8;
}

.collapsible-section .section-title {
    margin: 0;
    flex: 1;
}

.section-toggle-icon {
    transition: transform 0.2s;
}

.collapsible-section.open .section-toggle-icon {
    transform: rotate(180deg);
}

.section-content {
    margin-top: 14px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product Detail Actions */
.pd-actions-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--app-border);
}

.pd-actions-row .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Switch On/Off en Ficha de Producto */
.pd-estado-switch {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-estado-switch-header {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-content: flex-end;
}

.pd-estado-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--app-border);
    transition: all 0.2s;
}

.pd-estado-toggle:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.pd-estado-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.pd-toggle-slider {
    height: 20px;
    width: 38px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.08);
    position: relative;
    flex-shrink: 0;
}

.pd-toggle-slider::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-estado-toggle input:checked ~ .pd-toggle-slider {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
}

.pd-estado-toggle input:checked ~ .pd-toggle-slider::after {
    left: calc(100% - 17px);
}

.pd-estado-toggle input:not(:checked) ~ .pd-toggle-slider::after {
    left: 3px;
}

.pd-toggle-label {
    font-weight: 700;
    font-size: 0.77rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.3s;
}

.pd-estado-toggle input:checked ~ .pd-toggle-label {
    color: #059669;
}

.pd-estado-toggle input:not(:checked) ~ .pd-toggle-label {
    color: #b8860b;
}

.pd-eliminar-wrapper {
    margin-top: 0;
}

.pd-inactive-badge {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff0cc 100%);
    border: 2px solid #f0d060;
    border-radius: 8px;
    color: #b8860b;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.pd-inactive-badge span {
    flex: 1;
}

/* Modal de Confirmación Personalizado */
.modal-confirm-custom {
    width: 480px;
    max-width: calc(100vw - 40px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-confirm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--app-border);
}

.modal-confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff0f5 0%, #ffe8f0 100%);
    color: #db2777;
    flex-shrink: 0;
}

.modal-confirm-icon.warning {
    background: linear-gradient(135deg, #fff9e6 0%, #fff0cc 100%);
    color: #b8860b;
}

.modal-confirm-icon.success {
    background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);
    color: #16a34a;
}

.modal-confirm-icon.danger {
    background: linear-gradient(135deg, #fee 0%, #fdd 100%);
    color: #dc2626;
}

.modal-confirm-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text);
    flex: 1;
}

.modal-confirm-body {
    padding: 24px;
}

.modal-confirm-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--app-text);
}

.modal-confirm-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    background: #f8f9fc;
    border-top: 1px solid var(--app-border);
}

.modal-confirm-footer .btn {
    min-width: 110px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.modal-confirm-footer .btn.primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #1e3a8a 100%);
}

.modal-confirm-footer .btn.danger {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    border-color: #dc2626;
}

.modal-confirm-footer .btn.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #f59e0b;
}

/* Checkbox de estado activo/inactivo en modal de producto */
.modal-activo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    min-width: 180px;
}

.modal-activo-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--app-text);
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.modal-activo-checkbox:hover {
    background: rgba(59, 130, 246, 0.05);
}

.modal-activo-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.modal-activo-checkbox .checkmark {
    height: 28px;
    width: 52px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.modal-activo-checkbox .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-activo-checkbox input:checked ~ .checkmark {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
}

.modal-activo-checkbox input:checked ~ .checkmark::after {
    left: calc(100% - 24px);
}

.modal-activo-checkbox input:not(:checked) ~ .checkmark::after {
    left: 4px;
}

.modal-activo-checkbox .activo-label {
    font-weight: 600;
    transition: color 0.3s;
}

.modal-activo-checkbox input:checked ~ .activo-label {
    color: #059669;
}

.modal-activo-checkbox input:not(:checked) ~ .activo-label {
    color: #b8860b;
}

.modal-activo-help {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* Especificaciones Personalizadas */
.custom-specs-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--app-border);
}

.custom-specs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.custom-specs-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-add-spec {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px dashed var(--app-border);
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-add-spec:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.05);
    transform: scale(1.05);
}

.custom-specs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-spec-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: slideDown 0.2s ease;
}

.custom-spec-name {
    flex: 0 0 140px;
}

.custom-spec-name input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    background: white;
    transition: all 0.2s;
}

.custom-spec-name input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-spec-value {
    flex: 1;
}

.custom-spec-value input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    transition: all 0.2s;
}

.custom-spec-value input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-remove-spec {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: linear-gradient(135deg, #fff5f5 0%, #fee 100%);
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-remove-spec:hover {
    background: linear-gradient(135deg, #fee 0%, #fdd 100%);
    border-color: #f87171;
    transform: scale(1.05);
}

/* Modal de Eliminar Compra */
.modal-delete-compra {
    width: 520px;
    max-width: calc(100vw - 40px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    animation: modalSlideIn 0.3s ease;
}

.delete-compra-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border: 2px solid var(--app-border);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    margin: 16px 0;
    transition: all 0.2s;
}

.delete-compra-switch:hover {
    border-color: #f87171;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.delete-compra-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.switch-slider {
    height: 28px;
    width: 52px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    flex-shrink: 0;
}

.switch-slider::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.delete-compra-switch input:checked ~ .switch-slider {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
}

.delete-compra-switch input:checked ~ .switch-slider::after {
    left: calc(100% - 24px);
}

.switch-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.switch-state-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--app-text);
    transition: color 0.2s ease;
}

.switch-state-subtitle {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.delete-compra-switch input:checked ~ .switch-labels .switch-state-title {
    color: #dc2626;
}

.delete-compra-help {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: #f8f9fc;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    border-left: 3px solid var(--app-border);
    transition: all 0.2s;
}

.btn.block {
    width: 100%;
}

.document-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.document-create-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.document-filter-row input[type="text"] {
    min-width: 240px;
    flex: 1 1 280px;
}

.document-filter-row input[type="date"] {
    min-width: 0;
    width: 160px;
    flex: 0 0 160px;
}

.document-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.document-tab-card {
    border: 1px solid #d7dfec;
    border-radius: 18px;
    padding: 14px 12px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 18px 38px rgba(19, 35, 63, 0.06);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.document-tab-card:hover {
    transform: translateY(-2px);
    border-color: #b8c8e0;
    box-shadow: 0 22px 46px rgba(19, 35, 63, 0.1);
}

.document-tab-card.active {
    border-color: rgba(15, 118, 255, 0.28);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 255, 0.18), transparent 46%),
        linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: 0 24px 52px rgba(16, 84, 168, 0.14);
}

.document-tab-card strong {
    display: block;
    font-size: 0.88rem;
    color: #122033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-tab-card b {
    display: inline-flex;
    margin-top: 8px;
    font-size: 1.28rem;
    line-height: 1;
    color: #0f172a;
}

.document-tab-create {
    margin-top: auto;
    width: 100%;
    border: 1px solid rgba(15, 118, 255, 0.16);
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(15, 118, 255, 0.08);
    color: #0f67d8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.document-tab-create:hover {
    background: rgba(15, 118, 255, 0.12);
    border-color: rgba(15, 118, 255, 0.24);
}

.document-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.document-summary-card {
    background: #f8fafc;
    border: 1px solid #e4ebf3;
    border-radius: 16px;
    padding: 16px 18px;
}

.document-summary-card strong {
    display: block;
    font-size: 1.32rem;
    color: #122033;
}

.document-summary-card span {
    display: block;
    margin-top: 5px;
    color: #6b7b91;
    font-size: 0.84rem;
}

.document-card-grid,
.document-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

#document-results {
    display: block;
    width: 100%;
}

.document-results-footer,
.document-results-grid + .standard-pagination {
    width: 100%;
    margin-top: 18px;
    clear: both;
}

.document-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #dde5f0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,255,0.98)),
        #ffffff;
    box-shadow: 0 24px 52px rgba(15, 28, 48, 0.08);
    padding: 18px;
}

.document-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0f6bff, #60a5fa);
    opacity: 0.9;
}

.document-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.document-card-statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.document-card-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #edf4ff;
    color: #21538c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.document-card-code {
    display: block;
    margin-top: 10px;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.document-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    margin: 14px 0;
}

.document-card-meta div {
    background: #f8fbff;
    border: 1px solid #e5edf8;
    border-radius: 12px;
    padding: 10px 11px;
}

.document-card-meta-alert {
    border-color: rgba(245, 158, 11, 0.28) !important;
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 251, 235, 0.98)) !important;
}

.document-card-meta dt {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f8299;
}

.document-card-meta dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #152235;
}

.document-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

.document-card-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.document-card-empty {
    grid-column: 1 / -1;
    padding: 28px;
    border-radius: 18px;
    border: 1px dashed #cfd9e7;
    background: #f8fbff;
    text-align: center;
}

.document-card-empty strong {
    display: block;
    margin-bottom: 8px;
    color: #152235;
}

.document-card-empty p {
    margin: 0;
    color: #6b7b91;
}

.document-inline-toggle {
    min-height: 44px;
    align-self: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid #dde5f0;
    background: #f8fbff;
}

.badge.pending-strong {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.24);
}

.badge.partial-strong {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.24);
}

.badge.paid-strong {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.badge.cancelled-strong {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.22);
}

.order-finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.order-finance-card {
    border: 1px solid #e5edf8;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 14px;
}

.order-finance-card span {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b8798;
}

.order-finance-card strong {
    display: block;
    margin-top: 8px;
    font-size: 1.08rem;
    color: #122033;
}

.order-finance-card small {
    display: block;
    margin-top: 8px;
    color: #6b7b91;
}

.order-finance-card-balance.due {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 251, 235, 0.98));
}

.order-finance-card-balance.settled {
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(240, 253, 250, 0.98));
}

.order-payment-summary {
    margin-bottom: 16px;
}

.order-payment-history-panel {
    margin-top: 8px;
}

.order-payment-table-wrap {
    overflow-x: auto;
}

.order-payment-table {
    width: 100%;
    border-collapse: collapse;
}

.order-payment-table th,
.order-payment-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e8eef8;
    text-align: left;
    font-size: 0.9rem;
}

.order-payment-table th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #75849b;
}

.order-payment-empty {
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed #d7e1ef;
    background: #f8fbff;
}

.order-payment-empty strong {
    display: block;
    margin-bottom: 6px;
}

.cobranzas-layout {
    display: block;
}

.cobranzas-clients-panel,
.cobranzas-main-panel {
    min-width: 0;
}

.cobranzas-main-panel {
    display: block;
}

.cobranza-documents-only .panel {
    border-radius: 24px;
    border: 1px solid rgba(204, 218, 236, 0.88);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.cobranzas-client-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.cobranzas-client-card {
    width: 100%;
    text-align: left;
    border: 1px solid #e5edf8;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cobranzas-client-card:hover,
.cobranzas-client-card.active {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 255, 0.24);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.cobranzas-client-card strong,
.cobranzas-client-card span,
.cobranzas-client-card small {
    display: block;
}

.cobranzas-client-card span {
    margin-top: 6px;
    font-weight: 700;
    color: #122033;
}

.cobranzas-client-card small {
    margin-top: 4px;
    color: #6b7b91;
}

.cobranzas-table tr.active {
    background: rgba(15, 118, 255, 0.06);
}

.cobranzas-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cobranzas-followup-timeline {
    display: grid;
    gap: 12px;
}

.cobranzas-followup-item {
    border-left: 3px solid rgba(15, 118, 255, 0.24);
    padding: 10px 12px;
    border-radius: 0 14px 14px 0;
    background: #f8fbff;
}

.cobranzas-followup-item strong,
.cobranzas-followup-item span,
.cobranzas-followup-item small {
    display: block;
}

.cobranzas-followup-item p {
    margin: 6px 0;
    color: #122033;
}

.cobranza-kpi-card strong {
    font-size: 1.28rem;
}

.cobranza-kpi-card {
    min-height: 108px;
    padding: 18px 20px;
}

.cobranza-kpi-card span {
    margin-bottom: 8px;
}

.cobranza-kpi-card strong {
    line-height: 1;
    margin-bottom: 10px;
}

.cobranza-kpi-card small {
    font-size: 0.78rem;
    line-height: 1.25;
}

.cobranzas-filter-row {
    display: grid;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}

.cobranzas-filter-line {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.cobranzas-filter-line-search {
    grid-template-columns: minmax(0, 1fr) 128px;
}

.cobranzas-filter-line-controls {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.88fr) 180px minmax(0, 0.92fr) minmax(0, 0.92fr);
}

.cobranzas-filter-line > * {
    min-width: 0;
}

.cobranzas-filter-line > input,
.cobranzas-filter-line > select,
.cobranzas-filter-line > .document-inline-toggle,
.cobranzas-date-chip {
    min-height: 56px;
}

.cobranzas-filter-line > button {
    min-height: 56px;
}

.cobranzas-filter-line > input,
.cobranzas-filter-line > select {
    width: 100%;
    min-width: 0;
    border-radius: 16px;
    border: 1px solid #d8e4f2;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(15, 23, 42, 0.035);
    font-weight: 700;
    color: #112033;
}

.cobranzas-filter-line > input:focus,
.cobranzas-filter-line > select:focus,
.cobranzas-date-chip:focus-within {
    border-color: rgba(15, 118, 255, 0.34);
    box-shadow: 0 0 0 4px rgba(15, 118, 255, 0.08), 0 14px 30px rgba(15, 23, 42, 0.07);
}

.cobranzas-filter-line .document-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid #d8e4f2;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(15, 23, 42, 0.035);
    min-width: 0;
}

.cobranzas-filter-line .document-inline-toggle span {
    font-size: 0.86rem;
    font-weight: 800;
    color: #122033;
}

.cobranzas-date-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid #d8e4f2;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(15, 23, 42, 0.035);
}

.cobranzas-date-chip span {
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7b91;
}

.cobranzas-date-chip input {
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-weight: 800;
    color: #112033;
}

.cobranzas-date-chip input:focus {
    box-shadow: none;
}

.cobranzas-reset-btn {
    border-radius: 16px;
    border-color: #d8e4f2;
    font-weight: 800;
    padding-inline: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,248,255,0.96));
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 22px rgba(15, 23, 42, 0.035);
}

.cobranzas-filter-line-search > input[id="cobranzas-search"] {
    font-size: 0.98rem;
}

.cobranzas-filter-line > input::placeholder {
    color: #6f8097;
}

.cobranzas-filter-line > input:hover,
.cobranzas-filter-line > select:hover,
.cobranzas-filter-line > .document-inline-toggle:hover,
.cobranzas-date-chip:hover,
.cobranzas-reset-btn:hover {
    border-color: rgba(15, 118, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.055);
}

.cobranzas-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cobranzas-section-head span {
    color: #6b7b91;
    font-weight: 700;
}

.cobranzas-panel-search {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #dbe5f2;
    background: #fbfdff;
    padding: 0 14px;
    font-weight: 600;
    margin-top: 10px;
}

.cobranzas-panel-search:focus {
    border-color: rgba(15, 118, 255, 0.34);
    box-shadow: 0 0 0 4px rgba(15, 118, 255, 0.08);
}

.cobranza-detail-modal-body {
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.72), rgba(255, 255, 255, 0.94));
}

.cobranza-detail-modal-body .expediente-panel-card,
.cobranza-detail-modal-body .order-finance-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.cobranza-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px 16px;
}

.cobranza-detail-toolbar-copy {
    display: grid;
    gap: 4px;
}

.cobranza-detail-toolbar-copy span {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b8aa1;
}

.cobranza-detail-toolbar-copy strong {
    font-size: 1.05rem;
    color: #132238;
}

.cobranza-detail-summary {
    margin-top: 6px;
}

.cobranza-premium-modal .modal-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(214, 226, 241, 0.9);
    background:
        radial-gradient(circle at top left, rgba(108, 153, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.96));
}

.cobranza-premium-modal .modal-header h3 {
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

.cobranza-premium-modal .modal-body {
    padding: 24px;
    background: linear-gradient(180deg, #fbfdff, #f6f9fd);
}

.cobranzas-history-shell {
    display: grid;
    gap: 16px;
}

.cobranza-premium-modal .modal-footer {
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(214, 226, 241, 0.9);
    background: rgba(255,255,255,0.96);
}

.cobranza-premium-modal label {
    font-weight: 700;
    color: #223247;
}

.cobranza-premium-modal input,
.cobranza-premium-modal select,
.cobranza-premium-modal textarea {
    margin-top: 8px;
    border-radius: 16px;
    border: 1px solid #d6e2f1;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.cobranza-premium-modal textarea {
    min-height: 108px;
}

.cobranza-premium-modal input:focus,
.cobranza-premium-modal select:focus,
.cobranza-premium-modal textarea:focus {
    border-color: rgba(15, 118, 255, 0.34);
    box-shadow: 0 0 0 4px rgba(15, 118, 255, 0.08);
}

.cobranza-table .action-row.compact {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cobranza-table .btn.small {
    min-width: 74px;
}

@media (max-width: 980px) {
    .directory-toolbar {
        align-items: stretch;
    }

    .directory-search,
    .directory-view-switch {
        width: 100%;
    }

    .directory-view-switch {
        justify-content: center;
    }

    .entity-card-stats {
        grid-template-columns: 1fr;
    }

    .entity-profile-layout {
        grid-template-columns: 1fr;
    }

    .entity-profile-summary-grid,
    .entity-vehicle-photo-shell {
        grid-template-columns: 1fr;
    }

    .document-filter-row {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .document-filter-row input[type="text"],
    .document-filter-row input[type="date"],
    .document-filter-row select,
    .document-inline-toggle {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    .document-card-meta {
        grid-template-columns: 1fr;
    }

    .document-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .document-card-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .document-card-statuses {
        justify-content: flex-start;
    }

    .cobranzas-layout,
    .cobranzas-detail-grid {
        grid-template-columns: 1fr;
    }

    .cobranzas-filter-line-search,
    .cobranzas-filter-line-controls {
        grid-template-columns: 1fr;
    }

    .cobranza-detail-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cobranzas-reset-btn {
        min-width: 0;
    }
}

.form-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.form-grid.two {
    grid-template-columns: 1fr 1fr;
}

.form-grid.three {
    grid-template-columns: 1fr 1fr 1fr;
}

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--app-text);
}

input,
select,
textarea {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: white;
    color: var(--app-text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--app-border);
    font-size: 0.95rem;
}

.data-table th {
    color: var(--app-muted);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
    background: #f9f9fb;
}

/* Premium Table Styles */
.table-wrapper-premium {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(106, 122, 150, 0.16);
    background: linear-gradient(180deg, rgba(250,252,255,0.98), rgba(242,247,255,0.94));
}

.data-table-premium {
    width: 100%;
    border-collapse: collapse;
}

.data-table-premium th,
.data-table-premium td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(106, 122, 150, 0.12);
    font-size: 0.85rem;
}

.data-table-premium th {
    color: var(--app-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(248, 251, 255, 0.6);
    border-bottom: 1px solid rgba(106, 122, 150, 0.16);
}

/* ORION - Robustez Visual (Fase 2) */
.data-table td,
.data-table-premium td {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Permitir que celdas de nombres/descripciones sean un poco mas anchas */
.data-table td.col-main,
.data-table-premium td.col-main,
.col-descripcion {
    max-width: 450px;
}

/* Contenedor de botones de accion */
.actions-cell,
td:last-child {
    min-width: 110px;
    white-space: nowrap;
}


.data-table-premium tbody tr:hover {
    background: rgba(248, 251, 255, 0.8);
}

.data-table-premium tbody tr:last-child td {
    border-bottom: none;
}

/* Imagen en vista de lista */
.inventory-list-thumbnail {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    transition: all 0.15s ease;
}

.inventory-list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-list-thumbnail span {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
    text-transform: uppercase;
}

.inventory-list-thumbnail[onclick] {
    cursor: pointer;
}

.inventory-list-thumbnail[onclick]:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

body[data-theme="dark"] .inventory-list-thumbnail {
    background: #1e293b;
    border-color: #334155;
}

body[data-theme="dark"] .inventory-list-thumbnail[onclick]:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.directory-shell {
    display: grid;
    gap: 18px;
}

.directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.directory-search {
    flex: 1 1 420px;
}

.directory-search input {
    width: 100%;
    min-height: 50px;
    border-radius: 16px;
}

.directory-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: #f7f9fc;
}

.directory-view-btn {
    border: 0;
    background: transparent;
    color: var(--app-muted);
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.directory-view-btn.active {
    background: #ffffff;
    color: var(--app-text);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.directory-table-shell {
    border: 1px solid #e1e8f0;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.directory-table td strong {
    font-size: 0.96rem;
}

.action-row.compact {
    gap: 8px;
    justify-content: flex-start;
}

.entity-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.entity-card {
    position: relative;
    border: 1px solid #dde5f0;
    border-radius: 24px;
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.98));
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.entity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.12);
    border-color: #c9d8ee;
}

.entity-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.entity-card-badge,
.entity-card-code {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.entity-card-badge {
    background: #eef5ff;
    border: 1px solid #c8daf8;
    color: #2450a4;
}

.entity-card-code {
    background: #f6f8fb;
    border: 1px solid #dde5ef;
    color: #56667a;
}

.entity-card-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.entity-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f7bff, #5ab3ff);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 16px 28px rgba(15, 123, 255, 0.24);
}

.entity-card-copy strong {
    display: block;
    font-size: 1rem;
    color: #122033;
}

.entity-card-copy p {
    margin-top: 4px;
    color: #67788f;
    font-size: 0.88rem;
}

.entity-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.entity-stat {
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fbff;
}

.entity-stat span {
    display: block;
    color: #75859a;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.entity-stat strong {
    color: #102033;
    font-size: 0.92rem;
}

.entity-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicle-directory-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.vehicle-directory-metric {
    border: 1px solid #dde6f1;
    border-radius: 20px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 4px;
}

.vehicle-directory-metric span {
    color: #70839b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vehicle-directory-metric strong {
    color: #10233c;
    font-size: 1.35rem;
}

.vehicle-directory-metric small {
    color: #8a9bb0;
    font-size: 0.8rem;
}

.vehicle-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
}

.vehicle-directory-card {
    position: relative;
    border: 1px solid #dde5f0;
    border-radius: 26px;
    padding: 15px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,250,255,0.98));
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 13px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.vehicle-directory-card:hover {
    transform: translateY(-3px);
    border-color: #c6d8ee;
    box-shadow: 0 28px 44px rgba(15, 23, 42, 0.12);
}

.vehicle-directory-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vehicle-directory-card-topline-main,
.client-directory-card-topline-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.vehicle-directory-card-topline-actions,
.client-directory-card-topline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.vehicle-directory-card-badge,
.vehicle-directory-card-code {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.vehicle-directory-card-badge {
    background: #edf5ff;
    border: 1px solid #c7daf7;
    color: #2754a7;
}

.vehicle-directory-card-code {
    background: #f8fbff;
    border: 1px solid #dde5ef;
    color: #57677b;
}

.vehicle-directory-card-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.vehicle-directory-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f7bff, #5ab3ff);
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    box-shadow: 0 18px 30px rgba(15, 123, 255, 0.24);
}

.vehicle-directory-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-directory-card-copy strong {
    display: block;
    color: #10233c;
    font-size: 0.97rem;
}

.vehicle-directory-card-copy p {
    margin: 4px 0 0;
    color: #67788f;
    font-size: 0.84rem;
}

.vehicle-directory-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-directory-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #f7fbff;
    border: 1px solid #dde6f1;
    color: #5f728a;
    font-size: 0.78rem;
    font-weight: 700;
}

.vehicle-directory-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vehicle-directory-card-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.vehicle-directory-table-shell .directory-table tbody tr {
    cursor: pointer;
}

.vehicle-table-plate,
.vehicle-table-unit,
.vehicle-table-owner,
.vehicle-table-case {
    display: grid;
    gap: 4px;
}

.vehicle-table-plate strong,
.vehicle-table-unit strong,
.vehicle-table-owner strong,
.vehicle-table-case strong {
    color: #10233c;
    font-size: 0.95rem;
}

.vehicle-table-plate span,
.vehicle-table-unit span,
.vehicle-table-owner span,
.vehicle-table-case span {
    color: #70839b;
    font-size: 0.82rem;
}

.client-directory-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.client-directory-metric {
    border: 1px solid #dde6f1;
    border-radius: 20px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 4px;
}

.client-directory-metric span {
    color: #70839b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-directory-metric strong {
    color: #10233c;
    font-size: 1.35rem;
}

.client-directory-metric small {
    color: #8a9bb0;
    font-size: 0.8rem;
}

.client-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
}

.client-directory-card {
    position: relative;
    border: 1px solid #dde5f0;
    border-radius: 26px;
    padding: 15px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,251,255,0.98));
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 13px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}

.client-directory-card:hover {
    transform: translateY(-3px);
    border-color: #c6d8ee;
    box-shadow: 0 28px 44px rgba(15, 23, 42, 0.12);
}

.client-directory-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(15, 123, 255, 0.08), rgba(55, 200, 171, 0.03));
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.client-directory-card:hover::after,
.client-directory-card:focus-within::after {
    opacity: 1;
}

.client-fidelity-shell {
    display: grid;
    gap: 18px;
}

.client-fidelity-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.client-fidelity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
    gap: 18px;
}

.client-fidelity-card {
    border: 1px solid #dde5f0;
    border-radius: 26px;
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,251,255,0.98));
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.client-fidelity-card:hover {
    transform: translateY(-3px);
    border-color: #c6d8ee;
    box-shadow: 0 28px 44px rgba(15, 23, 42, 0.12);
}

.client-fidelity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.client-fidelity-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.client-fidelity-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.client-fidelity-copy strong {
    color: #10233c;
    font-size: 0.98rem;
    line-height: 1.2;
}

.client-fidelity-copy span {
    color: #67788f;
    font-size: 0.82rem;
}

.client-fidelity-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.client-fidelity-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 18px;
    border: 1px solid #dbe4ef;
    background: #f3f7fb;
    padding: 14px 16px;
}

.client-fidelity-next-copy {
    display: grid;
    gap: 4px;
}

.client-fidelity-next-copy span,
.client-fidelity-strip span {
    color: #70839b;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.client-fidelity-next-copy strong,
.client-fidelity-strip strong {
    color: #112033;
    font-size: 1rem;
}

.client-fidelity-next-copy small {
    color: #7a8ca2;
    font-size: 0.78rem;
}

.client-fidelity-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.client-fidelity-strip > div,
.client-fidelity-docs {
    display: grid;
    gap: 5px;
    border-radius: 18px;
    border: 1px solid #e1e8f1;
    background: #fbfdff;
    padding: 14px 16px;
}

.client-fidelity-docs strong {
    color: #112033;
    font-size: 0.86rem;
}

.client-fidelity-docs span {
    color: #70839b;
    font-size: 0.8rem;
}

.client-directory-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-directory-card-badge,
.client-directory-card-code {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.client-directory-card-badge {
    background: #eefbf7;
    border: 1px solid #c9eadf;
    color: #1d6b4d;
}

.client-directory-card-code {
    background: #f8fbff;
    border: 1px solid #dde5ef;
    color: #57677b;
}

.client-directory-card-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.client-directory-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f7bff, #37c8ab);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 18px 30px rgba(15, 123, 255, 0.2);
}

.client-directory-card-copy strong {
    display: block;
    color: #10233c;
    font-size: 0.97rem;
}

.client-directory-card-copy p {
    margin: 4px 0 0;
    color: #67788f;
    font-size: 0.84rem;
}

.client-directory-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.client-directory-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #f7fbff;
    border: 1px solid #dde6f1;
    color: #5f728a;
    font-size: 0.78rem;
    font-weight: 700;
}

.client-directory-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.client-directory-card-stats .entity-stat strong,
.vehicle-directory-card-stats .entity-stat strong {
    white-space: nowrap;
}

.client-directory-card-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.vehicle-directory-card .btn.icon-only,
.client-directory-card .btn.icon-only {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 12px;
    font-size: 0.92rem;
}

.vehicle-directory-card .btn.danger.subtle,
.client-directory-card .btn.danger.subtle {
    color: #c2415f;
    background: linear-gradient(180deg, #fff1f4 0%, #ffe4ea 100%);
    border: 1px solid #f6c1cf;
    box-shadow: 0 10px 18px rgba(217, 70, 119, 0.14);
}

.vehicle-directory-card .btn.danger.subtle:hover,
.client-directory-card .btn.danger.subtle:hover {
    background: linear-gradient(180deg, #ffe8ee 0%, #ffd8e3 100%);
    border-color: #ef9fb6;
    color: #a83355;
}

.client-directory-table-shell .directory-table tbody tr {
    cursor: pointer;
}

.client-table-doc,
.client-table-name,
.client-table-contact,
.client-table-relationship {
    display: grid;
    gap: 4px;
}

.client-table-doc strong,
.client-table-name strong,
.client-table-contact strong,
.client-table-relationship strong {
    color: #10233c;
    font-size: 0.95rem;
}

.client-table-doc span,
.client-table-name span,
.client-table-contact span,
.client-table-relationship span {
    color: #70839b;
    font-size: 0.82rem;
}

.entity-profile-header-main {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.entity-profile-back {
    border: 1px solid #dbe5f2;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    color: #19314b;
    border-radius: 999px;
    min-height: 42px;
    padding: 0 14px 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.entity-profile-back span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #eef5ff;
    color: #21538c;
    font-weight: 800;
}

.entity-profile-back strong {
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.entity-profile-modal {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    height: calc(100vh - 12px);
    border-radius: 26px;
}

#view-entity-profile {
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.06), transparent 22%),
        linear-gradient(180deg, #f6f9fd 0%, #edf3fa 100%);
}

.entity-workspace-header {
    padding-bottom: 18px;
}

.entity-workspace-content {
    padding: 22px 28px 28px;
}

.entity-workspace-shell {
    min-height: calc(100vh - 170px);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 28px 58px rgba(15, 23, 42, 0.12);
}

.entity-profile-body {
    padding: 0;
    overflow: auto;
}

.entity-profile-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: calc(100vh - 108px);
}

.entity-profile-aside {
    padding: 28px;
    color: #f5f9ff;
    background:
        radial-gradient(circle at top right, rgba(144, 238, 255, 0.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 210, 120, 0.16), transparent 28%),
        linear-gradient(180deg, #19636d 0%, #114b5c 54%, #0b2737 100%);
    display: grid;
    align-content: start;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.entity-profile-aside.vehicle {
    background:
        radial-gradient(circle at top right, rgba(133, 191, 255, 0.2), transparent 30%),
        radial-gradient(circle at bottom left, rgba(132, 255, 221, 0.12), transparent 28%),
        linear-gradient(180deg, #1b4678 0%, #17345e 54%, #0b2237 100%);
}

.entity-profile-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), transparent 36%),
        radial-gradient(circle at 78% 12%, rgba(255,255,255,0.06), transparent 18%);
    pointer-events: none;
}

.entity-profile-kicker {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238, 248, 255, 0.76);
}

.entity-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px rgba(6, 16, 28, 0.24);
}

.entity-profile-aside h2 {
    font-size: 1.7rem;
    line-height: 1.1;
}

.entity-profile-aside p {
    color: rgba(237, 245, 255, 0.82);
    line-height: 1.55;
}

.entity-profile-stats {
    display: grid;
    gap: 12px;
}

.entity-profile-aside .entity-stat {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
}

.entity-profile-aside .entity-stat span {
    color: rgba(237, 245, 255, 0.66);
}

.entity-profile-aside .entity-stat strong {
    color: #ffffff;
}

.entity-profile-highlight {
    border: 1px solid rgba(255,255,255,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.06));
    border-radius: 20px;
    padding: 16px;
    display: grid;
    gap: 6px;
}

.entity-profile-highlight strong {
    color: #ffffff;
}

.entity-profile-highlight span {
    color: rgba(237, 245, 255, 0.74);
}

.entity-history-panel {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.entity-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.entity-history-head strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.entity-history-head span {
    color: rgba(237, 245, 255, 0.62);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.entity-history-list {
    display: grid;
    gap: 10px;
}

.entity-history-item {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    border-radius: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.entity-history-item:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.16);
}

.entity-history-date {
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: grid;
    place-items: center;
    padding: 8px 4px;
}

.entity-history-date b {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
}

.entity-history-date span {
    color: rgba(237, 245, 255, 0.68);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.entity-history-copy {
    display: grid;
    gap: 4px;
}

.entity-history-copy strong {
    color: #ffffff;
    font-size: 0.84rem;
}

.entity-history-copy span {
    color: rgba(237, 245, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.45;
}

.entity-history-empty {
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,0.14);
    padding: 14px;
    color: rgba(237, 245, 255, 0.72);
}

.entity-identity-meta {
    display: grid;
    gap: 10px;
}

.entity-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.entity-tier-chip,
.entity-soft-chip {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.entity-tier-chip.platinum {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
}

.entity-tier-chip.gold {
    background: rgba(255, 214, 102, 0.2);
    border: 1px solid rgba(255, 214, 102, 0.3);
    color: #ffe8a3;
}

.entity-tier-chip.emerald {
    background: rgba(52, 211, 153, 0.18);
    border: 1px solid rgba(52, 211, 153, 0.26);
    color: #b7f4db;
}

.entity-tier-chip.blue {
    background: rgba(96, 165, 250, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #d8ebff;
}

.entity-tier-chip.slate {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #edf4fb;
}

.entity-soft-chip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(237,245,255,0.82);
}

.entity-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entity-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.entity-kpi-card {
    border: 1px solid #dbe6f4;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
    display: grid;
    gap: 6px;
}

.entity-kpi-card span {
    color: #70839b;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.entity-kpi-card strong {
    color: #112033;
    font-size: 1.05rem;
}

.entity-kpi-card small {
    color: #7a8ca2;
    font-size: 0.76rem;
}

.entity-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.entity-vehicle-pill {
    width: 100%;
    border: 1px solid #dbe5f1;
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fc 100%);
    border-radius: 18px;
    padding: 14px;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.entity-vehicle-pill:hover {
    transform: translateY(-1px);
    border-color: #bfd2ec;
    background: linear-gradient(180deg, #eef5ff 0%, #e8f1fd 100%);
}

.entity-vehicle-pill strong {
    color: #132238;
}

.entity-vehicle-pill span {
    color: #70839b;
    font-size: 0.82rem;
}

.entity-calendar-card {
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    margin-bottom: 14px;
}

.entity-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.entity-calendar-head strong {
    color: #132238;
    text-transform: capitalize;
}

.entity-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.entity-calendar-grid.labels span {
    color: #7a8ca2;
    font-size: 0.72rem;
    text-align: center;
}

.entity-calendar-cell {
    min-height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(215, 226, 240, 0.9);
    color: #1b2a3f;
    font-size: 0.82rem;
}

.entity-calendar-cell.muted {
    background: transparent;
    border-color: transparent;
}

.entity-calendar-cell.has-event {
    background: linear-gradient(180deg, #ddf4ea 0%, #d1f0e2 100%);
    border-color: #a9dcc4;
    color: #0f6240;
    font-weight: 800;
}

.entity-next-list,
.entity-doc-list {
    display: grid;
    gap: 10px;
}

.entity-next-item,
.entity-doc-item {
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f9fbfe 0%, #f2f6fb 100%);
}

.entity-next-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.entity-next-date {
    border-radius: 14px;
    background: #eaf1f9;
    border: 1px solid #d8e2ee;
    min-height: 42px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #17314f;
}

.entity-next-copy {
    display: grid;
    gap: 4px;
}

.entity-next-copy strong,
.entity-doc-item strong {
    color: #132238;
}

.entity-next-copy span,
.entity-doc-item span {
    color: #70839b;
    font-size: 0.82rem;
}

.entity-doc-item {
    display: grid;
    gap: 4px;
}

.entity-doc-item small {
    color: #8a9bb0;
    font-size: 0.76rem;
}

.entity-activity-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 180px;
}

.entity-activity-bar {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.entity-activity-column {
    width: 100%;
    height: 116px;
    border-radius: 18px;
    background: linear-gradient(180deg, #edf3f9 0%, #dde7f3 100%);
    padding: 10px;
    display: flex;
    align-items: end;
}

.entity-activity-column span {
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(180deg, #16a6ff 0%, #0f7bff 100%);
    box-shadow: 0 10px 18px rgba(15, 123, 255, 0.18);
}

.entity-activity-bar strong {
    color: #132238;
}

.entity-activity-bar small {
    color: #70839b;
    text-transform: capitalize;
}

.entity-profile-span-full {
    grid-column: 1 / -1;
}

.entity-profile-main {
    padding: 28px;
    display: grid;
    gap: 18px;
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.08), transparent 22%),
        radial-gradient(circle at bottom left, rgba(28, 188, 160, 0.06), transparent 18%),
        linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.entity-profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.entity-profile-section {
    border: 1px solid #e1e8f0;
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,251,255,0.96));
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.entity-profile-main > .entity-profile-section:not(.entity-profile-section-premium) {
    min-height: 320px;
}

.entity-profile-section-premium {
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.96));
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08);
}

.entity-profile-section-premium::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0f7bff, #58b7ff);
    opacity: 0.95;
}

.entity-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.entity-profile-section-head strong {
    font-size: 1rem;
}

.entity-profile-section-head span {
    color: #74859a;
    font-size: 0.82rem;
}

.entity-profile-section-head {
    position: relative;
}

.entity-profile-section-head::after {
    content: "";
    margin-left: auto;
    width: 54px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 123, 255, 0.22), rgba(88, 183, 255, 0.08));
}

.entity-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entity-pill {
    border: 1px solid #d8e4f4;
    background: linear-gradient(180deg, #eef5ff 0%, #e7f0ff 100%);
    color: #234c92;
    border-radius: 999px;
    min-height: 38px;
    padding: 0 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
}

.entity-timeline {
    display: grid;
    gap: 10px;
}

.entity-field-wide {
    grid-column: 1 / -1;
}

.entity-vehicle-photo-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
    align-items: start;
}

.entity-vehicle-photo-preview {
    min-height: 220px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.08), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #eff5fb 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
}

.entity-vehicle-photo-preview img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}

.entity-photo-empty {
    color: #73869f;
    font-weight: 700;
}

.entity-vehicle-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.file-trigger {
    position: relative;
    overflow: hidden;
}

.file-trigger input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.entity-timeline-item {
    width: 100%;
    border: 1px solid #e0e8f0;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
    border-radius: 18px;
    padding: 14px 16px;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.entity-timeline-item:hover {
    border-color: #bfd3f2;
    background: linear-gradient(180deg, #eef5ff 0%, #e8f1ff 100%);
}

.entity-timeline-item strong {
    color: #152235;
}

.entity-timeline-item span {
    color: #6d8097;
}

.fuel-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fb 100%);
}

.fuel-control input[type="range"] {
    width: 100%;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f7bff 0%, #0f7bff 0%, #d9e3f1 0%, #d9e3f1 100%);
    outline: none;
}

.fuel-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #0f7bff;
    box-shadow: 0 6px 16px rgba(15, 123, 255, 0.25);
    cursor: pointer;
}

.fuel-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 0 11px;
    font-size: 0.78rem;
    color: var(--app-muted);
}

.fuel-scale span {
    text-align: center;
}

.fuel-scale span:first-child {
    text-align: left;
}

.fuel-scale span:last-child {
    text-align: right;
}

.fuel-value {
    font-weight: 700;
    color: #0f172a;
}

.inline-inspection-row {
    display: flex;
    gap: 12px;
    align-items: end;
}

.reception-form-host {
    min-width: 0;
    max-width: 1120px;
    margin: 0 auto;
}

.expediente-header-copy {
    display: grid;
    gap: 4px;
}

.expediente-header-kicker {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5e7390;
}

.expediente-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.expediente-hero {
    margin-bottom: 20px;
}

.expediente-hero-main {
    border: 1px solid #d9e5f1;
    border-radius: 26px;
    padding: 22px;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.14), transparent 28%),
        linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 18px;
}

.expediente-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.expediente-badge {
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d4e2f3;
    background: rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.expediente-badge small {
    color: #69819d;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.expediente-badge strong {
    color: #122033;
    font-size: 0.92rem;
}

.expediente-hero-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.expediente-kpi-card {
    min-width: 0;
    border: 1px solid #dce7f2;
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    display: grid;
    gap: 8px;
}

.expediente-kpi-card span {
    color: #70849b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.expediente-kpi-card strong {
    color: #132033;
    font-size: 1.02rem;
    line-height: 1.3;
}

.expediente-kpi-card small {
    color: #60748d;
    font-size: 0.84rem;
    line-height: 1.45;
}

.expediente-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.expediente-sidebar,
.expediente-main {
    min-width: 0;
}

.expediente-sidebar {
    display: grid;
    gap: 16px;
}

.expediente-sidecard,
.expediente-panel-card {
    border: 1px solid var(--app-border);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
    padding: 20px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.expediente-sidecard-primary {
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.14), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
}

.expediente-sidecard-kicker {
    display: block;
    color: #6a819d;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    margin-bottom: 10px;
}

.expediente-sidecard-primary strong {
    display: block;
    color: #132033;
    font-size: 1.14rem;
    margin-bottom: 14px;
}

.expediente-sidecard-head,
.expediente-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.expediente-sidecard-head strong,
.expediente-panel-head strong {
    color: #132033;
    font-size: 0.98rem;
}

.expediente-sidecard-head span,
.expediente-panel-head span {
    color: #6d8199;
    font-size: 0.78rem;
    font-weight: 700;
}

.expediente-timeline {
    display: grid;
    gap: 12px;
}

.expediente-timeline-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.expediente-timeline-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cfe0f2;
    background: linear-gradient(180deg, #fafdff 0%, #eef4fb 100%);
    color: #234c92;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.expediente-timeline-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-top: 4px;
}

.expediente-timeline-copy strong {
    color: #162336;
    font-size: 0.93rem;
}

.expediente-timeline-copy small {
    color: #70839a;
    font-size: 0.8rem;
}

.expediente-quickfacts {
    display: grid;
    gap: 10px;
}

.expediente-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe5ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    padding: 12px 14px;
}

.expediente-fact span {
    color: #6f8298;
    font-size: 0.81rem;
}

.expediente-fact strong {
    color: #142133;
    font-size: 0.9rem;
}

.expediente-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.expediente-tab {
    border: 1px solid #d9e3ef;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
    color: #4e637c;
    border-radius: 999px;
    min-height: 42px;
    padding: 0 18px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.expediente-tab:hover {
    border-color: #b9cce8;
    color: #163156;
}

.expediente-tab.active {
    border-color: #0f7bff;
    background: linear-gradient(180deg, #0f7bff 0%, #0a67d9 100%);
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(15, 123, 255, 0.24);
}

.expediente-content-panel {
    border-radius: 26px;
    padding: 0;
    overflow: hidden;
}

.expediente-content-panel #expediente-tab-content {
    padding: 22px;
}

.expediente-overview-grid,
.expediente-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.expediente-overview-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.expediente-overview-metrics div,
.expediente-route-row {
    border: 1px solid #dce5ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px 14px;
    display: grid;
    gap: 6px;
}

.expediente-overview-metrics span,
.expediente-route-row span {
    color: #6f839c;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.expediente-overview-metrics strong,
.expediente-route-row strong {
    color: #132033;
    font-size: 0.98rem;
}

.expediente-route-list,
.expediente-mini-list {
    display: grid;
    gap: 10px;
}

.expediente-mini-list span {
    border: 1px solid #dbe5ef;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.82);
    color: #20324a;
    font-size: 0.86rem;
}

.reception-page-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--app-border);
    border-radius: 22px;
    background: var(--app-panel);
    box-shadow: var(--shadow-sm);
    overflow: visible !important;
    overflow-y: visible !important;
}

.reception-form-host .modal-header,
.reception-form-host .modal-body,
.reception-form-host .modal-footer {
    background: transparent;
}

.reception-form-host .modal-header {
    position: static !important;
    top: auto !important;
}

.reception-form-host .modal-body {
    padding: 24px;
}

.reception-form-host .modal-footer {
    padding: 0 24px 24px;
}

#view-recepcion .app-content,
#view-recepcion .reception-form-host,
#view-recepcion .reception-page-card,
#view-recepcion .reception-page-card .modal-body {
    overflow: visible !important;
}

body[data-theme="dark"] .expediente-header-kicker,
body[data-theme="dark"] .expediente-sidecard-head span,
body[data-theme="dark"] .expediente-panel-head span,
body[data-theme="dark"] .expediente-fact span,
body[data-theme="dark"] .expediente-overview-metrics span,
body[data-theme="dark"] .expediente-route-row span,
body[data-theme="dark"] .expediente-timeline-copy small,
body[data-theme="dark"] .expediente-kpi-card span,
body[data-theme="dark"] .expediente-kpi-card small,
body[data-theme="dark"] .expediente-badge small {
    color: #95a8c2;
}

body[data-theme="dark"] .expediente-hero-main,
body[data-theme="dark"] .expediente-sidecard,
body[data-theme="dark"] .expediente-panel-card,
body[data-theme="dark"] .expediente-kpi-card,
body[data-theme="dark"] .expediente-badge,
body[data-theme="dark"] .expediente-fact,
body[data-theme="dark"] .expediente-overview-metrics div,
body[data-theme="dark"] .expediente-route-row,
body[data-theme="dark"] .expediente-mini-list span,
body[data-theme="dark"] .expediente-timeline-dot,
body[data-theme="dark"] .expediente-tab {
    border-color: rgba(124, 146, 175, 0.22);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(12, 19, 34, 0.96) 100%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .expediente-sidecard-primary,
body[data-theme="dark"] .expediente-hero-main {
    background:
        radial-gradient(circle at top right, rgba(56, 139, 255, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(17, 25, 40, 0.96) 0%, rgba(10, 16, 30, 0.98) 100%);
}

body[data-theme="dark"] .expediente-badge strong,
body[data-theme="dark"] .expediente-kpi-card strong,
body[data-theme="dark"] .expediente-sidecard-head strong,
body[data-theme="dark"] .expediente-panel-head strong,
body[data-theme="dark"] .expediente-fact strong,
body[data-theme="dark"] .expediente-overview-metrics strong,
body[data-theme="dark"] .expediente-route-row strong,
body[data-theme="dark"] .expediente-mini-list span,
body[data-theme="dark"] .expediente-timeline-copy strong,
body[data-theme="dark"] .expediente-sidecard-primary strong {
    color: #edf4ff;
}

body[data-theme="dark"] .expediente-tab {
    color: #bfd2ee;
}

body[data-theme="dark"] .expediente-tab.active {
    border-color: #3890ff;
    background: linear-gradient(180deg, #2180ff 0%, #1567db 100%);
    color: #ffffff;
}

@media (max-width: 1180px) {
    .expediente-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expediente-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .expediente-hero-main,
    .expediente-sidecard,
    .expediente-panel-card,
    .expediente-content-panel #expediente-tab-content {
        padding: 16px;
    }

    .expediente-hero-grid,
    .expediente-overview-grid,
    .expediente-content-grid,
    .expediente-overview-metrics {
        grid-template-columns: 1fr;
    }

    .expediente-header-actions {
        margin-left: 0 !important;
        justify-content: flex-start;
    }
}

.reception-page-close {
    min-width: 92px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.9rem;
    padding: 10px 14px;
}


.reception-chip {
    width: 100%;
    border: 1px solid #d7dee8;
    background: #eef2f6;
    color: #607083;
    border-radius: 14px;
    min-height: 52px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
}

.reception-chip.done {
    background: #e8f8ef;
    border-color: #9ed8b0;
    color: #17653a;
}

.reception-chip .chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a4b1c0;
    flex: 0 0 auto;
}

.reception-chip.done .chip-dot {
    background: #23a55a;
}

.photo-dropzone {
    border: 1px dashed #b7c7dd;
    border-radius: 16px;
    background: #f7fafe;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.photo-dropzone.dragging {
    border-color: #0f7bff;
    background: #eef5ff;
}

.photo-drop-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--app-muted);
    font-size: 0.88rem;
}

.photo-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.photo-thumb {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    padding: 6px;
    min-height: 110px;
}

.photo-thumb img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.photo-thumb span {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--app-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(8, 17, 24, 0.76);
    color: #fff;
    cursor: pointer;
}

.lookup-suggestions {
    margin-top: 8px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.lookup-item {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    cursor: pointer;
}

.lookup-item strong {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lookup-item + .lookup-item {
    border-top: 1px solid #edf2f7;
}

.lookup-item:hover {
    background: #f8fbff;
}

.lookup-item span {
    color: var(--app-muted);
    font-size: 0.82rem;
}

.lookup-item.empty {
    cursor: default;
    background: #f8fafc;
}

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge.success {
    background: #e3f8e9;
    color: #1e8e3e;
}

.badge.warning {
    background: #fef1e5;
    color: #d97706;
}

.badge.danger {
    background: #feebeb;
    color: #dc2626;
}

.badge.info {
    background: #e8f0fe;
    color: #1967d2;
}

/* ----------------------------------
   5. SPECIFIC VIEWS LAYOUTS
---------------------------------- */

/* Dashboard / Stats Grid */
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card {
    background: white;
    border: 1px solid var(--app-border);
    padding: 24px;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.metric-card h4 {
    color: var(--app-muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.metric-card .value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--app-text);
}

.metric-card .trend {
    font-size: 0.85rem;
    margin-top: 8px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
}

.trend.up {
    background: #e3f8e9;
    color: #1e8e3e;
}

/* Two column layout */
.layout-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Large image/hero for inspection */
.inspection-visual {
    width: 100%;
    height: 520px;
    background: linear-gradient(180deg, #fcfcfd 0%, #f6f8fb 100%);
    border-radius: 22px;
    border: 1px solid #e3e9f2;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    padding: 18px;
}

.inspection-diagram-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.inspection-diagram-image-wrap {
    position: absolute;
    inset: 20px 20px 64px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inspection-diagram-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inspection-diagram-figure {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 96%;
    max-height: 96%;
    line-height: 0;
}

.inspection-marker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.inspection-marker-layer .damage-pin {
    pointer-events: auto;
}

.inspection-diagram-image {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.04) brightness(1.01);
    user-select: none;
    pointer-events: none;
}

.inspection-diagram-image--pickup-front {
    max-width: 72%;
    max-height: 72%;
}

.inspection-diagram-image--camion-back {
    max-width: 78%;
    max-height: 78%;
}


.inspection-meta-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f7f9fc;
    border: 1px solid #e1e8f0;
}

.inspection-meta-strip strong {
    color: #1f2937;
    font-size: 0.95rem;
}

.inspection-meta-strip span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dfe7f2;
    color: #627288;
    font-size: 0.78rem;
    font-weight: 700;
}

.inspection-issue-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    margin-bottom: 14px;
}

.inspection-issue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inspection-photo-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inspection-photo-drop {
    border: 1px dashed #cfd9e6;
    border-radius: 14px;
    background: #f8fbff;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    overflow: hidden;
}

.inspection-photo-drop.dragging,
.inspection-photo-drop:hover {
    border-color: #8fb4ff;
    background: #eef5ff;
}

.inspection-photo-drop input {
    display: none;
}

.inspection-photo-drop span {
    font-size: 0.84rem;
    font-weight: 700;
    color: #5a6c82;
}

.inspection-photo-preview {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dde5ef;
    background: #fff;
    max-width: 180px;
}

.inspection-photo-preview img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.damage-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: #ff4d3f;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(255, 77, 63, 0.28);
    cursor: grab;
}

.inspection-marker {
    cursor: grab;
}

.inspection-add-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    border: 1px solid #d7e0ed;
    background: rgba(255, 255, 255, 0.92);
    color: #5f6e82;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
}

.inspection-modal .layout-2col > .panel:last-child #inspection-issues {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable both-edges;
}

.inspection-modal .layout-2col > .panel:last-child {
    min-width: 380px;
    scrollbar-gutter: stable both-edges;
}

.inspection-meta-strip-fixed {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(247, 249, 252, 0.98) 0%, rgba(247, 249, 252, 0.94) 100%);
    backdrop-filter: blur(8px);
}

.inspection-issues-shell {
    display: grid;
    gap: 14px;
    min-height: 360px;
    align-content: start;
}

.inspection-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px 22px;
    border: 1px dashed #d8e1ec;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
    color: #5a6778;
}

.inspection-empty-state strong {
    display: block;
    color: #1f2937;
    font-size: 1rem;
    margin-bottom: 8px;
}

.inspection-empty-state p {
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

.inspection-issue-card {
    gap: 16px;
    padding: 16px;
    margin-bottom: 0;
}

.inspection-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.inspection-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inspection-field > span {
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.inspection-field-full {
    grid-column: 1 / -1;
}

.inspection-type-chip {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #dde5ef;
    color: #243142;
    font-weight: 600;
}

.inspection-photo-field {
    gap: 10px;
}

.inspection-photo-empty {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d6e0eb;
    border-radius: 14px;
    background: #fafcff;
    color: #738195;
    font-size: 0.86rem;
}

.inspection-visual {
    min-height: 520px;
}

.inspection-add-hint {
    min-width: 320px;
}

/* Kanban */
.taller-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.taller-metric-card {
    border-radius: 22px;
    border: 1px solid rgba(187, 204, 224, 0.82);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 32%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 7px;
}

.taller-metric-card span {
    color: #72839a;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.taller-metric-card strong {
    color: #112033;
    font-size: 1.65rem;
    line-height: 1;
}

.taller-metric-card small {
    color: #7f90a6;
    font-size: 0.8rem;
}

.taller-toolbar-panel {
    margin-bottom: 20px;
    border-radius: 22px;
    border: 1px solid rgba(187, 204, 224, 0.82);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.94));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
}

.taller-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.taller-search {
    flex: 1 1 340px;
}

.taller-toolbar select {
    min-width: 180px;
}

.taller-workspace {
    margin-bottom: 18px;
}

.taller-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(320px, 1fr));
    gap: 18px;
    overflow-x: auto;
    padding: 2px 2px 12px;
}

.taller-board.is-hidden {
    display: none;
}

.taller-column {
    border-radius: 24px;
    border: 1px solid rgba(201, 214, 230, 0.92);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
    min-height: 320px;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.taller-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid #e7eef6;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(244, 248, 253, 0.92));
    position: relative;
}

.taller-column-head::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc, #2563eb);
}

.taller-column-head strong {
    color: #112033;
    font-size: 0.92rem;
}

.taller-column-head span {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #245187;
    font-size: 0.8rem;
    font-weight: 800;
}

.taller-column-body {
    padding: 16px;
    display: grid;
    gap: 14px;
    align-content: start;
}

.taller-empty {
    border-radius: 16px;
    border: 1px dashed #d7e1ec;
    background: #fbfdff;
    color: #7b8da4;
    font-size: 0.84rem;
    padding: 16px;
}

.taller-card {
    border-radius: 20px;
    border: 1px solid #dde6f1;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
    padding: 16px;
    display: grid;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.taller-card:hover {
    transform: translateY(-2px);
    border-color: #b9cde7;
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.1);
}

.taller-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.taller-card-head strong {
    display: block;
    color: #112033;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

.taller-card-head span {
    color: #6d7f95;
    font-size: 0.8rem;
}

.taller-card-body p {
    margin: 0;
    color: #243548;
    font-size: 0.86rem;
    line-height: 1.45;
}

.taller-next-step {
    border-radius: 16px;
    border: 1px solid #e5edf6;
    background: linear-gradient(180deg, #f7fbff, #f3f8fe);
    padding: 11px 12px;
    display: grid;
    gap: 3px;
}

.taller-next-step span {
    color: #7890a9;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.taller-next-step strong {
    color: #13253a;
    font-size: 0.82rem;
}

.inventory-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.inventory-kpi {
    border-radius: 18px;
    border: 1px solid #dbe4ef;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 18px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 6px;
}

.inventory-kpi span {
    color: #7b8da4;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.inventory-kpi strong {
    color: #112033;
    font-size: 1.45rem;
}

.inventory-product-shell {
    border-radius: 22px;
    border: 1px solid #dbe4ef;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    padding: 18px;
    display: grid;
    gap: 14px;
    position: relative;
}

.inventory-product-top {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.inventory-product-thumb {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(180deg, #e6eef8, #dbe7f5);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #27476d;
    font-weight: 700;
}

.inventory-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-product-copy {
    display: grid;
    gap: 5px;
}

.inventory-product-code {
    color: #6e83a0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.inventory-product-copy strong {
    color: #0f172a;
    font-size: 1rem;
}

.inventory-product-copy span {
    color: #70839b;
    font-size: 0.84rem;
}

.inventory-product-stats,
.inventory-product-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inventory-product-stats span,
.inventory-product-meta span {
    border-radius: 14px;
    border: 1px solid #e5edf6;
    background: #fbfdff;
    padding: 10px 12px;
    color: #64748b;
    font-size: 0.8rem;
}

.inventory-product-stats strong {
    display: block;
    margin-top: 4px;
    color: #112033;
    font-size: 0.92rem;
}

.inventory-product-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-sale-history-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #edf2f7;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.48fr);
    gap: 22px;
    align-items: start;
}

.pos-empty-state {
    grid-column: 1 / -1;
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    border: 2px dashed #e2e8f0;
    color: #94a3b8;
}

.pos-empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #cbd5e1;
}


.pos-catalog-panel {
    border-radius: 24px;
    overflow: hidden;
    order: 2;
}

.pos-checkout-panel {
    order: 1;
}

.pos-catalog-panel .panel-header {
    margin: -24px -24px 18px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(106, 122, 150, 0.12);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(245, 249, 255, 0.94));
}

.pos-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.pos-catalog-list {
    display: grid;
    gap: 12px;
}

.pos-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(106, 122, 150, 0.14);
    background: rgba(255, 255, 255, 0.72);
}

.pos-view-toggle .btn.active {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    border-color: transparent;
}

.pos-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.pos-pagination span {
    color: #66758d;
    font-size: 0.84rem;
    font-weight: 700;
}

.standard-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(243, 248, 255, 0.94));
}

.standard-pagination span {
    color: #66758d;
    font-size: 0.84rem;
    font-weight: 700;
}

.standard-pagination-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-product-card {
    border: 1px solid rgba(106, 122, 150, 0.16);
    border-radius: 18px;
    padding: 14px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(243, 248, 255, 0.95));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 10px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pos-product-list {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.pos-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
    border-color: rgba(52, 105, 179, 0.2);
}

.pos-product-top {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.pos-product-thumb {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
    border: 1px solid #d6e1ed;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #1c3551;
    font-weight: 800;
}

.pos-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-product-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pos-product-copy strong {
    color: #10233c;
    font-size: 0.95rem;
}

.pos-product-copy span,
.pos-product-copy small {
    color: #66758d;
    font-size: 0.8rem;
}

.pos-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pos-product-meta span {
    border-radius: 12px;
    background: #f6f9fc;
    border: 1px solid #e1e8f1;
    padding: 6px 9px;
    color: #516276;
    font-size: 0.77rem;
}

.pos-product-actions {
    display: flex;
    justify-content: flex-end;
}

.pos-product-list .pos-product-actions {
    align-self: center;
}

.pos-product-actions .btn {
    min-height: 36px;
}

.pos-customer-card,
.pos-summary-card {
    border: 1px solid rgba(106, 122, 150, 0.16);
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.94));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    margin-bottom: 16px;
}

.pos-customer-card,
.pos-customer-card *,
.pos-summary-card,
.pos-summary-card * {
    box-sizing: border-box;
}

.pos-customer-card label,
.pos-summary-card label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.pos-customer-card input,
.pos-customer-card textarea,
.pos-summary-card input,
.pos-summary-card textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#pos-observaciones {
    display: block;
    min-height: 42px;
}

.pos-cart-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.pos-cart-item {
    display: grid;
    gap: 12px;
    border: 1px solid #dce5f0;
    border-radius: 18px;
    padding: 14px;
    background: #fbfdff;
}

.pos-cart-item-copy {
    display: grid;
    gap: 4px;
}

.pos-cart-name-input {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid #d6e2f0;
    background: #ffffff;
    padding: 10px 12px;
    font-weight: 700;
    color: #10233c;
}

.pos-cart-item-copy strong {
    color: #10233c;
}

.pos-cart-item-copy span {
    color: #66758d;
    font-size: 0.82rem;
}

.pos-cart-item-controls {
    display: grid;
    grid-template-columns: 86px 120px minmax(90px, auto) 36px;
    gap: 10px;
    align-items: center;
}

.pos-cart-field,
.pos-cart-line-total {
    display: grid;
    gap: 6px;
}

.pos-cart-field span,
.pos-cart-line-total span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #66758d;
}

.pos-cart-field input {
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid #d6e2f0;
    background: #ffffff;
    padding: 8px 10px;
    color: #10233c;
    font-weight: 700;
}

.pos-cart-line-total {
    align-self: center;
}

.pos-cart-line-total strong {
    color: #10233c;
}

.pos-total-box {
    border-radius: 18px;
    background: linear-gradient(135deg, #0f7bff, #0c66d4);
    color: #fff;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
}

.pos-total-box span {
    font-size: 0.8rem;
    opacity: 0.86;
}

.pos-total-box strong {
    font-size: 1.45rem;
}

.pos-checkout-btn {
    min-height: 50px;
    font-weight: 800;
}

.pos-sale-history-card strong {
    color: #112033;
}

.pos-sale-history-meta {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.pos-sale-history-meta small {
    color: #6a7a90;
}

.taller-card-meta {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.taller-card-meta span {
    color: #70839b;
    font-size: 0.78rem;
}

.taller-card-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 2px;
}

/* Priority badges */
.taller-card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.priority-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.3;
}

.priority-badge.danger {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.2);
}

.priority-badge.warning {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.priority-badge.info {
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    border: 1px solid rgba(0, 102, 204, 0.15);
}

/* Elapsed timer colors */
.elapsed-timer {
    font-weight: 600;
    font-size: 0.78rem;
}

.elapsed-green { color: #34c759; }
.elapsed-yellow { color: #ff9500; }
.elapsed-red { color: #ff3b30; }

body[data-theme="dark"] .elapsed-green { color: #47d7a1; }
body[data-theme="dark"] .elapsed-yellow { color: #ffb24a; }
body[data-theme="dark"] .elapsed-red { color: #ff6b8a; }

/* Drag and drop */
.taller-card[draggable="true"] {
    cursor: grab;
}

.taller-card[draggable="true"]:active {
    cursor: grabbing;
}

.taller-column {
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    min-height: 200px;
}

.taller-column.drag-over {
    background: rgba(0, 102, 204, 0.06);
    border: 2px dashed rgba(0, 102, 204, 0.3);
}

body[data-theme="dark"] .taller-column.drag-over {
    background: rgba(93, 169, 255, 0.08);
    border-color: rgba(93, 169, 255, 0.25);
}

/* Bay type badge */
.taller-bay-type-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    margin-left: 6px;
}

body[data-theme="dark"] .taller-bay-type-badge {
    background: rgba(93, 169, 255, 0.12);
    color: #5da9ff;
}

/* Bay state dot */
.taller-bay-state-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

.taller-bay-state-dot.dot-green {
    background: #34c759;
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.4);
}

.taller-bay-state-dot.dot-red {
    background: #ff3b30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.4);
}

/* Assignment warnings */
.taller-assign-warnings {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 149, 0, 0.08);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.taller-assign-warnings.hidden { display: none; }

.assignment-warnings p {
    font-size: 0.84rem;
    color: #ff9500;
    margin: 4px 0;
}

body[data-theme="dark"] .taller-assign-warnings {
    background: rgba(255, 178, 74, 0.1);
    border-color: rgba(255, 178, 74, 0.2);
}

body[data-theme="dark"] .assignment-warnings p {
    color: #ffb24a;
}

/* Toolbar actions */
.taller-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

#taller-sync-toggle.sync-on {
    color: #34c759;
}

#taller-sync-toggle.sync-off {
    color: #86868b;
}

body[data-theme="dark"] #taller-sync-toggle.sync-on {
    color: #47d7a1;
}

/* Card hover effect for click-to-open */
.taller-card {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.taller-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

body[data-theme="dark"] .taller-card:hover {
    box-shadow: 0 8px 24px rgba(2, 8, 20, 0.3);
}

/* Danger ghost button */
.btn.ghost.small.danger {
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.2);
}

.btn.ghost.small.danger:hover {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.35);
}

body[data-theme="dark"] .btn.ghost.small.danger {
    color: #ff6b8a;
    border-color: rgba(255, 107, 138, 0.2);
}

body[data-theme="dark"] .btn.ghost.small.danger:hover {
    background: rgba(255, 107, 138, 0.1);
}

.taller-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.taller-secondary-grid.mode-operacion {
    display: grid !important;
}

.taller-secondary-grid.mode-bahias,
.taller-secondary-grid.mode-tecnicos {
    grid-template-columns: 1fr !important;
}

.taller-secondary-grid.mode-bahias #taller-tecnicos-panel,
.taller-secondary-grid.mode-tecnicos #taller-bahias-panel {
    display: none !important;
}

/* ── Bahía Cards ───────────────────────────────── */
#bahias-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    width: 100%;
}

@media (max-width: 1100px) {
    #bahias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 700px) {
    #bahias-grid {
        grid-template-columns: 1fr !important;
    }
}

#bahias-grid .taller-bay-card {
    min-width: 0 !important;
    width: auto !important;
}

#tecnicos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    width: 100%;
}

@media (max-width: 1100px) {
    #tecnicos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 700px) {
    #tecnicos-grid {
        grid-template-columns: 1fr !important;
    }
}

#tecnicos-grid .taller-tech-card {
    min-width: 0 !important;
    width: auto !important;
}

.taller-bay-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.taller-bay-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

body[data-theme="dark"] .taller-bay-card {
    background: #1e293b;
    border-color: #334155;
}

body[data-theme="dark"] .taller-bay-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.taller-bay-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    gap: 8px;
}

.taller-bay-head strong {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

body[data-theme="dark"] .taller-bay-head strong {
    color: #f1f5f9;
}

.taller-bay-type-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e0e7ff;
    color: #3730a3;
    margin-left: 6px;
}

body[data-theme="dark"] .taller-bay-type-badge {
    background: #312e81;
    color: #c7d2fe;
}

.taller-bay-state-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.taller-bay-state-dot.dot-green { background: #22c55e; }
.taller-bay-state-dot.dot-red { background: #ef4444; }

.taller-bay-occupancy {
    padding: 0 16px 12px;
    background: transparent;
}

.taller-bay-occupancy .taller-bay-plate {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 2px;
    background: transparent;
}

body[data-theme="dark"] .taller-bay-occupancy .taller-bay-plate {
    color: #f1f5f9 !important;
}

.taller-bay-occupancy strong {
    font-size: 0.82rem;
    color: #475569;
    display: block;
    background: transparent;
}

body[data-theme="dark"] .taller-bay-occupancy strong {
    color: #cbd5e1 !important;
}

.taller-bay-occupancy small {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
    margin-top: 2px;
    background: transparent;
}

body[data-theme="dark"] .taller-bay-occupancy small {
    color: #94a3b8 !important;
}

.taller-bay-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px 10px;
    font-size: 0.78rem;
    color: #64748b;
}

body[data-theme="dark"] .taller-bay-meta {
    color: #94a3b8;
}

.taller-mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 16px 14px;
    border-top: 1px solid #f1f5f9;
}

body[data-theme="dark"] .taller-mini-actions {
    border-top-color: #334155;
}

.taller-mini-actions .btn {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
}

/* ── Tech Cards ────────────────────────────────── */
#tecnicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.taller-tech-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.taller-tech-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

body[data-theme="dark"] .taller-tech-card {
    background: #1e293b;
    border-color: #334155;
}

body[data-theme="dark"] .taller-tech-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.taller-tech-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 8px;
    gap: 8px;
}

.taller-tech-head strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

body[data-theme="dark"] .taller-tech-head strong {
    color: #f1f5f9;
}

.taller-tech-card > p {
    padding: 0 16px 6px;
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

body[data-theme="dark"] .taller-tech-card > p {
    color: #94a3b8;
}

.taller-tech-card > small {
    padding: 0 16px 10px;
    font-size: 0.74rem;
    color: #94a3b8;
    display: block;
    word-break: break-word;
}

.taller-tech-card .taller-mini-actions {
    padding: 10px 16px 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

body[data-theme="dark"] .taller-tech-card .taller-mini-actions {
    border-top-color: #334155;
}

.taller-bay-card strong,
.taller-tech-card strong {
    color: #112033;
    font-size: 0.92rem;
}

.taller-bay-occupancy {
    border-radius: 18px;
    border: 1px solid #e3ebf5;
    background: linear-gradient(180deg, #f9fbff, #f4f8fe);
    padding: 14px;
    display: grid;
    gap: 4px;
}

.taller-bay-occupancy.busy {
    border-color: #c9daf2;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.09), transparent 34%),
        linear-gradient(180deg, #f8fbff, #f1f6fd);
}

.taller-bay-plate {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: #0f172a;
    color: #f8fbff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.taller-bay-occupancy strong {
    font-size: 1rem;
}

.taller-bay-occupancy small {
    color: #73859c;
    font-size: 0.8rem;
}

.taller-bay-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.taller-bay-meta span {
    border-radius: 14px;
    border: 1px solid #e5edf6;
    background: #fbfdff;
    padding: 10px 12px;
    color: #5d7088;
    font-size: 0.79rem;
}

.taller-bay-card p,
.taller-tech-card p {
    margin: 0;
    color: #5d7088;
    font-size: 0.84rem;
}

.taller-bay-card small,
.taller-tech-card small {
    color: #8092a8;
    font-size: 0.78rem;
}

.taller-mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.taller-column.lane-por_revisar .taller-column-head::before {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.taller-column.lane-esperando_aprobacion .taller-column-head::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.taller-column.lane-por_iniciar .taller-column-head::before {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.taller-column.lane-en_proceso .taller-column-head::before {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.taller-column.lane-hallazgo_adicional .taller-column-head::before {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.taller-column.lane-listo_entrega .taller-column-head::before {
    background: linear-gradient(90deg, #34d399, #10b981);
}

#view-taller .app-tabs {
    gap: 10px;
    padding: 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 255, 0.88));
    border: 1px solid rgba(191, 209, 232, 0.7);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

#view-taller .app-tab {
    min-width: 126px;
    padding: 12px 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #5e728b;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#view-taller .app-tab::after {
    display: none;
}

#view-taller .app-tab:hover {
    color: #17324f;
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}

#view-taller .app-tab.active {
    color: #0f4ea8;
    background: linear-gradient(180deg, rgba(225, 239, 255, 0.96), rgba(236, 244, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(123, 168, 232, 0.45), 0 10px 20px rgba(37, 99, 235, 0.08);
}

#view-taller .taller-tab-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 0.95rem;
    line-height: 1;
}

body[data-theme="dark"] .taller-metric-card,
body[data-theme="dark"] .taller-column,
body[data-theme="dark"] .taller-card,
body[data-theme="dark"] .taller-bay-card,
body[data-theme="dark"] .taller-tech-card {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .taller-column-head,
body[data-theme="dark"] .taller-empty,
body[data-theme="dark"] .taller-card,
body[data-theme="dark"] .taller-card-meta span,
body[data-theme="dark"] .taller-bay-card p,
body[data-theme="dark"] .taller-tech-card p,
body[data-theme="dark"] .taller-bay-card small,
body[data-theme="dark"] .taller-tech-card small,
body[data-theme="dark"] .taller-metric-card span,
body[data-theme="dark"] .taller-metric-card small,
body[data-theme="dark"] .taller-next-step span,
body[data-theme="dark"] .taller-bay-state,
body[data-theme="dark"] .taller-bay-occupancy small,
body[data-theme="dark"] .taller-bay-meta span {
    color: #93a4bb;
}

body[data-theme="dark"] .taller-metric-card strong,
body[data-theme="dark"] .taller-column-head strong,
body[data-theme="dark"] .taller-card-head strong,
body[data-theme="dark"] .taller-card-body p,
body[data-theme="dark"] .taller-bay-card strong,
body[data-theme="dark"] .taller-tech-card strong,
body[data-theme="dark"] .taller-next-step strong {
    color: #eef5ff;
}

body[data-theme="dark"] .taller-column-head {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .taller-toolbar-panel,
body[data-theme="dark"] #view-taller .app-tabs {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] #view-taller .app-tab {
    background: rgba(14, 25, 40, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #a7b9d1;
}

body[data-theme="dark"] #view-taller .app-tab:hover {
    color: #eef5ff;
    background: rgba(20, 34, 54, 0.98);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] #view-taller .app-tab.active {
    color: #eef5ff;
    background: linear-gradient(180deg, rgba(33, 63, 107, 0.84), rgba(22, 45, 82, 0.9));
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3), 0 10px 18px rgba(2, 6, 23, 0.24);
}

body[data-theme="dark"] #view-taller .taller-tab-icon {
    background: rgba(96, 165, 250, 0.12);
    color: #8fc2ff;
}

body[data-theme="dark"] .taller-column-head span {
    background: rgba(37, 99, 235, 0.18);
    color: #dbeafe;
}

body[data-theme="dark"] .taller-empty,
body[data-theme="dark"] .taller-next,
body[data-theme="dark"] .taller-card {
    border-color: rgba(148, 163, 184, 0.14);
}

body[data-theme="dark"] .taller-empty {
    background: rgba(14, 25, 40, 0.96);
    color: #9fb2cc;
}

body[data-theme="dark"] .taller-next-step {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .taller-bay-occupancy,
body[data-theme="dark"] .taller-bay-meta span {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .taller-bay-plate {
    background: #e2ecff;
    color: #0b1730;
}

body[data-theme="dark"] .inventory-kpi,
body[data-theme="dark"] .inventory-product-shell {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .inventory-kpi span,
body[data-theme="dark"] .inventory-product-copy span,
body[data-theme="dark"] .inventory-product-code,
body[data-theme="dark"] .inventory-product-stats span,
body[data-theme="dark"] .inventory-product-meta span,
body[data-theme="dark"] .pos-sale-history-card .record-muted {
    color: #93a4bb;
}

body[data-theme="dark"] .inventory-kpi strong,
body[data-theme="dark"] .inventory-product-copy strong,
body[data-theme="dark"] .pos-sale-history-card strong {
    color: #eef5ff;
}

body[data-theme="dark"] .pos-product-card,
body[data-theme="dark"] .pos-customer-card,
body[data-theme="dark"] .pos-summary-card,
body[data-theme="dark"] .pos-cart-item {
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.96), rgba(14, 24, 38, 0.92));
    border-color: rgba(120, 144, 178, 0.14);
    box-shadow: 0 18px 38px rgba(2, 8, 20, 0.24);
}

body[data-theme="dark"] .pos-cart-name-input {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
}

body[data-theme="dark"] .pos-pagination span {
    color: #90a1b8;
}

body[data-theme="dark"] .standard-pagination {
    border-color: rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(13, 25, 40, 0.96), rgba(10, 20, 33, 0.96));
}

body[data-theme="dark"] .standard-pagination span {
    color: #90a1b8;
}

body[data-theme="dark"] .pos-catalog-panel .panel-header {
    border-bottom-color: rgba(120, 144, 178, 0.12);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(18, 29, 44, 0.98), rgba(14, 24, 38, 0.96));
}

body[data-theme="dark"] .pos-product-thumb {
    background: linear-gradient(135deg, rgba(28, 44, 66, 0.96), rgba(20, 34, 52, 0.94));
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
}

body[data-theme="dark"] .pos-product-copy strong,
body[data-theme="dark"] .pos-cart-item-copy strong {
    color: #e7eefb;
}

body[data-theme="dark"] .pos-product-copy span,
body[data-theme="dark"] .pos-product-copy small,
body[data-theme="dark"] .pos-cart-item-copy span,
body[data-theme="dark"] .pos-sale-history-meta small {
    color: #90a1b8;
}

body[data-theme="dark"] .pos-cart-field span,
body[data-theme="dark"] .pos-cart-line-total span {
    color: #90a1b8;
}

body[data-theme="dark"] .pos-cart-field input {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
}

body[data-theme="dark"] .pos-cart-line-total strong {
    color: #e7eefb;
}

body[data-theme="dark"] .pos-product-meta span {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
    color: #c7d4e6;
}

body[data-theme="dark"] .inventory-product-stats span,
body[data-theme="dark"] .inventory-product-meta span {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(255,255,255,0.03);
}

body[data-theme="dark"] .inventory-product-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22), rgba(30, 64, 175, 0.22));
    color: #dbeafe;
}

@media (max-width: 1100px) {
    .pos-layout {
        grid-template-columns: 1fr;
    }

    .pos-catalog-panel,
    .pos-checkout-panel {
        order: initial;
    }
}

@media (max-width: 760px) {
    .pos-cart-item-controls {
        grid-template-columns: 1fr 1fr;
    }

    .pos-catalog-grid {
        grid-template-columns: 1fr;
    }

    .pos-product-list {
        grid-template-columns: 1fr;
    }
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(13, 21, 32, 0.24);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.active {
    display: flex;
    animation: modalOverlayIn 0.22s ease both;
}

.modal-content {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 255, 0.05), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    width: min(600px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 28px 60px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.72);
    animation: modalContentIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.modal-content.entity-profile-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100vh - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    border-radius: 26px;
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-main {
    min-width: 0;
    flex: 1;
}

.modal-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.modal-header h3 {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal-title-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    min-width: 0;
}

.modal-title-row h3 {
    margin: 0;
    white-space: nowrap;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--app-muted);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease;
}

.modal-close:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--app-text);
}

.modal-minimize {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--app-muted);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease;
    font-size: 1.2rem;
    line-height: 1;
}

.modal-minimize:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--app-text);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 24px;
    border-top: 1px solid var(--app-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.modal-overlay.is-minimized {
    display: none !important;
}

.modal-overlay.is-restoring .modal-content {
    animation: modalContentRestore 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.modal-overlay.is-minimizing {
    display: flex !important;
    pointer-events: none;
    animation: modalOverlayOut 0.22s ease both;
}

.modal-overlay.is-minimizing .modal-content {
    animation: modalContentOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.minimized-modals-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9050;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}

.minimized-modal-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,255,0.96) 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    border-radius: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    animation: minimizedCardIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.minimized-modal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.22);
}

.minimized-modal-card--editing {
    border-color: rgba(37, 99, 235, 0.18);
}

.minimized-modal-card--accent {
    border-color: rgba(14, 165, 233, 0.24);
    box-shadow: 0 18px 42px rgba(14, 165, 233, 0.12);
}

.minimized-modal-card--idle {
    border-color: rgba(15, 23, 42, 0.08);
}

.minimized-modal-card-copy {
    flex: 1;
    min-width: 0;
}

.minimized-modal-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 4px;
}

.minimized-modal-card-copy strong,
.minimized-modal-card-copy span,
.minimized-modal-card-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.minimized-modal-card-copy strong {
    color: var(--app-text);
    font-size: 0.92rem;
}

.minimized-modal-card-copy span {
    color: var(--app-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

.minimized-modal-card-copy small {
    color: color-mix(in srgb, var(--app-muted) 88%, #ffffff 12%);
    font-size: 0.72rem;
    margin-top: 8px;
}

.minimized-modal-card-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 118, 255, 0.1);
    color: #0b63cf;
    padding: 5px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.minimized-modal-card--idle .minimized-modal-card-badge {
    background: rgba(15, 23, 42, 0.07);
    color: var(--app-muted);
}

.minimized-modal-card--accent .minimized-modal-card-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.minimized-modal-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.minimized-modal-card-btn {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255,255,255,0.92);
    color: var(--app-text);
    border-radius: 12px;
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.minimized-modal-card-btn.ghost {
    padding: 8px 10px;
    color: var(--app-muted);
}

.minimized-modal-card-btn:hover {
    background: rgba(240, 247, 255, 0.96);
    transform: translateY(-1px);
}

body[data-theme="dark"] .minimized-modal-card {
    background: linear-gradient(180deg, rgba(14,23,38,0.96) 0%, rgba(11,19,32,0.96) 100%);
    border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .minimized-modal-card-btn {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e5edf7;
}

body[data-theme="dark"] .minimized-modal-card-copy small {
    color: rgba(203, 213, 225, 0.78);
}

body[data-theme="dark"] .minimized-modal-card-badge {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

body[data-theme="dark"] .document-inline-toggle,
body[data-theme="dark"] .order-finance-card,
body[data-theme="dark"] .order-payment-empty {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .order-finance-card strong,
body[data-theme="dark"] .order-payment-empty strong,
body[data-theme="dark"] .order-payment-table td {
    color: #e5edf7;
}

body[data-theme="dark"] .order-payment-table th {
    color: #94a3b8;
}

body[data-theme="dark"] .order-payment-table th,
body[data-theme="dark"] .order-payment-table td {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] .cobranzas-client-card,
body[data-theme="dark"] .cobranzas-followup-item {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .cobranzas-filter-line > input,
body[data-theme="dark"] .cobranzas-filter-line > select,
body[data-theme="dark"] .cobranzas-filter-line .document-inline-toggle,
body[data-theme="dark"] .cobranzas-date-chip,
body[data-theme="dark"] .cobranzas-panel-search,
body[data-theme="dark"] .cobranzas-reset-btn {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 19, 32, 0.92));
    border-color: rgba(148, 163, 184, 0.18);
    color: #e5edf7;
}

body[data-theme="dark"] .cobranzas-filter-line .document-inline-toggle span,
body[data-theme="dark"] .cobranzas-date-chip span {
    color: #cbd5e1;
}

body[data-theme="dark"] .cobranzas-client-card span,
body[data-theme="dark"] .cobranzas-followup-item p {
    color: #e5edf7;
}

body[data-theme="dark"] .cobranzas-section-head span {
    color: #9ab0d0;
}

body[data-theme="dark"] .cobranzas-table tr.active {
    background: rgba(59, 130, 246, 0.12);
}

@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalContentIn {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalContentOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(18px) scale(0.97); }
}

@keyframes modalContentRestore {
    from { opacity: 0; transform: translateY(14px) scale(0.982); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes minimizedCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
    .minimized-modals-dock {
        right: 12px;
        left: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: auto;
        gap: 10px;
    }

    .minimized-modal-card {
        padding: 12px 12px;
        gap: 10px;
    }

    .minimized-modal-card-top {
        gap: 8px;
    }

    .minimized-modal-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .minimized-modal-card-btn {
        min-width: 72px;
    }
}

.system-dialog-modal {
    border: 1px solid var(--app-border);
    background: linear-gradient(180deg, var(--app-panel) 0%, #fbfdff 100%);
}

.system-dialog-message {
    margin: 0;
    color: var(--app-text);
    font-size: 0.96rem;
    line-height: 1.6;
}

#system-dialog-input-shell {
    margin-top: 18px;
}

#system-dialog-input-shell label {
    gap: 10px;
}

#system-dialog-hint {
    margin-top: 8px;
}

body[data-theme="dark"] .system-dialog-modal {
    background:
        radial-gradient(circle at top right, rgba(93, 169, 255, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(12, 23, 38, 0.98), rgba(8, 16, 28, 0.98));
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 28px 54px rgba(2, 8, 20, 0.34);
}

body[data-theme="dark"] #modal-system-dialog .modal-header,
body[data-theme="dark"] #modal-system-dialog .modal-footer {
    border-color: rgba(148, 163, 184, 0.12);
}

body[data-theme="dark"] #modal-system-dialog .modal-close {
    color: #8ea4bf;
}

body[data-theme="dark"] #modal-system-dialog .modal-close:hover {
    color: #d9e8ff;
}

/* Utilities */
.text-muted {
    color: var(--app-muted);
}

.mb-4 {
    margin-bottom: 16px;
}

.hidden {
    display: none !important;
}

.hidden-by-search {
    display: none !important;
}

.filter-chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-chip {
    border: 1px solid var(--app-border);
    background: #fff;
    color: var(--app-muted);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.filter-chip:hover,
.filter-chip.active {
    background: #eef5ff;
    border-color: #b8cffd;
    color: #1f4fbf;
    box-shadow: 0 10px 24px rgba(31, 79, 191, 0.08);
}

body[data-theme="dark"] .filter-chip {
    background: rgba(14, 25, 40, 0.96);
    border-color: rgba(148, 163, 184, 0.18);
    color: #c7d3e2;
    box-shadow: none;
}

body[data-theme="dark"] .filter-chip:hover,
body[data-theme="dark"] .filter-chip.active {
    background: rgba(20, 34, 54, 0.98);
    border-color: rgba(96, 165, 250, 0.28);
    color: #eef5ff;
    box-shadow: 0 10px 20px rgba(2, 8, 20, 0.18);
}

.quotes-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
}

.quote-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quote-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.quote-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.quote-origin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #eef4ff;
    color: #3356a8;
}

.quote-origin.additional {
    background: #fff3e8;
    color: #c26a18;
}

.quote-amount-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.quote-status-editor {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #d8e3f4;
    background: #f8fbff;
    color: #3356a8;
}

.quote-status-editor.done {
    background: #e8f8ef;
    border-color: #a7ddba;
    color: #1c6b3f;
}

.quote-status-editor.danger {
    background: #fff0f0;
    border-color: #f0c0c0;
    color: #ad3131;
}

.quote-status-editor.info {
    background: #eef4ff;
    border-color: #cfe0ff;
    color: #254a9e;
}

.quote-status-editor.pending,
.quote-status-editor.progress {
    background: #fff8eb;
    border-color: #efd59a;
    color: #97661b;
}

.quote-status-select {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    outline: none;
    cursor: pointer;
    padding-right: 0;
    min-width: 74px;
    line-height: 1.1;
}

.quote-order-btn {
    padding: 0;
    min-width: 38px;
    height: 38px;
    box-shadow: 0 10px 20px rgba(31, 79, 191, 0.18);
}

.quote-order-btn svg {
    width: 17px;
    height: 17px;
    display: block;
}

.quote-amount-block strong {
    font-size: 1.18rem;
    color: var(--app-text);
}

.quote-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-note {
    margin: 0;
    color: var(--app-text);
    line-height: 1.45;
}

.quote-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #edf2f7;
}

.quote-primary-action,
.quote-secondary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.quote-primary-action .btn.primary {
    min-height: 40px;
    padding-inline: 16px;
    box-shadow: 0 12px 24px rgba(31, 79, 191, 0.18);
}

.quote-secondary-actions .btn.secondary {
    background: #f8fbff;
    border-color: #d6e4ff;
    color: #3356a8;
}

.quote-secondary-actions .btn.secondary:hover {
    background: #eef5ff;
    border-color: #bdd3ff;
    color: #234291;
}

.icon-only {
    min-width: 38px;
    height: 38px;
    padding-inline: 0;
    justify-content: center;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: none;
}

.quote-secondary-actions .icon-only {
    min-width: 40px;
    height: 40px;
    font-size: 1.02rem;
}

.quote-menu {
    position: relative;
}

.quote-menu summary {
    list-style: none;
}

.quote-menu summary::-webkit-details-marker {
    display: none;
}

.quote-menu-trigger {
    min-width: 92px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #d6e4ff;
    background: #f8fbff;
    color: #3356a8;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.quote-menu-trigger-label {
    line-height: 1;
}

.quote-menu-trigger-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.quote-menu[open] .quote-menu-trigger,
.quote-menu-trigger:hover {
    background: #eef5ff;
    border-color: #bdd3ff;
    color: #234291;
}

.quote-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #dfe8f7;
    background: #fff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
}

.quote-menu-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 4px 6px;
}

.quote-menu-item {
    border: 1px solid transparent;
    background: #fff;
    color: #31455d;
    border-radius: 10px;
    padding: 9px 10px;
    text-align: left;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.quote-menu-item:hover,
.quote-menu-item.active {
    background: #eef5ff;
    border-color: #c2d7fb;
    color: #21438c;
}

.watermark-config-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fafcff 0%, #f4f8fd 100%);
}

.watermark-config-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.watermark-preview,
.watermark-preview-empty {
    width: 220px;
    height: 110px;
    border-radius: 14px;
    border: 1px dashed #cfd9ea;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 0.85rem;
}

.watermark-preview img {
    max-width: 90%;
    max-height: 78%;
    object-fit: contain;
}

.compact-dropzone {
    min-height: 94px;
    padding: 14px;
}

.quote-summary-card {
    border: 1px solid #d9e6fb;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--app-muted);
}

.quote-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed #dbe7fa;
}

.quote-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe7fa;
    color: var(--app-text);
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.quote-toggle input {
    margin: 0;
}

body[data-theme="dark"] .quote-toggle-row {
    border-top-color: rgba(120, 144, 178, 0.16);
}

body[data-theme="dark"] .quote-toggle {
    background: rgba(24, 37, 55, 0.92);
    border-color: rgba(120, 144, 178, 0.16);
    color: #e7eefb;
    box-shadow: 0 12px 24px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] .quote-toggle input {
    accent-color: #60a5fa;
}

.report-modal-content {
    width: min(1040px, calc(100vw - 48px));
}

.conformidad-modal-content {
    width: min(980px, calc(100vw - 48px));
}

.conformidad-modal-content .modal-body,
.orden-modal-content .modal-body {
    padding: 28px 30px 24px;
}

.orden-modal-content {
    width: min(1080px, calc(100vw - 40px));
}

.report-intake-panel {
    border: 1px solid rgba(120, 144, 178, 0.16);
    background: linear-gradient(180deg, rgba(12, 23, 38, 0.98) 0%, rgba(16, 29, 47, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.conformidad-summary-panel {
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
    color: #122033;
}

.conformidad-summary-panel .record-title,
.conformidad-summary-panel .record-muted {
    color: #122033;
}

#conformidad-summary {
    margin-bottom: 18px;
}

.orden-context-panel {
    margin-bottom: 16px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
    color: #122033;
}

.orden-context-panel .record-title,
.orden-context-panel .record-muted {
    color: #122033;
}

.conformidad-context-grid,
.orden-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.conformidad-standalone-fields {
    margin-bottom: 18px;
    padding: 18px;
}

.conformidad-context-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #dbe7fa;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.conformidad-context-card span {
    display: block;
    margin-bottom: 8px;
    color: #6c7b92;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conformidad-context-card strong,
.conformidad-context-card b {
    display: block;
    color: #122033;
    font-size: 1rem;
    line-height: 1.3;
    word-break: break-word;
}

.conformidad-context-card small,
.conformidad-context-card p {
    display: block;
    margin-top: 8px;
    color: #5f6f86;
    line-height: 1.45;
    word-break: break-word;
}

.conformidad-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 14px;
}

.conformidad-section-head h4 {
    margin: 0;
    color: #122033;
    font-size: 1rem;
}

.conformidad-section-head span {
    color: #6b7b91;
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: right;
}

#form-conformidad textarea {
    min-height: 120px;
}

.orden-services-panel {
    padding: 18px;
}

#ord-servicios-container {
    display: grid;
    gap: 12px;
}

.order-line-item {
    border: 1px solid #e8eef8;
    border-radius: 16px;
    padding: 14px;
    background: #fbfcff;
}

.order-line-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.order-line-search {
    display: grid;
    gap: 6px;
}

.order-line-search .ord-catalog-search {
    width: 100%;
    min-width: 0;
}

.order-line-search-wrap .ord-catalog-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
}

.order-line-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1.7fr) 110px 130px;
    gap: 12px;
    align-items: end;
}

.order-line-grid label,
.order-line-description,
.order-line-actions {
    min-width: 0;
}

.order-line-description input,
.order-line-grid input,
.order-line-grid select {
    width: 100%;
}

.order-line-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #dbe7fa;
    background: #ffffff;
}

.order-line-actions strong {
    display: block;
    color: #122033;
    font-size: 0.95rem;
}

.order-line-actions span {
    display: block;
    color: #6b7b91;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-theme="dark"] .conformidad-context-card {
    background: rgba(20, 31, 49, 0.92);
    border-color: rgba(120, 144, 178, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-theme="dark"] .conformidad-context-card span,
body[data-theme="dark"] .conformidad-context-card p,
body[data-theme="dark"] .conformidad-context-card small,
body[data-theme="dark"] .conformidad-section-head span {
    color: rgba(214, 226, 242, 0.74);
}

body[data-theme="dark"] .conformidad-context-card strong,
body[data-theme="dark"] .conformidad-context-card b,
body[data-theme="dark"] .conformidad-section-head h4,
body[data-theme="dark"] .order-line-actions strong {
    color: #f8fbff;
}

body[data-theme="dark"] .order-line-item,
body[data-theme="dark"] .order-line-actions {
    background: rgba(20, 31, 49, 0.92);
    border-color: rgba(120, 144, 178, 0.18);
}

body[data-theme="dark"] .order-line-search span {
    color: rgba(214, 226, 242, 0.74);
}

body[data-theme="dark"] .order-line-actions span {
    color: rgba(214, 226, 242, 0.74);
}

.order-next-steps-grid {
    display: grid;
    gap: 12px;
}

.order-next-step-card {
    width: 100%;
    display: grid;
    gap: 6px;
    text-align: left;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(120, 144, 178, 0.2);
    background: linear-gradient(180deg, #f9fbff 0%, #f1f6ff 100%);
    color: #13233b;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.order-next-step-card:hover {
    transform: translateY(-1px);
    border-color: #8ab0f8;
    box-shadow: 0 12px 28px rgba(33, 67, 140, 0.12);
}

.order-next-step-card strong {
    font-size: 0.98rem;
}

.order-next-step-card span {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

body[data-theme="dark"] .order-next-step-card {
    background: rgba(20, 31, 49, 0.96);
    border-color: rgba(120, 144, 178, 0.2);
    color: #f8fbff;
}

body[data-theme="dark"] .order-next-step-card span {
    color: rgba(214, 226, 242, 0.74);
}

@media (max-width: 780px) {
    .order-line-grid {
        grid-template-columns: 1fr 1fr;
    }

    .order-line-description {
        grid-column: 1 / -1;
    }

    .order-line-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-next-step-card {
        padding: 14px 16px;
    }
}

.report-detail-panel {
    border: 1px solid rgba(120, 144, 178, 0.14);
}

.report-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.report-entry-card {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(120, 144, 178, 0.16);
    background: rgba(17, 29, 46, 0.84);
}

.report-entry-card-primary {
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(18, 33, 54, 0.96), rgba(13, 24, 40, 0.94));
}

.report-entry-kicker {
    color: rgba(154, 175, 201, 0.82);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
}

.report-entry-card strong {
    color: #f8fbff;
    font-size: 1.02rem;
    line-height: 1.2;
}

.report-entry-card p {
    margin: 0;
    color: rgba(214, 226, 242, 0.88);
    line-height: 1.5;
    font-size: 0.92rem;
}

.report-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.report-entry-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(230, 238, 249, 0.86);
    font-size: 0.76rem;
    font-weight: 600;
}

.report-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#report-detail-panel .quote-toggle {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    border-radius: 16px;
    padding: 10px 12px;
}

#report-detail-panel .photo-dropzone {
    min-height: 116px;
    border-radius: 18px;
}

#report-before-list,
#report-after-list {
    margin-top: 12px;
}

@media (max-width: 980px) {
    .report-modal-content {
        width: calc(100vw - 24px);
    }

    .report-entry-grid,
    .report-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-line-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .report-entry-grid,
    .report-toggle-grid {
        grid-template-columns: 1fr;
    }

    .conformidad-section-head {
        flex-direction: column;
    }

    .conformidad-section-head span {
        text-align: left;
    }

    .order-line-grid {
        grid-template-columns: 1fr;
    }

    .order-line-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

.quote-summary-line strong {
    color: var(--app-text);
}

.quote-summary-line.total {
    padding-top: 12px;
    border-top: 1px solid #dbe7fa;
    font-size: 1.08rem;
}

.quote-summary-line.total strong {
    color: #1f4fbf;
    font-size: 1.2rem;
}

.quote-line-item {
    border: 1px solid #e8eef8;
    border-radius: 16px;
    padding: 14px;
    background: #fbfcff;
    overflow: visible;
}

body[data-theme="dark"] .quote-line-item {
    background: rgba(20, 31, 49, 0.92);
    border-color: rgba(120, 144, 178, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-theme="dark"] .quote-line-search span,
body[data-theme="dark"] .quote-line-grid label {
    color: rgba(224, 233, 245, 0.9);
}

body[data-theme="dark"] .quote-line-total span {
    color: rgba(169, 184, 204, 0.86);
}

body[data-theme="dark"] .quote-line-total strong {
    color: #f8fbff;
}

.quote-line-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.quote-line-search {
    display: grid;
    gap: 6px;
}

.quote-line-search .cot-product-search {
    width: 100%;
    min-width: 0;
}

.quote-line-search-wrap .cot-product-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
}

.quote-line-grid {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2.2fr) minmax(88px, 0.8fr) minmax(110px, 1fr) minmax(130px, 1.1fr);
    gap: 12px;
    align-items: end;
}

.quote-line-grid > label,
.quote-line-grid > div {
    min-width: 0;
}

.hallazgo-parts-card {
    display: grid;
    gap: 14px;
    margin-top: 8px;
    margin-bottom: 14px;
}

.hallazgo-parts-list {
    gap: 12px;
}

.hallazgo-part-item {
    border: 1px solid #e8eef8;
    border-radius: 16px;
    padding: 14px;
    background: #fbfcff;
}

.hallazgo-part-search-wrap {
    position: relative;
}

.hallazgo-part-search {
    display: grid;
    gap: 6px;
}

.hallazgo-part-search .hallazgo-part-desc {
    width: 100%;
    min-width: 0;
}

.hallazgo-part-search-wrap .hallazgo-part-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
}

.hallazgo-part-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) minmax(92px, 0.7fr) minmax(140px, 0.95fr) minmax(150px, 1fr);
    gap: 12px;
    align-items: end;
}

.hallazgo-part-grid > label,
.hallazgo-part-grid > div {
    min-width: 0;
}

.hallazgo-part-description input,
.hallazgo-part-qty,
.hallazgo-part-price {
    width: 100%;
    min-width: 0;
}

.hallazgo-part-total-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hallazgo-part-total-wrap span {
    font-size: 0.82rem;
    color: var(--app-muted);
}

.hallazgo-part-total-wrap strong {
    font-size: 1.02rem;
    color: var(--app-text);
}

body[data-theme="dark"] .hallazgo-part-item {
    background: rgba(20, 31, 49, 0.92);
    border-color: rgba(120, 144, 178, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-theme="dark"] .hallazgo-part-grid label {
    color: rgba(224, 233, 245, 0.9);
}

body[data-theme="dark"] .hallazgo-part-search label {
    color: rgba(224, 233, 245, 0.9);
}

body[data-theme="dark"] .hallazgo-part-total-wrap span {
    color: rgba(169, 184, 204, 0.86);
}

body[data-theme="dark"] .hallazgo-part-total-wrap strong {
    color: #f8fbff;
}

.quote-line-description input,
.cot-precio-input,
.cot-qty-input,
.cot-desc-input {
    width: 100%;
    min-width: 0;
}

.quote-line-total {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-line-total span {
    font-size: 0.82rem;
    color: var(--app-muted);
}

.quote-line-total strong {
    font-size: 1.02rem;
    color: var(--app-text);
}

@media (max-width: 980px) {
    .quote-line-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hallazgo-part-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-line-description,
    .quote-line-total {
        grid-column: 1 / -1;
    }

    .hallazgo-part-total-wrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .quote-line-grid {
        grid-template-columns: 1fr;
    }

    .hallazgo-part-grid {
        grid-template-columns: 1fr;
    }
}

.btn.sunarp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eefaf3 0%, #d6efdf 100%);
    border: 1px solid #74b78d;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.015em;
    color: #165736;
    box-shadow: 0 12px 24px rgba(31, 107, 66, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.btn.sunarp::before {
    content: '🚘';
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.btn.sunarp::after {
    content: '↗';
    font-size: 0.84rem;
    line-height: 1;
    opacity: 0.75;
}

.btn.sunarp:hover {
    background: linear-gradient(180deg, #e5f6ec 0%, #cbe9d6 100%);
    border-color: #5ea97a;
    color: #114729;
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 16px 30px rgba(31, 107, 66, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.pending-chip,
.pending-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #fff5db;
    color: #8a6116;
    border: 1px solid #f0d48f;
    vertical-align: middle;
}

.pending-field {
    border-color: #f0d48f !important;
    box-shadow: 0 0 0 4px rgba(240, 212, 143, 0.18) !important;
    background: #fffdf7 !important;
}

/* MechaBot Drawer */
.bot-drawer {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    width: 400px;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    border-left: 1px solid var(--app-border);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.bot-context {
    padding: 12px 16px;
    border-radius: 14px;
    background: #f7f9fc;
    color: var(--app-muted);
    font-size: 0.84rem;
    margin-bottom: 12px;
}

.bot-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bot-drawer.open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.bot-header {
    padding: 20px;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.bot-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1a73e8;
}

.bot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bot-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.4;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.bot-msg.ai {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
    border: 1px solid #e3ebf5;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.bot-msg.user {
    background: var(--accent-blue);
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.bot-msg-title {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.78;
}

.bot-msg-body {
    font-size: 0.95rem;
    line-height: 1.55;
}

.bot-input {
    padding: 20px;
    border-top: 1px solid var(--app-border);
    display: flex;
    gap: 10px;
}

.bot-input input {
    flex: 1;
    border-radius: 20px;
    padding: 10px 16px;
}

.bot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 2600;
    border: none;
    transition: opacity 0.2s ease;
}
.entity-identity-meta {
    display: grid;
    gap: 10px;
}

.entity-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.entity-tier-chip,
.entity-soft-chip {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

.entity-tier-chip.platinum { background: linear-gradient(180deg, rgba(244, 248, 255, 0.32), rgba(196, 210, 230, 0.2)); border: 1px solid rgba(255,255,255,0.34); color: #ffffff; }
.entity-tier-chip.gold { background: linear-gradient(180deg, rgba(255, 224, 130, 0.32), rgba(255, 184, 77, 0.22)); border: 1px solid rgba(255, 214, 102, 0.42); color: #fff2c4; }
.entity-tier-chip.emerald { background: linear-gradient(180deg, rgba(74, 222, 128, 0.24), rgba(16, 185, 129, 0.18)); border: 1px solid rgba(52, 211, 153, 0.34); color: #d6ffe9; }
.entity-tier-chip.blue { background: linear-gradient(180deg, rgba(96, 165, 250, 0.26), rgba(37, 99, 235, 0.18)); border: 1px solid rgba(96, 165, 250, 0.36); color: #e4f0ff; }
.entity-tier-chip.slate { background: linear-gradient(180deg, rgba(203, 213, 225, 0.22), rgba(148, 163, 184, 0.18)); border: 1px solid rgba(203, 213, 225, 0.28); color: #f1f5f9; }
.entity-soft-chip { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(237,245,255,0.82); }

.entity-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entity-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.entity-kpi-card {
    border: 1px solid #dbe6f4;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
    display: grid;
    gap: 6px;
}

.entity-kpi-card span { color: #70839b; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.entity-kpi-card strong { color: #112033; font-size: 1.05rem; }
.entity-kpi-card small { color: #7a8ca2; font-size: 0.76rem; }

.entity-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.entity-vehicle-pill {
    width: 100%;
    border: 1px solid #dbe5f1;
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fc 100%);
    border-radius: 18px;
    padding: 14px;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.entity-vehicle-pill:hover { transform: translateY(-1px); border-color: #bfd2ec; background: linear-gradient(180deg, #eef5ff 0%, #e8f1fd 100%); }
.entity-vehicle-pill strong { color: #132238; }
.entity-vehicle-pill span { color: #70839b; font-size: 0.82rem; }

.entity-calendar-card {
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    margin-bottom: 14px;
}

.entity-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.entity-calendar-head strong { color: #132238; text-transform: capitalize; }
.entity-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.entity-calendar-grid.labels span { color: #7a8ca2; font-size: 0.72rem; text-align: center; }

.entity-calendar-cell {
    min-height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(215, 226, 240, 0.9);
    color: #1b2a3f;
    font-size: 0.82rem;
}

.entity-calendar-cell.muted { background: transparent; border-color: transparent; }
.entity-calendar-cell.has-event { background: linear-gradient(180deg, #ddf4ea 0%, #d1f0e2 100%); border-color: #a9dcc4; color: #0f6240; font-weight: 800; }

.entity-next-list,
.entity-doc-list { display: grid; gap: 10px; }

.entity-next-item,
.entity-doc-item {
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f9fbfe 0%, #f2f6fb 100%);
}

.entity-next-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.entity-next-date { border-radius: 14px; background: #eaf1f9; border: 1px solid #d8e2ee; min-height: 42px; display: grid; place-items: center; font-weight: 800; color: #17314f; }
.entity-next-copy { display: grid; gap: 4px; }
.entity-next-copy strong,
.entity-doc-item strong { color: #132238; }
.entity-next-copy span,
.entity-doc-item span { color: #70839b; font-size: 0.82rem; }
.entity-doc-item { display: grid; gap: 4px; }
.entity-doc-item small { color: #8a9bb0; font-size: 0.76rem; }

.entity-activity-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 180px;
}

.entity-activity-bar { display: grid; gap: 8px; justify-items: center; }
.entity-activity-column { width: 100%; height: 116px; border-radius: 18px; background: linear-gradient(180deg, #edf3f9 0%, #dde7f3 100%); padding: 10px; display: flex; align-items: end; }
.entity-activity-column span { width: 100%; border-radius: 12px; background: linear-gradient(180deg, #16a6ff 0%, #0f7bff 100%); box-shadow: 0 10px 18px rgba(15, 123, 255, 0.18); }
.entity-activity-bar strong { color: #132238; }
.entity-activity-bar small { color: #70839b; text-transform: capitalize; }

.entity-profile-span-full { grid-column: 1 / -1; }

.entity-client-shell {
    display: grid;
    gap: 20px;
}

.entity-vehicle-shell {
    display: grid;
    gap: 20px;
}

.entity-client-hero {
    border: 1px solid rgba(191, 210, 236, 0.72);
    border-radius: 28px;
    padding: 26px 28px;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.1), transparent 22%),
        linear-gradient(135deg, #0f3e73 0%, #145991 46%, #0f7bff 100%);
    color: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 24px 40px rgba(15, 36, 68, 0.2);
}

.entity-vehicle-hero {
    border: 1px solid rgba(191, 210, 236, 0.72);
    border-radius: 28px;
    padding: 24px 28px;
    background:
        radial-gradient(circle at top right, rgba(15, 123, 255, 0.12), transparent 24%),
        radial-gradient(circle at bottom left, rgba(148, 163, 184, 0.12), transparent 24%),
        linear-gradient(135deg, #18263a 0%, #22344f 44%, #2c4b6f 100%);
    color: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.22);
}

.entity-client-hero-main {
    display: grid;
    gap: 16px;
}

.entity-vehicle-hero-main {
    display: grid;
    gap: 14px;
}

.entity-client-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.entity-vehicle-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.entity-vehicle-hero-photo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 18px 30px rgba(7, 20, 41, 0.22);
    flex: 0 0 auto;
}

.entity-vehicle-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entity-vehicle-plate-badge {
    min-width: 132px;
    height: 88px;
    padding: 0 20px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)),
        radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 58%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 30px rgba(7, 20, 41, 0.22);
    flex: 0 0 auto;
}

.entity-vehicle-plate-badge span {
    display: block;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.entity-client-identity .entity-profile-avatar {
    width: 94px;
    height: 94px;
    font-size: 2rem;
    box-shadow: 0 18px 30px rgba(7, 20, 41, 0.22);
}

.entity-vehicle-identity .entity-profile-avatar {
    width: 88px;
    height: 88px;
    font-size: 1.75rem;
    box-shadow: 0 18px 30px rgba(7, 20, 41, 0.22);
}

.entity-client-identity-copy {
    display: grid;
    gap: 10px;
}

.entity-vehicle-identity-copy {
    display: grid;
    gap: 10px;
}

.entity-vehicle-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entity-client-identity-copy h2 {
    margin: 0;
    font-size: 2rem;
    color: #ffffff;
}

.entity-vehicle-identity-copy h2 {
    margin: 0;
    font-size: 1.95rem;
    color: #ffffff;
}

.entity-client-identity-copy p {
    margin: 0;
    color: rgba(235, 244, 255, 0.82);
    font-size: 0.94rem;
}

.entity-vehicle-identity-copy p {
    margin: 0;
    color: rgba(235, 244, 255, 0.8);
    font-size: 0.92rem;
}

.entity-client-hero .entity-profile-kicker {
    color: rgba(240, 247, 255, 0.78);
}

.entity-client-hero .entity-soft-chip {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.14);
}

.entity-client-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-self: flex-start;
}

.entity-vehicle-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-self: flex-start;
}

.entity-client-dashboard {
    display: grid;
    grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.45fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: start;
}

.entity-vehicle-dashboard {
    display: grid;
    grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.55fr) minmax(300px, 0.98fr);
    gap: 18px;
    align-items: start;
}

.entity-client-rail,
.entity-client-core,
.entity-client-side {
    display: grid;
    gap: 18px;
}

.entity-vehicle-rail,
.entity-vehicle-core,
.entity-vehicle-side {
    display: grid;
    gap: 18px;
}

.entity-client-rail-card .entity-profile-highlight.compact {
    margin-top: 14px;
}

.entity-kpi-grid-client {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.entity-kpi-grid-vehicle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.productivity-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.collaborator-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collaborator-profile-shell .entity-kpi-card span,
.collaborator-profile-shell .entity-kpi-card strong,
.collaborator-profile-shell .entity-kpi-card small,
.collaborator-profile-shell .entity-profile-section-head strong,
.collaborator-profile-shell .entity-profile-section-head span,
.collaborator-static-grid .entity-stat strong,
.collaborator-profile-shell .entity-pill,
.collaborator-profile-shell .record-muted,
.collaborator-profile-shell .entity-timeline-item span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.collaborator-profile-shell .entity-pill-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.collaborator-profile-shell .entity-pill {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}

.entity-vehicle-rail-card .entity-profile-highlight.compact {
    margin-top: 14px;
}

body:not([data-theme="dark"]) .entity-client-shell,
body:not([data-theme="dark"]) .entity-vehicle-shell {
    gap: 22px;
}

body:not([data-theme="dark"]) .entity-client-dashboard,
body:not([data-theme="dark"]) .entity-vehicle-dashboard {
    gap: 20px;
}

body:not([data-theme="dark"]) .entity-profile-section {
    border: 1px solid #d8e2ee;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,250,255,0.98));
    box-shadow:
        0 22px 36px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.86);
}

body:not([data-theme="dark"]) .entity-profile-section-premium {
    border-color: #d6e0ee;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,248,255,0.98));
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.08);
}

body:not([data-theme="dark"]) .entity-profile-section-head strong,
body:not([data-theme="dark"]) .entity-stat strong,
body:not([data-theme="dark"]) .entity-static-grid .entity-stat strong {
    color: #0f1e33;
}

body:not([data-theme="dark"]) .entity-profile-section-head span,
body:not([data-theme="dark"]) .entity-stat span {
    color: #6c7d93;
}

body:not([data-theme="dark"]) .entity-history-panel {
    border: 1px solid #dbe4ef;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.05);
}

body:not([data-theme="dark"]) .entity-history-head strong,
body:not([data-theme="dark"]) .entity-history-copy strong,
body:not([data-theme="dark"]) .entity-history-date b {
    color: #10233c;
}

body:not([data-theme="dark"]) .entity-history-head span,
body:not([data-theme="dark"]) .entity-history-copy span,
body:not([data-theme="dark"]) .entity-history-date span,
body:not([data-theme="dark"]) .entity-history-empty {
    color: #70839b;
}

body:not([data-theme="dark"]) .entity-history-item {
    border: 1px solid #dde6f1;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fd 100%);
}

body:not([data-theme="dark"]) .entity-history-item:hover {
    border-color: #bfd2ec;
    background: linear-gradient(180deg, #f4f9ff 0%, #ebf3fc 100%);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
}

body:not([data-theme="dark"]) .entity-history-date {
    background: linear-gradient(180deg, #eef5ff 0%, #e6eef8 100%);
    border-color: #d6e2ef;
}

body:not([data-theme="dark"]) .entity-history-empty {
    border: 1px dashed #d8e3f0;
    background: rgba(248, 251, 255, 0.86);
}

body:not([data-theme="dark"]) .entity-tier-chip {
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.62);
}

body:not([data-theme="dark"]) .entity-tier-chip.platinum {
    background: linear-gradient(180deg, #eef3fb 0%, #dce7f4 100%);
    border-color: #bfd0e6;
    color: #37506f;
}

body:not([data-theme="dark"]) .entity-tier-chip.gold {
    background: linear-gradient(180deg, #fff4d6 0%, #ffe6a3 100%);
    border-color: #f0cf77;
    color: #8b6414;
}

body:not([data-theme="dark"]) .entity-tier-chip.emerald {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
    color: #166534;
}

body:not([data-theme="dark"]) .entity-tier-chip.blue {
    background: linear-gradient(180deg, #e0f2fe 0%, #c7e6ff 100%);
    border-color: #93c5fd;
    color: #1d4ed8;
}

body:not([data-theme="dark"]) .entity-tier-chip.slate {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #cbd5e1;
    color: #475569;
}

body:not([data-theme="dark"]) .entity-client-hero-actions .btn,
body:not([data-theme="dark"]) .entity-vehicle-hero-actions .btn,
body:not([data-theme="dark"]) .entity-vehicle-title-row .btn.secondary.icon {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8fbff;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.16);
}

body:not([data-theme="dark"]) .entity-client-hero-actions .btn.secondary,
body:not([data-theme="dark"]) .entity-vehicle-hero-actions .btn.secondary,
body:not([data-theme="dark"]) .entity-vehicle-title-row .btn.secondary.icon {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

body:not([data-theme="dark"]) .entity-client-hero-actions .btn.secondary:hover,
body:not([data-theme="dark"]) .entity-vehicle-hero-actions .btn.secondary:hover,
body:not([data-theme="dark"]) .entity-vehicle-title-row .btn.secondary.icon:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .entity-client-hero-actions .btn.ghost,
body:not([data-theme="dark"]) .entity-vehicle-hero-actions .btn.ghost {
    background: rgba(10, 18, 30, 0.18);
    border-color: rgba(255, 255, 255, 0.14);
}

body:not([data-theme="dark"]) .entity-client-hero-actions .btn.ghost:hover,
body:not([data-theme="dark"]) .entity-vehicle-hero-actions .btn.ghost:hover {
    background: rgba(10, 18, 30, 0.28);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .entity-kpi-card {
    border-color: #d8e3f0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.04);
}

body:not([data-theme="dark"]) .entity-kpi-card span,
body:not([data-theme="dark"]) .entity-vehicle-pill span,
body:not([data-theme="dark"]) .entity-doc-item span,
body:not([data-theme="dark"]) .entity-next-copy span,
body:not([data-theme="dark"]) .entity-activity-bar small,
body:not([data-theme="dark"]) .entity-calendar-grid.labels span {
    color: #70839b;
}

body:not([data-theme="dark"]) .entity-kpi-card strong,
body:not([data-theme="dark"]) .entity-vehicle-pill strong,
body:not([data-theme="dark"]) .entity-doc-item strong,
body:not([data-theme="dark"]) .entity-next-copy strong,
body:not([data-theme="dark"]) .entity-activity-bar strong,
body:not([data-theme="dark"]) .entity-calendar-head strong {
    color: #10233c;
}

body:not([data-theme="dark"]) .entity-kpi-card small,
body:not([data-theme="dark"]) .entity-doc-item small {
    color: #8a9bb0;
}

body:not([data-theme="dark"]) .entity-vehicle-pill,
body:not([data-theme="dark"]) .entity-next-item,
body:not([data-theme="dark"]) .entity-doc-item,
body:not([data-theme="dark"]) .entity-calendar-card,
body:not([data-theme="dark"]) .entity-modal-row {
    border-color: #d8e3f0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.04), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
}

body:not([data-theme="dark"]) .entity-vehicle-pill:hover,
body:not([data-theme="dark"]) .entity-modal-row:hover,
body:not([data-theme="dark"]) .entity-timeline-item:hover {
    border-color: #bfd2ec;
    box-shadow: 0 16px 26px rgba(15, 23, 42, 0.06);
}

body:not([data-theme="dark"]) .entity-calendar-cell {
    background: #ffffff;
    border-color: #dce6f1;
    color: #17314f;
}

body:not([data-theme="dark"]) .entity-next-date {
    background: linear-gradient(180deg, #edf4fd 0%, #e5eef8 100%);
    border-color: #d7e2ee;
    color: #17314f;
}

body:not([data-theme="dark"]) .entity-timeline-item {
    border-color: #dbe5f0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.04);
}

body:not([data-theme="dark"]) .entity-timeline-item strong {
    color: #10233c;
}

body:not([data-theme="dark"]) .entity-timeline-item span {
    color: #70839b;
}

body:not([data-theme="dark"]) .entity-vehicle-photo-preview {
    border-color: #d9e3ef;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%),
        linear-gradient(180deg, #fbfdff 0%, #eff5fb 100%);
}

body:not([data-theme="dark"]) .entity-photo-empty {
    color: #70839b;
}

body:not([data-theme="dark"]) .entity-modal-row-copy strong {
    color: #10233c;
}

body:not([data-theme="dark"]) .entity-modal-row-copy span {
    color: #5e738c;
}

body:not([data-theme="dark"]) .entity-modal-row-copy small {
    color: #8a9bb0;
}

body[data-theme="dark"] .entity-client-hero {
    border-color: rgba(71, 85, 105, 0.42);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.22), transparent 24%),
        radial-gradient(circle at bottom left, rgba(45, 212, 191, 0.14), transparent 22%),
        linear-gradient(135deg, #08111f 0%, #0f2238 46%, #14385d 100%);
    box-shadow: 0 24px 40px rgba(2, 8, 23, 0.38);
}

body[data-theme="dark"] .entity-vehicle-hero {
    border-color: rgba(71, 85, 105, 0.42);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(148, 163, 184, 0.12), transparent 24%),
        linear-gradient(135deg, #08111f 0%, #162334 44%, #22344a 100%);
    box-shadow: 0 24px 40px rgba(2, 8, 23, 0.4);
}

body[data-theme="dark"] .entity-vehicle-hero-photo {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}

@media (max-width: 1380px) {
    .entity-client-dashboard {
        grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.2fr);
    }

    .entity-vehicle-dashboard {
        grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.2fr);
    }

    .entity-client-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entity-vehicle-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .entity-client-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .entity-vehicle-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .entity-client-dashboard {
        grid-template-columns: 1fr;
    }

    .entity-vehicle-dashboard {
        grid-template-columns: 1fr;
    }

    .entity-client-side {
        grid-template-columns: 1fr;
    }

    .entity-vehicle-side {
        grid-template-columns: 1fr;
    }

    .entity-kpi-grid-client {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entity-kpi-grid-vehicle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entity-static-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body[data-theme="dark"] .entity-kpi-card,
body[data-theme="dark"] .entity-vehicle-pill,
body[data-theme="dark"] .entity-calendar-card,
body[data-theme="dark"] .entity-calendar-cell,
body[data-theme="dark"] .entity-next-item,
body[data-theme="dark"] .entity-doc-item,
body[data-theme="dark"] .entity-activity-column {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(18, 30, 49, 0.92));
    border-color: rgba(148, 163, 184, 0.18);
}

body[data-theme="dark"] .entity-kpi-card strong,
body[data-theme="dark"] .entity-calendar-head strong,
body[data-theme="dark"] .entity-next-copy strong,
body[data-theme="dark"] .entity-doc-item strong,
body[data-theme="dark"] .entity-activity-bar strong,
body[data-theme="dark"] .entity-vehicle-pill strong { color: #eef5ff; }

body[data-theme="dark"] .entity-kpi-card span,
body[data-theme="dark"] .entity-kpi-card small,
body[data-theme="dark"] .entity-next-copy span,
body[data-theme="dark"] .entity-doc-item span,
body[data-theme="dark"] .entity-doc-item small,
body[data-theme="dark"] .entity-activity-bar small,
body[data-theme="dark"] .entity-calendar-grid.labels span,
body[data-theme="dark"] .entity-vehicle-pill span { color: #93a4bb; }

body[data-theme="dark"] .entity-calendar-cell { color: #dce8f7; }
body[data-theme="dark"] .entity-calendar-cell.has-event { background: linear-gradient(180deg, rgba(17, 94, 89, 0.85), rgba(12, 74, 110, 0.85)); border-color: rgba(94, 234, 212, 0.18); color: #d9fff8; }
body[data-theme="dark"] .entity-next-date { background: rgba(255,255,255,0.06); border-color: rgba(148, 163, 184, 0.18); color: #eef5ff; }

.vehicle-card-modal {
    width: min(960px, calc(100vw - 48px));
}

.vehicle-card-shell {
    display: grid;
    gap: 18px;
}

.vehicle-card-preview {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, #f8fbff, #eef4fb);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12);
}

.vehicle-card-preview img {
    display: block;
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    background: #f8fbff;
}

.vehicle-card-preview iframe {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
    background: #f8fbff;
}

.vehicle-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vehicle-card-dropzone {
    min-height: 320px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px;
    border-radius: 24px;
    border: 1.5px dashed rgba(59, 130, 246, 0.28);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        linear-gradient(180deg, #f8fbff, #eff5fb);
    text-align: center;
    cursor: pointer;
    transition: all 0.22s ease;
    outline: none;
}

.vehicle-card-dropzone strong {
    font-size: 1rem;
    color: #0f172a;
}

.vehicle-card-dropzone p {
    margin: 0;
    max-width: 420px;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.vehicle-card-dropzone.dragging,
.vehicle-card-dropzone:hover,
.vehicle-card-dropzone:focus-visible {
    border-color: rgba(37, 99, 235, 0.5);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(180deg, #f6faff, #eaf2fb);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
}

.vehicle-card-dropzone .file-trigger input {
    display: none;
}

body[data-theme="dark"] .vehicle-card-preview {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(10, 20, 33, 0.96), rgba(9, 17, 28, 0.96));
    box-shadow: 0 24px 46px rgba(2, 8, 23, 0.28);
}

body[data-theme="dark"] .vehicle-card-preview img {
    background: rgba(10, 20, 33, 0.96);
}

body[data-theme="dark"] .vehicle-card-preview iframe {
    background: rgba(10, 20, 33, 0.96);
}

body[data-theme="dark"] .vehicle-card-dropzone {
    border-color: rgba(96, 165, 250, 0.3);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(11, 21, 35, 0.98), rgba(10, 18, 30, 0.98));
}

body[data-theme="dark"] .vehicle-card-dropzone strong {
    color: #f8fbff;
}

body[data-theme="dark"] .vehicle-card-dropzone p {
    color: #93a4bb;
}

body[data-theme="dark"] .vehicle-card-dropzone.dragging,
body[data-theme="dark"] .vehicle-card-dropzone:hover,
body[data-theme="dark"] .vehicle-card-dropzone:focus-visible {
    border-color: rgba(125, 211, 252, 0.38);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(13, 25, 40, 0.98), rgba(11, 20, 33, 0.98));
    box-shadow: 0 24px 44px rgba(14, 165, 233, 0.12);
}

.entity-list-modal {
    width: min(920px, calc(100vw - 48px));
}

.entity-list-modal-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: #64748b;
    font-size: 0.9rem;
}

.entity-modal-list {
    display: grid;
    gap: 12px;
}

.entity-modal-row {
    width: 100%;
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    transition: all 0.2s ease;
}

button.entity-modal-row {
    cursor: pointer;
}

.entity-modal-row:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.entity-modal-row-copy {
    display: grid;
    gap: 4px;
}

.entity-modal-row-copy strong {
    color: #0f172a;
    font-size: 0.96rem;
}

.entity-modal-row-copy span {
    color: #475569;
    font-size: 0.92rem;
}

.entity-modal-row-copy small {
    color: #94a3b8;
    font-size: 0.82rem;
}

.entity-section-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

body[data-theme="dark"] .entity-list-modal-pagination {
    color: #93a4bb;
}

body[data-theme="dark"] .entity-modal-row {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(13, 25, 40, 0.96), rgba(10, 20, 33, 0.96));
}

body[data-theme="dark"] .entity-modal-row:hover {
    border-color: rgba(96, 165, 250, 0.26);
    box-shadow: 0 22px 34px rgba(2, 8, 23, 0.18);
}

body[data-theme="dark"] .entity-modal-row-copy strong {
    color: #eef5ff;
}

body[data-theme="dark"] .entity-modal-row-copy span {
    color: #b5c2d4;
}

body[data-theme="dark"] .entity-modal-row-copy small {
    color: #7f92aa;
}

body[data-theme="dark"] .vehicle-directory-metric,
body[data-theme="dark"] .vehicle-directory-card,
body[data-theme="dark"] .vehicle-directory-table-shell {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .vehicle-directory-metric strong,
body[data-theme="dark"] .vehicle-directory-card-copy strong,
body[data-theme="dark"] .vehicle-table-plate strong,
body[data-theme="dark"] .vehicle-table-unit strong,
body[data-theme="dark"] .vehicle-table-owner strong,
body[data-theme="dark"] .vehicle-table-case strong {
    color: #eef5ff;
}

body[data-theme="dark"] .vehicle-directory-metric span,
body[data-theme="dark"] .vehicle-directory-metric small,
body[data-theme="dark"] .vehicle-directory-card-copy p,
body[data-theme="dark"] .vehicle-directory-card-meta span,
body[data-theme="dark"] .vehicle-table-plate span,
body[data-theme="dark"] .vehicle-table-unit span,
body[data-theme="dark"] .vehicle-table-owner span,
body[data-theme="dark"] .vehicle-table-case span {
    color: #93a4bb;
}

body[data-theme="dark"] .vehicle-directory-card-badge {
    background: rgba(24, 82, 159, 0.36);
    border-color: rgba(96, 165, 250, 0.24);
    color: #dbeafe;
}

body[data-theme="dark"] .vehicle-directory-card-code,
body[data-theme="dark"] .vehicle-directory-card-meta span {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148, 163, 184, 0.14);
    color: #c7d3e2;
}

body[data-theme="dark"] .client-directory-metric,
body[data-theme="dark"] .client-directory-card,
body[data-theme="dark"] .client-directory-table-shell {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .client-directory-card::after {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(45, 212, 191, 0.05));
}

body[data-theme="dark"] .client-directory-metric strong,
body[data-theme="dark"] .client-directory-card-copy strong,
body[data-theme="dark"] .client-table-doc strong,
body[data-theme="dark"] .client-table-name strong,
body[data-theme="dark"] .client-table-contact strong,
body[data-theme="dark"] .client-table-relationship strong {
    color: #eef5ff;
}

body[data-theme="dark"] .client-directory-metric span,
body[data-theme="dark"] .client-directory-metric small,
body[data-theme="dark"] .client-directory-card-copy p,
body[data-theme="dark"] .client-directory-card-meta span,
body[data-theme="dark"] .client-table-doc span,
body[data-theme="dark"] .client-table-name span,
body[data-theme="dark"] .client-table-contact span,
body[data-theme="dark"] .client-table-relationship span {
    color: #93a4bb;
}

body[data-theme="dark"] .client-directory-card-badge {
    background: rgba(17, 94, 89, 0.34);
    border-color: rgba(45, 212, 191, 0.2);
    color: #d9fff8;
}

body[data-theme="dark"] .client-directory-card-code,
body[data-theme="dark"] .client-directory-card-meta span {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148, 163, 184, 0.14);
    color: #c7d3e2;
}

body[data-theme="dark"] .client-fidelity-card,
body[data-theme="dark"] .client-fidelity-strip > div,
body[data-theme="dark"] .client-fidelity-docs,
body[data-theme="dark"] .client-fidelity-next {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .client-fidelity-card:hover {
    border-color: rgba(96, 165, 250, 0.24);
    box-shadow: 0 26px 42px rgba(2, 8, 20, 0.28);
}

body[data-theme="dark"] .client-fidelity-copy strong,
body[data-theme="dark"] .client-fidelity-next-copy strong,
body[data-theme="dark"] .client-fidelity-strip strong,
body[data-theme="dark"] .client-fidelity-docs strong {
    color: #eef5ff;
}

body[data-theme="dark"] .client-fidelity-copy span,
body[data-theme="dark"] .client-fidelity-next-copy span,
body[data-theme="dark"] .client-fidelity-next-copy small,
body[data-theme="dark"] .client-fidelity-strip span,
body[data-theme="dark"] .client-fidelity-docs span {
    color: #93a4bb;
}

/* Dark mode fixes: visibility + performance on vehicles/clients/entity views */
body[data-theme="dark"] .entity-profile-back,
body[data-theme="dark"] .entity-client-hero-actions .btn,
body[data-theme="dark"] .entity-vehicle-hero-actions .btn,
body[data-theme="dark"] .entity-vehicle-title-row .btn.secondary.icon,
body[data-theme="dark"] .vehicle-directory-card .btn.icon-only,
body[data-theme="dark"] .client-directory-card .btn.icon-only,
body[data-theme="dark"] .quote-secondary-actions .btn.secondary {
    background: rgba(17, 29, 46, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #eef4ff;
    box-shadow: 0 8px 18px rgba(2, 8, 20, 0.16);
}

body[data-theme="dark"] .entity-profile-back span {
    background: rgba(93, 169, 255, 0.16);
    color: #cfe5ff;
}

body[data-theme="dark"] .entity-profile-back strong {
    color: #eef4ff;
}

body[data-theme="dark"] .entity-profile-back:hover,
body[data-theme="dark"] .entity-client-hero-actions .btn:hover,
body[data-theme="dark"] .entity-vehicle-hero-actions .btn:hover,
body[data-theme="dark"] .entity-vehicle-title-row .btn.secondary.icon:hover,
body[data-theme="dark"] .vehicle-directory-card .btn.icon-only:hover,
body[data-theme="dark"] .client-directory-card .btn.icon-only:hover,
body[data-theme="dark"] .quote-secondary-actions .btn.secondary:hover {
    background: rgba(24, 40, 62, 0.98);
    border-color: rgba(148, 163, 184, 0.24);
    color: #ffffff;
    transform: none;
}

body[data-theme="dark"] .vehicle-directory-card .btn.danger.subtle,
body[data-theme="dark"] .client-directory-card .btn.danger.subtle {
    color: #ffd1dc;
    background: rgba(84, 25, 37, 0.92);
    border: 1px solid rgba(255, 112, 148, 0.2);
    box-shadow: 0 8px 16px rgba(71, 20, 34, 0.14);
}

body[data-theme="dark"] .vehicle-directory-card .btn.danger.subtle:hover,
body[data-theme="dark"] .client-directory-card .btn.danger.subtle:hover {
    background: rgba(96, 31, 45, 0.96);
    border-color: rgba(255, 112, 148, 0.28);
    color: #ffe4eb;
}

body[data-theme="dark"] .vehicle-directory-card,
body[data-theme="dark"] .client-directory-card,
body[data-theme="dark"] .vehicle-directory-table-shell,
body[data-theme="dark"] .client-directory-table-shell,
body[data-theme="dark"] .vehicle-directory-metric,
body[data-theme="dark"] .client-directory-metric,
body[data-theme="dark"] .entity-client-hero,
body[data-theme="dark"] .entity-vehicle-hero,
body[data-theme="dark"] .entity-workspace-shell {
    box-shadow: 0 12px 24px rgba(2, 8, 20, 0.16);
}

body[data-theme="dark"] .vehicle-directory-card,
body[data-theme="dark"] .client-directory-card,
body[data-theme="dark"] .vehicle-directory-metric,
body[data-theme="dark"] .client-directory-metric,
body[data-theme="dark"] .vehicle-directory-table-shell,
body[data-theme="dark"] .client-directory-table-shell {
    background:
        linear-gradient(180deg, rgba(12, 22, 36, 0.98), rgba(10, 20, 33, 0.98));
}

body[data-theme="dark"] .vehicle-directory-card:hover,
body[data-theme="dark"] .client-directory-card:hover,
body[data-theme="dark"] .client-fidelity-card:hover,
body[data-theme="dark"] .entity-history-item:hover,
body[data-theme="dark"] .entity-vehicle-pill:hover {
    transform: none;
    box-shadow: 0 14px 28px rgba(2, 8, 20, 0.18);
}

body[data-theme="dark"] .client-directory-card::after,
body[data-theme="dark"] .module-card::before,
body[data-theme="dark"] .document-card::before {
    opacity: 0.45;
}

body[data-theme="dark"] .entity-client-hero {
    background: linear-gradient(135deg, #0b1524 0%, #12304d 100%);
}

body[data-theme="dark"] .entity-vehicle-hero {
    background: linear-gradient(135deg, #0b1524 0%, #22344a 100%);
}

body[data-theme="dark"] .entity-kpi-card,
body[data-theme="dark"] .entity-vehicle-pill,
body[data-theme="dark"] .entity-calendar-card,
body[data-theme="dark"] .entity-calendar-cell,
body[data-theme="dark"] .entity-next-item,
body[data-theme="dark"] .entity-doc-item,
body[data-theme="dark"] .entity-activity-column {
    box-shadow: 0 8px 18px rgba(2, 8, 20, 0.12);
}

body[data-theme="dark"] .vehicle-directory-card-copy p,
body[data-theme="dark"] .vehicle-directory-card-meta span,
body[data-theme="dark"] .client-directory-card-copy p,
body[data-theme="dark"] .client-directory-card-meta span,
body[data-theme="dark"] .entity-vehicle-pill span,
body[data-theme="dark"] .entity-doc-item span,
body[data-theme="dark"] .entity-doc-item small,
body[data-theme="dark"] .entity-kpi-card span,
body[data-theme="dark"] .entity-kpi-card small {
    color: #a4b6cc;
}

/* Dark mode fixes: taller + cotizaciones buttons/menus still using light backgrounds */
body[data-theme="dark"] #view-taller .btn.secondary,
body[data-theme="dark"] #view-taller .btn.ghost,
body[data-theme="dark"] .taller-card .btn.secondary,
body[data-theme="dark"] .taller-card .btn.ghost,
body[data-theme="dark"] .taller-bay-card .btn.secondary,
body[data-theme="dark"] .taller-bay-card .btn.ghost,
body[data-theme="dark"] .taller-tech-card .btn.secondary,
body[data-theme="dark"] .taller-tech-card .btn.ghost,
body[data-theme="dark"] .taller-mini-actions .btn,
body[data-theme="dark"] .quote-secondary-actions .btn.secondary,
body[data-theme="dark"] .quote-secondary-actions .btn.ghost,
body[data-theme="dark"] .quote-menu-trigger,
body[data-theme="dark"] .quote-menu-item,
body[data-theme="dark"] .quote-status-select {
    background: rgba(14, 25, 40, 0.96);
    border-color: rgba(148, 163, 184, 0.18);
    color: #eef4ff;
    box-shadow: none;
}

body[data-theme="dark"] .quote-menu-panel {
    background: rgba(11, 21, 35, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 34px rgba(2, 8, 20, 0.22);
}

body[data-theme="dark"] #view-taller .btn.secondary:hover,
body[data-theme="dark"] #view-taller .btn.ghost:hover,
body[data-theme="dark"] .taller-card .btn.secondary:hover,
body[data-theme="dark"] .taller-card .btn.ghost:hover,
body[data-theme="dark"] .taller-bay-card .btn.secondary:hover,
body[data-theme="dark"] .taller-bay-card .btn.ghost:hover,
body[data-theme="dark"] .taller-tech-card .btn.secondary:hover,
body[data-theme="dark"] .taller-tech-card .btn.ghost:hover,
body[data-theme="dark"] .taller-mini-actions .btn:hover,
body[data-theme="dark"] .quote-secondary-actions .btn.secondary:hover,
body[data-theme="dark"] .quote-secondary-actions .btn.ghost:hover,
body[data-theme="dark"] .quote-menu-trigger:hover,
body[data-theme="dark"] .quote-menu-item:hover,
body[data-theme="dark"] .quote-menu-item.active {
    background: rgba(20, 34, 54, 0.98);
    border-color: rgba(148, 163, 184, 0.24);
    color: #ffffff;
}

body[data-theme="dark"] .quote-menu-label,
body[data-theme="dark"] .quote-menu-item small,
body[data-theme="dark"] .quote-menu-trigger-label {
    color: #c7d3e2;
}

@media (max-width: 980px) {
    .vehicle-directory-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-directory-card-stats {
        grid-template-columns: 1fr;
    }

    .client-directory-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-directory-card-stats {
        grid-template-columns: 1fr;
    }

    .client-fidelity-metrics,
    .client-fidelity-stats,
    .client-fidelity-strip {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------
   10. DARK MODE LOW-END PC OPTIMIZATION
---------------------------------- */
body[data-theme="dark"] .login-shell,
body[data-theme="dark"] .modal-overlay,
body[data-theme="dark"] .profile-menu,
body[data-theme="dark"] .search-results,
body[data-theme="dark"] .theme-switch-menu,
body[data-theme="dark"] .lookup-suggestions,
body[data-theme="dark"] .quote-menu-panel,
body[data-theme="dark"] .bot-drawer,
body[data-theme="dark"] .entity-profile-back,
body[data-theme="dark"] .entity-client-hero-actions .btn,
body[data-theme="dark"] .entity-vehicle-hero-actions .btn,
body[data-theme="dark"] .entity-vehicle-title-row .btn.secondary.icon {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="dark"] .os-window,
body[data-theme="dark"] #view-home,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .module-card,
body[data-theme="dark"] .document-card,
body[data-theme="dark"] .record-item,
body[data-theme="dark"] .vehicle-card,
body[data-theme="dark"] .kanban-card,
body[data-theme="dark"] .quote-card,
body[data-theme="dark"] .taller-toolbar-panel,
body[data-theme="dark"] #view-taller .app-tabs,
body[data-theme="dark"] .taller-metric-card,
body[data-theme="dark"] .taller-column,
body[data-theme="dark"] .taller-card,
body[data-theme="dark"] .taller-bay-card,
body[data-theme="dark"] .taller-tech-card,
body[data-theme="dark"] .vehicle-directory-metric,
body[data-theme="dark"] .vehicle-directory-card,
body[data-theme="dark"] .vehicle-directory-table-shell,
body[data-theme="dark"] .client-directory-metric,
body[data-theme="dark"] .client-directory-card,
body[data-theme="dark"] .client-directory-table-shell,
body[data-theme="dark"] .client-fidelity-card,
body[data-theme="dark"] .client-fidelity-strip > div,
body[data-theme="dark"] .client-fidelity-docs,
body[data-theme="dark"] .client-fidelity-next,
body[data-theme="dark"] .entity-client-hero,
body[data-theme="dark"] .entity-vehicle-hero,
body[data-theme="dark"] .entity-kpi-card,
body[data-theme="dark"] .entity-vehicle-pill,
body[data-theme="dark"] .entity-calendar-card,
body[data-theme="dark"] .entity-calendar-cell,
body[data-theme="dark"] .entity-next-item,
body[data-theme="dark"] .entity-doc-item,
body[data-theme="dark"] .entity-activity-column,
body[data-theme="dark"] .expediente-hero-main,
body[data-theme="dark"] .expediente-sidecard,
body[data-theme="dark"] .expediente-panel-card,
body[data-theme="dark"] .expediente-kpi-card,
body[data-theme="dark"] .expediente-badge,
body[data-theme="dark"] .expediente-fact,
body[data-theme="dark"] .expediente-overview-metrics div,
body[data-theme="dark"] .expediente-route-row,
body[data-theme="dark"] .expediente-mini-list span,
body[data-theme="dark"] .expediente-timeline-dot,
body[data-theme="dark"] .expediente-tab,
body[data-theme="dark"] .inventory-hero-card,
body[data-theme="dark"] .inventory-overview-card,
body[data-theme="dark"] .inventory-product-shell,
body[data-theme="dark"] .inventory-purchase-shell,
body[data-theme="dark"] .inventory-provider-shell,
body[data-theme="dark"] .inventory-surface-panel,
body[data-theme="dark"] .inventory-image-dropzone {
    background-image: none !important;
}

body[data-theme="dark"] .module-card,
body[data-theme="dark"] .document-card,
body[data-theme="dark"] .record-item,
body[data-theme="dark"] .vehicle-card,
body[data-theme="dark"] .kanban-card,
body[data-theme="dark"] .quote-card,
body[data-theme="dark"] .taller-metric-card,
body[data-theme="dark"] .taller-column,
body[data-theme="dark"] .taller-card,
body[data-theme="dark"] .taller-bay-card,
body[data-theme="dark"] .taller-tech-card,
body[data-theme="dark"] .vehicle-directory-metric,
body[data-theme="dark"] .vehicle-directory-card,
body[data-theme="dark"] .vehicle-directory-table-shell,
body[data-theme="dark"] .client-directory-metric,
body[data-theme="dark"] .client-directory-card,
body[data-theme="dark"] .client-directory-table-shell,
body[data-theme="dark"] .client-fidelity-card,
body[data-theme="dark"] .client-fidelity-strip > div,
body[data-theme="dark"] .client-fidelity-docs,
body[data-theme="dark"] .client-fidelity-next,
body[data-theme="dark"] .entity-client-hero,
body[data-theme="dark"] .entity-vehicle-hero,
body[data-theme="dark"] .entity-kpi-card,
body[data-theme="dark"] .entity-vehicle-pill,
body[data-theme="dark"] .entity-calendar-card,
body[data-theme="dark"] .entity-calendar-cell,
body[data-theme="dark"] .entity-next-item,
body[data-theme="dark"] .entity-doc-item,
body[data-theme="dark"] .entity-activity-column,
body[data-theme="dark"] .expediente-hero-main,
body[data-theme="dark"] .expediente-sidecard,
body[data-theme="dark"] .expediente-panel-card,
body[data-theme="dark"] .expediente-kpi-card,
body[data-theme="dark"] .expediente-badge,
body[data-theme="dark"] .expediente-fact,
body[data-theme="dark"] .expediente-overview-metrics div,
body[data-theme="dark"] .expediente-route-row,
body[data-theme="dark"] .expediente-mini-list span,
body[data-theme="dark"] .expediente-timeline-dot,
body[data-theme="dark"] .expediente-tab,
body[data-theme="dark"] .inventory-hero-card,
body[data-theme="dark"] .inventory-overview-card,
body[data-theme="dark"] .inventory-product-shell,
body[data-theme="dark"] .inventory-purchase-shell,
body[data-theme="dark"] .inventory-provider-shell,
body[data-theme="dark"] .inventory-surface-panel,
body[data-theme="dark"] .inventory-image-dropzone,
body[data-theme="dark"] .quote-menu-panel,
body[data-theme="dark"] .quote-menu-trigger,
body[data-theme="dark"] .quote-menu-item,
body[data-theme="dark"] .quote-status-editor,
body[data-theme="dark"] .quote-status-select,
body[data-theme="dark"] .filter-chip,
body[data-theme="dark"] #view-taller .app-tab,
body[data-theme="dark"] .btn.secondary,
body[data-theme="dark"] .btn.ghost {
    box-shadow: none !important;
}

body[data-theme="dark"] .module-card:hover,
body[data-theme="dark"] .document-card:hover,
body[data-theme="dark"] .record-item:hover,
body[data-theme="dark"] .vehicle-card:hover,
body[data-theme="dark"] .kanban-card:hover,
body[data-theme="dark"] .taller-card:hover,
body[data-theme="dark"] .vehicle-directory-card:hover,
body[data-theme="dark"] .client-directory-card:hover,
body[data-theme="dark"] .client-fidelity-card:hover,
body[data-theme="dark"] .entity-history-item:hover,
body[data-theme="dark"] .entity-vehicle-pill:hover,
body[data-theme="dark"] #view-taller .app-tab:hover,
body[data-theme="dark"] .filter-chip:hover,
body[data-theme="dark"] .quote-menu-trigger:hover,
body[data-theme="dark"] .quote-menu-item:hover,
body[data-theme="dark"] .quote-menu-item.active {
    transform: none !important;
}

body[data-theme="dark"] .quote-status-editor,
body[data-theme="dark"] .quote-status-select,
body[data-theme="dark"] .filter-chip,
body[data-theme="dark"] #view-taller .app-tab,
body[data-theme="dark"] .btn.secondary,
body[data-theme="dark"] .btn.ghost {
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

body[data-theme="dark"] .client-directory-card::after,
body[data-theme="dark"] .module-card::before,
body[data-theme="dark"] .document-card::before,
body[data-theme="dark"] .login-hero-grain,
body[data-theme="dark"] .login-hero-vignette,
body[data-theme="dark"] .login-hero-overlay {
    display: none !important;
}

body[data-theme="dark"] .quote-status-editor,
body[data-theme="dark"] .quote-status-select {
    will-change: auto;
}

/* Scroll performance + perceived smoothness */
html,
body,
.os-window,
.view-section,
.app-content,
.modal-body,
.entity-profile-body,
.entity-workspace-content,
.taller-board,
.taller-column-body,
.directory-table-shell,
.vehicle-directory-table-shell,
.client-directory-table-shell,
.quotes-board,
#cotizaciones-board,
#inventario-body,
#expediente-tab-content,
#global-search-results {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body[data-theme="dark"] * {
    scrollbar-color: rgba(128, 154, 186, 0.34) transparent;
}

body[data-theme="dark"] *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

body[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(118, 142, 172, 0.48);
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color 140ms ease;
}

body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(136, 162, 194, 0.64);
}

body[data-theme="dark"] .app-content,
body[data-theme="dark"] .modal-body,
body[data-theme="dark"] .entity-profile-body,
body[data-theme="dark"] .entity-workspace-content,
body[data-theme="dark"] .taller-column-body,
body[data-theme="dark"] .directory-table-shell,
body[data-theme="dark"] .vehicle-directory-table-shell,
body[data-theme="dark"] .client-directory-table-shell,
body[data-theme="dark"] .quotes-board,
body[data-theme="dark"] #cotizaciones-board,
body[data-theme="dark"] #inventario-body,
body[data-theme="dark"] #expediente-tab-content {
    will-change: auto;
    transform: none;
    -webkit-overflow-scrolling: touch;
}

body[data-theme="dark"] .taller-board,
body[data-theme="dark"] .quotes-board,
body[data-theme="dark"] #cotizaciones-board {
    contain: layout;
}

.agenda-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    gap: 20px;
}

.agenda-shell-premium {
    align-items: start;
}

.agenda-shell-google {
    grid-template-columns: 1fr;
}

.agenda-main,
.agenda-side-panel {
    border-radius: 28px;
    padding: 22px;
}

.agenda-main {
    position: relative;
    overflow: hidden;
}

.agenda-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 48%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 42%);
    pointer-events: none;
}

.agenda-shell-google .agenda-main::before {
    display: none;
}

.agenda-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.7fr) minmax(220px, 0.58fr);
    gap: 18px;
    margin-bottom: 22px;
}

.agenda-hero-copy,
.agenda-hero-kpis,
.agenda-hero-focus {
    position: relative;
    z-index: 1;
}

.agenda-hero-copy h2 {
    margin: 6px 0 8px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;
}

.agenda-hero-copy p {
    margin: 0;
    max-width: 520px;
    color: var(--muted);
}

.agenda-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.agenda-hero-kpis article,
.agenda-hero-focus {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 16px 18px;
}

.agenda-hero-kpis span,
.agenda-focus-label {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.agenda-hero-kpis strong {
    font-size: 28px;
    line-height: 1;
}

.agenda-hero-focus {
    display: grid;
    gap: 8px;
    align-content: start;
}

.agenda-hero-focus strong {
    font-size: 24px;
    line-height: 1.05;
}

.agenda-hero-focus small {
    color: var(--muted);
    font-size: 13px;
}

.agenda-toolbar,
.agenda-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.agenda-toolbar-google {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.agenda-toolbar-left,
.agenda-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.agenda-calendar-title {
    margin: 0;
    font-size: 28px;
    line-height: 1;
}

.agenda-toolbar-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.agenda-toolbar h2,
.agenda-side-head h3 {
    margin: 4px 0 6px;
}

.agenda-toolbar p {
    margin: 0;
    color: var(--muted);
}

.agenda-toolbar-actions {
    display: grid;
    gap: 12px;
    justify-items: end;
}

.agenda-nav-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.82));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.agenda-nav-pill .btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .01em;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.agenda-nav-pill .btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text);
    transform: translateY(-1px);
}

.agenda-nav-pill .btn:nth-child(2) {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(30, 58, 138, 0.28);
}

.agenda-nav-pill .btn:nth-child(2):hover {
    background: linear-gradient(135deg, #172554, #1d4ed8);
    color: #fff;
}

.agenda-calendar-shell {
    position: relative;
    z-index: 1;
    border-radius: 26px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
}

.agenda-calendar-shell-google {
    background: transparent;
    border: 0;
    padding: 0;
}

.agenda-weekdays,
.agenda-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.agenda-weekdays {
    margin-bottom: 10px;
}

.agenda-weekdays span {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 8px;
}

.agenda-day-cell {
    min-height: 106px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.94);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.agenda-day-cell-empty {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

.agenda-day-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.agenda-day-cell.muted {
    opacity: 0.55;
}

.agenda-day-cell.today {
    border-color: rgba(59, 130, 246, 0.34);
}

.agenda-day-cell.selected {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.24);
}

.agenda-day-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agenda-day-number {
    font-size: 17px;
    font-weight: 700;
}

.agenda-day-badge {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.agenda-day-count {
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.agenda-day-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: auto;
}

.agenda-event-chip {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 5px 7px;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agenda-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.agenda-event-chip-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-event-chip.tone-cumpleanos {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.agenda-event-chip.tone-entrega,
.agenda-event-chip.tone-importante {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.agenda-event-chip.tone-seguimiento,
.agenda-event-chip.tone-recordatorio {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.agenda-sidebar {
    display: grid;
    gap: 20px;
}

.agenda-selected-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.agenda-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.agenda-side-counter {
    min-width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.agenda-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.agenda-mini-stats article {
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.74);
}

.agenda-mini-stats span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.agenda-mini-stats strong {
    font-size: 24px;
}

.agenda-list-block {
    display: grid;
    gap: 12px;
}

.agenda-list-block + .agenda-list-block {
    margin-top: 18px;
}

.agenda-timeline-item {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    padding: 14px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.76);
    text-align: left;
}

.agenda-brief-item {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    text-align: left;
}

.agenda-brief-mark {
    width: 10px;
    height: 44px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.2);
}

.agenda-brief-mark.tone-cumpleanos {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.agenda-brief-mark.tone-entrega,
.agenda-brief-mark.tone-importante {
    background: linear-gradient(180deg, #34d399, #10b981);
}

.agenda-brief-copy {
    display: grid;
    gap: 4px;
}

.agenda-brief-copy small {
    color: var(--muted);
}

.agenda-timeline-time {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.agenda-timeline-copy {
    display: grid;
    gap: 4px;
}

.agenda-timeline-copy span {
    color: var(--muted);
    font-size: 13px;
}

.agenda-modal-content {
    width: min(760px, 92vw);
    max-width: 760px;
    border-radius: 20px;
    contain: layout paint;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.14);
}

#modal-recordatorio {
    background: rgba(15, 23, 42, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#modal-recordatorio .modal-header,
#modal-recordatorio .modal-footer {
    padding: 18px 20px;
}

#modal-recordatorio .modal-body {
    padding: 18px 20px 20px;
}

.agenda-event-form {
    display: grid;
    gap: 14px;
}

.agenda-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.72);
}

.agenda-form-grid {
    display: grid;
    gap: 12px;
}

.agenda-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agenda-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agenda-form-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agenda-form-grid.slim {
    align-items: end;
}

.agenda-event-form label {
    display: grid;
    gap: 6px;
}

.agenda-event-form .check-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px;
    min-height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-weight: 600;
    width: auto;
}

.agenda-event-form .check-inline label {
    display: inline-block !important;
    gap: 0 !important;
    margin: 0 !important;
    line-height: 1.1;
    width: auto !important;
}

.collaborator-check-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px;
    min-height: 24px;
}

.collaborator-check-inline label {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
    line-height: 1.1;
}

.collaborator-check-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    flex: 0 0 auto;
}

.agenda-event-form .check-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

#modal-recordatorio input,
#modal-recordatorio select,
#modal-recordatorio textarea {
    min-height: 44px;
    border-radius: 14px;
}

#modal-recordatorio textarea {
    min-height: 88px;
    resize: vertical;
}

.agenda-hidden-origin {
    display: none !important;
}

body[data-theme="dark"] .agenda-modal-content {
    background: linear-gradient(180deg, #0f172a 0%, #111f36 100%);
    box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34);
}

body[data-theme="dark"] .agenda-form-section {
    background: rgba(15, 23, 42, 0.68);
    border-color: rgba(71, 85, 105, 0.42);
}

@media (max-width: 780px) {
    .agenda-form-grid.two,
    .agenda-form-grid.three,
    .agenda-form-grid.compact {
        grid-template-columns: 1fr;
    }
}

body[data-theme="dark"] .agenda-day-cell,
body[data-theme="dark"] .agenda-mini-stats article,
body[data-theme="dark"] .agenda-timeline-item,
body[data-theme="dark"] .agenda-brief-item,
body[data-theme="dark"] .agenda-hero-kpis article,
body[data-theme="dark"] .agenda-hero-focus,
body[data-theme="dark"] .agenda-nav-pill,
body[data-theme="dark"] .agenda-calendar-shell {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: none;
}

body[data-theme="dark"] .agenda-toolbar-pill {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(71, 85, 105, 0.42);
}

body[data-theme="dark"] .agenda-nav-pill {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.34);
}

body[data-theme="dark"] .agenda-nav-pill .btn {
    color: rgba(226, 232, 240, 0.8);
}

body[data-theme="dark"] .agenda-nav-pill .btn:hover {
    background: rgba(148, 163, 184, 0.12);
    color: #fff;
}

body[data-theme="dark"] .agenda-nav-pill .btn:nth-child(2) {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #06121f;
    box-shadow: 0 12px 28px rgba(56, 189, 248, 0.28);
}

body[data-theme="dark"] .agenda-main::before {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 48%),
        radial-gradient(circle at top right, rgba(8, 145, 178, 0.16), transparent 42%);
}

body[data-theme="dark"] .agenda-event-chip {
    background: rgba(59, 130, 246, 0.18);
    color: #dbeafe;
}

body[data-theme="dark"] .agenda-event-chip.tone-cumpleanos {
    background: rgba(245, 158, 11, 0.22);
    color: #fde68a;
}

body[data-theme="dark"] .agenda-event-chip.tone-entrega,
body[data-theme="dark"] .agenda-event-chip.tone-importante {
    background: rgba(16, 185, 129, 0.2);
    color: #bbf7d0;
}

body[data-theme="dark"] .agenda-day-cell.today {
    border-color: rgba(96, 165, 250, 0.5);
}

body[data-theme="dark"] .agenda-day-cell.selected {
    box-shadow:
        inset 0 0 0 2px rgba(96, 165, 250, 0.72),
        0 0 0 1px rgba(59, 130, 246, 0.22);
    border-color: rgba(96, 165, 250, 0.58);
    background: rgba(15, 23, 42, 0.96);
}

body[data-theme="dark"] .agenda-day-badge,
body[data-theme="dark"] .agenda-side-counter {
    background: rgba(59, 130, 246, 0.18);
    color: #dbeafe;
}

@media (max-width: 1180px) {
    .agenda-shell {
        grid-template-columns: 1fr;
    }

    .agenda-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .agenda-weekdays,
    .agenda-month-grid {
        gap: 5px;
    }

    .agenda-day-cell {
        min-height: 84px;
        padding: 7px;
    }

    .agenda-toolbar,
    .agenda-side-head {
        flex-direction: column;
    }

    .agenda-toolbar-left,
    .agenda-toolbar-right,
    .agenda-selected-head {
        width: 100%;
        justify-content: flex-start;
    }

    .agenda-timeline-item,
    .agenda-mini-stats {
        grid-template-columns: 1fr;
    }

    .agenda-nav-pill {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* Mic button pulse animation for listening state */
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

#mechabot-mic-btn.listening {
    background: #ef4444 !important;
    animation: micPulse 1.5s ease-in-out infinite;
}

#mechabot-mic-btn:hover:not(.listening) {
    background: rgba(0,0,0,0.05) !important;
}

[data-theme="dark"] #mechabot-mic-btn:hover:not(.listening) {
    background: rgba(255,255,255,0.08) !important;
}

/* ── Asistencia Modal (Blue Professional) ──────── */
.asistencia-modal {
    width: 420px;
    max-width: calc(100vw - 32px);
    border-radius: 20px;
    overflow: hidden;
}

.asistencia-modal-header {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 24px 28px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asistencia-modal-header h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: 0.02em;
}

.asistencia-modal .modal-body {
    padding: 24px 28px 20px;
}

.asistencia-modal-footer {
    padding: 16px 28px 20px;
    border-top: 1px solid #f1f5f9;
}

body[data-theme="dark"] .asistencia-modal-footer {
    border-top-color: #334155;
}

.asistencia-btn-close {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e5e7eb;
    color: #64748b;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.asistencia-btn-close:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
}

body[data-theme="dark"] .asistencia-btn-close {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

body[data-theme="dark"] .asistencia-btn-close:hover {
    background: #334155;
    border-color: #475569;
}

/* Scanner container */
.asistencia-scanner-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin: 0 auto 4px;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    border: 2px solid #1e40af;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.15);
}

/* Modo espejo para el video del escáner QR */
#kiosk-qr-reader video {
    transform: scaleX(-1) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Marco guía del escáner QR */
#kiosk-qr-reader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 3px solid rgba(59, 130, 246, 0.8);
    border-radius: 16px;
    pointer-events: none;
    z-index: 10;
    animation: qr-scan-pulse 2s ease-in-out infinite;
}

@keyframes qr-scan-pulse {
    0%, 100% { border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { border-color: rgba(59, 130, 246, 1); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

/* Esquinas del marco de escaneo */
#kiosk-qr-reader::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    z-index: 11;
    pointer-events: none;
    background:
        linear-gradient(to right, #3b82f6 3px, transparent 3px) 0 0 / 20px 20px,
        linear-gradient(to bottom, #3b82f6 3px, transparent 3px) 0 0 / 20px 20px,
        linear-gradient(to left, #3b82f6 3px, transparent 3px) 100% 0 / 20px 20px,
        linear-gradient(to bottom, #3b82f6 3px, transparent 3px) 100% 0 / 20px 20px,
        linear-gradient(to left, #3b82f6 3px, transparent 3px) 100% 100% / 20px 20px,
        linear-gradient(to top, #3b82f6 3px, transparent 3px) 100% 100% / 20px 20px,
        linear-gradient(to right, #3b82f6 3px, transparent 3px) 0 100% / 20px 20px,
        linear-gradient(to top, #3b82f6 3px, transparent 3px) 0 100% / 20px 20px;
    background-repeat: no-repeat;
}

/* Modo espejo para el video del webcam del kiosk */
#kiosk-webcam-video {
    transform: scaleX(-1) !important;
}

#kiosk-qr-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94a3b8;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    transition: opacity 0.2s ease;
}

#kiosk-qr-placeholder svg {
    opacity: 0.35;
}

.asistencia-placeholder-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.asistencia-btn-blue {
    margin-top: 6px;
    padding: 10px 24px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.asistencia-btn-blue:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* Divider */
.asistencia-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 14px 0;
}

body[data-theme="dark"] .asistencia-divider {
    background: #334155;
}

/* Link buttons */
.asistencia-link {
    background: transparent !important;
    border: none !important;
    color: #2563eb;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.asistencia-link:hover {
    color: #1d4ed8;
}

body[data-theme="dark"] .asistencia-link {
    color: #60a5fa;
}

body[data-theme="dark"] .asistencia-link:hover {
    color: #93c5fd;
}

/* PIN section */
.asistencia-pin-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
    text-align: center;
}

body[data-theme="dark"] .asistencia-pin-title {
    color: #f1f5f9;
}

.asistencia-pin-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 16px;
    text-align: center;
}

body[data-theme="dark"] .asistencia-pin-subtitle {
    color: #94a3b8;
}

/* PIN Digits */
#kiosk-pin-display {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 0 20px;
}

.kiosk-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 260px;
    margin: 0 auto 14px;
}

.keypad-btn {
    height: 52px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.12s ease;
}

.keypad-btn:active {
    transform: scale(0.95);
}

.keypad-ghost {
    background: transparent !important;
    border: 1.5px solid #e5e7eb !important;
    color: #64748b;
}

.keypad-ghost:hover {
    background: #f9fafb !important;
    border-color: #d1d5db;
}

body[data-theme="dark"] .keypad-ghost {
    border-color: #334155 !important;
    color: #94a3b8;
}

body[data-theme="dark"] .keypad-ghost:hover {
    background: #1e293b !important;
    border-color: #475569;
}

.pin-digit {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #f8fafc;
    transition: all 0.15s ease;
}

.pin-digit::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    transition: all 0.15s ease;
}

.pin-digit.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    transform: scale(1.08);
}

.pin-digit.active::after {
    width: 18px;
    height: 18px;
    background: #1d4ed8;
}

body[data-theme="dark"] .pin-digit {
    border-color: #374151;
    background: #1e293b;
}

body[data-theme="dark"] .pin-digit::after {
    background: #4b5563;
}

body[data-theme="dark"] .pin-digit.active {
    border-color: #3b82f6;
    background: #1e3a5f;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

body[data-theme="dark"] .pin-digit.active::after {
    background: #93c5fd;
}

/* ── Kiosk Result Overlay ────────────────────── */
.kiosk-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: kioskFadeIn 0.2s ease;
}

@keyframes kioskFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kiosk-result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
    border-radius: 20px;
    min-width: 280px;
    text-align: center;
    animation: kioskSlideIn 0.3s ease;
}

@keyframes kioskSlideIn {
    from { transform: translateY(20px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.kiosk-result-card.kiosk-loading {
    background: #1e293b;
    color: #f1f5f9;
}

.kiosk-result-card.kiosk-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.kiosk-result-card.kiosk-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.kiosk-result-card strong {
    font-size: 1.2rem;
    font-weight: 800;
    margin-top: 8px;
}

.kiosk-result-card p {
    font-size: 0.9rem;
    margin: 4px 0 0;
    opacity: 0.9;
}

.kiosk-result-time {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 4px;
    font-family: monospace;
}

.kiosk-result-icon {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.kiosk-result-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kioskSpin 0.8s linear infinite;
}

@keyframes kioskSpin {
    to { transform: rotate(360deg); }
}

/* ── TALLER: Bahía Cards Premium ─────────────────── */

/* ========================================================================
   ORION Workshop Enhancements — Phases 2-8
   ======================================================================== */

/* Phase 2: Task Badge on Kanban Cards */
.tareas-badge {
    background: var(--badge-info, #e8f0fe);
    color: var(--badge-info-text, #1a73e8);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Phase 4: Tech Avatars */
.tech-avatars-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tech-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: default;
    border: 2px solid var(--card-border, #e2e8f0);
}

[data-theme="dark"] .tech-avatar {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: rgba(255,255,255,0.1);
}

/* Phase 3: Active Timer Display */
.active-timer-display {
    color: #22c55e;
    font-weight: 700;
    animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.has-active-timer {
    border-left: 3px solid #22c55e;
}

/* Phase 7: Photo Badge */
.foto-badge {
    background: var(--badge-warning, #fef3c7);
    color: var(--badge-warning-text, #92400e);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Phase 2: Task Panel */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.task-row {
    padding: 10px;
    background: var(--panel-alt, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0);
}

[data-theme="dark"] .task-row {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.task-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.task-row-head strong {
    font-size: 0.9rem;
}

.task-row-desc {
    font-size: 0.8rem;
    color: var(--muted, #64748b);
    margin-top: 4px;
}

.task-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--muted, #64748b);
    align-items: center;
}

.task-summary {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Phase 7: Photo Viewer */
.photo-upload-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--panel-alt, #f8fafc);
    border-radius: 8px;
}

[data-theme="dark"] .photo-upload-area {
    background: rgba(255,255,255,0.03);
}

.photo-group {
    margin-bottom: 16px;
}

.photo-group h4 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.photo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
}

[data-theme="dark"] .photo-item {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

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

.photo-item small {
    display: block;
    padding: 4px 6px;
    font-size: 0.65rem;
    color: var(--muted, #64748b);
}

.photo-item .btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
}

/* Phase 5: Metrics Dashboard */
#taller-metrics {
    display: none;
    gap: 12px;
    padding: 12px 16px;
    background: var(--panel-bg, #ffffff);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

[data-theme="dark"] #taller-metrics {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    padding: 10px 14px;
    background: var(--card-bg, #ffffff);
    border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0);
}

[data-theme="dark"] .metric-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

.metric-card .metric-icon {
    font-size: 1.4rem;
}

.metric-card strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.metric-card small {
    font-size: 0.65rem;
    color: var(--muted, #64748b);
    text-align: center;
}

/* Phase 6: Wait Queue Lane */
.taller-column.lane-en_espera {
    border-top: 3px solid #f59e0b;
}

/* Icon buttons */
.icon-btn {
    padding: 4px 8px !important;
    font-size: 1rem !important;
    line-height: 1;
}

/* Wait queue position number */
.wait-queue-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ===== ATTENDANCE MODULE ENHANCEMENTS ===== */

/* Live Clock */
.live-clock {
    color: var(--accent-blue);
    font-variant-numeric: tabular-nums;
}

body[data-theme="dark"] .live-clock {
    color: #60a5fa;
}

/* Stats Grid */
.attendance-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.attendance-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--app-panel, #fff);
    border: 1px solid var(--app-border, #e2e2e5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body[data-theme="dark"] .attendance-stat-card {
    background: #1a2332;
    border-color: #2d3748;
}

.stat-icon {
    font-size: 1.6rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--app-muted, #86868b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Attendance Cards */
.attendance-card {
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    border-left: 4px solid transparent;
}

.attendance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

body[data-theme="dark"] .attendance-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.attendance-card.card-presente {
    border-left-color: var(--success, #34c759);
}

.attendance-card.card-tardanza {
    border-left-color: var(--warning, #ff9500);
}

.attendance-card.card-cerrado {
    border-left-color: var(--app-muted, #86868b);
    opacity: 0.85;
}

.attendance-card-sin-marcar {
    cursor: pointer;
    opacity: 0.7;
    border-left: 4px solid var(--danger, #ff3b30);
}

.attendance-card-sin-marcar:hover {
    opacity: 1;
}

/* Overtime Badge */
.badge.warning {
    background: #fff3cd;
    color: #856404;
}

body[data-theme="dark"] .badge.warning {
    background: #423a1a;
    color: #fbbf24;
}

/* Photo thumbnail */
.attendance-photo-thumb {
    margin-top: 8px;
}

.attendance-photo-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--app-border, #e2e2e5);
}

.attendance-card-photo img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--app-border, #e2e2e5);
}

/* History Calendar */
.history-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px;
    background: var(--app-panel, #fff);
    border-radius: 12px;
    border: 1px solid var(--app-border, #e2e2e5);
}

body[data-theme="dark"] .history-calendar {
    background: #1a2332;
    border-color: #2d3748;
}

.history-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #6b7280;
}

body[data-theme="dark"] .history-dot {
    background: #374151;
    color: #9ca3af;
}

.history-dot-green {
    background: #d1fae5;
    color: #065f46;
}

body[data-theme="dark"] .history-dot-green {
    background: #064e3b;
    color: #6ee7b7;
}

.history-dot-yellow {
    background: #fef3c7;
    color: #92400e;
}

body[data-theme="dark"] .history-dot-yellow {
    background: #78350f;
    color: #fcd34d;
}

.history-dot-red {
    background: #fee2e2;
    color: #991b1b;
}

body[data-theme="dark"] .history-dot-red {
    background: #7f1d1d;
    color: #fca5a5;
}

.history-dot-lightgreen {
    background: #dcfce7;
    color: #166534;
}

body[data-theme="dark"] .history-dot-lightgreen {
    background: #14532d;
    color: #86efac;
}

.history-dot-gray {
    background: #f3f4f6;
    color: #d1d5db;
}

body[data-theme="dark"] .history-dot-gray {
    background: #1f2937;
    color: #4b5563;
}

/* History Stats */
.history-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.history-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    background: var(--app-panel, #fff);
    border: 1px solid var(--app-border, #e2e2e5);
}

body[data-theme="dark"] .history-stat {
    background: #1a2332;
    border-color: #2d3748;
}

.stat-val {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-val.green { color: var(--success, #34c759); }
.stat-val.yellow { color: var(--warning, #ff9500); }
.stat-val.red { color: var(--danger, #ff3b30); }

.stat-lbl {
    font-size: 0.7rem;
    color: var(--app-muted, #86868b);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Welcome card feedback */
.attendance-welcome-card {
    border-left: 4px solid var(--success, #34c759);
}

.attendance-welcome-head strong {
    font-size: 1.1rem;
}

/* Kiosk PIN display */
#kiosk-pin-display {
    user-select: none;
    -webkit-user-select: none;
}

/* Responsive attendance stats */
@media (max-width: 768px) {
    .attendance-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .history-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .history-calendar {
        justify-content: center;
    }
}

/* ===== ATTENDANCE TOOLBAR HEADER ===== */
.attendance-toolbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,253,0.96));
    border: 1px solid rgba(120, 156, 204, 0.16);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    margin-bottom: 16px;
}

body[data-theme="dark"] .attendance-toolbar-header {
    background: linear-gradient(180deg, rgba(14, 23, 36, 0.98), rgba(10, 18, 29, 0.96));
    border-color: rgba(107, 132, 165, 0.14);
    box-shadow: 0 6px 20px rgba(2, 8, 20, 0.2);
}

.attendance-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.attendance-back-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(120, 156, 204, 0.18);
    background: rgba(255, 255, 255, 0.8);
    color: #4a6580;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}

.attendance-back-btn:hover {
    background: #eef3f9;
    border-color: rgba(120, 156, 204, 0.28);
    color: #1a3350;
    transform: translateX(-1px);
}

body[data-theme="dark"] .attendance-back-btn {
    background: rgba(17, 29, 46, 0.9);
    border-color: rgba(107, 132, 165, 0.18);
    color: #94a3b8;
}

body[data-theme="dark"] .attendance-back-btn:hover {
    background: rgba(23, 39, 61, 0.95);
    border-color: rgba(116, 169, 255, 0.22);
    color: #cbd5e1;
}

.attendance-toolbar-title-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.attendance-toolbar-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #10233c;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

body[data-theme="dark"] .attendance-toolbar-title {
    color: #e8edf5;
}

.attendance-toolbar-divider {
    font-size: 1.1rem;
    color: #c5d0dc;
    font-weight: 300;
    user-select: none;
}

body[data-theme="dark"] .attendance-toolbar-divider {
    color: #3d5068;
}

.attendance-live-clock {
    font-size: 0.92rem;
    font-weight: 500;
    color: #6b8299;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-theme="dark"] .attendance-live-clock {
    color: #6ea8d8;
}

.attendance-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.attendance-toolbar-actions .btn.primary svg {
    margin-right: 6px;
}

.attendance-toolbar-actions .btn.ghost svg {
    vertical-align: middle;
}

/* Icon-only button in attendance toolbar */
.attendance-toolbar-actions .btn.icon-only {
    padding: 10px 12px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Compact stat cards for attendance */
#asistencia-stats-bar .attendance-stat-card {
    padding: 12px 14px;
    gap: 10px;
}

#asistencia-stats-bar .stat-icon {
    font-size: 1.3rem;
}

#asistencia-stats-bar .stat-number {
    font-size: 1.15rem;
}

#asistencia-stats-bar .stat-label {
    font-size: 0.7rem;
}

/* Attendance Summary Row - compact stat cards */
.attendance-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.attendance-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--app-panel, #fff);
    border: 1px solid var(--app-border, #e2e2e5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.attendance-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .attendance-summary-card {
    background: #111b2a;
    border-color: #1e2d42;
}

body[data-theme="dark"] .attendance-summary-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.attendance-summary-number {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.attendance-summary-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--app-muted, #86868b);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

/* Attendance Filters Row */
.attendance-filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.attendance-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.attendance-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

body[data-theme="dark"] .attendance-search-icon {
    color: #4a6580;
}

.attendance-search-wrap input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 40px;
    border-radius: 12px;
    border: 1px solid rgba(120, 156, 204, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: var(--app-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.attendance-search-wrap input::placeholder {
    color: #94a3b8;
}

.attendance-search-wrap input:focus {
    border-color: rgba(0, 102, 204, 0.36);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.08);
}

body[data-theme="dark"] .attendance-search-wrap input {
    background: rgba(12, 23, 38, 0.9);
    border-color: rgba(107, 132, 165, 0.16);
    color: var(--app-text);
}

body[data-theme="dark"] .attendance-search-wrap input::placeholder {
    color: #4a6580;
}

body[data-theme="dark"] .attendance-search-wrap input:focus {
    border-color: rgba(93, 169, 255, 0.32);
    box-shadow: 0 0 0 3px rgba(93, 169, 255, 0.08);
}

.attendance-filters-row select {
    height: 42px;
    padding: 0 32px 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(120, 156, 204, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: var(--app-text);
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.attendance-filters-row select:hover {
    border-color: rgba(120, 156, 204, 0.3);
}

.attendance-filters-row select:focus {
    border-color: rgba(0, 102, 204, 0.36);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.08);
}

body[data-theme="dark"] .attendance-filters-row select {
    background-color: rgba(12, 23, 38, 0.9);
    border-color: rgba(107, 132, 165, 0.16);
    color: var(--app-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .attendance-filters-row select:focus {
    border-color: rgba(93, 169, 255, 0.32);
    box-shadow: 0 0 0 3px rgba(93, 169, 255, 0.08);
}

/* Responsive attendance toolbar */
@media (max-width: 860px) {
    .attendance-toolbar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .attendance-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .attendance-toolbar-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
        font-size: 0.85rem;
        padding: 9px 12px;
    }

    .attendance-toolbar-actions .btn.primary svg {
        margin-right: 4px;
    }

    .attendance-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .attendance-toolbar-title-group {
        gap: 6px;
    }

    .attendance-toolbar-title {
        font-size: 1.15rem;
    }

    .attendance-live-clock {
        font-size: 0.82rem;
    }

    .attendance-toolbar-divider {
        display: none;
    }

    .attendance-filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-filters-row select {
        width: 100%;
    }
}

/* ─── Responsive: Inventory Pagination & Chart ───────────────── */
@media (max-width: 768px) {
    .inventory-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .inventory-pagination-size {
        justify-content: center;
    }

    .inventory-pagination-nav {
        justify-content: center;
    }

    .inventory-chart-container {
        height: 160px;
        gap: 8px;
    }

    .inventory-chart-bar-label {
        font-size: 0.64rem;
    }

    .inventory-chart-summary {
        flex-direction: column;
        gap: 8px;
    }

    .inventory-purchase-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-purchase-status-badges {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .inventory-products-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-purchase-grid,
    .inventory-provider-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-chart-container {
        height: 130px;
        gap: 6px;
    }

    .inventory-chart-bar-value {
        font-size: 0.68rem;
    }

    .inventory-chart-bar-label {
        font-size: 0.6rem;
    }

    .inventory-pagination {
        padding: 12px 14px;
    }

    .inventory-page-btn {
        padding: 5px 10px;
        font-size: 0.76rem;
    }

    .inventory-page-size-btn {
        padding: 4px 10px;
        font-size: 0.74rem;
    }
}

/* =============================================
   PDF Analysis & Premium Purchase Components
   ============================================= */

/* PDF Drop Zone */
.pdf-drop-zone {
    border: 2px dashed var(--app-border);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--app-panel);
}
.pdf-drop-zone:hover, .pdf-drop-zone.drag-over {
    border-color: var(--accent-blue, #2563eb);
    background: var(--surface-50, #f0f7ff);
}
body[data-theme="dark"] .pdf-drop-zone:hover,
body[data-theme="dark"] .pdf-drop-zone.drag-over {
    border-color: var(--accent-blue, #5da9ff);
    background: rgba(59, 130, 246, 0.08);
}

/* PDF Data Cards */
.pdf-data-card {
    background: var(--app-panel);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pdf-data-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
}
.pdf-data-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.pdf-data-icon.ruc { background: #fef3c7; color: #92400e; }
.pdf-data-icon.monto { background: #dcfce7; color: #166534; }
.pdf-data-icon.moneda { background: #dbeafe; color: #1e40af; }
.pdf-data-icon.fecha { background: #f3e8ff; color: #7c3aed; }

body[data-theme="dark"] .pdf-data-icon.ruc { background: rgba(254, 243, 199, 0.15); color: #fbbf24; }
body[data-theme="dark"] .pdf-data-icon.monto { background: rgba(220, 252, 231, 0.12); color: #4ade80; }
body[data-theme="dark"] .pdf-data-icon.moneda { background: rgba(219, 234, 254, 0.12); color: #60a5fa; }
body[data-theme="dark"] .pdf-data-icon.fecha { background: rgba(243, 232, 255, 0.12); color: #a78bfa; }

body[data-theme="dark"] .pdf-data-card {
    background: rgba(15, 27, 45, 0.85);
    border-color: rgba(148, 163, 184, 0.12);
}

/* Purchase Status Badge (premium pill style) */
.purchase-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.purchase-status-badge.pendiente { background: #fef3c7; color: #92400e; }
.purchase-status-badge.transito { background: #dbeafe; color: #1e40af; }
.purchase-status-badge.recibida { background: #dcfce7; color: #166534; }
.purchase-status-badge.cancelada { background: #fef2f2; color: #991b1b; }

body[data-theme="dark"] .purchase-status-badge.pendiente { background: rgba(254, 243, 199, 0.12); color: #fbbf24; }
body[data-theme="dark"] .purchase-status-badge.transito { background: rgba(219, 234, 254, 0.12); color: #60a5fa; }
body[data-theme="dark"] .purchase-status-badge.recibida { background: rgba(220, 252, 231, 0.12); color: #4ade80; }
body[data-theme="dark"] .purchase-status-badge.cancelada { background: rgba(254, 242, 242, 0.12); color: #f87171; }

/* ========================================
   FEATURES - Compras Module (8 features)
   ======================================== */

/* Feature 3: Visual filter tags for purchases */
.purchase-filters-active {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--app-border);
    background: var(--surface-50, #f9fafb);
}

.purchase-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-100, #f3f4f6);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.purchase-filter-tag:hover {
    background: #fee2e2;
    color: #991b1b;
}

.purchase-filter-tag .remove {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

.purchase-filter-tag.active {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.purchase-filter-tag.active:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.purchase-filter-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Feature 4: Purchase footer summary */
.purchase-footer-summary {
    display: flex;
    gap: 24px;
    padding: 16px;
    background: var(--surface-50, #f9fafb);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    margin-top: 16px;
}

.purchase-summary-item {
    flex: 1;
    text-align: center;
}

.purchase-summary-item .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.purchase-summary-item .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

/* Feature 5: Stock warning in purchase cards */
.purchase-stock-warning {
    background: #fef3c7;
    color: #92400e;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-theme="dark"] .purchase-stock-warning {
    background: rgba(146, 64, 14, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

/* Feature 2: Provider category badge & filter */
.provider-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
    margin-bottom: 4px;
}

body[data-theme="dark"] .provider-category-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.inventory-provider-category-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

/* Dark theme for filter tags and summary */
body[data-theme="dark"] .purchase-filter-tag {
    background: rgba(31, 41, 55, 0.8);
    color: #d1d5db;
    border-color: rgba(75, 85, 99, 0.3);
}

body[data-theme="dark"] .purchase-filter-tag.active {
    background: rgba(30, 58, 138, 0.4);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

body[data-theme="dark"] .purchase-filters-active {
    background: rgba(17, 24, 39, 0.4);
    border-top-color: rgba(75, 85, 99, 0.2);
}

body[data-theme="dark"] .purchase-footer-summary {
    background: rgba(17, 24, 39, 0.6);
    border-color: rgba(75, 85, 99, 0.2);
}

body[data-theme="dark"] .purchase-summary-item .label {
    color: #9ca3af;
}

body[data-theme="dark"] .purchase-summary-item .value {
    color: #f3f4f6;
}

body[data-theme="dark"] .purchase-filter-count {
    color: #9ca3af;
}

/* xsmall button variant */
.btn.xsmall {
    padding: 2px 6px;
    font-size: 0.7rem;
    line-height: 1.4;
    border-radius: 6px;
}

/* Purchase State Select in card footer */
.purchase-state-select {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 0.75rem;
    cursor: pointer;
    min-width: 110px;
    appearance: auto;
}
.purchase-state-select option {
    padding: 4px 8px;
}

/* ========================================
   PURCHASE CARD PREMIUM REDESIGN
   ======================================== */

/* Purchase Card Premium */
.purchase-card-premium {
    background: var(--app-panel, #ffffff);
    border: 1px solid var(--app-border, #e2e2e5);
    border-radius: 16px;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

.purchase-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand, #2563eb);
    border-radius: 4px 0 0 4px;
    transition: all 0.2s ease;
}

.purchase-card-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: var(--brand, #2563eb);
}

.purchase-card-premium:hover::before {
    width: 6px;
}

/* State-colored side bar */
.purchase-card-premium.state-pendiente::before { background: #f59e0b; }
.purchase-card-premium.state-transito::before { background: #3b82f6; }
.purchase-card-premium.state-recibida::before { background: #22c55e; }
.purchase-card-premium.state-cancelada::before { background: #ef4444; }

/* Card Header */
.purchase-card-premium .purchase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--app-border, #f3f4f6);
    gap: 12px;
}

.purchase-card-premium .purchase-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.purchase-card-premium .purchase-order-number {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text, #111827);
    white-space: nowrap;
}

.purchase-card-premium .purchase-date {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.purchase-card-premium .purchase-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Premium Status Badge with dot */
.purchase-status-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    position: relative;
}

.purchase-status-badge-premium .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.purchase-status-badge-premium.pendiente {
    background: #fef3c7;
    color: #92400e;
}
.purchase-status-badge-premium.pendiente .status-dot { background: #f59e0b; }

.purchase-status-badge-premium.transito {
    background: #dbeafe;
    color: #1e40af;
}
.purchase-status-badge-premium.transito .status-dot { background: #3b82f6; }

.purchase-status-badge-premium.recibida {
    background: #dcfce7;
    color: #166534;
}
.purchase-status-badge-premium.recibida .status-dot { background: #22c55e; }

.purchase-status-badge-premium.cancelada {
    background: #fef2f2;
    color: #991b1b;
}
.purchase-status-badge-premium.cancelada .status-dot { background: #ef4444; }

/* Card Body */
.purchase-card-premium .purchase-body {
    padding: 14px 18px;
}

.purchase-card-premium .purchase-provider-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text, #111827);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-card-premium .purchase-amount-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}

.purchase-card-premium .purchase-amount-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text, #111827);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.purchase-card-premium .purchase-amount-currency {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.purchase-card-premium .purchase-meta-line {
    font-size: 0.76rem;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.purchase-card-premium .purchase-meta-line span {
    white-space: nowrap;
}

/* Stock warning premium (no emoji) */
.purchase-stock-warning-premium {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 600;
    margin: 0 18px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.purchase-stock-warning-premium .warning-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Collapsible Items List */
.purchase-items-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--brand, #2563eb);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 8px;
    transition: color 0.15s ease;
}

.purchase-items-toggle-btn:hover {
    color: var(--brand-hover, #1d4ed8);
}

.purchase-items-toggle-btn .toggle-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.purchase-items-toggle-btn.expanded .toggle-chevron {
    transform: rotate(90deg);
}

.purchase-items-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
    border-top: 1px dashed var(--app-border, #e5e7eb);
    margin-top: 10px;
    padding-top: 0;
}

.purchase-items-list.expanded {
    max-height: 300px;
    opacity: 1;
    padding-top: 10px;
}

.purchase-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
    gap: 8px;
}

.purchase-item-row:hover {
    background: var(--surface-50, #f9fafb);
}

.purchase-item-name {
    flex: 1;
    color: var(--text, #111827);
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.purchase-item-qty {
    color: var(--text-muted, #6b7280);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.purchase-item-total {
    font-weight: 700;
    color: var(--text, #111827);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card Footer with Actions */
.purchase-card-premium .purchase-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px 14px;
}

.purchase-card-premium .purchase-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.purchase-card-premium .purchase-footer-state {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Premium Purchase State Select */
.purchase-state-select-premium {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 120px;
    border: 1px solid var(--app-border, #e5e7eb);
    background: var(--app-panel, #ffffff);
    color: var(--text, #111827);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
}

.purchase-state-select-premium:hover {
    border-color: var(--brand, #2563eb);
}

.purchase-state-select-premium:focus {
    outline: none;
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ========================================
   PREMIUM TOOLBAR WITH FILTER PILLS
   ======================================== */

.purchase-toolbar-premium {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border, #e5e7eb);
}

.purchase-toolbar-search {
    flex: 1;
    min-width: 220px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--app-border, #e5e7eb);
    background: var(--surface-50, #f9fafb);
    color: var(--text, #111827);
    font-size: 0.84rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.purchase-toolbar-search:focus {
    outline: none;
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: var(--app-panel, #ffffff);
}

.purchase-toolbar-search::placeholder {
    color: var(--text-muted, #9ca3af);
}

.purchase-toolbar-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--app-border, #e5e7eb);
    background: var(--surface-50, #f9fafb);
    color: var(--text, #111827);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 150px;
    appearance: auto;
}

.purchase-toolbar-select:hover {
    border-color: var(--brand, #2563eb);
}

.purchase-toolbar-select:focus {
    outline: none;
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.purchase-toolbar-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.purchase-result-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--brand, #2563eb);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Active filter tags premium */
.purchase-filters-active {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 18px;
    border-top: 1px solid var(--app-border, #e5e7eb);
    background: var(--surface-50, #f9fafb);
}

.purchase-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.purchase-filter-tag:hover {
    background: #fee2e2;
    color: #991b1b;
}

.purchase-filter-tag .remove {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.purchase-filter-tag:hover .remove {
    opacity: 1;
}

.purchase-filter-count {
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    margin-left: auto;
    font-weight: 600;
}

/* ========================================
   PREMIUM FOOTER SUMMARY
   ======================================== */

.purchase-footer-summary-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid var(--app-border, #e5e7eb);
    background: var(--surface-50, #f9fafb);
}

.purchase-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--app-panel, #ffffff);
    border: 1px solid var(--app-border, #e5e7eb);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.purchase-summary-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.purchase-summary-card .summary-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
}

.purchase-summary-card .summary-label {
    font-size: 0.68rem;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.purchase-summary-card .summary-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text, #111827);
    font-variant-numeric: tabular-nums;
}

/* Semantic colors for summary cards */
.purchase-summary-card.card-total {
    border-color: rgba(37, 99, 235, 0.2);
}
.purchase-summary-card.card-total .summary-icon {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.purchase-summary-card.card-monto {
    border-color: rgba(16, 185, 129, 0.2);
}
.purchase-summary-card.card-monto .summary-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.purchase-summary-card.card-promedio {
    border-color: rgba(139, 92, 246, 0.2);
}
.purchase-summary-card.card-promedio .summary-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.purchase-summary-card.card-pendientes {
    border-color: rgba(245, 158, 11, 0.2);
}
.purchase-summary-card.card-pendientes .summary-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* ========================================
   DARK THEME - Premium Purchases
   ======================================== */

body[data-theme="dark"] .purchase-card-premium {
    background: var(--app-panel, #0f1b2d);
    border-color: var(--app-border, rgba(148, 163, 184, 0.16));
}

body[data-theme="dark"] .purchase-card-premium:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: #60a5fa;
}

body[data-theme="dark"] .purchase-card-premium::before {
    background: #60a5fa;
}

body[data-theme="dark"] .purchase-card-premium .purchase-header {
    border-bottom-color: #374151;
}

body[data-theme="dark"] .purchase-card-premium .purchase-order-number {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-card-premium .purchase-date {
    color: var(--text-muted, #9ca3af);
}

body[data-theme="dark"] .purchase-card-premium .purchase-provider-name {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-card-premium .purchase-amount-value {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-card-premium .purchase-amount-currency {
    color: var(--text-muted, #9ca3af);
}

body[data-theme="dark"] .purchase-card-premium .purchase-meta-line {
    color: var(--text-muted, #9ca3af);
}

body[data-theme="dark"] .purchase-card-premium .purchase-footer {
    border-top-color: #374151;
}

body[data-theme="dark"] .purchase-stock-warning-premium {
    background: rgba(146, 64, 14, 0.15);
    border-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

body[data-theme="dark"] .purchase-stock-warning-premium .warning-icon {
    background: #f59e0b;
    color: #1f2937;
}

body[data-theme="dark"] .purchase-items-list {
    border-top-color: #374151;
}

body[data-theme="dark"] .purchase-item-row:hover {
    background: rgba(31, 41, 55, 0.5);
}

body[data-theme="dark"] .purchase-item-name {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-item-qty {
    color: var(--text-muted, #9ca3af);
}

body[data-theme="dark"] .purchase-item-total {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-items-toggle-btn {
    color: #60a5fa;
}

body[data-theme="dark"] .purchase-state-select-premium {
    background: var(--app-panel, #0f1b2d);
    border-color: var(--app-border, rgba(148, 163, 184, 0.16));
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-toolbar-premium {
    border-bottom-color: #374151;
}

body[data-theme="dark"] .purchase-toolbar-search {
    background: rgba(17, 24, 39, 0.6);
    border-color: var(--app-border, rgba(148, 163, 184, 0.16));
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-toolbar-search:focus {
    background: var(--app-panel, #0f1b2d);
    border-color: #60a5fa;
}

body[data-theme="dark"] .purchase-toolbar-select {
    background: rgba(17, 24, 39, 0.6);
    border-color: var(--app-border, rgba(148, 163, 184, 0.16));
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-toolbar-select:hover {
    border-color: #60a5fa;
}

/* Inventory Toolbar Premium - Dark Mode */
body[data-theme="dark"] #view-inventario .inventory-toolbar-premium {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    background: rgba(30, 41, 59, 0.3);
}

body[data-theme="dark"] #view-inventario .inventory-toolbar-search {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 39, 0.6);
    color: var(--app-text);
}

body[data-theme="dark"] #view-inventario .inventory-toolbar-search:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

body[data-theme="dark"] #view-inventario .inventory-toolbar-select {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 39, 0.6);
    color: var(--app-text);
}

body[data-theme="dark"] #view-inventario .inventory-toolbar-select:hover {
    border-color: rgba(99, 102, 241, 0.5);
}

body[data-theme="dark"] #view-inventario .inventory-toolbar-select:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

body[data-theme="dark"] #view-inventario .inventory-result-count {
    background: rgba(99, 102, 241, 0.15);
    color: rgba(165, 180, 252, 0.95);
}

body[data-theme="dark"] .purchase-result-count {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

body[data-theme="dark"] .purchase-filters-active {
    background: rgba(17, 24, 39, 0.4);
    border-top-color: rgba(75, 85, 99, 0.2);
}

body[data-theme="dark"] .purchase-filter-tag {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.2);
}

body[data-theme="dark"] .purchase-filter-tag:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

body[data-theme="dark"] .purchase-filter-count {
    color: #9ca3af;
}

body[data-theme="dark"] .purchase-footer-summary-premium {
    background: rgba(17, 24, 39, 0.4);
    border-top-color: #374151;
}

body[data-theme="dark"] .purchase-summary-card {
    background: var(--app-panel, #0f1b2d);
    border-color: var(--app-border, rgba(148, 163, 184, 0.16));
}

body[data-theme="dark"] .purchase-summary-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .purchase-summary-card .summary-label {
    color: #9ca3af;
}

body[data-theme="dark"] .purchase-summary-card .summary-value {
    color: var(--app-text, #eef4ff);
}

body[data-theme="dark"] .purchase-summary-card.card-total {
    border-color: rgba(96, 165, 250, 0.2);
}
body[data-theme="dark"] .purchase-summary-card.card-total .summary-icon {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

body[data-theme="dark"] .purchase-summary-card.card-monto {
    border-color: rgba(52, 211, 153, 0.2);
}
body[data-theme="dark"] .purchase-summary-card.card-monto .summary-icon {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

body[data-theme="dark"] .purchase-summary-card.card-promedio {
    border-color: rgba(167, 139, 250, 0.2);
}
body[data-theme="dark"] .purchase-summary-card.card-promedio .summary-icon {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}

body[data-theme="dark"] .purchase-summary-card.card-pendientes {
    border-color: rgba(251, 191, 36, 0.2);
}
body[data-theme="dark"] .purchase-summary-card.card-pendientes .summary-icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

body[data-theme="dark"] .purchase-status-badge-premium.pendiente {
    background: rgba(254, 243, 199, 0.1);
    color: #fbbf24;
}
body[data-theme="dark"] .purchase-status-badge-premium.pendiente .status-dot {
    background: #f59e0b;
}

body[data-theme="dark"] .purchase-status-badge-premium.transito {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}
body[data-theme="dark"] .purchase-status-badge-premium.transito .status-dot {
    background: #60a5fa;
}

body[data-theme="dark"] .purchase-status-badge-premium.recibida {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
body[data-theme="dark"] .purchase-status-badge-premium.recibida .status-dot {
    background: #22c55e;
}

body[data-theme="dark"] .purchase-status-badge-premium.cancelada {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
body[data-theme="dark"] .purchase-status-badge-premium.cancelada .status-dot {
    background: #ef4444;
}

/* Responsive for premium purchases */
@media (max-width: 768px) {
    .purchase-toolbar-premium {
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-toolbar-search {
        min-width: 0;
    }

    .purchase-toolbar-actions-right {
        margin-left: 0;
        justify-content: flex-end;
    }

    .purchase-footer-summary-premium {
        grid-template-columns: repeat(2, 1fr);
    }

    .purchase-card-premium .purchase-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-card-premium .purchase-footer-actions {
        justify-content: center;
    }

    .purchase-card-premium .purchase-footer-state {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .purchase-footer-summary-premium {
        grid-template-columns: 1fr;
    }

    .purchase-card-premium .purchase-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .purchase-card-premium .purchase-header-badges {
        align-self: flex-start;
    }
}

/* Spinner animation for PDF analysis */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Improved compra modal PDF section */
#compra-pdf-filename {
    font-size: 0.82rem;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PDF Preview container */
#pdf-preview-container {
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--app-border);
}

/* PDF Items List */
#pdf-items-list.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
#pdf-items-list > div {
    background: var(--app-panel);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 12px;
}

/* Ensure form grids inside PDF modal work well */
#pdf-extracted-data .form-grid {
    gap: 12px;
}

/* Responsive for PDF modal cards */
@media (max-width: 640px) {
    .pdf-data-card {
        padding: 12px;
        gap: 10px;
    }
    .pdf-data-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
    #pdf-extracted-data > div:first-of-type {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================= */
/* NEW PDF MULTI-UPLOAD FLOW (3-Step Modal)      */
/* ============================================= */

/* Modal XL */
.modal-xl {
    max-height: 95vh;
}

/* PDF Step Indicators */
.pdf-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.pdf-step-indicator.active {
    background: var(--accent-blue, #2563eb);
    color: white;
}
.pdf-step-indicator.done {
    background: #dcfce7;
    color: #166534;
}
.pdf-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}
.pdf-step-indicator.active .pdf-step-num {
    background: rgba(255,255,255,0.2);
}
.pdf-step-indicator.done .pdf-step-num {
    background: rgba(22, 101, 52, 0.15);
}
.pdf-step-label {
    font-size: 0.85rem;
    font-weight: 600;
}
.pdf-step-connector {
    width: 32px;
    height: 2px;
    background: var(--app-border, #e5e7eb);
}

/* PDF Drop Zone (updated) */
.pdf-drop-zone {
    border: 2px dashed var(--app-border);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.pdf-drop-zone:hover, .pdf-drop-zone.drag-over {
    border-color: var(--accent-blue, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}
.pdf-drop-zone svg { color: var(--app-muted); margin-bottom: 12px; }
.pdf-drop-zone h3 { font-size: 1.1rem; margin-bottom: 4px; color: var(--app-text); }
.pdf-drop-zone p { color: var(--app-muted); font-size: 0.85rem; margin-bottom: 16px; }

/* PDF Files List */
.pdf-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--app-panel, #ffffff);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    margin-bottom: 8px;
}
.pdf-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.pdf-file-info { flex: 1; min-width: 0; }
.pdf-file-name { font-weight: 600; font-size: 0.85rem; color: var(--app-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-file-size { font-size: 0.75rem; color: var(--app-muted); }
.pdf-file-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.pdf-file-status.pending { background: #fef3c7; color: #92400e; }
.pdf-file-status.analyzing { background: #dbeafe; color: #1e40af; }
.pdf-file-status.done { background: #dcfce7; color: #166534; }
.pdf-file-status.error { background: #fef2f2; color: #991b1b; }
.pdf-file-status.saved { background: #e0e7ff; color: #3730a3; }
.pdf-file-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #6b7280;
    transition: all 0.15s ease;
}
.pdf-file-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* PDF Extraction Table */
.pdf-extraction-table {
    width: 100%;
    border-collapse: collapse;
}
.pdf-extraction-table th {
    background: var(--surface-50, #f9fafb);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.pdf-extraction-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--app-border);
    font-size: 0.85rem;
    color: var(--app-text);
    vertical-align: middle;
}
.pdf-extraction-table tr:hover {
    background: var(--surface-50, #f9fafb);
}
.pdf-extraction-table input[type="text"],
.pdf-extraction-table input[type="number"],
.pdf-extraction-table input[type="date"],
.pdf-extraction-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: white;
    color: var(--app-text);
}
.pdf-extraction-table input:focus,
.pdf-extraction-table select:focus {
    border-color: var(--accent-blue, #2563eb);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.pdf-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}
.pdf-confidence-badge.high { background: #dcfce7; color: #166534; }
.pdf-confidence-badge.medium { background: #fef3c7; color: #92400e; }
.pdf-confidence-badge.low { background: #fef2f2; color: #991b1b; }
.pdf-items-toggle {
    padding: 4px 8px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--app-text);
    transition: all 0.15s ease;
}
.pdf-items-toggle:hover {
    border-color: var(--accent-blue, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}
.pdf-items-detail {
    display: none;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--app-text);
}
.pdf-items-detail.show { display: block; }
.pdf-items-detail > div {
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}
.pdf-items-detail > div:last-child {
    border-bottom: none;
}

/* PDF Result Items (Step 3) */
.pdf-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-panel, #ffffff);
}
.pdf-result-item.success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.pdf-result-item.error {
    border-color: #fecaca;
    background: #fef2f2;
}

/* PDF Saving Spinner */
.pdf-saving-spinner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: var(--app-muted);
}
.pdf-saving-spinner::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid var(--app-border);
    border-top-color: var(--accent-blue, #2563eb);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Dark mode for PDF flow */
body[data-theme="dark"] .pdf-file-item { background: var(--app-panel); }
body[data-theme="dark"] .pdf-file-remove { background: #374151; color: #9ca3af; }
body[data-theme="dark"] .pdf-file-remove:hover { background: #7f1d1d; color: #fca5a5; }
body[data-theme="dark"] .pdf-file-icon { background: rgba(254, 242, 242, 0.1); color: #f87171; }
body[data-theme="dark"] .pdf-extraction-table th { background: #1f2937; color: #9ca3af; }
body[data-theme="dark"] .pdf-extraction-table tr:hover { background: #1f2937; }
body[data-theme="dark"] .pdf-extraction-table input,
body[data-theme="dark"] .pdf-extraction-table select { background: #374151; border-color: #4b5563; color: white; }
body[data-theme="dark"] .pdf-extraction-table input:focus,
body[data-theme="dark"] .pdf-extraction-table select:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); }
body[data-theme="dark"] .pdf-items-detail { background: #1f2937; }
body[data-theme="dark"] .pdf-items-detail > div { border-bottom-color: #374151; }
body[data-theme="dark"] .pdf-items-toggle { background: #374151; border-color: #4b5563; color: white; }
body[data-theme="dark"] .pdf-items-toggle:hover { border-color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
body[data-theme="dark"] .pdf-result-item { background: var(--app-panel); }
body[data-theme="dark"] .pdf-result-item.success { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08); }
body[data-theme="dark"] .pdf-result-item.error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); }

/* Responsive for PDF table */
@media (max-width: 1200px) {
    .pdf-extraction-table { font-size: 0.8rem; }
    .pdf-extraction-table th, .pdf-extraction-table td { padding: 6px 8px; }
}

/* Small buttons */
.btn.xsmall, .btn-icon.xsmall {
    padding: 2px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
    line-height: 1.3;
}
.btn-icon.xsmall {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.8rem;
}

/* ─── SUNAT Consult Button ─────────────────────────────────────────── */
.sunat-consult-btn {
    padding: 8px 14px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.sunat-consult-btn:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
    background: #f0f7ff;
}
.sunat-consult-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sunat-consult-btn svg {
    flex-shrink: 0;
}
.sunat-spinner {
    animation: sunat-spin 1s linear infinite;
}
@keyframes sunat-spin {
    to { transform: rotate(360deg); }
}

/* Auto-filled input indicator */
.input-auto-filled {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transition: all 0.3s ease;
}
.input-auto-filled:focus {
    background: white !important;
    border-color: #2563eb !important;
}

/* Dark theme */
body[data-theme="dark"] .sunat-consult-btn {
    background: var(--app-panel, #111827);
    color: var(--text, #f9fafb);
    border-color: #374151;
}
body[data-theme="dark"] .sunat-consult-btn:hover:not(:disabled) {
    background: #1e3a5f;
    border-color: #60a5fa;
    color: #60a5fa;
}

/* ============================================================
   PDF Analysis Module - Improved Styles (No Emojis)
   ============================================================ */

/* PDF file icon with SVG support */
.pdf-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(254, 242, 242, 0.6);
    color: #ef4444;
    flex-shrink: 0;
}
.pdf-file-icon svg {
    width: 24px;
    height: 24px;
}
body[data-theme="dark"] .pdf-file-icon {
    background: rgba(254, 242, 242, 0.1);
    color: #f87171;
}

/* PDF file remove button */
.pdf-file-remove {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--app-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.pdf-file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
body[data-theme="dark"] .pdf-file-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* PDF extraction table - improved */
.pdf-extraction-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.pdf-extraction-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 10px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    z-index: 2;
}
body[data-theme="dark"] .pdf-extraction-table th {
    background: #1e293b;
    color: #94a3b8;
    border-bottom-color: #334155;
}

.pdf-extraction-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
body[data-theme="dark"] .pdf-extraction-table td {
    border-bottom-color: #1e293b;
}

.pdf-extraction-table tr:hover {
    background: #f8fafc;
}
body[data-theme="dark"] .pdf-extraction-table tr:hover {
    background: #1e293b;
}

/* Row number */
.pdf-row-num {
    font-weight: 600;
    color: var(--app-muted);
    font-size: 0.8rem;
    text-align: center;
}

/* Filename cell */
.pdf-filename {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.pdf-filesize {
    font-size: 0.7rem;
    color: var(--app-muted);
    margin-top: 2px;
}

/* PDF input fields */
.pdf-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
    color: var(--app-text);
    transition: all 0.15s ease;
}
.pdf-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.pdf-input-right {
    text-align: right;
}
.pdf-input::placeholder {
    color: #cbd5e1;
}
body[data-theme="dark"] .pdf-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body[data-theme="dark"] .pdf-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.pdf-select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
    color: var(--app-text);
    cursor: pointer;
}
body[data-theme="dark"] .pdf-select {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* Input group (RUC + search button) */
.pdf-input-group {
    display: flex;
    gap: 4px;
    align-items: center;
}
.pdf-input-group .pdf-input {
    flex: 1;
}

/* Confidence badge */
.pdf-confidence-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.pdf-confidence-badge.high {
    background: #dcfce7;
    color: #166534;
}
.pdf-confidence-badge.medium {
    background: #fef3c7;
    color: #92400e;
}
.pdf-confidence-badge.low {
    background: #fef2f2;
    color: #991b1b;
}
body[data-theme="dark"] .pdf-confidence-badge.high {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
body[data-theme="dark"] .pdf-confidence-badge.medium {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
body[data-theme="dark"] .pdf-confidence-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Error badge */
.pdf-error-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: #dc2626;
    margin-top: 3px;
}
body[data-theme="dark"] .pdf-error-badge {
    color: #f87171;
}

/* Confidence cell */
.pdf-confidence-cell {
    text-align: center;
}

/* Items toggle button */
.pdf-items-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: var(--app-text);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.pdf-items-toggle:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.06);
    color: #2563eb;
}
.pdf-items-toggle svg:first-child {
    flex-shrink: 0;
}
body[data-theme="dark"] .pdf-items-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body[data-theme="dark"] .pdf-items-toggle:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

/* Chevron rotation */
.pdf-chevron {
    transition: transform 0.2s ease;
}

/* Items cell */
.pdf-items-cell {
    text-align: center;
}

/* Actions cell */
.pdf-actions-cell {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

/* Icon buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
.btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--app-text);
}
.btn-icon.ghost {
    background: transparent;
}
.btn-icon.ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}
.btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
body[data-theme="dark"] .btn-icon {
    color: #94a3b8;
}
body[data-theme="dark"] .btn-icon:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}
body[data-theme="dark"] .btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Expandable items row */
.pdf-items-expand-row td {
    padding: 0 !important;
    border-bottom: 1px solid #e2e8f0;
}
body[data-theme="dark"] .pdf-items-expand-row td {
    border-bottom-color: #334155;
}

.pdf-items-expandable {
    padding: 12px 16px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
}
body[data-theme="dark"] .pdf-items-expandable {
    background: #1e293b;
    border-left-color: #3b82f6;
}

.pdf-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.pdf-items-header h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0;
}
.pdf-items-header-actions {
    display: flex;
    gap: 6px;
}

/* Empty state for no items */
.pdf-items-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--app-muted);
    text-align: center;
}
.pdf-items-empty svg {
    color: #cbd5e1;
}
.pdf-items-empty p {
    font-size: 0.82rem;
    margin: 0;
}

/* Inner items table */
.pdf-items-inner-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
}
.pdf-items-inner-table th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
body[data-theme="dark"] .pdf-items-inner-table th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}

.pdf-items-inner-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
body[data-theme="dark"] .pdf-items-inner-table td {
    border-bottom-color: #1e293b;
}

.pdf-items-inner-table .pdf-item-row:hover {
    background: rgba(255, 255, 255, 0.5);
}
body[data-theme="dark"] .pdf-items-inner-table .pdf-item-row:hover {
    background: rgba(30, 41, 59, 0.5);
}

.pdf-item-num {
    text-align: center;
    color: var(--app-muted);
    font-weight: 500;
    font-size: 0.72rem;
}

.pdf-item-desc {
    max-width: 300px;
}

.pdf-item-total {
    text-align: right;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--app-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pdf-item-actions {
    text-align: center;
}

/* Table wrapper for overflow */
.pdf-items-table-wrapper {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
body[data-theme="dark"] .pdf-items-table-wrapper {
    border-color: #334155;
    background: #0f172a;
}

/* Result items in step 3 */
.pdf-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 6px;
    transition: all 0.15s ease;
}
.pdf-result-item.success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}
.pdf-result-item.error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}
body[data-theme="dark"] .pdf-result-item {
    background: var(--app-panel);
    border-color: #334155;
}
body[data-theme="dark"] .pdf-result-item.success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}
body[data-theme="dark"] .pdf-result-item.error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

/* Saving spinner */
.pdf-saving-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--app-border);
    border-top-color: var(--accent-blue, #2563eb);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Has error row styling */
.pdf-extraction-row.has-error {
    opacity: 0.85;
}
.pdf-extraction-row.has-error td {
    color: #991b1b;
}
body[data-theme="dark"] .pdf-extraction-row.has-error td {
    color: #fca5a5;
}

/* Responsive for PDF flow */
@media (max-width: 1200px) {
    .pdf-extraction-table {
        font-size: 0.78rem;
    }
    .pdf-extraction-table th,
    .pdf-extraction-table td {
        padding: 6px 6px;
    }
    .pdf-filename {
        max-width: 120px;
    }
    .pdf-items-inner-table {
        font-size: 0.72rem;
    }
}

/* ========================================
   SMART Product Detail Modal - Premium
   ======================================== */

/* Modal Container */
.modal-product-detail-content {
    width: min(1100px, calc(100vw - 40px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

/* Header Bar */
.product-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--app-border, #e2e8f0);
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.96));
    border-radius: 20px 20px 0 0;
}

body[data-theme="dark"] .product-detail-header {
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(12,20,35,0.96));
    border-bottom-color: rgba(106,122,150,0.2);
}

.product-detail-header-left,
.product-detail-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-detail-header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
}

#product-detail-status {
    display: flex;
    align-items: center;
}

#modal-product-detail {
    position: fixed;
}

.product-detail-side-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 72px;
    border: none;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    color: #1c3551;
    font-size: 1.5rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(15,23,42,0.14);
    z-index: 1201;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.product-detail-side-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 22px 42px rgba(15,23,42,0.18);
}

.product-detail-side-nav:disabled {
    opacity: 0.32;
    cursor: default;
}

.product-detail-side-prev {
    left: max(16px, calc(50vw - 610px));
}

.product-detail-side-next {
    right: max(16px, calc(50vw - 610px));
}

/* Scrollable Body */
.product-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Hero Section */
.pd-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(240,246,255,0.6), rgba(230,240,255,0.4));
    border-bottom: 1px solid var(--app-border, #e2e8f0);
}

body[data-theme="dark"] .pd-hero {
    background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(12,20,35,0.3));
    border-bottom-color: rgba(106,122,150,0.18);
}

/* Gallery */
.pd-gallery {
    display: grid;
    gap: 12px;
}

.pd-main-image {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
    border: 1px solid #d6e1ed;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.pd-main-image.is-clickable {
    cursor: zoom-in;
}

body[data-theme="dark"] .pd-main-image {
    background: linear-gradient(135deg, rgba(28,44,66,0.96), rgba(20,34,52,0.94));
    border-color: rgba(120,144,178,0.16);
}

.pd-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-zoom-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pd-no-image {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
    color: #1c3551;
    background: linear-gradient(135deg, #eef4fb, #dfe9f5);
}

body[data-theme="dark"] .pd-no-image {
    color: #9fb0c8;
}

.pd-no-image-fallback {
    width: 100%;
    height: 100%;
    display: none;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
    color: #1c3551;
}

body[data-theme="dark"] .pd-no-image-fallback {
    color: #9fb0c8;
}

/* Gallery Navigation */
.pd-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.08);
    color: #1c3551;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 2;
}

.pd-gallery-nav:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transform: translateY(-50%) scale(1.05);
}

body[data-theme="dark"] .pd-gallery-nav {
    background: rgba(30,45,65,0.9);
    border-color: rgba(120,144,178,0.2);
    color: #e7eefb;
}

body[data-theme="dark"] .pd-gallery-nav:hover {
    background: rgba(30,45,65,0.98);
}

.pd-gallery-prev { left: 8px; }
.pd-gallery-next { right: 8px; }

.pd-image-counter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
}

/* Thumbnails */
.pd-thumbnails {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
}

.pd-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #eef4fb;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb:hover {
    border-color: #94a3b8;
    transform: scale(1.05);
}

.pd-thumb.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.pd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1400;
    backdrop-filter: blur(4px);
}

.pd-lightbox.open {
    display: flex;
}

.pd-lightbox-stage {
    position: relative;
    max-width: min(88vw, 1200px);
    max-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-lightbox-stage img {
    max-width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
    background: rgba(255,255,255,0.04);
}

.pd-lightbox-close,
.pd-lightbox-nav {
    position: absolute;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    backdrop-filter: blur(10px);
}

.pd-lightbox-close:hover,
.pd-lightbox-nav:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.04);
}

.pd-lightbox-close {
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.6rem;
}

.pd-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 64px;
    border-radius: 16px;
    font-size: 1.4rem;
    font-weight: 800;
}

.pd-lightbox-prev {
    left: 18px;
}

.pd-lightbox-next {
    right: 18px;
}

.pd-lightbox-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
}

body[data-theme="dark"] .pd-thumb {
    background: #1f2937;
}

body[data-theme="dark"] .pd-thumb:hover {
    border-color: #64748b;
}

body[data-theme="dark"] .pd-thumb.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

/* Info Section */
.pd-info {
    display: grid;
    gap: 14px;
}

.pd-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--app-text, #111827);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-theme="dark"] .pd-title {
    color: #e7eefb;
}

.pd-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.pd-meta-label {
    color: var(--app-muted, #6b7280);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-meta-value {
    color: var(--app-text, #111827);
    font-weight: 600;
}

.pd-meta-divider {
    color: var(--app-muted, #94a3b8);
    margin: 0 4px;
}

.pd-barcode {
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
}

/* Badges */
.pd-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.15);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-badge-location {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.18);
    color: #d97706;
}

.pd-badge-brand {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.18);
    color: #059669;
}

body[data-theme="dark"] .pd-badge {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.2);
    color: #93c5fd;
}

body[data-theme="dark"] .pd-badge-location {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.2);
    color: #fbbf24;
}

body[data-theme="dark"] .pd-badge-brand {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.2);
    color: #6ee7b7;
}

/* KPIs */
.pd-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.pd-kpi {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--app-border, #e2e8f0);
    display: grid;
    gap: 4px;
    text-align: center;
}

.pd-kpi > span {
    font-size: 0.68rem;
    color: var(--app-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.pd-kpi strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--app-text, #111827);
}

.pd-kpi-stock {
    color: #2563eb !important;
}

.pd-kpi-margin-good {
    color: #059669 !important;
}

.pd-kpi-margin-ok {
    color: #d97706 !important;
}

.pd-kpi-margin-low {
    color: #dc2626 !important;
}

.pd-kpi-margin-neutral {
    color: var(--app-muted, #6b7280) !important;
}

body[data-theme="dark"] .pd-kpi {
    background: rgba(30,45,65,0.6);
    border-color: rgba(120,144,178,0.16);
}

body[data-theme="dark"] .pd-kpi > span {
    color: #9fb0c8;
}

body[data-theme="dark"] .pd-kpi strong {
    color: #e7eefb;
}

body[data-theme="dark"] .pd-kpi-stock {
    color: #60a5fa !important;
}

body[data-theme="dark"] .pd-kpi-margin-good {
    color: #34d399 !important;
}

body[data-theme="dark"] .pd-kpi-margin-ok {
    color: #fbbf24 !important;
}

body[data-theme="dark"] .pd-kpi-margin-low {
    color: #f87171 !important;
}

/* Provider Row */
.pd-provider-row {
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--app-border, #e2e8f0);
    font-size: 0.85rem;
}

.pd-provider-row .pd-meta-label {
    margin-right: 6px;
}

.pd-provider-row span:last-child {
    font-weight: 600;
    color: var(--app-text, #111827);
}

body[data-theme="dark"] .pd-provider-row {
    background: rgba(30,45,65,0.4);
    border-color: rgba(120,144,178,0.14);
}

body[data-theme="dark"] .pd-provider-row span:last-child {
    color: #e7eefb;
}

/* Tabs */
.pd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--app-border, #e2e8f0);
    background: linear-gradient(180deg, rgba(248,250,252,0.8), rgba(241,245,249,0.6));
    padding: 0 24px;
}

body[data-theme="dark"] .pd-tabs {
    background: linear-gradient(180deg, rgba(15,23,42,0.6), rgba(12,20,35,0.4));
    border-bottom-color: rgba(106,122,150,0.18);
}

.pd-tab-btn {
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: var(--app-muted, #6b7280);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.pd-tab-btn:hover {
    color: var(--app-text, #111827);
    background: rgba(37,99,235,0.04);
}

.pd-tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

body[data-theme="dark"] .pd-tab-btn {
    color: #9fb0c8;
}

body[data-theme="dark"] .pd-tab-btn:hover {
    color: #e7eefb;
    background: rgba(59,130,246,0.06);
}

body[data-theme="dark"] .pd-tab-btn.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

/* Tab Content */
.pd-tab-content {
    display: none;
    padding: 24px;
}

.pd-tab-content.active {
    display: block;
}

/* Sections */
.pd-section {
    margin-bottom: 24px;
}

.pd-section:last-child {
    margin-bottom: 0;
}

.pd-section-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--app-text, #111827);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--app-border, #e2e8f0);
}

body[data-theme="dark"] .pd-section-title {
    color: #e7eefb;
    border-bottom-color: rgba(120,144,178,0.2);
}

.pd-section-text {
    color: var(--app-text, #374151);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--app-border, #e2e8f0);
}

body[data-theme="dark"] .pd-section-text {
    color: #d1d5db;
    background: rgba(30,45,65,0.4);
    border-color: rgba(120,144,178,0.14);
}

/* Specs Grid */
.pd-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.pd-spec-item {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8);
    border: 1px solid var(--app-border, #e2e8f0);
    display: grid;
    gap: 4px;
}

.pd-spec-label {
    font-size: 0.7rem;
    color: var(--app-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.pd-spec-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--app-text, #111827);
}

body[data-theme="dark"] .pd-spec-item {
    background: rgba(30,45,65,0.5);
    border-color: rgba(120,144,178,0.16);
}

body[data-theme="dark"] .pd-spec-label {
    color: #9fb0c8;
}

body[data-theme="dark"] .pd-spec-value {
    color: #e7eefb;
}

/* Compat Tags */
.pd-compat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-compat-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(37,99,235,0.06);
    border: 1px solid rgba(37,99,235,0.12);
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 600;
}

body[data-theme="dark"] .pd-compat-tag {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.18);
    color: #93c5fd;
}

/* History List */
.pd-history-list {
    display: grid;
    gap: 10px;
}

.pd-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--app-border, #e2e8f0);
}

.pd-history-date {
    min-width: 90px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--app-text, #111827);
}

.pd-history-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.pd-history-provider {
    font-weight: 600;
    color: var(--app-text, #111827);
}

.pd-history-qty {
    color: #2563eb;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(37,99,235,0.08);
}

.pd-history-price {
    color: var(--app-muted, #6b7280);
}

.pd-history-total {
    font-weight: 800;
    color: var(--app-text, #111827);
}

.pd-history-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-status-pending {
    background: rgba(245,158,11,0.1);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.2);
}

.pd-status-transit {
    background: rgba(37,99,235,0.1);
    color: #2563eb;
    border: 1px solid rgba(37,99,235,0.2);
}

.pd-status-received {
    background: rgba(16,185,129,0.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.2);
}

.pd-status-cancelled {
    background: rgba(239,68,68,0.1);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.2);
}

body[data-theme="dark"] .pd-history-item {
    background: rgba(30,45,65,0.5);
    border-color: rgba(120,144,178,0.16);
}

body[data-theme="dark"] .pd-history-date {
    color: #e7eefb;
}

body[data-theme="dark"] .pd-history-provider {
    color: #e7eefb;
}

body[data-theme="dark"] .pd-history-qty {
    background: rgba(59,130,246,0.12);
    color: #93c5fd;
}

body[data-theme="dark"] .pd-history-price {
    color: #9fb0c8;
}

body[data-theme="dark"] .pd-history-total {
    color: #e7eefb;
}

body[data-theme="dark"] .pd-status-pending {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.25);
}

body[data-theme="dark"] .pd-status-transit {
    background: rgba(59,130,246,0.12);
    color: #93c5fd;
    border-color: rgba(59,130,246,0.25);
}

body[data-theme="dark"] .pd-status-received {
    background: rgba(16,185,129,0.12);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.25);
}

body[data-theme="dark"] .pd-status-cancelled {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
}

/* Loading & Empty States */
.pd-history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--app-muted, #6b7280);
}

.pd-spinner {
    animation: spin 1s linear infinite;
}

.pd-empty-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--app-muted, #6b7280);
    text-align: center;
}

.pd-empty-tab svg {
    opacity: 0.3;
}

.pd-empty-tab p {
    margin: 0;
    font-size: 0.9rem;
}

.pd-empty-tab.pd-error svg {
    opacity: 0.5;
    color: #dc2626;
}

body[data-theme="dark"] .pd-history-loading,
body[data-theme="dark"] .pd-empty-tab {
    color: #9fb0c8;
}

body[data-theme="dark"] .pd-empty-tab.pd-error svg {
    color: #f87171;
}

/* Sell Button */
.product-sell-btn {
    padding: 6px 12px !important;
    border: 1px solid rgba(37,99,235,0.2) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.product-sell-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3) !important;
    transform: scale(1.02) !important;
}

.product-sell-btn svg {
    flex-shrink: 0;
}

body[data-theme="dark"] .product-sell-btn {
    border-color: rgba(59,130,246,0.3) !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

body[data-theme="dark"] .product-sell-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.35) !important;
}

/* Responsive */
@media (max-width: 900px) {
    .pd-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .pd-gallery {
        justify-items: center;
    }

    .pd-main-image {
        width: 180px;
        height: 180px;
    }

    .pd-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-history-info {
        flex-wrap: wrap;
    }

    .modal-product-detail-content {
        width: calc(100vw - 24px);
        max-height: 96vh;
    }
}

@media (max-width: 600px) {
    .pd-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .pd-specs-grid {
        grid-template-columns: 1fr;
    }

    .pd-hero {
        padding: 16px;
    }

    .pd-tab-content {
        padding: 16px;
    }

    .pd-tab-btn {
        padding: 12px 12px;
        font-size: 0.8rem;
    }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  ORION ULTRA-PREMIUM RESPONSIVE SYSTEM                  ║
   ║  Mobile (320-480) | Tablet (481-768) | Desktop (769+)  ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── TOUCH OPTIMIZATIONS ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Minimum touch target size: 44x44px (Apple HIG / Material Design) */
    button, a, input[type="button"], input[type="submit"],
    input[type="reset"], [role="button"], .btn, .btn-small, .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger touch targets for primary actions */
    .btn.primary, .btn.danger, .btn.success {
        min-height: 48px;
        padding: 12px 24px;
    }

    /* Remove hover-dependent UX on touch devices */
    .record-item:hover, .card-item:hover {
        /* Keep default styling on touch */
    }

    /* Improve scroll momentum on touch */
    .scrollable, .record-body, .modal-body,
    .entity-vehicle-core, .entity-vehicle-rail {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Prevent zoom on input focus on iOS */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="tel"], input[type="date"],
    input[type="time"], select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Swipe-friendly cards */
    .card-item, .record-item {
        padding: 16px !important;
        margin-bottom: 8px !important;
    }
}

/* ─── MOBILE SMALL (320px - 480px) ────────────────────────── */
@media (max-width: 480px) {
    /* Global */
    :root {
        --sidebar-width: 0px;
    }

    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }

    /* Login screen */
    .login-stage {
        flex-direction: column;
        padding: 16px;
    }

    .login-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 12px;
    }

    /* Sidebar: collapse to bottom nav */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: 64px;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 1000;
        padding: 0;
    }

    .sidebar nav {
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar nav a {
        flex: 0 0 auto;
        min-width: 60px;
        padding: 8px 12px;
        text-align: center;
        font-size: 10px;
        flex-direction: column;
    }

    .sidebar nav a svg, .sidebar nav a .nav-icon {
        margin: 0 auto 2px;
        width: 22px;
        height: 22px;
    }

    /* Main content: full width */
    .app-main, .main-content {
        margin-left: 0 !important;
        margin-bottom: 72px; /* Space for bottom nav */
        padding: 12px;
        width: 100%;
    }

    /* Headers */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }

    /* Views */
    .view-section {
        padding: 12px;
    }

    /* KPI Cards */
    .kpi-grid, .entity-kpi-grid, .stack-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .kpi-card {
        padding: 12px;
        border-radius: 8px;
    }

    /* Forms */
    .form-grid.two, .form-grid.three, .form-grid.four {
        grid-template-columns: 1fr !important;
    }

    .form-grid label {
        margin-bottom: 8px;
    }

    /* Modals: full-screen */
    .modal-content, .modal-premium-edit {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 90vh;
        margin: 8px;
        border-radius: 12px;
    }

    .modal-header, .premium-header {
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
    }

    .modal-body, .premium-body {
        padding: 16px;
        max-height: 65vh;
        overflow-y: auto;
    }

    .modal-footer, .premium-footer {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .modal-footer .btn, .premium-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Action buttons */
    .action-row {
        flex-direction: column;
        gap: 6px;
    }

    .action-row .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Premium modal edit user */
    .edit-user-preview {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .user-avatar-large {
        width: 64px;
        height: 64px;
        font-size: 28px;
        margin: 0 auto 8px;
    }

    .user-info-preview {
        flex-direction: column;
        align-items: center;
    }

    /* Cards */
    .card-item {
        margin: 4px;
        padding: 12px;
    }

    /* Search bar */
    .search-bar, .toolbar {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .search-bar input, .toolbar input, .toolbar select {
        width: 100%;
    }

    /* Entity profile */
    .entity-vehicle-shell {
        padding: 0;
    }

    .entity-vehicle-hero {
        padding: 16px;
    }

    .entity-vehicle-dashboard {
        grid-template-columns: 1fr !important;
    }

    .entity-vehicle-rail {
        display: none; /* Hide secondary info on small screens */
    }

    .entity-profile-section-premium {
        padding: 12px;
    }

    /* Tabs */
    .tab-bar, .entity-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding: 8px 4px;
    }

    .tab-bar::-webkit-scrollbar, .entity-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn, .entity-tab-btn {
        white-space: nowrap;
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Notifications */
    .notification-toast {
        max-width: calc(100vw - 24px);
        right: 12px;
    }

    /* Bottom spacing for nav */
    .view-section, .app-view {
        padding-bottom: 80px;
    }
}

/* ─── MOBILE LARGE (481px - 640px) ───────────────────────── */
@media (min-width: 481px) and (max-width: 640px) {
    .app-main, .main-content {
        margin-left: 0 !important;
        padding: 16px;
    }

    .form-grid.two, .form-grid.three {
        grid-template-columns: 1fr !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-content {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ─── TABLET (641px - 768px) ──────────────────────────────── */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --sidebar-width: 64px;
    }

    .sidebar {
        width: 64px;
    }

    .sidebar nav a span {
        display: none; /* Hide text, show icons only */
    }

    .sidebar nav a {
        padding: 12px 8px;
        justify-content: center;
    }

    .app-main, .main-content {
        margin-left: 64px !important;
        padding: 20px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid.three, .form-grid.four {
        grid-template-columns: repeat(2, 1fr);
    }

    .entity-vehicle-dashboard {
        grid-template-columns: 1fr;
    }

    .entity-vehicle-rail {
        display: block;
    }

    .modal-content {
        width: 90vw !important;
        max-width: 600px;
    }

    .premium-header .premium-header-content {
        padding: 16px 20px;
    }
}

/* ─── TABLET LARGE (769px - 1024px) ───────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }

    .sidebar {
        width: 200px;
    }

    .app-main, .main-content {
        margin-left: 200px !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .entity-vehicle-dashboard {
        grid-template-columns: 280px 1fr;
    }

    .modal-content {
        width: 600px;
        max-width: 80vw;
    }

    .modal-premium-edit {
        width: 680px;
        max-width: 85vw;
    }
}

/* ─── DESKTOP (1025px+) ───────────────────────────────────── */
@media (min-width: 1025px) {
    .modal-premium-edit {
        width: 680px;
    }

    .premium-icon-circle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    .premium-header {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border-bottom: 1px solid #e2e8f0;
    }

    body[data-theme="dark"] .premium-header {
        background: linear-gradient(135deg, #1e293b, #0f172a);
        border-bottom-color: #334155;
    }

    .premium-body {
        padding: 24px;
    }

    .premium-footer {
        padding: 16px 24px;
        border-top: 1px solid #e2e8f0;
    }

    .form-label-premium {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 16px;
    }

    .form-label-premium svg {
        /* Eliminamos posición absoluta para evitar cuadritos fantasma */
        position: static;
        opacity: 0.8;
    }

    .form-label-premium input,
    .form-label-premium select {
        padding-left: 12px; /* Espaciado normal, ya no hay icono absoluto */
    }

    .premium-check small {
        display: block;
        margin-top: 4px;
        opacity: 0.6;
    }

    .edit-user-preview {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 24px;
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        border-radius: 12px;
        margin-bottom: 20px;
    }

    body[data-theme="dark"] .edit-user-preview {
        background: linear-gradient(135deg, #1e3a5f, #0f2737);
    }

    .user-avatar-large {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 700;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
        flex-shrink: 0;
    }

    .user-info-preview {
        display: flex;
        flex-direction: column;
    }

    .user-label {
        font-weight: 600;
        font-size: 14px;
    }

    .user-hint {
        font-size: 12px;
        opacity: 0.6;
    }
}

/* ─── LANDSCAPE MOBILE ────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        max-height: 95vh;
    }

    .modal-body {
        max-height: 60vh;
    }

    .sidebar {
        width: 56px;
    }

    .app-main {
        margin-left: 56px !important;
    }
}

/* ─── PRINT STYLES ────────────────────────────────────────── */
@media print {
    .sidebar, .modal-overlay, .notification-toast,
    .action-row, .btn, .toolbar, .search-bar {
        display: none !important;
    }

    .app-main {
        margin: 0 !important;
        padding: 0;
    }

    body {
        background: white;
        color: black;
    }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── HIGH CONTRAST ───────────────────────────────────────── */
@media (prefers-contrast: high) {
    .btn, .card-item, .record-item, .kpi-card {
        border-width: 2px;
    }

    .modal-content {
        border: 2px solid #000;
    }
}

/* ─── PREMIUM MODAL ANIMATIONS ────────────────────────────── */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay.active .modal-premium-edit {
    animation: modalSlideUp 0.3s ease-out;
}

.modal-overlay.active {
    animation: modalFadeIn 0.2s ease-out;
}

/* ─── PREMIUM MODAL STYLES ────────────────────────────────── */
.modal-premium-edit .modal-header {
    border-bottom: 1px solid #e2e8f0;
}

.modal-premium-edit .premium-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-premium-edit .premium-icon-circle {
    flex-shrink: 0;
}

.modal-premium-edit .premium-check small {
    display: block;
    margin-top: 4px;
    opacity: 0.6;
    font-size: 11px;
}

/* Dark mode for premium modal */
body[data-theme="dark"] .modal-premium-edit .modal-header {
    border-bottom-color: #334155;
}

body[data-theme="dark"] .premium-footer {
    border-top-color: #334155;
}

body[data-theme="dark"] .edit-user-preview {
    background: linear-gradient(135deg, #1e3a5f, #0f2737);
}

body[data-theme="dark"] .form-label-premium svg {
    opacity: 0.4;
}

/* Estilos para el nuevo modal de edición Premium */
.label-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    opacity: 0.8;
}

.label-icon-wrapper svg {
    opacity: 0.7;
}

.premium-check-card {
    background: rgba(99, 102, 241, 0.05);
    border: 1px dashed rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: 24px;
    height: calc(100% - 24px);
    box-sizing: border-box;
}

body[data-theme="dark"] .premium-check-card {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.premium-check-card:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.premium-check-card .check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.premium-check-card input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    accent-color: #6366f1;
}

.check-content {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.check-content strong {
    font-size: 0.95rem;
    color: var(--app-text);
}

.check-content small {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* Ajuste de Grid Admin para simetría */
.view-admin .form-grid.two {
    align-items: stretch;
    gap: 24px;
}

#admin-users-grid, #admin-audit-grid {
    min-height: 400px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Scrollbar elegante para paneles internos */
#admin-users-grid::-webkit-scrollbar, 
#admin-audit-grid::-webkit-scrollbar {
    width: 6px;
}

#admin-users-grid::-webkit-scrollbar-thumb,
#admin-audit-grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

body[data-theme="dark"] #admin-users-grid::-webkit-scrollbar-thumb,
body[data-theme="dark"] #admin-audit-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

.audit-recent {
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.audit-recent:hover {
    background: rgba(99, 102, 241, 0.05);
    border-left-color: #6366f1;
}

/* Detalle expandido en Log Table */
.log-cell-detalle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-detail-viewer {
    text-align: left;
    padding: 10px;
}

.audit-meta p {
    margin: 4px 0;
    font-size: 0.9rem;
}

.audit-pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin-top: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
}

body[data-theme="dark"] .audit-pre {
    background: #0f172a;
}

.log-row:hover {
    background: rgba(99, 102, 241, 0.03) !important;
}

/* Panel Premium Styles */
.panel-premium {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.panel-premium:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.panel-premium .panel-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 20px;
}

body[data-theme="dark"] .panel-premium .panel-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom-color: #334155;
}

.panel-premium .panel-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-premium .panel-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.panel-premium .panel-icon-circle.activity {
    background: linear-gradient(135deg, #10b981, #059669);
}

.panel-premium .panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.panel-premium .panel-subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    opacity: 0.6;
}

.panel-premium .panel-counter {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    color: #6366f1;
}

/* Log Button */
.log-btn {
    position: relative;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
}

.log-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.log-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Log Header */
.log-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    border-bottom: none;
}

body[data-theme="dark"] .log-header {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
}

.log-header .premium-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.log-header .log-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.log-header .log-subtitle {
    font-size: 0.85rem;
    opacity: 0.8;
    font-weight: 400;
}

.log-header .log-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-header .log-header-actions .btn.secondary.small {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.log-header .log-header-actions .btn.secondary.small:hover {
    background: rgba(255, 255, 255, 0.2);
}

.log-header .modal-close {
    color: white;
    opacity: 0.7;
}

.log-header .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Log Toolbar */
.log-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    align-items: flex-end;
}

body[data-theme="dark"] .log-toolbar {
    background: #1e293b;
    border-bottom-color: #334155;
}

.log-toolbar .toolbar-group {
    flex: 1;
    min-width: 150px;
}

.log-toolbar .toolbar-group label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.7;
}

.log-toolbar .toolbar-group input,
.log-toolbar .toolbar-group select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    background: white;
}

body[data-theme="dark"] .log-toolbar .toolbar-group input,
body[data-theme="dark"] .log-toolbar .toolbar-group select {
    background: #334155;
    border-color: #475569;
    color: white;
}

.log-toolbar .log-results-count {
    display: inline-block;
    padding: 8px 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Log Body */
.log-body {
    padding: 0;
    overflow-y: auto;
    max-height: 60vh;
    background: #fafbfc;
}

body[data-theme="dark"] .log-body {
    background: #0f172a;
}

.log-table-container {
    width: 100%;
}

/* Premium Log Table */
.premium-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.premium-log-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
}

body[data-theme="dark"] .premium-log-table thead {
    background: linear-gradient(135deg, #0f172a, #020617);
}

.premium-log-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.premium-log-table thead th:hover {
    background: rgba(255, 255, 255, 0.1);
}

.premium-log-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s ease;
}

body[data-theme="dark"] .premium-log-table tbody tr {
    border-bottom-color: #334155;
}

.premium-log-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

.premium-log-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] .premium-log-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.premium-log-table tbody tr:nth-child(even):hover {
    background: rgba(99, 102, 241, 0.08);
}

.premium-log-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.log-cell-icon {
    text-align: center;
    font-size: 1.2rem;
}

.log-cell-fecha {
    white-space: nowrap;
}

.log-fecha-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

body[data-theme="dark"] .log-fecha-badge {
    background: #334155;
}

.log-cell-accion {
    white-space: nowrap;
}

.log-action-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.log-action-badge.action-login {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.log-action-badge.action-logout {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.log-action-badge.action-create {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.log-action-badge.action-update {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.log-action-badge.action-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

body[data-theme="dark"] .log-action-badge {
    opacity: 0.9;
}

.log-cell-detalle {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0.8;
}

.log-cell-tipo {
    white-space: nowrap;
}

.log-tipo-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Log Empty State */
.log-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.log-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.log-empty p {
    font-size: 1rem;
    margin-bottom: 4px;
}

.log-empty small {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Log Footer */
.log-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
}

body[data-theme="dark"] .log-footer {
    background: #1e293b;
    border-top-color: #334155;
}

.log-footer .log-total {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.7;
}

/* Audit Recent Items (in admin panel) */
.audit-recent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}

.audit-icon-badge {
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-icon-badge svg {
    width: 20px;
    height: 20px;
}

.audit-content {
    flex: 1;
    min-width: 0;
}

.audit-content .record-title {
    font-size: 0.9rem;
}

.audit-content .record-muted {
    font-size: 0.8rem;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PREMIUM USER CARDS - Estilo tarjetitas bonitas          ║
   ╚══════════════════════════════════════════════════════════╝ */

#admin-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px;
}

.user-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

body[data-theme="dark"] .user-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.user-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #c7d2fe;
}

.user-card:hover::before {
    opacity: 1;
}

body[data-theme="dark"] .user-card:hover {
    border-color: #4f46e5;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-card-info {
    flex: 1;
    min-width: 0;
}

.user-card-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme="dark"] .user-card-name {
    color: #f1f5f9;
}

.user-card-role {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

body[data-theme="dark"] .user-card-role {
    color: #94a3b8;
}

.user-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 14px;
}

body[data-theme="dark"] .user-card-status {
    background: #0f172a;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 2s infinite;
}

.dot-active {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.dot-inactive {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.status-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.user-card-actions {
    display: flex;
    gap: 8px;
}

.btn-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

body[data-theme="dark"] .btn-card {
    background: #334155;
    border-color: #475569;
}

.btn-card:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body[data-theme="dark"] .btn-card:hover {
    background: #475569;
}

.btn-card-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: white;
}

.btn-card-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.btn-card-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

body[data-theme="dark"] .btn-card-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-card-danger:hover {
    background: #fee2e2;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
}

/* Empty state */
.user-card-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.user-card-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.user-card-empty p {
    font-size: 1rem;
    margin-bottom: 4px;
    color: #64748b;
    font-weight: 500;
}

.user-card-empty small {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 20px;
    opacity: 0.7;
}

/* Panel footer */
.panel-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

body[data-theme="dark"] .panel-footer {
    background: #0f172a;
    border-top-color: #334155;
}

.full-width-btn {
    width: 100%;
    justify-content: center;
}

/* Responsive user cards */
@media (max-width: 768px) {
    #admin-users-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
        padding: 16px;
    }

    .user-card {
        padding: 16px;
    }

    .user-avatar {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    #admin-users-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .user-card-header {
        gap: 10px;
    }

    .user-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .user-card-name {
        font-size: 0.9rem;
    }

    .btn-card {
        padding: 8px;
        font-size: 1rem;
    }
}

/* Responsive Log Viewer */
@media (max-width: 768px) {
    .log-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .log-toolbar .toolbar-group {
        min-width: 100%;
    }

    .premium-log-table {
        font-size: 0.8rem;
    }

    .premium-log-table thead th,
    .premium-log-table tbody td {
        padding: 8px 10px;
    }

    .log-cell-detalle {
        max-width: 120px;
    }

    .log-header .log-header-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .log-header .log-header-actions .btn.secondary.small {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .premium-log-table thead {
        display: none;
    }

    .premium-log-table,
    .premium-log-table tbody,
    .premium-log-table tr,
    .premium-log-table td {
        display: block;
        width: 100%;
    }

    .premium-log-table tr {
        padding: 12px 16px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    body[data-theme="dark"] .premium-log-table tr {
        background: #1e293b;
    }

    .premium-log-table td {
        padding: 4px 0;
        text-align: right;
        border: none;
    }

    .premium-log-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        opacity: 0.7;
    }

    .log-header .premium-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .log-header .log-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .log-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

/* ─── VIEW TRANSITIONS & QUICK NAVIGATION ─────────────────── */
/* Transiciones suaves entre vistas (Chrome 111+) */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

/* Fade + slide para transiciones */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

::view-transition-old(root) {
    animation: fadeOut 150ms ease-out;
}

::view-transition-new(root) {
    animation: slideIn 200ms ease-out;
}

/* Skeleton loading para carga percibida más rápida */
.skeleton-loading {
    background: linear-gradient(
        90deg,
        var(--surface-100, #f1f5f9) 0%,
        var(--surface-200, #e2e8f0) 50%,
        var(--surface-100, #f1f5f9) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

body[data-theme="dark"] .skeleton-loading {
    background: linear-gradient(
        90deg,
        rgba(30, 41, 59, 0.5) 0%,
        rgba(51, 65, 85, 0.5) 50%,
        rgba(30, 41, 59, 0.5) 100%
    );
    background-size: 200% 100%;
}

/* Prefetch indicator (opcional, para debugging) */
[data-prefetching] {
    position: relative;
}

[data-prefetching]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    animation: prefetch-progress 1s infinite;
}

@keyframes prefetch-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Proveedor contacto section - Dark mode */
body[data-theme="dark"] #modal-proveedor .form-grid {
    --surface-100: rgba(30, 41, 59, 0.5);
    --app-border: rgba(51, 65, 85, 0.5);
    --app-text: #f1f5f9;
}


/* MODAL DE EDICI�N PROFESIONAL - ENCAPSULADO */
#modal-edit-entity .modal-content.modal-wide { 
    display: grid !important; 
    grid-template-rows: auto 1fr auto !important; 
    width: 900px !important; 
    max-width: 95vw !important; 
    height: 90vh !important; 
    max-height: 90vh !important; 
    padding: 0 !important; 
    overflow: hidden !important; 
    border-radius: 16px !important;
}

#modal-edit-entity .modal-header { padding: 20px 25px; border-bottom: 1px solid #eee; background: #fff; }
#modal-edit-entity .modal-body-scrollable { padding: 25px; overflow-y: auto !important; background: #fcfcfc; }
#modal-edit-entity .footer-fixed { 
    padding: 15px 25px; 
    border-top: 1px solid #eee; 
    background: #fff; 
    display: flex; 
    justify-content: flex-end; 
    gap: 12px; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); 
}

#modal-edit-entity .edit-modal-section { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
#modal-edit-entity .edit-section-header { font-weight: 700; font-size: 1.1rem; color: #2c3e50; margin-bottom: 20px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; display: flex; align-items: center; gap: 10px; }
#modal-edit-entity .edit-section-header i { color: #3498db; }

#modal-edit-entity .modern-form-grid { display: grid; gap: 20px; margin-bottom: 10px; }
#modal-edit-entity .modern-form-grid.two { grid-template-columns: 1fr 1fr; }
#modal-edit-entity .modern-form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
#modal-edit-entity .full-width { grid-column: 1 / -1; }

#modal-edit-entity label { display: block; margin-bottom: 15px; font-weight: 600; color: #555; font-size: 0.9rem; }
#modal-edit-entity input, #modal-edit-entity select, #modal-edit-entity textarea { 
    width: 100%; padding: 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.2s; background: #fafafa; 
}
#modal-edit-entity input:focus { border-color: #3498db; background: #fff; box-shadow: 0 0 0 3px rgba(52,152,219,0.1); outline: none; }

#modal-edit-entity .file-edit-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px; border: 2px dashed #eee; border-radius: 12px; transition: 0.3s; }
#modal-edit-entity .file-edit-box:hover { border-color: #3498db; background: #f9fcff; }
#modal-edit-entity .preview-area { width: 100%; height: 150px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border: 1px solid #eee; }
#modal-edit-entity .preview-area img { width: 100%; height: 100%; object-fit: cover; }

/* --- ORION GLOBAL OVERFLOW PROTECTIONS (Senior Audit) --- */
.text-truncate, .pos-product-copy strong, .item-card h3, .detail-value, .record-title, .lookup-item strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

.pos-cart-item-copy strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 250px;
}

/* --- FIXES: MODAL WIDE & TEXT OVERFLOW --- */
.modal-content.modal-wide { 
    width: min(860px, 95vw) !important; 
}

.client-directory-card-copy strong, 
.client-directory-card-copy p, 
.vehicle-directory-card-copy strong, 
.vehicle-directory-card-copy p,
.vehicle-directory-card-topline-main strong,
.vehicle-table-plate strong, .vehicle-table-plate span,
.vehicle-table-unit strong, .vehicle-table-unit span,
.vehicle-table-owner strong, .vehicle-table-owner span,
.vehicle-table-case strong, .vehicle-table-case span { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
}

.client-directory-card-copy, 
.vehicle-directory-card-copy,
.vehicle-table-plate, .vehicle-table-unit, .vehicle-table-owner, .vehicle-table-case { 
    min-width: 0; 
}

/* Grilla para filas dinámicas de contactos/teléfonos en modal cliente */
.client-multi-row { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr auto !important; 
    gap: 12px; 
    align-items: end; 
    margin-bottom: 12px; 
}

.client-multi-row .btn-remove {
    margin-bottom: 4px;
}

#cli-client-phones, #cli-client-contacts { 
    width: 100%; 
    overflow-x: hidden; 
}

/* --- COMPREHENSIVE TEXT OVERFLOW FIXES --- */
.entity-pill-copy, 
.entity-timeline-item-copy, 
.entity-history-copy, 
.entity-pill-copy strong, 
.entity-pill-copy span, 
.entity-timeline-item-copy strong, 
.entity-timeline-item-copy span, 
.entity-history-copy strong, 
.entity-history-copy span { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
    min-width: 0; 
}

.entity-pill, 
.entity-timeline-item, 
.entity-history-item { 
    display: flex; 
    align-items: center; 
    min-width: 0; 
    width: 100%; 
}

.entity-pill-copy, 
.entity-timeline-item-copy, 
.entity-history-copy { 
    flex: 1; 
    min-width: 0; 
}

`n/* --- VEHICLE PROFILE & OVERFLOW FIXES --- */`n.entity-vehicle-pill { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; width: 100%; overflow: hidden; padding: 12px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; transition: all 0.2s; }`n.entity-vehicle-pill strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; font-size: 0.95rem; color: #0f172a; }`n.entity-vehicle-pill span { font-size: 0.8rem; color: #64748b; }`n.entity-owner-box { width: 100%; min-width: 0; }`n.entity-stat.full-width { grid-column: span 2; }`n.entity-vehicle-hero-photo { position: relative; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }`n.entity-vehicle-hero-photo img { border-radius: 16px; }`n.entity-vehicle-hero-overlay { z-index: 10; }`n.entity-glass-card { transition: transform 0.2s; }`n.entity-glass-card:hover { transform: translateY(-2px); }
`n/* --- GLOBAL ROBUSTNESS & CONTRAST FIXES --- */`n.entity-soft-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; border: 1px solid rgba(0,0,0,0.05); }`n.entity-vehicle-hero-overlay.no-photo span, .entity-vehicle-hero-overlay.no-photo h2 { color: #1e293b !important; text-shadow: none !important; }`n.entity-pill, .entity-owner-box, .vehicle-table-owner, .client-directory-card-copy, .vehicle-directory-card-copy { min-width: 0 !important; overflow: hidden !important; }`n.truncate-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }`n.entity-pill-copy strong, .vehicle-table-owner strong, .client-directory-card-copy strong { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100%; display: block; }
`n/* --- SISTEMA DE SUGERENCIAS PREMIUM --- */`n.lookup-suggestions, .lookup-list { position: absolute; width: 100%; z-index: 2000; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); margin-top: 5px; max-height: 300px; overflow-y: auto; padding: 6px; }`n.lookup-item { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; border: none; background: transparent; width: 100%; text-align: left; }`n.lookup-item:hover { background-color: #f1f5f9; }`n.lookup-item-main { font-weight: 600; color: #1e293b; font-size: 14px; }`n.lookup-item-sub { font-size: 12px; color: #64748b; }
`n/* --- DISE�O DE SUGERENCIAS ULTRA-PREMIUM --- */`n.lookup-suggestions-inner { display: flex; flex-direction: column; gap: 2px; }`n.lookup-item { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: none; background: #ffffff; width: 100%; text-align: left; position: relative; overflow: hidden; }`n.lookup-item:hover { background-color: #f8fafc; padding-left: 20px; }`n.lookup-item::before { content: \"\"; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: #3b82f6; opacity: 0; transition: opacity 0.2s; }`n.lookup-item:hover::before { opacity: 1; }`n.lookup-item-main { font-weight: 700; color: #0f172a; font-size: 14.5px; letter-spacing: -0.01em; }`n.lookup-item-sub { font-size: 12px; color: #64748b; margin-top: 3px; font-weight: 500; display: flex; align-items: center; gap: 5px; }`n.lookup-item-sub::before { content: \"ID:\"; font-size: 9px; font-weight: 800; color: #94a3b8; background: #f1f5f9; padding: 1px 4px; border-radius: 4px; }`n/* Scrollbar elegante */`n.lookup-suggestions::-webkit-scrollbar { width: 6px; }`n.lookup-suggestions::-webkit-scrollbar-track { background: transparent; }`n.lookup-suggestions::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }`n.lookup-suggestions::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- PREMIUM EMPTY STATE CARDS --- */
.premium-empty-card {
    padding: 3rem 2rem;
    background: #ffffff;
    border-radius: 1.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: premiumFadeIn 0.5s ease-out;
    width: 100%;
}

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

.premium-empty-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.premium-empty-icon-wrap {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 2.2rem;
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.2);
    transform: rotate(-3deg);
    transition: transform 0.3s ease;
}

.premium-empty-card:hover .premium-empty-icon-wrap {
    transform: rotate(0deg) scale(1.05);
}

.premium-empty-info strong {
    display: block;
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.premium-empty-info p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    max-width: 320px;
}

body[data-theme="dark"] .premium-empty-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .premium-empty-icon-wrap {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: #60a5fa;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .premium-empty-info strong {
    color: #f8fafc;
}

body[data-theme="dark"] .premium-empty-info p {
    color: #94a3b8;
}

/* Ajuste de centrado para tarjetas empty premium */
.premium-empty-card {
    margin: 2rem auto !important;
    max-width: 500px; /* Evita que se estire demasiado en pantallas gigantes */
}

/* Asegurar centrado dentro de tablas */
td[colspan] {
    text-align: center !important;
}

td[colspan] .premium-empty-card {
    display: inline-flex !important; /* Cambiado a inline-flex para facilitar centrado en TD */
    width: auto !important;
    min-width: 320px;
}

/* Ajuste final de centrado Premium Empty state */
.premium-empty-container {
    margin: 0 auto;
}

.premium-empty-card {
    margin: 1rem auto !important; /* Margen reducido y centrado */
    min-width: 300px;
    max-width: 450px;
}
`n/* --- BOTONES DE MODAL MEJORADOS --- */`n.modal-header-actions { display: flex; gap: 8px; align-items: center; }`n.modal-minimize, .modal-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: all 0.2s; }`n.modal-minimize:hover { background: #f59e0b; border-color: #f59e0b; transform: translateY(-2px); }`n.modal-close:hover { background: #ef4444; border-color: #ef4444; transform: translateY(-2px); }`n.modal-minimize { font-weight: bold; padding-bottom: 4px; }

/* --- SISTEMA DE COMPONENTES PREMIUM (DARK MODE READY) --- */

.premium-toolbar-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    background: white;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
}

.premium-card-box {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

.premium-modal-body-bg {
    padding: 32px;
    background: #f8fafc;
    overflow-y: auto;
    flex: 1;
}

.premium-modal-footer-bg {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 20px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.premium-input-field {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 500;
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s;
}

.premium-input-field:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* --- DARK MODE OVERRIDES --- */

body[data-theme="dark"] .premium-toolbar-row {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
}

body[data-theme="dark"] .premium-card-box {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
}

body[data-theme="dark"] .premium-modal-body-bg {
    background: #0b1120;
}

body[data-theme="dark"] .premium-modal-footer-bg {
    background: #0f172a;
    border-color: #1e293b;
}

body[data-theme="dark"] .premium-input-field {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

body[data-theme="dark"] .premium-input-field:focus {
    border-color: #3b82f6;
    background: #0f172a;
}

body[data-theme="dark"] .premium-checkbox-label {
    color: #f8fafc !important;
}

body[data-theme="dark"] .toolbar-search-group label,
body[data-theme="dark"] .toolbar-filter-group label,
body[data-theme="dark"] .toolbar-date-group label {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .modal-content {
    background: #0f172a;
    color: #f8fafc;
}

body[data-theme="dark"] .modal-body label {
    color: #94a3b8;
}

body[data-theme="dark"] h4 {
    color: #f8fafc !important;
}

/* Fix for standard inputs in dark mode */
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}