/*
 * OKDelivery — tema visual violeta y azul
 * Paleta principal:
 * #7f00b2 · #8e22bb · #ab49cc · #1e91ed · #4ca1f5
 *
 * Este archivo se carga DESPUÉS de assets/style.css para conservar toda la
 * estructura y funcionalidad original, modificando únicamente la presentación.
 */

:root {
    --okd-purple-deep: #7f00b2;
    --okd-purple: #8e22bb;
    --okd-violet: #ab49cc;
    --okd-blue: #1e91ed;
    --okd-sky: #4ca1f5;
    --okd-ink: #17152a;
    --okd-muted: #6f6b82;
    --okd-line: rgba(127, 0, 178, 0.12);
    --okd-surface: rgba(255, 255, 255, 0.94);
    --okd-surface-solid: #ffffff;
    --okd-soft-purple: rgba(171, 73, 204, 0.10);
    --okd-soft-blue: rgba(76, 161, 245, 0.12);
    --okd-gradient: linear-gradient(135deg, #7f00b2 0%, #8e22bb 28%, #ab49cc 52%, #1e91ed 78%, #4ca1f5 100%);
    --okd-gradient-horizontal: linear-gradient(90deg, #7f00b2 0%, #ab49cc 48%, #1e91ed 100%);
    --okd-shadow-sm: 0 8px 22px rgba(88, 31, 135, 0.09);
    --okd-shadow-md: 0 18px 46px rgba(88, 31, 135, 0.14);
    --okd-shadow-lg: 0 28px 70px rgba(59, 25, 104, 0.22);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--okd-violet) rgba(127, 0, 178, 0.08);
}

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

*::-webkit-scrollbar-track {
    background: rgba(127, 0, 178, 0.07);
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--okd-gradient);
    background-clip: padding-box;
}

html {
    background: #f6f5fb;
}

body,
button,
input,
select,
textarea {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.topbar-brand,
.driver-login-brand h1,
.login-card-heading h2,
.profile-hero h1,
.stat-total-today strong,
.driver-stats-grid article > strong {
    font-family: "Montserrat", "Inter", sans-serif;
}

body.driver-body {
    min-height: 100vh;
    color: var(--okd-ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(171, 73, 204, 0.16), transparent 27rem),
        radial-gradient(circle at 96% 14%, rgba(30, 145, 237, 0.14), transparent 25rem),
        linear-gradient(180deg, #faf9ff 0%, #f4f7ff 48%, #f8f6fc 100%);
    background-attachment: fixed;
}

body.driver-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(127, 0, 178, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 145, 237, 0.025) 1px, transparent 1px);
    background-size: 28px 28px;
}

.driver-topbar {
    border-bottom: 0 !important;
    color: #fff !important;
    background: var(--okd-gradient) !important;
    box-shadow: 0 14px 32px rgba(88, 25, 145, 0.25) !important;
}

.driver-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.38);
}

.topbar-brand {
    color: #fff !important;
    letter-spacing: -0.045em;
    text-decoration: none;
}

.topbar-brand > span {
    display: inline-grid !important;
    width: 38px !important;
    height: 38px !important;
    margin-right: 10px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px rgba(52, 18, 100, 0.22);
    backdrop-filter: blur(10px);
}

.topbar-brand strong {
    color: #fff !important;
    font-weight: 800;
}

.topbar-actions,
.gps-indicator,
.socket-indicator {
    color: #fff !important;
}

.gps-indicator,
.socket-indicator {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
}

.socket-indicator i,
.gps-indicator i {
    color: #fff !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.65));
}

.driver-main {
    position: relative;
}

.page-heading {
    position: relative;
    margin-bottom: 20px !important;
}

.page-heading::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -14px;
    width: 5px;
    height: 48px;
    border-radius: 999px;
    background: var(--okd-gradient);
    box-shadow: 0 6px 16px rgba(127, 0, 178, 0.26);
}

.page-heading .eyebrow,
.eyebrow {
    color: var(--okd-purple) !important;
    letter-spacing: 0.13em;
    font-weight: 800 !important;
}

.page-heading h1,
.profile-hero h1,
.login-card-heading h2 {
    color: var(--okd-ink) !important;
    letter-spacing: -0.045em;
}

.page-heading > p:last-child,
.login-card-heading > p:last-child,
.profile-panel small,
.permission-settings small {
    color: var(--okd-muted) !important;
}

.availability-card,
.driver-stats-grid article,
.loading-card,
.history-filters,
.history-card,
.profile-panel,
.permission-dialog,
.empty-state,
.service-live-container > article,
.service-detail-container > article,
.service-card,
.order-card,
.service-order-card,
.current-service-card {
    border: 1px solid var(--okd-line) !important;
    border-radius: 22px !important;
    background: var(--okd-surface) !important;
    box-shadow: var(--okd-shadow-sm) !important;
    backdrop-filter: blur(18px);
}

.availability-card {
    position: relative;
    overflow: hidden;
}

.availability-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--okd-gradient);
}

.availability-card::after {
    content: "";
    position: absolute;
    top: -48px;
    right: 52px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(171, 73, 204, 0.10);
    filter: blur(2px);
    pointer-events: none;
}

.availability-copy small {
    color: var(--okd-muted) !important;
}

.availability-copy strong {
    color: var(--okd-ink) !important;
}

.availability-dot {
    background: var(--okd-blue) !important;
    box-shadow: 0 0 0 6px rgba(30, 145, 237, 0.13), 0 0 22px rgba(30, 145, 237, 0.38) !important;
}

.status-0 .availability-dot {
    background: #aaa6b7 !important;
    box-shadow: 0 0 0 6px rgba(124, 119, 140, 0.12) !important;
}

.status-2 .availability-dot {
    background: var(--okd-purple) !important;
    box-shadow: 0 0 0 6px rgba(142, 34, 187, 0.13), 0 0 22px rgba(142, 34, 187, 0.34) !important;
}

.availability-toggle {
    border: 0 !important;
    background: rgba(127, 0, 178, 0.13) !important;
    box-shadow: inset 0 0 0 1px rgba(127, 0, 178, 0.13) !important;
}

.availability-toggle span {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 24, 56, 0.22) !important;
}

.status-1 .availability-toggle,
.status-2 .availability-toggle {
    background: var(--okd-gradient-horizontal) !important;
}

.driver-stats-grid {
    gap: 14px !important;
}

.driver-stats-grid article {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.driver-stats-grid article:hover {
    transform: translateY(-2px);
    box-shadow: var(--okd-shadow-md) !important;
}

.driver-stats-grid article > span {
    color: var(--okd-muted) !important;
}

.driver-stats-grid article > span i {
    display: inline-grid;
    width: 28px;
    height: 28px;
    margin-right: 7px;
    place-items: center;
    border-radius: 9px;
    color: var(--okd-purple) !important;
    background: var(--okd-soft-purple);
}

.driver-stats-grid article > strong {
    color: var(--okd-ink) !important;
}

.driver-stats-grid article > small {
    color: var(--okd-muted) !important;
}

.driver-stats-grid .stat-total-today {
    border: 0 !important;
    color: #fff !important;
    background: var(--okd-gradient) !important;
    box-shadow: 0 18px 40px rgba(103, 31, 164, 0.28) !important;
}

.driver-stats-grid .stat-total-today::before,
.driver-stats-grid .stat-total-today::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
    pointer-events: none;
}

.driver-stats-grid .stat-total-today::before {
    width: 160px;
    height: 160px;
    top: -95px;
    right: -25px;
}

.driver-stats-grid .stat-total-today::after {
    width: 92px;
    height: 92px;
    right: 42px;
    bottom: -60px;
}

.driver-stats-grid .stat-total-today > span,
.driver-stats-grid .stat-total-today > strong,
.driver-stats-grid .stat-total-today > strong small,
.driver-stats-grid .stat-total-today > strong b,
.driver-stats-grid .stat-total-today > small,
.driver-stats-grid .stat-total-today i {
    color: #fff !important;
}

.driver-stats-grid .stat-total-today > span i {
    background: rgba(255, 255, 255, 0.16) !important;
}

.service-live-container,
.service-detail-container,
.history-list {
    gap: 15px !important;
}

.loading-card {
    position: relative;
    overflow: hidden;
    color: var(--okd-muted) !important;
    text-align: center;
}

.loading-card::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--okd-gradient);
    box-shadow: 0 0 0 6px rgba(142, 34, 187, 0.08);
    animation: okdPulse 1.8s ease-in-out infinite;
}

@keyframes okdPulse {
    0%, 100% { transform: scale(0.82); opacity: 0.55; }
    50% { transform: scale(1); opacity: 1; }
}

.primary-button,
.secondary-button,
.permission-activate,
.login-button,
.history-filters button[type="submit"],
.order-action-primary,
.service-action-primary,
.accept-order-button,
.start-delivery-button,
.complete-delivery-button {
    border: 0 !important;
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
    box-shadow: 0 12px 24px rgba(111, 31, 166, 0.22) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.primary-button:hover,
.secondary-button:hover,
.permission-activate:hover,
.login-button:hover,
.history-filters button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 16px 28px rgba(85, 38, 147, 0.28) !important;
}

.primary-button:active,
.secondary-button:active,
.login-button:active {
    transform: translateY(0) scale(0.99);
}

.secondary-button {
    color: var(--okd-purple-deep) !important;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.13), rgba(76, 161, 245, 0.15)) !important;
    box-shadow: inset 0 0 0 1px rgba(127, 0, 178, 0.14) !important;
}

.icon-button,
.text-button,
.password-toggle {
    color: var(--okd-purple) !important;
}

.icon-button {
    border: 1px solid var(--okd-line) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
}

.history-filters {
    padding: 14px !important;
}

.history-filters > div,
.history-filters select,
.history-filters input[type="date"],
.input-icon {
    border: 1px solid rgba(127, 0, 178, 0.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(44, 30, 68, 0.03) !important;
}

.history-filters > div:focus-within,
.history-filters select:focus,
.history-filters input[type="date"]:focus,
.input-icon:focus-within {
    border-color: var(--okd-violet) !important;
    box-shadow: 0 0 0 4px rgba(171, 73, 204, 0.12) !important;
}

.history-filters i,
.input-icon > i {
    color: var(--okd-purple) !important;
}

.history-filters input,
.history-filters select,
.input-icon input {
    color: var(--okd-ink) !important;
}

.history-card {
    position: relative;
    overflow: hidden;
}

.history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--okd-gradient);
}

.history-card-top small,
.history-route small,
.history-meta small {
    color: var(--okd-muted) !important;
}

.history-card-top strong,
.history-route strong,
.history-meta strong {
    color: var(--okd-ink) !important;
}

.history-route > i {
    color: var(--okd-blue) !important;
    background: var(--okd-soft-blue) !important;
}

.order-status {
    border: 1px solid rgba(127, 0, 178, 0.12) !important;
    color: var(--okd-purple-deep) !important;
    background: var(--okd-soft-purple) !important;
}

.order-status.assigned {
    color: #6f1ca2 !important;
    background: rgba(171, 73, 204, 0.13) !important;
}

.order-status.delivering {
    color: #0875c8 !important;
    background: rgba(30, 145, 237, 0.13) !important;
}

.order-status.delivered {
    color: #176fb4 !important;
    background: rgba(76, 161, 245, 0.14) !important;
}

.order-status.cancelled {
    color: #7b7484 !important;
    background: rgba(114, 106, 126, 0.11) !important;
}

.pagination a,
.pagination span {
    border-color: var(--okd-line) !important;
    color: var(--okd-purple) !important;
    background: #fff !important;
}

.pagination a:not(.disabled):hover {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

.profile-hero {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 26px !important;
    color: #fff !important;
    background: var(--okd-gradient) !important;
    box-shadow: 0 22px 48px rgba(89, 27, 147, 0.27) !important;
}

.profile-hero::before,
.profile-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}

.profile-hero::before {
    width: 180px;
    height: 180px;
    top: -110px;
    right: -20px;
}

.profile-hero::after {
    width: 96px;
    height: 96px;
    left: -35px;
    bottom: -52px;
}

.profile-hero .eyebrow,
.profile-hero h1,
.profile-hero .plate-pill {
    position: relative;
    z-index: 1;
    color: #fff !important;
}

.profile-avatar {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 14px 28px rgba(42, 18, 81, 0.22) !important;
}

.plate-pill {
    border-color: rgba(255, 255, 255, 0.30) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(10px);
}

.profile-panel h2,
.panel-heading h2 {
    color: var(--okd-ink) !important;
}

.profile-row,
.permission-status-row {
    border-color: rgba(127, 0, 178, 0.09) !important;
}

.profile-row > i,
.permission-status-row > i {
    color: var(--okd-purple) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
}

.profile-row strong,
.permission-status-row strong {
    color: var(--okd-ink) !important;
}

.logout-button {
    border: 1px solid rgba(127, 0, 178, 0.17) !important;
    border-radius: 16px !important;
    color: var(--okd-purple-deep) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: var(--okd-shadow-sm) !important;
}

.logout-button:hover {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

.permission-modal {
    backdrop-filter: blur(8px);
}

.permission-backdrop {
    background: rgba(21, 13, 37, 0.58) !important;
}

.permission-dialog {
    box-shadow: var(--okd-shadow-lg) !important;
}

.permission-icon {
    color: #fff !important;
    background: var(--okd-gradient) !important;
    box-shadow: 0 14px 30px rgba(96, 28, 153, 0.24) !important;
}

.permission-list > div {
    border-color: var(--okd-line) !important;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.06), rgba(76, 161, 245, 0.08)) !important;
}

.permission-list i {
    color: var(--okd-purple) !important;
}

.live-toast {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(127, 0, 178, 0.96), rgba(30, 145, 237, 0.96)) !important;
    box-shadow: var(--okd-shadow-lg) !important;
}

.bottom-navigation {
    border-top: 1px solid rgba(127, 0, 178, 0.10) !important;
    background: rgba(255, 255, 255, 0.91) !important;
    box-shadow: 0 -14px 34px rgba(62, 33, 93, 0.10) !important;
    backdrop-filter: blur(20px) saturate(1.25);
}

.bottom-navigation a {
    position: relative;
    color: #858094 !important;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.bottom-navigation a::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 26px;
    height: 4px;
    border-radius: 999px;
    opacity: 0;
    transform: translateX(-50%) scaleX(0.4);
    background: var(--okd-gradient-horizontal);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bottom-navigation a.active {
    color: var(--okd-purple) !important;
    transform: translateY(-1px);
}

.bottom-navigation a.active::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

.bottom-navigation a.active i {
    filter: drop-shadow(0 5px 9px rgba(127, 0, 178, 0.22));
}

#serviceNavBadge {
    background: var(--okd-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 145, 237, 0.15) !important;
}

.empty-state > i {
    color: var(--okd-violet) !important;
    background: var(--okd-soft-purple) !important;
}

/* Tarjetas creadas dinámicamente desde assets/service.js */
.service-live-container .service-card,
.service-live-container .order-card,
.service-live-container .service-order,
.service-live-container .current-order,
.service-detail-container .service-card,
.service-detail-container .order-card {
    position: relative;
    overflow: hidden;
}

.service-live-container .service-card::before,
.service-live-container .order-card::before,
.service-live-container .service-order::before,
.service-live-container .current-order::before,
.service-detail-container .service-card::before,
.service-detail-container .order-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--okd-gradient);
}

.service-live-container i,
.service-detail-container i {
    color: var(--okd-purple);
}

.route-point,
.route-icon,
.merchant-icon,
.customer-icon,
.service-icon,
.order-icon {
    color: var(--okd-purple) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
}

/* Pantalla de acceso */
body.driver-login-body {
    min-height: 100vh;
    color: var(--okd-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.19), transparent 22rem),
        radial-gradient(circle at 85% 88%, rgba(76, 161, 245, 0.25), transparent 28rem),
        var(--okd-gradient);
    background-attachment: fixed;
}

body.driver-login-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
}

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

.driver-login-brand {
    color: #fff !important;
}

.driver-login-brand .eyebrow,
.driver-login-brand h1,
.driver-login-brand > p,
.driver-login-brand h1 span {
    color: #fff !important;
}

.driver-login-brand h1 {
    max-width: 720px;
    letter-spacing: -0.055em;
    text-shadow: 0 12px 32px rgba(41, 10, 73, 0.22);
}

.driver-login-brand h1 span {
    display: inline-block;
    position: relative;
}

.driver-login-brand h1 span::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
}

.driver-logo {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 26px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 22px 44px rgba(42, 12, 77, 0.23) !important;
    backdrop-filter: blur(18px);
}

.driver-logo i {
    filter: drop-shadow(0 8px 12px rgba(43, 10, 77, 0.20));
}

.login-live-pill {
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(12px);
}

.driver-login-card {
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 34px 75px rgba(44, 12, 79, 0.26) !important;
    backdrop-filter: blur(24px) saturate(1.15);
}

.driver-login-form label {
    color: var(--okd-ink) !important;
}

.input-icon {
    min-height: 52px;
}

.input-icon input::placeholder {
    color: #a7a1b2;
}

.login-button {
    min-height: 52px;
    border-radius: 15px !important;
    font-weight: 800 !important;
}

.login-help {
    color: var(--okd-muted) !important;
}

.login-help i {
    color: var(--okd-purple) !important;
}

.alert-error {
    border: 1px solid rgba(127, 0, 178, 0.13) !important;
    color: #7b1d91 !important;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.10), rgba(76, 161, 245, 0.08)) !important;
}

.alert-error i {
    color: var(--okd-purple) !important;
}

@media (max-width: 760px) {
    .driver-topbar {
        box-shadow: 0 10px 25px rgba(88, 25, 145, 0.23) !important;
    }

    .topbar-brand > span {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
    }

    .page-heading::before {
        left: -9px;
        width: 4px;
    }

    .availability-card,
    .driver-stats-grid article,
    .loading-card,
    .history-filters,
    .history-card,
    .profile-panel,
    .permission-dialog,
    .empty-state {
        border-radius: 18px !important;
    }

    .profile-hero {
        border-radius: 22px !important;
    }

    .driver-login-card {
        border-radius: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
 * Ajustes de estado solicitados
 * - Indicadores GPS/socket: verde, naranja y rojo según conexión.
 * - Tarjeta de espera: círculo morado, antena blanca y texto En Espera.
 * ================================================================ */

.gps-indicator,
.socket-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.gps-indicator > .fa-location-crosshairs {
    color: #ffffff !important;
}

.connection-status-dot {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 8px !important;
    line-height: 9px !important;
    color: #f59e0b !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 10px rgba(245, 158, 11, 0.72) !important;
    filter: none !important;
}

.socket-indicator .connection-status-dot {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

.gps-indicator[data-connection-state="online"] .connection-status-dot,
.socket-indicator[data-connection-state="online"] .connection-status-dot {
    color: #22c55e !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 10px rgba(34, 197, 94, 0.72) !important;
}

.socket-indicator[data-connection-state="online"] .connection-status-dot {
    background: transparent !important;
}

.gps-indicator[data-connection-state="connecting"] .connection-status-dot,
.socket-indicator[data-connection-state="connecting"] .connection-status-dot {
    color: #f59e0b !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 10px rgba(245, 158, 11, 0.72) !important;
    animation: okdConnectionPulse 1.25s ease-in-out infinite;
}

.socket-indicator[data-connection-state="connecting"] .connection-status-dot {
    background: transparent !important;
}

.gps-indicator[data-connection-state="offline"] .connection-status-dot,
.socket-indicator[data-connection-state="offline"] .connection-status-dot {
    color: #ef4444 !important;
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 10px rgba(239, 68, 68, 0.68) !important;
}

.socket-indicator[data-connection-state="offline"] .connection-status-dot {
    background: transparent !important;
}

@keyframes okdConnectionPulse {
    0%, 100% {
        opacity: 0.58;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.loading-card.okd-waiting-card {
    display: flex !important;
    min-height: 178px !important;
    padding: 28px 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    color: var(--okd-ink) !important;
}

.loading-card.okd-waiting-card::before {
    display: none !important;
    content: none !important;
}

.waiting-service-indicator {
    position: relative;
    display: grid !important;
    width: 72px !important;
    height: 72px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #7f00b2 0%, #8e22bb 48%, #ab49cc 100%) !important;
    box-shadow: 0 0 0 8px rgba(142, 34, 187, 0.10), 0 16px 30px rgba(127, 0, 178, 0.28) !important;
    animation: okdWaitingPulse 1.8s ease-in-out infinite;
}

.waiting-service-indicator i,
.service-live-container .waiting-service-indicator i,
.service-detail-container .waiting-service-indicator i {
    color: #ffffff !important;
    font-size: 29px !important;
    filter: drop-shadow(0 5px 9px rgba(54, 12, 80, 0.26)) !important;
}

.waiting-service-title {
    display: block;
    color: var(--okd-purple-deep) !important;
    font-family: "Montserrat", "Inter", sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

@keyframes okdWaitingPulse {
    0%, 100% {
        box-shadow: 0 0 0 8px rgba(142, 34, 187, 0.08), 0 16px 30px rgba(127, 0, 178, 0.24);
        transform: scale(0.97);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(142, 34, 187, 0.13), 0 18px 36px rgba(127, 0, 178, 0.32);
        transform: scale(1);
    }
}

/* Brillo circular limpio para el punto del estado del socket. */
.socket-indicator .connection-status-dot {
    box-shadow: none !important;
}

.socket-indicator[data-connection-state="online"] .connection-status-dot {
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.95) !important;
}

.socket-indicator[data-connection-state="connecting"] .connection-status-dot {
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.95) !important;
}

.socket-indicator[data-connection-state="offline"] .connection-status-dot {
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.95) !important;
}

/* ================================================================
 * Corrección permanente del estado de espera generado por service.js
 * ================================================================ */

.service-live-container .waiting-card,
.service-detail-container .waiting-card {
    border: 1px solid var(--okd-line) !important;
    background: var(--okd-surface) !important;
    box-shadow: var(--okd-shadow-sm) !important;
}

.service-live-container .waiting-card.is-available .waiting-radar,
.service-live-container .waiting-card.okd-waiting-live .waiting-radar,
.service-detail-container .waiting-card.is-available .waiting-radar,
.service-detail-container .waiting-card.okd-waiting-live .waiting-radar {
    color: #ffffff !important;
    background: linear-gradient(135deg, #7f00b2 0%, #8e22bb 48%, #ab49cc 100%) !important;
    box-shadow: 0 18px 38px rgba(127, 0, 178, 0.30) !important;
}

.service-live-container .waiting-card.is-available .waiting-radar i,
.service-live-container .waiting-card.okd-waiting-live .waiting-radar i,
.service-detail-container .waiting-card.is-available .waiting-radar i,
.service-detail-container .waiting-card.okd-waiting-live .waiting-radar i {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 5px 10px rgba(52, 12, 78, 0.28)) !important;
}

.service-live-container .waiting-card.is-available .waiting-radar::before,
.service-live-container .waiting-card.is-available .waiting-radar::after,
.service-live-container .waiting-card.okd-waiting-live .waiting-radar::before,
.service-live-container .waiting-card.okd-waiting-live .waiting-radar::after,
.service-detail-container .waiting-card.is-available .waiting-radar::before,
.service-detail-container .waiting-card.is-available .waiting-radar::after,
.service-detail-container .waiting-card.okd-waiting-live .waiting-radar::before,
.service-detail-container .waiting-card.okd-waiting-live .waiting-radar::after {
    border-color: rgba(142, 34, 187, 0.22) !important;
}

.service-live-container .waiting-card.is-available h2,
.service-live-container .waiting-card.okd-waiting-live h2,
.service-detail-container .waiting-card.is-available h2,
.service-detail-container .waiting-card.okd-waiting-live h2 {
    color: var(--okd-purple-deep) !important;
}

.service-live-container .waiting-card.is-offline .waiting-radar,
.service-detail-container .waiting-card.is-offline .waiting-radar {
    color: #ffffff !important;
    background: linear-gradient(135deg, #8d8998, #aaa6b7) !important;
    box-shadow: 0 16px 32px rgba(93, 89, 105, 0.20) !important;
}

.service-live-container .waiting-card.is-offline .waiting-radar i,
.service-detail-container .waiting-card.is-offline .waiting-radar i {
    color: #ffffff !important;
}

/* Acceso simplificado y minimalista. */
.driver-login-brand-minimal {
    display: flex !important;
    min-height: 360px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.driver-login-brand-minimal .driver-logo {
    margin: 0 0 24px !important;
}

.driver-login-brand-minimal h1 {
    max-width: none !important;
    margin: 0 0 10px !important;
    font-size: clamp(2.8rem, 7vw, 5rem) !important;
    line-height: 0.96 !important;
}

.driver-login-brand-minimal h1 span::after {
    display: none !important;
    content: none !important;
}

.driver-login-brand-minimal .eyebrow {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 0.78rem !important;
}

@media (max-width: 760px) {
    .driver-login-brand-minimal {
        min-height: auto;
        padding: 26px 0 10px;
        align-items: center;
        text-align: center;
    }

    .driver-login-brand-minimal .driver-logo {
        margin-bottom: 18px !important;
    }

    .driver-login-brand-minimal h1 {
        font-size: clamp(2.45rem, 13vw, 3.5rem) !important;
    }
}

/* ========================================================================
 * OKDelivery v10
 * Socket estable, estados directos, modales centrados y navegación parcial.
 * ======================================================================== */

/* Los estados se aplican directamente desde app.js. No se necesita observar
   ni reconstruir el encabezado para cambiar los colores. */
.gps-indicator,
.socket-indicator {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.gps-indicator > .fa-location-crosshairs {
    color: #ffffff !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55)) !important;
}

.gps-indicator .connection-status-dot {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 10px rgba(245, 158, 11, 0.78) !important;
}

.socket-indicator .connection-status-dot {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f59e0b !important;
    background: transparent !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.95) !important;
    box-shadow: none !important;
}

.gps-indicator.online .connection-status-dot,
.gps-indicator[data-connection-state="online"] .connection-status-dot {
    background: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 10px rgba(34, 197, 94, 0.78) !important;
}

.socket-indicator.online .connection-status-dot,
.socket-indicator[data-connection-state="online"] .connection-status-dot {
    color: #22c55e !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.98) !important;
}

.gps-indicator.connecting .connection-status-dot,
.gps-indicator[data-connection-state="connecting"] .connection-status-dot {
    background: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 10px rgba(245, 158, 11, 0.78) !important;
    animation: okdConnectionPulse 1.25s ease-in-out infinite !important;
}

.socket-indicator.connecting .connection-status-dot,
.socket-indicator[data-connection-state="connecting"] .connection-status-dot {
    color: #f59e0b !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.98) !important;
    animation: okdConnectionPulse 1.25s ease-in-out infinite !important;
}

.gps-indicator.offline .connection-status-dot,
.gps-indicator.error .connection-status-dot,
.gps-indicator[data-connection-state="offline"] .connection-status-dot {
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 10px rgba(239, 68, 68, 0.76) !important;
    animation: none !important;
}

.socket-indicator.offline .connection-status-dot,
.socket-indicator.error .connection-status-dot,
.socket-indicator[data-connection-state="offline"] .connection-status-dot {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.98) !important;
    animation: none !important;
}

/* Todos los modales y confirmaciones se muestran exactamente en el centro de
   la pantalla, tanto vertical como horizontalmente. */
.permission-modal[hidden],
#orderActionModal[hidden] {
    display: none !important;
}

.permission-modal:not([hidden]),
#orderActionModal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: auto !important;
}

.permission-modal .permission-backdrop,
#orderActionModal .permission-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
}

.permission-modal .permission-dialog,
#orderActionModal .permission-dialog,
.permission-modal .order-action-dialog {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    max-height: calc(100dvh - 36px) !important;
    margin: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
}

body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* El encabezado y la navegación permanecen montados. Solo cambia el contenido
   dentro de #driverPageContent. */
#driverPageContent {
    min-height: 120px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

body.is-page-loading #driverPageContent {
    opacity: 0.52;
    transform: translateY(3px);
    pointer-events: none;
}

body.is-page-loading .bottom-navigation a {
    pointer-events: none;
}

body.is-page-loading .driver-main::after {
    content: "";
    position: fixed;
    top: calc(env(safe-area-inset-top) + 67px);
    left: 0;
    z-index: 9990;
    width: 42%;
    height: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, transparent, #8e22bb, #b36bd1);
    transform: translateX(-100%);
    animation: okdPageProgress 0.9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes okdPageProgress {
    0% { transform: translateX(-100%); }
    65% { transform: translateX(165%); }
    100% { transform: translateX(260%); }
}

@media (max-width: 560px) {
    .permission-modal:not([hidden]),
    #orderActionModal:not([hidden]) {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .permission-modal .permission-dialog,
    #orderActionModal .permission-dialog {
        width: 100% !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 22px !important;
    }
}


/* ================================================================
   PERFIL: BOTÓN CERRAR SESIÓN SIEMPRE VISIBLE
   Evita que la navegación inferior fija cubra el botón en móviles,
   WebView y durante la navegación interna sin recargar el header.
   ================================================================ */
body[data-active-page="profile"] #driverPageContent,
#driverPageContent[data-page="profile"] {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

.profile-logout-area {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 0 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.profile-logout-area .logout-button,
body[data-active-page="profile"] .logout-button,
#driverPageContent[data-page="profile"] .logout-button {
    position: relative !important;
    z-index: 21 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.profile-logout-area .logout-button i {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-logout-area .logout-button span {
    display: inline-block !important;
}

@media (max-width: 560px) {
    body[data-active-page="profile"] #driverPageContent,
    #driverPageContent[data-page="profile"] {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    .profile-logout-area {
        margin-top: 16px !important;
        padding-bottom: 16px !important;
    }
}


/* ================================================================
   V13 — LOGO BLANCO Y GPS COMPLETAMENTE FIJO
   ================================================================ */
.topbar-brand .topbar-brand-logo {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.topbar-brand .topbar-brand-logo img {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    filter: none !important;
}

/* El indicador GPS y todos sus elementos son estáticos. Solo cambia el color
   del punto según el estado; no pulsa, no parpadea y no se desplaza. */
.gps-indicator,
.gps-indicator *,
.gps-indicator::before,
.gps-indicator::after,
.gps-indicator .connection-status-dot {
    animation: none !important;
    transition-property: color, background-color, border-color, box-shadow !important;
    transform: none !important;
}

.gps-indicator > i {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Blindaje adicional del cierre de sesión ante actualizaciones de Socket,
   permisos nativos o reemplazos parciales del contenido. */
body[data-active-page="profile"] .profile-logout-area,
#driverPageContent[data-page="profile"] .profile-logout-area,
body[data-active-page="profile"] .logout-button,
#driverPageContent[data-page="profile"] .logout-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
}