:root {
    --kite-primary: #203764;
    --kite-primary-dark: #17294b;
    --kite-primary-hover: #2b4a85;
    --kite-soft-bg: #f3f6fb;
    --kite-section-bg: #eef3fa;
    --kite-success: #168a52;
    --kite-warning: #c87900;
    --kite-error: #b42318;
    --kite-ink: #1f2937;
    --kite-muted: #64748b;
    --kite-border: #d7e0ee;
    --kite-bg: #f3f6fb;
    --kite-accent: #0f766e;
}

body {
    background: var(--kite-bg);
    color: var(--kite-ink);
}

.app-shell {
    min-height: 100vh;
}

.maintenance-print-only {
    display: none;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0;
}

.content-wrap {
    max-width: 1180px;
}

.auth-card,
.surface {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
}

.auth-card {
    max-width: 420px;
    width: 100%;
}

.text-muted-2 {
    color: var(--kite-muted);
}

.audit-json {
    background: #111827;
    border-radius: 6px;
    color: #e5e7eb;
    font-size: .75rem;
    max-height: 18rem;
    overflow: auto;
    padding: .75rem;
    white-space: pre-wrap;
}

.unit-initialization-identity {
    align-items: baseline;
    background: var(--kite-primary);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    max-width: 100%;
    padding: .65rem 1rem;
}

.unit-initialization-identity span {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.unit-initialization-identity strong {
    font-size: clamp(1.65rem, 6vw, 2.5rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    cursor: pointer;
    min-height: 2.75rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .9;
    padding: .35rem;
}

.datetime-picker-24h {
    align-items: stretch;
    display: flex;
    width: 100%;
}

.datetime-picker-24h .form-control {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    min-width: 0;
}

.datetime-picker-24h-button {
    align-items: center;
    background: var(--kite-primary);
    border: 1px solid var(--kite-primary);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    gap: .35rem;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem .75rem;
}

.datetime-picker-24h-button:hover,
.datetime-picker-24h-button:focus-visible {
    background: var(--kite-primary-hover);
    border-color: var(--kite-primary-hover);
}

.flatpickr-calendar {
    font-size: 1rem;
}

.flatpickr-time {
    border-top: 2px solid var(--kite-primary);
    min-height: 3.25rem;
}

.flatpickr-time input {
    font-size: 1.25rem;
    font-weight: 700;
}

.flatpickr-time .flatpickr-am-pm {
    display: none !important;
}

@media (max-width: 575.98px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 1rem);
    }

    .datetime-picker-24h-button {
        padding-inline: .65rem;
    }
}

@media print {
    @page {
        margin: 12mm;
        size: auto;
    }

    body {
        background: #fff !important;
        color: #111 !important;
        font-size: 10pt;
    }

    .app-topbar,
    .app-sidebar,
    .app-mobile-menu,
    .maintenance-no-print,
    .maintenance-actions-column,
    .maintenance-progress,
    .alert {
        display: none !important;
    }

    .app-layout,
    .app-main,
    .app-content-wrap,
    .maintenance-report-column {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .maintenance-section {
        break-inside: avoid;
        box-shadow: none !important;
        margin-top: 10mm !important;
    }

    .maintenance-section-header {
        background: #203764 !important;
        color: #fff !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .maintenance-print-only {
        display: block !important;
    }

    .maintenance-attachment-card,
    .list-group-item {
        color: #111 !important;
        text-decoration: none !important;
    }
}

.btn-primary {
    --bs-btn-bg: var(--kite-primary);
    --bs-btn-border-color: var(--kite-primary);
    --bs-btn-hover-bg: var(--kite-primary-hover);
    --bs-btn-hover-border-color: var(--kite-primary-hover);
    --bs-btn-active-bg: var(--kite-primary-dark);
    --bs-btn-active-border-color: var(--kite-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--kite-primary);
    --bs-btn-border-color: var(--kite-primary);
    --bs-btn-hover-bg: var(--kite-primary);
    --bs-btn-hover-border-color: var(--kite-primary);
    --bs-btn-active-bg: var(--kite-primary-dark);
    --bs-btn-active-border-color: var(--kite-primary-dark);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--kite-border);
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
}

.flight-plan-form {
    color: var(--kite-ink);
}

.flight-plan-form .btn-outline-secondary {
    border-color: var(--kite-primary);
    color: var(--kite-primary);
}

.flight-plan-form .btn-outline-secondary:hover,
.flight-plan-form .btn-outline-secondary:focus {
    background: var(--kite-primary);
    border-color: var(--kite-primary);
    color: #fff;
}

.flight-plan-section {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(32, 55, 100, .06);
    overflow: hidden;
}

.flight-plan-section + .flight-plan-section {
    margin-top: 2rem;
}

.flight-plan-section-header {
    align-items: center;
    background: var(--kite-primary);
    color: #fff;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.flight-plan-section-header-alt {
    background: var(--kite-primary-hover);
}

.flight-plan-section-header h2 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.flight-plan-section-header p {
    color: rgba(255, 255, 255, .84);
    font-size: .86rem;
    margin: .25rem 0 0;
}

.flight-plan-section-body {
    padding: 1.25rem;
}

.flight-section-action {
    flex: 0 0 auto;
    font-weight: 600;
}

.stop-list {
    display: grid;
    gap: .9rem;
}

.flight-stop-card {
    background: #f8fafc;
    border: 1px solid var(--kite-border);
    border-left: 4px solid var(--kite-primary);
    border-radius: 8px;
    padding: 1rem;
}

.flight-stop-title {
    color: var(--kite-primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: .75rem;
    text-transform: uppercase;
}

.estimate-summary .flight-plan-section-body {
    background: var(--kite-section-bg);
}

.estimate-table-wrap {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.estimate-segments-table thead th {
    background: var(--kite-section-bg);
    border-bottom: 1px solid var(--kite-border);
    color: var(--kite-primary-dark);
    font-size: .76rem;
    text-transform: uppercase;
}

.estimate-groups {
    display: grid;
    gap: 1rem;
}

.estimate-group {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    padding: .9rem;
}

.estimate-group-result {
    background: #fff;
    border-color: rgba(32, 55, 100, .26);
}

.estimate-group-title {
    color: var(--kite-primary-dark);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: .7rem;
    text-transform: uppercase;
}

.estimate-metrics {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.estimate-metrics-result {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.estimate-metric {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    min-height: 74px;
    padding: .75rem;
}

.estimate-metric span {
    color: var(--kite-muted);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .35rem;
}

.estimate-metric strong {
    color: var(--kite-ink);
    display: block;
    font-size: 1.02rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.status-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1.1;
    min-height: 28px;
    padding: .42rem .7rem;
    white-space: nowrap;
}

.status-badge-success {
    background: rgba(22, 138, 82, .12);
    color: var(--kite-success);
}

.status-badge-warning,
.status-badge-neutral {
    background: rgba(200, 121, 0, .14);
    color: var(--kite-warning);
}

.status-badge-error {
    background: rgba(180, 35, 24, .12);
    color: var(--kite-error);
}

.flight-plan-section-header .status-badge {
    background: rgba(255, 255, 255, .95);
}

.table-mobile td,
.table-mobile th {
    vertical-align: middle;
}

.timeline-list {
    display: grid;
    gap: 1rem;
}

.timeline-item {
    display: grid;
    gap: .75rem;
    grid-template-columns: 18px minmax(0, 1fr);
    position: relative;
}

.timeline-item:not(:last-child)::before {
    background: var(--kite-border);
    content: "";
    height: calc(100% + 1rem);
    left: 8px;
    position: absolute;
    top: 16px;
    width: 2px;
}

.timeline-dot {
    background: var(--kite-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--kite-border);
    height: 18px;
    position: relative;
    width: 18px;
    z-index: 1;
}

.timeline-card {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    padding: 1rem;
}

.tank-card {
    transition: border-color .15s ease, transform .15s ease;
}

.tank-card:hover {
    border-color: var(--kite-primary);
    transform: translateY(-1px);
}

.tank-meter {
    background: #e4eaf3;
    border: 1px solid var(--kite-border);
    border-radius: 999px;
    height: 16px;
    overflow: hidden;
}

.tank-meter span {
    background: linear-gradient(90deg, var(--kite-warning), var(--kite-success));
    display: block;
    height: 100%;
    min-width: 2px;
}

.tank-meter-large {
    height: 30px;
}

.kardex-table tbody tr {
    background: #fff;
}

.kardex-row td:first-child {
    box-shadow: inset 4px 0 transparent;
}

.kardex-row-load td:first-child {
    box-shadow: inset 4px 0 var(--kite-success);
}

.kardex-row-consumption td:first-child {
    box-shadow: inset 4px 0 var(--kite-error);
}

.kardex-row-adjustment td:first-child {
    box-shadow: inset 4px 0 var(--kite-warning);
}

.kardex-row-opening td:first-child {
    box-shadow: inset 4px 0 var(--kite-primary);
}

.kardex-movement-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    padding: .35rem .55rem;
    text-transform: uppercase;
}

.kardex-badge-load {
    background: rgba(22, 138, 82, .12);
    color: var(--kite-success);
}

.kardex-badge-consumption {
    background: rgba(180, 35, 24, .12);
    color: var(--kite-error);
}

.kardex-badge-adjustment {
    background: rgba(200, 121, 0, .14);
    color: var(--kite-warning);
}

.kardex-badge-opening {
    background: rgba(28, 76, 140, .12);
    color: var(--kite-primary);
}

.kardex-liters {
    display: inline-block;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    min-width: 4.75rem;
}

.kardex-liters-positive {
    color: var(--kite-success) !important;
}

.kardex-liters-negative {
    color: var(--kite-error) !important;
}

.kardex-liters-neutral {
    color: var(--kite-muted) !important;
}

.fuel-live-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fuel-live-summary > div {
    background: var(--kite-section-bg);
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    padding: .75rem;
}

.fuel-live-summary span {
    color: var(--kite-muted);
    display: block;
    font-size: .75rem;
}

.fuel-live-summary strong {
    display: block;
    overflow-wrap: anywhere;
}

.fuel-evidence-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 767.98px) {
    .fuel-live-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Navegacion principal responsive */
.app-topbar {
    min-height: 58px;
    z-index: 1040;
}

.app-sidebar-toggle,
.mobile-menu-toggle {
    align-items: center;
    color: var(--kite-primary);
    display: inline-flex;
    font-size: 1.15rem;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.app-layout {
    display: flex;
    min-height: calc(100vh - 58px);
}

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--kite-border);
    flex: 0 0 230px;
    flex-direction: column;
    height: calc(100vh - 58px);
    position: sticky;
    top: 58px;
    transition: margin-left .2s ease, opacity .2s ease;
    width: 230px;
    z-index: 1020;
}

.sidebar-hidden .app-sidebar {
    margin-left: -230px;
    opacity: 0;
    pointer-events: none;
}

.app-sidebar-nav,
.app-mobile-nav {
    display: grid;
    gap: .25rem;
    padding: 1rem;
}

.app-nav-link {
    border-radius: 7px;
    color: var(--kite-ink);
    display: block;
    font-size: .93rem;
    font-weight: 600;
    padding: .7rem .85rem;
    text-decoration: none;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    background: var(--kite-section-bg);
    color: var(--kite-primary);
}

.app-nav-link.active {
    background: var(--kite-primary);
    color: #fff;
}

.app-sidebar-footer {
    border-top: 1px solid var(--kite-border);
    margin-top: auto;
    padding: 1rem;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

.app-content-wrap {
    max-width: 1420px;
}

.app-mobile-menu {
    max-width: min(320px, 88vw);
}

/* Mantenimiento */
.maintenance-summary-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.maintenance-summary-card {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    color: var(--kite-ink);
    min-width: 0;
    padding: .85rem;
}

.maintenance-summary-card:hover {
    border-color: var(--kite-primary);
    box-shadow: 0 6px 18px rgba(32, 55, 100, .08);
}

.maintenance-summary-card span {
    color: var(--kite-muted);
    display: block;
    font-size: .75rem;
    line-height: 1.2;
    min-height: 2.3em;
}

.maintenance-summary-card strong {
    display: block;
    font-size: 1.65rem;
    margin-top: .25rem;
}

.maintenance-mobile-list {
    display: grid;
    gap: .75rem;
}

.maintenance-mobile-card {
    display: block;
    padding: 1rem;
}

.maintenance-section {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(32, 55, 100, .045);
    overflow: hidden;
}

.maintenance-section-header {
    background: var(--kite-primary);
    color: #fff;
    padding: .8rem 1rem;
}

.maintenance-section-header h2 {
    font-size: 1rem;
    font-weight: 750;
    margin: 0;
    text-transform: uppercase;
}

.maintenance-section-intro {
    background: #f8fafc;
    border-left: 4px solid var(--kite-primary);
    color: #334155;
    font-style: italic;
    margin: 1rem;
    padding: .75rem 1rem;
}

.maintenance-section-body {
    padding: 1.15rem;
}

.maintenance-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.maintenance-choice,
.maintenance-check-option {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--kite-border);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    padding: .65rem .8rem;
}

.maintenance-choice:has(input:checked),
.maintenance-check-option:has(input:checked) {
    background: var(--kite-section-bg);
    border-color: var(--kite-primary);
}

.maintenance-choice input,
.maintenance-check-option input,
.maintenance-priority-option input {
    height: 1.1rem;
    margin: 0;
    width: 1.1rem;
}

.maintenance-check-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maintenance-priority-list {
    display: grid;
    gap: .65rem;
}

.maintenance-priority-option {
    align-items: center;
    border: 1px solid var(--kite-border);
    border-left-width: 5px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    gap: .65rem;
    padding: .7rem .8rem;
}

.maintenance-priority-option:has(input:checked) {
    background: #f8fafc;
    box-shadow: 0 0 0 2px rgba(32, 55, 100, .08);
}

.priority-border-critica { border-left-color: #dc2626; }
.priority-border-alta { border-left-color: #f97316; }
.priority-border-media { border-left-color: #eab308; }
.priority-border-baja { border-left-color: #65a30d; }
.priority-bg-critica { background: #dc2626; }
.priority-bg-alta { background: #f97316; }
.priority-bg-media { background: #eab308; }
.priority-bg-baja { background: #65a30d; }

.priority-dot {
    border-radius: 50%;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
}

.maintenance-priority {
    border-radius: 999px;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    padding: .3rem .55rem;
}

.priority-critica { background: #fee2e2; color: #991b1b; }
.priority-alta { background: #ffedd5; color: #9a3412; }
.priority-media { background: #fef9c3; color: #854d0e; }
.priority-baja { background: #ecfccb; color: #3f6212; }

.maintenance-upload-zone {
    align-items: center;
    background: #f8fafc;
    border: 2px dashed var(--kite-border);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 116px;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.maintenance-upload-zone span {
    color: var(--kite-muted);
    font-size: .82rem;
}

.maintenance-progress {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 9px;
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    overflow-x: auto;
    padding: .8rem;
}

.maintenance-progress-step {
    align-items: center;
    color: var(--kite-muted);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 90px;
    position: relative;
    text-align: center;
}

.maintenance-progress-step span {
    align-items: center;
    background: #e2e8f0;
    border-radius: 50%;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.maintenance-progress-step.is-complete {
    color: var(--kite-primary);
}

.maintenance-progress-step.is-complete span {
    background: var(--kite-primary);
    color: #fff;
}

.maintenance-progress-step.is-current span {
    box-shadow: 0 0 0 4px rgba(32, 55, 100, .16);
}

.maintenance-tag {
    background: var(--kite-section-bg);
    border-radius: 999px;
    color: var(--kite-primary-dark);
    font-size: .8rem;
    font-weight: 650;
    padding: .32rem .6rem;
}

.maintenance-long-text {
    overflow-wrap: anywhere;
    white-space: normal;
}

.maintenance-attachment-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maintenance-attachment-card {
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    color: var(--kite-ink);
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.maintenance-attachment-card img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.maintenance-attachment-card span {
    display: block;
    font-size: .75rem;
    overflow: hidden;
    padding: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maintenance-signature-preview {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 6px;
    max-height: 130px;
    max-width: 100%;
}

.maintenance-check-results {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maintenance-check-results > div {
    background: #f8fafc;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    padding: .65rem;
}

.maintenance-check-results span {
    color: var(--kite-muted);
    font-size: .73rem;
}

.maintenance-financial-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maintenance-financial-grid > div {
    background: #f8fafc;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    padding: .85rem;
}

.maintenance-financial-grid span,
.maintenance-financial-grid strong {
    display: block;
}

.maintenance-financial-grid span {
    color: var(--kite-muted);
    font-size: .75rem;
}

.maintenance-financial-grid strong {
    font-size: 1.15rem;
    margin-top: .2rem;
}

.maintenance-financial-grid .is-negative strong { color: var(--kite-error); }
.maintenance-financial-grid .is-positive strong { color: var(--kite-success); }

.maintenance-event-timeline {
    display: grid;
    gap: 1rem;
}

.maintenance-event {
    display: grid;
    gap: .75rem;
    grid-template-columns: 14px minmax(0, 1fr);
}

.maintenance-event-dot {
    background: var(--kite-primary);
    border: 3px solid #dbeafe;
    border-radius: 50%;
    height: 14px;
    margin-top: .25rem;
    width: 14px;
}

.maintenance-action-card {
    margin-bottom: 1rem;
    padding: 1rem;
}

.maintenance-action-highlight {
    border-color: rgba(32, 55, 100, .42);
    box-shadow: 0 8px 20px rgba(32, 55, 100, .08);
}

.signature-pad-shell {
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    overflow: hidden;
}

.signature-pad {
    background: #fff;
    display: block;
    height: 150px;
    touch-action: none;
    width: 100%;
}

.maintenance-inspection-grid,
.maintenance-tire-check-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maintenance-inspection-card {
    background: #f8fafc;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    min-width: 0;
    padding: .8rem;
}

.maintenance-part-row {
    background: #f8fafc;
}

.maintenance-part-row .form-label,
.maintenance-inspection-card .form-label {
    width: 100%;
}

.maintenance-alert-evidence {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--kite-border);
    border-radius: 7px;
    display: block;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .maintenance-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .app-content-wrap {
        max-width: 100%;
    }

    .maintenance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-content-wrap {
        padding-left: .8rem;
        padding-right: .8rem;
    }

    .maintenance-summary-card {
        padding: .75rem;
    }

    .maintenance-section-body {
        padding: 1rem;
    }

    .maintenance-check-grid,
    .maintenance-check-results,
    .maintenance-financial-grid,
    .maintenance-inspection-grid,
    .maintenance-tire-check-grid {
        grid-template-columns: 1fr;
    }

    .maintenance-attachment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maintenance-action-card .btn {
        min-height: 44px;
    }
}

.attachment-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.attachment-thumb-btn {
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--kite-border);
    border-radius: 8px;
    color: var(--kite-ink);
    display: inline-flex;
    flex-direction: column;
    gap: .35rem;
    max-width: 128px;
    padding: .35rem;
    text-align: left;
}

.attachment-thumb-btn:hover,
.attachment-thumb-btn:focus {
    border-color: var(--kite-primary);
    box-shadow: 0 0 0 .16rem rgba(32, 55, 100, .12);
}

.attachment-thumb-btn img {
    aspect-ratio: 4 / 3;
    background: var(--kite-section-bg);
    border-radius: 6px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.attachment-thumb-btn span {
    color: var(--kite-muted);
    font-size: .72rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.attachment-preview-image {
    background: var(--kite-section-bg);
    border-radius: 8px;
    display: block;
    max-height: 75vh;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.icon-action-btn {
    align-items: center;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.icon-action-btn svg {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.icon-action-btn.is-loading {
    cursor: wait;
    opacity: .7;
}

.trip-summary-capture-wrap {
    left: -12000px;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 1080px;
    z-index: -1;
}

.trip-summary-card,
.trip-summary-card * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.trip-summary-card {
    background: #eaf2fb;
    color: #071a3a;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    width: 1080px;
}

.trip-summary-inline-icon {
    color: currentColor;
    display: block;
    flex: 0 0 auto;
    height: 56px;
    overflow: visible;
    width: 56px;
}

.trip-summary-css-icon {
    color: #0969cb;
    display: block;
    flex: 0 0 auto;
    font-style: normal;
    height: 66px;
    overflow: visible;
    position: relative;
    width: 66px;
}

.trip-summary-css-icon::before,
.trip-summary-css-icon::after {
    content: "";
    display: block;
    position: absolute;
}

.trip-summary-css-icon-road::before {
    border-bottom: 58px solid #0969cb;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    height: 0;
    left: 15px;
    top: 4px;
    width: 0;
}

.trip-summary-css-icon-road::after {
    display: none;
}

.trip-summary-css-icon-road span {
    display: block;
    font-size: 0;
    line-height: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
}

.trip-summary-road-side {
    background: #eef3fa;
    border-radius: 3px;
    height: 44px;
    top: 16px;
    width: 5px;
}

.trip-summary-road-side-left {
    left: 25px;
    transform: rotate(7deg);
}

.trip-summary-road-side-right {
    right: 25px;
    transform: rotate(-7deg);
}

.trip-summary-road-center {
    background: repeating-linear-gradient(
        to bottom,
        #fff 0,
        #fff 8px,
        transparent 8px,
        transparent 16px
    );
    border-radius: 4px;
    height: 42px;
    left: 31px;
    top: 17px;
    width: 5px;
}

.trip-summary-css-icon-clock::before {
    background: #0969cb;
    border-radius: 50%;
    height: 54px;
    left: 6px;
    top: 6px;
    width: 54px;
}

.trip-summary-css-icon-clock::after {
    border-bottom: 7px solid #eef3fa;
    border-left: 7px solid #eef3fa;
    border-radius: 0 0 0 5px;
    height: 19px;
    left: 32px;
    top: 19px;
    width: 18px;
}

.trip-summary-css-icon-fuel::before {
    background: #0969cb;
    border-radius: 5px 5px 3px 3px;
    height: 50px;
    left: 16px;
    top: 8px;
    width: 28px;
}

.trip-summary-css-icon-fuel::after {
    background:
        linear-gradient(#eef3fa, #eef3fa) 22px 9px / 13px 11px no-repeat,
        linear-gradient(#0969cb, #0969cb) 42px 19px / 14px 8px no-repeat,
        linear-gradient(#0969cb, #0969cb) 51px 24px / 8px 28px no-repeat;
    border-radius: 4px;
    height: 56px;
    left: 0;
    top: 6px;
    width: 62px;
}

.trip-summary-css-icon-pin::before {
    background: #0969cb;
    border-radius: 50% 50% 50% 0;
    height: 44px;
    left: 11px;
    top: 7px;
    transform: rotate(-45deg);
    width: 44px;
}

.trip-summary-css-icon-pin::after {
    background: #eef3fa;
    border-radius: 50%;
    height: 14px;
    left: 26px;
    top: 20px;
    width: 14px;
}

.trip-summary-hero {
    background: #e8f6ff;
    min-height: 455px;
    overflow: hidden;
    padding: 136px 52px 34px;
    position: relative;
}

.trip-summary-hero-copy {
    position: relative;
    width: 405px;
    z-index: 2;
}

.trip-summary-title {
    display: grid;
    gap: 6px;
}

.trip-summary-title span {
    color: #0868c9;
    display: block;
    font-size: 60px;
    font-weight: 900;
    line-height: .92;
}

.trip-summary-title span:first-child {
    color: #071a3a;
}

.trip-summary-kiteid {
    background: #0969cb;
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-top: 26px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 13px 24px 15px;
}

.trip-summary-hero-photo {
    height: 100%;
    overflow: hidden;
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 0;
}

.trip-summary-hero-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
}

.trip-summary-main-route {
    align-items: center;
    background: linear-gradient(90deg, #052a60 0%, #0756ab 100%);
    color: #fff;
    display: flex;
    gap: 20px;
    min-height: 118px;
    padding: 26px 48px;
}

.trip-summary-main-route strong {
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.trip-summary-route-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trip-summary-route-arrow {
    color: #77b82a;
}

.trip-summary-route-banner-icon {
    align-items: center;
    background: #0b74d1;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 84px;
    height: 84px;
    justify-content: center;
    width: 84px;
}

.trip-summary-route-banner-icon .trip-summary-inline-icon {
    height: 56px;
    width: 56px;
}

.trip-summary-identity {
    background: #fff;
    border: 2px solid #d7e0ee;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(32, 55, 100, .08);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 32px 30px 34px;
    min-height: 126px;
    padding: 24px 28px;
}

.trip-summary-identity-item {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 0 18px;
}

.trip-summary-identity-item + .trip-summary-identity-item {
    border-left: 2px solid #d7e0ee;
}

.trip-summary-identity-item > .trip-summary-inline-icon {
    color: #0969cb;
    flex: 0 0 54px;
    height: 54px;
    width: 54px;
}

.trip-summary-identity-item div {
    min-width: 0;
}

.trip-summary-identity-item span {
    display: block;
    font-size: 24px;
    line-height: 1.1;
}

.trip-summary-identity-item strong {
    display: block;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 10px;
    overflow-wrap: anywhere;
}

.trip-summary-panel {
    background: #fff;
    border: 2px solid #d7e0ee;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(32, 55, 100, .08);
    margin: 0 28px 30px;
    min-height: 235px;
    padding: 86px 30px 32px;
    position: relative;
}

.trip-summary-section-heading {
    align-items: center;
    background: #0969cb;
    color: #fff;
    display: inline-flex;
    gap: 20px;
    height: 64px;
    left: 0;
    max-width: calc(100% - 34px);
    padding: 0 58px 0 20px;
    position: absolute;
    top: 0;
}

.trip-summary-section-heading::after {
    border-bottom: 32px solid transparent;
    border-left: 28px solid #0969cb;
    border-top: 32px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: -27px;
    top: 0;
    width: 0;
}

.trip-summary-section-heading span {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: #0969cb;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.trip-summary-section-heading .trip-summary-inline-icon {
    height: 32px;
    width: 32px;
}

.trip-summary-section-heading strong {
    display: block;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.trip-summary-card-grid {
    display: grid;
    gap: 18px;
}

.trip-summary-card-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trip-summary-card-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trip-summary-metric-card {
    background: #fff;
    border: 2px solid #d7e0ee;
    border-radius: 10px;
    min-width: 0;
    overflow: hidden;
}

.trip-summary-metric-card-large {
    min-height: 202px;
    padding: 24px 12px 18px;
    text-align: center;
}

.trip-summary-metric-icon {
    align-items: center;
    background: #eef3fa;
    border-radius: 50%;
    color: #0969cb;
    display: inline-flex;
    flex: 0 0 92px;
    height: 92px;
    justify-content: center;
    width: 92px;
}

.trip-summary-metric-icon .trip-summary-inline-icon {
    height: 58px;
    width: 58px;
}

.trip-summary-metric-card-large .trip-summary-metric-icon {
    margin-bottom: 16px;
}

.trip-summary-metric-card-large .trip-summary-metric-icon .trip-summary-inline-icon {
    height: 66px;
    width: 66px;
}

.trip-summary-metric-card-large strong {
    color: #0969cb;
    display: block;
    font-size: 52px;
    font-weight: 900;
    line-height: .94;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.trip-summary-metric-card-large > span:last-child {
    color: #071a3a;
    display: block;
    font-size: 26px;
    line-height: 1.15;
    margin-top: 8px;
}

.trip-summary-metric-card-row {
    align-items: center;
    display: flex;
    gap: 18px;
    min-height: 118px;
    padding: 14px;
}

.trip-summary-metric-card-green .trip-summary-metric-icon {
    color: #4c9a2a;
}

.trip-summary-metric-card-row div {
    min-width: 0;
}

.trip-summary-metric-card-row strong {
    color: #4c9a2a;
    display: block;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}

.trip-summary-metric-card-row div > span {
    color: #071a3a;
    display: block;
    font-size: 24px;
    line-height: 1.1;
    margin-top: 8px;
}

.trip-summary-route-panel {
    min-height: 0;
    padding-bottom: 44px;
}

.trip-summary-route-list {
    display: grid;
    gap: 18px;
    padding-left: 4px;
    position: relative;
}

.trip-summary-route-line {
    background: repeating-linear-gradient(to bottom, #cbd5e1 0 12px, transparent 12px 24px);
    bottom: 24px;
    display: block;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 4px;
}

.trip-summary-route-row {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: 58px 162px minmax(0, 1fr);
    min-height: 40px;
    position: relative;
    z-index: 1;
}

.trip-summary-route-marker {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.trip-summary-route-marker-origin,
.trip-summary-route-marker-destination {
    border: 7px solid #4c9a2a;
}

.trip-summary-route-marker-stop {
    border: 7px solid #0969cb;
}

.trip-summary-route-marker span {
    background: currentColor;
    border-radius: 50%;
    color: #0969cb;
    display: block;
    height: 8px;
    width: 8px;
}

.trip-summary-route-marker-origin span {
    color: #4c9a2a;
}

.trip-summary-route-marker-destination {
    background: #4c9a2a;
    border: 0;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.trip-summary-route-marker-destination span {
    background: #fff;
    height: 12px;
    transform: rotate(45deg);
    width: 12px;
}

.trip-summary-route-label {
    color: #0969cb;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
}

.trip-summary-route-value {
    color: #071a3a;
    display: block;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.14;
    overflow-wrap: anywhere;
}

.trip-summary-footer {
    align-items: center;
    background: linear-gradient(90deg, #064da5 0%, #0b75d1 100%);
    color: #fff;
    display: flex;
    gap: 14px;
    height: 78px;
    justify-content: center;
    padding: 0 36px;
}

.trip-summary-footer .trip-summary-inline-icon {
    height: 34px;
    width: 34px;
}

.trip-summary-footer span {
    font-size: 30px;
    line-height: 1;
}

.trip-summary-footer strong {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .estimate-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .estimate-metrics-result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .flight-plan-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .flight-plan-section-body {
        padding: 1rem;
    }

    .flight-section-action {
        width: 100%;
    }

    .estimate-metrics,
    .estimate-metrics-result {
        grid-template-columns: 1fr;
    }

    .table-mobile thead {
        display: none;
    }

    .table-mobile,
    .table-mobile tbody,
    .table-mobile tr,
    .table-mobile td {
        display: block;
        width: 100%;
    }

    .table-mobile tr {
        border: 1px solid var(--kite-border);
        border-radius: 8px;
        margin-bottom: .75rem;
        background: #fff;
        padding: .35rem 0;
    }

    .table-mobile td {
        border: 0;
        padding: .35rem .85rem;
    }

    .table-mobile td::before {
        content: attr(data-label);
        display: block;
        color: var(--kite-muted);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
    }
}
