:root {
            /* Paleta base TecnologyMaps */
            --primary-color: #369703;
            --primary-hover: #2d7f03;
            --secondary-color: #2f3e46;
            --accent-color: #5e5e68;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --text-color: #6c6c6c;
            --text-muted: #8b8b95;
            --bg-color: #f6f7f9;
            --card-bg: #ffffff;
            --border-color: #e2e8f0;
            --border-hover: #cbd5e1;
            --header-bg: #ffffff;
            --sidebar-bg: #1e293b;
            --sidebar-hover: #334155;
            --sidebar-text: #f1f5f9;
            --tab-active-border: var(--primary-color);
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 6px 10px -4px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);
            --shadow-lg: 0 14px 24px -10px rgba(0,0,0,0.18), 0 8px 10px -6px rgba(0,0,0,0.12);
            --shadow-xl: 0 24px 40px -20px rgba(0,0,0,0.22), 0 12px 18px -10px rgba(0,0,0,0.14);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
        }

        .dark-mode {
            --primary-color: #2d7f03;
            --primary-hover: #256603;
            --secondary-color: #7a8a92;
            --accent-color: #5e5e68;
            --success-color: #22c55e;
            --warning-color: #fbbf24;
            --danger-color: #f87171;
            --text-color: #e6e6e9;
            --text-muted: #a6a6af;
            --bg-color: #111418;
            --card-bg: #171a1f;
            --border-color: #27303a;
            --border-hover: #334250;
            --header-bg: #171a1f;
            --sidebar-bg: #12161b;
            --sidebar-hover: #19212a;
            --sidebar-text: #e6eaef;
            --tab-active-border: var(--primary-color);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        *::before,
        *::after {
            box-sizing: border-box;
        }
        /* iOS Safari: evitar reescalado automático del texto */
        html { -webkit-text-size-adjust: 100%; }

        body {
            display: flex;
            min-height: 100vh;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Evitar desplazamiento horizontal y asegurar que no se desborde en móvil */
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }
        /* Estado sin scroll cuando el menú móvil está abierto */
        body.no-scroll {
            overflow: hidden;
        }
        /* Asegurar que medios no generen overflow en pantallas pequeñas */
        img, video, canvas, table {
            max-width: 100%;
            height: auto;
        }

        .sidebar {
            width: 80px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0f172a 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.5rem 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            z-index: 2000;
            box-shadow: var(--shadow-lg);
            border-right: 1px solid var(--border-color);
        }

        .sidebar:hover {
            width: 240px;
        }

        .sidebar::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 2px;
        }

        .sidebar button {
            background: none;
            border: none;
            color: var(--sidebar-text);
            margin: 0.5rem 0;
            cursor: pointer;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            width: calc(100% - 1rem);
            padding: 0.75rem 0.5rem;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: var(--radius-lg);
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            min-height: 60px;
            justify-content: center;
        }

        .sidebar button:hover {
            background: var(--sidebar-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .sidebar button.active {
            background: var(--primary-color);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .sidebar button.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 20px;
            background: white;
            border-radius: 0 2px 2px 0;
        }

        .sidebar i {
            font-size: 18px;
            margin-bottom: 0.25rem;
            min-width: 18px;
            transition: transform 0.2s ease;
        }

        .sidebar button:hover i {
            transform: scale(1.1);
        }

        .sidebar .button-text {
            font-size: 11px;
            font-weight: 500;
            opacity: 0.9;
            margin-top: 0.25rem;
        }

        .sidebar .active {
            background-color: var(--primary-color);
        }

        .sidebar .active:hover {
            background-color: var(--secondary-color);
        }

        /* Submenú de utilidades en sidebar */
        .sidebar-submenu {
            width: 100%;
            padding-left: 8px;
            margin-top: -6px;
        }

        .sidebar-submenu button {
            min-height: 44px;
            font-size: 12px;
            opacity: 0.95;
            width: calc(100% - 1rem);
        }

        .sidebar-submenu button:hover {
            background: rgba(255,255,255,0.06);
        }

        .main-content {
            flex: 1;
            padding: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            width: calc(100% - 80px);
            margin-left: 80px;
            background: var(--bg-color);
            min-height: 100vh;
        }

        .main-content::-webkit-scrollbar {
            width: 8px;
        }

        .main-content::-webkit-scrollbar-track {
            background: var(--bg-color);
        }

        .main-content::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .main-content::-webkit-scrollbar-thumb:hover {
            background: var(--border-hover);
        }

        .logo {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .logo span:first-child {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 24px;
        }

        .logo span:last-child {
            color: #5E5E68;
            font-size: 18px;
        }

        .card {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }

        .card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }

        .card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-color);
            margin: 0;
        }

        .card-subtitle {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin: 0;
        }

        .card h2 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 22px;
        }

        .card h3 {
            margin-bottom: 15px;
            font-size: 18px;
        }

        .search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        input, select, textarea {
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            flex: 1;
            font-size: 0.875rem;
            font-weight: 400;
            transition: all 0.2s ease;
            background-color: var(--card-bg);
            color: var(--text-color);
            width: 100%;
            box-shadow: var(--shadow-sm);
        }

        input:focus, select:focus, textarea:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            transform: translateY(-1px);
        }

        input::placeholder, textarea::placeholder {
            color: var(--text-muted);
            font-weight: 400;
        }

        /* Mejoras de visibilidad para inputs de fecha en iOS Safari */
        input[type="date"] {
            color: var(--text-color);
            -webkit-text-fill-color: var(--text-color);
            font-size: 16px; /* evita zoom y asegura render estable en iPhone */
        }
        input[type="date"]::-webkit-datetime-edit {
            color: var(--text-color);
        }
        input[type="date"]::-webkit-datetime-edit-fields-wrapper {
            color: var(--text-color);
        }
        input[type="date"]::-webkit-datetime-edit-month-field,
        input[type="date"]::-webkit-datetime-edit-day-field,
        input[type="date"]::-webkit-datetime-edit-year-field,
        input[type="date"]::-webkit-datetime-edit-text {
            color: var(--text-color);
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 1;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
            font-size: 0.875rem;
        }

        .form-hint {
            display: block;
            margin-top: 4px;
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        /* Grupos dentro de search-container para que labels no desaparezcan en móvil */
        .search-container .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
            min-width: 220px;
        }

        .search-container label { color: var(--text-color); }

        .form-error {
            color: var(--danger-color);
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: block;
        }

        .form-help {
            color: var(--text-muted);
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: block;
        }

        button.primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
        }

        button.primary:hover {
            background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        button.primary:active {
            transform: translateY(0);
            box-shadow: var(--shadow-sm);
        }

        button.secondary {
            background: var(--card-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        button.secondary:hover {
            background: var(--bg-color);
            border-color: var(--border-hover);
            transform: translateY(-1px);
        }

        button.danger {
            background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-sm);
        }

        button.danger:hover {
            background: linear-gradient(135deg, #dc2626 0%, var(--danger-color) 100%);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        button.success {
            background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-sm);
        }

        button.success:hover {
            background: linear-gradient(135deg, #059669 0%, var(--success-color) 100%);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
            margin: 1.5rem 0;
        }

        .product-card {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--card-bg);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-color);
        }

        .product-card:hover::before {
            transform: scaleX(1);
        }

        .product-card:active {
            transform: translateY(-2px);
        }

        .product-name {
            font-weight: 600;
            margin: 0.75rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-color);
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .product-price {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.125rem;
            margin: 0.5rem 0;
            display: block;
        }

        .product-stock {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
            padding: 0.25rem 0.5rem;
            background: var(--bg-color);
            border-radius: var(--radius-sm);
            display: inline-block;
        }

        .product-stock.low {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            font-weight: 500;
        }

        .product-stock.out {
            background: rgba(239, 68, 68, 0.2);
            color: var(--danger-color);
            font-weight: 600;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            font-size: 0.875rem;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        th, td {
            padding: 1rem 1.25rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            /* Fondo más limpio con degradado sutil adaptado al tema */
            background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg-color) 100%);
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: relative;
            box-shadow: inset 0 -1px 0 var(--border-color);
        }

        /* Línea decorativa inferior con degradado de acento */
        th::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            opacity: 0.15;
            pointer-events: none;
        }

        /* En modo oscuro, la línea puede ser un poco más visible */
        .dark-mode th::after {
            opacity: 0.22;
        }

        tr:hover {
            background: var(--bg-color);
        }

        tr:last-child td {
            border-bottom: none;
        }

        .table-container {
            overflow-x: auto;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }

        .chart-container {
            position: relative;
            height: 300px;
            margin: 20px 0;
        }

        .tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            padding: 0.5rem 0.5rem 0 0.5rem;
            box-shadow: var(--shadow-sm);
        }

        .tab {
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease;
            font-weight: 500;
            color: var(--text-muted);
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            position: relative;
            margin-right: 0.25rem;
        }

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

        .tab.active {
            border-bottom-color: var(--primary-color);
            font-weight: 600;
            color: var(--primary-color);
            background: var(--bg-color);
        }

        .tab.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 1px 1px 0 0;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .hidden {
            display: none !important;
        }

        .text-center {
            text-align: center;
        }

        .mt-10 {
            margin-top: 10px;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .report-list {
            list-style: none;
        }

        .report-list li {
            padding: 12px;
            margin: 5px 0;
            background-color: rgba(0, 0, 0, 0.03);
            border-left: 4px solid var(--primary-color);
            border-radius: 4px;
        }

        .low-stock {
            border-left-color: var(--danger-color) !important;
            background-color: rgba(231, 76, 60, 0.1) !important;
        }

        .invoice-preview {
            border: 1px solid var(--border-color);
            padding: 25px;
            margin-top: 20px;
            background: var(--card-bg);
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary-color);
        }

        .invoice-items {
            width: 100%;
            margin: 20px 0;
        }

        .invoice-totals {
            margin-top: 20px;
            text-align: right;
            font-weight: bold;
            font-size: 16px;
        }

        .login-container {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .logo {
            text-align: center;
            margin-bottom: 2rem;
        }

        .logo-icon {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: block;
        }

        .logo h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            color: var(--text-color);
        }

        .logo h1 span {
            color: var(--primary-color);
        }

        .logo p {
            color: var(--text-muted);
            font-size: 1rem;
            margin-top: 0.5rem;
        }

        .login-card {
            width: 100%;
            max-width: 400px;
            box-shadow: var(--shadow-xl);
            border: none;
        }

        .page-header {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .header-title h1 {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--text-color);
            margin: 0;
        }

        .header-title p {
            color: var(--text-muted);
            margin: 0.25rem 0 0 0;
            font-size: 0.875rem;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .role-badge {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-md);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .key-shortcut {
            font-size: 0.75rem;
            color: var(--text-muted);
            background: var(--bg-color);
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-family: 'Courier New', monospace;
        }

        .search-container {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .search-input-group {
            position: relative;
            flex: 1;
            min-width: 300px;
        }

        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .search-input-group input {
            padding-left: 2.5rem;
            padding-right: 3rem;
        }

        .search-input-group button {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            padding: 0.5rem;
            min-width: auto;
        }

        .cart-card {
            position: sticky;
            top: 2rem;
            max-height: calc(100vh - 4rem);
            overflow-y: auto;
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-count-badge {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 0.875rem;
            min-width: 2rem;
            text-align: center;
        }

        .customer-section {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .customer-search-container {
            position: relative;
        }

        .customer-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            max-height: 200px;
            overflow-y: auto;
        }

        .customer-result-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s ease;
        }

        .customer-result-item:hover {
            background: var(--bg-color);
        }

        .customer-result-item:last-child {
            border-bottom: none;
        }

        .customer-details {
            margin-top: 1rem;
        }

        .customer-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--bg-color);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .customer-name {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.25rem;
        }

        .customer-contact {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .cart-totals {
            background: var(--bg-color);
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1rem;
            border: 1px solid var(--border-color);
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            font-size: 0.875rem;
        }

        .total-row:not(:last-child) {
            border-bottom: 1px solid var(--border-color);
        }

        .total-final {
            font-weight: 700;
            font-size: 1.125rem;
            color: var(--primary-color);
            margin-top: 0.5rem;
            padding-top: 0.75rem;
            border-top: 2px solid var(--primary-color);
        }

        .cart-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }

        .cart-actions button {
            flex: 1;
            min-width: 120px;
        }

        .receipt-options {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .option-group {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 0.875rem;
            color: var(--text-color);
            position: relative;
        }

        .checkbox-label input[type="checkbox"] {
            display: none;
        }

        .checkmark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-sm);
            margin-right: 0.5rem;
            position: relative;
            transition: all 0.2s ease;
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

        .checkbox-label i {
            margin-right: 0.5rem;
            color: var(--text-muted);
        }

        .export-buttons {
            display: flex;
            gap: 0.75rem;
            margin: 1.5rem 0;
            flex-wrap: wrap;
            padding: 1rem;
            background: var(--bg-color);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
        }

        .export-buttons button {
            flex: 1;
            min-width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .export-buttons button i {
            font-size: 1rem;
        }

        @media (max-width: 768px) {
            .export-buttons {
                flex-direction: column;
            }
            
            .export-buttons button {
                min-width: 100%;
            }
        }

        .mobile-menu-btn {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 1001;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            padding: 0.75rem;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: all 0.2s ease;
            display: none;
        }

        .mobile-menu-btn:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-menu-btn i {
            font-size: 1.25rem;
        }

        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            /* Usar 100dvh para manejar barras dinámicas en iOS/Safari móvil */
            height: 100dvh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
            pointer-events: none; /* por defecto no captura eventos */
            will-change: left, width, height;
        }

        .mobile-overlay.hidden {
            display: none !important;
        }

        /* Estilos responsivos */
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }

            .mobile-overlay {
                display: block;
            }

            .main-content {
                margin-left: 0;
                width: 100%;
                padding: 1rem;
            }

            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                width: 28vw;
                min-width: 180px;
                max-width: 260px;
                z-index: 2000;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            /* Evitar que se recorten los textos del menú en Android */
            .sidebar button {
                white-space: normal;
                overflow: visible;
            }

            .sidebar .button-text {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }

            .header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .search-container {
                flex-direction: column;
            }

            .search-input-group {
                min-width: 100%;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 1rem;
            }

            .cart-card {
                position: static;
                max-height: none;
            }

            .cart-actions {
                flex-direction: column;
            }

            .cart-actions button {
                width: 100%;
            }

            .option-group {
                flex-direction: column;
                gap: 1rem;
            }

            .table-container {
                overflow-x: auto;
            }

            .page-header {
                padding: 1rem;
            }

            .header-title h1 {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .main-content {
                padding: 0.5rem;
            }

            .card {
                padding: 1rem;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 0.75rem;
            }

            .product-card {
                padding: 0.75rem;
            }

            .product-name {
                font-size: 0.75rem;
            }

            .product-price {
                font-size: 1rem;
            }
        }
        
        /* Nuevos estilos para configuración */
        .settings-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            box-sizing: border-box;
            overflow: hidden; /* Contiene el contenido dentro del recuadro */
        }

        .settings-option h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .settings-option p {
            font-size: 14px;
            color: #666;
        }

        /* Contenedor vertical para bloques de settings */
        .settings-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            align-items: stretch; /* Alinea con el contenedor para que no se salga del recuadro */
            min-width: 0; /* Permite encogerse dentro del contenedor flex */
        }

        .color-picker-caption {
            margin-top: 4px;
            text-align: left; /* Alineación como las secciones generales */
            width: 100%;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--primary-color);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        /* Estilo para historial de movimientos */
        .movement-row {
            display: flex;
            justify-content: space-between;
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
            align-items: center;
        }

        .movement-row:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }

        .movement-type-in {
            color: var(--success-color);
            font-weight: bold;
        }

        .movement-type-out {
            color: var(--danger-color);
            font-weight: bold;
        }
        
        /* Estilo para campo IMEI condicional */
        #imei-field-container {
            margin-top: 10px;
        }
        
        /* Mejoras para ventas */
        .cart-item-actions {
            display: flex;
            gap: 5px;
        }

        .payment-methods {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }

        .payment-method {
            border: 1px solid var(--border-color);
            padding: 15px 10px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .payment-method:hover {
            border-color: var(--primary-color);
            background-color: rgba(54, 151, 3, 0.05);
        }

        .payment-method.selected {
            border-color: var(--primary-color);
            background-color: rgba(54, 151, 3, 0.1);
        }

        .payment-method i {
            font-size: 24px;
            margin-bottom: 8px;
            color: var(--primary-color);
        }

        /* Detalles de pago */
        .payment-detail-section {
            margin-top: 8px;
        }

        /* Apps de transferencia (Nequi/Daviplata) */
        .payment-apps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin-bottom: 10px;
        }

        .payment-app {
            border: 1px solid var(--border-color);
            padding: 12px 10px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--card-bg);
        }

        .payment-app:hover {
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .payment-app.selected {
            border-color: var(--primary-color);
            background-color: rgba(54, 151, 3, 0.08);
        }

        .payment-app i {
            font-size: 22px;
            color: var(--primary-color);
            margin-bottom: 6px;
        }

        .customer-search-container {
            margin-bottom: 15px;
            position: relative;
        }

        .customer-details {
            background-color: rgba(0, 0, 0, 0.03);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border-left: 4px solid var(--primary-color);
        }

        .receipt-options {
            margin-top: 15px;
            display: flex;
            gap: 15px;
        }

        .receipt-options label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        #customer-results {
            position: absolute;
            width: 100%;
            background: var(--card-bg);
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-radius: 0 0 8px 8px;
            max-height: 200px;
            overflow-y: auto;
        }

        #cart-count {
            background-color: var(--primary-color);
            color: white;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 14px;
        }
        
        /* Estilos para nuevas funcionalidades */
        .discount-badge {
            background-color: var(--warning-color);
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 5px;
        }

        .negotiation-section {
            border-top: 1px dashed var(--border-color);
            margin-top: 15px;
            padding-top: 15px;
        }

        .cash-control-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .cash-summary {
            background-color: rgba(0, 0, 0, 0.03);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .expense-item, .loan-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .expense-item:hover, .loan-item:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }

        .key-shortcut {
            background-color: rgba(0, 0, 0, 0.1);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 5px;
            border: 1px solid var(--border-color);
        }

        .promo-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            align-items: center;
        }

        .time-tracker {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
        }

        .color-picker {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .color-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .color-option.selected {
            border-color: white;
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .role-badge {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            background-color: var(--primary-color);
            color: white;
            margin-left: 10px;
        }

        .admin-only {
            position: relative;
        }

        .admin-only::after {
            content: "Solo Admin";
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: var(--danger-color);
            color: white;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 3px;
        }

        /* Sistema de Notificaciones Toast */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 400px;
        }

        .toast {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1rem 1.5rem;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transform: translateX(100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 300px;
            position: relative;
            overflow: hidden;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success {
            border-left: 4px solid var(--success-color);
        }

        .toast.error {
            border-left: 4px solid var(--danger-color);
        }

        .toast.warning {
            border-left: 4px solid var(--warning-color);
        }

        .toast.info {
            border-left: 4px solid var(--accent-color);
        }

        .toast-icon {
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .toast.success .toast-icon {
            color: var(--success-color);
        }

        .toast.error .toast-icon {
            color: var(--danger-color);
        }

        .toast.warning .toast-icon {
            color: var(--warning-color);
        }

        .toast.info .toast-icon {
            color: var(--accent-color);
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 600;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
            color: var(--text-color);
        }

        .toast-message {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        .toast-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.25rem;
            border-radius: var(--radius-sm);
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .toast-close:hover {
            background: var(--bg-color);
            color: var(--text-color);
        }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: var(--primary-color);
            transition: width linear;
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        }

        /* Paginación */
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem 0;
            padding: 1rem;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .pagination-info {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .pagination-controls {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .pagination-btn {
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-color);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            min-width: 40px;
            text-align: center;
        }

        .pagination-btn:hover:not(:disabled) {
            background: var(--bg-color);
            border-color: var(--primary-color);
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .page-size-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
        }

        .page-size-selector select {
            padding: 0.25rem 0.5rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--card-bg);
            color: var(--text-color);
        }

        /* Búsqueda con sugerencias */
        .search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            max-height: 300px;
            overflow-y: auto;
            display: none;
        }

        .search-suggestions.show {
            display: block;
        }

        .suggestion-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .suggestion-item:hover,
        .suggestion-item.highlighted {
            background: var(--bg-color);
        }

        .suggestion-item:last-child {
            border-bottom: none;
        }

        .suggestion-icon {
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .suggestion-content {
            flex: 1;
        }

        .suggestion-title {
            font-weight: 500;
            color: var(--text-color);
            font-size: 0.875rem;
        }

        .suggestion-subtitle {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.125rem;
        }

        /* Drag and Drop */
        .product-card.dragging {
            opacity: 0.5;
            transform: rotate(5deg);
        }

        .cart-drop-zone {
            border: 2px dashed var(--primary-color);
            background: rgba(37, 99, 235, 0.05);
            border-radius: var(--radius-lg);
        }

        .drop-indicator {
            position: fixed;
            background: var(--primary-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            box-shadow: var(--shadow-lg);
        }

        /* Badge de puntos de fidelidad */
        .loyalty-badge {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
            margin-left: 0.5rem;
            display: inline-block;
        }

        /* Dashboard ejecutivo */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .kpi-card {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .kpi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        }

        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .kpi-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .kpi-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .kpi-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: white;
        }

        .kpi-icon.sales {
            background: linear-gradient(135deg, var(--success-color), #059669);
        }

        .kpi-icon.revenue {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        }

        .kpi-icon.customers {
            background: linear-gradient(135deg, var(--accent-color), #0284c7);
        }

        .kpi-icon.products {
            background: linear-gradient(135deg, var(--warning-color), #d97706);
        }

        .kpi-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }

        .kpi-change {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .kpi-change.positive {
            color: var(--success-color);
        }

        .kpi-change.negative {
            color: var(--danger-color);
        }

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

        /* Gráficos en tiempo real */
        .realtime-chart {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .chart-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .chart-period {
            font-size: 0.875rem;
            color: var(--text-muted);
            background: var(--bg-color);
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-sm);
        }

        /* Estilos para productos top y actividad reciente */
        .top-product-item, .activity-item {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s ease;
        }

        .top-product-item:hover, .activity-item:hover {
            background-color: var(--bg-color);
        }

        .top-product-item:last-child, .activity-item:last-child {
            border-bottom: none;
        }

        .product-rank {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
            margin-right: 1rem;
        }

        .product-info, .activity-info {
            flex: 1;
        }

        .product-name, .activity-title {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.25rem;
        }

        .product-stats, .activity-details {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background: var(--accent-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }

        .empty-state {
            text-align: center;
            color: var(--text-muted);
            padding: 2rem;
            font-style: italic;
        }

        /* Header mejorado */
        .page-header {
            margin-bottom: 2rem;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-title h1 {
            margin: 0;
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-color);
        }

        .header-title p {
            margin: 0.5rem 0 0 0;
            color: var(--text-muted);
            font-size: 1rem;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Estilos para comparativas de períodos */
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 1rem;
        }

        .comparison-card {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        .comparison-card h3 {
            margin: 0 0 1rem 0;
            color: var(--text-color);
            font-size: 1.125rem;
            font-weight: 600;
        }

        .metric {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .metric:last-child {
            border-bottom: none;
        }

        .metric .label {
            font-weight: 500;
            color: var(--text-muted);
        }

        .metric .value {
            font-weight: 600;
            color: var(--text-color);
        }

        .metric .change {
            font-size: 0.875rem;
            font-weight: 600;
            margin-left: 0.5rem;
        }

        .metric .change.positive {
            color: var(--success-color);
        }

        .metric .change.negative {
            color: var(--danger-color);
        }

        /* Selector de cajas registradoras */
        .cash-register-selector {
            margin-bottom: 1rem;
        }

        .cash-register-selector select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--card-bg);
            color: var(--text-color);
            font-size: 1rem;
        }

        /* Botón de cámara pequeño */
        .camera-btn {
            position: absolute;
            right: 45px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
        }

        .camera-btn:hover {
            background: var(--primary-hover);
            transform: translateY(-50%) scale(1.1);
        }

        /* Cuadrito de cámara */
        .search-input-container {
            position: relative;
        }
        /* Ajustes de inputs con botón de cámara */
        /* Nota: No aplicamos padding-left aquí para evitar desplazar
           el placeholder cuando no hay icono de búsqueda en el contenedor. */
        .search-input-container input {
            padding-right: 3rem;  /* espacio para el botón de cámara a la derecha */
        }
        .search-input-container .camera-btn {
            right: 0.5rem; /* pegar el botón de la cámara a la derecha del recuadro */
        }
        
        .camera-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 450px;
            height: 450px;
            background: linear-gradient(145deg, 
                rgba(15, 15, 35, 0.95), 
                rgba(25, 25, 45, 0.98));
            border: 2px solid transparent;
            border-radius: 25px;
            box-shadow: 
                0 35px 60px -12px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 0 100px rgba(59, 130, 246, 0.1);
            z-index: 10000;
            overflow: hidden;
            backdrop-filter: blur(25px) saturate(1.5);
            animation: modalAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes modalAppear {
            0% {
                transform: translate(-50%, -50%) scale(0.3) rotateY(90deg);
                opacity: 0;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        .camera-box::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: var(--primary-color);
            border-radius: 27px;
            z-index: -1;
        }

        /* Fondo oscuro premium para el modal */
        .camera-box::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle at center, 
                rgba(0, 0, 0, 0.8) 0%, 
                rgba(0, 0, 0, 0.95) 100%);
            z-index: -2;
            backdrop-filter: blur(15px) brightness(0.3);
            animation: backdropFade 0.3s ease-out;
        }

        @keyframes backdropFade {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .camera-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            background: var(--card-bg);
            color: var(--text-color);
            font-size: 1rem;
            font-weight: 600;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            height: 60px;
        }

        .camera-header::before {
            content: '📷 Escáner de Códigos';
            font-size: 1rem;
        }

        .close-camera {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #dc3545;
            border: none;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .close-camera:hover {
            background: #c82333;
            transform: scale(1.1);
        }

        #scanner-video {
            width: calc(100% - 2rem);
            height: 280px;
            background: #000;
            object-fit: cover;
            display: block;
            position: relative;
            border-radius: 8px;
            margin: 1rem;
            border: 1px solid var(--border-color);
        }

        .scan-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 120px;
            border: 2px solid var(--primary-color);
            border-radius: 8px;
            pointer-events: none;
            box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
        }

        .scan-area::after {
            content: 'Coloca el código aquí';
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 500;
        }



        .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-color);
            animation: scan 2s ease-in-out infinite;
        }

        @keyframes scan {
            0% { 
                top: 0; 
                opacity: 1;
            }
            50% { 
                top: calc(50% - 1px); 
                opacity: 0.8;
            }
            100% { 
                top: calc(100% - 2px); 
                opacity: 1;
            }
        }

        .camera-status {
            padding: 1rem;
            text-align: center;
            font-size: 0.875rem;
            color: var(--text-muted);
            background: var(--card-bg);
            border-top: 1px solid var(--border-color);
            font-weight: 500;
            position: relative;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .camera-status::before {
            content: '●';
            color: var(--primary-color);
            margin-right: 0.5rem;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Estilos para el escáner inline pequeño */
        #inline-scanner {
            background: white;
            border: 2px solid var(--primary-color);
            border-radius: 16px;
            padding: 20px;
            margin: 15px auto;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            width: 340px;
            height: 340px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: relative;
            z-index: 10;
        }

        .inline-scanner-header {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-color);
            z-index: 10;
        }

        .inline-scanner-header span {
            color: #666;
        }

        .inline-scanner-close {
            background: rgba(220, 53, 69, 0.9);
            color: white;
            border: none;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 0.7rem;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(10px);
        }

        .inline-scanner-close:hover {
            background: var(--primary-hover);
        }

        .inline-scanner-video {
            position: relative;
            width: 200px;
            height: 200px;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        #inline-scanner-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
        }
        
        #inline-scanner-video video {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 12px !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
        
        /* Estilos para elementos creados por Html5Qrcode */
        #inline-scanner-video > div {
            width: 100% !important;
            height: 100% !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }
        
        #inline-scanner-video canvas {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 12px !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
        
        /* Asegurar que Html5Qrcode respete los límites */
        #inline-scanner-video [id^="html5-qr-code-scanner-"] {
            width: 100% !important;
            height: 100% !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            position: relative !important;
        }
        
        #inline-scanner-video [id^="html5-qr-code-scanner-"] video {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 12px !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        .inline-scan-line {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            animation: scan-move 2s linear infinite;
            border-radius: 2px;
            box-shadow: 0 0 15px var(--primary-color);
        }

        /* Indicador visual rectangular para códigos de barras */
        .barcode-scan-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 240px;
            height: 100px;
            border: 3px solid var(--primary-color);
            border-radius: 12px;
            background: transparent;
            pointer-events: none;
            z-index: 5;
            animation: pulse-border 2s ease-in-out infinite;
        }

        .barcode-scan-indicator::before {
            content: '📊';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.2rem;
            color: var(--primary-color);
            background: white;
            padding: 2px 6px;
            border-radius: 50%;
        }

        .barcode-scan-indicator::after {
            content: 'Código de barras';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            color: var(--primary-color);
            background: rgba(255, 255, 255, 0.9);
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        @keyframes pulse-border {
            0%, 100% { 
                border-color: var(--primary-color);
                box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.4);
            }
            50% { 
                border-color: var(--primary-hover);
                box-shadow: 0 0 0 8px rgba(var(--primary-color), 0.1);
            }
        }

        @keyframes scan-move {
            0% { top: 20%; }
            100% { top: 80%; }
        }

        .inline-scanner-controls {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
        }

        .inline-scanner-btn {
            background: rgba(248, 249, 250, 0.9);
            border: 1px solid rgba(222, 226, 230, 0.5);
            color: var(--text-color);
            padding: 4px 8px;
            border-radius: 16px;
            font-size: 0.65rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            backdrop-filter: blur(10px);
            min-width: 60px;
        }

        .inline-scanner-btn:hover {
            background: #e9ecef;
        }

        .inline-scanner-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .inline-scanner-status {
            text-align: center;
            font-size: 0.65rem;
            color: #666;
            padding: 2px;
            margin-top: 4px;
        }

        .video-placeholder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #999;
            font-size: 0.9rem;
            text-align: center;
            z-index: 1;
        }

        .inline-scanner-tip {
            text-align: center;
            font-size: 0.6rem;
            color: #888;
            padding: 2px;
            background: rgba(248, 249, 250, 0.8);
            border-radius: 8px;
            margin-top: 2px;
            backdrop-filter: blur(10px);
        }

        /* Responsive para móviles */
        @media (max-width: 768px) {
            #inline-scanner {
                width: calc(100% - 32px);
                max-width: 480px;
                height: auto;
                padding: 14px;
                margin: 16px auto;
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
            }
            
            .inline-scanner-video {
                width: 100%;
                height: clamp(240px, 55vh, 360px);
                height: clamp(240px, 55svh, 360px);
                aspect-ratio: 4 / 3;
            }
            
            .inline-scanner-header {
                top: 8px;
                right: 8px;
            }
            
            .inline-scanner-close {
                width: 36px;
                height: 36px;
                border-radius: 9999px;
                background: rgba(0,0,0,0.08);
                color: #111;
                font-size: 20px;
                display: grid;
                place-items: center;
                border: none;
            }
            
            .inline-scanner-controls {
                gap: 10px;
                margin-top: 8px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .inline-scanner-btn {
                min-width: 64px;
                font-size: 0.9rem;
                padding: 10px 14px;
                border-radius: 9999px;
                background: #e2e8f0;
                border: none;
                box-shadow: 0 2px 6px rgba(0,0,0,0.08);
            }
            
            .inline-scanner-btn.active {
                background: #3b82f6;
                color: #fff;
                box-shadow: 0 4px 12px rgba(59,130,246,0.35);
            }
            
            .inline-scanner-status {
                font-size: 0.85rem;
                color: #0f766e;
                font-weight: 600;
            }
            
            .inline-scanner-tip {
                font-size: 0.8rem;
                color: #64748b;
            }
            
            .barcode-scan-indicator {
                width: 70%;
                max-width: 380px;
                height: 28%;
            }
            
            .inline-scan-line {
                width: 100%;
                height: 2px;
            }
        }

        /* (Removido) ajustes tablet que alteraban layout; el escáner inline solo se usa en móviles. */

        .scan-mode-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 10px 0;
        }

        .scan-mode-btn {
            padding: 8px 16px;
            border: 2px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .scan-mode-btn:hover {
            border-color: var(--primary-color);
            background: var(--primary-color);
            color: white;
        }

        .scan-mode-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* Feedback visual para detección de códigos */
        .detection-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .detection-frame {
            position: absolute;
            border: 3px solid rgba(0, 123, 255, 0.8);
            background: rgba(0, 123, 255, 0.1);
            border-radius: 8px;
            animation: detectionPulse 0.5s ease-out;
            box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
        }

        @keyframes detectionPulse {
            0% { 
                transform: scale(0.8);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0.8;
            }
        }

        /* Historial de lecturas */
        .scan-history {
            position: absolute;
            bottom: 70px;
            right: 15px;
            width: 200px;
            max-height: 150px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 8px;
            padding: 10px;
            overflow-y: auto;
            font-size: 0.75rem;
            color: white;
            z-index: 5;
        }

        .scan-history-item {
            padding: 4px 8px;
            margin: 2px 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            border-left: 3px solid var(--primary-color);
            word-break: break-all;
        }

        .scan-history-time {
            font-size: 0.65rem;
            color: #ccc;
            margin-top: 2px;
        }

        /* Responsive para móviles - INTERFAZ CORREGIDA */
        @media (max-width: 768px) {
            .camera-box {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                max-width: 100vw;
                max-height: 100vh;
                transform: none;
                border-radius: 0;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                background: #000;
                overflow: hidden;
                z-index: 9999;
                border: none;
                box-shadow: none;
            }
            /* Forzar que el cuadro de cámara permanezca oculto cuando tenga la clase hidden */
            .camera-box.hidden { display: none !important; }
            
            .camera-header {
                height: 70px;
                padding: 0 1rem;
                background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 100%);
                color: white;
                position: relative;
                z-index: 10;
                display: flex;
                align-items: center;
                justify-content: space-between;
                backdrop-filter: blur(10px);
            }
            
            .camera-header::before {
                content: '📷 Escáner de Códigos';
                font-size: 1.2rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }
            
            .close-camera {
                background: rgba(255, 255, 255, 0.15);
                color: white;
                border: 1px solid rgba(255, 255, 255, 0.2);
                font-size: 1.4rem;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
                backdrop-filter: blur(10px);
            }
            
            .close-camera:hover {
                background: rgba(255, 255, 255, 0.25);
                transform: scale(1.05);
            }
            
            #scanner-video, #scanner-video-inventory {
                height: calc(100vh - 140px);
                width: 100%;
                margin: 0;
                object-fit: cover;
                background: #000;
            }
            
            .scan-area {
                width: 280px;
                height: 280px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border: 2px solid #2563eb;
                border-radius: 12px;
                background: transparent;
                position: relative;
            }
            
            .scan-area::before {
                content: '';
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                border: 1px solid rgba(37, 99, 235, 0.3);
                border-radius: 12px;
                background: transparent;
            }
            
            .scan-area::after {
                content: 'Coloca el código aquí';
                position: absolute;
                bottom: -35px;
                left: 50%;
                transform: translateX(-50%);
                color: white;
                font-size: 0.9rem;
                font-weight: 500;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
                white-space: nowrap;
                text-align: center;
            }
            
            .scan-line {
                background: #2563eb;
                height: 2px;
                animation: scanMove 2s ease-in-out infinite;
            }
            
            .scan-mode-controls {
                padding: 1rem;
                background: rgba(0, 0, 0, 0.8);
                gap: 0.5rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .scan-mode-btn {
                padding: 12px 20px;
                font-size: 0.9rem;
                border-radius: 8px;
                min-width: 120px;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: white;
                transition: all 0.2s ease;
            }
            
            .scan-mode-btn:hover {
                background: rgba(255, 255, 255, 0.2);
            }
            
            .scan-mode-btn.active {
                background: #2563eb;
                color: white;
                font-weight: 600;
                border-color: #2563eb;
            }
            
            .lighting-tip {
                margin: 0.5rem 1rem;
                padding: 8px;
                font-size: 0.8rem;
                background: rgba(37, 99, 235, 0.1);
                border: 1px solid rgba(37, 99, 235, 0.3);
                border-radius: 6px;
                color: #60a5fa;
                text-align: center;
            }
            
            .confirmation-status {
                margin: 0.5rem 1rem;
                padding: 8px;
                font-size: 0.8rem;
                background: rgba(245, 158, 11, 0.1);
                border: 1px solid rgba(245, 158, 11, 0.3);
                border-radius: 6px;
                color: #fbbf24;
                text-align: center;
            }
            
            .camera-status {
                height: 50px;
                font-size: 0.9rem;
                background: rgba(0, 0, 0, 0.9);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 1rem;
                font-weight: 500;
            }
            
            .camera-status::before {
                content: '●';
                color: #2563eb;
                margin-right: 8px;
                animation: pulse 2s infinite;
                font-size: 1rem;
            }
        }
        
        /* Animaciones simplificadas para móvil */
        @keyframes scanMove {
            0% { transform: translateY(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(276px); opacity: 0; }
        }
        
        /* Animación de pulso para el indicador de estado */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* Ocultar elementos de html5-qrcode que pueden causar problemas visuales */
        @media (max-width: 768px) {
            [id^="html5-qr-code-scanner-"] {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
            
            [id^="html5-qr-code-scanner-"] video {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                border-radius: 0 !important;
            }
            
            [id^="html5-qr-code-scanner-"] canvas {
                display: none !important;
            }
        }

        
        /* Responsive */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                width: 28vw;
                min-width: 180px;
                max-width: 260px;
                z-index: 1000;
                transition: transform 0.3s ease;
            }

            .sidebar:hover {
                width: 28vw;
            }

            /* Estado abierto del menú móvil */
            .sidebar.open {
                transform: translateX(0);
            }

            .main-content {
                width: 100%;
                margin-left: 0;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }

            .payment-methods {
                grid-template-columns: repeat(2, 1fr);
            }

            th, td {
                padding: 8px 10px;
                font-size: 13px;
                white-space: normal;
                word-break: break-word;
                overflow-wrap: anywhere;
            }

            .cash-control-panel {
                grid-template-columns: 1fr;
            }
            /* Tablas en móvil: mantener dentro del contenedor */
            table {
                width: 100%;
                table-layout: fixed;
            }

            /* Caja (Movimientos): evitar que se corten palabras en móvil */
            #cash-control-screen table {
                table-layout: auto; /* permitir ancho natural de columnas */
            }
            #cash-control-screen table th,
            #cash-control-screen table td {
                white-space: normal;       /* permitir salto de línea */
                word-break: keep-all;      /* no cortar palabras por la mitad */
                overflow-wrap: break-word; /* envolver solo entre palabras */
                hyphens: none;             /* sin guiones automáticos */
            }
            #cash-control-screen table th {
                font-weight: 600;
            }

            /* Ventas (Carrito): evitar cortes de palabras en headers y celdas */
            #cart-table {
                table-layout: auto; /* columnas se adaptan al contenido */
            }
            #cart-table th,
            #cart-table td {
                white-space: normal;       /* permitir saltos de línea */
                word-break: keep-all;      /* no partir palabras por la mitad */
                overflow-wrap: break-word; /* envolver solo entre palabras */
                hyphens: none;             /* sin guiones automáticos */
            }
            #cart-table th {
                font-weight: 600;
            }
            /* Botones de acción: permitir salto de línea si no caben */
            .action-buttons {
                flex-wrap: wrap;
                gap: 6px;
            }
            /* iOS Safari: evitar zoom al enfocar inputs */
            input, select, textarea {
                font-size: 16px;
            }
            /* Inventario en móvil: mostrar filas como tarjetas con etiquetas */
            #inventory-table thead {
                display: none;
            }
            #inventory-table tbody tr {
                display: block;
                margin: 12px 0;
                padding: 12px;
                background: var(--card-bg);
                border: 1px solid var(--border-color);
                border-radius: 8px;
            }
            #inventory-table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 6px 0;
                border: 0;
                white-space: normal;
                word-break: normal;
                overflow-wrap: normal;
                hyphens: auto;
            }
            #inventory-table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-muted);
                margin-right: 12px;
                flex: 0 0 45%;
                max-width: 55%;
            }
            /* Asegurar que las acciones no amontonen los botones */
            #inventory-table tbody td:last-child .action-buttons {
                width: 100%;
                justify-content: flex-start;
                gap: 8px;
                flex-wrap: wrap;
            }

            /* Asistencia en móvil: tarjetas por fila, etiquetas claras y botones compactos */
            #staff-attendance-table thead {
                display: none;
            }
            #staff-attendance-table tbody tr {
                display: block;
                margin: 12px 0;
                padding: 12px;
                background: var(--card-bg);
                border: 1px solid var(--border-color);
                border-radius: 8px;
            }
            #staff-attendance-table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 6px 0;
                border: 0;
                white-space: normal;
                word-break: normal;
                overflow-wrap: break-word;
                hyphens: none;
            }
            #staff-attendance-table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-muted);
                margin-right: 12px;
                flex: 0 0 45%;
                max-width: 55%;
            }
            #staff-attendance-table .attendance-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            #staff-attendance-table .attendance-actions button {
                font-size: 13px;
                padding: 8px 10px;
                line-height: 1.2;
            }
            #staff-attendance-table .attendance-actions button i {
                margin-right: 6px;
            }
        }

        /* En pantallas muy pequeñas, forzar una sola columna para utilidades */
        @media (max-width: 480px) {
            .utilities-cards-grid {
                grid-template-columns: 1fr;
            }
        }

    /* ===== ESTILOS PARA LA SECCIÓN DE UTILIDADES ===== */
    
    /* Grid de tarjetas de utilidades */
    .utilities-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin: 20px 0;
    }
    
    /* Tarjetas de utilidad */
    .utility-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 24px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }
    
    .utility-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-color);
    }
    
    .utility-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-color);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .utility-card:hover::before {
        opacity: 1;
    }
    
    /* Icono de la tarjeta */
    .utility-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        border-radius: 50%;
        margin-bottom: 16px;
        box-shadow: var(--shadow-md);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .utility-card:hover .utility-card-icon {
        transform: scale(1.1);
    }
    
    .utility-card-icon i {
        font-size: 34px;
        color: white;
    }

    .utility-card-icon img {
        width: 70%;
        height: 70%;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    /* Icono grande en cabeceras de panel dentro del modal */
    .utility-modal .utility-panel .panel-header h3 i {
        font-size: 28px;
        color: var(--primary-color);
        margin-right: 10px;
        vertical-align: middle;
    }
    .utility-modal .utility-panel .panel-header h3 img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    /* Contenido de la tarjeta */
    .utility-card-content h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .utility-card-content p {
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }
    
    /* Badge de contador de empleados */
    .employee-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-color);
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 12px;
        min-width: 24px;
        height: 20px;
        margin-left: 8px;
    }
    
    /* Contenedor de paneles */
    .utilities-panels-container {
        margin-top: 20px;
    }
    
    /* Paneles de utilidad como acordeón */
    .utility-panel {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        box-shadow: var(--shadow-sm);
        padding: 0;
    }

    .utility-panel.open {
        opacity: 1;
        box-shadow: var(--shadow-md);
        padding: 24px;
    }
    
    /* Animación de entrada del panel */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Encabezado del panel */
    .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .panel-header h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
    }
    
    .panel-header h3 i {
        color: var(--primary-color);
        font-size: 24px;
    }
    
    /* Contenido del panel */
    .panel-content {
        background: var(--bg-color);
        border-radius: var(--radius-md);
        padding: 20px;
    }
    
    /* Listas dentro de los paneles */
    .customers-list,
    .expenses-list,
    .reminders-list,
    .suppliers-list,
    .employees-list {
        margin-top: 20px;
    }
    
    .reports-content {
        background: var(--card-bg);
        border-radius: var(--radius-md);
        padding: 20px;
        min-height: 300px;
    }

    /* Panel de Notas */
    .notes-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .note-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 12px 14px;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    .note-item:hover { background: var(--bg-color); border-color: var(--primary-color); }
    .note-message { color: var(--text-color); font-size: 14px; }
    .note-meta { color: var(--text-muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
    .note-meta .sender { font-weight: 600; color: var(--text-color); }
    .note-status {
        margin-left: auto;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        background: var(--bg-color);
    }
    .note-status.unread { border-color: #ffd54f; color: #a67c00; background: #fff8e1; }
    .note-status.read { border-color: #c5e1a5; color: #2e7d32; background: #e8f5e9; }
    .note-status.pending { border-color: #ffb74d; color: #ef6c00; background: #fff3e0; }
    .notes-compose { display: flex; flex-direction: column; gap: 8px; }
    .note-input {
        width: 100%;
        padding: 10px;
        background: var(--bg-color);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        resize: vertical;
    }
    .notes-actions { display: flex; justify-content: flex-end; gap: 8px; }
    
    /* Responsive para utilidades */
    @media (max-width: 768px) {
        .utilities-cards-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .utility-card {
            padding: 20px;
        }
        
        .panel-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
        
        .panel-content {
            padding: 16px;
        }
    }

    /* ===== ESTILOS ADICIONALES PARA LOS PANELES DE UTILIDADES ===== */
    
    /* Estilos para los items de listas */
    .customer-item,
    .expense-item,
    .reminder-item,
    .supplier-item,
    .employee-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        transition: all 0.3s ease;
    }
    
    .customer-item:hover,
    .expense-item:hover,
    .reminder-item:hover,
    .supplier-item:hover,
    .employee-item:hover {
        background: var(--bg-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }
    
    /* Información de items */
    .customer-info,
    .expense-info,
    .reminder-info,
    .supplier-info,
    .employee-info {
        flex: 1;
    }
    
    .customer-info strong,
    .expense-info strong,
    .reminder-info strong,
    .supplier-info strong,
    .employee-info strong {
        display: block;
        color: var(--text-color);
        font-weight: 600;
        margin-bottom: 4px;
    }
    
    .customer-info span,
    .expense-info span,
    .reminder-info span,
    .supplier-info span,
    .employee-info span {
        display: block;
        color: var(--text-muted);
        font-size: 14px;
        margin-bottom: 2px;
    }
    
    /* Estadísticas y montos */
    .customer-stats,
    .expense-amount,
    .supplier-balance,
    .employee-actions {
        text-align: right;
    }
    
    .customer-stats span,
    .expense-amount,
    .supplier-balance span {
        display: block;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .supplier-balance strong {
        color: var(--primary-color);
        font-size: 18px;
    }
    
    /* Estado de recordatorios */
    .reminder-status {
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .reminder-status.pending {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    
    .reminder-status.paid {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    /* Grid de reportes */
    .reports-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    
    .report-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 24px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .report-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-color);
    }
    
    .report-card h4 {
        color: var(--text-color);
        font-size: 18px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .report-card h4 i {
        color: var(--primary-color);
    }
    
    .report-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 20px;
    }
    
    .report-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }
    
    .report-form input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-color);
        color: var(--text-color);
    }
    
    /* Botones de acción en items */
    .employee-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .employee-actions button {
        padding: 8px 12px;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--primary-color);
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .employee-actions button:hover {
        background: var(--primary-hover);
        transform: scale(1.05);
    }
    
    /* Responsive para items */
    @media (max-width: 768px) {
        .customer-item,
        .expense-item,
        .reminder-item,
        .supplier-item,
        .employee-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .customer-stats,
        .expense-amount,
        .supplier-balance {
            text-align: left;
            width: 100%;
        }
        .employee-actions {
            justify-content: flex-start;
            width: 100%;
        }
        
        .reports-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ===== ESTILOS PARA EL COLOR PICKER ===== */
    
    .color-picker-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        width: 100%;            /* Ocupa el ancho del recuadro */
        max-width: 100%;        /* Nunca excede el contenedor */
        box-sizing: border-box; /* Evita desbordes */
        overflow: hidden;       /* Garantiza que no se salga del cuadro */
    }
    
    .color-picker-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .color-picker-label {
        font-weight: 600;
        color: var(--text-color);
        flex: 0 0 140px;
        max-width: 40%;
    }
    
    .color-picker-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap; /* Evitar desbordes en opciones de color */
        width: 100%;
        overflow: hidden; /* Contener elementos al hacer hover/efectos */
        min-width: 0; /* Evita overflow por contenido ancho dentro de flex */
    }
    
    .color-picker-input {
        width: 60px;
        height: 40px;
        border: 2px solid var(--border-color);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .color-picker-input:hover {
        border-color: var(--primary-color);
        transform: none;
    }
    
    .color-picker-text {
        font-family: monospace;
        font-size: 14px;
        color: var(--text-muted);
        background: var(--bg-color);
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        min-width: 80px;
        text-align: center;
    }
    
    .color-preview {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-top: 12px;
        width: 100%;            /* Alineado dentro del cuadro */
        box-sizing: border-box; 
    }
    
    .color-preview-box {
        width: 30px;
        height: 30px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
    }
    
    .color-preview-text {
        font-size: 14px;
        color: var(--text-color);
    }
    
    .color-picker-note {
        margin-top: 10px;
        color: var(--text-muted);
        font-size: 13px;
        text-align: center; /* Centra el texto debajo del cuadro */
    }
    
    /* Aplicar color personalizado a elementos del sistema */
    .custom-primary-color {
        background-color: var(--primary-color) !important;
    }
    
    .custom-primary-text {
        color: var(--primary-color) !important;
    }
    
    .custom-primary-border {
        border-color: var(--primary-color) !important;
    }
    
    /* Responsive para color picker */
    @media (max-width: 768px) {
        .color-picker-container {
            padding: 12px;
            box-sizing: border-box;
            overflow: hidden; /* Previene que se salga del cuadro */
        }

        .color-picker-group {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .color-picker-label {
            min-width: 0; /* Evita empujar contenido fuera en pantallas pequeñas */
            width: 100%;
        }
        
        .color-picker-wrapper {
            width: 100%;
            justify-content: flex-start; /* Evita espacios excesivos que generen desbordes */
            gap: 10px;
            flex-wrap: wrap; /* Permite que las opciones bajen a la siguiente línea */
        }

        .color-option {
            width: 28px;
            height: 28px;
        }

        .color-picker-input {
            width: 56px;
            height: 36px;
        }

        .color-picker-text {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .color-preview {
            flex-wrap: wrap;
        }
    }
/* Modal interno de Utilidades */
.utility-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 24, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.utility-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.utility-modal .utility-modal-dialog {
    width: min(900px, 92vw);
    max-height: 86vh;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: translateY(12px);
    animation: modalEnter 0.25s ease forwards;
}

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

.utility-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(54,151,3,0.08) 0%, rgba(54,151,3,0) 100%);
}

.utility-modal .modal-header h3 {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
}

.utility-modal .btn-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
}

.utility-modal .btn-close:hover {
    background: var(--border-color);
}

.utility-modal .modal-body {
    padding: 16px 18px 20px;
    overflow: auto;
    max-height: calc(86vh - 56px);
}

/* Panel dentro del modal */
.utility-modal .utility-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 16px;
    opacity: 1;
    max-height: none;
}

/* Tarjetas limpias de utilidades */
.utilities-cards-grid .utility-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.utilities-cards-grid .utility-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

/* Contrastes y acentos en oscuro */
.dark-mode .utility-modal .utility-modal-dialog {
    box-shadow: 0 24px 40px -16px rgba(0,0,0,0.6);
}

.dark-mode .utility-modal .btn-close:hover {
    background: rgba(255,255,255,0.06);
}
/* Aplicación global del color primario y hover */
.primary,
.btn-primary,
button.primary,
.mobile-menu-btn,
.sidebar button.active,
.switch input:checked + .slider {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.primary:hover,
.btn-primary:hover,
button.primary:hover,
.mobile-menu-btn:hover,
.sidebar button.active:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Iconos y acentos */
.utility-card-icon i,
.sidebar i,
.btn-close i {
    color: var(--primary-color);
}

/* Bordes y titulares mantienen el esquema de color */
h1, h2, h3, .panel-header h3, .button-text, .chart-period {
    color: var(--text-color);
}

.card,
.utility-card,
.utility-panel,
.search-container,
.report-list,
.modal-header {
    border-color: var(--border-color);
}

/* Overrides: íconos e imágenes de utilidades en blanco y sin cambio de color */
.utility-card-icon i,
.utility-modal .utility-panel .panel-header h3 i {
    color: #fff !important;
}

.utility-card-icon img,
.utility-modal .utility-panel .panel-header h3 img {
    filter: brightness(0) invert(1) !important;
}

/* Mantener en blanco también durante hover */
.utility-card:hover .utility-card-icon i,
.utility-card:hover .utility-card-icon img {
    color: #fff !important;
    filter: brightness(0) invert(1) !important;
}

/* Sidebar: íconos, imágenes y texto siempre en blanco, sin cambios de color */
.sidebar i {
    color: #fff !important;
}
.sidebar .button-text {
    color: #fff !important;
}
.sidebar img {
    filter: brightness(0) invert(1) !important;
}
.sidebar button:hover i,
.sidebar button.active i {
    color: #fff !important;
}
.sidebar button:hover img,
.sidebar button.active img {
    filter: brightness(0) invert(1) !important;
}
/* Fix centrado de Login en móvil */
@media (max-width: 768px) {
  /* Asegura que el área de contenido no esté desplazada por la sidebar */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem;
  }

  /* Centra el login vertical y horizontalmente */
  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Ajustes de tarjeta para que se vea bien en pantallas pequeñas */
  .login-container {
    padding: 1.5rem;
    max-width: 420px;
  }

  .login-card {
    width: 100%;
    max-width: 420px;
  }
  /* Modal de utilidades más cómodo en móvil */
  .utility-modal .utility-modal-dialog {
    width: 96vw;
    max-height: 90vh;
    margin: 0 2vw;
  }
  .utility-modal .modal-body {
    max-height: calc(90vh - 56px);
  }
  /* Margen de scroll para evitar quedar pegado arriba al enfocar */
  .utility-modal .modal-header {
    scroll-margin-top: 12px;
  }
}

/* iPad vertical (768–834px): ajustes de login */
@media screen and (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  
  body.login-active .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1.5rem !important;
  }

  
  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .login-container {
    max-width: 500px;
    width: 100%;
    padding: 2rem;
  }

  .login-card {
    max-width: 500px;
    width: 100%;
  }

  
  .logo-icon { font-size: 3.5rem; }
  .logo h1 { font-size: 2.25rem; }
}

/* Tablets táctiles: menú tipo móvil (sin hover) */
@media screen and (min-width: 768px) and (pointer: coarse) {
  /* Mostrar botón y overlay en tablets táctiles */
  .mobile-menu-btn {
    display: block !important;
  }
  .mobile-overlay {
    display: block !important;
    pointer-events: auto; /* en móvil captura fuera del sidebar */
  }

  /* Sidebar como off-canvas igual que móvil */
  .sidebar {
    transform: translateX(-100%);
    width: 30vw;
    min-width: 200px;
    max-width: 300px;
    z-index: 2000;
    transition: transform 0.3s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .sidebar button, .sidebar .button-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11px;
  }

  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .login-container {
    max-width: 520px;
    width: 100%;
    padding: 2rem;
  }
  .login-card {
    max-width: 520px;
    width: 100%;
  }
}

/* Tablets grandes táctiles: mantener menú tipo móvil */
@media screen and (min-width: 1024px) and (pointer: coarse) {
  .mobile-menu-btn { display: block !important; }
  .mobile-overlay { display: block !important; }
  .sidebar {
    transform: translateX(-100%);
    width: 28vw;
    min-width: 220px;
    max-width: 320px;
    z-index: 1000;
    transition: transform 0.3s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; width: 100%; }
  .sidebar button, .sidebar .button-text { font-size: 12px; }
}
/* OS de escritorio: comportamiento de hover normal */
body.os-desktop .sidebar { width: 80px; }
body.os-desktop .sidebar:hover { width: 240px; }
body.os-desktop .main-content {
  margin-left: 80px;
  width: calc(100% - 80px);
}
body.os-desktop .mobile-menu-btn, body.os-desktop .mobile-overlay { display: none !important; }

/* Centrado global del Login en todas las plataformas */
body.login-active .sidebar {
  display: none !important;
}
body.login-active .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 2rem 1rem; /* respiración uniforme */
}
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  max-width: 520px;
  width: 100%;
}
.login-card {
  width: 100%;
  max-width: 520px;
}
/* Grupo de botones de acción en tablas */
.action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* separación visual entre botones */
}

.action-buttons .primary,
.action-buttons .secondary,
.action-buttons .danger {
    padding: 6px 10px;
    border-radius: 6px;
}

.action-buttons i {
    margin: 0; /* sin margen adicional en iconos dentro de botones */
}
/* === Botones de asistencia (Entrada/Salida) === */
button.btn-success {
  background-color: #2e7d32;
  color: #fff;
  border: 1px solid #2e7d32;
}
button.btn-success:hover {
  background-color: #1b5e20;
  border-color: #1b5e20;
}
button.btn-danger {
  background-color: #c62828;
  color: #fff;
  border: 1px solid #c62828;
}
button.btn-danger:hover {
  background-color: #8e0000;
  border-color: #8e0000;
}
button.btn-success:disabled,
button.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === Botones de acciones en Empleados === */
button.btn-edit {
  background-color: #1e3a8a; /* azul oscuro */
  color: #fff;
  border: 1px solid #1e3a8a;
}
button.btn-edit:hover {
  background-color: #172554;
  border-color: #172554;
}
button.btn-schedule {
  background-color: #64748b; /* gris slate */
  color: #fff;
  border: 1px solid #64748b;
}
button.btn-schedule:hover {
  background-color: #475569;
  border-color: #475569;
}
button.btn-edit:disabled,
button.btn-schedule:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.attendance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.table .attendance-actions button {
  min-width: 140px;
}
        /* Overlay fijo para tablets/iPad: mantiene la apariencia móvil sin alterar layout */
        #inline-scanner.inline-overlay {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: min(420px, 92vw);
            height: auto;
            padding: 18px;
            margin: 0;
            z-index: 10000;
        }
        #inline-scanner.inline-overlay .inline-scanner-video {
            width: 100%;
            height: clamp(240px, 45vh, 380px);
            height: clamp(240px, 45svh, 380px);
        }
        #inline-scanner.inline-overlay .inline-scanner-header {
            right: 10px;
            top: 10px;
        }
/* Normalización global de elementos de html5-qrcode para evitar fondos blancos y bordes */
[id^="html5-qr-code-scanner-"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[id^="html5-qr-code-scanner-"] video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    background: #000 !important;
}
[id^="html5-qr-code-scanner-"] canvas {
    display: none !important;
    background: transparent !important;
}
/* Ajustes finales: centrar overlay y normalizar contenedor de video */
#inline-scanner.inline-overlay {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(480px, 92vw) !important;
}
.inline-scanner-video {
    box-sizing: border-box !important;
}