* { margin: 0; padding: 0; box-sizing: border-box; }
    :root { --mobile-tabs-height: 96px; --mobile-header-offset: 96px; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }
    .container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
        .card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .card h2 { color: #333; margin-bottom: 15px; font-size: 20px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
        .header { position: relative; z-index: 2000; background: #ffffff; padding: 18px 22px; border-radius: 18px; box-shadow: 0 18px 40px rgba(50,67,112,0.14); margin-bottom: 0; grid-column: 1 / -1; border: 1px solid rgba(111,130,186,0.14); backdrop-filter: none; -webkit-backdrop-filter: none; isolation: isolate; overflow: visible; }
        .header-content { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 18px; }
        .header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
        .brand-mark { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #4a8edc 0%, #6a68e6 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 10px 20px rgba(102,126,234,0.28); }
        .brand-copy h1 { color: #24324d; font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
        .brand-copy p { color: #7a879d; font-size: 14px; }
        .header-search { position: relative; min-width: 0; }
        .header-search-icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: #94a3b8; font-size: 18px; pointer-events: none; }
        .header-search input { width: 100%; height: 48px; padding: 0 16px 0 46px; border-radius: 14px; border: 1px solid #d6deee; background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%); color: #334155; font-size: 15px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        .header-search input:focus { border-color: #7c93e8; box-shadow: 0 0 0 4px rgba(102,126,234,0.12); }
        .header-search input::placeholder { color: #97a4bb; }
        .user-info { display: flex; justify-content: flex-end; }
        .header-action-group { display: flex; align-items: center; gap: 12px; }
        .header-action-wrap { position: relative; z-index: 2100; }
        .header-action-btn { position: relative; min-width: 48px; height: 48px; padding: 0 14px; border: 1px solid #dbe3f2; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); color: #49617f; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 8px 18px rgba(33,46,86,0.08); }
        .header-action-btn:hover { transform: translateY(-1px); border-color: #b9c7ea; box-shadow: 0 12px 24px rgba(33,46,86,0.12); }
        .header-user-trigger { padding-right: 10px; }
        .header-user-avatar, .header-profile-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #7db5f6 0%, #8a7df6 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
        .header-profile-avatar { width: 42px; height: 42px; font-size: 15px; }
        .header-user-chevron { font-size: 12px; color: #6b7a90; }
        .notification-badge { position: absolute; top: -6px; right: -5px; min-width: 22px; height: 22px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 6px 12px rgba(239,68,68,0.3); }
        .header-popover { position: absolute; top: calc(100% + 12px); right: 0; width: 340px; background: #ffffff; border: 1px solid rgba(140,156,196,0.24); border-radius: 18px; box-shadow: 0 28px 60px rgba(28,43,75,0.22); padding: 16px; display: none; z-index: 2200; opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; }
        .header-popover.active { display: block; }
        .header-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
        .header-popover-head strong { display: block; color: #25324d; font-size: 16px; }
        .header-popover-head small { display: block; color: #8b98ad; font-size: 12px; margin-top: 4px; }
        .header-inline-btn { border: none; background: transparent; color: #5f78d4; font-size: 12px; font-weight: 700; cursor: pointer; }
        .header-notifications-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
        .header-notification-item { padding: 12px 14px; border-radius: 14px; background: #f8faff; border: 1px solid #e8edf8; }
        .header-notification-item.is-unread { background: #eef4ff; border-color: #cddbf9; }
        .header-notification-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
        .header-notification-item strong { color: #22304e; font-size: 14px; }
        .header-notification-item p { color: #53627b; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
        .header-notification-item span { color: #92a0b6; font-size: 12px; }
        .header-notification-tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 700; }
        .header-empty-state { padding: 28px 12px; text-align: center; color: #8b98ad; font-size: 13px; }
        .header-user-menu { width: 320px; }
        .header-profile-summary { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; margin-bottom: 14px; border-bottom: 1px solid #edf1f7; }
        .header-profile-summary strong { display: block; color: #24324d; font-size: 15px; margin-bottom: 3px; }
        .header-profile-summary span { color: #8390a5; font-size: 13px; }
        .header-menu-stats { display: flex; gap: 10px; margin-bottom: 14px; }
        .header-menu-stat { width: 100%; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f3f7ff 0%, #eef2fb 100%); border: 1px solid #e4eaf7; }
        .header-menu-stat span { display: block; color: #7d8aa0; font-size: 12px; margin-bottom: 5px; }
        .header-menu-stat strong { color: #22304e; font-size: 20px; }
        .header-hours-progress { margin-bottom: 14px; }
        .header-hours-progress-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 12px; color: #66758d; }
        .header-hours-progress-top #workHoursPercent { font-weight: 700; color: #32415f; }
        .header-hours-progress-track { width: 100%; height: 9px; background: #e6ebf6; border-radius: 999px; overflow: hidden; }
        #workHoursBar { height: 100%; width: 0%; background: #ff5252; transition: all 0.3s ease; }
        .header-menu-button { width: 100%; padding: 12px 14px; border: 1px solid #e4eaf7; border-radius: 14px; background: #fff; color: #31415f; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; margin-bottom: 8px; transition: background 0.2s ease, border-color 0.2s ease; }
        .header-menu-button:hover { background: #f7f9fd; border-color: #c8d5f1; }
        .header-menu-button-danger { margin-bottom: 0; color: #b42318; background: #fff7f6; border-color: #ffd3cf; }
        .header-menu-button-danger:hover { background: #fff0ee; border-color: #ffb8b0; }
        .tabs { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }
        .tab-btn { width: 100%; padding: 15px 18px; border: none; background: white; color: #667eea; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: left; }
        .tab-btn:hover { background: #f0f0f0; transform: translateY(-2px); }
        .tab-btn.active { background: #667eea; color: white; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        #tabsContent { min-width: 0; }
        .btn { padding: 12px 24px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin: 5px; }
        .btn-primary { background: #667eea; color: white; }
        .btn-primary:hover { background: #5568d3; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #5a6268; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #218838; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-danger:hover { background: #c82333; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; color: #333; font-weight: 600; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .form-group textarea { min-height: 80px; resize: vertical; }
        .schedule-time-group { display: flex; flex-direction: column; gap: 10px; }
        .schedule-time-range { display: flex; gap: 10px; align-items: center; }
        .schedule-time-range input { flex: 1; min-width: 0; }
        .schedule-optional-label { color: #666; font-size: 13px; }
        .weekly-schedule-cell { display: flex; flex-direction: column; gap: 8px; }
        .weekly-schedule-row { display: flex; gap: 10px; align-items: center; }
        .weekly-schedule-row input[type="time"] { width: auto; min-width: 95px; padding: 6px; }
        .weekly-shift-label { min-width: 52px; color: #666; font-size: 12px; font-weight: 600; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; overflow-y: auto; }
        .modal.active { display: flex; align-items: center; justify-content: center; }
        .modal-content { background: white; padding: 30px; border-radius: 10px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }
        .modal-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #667eea; }
        .modal-header h3 { color: #333; font-size: 24px; }
        .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
        .alert { padding: 15px; border-radius: 6px; margin-bottom: 15px; font-weight: 500; }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
        .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #f8f9fa; font-weight: 600; color: #333; }
        tr:hover { background: #f8f9fa; }
        .badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
        .badge-primary { background: #cfe2ff; color: #084298; }
        .badge-office { background: #c3e6cb; color: #155724; }
        .badge-tele { background: #bee5eb; color: #0c5460; }
        .badge-client { background: #cfe2ff; color: #084298; }
        .loading { text-align: center; padding: 20px; color: #667eea; }
        .loading::after { content: ' .'; animation: dots 1.5s steps(5, end) infinite; }
        @keyframes dots { 0%, 20% { content: ' .'; } 40% { content: ' ..'; } 60% { content: ' ...'; } 80%, 100% { content: ''; } }
        .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .login-box { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); max-width: 400px; width: 90%; }
        .login-box h1 { color: #667eea; text-align: center; margin-bottom: 30px; }
        .qr-scanner { width: 100%; max-width: 500px; margin: 0 auto; }
        #qr-reader, #qr-reader-coord { position: relative; z-index: 1; border: 2px dashed #667eea; border-radius: 8px; width: 100%; max-width: 100%; min-height: 260px; transition: opacity 0.18s ease, visibility 0.18s ease; }
        #qr-reader *, #qr-reader-coord *, #qr-reader video, #qr-reader-coord video, #qr-reader canvas, #qr-reader-coord canvas { position: relative; z-index: 1 !important; }
        #qr-reader video, #qr-reader-coord video { width: 100% !important; height: auto !important; }
        body.header-panel-open #qr-reader,
        body.header-panel-open #qr-reader-coord {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
        .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; }
        .stat-card h3 { font-size: 32px; margin-bottom: 5px; }
        .stat-card p { font-size: 14px; opacity: 0.9; }
        .table-responsive { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-top: 15px; }
        .table-responsive table { margin-top: 0; min-width: 760px; }
        #tabMisFichajes .card,
        #tabMisSolicitudes .card,
        #tabTodosFichajes .card,
        #tabGestion .card{ overflow: hidden; }
        .fichajes-toolbar { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; flex-wrap: wrap; }
        .fichajes-toolbar-label { margin-right: 10px; white-space: nowrap; }
        .fichajes-toolbar-input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 300px; max-width: 100%; flex: 1 1 60px; min-width: 0; }
        .fichajes-toolbar-btn { margin-left: auto; white-space: nowrap; }
        .gestion-fichajes-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
        .gestion-fichajes-filters .btn { margin: 0; }
        @media (max-width: 1024px), (hover: none) and (pointer: coarse) {
            body { padding: 15px 15px calc(var(--mobile-tabs-height) + env(safe-area-inset-bottom)); }
            .container { display: block; padding: calc(var(--mobile-header-offset) + env(safe-area-inset-top)) 4px 0; }
            .header { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 19px; right: 19px; z-index: 2500; margin-bottom: 0; padding: 14px 16px; border-radius: 16px; }
            #tabsContent { margin-top: 12px; }
            .card { margin-bottom: 24px; }
            .header-content { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
            .brand-copy,
            .header-search { display: none !important; }
            .header-brand { gap: 0; }
            .user-info { justify-content: flex-end; min-width: 0; }
            .header-action-group { width: auto; justify-content: flex-end; gap: 10px; }
            .header-action-btn { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; }
            .header-user-trigger { padding-right: 8px; }
            .header-user-avatar { width: 28px; height: 28px; font-size: 12px; }
            .header-popover,
            .header-user-menu,
            .header-notifications-panel {
                position: fixed;
                top: 84px;
                right: 16px;
                left: auto;
                width: min(calc(100vw - 32px), 360px);
                max-width: calc(100vw - 32px);
            }
            .header-popover.active { display: block !important; }
            #mainTabs,
            .tabs {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                top: auto !important;
                z-index: 900 !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
                background: rgba(255,255,255,0.98) !important;
                border-top: 1px solid rgba(102,126,234,0.18) !important;
                box-shadow: 0 -6px 20px rgba(0,0,0,0.12) !important;
                backdrop-filter: blur(10px);
                -webkit-overflow-scrolling: touch;
            }
            .tab-btn {
                min-width: 132px !important;
                width: auto !important;
                flex: 0 0 auto !important;
                padding: 14px 16px !important;
                border-radius: 999px !important;
                text-align: center !important;
                white-space: nowrap !important;
                font-size: 15px !important;
            }
            table { font-size: 12px; }
            th, td { padding: 8px; }
            .table-responsive table { min-width: 680px; }
            .fichajes-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
            .fichajes-toolbar-label { margin-right: 0; }
            .fichajes-toolbar-input, .fichajes-toolbar-btn { width: 100%; }
            .fichajes-toolbar-btn { margin-left: 0; }
            .gestion-fichajes-filters { flex-direction: column; }
            .gestion-fichajes-filters .btn { width: 100%; }
            .schedule-time-range, .weekly-schedule-row { flex-wrap: wrap; }
            .weekly-shift-label { min-width: 100%; }
        }

        @media (max-width: 480px) {
            :root { --mobile-tabs-height: 108px; --mobile-header-offset: 88px; }
            .header { padding: 12px 14px; border-radius: 14px; }
            .brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
            .header-action-btn { min-width: 44px; height: 44px; }
            .header-content { grid-template-columns: auto 1fr; gap: 10px; }
            .brand-copy,
            .header-search { display: none !important; }
            .header-popover,
            .header-user-menu,
            .header-notifications-panel {
                top: 74px;
                left: 14px;
                right: 14px;
                width: auto;
                max-width: none;
            }
            .tab-btn {
                min-width: 118px !important;
                padding: 14px 15px !important;
                font-size: 14px !important;
            }
        }