/* Base global: normaliza tamaños y mantiene la aplicación ocupando toda la ventana. */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
        html, body { height: 100vh; width: 100vw; margin: 0; padding: 0; overflow: hidden !important; background-color: #0b1e42; color: #1e293b; }
        body { display: flex; flex-direction: column; position: relative; }
        
        /* Acceso inicial: país, división, usuario y contraseña. */
        #login-modal {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            width: 100vw; height: 100vh; background-color: #0b1e42;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 999999; padding: 16px;
        }
        .login-card-container {
            background: #ffffff; width: 420px; max-width: 92%; padding: 26px 22px 20px 22px;
            border-radius: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.6);
            text-align: center; display: flex; flex-direction: column; gap: 12px; margin: auto;
            position: relative; z-index: 1000000;
        }
        .login-card-container .login-logo {
            height: 52px; object-fit: contain; margin: 0 auto;
            filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2445%) hue-rotate(212deg) brightness(92%) contrast(97%);
        }
        .login-card-container h2 { font-size: 1.15rem; font-weight: 700; color: #0b1e42; }
        .login-card-container p { font-size: 0.8rem; color: #64748b; line-height: 1.3; }


        .country-flags-row { display: flex; justify-content: center; gap: 12px; margin: 8px 0; }
        .flag-card {
            cursor: pointer; padding: 8px; border-radius: 12px; border: 2px solid #e2e8f0;
            transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1;
            background: #f8fafc; user-select: none;
        }
        .flag-card:hover, .flag-card.selected { border-color: #1e3a8a; background: #eff6ff; transform: translateY(-2px); }
        .flag-card * { pointer-events: none; }
        .flag-img { width: 46px; height: 30px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
        .flag-label { font-size: 0.68rem; font-weight: 700; color: #1e293b; }


        .regional-button-row { display: flex; justify-content: center; margin-top: 2px; }
        .btn-regional-access {
            flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1; background: #f8fafc;
            border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #1e3a8a;
            cursor: pointer; transition: all 0.2s ease; text-align: center;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        }
        .btn-regional-access:hover { background: #1e3a8a; color: white; border-color: #1e3a8a; }


        .divisions-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
        .btn-division {
            padding: 8px 12px; border: 1px solid #cbd5e1; background: #f8fafc;
            border-radius: 8px; font-size: 0.78rem; font-weight: 700; color: #1e3a8a;
            cursor: pointer; transition: all 0.2s ease; flex: 1; min-width: 90px; text-align: center;
        }
        .btn-division:hover, .btn-division.selected { background: #1e3a8a; color: white; border-color: #1e3a8a; }


        .login-input-group { text-align: left; display: flex; flex-direction: column; gap: 4px; }
        .login-input-group label { font-size: 0.7rem; font-weight: 700; color: #475569; text-transform: uppercase; }
        .login-select, .login-input {
            width: 100%; padding: 9px; border-radius: 8px; border: 1px solid #cbd5e1;
            font-size: 0.84rem; font-weight: 600; color: #0f172a; outline: none; background: #f8fafc;
        }


        .login-select option[value=""] { color: rgba(100, 116, 139, 0.75); }
        .login-select:has(option[value=""]:checked) { color: rgba(100, 116, 139, 0.75); }
        .login-input::placeholder { color: rgba(100, 116, 139, 0.75); opacity: 1; }
        
        .login-btn {
            background: #1e3a8a; color: white; border: none; padding: 11px;
            border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
            transition: background 0.2s; box-shadow: 0 4px 6px rgba(30,58,138,0.2); margin-top: 4px;
        }
        .login-btn:hover { background: #0b1e42; }
        .password-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
        .password-wrapper .login-input { padding-right: 36px; }
        .toggle-password-icon { position: absolute; right: 12px; cursor: pointer; color: rgba(100, 116, 139, 0.75); font-size: 0.9rem; transition: color 0.2s ease; user-select: none; }
        .toggle-password-icon:hover { color: #1e3a8a; }
        .btn-back-step { background: none; border: none; color: #64748b; font-size: 0.72rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
        #login-error { color: #dc2626; font-size: 0.75rem; font-weight: 600; display: none; margin-top: -2px; }
        .powered-by-card-text { margin-top: 8px; font-size: 0.68rem; font-weight: 600; color: #94a3b8; letter-spacing: 0.02em; text-align: center; border-top: 1px solid #f1f5f9; padding-top: 10px; text-transform: lowercase; }


        /* Cabecera fija: identidad, fecha, sesión y controles móviles. */
        header {
            background: linear-gradient(135deg, #0b1e42 0%, #1e3a8a 100%);
            color: white; padding: 6px 16px; display: flex;
            justify-content: space-between; align-items: center;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15); z-index: 1000;
            height: 50px; flex-shrink: 0; position: relative;
        }
        .header-brand { display: flex; align-items: center; gap: 12px; }
        .header-logo { height: 34px; width: auto; max-width: 120px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
        .header-text-group { display: flex; flex-direction: column; }
        .header-title-text { font-size: 1rem; font-weight: 700; color: #ffffff; letter-spacing: -0.01em; line-height: 1.1; }
        .header-sub-text { font-size: 0.72rem; font-weight: 500; color: #ffffff; opacity: 0.95; margin-top: 1px; }
        .header-user-info { display: flex; align-items: center; gap: 8px; }
        .user-pill {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            color: #ffffff; padding: 4px 9px; border-radius: 20px; font-size: 0.72rem;
            font-weight: 600; display: flex; align-items: center; gap: 5px;
        }
        .btn-notification {
            background: rgba(255,255,255,0.2); border: none; color: white;
            width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; cursor: pointer; position: relative; transition: background 0.2s;
        }
        .btn-notification:hover { background: rgba(255,255,255,0.35); }
        .notification-badge-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; display: none; border: 1px solid white; }
        .btn-logout {
            background: rgba(220,38,38,0.85); border: 1px solid rgba(255,255,255,0.3);
            color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem;
            font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px;
            transition: background 0.2s; border: none;
        }
        .btn-logout:hover { background: #dc2626; }
        .badge-date {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
            color: #ffffff; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem;
            font-weight: 600; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px);
        }


        .btn-mobile-menu {
            display: none; background: rgba(255,255,255,0.2); border: none; color: white;
            width: 32px; height: 32px; border-radius: 6px; font-size: 1.1rem; cursor: pointer;
            align-items: center; justify-content: center; transition: background 0.2s;
        }
        .btn-mobile-menu:hover { background: rgba(255,255,255,0.35); }
        
        .mobile-user-dropdown {
            display: none; position: absolute; top: 52px; right: 12px;
            background: #0b1e42; border: 1px solid #1e3a8a; border-radius: 12px;
            padding: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.4);
            flex-direction: column; gap: 8px; z-index: 1005; min-width: 220px;
        }
        .mobile-user-dropdown.active { display: flex; }


        /* Distribución principal: panel de herramientas a la izquierda y mapa al lado. */
        .main-container { display: flex; flex: 1; position: relative; overflow: hidden; height: calc(100vh - 50px); }
        
        .sidebar {
            width: 390px; background: #f8fafc; border-right: 1px solid #e2e8f0;
            display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
            overflow-y: auto; z-index: 500; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .admin-panel {
            background: rgba(239, 246, 255, 0.9); border: 1px dashed #3b82f6; padding: 10px;
            border-radius: 14px; display: none; flex-direction: column; gap: 6px; flex-shrink: 0;
        }
        .admin-panel label { font-size: 0.68rem; font-weight: 700; color: #1e40af; text-transform: uppercase; }
        .admin-file-input { font-size: 0.7rem; color: #1e293b; width: 100%; }
        .btn-restaurar-datos { display:none; width:100%; margin-top:7px; padding:7px; border:1px solid #f59e0b; border-radius:6px; background:#fffbeb; color:#92400e; font-size:0.7rem; font-weight:800; cursor:pointer; }
        .btn-restaurar-datos:hover { background:#fef3c7; }
        .btn-admin-requests { width:100%; padding:8px; border:0; border-radius:7px; background:#1e40af; color:white; font-size:0.72rem; font-weight:800; cursor:pointer; }
        .admin-requests-modal { max-width: 900px; width: min(94vw, 900px); }
        .admin-requests-table { overflow:auto; padding:12px; }
        .admin-bulk-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px 0; }
        .admin-bulk-toolbar label { margin-right:auto; font-size:0.78rem; font-weight:700; color:#334155; }
        .admin-decision { border:0; border-radius:6px; color:white; padding:6px 8px; margin:2px; cursor:pointer; font-weight:700; }
        .admin-decision.approve { background:#15803d; } .admin-decision.reject { background:#b91c1c; }
        
        .drawer-handle {
            display: none; background: #0f172a; color: white; padding: 10px 14px;
            border-radius: 16px 16px 0 0; cursor: pointer;
            font-size: 0.8rem; font-weight: 700; box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
            user-select: none; flex-shrink: 0;
        }
        .drawer-handle .pill { width: 36px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 10px; margin: 0 auto 6px auto; }


        /* Acordeones y filtros reutilizados dentro del panel lateral. */
        .accordion-card {
            background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.02); overflow: hidden; transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .accordion-header {
            padding: 10px 12px; background: #ffffff; display: flex; justify-content: space-between;
            align-items: center; cursor: pointer; font-size: 0.75rem; font-weight: 800; color: #1e3a8a;
            text-transform: uppercase; user-select: none; letter-spacing: 0.02em; border-bottom: 1px solid transparent;
        }
        .accordion-header:hover { background: #f8fafc; }
        .accordion-header i.fa-chevron-down { transition: transform 0.3s ease; color: #64748b; }
        .accordion-card.open .accordion-header { border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
        .accordion-card.open .accordion-header i.fa-chevron-down { transform: rotate(180deg); color: #1e3a8a; }
        
        .accordion-body {
            max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
            padding: 0 12px; display: flex; flex-direction: column; gap: 8px; background: #ffffff;
        }
        .accordion-card.open .accordion-body { max-height: none; overflow-y: visible; padding: 10px 12px 12px 12px; }


        .filter-section {
            background: #f8fafc; padding: 8px 10px; border-radius: 10px;
            border: 1px solid #e2e8f0;
        }
        .filter-section label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 4px; display: block; letter-spacing: 0.02em; }
        
        select, .search-input {
            width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid #cbd5e1;
            font-size: 0.8rem; font-weight: 600; color: #0f172a; outline: none; background: #f1f5f9;
            transition: all 0.2s ease;
        }
        select option[value="TODOS"], select option[value=""] { color: rgba(100, 116, 139, 0.75); }
        select:has(option[value="TODOS"]:checked), select:has(option[value=""]:checked) { color: rgba(100, 116, 139, 0.75); }


        select:focus, .search-input:focus { background: #ffffff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
        select:disabled { background-color: #e2e8f0; color: #64748b; cursor: not-allowed; }


        .chips-container { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
        .chip-item {
            background: #1e3a8a; color: white; padding: 3px 8px; border-radius: 14px;
            font-size: 0.68rem; font-weight: 600; display: flex; align-items: center; gap: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        .chip-item.chip-pais { background: #0369a1; }
        .chip-item.chip-division { background: #0d9488; }
        .chip-item .btn-remove-chip { cursor: pointer; opacity: 0.8; font-size: 0.75rem; font-weight: bold; }
        .chip-item .btn-remove-chip:hover { opacity: 1; color: #fca5a5; }


        .day-buttons {
            display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
            background: #e2e8f0; padding: 3px; border-radius: 10px;
        }
        .btn-day {
            padding: 6px 0; border: none; background: transparent;
            border-radius: 8px; font-size: 0.68rem; font-weight: 600; cursor: pointer;
            text-align: center; color: #475569; transition: all 0.2s; user-select: none;
        }
        .btn-day.active { background: #ffffff; color: #1e3a8a; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,0.12); }


        /* Indicadores, progreso y acciones de descarga. */
        .progress-container { background: #e2e8f0; border-radius: 12px; height: 14px; width: 100%; overflow: hidden; position: relative; margin-top: 2px; }
        .progress-bar { background: linear-gradient(90deg, #15803d, #22c55e); height: 100%; width: 0%; transition: width 0.4s ease; border-radius: 12px; }
        .progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0.58rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; justify-content: center; }


        .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
        .kpi-card {
            background: #f8fafc; border: 1px solid #e2e8f0; padding: 7px 4px;
            border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        }
        .kpi-card .val { font-size: 1.05rem; font-weight: 800; color: #1e3a8a; }
        .kpi-card .lbl { font-size: 0.52rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-top: 2px; }
        .kpi-card.alert .val { color: #dc2626; }
        .kpi-card.success .val { color: #15803d; }
        .kpi-card.info .val { color: #0369a1; }


        .download-section { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
        .btn-dual-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }


        .btn-download {
            width: 100%; padding: 9px 8px; border: none; border-radius: 10px;
            font-size: 0.74rem; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: all 0.2s ease; text-decoration: none; text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .btn-download:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .btn-download-visited { background-color: #15803d; color: white; }
        .btn-download-visited:hover { background-color: #166534; }
        .btn-download-itinerary { background-color: #0369a1; color: white; }
        .btn-download-itinerary:hover { background-color: #075985; }
        .btn-route-opt { background-color: #4f46e5; color: white; }
        .btn-route-opt:hover { background-color: #4338ca; }
        .btn-route-opt:disabled { background-color: #cbd5e1; color: #94a3b8; cursor: not-allowed; box-shadow: none; }
        .btn-route-download { background-color: #b45309; color: white; }
        .btn-route-download:hover { background-color: #92400e; }
        .btn-route-download:disabled { background-color: #cbd5e1; color: #94a3b8; cursor: not-allowed; box-shadow: none; }
        .btn-gmaps-redirect { background-color: #0284c7; color: white; display: none; }
        .btn-gmaps-redirect:hover { background-color: #0369a1; }
        .btn-compare { background-color: #0f172a; color: white; }
        .btn-compare:hover { background-color: #1e293b; }


        /* Tablas compactas de clientes dentro del panel. */
        .table-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
        .table-title { font-size: 0.72rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
        .table-wrapper { max-height: 130px; overflow-y: auto; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: white; }
        table { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
        th { background-color: #f8fafc; color: #475569; font-weight: 700; text-align: left; padding: 5px; position: sticky; top: 0; border-bottom: 2px solid #e2e8f0; z-index: 2; }
        td { padding: 5px; border-bottom: 1px solid #f1f5f9; color: #334155; }
        tr.clickable-row { cursor: pointer; transition: background 0.15s; }
        tr.clickable-row:hover { background-color: #e0f2fe !important; }
        tr.visited-row { background-color: #f0fdf4; }
        tr.outside-row { background-color: #fef2f2; }


        /* Mapa, leyenda y controles superpuestos de simulación. */
        #map { flex: 1; height: 100%; background: #e2e8f0; position: relative; }


        .map-legend-box {
            position: absolute; bottom: 24px; left: 16px; background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px); padding: 10px 12px; border-radius: 14px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 999; font-size: 0.72rem;
            display: none; flex-direction: column; gap: 6px; min-width: 170px;
            border: 1px solid #cbd5e1;
        }
        .map-legend-title { font-weight: 800; color: #0b1e42; font-size: 0.74rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; display: flex; align-items: center; gap: 5px; }
        .legend-items-container { display: flex; flex-direction: column; gap: 4px; }
        .legend-item-row { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #334155; }
        .legend-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }


        @media (max-width: 768px) {
            .map-legend-box {
                bottom: auto; top: 58px; right: 12px; left: auto; max-width: 160px; padding: 8px 10px;
            }
        }


        .route-simulation-card {
            background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
            border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px 14px;
            margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: none; flex-direction: column; gap: 8px;
        }
        .simulation-controls-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
        .btn-sim-play {
            background: #15803d; color: white; border: none; width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem;
            box-shadow: 0 2px 6px rgba(21,128,61,0.3); transition: transform 0.2s; flex-shrink: 0;
        }
        .btn-sim-play:hover { transform: scale(1.05); background: #166534; }
        .simulation-slider { flex: 1; accent-color: #2563eb; cursor: pointer; }
        .simulation-stats { font-size: 0.7rem; font-weight: 700; color: #475569; display: flex; justify-content: space-between; }


        .metrics-desglose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
        .metric-card-item {
            background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 4px;
            border-radius: 10px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .metric-card-item .val { font-size: 0.9rem; font-weight: 800; color: #1e3a8a; }
        .metric-card-item .lbl { font-size: 0.52rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-top: 1px; }


        /* Capas modales: notificaciones, comparación y formulario de visita. */
        .ios-notification-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px);
            display: none; justify-content: center; align-items: center; z-index: 999999;
        }
        .ios-notification-card {
            background: rgba(255, 255, 255, 0.96); width: 330px; max-width: 88%;
            border-radius: 20px; padding: 22px 18px 16px 18px; text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25); animation: iosPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes iosPop {
            0% { transform: scale(0.85); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .ios-notification-icon { font-size: 2rem; color: #15803d; margin-bottom: 8px; }
        .ios-notification-title { font-size: 0.98rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
        .ios-notification-body { font-size: 0.76rem; color: #475569; line-height: 1.4; max-height: 180px; overflow-y: auto; margin-bottom: 14px; text-align: left; }
        .ios-btn-ok { background: #2563eb; color: white; border: none; width: 100%; padding: 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .ios-btn-ok:hover { background: #1d4ed8; }


        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px);
            display: none; justify-content: center; align-items: center; z-index: 99999;
        }
        .modal-content {
            background: white; border-radius: 16px; width: 500px; max-width: 90%; max-height: 80vh;
            display: flex; flex-direction: column; padding: 18px; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }
        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 10px; }
        .modal-header h3 { font-size: 1rem; color: #0b1e42; }
        .btn-close-modal { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #64748b; }


        .visit-modal-card {
            background: white; border-radius: 20px; width: 560px; max-width: 94%; max-height: 90vh;
            display: flex; flex-direction: column; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .visit-form-body { overflow-y: auto; flex: 1; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
        
        .form-section-title {
            font-size: 0.78rem; font-weight: 800; color: #1e3a8a; text-transform: uppercase;
            border-bottom: 2px solid #eff6ff; padding-bottom: 4px; margin-bottom: 8px;
            display: flex; align-items: center; gap: 6px;
        }
        .client-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .client-status-option {
            border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px; background: #f8fafc;
            color: #334155; font-size: 0.76rem; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; gap: 7px; transition: all 0.2s ease;
        }
        .client-status-option:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
        .client-status-option input { accent-color: #2563eb; }
        .client-status-detail { display: none; flex-direction: column; gap: 8px; }
        .visit-accordion-toggle {
            width: 100%; border: none; border-bottom: 2px solid #eff6ff; background: transparent;
            color: #1e3a8a; padding: 4px 0 7px; display: flex; align-items: center;
            justify-content: space-between; font-size: 0.78rem; font-weight: 800;
            text-transform: uppercase; cursor: pointer;
        }
        .visit-accordion-toggle small { color: #64748b; font-size: 0.62rem; }
        .visit-accordion-icon { transition: transform 0.2s ease; }
        .visit-accordion-toggle[aria-expanded="true"] .visit-accordion-icon { transform: rotate(180deg); }
        /* La especificidad evita que .options-group-box vuelva a mostrar el panel cerrado. */
        .options-group-box.visit-accordion-content { display: none; margin-top: 8px; }
        .options-group-box.visit-accordion-content.open { display: flex; }
        .options-group-box {
            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px;
            display: flex; flex-direction: column; gap: 8px;
        }
        .radio-options-row { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
        .radio-label { font-size: 0.82rem; font-weight: 700; color: #334155; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
        .radio-label input[type="radio"] { width: 16px; height: 16px; accent-color: #1e3a8a; cursor: pointer; }


        .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
        .checkbox-label { font-size: 0.76rem; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 6px; cursor: pointer; }
        .checkbox-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: #2563eb; cursor: pointer; }


        .input-form-group { display: flex; flex-direction: column; gap: 4px; }
        .input-form-group label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; }
        .input-form-control {
            width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid #cbd5e1;
            font-size: 0.82rem; font-weight: 600; color: #0f172a; background: white; outline: none;
        }
        .input-form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
        #edit-codigo-cliente[readonly] {
            background: #e2e8f0;
            border-color: #cbd5e1;
            color: #475569;
            cursor: not-allowed;
            font-weight: 700;
        }
        textarea.input-form-control { resize: vertical; min-height: 52px; }


        .gps-capture-box {
            background: rgba(241, 245, 249, 0.8); border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px 14px;
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03); backdrop-filter: blur(8px);
        }
        .btn-gps {
            background: #2563eb; color: white; border: none; padding: 8px 14px; border-radius: 10px;
            font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease;
            display: flex; align-items: center; gap: 6px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(37,99,235,0.25);
        }
        .btn-gps:hover { background: #1d4ed8; transform: translateY(-1px); }


        .modal-footer-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: 8px; }
        .btn-modal-save {
            background: #15803d; color: white; border: none; padding: 10px 18px; border-radius: 10px;
            font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.2s;
        }
        .btn-modal-save:hover { background: #166534; }
        .btn-modal-cancel {
            background: #e2e8f0; color: #475569; border: none; padding: 10px 16px; border-radius: 10px;
            font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.2s;
        }
        .btn-modal-cancel:hover { background: #cbd5e1; }


        .confirm-dialog-card {
            background: white; width: 340px; max-width: 90%; border-radius: 18px; padding: 20px;
            text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 14px;
        }
        .confirm-dialog-card h4 { font-size: 1rem; color: #0f172a; font-weight: 800; }
        .confirm-dialog-card p { font-size: 0.82rem; color: #64748b; line-height: 1.4; }
        .confirm-actions-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
        .btn-confirm-cancel { flex: 1; padding: 9px; background: #f1f5f9; color: #64748b; border: none; border-radius: 10px; font-weight: 700; font-size: 0.78rem; cursor: pointer; }
        .btn-confirm-cancel:hover { background: #e2e8f0; }
        .btn-confirm-ok { flex: 1; padding: 9px; background: #2563eb; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 0.78rem; cursor: pointer; }
        .btn-confirm-ok:hover { background: #1d4ed8; }


        /* Adaptación móvil: el panel lateral pasa a ser un cajón inferior. */
        @media (max-width: 768px) {
            .header-user-info .user-pill, 
            .header-user-info .badge-date, 
            .header-user-info .btn-logout { display: none; }
            .btn-mobile-menu { display: flex; }


            .main-container { flex-direction: column; position: relative; }
            #map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
            .sidebar {
                position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 75vh; max-height: 75vh;
                z-index: 1000; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 25px rgba(0,0,0,0.3);
                padding: 0 14px 20px 14px; border-right: none; background: rgba(248, 250, 252, 0.98); backdrop-filter: blur(12px);
                overflow-y: auto !important; -webkit-overflow-scrolling: touch;
            }
            .sidebar.collapsed { transform: translateY(calc(100% - 48px)); overflow: hidden !important; }
            .drawer-handle {
                display: block; position: sticky; top: 0; background: #0f172a; color: white;
                padding: 10px 14px; margin: 0 -14px 10px -14px; border-radius: 20px 20px 0 0;
                cursor: pointer; z-index: 1010; user-select: none; min-height: 48px; box-sizing: border-box;
            }
            .header-title-text { font-size: 0.88rem; }
            .header-sub-text { font-size: 0.68rem; }
            .checkbox-grid { grid-template-columns: 1fr; }
            .client-status-grid { grid-template-columns: 1fr; }
        }
    
        /* Interruptores visuales para elegir una sola categorización del mapa. */
        .ios-switches-block { display: flex; flex-direction: column; gap: 8px; }
        .ios-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
        .ios-switch-row:last-child { border-bottom: none; }
        .ios-switch-label { font-size: 0.8rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; }
        .ios-switch-label i { font-size: 0.95rem; width: 16px; text-align: center; }
        .ios-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
        .ios-switch input { opacity: 0; width: 0; height: 0; }
        .ios-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 22px; }
        .ios-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
        input:checked + .ios-slider { background-color: #0369a1; }
        input:checked + .ios-slider:before { transform: translateX(18px); }






/* PR21: bandeja separada para incidencias operativas. */
.admin-modal-help {
    margin: 0 0 12px;
    color: #475569;
    font-size: 0.86rem;
}
#btn-incidencias-admin {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

/* Legibilidad para usuarios de distintas edades. */
.ios-notification-card {
  width: fit-content;
  min-width: min(280px, 86vw);
  max-width: min(420px, 88vw);
  padding: 18px 22px;
}
.ios-notification-icon { font-size: 2.25rem; margin-bottom: 10px; }
.ios-notification-title { font-size: 1.15rem; line-height: 1.35; margin-bottom: 8px; }
.ios-notification-body {
  font-size: 1rem;
  line-height: 1.55;
  max-height: 240px;
  margin: 0;
  text-align: center;
}
.ios-btn-ok { margin-top: 16px; font-size: 1rem; padding: 11px 14px; }

.accordion-header,
.form-section-title,
.visit-accordion-toggle,
.table-title { font-size: 0.95rem; line-height: 1.4; }
.filter-section label,
.input-form-group label,
.admin-panel label { font-size: 0.86rem; line-height: 1.4; letter-spacing: 0.025em; }
select,
.search-input,
.ios-switch-label,
.client-status-option,
.radio-label,
.checkbox-label,
.input-form-group input,
.input-form-group select,
.input-form-group textarea,
.admin-file-input,
.btn-admin-requests,
.btn-restaurar-datos,
.drawer-handle,
.map-legend,
table { font-size: 0.92rem; line-height: 1.45; }
.chip-item,
.btn-day { font-size: 0.82rem; font-weight: 700; }
.progress-text { font-size: 0.72rem; }
.kpi-card .lbl,
.metric-card-item .lbl { font-size: 0.68rem; line-height: 1.25; }
.kpi-card .val,
.metric-card-item .val { font-size: 1.05rem; }
.visit-accordion-toggle small { font-size: 0.76rem; }

@media (max-width: 620px) {
  .ios-notification-card { min-width: min(260px, 84vw); max-width: 88vw; padding: 17px 18px; }
  .accordion-header { font-size: 0.92rem; }
  select, .search-input { font-size: 1rem; }
}