@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    animation: shimmer 2s infinite linear;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

#mobile-search-toggle,
#mobile-work-orders-filter-trigger {
    display: none;
}

.air-work-orders .work-orders-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0.2rem;
    border: 1px solid var(--air-border-strong);
    border-radius: 0.45rem;
    background: var(--air-surface);
    color: var(--air-ink);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.air-work-orders .work-orders-refresh svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.air-work-orders .work-orders-refresh:hover {
    border-color: #9fc1df;
    background: var(--air-surface-selected);
    color: var(--air-blue);
}

.air-work-orders .work-orders-refresh:focus-visible {
    outline: 2px solid var(--air-blue);
    outline-offset: 2px;
}

.air-work-orders .work-orders-refresh[aria-busy="true"] {
    color: var(--air-blue);
    cursor: wait;
}

.air-work-orders .work-orders-refresh[aria-busy="true"] svg {
    animation: work-orders-refresh-spin 0.8s linear infinite;
}

@keyframes work-orders-refresh-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
    #work-orders-view {
        padding-top: 0.5rem;
    }

    #work-orders-toolbar {
        max-height: 180px;
        overflow: hidden;
        gap: 0.375rem;
        margin-bottom: 0.5rem;
        padding: 0.375rem;
        opacity: 1;
        transform: translateY(0);
        transition: max-height 220ms ease, padding 220ms ease, margin-bottom 220ms ease, border-width 220ms ease, opacity 180ms ease, transform 180ms ease;
        will-change: opacity, transform, max-height;
    }

    #work-orders-toolbar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "search actions";
        align-items: center;
        column-gap: 0.375rem;
        row-gap: 0.375rem;
    }

    #work-orders-search-controls {
        display: contents;
    }

    #work-orders-search {
        grid-area: search;
        display: flex;
        align-items: center;
        width: 2.5rem;
        max-width: 2.5rem;
        min-width: 0;
        transition: width 180ms ease, max-width 180ms ease;
    }

    #mobile-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        color: #64748b;
        background: #fff;
    }

    #work-orders-search > span {
        display: none;
    }

    #global-search-ot {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        max-width: 0;
        height: 2.5rem;
        padding: 0;
        border-width: 0;
        opacity: 0;
        pointer-events: none;
        transition: width 180ms ease, max-width 180ms ease, opacity 180ms ease, padding 180ms ease;
    }

    #work-orders-toolbar.is-search-expanded #work-orders-search {
        width: 100%;
        max-width: 16rem;
    }

    #work-orders-toolbar.is-search-expanded #global-search-ot {
        width: calc(100% - 2.75rem);
        max-width: none;
        padding: 0 0.75rem;
        border-width: 1px;
        opacity: 1;
        pointer-events: auto;
        position: static;
    }

    #work-orders-toolbar.is-search-expanded #mobile-search-toggle {
        border-color: #bfdbfe;
        color: #2563eb;
        background: #eff6ff;
    }

    #work-orders-filter-actions {
        display: none;
    }

    #work-orders-primary-actions {
        grid-area: actions;
        gap: 0.25rem;
    }

    #mobile-work-orders-filter-trigger,
    #refresh-work-orders-btn,
    #open-create-ot-modal-btn-desktop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0;
    }

    #mobile-work-orders-filter-trigger {
        position: relative;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        color: #475569;
        background: #fff;
    }

    #mobile-active-filters-counter:not(.hidden) {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.2rem;
        border: 1px solid #fff;
        border-radius: 999px;
        color: #fff;
        background: #2563eb;
        font-size: 9px;
        font-weight: 900;
    }

    #view-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
    }

    #recent-work-orders-btn {
        display: none;
    }

    #mobile-work-orders-filter-sheet {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .work-orders-filter-sheet-content {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    #mobile-work-orders-filter-handle {
        cursor: grab;
        touch-action: none;
    }

    #kanban-status-nav {
        margin-bottom: 0.375rem;
        padding-block: 0.375rem;
    }

    #kanban-board {
        column-gap: 0.75rem;
        padding-bottom: 0.5rem;
    }

    #work-orders-toolbar.is-table-scroll-hidden {
        max-height: 0;
        padding-block: 0;
        margin-bottom: 0;
        border-width: 0;
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
    }
}

/* Filtros de órdenes: panel inline en escritorio y diálogo inferior en móvil. */
.air-work-orders { container: work-orders-view / inline-size; }
.air-work-orders #work-orders-toolbar-layout { flex-wrap: wrap; align-items: center; }
.air-work-orders #work-orders-search-controls { flex: 1 1 20rem; }

@container work-orders-view (max-width: 75rem) {
    .air-work-orders #work-orders-kpis { display: none !important; }
}

.air-work-orders #work-orders-toolbar {
    margin-bottom: 0.75rem;
}

.air-work-orders .work-orders-filter-trigger {
    border-color: var(--air-border-strong);
    background: var(--air-surface);
    color: var(--air-ink);
}

.air-work-orders .work-orders-filter-trigger:hover,
.air-work-orders .work-orders-filter-trigger[aria-expanded="true"] {
    border-color: #9fc1df;
    background: var(--air-blue-soft);
    color: var(--air-blue);
}

.air-work-orders #filter-modal {
    display: none;
    position: static;
    z-index: auto;
    width: 100%;
    flex: 0 0 auto;
    margin: 0 0 0.75rem;
    color: var(--air-ink);
}

.air-work-orders #filter-modal:not(.hidden) {
    display: block;
}

.air-work-orders .work-orders-filter-dialog {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--air-border);
    border-radius: 0.875rem;
    background: var(--air-surface);
    box-shadow: 0 4px 14px rgb(23 43 77 / 0.07);
}

.air-work-orders .work-orders-filter-header {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--air-border);
    background: var(--air-surface);
}

.air-work-orders .work-orders-filter-eyebrow {
    margin: 0 0 0.125rem;
    color: var(--air-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.air-work-orders .work-orders-filter-header h2 {
    margin: 0;
    color: var(--air-ink-strong);
    line-height: 1.2;
}

.air-work-orders .work-orders-filter-close {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--air-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.air-work-orders .work-orders-filter-close:hover {
    border-color: var(--air-border);
    background: var(--air-surface-subtle);
    color: var(--air-ink-strong);
}

.air-work-orders .work-orders-filter-close:focus-visible,
.air-work-orders .work-orders-filter-trigger:focus-visible {
    outline: 2px solid var(--air-blue);
    outline-offset: 2px;
}

.air-work-orders .work-orders-filter-close-mobile {
    display: none;
}

.air-work-orders .work-orders-filter-body {
    display: flex;
    max-height: min(48vh, 30rem);
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--air-surface-subtle);
    overscroll-behavior: contain;
    container: work-order-filters / inline-size;
}

.air-work-orders .work-orders-filter-group,
.air-work-orders .work-orders-more-filters {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--air-border);
    border-radius: 0.65rem;
    background: var(--air-surface);
}

.air-work-orders .work-orders-filter-group-heading,
.air-work-orders .work-orders-more-filters summary {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--air-border);
    color: var(--air-ink-strong);
}

.air-work-orders .work-orders-filter-group-marker {
    width: 0.2rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--air-blue);
}

.air-work-orders .work-orders-filter-group-heading h3,
.air-work-orders .work-orders-more-filters-title {
    display: block;
    margin: 0;
    color: var(--air-ink-strong);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
}

.air-work-orders .work-orders-filter-group-heading p,
.air-work-orders .work-orders-more-filters-description {
    display: block;
    margin: 0.125rem 0 0;
    color: var(--air-muted);
    font-size: 0.66rem;
    line-height: 1.3;
}

.air-work-orders .work-orders-filter-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding: 0.3rem 0.45rem 0.45rem;
}

.air-work-orders .work-orders-filter-context-grid {
    grid-template-areas: "dates equipment";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.air-work-orders .work-orders-filter-classification-grid {
    grid-template-areas:
        "status status"
        "type priority";
}

.air-work-orders .filter-section {
    position: relative;
    min-width: 0;
    padding: 0.65rem;
}

.air-work-orders .filter-section-dates { grid-area: dates; }
.air-work-orders .filter-section-equipment { grid-area: equipment; z-index: 2; }
.air-work-orders .filter-section-maintenance { grid-area: status; }
.air-work-orders .filter-section-type { grid-area: type; }
.air-work-orders .filter-section-priority { grid-area: priority; }
.air-work-orders .filter-section-priority { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.air-work-orders .filter-section-priority > div { flex: 1 1 12rem; min-width: 0; }

.air-work-orders .filter-section-dates > .rounded-xl.border {
    padding: 0;
    border: 0;
    background: transparent;
}

.air-work-orders .work-orders-more-filters summary {
    cursor: pointer;
    list-style: none;
}

.air-work-orders .work-orders-more-filters summary::-webkit-details-marker {
    display: none;
}

.air-work-orders .work-orders-more-filters summary:hover {
    background: var(--air-surface-subtle);
}

.air-work-orders .work-orders-more-filters summary:focus-visible {
    outline: 2px solid var(--air-blue);
    outline-offset: -2px;
}

.air-work-orders .work-orders-more-filters-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.air-work-orders .work-orders-more-filters-count {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--air-blue-soft);
    color: var(--air-blue);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.air-work-orders .work-orders-more-filters-count.hidden {
    display: none;
}

.air-work-orders .work-orders-more-filters-chevron {
    flex: 0 0 auto;
    margin-left: 0;
    color: var(--air-muted);
    transition: transform 150ms ease;
}

.air-work-orders .work-orders-more-filters[open] .work-orders-more-filters-chevron {
    transform: rotate(180deg);
}

.air-work-orders .work-orders-more-filters[open] > summary {
    border-bottom: 1px solid var(--air-border);
}

.air-work-orders .work-orders-more-filters-grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 0;
    padding: 0.3rem 0.45rem 0.45rem;
}

.air-work-orders .work-orders-followup-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.air-work-orders .work-orders-followup-column-people {
    border-left: 1px solid var(--air-border);
}

.air-work-orders .filter-section .user-filter-container,
.air-work-orders .filter-section-extra > div {
    border-color: var(--air-border-strong);
    background: var(--air-surface);
}

.air-work-orders .filter-section .gmao-input,
.air-work-orders .filter-section .gmao-select {
    border-color: var(--air-border-strong);
    color: var(--air-ink);
}

.air-work-orders .filter-section .gmao-input {
    min-height: 2.625rem;
    border-radius: 0.625rem;
    background: var(--air-surface);
    font-size: 0.75rem;
}

.air-work-orders .filter-section .gmao-input:focus,
.air-work-orders .filter-section .gmao-select:focus {
    border-color: #6ea6d0;
    box-shadow: 0 0 0 3px rgb(23 105 170 / 0.12);
}

.air-work-orders #filter-machine-dropdown-results {
    z-index: 30;
    position: static;
    max-height: 14rem;
    box-shadow: none;
}

.air-work-orders #filter-machine-dropdown-results > button {
    width: 100%;
    text-align: left;
}

.air-work-orders .work-orders-machine-search-icon {
    top: 0;
    bottom: auto;
    height: 2.625rem;
}

:is(.air-work-orders, .air-planning) .work-orders-field-label {
    display: block;
    color: var(--air-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

:is(.air-work-orders, .air-planning) .work-orders-field-help,
:is(.air-work-orders, .air-planning) .work-orders-zone-status {
    margin: 0.4rem 0 0;
    color: var(--air-muted);
    font-size: 0.68rem;
    line-height: 1.5;
}

:is(.air-work-orders, .air-planning) .work-orders-zone-status:empty { display: none; }
:is(.air-work-orders, .air-planning) .work-orders-zone-field { margin-bottom: 1rem; }
.air-work-orders #work-orders-physical-zone-filter { margin-top: 0.4rem; }

:is(.air-work-orders, .air-planning) .work-orders-zone-trigger {
    display: flex;
    width: 100%;
    min-height: 2.625rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--air-border-strong);
    border-radius: 0.625rem;
    background: var(--air-surface);
    color: var(--air-ink);
    font-size: 0.75rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

:is(.air-work-orders, .air-planning) .work-orders-zone-trigger::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

:is(.air-work-orders, .air-planning) .work-orders-zone-trigger[aria-expanded="true"] {
    border-color: #6ea6d0;
    background: var(--air-blue-soft);
}

:is(.air-work-orders, .air-planning) .work-orders-zone-trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
:is(.air-work-orders, .air-planning) .work-orders-zone-trigger:focus-visible { outline: 2px solid var(--air-blue); outline-offset: 2px; }

:is(.air-work-orders, .air-planning) .work-orders-zone-picker {
    max-height: none;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--air-border);
    border-radius: 0.625rem;
    background: var(--air-surface-subtle);
}

:is(.air-work-orders, .air-planning) .work-orders-zone-picker .asset-node-picker-list { max-height: 12rem; }
:is(.air-work-orders, .air-planning) .work-orders-zone-picker input[type="search"] { min-width: 0; }
:is(.air-work-orders, .air-planning) .work-orders-zone-picker button { overflow-wrap: anywhere; }
:is(.air-work-orders, .air-planning) .work-orders-zone-picker [aria-pressed="true"] { background: var(--air-blue-soft); color: var(--air-blue); }
:is(.air-work-orders, .air-planning) .work-orders-zone-picker .asset-node-picker-list button[aria-expanded] { color: var(--air-muted); }

@container work-order-filters (max-width: 42rem) {
    .air-work-orders .work-orders-filter-context-grid { display: block; }
    .air-work-orders .work-orders-more-filters-grid { grid-template-columns: minmax(0, 1fr); }
    .air-work-orders .work-orders-followup-column-people { border-left: 0; }
}

.air-work-orders .work-orders-filter-footer {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--air-border);
    background: var(--air-surface);
}

.air-work-orders .work-orders-filter-hint {
    color: var(--air-muted);
    font-size: 0.68rem;
}

.air-work-orders .work-orders-filter-apply {
    min-height: 2.375rem;
    padding: 0.55rem 1.1rem;
    border-radius: 0.55rem;
    background: var(--air-blue);
    box-shadow: none;
}

.air-work-orders .work-orders-filter-apply:hover {
    background: #12598f;
}

@container work-order-filters (min-width: 68rem) {
    .air-work-orders .work-orders-filter-classification-grid {
        grid-template-areas: "status type priority";
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .air-work-orders #work-orders-toolbar {
        margin-bottom: 0.5rem;
    }

    .air-work-orders #filter-modal {
        position: fixed;
        inset: 0;
        z-index: 90;
        width: auto;
        height: 100%;
        align-items: flex-end;
        justify-content: center;
        margin: 0;
        background: rgb(15 23 42 / 0.42);
        backdrop-filter: blur(2px);
    }

    .air-work-orders #filter-modal:not(.hidden) {
        display: flex;
    }

    .air-work-orders .work-orders-filter-dialog {
        width: min(100%, 48rem);
        max-height: 92dvh;
        border-radius: 1.1rem 1.1rem 0 0;
        box-shadow: 0 -8px 32px rgb(15 23 42 / 0.18);
    }

    .air-work-orders .work-orders-filter-header {
        padding: 0.75rem 1rem;
    }

    .air-work-orders .work-orders-filter-close {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border-color: var(--air-border);
        background: var(--air-surface);
    }

    .air-work-orders .work-orders-filter-close-desktop,
    .air-work-orders .work-orders-filter-close span {
        display: none;
    }

    .air-work-orders .work-orders-filter-close-mobile {
        display: block;
    }

    .air-work-orders .work-orders-filter-body {
        display: flex;
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        overflow-y: auto;
        padding: 0.65rem 0.75rem 1rem;
    }

    .air-work-orders .work-orders-filter-group-grid {
        display: block;
        padding: 0.2rem 0.35rem 0.35rem;
    }

    .air-work-orders .filter-section {
        width: 100%;
        padding: 0.6rem;
    }

    .air-work-orders .work-orders-more-filters-grid {
        display: flex;
        flex-direction: column;
        padding: 0.2rem 0.35rem 0.35rem;
    }

    .air-work-orders .work-orders-followup-column-people {
        border-top: 1px solid var(--air-border);
        border-left: 0;
    }

    .air-work-orders .work-orders-more-filters.is-mobile-always-open summary {
        cursor: default;
    }

    .air-work-orders .work-orders-more-filters.is-mobile-always-open .work-orders-more-filters-chevron {
        display: none;
    }

    .air-work-orders .work-orders-filter-footer {
        padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .air-work-orders .work-orders-filter-hint {
        display: none;
    }

    .air-work-orders .work-orders-filter-apply {
        width: 100%;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #work-orders-toolbar {
        transition: none;
        will-change: auto;
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 600px; }
}
.animate-slide-down {
    animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
}

/* Inline Resolve Panel */
#inline-resolve-panel {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#inline-resolve-panel:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Estilos específicos para el Kanban */
.kanban-col {
    max-height: calc(100vh - 120px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kanban-collapsible-col {
    transition: flex-basis 0.2s ease, width 0.2s ease, min-width 0.2s ease;
}

.kanban-collapse-toggle,
.kanban-collapsed-content {
    display: none;
}

@media (min-width: 768px) {
    .kanban-collapsible-col.is-collapsed {
        flex: 0 0 3.25rem;
        width: 3.25rem;
        min-width: 3.25rem;
        cursor: pointer;
    }

    .kanban-collapsible-col.is-collapsed > .drop-zone {
        display: none;
    }

    .kanban-collapsible-col.is-collapsed > .kanban-column-header {
        flex: 1;
        min-height: 100%;
        padding: 0.75rem 0.5rem;
        border-bottom: 0;
        border-radius: 1rem;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .kanban-collapsible-col.is-collapsed > .kanban-column-header > h3,
    .kanban-collapsible-col.is-collapsed > .kanban-column-header > .count-badge,
    .kanban-collapsible-col.is-collapsed > .kanban-column-header > .kanban-collapse-toggle {
        display: none;
    }

    .kanban-collapsible-col.is-collapsed .kanban-load-more {
        display: none;
    }

    .kanban-collapsed-content {
        align-items: center;
        flex: 1;
        gap: 0.75rem;
        color: #7c3aed;
    }

    .kanban-collapsible-col.is-collapsed .kanban-collapsed-content {
        display: flex;
        flex-direction: column;
    }

    .kanban-collapsible-col[data-status="rejected"] .kanban-collapsed-content {
        color: #dc2626;
    }

    .kanban-collapsed-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        flex: 0 0 auto;
    }

    .kanban-collapsed-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .kanban-collapsed-count {
        font-size: 0.65rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .kanban-expand-icon {
        margin-top: auto;
        font-size: 1.4rem;
        line-height: 1;
        font-weight: 500;
    }

    .kanban-collapsible-col:not(.is-collapsed) .kanban-collapse-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        flex: 0 0 auto;
        border-radius: 0.65rem;
        color: #a855f7;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .kanban-collapsible-col[data-status="rejected"]:not(.is-collapsed) .kanban-collapse-toggle {
        color: #ef4444;
    }

    .kanban-collapse-toggle:hover {
        background: rgba(255, 255, 255, 0.8);
    }
}

/* Mejora minimalista para columnas vacías */
@media (min-width: 768px) {
    /* Eliminado el comprimido de columnas vacías según petición del usuario */
}

.drop-zone {
    transition: background-color 0.2s ease;
}

.kanban-status-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-width: 3.25rem;
    height: 2rem;
    padding: 0 0.65rem;
    border-radius: 0.65rem;
    color: #64748b;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.kanban-status-tab.is-active {
    color: #2563eb;
    background: #eff6ff;
}

.kanban-status-dot {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: #94a3b8;
}

.kanban-status-tab[data-status="assigned"] .kanban-status-dot { background: #3b82f6; }
.kanban-status-tab[data-status="in_progress"] .kanban-status-dot { background: #f59e0b; }
.kanban-status-tab[data-status="finished"] .kanban-status-dot { background: #10b981; }
.kanban-status-tab[data-status="validated"] .kanban-status-dot { background: #a855f7; }
.kanban-status-tab[data-status="rejected"] .kanban-status-dot { background: #ef4444; }

.kanban-status-count {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.kanban-status-nav {
    mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

@media (max-width: 767px) {
    .kanban-column-header {
        height: 4px;
        min-height: 4px;
        padding: 0;
        border-bottom: 0;
        border-radius: 1rem 1rem 0 0;
    }

    .kanban-column-header > * {
        display: none;
    }
}

.kanban-status-tab:active {
    background: #e0f2fe;
}

.drop-zone.drag-over {
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 0.75rem;
}

.kanban-card {
    cursor: grab;
    user-select: none;
    transition: transform 0.1s, box-shadow 0.1s;
}

.kanban-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.kanban-card.is-dragging {
    opacity: 0.5;
    background: #f8fafc;
}

/* Menú contextual móvil */
.context-menu-trigger {
    padding: 8px;
    margin: -8px;
    border-radius: 50%;
}
.context-menu-trigger:active {
    background-color: #f1f5f9;
}

/* Scroll-Spy smooth transition */
#wo-detail-scroll-container button {
    transition: all 0.2s ease-in-out;
}

/* Custom Scrollbar for the detail modal to be more discrete */
#wo-detail-scroll-container::-webkit-scrollbar {
    width: 6px;
}
#wo-detail-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
#wo-detail-scroll-container::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
#wo-detail-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Drag & Drop Operaciones */
.operation-card.dragging {
    opacity: 0.5;
    border: 2px dashed #3b82f6 !important; /* blue-500 */
    cursor: grabbing;
}

.operation-card.drag-over {
    border-top: 3px solid #3b82f6 !important;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Transiciones de Deslizamiento (Swipe/Slide) */
.slide-out-left {
    animation: slideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-out-right {
    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-in-left {
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Ajustes responsive para el modal de operaciones */
#wo-add-op-modal .form-content-wrapper {
    transition: all 0.3s ease;
    will-change: transform, opacity;
}

/* Regla Touch-First: Detectar si el dispositivo soporta hover o no */
@media (hover: none) {
  .touch\:opacity-100 {
    opacity: 1 !important;
  }
}

.air-work-order-detail .operation-check {
  position: relative;
}

.air-work-order-detail .operation-check:focus-visible {
  outline: 2px solid var(--air-blue);
  outline-offset: 3px;
}

.air-work-order-detail .operation-check:disabled:not([aria-busy="true"]) {
  cursor: not-allowed;
  opacity: 0.55;
}

.air-work-order-detail .operation-card[aria-busy="true"] {
  border-color: var(--air-blue);
  opacity: 1;
}

.air-work-order-detail .operation-check[aria-busy="true"] {
  border-color: var(--air-blue);
  background: var(--air-blue-soft);
  color: var(--air-blue);
  cursor: wait;
  opacity: 1;
}

.air-work-order-detail .operation-check[aria-busy="true"] > svg {
  visibility: hidden;
}

.air-work-order-detail .operation-check[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1rem;
  height: 1rem;
  margin: auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: work-orders-refresh-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .air-work-order-detail .operation-check[aria-busy="true"]::after {
    animation: none;
  }
}

/* ── Ficha de OT: cabecera, acción principal, requisitos y pestañas ────────────
   Cada pantalla responde: ¿qué OT es?, ¿en qué estado está?, ¿qué falta? y ¿cuál es la siguiente acción? */
.air-work-order-detail {
  /* Gris de apoyo con contraste AA sobre blanco (≥ 4.5:1); slate-400 (2.6:1) no es legible a 10-12 px. */
  --air-muted-aa: #55657d;
}

/* Las etiquetas pequeñas de la ficha usaban slate-400 (2.6:1): se elevan a un gris con contraste AA. */
.air-work-order-detail .text-slate-400,
.air-op-modal .text-slate-400 {
  color: var(--air-muted-aa, #55657d);
}

.air-work-order-detail .air-wo-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.air-work-order-detail .air-wo-identity {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 0.55rem;
  color: var(--air-muted-aa);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.air-work-order-detail .air-wo-tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
}

.air-work-order-detail .air-wo-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--air-muted-aa);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Los botones ocultos por permisos (historial de cambios, resumen IA) deben seguir ocultos pese al display propio. */
.air-work-order-detail .air-wo-icon-btn.hidden { display: none; }

.air-work-order-detail .air-wo-icon-btn:hover {
  background: var(--air-surface-subtle);
  color: var(--air-ink-strong);
}

.air-work-order-detail .air-wo-icon-btn--accent {
  color: var(--air-blue);
}

.air-work-order-detail .air-wo-icon-btn:focus-visible,
.air-work-order-detail .air-wo-primary:focus-visible,
.air-work-order-detail .air-wo-title:focus-visible {
  outline: 2px solid var(--air-blue);
  outline-offset: 2px;
}

.air-work-order-detail .air-wo-summary-label {
  font-size: 0.75rem;
  font-weight: 650;
}

.air-work-order-detail .air-wo-title {
  margin: 0.125rem 0 0 -0.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.5rem;
  outline: none;
  color: var(--air-ink-strong);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.air-work-order-detail .air-wo-title:hover { background: var(--air-surface-subtle); }
.air-work-order-detail .air-wo-title:empty::before { content: attr(placeholder); color: var(--air-muted-aa); }

.air-work-order-detail .air-wo-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  margin-top: 0.5rem;
}

/* La palabra «Estado» se lee con lector de pantalla; el badge ya incluye su texto visible. */
.air-work-order-detail .air-wo-statuslabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.air-work-order-detail #detail-status-badge {
  min-height: 1.5rem;
  padding: 0 0.625rem;
  font-size: 0.6875rem;
}

.air-work-order-detail #wo-machine-down-badge {
  font-size: 0.6875rem;
  animation: none;
}

.air-work-order-detail .air-wo-incident { margin: 0; padding: 0; }
.air-work-order-detail .air-wo-incident-text {
  margin: 0;
  color: var(--air-muted-aa);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Barra de siguiente paso: progreso, lo que falta y la acción principal siempre juntos. */
.air-work-order-detail .air-wo-actionbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--air-border);
  border-radius: 0.875rem;
  background: var(--air-surface-subtle);
}

.air-work-order-detail .air-wo-actionbar:not(:has(.air-wo-primary:not(.hidden), .air-wo-progress:not(.hidden), .air-wo-nextstep:not(:empty))) {
  display: none;
}

.air-work-order-detail .air-wo-readiness {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
}

.air-work-order-detail .air-wo-progress {
  height: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--air-border);
}

.air-work-order-detail .air-wo-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--air-success);
  transition: width 0.25s ease;
}

.air-work-order-detail .air-wo-nextstep {
  margin: 0;
  color: var(--air-ink);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.air-work-order-detail .air-wo-nextstep:empty { display: none; }
.air-work-order-detail .air-wo-actionbar[data-blocked="true"] .air-wo-nextstep {
  color: var(--air-warning);
  font-weight: 600;
}

.air-work-order-detail .air-wo-primary {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* Acción aún no completable: sigue visible y pulsable, pero lleva a lo que falta en lugar de fallar. */
.air-work-order-detail .air-wo-primary[aria-disabled="true"] {
  border: 1px dashed var(--air-border-strong);
  background: var(--air-surface);
  box-shadow: none;
  color: var(--air-muted-aa);
  filter: none;
}

/* Pestañas reales. El estado seleccionado lo marca aria-selected (también para lectores de pantalla). */
.air-work-order-detail .air-wo-tabs {
  display: flex;
  gap: 0;
  padding: 0 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--air-border);
}

.air-work-order-detail .air-wo-tabs::-webkit-scrollbar { display: none; }

.air-work-order-detail .air-wo-tabs > button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--air-muted-aa);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.air-work-order-detail .air-wo-tabs > button:hover { color: var(--air-ink-strong); }
.air-work-order-detail .air-wo-tabs > button[aria-selected="true"] {
  border-bottom-color: var(--air-blue);
  color: var(--air-blue);
}

.air-work-order-detail .air-wo-tabs > button:focus-visible {
  outline: 2px solid var(--air-blue);
  outline-offset: -3px;
  border-radius: 0.5rem;
}

.air-work-order-detail .air-wo-tab-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface-subtle);
  color: var(--air-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.air-work-order-detail [aria-selected="true"] > .air-wo-tab-badge {
  border-color: transparent;
  background: var(--air-blue-soft);
  color: var(--air-blue);
}

.air-work-order-detail .air-wo-tab-badge[data-state="done"] {
  border-color: transparent;
  background: var(--air-success-soft);
  color: var(--air-success);
}

/* Solo el panel activo se muestra; sin JS (atributo ausente) la ficha seguiría legible como pila. */
[data-detail-tabs-ready="true"] [data-detail-panel]:not([data-active]) {
  display: none;
}

.air-work-order-detail [data-detail-panel] {
  scroll-margin-top: 0.75rem;
}

/* Resumen de operaciones y botón para continuar con la siguiente pendiente. */
.air-work-order-detail .air-wo-ops-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--air-border);
  border-radius: 0.75rem;
  background: var(--air-surface-subtle);
  color: var(--air-ink);
  font-size: 0.8125rem;
}

.air-work-order-detail .air-wo-ops-summary[data-complete="true"] {
  border-color: transparent;
  background: var(--air-success-soft);
  color: var(--air-success);
}

.air-work-order-detail .air-wo-section-action {
  min-height: 2.25rem;
  padding: 0.25rem 0.625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 650;
}

.air-work-order-detail .air-wo-section-action:hover { background: var(--air-surface-subtle); }
.air-work-order-detail .air-wo-section-action:focus-visible { outline: 2px solid var(--air-blue); outline-offset: 1px; }

/* Cuando hay cambios sin guardar el pie flotante no debe tapar el final del contenido. */
.air-work-order-detail[data-dirty="true"] #wo-detail-scroll-container { padding-bottom: 5rem; }

/* Una operación que se acaba de señalar desde «lo que falta». */
.air-work-order-detail .operation-card[data-pointed="true"] {
  border-color: var(--air-blue);
  box-shadow: 0 0 0 3px var(--air-blue-soft);
}

.air-work-order-detail .operation-card:focus-visible {
  outline: 2px solid var(--air-blue);
  outline-offset: 2px;
}

/* Notas y firmas: la sección que importa ahora va primero (firmas al cerrar, notas durante la ejecución). */
.air-review-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

[data-review-focus="signatures"] .air-review-panel > [data-production-actions] { order: -3; }
[data-review-focus="signatures"] .air-review-panel > [data-current-signatures-section] { order: -2; }
[data-review-focus="signatures"] .air-review-panel > details:not([data-legacy]) { order: -1; }

@media (prefers-reduced-motion: reduce) {
  .air-work-order-detail .air-wo-title,
  .air-work-order-detail .air-wo-statusline,
  .air-work-order-detail .air-wo-actionbar,
  .air-work-order-detail .air-wo-progress-fill { transition: none; }
}

/* Detalle OT móvil: pantalla completa, áreas táctiles de 44 px y scroll del contenido. */
@media (max-width: 767px) {
  .air-work-order-detail .hidden {
    display: none !important;
  }

  .air-work-order-detail {
    backdrop-filter: none;
  }

  #wo-detail-modal.air-work-order-detail .air-wo-dialog {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .air-work-order-detail .air-wo-header {
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: 0.625rem;
  }

  .air-work-order-detail .air-wo-title {
    font-size: 1.0625rem;
  }

  .air-work-order-detail .air-wo-icon-btn {
    min-width: 2.75rem;
    height: 2.75rem;
  }

  /* Título, estado y siguiente paso viven al inicio del área desplazable (detail-header-dock.js) y salen con el scroll. */
  .air-work-order-detail .air-wo-collapsible[data-docked="true"] {
    padding: 0.5rem 0.875rem 0.75rem;
    border-bottom: 1px solid var(--air-border, #e2e8f0);
    background: #fff;
  }

  /* Pista de que hay más pestañas a la derecha al desplazar la fila. */
  .air-work-order-detail .air-wo-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
  }

  .air-work-order-detail .air-wo-summary-label {
    display: none;
  }

  /* La acción principal ocupa el ancho completo bajo el texto de lo que falta. */
  .air-work-order-detail .air-wo-actionbar {
    flex-wrap: wrap;
  }

  .air-work-order-detail .air-wo-readiness {
    flex-basis: 100%;
  }

  .air-work-order-detail .air-wo-primary {
    flex: 1 1 auto;
    width: 100%;
  }

  /* El diálogo no encadena el gesto con la página de atrás (iOS: rebote y arrastre de la ventana inferior). */
  html:has(#wo-detail-modal:not(.hidden)),
  body:has(#wo-detail-modal:not(.hidden)) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  #wo-detail-modal.air-work-order-detail {
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  .air-work-order-detail #wo-detail-scroll-container {
    min-height: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  .air-work-order-detail .air-wo-content {
    padding: 0.75rem;
  }

  .air-work-order-detail .air-wo-section-action {
    min-height: 2.75rem;
  }

  .air-work-order-detail .operation-card {
    padding: 0.75rem;
  }

  .air-work-order-detail .operation-card > .flex {
    gap: 0.6rem;
  }

  .air-work-order-detail .operation-check {
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.3rem 0 0 -0.3rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
  }

  .air-work-order-detail .operation-check::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    border: 2px solid var(--air-border-strong);
    border-radius: 50%;
    background: var(--air-surface);
  }

  .air-work-order-detail .operation-check[aria-pressed="true"]::before {
    border-color: var(--air-success);
    background: var(--air-success);
  }

  .air-work-order-detail .operation-check > svg {
    position: relative;
  }

  .air-work-order-detail .operation-check[aria-busy="true"]::before {
    border-color: var(--air-blue);
    background: var(--air-blue-soft);
  }

  .air-work-order-detail #detail-desc-textarea,
  .air-work-order-detail #wo-resolution-notes {
    font-size: 1rem;
    line-height: 1.55;
  }

  .air-work-order-detail #wo-detail-magic-footer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* ── Tarjetas del tablero: teclado, prioridad escrita y acción con nombre ─────────────── */
.kanban-card .kanban-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.kanban-card .kanban-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kanban-card:has(.kanban-open:focus-visible) {
  outline: 2px solid var(--air-blue, #1769aa);
  outline-offset: 2px;
}

.kanban-card .kanban-open:focus-visible { outline: none; }

/* Las etiquetas pequeñas de la tarjeta (slate-300/400) no llegaban a 3:1; se elevan a un gris AA. */
.kanban-card .text-slate-400,
.kanban-card .text-slate-300 { color: #55657d; }

.kanban-priority-tag {
  flex-shrink: 0;
  padding: 0 0.375rem;
  border-radius: 0.375rem;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.625rem;
  font-weight: 700;
}

.kanban-priority-tag[data-priority="1"] { background: #ffebeb; color: #aa0808; }
.kanban-priority-tag[data-priority="2"] { background: #fff1e6; color: #9a3d00; }

.kanban-card .wo-primary-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid #d5dce5;
  border-radius: 0.5rem;
  background: #fff;
  color: #1769aa;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.kanban-card .wo-primary-action:hover { background: #eaf3fb; }
.kanban-card .wo-primary-action:focus-visible { outline: 2px solid #1769aa; outline-offset: 2px; }

/* Contraste AA en la ficha, la vista de operación y el tablero (los grises claros de apoyo no llegaban a 4,5:1). */
.air-work-order-detail,
.air-op-modal {
  --air-muted: #55657d;
  --air-muted-light: #66758c;
}

/* Las especialidades llegaban a 8 px en móvil; se mantiene un mínimo legible. */
.air-work-order-detail #detail-skills-container > div { font-size: 0.6875rem; }

.kanban-column-header .text-amber-600 { color: #92400e; }
.kanban-column-header .text-emerald-600 { color: #166534; }
.kanban-column-header .text-blue-600 { color: #1d4ed8; }

.kanban-card .kanban-assignee {
  margin: 0;
  overflow: hidden;
  color: #334155;
  font-size: 0.6875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card .kanban-assignee-empty { color: #55657d; font-weight: 500; }

/* ===== Atajos de filtro: en la misma línea que el buscador y los filtros ===== */
.wo-quick-filters {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
}

.wo-chip {
    flex: none;
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.wo-chip:hover { background: #f8fafc; border-color: #cbd5e1; }
.wo-chip:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.wo-chip[aria-pressed="true"] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* Selectores de habilidad y grupo del panel avanzado: mismo lenguaje que los atajos. */
.wo-multi-pill {
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.wo-multi-pill:hover { background: #f8fafc; border-color: #cbd5e1; }
.wo-multi-pill:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.wo-multi-pill[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Hora de la última carga, discreta junto al botón de actualizar (solo escritorio). */
.wo-last-updated {
    display: none;
    margin: 0 0.25rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #55657d;
    white-space: nowrap;
}

.air-work-orders .wo-wall-toggle { display: none; }
.air-work-orders .wo-wall-toggle[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }

/* La actualización automática y el modo panel solo existen en pantallas grandes. */
@media (min-width: 1024px) {
    .wo-last-updated { display: inline; }
    .air-work-orders .wo-wall-toggle { display: inline-flex; }
}

.wo-kpi[aria-pressed="true"] {
    box-shadow: 0 0 0 2px currentColor;
}

/* Modo panel: solo el tablero, sin menú lateral ni cabecera global. */
body.wo-wall-mode #main-sidebar,
body.wo-wall-mode #main-sidebar-overlay,
body.wo-wall-mode #global-header,
body.wo-wall-mode #mobile-header {
    display: none !important;
}

body.wo-wall-mode #work-orders-view {
    padding-top: 0.75rem;
}

/* Finalizada, Validada y Rechazada son las columnas más pobladas: tarjetas bajas. */
.kanban-card[data-status="finished"],
.kanban-card[data-status="validated"],
.kanban-card[data-status="rejected"] {
    padding: 0.5rem 0.625rem;
}

.kanban-card[data-status="finished"] .kanban-description,
.kanban-card[data-status="validated"] .kanban-description,
.kanban-card[data-status="rejected"] .kanban-description,
.kanban-card[data-status="finished"] .kanban-snapshot,
.kanban-card[data-status="validated"] .kanban-snapshot,
.kanban-card[data-status="rejected"] .kanban-snapshot,
.kanban-card[data-status="finished"] .kanban-assignee,
.kanban-card[data-status="validated"] .kanban-assignee,
.kanban-card[data-status="rejected"] .kanban-assignee {
    display: none;
}

.kanban-card[data-status="finished"] h3,
.kanban-card[data-status="validated"] h3,
.kanban-card[data-status="rejected"] h3 {
    -webkit-line-clamp: 1;
}

/* ── Ficha de OT para el técnico en móvil ────────────────────────────────────────────────────────
   Tres pestañas grandes, cronómetro y acción principal en una barra inferior, operaciones que se rellenan
   desde la propia lista y suma de tiempo de un toque. En PC nada de esto cambia salvo la suma rápida. */

/* Suma rápida de tiempo (también en PC: es un atajo de la misma imputación manual). */
.air-time-quick {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}
.air-time-quick:not(.hidden) { display: block; }
.air-time-quick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.air-time-quick-label { color: #55657d; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.air-time-total { padding: 0.125rem 0.5rem; border-radius: 0.5rem; background: #f1f5f9; color: #0f2540; font-size: 0.875rem; font-weight: 800; }
.air-time-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.air-time-quick-grid button {
  min-height: 3rem;
  border: 1.5px solid #bfdbfe;
  border-radius: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 800;
}
.air-time-quick-grid button:active { background: #dbeafe; }
.air-time-quick-grid button:disabled { opacity: 0.5; }
.air-time-quick-hint { margin-top: 0.5rem; color: #55657d; font-size: 0.6875rem; line-height: 1.35; }

/* Solo móvil: por defecto estos elementos no existen en pantallas anchas. */
.air-wo-mtabs,
.air-wo-mbar,
.air-wo-extra-toggle,
.air-wo-waitbanner,
.air-wo-desc-toggle,
.op-quick { display: none; }

@media (max-width: 767px) {
  /* Pestañas: tres, a todo el ancho, sin desplazamiento lateral. */
  .air-work-order-detail .air-wo-tabs { display: none; }
  .air-work-order-detail .air-wo-mtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--air-border, #e2e8f0);
    background: #fff;
  }
  .air-wo-mtabs > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    height: 3rem;
    padding: 0 0.25rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--air-muted-aa, #475569);
    font-size: 0.9375rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .air-wo-mtabs > button[aria-selected="true"] {
    border-bottom-color: var(--air-blue, #1d4ed8);
    color: var(--air-blue, #1d4ed8);
    font-weight: 700;
  }

  /* Barra inferior: cronómetro + acción principal. */
  .air-wo-mbar:not([hidden]) {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem max(0.875rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--air-border, #e2e8f0);
    background: #fff;
    box-shadow: 0 -6px 18px rgba(15, 37, 64, 0.08);
    z-index: 30;
  }
  .air-wo-mbar-timer:not([hidden]) {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 7.25rem;
    height: 3.25rem;
    padding: 0 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.875rem;
    background: #fff;
    color: #0f2540;
    cursor: pointer;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .air-wo-mbar-timer[data-running="true"] { border-color: #16a34a; background: #ecfdf3; color: #166534; }
  .air-wo-mbar-timer:active { transform: scale(0.98); }
  .air-wo-mbar[data-single="true"] .air-wo-mbar-timer { flex: 1; }
  .air-wo-mbar-primary:not([hidden]) {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 3.25rem;
    border: 0;
    border-radius: 0.875rem;
    background: var(--air-blue, #1d4ed8);
    color: #fff;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
  }
  .air-wo-mbar-primary:active { filter: brightness(0.92); }
  /* Cierre bloqueado por operaciones pendientes: sigue pulsable (lleva a lo que falta) pero no parece listo. */
  .air-wo-mbar-primary[data-blocked="true"] { background: #e2e8f0; color: #334155; }

  /* La acción principal vive en la barra inferior; la de la cabecera solo sirve de fuente. */
  .air-work-order-detail .air-wo-primary { display: none !important; }

  /* «Datos de la orden» plegados: el técnico trabaja sobre operaciones y material. */
  .air-wo-extra-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    padding: 0 1rem;
    border: 0;
    border-top: 1px solid #eef2f7;
    background: #fff;
    color: #334155;
    font-size: 0.9375rem;
    font-weight: 650;
  }
  .air-wo-extra-toggle > i { transition: transform 0.15s; }
  .air-wo-extra-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
  #wo-info-extra[data-collapsed="true"] { display: none; }

  /* Descripción plegada a tres líneas con «Ver más». */
  #wo-desc-block[data-clamped="true"] #detail-desc-textarea {
    max-height: 4.75rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
  }
  .air-wo-desc-toggle:not(.hidden) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--air-blue, #1d4ed8);
    font-size: 0.875rem;
    font-weight: 700;
  }

  /* Espera de material: aviso con salida directa. */
  .air-wo-waitbanner:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #fcd34d;
    border-radius: 0.75rem;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .air-wo-waitbanner button {
    flex: none;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: 0.625rem;
    background: #92400e;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
  }
  .air-wo-waitbanner button[hidden] { display: none; }

  /* Operaciones: filas limpias; las etiquetas de herramientas y seguridad se consultan al abrirla. */
  .air-work-order-detail .operation-card .op-tags { display: none; }
  .air-work-order-detail .operation-card { min-height: 4rem; }
  .air-work-order-detail .operation-card[data-status="completed"] { background: #f8fafc; }

  /* Medición o elección rápida: sin abrir la vista de la operación. */
  .op-quick {
    /* El enlace de la tarjeta se estira sobre toda ella (::after): los controles rápidos van por encima. */
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
  }
  .operation-card[aria-busy="true"] .op-quick { opacity: 0.55; pointer-events: none; }
  .op-quick-input {
    flex: 1;
    min-width: 0;
    height: 3rem;
    padding: 0 0.875rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #fff;
    color: #0f2540;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .op-quick-input:focus { border-color: var(--air-blue, #1d4ed8); box-shadow: 0 0 0 3px var(--air-blue-soft, #dbeafe); outline: none; }
  .op-quick-ok {
    height: 3rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: var(--air-blue, #1d4ed8);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
  }
  .op-quick-choice {
    flex: 1 1 auto;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #fff;
    color: #0f2540;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
  }
  .op-quick-choice:active { border-color: var(--air-blue, #1d4ed8); background: #eff6ff; }

  /* Tiempo: botones grandes, lo habitual arriba. */
  #seccion-imputacion #time-toggle-btn { min-height: 3.25rem; font-size: 1rem; }
  #seccion-imputacion #time-manual-trigger { min-height: 3rem; font-size: 0.875rem; }
  .air-time-quick-grid button { min-height: 3.25rem; font-size: 1rem; }
}

/* ── Imputar material: − / + y operación opcional ───────────────────────────────────────────────── */
.air-material-stepper {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  gap: 0.5rem;
  align-items: stretch;
}
.air-material-stepper button {
  min-height: 2.75rem;
  border: 1.5px solid var(--air-border-strong, #cbd5e1);
  border-radius: 0.75rem;
  background: #fff;
  color: #0f2540;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.air-material-stepper button:active { background: #eff6ff; border-color: var(--air-blue, #1d4ed8); }
.air-material-stepper input[type="number"] {
  text-align: center;
  font-size: 1.25rem !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  -moz-appearance: textfield;
  appearance: textfield;
}
.air-material-stepper input[type="number"]::-webkit-outer-spin-button,
.air-material-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.air-material-op-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--air-blue, #1d4ed8);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
}
.air-material-op-toggle.hidden { display: none; }

@media (max-width: 767px) {
  /* Hoja inferior: lo imprescindible a la vista y la acción grande. */
  .air-material-modal .air-material-submit { min-height: 3.25rem; font-size: 0.9375rem !important; }
  .air-material-modal .air-material-cancel { min-height: 3.25rem; }
  .air-material-modal .air-material-footer { grid-template-columns: minmax(5.5rem, 0.6fr) minmax(0, 1.4fr); }
  .air-material-modal .air-material-control { min-height: 3rem; font-size: 1rem !important; }
  .air-material-stepper { grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; }
  .air-material-stepper button { min-height: 3.25rem; }
  .air-material-stepper input[type="number"] { min-height: 3.25rem; font-size: 1.5rem !important; }
  /* «+ Añadir» de la pestaña Material: botón de verdad, no un enlace. */
  #seccion-materiales #add-material-tab-btn {
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.625rem;
    background: var(--air-blue, #1d4ed8);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
  }
  /* El título de una operación no pasa por debajo de su insignia de tipo. */
  .air-work-order-detail .operation-card .operation-open {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding-right: 2.5rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Cierre de la OT ─────────────────────────────────────────────────────────────────────────────── */
.air-dictate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.625rem;
  background: #fff;
  color: #0f2540;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
}
.air-dictate-btn.hidden { display: none; }
.air-dictate-btn[data-listening="true"] { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }

@media (max-width: 767px) {
  /* El cierre ocupa toda la pantalla: notas, categoría y «Guardar y finalizar» siempre al alcance. */
  #inline-finish-panel:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    animation: none;
  }
  #inline-finish-panel:not(.hidden) > .mb-4 {
    flex: none;
    margin: 0;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
  }
  #inline-finish-mount {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1rem 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #inline-finish-form { display: flex; flex-direction: column; min-height: 100%; }
  #inline-finish-form > div:last-child {
    position: sticky;
    bottom: 0;
    margin: auto -1rem 0;
    padding: 0.75rem 1rem max(0.875rem, env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(15, 37, 64, 0.08);
  }
  #inline-finish-submit-btn { flex: 1; height: 3.25rem !important; font-size: 1rem !important; letter-spacing: 0 !important; text-transform: none !important; }
  #inline-finish-cancel-btn { height: 3.25rem !important; letter-spacing: 0 !important; text-transform: none !important; }
  #inline-finish-notes { min-height: 7.5rem; font-size: 1rem; line-height: 1.5; }
  #inline-finish-category,
  #inline-finish-zone,
  #inline-finish-subcategory { min-height: 3.25rem; font-size: 1rem; }
  /* Los títulos de las operaciones pueden ocupar dos líneas: ya no se cortan. */
  .air-work-order-detail .operation-card h3 { overflow: visible; text-overflow: clip; white-space: normal; }
  .air-work-order-detail .operation-card .operation-open { padding-right: 0; white-space: normal; text-overflow: clip; overflow: visible; }
}

/* ── Navegación inferior (móvil) ─────────────────────────────────────────────────────────────────── */
.mobile-nav { display: none; }

@media (max-width: 767px) {
  .mobile-nav:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: calc(4.25rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(15, 37, 64, 0.06);
  }
  body.mobile-nav-hidden .mobile-nav { display: none; }
  /* Planificación: «Opciones» y «Añadir» (de la propia vista) ocupan el centro; los accesos se quedan en los extremos. */
  body[data-mobile-nav-view="planning"] .mobile-nav:not([hidden]) { display: flex; justify-content: space-between; }
  body[data-mobile-nav-view="planning"] .mobile-nav-item { flex: 0 0 4.5rem; }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .mobile-nav-item[aria-current="page"] { color: #1d4ed8; font-weight: 700; }
  .mobile-nav-item:active { background: #f1f5f9; }
  .mobile-nav-item:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -4px; border-radius: 0.5rem; }
  /* La creación pasa a la barra inferior; el botón original sigue conectado al formulario. */
  body[data-mobile-nav-create="new-order"] #open-create-ot-modal-btn-desktop,
  body[data-mobile-nav-create="new-incident"] #btn-new-incident-op { display: none !important; }
  body.has-mobile-nav:not(.mobile-nav-hidden) #content-area { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}

/* ── Lista de órdenes para el técnico (móvil) ────────────────────────────────────────────────────
   Atajos y acciones en una sola fila, pestañas de estado que caben sin desplazarse y tarjetas sueltas sobre el
   fondo: estado y menú arriba, título grande, equipo/tipo/prioridad, responsable, detalle y una sola acción grande.
   Los elementos propios de móvil de la tarjeta (cabecera, iconos, línea de detalle) no se ven en escritorio. */
.kanban-card-head,
.kanban-card .kanban-ico,
.kanban-card .kanban-detail-line,
.kanban-card .kanban-foot-dot { display: none; }

.kanban-card-popover {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 37, 64, 0.18);
}
.kanban-card-popover button {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #0f2540;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}
.kanban-card-popover button:hover,
.kanban-card-popover button:focus-visible { background: #eef4fa; outline: none; }

@media (max-width: 767px) {
  /* Fila de atajos + acciones, sin tarjeta alrededor. */
  #work-orders-toolbar { padding: 0; border: 0; background: transparent; box-shadow: none; }
  #work-orders-toolbar-layout {
    grid-template-areas: "search search" "chips actions";
    row-gap: 0.5rem;
  }
  #wo-quick-filters { grid-area: chips; min-width: 0; overflow-x: auto; }
  /* Mismo tamaño y forma que el botón de filtros. */
  .air-work-orders #refresh-work-orders-btn { width: 2.5rem; height: 2.5rem; border-color: #e2e8f0; border-radius: 0.75rem; background: #fff; color: #475569; }
  #wo-quick-filters .wo-chip { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; }
  #wo-quick-filters .wo-chip[aria-pressed="true"] { border-color: var(--air-blue, #1769aa); background: var(--air-blue, #1769aa); }
  /* Búsqueda y vista viven en la hoja «Filtros y opciones»; la búsqueda abierta ocupa su propia fila. */
  #work-orders-toolbar:not(.is-search-expanded) #work-orders-search,
  #work-orders-toolbar:not(.is-search-expanded) #mobile-search-toggle,
  #view-toggle-btn,
  #open-create-ot-modal-btn-desktop { display: none; }
  #work-orders-toolbar.is-search-expanded #work-orders-search { grid-column: 1 / -1; width: 100%; max-width: none; gap: 0.375rem; }
  #work-orders-toolbar.is-search-expanded #global-search-ot { flex: 1; width: auto; height: 2.5rem; font-size: 1rem; }

  /* Estados: una tarjeta con seis casillas; la activa va rellena. */
  #kanban-status-nav {
    overflow: visible;
    padding: 0.375rem;
    border-color: #e2e8f0;
    border-radius: 1rem;
    mask-image: none;
    -webkit-mask-image: none;
  }
  #kanban-status-nav > div { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; width: 100%; min-width: 0 !important; }
  .kanban-status-tab {
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    height: 3rem;
    padding: 0.25rem 0;
    border-radius: 0.625rem;
    color: #475569;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }
  .kanban-status-tab .kanban-status-dot { display: none; }
  .kanban-status-count { color: #0f2540; font-size: 1.0625rem; font-weight: 800; line-height: 1; }
  .kanban-status-tab.is-active { background: var(--air-blue, #1769aa); color: #fff; }
  .kanban-status-tab.is-active .kanban-status-count { color: #fff; }

  /* Una columna visible a la vez, sin marco ni título: las tarjetas van sueltas sobre el fondo. */
  #kanban-board { gap: 0.75rem !important; }
  #kanban-board > .kanban-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  #kanban-board > .kanban-col > .kanban-column-header { display: none !important; }
  #kanban-board > .kanban-col > .drop-zone { padding: 0.125rem 0.125rem 1rem; }

  .kanban-card { padding: 0.75rem 0.75rem 0.625rem; border-color: #e2e8f0; border-radius: 0.875rem; }
  .kanban-card > .pl-2 { padding-left: 0.375rem; }

  /* Cabecera: estado a la izquierda; aviso, número de OT y menú a la derecha. */
  .kanban-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
  .kanban-card-status {
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #475569;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .kanban-card-status-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #94a3b8; }
  .kanban-card-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kanban-card-status[data-status="assigned"] { color: #1d4ed8; }
  .kanban-card-status[data-status="assigned"] .kanban-card-status-dot { background: #3b82f6; }
  .kanban-card-status[data-status="in_progress"] { color: #92400e; }
  .kanban-card-status[data-status="in_progress"] .kanban-card-status-dot { background: #f59e0b; }
  .kanban-card-status[data-status="finished"] { color: #166534; }
  .kanban-card-status[data-status="finished"] .kanban-card-status-dot { background: #10b981; }
  .kanban-card-status[data-status="validated"] { color: #6b21a8; }
  .kanban-card-status[data-status="validated"] .kanban-card-status-dot { background: #a855f7; }
  .kanban-card-status[data-status="rejected"] { color: #b91c1c; }
  .kanban-card-status[data-status="rejected"] .kanban-card-status-dot { background: #ef4444; }
  .kanban-card-code { flex: none; color: #55657d; font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kanban-card .kanban-code,
  .kanban-card .kanban-flag-desktop,
  .kanban-card .kanban-state,
  .kanban-card .kanban-description,
  .kanban-card .kanban-snapshot,
  .kanban-card .kanban-assignee:has(.kanban-assignee-empty) { display: none; }
  .kanban-flag-mobile { display: inline-flex; flex: none; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.5rem; }
  .kanban-card .kanban-card-menu {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.5rem -0.5rem -0.5rem -0.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #55657d;
    cursor: pointer;
  }
  .kanban-card .kanban-card-menu:active { background: #f1f5f9; }

  .kanban-card h3 { padding-right: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: #0f2540; }
  .kanban-card .kanban-meta { gap: 0.5rem; margin-top: 0.125rem; margin-bottom: 0.375rem; padding-right: 0; }
  .kanban-card .kanban-machine { color: #475569; font-size: 0.625rem; font-weight: 600; letter-spacing: 0; }
  .kanban-card .kanban-type { padding-left: 0.5rem; color: #475569; font-size: 0.625rem; font-weight: 500; }
  .kanban-card .kanban-priority-tag { padding: 0.0625rem 0.4rem; font-size: 0.625rem; }

  .kanban-card .kanban-ico { display: inline-block; flex: none; color: #55657d; }
  .kanban-card .kanban-assignee,
  .kanban-card .kanban-detail-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    overflow: hidden;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
  }
  .kanban-card .kanban-assignee > span,
  .kanban-card .kanban-detail-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kanban-card .kanban-detail-line.is-state > span { font-weight: 700; }

  .kanban-card .kanban-foot { margin-top: 0.25rem; padding-top: 0.5rem; border-top-color: #e8edf3; }
  .kanban-card .kanban-foot-meta { gap: 0.375rem; color: #475569; font-size: 0.6875rem; font-weight: 500; }
  .kanban-card .kanban-foot-meta > span { font-weight: 500; color: #475569; }
  .kanban-card .kanban-foot-dot { display: inline; }
  .kanban-card .wo-primary-action {
    min-height: 2.5rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0.625rem;
    background: var(--air-blue, #1769aa);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
  }
  .kanban-card .wo-primary-action:hover { background: #12588f; }
  .kanban-card .wo-primary-action svg { display: none; }
}

/* ── Catálogo en móvil: solo consulta de almacén ─────────────────────────────────────────────────────
   Exportar, importar, plantilla y alta de materiales son trabajo de PC; en el móvil se busca y se ve el stock. */
@media (max-width: 767px) {
  .air-catalog .air-catalog-toolbar > div.air-catalog-actions:last-child,
  .air-catalog .inventory-transfer-guide { display: none !important; }
}

/* Barra inferior: creación con el mismo tamaño y un acento azul discreto. */
.mobile-nav-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-nav-item[data-primary="true"] { color: #1d4ed8; font-weight: 700; }
.mobile-nav-item[data-primary="true"] > svg { stroke-width: 2; }