/* /Pages/Documentation/Documentation.razor.rz.scp.css */
.documentation-page[b-bl2rogjktf] {
    --docs-canvas: #111b28;
    --docs-surface: #172434;
    --docs-surface-raised: #1c2b3d;
    --docs-inset: #0d1723;
    --docs-border: rgba(148, 163, 184, 0.16);
    --docs-border-emphasis: rgba(56, 189, 248, 0.42);
    --docs-text: #f8fafc;
    --docs-text-secondary: #cbd5e1;
    --docs-text-muted: #7f91a7;
    --docs-accent: #38bdf8;
    --docs-accent-soft: rgba(56, 189, 248, 0.11);
    min-height: 100vh;
    color: var(--docs-text);
    background: var(--docs-canvas);
}

.documentation-header[b-bl2rogjktf] {
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(150px, 0.6fr) minmax(220px, 1fr) minmax(280px, 0.9fr);
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--docs-border);
    background: var(--docs-surface);
}

.back-link[b-bl2rogjktf] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--docs-text-secondary);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.back-link:hover[b-bl2rogjktf],
.back-link:focus-visible[b-bl2rogjktf] {
    color: var(--docs-accent);
}

.back-link span:first-child[b-bl2rogjktf] {
    font-size: 20px;
}

.header-copy[b-bl2rogjktf] {
    min-width: 0;
}

.header-eyebrow[b-bl2rogjktf] {
    display: block;
    margin-bottom: 2px;
    color: var(--docs-accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.header-copy h1[b-bl2rogjktf] {
    margin: 0;
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -0.025em;
}

.search-box[b-bl2rogjktf] {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--docs-border);
    border-radius: 8px;
    background: var(--docs-inset);
}

.search-box:focus-within[b-bl2rogjktf] {
    border-color: var(--docs-border-emphasis);
    box-shadow: 0 0 0 3px var(--docs-accent-soft);
}

.search-box svg[b-bl2rogjktf] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--docs-text-muted);
    stroke-linecap: round;
    stroke-width: 1.5;
}

.search-box input[b-bl2rogjktf] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--docs-text);
    background: transparent;
    font: inherit;
    font-size: 13px;
}

.search-box input[b-bl2rogjktf]::placeholder {
    color: var(--docs-text-muted);
}

.documentation-workspace[b-bl2rogjktf] {
    height: calc(100vh - 84px);
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.catalog-panel[b-bl2rogjktf] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--docs-border);
    background: var(--docs-surface);
}

.catalog-summary[b-bl2rogjktf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px 12px;
    color: var(--docs-text-secondary);
    font-size: 11px;
}

.catalog-summary small[b-bl2rogjktf] {
    color: var(--docs-text-muted);
}

.category-list[b-bl2rogjktf] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--docs-border);
    scrollbar-width: thin;
}

.category-button[b-bl2rogjktf] {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--docs-text-muted);
    background: transparent;
    font-size: 11px;
    cursor: pointer;
}

.category-button small[b-bl2rogjktf] {
    min-width: 19px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.09);
    text-align: center;
}

.category-button:hover[b-bl2rogjktf],
.category-button:focus-visible[b-bl2rogjktf],
.category-button.is-active[b-bl2rogjktf] {
    border-color: var(--docs-border);
    color: var(--docs-text);
    background: var(--docs-surface-raised);
}

.category-button.is-active[b-bl2rogjktf] {
    border-color: var(--docs-border-emphasis);
    color: var(--docs-accent);
}

.document-list[b-bl2rogjktf] {
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.document-card[b-bl2rogjktf] {
    width: 100%;
    display: grid;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.document-card + .document-card[b-bl2rogjktf] {
    margin-top: 3px;
}

.document-card:hover[b-bl2rogjktf],
.document-card:focus-visible[b-bl2rogjktf] {
    background: var(--docs-surface-raised);
}

.document-card.is-active[b-bl2rogjktf] {
    border-color: var(--docs-border-emphasis);
    background: var(--docs-accent-soft);
}

.document-type[b-bl2rogjktf],
.document-status[b-bl2rogjktf] {
    color: var(--docs-text-muted);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.document-card strong[b-bl2rogjktf] {
    color: var(--docs-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.document-description[b-bl2rogjktf] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--docs-text-secondary);
    font-size: 11px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.document-status[b-bl2rogjktf] {
    color: var(--docs-accent);
    letter-spacing: 0.06em;
}

.catalog-empty[b-bl2rogjktf] {
    display: grid;
    gap: 5px;
    padding: 34px 18px;
    color: var(--docs-text-muted);
    text-align: center;
}

.catalog-empty strong[b-bl2rogjktf] {
    color: var(--docs-text-secondary);
}

.reader-panel[b-bl2rogjktf] {
    min-width: 0;
    overflow-y: auto;
    background: var(--docs-canvas);
}

.reader-heading[b-bl2rogjktf] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px clamp(24px, 5vw, 72px);
    border-bottom: 1px solid var(--docs-border);
    background: rgba(17, 27, 40, 0.96);
    backdrop-filter: blur(12px);
}

.reader-heading span[b-bl2rogjktf] {
    color: var(--docs-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reader-heading h2[b-bl2rogjktf] {
    margin: 4px 0 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 680;
    letter-spacing: -0.03em;
}

.reader-heading .access-badge[b-bl2rogjktf] {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--docs-border-emphasis);
    border-radius: 5px;
    color: var(--docs-accent);
    background: var(--docs-accent-soft);
}

.document-content[b-bl2rogjktf] {
    width: min(900px, calc(100% - 48px));
    margin: 0 auto;
    padding: 44px 0 96px;
    color: var(--docs-text-secondary);
    font-size: 15px;
    line-height: 1.75;
}

.document-content[b-bl2rogjktf]  .doc-article > :first-child {
    margin-top: 0;
}

.document-content[b-bl2rogjktf]  h1,
.document-content[b-bl2rogjktf]  h2,
.document-content[b-bl2rogjktf]  h3,
.document-content[b-bl2rogjktf]  h4 {
    color: var(--docs-text);
    font-weight: 680;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.document-content[b-bl2rogjktf]  h1 {
    margin: 0 0 26px;
    font-size: 34px;
}

.document-content[b-bl2rogjktf]  h2 {
    margin: 42px 0 14px;
    padding-top: 8px;
    font-size: 23px;
}

.document-content[b-bl2rogjktf]  h3 {
    margin: 28px 0 10px;
    font-size: 18px;
}

.document-content[b-bl2rogjktf]  a {
    color: var(--docs-accent);
    text-underline-offset: 3px;
}

.document-content[b-bl2rogjktf]  blockquote {
    margin: 24px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--docs-accent);
    color: var(--docs-text-secondary);
    background: var(--docs-accent-soft);
}

.document-content[b-bl2rogjktf]  code {
    padding: 2px 5px;
    border: 1px solid var(--docs-border);
    border-radius: 4px;
    color: #bae6fd;
    background: var(--docs-inset);
    font-size: 0.88em;
}

.document-content[b-bl2rogjktf]  pre {
    overflow-x: auto;
    padding: 17px;
    border: 1px solid var(--docs-border);
    border-radius: 8px;
    background: var(--docs-inset);
}

.document-content[b-bl2rogjktf]  pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.document-content[b-bl2rogjktf]  table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    font-size: 13px;
}

.document-content[b-bl2rogjktf]  th,
.document-content[b-bl2rogjktf]  td {
    padding: 10px 12px;
    border: 1px solid var(--docs-border);
    text-align: left;
    vertical-align: top;
}

.document-content[b-bl2rogjktf]  th {
    color: var(--docs-text);
    background: var(--docs-surface-raised);
}

.document-content[b-bl2rogjktf]  img {
    max-width: 100%;
    border-radius: 8px;
}

.page-state[b-bl2rogjktf],
.reader-state[b-bl2rogjktf] {
    min-height: calc(100vh - 84px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 9px;
    padding: 32px;
    color: var(--docs-text-muted);
    text-align: center;
}

.reader-state[b-bl2rogjktf] {
    min-height: 100%;
}

.page-state h2[b-bl2rogjktf],
.reader-state h2[b-bl2rogjktf] {
    margin: 8px 0 0;
    color: var(--docs-text);
    font-size: 21px;
}

.page-state p[b-bl2rogjktf],
.reader-state p[b-bl2rogjktf] {
    max-width: 460px;
    margin: 0;
}

.state-spinner[b-bl2rogjktf] {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(148, 163, 184, 0.18);
    border-top-color: var(--docs-accent);
    border-radius: 50%;
    animation: docs-spin-b-bl2rogjktf 0.8s linear infinite;
}

.state-icon[b-bl2rogjktf],
.reader-glyph[b-bl2rogjktf] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--docs-border-emphasis);
    border-radius: 8px;
    color: var(--docs-accent);
    background: var(--docs-accent-soft);
    font-weight: 760;
}

.page-state-error .state-icon[b-bl2rogjktf],
.reader-state-error .state-icon[b-bl2rogjktf] {
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
}

.state-actions[b-bl2rogjktf] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.state-actions button[b-bl2rogjktf],
.state-actions a[b-bl2rogjktf] {
    padding: 8px 12px;
    border: 1px solid var(--docs-border);
    border-radius: 6px;
    color: var(--docs-text);
    background: var(--docs-surface-raised);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

@keyframes docs-spin-b-bl2rogjktf {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 860px) {
    .documentation-header[b-bl2rogjktf] {
        grid-template-columns: auto 1fr;
        gap: 10px 18px;
        padding: 12px 18px;
    }

    .search-box[b-bl2rogjktf] {
        grid-column: 1 / -1;
    }

    .documentation-workspace[b-bl2rogjktf] {
        height: auto;
        min-height: calc(100vh - 126px);
        grid-template-columns: 1fr;
    }

    .catalog-panel[b-bl2rogjktf] {
        max-height: 44vh;
        border-right: 0;
        border-bottom: 1px solid var(--docs-border);
    }

    .reader-panel[b-bl2rogjktf] {
        min-height: 56vh;
    }

    .reader-heading[b-bl2rogjktf] {
        position: static;
        padding: 18px 20px;
    }

    .document-content[b-bl2rogjktf] {
        width: calc(100% - 36px);
        padding-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .state-spinner[b-bl2rogjktf] {
        animation: none;
    }
}
/* /Pages/Home/Components/AssetCard.razor.rz.scp.css */
/* AssetCard.razor.css - Styles matching Figma design (responsive 3-column) */

.asset-card[b-ho3s8n2ruk] {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 6px;
    box-sizing: border-box;
}

.asset-card:not(.menu-open):hover[b-ho3s8n2ruk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.asset-card.menu-open[b-ho3s8n2ruk] {
    z-index: 100;
}

/* Image Container - takes up most of the card */
.asset-image-container[b-ho3s8n2ruk] {
    position: relative;
    width: 100%;
    height: 60%;
    overflow: hidden;
    border-radius: 14px;
    background: #2a2a2a;
}

.asset-image[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.asset-image.loaded[b-ho3s8n2ruk] {
    opacity: 1;
}

/* Skeleton placeholder with shimmer animation */
.asset-image-skeleton[b-ho3s8n2ruk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    overflow: hidden;
    transition: opacity 0.3s ease-in-out;
    border-radius: 14px;
}

.asset-image-skeleton.hidden[b-ho3s8n2ruk] {
    opacity: 0;
    pointer-events: none;
}

.skeleton-shimmer[b-ho3s8n2ruk] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%);
    animation: shimmer-b-ho3s8n2ruk 1.5s infinite;
}

@keyframes shimmer-b-ho3s8n2ruk {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.asset-image-placeholder[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    background: darkgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.asset-image-placeholder svg[b-ho3s8n2ruk],
.asset-image-default[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    color: #ffffff;
    object-fit: contain;
}

/* Pending Authorization Overlay */
.pending-authorization-overlay[b-ho3s8n2ruk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Below the process logo and options menu */
    border-radius: 14px;
}

.pending-authorization-overlay svg[b-ho3s8n2ruk] {
    width: 48px;
    height: 48px;
    color: white;
    opacity: 0.9;
    animation: authClockPulse-b-ho3s8n2ruk 2s ease-in-out infinite;
}

@keyframes authClockPulse-b-ho3s8n2ruk {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85));
    }
}

/* Options Menu - top right (3 dots horizontal) */
.options-menu[b-ho3s8n2ruk] {
    position: absolute;
    top: 15px;
    right: 2px;
    width: 32px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    backdrop-filter: none;
}

.options-menu svg[b-ho3s8n2ruk] {
    width: 30px;
    height: 30px;
    color: white;
}

.options-menu:focus-visible[b-ho3s8n2ruk],
.dropdown-item:focus-visible[b-ho3s8n2ruk] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* Store Indicator (VFT) - top left over image, mismo estilo que el badge del timeline */
.store-indicator-badge[b-ho3s8n2ruk] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    min-width: 26px;
    height: 20px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F56565;
    color: white;
    font-size: 9px;
    font-weight: bold;
    border-radius: 10px;
    border: 1.5px solid white;
    box-sizing: border-box;
}

/* Vehículo nuevo: la placa visible es la provisional derivada del VIN.
   Mismas medidas que .store-indicator-badge para que ambos lean como una familia. */
.new-vehicle-badge[b-ho3s8n2ruk] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3B82F6;
    color: white;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.3px;
    border-radius: 10px;
    border: 1.5px solid white;
    box-sizing: border-box;
}

/* El indicador de "fuera del taller" ya ocupa la esquina: se corre para no taparlo. */
.new-vehicle-badge.shifted[b-ho3s8n2ruk] {
    left: 38px;
}

/* Process Logo - bottom left over image */
.process-logo[b-ho3s8n2ruk] {
    position: absolute;
    bottom: 4px;
    left: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 50%; /* Asegura que el color de fondo dinámico forme un círculo */
    overflow: hidden; /* Para que la imagen interior no se desborde si es rectangular */
    padding:2px;
}

.background-process[b-ho3s8n2ruk] {
    background: white;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-logo img[b-ho3s8n2ruk] {
    width: 80%;
    height: 80%;
    object-fit: contain;
    border-radius: 0%;
}

/* Process Logo border colors removed as requested */


/* Info Section - flexible height, no overflow hidden */
.asset-info[b-ho3s8n2ruk] {
    padding: 6px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar verticalmente ambos textos */
    background: transparent;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Asset Number - white, bold - una sola línea, truncado con elipsis */
.asset-number[b-ho3s8n2ruk] {
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 780;
    color: #1f2f45;
    text-align: left;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 0px 0px 2px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Centrado explícito para tarjetas de Búsqueda Global (sin fecha ni logo) */
.asset-info.global-search .asset-number[b-ho3s8n2ruk] {
    text-align: center;
    margin: 0;
}

/* Container for date - positioned at bottom */
.asset-meta[b-ho3s8n2ruk] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0px; /* Se elimina el 'auto' para evitar que se separen */
    padding-bottom: 2px;
}

/* Tarjetas de búsqueda global: mismos elementos (misma altura real), pero invisibles */
.asset-meta--placeholder[b-ho3s8n2ruk] {
    visibility: hidden;
}

/* Date in GREEN - at the bottom */
.relative-date[b-ho3s8n2ruk] {
    font-size: clamp(11px, 3vw, 14px);
    color: #3D5676;
    font-weight: 600;
}

/* Work Order Count Badges (Capsules) */
.wo-count-badge[b-ho3s8n2ruk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    line-height: 1.2;
}

.badge-mine[b-ho3s8n2ruk] {
    background-color: #B0BEC5;
    border-radius: 8px;
}

.badge-todos[b-ho3s8n2ruk] {
    background-color: #FFD700;
    border-radius: 10px;
}



/* Handover Button - absolute positioned at bottom right of CARD */
.handover-btn[b-ho3s8n2ruk] {
    width: 35px;
    height: 25px;
    border-radius: 15px;
    background: #e500cd;
    background: linear-gradient(135deg, #e500cd 0%, #c800b0 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 12px rgba(229, 0, 205, 0.45);
    position: absolute;
    bottom: 5px; /* Reducido de 10px a 5px para bajar el botón */
    right: 8px;  /* Ajustado un poco hacia afuera */
    flex-shrink: 0;
    z-index: 3;
}

.handover-btn:hover[b-ho3s8n2ruk] {
    transform: scale(1.08);
    background: linear-gradient(135deg, #f01bd7 0%, #e500cd 100%);
    box-shadow: 0 5px 16px rgba(229, 0, 205, 0.65);
}

/* Blocked state: pending authorization (MAUI: gray, opacity 0.4) */
.handover-btn.blocked[b-ho3s8n2ruk] {
    opacity: 0.4;
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
    cursor: not-allowed;
    pointer-events: none;
}

.handover-btn.blocked:hover[b-ho3s8n2ruk] {
    transform: none;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.handover-btn svg[b-ho3s8n2ruk] {
    width: 18px;
    height: 18px;
    color: white;
    stroke: white;
    stroke-width: 2.5px;
}

/* WorkSession Button (Play/Pause) */
.worksession-btn[b-ho3s8n2ruk] {
    width: 35px;
    height: 25px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: absolute;
    bottom: 5px;
    right: 8px;
    flex-shrink: 0;
    z-index: 3;
}

.worksession-btn:hover:not(.blocked)[b-ho3s8n2ruk] {
    transform: scale(1.08);
}

.worksession-btn.ws-idle[b-ho3s8n2ruk] {
    background: #e500cd;
    background: linear-gradient(135deg, #e500cd 0%, #c800b0 100%);
    box-shadow: 0 3px 12px rgba(229, 0, 205, 0.45);
}

.worksession-btn.ws-idle:hover:not(.blocked)[b-ho3s8n2ruk] {
    background: linear-gradient(135deg, #f01bd7 0%, #e500cd 100%);
    box-shadow: 0 5px 16px rgba(229, 0, 205, 0.65);
}

.worksession-btn.ws-running[b-ho3s8n2ruk] {
    background: #3b82f6;
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.5);
}

.worksession-btn.ws-paused[b-ho3s8n2ruk] {
    background: #dea301;
    box-shadow: 0 3px 12px rgba(222, 163, 1, 0.5);
}

.worksession-btn.blocked[b-ho3s8n2ruk] {
    opacity: 0.45;
    filter: blur(0.5px) grayscale(60%);
    cursor: not-allowed !important;
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%) !important;
    box-shadow: none !important;
}

.worksession-btn .ws-btn-icon[b-ho3s8n2ruk] {
    width: 14px;
    height: 14px;
    color: white;
}

.card-worker-avatar-badge[b-ho3s8n2ruk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    bottom: 5px;
    right: 8px;
    z-index: 3;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: #e5e7eb;
}

.card-worker-avatar-badge img[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card border glow based on status */
.asset-card.pending-assignment[b-ho3s8n2ruk] {
    opacity: 0.6;
}

.asset-card.status-progress[b-ho3s8n2ruk] {
    border: 2px solid transparent;
}

.asset-card.status-waiting[b-ho3s8n2ruk] {
    border: 2px solid rgba(234, 179, 8, 0.3);
}

.options-dropdown[b-ho3s8n2ruk] {
    position: absolute;
    top: 35px;
    left: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    min-width: 160px;
}

/* Para tarjetas en la tercera columna, el menú se abre hacia la izquierda para no salirse del panel */
.asset-card:nth-child(3n) .options-dropdown[b-ho3s8n2ruk] {
    left: auto;
    right: 0;
}

.dropdown-item[b-ho3s8n2ruk] {
    background: transparent;
    border: none;
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    color: #1f2f45;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
    width: 100%;
}

.dropdown-item:hover[b-ho3s8n2ruk] {
    background: #f3f4f6;
}

.dropdown-item.blocked[b-ho3s8n2ruk] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #e5e7eb;
}

.dropdown-item .dropdown-icon[b-ho3s8n2ruk] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.dropdown-item .dropdown-icon svg[b-ho3s8n2ruk] {
    width: 18px;
    height: 18px;
}

.dropdown-item:hover .dropdown-icon[b-ho3s8n2ruk] {
    transform: scale(1.15);
}

/* Colores individuales por acción — paleta Systime */
.dropdown-icon.icon-photo[b-ho3s8n2ruk] { color: #e500cd; }        /* Fucsia brand */
.dropdown-icon.icon-detail[b-ho3s8n2ruk] { color: #3b82f6; }       /* Azul información */
.dropdown-icon.icon-timeline[b-ho3s8n2ruk] { color: #e5b900; }     /* Amarillo brand */
.dropdown-icon.icon-assign[b-ho3s8n2ruk] { color: #14b8a6; }       /* Teal asignación */
.dropdown-icon.icon-handover[b-ho3s8n2ruk] { color: #ec4899; }     /* Rosa entrega */
.dropdown-icon.icon-reclaim[b-ho3s8n2ruk] { color: #f97316; }      /* Naranja reclamación */
/* Contador de procesos en paralelo sobre el ícono del proceso principal.
   El ícono sigue siendo el del proceso mainline; el dot comunica cuántas ramas
   más están corriendo. Va como hermano de .process-logo porque ese contenedor
   recorta con overflow:hidden y se comería la esquina del dot. */
[b-ho3s8n2ruk] .parallel-count-dot {
    /* Es un <CountBadge> anclado abajo-izquierda; aquí solo se fija dónde cae sobre el logo. */
    --st-badge-offset-x: 26px;
    --st-badge-offset-y: 2px;
}

/* Contorno del activo seleccionado —o del recién creado— para no perderlo de vista
   al volver al inbox. Mismo criterio que el borde dorado de MAUI. */
.asset-card.is-selected[b-ho3s8n2ruk] {
    outline: 2px solid #E8B33A;
    outline-offset: -1px;
}

/* Active Workers Overlapping Stack (bottom-right over image) */
.active-workers-overlap[b-ho3s8n2ruk] {
    position: absolute;
    bottom: 4px;
    right: 6px;
    display: flex;
    align-items: center;
    z-index: 3;
    pointer-events: auto;
}

.worker-avatar-bubble[b-ho3s8n2ruk] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background: #E2E8F0;
    margin-left: -8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.worker-avatar-bubble:first-child[b-ho3s8n2ruk] {
    margin-left: 0;
}

.worker-avatar-bubble img[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.worker-avatar-bubble .avatar-fallback[b-ho3s8n2ruk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #1E293B;
    background: #CBD5E1;
    text-transform: uppercase;
}

.worker-avatar-bubble.more-indicator[b-ho3s8n2ruk] {
    background: #1E293B;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    border: 1.5px solid #FFFFFF;
    margin-left: -8px;
}

.worker-avatar-bubble.more-indicator:first-child[b-ho3s8n2ruk] {
    margin-left: 0;
}
/* /Pages/Home/Components/AssetDetail/AssetDetailPanel.razor.rz.scp.css */
.asset-detail-panel[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 9px;
    background: #FFFFFF;
    border-radius: 16px;
    height: 100%;
    overflow: visible;
    flex: 1;
    min-width: 280px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Fixed header section - no scroll */
.asset-header-fixed[b-lo59djkmmu] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrollable content area */
.asset-scrollable-content[b-lo59djkmmu] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    min-height: 0;
    border-radius: 15px;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.asset-scrollable-content[b-lo59djkmmu]::-webkit-scrollbar {
    display: none;
}

/* Asset Image Section */
.asset-image-section[b-lo59djkmmu] {
    position: relative;
    width: 100%;
}

.asset-image-container[b-lo59djkmmu] {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    background: #F5F5F5;
}


.asset-image[b-lo59djkmmu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e5e5e5;
}

.asset-image-placeholder[b-lo59djkmmu] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E8E8E8 0%, #F5F5F5 100%);
    color: rgba(0, 0, 0, 0.3);
}

.vehicle-placeholder-icon[b-lo59djkmmu] {
    width: 85%;
    height: auto;
    object-fit: contain;
}

.progress-badge[b-lo59djkmmu] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    backdrop-filter: blur(4px);
    background: #ACACAC; /* Fallback mientras Asset carga; el color real llega por style inline (TrafficLightColorHelper) */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.progress-badge:hover[b-lo59djkmmu] {
    transform: scale(1.05);
    opacity: 0.95;
}


.process-icon-wrapper[b-lo59djkmmu] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.process-icon-wrapper img[b-lo59djkmmu] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

/* Asset Info Section */
.asset-info-section[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset-info-header[b-lo59djkmmu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 0 4px 0;
    border-bottom: 1.5px solid #F0F0F0;
    margin-bottom: 2px;
}

.asset-number[b-lo59djkmmu] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1a2e4a;
    margin: 0;
    letter-spacing: 1.5px;
}

/* ─── Fecha de ingreso del veh\u00edculo (Estructura recuperada, sin recuadro) ─── */
.date-square[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    opacity: 1;
    min-width: 48px;
}

.date-label[b-lo59djkmmu] {
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.date-number[b-lo59djkmmu] {
    font-size: 22px;
    font-weight: 800;
    color: #1a2e4a;
    line-height: 1;
}

.date-month[b-lo59djkmmu] {
    font-size: 10px;
    font-weight: 700;
    color: #e500cd;
    text-transform: uppercase;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.date-square:hover[b-lo59djkmmu] {
    transform: none;
    background: transparent !important;
    border: none !important;
}

.asset-specs[b-lo59djkmmu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
    padding: 4px 0;
}

.spec-item[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spec-label[b-lo59djkmmu] {
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: capitalize;
    font-weight: 500;
}

.spec-value[b-lo59djkmmu] {
    font-size: 0.88rem;
    color: #1a2e4a;
    font-weight: 700;
}

/* Worker Info Section */
.worker-info-section[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 12px;
    border: 1px solid #EBEBEB;
}

/* ── Varios responsables (orden bifurcada) ────────────────────────────────
   La permanencia es del activo, así que queda una sola vez y alineada arriba;
   la lista de responsables crece hacia abajo, uno por frente vivo. */
.worker-info-section.is-parallel[b-lo59djkmmu] {
    align-items: flex-start;
}

.parallel-workers-list[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.parallel-worker-row[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Filete de línea: dice a QUÉ línea pertenece cada responsable.
   El color lo publica la fila como --lane-color desde la paleta compartida, así que coincide con
   el de esa misma línea en el timeline y en el popup. Estaba fijo en ámbar: dos ramas vivas salían
   idénticas y ninguna se correspondía con su línea.

   Lo lleva TODA fila, incluido el frente del tronco —que sale en el verde de mainline—. Antes sólo
   lo tenían las ramas (.is-branch-front) y el responsable de la línea principal quedaba sin filete:
   la lista mostraba tres personas y sólo dos podían ubicarse en el dibujo. El tronco es una línea
   más y tiene su color; que sea la principal no lo vuelve invisible. */
.parallel-worker-row[b-lo59djkmmu] {
    padding-left: 8px;
    border-left: 2px solid var(--lane-color, #DEA301);
}

.worker-avatar[b-lo59djkmmu] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2.5px solid #21e139;
}

.worker-avatar img[b-lo59djkmmu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar-placeholder[b-lo59djkmmu] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3D5676;
}

.worker-initials[b-lo59djkmmu] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1;
}

.worker-details[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.worker-name[b-lo59djkmmu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a2e4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-role[b-lo59djkmmu] {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 400;
}

.permanence-time[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.time-value[b-lo59djkmmu] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a2e4a;
    white-space: nowrap;
}

.time-label[b-lo59djkmmu] {
    font-size: 0.62rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Collapsible Sections */
.collapsible-sections[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-item[b-lo59djkmmu] {
    background: #F8F9FA;
    border-radius: 12px;
    border: 1px solid #E8E8E8;
    overflow: hidden;
    transition: all 0.2s ease;
}

.section-item.expanded[b-lo59djkmmu] {
    background: #F0F4F8;
    border-color: #D0D0D0;
}

.section-header[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #E1E1E1;
    border: none;
    color: #333333;
    cursor: pointer;
    transition: background 0.2s ease;
}

.section-header:hover[b-lo59djkmmu] {
    background: #e5b900;
}

.section-header.active[b-lo59djkmmu] {
    background: #e5b900;
    color: #1a1a2e;
}

.section-icon[b-lo59djkmmu] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    color: white;
}

.workorders-icon[b-lo59djkmmu] {
    background: #3D5676;
}

.files-icon[b-lo59djkmmu] {
    background: #3D5676;
}

.vehicle-icon[b-lo59djkmmu] {
    background: #3D5676;
}

.history-icon[b-lo59djkmmu] {
    background: #3D5676;
}

.section-info[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.section-title[b-lo59djkmmu] {
    flex: 1;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333333;
}

.section-subtitle[b-lo59djkmmu] {
    font-size: 0.7rem;
    color: #888888;
}

.files-count-badge[b-lo59djkmmu] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8E8E8;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333333;
    margin-left: auto;
}

.chevron[b-lo59djkmmu] {
    transition: transform 0.2s ease;
    opacity: 0.5;
    flex-shrink: 0;
    color: #666666;
}

.section-item.expanded .chevron[b-lo59djkmmu] {
    transform: rotate(180deg);
}

.no-asset-selected[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888888;
    font-size: 0.9rem;
}

/* Camera Button Overlay - shows on hover */
.camera-overlay-btn[b-lo59djkmmu] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    border: none;
    padding: 0;
    color: white;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
}

.asset-image-container:hover .camera-overlay-btn[b-lo59djkmmu] {
    opacity: 1;
}

.camera-overlay-btn:hover[b-lo59djkmmu] {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.65);
}

.camera-overlay-btn:active[b-lo59djkmmu] {
    transform: scale(0.95);
}

/* Uploading State */
.asset-image-placeholder.uploading[b-lo59djkmmu] {
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(135deg, #EDE7F6 0%, #E3F2FD 100%);
    color: #5C6BC0;
}

.upload-spinner[b-lo59djkmmu] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(92, 107, 192, 0.2);
    border-top-color: #5C6BC0;
    border-radius: 50%;
    animation: spin-b-lo59djkmmu 0.8s linear infinite;
}

@keyframes spin-b-lo59djkmmu {
    to {
        transform: rotate(360deg);
    }
}

.upload-text[b-lo59djkmmu] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #5C6BC0;
}

/* Active processes (parallel branches) */
.estimation-badge[b-lo59djkmmu] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 100px);
    padding: 6px 10px;
    border: 0;
    border-radius: 20px;
    background: #e500cd;
    color: #fff;
    font: inherit;
    font-size: 0.7rem;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.estimation-badge:disabled[b-lo59djkmmu] {
    color: #fff;
    opacity: 1;
}

.estimation-badge.interactive[b-lo59djkmmu] {
    cursor: pointer;
}

.estimation-badge.interactive:hover[b-lo59djkmmu] {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(229, 0, 205, 0.3);
}

.estimation-label[b-lo59djkmmu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-processes-dropdown[b-lo59djkmmu] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    display: flex;
    width: min(320px, calc(100vw - 40px));
    max-height: 350px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #1f2f45;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dropdown-overlay[b-lo59djkmmu] {
    position: fixed;
    inset: 0;
    z-index: 100;
    border: 0;
    background: transparent;
}

.dropdown-header[b-lo59djkmmu] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dropdown-list[b-lo59djkmmu] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dropdown-item-process[b-lo59djkmmu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dropdown-item-process:last-child[b-lo59djkmmu] {
    border-bottom: 0;
}

/* Filete de la fila: color REAL de la rama, publicado por la fila como --lane-color.
   Estaba en azul fijo, y los modificadores .parallel/.dependency quedaron muertos cuando la
   clase pasó a venir de la paleta compartida — el CSS aislado de Blazor le suma un selector de
   atributo, así que esta regla ganaba siempre y todas las filas salían azules. */
.branch-indicator[b-lo59djkmmu] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--lane-color, #3b82f6);
}

.process-info[b-lo59djkmmu] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.process-name-row[b-lo59djkmmu] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.mini-process-icon[b-lo59djkmmu] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #fff;
    object-fit: contain;
}

.process-name-text[b-lo59djkmmu] {
    overflow: hidden;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-type-badge[b-lo59djkmmu] {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 4px;
    background: #3b82f6;
    color: #102033;
    font-size: 0.62rem;
    font-weight: 700;
}

.branch-type-badge.parallel[b-lo59djkmmu] {
    background: #10b981;
}

.branch-type-badge.dependency[b-lo59djkmmu] {
    background: #f59e0b;
}

.process-time[b-lo59djkmmu],
.worker-name-mini[b-lo59djkmmu] {
    color: #94a3b8;
    font-size: 0.65rem;
}

.worker-info-mini[b-lo59djkmmu] {
    display: flex;
    width: 64px;
    flex-shrink: 0;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.mini-avatar[b-lo59djkmmu],
.mini-avatar-placeholder[b-lo59djkmmu] {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.65rem;
    object-fit: cover;
}

.worker-name-mini[b-lo59djkmmu] {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Home/Components/AssetDetail/AssetFilesPanel.razor.rz.scp.css */
/* ── Expediente documental de la orden ──
   El panel vive dentro de la tarjeta clara del detalle de OT, así que toda la paleta es la clara
   del sistema (superficies blancas, texto #1E2F45, acento magenta), nunca la del canvas oscuro. */

/* La cabecera y el cuerpo con scroll los pone AssetSectionShell; aquí solo lo propio de archivos. */
.files-header-actions[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.files-search[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f5f9fa;
    border: 1px solid #e3e9ef;
    border-radius: 8px;
    padding: 7px 11px;
    color: #1e2f45;
    min-width: 190px;
}

.files-search:focus-within[b-64lkhy594i] { border-color: #d81b84; }

.files-search svg[b-64lkhy594i] { color: #8898aa; flex-shrink: 0; }

.files-search input[b-64lkhy594i] {
    background: transparent;
    border: 0;
    outline: none;
    color: inherit;
    font-size: 12.5px;
    width: 100%;
}

.files-search input[b-64lkhy594i]::placeholder { color: #8898aa; }

.files-upload-btn[b-64lkhy594i] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #d81b84;
    color: #ffffff;
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(216, 27, 132, 0.35);
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.files-upload-btn:hover[b-64lkhy594i] { background: #eb5bb6; }

/* La cámara es la segunda vía, no la principal: mismo tamaño, sin el peso del magenta. */
.files-upload-btn.is-secondary[b-64lkhy594i] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e2f45;
    box-shadow: none;
}

.files-upload-btn.is-secondary:hover[b-64lkhy594i] { background: #f5f9fa; border-color: #94a3b8; }

/* Fuera del flujo y del foco: lo dispara su etiqueta, nunca se ve. Va con ::deep porque el
   <input> lo pinta InputFile (componente hijo) y no lleva el atributo de scope de este CSS. */
.files-header-actions[b-64lkhy594i]  .files-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.files-aside-note[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f1f6fb;
    border: 1px solid #dbe6f2;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: #44607e;
    flex-shrink: 0;
}

.files-aside-note svg[b-64lkhy594i] { flex-shrink: 0; color: #5a7fa6; }

.files-error[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #b91c1c;
}

.files-error button[b-64lkhy594i] {
    margin-left: auto;
    border: 1px solid #fecaca;
    background: #ffffff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #b91c1c;
    cursor: pointer;
}

/* ── Filtros ── */
.files-toolbar[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e9ef;
}

.files-scope[b-64lkhy594i] { display: flex; gap: 6px; flex-wrap: wrap; }

.files-chip[b-64lkhy594i] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.files-chip:hover[b-64lkhy594i] { background: #f5f9fa; border-color: #94a3b8; }
.files-chip.is-on[b-64lkhy594i] { background: #fdf0f7; border-color: #d81b84; color: #d81b84; }

.files-chip-count[b-64lkhy594i] {
    font-size: 11px;
    background: #eef3f6;
    border-radius: 999px;
    padding: 1px 7px;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.files-chip.is-on .files-chip-count[b-64lkhy594i] { background: #d81b84; color: #ffffff; }

.files-toolbar-right[b-64lkhy594i] { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.files-select[b-64lkhy594i] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.files-viewtoggle[b-64lkhy594i] { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }

.files-viewtoggle button[b-64lkhy594i] {
    border: 0;
    background: #ffffff;
    padding: 6px 10px;
    cursor: pointer;
    color: #8898aa;
    display: grid;
    place-items: center;
}

.files-viewtoggle button.is-on[b-64lkhy594i] { background: #1e2f45; color: #ffffff; }

/* ── Expediente: lo que la orden tiene y lo que le falta ── */
.files-dossier[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #f5f9fa;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    padding: 9px 12px;
}

.files-dossier-title[b-64lkhy594i] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.files-dossier-chips[b-64lkhy594i] { display: flex; gap: 6px; flex-wrap: wrap; }

.files-dossier-chip[b-64lkhy594i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e3e9ef;
    border-radius: 999px;
    padding: 3px 10px 3px 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
}

.files-dossier-tick[b-64lkhy594i] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a34a;
    border: 1px solid #16a34a;
    flex-shrink: 0;
}

/* Lo pendiente se marca en ámbar y punteado: avisa, no bloquea. */
.files-dossier-chip.is-missing[b-64lkhy594i] {
    border-style: dashed;
    border-color: #f0b27a;
    background: #fffaf3;
    color: #9a5b12;
}

.files-dossier-chip.is-missing .files-dossier-tick[b-64lkhy594i] { background: transparent; border: 1.5px dashed #e08c3a; }

/* ── Zona de carga ── */
.files-dropzone[b-64lkhy594i] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    padding: 11px 16px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.files-dropzone:hover[b-64lkhy594i] { border-color: #d81b84; background: #fdf7fb; }

/* Cubre la banda entera para recibir tanto el clic como los archivos soltados. ::deep por la
   misma razón que el input de cámara: el <input> real lo renderiza InputFile. */
.files-dropzone[b-64lkhy594i]  .files-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.files-dropzone-ico[b-64lkhy594i] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f5f9fa;
    border: 1px solid #e3e9ef;
    color: #d81b84;
    flex-shrink: 0;
}

.files-dropzone-text[b-64lkhy594i] { font-size: 13px; color: #475569; }
.files-dropzone-text b[b-64lkhy594i] { color: #1e2f45; display: block; }
.files-dropzone-text small[b-64lkhy594i] { color: #8898aa; font-size: 11.5px; }

/* ── Cola de subida ── */
.files-uploads[b-64lkhy594i] { display: flex; flex-direction: column; gap: 8px; }

.files-upload-row[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
}

.files-upload-row.is-error[b-64lkhy594i] { border-color: #fecaca; background: #fff7f7; }

.files-upload-ico[b-64lkhy594i] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef3f6;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.files-upload-row.is-error .files-upload-ico[b-64lkhy594i] { background: #fee2e2; color: #ef4444; }
.files-upload-info[b-64lkhy594i] { flex: 1; min-width: 0; }

.files-upload-name[b-64lkhy594i] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e2f45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-upload-state[b-64lkhy594i] { font-size: 11px; color: #8898aa; }
.files-upload-row.is-error .files-upload-state[b-64lkhy594i] { color: #ef4444; }

.files-upload-bar[b-64lkhy594i] {
    height: 4px;
    border-radius: 999px;
    background: #eef3f6;
    overflow: hidden;
    margin-top: 6px;
}

.files-upload-bar i[b-64lkhy594i] {
    display: block;
    height: 100%;
    width: 40%;
    background: #d81b84;
    border-radius: 999px;
    animation: files-progress-b-64lkhy594i 1.1s ease-in-out infinite;
}

@keyframes files-progress-b-64lkhy594i {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

/* ── Lista ── */
.files-list-head[b-64lkhy594i],
.files-row[b-64lkhy594i] {
    display: grid;
    grid-template-columns: 44px minmax(0, 2.4fr) 1.2fr 0.9fr 1.1fr 72px;
    gap: 12px;
    align-items: center;
}

.files-list-head[b-64lkhy594i] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8898aa;
}

.files-rows[b-64lkhy594i] { display: flex; flex-direction: column; }

.files-row[b-64lkhy594i] {
    padding: 9px 10px;
    border-top: 1px solid #e3e9ef;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.files-row:last-child[b-64lkhy594i] { border-bottom: 1px solid #e3e9ef; }
.files-row:hover[b-64lkhy594i] { background: #fbfdff; }
.files-row:focus-visible[b-64lkhy594i] { outline: 2px solid #d81b84; outline-offset: -2px; }

/* Hoja de papel: le da cara a un PDF sin renderizarlo. */
.files-sheet[b-64lkhy594i] {
    position: relative;
    width: 34px;
    height: 44px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

.files-sheet i[b-64lkhy594i] {
    position: absolute;
    left: 5px;
    right: 8px;
    height: 1.5px;
    background: #dde5ee;
    border-radius: 2px;
}

.files-sheet i:nth-of-type(1)[b-64lkhy594i] { top: 9px; }
.files-sheet i:nth-of-type(2)[b-64lkhy594i] { top: 15px; }
.files-sheet i:nth-of-type(3)[b-64lkhy594i] { top: 21px; }

.files-sheet-ext[b-64lkhy594i] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: #64748b;
    padding: 1px 0;
}

.files-sheet.is-photo[b-64lkhy594i] { background: #eef3f6; border-color: #cbd5e1; }
.files-sheet.is-photo img[b-64lkhy594i] { width: 100%; height: 100%; object-fit: cover; display: block; }

.files-row-name[b-64lkhy594i] { min-width: 0; }

.files-name[b-64lkhy594i] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e2f45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-sub[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #8898aa;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.files-dot[b-64lkhy594i] { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }

.files-type-chip[b-64lkhy594i] {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.files-version[b-64lkhy594i] {
    font-size: 12px;
    font-weight: 700;
    background: #eef3f6;
    border-radius: 5px;
    padding: 1px 6px;
    color: #334155;
}

.files-version-note[b-64lkhy594i] { font-size: 11px; color: #8898aa; margin-left: 6px; }
.files-who[b-64lkhy594i] { font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

.files-row-actions[b-64lkhy594i] { display: flex; gap: 4px; justify-content: flex-end; }

.files-icon-btn[b-64lkhy594i] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #8898aa;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.files-row:hover .files-icon-btn[b-64lkhy594i] { border-color: #e3e9ef; }
.files-icon-btn:hover[b-64lkhy594i] { color: #1e2f45; background: #f5f9fa; }
.files-icon-btn.is-danger:hover[b-64lkhy594i] { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

/* ── Cuadrícula ── */
.files-grid[b-64lkhy594i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.files-card[b-64lkhy594i] {
    border: 1px solid #e3e9ef;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.files-card:hover[b-64lkhy594i] { border-color: #94a3b8; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
.files-card .files-sheet[b-64lkhy594i] { width: 50px; height: 64px; }
.files-card .files-name[b-64lkhy594i] { white-space: normal; line-height: 1.3; font-size: 12.5px; }

/* ── Vacío y pie ── */
.files-empty[b-64lkhy594i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f5f9fa;
    padding: 46px 24px;
}

.files-empty h3[b-64lkhy594i] { font-size: 16px; color: #1e2f45; margin: 0; }
.files-empty p[b-64lkhy594i] { margin: 0; color: #64748b; font-size: 13px; max-width: 52ch; }

.files-empty-ico[b-64lkhy594i] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid #e3e9ef;
    color: #d81b84;
    margin-bottom: 4px;
}

.files-foot[b-64lkhy594i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e3e9ef;
    font-size: 11.5px;
    color: #8898aa;
    font-variant-numeric: tabular-nums;
}

.files-foot-missing[b-64lkhy594i] { margin-left: auto; color: #9a5b12; }

/* ── Diálogos ── */
.files-dialog-backdrop[b-64lkhy594i] {
    position: fixed;
    inset: 0;
    background: rgba(14, 22, 36, 0.45);
    z-index: 1200;
}

.files-dialog[b-64lkhy594i] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(8, 17, 30, 0.35);
    padding: 20px;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #1e2f45;
}

.files-dialog h3[b-64lkhy594i] { margin: 0; font-size: 16px; }
.files-dialog-files[b-64lkhy594i] { margin: 0; font-size: 12.5px; color: #64748b; word-break: break-word; }
.files-dialog-note[b-64lkhy594i] { margin: 0; font-size: 12px; color: #8898aa; }
.files-dialog-note.is-warning[b-64lkhy594i] {
    color: #9a5b00;
    background: #fff7e8;
    border: 1px solid #f3d9a4;
    border-radius: 8px;
    padding: 8px 10px;
}

.files-order[b-64lkhy594i] { color: #1e2f45; font-weight: 600; }

.files-dialog-label[b-64lkhy594i] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8898aa;
    margin-top: 4px;
}

.files-dialog-select[b-64lkhy594i] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #1e2f45;
    background: #ffffff;
    width: 100%;
}

.files-dialog-select:focus-visible[b-64lkhy594i] { outline: none; border-color: #d81b84; box-shadow: 0 0 0 2px rgba(216, 27, 132, 0.25); }

.files-dialog-actions[b-64lkhy594i] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

.files-mini[b-64lkhy594i] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.files-mini:hover[b-64lkhy594i] { border-color: #d81b84; color: #d81b84; background: #fdf0f7; }

.files-primary[b-64lkhy594i] {
    border: 1px solid #d81b84;
    background: #d81b84;
    color: #ffffff;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.files-primary:hover[b-64lkhy594i] { background: #eb5bb6; border-color: #eb5bb6; }
.files-primary:disabled[b-64lkhy594i] { opacity: 0.55; cursor: not-allowed; }
.files-primary.is-danger[b-64lkhy594i] { background: #ef4444; border-color: #ef4444; }
.files-primary.is-danger:hover[b-64lkhy594i] { background: #dc2626; border-color: #dc2626; }

@media (max-width: 1100px) {
    .files-list-head[b-64lkhy594i],
    .files-row[b-64lkhy594i] { grid-template-columns: 44px minmax(0, 2fr) 1.1fr 72px; }
    .files-col-version[b-64lkhy594i],
    .files-col-who[b-64lkhy594i] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .files-upload-bar i[b-64lkhy594i] { animation: none; width: 100%; }
}
/* /Pages/Home/Components/AssetDetail/AssetSectionShell.razor.rz.scp.css */
/* Vive dentro de la tarjeta blanca de la carpeta (misma que la línea de tiempo): cabecera fija
   arriba, cuerpo con scroll propio. */
.section-shell[b-h0f6rn8aje] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: #1e2f45;
}

.section-head[b-h0f6rn8aje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e9ef;
}

/* El texto cede antes que las acciones: el subtítulo se recorta y los botones se quedan en la
   misma línea mientras quepan. */
.section-head-text[b-h0f6rn8aje] {
    flex: 1 1 240px;
    min-width: 0;
}

.section-head-text h3[b-h0f6rn8aje] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e2f45;
}

.section-head-text p[b-h0f6rn8aje] {
    margin: 2px 0 0;
    font-size: 12px;
    color: #8898aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-head-actions[b-h0f6rn8aje] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.section-body[b-h0f6rn8aje] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 2px 4px;
    overflow: auto;
}

/* Estado «en construcción» de las secciones que aún no tienen contenido. Con ::deep porque el
   marcado lo escribe cada sección y no lleva el scope de este archivo. */
.section-body[b-h0f6rn8aje]  .section-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f5f9fa;
    padding: 40px 24px;
    text-align: center;
    color: #7a8a9a;
}

.section-body[b-h0f6rn8aje]  .section-placeholder svg { color: #b0bec5; }

.section-body[b-h0f6rn8aje]  .section-placeholder p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
/* /Pages/Home/Components/AssetDetail/Charts/BurndownChart.razor.rz.scp.css */
.burndown-chart-container[b-j1dw6kg7gd] {
    display: flex;
    flex-direction: column;
    /* El gráfico ya reserva su propio margen inferior para los rótulos de eje; un gap grande
       aquí solo dejaba aire muerto entre el eje y la leyenda. */
    gap: 4px;
    width: 100%;
}

.chart-loading[b-j1dw6kg7gd],

.chart-empty[b-j1dw6kg7gd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
    color: #64748b;
    gap: 6px;
}

.chart-empty-title[b-j1dw6kg7gd] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3D5676;
    margin-top: 4px;
}

.chart-empty-subtitle[b-j1dw6kg7gd] {
    font-size: 0.72rem;
    color: #94a3b8;
}

.spinner[b-j1dw6kg7gd] {
    width: 30px;
    height: 30px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-j1dw6kg7gd 1s linear infinite;
}

@keyframes spin-b-j1dw6kg7gd {
    to {
        transform: rotate(360deg);
    }
}

.burndown-metrics-grid[b-j1dw6kg7gd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

.metric-card[b-j1dw6kg7gd] {
    padding: 14px 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.metric-card:hover[b-j1dw6kg7gd] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.metric-header-row[b-j1dw6kg7gd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.metric-card-icon[b-j1dw6kg7gd] {
    opacity: 0.28;
    transition: all 0.25s ease;
}

.metric-card:hover .metric-card-icon[b-j1dw6kg7gd] {
    opacity: 0.7;
    transform: scale(1.15);
}

/* Tarjeta de ETA Planeada (Azul) */

.planned-card[b-j1dw6kg7gd] {
    background: linear-gradient(135deg, #ffffff, #f0f7ff);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.planned-card .metric-card-icon[b-j1dw6kg7gd] {
    color: #3b82f6;
}

.planned-card .metric-value[b-j1dw6kg7gd] {
    color: #1d4ed8;
}

/* Tarjeta de ETA Real (Naranja) */

.real-card[b-j1dw6kg7gd] {
    background: linear-gradient(135deg, #ffffff, #fffaf5);
    border: 1px solid rgba(249, 115, 22, 0.15);
}

.real-card .metric-card-icon[b-j1dw6kg7gd] {
    color: #f97316;
}

.real-card .metric-value[b-j1dw6kg7gd] {
    color: #c2410c;
}

.burndown-delay-block[b-j1dw6kg7gd] {
    position: absolute;
    top: 22px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    min-width: 50px;
}

.delay-label[b-j1dw6kg7gd] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 2px;
}

.delay-value[b-j1dw6kg7gd] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.delay-value.on-time[b-j1dw6kg7gd] {
    color: #10b981;
}

.delay-value.delayed[b-j1dw6kg7gd] {
    color: #ef4444;
}

.delay-unit[b-j1dw6kg7gd] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
    line-height: 1;
}

.delay-unit.on-time[b-j1dw6kg7gd] {
    color: #10b981;
}

.delay-unit.delayed[b-j1dw6kg7gd] {
    color: #ef4444;
}

.metric-label[b-j1dw6kg7gd] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.metric-value[b-j1dw6kg7gd] {
    font-size: 0.85rem;
    font-weight: 700;
}

.chart-wrapper[b-j1dw6kg7gd] {
    width: 100%;
    min-height: 320px;
    position: relative;
}

.burndown-footer[b-j1dw6kg7gd] {
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
    margin-top: -22px;
    font-size: 0.75rem;
}

.footer-item[b-j1dw6kg7gd] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
}

.dot[b-j1dw6kg7gd] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.planned[b-j1dw6kg7gd] {
    background: #22C55E;
}

.dot.real[b-j1dw6kg7gd] {
    background: #677BC4;
}

.dot.delay[b-j1dw6kg7gd] {
    background: var(--st-delay-color, #E03D3D);
}

/* Rombo, no círculo: mismo símbolo que usa el marcador de reproceso sobre la curva. */
.dot.rework[b-j1dw6kg7gd] {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #F97316;
    transform: rotate(45deg);
}

.footer-item .val[b-j1dw6kg7gd] {
    font-weight: 700;
    color: #1e293b;
}

/* Premium Status Badges for Burndown Chart */

.burndown-header-row[b-j1dw6kg7gd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: -4px;
    min-height: 38px;
}

.burndown-status-badge[b-j1dw6kg7gd] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-family: "Inter", sans-serif;
    transition: all 0.2s ease;
}

.burndown-status-badge.finished[b-j1dw6kg7gd] {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.burndown-status-badge.in-progress[b-j1dw6kg7gd] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.status-dot[b-j1dw6kg7gd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.green[b-j1dw6kg7gd] {
    background-color: #22c55e;
}

.status-dot.blue[b-j1dw6kg7gd] {
    background-color: #3b82f6;
}

.status-dot.pulse[b-j1dw6kg7gd] {
    animation: status-pulse-anim-b-j1dw6kg7gd 2s infinite;
}

@keyframes status-pulse-anim-b-j1dw6kg7gd {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* MODAL GRAFICAS EXPANDIDAS */

.modal-overlay[b-j1dw6kg7gd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-j1dw6kg7gd 0.3s ease-out;
}

.modal-content[b-j1dw6kg7gd] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    width: 96%;
    max-width: 1600px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUpModal-b-j1dw6kg7gd 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
}

.modal-content[b-j1dw6kg7gd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

@keyframes fadeInOverlay-b-j1dw6kg7gd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-j1dw6kg7gd {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-j1dw6kg7gd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h3[b-j1dw6kg7gd] {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-modal-btn[b-j1dw6kg7gd] {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal-btn:hover[b-j1dw6kg7gd] {
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.modal-layout-container[b-j1dw6kg7gd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding-bottom: 5px;
    min-height: 0;
}

.modal-top-section[b-j1dw6kg7gd] {
    display: flex;
    gap: 24px;
    flex: 7;
    min-height: 0;
    overflow: hidden;
}

.modal-sidebar-filters[b-j1dw6kg7gd] {
    flex: 0 0 350px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 16px;
}

.modal-chart-section[b-j1dw6kg7gd] {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.modal-grid-section[b-j1dw6kg7gd] {
    flex: 3;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.modal-grid-section[b-j1dw6kg7gd]::-webkit-scrollbar {
    display: none;
}

.layout-resize-btn[b-j1dw6kg7gd] {
    position: absolute;
    top: -1px;
    right: 8px;
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 100;
}

.layout-resize-btn:hover[b-j1dw6kg7gd] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}
/* /Pages/Home/Components/AssetDetail/ImageLightbox.razor.rz.scp.css */
/* ── Lightbox Overlay ── */
.lightbox-overlay[b-5d7zlo8242] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-in-b-5d7zlo8242 0.25s ease-out;
    outline: none;
}

@keyframes lightbox-fade-in-b-5d7zlo8242 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Close button */
.lightbox-close[b-5d7zlo8242] {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.lightbox-close:hover[b-5d7zlo8242] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Photo counter */
.lightbox-counter[b-5d7zlo8242] {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 10;
}

/* Navigation arrows */
.lightbox-arrow[b-5d7zlo8242] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.lightbox-arrow:hover:not(.disabled)[b-5d7zlo8242] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-arrow.disabled[b-5d7zlo8242] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.lightbox-arrow-left[b-5d7zlo8242] {
    left: 24px;
}

.lightbox-arrow-right[b-5d7zlo8242] {
    right: 24px;
}

/* Image container */
.lightbox-image-container[b-5d7zlo8242] {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 85vw;
    max-height: 78vh;
    animation: lightbox-img-enter-b-5d7zlo8242 0.3s ease-out;
}

@keyframes lightbox-img-enter-b-5d7zlo8242 {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-image[b-5d7zlo8242] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    user-select: none;
    -webkit-user-drag: none;
}

/* Thumbnails bar */
.lightbox-thumbnails[b-5d7zlo8242] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    z-index: 10;
    max-width: 80vw;
    overflow-x: auto;
    scrollbar-width: none;
}

.lightbox-thumbnails[b-5d7zlo8242]::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb[b-5d7zlo8242] {
    width: 56px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.55;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.lightbox-thumb:hover[b-5d7zlo8242] {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.3);
}

.lightbox-thumb.active[b-5d7zlo8242] {
    opacity: 1;
    border-color: #e5b900;
    box-shadow: 0 0 12px rgba(229, 185, 0, 0.4);
}

.lightbox-thumb img[b-5d7zlo8242] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Pages/Home/Components/AssetDetail/TimelinePanel.razor.rz.scp.css */
.timeline-panel[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 2;
    min-width: 400px;
    position: relative;
    padding-top: 0px;
    /* Space for the tab to protrude */

    /* ── Paleta de la línea de tiempo (FUENTE ÚNICA de color) ──
       Canales RGB sueltos para poder aplicar cualquier opacidad con
       rgb(var(--c-x) / a) sin repetir el hex. */
    --c-flow-none: 103 123 196;
    /* índigo  — tronco / flujo normal. Espejo de TimeLineBranchPalette.MainlineHex (#677BC4),
       que es a su vez el índigo de la serie "Estado Real" del burndown: el tronco y esa curva
       cuentan el mismo hecho y se miran uno al lado del otro.
       El verde y el rojo quedan reservados para señalización de estado (inicio, fin), así que
       el tronco vive en la escala de identidad de línea, no en la de estado. */
    --c-dependency: 176 125 212;
    /* violeta — acento del TIPO dependency (badge, conector, espera punteada).
       Era #6EB5D4, un celeste: con el tronco verde funcionaba, pero con el tronco índigo pasó a
       competir con él y una dependencia se leía como línea principal. Violeta no colisiona ni con
       el tronco ni con la reserva de verde/rojo. */
    --c-parallel: 218 197 127;
    /* dorado  — rama parallel */
    --c-pending: 191 203 218;
    /* gris    — pendiente / no ejecutado */
    --c-progress: 242 153 74;
    /* ámbar   — en ejecución (sin terminar) */
}

/* The folder tab - small protruding tab on top left */
.folder-tab-header[b-1u3781oj2d] {
    position: absolute;
    top: 0;
    left: 15px;
    display: inline-flex;
    align-items: center;
    padding: 8px 25px;
    background: #E1E1E1;
    border-radius: 12px 12px 0 0;
    z-index: 2;
    border: 1px solid #E8E8E8;
    border-bottom: none;
}

.folder-tab-title[b-1u3781oj2d] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3D5676;
}

/* Hide the assign button from the tab header - it will be inside the content */
.assign-btn[b-1u3781oj2d] {
    display: none;
}

/* Timeline Content - main folder body with notch for tab */
.timeline-content[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: #E1E1E1;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* Timeline content header with Assign button */
.timeline-content-header[b-1u3781oj2d] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding-right: 8px;
    box-sizing: border-box;
}

/* Asignar y Entregar de la cabecera: los pinta ActionButtonBar (misma variante normal que las
   acciones de la OT). Acá sólo se coloca el bloque en la fila, sin encoger: el ancho lo cede el
   resumen de horas, que es flexible. El botón POR LÍNEA es .branch-deliver-btn, vive dentro de
   las tarjetas y nunca coincide en pantalla con este. */
.timeline-header-actions[b-1u3781oj2d] {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 8px;
}

/* Legacy styles kept for compatibility */
.timeline-header[b-1u3781oj2d] {
    display: none;
}

.timeline-title[b-1u3781oj2d],
.timeline-subtitle[b-1u3781oj2d] {
    display: none;
}

/* WorkOrder Pills Row - hidden, moved to DynamicPanel */
.workorder-pills-row[b-1u3781oj2d] {
    display: none;
}

.add-wo-btn[b-1u3781oj2d] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FE00E4;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-wo-btn:hover[b-1u3781oj2d] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.wo-header-pill[b-1u3781oj2d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 20px;
    color: #333333;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wo-header-pill:hover[b-1u3781oj2d] {
    background: #F0F4F8;
    border-color: #A0A0A0;
}

.wo-header-pill.active[b-1u3781oj2d] {
    background: #e5b900;
    border-color: transparent;
    color: white;
}

.pill-progress[b-1u3781oj2d] {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wo-header-pill.active .pill-progress[b-1u3781oj2d] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Timeline Container */
.timeline-container[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.timeline-section-title[b-1u3781oj2d] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #3D5676;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #E8E8E8;
}

/* Timeline Loading & Empty */
.timeline-loading[b-1u3781oj2d],
.timeline-empty[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #888888;
}

.loading-spinner[b-1u3781oj2d] {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E8E8;
    border-top-color: #727373;
    border-radius: 50%;
    animation: spin-b-1u3781oj2d 1s linear infinite;
}

@keyframes spin-b-1u3781oj2d {
    to {
        transform: rotate(360deg);
    }
}

/* Timeline List */
.timeline-list[b-1u3781oj2d] {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    border-radius: 15px;
}

.timeline-list[b-1u3781oj2d]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Timeline Item */
/* Layout principal: [fecha | rail | card | avatares] igual que móvil */
.timeline-item[b-1u3781oj2d] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    position: relative;
    min-height: 52px;
}

/* Separación entre el carril y la card */
.timeline-main-content[b-1u3781oj2d] {
    padding-left: 6px;
}

/* Timeline Node — mainline (NONE): siempre el color del tronco, sin ícono */
.timeline-node[b-1u3781oj2d] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s ease;
    z-index: 2;
    background: rgb(var(--c-flow-none));
}

/* Executed/suspended = color del tronco; assigned (pendiente) = gris */
.timeline-node.executed[b-1u3781oj2d],
.timeline-node.suspended[b-1u3781oj2d] {
    background: rgb(var(--c-flow-none));
}

.timeline-node.assigned[b-1u3781oj2d] {
    background: rgb(var(--c-pending) / 0.9);
}

/* Current: ámbar con pulso — proceso en ejecución (aún no terminado) */
.timeline-node.current[b-1u3781oj2d] {
    background: rgb(var(--c-progress));
    box-shadow: 0 0 0 4px rgb(var(--c-progress) / 0.25);
    animation: pulse-b-1u3781oj2d 2s infinite;
}

/* Nodo de bifurcación: mismo tamaño que mainline */
/* El nodo de rama toma el color de SU banda, igual que el carril donde vive. Antes lo decidía
   el BranchType del ítem, así que un paso secuencial dentro de un paralelo pintaba el nodo con
   el color de otra familia — dos ramas hermanas terminaban con nodos de distinto color. */
.timeline-node.node-branch[b-1u3781oj2d] {
    width: 14px;
    height: 14px;
    background: var(--lane-color, rgb(var(--c-parallel)));
}

.current-indicator[b-1u3781oj2d] {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

@keyframes pulse-b-1u3781oj2d {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(255, 179, 71, 0.4);
    }

    50% {
        box-shadow: 0 4px 20px rgba(255, 179, 71, 0.6);
    }
}

@keyframes pulse-inner-b-1u3781oj2d {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.8);
        opacity: 0.8;
    }
}

/* Fecha y hora — columna izquierda, alineada a la derecha hacia el dot */
.timeline-date[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: 48px;
    flex-shrink: 0;
    padding-top: 20px;
    /* alineado con el nodo posicionado a top:26px */
    padding-right: 4px;
}

/* Card + avatares — toma el espacio restante */
.timeline-main-content[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 4px;
    padding-bottom: 4px;
    padding-top: 6px;
    min-width: 0;
    position: relative;
}

.date-text[b-1u3781oj2d] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #3D5676;
}

.time-text[b-1u3781oj2d] {
    font-size: 0.65rem;
    color: #888888;
}


/* Timeline Card */
.timeline-card[b-1u3781oj2d] {
    background: #F8F9FA;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid #E8E8E8;
    transition: all 0.2s ease;
    position: relative;
}

/* Fondos OPACOS (no translúcidos) para que la banda quede oculta bajo la card
   y no se vea a través de ella. */
/* ── Color de la tarjeta = color de SU línea ──────────────────────────────────
   El estado NO cambia el matiz, sólo la intensidad: pasado tenue, vigente pleno,
   pendiente casi apagado. Antes el matiz codificaba el estado —azul para ejecutado,
   naranja para vigente— y eso pisaba la identidad de la rama: todos los procesos
   pasados salían del mismo azul, viniera del tronco o de cualquier rama.

   Un solo canal, un solo significado: el matiz dice DE QUÉ LÍNEA es; la intensidad
   dice EN QUÉ MOMENTO está. --lane-color lo publica la fila desde su banda.

   color-mix mantiene una sola fuente de color por rama: los tonos se derivan acá y
   no hay que declarar una variante por rama y por estado. */
/* Suspended va junto a executed: para el usuario ya pasó.
   `suspended` es el estado del proceso que ABRIÓ un fork y espera a sus hijos — el nodo, el
   carril y el checkmark ya lo trataban como "ya pasó", pero la tarjeta no tenía regla y caía al
   `#F8F9FA` del default. Resultado: justo la tarjeta de la bifurcación —la más importante de leer,
   porque es donde el flujo se abre— salía BLANCA, sin el color de su línea, como si no perteneciera
   a ninguna. Un estado que existe en tres superficies y falta en la cuarta siempre se ve así. */
.timeline-card.executed[b-1u3781oj2d],
.timeline-card.suspended[b-1u3781oj2d] {
    background: color-mix(in srgb, var(--lane-color, #4E75CD) 10%, #FFFFFF);
    border-color: color-mix(in srgb, var(--lane-color, #4E75CD) 30%, #FFFFFF);
}

.timeline-card.current[b-1u3781oj2d] {
    background: color-mix(in srgb, var(--lane-color, #FFB347) 20%, #FFFFFF);
    border-color: color-mix(in srgb, var(--lane-color, #FFB347) 65%, #FFFFFF);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--lane-color, #FFB347) 22%, transparent);
}

/* Pendiente: apenas un velo del color de la línea. Lleva su identidad —ya se sabe en qué
   rama va a ocurrir— pero sin competir con lo que de verdad está pasando ahora. */
.timeline-card.assigned[b-1u3781oj2d] {
    background: color-mix(in srgb, var(--lane-color, #94A3B8) 5%, #F8F9FA);
    border-color: color-mix(in srgb, var(--lane-color, #94A3B8) 22%, #FFFFFF);
    border-style: dashed;
}

/* Efecto opaco/deshabilitado en el contenido interior del card para mantener la legibilidad y ocultar el carril exterior */
.timeline-card.assigned>*[b-1u3781oj2d] {
    opacity: 0.55;
    filter: grayscale(15%);
    transition: all 0.2s ease;
}

.timeline-card.assigned:hover>*[b-1u3781oj2d] {
    opacity: 0.85;
    filter: grayscale(0%);
}

.card-header[b-1u3781oj2d] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 42px;
}

.timeline-card.current .card-header[b-1u3781oj2d] {
    padding-right: 85px;
}

.process-icon[b-1u3781oj2d] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.process-icon img[b-1u3781oj2d] {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.process-icon svg[b-1u3781oj2d] {
    color: #888888;
}

.process-info[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.process-reason[b-1u3781oj2d],
.process-observations[b-1u3781oj2d] {
    margin-top: 2px;
}

.process-name[b-1u3781oj2d] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3D5676;
}

.process-delay-tag[b-1u3781oj2d] {
    display: inline-block;
    width: fit-content;
    margin-top: 2px;
    padding: 1px 7px;
    background: var(--st-delay-color, #E03D3D);
    color: #ffffff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
}

/* Blanco sobre tarjeta clara: era invisible. Nunca se noto porque la consulta GraphQL del
   timeline no pedia toReason, asi que el motivo jamas llegaba al cliente. */
.process-reason[b-1u3781oj2d] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #5A6B85;
}

.process-observations[b-1u3781oj2d] {
    font-size: 0.65rem;
    color: #888888;
}

/* Selector de responsable flotante (item current) — dentro de timeline-main-content (position:relative) */
.card-responsible-selector[b-1u3781oj2d] {
    position: absolute;
    top: 14px;
    right: 8px;
    z-index: 20;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Marca de "plan, no custodia". Sustituye al rotulo "Planificado", que competia en peso con el
   titulo del proceso y repetia lo que la tarjeta ya dice en texto. */
.planned-worker-hint[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #9AA3BF;
    transition: color 0.15s ease;
}

.timeline-main-content:hover .planned-worker-hint[b-1u3781oj2d] {
    color: #677BC4;
}

/* Guardando: el mismo hueco pasa a spinner para que el avatar no se mueva de sitio. */
.planned-worker-hint.saving[b-1u3781oj2d] {
    width: 12px;
    height: 12px;
    margin: 2px;
    border: 2px solid rgba(103, 123, 196, 0.25);
    border-top-color: #677BC4;
    border-radius: 50%;
    animation: spin-b-1u3781oj2d 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .planned-worker-hint.saving[b-1u3781oj2d] {
        animation: none;
    }
}

/* Avatar del responsable en esquina superior derecha de la tarjeta */
.card-person-avatar[b-1u3781oj2d] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #E8E8E8;
    background: linear-gradient(135deg, #5CA943, #4a8f35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 10;
}

.card-person-avatar img[b-1u3781oj2d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-person-avatar svg[b-1u3781oj2d] {
    width: 16px;
    height: 16px;
    color: rgba(0, 0, 0, 0.3);
}

.card-person-avatar-initials[b-1u3781oj2d] {
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    line-height: 1;
    user-select: none;
}



/* Action Icons: ocultos temporalmente, aún no son funcionales */
.action-icons[b-1u3781oj2d] {
    display: none;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E8E8E8;
}

.action-btn[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-1u3781oj2d] {
    background: #e5b900;
    color: white;
    border-color: #e5b900;
}

/* Branch Container - Ramificaciones */
.branch-container[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 20px;
    position: relative;
}

.branch-container[b-1u3781oj2d]::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E0E0E0;
}

.branch-item[b-1u3781oj2d] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.branch-line[b-1u3781oj2d] {
    display: flex;
    align-items: center;
    position: relative;
}

.branch-horizontal[b-1u3781oj2d] {
    width: 20px;
    height: 2px;
    background: #E0E0E0;
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
}

.branch-node[b-1u3781oj2d] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid #ffc107;
    border-radius: 50%;
    color: #ffc107;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.branch-count[b-1u3781oj2d] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #4ecdc4;
}

.branch-content[b-1u3781oj2d] {
    flex: 1;
    padding: 6px 12px;
    background: #F0F4F8;
    border-radius: 8px;
    border: 1px solid #E0E8F0;
}

.branch-text[b-1u3781oj2d] {
    font-size: 0.75rem;
    color: #555555;
    line-height: 1.4;
}

/* Status Tag Container */
.status-tag-container[b-1u3781oj2d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 20px;
}

.status-tag[b-1u3781oj2d] {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
}

.status-tag.pending[b-1u3781oj2d] {
    background: rgba(255, 179, 71, 0.15);
    color: #E69900;
    border: 1px solid rgba(255, 179, 71, 0.3);
}

/* Timeline Avatars */
.timeline-avatars[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 4px;
}

.avatar[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #E8E8E8;
    background: #F5F5F5;
}

.avatar img[b-1u3781oj2d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar.placeholder[b-1u3781oj2d] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.3);
}

.avatar.secondary[b-1u3781oj2d] {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border-color: #4ecdc4;
}

/* Expanded Content inside Card */
.timeline-card[b-1u3781oj2d] {
    cursor: pointer;
}

.timeline-card.expanded[b-1u3781oj2d] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-expanded-content[b-1u3781oj2d] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #E8E8E8;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expand-section[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expand-header[b-1u3781oj2d] {
    font-size: 0.7rem;
    font-weight: 700;
}

.expand-row[b-1u3781oj2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expand-name[b-1u3781oj2d] {
    font-size: 0.8rem;
    color: #1F2F45;
    font-weight: 500;
    max-width: 80%;
    line-height: 1.2;
}

.expand-avatar[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid;
    overflow: hidden;
    background: #FFFFFF;
    flex-shrink: 0;
}

.expand-avatar img[b-1u3781oj2d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.expand-avatar-initials[b-1u3781oj2d] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none;
    background: linear-gradient(135deg, #5CA943, #4a8f35);
    border-radius: 50%;
}

.expand-divider[b-1u3781oj2d] {
    height: 1px;
    background: #E8E8E8;
    opacity: 0.5;
    margin: 4px 0;
}

.evidence-badge[b-1u3781oj2d] {
    position: absolute;
    top: 8px;
    right: 78px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #64748b;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    z-index: 2;
    transition: all 0.2s ease;
}

.timeline-card.current .evidence-badge[b-1u3781oj2d] {
    right: 95px;
}

.timeline-card.expanded .evidence-badge[b-1u3781oj2d] {
    opacity: 0;
    visibility: hidden;
}

/* ── Rondas: el vehículo se revisó y estaba al día ──
   Insignia de la tarjeta colapsada. Se corre a la izquierda de la de evidencias cuando ambas
   conviven, para que no se monten (la de evidencias vive en right: 78px / 95px si es la vigente). */
.round-check-badge[b-1u3781oj2d] {
    position: absolute;
    top: 8px;
    right: 78px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #047857;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 600;
    border: 1px solid #a7f3d0;
    z-index: 2;
    transition: all 0.2s ease;
}

.round-check-badge.with-photos[b-1u3781oj2d] {
    right: 138px;
}

.timeline-card.current .round-check-badge[b-1u3781oj2d] {
    right: 95px;
}

.timeline-card.current .round-check-badge.with-photos[b-1u3781oj2d] {
    right: 155px;
}

.timeline-card.expanded .round-check-badge[b-1u3781oj2d] {
    opacity: 0;
    visibility: hidden;
}

/* Línea de tiempo propia de la ronda, dentro del detalle del proceso. */
.round-check-list[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.round-check-item[b-1u3781oj2d] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.round-check-rail[b-1u3781oj2d] {
    position: relative;
    width: 10px;
    flex: 0 0 10px;
    display: flex;
    justify-content: center;
}

/* El riel se dibuja con el borde del propio carril: así la línea nace y muere con la lista, sin
   sobresalir por debajo del último paso. */
.round-check-item:not(:last-child) .round-check-rail[b-1u3781oj2d]::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: -2px;
    width: 2px;
    background: #a7f3d0;
}

.round-check-dot[b-1u3781oj2d] {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #10b981;
    flex: 0 0 8px;
    z-index: 1;
}

.round-check-body[b-1u3781oj2d] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 8px;
}

.round-check-moment[b-1u3781oj2d] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #047857;
    letter-spacing: 0.02em;
}

.round-check-text[b-1u3781oj2d] {
    font-size: 0.75rem;
    color: #1F2F45;
}

.round-check-author[b-1u3781oj2d] {
    font-size: 0.7rem;
    color: #64748b;
}

.round-check-gallery[b-1u3781oj2d] {
    flex-basis: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-top: 4px;
    scrollbar-width: none;
}

.round-check-thumb[b-1u3781oj2d] {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #a7f3d0;
    line-height: 0;
    transition: transform 0.2s ease;
}

.round-check-thumb:hover[b-1u3781oj2d] {
    transform: scale(1.04);
}

.round-check-thumb img[b-1u3781oj2d] {
    height: 62px;
    width: auto;
    max-width: 110px;
    object-fit: cover;
}

.round-check-note[b-1u3781oj2d] {
    flex-basis: 100%;
    font-size: 0.7rem;
    color: #64748b;
    font-style: italic;
}

.timeline-panel.dark-gold-theme .round-check-text[b-1u3781oj2d] {
    color: #eae6da;
}

.timeline-panel.dark-gold-theme .round-check-moment[b-1u3781oj2d] {
    color: #5CA943;
}

.timeline-panel.dark-gold-theme .round-check-author[b-1u3781oj2d],
.timeline-panel.dark-gold-theme .round-check-note[b-1u3781oj2d] {
    color: rgba(234, 230, 218, 0.65);
}

/* ── Evidence Thumbnail with Zoom Icon ── */
.evidence-thumb[b-1u3781oj2d] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.evidence-thumb:hover[b-1u3781oj2d] {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.evidence-zoom-icon[b-1u3781oj2d] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.evidence-thumb:hover .evidence-zoom-icon[b-1u3781oj2d] {
    opacity: 1;
}

.store-badge[b-1u3781oj2d] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.store-badge.in-store[b-1u3781oj2d] {
    background-color: rgba(72, 187, 120, 0.15);
    color: #38a169;
}

.store-badge.out-store[b-1u3781oj2d] {
    background-color: rgba(229, 62, 62, 0.15);
    color: #e53e3e;
}

.store-badge.row-badge[b-1u3781oj2d] {
    font-size: 0.64rem;
    font-weight: 700;
    background-color: #DD9004;
    color: #FFFFFF;
    border-radius: 999px;
    padding: 3px 8px 1px;
    line-height: 1;
    letter-spacing: 0.04em;
    margin-right: auto;
}

/* ── Sistema de carriles (branching) ────────────────────────────────────── */

/* Reemplaza .timeline-line cuando hay ramificaciones activas */
.timeline-rail[b-1u3781oj2d] {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    position: relative;
    min-width: 35px;
    width: 35px;
    overflow: visible;
}

/* Cada carril es una columna vertical */
.rail-lane[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 18px;
    width: 18px;
    position: relative;
    overflow: visible;
}

.rail-main[b-1u3781oj2d] {
    order: 1;
}

.rail-branch[b-1u3781oj2d] {
    order: 2;
}

/* Segmentos de línea: llenan el alto disponible como fondo continuo */
.rail-segment[b-1u3781oj2d] {
    width: 3px;
    border-radius: 0;
}

/* El segmento superior siempre debe terminar en el centro del nodo (33px) */
.rail-lane .rail-segment.segment-upper[b-1u3781oj2d] {
    flex: 0 0 33px;
    min-height: 33px;
}

/* El segmento inferior toma el resto del espacio */
.rail-lane .rail-segment.segment-lower[b-1u3781oj2d] {
    flex: 1;
    min-height: 8px;
}

/* El nodo se posiciona de forma absoluta a un offset fijo desde el top del ítem
   para que siempre quede alineado con el encabezado de la tarjeta,
   independientemente del alto total del ítem. */
.timeline-node[b-1u3781oj2d] {
    position: absolute !important;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.timeline-node.node-branch[b-1u3781oj2d] {
    /* La rama tiene el mismo top fijo */
    top: 26px;
}

/* Colores de segmento.
   NOTA de nombres: las clases `*-green` conservan el nombre histórico pero ya NO pintan verde —
   pintan el color del TRONCO (--c-flow-none), hoy azul. El nombre describe el rol (flujo normal),
   no el tono; renombrarlas tocaría el resolver, el razor y el closer-* derivado sin cambiar nada
   visible. Si alguna vez se renombran, que sea a `segment-flow` / `conn-flow` / `stroke-flow`. */
.segment-green[b-1u3781oj2d] {
    background: rgb(var(--c-flow-none));
}

.segment-yellow[b-1u3781oj2d] {
    background: rgb(var(--c-parallel));
}

.segment-program[b-1u3781oj2d] {
    background: rgb(var(--c-pending) / 0.4);
}

/* tenue: tronco atenuado — mainline pass-through cuando la rama ya fue ejecutada (igual que MainlineTenue en móvil) */
.segment-tenue[b-1u3781oj2d] {
    background: rgb(var(--c-flow-none) / 0.45);
}

/* hidden: oculta el segmento por completo. Se conserva para casos que de verdad no deben dibujar
   nada; NO se usa para dependencias — ver segment-waiting. */
.rail-segment.segment-hidden[b-1u3781oj2d] {
    background: transparent !important;
}

/* waiting: el tronco existe pero está DETENIDO esperando que una dependencia retorne.
   Punteado y atenuado — "esto sigue acá y va a continuar", no "esto no existe".
   Ocultarlo cortaba la línea y dejaba el nodo de cierre flotando, desconectado del historial.
   El punteado además lo separa del PARALLEL, cuyo tronco corre sólido porque sí avanza.

   Va en el color del TRONCO, no en el de la dependencia. Esta línea ES el tronco: lo único que
   cambia es su estado (detenido), y el estado se dice con la forma —punteado— y la intensidad,
   nunca con el color. Pintarla del color de la rama le ponía al tronco la identidad de otra
   línea: en pantalla la principal aparecía de color de rama y la rama parecía seguir en el color
   del tronco. Justo al revés de lo que el dibujo tiene que contar. */
.rail-segment.segment-waiting[b-1u3781oj2d] {
    background: repeating-linear-gradient(
        to bottom,
        rgb(var(--c-flow-none) / 0.55) 0 5px,
        transparent 5px 10px
    ) !important;
}

/* Placeholder visual para el espacio del nodo en el pass-through de mainline */
.rail-pass-through[b-1u3781oj2d] {
    width: 3px;
    height: 32px;
    flex-shrink: 0;
    align-self: center;
}

/* Carril de rama: el color lo publica la fila como --lane-color, derivado de la BANDA.
   El gris de reserva sólo aplica cuando no hay banda (datos previos al grafo).

   Antes el color salía de .branch-parallel / .branch-dependency, clases que vienen del
   BranchType del ÍTEM. Un paso secuencial dentro de un paralelo tiene BranchType NONE, así
   que no matcheaba ninguna y caía a este gris — una rama viva se cortaba a gris de pendiente
   en el medio. La rama es una sola cosa y tiene un solo color: el de su banda. */
.rail-branch .rail-segment[b-1u3781oj2d] {
    background: var(--lane-color, rgb(var(--c-pending) / 0.5));
}

/* Paso todavía no ejecutado DENTRO de una rama: el mismo color de la rama, muy atenuado.
   Estaba en gris, y pasar a gris CAMBIA el color justo donde el usuario sigue la rama con la
   vista — la línea perdía su identidad al llegar a lo pendiente. El estado se comunica con la
   opacidad; el color siempre dice a qué rama pertenece el tramo.
   El gris de reserva sólo queda para filas sin banda (datos previos al grafo). */
.rail-branch .rail-segment.segment-program[b-1u3781oj2d] {
    background: var(--lane-color, rgb(var(--c-pending) / 0.5));
    opacity: 0.28;
}

/* Opener: el segmento de rama empieza en y=60 (debajo del bezier SVG) */
.rail-branch-opener[b-1u3781oj2d] {
    position: relative;
    padding-top: 60px;
}

/* Ocultar segmento superior en el opener para que la línea no nazca antes de la curva */
.rail-branch-opener .segment-upper[b-1u3781oj2d] {
    display: none !important;
}

/* Entrada de rama: la curva entra por arriba (top:-10px, alto 20px), así que aterriza a 10px del
   borde de la fila. El segmento recto arrancaba en 0 y asomaba por encima de la curva — ese
   pedacito suelto que sobresalía del carril. Se lo hace nacer donde la curva termina, y se le
   descuenta ese mismo alto para que el trazo siga llegando exacto al centro del nodo (33px). */
.rail-lane.rail-branch-entry .rail-segment.segment-upper[b-1u3781oj2d] {
    margin-top: 10px;
    flex: 0 0 23px !important;
    min-height: 23px !important;
}

/* Closer: segmento que da altura al inicio de la rama */
.rail-branch-closer[b-1u3781oj2d] {
    position: relative;
}

/* Forzar a que el segmento recto del closer mida exactamente 6px y no cruce la curva */
.rail-lane.rail-branch-closer .rail-segment.segment-upper[b-1u3781oj2d] {
    flex: 0 0 6px !important;
    min-height: 6px !important;
}

/* Ocultar el segmento inferior en el closer para que la línea no continúe hacia abajo como si fuera un parche */
.rail-branch-closer .segment-lower[b-1u3781oj2d] {
    display: none !important;
}

/* El segmento de 6px del cierre lleva el color de la rama que converge —el que la fila publica en
   --lane-color— y ya lo hereda de `.rail-branch .rail-segment`, sin regla propia.

   Acá vivían dos selectores, `.closer-segment-green` y `.closer-segment-yellow`, que dependían de
   que el resolver emitiera esas clases de color para el cierre. Hoy el cierre sólo emite
   INTENSIDAD: "" cuando ya ocurrió (color pleno) y `segment-program` cuando todavía no. Ninguna de
   las dos clases se genera nunca, así que las reglas no matcheaban nada. */

/* SVG bezier curves — el color se pasa inline desde Razor */
.branch-curve-svg[b-1u3781oj2d] {
    position: absolute;
    top: 0;
    left: -9px;
    width: 18px;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* SVG opener: posicionado a 40px (borde inferior del nodo) */
.branch-curve-svg-opener[b-1u3781oj2d] {
    position: absolute;
    top: 40px;
    left: -9px;
    width: 18px;
    height: 20px;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* SVG de entrada: la rama arranca lejos del proceso que la abrió, así que la curva se dibuja
   en la PROPIA fila de la rama y no en la del padre. Va arriba del nodo —el tramo que conecta
   con el tronco— en vez de debajo, que es donde la pinta el opener por adyacencia. */
.branch-curve-svg-entry[b-1u3781oj2d] {
    position: absolute;
    top: -10px;
    left: -9px;
    width: 18px;
    height: 20px;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* SVG closer: posicionado a 6px */
.branch-curve-svg-closer[b-1u3781oj2d] {
    position: absolute;
    top: 6px;
    left: -9px;
    width: 18px;
    height: 20px;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* Color del trazo de las curvas SVG (opener/closer). La clase la decide
   TimeLineWebSegmentResolver; aquí solo se mapea al color de la paleta. */
.branch-stroke-green[b-1u3781oj2d] {
    stroke: rgb(var(--c-flow-none));
}

/* NOTA de nombres: `blue` y `gold` son históricos. Hoy son el acento del TIPO (dependency /
   parallel) y su tono lo fija --c-dependency / --c-parallel, que ya no son azul y dorado
   necesariamente. El color de un CARRIL nunca sale de acá: sale de la paleta por slot. */
.branch-stroke-blue[b-1u3781oj2d] {
    stroke: rgb(var(--c-dependency));
}

/* Retorno anticipado de una dependencia todavía abierta: la vuelta va a ocurrir, pero no ocurrió.
   Lleva el color de SU PROPIA rama —el que publica la fila en --lane-color— y sólo baja de
   intensidad, con guiones para reforzar que es una promesa y no un hecho.

   Estaba clavado a --c-dependency, de cuando el color codificaba el TIPO de rama. Con la paleta
   actual el color identifica a la rama concreta, así que un valor fijo hacía que el retorno de
   una dependencia se dibujara en un color que no era el de su propia línea. */
.branch-stroke-future[b-1u3781oj2d] {
    stroke: var(--lane-color, rgb(var(--c-flow-none)));
    stroke-opacity: 0.45;
    stroke-dasharray: 4 4;
}

.branch-stroke-gold[b-1u3781oj2d] {
    stroke: rgb(var(--c-parallel));
}

.branch-stroke-gray[b-1u3781oj2d] {
    stroke: rgb(var(--c-pending) / 0.5);
}

/* Items de rama con card levemente indentada */
.timeline-item.branch-depth-1 .timeline-content-wrapper[b-1u3781oj2d] {
    padding-left: 0;
}

.timeline-item.branch-depth-2 .timeline-content-wrapper[b-1u3781oj2d] {
    padding-left: 0;
}

/* Banda clara (GitKraken-style) estirada del punto al inicio de la card.
   Anclada en el nodo (left:50%); el sobrante queda oculto bajo la card.
   Tono claro para que el punto (z-index 2) se vea encima. */
.node-connector[b-1u3781oj2d] {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 130px;
    height: 14px;
    border-radius: 7px;
    z-index: 1;
    pointer-events: none;
}

.node-connector.conn-green[b-1u3781oj2d] {
    background: rgb(var(--c-flow-none) / 0.22);
}

/* Banda de una rama: su propio color, atenuado. Un solo tono para toda la rama —carril, nodo,
   curvas y banda— sea cual sea su tipo. */
.node-connector.conn-lane[b-1u3781oj2d] {
    background: var(--lane-color, rgb(var(--c-pending)));
    opacity: 0.28;
}

/* Históricas: ya no las devuelve GetConnectorClass, se conservan por si algún consumidor externo
   todavía las emite. El color de un carril no sale de acá. */
.node-connector.conn-blue[b-1u3781oj2d] {
    background: rgb(var(--c-dependency) / 0.25);
}

.node-connector.conn-gold[b-1u3781oj2d] {
    background: rgb(var(--c-parallel) / 0.30);
}

.node-connector.conn-gray[b-1u3781oj2d] {
    background: rgb(var(--c-pending) / 0.28);
}

.node-connector.conn-progress[b-1u3781oj2d] {
    background: rgb(var(--c-progress) / 0.25);
}

/* La card va por encima de la banda para ocultar el sobrante */
.timeline-card[b-1u3781oj2d] {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Acento de color al inicio de la card desactivado según solicitud del usuario */
.timeline-card.conn-green[b-1u3781oj2d]::after,
.timeline-card.conn-lane[b-1u3781oj2d]::after,
.timeline-card.conn-blue[b-1u3781oj2d]::after,
.timeline-card.conn-gold[b-1u3781oj2d]::after,
.timeline-card.conn-gray[b-1u3781oj2d]::after,
.timeline-card.conn-progress[b-1u3781oj2d]::after {
    display: none;
}

/* Las cards de rama no ejecutadas ya no se desvanecen */
.timeline-item.is-branch-row.assigned .timeline-card[b-1u3781oj2d] {
    opacity: 1;
}

/* El acento de color al inicio de la card lo maneja .timeline-card.conn-*::after */

/* El nodo de una rama es el color de SU carril y de nada más.
   Estas reglas lo pintaban con --c-dependency, el acento del TIPO, mientras el carril y las curvas
   ya salían de la banda (por slot). Con un paralelo no se notaba —el acento de parallel y el slot 0
   son el mismo dorado, coinciden por casualidad—, pero en una dependencia el punto salía violeta y
   su propia línea de otro color: una sola rama contada en dos colores.

   Además apuntaban a `.completed`, una clase que el razor NUNCA emite (los estados son executed /
   suspended / current / assigned), así que el nodo ejecutado ni siquiera llegaba acá: caía en
   `.timeline-node.executed` y salía del color del TRONCO. El punto de una rama pintado como si
   fuera la línea principal.

   El estado sigue en el hueco del pendiente y en el halo del vigente — forma e intensidad, no tono. */
.timeline-node.node-branch.assigned[b-1u3781oj2d],
.timeline-node.node-branch.pending[b-1u3781oj2d] {
    background: #fff;
    border: 3px solid var(--lane-color, rgb(var(--c-pending)));
}

/* ── Contenedor de badges de tiempo ── */
.process-time-badges[b-1u3781oj2d] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #E8E8E8;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.process-time-badges.no-reason[b-1u3781oj2d] {
    margin-top: 4px;
}

/* Badge item — inline compacto con separador */
.time-badge-item[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: default;
}

.time-badge-separator[b-1u3781oj2d] {
    color: #CBD5E1;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 0 2px;
    display: inline-flex;
    align-items: center;
}

.badge-value[b-1u3781oj2d] {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.badge-label[b-1u3781oj2d] {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: #64748B;
}

/* Azul claro — tiempo en bandeja (según diseño de la imagen) */
.time-badge-item.unworked .badge-value[b-1u3781oj2d] {
    background-color: #EBF3FD;
    color: #2563EB;
}

/* Verde suave — tiempo trabajado (según diseño de la imagen) */
.time-badge-item.worked .badge-value[b-1u3781oj2d] {
    background-color: #E8F7EC;
    color: #16A34A;
}

/* Rojo — tiempo excedido */
.time-badge-item.exceeded .badge-value[b-1u3781oj2d] {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* ── Summary Header: cards + assign button in one row ── */
.timeline-panel-header[b-1u3781oj2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    padding: 0 8px 4px 0;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* ── Summary Stats Section ── */
.summary-cards[b-1u3781oj2d] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    flex: 3;
}

.summary-stat[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    padding: 0 8px;
}

.summary-divider[b-1u3781oj2d] {
    width: 1px;
    height: 28px;
    background: #D0D0D0;
    flex-shrink: 0;
}

.summary-value[b-1u3781oj2d] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F2F45;
    line-height: 1.2;
    text-align: center;
}

.summary-label[b-1u3781oj2d] {
    font-size: 0.65rem;
    font-weight: 500;
    color: #6B7C93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Color por tipo (alineado con pildoritas de tiempo en las tarjetas) */
.summary-stat:nth-child(1) .summary-value[b-1u3781oj2d] {
    color: #2563EB;
    /* Azul vibrante: Total en bandeja */
}

.summary-stat:nth-child(3) .summary-value[b-1u3781oj2d] {
    color: #16A34A;
    /* Verde intenso: Total trabajado */
}

.summary-stat:nth-child(5) .summary-value[b-1u3781oj2d] {
    color: #E69900;
}

/* Tarjeta placeholder: siguiente proceso por asignar */
[b-1u3781oj2d] .timeline-card.placeholder-item {
    pointer-events: none;
    border-color: #e2e8f0;
    background: white;
    /* fondo sólido para tapar el node-connector detrás */
}

/* La opacidad va solo en los hijos, no en el card completo,
   así el fondo blanco sigue tapando el conector */
[b-1u3781oj2d] .timeline-card.placeholder-item>* {
    opacity: 0.45;
}

[b-1u3781oj2d] .timeline-card.placeholder-item .process-name {
    color: #94a3b8;
    font-style: italic;
}

[b-1u3781oj2d] .timeline-card.placeholder-item .process-reason {
    color: #ffffff;
}

/* Primer item: sin línea gris desde arriba */

/* Primer item: línea inicia desde el nodo hacia abajo, sin espacio arriba */

/* Eliminar la línea gris arriba del primer punto */
/* Primer item: segment-upper colapsado a 0 — la línea comienza en el nodo */
.timeline-item.first .rail-segment.segment-upper[b-1u3781oj2d] {
    flex: 0 0 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* Primer item: segment-lower comienza desde el centro del nodo (igual que segment-upper = 33px) */
.timeline-item.first .segment-lower[b-1u3781oj2d] {
    margin-top: 33px !important;
}

/* Primer item: alinear nodo y segment-lower al top, sin centrado */

/* Indicadores de inicio (verde) y fin (rojo) — círculo pequeño encima del nodo */
.timeline-node.node-start[b-1u3781oj2d]::after,
.timeline-node.node-end[b-1u3781oj2d]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.timeline-node.node-start[b-1u3781oj2d] {
    position: relative;
}

.timeline-node.node-start[b-1u3781oj2d]::after {
    background: #57AB3B;
}

.timeline-node.node-end[b-1u3781oj2d] {
    position: relative;
}

.timeline-node.node-end[b-1u3781oj2d]::after {
    background: #D33B9B;
}
/* ── Banda de rama (swimlane) ─────────────────────────────────────────────
   Agrupa visualmente los ítems que pertenecen a la misma rama del grafo,
   incluidos los pasos todavía pendientes. El rango lo calcula
   TimeLineBranchBandResolver (shared), así que web y MAUI agrupan igual.
   El color codifica el TIPO de rama; el estado (verde/ámbar/gris) sigue
   viviendo en el nodo y el conector — un canal, un significado. */
/* Sin filete ni fondo por ítem. La pertenencia a una rama ya la dice el carril del grafo —que es
   continuo y se lee de un vistazo— y ahora también el color de la propia tarjeta. Repetirlo con
   una barra pegada a cada ítem sumaba una tercera señal para el mismo dato y ensuciaba el dibujo,
   que es justo lo que quedó limpio. */
.timeline-item.in-branch-band .timeline-main-content[b-1u3781oj2d] {
    position: relative;
    border-radius: 0;
}

/* Respiro en los extremos para que la banda se lea como un bloque continuo
   y no como bordes sueltos fila a fila. */
/* El respiro en los extremos existía para que el filete de banda se leyera como un bloque
   continuo. Sin filete no tiene a qué servir, y desalineaba la tarjeta de su nodo. */

/* ── Badge de tipo de rama ───────────────────────────────────────────────── */
.branch-badge[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    vertical-align: middle;
    white-space: nowrap;
    color: rgb(var(--c-parallel));
    background: rgb(var(--c-parallel) / 0.14);
    border: 1px solid rgb(var(--c-parallel) / 0.30);
}

.branch-badge.branch-dependency[b-1u3781oj2d] {
    color: rgb(var(--c-dependency));
    background: rgb(var(--c-dependency) / 0.14);
    border-color: rgb(var(--c-dependency) / 0.30);
}

/* Paso que exige convergencia: la mainline no avanza hasta que las ramas
   vigentes retornen (IsParallelSync en el proceso destino). */
.branch-badge.badge-sync[b-1u3781oj2d] {
    color: rgb(var(--c-progress));
    background: rgb(var(--c-progress) / 0.14);
    border-color: rgb(var(--c-progress) / 0.30);
}

/* ── Entrega por línea ──────────────────────────────────────────────
   Vive DENTRO de la tarjeta del frente entregable, no en la cabecera del
   panel: con un fork abierto hay varias líneas vivas y la entrega deja de
   ser una acción de la orden para ser una acción de ESTA línea. La cercanía
   física al proceso es lo que evita entregar la rama equivocada.

   El hueco se reserva en toda tarjeta del timeline aunque no lleve botón: es
   lo que mantiene los tiempos de todas las filas en la misma columna. */
.deliver-slot[b-1u3781oj2d] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px;
    height: 26px;
    margin-left: 4px;
}

.branch-deliver-btn[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 13px;
    background: #FE00E4;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(254, 0, 228, 0.25);
    transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.branch-deliver-btn:hover:not(:disabled)[b-1u3781oj2d] {
    background: #e600cc;
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.35);
}

.branch-deliver-btn:disabled[b-1u3781oj2d] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Aviso de selección de rama ──────────────────────────────────────────
   Aparece cuando se pidió entregar sobre una orden bifurcada. Vive dentro del
   timeline a propósito: acá están los botones que responden la pregunta, y acá
   vive la paleta que da color a las ramas. */
.branch-selection-notice[b-1u3781oj2d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 12px 10px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgb(var(--c-parallel) / 0.55);
    background: rgb(var(--c-parallel) / 0.14);
    font-size: 12px;
    line-height: 1.45;
}

.branch-selection-notice-icon[b-1u3781oj2d] {
    display: flex;
    flex: 0 0 auto;
    margin-top: 1px;
    color: rgb(var(--c-parallel));
}

.branch-selection-notice-text[b-1u3781oj2d] {
    flex: 1 1 auto;
}

.branch-selection-notice-close[b-1u3781oj2d] {
    flex: 0 0 auto;
    padding: 0 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
}

.branch-selection-notice-close:hover[b-1u3781oj2d] {
    opacity: 1;
}

/* ── Leyenda de colores ──────────────────────────────────────────────────
   El color es la única señal que separa paralelo de dependencia. Va plegada
   para no robar altura, y sólo se renderiza si la orden tiene ramas. */
.timeline-legend[b-1u3781oj2d] {
    margin: 0 12px 10px 12px;
    font-size: 11px;
}

.timeline-legend-summary[b-1u3781oj2d] {
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
    opacity: 0.75;
}

.timeline-legend-summary[b-1u3781oj2d]::-webkit-details-marker {
    display: none;
}

.timeline-legend-summary[b-1u3781oj2d]::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}

.timeline-legend[open] .timeline-legend-summary[b-1u3781oj2d]::before {
    content: "▾ ";
}

.timeline-legend-body[b-1u3781oj2d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 6px 0 2px 12px;
}

.timeline-legend-item[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.timeline-legend-swatch[b-1u3781oj2d] {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.timeline-legend-swatch.swatch-mainline[b-1u3781oj2d] {
    background: rgb(var(--c-flow-none));
}

.timeline-legend-swatch.swatch-parallel[b-1u3781oj2d] {
    background: rgb(var(--c-parallel));
}

.timeline-legend-swatch.swatch-dependency[b-1u3781oj2d] {
    background: rgb(var(--c-dependency));
}

.timeline-legend-swatch.swatch-pending[b-1u3781oj2d] {
    background: rgb(var(--c-pending));
}

/* ── Tramo de carril "futuro" ────────────────────────────────────────────
   Va por debajo del nodo vigente de una rama, donde todavía no ocurrió nada.
   Conserva el color de la rama y sólo baja la opacidad: con dos o tres carriles
   bajando a la vez, pintarlos grises los vuelve indistinguibles entre sí y se
   pierde justo la información que promete la leyenda. */
/* Futuro = misma línea, menos intensidad. El color dice QUÉ es; la opacidad, CUÁNDO.
   Por eso acá no se toca el background: lo pone --lane-color. */
.segment-lane-future[b-1u3781oj2d] {
    opacity: 0.45;
}



/* ── Vertical de paso ────────────────────────────────────────────────────
   Una rama viva cruzando una fila que no le pertenece. Va posicionada por su
   profundidad, no apilada en el flex: cada rama conserva su columna de punta a
   punta y así se leen como líneas paralelas continuas, al estilo de un grafo de
   ramas. Atenuada, porque en esta fila esa rama no hizo nada. */
.rail-passthrough[b-1u3781oj2d] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
    /* El color lo pone la clase .lane-* del stylesheet global branch-lanes.css.
       No se declara background acá: la regla con scope de Blazor tiene mayor
       especificidad y ganaría siempre, dejando todos los carriles del mismo gris. */
}

/* Acá vivía `opacity: 0.45` FIJO, y esa era la falla: atenuaba toda rama que sólo cruzara la fila.
   La misma rama salía plena en sus filas y apagada en las del tronco, alternando intensidad fila
   por fila como si arrancara y frenara — cuando en el grafo no había cambiado nada.

   La opacidad dice CUÁNDO (pasado, futuro, detenido); el color dice QUÉ línea es. Usar la opacidad
   para marcar de quién es el renglón mezcla las dos cosas y arruina las dos.

   Ahora sólo se atenúa lo que de verdad no avanza: un carril esperando el retorno de una
   dependencia, o un tramo por debajo del último paso de una rama abierta. Lo decide
   TimeLineLanePass.IsAdvancing, el mismo hecho que consume móvil. */
.rail-passthrough.lane-idle[b-1u3781oj2d] {
    opacity: 0.45;
}

/* ── Variante Histórico: oscura + dorada ──────────────────────────────────
   Todo lo de acá es ADITIVO — nada de lo de arriba se modifica ni se borra, y
   estas reglas solo aplican bajo .dark-gold-theme (Inbox nunca la recibe).
   Los colores de línea (--c-flow-none, --c-parallel, --c-dependency, --c-pending,
   --c-progress) NO se tocan: mainline y ramas se ven exactamente igual que en el
   Inbox. Solo cambia el "chrome" de la tarjeta (fondo, ícono, texto de estado). */
.timeline-panel.dark-gold-theme .timeline-content[b-1u3781oj2d] {
    background: transparent;
    border: none;
    box-shadow: none;
}

.timeline-panel.dark-gold-theme .timeline-card[b-1u3781oj2d] {
    background: #232f42;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(74, 158, 234, 0.25), 0 0 14px rgba(74, 158, 234, 0.12);
}

.timeline-panel.dark-gold-theme .process-icon[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    background: #f0ece0;
    outline: 2px solid rgba(74, 158, 234, 0.65);
    outline-offset: 3px;
    box-shadow: 0 0 10px rgba(74, 158, 234, 0.45);
}

.timeline-panel.dark-gold-theme .process-icon svg[b-1u3781oj2d] {
    color: #5a5648;
}

.timeline-panel.dark-gold-theme .process-name[b-1u3781oj2d] {
    color: #eae6da;
    font-size: 0.92rem;
    font-weight: 700;
}

.timeline-panel.dark-gold-theme .card-person-avatar[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.timeline-panel.dark-gold-theme .date-text[b-1u3781oj2d] {
    color: #eae6da;
}

.timeline-panel.dark-gold-theme .time-text[b-1u3781oj2d] {
    color: #a8a29b;
}

.timeline-panel.dark-gold-theme .process-observations[b-1u3781oj2d] {
    color: #a8a29b;
}

.timeline-panel.dark-gold-theme .store-badge.row-badge[b-1u3781oj2d] {
    background-color: #e5b900;
    color: #1c2738;
}

.timeline-panel.dark-gold-theme .time-badge-item.unworked .badge-value[b-1u3781oj2d] {
    background-color: rgba(127, 180, 234, 0.15);
    color: #7fb4ea;
}

.timeline-panel.dark-gold-theme .time-badge-item.worked .badge-value[b-1u3781oj2d] {
    background-color: rgba(143, 209, 122, 0.15);
    color: #8fd17a;
}

.timeline-panel.dark-gold-theme .time-badge-item.exceeded .badge-value[b-1u3781oj2d] {
    background-color: rgba(240, 130, 130, 0.15);
    color: #f08282;
}

.timeline-panel.dark-gold-theme .badge-label[b-1u3781oj2d] {
    color: #8b93a6;
}

.timeline-panel.dark-gold-theme .summary-value[b-1u3781oj2d] {
    color: #eae6da;
}

.timeline-panel.dark-gold-theme .summary-label[b-1u3781oj2d] {
    color: #8b93a6;
}

.timeline-panel.dark-gold-theme .summary-stat:nth-child(1) .summary-value[b-1u3781oj2d] {
    color: #7fb4ea;
}

.timeline-panel.dark-gold-theme .summary-stat:nth-child(3) .summary-value[b-1u3781oj2d] {
    color: #8fd17a;
}

.timeline-panel.dark-gold-theme .summary-stat:nth-child(5) .summary-value[b-1u3781oj2d] {
    color: #e5b900;
}

.timeline-panel.dark-gold-theme .evidence-badge[b-1u3781oj2d] {
    background: #232f42;
    color: #a8a29b;
    border-color: rgba(255, 255, 255, 0.08);
}

.timeline-panel.dark-gold-theme .timeline-legend-summary[b-1u3781oj2d],
.timeline-panel.dark-gold-theme .timeline-legend-item[b-1u3781oj2d] {
    color: #a8a29b;
}

.timeline-panel.dark-gold-theme .expand-name[b-1u3781oj2d] {
    color: #eae6da;
    font-size: 0.72rem;
    font-weight: 500;
    max-width: none;
}

.timeline-panel.dark-gold-theme .card-expanded-content[b-1u3781oj2d] {
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.15);
}

.timeline-panel.dark-gold-theme .expand-divider[b-1u3781oj2d] {
    background: rgba(255, 255, 255, 0.15);
}

/* Fila "etiqueta | nombre .... avatar" en una sola línea, con línea vertical
   entre la etiqueta y el nombre (border-right, sin marcado nuevo). */
.timeline-panel.dark-gold-theme .expand-section[b-1u3781oj2d] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.timeline-panel.dark-gold-theme .expand-header[b-1u3781oj2d] {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: 8px;
    min-width: 68px;
    flex-shrink: 0;
    font-size: 0.6rem;
}

.timeline-panel.dark-gold-theme .expand-row[b-1u3781oj2d] {
    flex: 1;
    min-width: 0;
}

/* Anillo blanco brillante uniforme en los tres avatares — el color por
   sección ya lo dice la etiqueta, el avatar no necesita repetirlo.
   !important porque el color de borde llega como estilo inline por fila. */
.timeline-panel.dark-gold-theme .expand-avatar[b-1u3781oj2d] {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}

.timeline-panel.dark-gold-theme .process-time-badges[b-1u3781oj2d] {
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* ── Reproceso: ambar, no rojo ni verde — esos estan reservados para atrasado / a tiempo. ── */
.process-visit[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 500;
    color: #B45309;
    vertical-align: middle;
    white-space: nowrap;
}

/* La tarjeta NO se tine: conserva el color de su estado. El fondo del tramo va en un pseudo-elemento, no en el background de la fila, para poder desbordar sin mover el contenido. */
.rework-divider[b-1u3781oj2d]::before,
.timeline-item.in-rework[b-1u3781oj2d]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -8px;
    background: #FDF6EE;
    z-index: 0;
    pointer-events: none;
}

/* El contenido tiene que quedar por encima del fondo. El vinculo queda excluido a proposito: es lo
   unico de la fila que va POR DEBAJO del sombreado del tramo. */
.rework-divider > *[b-1u3781oj2d],
.timeline-item.in-rework > *:not(.rework-link)[b-1u3781oj2d] {
    position: relative;
    z-index: 2;
}

/* Y el sombreado se mete entre los dos: encima del vinculo, debajo de las tarjetas. */
.timeline-item.in-rework[b-1u3781oj2d]::before {
    z-index: 1;
}

.rework-divider[b-1u3781oj2d]::before {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.timeline-item.in-rework.rework-end[b-1u3781oj2d] {
    padding-bottom: 8px;
}

.timeline-item.in-rework.rework-end[b-1u3781oj2d]::before {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.summary-value-rework[b-1u3781oj2d] {
    color: #B45309;
}

/* ── Cabecera del tramo: fila propia, el corte debe leerse antes que cualquier tarjeta. ── */
.rework-divider[b-1u3781oj2d] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px 0;
    position: relative;
}

.timeline-list.has-rework-link .rework-divider[b-1u3781oj2d] {
    padding-right: calc(16px + var(--rework-link-lanes, 1) * 10px);
}

.rework-divider-date[b-1u3781oj2d] {
    flex: 0 0 48px;
    width: 48px;
}

.rework-divider-rail[b-1u3781oj2d] {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    min-height: 34px;
}

/* Eje en x=9px, centro en top=16px: donde se juntan las dos mitades del riel de abajo. */
.rework-divider-node[b-1u3781oj2d] {
    position: absolute;
    top: -1px;
    left: 9px;
    transform: translateX(-50%);
}

/* Dos mitades, color del tronco, cada una estirandose hasta el nodo vecino. */
.rework-divider-rail[b-1u3781oj2d]::before {
    content: "";
    position: absolute;
    top: -34px;
    height: 50px;
    left: 9px;
    transform: translateX(-50%);
    width: 3px;
    background: #677BC4;
}

.rework-divider-rail[b-1u3781oj2d]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: -46px;
    left: 9px;
    transform: translateX(-50%);
    width: 3px;
    background: #677BC4;
}

.rework-divider-node[b-1u3781oj2d] {
    z-index: 3;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #F97316;
    color: #F97316;
    z-index: 2;
}

/* 18px izq. = 6px de .timeline-main-content + 12px de la tarjeta: alinea con el nombre del proceso. */
.rework-divider-body[b-1u3781oj2d] {
    flex: 1 1 auto;
    padding: 4px 12px 4px 18px;
    min-width: 0;
}

.rework-divider-line[b-1u3781oj2d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Rellena lo que sobre en la linea del titulo; min-width 0 para que desaparezca si no cabe. */
.rework-divider-line[b-1u3781oj2d]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(249, 115, 22, 0.35);
    min-width: 0;
}

.rework-divider-title[b-1u3781oj2d] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #B45309;
    white-space: nowrap;
}

/* Sin nowrap: con la ventana angosta el texto se desbordaba sobre el canal del conector. */
.rework-divider-path[b-1u3781oj2d] {
    font-size: 0.72rem;
    color: #8A6544;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rework-divider-reason[b-1u3781oj2d] {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #8A6544;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* El riel NO cambia de color en el tramo: un reproceso ocurre dentro del tronco, no abre rama. */

.process-caused-rework[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #B45309;
}

/* ── Vinculo entre quien devolvio el trabajo y quien ya lo habia hecho, compuesto por filas. ──
   El canal se reserva con --rework-link-lanes: cada reproceso dibuja su trazo en un carril
   propio, asi que con dos tramos vivos hace falta el doble de ancho. */
.timeline-list.has-rework-link .timeline-main-content[b-1u3781oj2d] {
    padding-right: calc(16px + var(--rework-link-lanes, 1) * 10px);
}

/* El canal no mueve el selector solo: sin esto queda flotando fuera del borde derecho. */
.timeline-list.has-rework-link .card-responsible-selector[b-1u3781oj2d] {
    right: calc(24px + var(--rework-link-lanes, 1) * 10px);
}

/* Al fondo de la fila, en la misma capa que los fondos: el sombreado del tramo se pinta despues y
   por eso le pasa por encima cuando el reproceso esta desplegado. Sin z-index negativo, que se
   escaparia del contexto de la fila y lo mandaria detras del panel entero. */
.rework-link[b-1u3781oj2d] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    width: 14px;
    border-right: 2px dashed #677BC4;
    pointer-events: none;
    z-index: 0;
}

/* Extremo superior, donde apunta la flecha: la visita anterior a ese mismo proceso. */
.rework-link.link-origin[b-1u3781oj2d] {
    top: 26px;
    border-top: 2px dashed #677BC4;
    border-top-right-radius: 6px;
}

.rework-link.link-origin[b-1u3781oj2d]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -2px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #677BC4;
    border-bottom: 2px solid #677BC4;
    transform: rotate(45deg);
}

/* Extremo inferior: de aqui sale el vinculo, la tarjeta de quien devolvio el trabajo. */
.rework-link.link-target[b-1u3781oj2d] {
    bottom: initial;
    height: 26px;
    border-bottom: 2px dashed #677BC4;
    border-bottom-right-radius: 6px;
}

/* Marcador en las dos tarjetas que el vinculo une. */
.rework-link-dot[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: #677BC4;
    background: rgba(103, 123, 196, 0.12);
    vertical-align: middle;
}

/* ── Colapsable del tramo: nace cerrado, el hecho queda a la vista y el detalle a un clic. ── */
.rework-divider[b-1u3781oj2d] {
    cursor: pointer;
    user-select: none;
}

.rework-divider:hover .rework-divider-title[b-1u3781oj2d] {
    text-decoration: underline;
}

.rework-divider-chevron[b-1u3781oj2d] {
    display: inline-flex;
    align-items: center;
    color: #B45309;
    transition: transform 0.15s ease;
}

.rework-divider.expanded .rework-divider-chevron[b-1u3781oj2d] {
    transform: rotate(90deg);
}

.rework-divider-count[b-1u3781oj2d] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #B45309;
    background: rgba(249, 115, 22, 0.12);
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.timeline-item.rework-hidden[b-1u3781oj2d] {
    display: none;
}

.rework-divider.collapsed[b-1u3781oj2d]::before {
    border-radius: 10px;
}

/* ── Cierre del tramo: fila propia, encima de la tarjeta que retoma el flujo. ── */
.rework-closer[b-1u3781oj2d] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 12px 0;
}

.rework-closer-rail[b-1u3781oj2d] {
    flex-shrink: 0;
    position: relative;
}

.rework-closer-rail[b-1u3781oj2d]::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -14px;
    left: 9px;
    transform: translateX(-50%);
    width: 3px;
    background: #677BC4;
}

.rework-closer-body[b-1u3781oj2d] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-wrap: wrap;
    margin-left: 6px;
    padding: 6px 12px 0 12px;
    border-top: 1px solid rgba(249, 115, 22, 0.30);
    font-size: 0.7rem;
    color: #B45309;
}

.rework-closed-title[b-1u3781oj2d] {
    font-weight: 600;
}

.rework-closed-detail[b-1u3781oj2d] {
    font-weight: 400;
    color: #8A6544;
}

/* ── Uniones ANIDADAS: rama que abre otra rama, y rama que recibe un retorno ──

   Se posicionan contra .timeline-rail, igual que .rail-passthrough, y NO dentro de .rail-branch.
   Ese contenedor es una columna flex que vive en una sola profundidad, así que una fila de rama no
   podía llevar su propia línea y además una curva hacia otra columna: se dibujaba una u otra, y
   como el contenedor se ubica por la columna propia, lo que se perdía era siempre la curva.

   El left/width/top/height los calcula el code-behind (GetNestedCurveStyle / GetNestedStubStyle) a
   partir de la geometría de carriles, para que no puedan desincronizarse de las columnas que unen. */
.rail-nested-curve[b-1u3781oj2d] {
    position: absolute;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* Tramo recto que une la curva anidada con el borde de la fila: sin él la curva flota.
   Son los mismos dos pedacitos que el carril del tronco resuelve con su padding-top de 60px
   (apertura) y su segmento superior de 6px (retorno). */
.rail-nested-stub[b-1u3781oj2d] {
    position: absolute;
    width: 3px;
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
    /* El de la apertura arranca a 60px y llega al borde inferior, así que en una fila corta le
       queda alto cero y desaparece: la curva se ve terminar en el aire. El mínimo es el mismo que
       ya protege a .rail-lane .rail-segment.segment-lower por la misma razón. */
    min-height: 8px;
}
/* /Pages/Home/Components/AssetDetail/TimelineWorkBar.razor.rz.scp.css */
.timeline-work-bar[b-gpnyihmm9h] {
    --work-bar-active: #16a34a;
    --work-bar-idle: #d7dde7;
    --work-bar-warning: #dea301;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e1e5ec;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

.timeline-work-bar__summary[b-gpnyihmm9h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: #566982;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
}

.timeline-work-bar__status[b-gpnyihmm9h] {
    flex: 0 0 auto;
    color: var(--work-bar-active);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.timeline-work-bar__track[b-gpnyihmm9h] {
    display: flex;
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--work-bar-idle);
    box-shadow: inset 0 0 0 1px rgba(51, 77, 110, 0.08);
}

.timeline-work-bar__segment[b-gpnyihmm9h] {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.timeline-work-bar__segment.worked[b-gpnyihmm9h] {
    background: var(--work-bar-active);
}

.timeline-work-bar__segment.idle[b-gpnyihmm9h] {
    background: var(--work-bar-idle);
}

.timeline-work-bar.warning .timeline-work-bar__track[b-gpnyihmm9h],
.timeline-work-bar.warning .timeline-work-bar__segment[b-gpnyihmm9h] {
    background: var(--work-bar-warning);
}

.timeline-work-bar__segment-label[b-gpnyihmm9h] {
    overflow: hidden;
    padding-inline: 2px;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}

.timeline-work-bar.dark[b-gpnyihmm9h] {
    --work-bar-idle: #566173;
    border-top-color: rgba(255, 255, 255, 0.15);
}

.timeline-work-bar.dark .timeline-work-bar__summary[b-gpnyihmm9h] {
    color: #b0b5c1;
}

.timeline-work-bar.dark .timeline-work-bar__status[b-gpnyihmm9h] {
    color: #4ade80;
}

@media (max-width: 520px) {
    .timeline-work-bar__summary[b-gpnyihmm9h] {
        font-size: 0.64rem;
    }

    .timeline-work-bar__segment-label[b-gpnyihmm9h] {
        font-size: 0.46rem;
    }
}
/* /Pages/Home/Components/AssetDetail/WorkOrderDetailPanel.razor.rz.scp.css */
.workorder-detail-panel[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    flex: 1;
    min-width: 280px;
    overflow-y: auto;
    position: relative;
    padding-top: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.workorder-detail-panel[b-rwhcxlm4dx]::-webkit-scrollbar {
    display: none;
}

/* Folder tab header */
.folder-tab-header[b-rwhcxlm4dx] {
    position: absolute;
    top: 0;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 20px;
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    z-index: 2;
    border: 1px solid #E8E8E8;
    border-bottom: none;
}

.folder-tab-title[b-rwhcxlm4dx] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3D5676;
}

/* Unified card */
.unified-card[b-rwhcxlm4dx] {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.unified-card.embedded[b-rwhcxlm4dx] {
    border-radius: 12px;
}

/* 1. Actions row */
.actions-row[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

/* La barra necesita un ancho de LAYOUT (no de contenido) para que su container query
   pueda medirlo: con width: fit-content el containment lo dejaba en cero. */
.wo-action-selector[b-rwhcxlm4dx] {
    flex: 1 1 auto;
    min-width: 0;
}

.delay-inline-block[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    line-height: 1.1;
}

.delay-inline-label[b-rwhcxlm4dx] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #888888;
    letter-spacing: 0.05em;
}

.delay-inline-value[b-rwhcxlm4dx] {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.15;
}

.delay-inline-unit[b-rwhcxlm4dx] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.delay-inline-value.delayed[b-rwhcxlm4dx],
.delay-inline-unit.delayed[b-rwhcxlm4dx] {
    color: #ef4444;
}

.delay-inline-value.on-time[b-rwhcxlm4dx],
.delay-inline-unit.on-time[b-rwhcxlm4dx] {
    color: #10b981;
}

/* 2. Dates row */
.dates-container-row[b-rwhcxlm4dx] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.date-card-box[b-rwhcxlm4dx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: #F8F9FA;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-width: 0;
}

.date-card-box:hover[b-rwhcxlm4dx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Envuelve solo la tarjeta de promesa cuando hay una fecha anterior que mostrar encima. Con
   align-items: flex-end en la fila (ver .dates-container-row), las demas tarjetas —sin chip—
   quedan alineadas por abajo con esta, sin necesidad de tocar su altura. */
.date-card-column[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.date-card-column .date-card-box[b-rwhcxlm4dx] {
    flex: 1;
}

.previous-promise-chip[b-rwhcxlm4dx] {
    align-self: center;
    max-width: 100%;
    padding: 2px 8px;
    border: none;
    border-radius: 999px;
    background: rgba(199, 127, 26, 0.12);
    font-size: 0.68rem;
    font-weight: 600;
    color: #C77F1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.previous-promise-chip:hover[b-rwhcxlm4dx] {
    background: rgba(199, 127, 26, 0.2);
}

/* Borde punteado = fecha sugerida, no confirmada. El color de atraso (si ya hay uno calculado)
   se inyecta por style inline con TrafficLightColorHelper.GetHexColor() — ver GetWoDelayHexColor()
   en el code-behind, mismo patrón que DynamicPanel.razor:439 — y sobreescribe border-color/width
   sin tocar el border-style de aquí. */
.date-card-box.suggested[b-rwhcxlm4dx] {
    border-width: 2px;
    border-style: dashed;
    border-color: #FE00E4;
    /* Fondo suave a juego con el contorno; cuando hay estado de semáforo, el style inline
       lo reemplaza por el mismo color del borde con ~5% de opacidad. */
    background: rgba(254, 0, 228, 0.04);
}

/* El ícono se ancla a la esquina de la tarjeta: la tarjeta es flex en columna y no debe
   reacomodarse por agregarlo. */
.date-card-box[b-rwhcxlm4dx] {
    position: relative;
}

/* A caballo de la esquina superior izquierda: la mitad del icono queda fuera de la tarjeta.
   El halo blanco lo despega del tinte de la tarjeta, que en órdenes atrasadas ya viene
   coloreada por el semáforo. */
.date-card-box.clickable[b-rwhcxlm4dx] {
    cursor: pointer;
}

.promise-warning-btn[b-rwhcxlm4dx] {
    position: absolute;
    top: -11px;
    left: -11px;
    padding: 1px;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #FFFFFF;
    line-height: 0;
    cursor: pointer;
    color: #F59E0B;
    animation: promise-warning-pop-b-rwhcxlm4dx 1.6s ease-in-out 3;
}

.promise-warning-btn:hover[b-rwhcxlm4dx] {
    color: #B45309;
    transform: scale(1.15);
}

@keyframes promise-warning-pop-b-rwhcxlm4dx {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.promise-suggestion-note[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #F0D9A8;
    border-radius: 8px;
    background: #FDF8EE;
    font-size: 0.75rem;
    color: #6B5320;
}

.promise-suggestion-link[b-rwhcxlm4dx] {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: #C77F1A;
    text-decoration: underline;
    cursor: pointer;
}

.date-label[b-rwhcxlm4dx] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #888888;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
    white-space: nowrap;
}

.date-day[b-rwhcxlm4dx] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3D5676;
    line-height: 1.1;
}

.date-month[b-rwhcxlm4dx] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #FE00E4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.date-month.no-date[b-rwhcxlm4dx] {
    color: #94a3b8;
}

.eta-card .date-month:not(.no-date)[b-rwhcxlm4dx] {
    color: #FE00E4;
}

/* 3. Burndown section (sin caja extra) */
.burndown-section[b-rwhcxlm4dx] {
    width: 100%;
}

/* 4. Divider */
.section-divider[b-rwhcxlm4dx] {
    width: 100%;
    height: 1px;
    background: #E8E8E8;
    border-radius: 1px;
    margin: 4px 0;
}

/* 5. Order detail */
.responsible-info[b-rwhcxlm4dx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.responsible-avatar[b-rwhcxlm4dx] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    border: 2px solid #21e139;
    flex-shrink: 0;
}

.responsible-avatar img[b-rwhcxlm4dx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advisor-avatar[b-rwhcxlm4dx] {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
    color: white;
}

.advisor-initials[b-rwhcxlm4dx] {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.responsible-details[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.responsible-role[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1;
    display: block;
}

.responsible-name[b-rwhcxlm4dx] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3D5676;
    display: block;
}

.responsible-header-row[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.round-badges-container[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.badge-item[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.badge-label[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1;
}

.round-badge[b-rwhcxlm4dx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: -0.2px;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default !important;
}

.round-badge:hover[b-rwhcxlm4dx] {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.level-badge[b-rwhcxlm4dx] {
    background: linear-gradient(135deg, #475569, #3D5676);
}

.circuit-badge[b-rwhcxlm4dx] {
    background: linear-gradient(135deg, #d97706, #e5b900);
}

/* Progress Section */
.progress-section[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-header[b-rwhcxlm4dx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label[b-rwhcxlm4dx] {
    font-size: 0.8rem;
    color: #888888;
    font-weight: 500;
}

.progress-value[b-rwhcxlm4dx] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3D5676;
}

.progress-bar-container[b-rwhcxlm4dx] {
    height: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.progress-bar[b-rwhcxlm4dx] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399, #10b981);
    background-size: 200% 100%;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: progress-animation-b-rwhcxlm4dx 2s linear infinite;
}

@keyframes progress-animation-b-rwhcxlm4dx {
    0% { background-position: 200% 0; }
    100% { background-position: 0 0; }
}

/* Process + Worker row */
.process-main-row[b-rwhcxlm4dx] {
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.process-status[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.process-label[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
}

/* ── Frentes vivos: una fila por frente, proceso ↔ su responsable ─────────
   Los rótulos se separan a su propia fila para que las N filas de datos
   queden bajo la misma rejilla y cada proceso caiga enfrente de SU persona.
   Con un solo frente esto es visualmente idéntico al diseño anterior. */
.process-fronts-header[b-rwhcxlm4dx] {
    margin-bottom: 2px;
}

.process-front-row + .process-front-row[b-rwhcxlm4dx] {
    margin-top: 8px;
}

/* Cada frente lleva el filete de SU línea, no sólo las ramas.
   El tipo se comunica con el color, no con un rótulo: "PARALLEL" en crudo era jerga del modelo,
   no información para el taller.

   El filete colgaba de .is-branch-front, así que el frente del TRONCO quedaba sin él: la lista
   mostraba tres responsables y sólo dos se podían ubicar en el dibujo. El tronco es una línea más
   —sale en el verde de mainline, que ya publica --lane-color— y que sea la principal no lo vuelve
   invisible. Justo al revés: es la referencia contra la que se leen las demás. */
.process-front-row[b-rwhcxlm4dx] {
    position: relative;
    padding-left: 10px;
}

.process-front-row[b-rwhcxlm4dx]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    /* Color real de la rama (paleta compartida), no un ámbar fijo: con dos frentes vivos los dos
       filetes salían iguales y no se correspondían con sus líneas del timeline. */
    background: var(--lane-color, #DEA301);
}

.process-value[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #3D5676;
    font-weight: 500;
}

.process-mini-icon[b-rwhcxlm4dx] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.process-icon-circle[b-rwhcxlm4dx] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.worker-avatar-compact[b-rwhcxlm4dx] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    border: 2px solid rgba(59, 130, 246, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.worker-avatar-compact img[b-rwhcxlm4dx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar-compact .advisor-initials[b-rwhcxlm4dx] {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Order type row */
.order-type-row[b-rwhcxlm4dx] {
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
}

.order-item[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-label[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
}

.order-value[b-rwhcxlm4dx] {
    font-size: 0.85rem;
    color: #3D5676;
    font-weight: 500;
}

.insurance-info[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.insurance-value[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.insurance-icon-circle[b-rwhcxlm4dx] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.insurance-icon[b-rwhcxlm4dx] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Additional info */
.additional-info[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 10px;
    border: 1px solid #E8E8E8;
}

.info-row[b-rwhcxlm4dx] {
    display: flex;
    gap: 16px;
}

.info-item[b-rwhcxlm4dx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
}

.info-value[b-rwhcxlm4dx] {
    font-size: 0.85rem;
    color: #3D5676;
}

/* No WorkOrder Selected */
.no-workorder-selected[b-rwhcxlm4dx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #888888;
    font-size: 0.9rem;
    padding: 40px;
}

@media (max-width: 640px) {
    .process-main-row[b-rwhcxlm4dx],
    .order-type-row[b-rwhcxlm4dx] {
        grid-template-columns: 1fr;
    }

    .actions-row[b-rwhcxlm4dx] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Ayuda del burndown: el chasis del popover vive en InfoCarouselPopover; aqui solo queda
   lo propio de este contenido. */
.delay-help-group[b-rwhcxlm4dx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Carrusel: el mismo diagrama en los tres pasos, atenuando lo que no toca explicar.
   Un texto paginado sin este resalte no ensenaria nada que la lista anterior ya no dijera. */
.burndown-diagram g[b-rwhcxlm4dx] {
    transition: opacity 0.2s ease;
}

.burndown-diagram.step-1 .g-today[b-rwhcxlm4dx],
.burndown-diagram.step-1 .g-delay[b-rwhcxlm4dx],
.burndown-diagram.step-1 .g-repro[b-rwhcxlm4dx],
.burndown-diagram.step-1 .g-gap[b-rwhcxlm4dx],
.burndown-diagram.step-1 .g-warn[b-rwhcxlm4dx],
.burndown-diagram.step-2 .g-today[b-rwhcxlm4dx],
.burndown-diagram.step-2 .g-eta[b-rwhcxlm4dx],
.burndown-diagram.step-2 .g-gap[b-rwhcxlm4dx],
.burndown-diagram.step-2 .g-warn[b-rwhcxlm4dx],
.burndown-diagram.step-2 .g-phases[b-rwhcxlm4dx],
.burndown-diagram.step-3 .g-repro[b-rwhcxlm4dx],
.burndown-diagram.step-3 .g-phases[b-rwhcxlm4dx] {
    opacity: 0.1;
}


/* Cada linea del grafico con su propia entrada: la marca de color reemplaza al nombre
   del color en el texto, que obligaba a traducir "verde" a lo que se ve en pantalla. */
.info-carousel-item .info-carousel-key.plan[b-rwhcxlm4dx] { background: repeating-linear-gradient(90deg, #22C55E 0 5px, transparent 5px 8px); }
.info-carousel-item .info-carousel-key.real[b-rwhcxlm4dx] { background: #818CF8; }
.info-carousel-item .info-carousel-key.delay[b-rwhcxlm4dx] { background: #EF4444; }
.info-carousel-item .info-carousel-key.promise[b-rwhcxlm4dx] { background: repeating-linear-gradient(90deg, #EF4444 0 3px, transparent 3px 6px); }
.info-carousel-item .info-carousel-key.eta[b-rwhcxlm4dx] { background: repeating-linear-gradient(90deg, #FB923C 0 2px, transparent 2px 5px); }

.info-carousel-item .info-carousel-key.phase[b-rwhcxlm4dx] {
    height: 6px;
    border: 1px solid #94A3B8;
    border-top: none;
    border-radius: 0 0 2px 2px;
    background: transparent;
}

.info-carousel-item .info-carousel-key.repro[b-rwhcxlm4dx] {
    width: 8px;
    height: 8px;
    margin-top: 2px;
    border-radius: 1px;
    background: #F59E0B;
    transform: rotate(45deg);
}

.info-carousel-item .info-carousel-key.warn[b-rwhcxlm4dx] {
    width: 10px;
    height: 10px;
    margin-top: 1px;
    border-radius: 50%;
    background: #F59E0B;
}

/* Replica en pequeno de las tarjetas de fecha del detalle. */
.help-cards[b-rwhcxlm4dx] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.help-card[b-rwhcxlm4dx] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.help-card.late[b-rwhcxlm4dx] {
    border: 1.5px solid #EF4444;
    background: #FEF2F2;
}

.help-card-warn[b-rwhcxlm4dx] {
    position: absolute;
    top: -8px;
    left: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F59E0B;
    color: #FFFFFF;
    font-size: 0.6rem;
    font-weight: 700;
}

.help-card-label[b-rwhcxlm4dx] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #64748B;
}

.help-card-day[b-rwhcxlm4dx] {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.1;
}

.help-card.late .help-card-day[b-rwhcxlm4dx] { color: #B91C1C; }

.help-card-month[b-rwhcxlm4dx] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #64748B;
}

.help-card.late .help-card-month[b-rwhcxlm4dx] { color: #EF4444; }

.help-badge-row[b-rwhcxlm4dx] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.help-colors[b-rwhcxlm4dx] {
    margin: -4px 0 10px 24px;
}

.help-color[b-rwhcxlm4dx] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #475569;
    margin-bottom: 3px;
}

.help-dot[b-rwhcxlm4dx] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.burndown-diagram-tiny[b-rwhcxlm4dx] { font-size: 9px; }
/* /Pages/Home/Components/AssetInventoriesPanel.razor.rz.scp.css */
.inbox-table-resizable[b-pkxxgmxhpa] {
    width: 100%;
    height: 100%;
    min-width: 0;
    zoom: 0.9;
    min-height: 260px;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
}

.inbox-table-resizable.is-resizing[b-pkxxgmxhpa] {
    user-select: none;
}

.inbox-table-resize-handle[b-pkxxgmxhpa] {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #9aa1ac80;
    color: rgba(246, 250, 255, 0.94);
    cursor: ns-resize;
    z-index: 50;
    box-shadow: none;
    touch-action: none;
    transition: transform 0.14s ease;
}

.inbox-table-resize-handle:hover[b-pkxxgmxhpa] {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: none;
}

.inbox-table-resizable.is-resizing .inbox-table-resize-handle[b-pkxxgmxhpa] {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: none;
}

.inbox-table-page[b-pkxxgmxhpa] {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 14px 8px;
    box-sizing: border-box;
    color: #11233b;
}

.inbox-table-header[b-pkxxgmxhpa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.inbox-table-brand[b-pkxxgmxhpa] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1 1 620px;
    max-width: 100%;
}

.inbox-table-metrics[b-pkxxgmxhpa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    margin-top: 1px;
}

.inbox-table-header-right[b-pkxxgmxhpa] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
    padding-right: 0;
}

.inbox-table-top-actions[b-pkxxgmxhpa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    margin-right: 9px;
}

.metric-pill[b-pkxxgmxhpa] {
    padding: 6px 15px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.inbox-table-actions[b-pkxxgmxhpa] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.view-toggle-btn[b-pkxxgmxhpa] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    padding: 0;
}

.view-toggle-btn:hover[b-pkxxgmxhpa] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.toolbar-search[b-pkxxgmxhpa] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 420px;
    min-width: 320px;
    max-width: 560px;
    min-height: 39px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #a0a0b0;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1;
}

.toolbar-search-icon[b-pkxxgmxhpa] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.toolbar-search-icon svg[b-pkxxgmxhpa] {
    width: 18px;
    height: 18px;
    display: block;
}

.toolbar-search-input[b-pkxxgmxhpa] {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 1px 2px;
}

.toolbar-search-input[b-pkxxgmxhpa]::placeholder {
    color: #b0b7c6;
    opacity: 1;
    font-weight: 500;
}

.toolbar-search-input[type="search"][b-pkxxgmxhpa]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.toolbar-search:focus-within[b-pkxxgmxhpa] {
    border-color: transparent;
    box-shadow: none;
}

.toolbar-btn[b-pkxxgmxhpa] {
    border: none;
    background: #e5b900;
    color: #1a365d;
    border-radius: 15px;
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
}

.toolbar-btn.toolbar-btn-hidden[b-pkxxgmxhpa] {
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    border: none;
    transition: opacity 0.25s ease, max-width 0.3s ease, padding 0.3s ease;
}

.toolbar-btn.toolbar-btn-visible[b-pkxxgmxhpa] {
    opacity: 1;
    max-width: 200px;
    pointer-events: auto;
    transition: opacity 0.25s ease, max-width 0.3s ease, padding 0.3s ease;
}

.toolbar-btn:hover[b-pkxxgmxhpa] {
    color: #0f2746;
}

.toolbar-btn.primary[b-pkxxgmxhpa] {
    background: #1f2f45;
    color: white;
    border-radius: 20px;
}

.toolbar-btn.primary:hover[b-pkxxgmxhpa] {
    background: #0b3f80;
}

.inbox-table-refresh-btn[b-pkxxgmxhpa] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
}

.inbox-table-refresh-btn:hover:not(:disabled)[b-pkxxgmxhpa] {
    background: rgba(255, 255, 255, 0.1);
}

.inbox-table-refresh-btn svg[b-pkxxgmxhpa] {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.inbox-table-refresh-btn:disabled[b-pkxxgmxhpa] {
    opacity: 0.5;
    cursor: not-allowed;
}

.inbox-table-refresh-btn:disabled svg[b-pkxxgmxhpa] {
    animation: spin-b-pkxxgmxhpa 1s linear infinite;
}

@keyframes spin-b-pkxxgmxhpa {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.toolbar-general-filter[b-pkxxgmxhpa] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
}

.toolbar-general-filter[b-pkxxgmxhpa]::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(244, 250, 255, 0.92);
    border-bottom: 2px solid rgba(244, 250, 255, 0.92);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.toolbar-filter-select[b-pkxxgmxhpa] {
    appearance: none;
    border: none;
    border-radius: 999px;
    min-width: 168px;
    height: 34px;
    padding: 0px 28px 0px 13px;
    background: linear-gradient(rgba(131, 140, 154, 0.84), rgba(131, 140, 154, 0.84));
    color: #f3f7ff;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 34px;
    cursor: pointer;
    outline: none;
}

.toolbar-filter-select:focus-visible[b-pkxxgmxhpa] {
    box-shadow: 0 0 0 1px rgba(247, 251, 255, 0.6) inset;
}

.toolbar-filter-select:disabled[b-pkxxgmxhpa] {
    opacity: 0.58;
    cursor: not-allowed;
}

.toolbar-filter-select option[b-pkxxgmxhpa] {
    color: #16385f;
}

.inbox-table-grid[b-pkxxgmxhpa] {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    --ag-scrollbar-size: 0px;
    --st-inbox-pinned-left-width: 0px;
    --st-inbox-detail-left-offset: 0px;
    --st-inbox-detail-span-width: 100%;
    --ag-background-color: transparent;
    --ag-odd-row-background-color: transparent;
    --ag-header-background-color: transparent;
    --ag-border-color: transparent;
    --ag-wrapper-border-color: transparent;
    --ag-pinned-column-border: 0 solid transparent;
    --ag-row-border-color: rgba(201, 216, 236, 0.9);
    --ag-row-hover-color: rgba(243, 249, 255, 0.86);
    --ag-cell-horizontal-border: none;
    --ag-column-border: none;
}

.inbox-table-grid-shell[b-pkxxgmxhpa] {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* Hide AG-Grid default "No Rows" overlay while the custom loading spinner is active */
.inbox-table-grid-shell.is-loading .inbox-table-grid[b-pkxxgmxhpa]  .ag-overlay {
    display: none !important;
}

.inbox-table-loading-overlay[b-pkxxgmxhpa] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(89, 112, 144, 0.22);
    z-index: 1200;
    pointer-events: all;
}

.inbox-table-loading[b-pkxxgmxhpa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    font-weight: 500;
}

.inbox-table-loading-spinner[b-pkxxgmxhpa] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: st-inbox-table-spin-b-pkxxgmxhpa 1s linear infinite;
}

@keyframes st-inbox-table-spin-b-pkxxgmxhpa {
    to {
        transform: rotate(360deg);
    }
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-overlay {
    display: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-overlay-no-rows-wrapper {
    display: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-overlay-no-rows-wrapper::after {
    display: none !important;
}

/* ── Custom No Rows Overlay (Blazor-controlled) ── */
.inbox-table-no-rows-overlay[b-pkxxgmxhpa] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 15;
}

.inbox-table-no-rows-text[b-pkxxgmxhpa] {
    color: #FFFFFF;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.85;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Hide AG-Grid default "No Rows" overlay — we use our own Blazor-controlled overlay */
.inbox-table-grid-shell.is-loading .inbox-table-grid[b-pkxxgmxhpa]  .ag-overlay {
    display: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-root-wrapper {
    border: 0;
    border-radius: 0;
    background: transparent;
    width: 100% !important;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-ltr {
    width: 100% !important;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-root-wrapper-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    box-sizing: border-box;
    padding-bottom: 40px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-root {
    width: 100% !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-root,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-root-wrapper-body,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-clipper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-clipper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-right-cols-clipper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-horizontal-scroll-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-vertical-scroll-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-horizontal-scroll-container,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-vertical-scroll-container {
    background: transparent !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row-group-panel,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-advanced-filter-header {
    display: none !important;
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-vertical-scroll,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-vertical-scroll-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-vertical-scroll-container {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-container,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-header,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-right-header,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-row {
    background: transparent !important;
    border: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-label {
    color: #f5f8ff;
    font-size: 14px;
    font-family: Inter, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    width: 100%;
    line-height: 1;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    overflow: hidden;
    min-height: 33px;
    max-width: 100%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-label::before {
    content: "" !important;
    left: 1px !important;
    opacity: 0.3 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-group-cell {
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    padding: 0 2px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-row {
    min-height: 38px !important;
    height: auto !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-row.ag-header-row-column-group {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-comp-wrapper {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
    min-height: 33px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-comp-wrapper::before {
    content: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell.ag-column-first .ag-header-cell-comp-wrapper {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell .ag-icon {
    color: rgba(255, 255, 255, 0.85);
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filter-button {
    opacity: 0.62 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    padding: 0;
    margin-left: 8px;
    transition: opacity 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filter-button:hover {
    opacity: 0.9 !important;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.2);
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filtered .ag-header-cell-filter-button {
    opacity: 1 !important;
    border-color: rgba(232, 191, 13, 0.96);
    background: rgba(229, 185, 0, 0.3);
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filter-button,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filter-button .st-inbox-filter-icon,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-filter-button .st-inbox-filter-icon svg {
    color: #f5f8ff !important;
    fill: currentColor !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-search-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-search-icon svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
    display: block;
    transform: scale(1.5);
    transform-origin: center;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-popup,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-popup-child {
    z-index: 120 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row {
    border-bottom: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-container,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-viewport,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-container {
    background: transparent !important;
}

/* Force the body and columns viewport to fill full container width */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-body-viewport {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-body {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ag-center-cols-clipper and ag-center-cols-container are sized by AG Grid's
   sizeColumnsToFit() — do NOT force width:100% here or column layout breaks */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-clipper {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-viewport {
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-container {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Full-width detail rows: clip overflow for horizontal scroll sync */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-full-width-container {
    overflow: hidden !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-full-width-row {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.76rem, 0.72rem + 0.16vw, 0.9rem);
    color: #1f3557;
    margin: 3px 0;
    height: calc(100% - 6px) !important;
    background: rgba(255, 255, 255, 0.98);
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0;
    background: transparent !important; /* Unified background handled by ag-row::before */
    box-shadow: none !important;
}

/* Hide column resize handle line and cell separator borders */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-resize {
    opacity: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-header-cell-resize::after {
    background-color: transparent !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-column-resizing {
    border-right-color: transparent !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-ltr .ag-cell {
    border-right-color: transparent !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell-value {
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-asset-left,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left {
    justify-content: flex-start;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-value,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .ag-cell-value {
    min-width: 0 !important;
    overflow: hidden !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-asset-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-asset-left .ag-cell-value,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .ag-cell-value,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-value {
    justify-content: flex-start;
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-asset-left .st-inbox-cell,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .st-inbox-cell,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .st-inbox-cell {
    justify-content: flex-start;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-asset-left .st-inbox-cell-text,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .st-inbox-cell-text,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .st-inbox-cell-text {
    align-items: flex-start;
    text-align: left;
    flex: 1 1 auto;
    overflow: hidden;
    max-width: 100%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-process-left .ag-cell-value {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row-hover {
    background: transparent !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-details-row,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.st-inbox-detail-row {
    cursor: default;
    border-bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-details-row .ag-cell,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.st-inbox-detail-row .ag-cell {
    margin: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Align subtable edges with the main row's edges */
    padding: 0 0 8px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-details-row .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-details-row .ag-cell-value,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.st-inbox-detail-row .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.st-inbox-detail-row .ag-cell-value {
    justify-content: stretch;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}



.inbox-table-grid[b-pkxxgmxhpa]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row) .ag-cell.ag-column-first {
    border-left: none !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row) .ag-cell.ag-column-last {
    border-right: none !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Expanded master row: flatten bottom corners & remove bottom gap ── */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row[aria-expanded="true"] {
    z-index: 2 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row[aria-expanded="true"] .ag-cell {
    margin-bottom: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row[aria-expanded="true"] .ag-cell.ag-column-first {
    border-bottom-left-radius: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row[aria-expanded="true"] .ag-cell.ag-column-last {
    border-bottom-right-radius: 0 !important;
}

/* ── Detail row: pull up to connect seamlessly with the master row ── */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.ag-details-row,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row.st-inbox-detail-row {
    margin-top: -3px !important;
    z-index: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row-hover .ag-cell {
    background: transparent !important;
    box-shadow: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row-hover .ag-cell.ag-column-first {
    box-shadow: none !important;
}

/* ── Unified Row Background (Solves Sub-pixel Gaps) ── */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 10px;
    border-left: 1px solid #d5e1f2;
    border-right: 1px solid #d5e1f2;
    z-index: -1;
    pointer-events: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row[aria-expanded="true"]:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    bottom: -3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-row-hover:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    background: #f8fbff;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-host {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-wrap {
    width: var(--st-inbox-row-width, 100%);
    max-width: var(--st-inbox-row-width, 100%);
    min-width: 0;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border: 1px solid #d5e1f2;
    border-top: none;
    background: rgba(232, 240, 251, 0.72);
    box-shadow: 0 6px 18px rgba(16, 41, 74, 0.12) inset;
    padding: 16px 10px 8px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-grid {
    display: grid;
    grid-template-columns: var(--st-col-1-width, minmax(0, 0.9fr)) var(--st-col-2-width, minmax(0, 0.78fr)) var(--st-col-3-width, minmax(0, 1.63fr)) var(--st-col-4-width, minmax(0, 2.28fr)) var(--st-col-5-width, minmax(0, 1.51fr)) var(--st-col-6-width, minmax(0, 1.28fr)) var(--st-col-7-width, minmax(0, 1.28fr)) var(--st-col-8-width, minmax(0, 2.12fr));
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-block > * {
    flex: 1;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-header {
    margin-bottom: 7px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-pill {
    min-height: 23px;
    border-radius: 999px;
    background: #8a9eb8;
    box-shadow: none;
    color: #f8fbff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-pill-actions {
    opacity: 0.88;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row {
    color: #18375d;
    font-size: 0.79rem;
    font-weight: 600;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    padding: 0 4px;
    box-sizing: border-box;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-value {
    display: -webkit-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.12;
    text-align: center;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Mini calendar date icon ── */
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-calendar {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 44px;
    border-radius: 7px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-calendar-header {
    background: #8a9eb8;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.2;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-calendar-body {
    background: #ffffff;
    color: #1e3a5f;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 4px 3px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn {
    border: 1px solid rgba(136, 166, 201, 0.82);
    background: linear-gradient(180deg, #f7fbff 0%, #e8f1fc 100%);
    color: #184775;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 3px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    width: auto;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(172, 192, 218, 0.6);
    padding: 4px;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    color: #184775;
    line-height: 1.15;
    min-width: 0;
    max-width: 100%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn.st-inbox-subtable-process-btn-truncated {
    justify-content: flex-start;
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-label {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn.st-inbox-subtable-process-btn-truncated .st-inbox-subtable-process-label {
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell-process {
    padding-left: 10px;
    padding-right: 10px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn:hover {
    background: linear-gradient(180deg, #eef6ff 0%, #dcecff 100%);
    border-color: rgba(91, 135, 186, 0.9);
    color: #103c6a;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn:active {
    background: linear-gradient(180deg, #deebfb 0%, #d0e2f8 100%);
    border-color: rgba(72, 120, 177, 0.94);
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-btn:focus-visible {
    outline: 2px solid rgba(58, 115, 178, 0.38);
    outline-offset: 1px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell-order {
    font-weight: 800;
    color: #1e4a79;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-order-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-order-number {
    font-weight: 800;
    color: #1e4a79;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-progress-chip {
    position: static;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-person {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-avatar-wrap {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #d0deef;
    object-fit: cover;
    background: #edf3fb;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-avatar-fallback {
    font-size: 0.88rem;
    font-weight: 700;
    color: #163b63;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-text {
    display: -webkit-box;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.12;
    text-align: center;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Insurance avatar – larger & rectangular so company logos render better */
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar-wrap {
    width: 48px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #d0deef;
    object-fit: contain;
    background: #ffffff;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar-fallback {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #d0deef;
    background: #edf3fb;
    font-size: 0.88rem;
    font-weight: 700;
    color: #163b63;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(9) .st-inbox-subtable-person,
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(10) .st-inbox-subtable-person {
    gap: 6px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(9) .st-inbox-subtable-text,
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(10) .st-inbox-subtable-text {
    flex: 0 1 auto;
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(11) {
    justify-content: flex-start;
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(11) .st-inbox-subtable-person {
    justify-content: flex-start;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row>.st-inbox-subtable-cell:nth-child(11) .st-inbox-subtable-text {
    text-align: left;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding-right: 4px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn {
    width: 84px;
    height: 24px;
    min-height: 24px;
    border-radius: 999px;
    border: 0;
    padding: 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #e500cd;
    background-image: none;
    box-shadow: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn-assign {
    background: #e500cd;
    background-image: none;
    box-shadow: none;
    cursor: pointer;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn-assign:hover {
    background: #c200ae;
    box-shadow: 0 2px 6px rgba(229, 0, 205, 0.35);
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn-deliver {
    background: #e500cd;
    background-image: none;
    box-shadow: none;
    cursor: pointer;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn-deliver:hover {
    background: #c200ae;
    box-shadow: 0 2px 6px rgba(229, 0, 205, 0.35);
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-header,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-container,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-viewport {
    border-right: 0 !important;
    box-shadow: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-header::after,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-container::after,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-pinned-left-cols-viewport::after {
    display: none !important;
    content: none !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-center-cols-viewport {
    overflow-x: auto !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-status-bar {
    border-top: 1px solid #dde6f3;
    background: #f7faff;
    color: #214062;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    padding: 0 16px !important;
    height: 40px !important;
    min-height: 40px !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-description,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-number,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-row-summary-panel-number,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-button,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel span {
    color: #ffffff !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-number {
    margin: 0 4px !important;
    font-weight: 700 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-button.ag-disabled {
    color: rgba(255, 255, 255, 0.45) !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-page-size {
    color: #ffffff !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-page-size .ag-picker-field-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-page-size .ag-picker-field-display {
    color: #ffffff !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-page-size .ag-picker-field-icon .ag-icon,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-button .ag-icon {
    color: #ffffff !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-paging-panel .ag-paging-button.ag-disabled .ag-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    gap: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(0.76rem, 0.72rem + 0.18vw, 0.92rem);
    font-weight: 700;
    color: #173a67;
    line-height: 1.15;
    margin-bottom: 0;
}

/* Force 1 line for advisor to avoid hitting top border */
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-advisor-left .st-inbox-cell-title {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-subtitle {
    display: -webkit-box;
    font-size: clamp(0.66rem, 0.62rem + 0.12vw, 0.78rem);
    color: #6c7a8f;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    margin-top: 1px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-city-subtitle {
    width: 100%;
    max-width: 100%;
    text-align: center;
    align-self: stretch;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #d6e2f2;
    background: #f0f4fb;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-image {
    width: 85px;
    height: 55px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #d6e2f2;
    background: #f0f4fb;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper.st-inbox-asset-thumb {
    width: 66px;
    height: 44px;
    border-radius: 11px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-thumb {
    position: relative;
    overflow: visible;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #163961;
    text-transform: uppercase;
    border-radius: 50%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon,
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon-wrapper {
    width: 43px;
    height: 43px;
    border-radius: 8px;
    object-fit: contain;
    padding: 2px;
    flex-shrink: 0;
    border: 1px solid #cadbee;
    background: #edf4fe;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1a456f;
    text-transform: uppercase;
    padding: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-image-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #8f98a6;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-placeholder-icon {
    width: 36%;
    height: 36%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-progress-chip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    top: auto;
    transform: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: #00c853;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    line-height: 1.2;
    z-index: 2;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-thumb>.st-inbox-progress-chip {
    right: -24px;
    bottom: 0px;
    padding: 4px 12px;
    font-size: 0.68rem;
    z-index: 3;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell-order .st-inbox-progress-chip.st-inbox-subtable-progress-chip {
    position: static;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-asset {
    gap: 25px;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-brand {
    justify-content: center;
    padding: 0 2px;
    min-width: 0;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-brand-text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-brand-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.84rem);
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-brand-subtitle {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.05;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-process {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-process .st-inbox-cell-text {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-process .st-inbox-cell-title {
    display: block;
    min-width: 0;
    align-self: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-wrap2 .ag-cell-wrapper,
.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-wrap2 .ag-cell-value {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.inbox-table-grid[b-pkxxgmxhpa]  .ag-cell.st-inbox-col-wrap2 .ag-cell-value {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.12;
    text-align: center;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-orders-count-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-orders-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e9f0fb;
    border: 1px solid rgba(28, 70, 115, 0.2);
    color: #1c4673;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Ancho fijo (se muestre o no el ícono) para que el círculo del conteo no cambie de
   posición entre filas con y sin advertencia de cambio de promesa. */
.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-warning-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-warning-slot .st-inbox-promise-changes-warning {
    margin-left: 0;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-permanence {
    font-size: clamp(0.7rem, 0.66rem + 0.12vw, 0.82rem);
    font-weight: 700;
    color: #113a63;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell-promise {
    gap: 6px;
    overflow: visible;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-promise-changes-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    cursor: pointer;
    margin-left: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-promise-changes-warning:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px rgba(24, 71, 117, 0.35);
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-empty {
    font-size: 0.7rem;
    color: #7b889d;
}

@media (max-width: 768px) {
    .inbox-table-resizable[b-pkxxgmxhpa] {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding-top: 0;
    }

    .inbox-table-resize-handle[b-pkxxgmxhpa] {
        display: none;
    }

    .inbox-table-page[b-pkxxgmxhpa] {
        padding: 10px 10px 6px;
        gap: 10px;
    }

    .inbox-table-header-right[b-pkxxgmxhpa] {
        width: 100%;
        align-items: stretch;
        gap: 7px;
    }

    .inbox-table-top-actions[b-pkxxgmxhpa] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .inbox-table-metrics[b-pkxxgmxhpa] {
        justify-content: flex-start;
        margin-top: 0;
    }

    .inbox-table-actions[b-pkxxgmxhpa] {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar-search[b-pkxxgmxhpa] {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 100%;
    }

    .toolbar-btn[b-pkxxgmxhpa] {
        padding: 7px 8px;
        font-size: 0.68rem;
    }

    .toolbar-general-filter[b-pkxxgmxhpa] {
        flex: 1 1 160px;
    }

    .toolbar-filter-select[b-pkxxgmxhpa] {
        width: 100%;
        min-width: 0;
    }

}

/* ── Responsive: medium screens (≤ 1200px) ── */
@media (max-width: 1200px) {
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-block {
        gap: 4px;
        padding: 0 2px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row {
        font-size: 0.72rem;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-pill {
        font-size: 0.65rem;
        padding: 0 6px;
        min-height: 20px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-avatar,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-avatar-wrap {
        width: 28px;
        height: 28px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar-wrap {
        width: 38px;
        height: 28px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-insurance-avatar-fallback {
        width: 38px;
        height: 28px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-process-icon {
        width: 30px;
        height: 30px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-btn {
        width: 68px;
        font-size: 0.66rem;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper {
        width: 32px;
        height: 32px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-image {
        width: 60px;
        height: 40px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper.st-inbox-asset-thumb {
        width: 50px;
        height: 34px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon-wrapper {
        width: 32px;
        height: 32px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-asset {
        gap: 12px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-cell-process {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ── Responsive: narrow screens (≤ 900px) ── */
@media (max-width: 900px) {
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-grid {
        min-width: 860px;
    }
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-block {
        padding: 0;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-row {
        font-size: 0.68rem;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-pill {
        font-size: 0.6rem;
        padding: 0 5px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper {
        width: 28px;
        height: 28px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-asset-image {
        width: 50px;
        height: 34px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-avatar-wrapper.st-inbox-asset-thumb {
        width: 42px;
        height: 30px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon,
    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-process-icon-wrapper {
        width: 28px;
        height: 28px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-asset {
        gap: 8px;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-title {
        font-size: 0.74rem;
    }

    .inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-cell-subtitle {
        font-size: 0.62rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIMIT OVERLAY FOR INDEVELOPMENT MODAL TO THE CONTAINER SHAPE
   ───────────────────────────────────────────────────────────────────────────── */
.inbox-table-resizable[b-pkxxgmxhpa] {
    border-radius: 30px !important;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .logout-confirm-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 30px !important;
    z-index: 9999 !important;
}
/* /Pages/Home/Components/Assignments/AssignmentModal.razor.rz.scp.css */
.assign-glass-container[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    background: transparent; /* Hereda el #9aa1ab72 del padre, coincidiendo con el Inbox */
    display: flex;
    flex-direction: column;
    padding: 0px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    animation: fadeIn-b-y0v5gexn1j 0.3s ease;
}

/* ===== Banner: autorización requerida antes de entregar ===== */
.assign-auth-hint-banner[b-y0v5gexn1j] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 12px 0 12px;
    padding: 12px 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.assign-auth-hint-banner svg[b-y0v5gexn1j] {
    flex-shrink: 0;
    margin-top: 1px;
    color: #fbbf24;
}

/* ===== Toast de Validación ===== */
.assign-validation-toast[b-y0v5gexn1j] {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0f172a, #064e3b); /* Fondo con ligero tono verdoso */
    border: 1px solid #10b981; /* Verde éxito */
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); /* Glow verde para más visibilidad */
    border-radius: 12px;
    padding: 12px 20px;
    color: #34d399; /* Texto verde vibrante */
    font-size: 14px; /* Un poco más grande para visibilidad */
    font-weight: 600;
    white-space: normal;
    max-width: 80%;
    text-align: center;
    word-break: break-word;

    animation: toastSlideIn-b-y0v5gexn1j 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    cursor: pointer;
}

@keyframes toastSlideIn-b-y0v5gexn1j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.assign-scroll-body[b-y0v5gexn1j] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 9px 4px 100px 4px;
    /* Casi al borde lateral */
}

.assign-scroll-body[b-y0v5gexn1j]::-webkit-scrollbar {
    display: none;
}

.fade-in-section[b-y0v5gexn1j] {
    animation: fadeIn-b-y0v5gexn1j 0.4s ease forwards;
}

.assign-loading-state[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
}

/* ===== 1. HEADER CARD (Vehículo) ===== */
.assign-header-card[b-y0v5gexn1j] {
    background: transparent;
    border-radius: 16px;
    padding: 0px;
    position: relative;
    margin-bottom: 12px;
}


.hc-layout[b-y0v5gexn1j] {
    display: flex;
    gap: 12px;
    /* Reducir gap para ganar espacio */
    padding: 2px;
    /* Mínimo padding interno */
}

.hc-image-wrapper[b-y0v5gexn1j] {
    width: 155px;
    /* Un poco más de presencia */
    height: 115px;
    border-radius: 14px;
    overflow: hidden;
    background: #1e293b;
    border: 2px solid white;
    flex-shrink: 0;
}

.hc-image[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hc-content[b-y0v5gexn1j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Desde arriba */
    gap: 2px;
    /* Espaciado ajustado para verticalidad */
    padding-right: 0;
    padding-top: 3px;
    /* Alinear arriba con la imagen */
}

.hc-row-top[b-y0v5gexn1j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hc-title-col[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
}

.hc-label[b-y0v5gexn1j] {
    font-size: 15px;
    font-weight: 500;
    color: #f1f5f9;
    /* Más claro para mejor lectura */
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hc-placa[b-y0v5gexn1j] {
    font-size: 38px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    letter-spacing: -1.2px;
    /* Un poco más compacto */
}

.hc-date-col[b-y0v5gexn1j] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 10;
    margin-right: 0px;
}

.hc-date-col:hover[b-y0v5gexn1j] {
    transform: scale(1.05);
}

.hc-date-col.readonly[b-y0v5gexn1j] {
    cursor: default;
    pointer-events: none;
}

.hc-date-col.readonly:hover[b-y0v5gexn1j] {
    transform: none;
}

.hc-date-input-hidden[b-y0v5gexn1j] {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.hc-date-label[b-y0v5gexn1j] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    margin-bottom: 2px;
    white-space: nowrap;
    text-transform: uppercase;
}

.hc-date-day[b-y0v5gexn1j] {
    font-size: 33px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    transform: scale(0.90, 1.15);
}

.hc-date-month[b-y0v5gexn1j] {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: capitalize;
    line-height: 1;
    margin-top: 2px;
}

/* ===== Pill Orden / Aseguradora (estilo MAUI) ===== */
.hc-order-pill[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eab308;
    border-radius: 12px;
    padding: 3px 20px 3px 4px;
    /* Un poco más de aire lateral */
    margin-top: 5px;
    margin-right: 0px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
    position: relative;
    z-index: 90;
    /* Asegura que la píldora y su dropdown esten siempre por encima del resto */
}

.hc-order-pill.clickable[b-y0v5gexn1j] {
    cursor: pointer;
}

.hc-order-pill.clickable:not(.dropdown-open):hover[b-y0v5gexn1j] {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.hc-order-pill.clickable:not(.dropdown-open):active[b-y0v5gexn1j] {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* Avatar encargado — izquierda */
.hop-worker-avatar[b-y0v5gexn1j] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;

}

.hop-worker-avatar img[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hop-avatar-initials[b-y0v5gexn1j] {
    font-size: 13px;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
}

/* Centro: número + aseguradora */
.hop-center[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.hop-order-number[b-y0v5gexn1j] {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

.hop-insurer-name[b-y0v5gexn1j] {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Derecha: logo + badge */
.hop-right[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
}

.hop-insurer-logo[b-y0v5gexn1j] {
    width: 48px;
    /* Ancho alargado para forma de píldora */
    height: 32px;
    border-radius: 16px;
    /* Bordes totalmente redondeados */
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.9);

    color: #b45309;
}

.hop-insurer-logo img[b-y0v5gexn1j] {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.hop-count-badge[b-y0v5gexn1j] {
    position: absolute;
    bottom: -14px;
    /* Para que sobresalga hacia abajo */
    right: -22px;
    /* Para que sobresalga hacia la derecha */
    background: #ffffff;
    color: #eab308;
    font-size: 13px;
    font-weight: 800;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    padding: 0;
}

/* Dropdown Orders Selection */
.hop-wo-dropdown[b-y0v5gexn1j] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #1f2f45;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: dropdownFadeIn-b-y0v5gexn1j 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hop-wo-dropdown[b-y0v5gexn1j]::-webkit-scrollbar {
    display: none;
}

@keyframes dropdownFadeIn-b-y0v5gexn1j {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hop-wo-item[b-y0v5gexn1j] {
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.hop-wo-item[b-y0v5gexn1j]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    height: 60%;
    width: 3px;
    background: #eab308;
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 0 4px 4px 0;
}

.hop-wo-item:hover[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.06);
}

.hop-wo-item:hover[b-y0v5gexn1j]::before {
    transform: translateY(-50%) scaleY(0.7);
    background: rgba(255, 255, 255, 0.4);
}

.hop-wo-item.active[b-y0v5gexn1j] {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.03) 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.hop-wo-item.active[b-y0v5gexn1j]::before {
    transform: translateY(-50%) scaleY(1);
    background: #eab308;
}

.hop-wo-number[b-y0v5gexn1j] {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
    z-index: 1;
}

.hop-wo-insurance[b-y0v5gexn1j] {
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8 !important;
    z-index: 1;
}

.hop-wo-item.active .hop-wo-number[b-y0v5gexn1j] {
    color: #fef08a !important;
}

.hop-wo-item.active .hop-wo-insurance[b-y0v5gexn1j] {
    color: #f8fafc !important;
}

.hop-wo-backdrop[b-y0v5gexn1j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: transparent;
}


/* ===== 2. TOGGLE AUTORIZADO / RECHAZADO ===== */
.assign-toggle-row[b-y0v5gexn1j] {
    margin-bottom: 12px;
}

.assign-toggle-container[b-y0v5gexn1j] {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 2px;
}

.toggle-btn[b-y0v5gexn1j] {
    border: none;
    background: transparent;
    padding: 6px 22px;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.toggle-btn.active[b-y0v5gexn1j] {
    background: #eab308;
    color: #fff;

    text-shadow: none;
}

.toggle-btn.active-rejected[b-y0v5gexn1j] {
    background: #ef4444;
    color: #fff;

    text-shadow: none;
}

.toggle-locked[b-y0v5gexn1j] {
    opacity: 0.6;
    cursor: default;
}

.toggle-btn:disabled[b-y0v5gexn1j] {
    cursor: default;
    opacity: 0.5;
}

/* Badge informativo de estado (cuando la orden ya fue procesada) */
.assign-status-badge[b-y0v5gexn1j] {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
    backdrop-filter: blur(8px);
    line-height: 1.2;
}

.assign-status-badge.authorized[b-y0v5gexn1j] {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.assign-status-badge.rejected[b-y0v5gexn1j] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
}


/* ===== 3. WORKLEVEL ROW & COUNTERS ===== */
.assign-mid-section[b-y0v5gexn1j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-right: 12px;
}

.ams-left-col[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assign-worklevel-row[b-y0v5gexn1j] {
    position: relative;
    display: flex;
    align-items: center;
}

.wl-selector-btn[b-y0v5gexn1j] {
    border-radius: 12px;
    padding: 6px 8px 6px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    cursor: pointer;
    border: none;
    color: white;
    min-width: 140px;
    transition: all 0.2s ease;
}

.wl-selector-btn:hover[b-y0v5gexn1j] {
    /* Eliminamos el scale para evitar el corte visual con el borde del contenedor */
    filter: brightness(1.1);
}

.wl-selector-btn.readonly[b-y0v5gexn1j],
.wl-selector-btn:disabled[b-y0v5gexn1j] {
    cursor: default;
    pointer-events: none;
    opacity: 0.9;
}

.wl-selector-btn.readonly:hover[b-y0v5gexn1j],
.wl-selector-btn:disabled:hover[b-y0v5gexn1j] {
    transform: none;
}

.wl-selector-btn.unknown[b-y0v5gexn1j] {
    background: #475569 !important;

    border: 1px solid #64748b;
}

.wl-icon-circle[b-y0v5gexn1j] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.wl-selector-btn.unknown .wl-icon-circle[b-y0v5gexn1j] {
    background: #334155 !important;
    color: #94a3b8 !important;

}

.wl-selector-btn.unknown .wl-name[b-y0v5gexn1j] {
    color: #cbd5e1;
    font-weight: 600;
}

.wl-name[b-y0v5gexn1j] {
    flex: 1;
    text-align: center;
    margin-right: 2px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ams-right-col[b-y0v5gexn1j] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.assign-stats-box[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* right-align numbers towards the button */
    gap: 2px;
}

.stat-row[b-y0v5gexn1j] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-number[b-y0v5gexn1j] {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.stat-letter[b-y0v5gexn1j] {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    /* Faded look */
    line-height: 1.1;
}

/* =======================================
   4. NEW: SELECTED GROUP PILL & EMPTY STATE
   ======================================= */
.assign-selected-group-section[b-y0v5gexn1j] {
    margin-bottom: 24px;
    padding-right: 12px;
}

.assign-empty-group[b-y0v5gexn1j] {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
}

.assign-empty-group:hover[b-y0v5gexn1j] {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.aeg-text[b-y0v5gexn1j] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
}

.assign-active-groups-section[b-y0v5gexn1j] {
    margin-bottom: 24px;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
}

/* ── Acordeón de grupos activos ── */
.agp-accordion[b-y0v5gexn1j] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: visible;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.agp-accordion-expanded[b-y0v5gexn1j] {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.assigned-group-executed .agp-accordion-header[b-y0v5gexn1j] {
    opacity: 0.6;
}

.assigned-process-executed[b-y0v5gexn1j] {
    opacity: 0.5;
}

.agp-accordion-header[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.agp-accordion-header:hover[b-y0v5gexn1j] {
    background: rgba(0, 0, 0, 0.02);
}

.agp-accordion-chevron[b-y0v5gexn1j] {
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    pointer-events: none;
}

.agp-accordion-chevron.rotated[b-y0v5gexn1j] {
    transform: rotate(180deg);
}

.agp-accordion-body[b-y0v5gexn1j] {
    padding: 0 12px 12px;
    animation: agpAccordionSlide-b-y0v5gexn1j 0.25s ease-out;
}

@keyframes agpAccordionSlide-b-y0v5gexn1j {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* agp-actions removed from HTML */

.agp-hours-btn[b-y0v5gexn1j] {
    background: #f59e0b;
    border: none;
    border-radius: 10px;
    height: 32px;
    min-width: 75px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.agp-hours-btn:hover[b-y0v5gexn1j] {
    background: #d97706;
    transform: scale(1.05);
}

/* ── Confirmación de eliminación de grupo ── */
.agp-confirm-overlay[b-y0v5gexn1j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 16px;
    animation: fadeIn-b-y0v5gexn1j 0.15s ease;
}

.agp-confirm-dialog[b-y0v5gexn1j] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px 28px;
    text-align: center;
    max-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.agp-confirm-icon[b-y0v5gexn1j] {
    color: #f59e0b;
    margin-bottom: 12px;
}

.agp-confirm-text[b-y0v5gexn1j] {
    color: #e2e8f0;
    font-size: 13px;
    margin: 0 0 18px 0;
    line-height: 1.5;
}

.agp-confirm-text strong[b-y0v5gexn1j] {
    color: #ffffff;
}

.agp-confirm-btns[b-y0v5gexn1j] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.agp-confirm-cancel[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.agp-confirm-cancel:hover[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.agp-confirm-delete[b-y0v5gexn1j] {
    background: #e84393;
    border: none;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.agp-confirm-delete:hover[b-y0v5gexn1j] {
    background: #d83a84;
}

/* ── Grid de procesos bajo cada grupo (mini-cards como en sidebar) ── */
.agp-process-grid[b-y0v5gexn1j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 6px 12px;
}

.agp-process-mini-card[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 14px;
    border-radius: 10px;
    background: #475569;
    transition: background 0.2s;
    position: relative;
    margin-bottom: 14px;
}

.agp-process-mini-card:hover[b-y0v5gexn1j] {
    background: #64748b;
}

.agp-pmc-icon[b-y0v5gexn1j] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Allow worker badge to overflow */
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    /* For absolute positioning of worker badge */
}

.agp-pmc-img[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    border-radius: 50%;
}

.agp-pmc-img-fallback[b-y0v5gexn1j] {
    width: 28px;
    height: 28px;
    filter: invert(0.5);
    object-fit: contain;
}

/* Gap 2-3: Worker avatar badge (overlaid on process icon, bottom-right) */
.agp-worker-badge[b-y0v5gexn1j] {
    position: absolute;
    bottom: -4px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.agp-worker-img[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.agp-worker-initials[b-y0v5gexn1j] {
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
}

/* Badge vacío: indica que se puede asignar un operario */
.agp-worker-badge-empty[b-y0v5gexn1j] {
    background: #334155;
    border: 2px solid #64748b;
    color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.agp-process-mini-card:hover .agp-worker-badge-empty[b-y0v5gexn1j] {
    background: #eab308;
    border-color: #eab308;
    color: #1e293b;
}

.agp-pmc-name[b-y0v5gexn1j] {
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    min-height: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    word-break: break-word;
}

/* Gap 5: Styled hours pill matching MAUI amber pill */
.agp-pmc-hours-pill[b-y0v5gexn1j] {
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b;
    background: #f59e0b;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Keep legacy class for backward compat */
.agp-pmc-hours[b-y0v5gexn1j] {
    font-size: 10px;
    font-weight: 700;
    color: #1e293b;
    background: #f59e0b;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Gap 6: Price badge in accordion header */
.agp-price-badge[b-y0v5gexn1j] {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.agp-left[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agp-count-circle[b-y0v5gexn1j] {
    background: #f1f5f9;
    color: #334966;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 14px;
}

.agp-name[b-y0v5gexn1j] {
    color: #334966;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
}


/* =======================================
   BOTTOM SHEET NIVELES DE TRABAJO
   ======================================= */
.wl-bottom-sheet-overlay[b-y0v5gexn1j] {
    position: absolute;
    /* Relative to assign-glass-container which is overflow: hidden */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wl-bottom-sheet-content[b-y0v5gexn1j] {
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    max-height: 85%;
}

.wl-bs-header[b-y0v5gexn1j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.wl-bs-title[b-y0v5gexn1j] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
    margin: 0 0 4px 0;
    text-align: center;
}

.wl-bs-subtitle[b-y0v5gexn1j] {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

.wl-bs-close-btn[b-y0v5gexn1j] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}

.wl-bs-close-btn:hover[b-y0v5gexn1j] {
    color: #475569;
}

.wl-bs-search[b-y0v5gexn1j] {
    margin-bottom: 20px;
}

.wl-bs-search input[b-y0v5gexn1j] {
    width: 100%;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.wl-bs-search input[b-y0v5gexn1j]::placeholder {
    color: #64748b;
}

.wl-bs-search input:focus[b-y0v5gexn1j] {
    border-color: rgba(255, 255, 255, 0.2);
}

.wl-bs-grid[b-y0v5gexn1j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.wl-bs-card[b-y0v5gexn1j] {
    background: #334155;
    /* Azul oscuro como en MAUI */
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.wl-bs-card:hover[b-y0v5gexn1j] {
    transform: translateY(-2px);

}

.wl-bs-icon-circle[b-y0v5gexn1j] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;

}

.wl-bs-icon-letter[b-y0v5gexn1j] {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.wl-bs-card-title[b-y0v5gexn1j] {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.wl-bs-card-desc[b-y0v5gexn1j] {
    color: #cbd5e1;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
}

.fade-in-up[b-y0v5gexn1j] {
    animation: fadeInUp-b-y0v5gexn1j 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp-b-y0v5gexn1j {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== 3.1 REJECTION FLOW ===== */
.rejection-header[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 20px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
}

.rejection-empty[b-y0v5gexn1j] {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    font-size: 13px;
}

.rejection-process-grid[b-y0v5gexn1j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.rejection-process-card[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 14px;
    border-radius: 10px;
    background: #475569;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.rejection-process-card:hover[b-y0v5gexn1j] {
    background: #64748b;
}

.rejection-process-card.selected[b-y0v5gexn1j] {
    background: #64748b;
    border-color: #eab308;
}

.rpc-icon[b-y0v5gexn1j] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rpc-img[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    border-radius: 50%;
}

.rpc-img-fallback[b-y0v5gexn1j] {
    width: 28px;
    height: 28px;
    filter: invert(0.5);
    object-fit: contain;
}

.rpc-name[b-y0v5gexn1j] {
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    min-height: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    word-break: break-word;
}

.rejection-selected-summary[b-y0v5gexn1j] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.rss-label[b-y0v5gexn1j] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.rss-value[b-y0v5gexn1j] {
    font-size: 14px;
    font-weight: 700;
    color: #eab308;
}


/* ===== 4. LISTA DE PROCESOS (Cards Acordeón) ===== */
.assign-process-list[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Category Group Header */
.process-group-section[b-y0v5gexn1j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-header[b-y0v5gexn1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    margin-top: 8px;
}

.group-title[b-y0v5gexn1j] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: 0.5px;
}

.group-prices[b-y0v5gexn1j] {
    display: flex;
    gap: 8px;
}

.price-input-wrapper[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 2px 8px;
}

.pi-symbol[b-y0v5gexn1j] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}

.pi-input[b-y0v5gexn1j] {
    background: transparent;
    border: none;
    width: 60px;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
}

.pi-input[b-y0v5gexn1j]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.pi-input:focus[b-y0v5gexn1j] {
    outline: none;
}


/* Process Card */
.process-accordion-card[b-y0v5gexn1j] {
    background: #fff;
    border-radius: 16px;

    overflow: hidden;
    transition: all 0.3s ease;
}

.process-header[b-y0v5gexn1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: #fff;
}

.process-accordion-card.selected-card[b-y0v5gexn1j] {
    border-left: 4px solid #84cc16;
    /* Highlight selected processes visually */
}

/* Custom Checkbox */
.custom-checkbox[b-y0v5gexn1j] {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
    align-items: center;
}

.custom-checkbox input[b-y0v5gexn1j] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #84cc16;
}

.process-header.dark-theme[b-y0v5gexn1j] {
    background: #2a3c5a;
    color: #fff;
}

/* Add Process Button */
.assign-add-btn[b-y0v5gexn1j] {
    background: #94a3b8;
    /* Gris azulado sugerido por el mockup */
    border: none;
    border-radius: 14px;
    /* Bordes redondeados pero cuadrado */
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;

}

.assign-add-btn:hover[b-y0v5gexn1j] {
    background: #cbd5e1;
    /* Gris un poco más claro al hacer hover */
    transform: translateY(-2px);
}

.assign-add-btn svg[b-y0v5gexn1j] {
    width: 28px;
    height: 28px;
}

.rp-search-wrapper[b-y0v5gexn1j] {
    margin-bottom: 24px;
}

.rp-search-input[b-y0v5gexn1j] {
    width: 100%;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.rp-search-input[b-y0v5gexn1j]::placeholder {
    color: #64748b;
}

.rp-search-input:focus[b-y0v5gexn1j] {
    border-color: rgba(255, 255, 255, 0.2);
}

.rp-groups-grid[b-y0v5gexn1j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    overflow-y: auto;
}

.rp-group-card[b-y0v5gexn1j] {
    background: #fff;
    border-radius: 8px;
    padding: 16px 8px 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.rp-group-card:hover[b-y0v5gexn1j] {
    transform: translateY(-2px);

}

.rp-gc-icon[b-y0v5gexn1j] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e2e8f0;
    margin-bottom: 12px;
}

.rp-gc-name[b-y0v5gexn1j] {
    color: #1e293b;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.process-header.dark-theme .ph-title[b-y0v5gexn1j] {
    color: #fff;
}

.ph-left[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ph-sequence[b-y0v5gexn1j] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #334155;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-hours-pill[b-y0v5gexn1j] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.ph-title[b-y0v5gexn1j] {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.5px;
}

.ph-right[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ph-hours-gray[b-y0v5gexn1j] {
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.chevron-arrow[b-y0v5gexn1j] {
    color: #94a3b8;
    transition: transform 0.2s;
}

.chevron-arrow.rotated[b-y0v5gexn1j] {
    transform: rotate(180deg);
}


/* BODY DE ACORDEON (Operarios Grid) */
.process-body[b-y0v5gexn1j] {
    padding: 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.operarios-grid[b-y0v5gexn1j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Operario Card Mockup */
.operario-card[b-y0v5gexn1j] {
    background: #94a3b8;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 140px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.operario-card.active[b-y0v5gexn1j] {}

.op-avatar-wrapper[b-y0v5gexn1j] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;

}

.op-avatar-img[b-y0v5gexn1j] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.op-status-dot[b-y0v5gexn1j] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #84cc16;
    border: 2px solid #fff;
}

.op-name[b-y0v5gexn1j] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

.op-hours-pill[b-y0v5gexn1j] {
    background: #fcd34d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px;
    position: absolute;
    bottom: -10px;

}


/* ===== 5. FOOTER (Siguiente Flotante & Toggle) ===== */
.assign-footer-fixed[b-y0v5gexn1j] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: transparent;
    padding: 16px 12px 24px 12px;
}

.footer-layout[b-y0v5gexn1j] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Toggle Switch Sincronizar */
.custom-sync-toggle[b-y0v5gexn1j] {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 6px 12px 6px 6px;
    border-radius: 20px;
}

.custom-sync-toggle input[b-y0v5gexn1j] {
    display: none;
}

.sync-slider[b-y0v5gexn1j] {
    width: 32px;
    height: 18px;
    background-color: #cbd5e1;
    border-radius: 18px;
    position: relative;
    transition: 0.3s;
    margin-right: 8px;
}

.sync-slider[b-y0v5gexn1j]::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
}

.custom-sync-toggle input:checked+.sync-slider[b-y0v5gexn1j] {
    background-color: #84cc16;
}

.custom-sync-toggle input:checked+.sync-slider[b-y0v5gexn1j]::before {
    transform: translateX(14px);
}

.sync-label[b-y0v5gexn1j] {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Boton Confirmar Flotante */
.btn-siguiente-float[b-y0v5gexn1j] {
    background: rgba(232, 67, 147, 0.95);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 24px;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-siguiente-float:hover:not(:disabled)[b-y0v5gexn1j] {
    background: rgba(232, 67, 147, 1);
    transform: translateY(-2px);

}

.btn-siguiente-float:disabled[b-y0v5gexn1j] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #94a3b8;
}

/* Boton Cancelar Flotante */
.btn-cancel-float[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: #f8fafc;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-cancel-float:hover:not(:disabled)[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-cancel-float:disabled[b-y0v5gexn1j] {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes fadeIn-b-y0v5gexn1j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────
   Assignment Modal Styles (Remaining)
   ───────────────────────────────────────────── */
/* ── Aire lateral y botones de igual ancho ───────────────────────────────────
   El contenido llegaba pegado a los bordes del panel; con el panel más estrecho se notaba más. */
.assign-glass-container[b-y0v5gexn1j] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
}

/* Los dos botones miden lo mismo: «Cancelar» era visiblemente más angosto que «Asignar» y el par
   quedaba descompensado. El ancho mínimo lo fija el más largo de los dos. */
.btn-cancel-float[b-y0v5gexn1j],
.btn-siguiente-float[b-y0v5gexn1j] {
    min-width: 150px !important;
    justify-content: center !important;
}

/* ── Cabecera: que nada desborde por la derecha ──────────────────────────────
   Un elemento flex no baja de la anchura de su contenido salvo que se le permita con `min-width: 0`.
   Sin eso, la píldora de la orden y el título empujaban hacia fuera del panel y quedaban cortados
   por el borde. Ahora se encogen y recortan su texto; la fecha, que es corta y no debe partirse,
   es la única que conserva su tamaño. */
.hc-content[b-y0v5gexn1j],
.hc-row-top[b-y0v5gexn1j],
.hc-title-col[b-y0v5gexn1j],
.hop-center[b-y0v5gexn1j] {
    min-width: 0 !important;
}

.hc-row-top[b-y0v5gexn1j] {
    gap: 10px !important;
}

.hc-date-col[b-y0v5gexn1j] {
    flex-shrink: 0 !important;
}

.hc-order-pill[b-y0v5gexn1j] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hop-center > span[b-y0v5gexn1j],
.hc-placa[b-y0v5gexn1j] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* La etiqueta ahora es corta; se ajusta al cuerpo de la fecha en lugar de dominarla. */
.hc-date-label[b-y0v5gexn1j] {
    font-size: 9px !important;
    letter-spacing: 0.2px !important;
}
/* /Pages/Home/Components/Assignments/ProcessGroupSidebar.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   Títulos del header (ambas vistas)
────────────────────────────────────────────── */
.pgs-title[b-y8hyj633cg] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
}

.pgs-subtitle[b-y8hyj633cg] {
    font-size: 11px;
    color: #94a3b8;
    margin: 2px 0 0 0;
    text-align: center;
    width: 100%;
}

/* Header vista 2 (grupo → procesos) */
.pgs-process-header[b-y8hyj633cg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pgs-back-btn[b-y8hyj633cg] {
    position: absolute;
    top: -11px;
    left: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    z-index: 1000;
}

.pgs-back-btn:hover[b-y8hyj633cg] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ─────────────────────────────────────────────
   Buscador (compartido)
────────────────────────────────────────────── */
.pgs-search-input[b-y8hyj633cg] {
    width: 100%;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.pgs-search-input[b-y8hyj633cg]::placeholder {
    color: #64748b;
}

.pgs-search-input:focus[b-y8hyj633cg] {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ─────────────────────────────────────────────
   VISTA 1 – Grid de grupos
────────────────────────────────────────────── */
.pgs-groups-grid[b-y8hyj633cg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pgs-group-card[b-y8hyj633cg] {
    background: #fff;
    border-radius: 12px;
    padding: 20px 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    min-height: 110px;
    position: relative;
}

.pgs-group-card:hover[b-y8hyj633cg] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pgs-group-card.already-added[b-y8hyj633cg] {
    opacity: 0.6;
}

.pgs-gc-icon[b-y8hyj633cg] {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pgs-gc-icon img[b-y8hyj633cg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pgs-gc-name[b-y8hyj633cg] {
    color: #1e293b;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
    word-break: break-word;
}

.pgs-gc-badge[b-y8hyj633cg] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────────
   VISTA 2 – Info row aseguradora + valor hora
────────────────────────────────────────────── */
.pgs-info-row[b-y8hyj633cg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.pgs-info-label[b-y8hyj633cg] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.pgs-info-value[b-y8hyj633cg] {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
}

/* ─────────────────────────────────────────────
   VISTA 2 – Inputs Horas / Materiales
────────────────────────────────────────────── */
.pgs-price-inputs[b-y8hyj633cg] {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pgs-price-field[b-y8hyj633cg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pgs-price-label[b-y8hyj633cg] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.pgs-price-input-row[b-y8hyj633cg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pgs-price-input[b-y8hyj633cg] {
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    width: 100px;
    outline: none;
    transition: border-color 0.2s;
}

.pgs-price-input:focus[b-y8hyj633cg] {
    border-color: #eab308;
}

/* Ocultar spinners */
.pgs-price-input[b-y8hyj633cg]::-webkit-outer-spin-button,
.pgs-price-input[b-y8hyj633cg]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.pgs-price-input[type=number][b-y8hyj633cg] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pgs-price-computed[b-y8hyj633cg] {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-align: right;
}

/* Nuevas clases para dual input mode Horas/Valor */
.pgs-value-input[b-y8hyj633cg] {
    flex: 1;
    text-align: right;
    max-width: 140px;
    font-size: 18px;
    font-weight: 800;
    padding-right: 12px;
    /* Coincide con el padding-right del input */
}

.pgs-input-locked[b-y8hyj633cg] {
    background: transparent;
    border-color: transparent;
    color: #fff;
    cursor: pointer;
    box-shadow: none;
}

.pgs-input-locked:focus[b-y8hyj633cg] {
    border-color: transparent;
}

.mode-switch-wrapper[b-y8hyj633cg] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.mode-switch[b-y8hyj633cg] {
    position: relative;
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 3px;
    width: 220px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.mode-switch-slider[b-y8hyj633cg] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: #eab308;
    border-radius: 17px;
    transition: transform 0.3s cubic-bezier(0.68, -0.1, 0.265, 1.25);
}

.mode-switch-slider.right[b-y8hyj633cg] {
    transform: translateX(100%);
}

.mode-switch-option[b-y8hyj633cg] {
    z-index: 1;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.3s;
    user-select: none;
}

.mode-switch-option.active[b-y8hyj633cg] {
    color: #1e293b;
}

.pgs-price-total-label[b-y8hyj633cg] {
    font-size: 16px;
    color: #94a3b8;
    flex: 1;
    /* Empuja el resto a la derecha */
}

.pgs-total-row[b-y8hyj633cg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* Cambio de flex-end a space-between con el flex del label */
    gap: 4px;
    padding-top: 4px;
    padding-right: 12px;
    /* Alineación perfecta con el texto de los inputs */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pgs-total-prefix[b-y8hyj633cg] {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
}

.pgs-total-value[b-y8hyj633cg] {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

/* ─────────────────────────────────────────────
   VISTA 2 – Sección de procesos
────────────────────────────────────────────── */
.pgs-processes-section-header[b-y8hyj633cg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.pgs-processes-title[b-y8hyj633cg] {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.pgs-processes-subtitle[b-y8hyj633cg] {
    font-size: 11px;
    color: #94a3b8;
}

/* Grid procesos (3 columnas como MAUI) */
.pgs-processes-grid[b-y8hyj633cg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.pgs-process-card[b-y8hyj633cg] {
    background: #1e3a5f;
    border-radius: 14px;
    padding: 12px 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    min-height: 130px;
    position: relative;
    border: 2px solid transparent;
    margin-bottom: 12px;
}

.pgs-process-card:hover[b-y8hyj633cg] {
    background: #1e4a7a;
    transform: translateY(-2px);
}

.assigned-process-executed[b-y8hyj633cg] {
    opacity: 0.5;
    pointer-events: none;
}

.pgs-process-card.selected[b-y8hyj633cg] {
    background: #eab308;
    border-color: #f59e0b;
}

.pgs-pc-icon-wrapper[b-y8hyj633cg] {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-pc-icon[b-y8hyj633cg] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    padding: 10px;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pgs-pc-icon-fallback[b-y8hyj633cg] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-pc-selected-dot[b-y8hyj633cg] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #eab308;
}

.pgs-pc-name[b-y8hyj633cg] {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    height: 24px;
    display: grid;
    place-items: center;
    overflow: hidden;
    word-break: break-word;
}

.pgs-process-card.selected .pgs-pc-name[b-y8hyj633cg] {
    color: #fff;
}

.pgs-pc-hours-badge[b-y8hyj633cg] {
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pgs-process-card.selected .pgs-pc-hours-badge[b-y8hyj633cg] {
    background: #ffffff;
    color: #f59e0b;
}

.pgs-main-container[b-y8hyj633cg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 75vh;
    /* Aproximadamente el alto del sidebar */
}

/* ─────────────────────────────────────────────
   Footer botones
   Se posicionan al final del contenedor flex
────────────────────────────────────────────── */
.pgs-footer-btns[b-y8hyj633cg] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px 30px;
    margin-top: auto;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 10;
}

.pgs-btn-delete[b-y8hyj633cg] {
    background: transparent;
    border: 1px solid #ef4444;
    border-radius: 20px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}

.pgs-btn-delete:hover[b-y8hyj633cg] {
    background: rgba(239, 68, 68, 0.1);
}

.pgs-btn-cancel[b-y8hyj633cg] {
    background: #475569;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
    transition: background 0.2s;
    flex: 1;
    text-align: center;
}

.pgs-btn-cancel:hover[b-y8hyj633cg] {
    background: #64748b;
}

.pgs-btn-next[b-y8hyj633cg] {
    background: #e84393;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    box-shadow: 0 4px 12px rgba(232, 67, 147, 0.4);
    flex: 1;
    text-align: center;
}

.pgs-btn-next:hover[b-y8hyj633cg] {
    background: #d83a84;
}

.pgs-btn-next:disabled[b-y8hyj633cg] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────
   Loading state
────────────────────────────────────────────── */
.pgs-loading[b-y8hyj633cg] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 13px;
    padding: 20px 0;
}

/* ─────────────────────────────────────────────
   Botón de asignación de operario por proceso
   (equivalente al St_PickerWorkloadCircle de MAUI)
────────────────────────────────────────────── */
.pgs-worker-btn[b-y8hyj633cg] {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.18s;
    padding: 0;
    z-index: 2;
}

.pgs-worker-btn:hover[b-y8hyj633cg] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    transform: scale(1.1);
}

.pgs-worker-btn.has-worker[b-y8hyj633cg] {
    background: #22c55e;
    border-color: #16a34a;
    color: #fff;
}

.pgs-worker-btn.has-worker:hover[b-y8hyj633cg] {
    background: #16a34a;
}

.pgs-worker-initial[b-y8hyj633cg] {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

/* ─────────────────────────────────────────────
   Sidebar secundario: picker grid (reutiliza patrón creación)
────────────────────────────────────────────── */
.sidebar-search-container[b-y8hyj633cg] {
    margin-bottom: 12px;
}

.sidebar-search-input[b-y8hyj633cg] {
    width: 100%;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.sidebar-search-input[b-y8hyj633cg]::placeholder {
    color: #64748b;
}

.sidebar-search-input:focus[b-y8hyj633cg] {
    border-color: rgba(255, 255, 255, 0.2);
}

.picker-sidebar-subtitle[b-y8hyj633cg] {
    font-size: 11px;
    color: #94a3b8;
    margin: 0 0 16px;
}

.picker-sidebar-empty[b-y8hyj633cg] {
    text-align: center;
    color: #64748b;
    font-size: 13px;
    padding: 24px 0;
}

.picker-grid[b-y8hyj633cg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ─────────────────────────────────────────────
   Diálogo: Actualización de valor hora
────────────────────────────────────────────── */
.pgs-hourprice-overlay[b-y8hyj633cg] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: pgs-fade-in-b-y8hyj633cg 0.2s ease;
}

.pgs-hourprice-dialog[b-y8hyj633cg] {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(234, 179, 8, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: dialogPop-b-y8hyj633cg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pgs-fade-in-b-y8hyj633cg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pgs-scale-in-b-y8hyj633cg {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.pgs-hourprice-icon[b-y8hyj633cg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-hourprice-title[b-y8hyj633cg] {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

.pgs-hourprice-detail[b-y8hyj633cg] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pgs-hourprice-row[b-y8hyj633cg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pgs-hourprice-row.highlight[b-y8hyj633cg] {
    padding: 6px 0;
}

.pgs-hourprice-row.message[b-y8hyj633cg] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    line-height: 1.5;
    text-align: center;
}

.pgs-hourprice-label[b-y8hyj633cg] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.pgs-hourprice-amount[b-y8hyj633cg] {
    font-size: 14px;
    font-weight: 700;
    color: #cbd5e1;
}

.pgs-hourprice-amount.accent[b-y8hyj633cg] {
    color: #eab308;
    font-size: 16px;
    font-weight: 800;
}

.pgs-hourprice-divider[b-y8hyj633cg] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.pgs-hourprice-actions[b-y8hyj633cg] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.pgs-hourprice-btn[b-y8hyj633cg] {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.pgs-hourprice-btn-no[b-y8hyj633cg] {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pgs-hourprice-btn-no:hover[b-y8hyj633cg] {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.pgs-hourprice-btn-yes[b-y8hyj633cg] {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25);
}

.pgs-hourprice-btn-yes:hover[b-y8hyj633cg] {
    background: linear-gradient(135deg, #facc15, #eab308);
    box-shadow: 0 6px 16px rgba(234, 179, 8, 0.35);
    transform: translateY(-1px);
}

@keyframes fadeIn-b-y8hyj633cg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dialogPop-b-y8hyj633cg {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
/* /Pages/Home/Components/Authorization/AuthorizationCard.razor.rz.scp.css */
.auth-card[b-1p9bkk9cht] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    color: #1e293b;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-card:hover[b-1p9bkk9cht] {
    border-color: rgba(222, 163, 1, 0.5);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.auth-card.reclaim-card[b-1p9bkk9cht] {
    background: #f0fdf4;
}

.auth-card-summary[b-1p9bkk9cht] {
    all: unset;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    width: 100%;
    min-height: 116px;
    padding: 8px;
    color: inherit;
}

.auth-card-summary:not(:disabled)[b-1p9bkk9cht] {
    cursor: pointer;
}

.auth-card-summary:disabled[b-1p9bkk9cht] {
    opacity: 1;
    cursor: default;
}

.auth-card-summary:focus-visible[b-1p9bkk9cht],
.auth-action-btn:focus-visible[b-1p9bkk9cht] {
    outline: 2px solid #d81b84;
    outline-offset: -3px;
}

.auth-asset-section[b-1p9bkk9cht] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.auth-asset-image-container[b-1p9bkk9cht] {
    position: relative;
    width: 100%;
    height: 82px;
    overflow: hidden;
    background: #aeb1b5;
    border-radius: 15px;
}

.auth-asset-image[b-1p9bkk9cht] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-asset-placeholder[b-1p9bkk9cht] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.88);
}

.auth-asset-placeholder svg[b-1p9bkk9cht] {
    width: 32px;
    height: 32px;
}

.auth-elapsed-badge[b-1p9bkk9cht] {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-height: 21px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
    color: #ffffff;
}

.elapsed-value[b-1p9bkk9cht],
.elapsed-suffix[b-1p9bkk9cht] {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.elapsed-green[b-1p9bkk9cht] {
    background: #16a34a;
}

.elapsed-orange[b-1p9bkk9cht] {
    background: #d97706;
}

.elapsed-red[b-1p9bkk9cht] {
    background: #dc2626;
}

.auth-asset-info[b-1p9bkk9cht] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 4px;
}

.auth-asset-number[b-1p9bkk9cht] {
    overflow: hidden;
    color: #1e293b;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-asset-date[b-1p9bkk9cht] {
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-person-section[b-1p9bkk9cht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 2px;
}

.auth-avatar-pair[b-1p9bkk9cht] {
    position: relative;
    width: 50px;
    height: 50px;
}

.auth-process-avatar[b-1p9bkk9cht] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
}

.avatar-img[b-1p9bkk9cht] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.auth-person-mini-avatar[b-1p9bkk9cht] {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #dea301;
    border-radius: 9999px;
}

.mini-avatar-img[b-1p9bkk9cht] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-1p9bkk9cht] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #334d6e;
}

.avatar-placeholder.process[b-1p9bkk9cht] {
    padding: 7px;
}

.avatar-placeholder.person[b-1p9bkk9cht] {
    padding: 4px;
}

.avatar-placeholder svg[b-1p9bkk9cht] {
    width: 100%;
    height: 100%;
}

.auth-process-name[b-1p9bkk9cht],
.auth-person-name[b-1p9bkk9cht] {
    overflow: hidden;
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-process-name[b-1p9bkk9cht] {
    color: #334d6e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}

.auth-person-name[b-1p9bkk9cht] {
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.15;
}

.auth-arrow-section[b-1p9bkk9cht] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334d6e;
}

.auth-arrow-section svg[b-1p9bkk9cht] {
    width: 25px;
    height: 25px;
}

.auth-status-badge[b-1p9bkk9cht] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.auth-status-badge svg[b-1p9bkk9cht] {
    width: 13px;
    height: 13px;
}

.status-authorized[b-1p9bkk9cht] {
    background: #dcfce7;
    color: #166534;
}

.status-rejected[b-1p9bkk9cht] {
    background: #fee2e2;
    color: #991b1b;
}

.auth-card-actions[b-1p9bkk9cht] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 6px;
    margin-top: -22px;
    padding: 0 8px 8px;
}

.auth-action-btn[b-1p9bkk9cht] {
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-action-btn:disabled[b-1p9bkk9cht] {
    opacity: 0.55;
    cursor: not-allowed;
}

.reject-btn[b-1p9bkk9cht] {
    grid-column: 2;
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.reject-btn:hover:not(:disabled)[b-1p9bkk9cht] {
    background: #fecaca;
    border-color: #ef4444;
}

.accept-btn[b-1p9bkk9cht] {
    grid-column: 4;
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.accept-btn:hover:not(:disabled)[b-1p9bkk9cht] {
    background: #bbf7d0;
    border-color: #22c55e;
}

.auth-card-expanded[b-1p9bkk9cht] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 12px 12px;
    background: #f8fafc;
}

.reclaim-card .auth-card-expanded[b-1p9bkk9cht] {
    background: #f0fdf4;
}

.auth-expanded-section[b-1p9bkk9cht] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-expanded-label[b-1p9bkk9cht] {
    color: #9a6700;
    font-size: 11px;
    font-weight: 700;
}

.auth-expanded-text[b-1p9bkk9cht] {
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
}

.auth-photo-grid[b-1p9bkk9cht] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.auth-photo-item[b-1p9bkk9cht] {
    height: 76px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 8px;
}

.auth-photo-img[b-1p9bkk9cht] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 430px) {
    .auth-card-summary[b-1p9bkk9cht],
    .auth-card-actions[b-1p9bkk9cht] {
        grid-template-columns: 104px minmax(0, 1fr) 28px minmax(0, 1fr);
        gap: 4px;
    }

    .auth-asset-image-container[b-1p9bkk9cht] {
        height: 78px;
    }

    .auth-process-name[b-1p9bkk9cht] {
        font-size: 10px;
    }

    .auth-card-actions[b-1p9bkk9cht] {
        margin-top: -20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card[b-1p9bkk9cht],
    .auth-action-btn[b-1p9bkk9cht] {
        transition-duration: 0.01ms;
    }
}
/* /Pages/Home/Components/Authorization/AuthorizationPanel.razor.rz.scp.css */
.authorization-panel[b-iu95llzvd7] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

.auth-header[b-iu95llzvd7] {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 18px 14px;
}

.auth-heading[b-iu95llzvd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.auth-header-icon-tile[b-iu95llzvd7] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.auth-header-icon[b-iu95llzvd7] {
    width: 22px;
    height: 22px;
}

.auth-header-text[b-iu95llzvd7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-header-text h2[b-iu95llzvd7] {
    overflow: hidden;
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-header-subtitle[b-iu95llzvd7] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.auth-close-btn[b-iu95llzvd7] {
    position: relative;
    isolation: isolate;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-block-start: -14px;
    margin-inline-end: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(241, 241, 241, 0.85);
    cursor: pointer;
    transition: color 0.2s ease;
}

.auth-close-btn[b-iu95llzvd7]::before {
    position: absolute;
    inset: 6px;
    z-index: -1;
    border-radius: 10px;
    background: transparent;
    content: "";
    transition: background-color 0.2s ease;
}

.auth-close-btn svg[b-iu95llzvd7] {
    width: 28px;
    height: 28px;
}

.auth-close-btn:hover[b-iu95llzvd7] {
    color: #ffffff;
}

.auth-close-btn:hover[b-iu95llzvd7]::before {
    background: rgba(255, 255, 255, 0.1);
}

.auth-close-btn:focus-visible[b-iu95llzvd7] {
    outline: 2px solid #d81b84;
    outline-offset: -6px;
}

.auth-tabs[b-iu95llzvd7] {
    display: grid;
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(calc(100% - 36px), 330px);
    margin: 0 auto 12px 18px;
    padding: 0;
    background: transparent;
    border: 0;
}

.auth-tab[b-iu95llzvd7] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 88px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: var(--inbox-pill-radius, 20px);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.auth-tab[b-iu95llzvd7]::before {
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-radius: var(--inbox-pill-radius, 20px);
    background: var(--inbox-pill-background, #1f2f45);
    content: "";
    transition: background-color 0.2s ease;
}

.auth-tab:not(.active):hover[b-iu95llzvd7]::before,
.auth-tab:not(.active):focus-visible[b-iu95llzvd7]::before {
    background: #264a73;
}

.auth-tab.active[b-iu95llzvd7] {
    background: transparent;
    color: #ffffff;
    font-weight: 600;
}

.auth-tab.active[b-iu95llzvd7]::before {
    background: var(--inbox-pill-active-background, #e5b900);
}

.auth-tab:focus-visible[b-iu95llzvd7],
.load-more-btn:focus-visible[b-iu95llzvd7],
.auth-dialog-btn:focus-visible[b-iu95llzvd7] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.tab-count[b-iu95llzvd7] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.pending-count[b-iu95llzvd7] {
    background: rgba(255, 255, 255, 0.28);
}

.auth-content[b-iu95llzvd7] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 0 10px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    scrollbar-width: thin;
}

.auth-content[b-iu95llzvd7]::-webkit-scrollbar {
    width: 5px;
}

.auth-content[b-iu95llzvd7]::-webkit-scrollbar-track {
    background: transparent;
}

.auth-content[b-iu95llzvd7]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
}

.auth-loading[b-iu95llzvd7],
.auth-empty[b-iu95llzvd7] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 40px 24px;
    text-align: center;
}

.auth-loading[b-iu95llzvd7] {
    gap: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.auth-spinner[b-iu95llzvd7] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(216, 27, 132, 0.2);
    border-top-color: #d81b84;
    border-radius: 9999px;
    animation: auth-spin-b-iu95llzvd7 0.8s linear infinite;
}

@keyframes auth-spin-b-iu95llzvd7 {
    to {
        transform: rotate(360deg);
    }
}

.auth-empty[b-iu95llzvd7] {
    gap: 8px;
}

.auth-empty-icon[b-iu95llzvd7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(216, 27, 132, 0.14), rgba(222, 163, 1, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.66);
}

.auth-empty-icon svg[b-iu95llzvd7] {
    width: 32px;
    height: 32px;
}

.deliver-empty .auth-empty-icon[b-iu95llzvd7] {
    background: rgba(59, 130, 246, 0.12);
    color: #bfdbfe;
}

.auth-empty-title[b-iu95llzvd7] {
    color: #f1f1f1;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.auth-empty-subtitle[b-iu95llzvd7] {
    max-width: 280px;
    color: #b0b5c1;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.auth-load-more[b-iu95llzvd7] {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px 0;
}

.load-more-btn[b-iu95llzvd7] {
    min-height: 36px;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    color: #f1f1f1;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.load-more-btn:hover[b-iu95llzvd7] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.36);
}

.auth-dialog-overlay[b-iu95llzvd7] {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: auth-fade-in-b-iu95llzvd7 0.2s ease;
}

@keyframes auth-fade-in-b-iu95llzvd7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.auth-dialog[b-iu95llzvd7] {
    width: min(100%, 420px);
    padding: 24px;
    background: linear-gradient(135deg, #1f304d, #3a4c64);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: auth-slide-up-b-iu95llzvd7 0.25s ease;
}

@keyframes auth-slide-up-b-iu95llzvd7 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-dialog-title[b-iu95llzvd7] {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.auth-dialog-message[b-iu95llzvd7] {
    margin-bottom: 20px;
    color: #f1f1f1;
    font-size: 14px;
    line-height: 1.5;
}

.auth-dialog-actions[b-iu95llzvd7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.auth-dialog-btn[b-iu95llzvd7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-dialog-btn.cancel[b-iu95llzvd7] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f1f1f1;
}

.auth-dialog-btn.cancel:hover[b-iu95llzvd7] {
    background: rgba(255, 255, 255, 0.16);
}

.auth-dialog-btn.confirm[b-iu95llzvd7] {
    background: #d81b84;
    color: #ffffff;
}

.auth-dialog-btn.confirm:hover:not(:disabled)[b-iu95llzvd7] {
    background: #eb5bb6;
    box-shadow: 0 4px 12px rgba(216, 27, 132, 0.35);
}

.auth-dialog-btn:disabled[b-iu95llzvd7] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-spinner[b-iu95llzvd7] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 9999px;
    animation: auth-spin-b-iu95llzvd7 0.6s linear infinite;
}

@media (max-width: 430px) {
    .auth-header[b-iu95llzvd7] {
        padding-inline: 14px;
    }

    .auth-tabs[b-iu95llzvd7] {
        gap: 8px;
        width: calc(100% - 16px);
        margin-inline: 8px;
    }

    .auth-content[b-iu95llzvd7] {
        padding-inline: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-tab[b-iu95llzvd7],
    .load-more-btn[b-iu95llzvd7],
    .auth-dialog-btn[b-iu95llzvd7],
    .auth-dialog-overlay[b-iu95llzvd7],
    .auth-dialog[b-iu95llzvd7] {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}
/* /Pages/Home/Components/Calendar/CalendarPanel.razor.rz.scp.css */
/* =========================================
   CalendarPanel.razor.css — Unified Control Board, Distinct Views & Restored Stage Filters
   ========================================= */

.calendar-container-light[b-gkb2tfznfv] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Rótulos dentro de su botón ──
   Los tres tableros (DCB, JSCB y JPCB) meten botones con rótulo en columnas que se estrechan con la
   ventana: la tarjeta de operarios reparte su ancho entre cuatro columnas y las barras superiores
   comprimen sus píldoras. Un botón con `white-space: nowrap` y el ancho ajustado a su hueco pintaba
   el texto fuera de su propio contorno, derramado sobre la tarjeta de al lado. Aquí el rótulo se
   queda dentro del botón: cuando no cabe se recorta, nunca se sale. Va con `::deep` porque los
   botones de JscbBoardView, JpcbBoardView y los paneles del tablero son de otros componentes.
   Ningún botón de estos tableros lleva hijos posicionados en absoluto, así que recortar no esconde
   nada que deba verse fuera. */
.calendar-container-light[b-gkb2tfznfv]  button {
    /* `clip` y no `hidden`: recorta igual, pero no convierte el botón en contenedor de
       desplazamiento ni le mueve la línea base, así que ningún botón ya alineado se descoloca.
       Tampoco se tocan aquí anchos ni mínimos: varios botones de los tableros dependen de su
       propio `min-width` y pisarlos desde una regla general sí cambiaría el tablero. */
    overflow: clip;
    text-overflow: ellipsis;
}

/* ── Header ── */
.calendar-header-light[b-gkb2tfznfv] {
    /* Sin línea divisoria: es la segunda raya de lado a lado que se retira del panel. El título y
       el resumen ya se distinguen por el espacio y porque debajo empiezan tarjetas con su propio
       borde. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 0;
}

/* Configuration uses the same compact header rhythm as every operational board mode. */
.calendar-header-light.is-config-mode[b-gkb2tfznfv] {
    margin-bottom: 8px;
    padding-bottom: 0;
}

.header-left[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-badge-light[b-gkb2tfznfv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

.calendar-title-light[b-gkb2tfznfv] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.calendar-subtitle-light[b-gkb2tfznfv] {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: #64748b;
}

/* ── Search Filter Summary Badge (Header Center) ── */
.header-center[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0 16px;
    min-width: 0;
}

.header-search-filter-badge[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 14px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    border: 1px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    animation: searchBadgePopIn-b-gkb2tfznfv 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.search-badge-icon[b-gkb2tfznfv] {
    color: #d97706;
    font-size: 13px;
    flex-shrink: 0;
}

.search-badge-text[b-gkb2tfznfv] {
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.search-badge-clear-btn[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(217, 119, 6, 0.15);
    color: #92400e;
    cursor: pointer;
    margin-left: 2px;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.search-badge-clear-btn:hover[b-gkb2tfznfv] {
    background: #f59e0b;
    color: #ffffff;
    transform: scale(1.12);
}

.search-badge-clear-btn i[b-gkb2tfznfv] {
    font-size: 10px;
    line-height: 1;
}

@keyframes searchBadgePopIn-b-gkb2tfznfv {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.header-actions[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-search-rounded[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 30px;
    padding: 6px 16px;
    width: 320px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.header-search-rounded:focus-within[b-gkb2tfznfv] {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    width: 360px;
}

.header-search-rounded svg[b-gkb2tfznfv] {
    color: #64748b;
    flex-shrink: 0;
}

.header-search-rounded input[b-gkb2tfznfv] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    width: 100%;
    color: #0f172a;
}

.header-search-rounded input[b-gkb2tfznfv]::placeholder {
    color: #94a3b8;
}

.btn-clear-search[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s ease;
}

.btn-clear-search:hover[b-gkb2tfznfv] {
    color: #475569;
}

/* ── Botones Estandarizados Estilo Navegación y Fecha ── */
.nav-std-btn[b-gkb2tfznfv] {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-std-btn:hover[b-gkb2tfznfv] {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
}

.nav-std-btn-cyan[b-gkb2tfznfv] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.nav-std-btn-cyan:hover[b-gkb2tfznfv] {
    background: #0369a1;
    border-color: #0369a1;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
}

.jscb-header-date[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
}

.jscb-header-date .date-month-badge[b-gkb2tfznfv] {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
}

.date-btn-today[b-gkb2tfznfv] {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-btn-today:hover[b-gkb2tfznfv] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.month-navigator-light[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.nav-btn-light[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.nav-btn-light:hover[b-gkb2tfznfv] {
    background: #e2e8f0;
    color: #0f172a;
}

.current-month-text-light[b-gkb2tfznfv] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.5px;
    min-width: 180px;
    text-align: center;
    text-transform: capitalize;
}

.dealership-logo[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toyota-badge[b-gkb2tfznfv] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #eb0a1e;
}

.colision-text[b-gkb2tfznfv] {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

.close-panel-btn-light[b-gkb2tfznfv] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-panel-btn-light:hover[b-gkb2tfznfv] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #ef4444;
}

/* ── KPIs Grid ── */
.calendar-kpis-grid-light[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card-light[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.kpi-card-light:hover[b-gkb2tfznfv] {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.kpi-card-light.active-kpi[b-gkb2tfznfv] {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.kpi-label[b-gkb2tfznfv] {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 2px;
}

.kpi-value[b-gkb2tfznfv] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.kpi-icon[b-gkb2tfznfv] {
    font-size: 22px;
}

/* ── Independent board zones: full-width summary above the operational grid ── */
.calendar-board-top-zone[b-gkb2tfznfv] {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    /* Sin línea divisoria: cada bloque de esta zona ya viene en su propia tarjeta con borde, así
       que la raya de lado a lado sumaba un segundo corte sobre uno que ya se leía. La separación
       la sigue dando el espacio. */
    padding-bottom: 0;
    margin-bottom: 8px;
    box-sizing: border-box;
}

/* Lift open board overlays above operational sticky headers without overtaking global drawers. */
.calendar-board-top-zone.has-open-overlay[b-gkb2tfznfv] {
    z-index: 1000;
}

.calendar-board-bottom-zone[b-gkb2tfznfv] {
    /* Sin `z-index` propio a propósito. Con uno, esta zona creaba un contexto de apilamiento y
       encerraba dentro a los drawers que viven en el tablero: por muy alto que fuera su z-index
       —1050 el del vehículo—, se comparaba como si fuera 1 contra el 2 de la zona superior, así
       que el resumen y las anomalías quedaban por encima del panel y de su desenfoque. Sin
       contexto, esos drawers participan del apilamiento raíz y cubren la pantalla entera. */
    position: relative;
    display: flex;
    /* Una sola medida para todo el tablero: 8 px entre columnas, entre las tres zonas y contra los
       bordes. Antes cada zona traía la suya —6, 10 y 14— y los huecos se veían desiguales según
       dónde cayera la separación. */
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.calendar-board-bottom-zone > .calendar-content-area-light[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
}

/* ── Top Summary Bar (Resumen del Día arriba de Toolbar y alineado a la izquierda) ── */
.calendar-top-summary-bar[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.summary-card-top-slot[b-gkb2tfznfv] {
    /* El resumen dejaba de acompañar a sus vecinas: su tarjeta marcaba la altura de la fila y
       sobresalía por arriba en lugar de ajustarse a ella. Con el slot y su contenido a la altura
       completa, las tres columnas comparten borde superior e inferior. */
    flex-shrink: 0;
    display: flex;
    height: 100%;
    min-height: 0;
}

.summary-card-top-slot > *[b-gkb2tfznfv] {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

/* ── Toolbar: Búsqueda, Filtros de Etapa Originales y Conmutador de Vistas ── */
.calendar-toolbar-light[b-gkb2tfznfv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    background: #F7F8FA !important;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.toolbar-search-light[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    flex: 1;
    min-width: 340px;
    max-width: 420px;
}

.toolbar-search-light input[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    outline: none;
    color: #0f172a;
    font-size: 13px;
    width: 100%;
}

.status-pills-light[b-gkb2tfznfv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pill-light[b-gkb2tfznfv] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.pill-light:hover[b-gkb2tfznfv] {
    background: #f1f5f9;
    color: #0f172a;
}

.pill-light.active[b-gkb2tfznfv] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.stage-pill-rep.active[b-gkb2tfznfv] {
    background: #10b981;
    border-color: #10b981;
}

.stage-pill-prep.active[b-gkb2tfznfv] {
    background: #f59e0b;
    border-color: #f59e0b;
}

.stage-pill-paint.active[b-gkb2tfznfv] {
    background: #ec4899;
    border-color: #ec4899;
}

.stage-pill-rem.active[b-gkb2tfznfv] {
    background: #a855f7;
    border-color: #a855f7;
}

.stage-pill-exceso.active[b-gkb2tfznfv] {
    background: #ef4444;
    border-color: #ef4444;
}

.stage-pill-anticipado.active[b-gkb2tfznfv] {
    background: #10b981;
    border-color: #10b981;
}

.font-10[b-gkb2tfznfv] {
    font-size: 10px;
}

.view-switcher-light[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* ── Botones Estándar de Barra de Herramientas y Dropdowns ── */
.nav-std-btn[b-gkb2tfznfv] {
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.nav-std-btn-secondary[b-gkb2tfznfv] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nav-std-btn-secondary:hover[b-gkb2tfznfv] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.dropdown-container[b-gkb2tfznfv] {
    position: relative;
    display: inline-block;
}

.custom-dropdown-menu[b-gkb2tfznfv] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    z-index: 1050;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-dropdown-menu .dropdown-item[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #334155;
    background: transparent;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: all 0.12s ease;
}

.custom-dropdown-menu .dropdown-item:hover[b-gkb2tfznfv] {
    background: #f1f5f9;
    color: #0f172a;
}

.custom-dropdown-menu .dropdown-item.active[b-gkb2tfznfv] {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 700;
}

.view-btn-light[b-gkb2tfznfv] {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.view-btn-light i[b-gkb2tfznfv] {
    font-size: 13px;
    color: #64748b;
    transition: color 0.15s ease;
}

.view-btn-light:hover[b-gkb2tfznfv] {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.view-btn-light.active[b-gkb2tfznfv] {
    background: #ffffff;
    color: #0284c7;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.view-btn-light.active i[b-gkb2tfznfv] {
    color: #0284c7;
}

/* ── Content & Split Container ── */
.calendar-content-area-light[b-gkb2tfznfv] {
    flex: 1;
    min-height: 0;
    height: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── VISTA 1: DÍA — TABLERO HORARIO OPERATIVO (MONDAY STYLE) ── */
.monday-split-board-view[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: 1fr 400px;
    flex: 1;
    height: 100%;
    min-height: 0;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}

.monday-board-container[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    border-right: 1px solid #e2e8f0;
    overflow: hidden;
    width: 100%;
}

.monday-board-header-bar[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.date-navigator-group[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scale-label-group[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scale-bar-label[b-gkb2tfznfv] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.time-scale-pill-box[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.scale-pill-btn[b-gkb2tfznfv] {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.scale-pill-btn i[b-gkb2tfznfv] {
    font-size: 13px;
    color: #64748b;
    transition: color 0.15s ease;
}

.scale-pill-btn:hover[b-gkb2tfznfv] {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.scale-pill-btn.active[b-gkb2tfznfv] {
    background: #ffffff;
    color: #0284c7;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.scale-pill-btn.active i[b-gkb2tfznfv] {
    color: #0284c7;
}

.monday-board-top-legend[b-gkb2tfznfv] {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.legend-pill[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #475569;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.dot-color[b-gkb2tfznfv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-color.rep[b-gkb2tfznfv] {
    background: #10b981;
}

.dot-color.prep[b-gkb2tfznfv] {
    background: #f59e0b;
}

.dot-color.paint[b-gkb2tfznfv] {
    background: #ec4899;
}

.dot-color.rem[b-gkb2tfznfv] {
    background: #a855f7;
}

.dot-color.exceso[b-gkb2tfznfv] {
    background: #ef4444;
}

.dot-color.anticipado[b-gkb2tfznfv] {
    background: #10b981;
}

.monday-board-grid[b-gkb2tfznfv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: relative;
    min-height: 0;
    min-width: 0;
}

.schedule-grid-header[b-gkb2tfznfv] {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
    min-width: max-content;
    width: 100%;
}

.worker-col-header[b-gkb2tfznfv] {
    width: var(--sidebar-w, 220px);
    min-width: var(--sidebar-w, 220px);
    max-width: var(--sidebar-w, 220px);
    flex-shrink: 0;
    padding: 6px 12px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background: #f8fafc;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    user-select: none;
}

.column-resize-handle[b-gkb2tfznfv] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 120;
    background: transparent;
    transition: background 0.15s ease;
}

.column-resize-handle:hover[b-gkb2tfznfv],
.monday-board-grid.is-resizing .column-resize-handle[b-gkb2tfznfv] {
    background: #cbd5e1;
}

.monday-board-grid.is-resizing[b-gkb2tfznfv] {
    user-select: none !important;
    cursor: col-resize !important;
}

.monday-board-grid.is-resizing *[b-gkb2tfznfv] {
    pointer-events: none !important;
}

.monday-board-grid.is-resizing .column-resize-handle[b-gkb2tfznfv] {
    pointer-events: auto !important;
}

.filter-label-corner[b-gkb2tfznfv] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.filter-title-corner[b-gkb2tfznfv] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.hours-timeline-header[b-gkb2tfznfv] {
    display: flex;
    flex: 1;
    min-width: 680px;
    position: relative;
    background: #f8fafc;
}

.weekly-days-header-track[b-gkb2tfznfv],
.monthly-weeks-header-track[b-gkb2tfznfv] {
    display: flex;
    flex: 1;
    min-width: 680px;
}

.hour-cell[b-gkb2tfznfv] {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    border-right: 1px dashed #e2e8f0;
}

.day-header-cell[b-gkb2tfznfv],
.week-header-cell[b-gkb2tfznfv] {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    border-right: 1px dashed #e2e8f0;
    text-transform: uppercase;
    box-sizing: border-box;
}

.lunch-cell[b-gkb2tfznfv] {
    background: #f1f5f9;
    color: #475569;
}

.hours-track-cell[b-gkb2tfznfv],
.days-track-cell[b-gkb2tfznfv],
.weeks-track-cell[b-gkb2tfznfv] {
    flex: 1;
    min-width: 680px;
    position: relative;
    height: 100%;
}

.grid-columns-bg[b-gkb2tfznfv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
}

.col-line[b-gkb2tfznfv] {
    flex: 1;
    border-right: 1px dashed #e2e8f0;
}

.schedule-grid-body[b-gkb2tfznfv] {
    flex: 1;
    overflow: visible;
    position: relative;
    min-height: 0;
    min-width: max-content;
    width: 100%;
}

.timeline-track-overlay[b-gkb2tfznfv] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--sidebar-w, 220px);
    right: 0;
    width: calc(100% - var(--sidebar-w, 220px));
    min-width: 680px;
    height: 100%;
    pointer-events: none;
    z-index: 35;
}

.current-time-marker[b-gkb2tfznfv] {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 35;
}

.current-time-badge-wrapper[b-gkb2tfznfv] {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    z-index: 80;
    pointer-events: none;
}

.time-badge[b-gkb2tfznfv] {
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.time-badge[b-gkb2tfznfv]::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #2563eb;
}

.time-line[b-gkb2tfznfv] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563eb;
    height: 100%;
}

.team-group-section[b-gkb2tfznfv] {
    border-bottom: 1px solid #f1f5f9;
}

.team-header-row[b-gkb2tfznfv] {
    background: #f8fafc;
    padding: 6px 14px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    left: 0;
    z-index: 40;
    width: 100%;
    min-width: max-content;
    box-sizing: border-box;
}

.team-header-title[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #334155;
    position: sticky;
    left: 0;
    z-index: 45;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    width: var(--sidebar-w, 220px);
    min-width: var(--sidebar-w, 220px);
    max-width: var(--sidebar-w, 220px);
    box-sizing: border-box;
    padding: 0 8px 0 10px;
}

.team-header-title strong[b-gkb2tfznfv] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.team-toggle-icon[b-gkb2tfznfv] {
    font-size: 10px;
    color: #94a3b8;
    flex-shrink: 0;
}

.team-dot[b-gkb2tfznfv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.team-count-badge[b-gkb2tfznfv] {
    font-size: 10px;
    color: #64748b;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.worker-schedule-row[b-gkb2tfznfv] {
    display: flex;
    min-height: 48px;
    border-bottom: 1px solid #f1f5f9;
    min-width: max-content;
    width: 100%;
}

.worker-schedule-row:hover[b-gkb2tfznfv] {
    background: #fafafa;
}

.worker-info-cell[b-gkb2tfznfv] {
    width: var(--sidebar-w, 220px);
    min-width: var(--sidebar-w, 220px);
    max-width: var(--sidebar-w, 220px);
    flex-shrink: 0;
    padding: 8px 12px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    position: sticky;
    left: 0;
    z-index: 45;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.worker-avatar-circle[b-gkb2tfznfv] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worker-avatar-circle.small[b-gkb2tfznfv] {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.worker-name-role[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
}

.w-name[b-gkb2tfznfv] {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.w-role[b-gkb2tfznfv] {
    font-size: 10px;
    color: #64748b;
}

.status-indicator-dot.online[b-gkb2tfznfv] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    margin-left: auto;
}

.hours-track-cell[b-gkb2tfznfv] {
    flex: 1;
    min-width: 680px;
    position: relative;
    background: repeating-linear-gradient(90deg,
            transparent,
            transparent calc(100% / 11 - 1px),
            #f1f5f9 calc(100% / 11 - 1px),
            #f1f5f9 calc(100% / 11));
}

.assignment-block[b-gkb2tfznfv] {
    position: absolute;
    top: 4px;
    height: 38px;
    border-radius: 8px;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.block-content-right[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.block-top-info[b-gkb2tfznfv],
.block-compact-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.block-car-thumb-wrapper[b-gkb2tfznfv] {
    width: 52px;
    height: 100%;
    border-radius: 7px 0 0 7px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 8px;
    border: none;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-car-thumb[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-vehicle[b-gkb2tfznfv] {
    opacity: 0.85;
}

.block-delay-pill[b-gkb2tfznfv] {
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: auto;
}

.block-delay-pill.excess[b-gkb2tfznfv] {
    background: #fee2e2;
    color: #b91c1c;
}

.block-delay-pill.early[b-gkb2tfznfv] {
    background: #dcfce7;
    color: #15803d;
}

.next-month-badge[b-gkb2tfznfv],
.prev-month-badge[b-gkb2tfznfv] {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.block-bottom-info[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    margin-top: 2px;
    opacity: 0.9;
}

.stage-tag[b-gkb2tfznfv] {
    font-weight: 800;
}

.block-compact-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
    height: 100%;
}

.block-ro-code[b-gkb2tfznfv] {
    font-weight: 800;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-vehicle-model[b-gkb2tfznfv] {
    font-weight: 600;
    font-size: 10px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-tag-compact[b-gkb2tfznfv] {
    font-weight: 800;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: inherit;
    flex-shrink: 0;
}

/* ── VISTA 2: SEMANA — GRID SEMANAL POR TÉCNICO CON 7 COLUMNAS Y TARJETAS APILADAS ── */
.weekly-matrix-container[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #ffffff;
    overflow-x: auto;
    border-right: 1px solid #e2e8f0;
}

.weekly-matrix-header[b-gkb2tfznfv] {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.weekly-days-header[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    flex: 1;
}

.day-col-header[b-gkb2tfznfv] {
    text-align: center;
    padding: 10px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    border-right: 1px dashed #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weekly-matrix-body[b-gkb2tfznfv] {
    flex: 1;
    overflow-y: auto;
}

.worker-weekly-row[b-gkb2tfznfv] {
    display: flex;
    min-height: 85px;
    border-bottom: 1px solid #f1f5f9;
}

.weekly-days-cells[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    flex: 1;
}

.day-cell-stack[b-gkb2tfznfv] {
    padding: 6px;
    border-right: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    min-height: 85px;
}

.weekly-task-card[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.weekly-task-card:hover[b-gkb2tfznfv] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.weekly-task-card.selected[b-gkb2tfznfv] {
    outline: 2px solid #16a34a;
    outline-offset: 1px;
}

.card-header-row[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.ro-title[b-gkb2tfznfv] {
    font-weight: 800;
    color: #0f172a;
}

.card-model-row[b-gkb2tfznfv] {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.card-time-row[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    color: #475569;
    font-weight: 600;
}

/* ── VISTA 3: MES — MATRIZ MENSUAL POR TÉCNICO (4 SEMANAS DEL MES) ── */
.monthly-matrix-container[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #ffffff;
    overflow-x: auto;
    border-right: 1px solid #e2e8f0;
}

.monthly-matrix-header[b-gkb2tfznfv] {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.monthly-weeks-header[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
}

.week-col-header[b-gkb2tfznfv] {
    text-align: center;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    border-right: 1px dashed #e2e8f0;
}

.monthly-matrix-body[b-gkb2tfznfv] {
    flex: 1;
    overflow-y: auto;
}

.worker-monthly-row[b-gkb2tfznfv] {
    display: flex;
    min-height: 75px;
    border-bottom: 1px solid #f1f5f9;
}

.monthly-weeks-cells[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
}

.week-summary-cell[b-gkb2tfznfv] {
    padding: 6px;
    border-right: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #ffffff;
}

.week-summary-card[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.summary-top[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    margin-bottom: 6px;
}

.count-badge[b-gkb2tfznfv] {
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.hours-val[b-gkb2tfznfv] {
    color: #475569;
    font-weight: 600;
}

.mini-chips-list[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini-ro-chip[b-gkb2tfznfv] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}

.mini-ro-chip:hover[b-gkb2tfznfv] {
    background: #e0f2fe;
}

.mini-ro-chip.selected[b-gkb2tfznfv] {
    outline: 2px solid #16a34a;
}

.chip-stage[b-gkb2tfznfv] {
    font-size: 8px;
    font-weight: 800;
    color: #64748b;
}

.empty-week-slot[b-gkb2tfznfv] {
    font-size: 10px;
    color: #cbd5e1;
    text-align: center;
    padding: 14px;
    font-style: italic;
}

/* ── EMBEDDED VEHICLE R/O DETAIL PANEL (RIGHT SIDE - 400PX) ── */
.board-order-detail-panel-embedded[b-gkb2tfznfv] {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    flex-shrink: 0;
    background: #ffffff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.03);
    border-left: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* ── ESTADO VACÍO (PANEL PERMANENTE CENTRADO) ── */
.empty-selection-panel[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    min-height: 100%;
    padding: 24px 16px;
    text-align: center;
    box-sizing: border-box;
}

.empty-state-content[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.empty-icon-wrapper[b-gkb2tfznfv] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-title[b-gkb2tfznfv] {
    margin: 4px 0 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.empty-desc[b-gkb2tfznfv] {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.55;
}

.order-panel-header[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ro-badge-title[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ro-code[b-gkb2tfznfv] {
    font-size: 18px;
    font-weight: 800;
    color: #16a34a;
}

.ro-status-chip[b-gkb2tfznfv] {
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.close-detail-btn[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #94a3b8;
    cursor: pointer;
}

.order-vehicle-card[b-gkb2tfznfv] {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 14px;
}

.vehicle-title[b-gkb2tfznfv] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.vehicle-plate[b-gkb2tfznfv] {
    margin: 2px 0 10px 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.vehicle-image-wrapper.xlarge[b-gkb2tfznfv] {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-photo[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insurance-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
}

.current-process-section[b-gkb2tfznfv] {
    margin-bottom: 16px;
}

.section-subtitle[b-gkb2tfznfv] {
    font-size: 11px;
    color: #64748b;
    display: block;
    margin-bottom: 6px;
}

.process-pill-current[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.badge-stage-code[b-gkb2tfznfv] {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    color: #ffffff;
}

.badge-stage-code.rep[b-gkb2tfznfv] {
    background: #16a34a;
}

.badge-stage-code.prep[b-gkb2tfznfv] {
    background: #d97706;
}

.badge-stage-code.paint[b-gkb2tfznfv] {
    background: #db2777;
}

.badge-stage-code.rem[b-gkb2tfznfv] {
    background: #9333ea;
}

.progress-wrap-board[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}

.progress-val[b-gkb2tfznfv] {
    font-weight: 800;
    color: #16a34a;
}

.progress-bar-bg[b-gkb2tfznfv] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill-green[b-gkb2tfznfv] {
    height: 100%;
    background: #16a34a;
    border-radius: 4px;
}

.today-schedule-section[b-gkb2tfznfv] {
    flex: 1;
}

.today-schedule-title[b-gkb2tfznfv] {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}

/* ── CONNECTED VERTICAL TIMELINE ── */
.schedule-timeline-list-connected[b-gkb2tfznfv] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 12px;
    margin-bottom: 16px;
}

.timeline-connector-line[b-gkb2tfznfv] {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 4px;
    width: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.timeline-schedule-item-connected[b-gkb2tfznfv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    z-index: 2;
}

.connector-node-dot[b-gkb2tfznfv] {
    position: absolute;
    left: -12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1;
    z-index: 3;
}

.item-worker-avatar[b-gkb2tfznfv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-details[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.time-stage-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stage-tag-badge[b-gkb2tfznfv] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffffff;
}

.stage-tag-badge.rep[b-gkb2tfznfv] {
    background: #16a34a;
}

.stage-tag-badge.prep[b-gkb2tfznfv] {
    background: #d97706;
}

.stage-tag-badge.paint[b-gkb2tfznfv] {
    background: #db2777;
}

.stage-tag-badge.rem[b-gkb2tfznfv] {
    background: #9333ea;
}

.item-time[b-gkb2tfznfv] {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
}

.item-planned-hours[b-gkb2tfznfv] {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}

.badge-time-variance[b-gkb2tfznfv] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.badge-time-variance.exceso[b-gkb2tfznfv] {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-time-variance.anticipado[b-gkb2tfznfv] {
    background: #dcfce7;
    color: #15803d;
}

.order-summary-footer-panel[b-gkb2tfznfv] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-line[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.summary-label[b-gkb2tfznfv] {
    color: #64748b;
    font-weight: 600;
}

.summary-val[b-gkb2tfznfv] {
    color: #0f172a;
    font-weight: 800;
    font-size: 13px;
}

.summary-totals-box[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.total-row[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    color: #475569;
}

/* ── VISTA GANTT ECHARTS ── */
.gantt-split-container[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: 420px 1fr;
    height: 100%;
    min-height: 540px;
    width: 100%;
}

.gantt-table-panel[b-gkb2tfznfv] {
    border-right: 1px solid #e2e8f0;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: auto;
}

.gantt-task-table[b-gkb2tfznfv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.gantt-task-table th[b-gkb2tfznfv] {
    background: #f8fafc;
    padding: 10px 10px;
    color: #475569;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-task-table td[b-gkb2tfznfv] {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.child-row[b-gkb2tfznfv] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.child-row:hover[b-gkb2tfznfv] {
    background: #e0f2fe;
}

.child-row.selected[b-gkb2tfznfv] {
    background: #bae6fd;
}

.task-name-cell[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.variance-chip[b-gkb2tfznfv] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
}

.variance-chip.excess[b-gkb2tfznfv] {
    background: #fee2e2;
    color: #b91c1c;
}

.variance-chip.early[b-gkb2tfznfv] {
    background: #dcfce7;
    color: #15803d;
}

.gantt-chart-panel[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.timeline-date-header[b-gkb2tfznfv] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
}

.date-ranges[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}

/* ── VISTA LISTA TABULAR ── */
.table-container-light[b-gkb2tfznfv] {
    overflow-x: auto;
    width: 100%;
    padding: 12px;
}

.activity-table-light[b-gkb2tfznfv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.activity-table-light th[b-gkb2tfznfv] {
    background: #f8fafc;
    padding: 12px 14px;
    color: #475569;
    font-weight: 600;
    border-bottom: 1px solid #cbd5e1;
}

.activity-table-light td[b-gkb2tfznfv] {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.table-row-interactive-light[b-gkb2tfznfv] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.table-row-interactive-light:hover[b-gkb2tfznfv] {
    background: #e0f2fe;
}

.worker-cell-light[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-wrap-light[b-gkb2tfznfv] {
    position: relative;
    height: 16px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    min-width: 90px;
}

.progress-bar-fill-light[b-gkb2tfznfv] {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
}

.progress-text-light[b-gkb2tfznfv] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #0f172a;
}

.status-badge-light[b-gkb2tfznfv] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-completed[b-gkb2tfznfv] {
    background: #dcfce7;
    color: #15803d;
}

.status-inprogress[b-gkb2tfznfv] {
    background: #e0f2fe;
    color: #0369a1;
}

.status-delayed[b-gkb2tfznfv] {
    background: #fee2e2;
    color: #b91c1c;
}

.status-pending[b-gkb2tfznfv] {
    background: #fef3c7;
    color: #b45309;
}

/* =========================================
   Unified Workshop Board & Pockets System (Kodawari Physical Board Style)
   ========================================= */

/* Las tres zonas van en fila. Es una fila flexible y no una rejilla de tres huecos fijos porque
   una zona lateral puede quedarse sin nada que mostrar y no dibujarse: en la rejilla, su hueco
   seguía separando con el mismo espacio y el centro se corría a la posición de la que faltaba. */
.unified-workshop-board-container[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 220px) !important;
    max-height: calc(100dvh - 220px) !important;
    min-height: 520px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    /* The root container owns the shared 16px outer gutter for the summary and all board zones. */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.unified-workshop-board-container.board-maximized[b-gkb2tfznfv] {
    padding: 0 !important;
    background: transparent !important;
}

/* In PROC the three physical zones share one vertical canvas. The container owns vertical
   scrolling; the center keeps its independent horizontal scroll. */
.unified-workshop-board-container.uses-dcb-row-layout[b-gkb2tfznfv] {
    align-items: flex-start !important;
}

/* The DCB canvas keeps its shared vertical scroll while these real borders remain attached to the
   viewport. The negative outer width offsets both this flex item and the container gap, so the
   operational zones retain their exact positions and scroll dimensions. */
.dcb-viewport-zone-frames[b-gkb2tfznfv] {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    flex: 0 0 100% !important;
    align-self: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin-right: calc(-100% - 8px) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.dcb-viewport-zone-frame[b-gkb2tfznfv] {
    flex-shrink: 0 !important;
    height: 100% !important;
    /* Mismo trato que la zona que enmarca: el borde se conserva para no mover geometría, pero sin
       color. La zona se lee por su panel gris, no por una línea alrededor. */
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.dcb-viewport-zone-frame-center[b-gkb2tfznfv] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.unified-workshop-board-container.uses-dcb-row-layout > .left-pockets-column[b-gkb2tfznfv],
.unified-workshop-board-container.uses-dcb-row-layout > .center-board-stage[b-gkb2tfznfv],
.unified-workshop-board-container.uses-dcb-row-layout > .right-pockets-column[b-gkb2tfznfv] {
    height: calc(var(--dcb-grid-content-height) + 14px) !important;
    min-height: 100% !important;
}

/* Empty zones stay at the viewport height instead of reserving the 2,726-pixel, seventeen-row DCB
   canvas, so loading feedback remains visible without introducing initial scrolling. */
.unified-workshop-board-container.uses-dcb-row-layout.board-zones-empty > .left-pockets-column[b-gkb2tfznfv],
.unified-workshop-board-container.uses-dcb-row-layout.board-zones-empty > .center-board-stage[b-gkb2tfznfv],
.unified-workshop-board-container.uses-dcb-row-layout.board-zones-empty > .right-pockets-column[b-gkb2tfznfv] {
    height: 100% !important;
    min-height: 0 !important;
}

/* ── PROC Top Dashboard: independent three-area grid ── */
.calendar-proc-top-dashboard[b-gkb2tfznfv] {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2.3fr) minmax(182px, 0.7fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.proc-top-right-section[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 8px !important;
}

/* ── 5 KPI Metric Cards Row ── */
.proc-kpi-cards-row[b-gkb2tfznfv] {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

.proc-kpi-cards-row > .proc-kpi-card:not(.jscb-operarios-kpi-card)[b-gkb2tfznfv] {
    flex: 0 0 auto !important;
    min-width: 75px !important;
    max-width: 110px !important;
    padding: 4px 6px !important;
}

/* Let the KPI row absorb the height no longer distributed by its parent column.
   El piso va aquí y no en la regla de la fila: esta es más específica y llevaba `min-height: 0`, que
   se comía cualquier altura mínima puesta allí.

   Da a la franja superior la misma altura en los tres tableros. Sin él manda la tarjeta de resumen,
   y el JPCB —cinco estados de ejecución frente a tres fases y su atraso— salía más alto que sus
   hermanas, de modo que el encabezado daba un salto al cambiar de pestaña. */
.proc-top-right-section > .proc-kpi-cards-row[b-gkb2tfznfv],
.jscb-top-center-section > .proc-kpi-cards-row[b-gkb2tfznfv] {
    flex: 1 1 auto !important;
    min-height: 86px !important;
}

.proc-kpi-cards-row > .jscb-operarios-kpi-card[b-gkb2tfznfv] {
    flex: 1 1 auto !important;
    /* Piso de la tarjeta: la columna de acciones a `max-content` (unos 145 px en JPCB con
       «Agregar novedad») más tres columnas de cifras de al menos 65 px, para que «operarios» y
       «fuera de servicio» quepan con su relleno. Con 330 px las cifras quedaban a 55 px y se
       pisaban con el separador. */
    min-width: 360px !important;
}

.proc-kpi-card[b-gkb2tfznfv] {
    background: #F5F9FA !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

.proc-kpi-card.clickable-kpi[b-gkb2tfznfv] {
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.proc-kpi-card.clickable-kpi:hover[b-gkb2tfznfv] {
    transform: translateY(-2px) !important;
    border-color: #38bdf8 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.18) !important;
}

.proc-kpi-card.clickable-kpi:active[b-gkb2tfznfv] {
    transform: translateY(0) !important;
}

/* El recuadro gris sin icono, el número y el rótulo en minúsculas eran de las tarjetas de estado que
   PROC y JPCB traían por su cuenta. Las tres pestañas usan ahora las mismas —BoardStatusMetricCards,
   con sus estilos junto a su markup— y aquí no quedaba ningún elemento que los vistiera. */

/* Card 5: Workers / Fuera de servicio */
.proc-kpi-card.proc-kpi-card-workers[b-gkb2tfznfv] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
}

.kpi-workers-info[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.kpi-progress-bar-wrap[b-gkb2tfznfv] {
    width: 75px !important;
    height: 3px !important;
    background: #e2e8f0 !important;
    border-radius: 2px !important;
    margin: 4px 0 2px 0 !important;
    overflow: hidden !important;
}

.kpi-progress-bar-fill[b-gkb2tfznfv] {
    width: 40% !important;
    height: 100% !important;
    background: #10b981 !important;
    border-radius: 2px !important;
}

.kpi-sublabels[b-gkb2tfznfv] {
    display: flex !important;
    gap: 6px !important;
    font-size: 9px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.kpi-workers-avatars[b-gkb2tfznfv] {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.kpi-avatar-img[b-gkb2tfznfv] {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    margin-left: -8px !important;
    object-fit: cover !important;
}

.kpi-avatar-img:first-child[b-gkb2tfznfv] {
    margin-left: 0 !important;
}

/* ── JSCB / JPCB Top Dashboard: independent three-area grid ── */
.calendar-jscb-top-dashboard[b-gkb2tfznfv] {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2.3fr) minmax(182px, 0.7fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

.jscb-top-center-section[b-gkb2tfznfv] {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.calendar-proc-top-dashboard > .summary-card-top-slot[b-gkb2tfznfv],
.calendar-jscb-top-dashboard > .summary-card-top-slot[b-gkb2tfznfv],
.calendar-proc-top-dashboard > .jscb-anomalies-card[b-gkb2tfznfv],
.calendar-jscb-top-dashboard > .jscb-anomalies-card[b-gkb2tfznfv] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* ── JSCB Toolbar Buttons ── */
.btn-jscb-pill[b-gkb2tfznfv] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.btn-jscb-pill:hover[b-gkb2tfznfv] {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.btn-jscb-arrow-pill[b-gkb2tfznfv] {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.btn-jscb-arrow-pill:hover[b-gkb2tfznfv] {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* ── Right Anomalies Card (Top Slot) ── */
.jscb-anomalies-card[b-gkb2tfznfv] {
    background: #F5F9FA !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-height: 96px !important;
    /* Se estira hasta el borde inferior de su fila, como las demás tarjetas del resumen. Sin esto
       quedaba con la altura de sus dos items y su base no cuadraba con la del resto. */
    height: 100% !important;
}

.anomalies-header[b-gkb2tfznfv] {
    margin-bottom: 5px !important;
    /* El contador de órdenes ocupa la esquina izquierda y el título se queda en la derecha, que es
       donde el operario ya lo busca. Mientras la izquierda estuvo vacía, el título se anclaba solo. */
    justify-content: space-between !important;
    gap: 8px !important;
}

/* Mismo título que el de la tarjeta de resumen (`.summary-card-title`): son las dos esquinas de la
   misma franja. */
.anomalies-title[b-gkb2tfznfv] {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    color: #1e3a8a !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    cursor: pointer !important;
}

.anomalies-list-body[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    justify-content: center !important;
    /* Las cuatro líneas caben en menos alto del que gastaban las dos filas antiguas, así que sobra
       sitio. Si un día la fila del tablero se aprieta, esto mantiene el recorte dentro del borde
       redondeado en vez de dejar una fila dibujada fuera de la tarjeta. */
    overflow: hidden !important;
}

/* La fila de dos renglones con miniatura, y todo lo que la vestía —icono suelto, foto del vehículo,
   orden y placa apiladas, bloque de metadatos— vivía aquí. Ahora la lista es una línea por orden y
   se dibuja en AnomalyOrderList, con sus estilos al lado del markup que los usa. Solo sobrevive la
   píldora de duración, que el cajón lateral sigue usando en sus fichas. */
.anomaly-duration-pill[b-gkb2tfznfv] {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
}

/* ── PROC Toolbar Row (Row B - Barra Gris Enmarcada del Diseño) ── */
.calendar-toolbar-proc-light[b-gkb2tfznfv] {
    background: #F5F9FA !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 5px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

/* ── Quién cede en la barra ──
   La barra reparte su ancho entre el lado izquierdo (maximizar, aviso y título) y el derecho (las
   píldoras de acción y el selector PROC/JSCB/JPCB). Con los dos encogiendo por igual, las píldoras
   quedaban más estrechas que su rótulo y el texto se salía. Ahora el único que cede es el título,
   que se recorta con puntos suspensivos; las píldoras y el selector conservan siempre el ancho de
   su texto. */
.proc-toolbar-left[b-gkb2tfznfv] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.proc-toolbar-actions[b-gkb2tfznfv] {
    flex: 0 0 auto !important;
}

.btn-proc-expand-square[b-gkb2tfznfv] {
    width: 24px !important;
    height: 24px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 11px !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

.btn-proc-expand-square:hover[b-gkb2tfznfv] {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

.proc-toolbar-title[b-gkb2tfznfv] {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: -0.2px !important;
    /* Es el que cede: una sola línea recortada con puntos suspensivos cuando la barra aprieta. */
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.btn-filter-pill[b-gkb2tfznfv] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 3px 16px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.btn-filter-pill:hover[b-gkb2tfznfv],
.btn-filter-pill.active-filter[b-gkb2tfznfv] {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.jscb-filter-pill-nowrap[b-gkb2tfznfv] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.jscb-toolbar-dropdown[b-gkb2tfznfv] {
    flex: 0 0 auto !important;
    z-index: 1051 !important;
}

.jscb-grouping-menu[b-gkb2tfznfv] {
    min-width: 165px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1052 !important;
}

.jscb-grouping-menu .dropdown-item[b-gkb2tfznfv] {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.jscb-grouping-menu .dropdown-item:hover[b-gkb2tfznfv] {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.jscb-grouping-menu .dropdown-item.active[b-gkb2tfznfv] {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
}

.jscb-dropdown-backdrop[b-gkb2tfznfv] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1040 !important;
    background: transparent !important;
    cursor: default !important;
}

.view-mode-pill-switcher[b-gkb2tfznfv] {
    display: inline-flex !important;
    background: #64748b !important;
    border-radius: 20px !important;
    padding: 2px 3px !important;
    gap: 2px !important;
    /* El selector y cada píldora miden lo que mide su rótulo, sin encogerse con la barra. */
    flex: 0 0 auto !important;
}

.view-mode-pill[b-gkb2tfznfv] {
    border: none !important;
    background: transparent !important;
    border-radius: 16px !important;
    padding: 3px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.view-mode-pill.active[b-gkb2tfznfv] {
    background: #fde047 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* ── Fondo de zona ──
   El panel gris pertenece a la zona (pre-reparación · reparación · post-reparación), no a cada
   lista: va por debajo de todas ellas y es independiente de su contenido, así que se ve igual con
   el tablero cargado, vacío o mostrando su indicador de carga. Antes lo pintaba cada
   `.workshop-pocket-column`, y el tablero se leía como una fila de cajitas sueltas. */
.left-pockets-column[b-gkb2tfznfv],
.right-pockets-column[b-gkb2tfznfv],
.center-board-stage.stage-zone[b-gkb2tfznfv] {
    background: #F5F9FA !important;
    /* Un solo gris para las tres zonas y ninguna línea que las encierre: el borde sigue ahí, del
       ancho de siempre, pero transparente, así `drag-over` puede teñirlo sin desplazar nada. */
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    /* Configurator widths already include this padding, keeping process columns equal across zones. */
    padding: var(--pocket-rack-padding, 6px) !important;
    box-sizing: border-box !important;
}

/* Las zonas laterales son el ancla del panel de un bolsillo recogido: al colgar de ellas y no de la
   pestaña, el panel escapa del `overflow: hidden` de las filas que tiene en medio. */
.left-pockets-column[b-gkb2tfznfv],
.right-pockets-column[b-gkb2tfznfv] {
    position: relative !important;
}

/* ── Left Pockets Column (Daily Summary on top + 2 Sub-Columns below) ── */
.left-pockets-column[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.left-pockets-subcols-wrapper[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ── Center Stage (Dynamic Board Area) ── */
.center-board-stage[b-gkb2tfznfv] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    height: 100% !important;
    min-height: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.center-board-stage[b-gkb2tfznfv]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.center-board-stage.stage-full-width[b-gkb2tfznfv] {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* ── Right Pockets Column (Dynamic Rows) ── */
/* Sin `overflow` propio, igual que la izquierda: el recorte de la zona se comía el panel de un
   bolsillo recogido en cuanto asomaba sobre el tablero. El desplazamiento vertical lo lleva la
   pila de bolsillos, que es la que puede quedarse sin alto. */
.right-pockets-column[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Fila que sostiene los bolsillos completos y, a su derecha, la franja de recogidos. La zona en sí
   apila en vertical, así que sin esta fila la franja caería debajo del último bolsillo. */
.right-pockets-row-wrapper[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.right-pockets-column[b-gkb2tfznfv]  .workshop-pocket-column,
.right-pockets-column .workshop-pocket-column[b-gkb2tfznfv] {
    flex: 1 1 0 !important;
    min-height: 80px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.right-pockets-column[b-gkb2tfznfv]  .pocket-slot-rack,
.right-pockets-column .pocket-slot-rack[b-gkb2tfznfv] {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ── Pocket Column Structure ──
   Sin fondo ni marco propios: el panel lo pone la zona por detrás (ver «Fondo de zona»). El borde
   se conserva transparente para que `drag-over` lo tiña sin desplazar nada. */
[b-gkb2tfznfv] .workshop-pocket-column,
.workshop-pocket-column[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    min-height: 120px !important;
    padding: 0 !important;
}

[b-gkb2tfznfv] .workshop-pocket-column.multi-col-pocket,
.workshop-pocket-column.multi-col-pocket[b-gkb2tfznfv] {
    min-height: 140px !important;
}

[b-gkb2tfznfv] .workshop-pocket-column.drag-over,
.workshop-pocket-column.drag-over[b-gkb2tfznfv] {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

/* ── Pocket Header ── */
[b-gkb2tfznfv] .pocket-column-header,
.pocket-column-header[b-gkb2tfznfv] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    /* Caja fija: el título se recorta a dos renglones, y con `min-height` la cabecera de dos líneas
       salía más alta que la de una, así que los bolsillos vecinos no arrancaban su rack a la misma
       altura. 36 px dan sitio a los dos renglones (11 px × 1.15 × 2 + relleno) sin que la de un solo
       renglón crezca ni se encoja. El ancho es siempre el de la columna, nunca el del texto. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    align-self: stretch !important;
    /* Ver la nota en WorkshopPocketColumn.razor.css: sin esto la cabecera se comprime a nada cuando
       la zona va justa de alto. */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    user-select: none !important;
    /* Redondeo en las cuatro esquinas: la cabecera se lee como una pieza propia sobre el rack y no
       como la tapa recortada de la columna. */
    border-radius: 7px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    /* `relative`, nunca `sticky`. La cabecera es hermana del rack, y el rack es quien se desplaza:
       la cabecera no puede irse de vista, así que pegarla no hacía nada —medido, el desplazamiento
       que aplicaba era siempre 0—. Lo que sí hacía era pedir una capa de composición por bolsillo
       dentro de una cadena de `overflow: hidden` con esquinas redondeadas, y en WebKit esas capas se
       quedaban sin pintar: la cabecera ocupaba su hueco pero no se dibujaba, y qué bolsillos se
       perdían dependía del alto de la ventana. El z-index queda por encima de la solapa del bolsillo
       (`.pocket-slot-front-notch`, 3) y de la chapa de nivel de daño (`.damage-level-badge`, 6), que
       viven en este mismo contexto de apilado. */
    position: relative !important;
    z-index: 7 !important;
}

/* Hasta dos renglones antes de recortar, lo mismo que hace la cabecera de la vista de
   configuración (`.dcb-config-process-title`). En una sola línea «Aprobación (Autorización)» y
   otros nombres largos se cortaban tan pronto que dejaban de distinguirse entre sí. El recorte a
   dos líneas ya estaba en WorkshopPocketColumn.razor.css, pero estas reglas lo pisaban con
   `white-space: nowrap`, así que hay que declararlo también aquí. */
[b-gkb2tfznfv] .pocket-header-title,
.pocket-header-title[b-gkb2tfznfv] {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.15 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
}

[b-gkb2tfznfv] .pocket-header-badge,
.pocket-header-badge[b-gkb2tfznfv] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
}

/* ── Pocket Slot Rack (Physical Card Holder Rack - Centered with Padding) ── */
[b-gkb2tfznfv] .pocket-slot-rack,
.pocket-slot-rack[b-gkb2tfznfv] {
    display: grid !important;
    grid-template-columns: repeat(var(--pocket-card-columns, 1), var(--pocket-col-width)) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 6px 8px !important;
    /* Sin relleno lateral: la boca del bolsillo llega al borde de la columna. El hueco que dejaban
       los 6 px de cada lado separaba la solapa del marco y rompía la ilusión de bolsillo físico. */
    padding: 10px 0 6px 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Bolsillo en foco: la lista ocupa la zona entera y las tarjetas se reparten en las columnas que
   quepan, en vez de en las que tenía configuradas. Va aquí y no en el componente porque la regla
   de arriba fija las columnas con `!important`. */
[b-gkb2tfznfv] .workshop-pocket-column.is-focused .pocket-slot-rack,
.workshop-pocket-column.is-focused .pocket-slot-rack[b-gkb2tfznfv] {
    grid-template-columns: repeat(auto-fill, var(--pocket-col-width)) !important;
    justify-content: start !important;
}

[b-gkb2tfznfv] .pocket-slot-rack::-webkit-scrollbar,
.pocket-slot-rack[b-gkb2tfznfv]::-webkit-scrollbar,
.unified-workshop-board-container[b-gkb2tfznfv]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

[b-gkb2tfznfv] .empty-pocket-slot,
.empty-pocket-slot[b-gkb2tfznfv] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 6px !important;
    margin: 4px 2px !important;
    background: rgba(241, 245, 249, 0.6) !important;
}

[b-gkb2tfznfv] .empty-pocket-hint,
.empty-pocket-hint[b-gkb2tfznfv] {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}



/* ── Maximize Pill Button ── */
.btn-maximize-pill[b-gkb2tfznfv] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-maximize-pill:hover[b-gkb2tfznfv],
.btn-maximize-pill.active[b-gkb2tfznfv] {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* ── PROC Settings Gear Button ── */
.btn-proc-settings-gear[b-gkb2tfznfv] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #64748b !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-proc-settings-gear:hover[b-gkb2tfznfv] {
    color: #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: rotate(60deg) scale(1.15) !important;
}

.btn-proc-settings-gear:active[b-gkb2tfznfv] {
    transform: rotate(90deg) scale(1.05) !important;
}

/* ── In-Place Pockets Configuration Header Buttons ── */
.btn-cancel-pockets[b-gkb2tfznfv] {
    background: #1e293b !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 6px 20px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: lowercase !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.btn-cancel-pockets:hover[b-gkb2tfznfv] {
    background: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.btn-save-pockets[b-gkb2tfznfv] {
    background: #d946ef !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 6px 20px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: lowercase !important;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.4) !important;
}

.btn-save-pockets:hover[b-gkb2tfznfv] {
    background: #c026d3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.55) !important;
}

/* ── IN-PLACE POCKETS CONFIGURATION LAYOUT (EXACT MATCH TO DESIGN) ── */
.pockets-config-inline-layout[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    gap: 12px !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 1. Zona Superior: Operaciones Sin Mostrar en los Tableros */
.config-unassigned-zone[b-gkb2tfznfv] {
    position: relative !important;
    background: #ffffff !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-height: 80px !important;
    max-height: 135px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f1f5f9 !important;
}

.config-unassigned-zone[b-gkb2tfznfv]::-webkit-scrollbar {
    width: 6px !important;
}

.config-unassigned-zone[b-gkb2tfznfv]::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

.config-unassigned-zone[b-gkb2tfznfv]::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.config-unassigned-zone[b-gkb2tfznfv]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.config-unassigned-zone:hover[b-gkb2tfznfv] {
    border-color: #94a3b8 !important;
}

.config-chips-horizontal-row[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    width: 100% !important;
    padding: 2px 0 6px 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.config-chip-pill[b-gkb2tfznfv] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    cursor: grab !important;
    user-select: none !important;
    background: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    white-space: nowrap !important;
    letter-spacing: -0.1px !important;
}

/* La secuencia solo se muestra al configurar: es la que decide en qué zona puede caer el proceso. */
.config-chip-pill .chip-sequence[b-gkb2tfznfv] {
    flex-shrink: 0 !important;
    /* El chip separa a sus hijos 7 px; la secuencia va pegada al nombre, como una sola etiqueta. */
    margin-right: -3px !important;
    font-variant-numeric: tabular-nums !important;
}

.config-chip-pill:hover[b-gkb2tfznfv] {
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    background: #64748b !important;
}

.config-chip-pill:active[b-gkb2tfznfv] {
    cursor: grabbing !important;
}

/* 2. Zona Inferior: Tablero Operativo Activo */
.config-active-board-layout[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex: 1 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
}

/* 2.1 Riel Izquierdo */
.config-left-rack[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--dcb-grid-content-height) + 15px) !important;
    min-height: calc(var(--dcb-grid-content-height) + 15px) !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 40% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: var(--pocket-rack-padding, 6px) !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
}

/* 2.2 Centro Dinámico (Lienzo Abierto 2D Sin Marcos de Columna) */
.config-center-stage[b-gkb2tfznfv] {
    position: relative !important;
    background: #ffffff !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: calc(var(--dcb-grid-content-height) + 15px) !important;
    min-height: calc(var(--dcb-grid-content-height) + 15px) !important;
}

.config-center-stage[b-gkb2tfznfv]::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
}
.config-center-stage[b-gkb2tfznfv]::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}
.config-center-stage[b-gkb2tfznfv]::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 4px !important;
}

/* 2.3 Riel Derecho */
.config-right-rack[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--dcb-grid-content-height) + 15px) !important;
    min-height: calc(var(--dcb-grid-content-height) + 15px) !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 40% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: var(--pocket-rack-padding, 6px) !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
}

/* ─── Animaciones de Movimiento y Desplazamiento Dinámico de Tarjetas ─── */
@keyframes cardDropIn-b-gkb2tfznfv {
    0% {
        opacity: 0.3;
        transform: scale(0.92) translateY(-6px);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.8);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.03) translateY(0);
        box-shadow: 0 0 20px 4px rgba(14, 165, 233, 0.45);
        border-color: #0ea5e9 !important;
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
    }
}

.process-dropped-pulse[b-gkb2tfznfv] {
    animation: cardDropIn-b-gkb2tfznfv 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    border-color: #0ea5e9 !important;
    z-index: 20 !important;
}

.config-chip-pill[b-gkb2tfznfv] {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.25s ease,
        border-color 0.2s ease !important;
}

/* ─── INDICADOR BURBUJA DE ÓRDENES DE TRABAJO (OTs) EN PROCESOS ─── */
.ot-counter-badge[b-gkb2tfznfv] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    border: none !important;
    outline: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

/* En Bandeja / Depósito superior: Círculo en tono gris sin borde */
.config-chip-pill .ot-counter-badge[b-gkb2tfznfv] {
    background: #475569 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
}

/* ─── MODAL DE CONFIRMACIÓN DE GUARDADO EXITOSO KODAWARI ─── */
/* `inset: 0` y no `100vw × 100vh`: el panel dinámico tiene transform y backdrop-filter, así que es
   el bloque contenedor de este `fixed`. Con 100vw el fondo arrancaba en el borde izquierdo del
   panel y el centrado quedaba corrido a la derecha por el ancho de la barra lateral (80/220 px).
   Con inset el fondo cubre el panel —que es lo que ya se veía, recortado por su overflow— y la
   tarjeta se centra sobre el tablero, igual que el resto de diálogos del DCB. */
.config-success-modal-backdrop[b-gkb2tfznfv] {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    animation: fadeInModalBackdrop-b-gkb2tfznfv 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes fadeInModalBackdrop-b-gkb2tfznfv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.config-success-modal-card[b-gkb2tfznfv] {
    background: #ffffff !important;
    width: 360px !important;
    max-width: 90vw !important;
    border-radius: 20px !important;
    padding: 28px 24px 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    position: relative !important;
    animation: zoomInModalCard-b-gkb2tfznfv 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes zoomInModalCard-b-gkb2tfznfv {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-icon-glow-ring[b-gkb2tfznfv] {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: rgba(16, 185, 129, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.25) !important;
}

.success-icon-circle[b-gkb2tfznfv] {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 25px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.success-modal-title[b-gkb2tfznfv] {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.3px !important;
}

.btn-success-modal-accept[b-gkb2tfznfv] {
    width: 100% !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.btn-success-modal-accept:hover[b-gkb2tfznfv] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
}

.btn-success-modal-accept:active[b-gkb2tfznfv] {
    transform: translateY(0) !important;
}

/* ── Anomalies Right Drawer (Panel Lateral de Anomalías e Imprevistos) ── */
.anomalies-drawer-backdrop[b-gkb2tfznfv] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    animation: fadeIn 0.2s ease forwards !important;
}

.anomalies-right-drawer[b-gkb2tfznfv] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    background: #ffffff !important;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 10051 !important;
    display: flex !important;
    flex-direction: column !important;
    animation: slideInRightAnom-b-gkb2tfznfv 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideInRightAnom-b-gkb2tfznfv {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.anomalies-drawer-header[b-gkb2tfznfv] {
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
}

.anomalies-header-icon-wrap[b-gkb2tfznfv] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #fee2e2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.anomalies-drawer-title[b-gkb2tfznfv] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.anomalies-drawer-subtitle[b-gkb2tfznfv] {
    font-size: 11.5px !important;
    color: #64748b !important;
    display: block !important;
}

.anomalies-drawer-close-btn[b-gkb2tfznfv] {
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
}

.anomalies-drawer-close-btn:hover[b-gkb2tfznfv] {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.anomalies-stats-row[b-gkb2tfznfv] {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.anomalies-stat-chip[b-gkb2tfznfv] {
    flex: 1 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.15s !important;
}

.anomalies-stat-chip:hover[b-gkb2tfznfv] {
    border-color: #cbd5e1 !important;
}

.anomalies-stat-chip.active[b-gkb2tfznfv] {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.anomalies-stat-chip.chip-danger.active[b-gkb2tfznfv] {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.anomalies-stat-chip.chip-warning.active[b-gkb2tfznfv] {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #b45309 !important;
}

.anomalies-search-bar[b-gkb2tfznfv] {
    margin: 12px 20px 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.anomalies-search-bar input[b-gkb2tfznfv] {
    width: 100% !important;
    padding: 8px 32px 8px 34px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}

.anomalies-search-bar input:focus[b-gkb2tfznfv] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.anomalies-search-bar i[b-gkb2tfznfv] {
    position: absolute !important;
    left: 10px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.anomalies-search-bar .clear-search[b-gkb2tfznfv] {
    left: auto !important;
    right: 10px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
}

.anomalies-search-bar .clear-search:hover[b-gkb2tfznfv] {
    color: #64748b !important;
}

.anomalies-drawer-body[b-gkb2tfznfv] {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px 20px 20px !important;
}

.anomalies-empty-state[b-gkb2tfznfv] {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.anomalies-card-list[b-gkb2tfznfv] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.anomaly-detail-card[b-gkb2tfznfv] {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

.anomaly-detail-card:hover[b-gkb2tfznfv] {
    transform: translateY(-1px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
}

.anomaly-badge-type[b-gkb2tfznfv] {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.anomaly-badge-type.danger[b-gkb2tfznfv] {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.anomaly-badge-type.warning[b-gkb2tfznfv] {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.anomaly-drawer-card-main[b-gkb2tfznfv] {
    min-height: 54px !important;
}

.anomaly-drawer-truck-box[b-gkb2tfznfv] {
    width: 76px !important;
    min-width: 76px !important;
    height: 52px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.anomaly-drawer-truck-thumb[b-gkb2tfznfv] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.anomaly-drawer-info-col[b-gkb2tfznfv] {
    min-width: 0 !important;
    overflow: hidden !important;
}

.anomaly-drawer-ot-val[b-gkb2tfznfv] {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.anomaly-drawer-label[b-gkb2tfznfv] {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
}

.anomaly-drawer-plate-val[b-gkb2tfznfv] {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.anomaly-drawer-stage-badge[b-gkb2tfznfv] {
    border-radius: 12px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    white-space: normal !important;
    display: inline-block !important;
    text-align: center !important;
    max-width: 135px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.anomaly-card-desc[b-gkb2tfznfv] {
    font-size: 11px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border: 1px dashed #e2e8f0 !important;
}

.board-confirm-backdrop[b-gkb2tfznfv] { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 24px; }
.board-confirm-dialog[b-gkb2tfznfv] { background: var(--surface-color, #fff); color: var(--text-color, #001f3f); border-radius: 12px; padding: 24px; max-width: 480px; box-shadow: 0 16px 48px #0004; }
.board-confirm-dialog select[b-gkb2tfznfv] { width: 100%; padding: 8px; margin-top: 8px; }
.board-confirm-actions[b-gkb2tfznfv] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.board-confirm-actions button[b-gkb2tfznfv] { padding: 8px 16px; border: 1px solid #ccd4dc; border-radius: 8px; }

/* Backdrop con animación suave y desenfoque */
.st-animated-backdrop[b-gkb2tfznfv] {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    animation: fallbackBackdropFadeIn-b-gkb2tfznfv 0.22s ease-out forwards;
}

@keyframes fallbackBackdropFadeIn-b-gkb2tfznfv {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal con escala suave y fade-in (no aparece en seco) */
.fallback-confirm-dialog[b-gkb2tfznfv] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 16px !important;
    padding: 24px !important;
    max-width: 540px !important;
    width: 100% !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
    animation: fallbackModalScaleIn-b-gkb2tfznfv 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
    box-sizing: border-box !important;
}

@keyframes fallbackModalScaleIn-b-gkb2tfznfv {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.fallback-dialog-header[b-gkb2tfznfv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fallback-title-wrap[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fallback-icon-badge[b-gkb2tfznfv] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.fallback-title[b-gkb2tfznfv] {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.fallback-subtitle[b-gkb2tfznfv] {
    font-size: 12.5px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.btn-close-fallback[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-close-fallback:hover[b-gkb2tfznfv] {
    color: #0f172a;
    background: #f1f5f9;
}

/* Ficha del vehículo */
.fallback-vehicle-card[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.fallback-car-thumb-wrap[b-gkb2tfznfv] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.fallback-car-thumb[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fallback-vehicle-info[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fallback-plate-badge[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: #0f172a;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.fallback-meta-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.fallback-meta-divider[b-gkb2tfznfv] {
    color: #cbd5e1;
}

.fallback-dialog-notice[b-gkb2tfznfv] {
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
    margin: 0 0 10px 0;
}

/* Lista de procesos */
.fallback-process-list[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 14px;
    padding-right: 4px;
}

.fallback-process-item[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.process-item-uncovered[b-gkb2tfznfv] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.process-item-covered[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.process-item-left[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.process-item-names[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.process-item-name[b-gkb2tfznfv] {
    font-size: 13px;
    line-height: 1.2;
}

.process-uncovered-tag[b-gkb2tfznfv] {
    font-size: 11px;
    color: #dc2626;
    font-weight: 600;
}

.process-covered-tag[b-gkb2tfznfv] {
    font-size: 11px;
    color: #16a34a;
    font-weight: 500;
}

.process-item-hours[b-gkb2tfznfv] {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.fallback-confirm-question[b-gkb2tfznfv] {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.fallback-dialog-actions[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.btn-fallback-cancel[b-gkb2tfznfv] {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-fallback-cancel:hover[b-gkb2tfznfv] {
    background: #e2e8f0 !important;
}

.btn-fallback-confirm[b-gkb2tfznfv] {
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

.btn-fallback-confirm:hover[b-gkb2tfznfv] {
    background: #0369a1 !important;
}

/* Modal de Recomendación de Técnicos en JSCB */
.recommendation-modal[b-gkb2tfznfv] {
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 31, 63, 0.35);
    overflow: hidden;
    border: 1px solid rgba(0, 31, 63, 0.12);
    animation: recModalFadeIn-b-gkb2tfznfv 0.2s ease-out;
}

@keyframes recModalFadeIn-b-gkb2tfznfv {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.rec-modal-header[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #001f3f 0%, #002b55 100%);
    color: #ffffff;
    border-bottom: 3px solid #e91e63;
}

.rec-modal-title-box h3[b-gkb2tfznfv] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.rec-modal-subtitle[b-gkb2tfznfv] {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.35;
}

.rec-modal-subtitle strong[b-gkb2tfznfv] {
    color: #ffffff;
}

.rec-modal-vehicle-badge[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.rec-badge-plate[b-gkb2tfznfv] {
    background: #dea301;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.rec-badge-ot[b-gkb2tfznfv] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

.rec-modal-body[b-gkb2tfznfv] {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #f8fafc;
}

.uncovered-process-card[b-gkb2tfznfv] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.uncovered-process-header[b-gkb2tfznfv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.uncovered-process-icon[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fdf2f8;
    color: #e91e63;
    border-radius: 8px;
    font-size: 13px;
}

.uncovered-process-name[b-gkb2tfznfv] {
    font-size: 14px;
    font-weight: 700;
    color: #001f3f;
}

.uncovered-hours-pill[b-gkb2tfznfv] {
    background: #eff6ff;
    color: #0284c7;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

.recommended-instruction[b-gkb2tfznfv] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
}

.recommended-workers-list[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommended-worker-option[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.recommended-worker-option:hover[b-gkb2tfznfv] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.recommended-worker-option.selected[b-gkb2tfznfv] {
    border-color: #e91e63;
    background: #fff1f2;
    box-shadow: 0 0 0 1px #e91e63;
}

.recommended-worker-option.team-only.selected[b-gkb2tfznfv] {
    border-color: #001f3f;
    background: #f0f4f8;
    box-shadow: 0 0 0 1px #001f3f;
}

.recommended-worker-option input[type="radio"][b-gkb2tfznfv] {
    accent-color: #e91e63;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.worker-avatar-thumb[b-gkb2tfznfv] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    flex-shrink: 0;
}

.worker-avatar-thumb img[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar-thumb.team-icon[b-gkb2tfznfv] {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 15px;
}

.worker-details[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.worker-name-line[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worker-name[b-gkb2tfznfv] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-team-badge[b-gkb2tfznfv] {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
}

.worker-jobtitle[b-gkb2tfznfv] {
    font-size: 11.5px;
    color: #64748b;
}

.rec-modal-actions[b-gkb2tfznfv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.btn-rec-cancel[b-gkb2tfznfv] {
    padding: 9px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-rec-cancel:hover[b-gkb2tfznfv] {
    background: #f1f5f9;
    color: #1e293b;
}

.btn-rec-confirm[b-gkb2tfznfv] {
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: #e91e63;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35);
}

.btn-rec-confirm:hover[b-gkb2tfznfv] {
    background: #d81b60;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.45);
}

/* Local asynchronous feedback keeps the last successful view visible. */
.board-load-error[b-gkb2tfznfv] { padding: 8px 12px; font-size: 12px; flex-shrink: 0; }

/* First load only: the region is empty, so the notice fills the hole instead of pushing anything. */
.board-load-status[b-gkb2tfznfv] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary, #475569);
}

/* Aviso de la primera carga del tablero. Se ancla al área operativa completa —que ya es un contexto
   de posicionamiento— y no a la zona central: el ancho del centro es el que sobra tras los racks
   izquierdo y derecho, así que centrado ahí la píldora se veía corrida según el reparto de zonas de
   cada taller. Sobre el área entera cae en el mismo sitio siempre. */
.board-first-load-notice[b-gkb2tfznfv] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 7px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    color: var(--text-secondary, #475569);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    /* Nunca se interpone entre el puntero y la zona que hay debajo. */
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.board-first-load-spinner[b-gkb2tfznfv] {
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(51, 77, 110, 0.15);
    border-top-color: #fe00e4;
    border-radius: 50%;
    animation: board-first-load-spin-b-gkb2tfznfv 0.8s linear infinite;
}

@keyframes board-first-load-spin-b-gkb2tfznfv {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .board-first-load-spinner[b-gkb2tfznfv] {
        animation: none;
        opacity: 0.8;
    }
}

.board-load-error[b-gkb2tfznfv] { color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 4px; }
.board-load-error button[b-gkb2tfznfv] { margin-left: 8px; color: inherit; border: 1px solid currentColor; border-radius: 4px; background: transparent; }
.board-data-region[b-gkb2tfznfv] { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
.board-data-region:disabled[b-gkb2tfznfv]  [draggable="true"] { pointer-events: none; cursor: wait; }
.board-data-region:disabled[b-gkb2tfznfv]  button { cursor: wait; }

/* Header summary: dimmed and non-clickable while its source data is still travelling. */
/* Las tarjetas de estado las dibuja ahora un componente hijo, así que el alcance tiene que cruzar su
   frontera con `::deep`: sin eso, ni se apagaba su clic ni latían sus números mientras el dato viaja
   —y en JSCB ya venía pasando desde que estrenaron tarjeta propia. */
.board-summary-loading[b-gkb2tfznfv] { opacity: 0.62; transition: opacity 0.2s ease; }
.board-summary-loading .clickable-kpi[b-gkb2tfznfv],
.board-summary-loading[b-gkb2tfznfv]  .clickable-kpi { pointer-events: none; }
.board-summary-loading[b-gkb2tfznfv]  .jscb-summary-metric__number,
.board-summary-loading .operarios-main-num[b-gkb2tfznfv],
.board-summary-loading .operarios-teams-num[b-gkb2tfznfv],
.board-summary-loading .sin-equipo-num[b-gkb2tfznfv],
.board-summary-loading .fuera-servicio-num[b-gkb2tfznfv],
.board-summary-loading .usage-pct[b-gkb2tfznfv] { animation: board-summary-pulse-b-gkb2tfznfv 1.2s ease-in-out infinite; }

@keyframes board-summary-pulse-b-gkb2tfznfv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Empty state once a load finished and genuinely returned nothing. */
.board-empty-state[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    text-align: center;
}

/* ── Barras de desplazamiento ocultas en el panel ────────────────────────────
   Mismo criterio que en los tableros: el contenido se sigue desplazando, solo desaparece el
   indicador. Se listan las zonas desplazables del panel; los tres motores necesitan su propia
   propiedad, de ahí la repetición. */
.custom-scroll[b-gkb2tfznfv],
.board-order-detail-panel-embedded[b-gkb2tfznfv],
.gantt-table-panel[b-gkb2tfznfv],
.monday-board-grid[b-gkb2tfznfv],
.monthly-matrix-body[b-gkb2tfznfv],
.monthly-matrix-container[b-gkb2tfznfv],
.weekly-matrix-body[b-gkb2tfznfv],
.weekly-matrix-container[b-gkb2tfznfv] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.custom-scroll[b-gkb2tfznfv]::-webkit-scrollbar,
.board-order-detail-panel-embedded[b-gkb2tfznfv]::-webkit-scrollbar,
.gantt-table-panel[b-gkb2tfznfv]::-webkit-scrollbar,
.monday-board-grid[b-gkb2tfznfv]::-webkit-scrollbar,
.monthly-matrix-body[b-gkb2tfznfv]::-webkit-scrollbar,
.monthly-matrix-container[b-gkb2tfznfv]::-webkit-scrollbar,
.weekly-matrix-body[b-gkb2tfznfv]::-webkit-scrollbar,
.weekly-matrix-container[b-gkb2tfznfv]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ─── PROC Board Milestone Sequence Zoning & Drop Highlights ─────────────── */
.zone-drop-allowed-glow[b-gkb2tfznfv] {
    border: 2px dashed #10b981 !important;
    background: rgba(16, 185, 129, 0.06) !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.2s ease !important;
}

.zone-drop-forbidden-dimmed[b-gkb2tfznfv] {
    opacity: 0.3 !important;
    filter: grayscale(0.8) !important;
    border: 1.5px dashed #f43f5e !important;
    cursor: not-allowed !important;
    transition: all 0.2s ease !important;
}

/* Decorative edge feedback is CSS-only, so it is absent from the accessibility tree and never
   changes the geometry. Vertical state on the shared board is inherited by each visible rack. */
.config-unassigned-zone[b-gkb2tfznfv],
.config-active-board-layout[b-gkb2tfznfv],
.config-left-rack[b-gkb2tfznfv],
.config-center-stage[b-gkb2tfznfv],
.config-right-rack[b-gkb2tfznfv] {
    background-image:
        linear-gradient(to bottom, var(--dcb-auto-scroll-top-color, transparent), transparent 28px),
        linear-gradient(to left, var(--dcb-auto-scroll-right-color, transparent), transparent 28px),
        linear-gradient(to top, var(--dcb-auto-scroll-bottom-color, transparent), transparent 28px),
        linear-gradient(to right, var(--dcb-auto-scroll-left-color, transparent), transparent 28px) !important;
    background-repeat: no-repeat !important;
}

.config-unassigned-zone.dcb-auto-scroll-up[b-gkb2tfznfv],
.config-active-board-layout.dcb-auto-scroll-up[b-gkb2tfznfv] {
    --dcb-auto-scroll-top-color: rgba(14, 165, 233, 0.14);
}

.config-unassigned-zone.dcb-auto-scroll-down[b-gkb2tfznfv],
.config-active-board-layout.dcb-auto-scroll-down[b-gkb2tfznfv] {
    --dcb-auto-scroll-bottom-color: rgba(14, 165, 233, 0.14);
}

.config-left-rack.dcb-auto-scroll-left[b-gkb2tfznfv],
.config-center-stage.dcb-auto-scroll-left[b-gkb2tfznfv],
.config-right-rack.dcb-auto-scroll-left[b-gkb2tfznfv] {
    --dcb-auto-scroll-left-color: rgba(14, 165, 233, 0.14);
}

.config-left-rack.dcb-auto-scroll-right[b-gkb2tfznfv],
.config-center-stage.dcb-auto-scroll-right[b-gkb2tfznfv],
.config-right-rack.dcb-auto-scroll-right[b-gkb2tfznfv] {
    --dcb-auto-scroll-right-color: rgba(14, 165, 233, 0.14);
}

/* ── Worker Selection Modal ── */
.worker-selection-dialog[b-gkb2tfznfv] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 16px !important;
    padding: 24px !important;
    max-width: 580px !important;
    width: 100% !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
    animation: fallbackModalScaleIn-b-gkb2tfznfv 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
    box-sizing: border-box !important;
}

.worker-sel-dialog-header[b-gkb2tfznfv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.worker-sel-title-wrap[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.worker-sel-icon-badge[b-gkb2tfznfv] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.worker-sel-title[b-gkb2tfznfv] {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.worker-sel-subtitle[b-gkb2tfznfv] {
    font-size: 12.5px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.btn-close-worker-sel[b-gkb2tfznfv] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-close-worker-sel:hover[b-gkb2tfznfv] {
    color: #0f172a;
    background: #f1f5f9;
}

.worker-sel-vehicle-card[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.worker-sel-thumb-wrap[b-gkb2tfznfv] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.worker-sel-thumb[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-sel-vehicle-info[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.worker-sel-plate-badge[b-gkb2tfznfv] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: #0f172a;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.worker-sel-meta-row[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.worker-sel-notice[b-gkb2tfznfv] {
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
    margin: 0 0 12px 0;
}

.worker-sel-process-list[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.worker-sel-process-card[b-gkb2tfznfv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}

.worker-sel-process-header[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.worker-sel-proc-name[b-gkb2tfznfv] {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.worker-sel-proc-hours[b-gkb2tfznfv] {
    font-size: 12px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 6px;
}

.worker-sel-options-grid[b-gkb2tfznfv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

.worker-sel-option-card[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.worker-sel-option-card:hover[b-gkb2tfznfv] {
    border-color: #0284c7;
    background: #f0f9ff;
}

.worker-sel-option-card.selected[b-gkb2tfznfv] {
    border-color: #0284c7;
    background: #f0f9ff;
    box-shadow: 0 0 0 1px #0284c7;
}

.worker-sel-avatar-box[b-gkb2tfznfv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.worker-sel-avatar[b-gkb2tfznfv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-sel-initials[b-gkb2tfznfv] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.worker-sel-opt-details[b-gkb2tfznfv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.worker-sel-opt-name[b-gkb2tfznfv] {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-sel-opt-role[b-gkb2tfznfv] {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-sel-opt-shift[b-gkb2tfznfv] {
    font-size: 10.5px;
    color: #0369a1;
    font-weight: 500;
    margin-top: 2px;
}

.worker-sel-radio[b-gkb2tfznfv] {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

.worker-sel-radio .active-check[b-gkb2tfznfv] {
    color: #0284c7 !important;
}

.worker-sel-actions[b-gkb2tfznfv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.btn-worker-sel-cancel[b-gkb2tfznfv] {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-worker-sel-cancel:hover[b-gkb2tfznfv] {
    background: #e2e8f0 !important;
}

.btn-worker-sel-confirm[b-gkb2tfznfv] {
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

.btn-worker-sel-confirm:hover[b-gkb2tfznfv] {
    background: #0369a1 !important;
}
/* /Pages/Home/Components/Calendar/Components/AsbBoard/AsbBoardView.razor.rz.scp.css */
.asb-board[b-w3jtmo48hd] { display:flex; flex-direction:column; gap:8px; min-width:1120px; height:100%; padding:0 10px 12px; color:#1c2b40; font-family:Inter,"Segoe UI",sans-serif; }
.asb-kpis[b-w3jtmo48hd] { display:flex; align-items:stretch; gap:8px; min-height:86px; }
.asb-metric-card[b-w3jtmo48hd] { width:156px; min-width:132px; min-height:86px; padding:8px 10px; display:flex; flex-direction:column; justify-content:center; gap:3px; border:1px solid transparent; border-radius:10px; background:#f5f9fa; box-shadow:0 1px 2px rgb(15 23 42 / 4%); box-sizing:border-box; }
.asb-metric-primary[b-w3jtmo48hd] { display:flex; align-items:center; gap:7px; }
.asb-metric-icon[b-w3jtmo48hd] { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; font-size:20px; color:#2563eb; }
.asb-metric-card--warning .asb-metric-icon[b-w3jtmo48hd] { color:#b45309; }
.asb-metric-card--success .asb-metric-icon[b-w3jtmo48hd] { color:#15803d; }
.asb-metric-card strong[b-w3jtmo48hd] { color:#1e293b; font-size:18px; font-weight:800; letter-spacing:-.3px; line-height:1.1; }
.asb-metric-card>span[b-w3jtmo48hd] { color:#475569; font-size:10px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asb-metric-card>small[b-w3jtmo48hd] { color:#94a3b8; font-size:9px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asb-toolbar[b-w3jtmo48hd] { min-height:38px; padding:5px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid transparent; border-radius:8px; background:#f5f9fa; box-shadow:0 1px 2px rgb(15 23 42 / 3%); box-sizing:border-box; }
.asb-toolbar-title[b-w3jtmo48hd] { min-width:0; display:flex; align-items:center; gap:8px; color:#475569; font-size:12px; font-weight:700; letter-spacing:-.2px; white-space:nowrap; }
.asb-toolbar-title i[b-w3jtmo48hd] { color:#2563eb; font-size:14px; }
.asb-toolbar-title span[b-w3jtmo48hd] { overflow:hidden; text-overflow:ellipsis; }
.asb-toolbar-actions[b-w3jtmo48hd] { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.asb-toolbar-pill[b-w3jtmo48hd] { min-height:24px; padding:3px 10px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid #cbd5e1; border-radius:20px; background:#fff; color:#475569; box-shadow:0 1px 2px rgb(15 23 42 / 4%); font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.asb-toolbar-pill:hover[b-w3jtmo48hd] { border-color:#94a3b8; background:#f8fafc; color:#1e293b; }
.asb-toolbar-arrow[b-w3jtmo48hd] { width:22px; height:22px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; border:1px solid #cbd5e1; border-radius:50%; background:#fff; color:#64748b; box-shadow:0 1px 2px rgb(0 0 0 / 4%); font-size:10px; cursor:pointer; }
.asb-toolbar-arrow:hover[b-w3jtmo48hd] { border-color:#94a3b8; background:#f8fafc; color:#1e293b; }
.asb-period[b-w3jtmo48hd] { min-height:24px; padding:3px 9px; display:inline-flex; align-items:center; gap:5px; border:1px solid #93c5fd; border-radius:20px; background:#eff6ff; color:#2563eb; font-size:10.5px; font-weight:700; text-transform:capitalize; white-space:nowrap; }
.asb-period b[b-w3jtmo48hd] { padding:1px 5px; border-radius:8px; background:#2563eb; color:#fff; font-size:8px; letter-spacing:.02em; }
.asb-new-appointment i[b-w3jtmo48hd] { font-size:10px; }
.asb-new-appointment:disabled[b-w3jtmo48hd],
.asb-new-appointment.is-disabled[b-w3jtmo48hd] { opacity: 0.5; cursor: not-allowed !important; background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #94a3b8 !important; }
.asb-toolbar button:focus-visible[b-w3jtmo48hd] { outline:2px solid #d81b84; outline-offset:2px; }
.primary-action[b-w3jtmo48hd] { border:0; border-radius:7px; background:#0b91c2; color:#fff; padding:9px 14px; font-weight:700; white-space:nowrap; }
.asb-layout[b-w3jtmo48hd] { display:grid; grid-template-columns:minmax(260px,1fr) minmax(500px,2.2fr) minmax(280px,1.05fr); gap:10px; min-height:590px; flex:1; }
.capacity-panel[b-w3jtmo48hd],.appointments-panel[b-w3jtmo48hd],.intake-panel[b-w3jtmo48hd] { overflow:hidden; border:1px solid #e1e8ed; border-radius:10px; background:#f8fbfc; box-shadow:0 2px 8px rgb(27 47 70 / 6%); }
.capacity-panel>header[b-w3jtmo48hd],.appointments-panel>header[b-w3jtmo48hd],.intake-panel>header[b-w3jtmo48hd] { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:6px 12px; border-bottom:1px solid #e3eaef; background:#f4f8fa; box-sizing:border-box; }
.capacity-panel>header small[b-w3jtmo48hd],.appointments-panel>header small[b-w3jtmo48hd],.intake-panel>header small[b-w3jtmo48hd] { color:#8592a3; font-size:8px; font-weight:800; letter-spacing:.08em; }
.capacity-panel>header h2[b-w3jtmo48hd],.capacity-panel>header h3[b-w3jtmo48hd],.appointments-panel>header h2[b-w3jtmo48hd],.appointments-panel>header h3[b-w3jtmo48hd],.intake-panel>header h2[b-w3jtmo48hd],.intake-panel>header h3[b-w3jtmo48hd] { margin:1px 0 0; font-size:14px; line-height:1.15; }
.capacity-panel>header>span[b-w3jtmo48hd] { padding:3px 7px; border-radius:12px; background:#e6f6fb; color:#087ba5; font-size:9px; font-weight:700; }
.capacity-list[b-w3jtmo48hd],.appointment-columns[b-w3jtmo48hd] { overflow:auto; max-height:calc(100vh - 300px); min-height:510px; }
.capacity-resource[b-w3jtmo48hd] { padding:11px 12px; border-bottom:1px solid #e8edf1; }
.resource-identity[b-w3jtmo48hd] { display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; }
.resource-identity img[b-w3jtmo48hd],.resource-avatar[b-w3jtmo48hd] { width:34px; height:34px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#dceff7; color:#087ba5; font-size:11px; font-weight:800; }
.resource-identity b[b-w3jtmo48hd],.resource-identity small[b-w3jtmo48hd] { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resource-identity b[b-w3jtmo48hd] { font-size:12px; }.resource-identity small[b-w3jtmo48hd] { color:#8491a1; font-size:9px; }
.resource-identity>strong[b-w3jtmo48hd] { color:#1c8a67; font-size:15px; }.resource-identity>strong small[b-w3jtmo48hd] { display:inline; }
.capacity-meter[b-w3jtmo48hd] { height:5px; margin:9px 0 5px; overflow:hidden; border-radius:4px; background:#e6ebef; }.capacity-meter span[b-w3jtmo48hd] { display:block; height:100%; background:#10b981; }
.capacity-resource footer[b-w3jtmo48hd] { display:flex; justify-content:space-between; color:#718096; font-size:9px; }
.appointments-panel>header .legend[b-w3jtmo48hd] { display:flex; gap:4px; }.legend span[b-w3jtmo48hd] { padding:3px 6px; border-radius:10px; font-size:8px; font-weight:700; }.legend .assessment[b-w3jtmo48hd]{background:#fff1c9;color:#a66a00}.legend .reception[b-w3jtmo48hd]{background:#dff3ff;color:#087eae}.legend .repair[b-w3jtmo48hd]{background:#e2f6ed;color:#167a59}
.hour-row[b-w3jtmo48hd] { display:grid; grid-template-columns:72px 1fr; min-height:94px; border-bottom:1px solid #e4eaee; }.hour-row>time[b-w3jtmo48hd] { padding:13px 8px; border-right:1px solid #e4eaee; color:#65758b; font-size:11px; font-weight:700; text-align:center; }
.hour-appointments[b-w3jtmo48hd] { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; padding:8px; align-content:start; }
.appointment-card[b-w3jtmo48hd] { position:relative; min-height:76px; padding:8px 10px 8px 13px; border:1px solid #e1d39d; border-left:4px solid #e8ad21; border-radius:8px; background:#fff9e9; color:#253b55; text-align:left; box-shadow:0 2px 5px rgb(24 44 68 / 8%); }
.appointment-card.reception[b-w3jtmo48hd] { border-color:#b7dfef; border-left-color:#159aca; background:#edf9fd; }.appointment-card.repair[b-w3jtmo48hd] { border-color:#bde3d3; border-left-color:#22a979; background:#effaf5; }.appointment-card.selected[b-w3jtmo48hd] { outline:2px solid #0b91c2; }
.appointment-card>*[b-w3jtmo48hd] { display:block; }.appointment-card b[b-w3jtmo48hd] { font-size:17px; }.appointment-card>span:not(.appointment-time):not(.appointment-owner)[b-w3jtmo48hd] { font-size:11px; }.appointment-card small[b-w3jtmo48hd],.appointment-time[b-w3jtmo48hd],.appointment-owner[b-w3jtmo48hd] { color:#748397; font-size:9px; }.appointment-owner[b-w3jtmo48hd] { margin-top:4px; font-weight:700; }
.intake-panel[b-w3jtmo48hd] { padding-bottom:12px; }.intake-panel>header[b-w3jtmo48hd] { display:block; padding-top:7px; }.empty-intake[b-w3jtmo48hd],.empty-schedule[b-w3jtmo48hd] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:270px; padding:28px; color:#8793a2; text-align:center; }.empty-intake i[b-w3jtmo48hd],.empty-schedule i[b-w3jtmo48hd] { font-size:38px; color:#b5c7d2; }.empty-intake b[b-w3jtmo48hd],.empty-schedule b[b-w3jtmo48hd] { color:#4c5d72; }
.intake-vehicle[b-w3jtmo48hd] { padding:14px 14px 6px; }.intake-vehicle>span[b-w3jtmo48hd] { padding:4px 7px; border-radius:10px; background:#dff3ff; color:#087eae; font-size:9px; font-weight:800; }.intake-vehicle h2[b-w3jtmo48hd] { margin:8px 0 0; font-size:28px; }.intake-vehicle p[b-w3jtmo48hd] { margin:0; color:#748397; font-size:11px; }
.intake-panel dl[b-w3jtmo48hd] { margin:6px 14px 12px; }.intake-panel dl div[b-w3jtmo48hd] { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #e7ecef; font-size:11px; }.intake-panel dt[b-w3jtmo48hd] { color:#7a8797; }.intake-panel dd[b-w3jtmo48hd] { margin:0; font-weight:700; text-align:right; }.status-chip[b-w3jtmo48hd] { padding:3px 7px; border-radius:10px; background:#eaf1f5; }
.primary-action[b-w3jtmo48hd],.secondary-action[b-w3jtmo48hd],.link-action[b-w3jtmo48hd],.edit-action[b-w3jtmo48hd] { display:block; width:calc(100% - 28px); margin:8px 14px; }.primary-action:disabled[b-w3jtmo48hd],.secondary-action:disabled[b-w3jtmo48hd] { opacity:.55; }.secondary-action[b-w3jtmo48hd],.edit-action[b-w3jtmo48hd] { border:1px solid #b7c6d2; border-radius:7px; background:#fff; color:#334a63; padding:8px; font-weight:700; }.link-action[b-w3jtmo48hd] { border:0; background:transparent; color:#087eae; font-weight:700; }
.promise-form[b-w3jtmo48hd] { margin:8px 14px; padding:10px; border-radius:8px; background:#f0f5f7; }.promise-form label[b-w3jtmo48hd] { color:#607086; font-size:10px; font-weight:700; }.promise-form input[b-w3jtmo48hd] { width:100%; margin-top:4px; padding:7px; border:1px solid #ced9e1; border-radius:6px; }.promise-form .secondary-action[b-w3jtmo48hd] { width:100%; margin:8px 0 0; }
.promise-result[b-w3jtmo48hd] { margin:10px 14px; padding:10px; border-left:4px solid #1aa978; border-radius:7px; background:#eaf8f2; }.promise-result.deferred[b-w3jtmo48hd] { border-left-color:#dc9a1c; background:#fff7e8; }.promise-result h3[b-w3jtmo48hd] { margin:4px 0; font-size:16px; }.promise-result p[b-w3jtmo48hd] { margin:0; color:#647488; font-size:10px; }
.empty-state[b-w3jtmo48hd] { padding:20px; color:#7c8999; font-size:11px; text-align:center; }
@media(max-width:1300px){.asb-layout[b-w3jtmo48hd]{grid-template-columns:240px minmax(480px,1fr) 270px}.asb-metric-card[b-w3jtmo48hd]{width:140px}.asb-toolbar-title[b-w3jtmo48hd]{max-width:180px}}

/* Siluetas de carga. La misma forma que va a llegar —fila de asesor, fila por hora— latiendo con un
   desfase por fila, como en BoardZoneSkeleton: a la par parecía un parpadeo de la pantalla. */
.asb-skeleton[b-w3jtmo48hd] { position:relative; display:flex; flex-direction:column; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%); }
.asb-skeleton-shape[b-w3jtmo48hd] { display:block; border-radius:6px; background:#e3e9f0; animation:asb-skeleton-pulse-b-w3jtmo48hd 1.6s ease-in-out infinite; animation-delay:var(--skeleton-delay,0ms); }
.asb-skeleton-resource[b-w3jtmo48hd] { display:grid; grid-template-columns:34px 1fr auto; grid-template-areas:"avatar line figure" "meter meter meter"; gap:8px; align-items:center; padding:11px 12px; border-bottom:1px solid #e8edf1; }
.asb-skeleton-avatar[b-w3jtmo48hd] { grid-area:avatar; width:34px; height:34px; border-radius:50%; background:#d5dde8; }
.asb-skeleton-line[b-w3jtmo48hd] { grid-area:line; height:14px; width:70%; }
.asb-skeleton-figure[b-w3jtmo48hd] { grid-area:figure; width:44px; height:18px; }
.asb-skeleton-meter[b-w3jtmo48hd] { grid-area:meter; height:5px; margin-top:1px; border-radius:4px; }
.asb-skeleton-hour[b-w3jtmo48hd] { display:grid; grid-template-columns:72px repeat(2,minmax(150px,1fr)); gap:8px; min-height:94px; padding:8px; border-bottom:1px solid #e4eaee; align-items:start; }
.asb-skeleton-time[b-w3jtmo48hd] { width:48px; height:14px; margin:5px auto 0; }
.asb-skeleton-card[b-w3jtmo48hd] { min-height:76px; border-radius:8px; }
.asb-skeleton-sr-only[b-w3jtmo48hd] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes asb-skeleton-pulse-b-w3jtmo48hd { 0%,100% { opacity:.55; } 50% { opacity:.95; } }
@media (prefers-reduced-motion:reduce) { .asb-skeleton-shape[b-w3jtmo48hd] { animation:none; opacity:.75; } }

/* La carga falló y la columna está vacía: el aviso ocupa el hueco, misma forma que .jscb-board-state. */
.asb-board-state[b-w3jtmo48hd] { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px; padding:8px 12px; border-radius:8px; border:1px solid #bfdbfe; background:#eff6ff; color:#1e3a8a; font-size:12px; }
.asb-board-state.is-error[b-w3jtmo48hd] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.asb-board-state button[b-w3jtmo48hd] { min-height:36px; padding:7px 12px; border:1px solid #d81b84; border-radius:10px; background:#d81b84; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.asb-board-state button:hover[b-w3jtmo48hd] { background:#b81570; border-color:#b81570; box-shadow:0 3px 8px rgb(216 27 132 / 22%); }
.asb-board-state button:focus-visible[b-w3jtmo48hd] { outline:2px solid #d81b84; outline-offset:2px; }

/* Selector de modos de calendario (Día / Semana / Mes) */
.asb-calendar-modes[b-w3jtmo48hd] { display: inline-flex; align-items: center; background: #e2e8f0; border-radius: 20px; padding: 2px; gap: 2px; }
.asb-mode-btn[b-w3jtmo48hd] { border: 0; background: transparent; color: #475569; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 16px; cursor: pointer; transition: all .15s ease; line-height: 1.2; }
.asb-mode-btn:hover[b-w3jtmo48hd] { color: #1e293b; background: rgba(255,255,255,0.5); }
.asb-mode-btn.is-active[b-w3jtmo48hd] { background: #d81b84; color: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(216,27,132,0.3); }

/* Filtro interactivo por Asesor */
.advisor-filter-badge[b-w3jtmo48hd] { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; margin: 6px 8px 4px; background: #fce7f3; border: 1px solid #fbcfe8; border-radius: 8px; color: #be185d; font-size: 10.5px; font-weight: 600; }
.advisor-filter-badge b[b-w3jtmo48hd] { color: #9d174d; }
.advisor-filter-clear[b-w3jtmo48hd] { border: 0; background: transparent; color: #be185d; font-size: 13px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.advisor-filter-clear:hover[b-w3jtmo48hd] { color: #831843; }
.capacity-resource.is-selected[b-w3jtmo48hd] { background: #fdf2f8; border-left: 3px solid #d81b84; }

/* Vista Semanal tipo Google Calendar */
.asb-week-grid-container[b-w3jtmo48hd] { overflow: auto; max-height: calc(100vh - 300px); min-height: 510px; }
.asb-week-header-row[b-w3jtmo48hd] { display: grid; grid-template-columns: 60px repeat(7, minmax(110px, 1fr)); border-bottom: 1px solid #e4eaee; position: sticky; top: 0; background: #f4f8fa; z-index: 3; }
.asb-week-time-col-header[b-w3jtmo48hd] { padding: 8px 4px; font-size: 10px; font-weight: 700; color: #64748b; text-align: center; border-right: 1px solid #e4eaee; display: flex; align-items: center; justify-content: center; }
.asb-week-day-header[b-w3jtmo48hd] { padding: 6px 4px; text-align: center; border-right: 1px solid #e4eaee; cursor: pointer; transition: background .15s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.asb-week-day-header:hover[b-w3jtmo48hd] { background: #e8f0f6; }
.asb-week-day-header.is-today[b-w3jtmo48hd] { background: #eff6ff; font-weight: 700; }
.week-day-name[b-w3jtmo48hd] { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.week-day-number[b-w3jtmo48hd] { font-size: 13px; font-weight: 800; color: #1e293b; }
.week-today-pill[b-w3jtmo48hd] { padding: 1px 4px; border-radius: 6px; background: #2563eb; color: #fff; font-size: 8px; font-weight: 700; }
.asb-week-body[b-w3jtmo48hd] { display: flex; flex-direction: column; }
.asb-week-hour-row[b-w3jtmo48hd] { display: grid; grid-template-columns: 60px repeat(7, minmax(110px, 1fr)); border-bottom: 1px solid #e4eaee; min-height: 56px; }
.asb-week-time-label[b-w3jtmo48hd] { padding: 6px 4px; border-right: 1px solid #e4eaee; color: #64748b; font-size: 9.5px; font-weight: 700; text-align: center; display: flex; align-items: flex-start; justify-content: center; background: #fafbfc; }
.asb-week-cell[b-w3jtmo48hd] { border-right: 1px solid #e4eaee; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.asb-week-cell.is-today[b-w3jtmo48hd] { background: rgba(239, 246, 255, 0.4); }
.asb-week-card[b-w3jtmo48hd] { position: relative; border-radius: 6px; padding: 4px 6px; border: 1px solid #e1d39d; border-left: 3px solid #e8ad21; background: #fff9e9; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(24,44,68,0.06); font-family: inherit; transition: transform .1s ease, box-shadow .1s ease; width: 100%; box-sizing: border-box; }
.asb-week-card:hover[b-w3jtmo48hd] { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(24,44,68,0.12); }
.asb-week-card.reception[b-w3jtmo48hd] { border-color: #b7dfef; border-left-color: #159aca; background: #edf9fd; }
.asb-week-card.repair[b-w3jtmo48hd] { border-color: #bde3d3; border-left-color: #22a979; background: #effaf5; }
.asb-week-card.selected[b-w3jtmo48hd] { outline: 2px solid #0b91c2; }
.week-card-time[b-w3jtmo48hd] { font-size: 8.5px; color: #64748b; font-weight: 600; display: block; }
.week-card-plate[b-w3jtmo48hd] { font-size: 11.5px; color: #1e293b; font-weight: 800; display: block; line-height: 1.15; }
.week-card-customer[b-w3jtmo48hd] { font-size: 9.5px; color: #475569; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-card-owner[b-w3jtmo48hd] { font-size: 8.5px; color: #8491a1; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vista Mensual */
.asb-month-container[b-w3jtmo48hd] { overflow: auto; max-height: calc(100vh - 300px); min-height: 510px; display: flex; flex-direction: column; }
.asb-month-header-row[b-w3jtmo48hd] { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e4eaee; position: sticky; top: 0; background: #f4f8fa; z-index: 3; }
.asb-month-header-row span[b-w3jtmo48hd] { padding: 7px 4px; text-align: center; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; border-right: 1px solid #e4eaee; }
.asb-month-header-row span:last-child[b-w3jtmo48hd] { border-right: 0; }
.asb-month-grid[b-w3jtmo48hd] { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; }
.asb-month-cell[b-w3jtmo48hd] { border-right: 1px solid #e4eaee; border-bottom: 1px solid #e4eaee; padding: 4px; min-height: 84px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .12s ease; background: #fff; }
.asb-month-cell:nth-child(7n)[b-w3jtmo48hd] { border-right: 0; }
.asb-month-cell:hover[b-w3jtmo48hd] { background: #f8fafc; }
.asb-month-cell.is-other-month[b-w3jtmo48hd] { background: #f8fafc; opacity: 0.55; }
.asb-month-cell.is-today[b-w3jtmo48hd] { background: #eff6ff; }
.asb-month-cell-header[b-w3jtmo48hd] { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.month-cell-day[b-w3jtmo48hd] { font-size: 11px; font-weight: 700; color: #334155; padding: 1px 4px; border-radius: 4px; }
.month-cell-day.today-badge[b-w3jtmo48hd] { background: #2563eb; color: #fff; font-weight: 800; }
.month-cell-count[b-w3jtmo48hd] { font-size: 8px; font-weight: 700; color: #64748b; background: #e2e8f0; padding: 1px 4px; border-radius: 6px; }
.asb-month-cell-chips[b-w3jtmo48hd] { display: flex; flex-direction: column; gap: 2px; overflow: hidden; flex: 1; }
.asb-month-chip[b-w3jtmo48hd] { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; border-left: 3px solid #e8ad21; background: #fff9e9; font-size: 9px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asb-month-chip.reception[b-w3jtmo48hd] { border-left-color: #159aca; background: #edf9fd; }
.asb-month-chip.repair[b-w3jtmo48hd] { border-left-color: #22a979; background: #effaf5; }
.asb-month-chip.selected[b-w3jtmo48hd] { outline: 1px solid #0b91c2; font-weight: 700; }
.month-chip-time[b-w3jtmo48hd] { font-size: 8px; color: #64748b; flex-shrink: 0; }
.month-chip-plate[b-w3jtmo48hd] { font-weight: 800; color: #1e293b; overflow: hidden; text-overflow: ellipsis; }
.asb-month-more[b-w3jtmo48hd] { font-size: 8.5px; font-weight: 700; color: #d81b84; padding: 1px 2px; }

/* Botón de Cancelar Cita */
.cancel-action[b-w3jtmo48hd] { display: block; width: calc(100% - 28px); margin: 8px 14px; padding: 8px; border: 1px solid rgba(239,68,68,0.4); border-radius: 7px; background: rgba(239,68,68,0.08); color: #dc2626; font-weight: 700; font-size: 11px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.cancel-action:hover[b-w3jtmo48hd] { background: rgba(239,68,68,0.18); border-color: #dc2626; }
.cancel-action:disabled[b-w3jtmo48hd] { opacity: .55; cursor: not-allowed; }

/* Indicadores de festivos y dias no laborables en ASB */
.asb-holiday-header-pill[b-w3jtmo48hd] { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 12px; background: #fef3c7; color: #b45309; border: 1px solid #fde68a; font-size: 10px; font-weight: 700; vertical-align: middle; }
.asb-sunday-header-pill[b-w3jtmo48hd] { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 12px; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; font-size: 10px; font-weight: 700; vertical-align: middle; }
.asb-non-working-day-banner[b-w3jtmo48hd] { border: 1px dashed #f87171; border-radius: 8px; background: #fef2f2; }
.asb-non-working-day-banner i[b-w3jtmo48hd] { color: #ef4444; }
.asb-non-working-day-banner b[b-w3jtmo48hd] { color: #991b1b; }
.asb-week-day-header.is-holiday[b-w3jtmo48hd] { background: #fffbeb; border-top: 3px solid #f59e0b; }
.asb-week-day-header.is-sunday[b-w3jtmo48hd] { background: #f8fafc; border-top: 3px solid #94a3b8; }
.week-holiday-pill[b-w3jtmo48hd] { padding: 1px 4px; border-radius: 6px; background: #f59e0b; color: #fff; font-size: 7.5px; font-weight: 700; }
.week-sunday-pill[b-w3jtmo48hd] { padding: 1px 4px; border-radius: 6px; background: #94a3b8; color: #fff; font-size: 7.5px; font-weight: 700; }
.asb-week-cell.asb-week-holiday-cell[b-w3jtmo48hd] { background: repeating-linear-gradient(-45deg, rgba(254, 243, 199, 0.45), rgba(254, 243, 199, 0.45) 8px, rgba(253, 230, 138, 0.25) 8px, rgba(253, 230, 138, 0.25) 16px); }
.asb-week-cell.asb-week-sunday-cell[b-w3jtmo48hd] { background: repeating-linear-gradient(-45deg, rgba(241, 245, 249, 0.7), rgba(241, 245, 249, 0.7) 8px, rgba(226, 232, 240, 0.5) 8px, rgba(226, 232, 240, 0.5) 16px); }
.asb-month-cell.is-holiday-cell[b-w3jtmo48hd] { background: #fffbeb; border-top: 2px solid #f59e0b; }
.asb-month-cell.is-sunday-cell[b-w3jtmo48hd] { background: #f8fafc; opacity: 0.9; }
.month-holiday-badge[b-w3jtmo48hd] { font-size: 8px; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 1px 4px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; }
.month-holiday-badge[b-w3jtmo48hd]::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #f59e0b; }
.month-sunday-badge[b-w3jtmo48hd] { font-size: 8px; font-weight: 700; color: #64748b; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 1px 4px; border-radius: 6px; text-decoration: line-through; text-decoration-color: #94a3b8; }

/* /Pages/Home/Components/Calendar/Components/AsbBoard/Components/AsbAppointmentEditorPanel.razor.rz.scp.css */
.appointment-editor-content[b-zlyyfjec0p] {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 16px;
}

.appointment-editor-error[b-zlyyfjec0p] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 8px;
    background: rgba(127, 29, 29, 0.28);
    color: #fecaca;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.appointment-editor-holiday-warning[b-zlyyfjec0p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 8px;
    background: rgba(120, 53, 15, 0.25);
    color: #fde68a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.appointment-editor-holiday-warning i[b-zlyyfjec0p] {
    color: #fbbf24;
    font-size: 14px;
    flex-shrink: 0;
}

.appointment-editor-schedule-block[b-zlyyfjec0p] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

.appointment-editor-fields[b-zlyyfjec0p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.appointment-editor-fields label[b-zlyyfjec0p] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.appointment-editor-fields label > span[b-zlyyfjec0p] {
    color: #b0b5c1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.appointment-editor-fields input[b-zlyyfjec0p],
.appointment-editor-fields select[b-zlyyfjec0p],
.appointment-editor-fields textarea[b-zlyyfjec0p] {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    color: #f1f1f1;
    font: 500 14px/1.4 "Segoe UI", sans-serif;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.appointment-editor-fields select option[b-zlyyfjec0p] {
    background: #1f2f45;
    color: #f1f1f1;
}

/* Fecha / Hora: dos disparadores lado a lado, como Fecha apertura / Hora apertura del inventario. */
.appointment-editor-datetime[b-zlyyfjec0p] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 12px;
}

.appointment-editor-picker[b-zlyyfjec0p] {
    position: relative;
}

.appointment-editor-picker input[readonly][b-zlyyfjec0p] {
    padding-right: 36px;
    cursor: pointer;
}

.appointment-editor-picker input[readonly]:disabled[b-zlyyfjec0p] {
    cursor: not-allowed;
}

.appointment-editor-picker-icon[b-zlyyfjec0p] {
    position: absolute;
    right: 12px;
    top: 50%;
    display: flex;
    align-items: center;
    color: #b0b5c1;
    transform: translateY(-50%);
    pointer-events: none;
}

.appointment-editor-fields textarea[b-zlyyfjec0p] {
    min-height: 88px;
    resize: vertical;
}

.appointment-editor-fields input:focus-visible[b-zlyyfjec0p],
.appointment-editor-fields select:focus-visible[b-zlyyfjec0p],
.appointment-editor-fields textarea:focus-visible[b-zlyyfjec0p] {
    border-color: #d81b84;
    box-shadow: 0 0 0 2px rgba(216, 27, 132, 0.3);
}

.appointment-editor-fields input:disabled[b-zlyyfjec0p],
.appointment-editor-fields select:disabled[b-zlyyfjec0p],
.appointment-editor-fields textarea:disabled[b-zlyyfjec0p] {
    opacity: 0.65;
    cursor: not-allowed;
}

.appointment-editor-actions[b-zlyyfjec0p] {
    position: sticky;
    bottom: -40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding: 16px 0 0;
    background: #1f2f45;
}

.appointment-editor-actions button[b-zlyyfjec0p] {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.appointment-editor-cancel[b-zlyyfjec0p] {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #f1f1f1;
}

.appointment-editor-cancel:hover:not(:disabled)[b-zlyyfjec0p] {
    background: rgba(255, 255, 255, 0.08);
}

.appointment-editor-save[b-zlyyfjec0p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d81b84;
    background: #d81b84;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(216, 27, 132, 0.3);
}

.appointment-editor-save:hover:not(:disabled)[b-zlyyfjec0p] {
    border-color: #eb5bb6;
    background: #eb5bb6;
}

.appointment-editor-actions button:focus-visible[b-zlyyfjec0p] {
    outline: 2px solid #dea301;
    outline-offset: 2px;
}

.appointment-editor-actions button:disabled[b-zlyyfjec0p] {
    opacity: 0.65;
    cursor: not-allowed;
}

.appointment-editor-spinner[b-zlyyfjec0p] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: appointmentEditorSpin-b-zlyyfjec0p 0.7s linear infinite;
}

@keyframes appointmentEditorSpin-b-zlyyfjec0p {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appointment-editor-fields input[b-zlyyfjec0p],
    .appointment-editor-fields select[b-zlyyfjec0p],
    .appointment-editor-fields textarea[b-zlyyfjec0p],
    .appointment-editor-actions button[b-zlyyfjec0p],
    .appointment-editor-spinner[b-zlyyfjec0p] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardCards/BoardCardButton.razor.rz.scp.css */
.bcard-btn[b-w55gclqtjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 2px 8px;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.18s ease;
    box-sizing: border-box;
}

.bcard-btn:hover[b-w55gclqtjv] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* /Pages/Home/Components/Calendar/Components/BoardCards/BoardMeter.razor.rz.scp.css */
.bmeter[b-y14dgvoqmb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

.bmeter-row[b-y14dgvoqmb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 9.5px;
    line-height: 1;
}

.bmeter-text[b-y14dgvoqmb] {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bmeter-value[b-y14dgvoqmb] {
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bmeter-value--positive[b-y14dgvoqmb] {
    color: #10b981;
}

.bmeter-value--alert[b-y14dgvoqmb] {
    color: #ef4444;
}

.bmeter-track[b-y14dgvoqmb] {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
}

.bmeter-bar[b-y14dgvoqmb] {
    height: 100%;
    border-radius: 3px;
}

.bmeter-bar--positive[b-y14dgvoqmb] {
    background: #10b981;
}

.bmeter-bar--alert[b-y14dgvoqmb] {
    background: #ef4444;
}

.bmeter-note[b-y14dgvoqmb] {
    color: #94a3b8;
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.2;
}
/* /Pages/Home/Components/Calendar/Components/BoardCards/BoardMetricFigure.razor.rz.scp.css */
.bm-figure[b-9835wr5osj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

/* La misma escala que la cifra de las tarjetas de estado (`.jscb-summary-metric__number`): las dos se
   leen en la misma fila y con 19 px esta se veía como otra jerarquía.

   En una sola línea: «09 de 09» partido en dos ya no es una cifra, y además fija el ancho mínimo de
   su columna, que de otro modo se medía por la palabra más larga. */
.bm-num[b-9835wr5osj] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1;
    color: #1e293b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Dos renglones fijos: los reparte el componente buscando el corte más parejo, y cada uno va en una
   sola línea. La columna se dimensiona para el renglón más largo —nunca se parte una palabra, porque
   «habilitad/as» no se lee, se descifra—.

   El rótulo va en el gris de los rótulos de las tarjetas de estado, no en el color del tono: allí el
   tono lo lleva el icono y, en el caso grave, la cifra; el texto se queda neutro. */
.bm-label[b-9835wr5osj] {
    display: flex;
    flex-direction: column;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #475569;
    min-width: 0;
    max-width: 100%;
}

.bm-label > span[b-9835wr5osj] {
    white-space: nowrap;
}

/* El renglón vacío del rótulo de una sola palabra sigue ocupando su alto. */
.bm-label > span:empty[b-9835wr5osj]::after {
    content: "\00a0";
}

/* El tono va en la cifra, igual que en las tarjetas de estado. */
.bm-figure--positive .bm-num[b-9835wr5osj] {
    color: #10b981;
}

.bm-figure--alert .bm-num[b-9835wr5osj] {
    color: #ef4444;
}

.bm-figure--watch .bm-num[b-9835wr5osj] {
    color: #b45309;
}

/* Contexto sin urgencia: la pareja entera se apaga, porque una cifra más clara que su rótulo se lee
   al revés. */
.bm-figure--muted .bm-num[b-9835wr5osj],
.bm-figure--muted .bm-label[b-9835wr5osj] {
    color: #94a3b8;
}
/* /Pages/Home/Components/Calendar/Components/BoardCurrentTimeIndicator.razor.rz.scp.css */
/* ── JPCB: capa de «ahora» sobre las columnas horarias ────────────────────────────────────────
   Medidas compartidas por la franja y la capa: la franja reserva en flujo justo lo que ocupan la
   cápsula (con su margen de 2 px) y la punta, para que la tabla arranque donde termina la punta. */
.jpcb-time-strip[b-y66wfu5qya],
.jpcb-time-overlay[b-y66wfu5qya] {
    --jpcb-now-badge-width: 62px;
    --jpcb-now-badge-height: 18px;
    --jpcb-now-badge-top: 2px;
    --jpcb-now-tip-height: 4px;
}

/* Hueco encima de la cabecera horaria donde vive la cápsula. Antes la cápsula se pintaba a 2 px del
   borde del lienzo, es decir, encima de los rótulos «9:00 am / 10:00 am», y los tapaba. */
.jpcb-time-strip[b-y66wfu5qya] {
    /* El -1 px es el solape punta↔cápsula de abajo: así la punta termina justo en el borde de la tabla. */
    height: calc(var(--jpcb-now-badge-top) + var(--jpcb-now-badge-height) + var(--jpcb-now-tip-height) - 1px);
}

/* Cubre exactamente el área horaria del lienzo (franja incluida): el tablero publica la frontera con
   las columnas fijas en --jpcb-time-area-left (porcentaje, para que siga siendo exacta cuando la
   tabla se estira y todas las columnas crecen en proporción); si no viene, se usa la suma en píxeles.
   z-index 9: por encima de todo lo que vive en las pistas (barras 7, marcadores 8) y por debajo de
   las columnas fijas (9–12, que van después en el DOM), que la tapan al desplazar en horizontal. */
.jpcb-time-overlay[b-y66wfu5qya] {
    position: absolute;
    inset: 0 0 0 var(--jpcb-time-area-left, calc(var(--jpcb-bay-column-width, 268px) + var(--jpcb-track-column-width, 75px)));
    pointer-events: none;
    z-index: 9;
    overflow: hidden;
}

/* La línea va siempre en --jpcb-now-x; en los extremos se pega al borde sin salirse del lienzo. */
.jpcb-time-line[b-y66wfu5qya] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(1px, var(--jpcb-now-x, 0%), calc(100% - 1px));
    width: 2px;
    transform: translateX(-50%);
    background: #2563eb;
    box-shadow: 0 0 4px rgba(37, 99, 235, 0.6);
}

/* La cápsula se centra sobre la línea, pero nunca sale del lienzo: cerca de los bordes se desliza
   hacia adentro (ancho fijo para poder acotarla en CSS). */
.jpcb-time-badge[b-y66wfu5qya] {
    position: absolute;
    top: var(--jpcb-now-badge-top);
    left: clamp(0px, calc(var(--jpcb-now-x, 0%) - var(--jpcb-now-badge-width) / 2), calc(100% - var(--jpcb-now-badge-width)));
    width: var(--jpcb-now-badge-width);
    height: var(--jpcb-now-badge-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

/* La punta sigue a la línea (no a la cápsula), así apunta a la hora aunque la cápsula se haya corrido.
   Solapa 1 px con la cápsula para que no asome una línea entre ambas y termina en el borde superior
   de la cabecera. */
.jpcb-time-tip[b-y66wfu5qya] {
    position: absolute;
    top: calc(var(--jpcb-now-badge-top) + var(--jpcb-now-badge-height) - 1px);
    left: clamp(4px, var(--jpcb-now-x, 0%), calc(100% - 4px));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: var(--jpcb-now-tip-height) solid #2563eb;
}

.jscb-now-indicator-line[b-y66wfu5qya] {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #ef4444 !important;
    z-index: 15 !important;
    pointer-events: none !important;
}

.jscb-now-badge[b-y66wfu5qya] {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
/* /Pages/Home/Components/Calendar/Components/BoardLoading/BoardTopSkeleton.razor.rz.scp.css */
.board-top-skeleton[b-0k9yavyalu] {
    display: contents;
}

.board-top-skeleton-summary[b-0k9yavyalu],
.board-top-skeleton-status-card[b-0k9yavyalu],
.board-top-skeleton-workers[b-0k9yavyalu],
.board-top-skeleton-toolbar[b-0k9yavyalu],
.board-top-skeleton-anomalies[b-0k9yavyalu] {
    box-sizing: border-box;
    border: 1px solid transparent;
    background: #f5f9fa;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.board-top-skeleton-summary[b-0k9yavyalu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 116px;
    padding: 10px 12px;
    border-radius: 18px;
}

.board-top-skeleton-summary-header[b-0k9yavyalu],
.board-top-skeleton-summary-body[b-0k9yavyalu],
.board-top-skeleton-legend-row[b-0k9yavyalu],
.board-top-skeleton-kpis[b-0k9yavyalu],
.board-top-skeleton-toolbar[b-0k9yavyalu],
.board-top-skeleton-toolbar-title[b-0k9yavyalu],
.board-top-skeleton-toolbar-actions[b-0k9yavyalu],
.board-top-skeleton-anomalies-header[b-0k9yavyalu],
.board-top-skeleton-anomaly-row[b-0k9yavyalu] {
    display: flex;
    align-items: center;
}

.board-top-skeleton-summary-header[b-0k9yavyalu] {
    gap: 6px;
    height: 18px;
    margin-bottom: 8px;
}

.board-top-skeleton-summary-body[b-0k9yavyalu] {
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.board-top-skeleton-chevron[b-0k9yavyalu] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.board-top-skeleton-title[b-0k9yavyalu] {
    width: 92px;
    height: 11px;
    border-radius: 5px;
}

.board-top-skeleton-donut[b-0k9yavyalu] {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border: 10px solid #d5dde8;
    border-radius: 50%;
    background: #ffffff;
}

.board-top-skeleton-legend[b-0k9yavyalu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.board-top-skeleton-legend-row[b-0k9yavyalu] {
    gap: 6px;
    min-width: 0;
    height: 13px;
}

.board-top-skeleton-badge[b-0k9yavyalu] {
    flex: 0 0 22px;
    width: 22px;
    height: 13px;
    border-radius: 7px;
}

.board-top-skeleton-line[b-0k9yavyalu] {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-percent[b-0k9yavyalu] {
    flex: 0 0 26px;
    width: 26px;
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-center[b-0k9yavyalu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    height: 116px;
}

.board-top-skeleton-kpis[b-0k9yavyalu] {
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.board-top-skeleton-status-card[b-0k9yavyalu] {
    position: relative;
    display: flex;
    flex: 0 0 110px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 110px;
    min-width: 110px;
    padding: 4px 6px;
    border-radius: 10px;
}

.board-top-skeleton-status-icon[b-0k9yavyalu] {
    position: absolute;
    top: 10px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.board-top-skeleton-status-value[b-0k9yavyalu] {
    width: 28px;
    height: 12px;
    margin-left: 32px;
    border-radius: 5px;
}

.board-top-skeleton-status-label[b-0k9yavyalu] {
    width: 62px;
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-workers[b-0k9yavyalu] {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 330px;
    overflow: hidden;
    border-radius: 12px;
}

.board-top-skeleton-worker-group[b-0k9yavyalu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 0 8px;
}

.board-top-skeleton-worker-value[b-0k9yavyalu] {
    width: 30px;
    height: 14px;
    border-radius: 5px;
}

.board-top-skeleton-worker-label[b-0k9yavyalu] {
    width: min(54px, 100%);
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-toolbar[b-0k9yavyalu] {
    flex: 0 0 38px;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 5px 8px;
    border-radius: 8px;
}

.board-top-skeleton-toolbar-title[b-0k9yavyalu],
.board-top-skeleton-toolbar-actions[b-0k9yavyalu] {
    gap: 8px;
    min-width: 0;
}

.board-top-skeleton-toolbar-actions[b-0k9yavyalu] {
    justify-content: flex-end;
    gap: 4px;
}

.board-top-skeleton-toolbar-square[b-0k9yavyalu],
.board-top-skeleton-toolbar-warning[b-0k9yavyalu] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.board-top-skeleton-toolbar-square[b-0k9yavyalu] {
    border-radius: 6px;
}

.board-top-skeleton-toolbar-warning[b-0k9yavyalu] {
    border-radius: 50%;
}

.board-top-skeleton-toolbar-line[b-0k9yavyalu] {
    width: 112px;
    height: 9px;
    border-radius: 5px;
}

.board-top-skeleton-toolbar-pill[b-0k9yavyalu],
.board-top-skeleton-filter[b-0k9yavyalu] {
    flex: 0 0 58px;
    width: 58px;
    height: 24px;
    border-radius: 12px;
}

.board-top-skeleton-toolbar-arrows[b-0k9yavyalu] {
    flex: 0 0 48px;
    width: 48px;
    height: 22px;
    border-radius: 11px;
}

.board-top-skeleton-tabs[b-0k9yavyalu] {
    flex: 0 0 164px;
    width: 164px;
    height: 26px;
    border-radius: 16px;
    background: #d5dde8;
}

.board-top-skeleton-anomalies[b-0k9yavyalu] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 116px;
    padding: 8px 12px;
    overflow: hidden;
    border-radius: 12px;
}

.board-top-skeleton-anomalies-header[b-0k9yavyalu] {
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.board-top-skeleton-counter[b-0k9yavyalu] {
    width: 54px;
    height: 22px;
    border-radius: 11px;
}

.board-top-skeleton-anomalies-title[b-0k9yavyalu] {
    width: 68px;
    height: 9px;
    border-radius: 5px;
}

.board-top-skeleton-anomaly-list[b-0k9yavyalu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.board-top-skeleton-anomaly-row[b-0k9yavyalu] {
    gap: 8px;
    min-width: 0;
    min-height: 17px;
}

.board-top-skeleton-anomaly-dot[b-0k9yavyalu] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.board-top-skeleton-anomaly-line[b-0k9yavyalu] {
    flex: 1 1 auto;
    min-width: 0;
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-anomaly-time[b-0k9yavyalu] {
    flex: 0 0 34px;
    width: 34px;
    height: 8px;
    border-radius: 4px;
}

.board-top-skeleton-shape[b-0k9yavyalu] {
    display: block;
    box-sizing: border-box;
    background-color: #e3e9f0;
    animation: board-top-skeleton-pulse-b-0k9yavyalu 1.6s ease-in-out infinite;
}

.board-top-skeleton-donut[b-0k9yavyalu] {
    background-color: #ffffff;
}

.board-top-skeleton-tabs[b-0k9yavyalu] {
    background-color: #d5dde8;
}

.board-top-skeleton-summary .board-top-skeleton-shape:nth-child(2n)[b-0k9yavyalu],
.board-top-skeleton-workers .board-top-skeleton-shape[b-0k9yavyalu],
.board-top-skeleton-anomalies .board-top-skeleton-shape:nth-child(2n)[b-0k9yavyalu] {
    animation-delay: 90ms;
}

@keyframes board-top-skeleton-pulse-b-0k9yavyalu {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .board-top-skeleton-shape[b-0k9yavyalu] {
        animation: none;
        opacity: 0.75;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardLoading/BoardZoneSkeleton.razor.rz.scp.css */
.board-zone-skeleton[b-7cxqf8u6nw] {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* Una sola fila de columnas repartida en el ancho de la zona: con `1fr` la silueta llena siempre lo
   que hay, sin desbordar en el centro ni encogerse a nada en una zona lateral. */
.board-zone-skeleton-columns[b-7cxqf8u6nw] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* La silueta se apaga hacia abajo en vez de cortarse en seco: el corte recto se leía como el
       final de la columna, y decía «esto es todo lo que hay» justo cuando aún no hay nada. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

.board-zone-skeleton-column[b-7cxqf8u6nw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.board-zone-skeleton-header[b-7cxqf8u6nw],
.board-zone-skeleton-card[b-7cxqf8u6nw] {
    display: block;
    flex: none;
    border-radius: 6px;
    background: #e3e9f0;
    animation: board-zone-skeleton-pulse-b-7cxqf8u6nw 1.6s ease-in-out infinite;
    animation-delay: var(--skeleton-delay, 0ms);
}

.board-zone-skeleton-header[b-7cxqf8u6nw] {
    height: 28px;
    background: #d5dde8;
}

.board-zone-skeleton-card[b-7cxqf8u6nw] {
    height: 64px;
}


.board-zone-skeleton-sr-only[b-7cxqf8u6nw] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes board-zone-skeleton-pulse-b-7cxqf8u6nw {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .board-zone-skeleton-header[b-7cxqf8u6nw],
    .board-zone-skeleton-card[b-7cxqf8u6nw] {
        animation: none;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardNotices/BoardNoticeStack.razor.rz.scp.css */
/* Notices float over the board so feedback never changes the operational layout. */
.board-notice-stack[b-lbedx03fjj] {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 62;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100% - 48px);
    pointer-events: none;
}

.board-notice-stack > *[b-lbedx03fjj] {
    pointer-events: auto;
}

.board-notice[b-lbedx03fjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 6px 6px 6px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    animation: board-notice-in-b-lbedx03fjj 0.18s ease;
}

.board-notice > i[b-lbedx03fjj] {
    flex-shrink: 0;
    font-size: 15px;
}

.board-notice-text[b-lbedx03fjj] {
    min-width: 0;
    max-width: 620px;
}

.board-notice-error[b-lbedx03fjj] {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.board-notice-warning[b-lbedx03fjj] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fcd34d;
}

.board-notice-success[b-lbedx03fjj] {
    color: #166534;
    background: #f0fdf4;
    border-color: #86efac;
}

.board-notice-retry[b-lbedx03fjj] {
    flex-shrink: 0;
    min-height: 36px;
    padding: 3px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.board-notice-retry:hover:not(:disabled)[b-lbedx03fjj] {
    background: rgba(15, 23, 42, 0.06);
}

.board-notice-retry:disabled[b-lbedx03fjj] {
    opacity: 0.55;
    cursor: wait;
}

.board-notice-close[b-lbedx03fjj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.board-notice-close:hover[b-lbedx03fjj] {
    background: rgba(15, 23, 42, 0.08);
}

.board-notice-retry:focus-visible[b-lbedx03fjj],
.board-notice-close:focus-visible[b-lbedx03fjj] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.board-refresh-toast[b-lbedx03fjj] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    color: var(--text-secondary, #475569);
    pointer-events: none !important;
    animation: board-notice-in-b-lbedx03fjj 0.18s ease;
}

@keyframes board-notice-in-b-lbedx03fjj {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .board-notice[b-lbedx03fjj],
    .board-refresh-toast[b-lbedx03fjj] {
        animation: none;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardPeriodIndicator.razor.rz.scp.css */
.board-period[b-g5mcc7j8tx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: default;
    user-select: none;
    /* La barra no envuelve: si el ancho aprieta, esta píldora es la que cede y recorta el rótulo
       —el tooltip conserva el texto completo— en vez de empujar al conmutador PROC/JSCB/JPCB. */
    min-width: 0;
    overflow: hidden;
}

.board-period > .bi[b-g5mcc7j8tx] {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1;
}

.board-period-value[b-g5mcc7j8tx] {
    letter-spacing: -0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El periodo que contiene hoy se lee de un vistazo: sin esto había que comparar la fecha de la
   píldora con la del calendario mental del usuario. */
.board-period.is-current[b-g5mcc7j8tx] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.board-period.is-current > .bi[b-g5mcc7j8tx] {
    color: #2563eb;
}

.board-period-now[b-g5mcc7j8tx] {
    flex-shrink: 0;
    background: #2563eb;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.4;
}

.board-period.is-interactive[b-g5mcc7j8tx] {
    cursor: pointer;
}

.board-period.is-interactive:hover[b-g5mcc7j8tx] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

.board-period.is-current.is-interactive:hover[b-g5mcc7j8tx] {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.board-period-chevron[b-g5mcc7j8tx] {
    font-size: 9px;
    color: inherit;
    opacity: 0.7;
    margin-left: 2px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.board-period-chevron.open[b-g5mcc7j8tx] {
    transform: rotate(180deg);
}

/* /Pages/Home/Components/Calendar/Components/BoardViewSwitcher.razor.rz.scp.css */
.board-view-switcher[b-76auojt3rz] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 18px;
    background: #637083;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.board-view-option[b-76auojt3rz] {
    min-width: 54px;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    font: 700 12px/1 "Segoe UI", sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
}

.board-view-option:hover[b-76auojt3rz],
.board-view-option:focus-visible[b-76auojt3rz] {
    background: rgb(255 255 255 / 12%);
    outline: none;
}

.board-view-option.active[b-76auojt3rz] {
    background: #f8d832;
    color: #1d2c42;
    box-shadow: 0 1px 4px rgb(15 34 56 / 25%);
}

@media (max-width: 1100px) {
    .board-view-option[b-76auojt3rz] {
        min-width: 48px;
        padding: 0 8px;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardWarnings/AnomalyOrderCounter.razor.rz.scp.css */
.anomaly-order-counter[b-y6xp08dnax] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.anomaly-order-counter:focus-visible[b-y6xp08dnax] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
    border-radius: 999px;
}

.anomaly-counter-chip[b-y6xp08dnax] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
    transition: filter 160ms ease;
}

.anomaly-counter-chip i[b-y6xp08dnax] {
    font-size: 12px;
}

/* El número manda sobre el icono: es lo que se busca de un vistazo desde el otro lado del taller.
   Va en la escala de las cifras del encabezado. */
.anomaly-counter-value[b-y6xp08dnax] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.anomaly-counter-unit[b-y6xp08dnax] {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.anomaly-counter-chip.is-blocking[b-y6xp08dnax] {
    background: #fee2e2;
    color: #991b1b;
}

.anomaly-counter-chip.is-watch[b-y6xp08dnax] {
    background: #fef3c7;
    color: #92400e;
}

.anomaly-counter-chip.is-clear[b-y6xp08dnax] {
    background: #dcfce7;
    color: #166534;
}

/* Un tipo sin ninguna orden no se esconde: que hoy no haya bloqueadas es justo lo que se quiere
   saber, y quitarlo movería el otro chip cada vez que cambia el conteo. Apagado, sin alarma. */
.anomaly-counter-chip.is-empty[b-y6xp08dnax] {
    background: #eef2f7;
    color: #8898aa;
}

.anomaly-order-counter:hover .anomaly-counter-chip:not(.is-empty)[b-y6xp08dnax] {
    filter: brightness(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .anomaly-counter-chip[b-y6xp08dnax] {
        transition: none;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardWarnings/AnomalyOrderList.razor.rz.scp.css */
.anomaly-line-list[b-nuxcwoan8v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

/* Sin `width`: el botón se estira solo dentro de la columna, y así el margen negativo lo ensancha en
   vez de empujarlo fuera. Ese margen se come la mitad del relleno lateral de la tarjeta y el relleno
   propio lo devuelve por dentro, de modo que el resaltado del puntero gana cuerpo sin mover el texto. */
.anomaly-line[b-nuxcwoan8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 21px;
    padding: 2px 8px;
    margin: 0 -6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.anomaly-line:hover[b-nuxcwoan8v] {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.anomaly-line:focus-visible[b-nuxcwoan8v] {
    outline: 2px solid #d81b84;
    outline-offset: -2px;
}

.anomaly-line-dot[b-nuxcwoan8v] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.anomaly-line.is-blocking .anomaly-line-dot[b-nuxcwoan8v] {
    background: #dc2626;
}

.anomaly-line.is-watch .anomaly-line-dot[b-nuxcwoan8v] {
    background: #f59e0b;
}

.anomaly-line-plate[b-nuxcwoan8v] {
    flex: none;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.anomaly-line-plate.is-missing[b-nuxcwoan8v] {
    color: #94a3b8;
    font-weight: 600;
}

/* El único que cede ancho: la orden es la referencia administrativa, y de las cuatro cosas de la
   fila es la que menos falta hace leer entera para reconocer el vehículo. */
.anomaly-line-ot[b-nuxcwoan8v] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 9.5px;
    font-weight: 600;
}

.anomaly-line-time[b-nuxcwoan8v] {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
}

.anomaly-line.is-blocking .anomaly-line-time[b-nuxcwoan8v] {
    color: #991b1b;
}

.anomaly-line.is-watch .anomaly-line-time[b-nuxcwoan8v] {
    color: #92400e;
}

.anomaly-line-stage[b-nuxcwoan8v] {
    flex: none;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .anomaly-line[b-nuxcwoan8v] {
        transition: none;
    }
}
/* /Pages/Home/Components/Calendar/Components/BoardWarnings/BoardWarningButton.razor.rz.scp.css */
/* ── Aviso de lo que el tablero no muestra ───────────────────────────────────
   El aviso vivía en una franja sobre las columnas y empujaba el tablero hacia
   abajo de forma permanente. Ahora es un icono junto al título: presente sin
   robar sitio, y con el detalle a un clic. Mismo tamaño y radio que el botón
   de maximizar contiguo, para que la barra siga leyéndose como una sola fila. */
.proc-warning-anchor[b-kdlxn0b5mw] {
    position: relative !important;
    display: inline-flex !important;
}

.btn-proc-warning[b-kdlxn0b5mw] {
    width: 24px !important;
    height: 24px !important;
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #b45309 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

.btn-proc-warning:hover[b-kdlxn0b5mw],
.btn-proc-warning.is-open[b-kdlxn0b5mw] {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.btn-proc-warning:focus-visible[b-kdlxn0b5mw] {
    outline: 2px solid #f59e0b !important;
    outline-offset: 2px !important;
}

.proc-warning-popover[b-kdlxn0b5mw] {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 1200 !important;
    width: max-content !important;
    max-width: min(440px, 70vw) !important;
    background: #ffffff !important;
    /* El ámbar rodea la tarjeta entera en vez de marcar solo el costado: el aviso se identifica por
       su propio contorno, sin una franja que compita con la viñeta de cada motivo. */
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14) !important;
    padding: 10px 12px !important;
    text-align: left !important;
}

.proc-warning-head[b-kdlxn0b5mw] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #92400e !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.proc-warning-close[b-kdlxn0b5mw] {
    background: transparent !important;
    border: 0 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.proc-warning-close:hover[b-kdlxn0b5mw] { color: #475569 !important; }

.proc-warning-list[b-kdlxn0b5mw] {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.proc-warning-list li[b-kdlxn0b5mw] {
    position: relative !important;
    padding-left: 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #475569 !important;
}

.proc-warning-list li[b-kdlxn0b5mw]::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
}
/* /Pages/Home/Components/Calendar/Components/BoardZoneControls.razor.rz.scp.css */
/* ── Disposición de sesión de las zonas laterales ──────────────────────────
   Vive en la barra, pegado al botón de maximizar, con su mismo tamaño y radio para que la barra
   siga leyéndose como una sola fila. */
.board-zone-controls[b-fk5zhz6b87] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.btn-zone-toggle[b-fk5zhz6b87] {
    width: 24px !important;
    height: 24px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: #64748b !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.btn-zone-toggle:hover:not(:disabled)[b-fk5zhz6b87] {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* Recogida: el botón se marca como pulsado. El azul es el mismo acento de la pestaña abierta en la
   franja, para que «zona recogida» y «pestaña» se lean como la misma cosa. */
.btn-zone-toggle.is-rail[b-fk5zhz6b87],
.btn-zone-toggle.is-open[b-fk5zhz6b87] {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0369a1 !important;
}

.btn-zone-toggle:disabled[b-fk5zhz6b87] {
    opacity: 0.45 !important;
    cursor: default !important;
}

.btn-zone-toggle:focus-visible[b-fk5zhz6b87] {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 2px !important;
}

/* El de ocultos lleva el número al lado del ojo: se ensancha lo justo. */
.btn-zone-hidden[b-fk5zhz6b87] {
    width: auto !important;
    padding: 0 6px 0 5px !important;
}

.zone-hidden-count[b-fk5zhz6b87] {
    font-size: 10px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.zone-hidden-anchor[b-fk5zhz6b87] {
    position: relative !important;
    display: inline-flex !important;
}

.zone-hidden-backdrop[b-fk5zhz6b87] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1199 !important;
    background: transparent !important;
}

.zone-hidden-popover[b-fk5zhz6b87] {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 1200 !important;
    width: max-content !important;
    min-width: 260px !important;
    max-width: min(420px, 70vw) !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
    padding: 10px 12px !important;
    text-align: left !important;
}

.zone-hidden-head[b-fk5zhz6b87] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.zone-hidden-close[b-fk5zhz6b87] {
    background: transparent !important;
    border: 0 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.zone-hidden-close:hover[b-fk5zhz6b87] { color: #475569 !important; }

.zone-hidden-list[b-fk5zhz6b87] {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
}

.zone-hidden-list li[b-fk5zhz6b87] {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 2px !important;
    font-size: 11.5px !important;
    color: #1e293b !important;
}

.zone-hidden-swatch[b-fk5zhz6b87] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
}

.zone-hidden-title[b-fk5zhz6b87] {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
}

.zone-hidden-meta[b-fk5zhz6b87] {
    color: #64748b !important;
    font-size: 10.5px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.zone-hidden-show[b-fk5zhz6b87] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    color: #0369a1 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.zone-hidden-show:hover[b-fk5zhz6b87] {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
}

.zone-hidden-hint[b-fk5zhz6b87] {
    margin: 8px 0 0 !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
}

/* «Restablecer»: píldora discreta, solo presente cuando hay algo que restablecer. */
.btn-zone-reset[b-fk5zhz6b87] {
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 8px !important;
    background: #fff7ed !important;
    border: 1px solid #fdba74 !important;
    border-radius: 12px !important;
    color: #c2410c !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.btn-zone-reset:hover[b-fk5zhz6b87] {
    background: #ffedd5 !important;
    border-color: #fb923c !important;
}

.btn-zone-reset:focus-visible[b-fk5zhz6b87] {
    outline: 2px solid #fb923c !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-zone-toggle[b-fk5zhz6b87],
    .zone-hidden-show[b-fk5zhz6b87],
    .btn-zone-reset[b-fk5zhz6b87] {
        transition: none !important;
    }
}
/* /Pages/Home/Components/Calendar/Components/JpcbBoard/JpcbBoardView.razor.rz.scp.css */
/* Contenedor Principal del Tablero JPCB (Full Width) */
.jscb-board-container[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    width: 100%;
    background: transparent;
    color: #0f172a;
    padding: 0;
    gap: 12px;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Banner de Día Festivo en JPCB */
.jpcb-holiday-day-banner[b-nndvkgl4aj] {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1.5px solid #fca5a5;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.08);
}

.holiday-icon-box[b-nndvkgl4aj] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Banner de Encabezado Superior Identico a JSCB */
.jscb-header-banner[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.jscb-badge-icon[b-nndvkgl4aj] {
    width: 44px;
    height: 44px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.jscb-title[b-nndvkgl4aj] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.jscb-subtitle[b-nndvkgl4aj] {
    font-size: 12px;
    color: #64748b;
}

.date-month-badge[b-nndvkgl4aj] {
    background: #f1f5f9;
    color: #0284c7;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid #cbd5e1;
}

/* Disposición Flex de Tablas por Equipo (100% Ancho) */
.jpcb-tables-container[b-nndvkgl4aj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Única fuente de la separación entre tarjetas de especialidad: los mismos 10px que deja la
       fila `jscb-team-card-gap` entre equipos en JSCB. Antes se sumaban a este gap un
       `margin-bottom` de la tarjeta y un `mb-3` en el markup, y quedaban ~32px. El relleno
       inferior repite el gap para que la última tarjeta no toque el borde del scroll. */
    gap: 10px;
    padding-bottom: 10px;
}

/* Tarjetas de Equipo Separadas en Cuadros Independientes (Modern White Cards Estilo Systime) */
.jpcb-team-card[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.team-card-header[b-nndvkgl4aj] {
    background: #ffffff;
    padding: 7px 18px 6px;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.15s ease;
}

.team-card-header.cursor-pointer:hover[b-nndvkgl4aj] {
    background-color: #f8fafc;
}

.cursor-pointer[b-nndvkgl4aj] {
    cursor: pointer;
}

/* ── Cabecera de especialidad ────────────────────────────────────────────────
   El icono del proceso sustituye al punto de color: dice de qué especialidad es la tarjeta y lleva
   el mismo color, así que el punto era una segunda señal para la misma idea. */
.jpcb-specialty-icon[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 4px;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid transparent;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}

/* El icono configurado del proceso llega como imagen del blob: fondo blanco y `contain`, el mismo
   trato que le da la pantalla de procesos, porque son glifos con transparencia. */
.jpcb-specialty-icon img[b-nndvkgl4aj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Carga de la especialidad. Alto, radios y colores son los de `.team-load-bar` del JSCB: es la misma
   medida —qué parte de una capacidad está usada— y leerla distinta en cada tablero obliga a
   reaprenderla. Vacía significa que falta asignar técnicos a las bahías, no que no haya trabajo. */
.jpcb-specialty-load-bar[b-nndvkgl4aj] {
    position: relative;
    height: 7px;
    margin: 0 0 3px 0;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
    cursor: help;
}

.jpcb-specialty-load-fill[b-nndvkgl4aj] {
    height: 100%;
    border-radius: 3px;
    background: #10b981;
    transition: width 0.25s ease;
}

.jpcb-specialty-load-bar.is-over .jpcb-specialty-load-fill[b-nndvkgl4aj] {
    background: #ea580c;
}

.jpcb-specialty-load-legend[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 9.5px;
    line-height: 1.2;
    color: #64748b;
}

.jpcb-specialty-load-legend strong[b-nndvkgl4aj] {
    font-weight: 700;
    color: #334155;
}

.jpcb-specialty-load-legend .is-free strong[b-nndvkgl4aj] {
    color: #15803d;
}

.jpcb-specialty-load-legend .is-over strong[b-nndvkgl4aj] {
    color: #c2410c;
}

.team-card-title[b-nndvkgl4aj] {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    min-width: 0;
    line-height: 1.25;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .team-card-title[b-nndvkgl4aj] {
        max-width: 170px;
    }
}

.spray-booth-card .team-card-header[b-nndvkgl4aj] {
    background: #0f172a !important;
}

/* Estado Vacío de Equipo cuando no hay coincidencias con los filtros */
.jpcb-team-empty-state[b-nndvkgl4aj] {
    padding: 24px 16px;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jpcb-empty-icon-badge[b-nndvkgl4aj] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 2px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
}

.jpcb-empty-title[b-nndvkgl4aj] {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.team-card-body[b-nndvkgl4aj] {
    --jpcb-bay-column-width: 268px;
    --jpcb-track-column-width: 75px;
    --jpcb-time-column-width: 72px;
    /* Fondo de toda la fila Inicio/Fin —etiqueta y pista—: un tono apenas más gris que el blanco
       de la fila Plan, lo justo para que las dos filas de cada bahía se distingan de un vistazo. */
    --jpcb-actual-row-bg: #f8fafc;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.jpcb-hourly-canvas[b-nndvkgl4aj] {
    position: relative;
    width: 100%;
    min-width: var(--jpcb-table-min-width, 1042px);
    /* Frontera entre las columnas fijas (bahía 268 + fila 75) y las horarias (72 por hora), como
       porcentaje del lienzo: cuando la tabla es más ancha que su mínimo, la disposición fija reparte
       el sobrante entre todas las columnas en proporción, así que el porcentaje sigue siendo exacto.
       La lee la capa de «ahora» (BoardCurrentTimeIndicator) para cubrir solo el área horaria. */
    --jpcb-time-area-left: calc(100% * 343 / (343 + 72 * var(--jpcb-slot-count, 12)));
}

/* Tabla Horaria Limpia Estilo Systime (Totalmente Adaptable con Soporte de Zoom) */
.jpcb-hourly-table[b-nndvkgl4aj] {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    background: #ffffff;
}

.jpcb-bay-column[b-nndvkgl4aj] {
    width: var(--jpcb-bay-column-width);
}

.jpcb-track-column[b-nndvkgl4aj] {
    width: var(--jpcb-track-column-width);
}

.jpcb-time-column[b-nndvkgl4aj] {
    width: var(--jpcb-time-column-width);
}

.jpcb-hourly-table th[b-nndvkgl4aj],
.jpcb-hourly-table td[b-nndvkgl4aj] {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 3px 2px;
    text-align: center;
    vertical-align: middle;
}

.jpcb-hourly-table th[b-nndvkgl4aj] {
    border-top: 1px solid #e2e8f0;
}

.jpcb-tech-single-row[b-nndvkgl4aj] {
    height: 62px;
}

.jpcb-tech-single-row:hover td[b-nndvkgl4aj] {
    background-color: #f8fafc;
}

/* Columnas Fijables (Sticky Frozen Columns) con Ajuste de Ancho Proporcional */
.tech-cell[b-nndvkgl4aj] {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    width: var(--jpcb-bay-column-width) !important;
    min-width: var(--jpcb-bay-column-width) !important;
    max-width: var(--jpcb-bay-column-width) !important;
    box-sizing: border-box;
    padding: 4px 10px !important;
    cursor: pointer;
    vertical-align: middle;
    border-right: 1px solid #e2e8f0 !important;
    transition: all 0.15s ease;
}

.tech-cell:hover[b-nndvkgl4aj] {
    background-color: #f8fafc !important;
}

/* Avatar con Anillo Circular de Progreso Diario Más Grande */
.tech-circular-progress-wrap[b-nndvkgl4aj] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2.5px;
    background: conic-gradient(#10b981 0% var(--prog-pct, 80%), #e2e8f0 var(--prog-pct, 80%) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.tech-avatar-inner[b-nndvkgl4aj] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tech-avatar-img[b-nndvkgl4aj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.tech-avatar-initials[b-nndvkgl4aj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50%;
}

.tech-info-column[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 1.5px;
    flex: 1;
}

.tech-name-text[b-nndvkgl4aj] {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.tech-role-subtext[b-nndvkgl4aj] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Columna de Programación y Final (Plan / Real) */
.prog-cell[b-nndvkgl4aj] {
    position: sticky !important;
    left: 224px !important;
    /* 44 + 180 = 224 */
    z-index: 10 !important;
    background: #ffffff !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    box-sizing: border-box;
    padding: 2px 3px !important;
    vertical-align: middle;
    border-right: 2px solid #cbd5e1 !important;
    text-align: center;
}

.prog-cell-layout[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0;
    width: 100%;
}

.prog-label-plan[b-nndvkgl4aj] {
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.prog-label-real[b-nndvkgl4aj] {
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.booth-label-header[b-nndvkgl4aj] {
    position: sticky !important;
    left: 0 !important;
    z-index: 11 !important;
    background: #f1f5f9 !important;
    width: 274px !important;
    min-width: 274px !important;
    max-width: 274px !important;
    box-sizing: border-box;
}

.spray-booth-label-cell[b-nndvkgl4aj] {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #0f172a !important;
    color: #ffffff;
    font-weight: 900;
    font-size: 12px;
    text-align: left;
    padding-left: 14px;
    width: 274px !important;
    min-width: 274px !important;
    max-width: 274px !important;
    box-sizing: border-box;
}

/* Encabezados Sticky (z-index superior a 11) */
th.tech-cell[b-nndvkgl4aj],
th.prog-cell[b-nndvkgl4aj] {
    z-index: 12 !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800;
}

/* Estilo de Cabeceras de Tabla */
.jpcb-th-header[b-nndvkgl4aj] {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
    font-size: 11px;
}

.jpcb-th-time[b-nndvkgl4aj] {
    background: #ffffff;
    font-weight: 800;
    font-size: 11px;
    color: #0f172a;
    min-width: var(--jpcb-time-column-width);
    width: var(--jpcb-time-column-width);
    padding: 6px 2px;
}

.jpcb-non-operational-header[b-nndvkgl4aj] {
    color: #64748b;
    background: #f8fafc;
}

.jpcb-hourly-table.is-display-only .jpcb-non-operational-cell[b-nndvkgl4aj] {
    opacity: 0.8;
}

/* ── Horas fuera de jornada ────────────────────────────────────────────────
   La escala se estira hasta el primer y el último registro del día (fichaje, entrega, plan). Las
   horas añadidas no son jornada: van rayadas y en gris en el encabezado, no se programa en ellas
   y lo que se registró ahí se pinta atenuado, para que se lea como un hecho y no como capacidad. */
.jpcb-th-time.jpcb-off-shift-header[b-nndvkgl4aj] {
    color: #94a3b8;
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    );
    cursor: help;
}

.jpcb-off-shift-header-icon[b-nndvkgl4aj] {
    margin-left: 3px;
    font-size: 9px;
    color: #94a3b8;
    vertical-align: 1px;
}

/* La celda con tarjeta que cae en esas horas conserva el rayado de fondo detrás de la tarjeta. */
.jpcb-hourly-table td.jpcb-off-shift-slot[b-nndvkgl4aj] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
}

/* Registro fuera de jornada: se ve y se abre, pero atenuado; no invita a planear encima. */
.jpcb-card-outer.is-off-shift[b-nndvkgl4aj] {
    opacity: 0.72;
    filter: saturate(0.6);
}

.jpcb-card-outer.is-off-shift:hover[b-nndvkgl4aj] {
    opacity: 0.95;
    filter: none;
}

.jpcb-off-shift-cell[b-nndvkgl4aj] {
    position: relative;
    text-align: center;
    vertical-align: middle;
    cursor: not-allowed;
}

.jpcb-off-shift-cell:not(.jpcb-holiday-slot)[b-nndvkgl4aj] {
    padding: 0 !important;
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
}

.jpcb-off-shift-pattern[b-nndvkgl4aj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    text-align: center;
}

.jpcb-off-shift-tag[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.jpcb-off-shift-line[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.jpcb-off-shift-icon[b-nndvkgl4aj] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Elapsed time is a secondary reference painted only inside an otherwise empty cell. The pattern
   matches JSCB without repeating its label or icon. */
.jpcb-elapsed-slot[b-nndvkgl4aj] {
    position: relative;
    overflow: hidden;
}

.jpcb-elapsed-slot[b-nndvkgl4aj]::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--jpcb-elapsed-progress, 0%);
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #f1f5f9 6px,
        #f1f5f9 12px
    );
    opacity: 0.75;
    pointer-events: none;
}

/* Hora de Almuerzo (12:00 - 13:00) - Columna y Casilla ALMUERZO */
.lunch-break-cell[b-nndvkgl4aj] {
    background-color: #f8fafc !important;
    vertical-align: middle !important;
    text-align: center;
    padding: 4px 6px !important;
    border-right: 1px dashed #cbd5e1 !important;
    border-left: 1px dashed #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    min-width: 60px;
}

th.lunch-break-cell[b-nndvkgl4aj] {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.jpcb-lunch-box[b-nndvkgl4aj] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 2px;
    font-size: 8px;
    font-weight: 800;
    color: #475569;
    letter-spacing: -0.2px;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* ─── TARJETAS DE VEHÍCULOS (Estilo Cascada: Superior Plan Grande / Inferior Inic-Fin) ─── */
.jpcb-assignment-wrapper[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.jpcb-card-outer[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 3px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jpcb-card-outer:hover[b-nndvkgl4aj] {
    transform: translateY(-1px);
}

/* ── Tarjeta de la fila Plan ────────────────────────────────────────────────
   Es la misma cápsula del JSCB (wwwroot/css/board-vehicle-card.css) sin la pista de procesos:
   una sola fila con foto, semáforo, placa y promesa a la izquierda y OT, horas y ⋮ a la derecha.
   Aquí solo lo que el JPCB le añade: la altura sin pista, los chips de proceso y estado, y los
   estados de ejecución que ya marcaba el tablero. */
.jpcb-plan-card[b-nndvkgl4aj] {
    min-height: 50px;
    /* El aire vertical lo pone la celda (p-1); el margen de la cápsula es para las filas del JSCB. */
    margin: 0;
}

/* Las horas planeadas no se pulsan aquí (en el JSCB el mismo rótulo alterna medio día). */
.jpcb-plan-card .capsule-duration-text[b-nndvkgl4aj] {
    cursor: default;
}

.jpcb-plan-card .capsule-duration-text:hover[b-nndvkgl4aj] {
    background: transparent;
    color: #c65d08;
}

.is-tracked-vehicle .jpcb-plan-card[b-nndvkgl4aj] {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Proceso y estado de ejecución, entre la identidad y la OT. En tarjetas estrechas se retiran a
   la vez que la OT: el tooltip de la tarjeta lo sigue diciendo todo. */
.jpcb-card-chips[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    max-height: 40px;
    overflow: hidden;
}

@container board-card (max-width: 319px) {
    .jpcb-card-chips[b-nndvkgl4aj] {
        display: none;
    }
}

.jpcb-stage-step-badge[b-nndvkgl4aj] {
    font-size: 8px;
    font-weight: 800;
    background: #0f172a;
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trabajo sin plan en la fila Plan: el pseudo-plan va rayado y punteado, como en el JSCB, para que
   nadie lo lea como algo que alguien programó. El fondo de la cápsula compartida es !important,
   así que la imagen de fondo también lo lleva. */
.jpcb-card-outer.is-unplanned .jpcb-plan-card[b-nndvkgl4aj] {
    border-style: dashed !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(15, 23, 42, 0.05),
        rgba(15, 23, 42, 0.05) 6px,
        transparent 6px,
        transparent 12px) !important;
}

/* Lo ejecuta alguien distinto del planeado: ámbar y advertencia. El plan original sigue en su
   bahía, normal; esta es la copia que dice dónde está de verdad el carro. */
.jpcb-card-outer.is-executed-elsewhere .jpcb-plan-card[b-nndvkgl4aj] {
    border-color: #d97706 !important;
    background-color: #fffbeb !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18) !important;
}

.jpcb-unplanned-badge[b-nndvkgl4aj],
.jpcb-elsewhere-badge[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.jpcb-unplanned-badge[b-nndvkgl4aj] {
    background: #f1f5f9;
    color: #475569;
    border: 1px dashed #94a3b8;
}

.jpcb-elsewhere-badge[b-nndvkgl4aj] {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #f59e0b;
}

.shop-cap-item.is-unplanned .shop-cap-num[b-nndvkgl4aj],
.jpcb-specialty-load-legend .is-unplanned[b-nndvkgl4aj] {
    color: #475569;
}

.jpcb-stalled-badge[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpcb-delay-warning-badge[b-nndvkgl4aj] {
    color: #ea580c;
    font-size: 11px;
}

.jpcb-badge-completed[b-nndvkgl4aj] {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: #059669;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Nivel 2: Barra de Progreso Inic-Fin */
.jpcb-inicfin-track[b-nndvkgl4aj] {
    width: 100%;
    height: 16px;
    min-height: 16px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.jpcb-inicfin-fill[b-nndvkgl4aj] {
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition: width 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.jpcb-fill-completed[b-nndvkgl4aj] {
    background: linear-gradient(90deg, #059669 0%, #10B981 100%) !important;
}

.jpcb-inicfin-fill .jpcb-card-pct-inside[b-nndvkgl4aj] {
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.2px;
    padding: 0 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.jpcb-inicfin-track .jpcb-card-pct-outside[b-nndvkgl4aj] {
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.2px;
    padding-left: 4px;
    flex-shrink: 0;
}

/* Barra Superior de Capacidad del Equipo */
.team-header-progress-track[b-nndvkgl4aj] {
    width: 270px;
    max-width: 270px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.team-header-progress-fill[b-nndvkgl4aj] {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.team-edit-icon-btn[b-nndvkgl4aj] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 1px 3px;
    transition: color 0.15s ease;
}

.team-edit-icon-btn:hover[b-nndvkgl4aj] {
    color: #0284c7;
}

.team-delete-icon-btn:hover[b-nndvkgl4aj] {
    color: #ef4444 !important;
}

.text-success-bright[b-nndvkgl4aj] {
    color: #4ade80 !important;
}

/* Columna Derecha de Alertas e Disponibilidad (Flujo Continuo Sincronizado con la Página) */
.jscb-right-column[b-nndvkgl4aj] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jscb-queue-box[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.jscb-queue-box.collapsed[b-nndvkgl4aj] {
    padding-bottom: 10px;
}

.queue-header[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    gap: 8px;
    min-height: 34px;
}

.queue-header:hover[b-nndvkgl4aj] {
    background: #f1f5f9;
}

.collapse-icon[b-nndvkgl4aj] {
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
}

.queue-count[b-nndvkgl4aj] {
    background: #e2e8f0;
    color: #0f172a;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Sub-cuadros Colapsables Internos */
.sub-queue-card[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sub-queue-header[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    gap: 8px;
    min-height: 38px;
}

.sub-queue-header:hover[b-nndvkgl4aj] {
    background: #f1f5f9;
}

.sub-queue-title[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: visible;
    flex: 1;
    min-width: 0;
}

.sub-queue-title span[b-nndvkgl4aj] {
    white-space: nowrap;
    overflow: visible;
}

.sub-queue-count[b-nndvkgl4aj] {
    font-size: 10px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sub-queue-count.present[b-nndvkgl4aj] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.sub-queue-count.absent[b-nndvkgl4aj] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.queue-cards-list[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    padding-right: 4px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

.queue-cards-list[b-nndvkgl4aj]::-webkit-scrollbar {
    width: 5px;
}

.queue-cards-list[b-nndvkgl4aj]::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.queue-cards-list[b-nndvkgl4aj]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.queue-cards-list[b-nndvkgl4aj]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.jscb-mini-card[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.jscb-mini-card:hover[b-nndvkgl4aj] {
    background: #f0f9ff;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
}

.worker-avatar-circle[b-nndvkgl4aj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mini-car-photo[b-nndvkgl4aj] {
    width: 52px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

.mini-car-photo img[b-nndvkgl4aj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-card-details[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mini-card-top[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-ro[b-nndvkgl4aj] {
    font-weight: 700;
    font-size: 11px;
    color: #0f172a;
}

.mini-plate[b-nndvkgl4aj] {
    background: #e0f2fe;
    color: #0284c7;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.mini-card-sub[b-nndvkgl4aj] {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-red-alert-box[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}

.jscb-red-alert-box.collapsed[b-nndvkgl4aj] {
    padding-bottom: 10px;
}

.red-alert-header[b-nndvkgl4aj] {
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    min-height: 34px;
}

.red-count[b-nndvkgl4aj] {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    flex-shrink: 0;
}

.alert-card[b-nndvkgl4aj] {
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #ef4444 !important;
}

.text-danger-subtle[b-nndvkgl4aj] {
    color: #dc2626;
    font-weight: 600;
}

.font-9[b-nndvkgl4aj] {
    font-size: 9px !important;
}

.font-10[b-nndvkgl4aj] {
    font-size: 10px !important;
}

.font-11[b-nndvkgl4aj] {
    font-size: 11px !important;
}

.font-16[b-nndvkgl4aj] {
    font-size: 16px !important;
}

.bg-cyan-subtle[b-nndvkgl4aj] {
    background: #cffafe !important;
}

.text-cyan[b-nndvkgl4aj] {
    color: #0891b2 !important;
}

.bg-slate-900[b-nndvkgl4aj] {
    background: #0f172a !important;
}

.fade-in[b-nndvkgl4aj] {
    animation: fadeIn-b-nndvkgl4aj 0.2s ease-in;
}

.jpcb-delay-inline-badge[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    color: #fecaca;
    font-weight: 800;
    font-size: 8.5px;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.6);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ─── BARRA DE PLANIFICACIÓN SUPERIOR JPCB ──────────────────────────────── */
.jpcb-planning-top-bar[b-nndvkgl4aj] {
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.jpcb-planning-badge[b-nndvkgl4aj] {
    animation: fadeIn-b-nndvkgl4aj 0.3s ease;
}


/* ─── ADAPTACIÓN AL 100% DE ZOOM / RESOLUCIONES ESTÁNDAR ──────────────────── */
@media (max-width: 1600px) {
    .jpcb-th-time[b-nndvkgl4aj] {
        font-size: 10px !important;
        padding: 4px 1px !important;
    }
}

@keyframes fadeIn-b-nndvkgl4aj {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ── Ejecución en curso y trabajo parado ──────────────────────────────────────
   El tablero distinguía plan y consumo, pero no si ese consumo está ocurriendo
   ahora. El borde vivo marca la sesión de fichaje abierta; el punteado, el
   trabajo que empezó y se quedó sin sesión. */
.jpcb-card-outer.is-running-now[b-nndvkgl4aj] {
    box-shadow: 0 0 0 2px #10b981, 0 2px 6px rgba(15, 23, 42, 0.12);
}

.jpcb-card-outer.is-stalled[b-nndvkgl4aj] {
    outline: 2px dashed #f59e0b;
    outline-offset: -2px;
}

.jpcb-card-outer.is-completed[b-nndvkgl4aj] {
    border-color: rgba(16, 185, 129, 0.7) !important;
    background: rgba(6, 78, 59, 0.15) !important;
}

/* ── Capacidad del taller ─────────────────────────────────────────────────────
   Tres magnitudes distintas —lo que se podría trabajar, lo ya comprometido y lo
   que queda— en una sola tira, antes del detalle por equipo. */
.jpcb-shop-capacity[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .55rem .9rem;
    /* Sin margen propio: la separación con la primera tarjeta la pone el `gap` del contenedor,
       igual que entre tarjetas. Con el margen se sumaban ~24px y la tira quedaba descolgada. */
    margin-bottom: 0;
    /* Blanca como las tarjetas de especialidad: sobre el gris de la zona (#F5F9FA) el #f8fafc de
       antes se fundía con el fondo y la tira no se leía como una tarjeta más del tablero. */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shop-cap-item[b-nndvkgl4aj] { display: flex; flex-direction: column; line-height: 1.15; }

.shop-cap-num[b-nndvkgl4aj] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.shop-cap-num small[b-nndvkgl4aj] { font-size: .7em; font-weight: 600; color: #64748b; margin-left: 1px; }

.shop-cap-label[b-nndvkgl4aj] {
    font-size: .68rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.shop-cap-bar[b-nndvkgl4aj] {
    flex: 1 1 auto;
    min-width: 4rem;
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.shop-cap-fill[b-nndvkgl4aj] { height: 100%; background: #0284c7; border-radius: 4px; }
.shop-cap-fill.is-over[b-nndvkgl4aj] { background: #dc2626; }

.shop-cap-pct[b-nndvkgl4aj] {
    font-size: .82rem;
    font-weight: 600;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

/* Nothing to draw once the load finished: say so instead of leaving the board blank. */
.jpcb-board-empty[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

/* Bays failed to load: the notice fills the empty board, same shape as .jscb-board-state. */
.jpcb-board-state[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
}

.jpcb-board-state.is-error[b-nndvkgl4aj] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.jpcb-board-state button[b-nndvkgl4aj] {
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid #d81b84;
    background: #d81b84;
    color: #ffffff;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jpcb-board-state button:hover[b-nndvkgl4aj] {
    background: #b81570;
    border-color: #b81570;
    box-shadow: 0 3px 8px rgba(216, 27, 132, 0.22);
}

.jpcb-board-state button:focus-visible[b-nndvkgl4aj] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* Aviso de trabajos que arrancan en la misma hora y no caben en la celda. La rejilla es horaria y
   solo dibuja una tarjeta; sin esta marca, el segundo trabajo del operario no existe para quien
   mira el tablero. */
[b-nndvkgl4aj] .jpcb-hidden-count {
    /* Es un <CountBadge> anclado arriba-derecha del wrapper; aquí solo va su posición. */
    --st-badge-offset-x: 3px;
    --st-badge-offset-y: 2px;
}

/* ── Barras de desplazamiento ocultas ────────────────────────────────────────
   El tablero se desplaza igual con rueda, gesto o arrastre; lo que se retira es solo el indicador
   visible, que cruzaba el calendario cada vez que alguien lo movía. Se cubren los tres motores:
   `scrollbar-width` (Firefox), `-ms-overflow-style` (Edge antiguo) y el pseudo-elemento de WebKit. */
.custom-scroll[b-nndvkgl4aj],
.jscb-board-container[b-nndvkgl4aj],
.jscb-unified-table-wrapper[b-nndvkgl4aj],
.jscb-top-legend-bar[b-nndvkgl4aj] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.custom-scroll[b-nndvkgl4aj]::-webkit-scrollbar,
.jscb-board-container[b-nndvkgl4aj]::-webkit-scrollbar,
.jscb-unified-table-wrapper[b-nndvkgl4aj]::-webkit-scrollbar,
.jscb-top-legend-bar[b-nndvkgl4aj]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ── Ficha de bahía ──────────────────────────────────────────────────────────
   Identidad, equipo, capacidad en horas y estado de servicio en los 96 px que la fila ya ocupaba.
   La ficha no lleva contorno ni filo de color: sobre el blanco de la celda separan las propias
   líneas de la tabla, y la especialidad ya viene rotulada en la cabecera del bloque. Las horas
   (suma del calendario efectivo de los técnicos asignados) son la magnitud con la que se planifica;
   los vehículos siguen siendo la capacidad física y viven en el `title` de la celda. */
.jpcb-bay-card[b-nndvkgl4aj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 2px;
}

.jpcb-bay-info[b-nndvkgl4aj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jpcb-bay-id-row[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jpcb-bay-code[b-nndvkgl4aj] {
    flex: 0 0 auto;
    padding: 1px 7px;
    background: #fff8e1;
    border: 1px solid #f0c14b;
    border-radius: 999px;
    color: #8a6100;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jpcb-bay-name[b-nndvkgl4aj] {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jpcb-bay-crew[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 2px 7px 2px 2px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jpcb-bay-crew:hover[b-nndvkgl4aj] {
    background: rgba(216, 27, 132, 0.07);
    border-color: #d81b84;
    box-shadow: 0 1px 4px rgba(216, 27, 132, 0.18);
}

.jpcb-bay-crew:focus-visible[b-nndvkgl4aj] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.jpcb-bay-crew.is-empty[b-nndvkgl4aj] {
    justify-content: center;
    gap: 5px;
    padding: 3px 8px;
    background: #fffbeb;
    border: 1px dashed #f0c14b;
    color: #b45309;
    font-size: 10px;
}

.jpcb-bay-avatars[b-nndvkgl4aj] {
    display: flex;
    flex: 0 0 auto;
}

.jpcb-bay-avatar[b-nndvkgl4aj] {
    width: 20px;
    height: 20px;
    margin-right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #64748b;
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.jpcb-bay-avatar:last-child[b-nndvkgl4aj] {
    margin-right: 0;
}

.jpcb-bay-avatar.is-more[b-nndvkgl4aj] {
    background: #e2e8f0;
    color: #475569;
}

.jpcb-bay-crew-label[b-nndvkgl4aj] {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #334d6e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jpcb-bay-crew.is-empty .jpcb-bay-crew-label[b-nndvkgl4aj] {
    flex: 0 1 auto;
    padding-left: 0;
    color: #b45309;
    font-weight: 700;
}

.jpcb-bay-crew-edit[b-nndvkgl4aj] {
    flex: 0 0 auto;
    font-size: 10px;
    color: #d81b84;
}

/* Interruptor de servicio: el patrón de switch de Systime, reducido a 30x16 por densidad. */
.jpcb-bay-service[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.jpcb-bay-switch[b-nndvkgl4aj] {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 30px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.jpcb-bay-switch input[b-nndvkgl4aj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.jpcb-bay-slider[b-nndvkgl4aj] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color 0.25s ease;
    pointer-events: none;
}

.jpcb-bay-slider[b-nndvkgl4aj]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
    transition: transform 0.25s ease;
}

.jpcb-bay-switch input:checked + .jpcb-bay-slider[b-nndvkgl4aj] {
    background: #d81b84;
}

.jpcb-bay-switch input:checked + .jpcb-bay-slider[b-nndvkgl4aj]::before {
    transform: translateX(14px);
}

.jpcb-bay-switch input:focus-visible + .jpcb-bay-slider[b-nndvkgl4aj] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.jpcb-bay-service-label[b-nndvkgl4aj] {
    min-width: 0;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anillo de capacidad: el mismo conic-gradient que el tablero usa para el avance del operario. */
.jpcb-bay-ring[b-nndvkgl4aj] {
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(#dea301 0% var(--jpcb-ring-pct, 0%), #e9eef5 var(--jpcb-ring-pct, 0%) 100%);
}

.jpcb-bay-ring-inner[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #eef2f7;
    line-height: 1.05;
}

.jpcb-bay-hours[b-nndvkgl4aj] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.jpcb-bay-hours-label[b-nndvkgl4aj] {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8898aa;
}

/* Bahía fuera de servicio por un imprevisto. */
.jpcb-bay-card.is-out[b-nndvkgl4aj] {
    background: #fff5f5;
    border-radius: 8px;
}

.jpcb-bay-card.is-out .jpcb-bay-code[b-nndvkgl4aj] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.jpcb-bay-card.is-out .jpcb-bay-name[b-nndvkgl4aj] {
    color: #64748b;
}

.jpcb-bay-card.is-out .jpcb-bay-hours[b-nndvkgl4aj] {
    color: #b91c1c;
}

.jpcb-bay-card.is-out .jpcb-bay-ring[b-nndvkgl4aj] {
    background: repeating-conic-gradient(#fecaca 0 6deg, #ffffff 6deg 12deg);
}

.jpcb-bay-out-note[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: #b91c1c;
    font-size: 9.5px;
    font-weight: 700;
}

.jpcb-bay-out-row .slot-cell[b-nndvkgl4aj],
.jpcb-bay-out-row .lunch-break-cell[b-nndvkgl4aj] {
    background-image: repeating-linear-gradient(135deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.10) 7px, rgba(220, 38, 38, 0.04) 7px, rgba(220, 38, 38, 0.04) 14px);
}

.jpcb-bay-out-row .tech-cell[b-nndvkgl4aj] {
    background: #fffafa !important;
}

/* ── Diálogo de inhabilitación de bahía ──────────────────────────────────────
   Sin motivo no se inhabilita: el tablero tiene que poder explicar por qué una bahía está parada.
   El catálogo de motivos es el mismo que usan los bloqueos de técnico. */
.jpcb-service-backdrop[b-nndvkgl4aj] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.35);
}

.jpcb-service-dialog[b-nndvkgl4aj] {
    position: fixed;
    z-index: 1090;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.45);
    overflow: hidden;
}

.jpcb-service-head[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.jpcb-service-title b[b-nndvkgl4aj] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

.jpcb-service-title span[b-nndvkgl4aj] {
    font-size: 10.5px;
    color: #64748b;
}

.jpcb-service-close[b-nndvkgl4aj] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.jpcb-service-close:hover[b-nndvkgl4aj] {
    background: #e2e8f0;
    color: #0f172a;
}

.jpcb-service-body[b-nndvkgl4aj] {
    padding: 10px 12px 4px;
}

.jpcb-service-legend[b-nndvkgl4aj] {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8898aa;
}

.jpcb-service-reasons[b-nndvkgl4aj] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.jpcb-service-reason[b-nndvkgl4aj] {
    padding: 4px 9px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jpcb-service-reason:hover[b-nndvkgl4aj] {
    border-color: #94a3b8;
}

.jpcb-service-reason.is-on[b-nndvkgl4aj] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.jpcb-service-empty[b-nndvkgl4aj] {
    font-size: 10.5px;
    color: #8898aa;
}

.jpcb-service-scope[b-nndvkgl4aj] {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.jpcb-service-scope label[b-nndvkgl4aj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 10.5px;
    color: #334155;
    cursor: pointer;
}

.jpcb-service-scope label.is-on[b-nndvkgl4aj] {
    border-color: #d81b84;
    box-shadow: 0 0 0 2px rgba(216, 27, 132, 0.12);
}

.jpcb-service-scope input[type="radio"][b-nndvkgl4aj] {
    accent-color: #d81b84;
}

.jpcb-service-time-picker[b-nndvkgl4aj] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.jpcb-service-time[b-nndvkgl4aj] {
    width: 96px;
    padding: 1px 20px 1px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 10.5px;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
}

.jpcb-service-time-picker > i[b-nndvkgl4aj] {
    position: absolute;
    right: 6px;
    font-size: 10px;
    color: #64748b;
    pointer-events: none;
}

/* Disparador de hora del modal de bloqueo: input de solo lectura + reloj, abre PickerSidebarTime. */
.jpcb-time-trigger[b-nndvkgl4aj] {
    position: relative;
}

.jpcb-time-trigger .form-control[readonly][b-nndvkgl4aj] {
    padding-right: 28px;
    background-color: #ffffff;
    cursor: pointer;
}

.jpcb-time-trigger-icon[b-nndvkgl4aj] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #64748b;
    pointer-events: none;
}

.jpcb-service-note[b-nndvkgl4aj] {
    margin: 0 0 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #64748b;
}

.jpcb-service-foot[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.jpcb-service-impact[b-nndvkgl4aj] {
    font-size: 10px;
    color: #64748b;
}

.jpcb-service-impact b[b-nndvkgl4aj] {
    display: block;
    font-size: 14px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.jpcb-service-actions[b-nndvkgl4aj] {
    display: flex;
    gap: 6px;
}

.jpcb-service-btn[b-nndvkgl4aj] {
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.jpcb-service-btn:hover[b-nndvkgl4aj] {
    background: #f1f5f9;
}

.jpcb-service-btn.is-danger[b-nndvkgl4aj] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.jpcb-service-btn.is-danger:hover[b-nndvkgl4aj] {
    background: #b91c1c;
}

.jpcb-service-btn:disabled[b-nndvkgl4aj] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ─── Doble Carril JPCB: Plan e Inicio/Fin ──────────────────────────────── */
.track-header-cell[b-nndvkgl4aj] {
    width: var(--jpcb-track-column-width) !important;
    min-width: var(--jpcb-track-column-width) !important;
    max-width: var(--jpcb-track-column-width) !important;
    text-align: center !important;
    vertical-align: middle !important;
    position: sticky !important;
    left: var(--jpcb-bay-column-width) !important;
    z-index: 12 !important;
    background: #f1f5f9 !important;
    border-right: 1px solid #cbd5e1 !important;
    font-size: 11px;
    font-weight: 800;
}

.jpcb-track-tag-cell[b-nndvkgl4aj] {
    width: var(--jpcb-track-column-width) !important;
    min-width: var(--jpcb-track-column-width) !important;
    max-width: var(--jpcb-track-column-width) !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px 4px !important;
    font-weight: 600;
    position: sticky !important;
    left: var(--jpcb-bay-column-width) !important;
    z-index: 9 !important;
    background: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}

.jpcb-track-pill[b-nndvkgl4aj] {
    display: inline-block;
    line-height: 1.2;
    white-space: nowrap;
}

.plan-pill[b-nndvkgl4aj] {
    background: transparent;
    color: #0369a1;
    border: 0;
    font-size: 10.5px;
    padding: 0;
    font-weight: 700;
}

.actual-pill[b-nndvkgl4aj] {
    background: transparent;
    color: #15803d;
    border: 0;
    font-size: 10.5px;
    padding: 0;
    font-weight: 700;
}

.jpcb-track-tag-cell.track-actual[b-nndvkgl4aj] {
    background: var(--jpcb-actual-row-bg) !important;
}

.jpcb-bay-plan-row[b-nndvkgl4aj] {
    border-bottom: 1px dashed #e2e8f0;
    height: 58px;
}

.jpcb-bay-actual-row[b-nndvkgl4aj] {
    border-bottom: 2px solid #cbd5e1;
    min-height: 42px;
    height: auto;
}

/* ── Fila de relleno ─────────────────────────────────────────────────────────
   La celda de la bahía (o el encabezado «Sin bahía») abarca Plan, Inicio/Fin y esta fila. Cuando
   mide más que las dos primeras, el navegador reparte el sobrante entre las filas de alto
   automático: Plan e Inicio/Fin lo tienen fijo, así que todo cae aquí y ellas conservan su alto.
   Va sin altura a propósito: con `height: 0` dejaría de ser automática y el sobrante volvería a
   repartirse. La línea que cierra el bloque la pone esta fila y no Inicio/Fin, para que el
   sobrante quede dentro del mismo recuadro. */
.jpcb-bay-actual-row > td[b-nndvkgl4aj] {
    border-bottom: 0 !important;
}

.jpcb-filler-row > td.jpcb-filler-cell[b-nndvkgl4aj] {
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.bay-master-cell[b-nndvkgl4aj] {
    height: 96px;
    padding: 5px 6px !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.jpcb-timeline-cell[b-nndvkgl4aj] {
    padding: 0 !important;
    min-height: 42px;
    height: auto;
    overflow: visible;
    background: var(--jpcb-actual-row-bg);
}

.jpcb-unlocated-row > td[b-nndvkgl4aj] {
    border-color: #f1c76f !important;
}

.jpcb-unlocated-master-cell[b-nndvkgl4aj] {
    height: auto;
    min-height: 96px;
    padding: 8px !important;
    background: #fffbeb !important;
    cursor: default;
}

.jpcb-unlocated-card[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 8px;
    border: 1px solid #f2bd51;
    border-radius: 8px;
    background: #fff8df;
    color: #334155;
    text-align: left;
}

.jpcb-unlocated-card > strong[b-nndvkgl4aj] {
    overflow: hidden;
    color: #7c4a03;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpcb-unlocated-card > span[b-nndvkgl4aj] {
    font-size: 10px;
    font-weight: 600;
}

.jpcb-unlocated-heading[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.jpcb-unlocated-heading svg[b-nndvkgl4aj] {
    width: 18px;
    height: 18px;
    color: #b45309;
}

.jpcb-unlocated-code[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid #f2bd51;
    border-radius: 999px;
    background: #fff;
    color: #92400e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
}

.jpcb-unlocated-capacity[b-nndvkgl4aj] {
    color: #64748b;
}

/* Quién tiene cada trabajo, uno por línea, con su botón para darle bahía. La tarjeta del plan ya
   no lo dice. */
.jpcb-unlocated-workers[b-nndvkgl4aj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
}

.jpcb-unlocated-worker[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.jpcb-unlocated-worker-name[b-nndvkgl4aj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpcb-unlocated-assign-btn[b-nndvkgl4aj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 4px;
    min-height: 28px;
    padding: 3px 7px;
    border: 1px solid #d99116;
    border-radius: 8px;
    background: #fff;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.jpcb-unlocated-assign-btn svg[b-nndvkgl4aj] {
    width: 15px;
    height: 15px;
}

.jpcb-unlocated-assign-btn:hover[b-nndvkgl4aj] {
    border-color: #b45309;
    background: #fffbeb;
    box-shadow: 0 2px 5px rgba(146, 64, 14, .15);
}

.jpcb-unlocated-assign-btn:focus-visible[b-nndvkgl4aj] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.jpcb-unlocated-track-cell[b-nndvkgl4aj] {
    background: #fffbeb !important;
}

.jpcb-row-disabled[b-nndvkgl4aj] {
    opacity: 0.55;
    pointer-events: none;
}

/* Tarjeta de Ejecución Real (Inicio/Fin) */
.jpcb-actual-card[b-nndvkgl4aj] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 34px;
    box-sizing: border-box;
    text-align: left;
}

.jpcb-actual-card:hover[b-nndvkgl4aj] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.jpcb-actual-card.running[b-nndvkgl4aj] {
    border-color: #10b981;
    background: #f0fdf4;
    animation: running-card-glow-b-nndvkgl4aj 3s infinite ease-in-out;
}

.jpcb-actual-card.stalled[b-nndvkgl4aj] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.jpcb-actual-card.completed[b-nndvkgl4aj] {
    border-color: #059669;
    background: #ecfdf5;
}

.jpcb-actual-card.notstarted[b-nndvkgl4aj] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.jpcb-status-badge[b-nndvkgl4aj] {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.running-badge[b-nndvkgl4aj] {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

.stalled-badge[b-nndvkgl4aj] {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.completed-badge[b-nndvkgl4aj] {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.notstarted-badge[b-nndvkgl4aj] {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}

.jpcb-actual-ot-tag[b-nndvkgl4aj] {
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.jpcb-actual-hours-text[b-nndvkgl4aj] {
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.jpcb-actual-progress[b-nndvkgl4aj] {
    height: 5px !important;
    background-color: #e2e8f0 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.pulse-dot[b-nndvkgl4aj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #16a34a;
    display: inline-block;
    animation: pulse-dot-anim-b-nndvkgl4aj 1.8s infinite;
}

@keyframes pulse-dot-anim-b-nndvkgl4aj {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(22, 163, 74, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

@keyframes running-card-glow-b-nndvkgl4aj {
    0% {
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
    }
}

/* ─── OPCIONES Y BLOQUEOS DE TARJETA JPCB ───────────────────────────────────── */
.jpcb-blocked-cell[b-nndvkgl4aj] {
    background-color: transparent !important;
}

.jpcb-blocked-box[b-nndvkgl4aj] {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1.5px dashed #94a3b8;
    background: rgba(241, 245, 249, 0.95);
    border-radius: 6px;
    padding: 4px 6px;
    height: 100%;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #475569;
    font-size: 10.5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease;
}

.jpcb-blocked-box:hover[b-nndvkgl4aj] {
    border-color: #64748b;
}

.jpcb-blocked-header[b-nndvkgl4aj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 700;
    color: #334155;
    /* Sin este mínimo en cero el `text-truncate` del motivo no recorta nada: un elemento flexible
       no encoge por debajo de su contenido, y el nombre del bloqueo se salía por el costado de la
       celda. El motivo completo sigue en el tooltip. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.jpcb-blocked-title[b-nndvkgl4aj] {
    min-width: 0;
    max-width: 100%;
}

.jpcb-blocked-time[b-nndvkgl4aj] {
    font-size: 9.5px;
    color: #64748b;
    margin-top: 2px;
    /* El rango en formato de 12 horas es más largo que el de 24: en una columna de 72 px pasa a la
       línea siguiente en vez de desbordarse. */
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
/* /Pages/Home/Components/Calendar/Components/JpcbBoard/JpcbExecutionTimeline.razor.rz.scp.css */
.jpcb-execution-timeline[b-v3cl2qynst] {
    position: relative;
    min-height: var(--jpcb-track-height, 40px);
    height: var(--jpcb-track-height, 40px);
    overflow: hidden;
    /* El tinte lo fija el tablero (`--jpcb-actual-row-bg`) para que etiqueta y pista vayan iguales. */
    background: var(--jpcb-actual-row-bg, #f8fafc);
}

.jpcb-execution-elapsed[b-v3cl2qynst],
.jpcb-execution-blocked[b-v3cl2qynst],
.jpcb-execution-off-shift[b-v3cl2qynst] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Hora fuera de jornada: el mismo rayado de la celda de bahía. Va por debajo del transcurrido y
   de los bloqueos; lo que se fichó ahí se pinta encima, atenuado, para que se lea como registro. */
.jpcb-execution-off-shift[b-v3cl2qynst] {
    right: auto;
    z-index: 1;
    pointer-events: auto;
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #eef2f7 6px, #eef2f7 12px);
}

.jpcb-execution-elapsed[b-v3cl2qynst] {
    right: auto;
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
    opacity: .8;
}

.jpcb-execution-blocked[b-v3cl2qynst] {
    right: auto;
    z-index: 2;
    border-inline: 1px dashed #94a3b8;
    background: repeating-linear-gradient(-45deg, rgba(226, 232, 240, .82), rgba(226, 232, 240, .82) 6px, rgba(241, 245, 249, .88) 6px, rgba(241, 245, 249, .88) 12px);
}

.jpcb-execution-timeline.is-display-only[b-v3cl2qynst] {
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #eef2f7 6px, #eef2f7 12px);
}

.jpcb-exec-tray[b-v3cl2qynst],
.jpcb-handover-line[b-v3cl2qynst],
.jpcb-worktime-bar[b-v3cl2qynst],
.jpcb-pending-marker[b-v3cl2qynst],
.jpcb-handover-marker[b-v3cl2qynst] {
    position: absolute;
}

/* ── Contenedor gris: el tiempo en bandeja ─────────────────────────────────
   Sigue las mismas reglas que la tarjeta de la fila Plan: esquinas de tarjeta, y en un corte el
   lado va recto y punteado (aquí en blanco, que es lo que contrasta sobre el gris). */
.jpcb-exec-tray[b-v3cl2qynst] {
    z-index: 3;
    height: 28px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #cbd5e1;
}

.jpcb-exec-tray.has-cut-start[b-v3cl2qynst] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 2.5px dashed #ffffff;
}

.jpcb-exec-tray.has-cut-end[b-v3cl2qynst] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 2.5px dashed #ffffff;
}

/* Horas planeadas, al final del contenedor: solo cuando el plan termina ahí. */
.jpcb-exec-tray-label[b-v3cl2qynst] {
    position: absolute;
    top: 0;
    right: 10px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 28px;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Entrega: rombo y línea hasta el primer inicio ──────────────────────── */
.jpcb-handover-line[b-v3cl2qynst] {
    z-index: 5;
    height: 2px;
    background: #64748b;
    pointer-events: none;
}

.jpcb-handover-marker[b-v3cl2qynst] {
    z-index: 6;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border: 2px solid #64748b;
    background: #fff;
    transform: rotate(45deg);
}

/* Entrega anterior al día visible: el rombo va pegado al borde en vez de a caballo de él. */
.jpcb-handover-marker.is-before-day[b-v3cl2qynst] {
    margin-left: 1px;
}

/* ── Tramos de fichaje ──────────────────────────────────────────────────────
   Mismas esquinas que las barras de proceso del JSCB: pequeñas, grandes (concéntricas con el
   contenedor) solo en el lado que toca el extremo del gris, y rectas en un corte. Van por hora
   real, así que pueden sobresalir del gris si se empezó antes o después de lo planeado. */
.jpcb-worktime-bar[b-v3cl2qynst] {
    z-index: 7;
    min-width: 4px;
    height: 20px;
    overflow: hidden;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--jpcb-work-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease, box-shadow .18s ease;
}

.jpcb-worktime-bar.is-flush-start[b-v3cl2qynst] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.jpcb-worktime-bar.is-flush-end[b-v3cl2qynst] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.jpcb-worktime-bar.phase-cut-start[b-v3cl2qynst] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.jpcb-worktime-bar.phase-cut-end[b-v3cl2qynst] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.jpcb-worktime-bar:hover[b-v3cl2qynst] {
    filter: brightness(.93);
    box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
}

/* Fichaje abierto ahora mismo: punteado y con halo, como hasta ahora. */
.jpcb-worktime-bar.is-open[b-v3cl2qynst] {
    border: 1.5px dashed rgba(255, 255, 255, .85);
    line-height: 17px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jpcb-work-color) 24%, transparent);
}

.jpcb-worktime-bar:focus-visible[b-v3cl2qynst],
.jpcb-pending-marker:focus-visible[b-v3cl2qynst] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.jpcb-pending-marker[b-v3cl2qynst] {
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 20px;
    padding: 1px 5px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: rgba(248, 250, 252, .94);
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.jpcb-pending-marker svg[b-v3cl2qynst] {
    width: 12px;
    height: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .jpcb-worktime-bar[b-v3cl2qynst],
    .jpcb-pending-marker[b-v3cl2qynst] {
        transition-duration: .01ms;
    }
}
/* /Pages/Home/Components/Calendar/Components/JpcbBoard/JpcbPlanTimeline.razor.rz.scp.css */
/* Misma altura que la fila Plan de bahía: tarjeta de 50 px con 4 px de aire arriba y abajo. */
.jpcb-plan-timeline[b-labdwblrvq] {
    position: relative;
    min-height: 58px;
    overflow: hidden;
    background: #fff;
}

.jpcb-plan-grid[b-labdwblrvq],
.jpcb-plan-elapsed[b-labdwblrvq],
.jpcb-plan-blocked[b-labdwblrvq],
.jpcb-plan-off-shift[b-labdwblrvq] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Hora fuera de jornada: mismo rayado que la celda de bahía; la tarjeta que caiga ahí va encima. */
.jpcb-plan-off-shift[b-labdwblrvq] {
    right: auto;
    z-index: 1;
    pointer-events: auto;
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #eef2f7 6px, #eef2f7 12px);
}

.jpcb-plan-grid[b-labdwblrvq] {
    background-image: linear-gradient(to right, transparent calc(100% - 1px), #e2e8f0 calc(100% - 1px));
    background-size: calc(100% / var(--jpcb-slot-count, 1)) 100%;
}

.jpcb-plan-elapsed[b-labdwblrvq] {
    right: auto;
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
    opacity: .8;
}

.jpcb-plan-blocked[b-labdwblrvq] {
    right: auto;
    z-index: 2;
    border-inline: 1px dashed #94a3b8;
    background: repeating-linear-gradient(-45deg, rgba(226, 232, 240, .82), rgba(226, 232, 240, .82) 6px, rgba(241, 245, 249, .88) 6px, rgba(241, 245, 249, .88) 12px);
}

.jpcb-plan-timeline.is-display-only[b-labdwblrvq] {
    background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #eef2f7 6px, #eef2f7 12px);
}

/* La cápsula compartida (wwwroot/css/board-vehicle-card.css) puesta por hora: posición absoluta
   con el ancho del tramo, sin margen (el aire lo pone la pista) y a la altura de la fila de bahía. */
.jpcb-plan-timeline .jpcb-unlocated-plan-card[b-labdwblrvq] {
    position: absolute;
    top: 4px;
    z-index: 5;
    margin: 0;
    min-height: 50px;
}

/* Registro fuera de jornada: se ve y se abre, pero atenuado. */
.jpcb-plan-timeline .jpcb-unlocated-plan-card.is-off-shift[b-labdwblrvq] {
    opacity: 0.72;
    filter: saturate(0.6);
}

.jpcb-plan-timeline .jpcb-unlocated-plan-card.is-off-shift:hover[b-labdwblrvq] {
    opacity: 0.95;
    filter: none;
}

.jpcb-plan-timeline .jpcb-unlocated-plan-card .capsule-duration-text[b-labdwblrvq] {
    cursor: default;
}

.jpcb-plan-timeline .jpcb-unlocated-plan-card .capsule-duration-text:hover[b-labdwblrvq] {
    background: transparent;
    color: #c65d08;
}

.jpcb-plan-timeline .jpcb-unlocated-plan-card:focus-visible[b-labdwblrvq] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* Pseudo-plan de un tramo sin plan: punteado y rayado, como en la fila de bahía y en el JSCB. */
.jpcb-plan-timeline .jpcb-unlocated-plan-card.is-unplanned[b-labdwblrvq] {
    border-style: dashed !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(15, 23, 42, 0.05),
        rgba(15, 23, 42, 0.05) 6px,
        transparent 6px,
        transparent 12px) !important;
}

.jpcb-card-chips[b-labdwblrvq] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

@container board-card (max-width: 319px) {
    .jpcb-card-chips[b-labdwblrvq] {
        display: none;
    }
}

.jpcb-unplanned-badge[b-labdwblrvq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
    border: 1px dashed #94a3b8;
}
/* /Pages/Home/Components/Calendar/Components/JpcbBoard/JpcbWorkstationCard.razor.rz.scp.css */
/* La tarjeta trae su propio recuadro: el CSS aislado del panel no viste los elementos de un componente
   hijo, así que heredar `.proc-kpi-card` de allí la dejaría sin fondo ni altura. Las medidas son las
   de la tarjeta de operarios, que ocupa este mismo sitio en las otras dos pestañas. */
.proc-kpi-card[b-ot0a3mta33] {
    background: #F5F9FA;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.jpcb-workstation-card[b-ot0a3mta33] {
    /* Base 0, como la tarjeta de operarios: con `auto` (y `width: 100%`) la tarjeta reclamaba toda
       la fila y el recorte caía sobre las cuatro tarjetas de estado, que bajaban de sus 110 px y
       perdían el final de sus rótulos. Con base 0 solo crece con lo que sobra. */
    flex: 1 1 0;
    /* Nunca por debajo de lo que sus rótulos necesitan. Un ancho fijo dejaba los textos
       apretados en pantallas estrechas y aire sobrante en las anchas. */
    min-width: min-content;
    width: 100%;
    display: grid;
    /* `min-content` es la palabra más larga de la columna: por debajo de eso el rótulo se saldría
       sobre su vecino. El reparto en fracciones solo decide qué hacer con el espacio sobrante. */
    grid-template-columns: repeat(3, minmax(min-content, 1fr)) minmax(max-content, 1.1fr);
    align-items: stretch;
    gap: 0;
    padding: 4px 10px;
    min-height: 52px;
    overflow: hidden;
}

/* Columna centrada con un filete a la derecha, igual que en la tarjeta de operarios: sin él, seis
   cifras seguidas se leen como una sola lista y se pierde qué rótulo va con cuál. */
.jpcb-ws-col[b-ot0a3mta33] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 6px;
    border: none;
    background: transparent;
    text-align: left;
    box-sizing: border-box;
}

.jpcb-ws-col:not(:last-child)[b-ot0a3mta33]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.5px;
    height: 42px;
    border-radius: 999px;
    background: #edf2f7;
    transform: translateY(-50%);
}

.jpcb-ws-col--action[b-ot0a3mta33] {
    cursor: pointer;
}

.jpcb-ws-col--action:hover[b-ot0a3mta33] {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
}

.jpcb-ws-col--actions[b-ot0a3mta33] {
    justify-content: center;
    align-items: stretch;
    gap: 4px;
}

/* Las dos cifras de la columna, una al lado de la otra y con el mismo ancho: así la pareja queda
   centrada bajo su filete y el rótulo de cada una usa el ancho que la otra no necesita. */
.jpcb-ws-stack[b-ot0a3mta33] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.jpcb-ws-stack > *[b-ot0a3mta33] {
    flex: 1 1 0;
    min-width: 0;
}

/* Las dos acciones van en una sola fila y del mismo ancho. Apiladas, la tarjeta crecía por encima de
   las de los otros tableros y la franja superior cambiaba de alto al pasar de pestaña. */
.jpcb-ws-actions[b-ot0a3mta33] {
    display: flex;
    gap: 4px;
    width: 100%;
}
/* /Pages/Home/Components/Calendar/Components/JscbBoard/JscbAuthorizationReadinessPanel.razor.rz.scp.css */
.jscb-readiness[b-dwha9opvda] {
    flex: 0 1 464px;
    min-width: 390px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #F5F9FA;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.jscb-readiness__header[b-dwha9opvda] {
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 3px;
}

.jscb-readiness__header h2[b-dwha9opvda] {
    min-width: 0;
    margin: 0;
    color: #334155;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-readiness__total[b-dwha9opvda] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #f8fafc;
    color: #475569;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.4;
}

.jscb-readiness__status[b-dwha9opvda] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jscb-readiness__metrics[b-dwha9opvda] {
    flex: 1 1 auto;
    min-height: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.jscb-readiness__metric[b-dwha9opvda] {
    appearance: none;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.jscb-readiness__metric:hover[b-dwha9opvda] {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.jscb-readiness__metric:disabled[b-dwha9opvda] {
    cursor: wait;
    pointer-events: none;
}

.jscb-readiness__metric:focus-visible[b-dwha9opvda] {
    outline: 2px solid #d81b84;
    outline-offset: 1px;
}

.jscb-readiness__metric.is-active[b-dwha9opvda] {
    border-color: #dea301;
    background: #fff8e1;
    box-shadow: 0 0 0 1px rgba(222, 163, 1, 0.16);
}

.jscb-readiness__icon[b-dwha9opvda] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jscb-readiness__icon svg[b-dwha9opvda] {
    width: 20px;
    height: 20px;
}

/* Cifra, rótulo y desglose en la misma escala que las tarjetas de estado de al lado
   (`JscbSummaryMetricCard`): son la misma fila y se leen de un vistazo. */
.jscb-readiness__value[b-dwha9opvda] {
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.jscb-readiness__label[b-dwha9opvda] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.jscb-readiness__label strong[b-dwha9opvda],
.jscb-readiness__label small[b-dwha9opvda] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jscb-readiness__label strong[b-dwha9opvda] {
    color: #475569;
    font-size: 9.5px;
    font-weight: 600;
}

.jscb-readiness__label small[b-dwha9opvda] {
    margin-top: 1px;
    color: #94a3b8;
    font-size: 8.5px;
    font-weight: 600;
}

.jscb-readiness__metric--in-store .jscb-readiness__icon[b-dwha9opvda] {
    color: #b45309;
}

.jscb-readiness__metric--out-of-store .jscb-readiness__icon[b-dwha9opvda] {
    color: #64748b;
}

.jscb-readiness__metric--assigned .jscb-readiness__icon[b-dwha9opvda] {
    color: #2563eb;
}

@media (max-width: 1180px) {
    .jscb-readiness[b-dwha9opvda] {
        min-width: 330px;
    }

    .jscb-readiness__metric[b-dwha9opvda] {
        grid-template-columns: 18px auto minmax(0, 1fr);
        gap: 3px;
        padding-inline: 3px;
    }

    .jscb-readiness__metric[b-dwha9opvda] {
        min-height: 44px;
    }

    .jscb-readiness__icon[b-dwha9opvda],
    .jscb-readiness__icon svg[b-dwha9opvda] {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 900px) {
    .jscb-readiness[b-dwha9opvda] {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jscb-readiness__metric[b-dwha9opvda] {
        transition-duration: 0.01ms;
    }
}
/* /Pages/Home/Components/Calendar/Components/JscbBoard/JscbBoardView.razor.rz.scp.css */
/* Contenedor Principal del Tablero JSCB (Full Width) */
.jscb-board-container[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    width: 100%;
    background: transparent;
    color: #0f172a;
    padding: 0;
    gap: 10px;
    overflow: hidden !important;
}

/* 1. Barra Superior con Leyenda de Fases */
.jscb-top-legend-bar[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    /* Una sola fila que se desplaza. Con `wrap` los grupos caían a un segundo renglón y la barra
       crecía hacia abajo, robando altura al calendario justo cuando hay más procesos que mostrar.
       El scroll horizontal mantiene la altura fija y deja llegar a todos. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 2px;
    scrollbar-width: thin;
}



.jscb-legend-item[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 165px !important;
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 999px;
    background-color: #79828F;
    color: #ffffff;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.jscb-legend-item:hover[b-y2qwvwjtw1] {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Una fase sin nada planificado se apaga en lugar de desaparecer: sigue diciendo que existe y con
   cuánta capacidad cuenta, que es lo que antes contaba el gris de sus horas. */
.jscb-legend-item.is-idle[b-y2qwvwjtw1] {
    opacity: 0.5;
}

.jscb-legend-label[b-y2qwvwjtw1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    max-width: 95px;
}

.jscb-legend-hours[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* 2. Tabla Grilla Unificada */
.jscb-unified-table-wrapper[b-y2qwvwjtw1] {
    /* Sin borde ni sombra: el marco envolvía también la zona de las filas, y ahí cada equipo y cada
       vehículo ya traen su propia tarjeta. Eran dos marcos para lo mismo. El encabezado sí conserva
       los suyos, definidos en sus propias celdas, porque es lo que separa los días del contenido al
       desplazarse.
       El fondo va transparente para que asome el panel de la zona de reparación, igual que en JPCB:
       cada equipo se lee como una tarjeta suelta sobre él. El blanco que había aquí antes existía
       porque no había panel de zona debajo y lo que asomaba era el gris de la página. */
    background: transparent;
    border: 0;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.timeline-table-fixed[b-y2qwvwjtw1],
.jscb-unified-table[b-y2qwvwjtw1] {
    min-width: 100%;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed !important;
}

.col-tecnico-header[b-y2qwvwjtw1] {
    /* Sin anclaje horizontal: la columna se desplaza con el resto de la tabla. Anclada, las
       tarjetas de vehículo pasaban por detrás de ella y quedaban medio tapadas al mirar días
       lejanos. El encabezado sigue anclado en vertical, que es lo que hace falta al bajar.
       189px = 270px menos 30%. La columna cabe más estrecha porque el nombre y el cargo de cada
       operario pasaron al tooltip de su foto; lo que queda visible es el equipo, su carga y las
       burbujas. */
    width: 189px;
    min-width: 189px;
    max-width: 192px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-bottom: 1px solid #cbd5e1;
    border-right: 1px solid #cbd5e1;
    text-align: left;
}

.col-day-header[b-y2qwvwjtw1] {
    text-align: center;
    padding: 4px 4px 3px 4px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
    background: #ffffff;
    width: 92px;
    min-width: 92px;
    vertical-align: middle;
}

.col-day-header.today-header[b-y2qwvwjtw1] {
    background: #e0f2fe;
    border: 1.5px solid #0284c7 !important;
    border-left: 1.5px solid #0284c7 !important;
    border-right: 1.5px solid #0284c7 !important;
    border-top: 1.5px solid #0284c7 !important;
    border-bottom: 1.5px solid #0284c7 !important;
    box-shadow: inset 0 0 0 1.5px #0284c7;
    position: relative;
    z-index: 2;
}

.col-day-header.sunday-header[b-y2qwvwjtw1] {
    background: #f8fafc;
}

/* Dynamic Time Scale Table Layouts */
.jscb-unified-table.is-day-view[b-y2qwvwjtw1] {
    width: 100%;
    table-layout: fixed;
}

.jscb-unified-table.is-day-view .col-day-header[b-y2qwvwjtw1] {
    min-width: 320px;
    width: 100%;
}

.col-hour-header[b-y2qwvwjtw1] {
    min-width: 68px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    padding: 6px 2px !important;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
    vertical-align: middle;
}

.col-hour-header.is-lunch-break[b-y2qwvwjtw1] {
    background-color: rgba(241, 245, 249, 0.7) !important;
    color: #64748b !important;
}

/* ── Horas fuera de jornada ────────────────────────────────────────────────
   La escala del día se estira hasta el primer y el último registro (un tramo que empezó antes de
   abrir o terminó después de cerrar). Esas horas no son jornada: encabezado en gris y rayado, la
   celda vacía no admite soltar nada y la cápsula que cae ahí se atenúa y no se arrastra. */
.col-hour-header.is-off-shift[b-y2qwvwjtw1] {
    color: #94a3b8 !important;
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
    cursor: help;
}

.hour-off-shift-badge[b-y2qwvwjtw1] {
    font-size: 10px;
    color: #94a3b8;
}

/* ── Días fuera del periodo (semana y mes) ─────────────────────────────────
   Dos días a cada lado del periodo, siempre: contexto de lo que viene de antes y de lo que sigue.
   Mismo lenguaje que las horas fuera de jornada: encabezado gris rayado con luna, celda vacía sin
   soltado, y la orden que cae entera en el margen atenuada y sin arrastre. */
.col-day-header.is-margin-day[b-y2qwvwjtw1] {
    color: #94a3b8 !important;
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
    cursor: help;
}

.col-day-header.is-margin-day .day-simple-name[b-y2qwvwjtw1],
.col-day-header.is-margin-day .day-simple-num[b-y2qwvwjtw1] {
    color: #94a3b8;
}

.margin-day-header-icon[b-y2qwvwjtw1] {
    color: #94a3b8;
    font-size: 9px;
}

.hour-header-wrap[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.hour-header-time[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 700;
    color: inherit;
}

.hour-lunch-badge[b-y2qwvwjtw1] {
    font-size: 10px;
    color: #94a3b8;
}

.timeline-hour-cell[b-y2qwvwjtw1] {
    min-width: 68px !important;
    border-right: 1px solid #f1f5f9 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.timeline-hour-cell.is-lunch-break[b-y2qwvwjtw1] {
    background-color: rgba(241, 245, 249, 0.45) !important;
}

.empty-hour-cell[b-y2qwvwjtw1] {
    height: 100%;
    min-height: 48px;
    background-color: #fafafa;
    transition: background-color 0.15s ease;
}

.empty-hour-cell:hover[b-y2qwvwjtw1] {
    background-color: #f1f5f9;
}

.lunch-slot-indicator[b-y2qwvwjtw1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
}

.jscb-unified-table.is-month-view .col-day-header[b-y2qwvwjtw1] {
    width: 38px;
    min-width: 38px;
    padding: 4px 1px;
}

.jscb-unified-table.is-month-view .timeline-day-cell[b-y2qwvwjtw1] {
    padding: 6px 2px;
}

.jscb-unified-table.is-month-view .day-simple-name[b-y2qwvwjtw1] {
    font-size: 9.5px;
}

.jscb-unified-table.is-month-view .day-simple-num[b-y2qwvwjtw1] {
    font-size: 11px;
    min-width: 18px;
    height: 18px;
}


.day-simple-wrap[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.day-simple-name[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: capitalize;
}

.day-simple-num[b-y2qwvwjtw1] {
    font-size: 13.5px;
    font-weight: 800;
    color: #1e293b;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.today-num-pill[b-y2qwvwjtw1] {
    background: #0284c7;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

/* Columna Izquierda de Técnico / Equipo */
.col-tecnico-cell[b-y2qwvwjtw1] {
    /* Alineada arriba: la fila crece con los vehículos que el equipo tenga planificados, y ese
       espacio de más debe quedar debajo de la ficha, no repartido alrededor. Centrada, la ficha
       del equipo se despegaba del encabezado y dejaba de alinearse con la primera fila del
       calendario. */
    vertical-align: top;
    /* El ancho se repite aquí, no solo en el encabezado: sin `width` en la celda es el contenido
       quien decide, y un cargo largo —«Auxiliar de colisión (Analista de aseguradora), Técnico
       Latonero…»— ensanchaba la columna entera. Con el ancho fijo, ese texto se reparte en varias
       líneas en lugar de empujar el calendario. */
    width: 189px;
    min-width: 189px;
    max-width: 189px;
    padding: 4px 14px 10px 14px;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.02);
}

.team-card-inner[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.team-meta-box[b-y2qwvwjtw1] {
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.cursor-pointer[b-y2qwvwjtw1] {
    cursor: pointer;
}

.team-collapsed-row[b-y2qwvwjtw1] {
    transition: background-color 0.15s ease;
}

.team-collapsed-row:hover[b-y2qwvwjtw1],
.team-collapsed-row:hover td[b-y2qwvwjtw1] {
    background-color: #f1f5f9 !important;
}

.team-meta-name[b-y2qwvwjtw1] {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    cursor: pointer;
}

.team-meta-code-badge[b-y2qwvwjtw1] {
    font-size: 11.5px;
    font-weight: 800;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2.5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(2, 132, 199, 0.25);
    line-height: 1.2;
}

/* Botones de Acción de Equipo */
.team-action-btn[b-y2qwvwjtw1] {
    background: transparent;
    border: none;
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    border-radius: 6px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-action-btn:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
}

.team-edit-btn:hover[b-y2qwvwjtw1] {
    color: #0284c7;
    background: #e0f2fe;
}

.team-delete-btn:hover[b-y2qwvwjtw1] {
    color: #ef4444;
    background: #fee2e2;
}

/* Stack de Burbujas de Operarios (De izquierda a derecha, sin contenedor interno) */
.team-avatar-stack-container[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 2px;
}

.team-avatar-stack[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.team-stack-avatar-wrap[b-y2qwvwjtw1] {
    margin-left: -8px;
    position: relative;
    transition: transform 0.15s ease, z-index 0.15s ease;
}

.team-stack-avatar-wrap:first-child[b-y2qwvwjtw1] {
    margin-left: 0;
}

.team-stack-avatar-wrap:hover[b-y2qwvwjtw1] {
    transform: translateY(-2px) scale(1.08);
    z-index: 10;
}

.team-stack-avatar[b-y2qwvwjtw1] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    background: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    display: block;
    cursor: default;
}

.team-stack-empty[b-y2qwvwjtw1] {
    padding: 4px 8px;
}

.team-tech-text[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.team-tech-name[b-y2qwvwjtw1] {
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-tech-role-tag[b-y2qwvwjtw1] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    margin-top: 1px;
}

.team-tech-role-tag.role-latoneria[b-y2qwvwjtw1] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.team-tech-role-tag.role-cabina[b-y2qwvwjtw1] {
    background: rgba(2, 132, 199, 0.14);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.35);
}

.team-tech-role-tag.role-alistamiento[b-y2qwvwjtw1] {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.team-tech-role-tag.role-armado[b-y2qwvwjtw1] {
    background: rgba(236, 72, 153, 0.14);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.35);
}

.team-tech-role-tag.role-desarmado[b-y2qwvwjtw1] {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.team-tech-role-tag.role-general[b-y2qwvwjtw1] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Filas de Equipos y Subfilas para Múltiples Vehículos */
.team-schedule-row[b-y2qwvwjtw1] {
    transition: background-color 0.15s ease;
}

.team-schedule-row.team-first-row[b-y2qwvwjtw1] {
    border-top: 2px solid #cbd5e1;
}

.team-schedule-row.team-sub-row[b-y2qwvwjtw1] {
    border-top: 1px dashed #e2e8f0;
}

.team-schedule-row:hover[b-y2qwvwjtw1] {
    background: rgba(241, 245, 249, 0.4);
}

/* Celdas de Tiempo */
.timeline-day-cell[b-y2qwvwjtw1] {
    height: 98px;
    vertical-align: middle;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 8px;
    position: relative;
}

/* Los días que ya tienen una OT asignada se pintan de gris bajo la tarjeta: así se distingue de
   un vistazo qué tramo del calendario está ocupado sin depender del hover. Antes la celda iba en
   blanco y solo se veía gris al pasar el mouse, porque el hover la volvía translúcida y dejaba
   asomar el panel de la zona; ese tono es el que ahora queda fijo. Se califica con
   `.timeline-day-cell` porque más abajo esa clase vuelve a fijar fondo blanco y, a igual
   especificidad, ganaría por venir después. El hover baja un punto más para seguir dando
   respuesta. */
.timeline-day-cell.vehicle-cell[b-y2qwvwjtw1] {
    background: #f1f5f9;
    min-height: 88px;
    height: auto;
    vertical-align: middle;
}

.team-schedule-row:hover > .timeline-day-cell.vehicle-cell[b-y2qwvwjtw1] {
    background: #e9eef4;
}

/* A blocked calendar interval is a real cut in one OT, not the end of one card and the start of
   another. Only the external edges keep the regular cell margin. */
.vehicle-cell.vehicle-fragment-cut-start[b-y2qwvwjtw1] {
    padding-left: 0;
}

.vehicle-cell.vehicle-fragment-cut-end[b-y2qwvwjtw1] {
    padding-right: 0;
}

.empty-day-cell[b-y2qwvwjtw1] {
    background: #ffffff;
    position: relative;
    padding: 0 !important;
}

/* Un día ya vivido no es un bloqueo del taller, es historia: se atenúa lo justo para que no invite a
   soltar nada, pero sin el rayado ni el cartel del día cerrado, porque las órdenes que ya tenía
   planeadas siguen siendo lo que se viene a mirar. */
.empty-day-cell.past-day-cell[b-y2qwvwjtw1] {
    background: #fbfcfe;
    cursor: not-allowed;
}

.sunday-cell[b-y2qwvwjtw1] {
    background: #fafafa;
}

.holiday-cell[b-y2qwvwjtw1] {
    background: rgba(245, 158, 11, 0.04);
}

/* Guías de Soltado para Día Completo (AM) vs Medio Día (PM) */
.half-day-drop-guides[b-y2qwvwjtw1] {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: all;
}

.half-drop-slot[b-y2qwvwjtw1] {
    flex: 1;
    height: 100%;
    transition: all 0.15s ease;
    cursor: copy;
}

.half-drop-slot.slot-am[b-y2qwvwjtw1] {
    border-right: 1px dashed transparent;
}

.half-drop-slot.slot-pm[b-y2qwvwjtw1] {
    border-left: 1px dashed transparent;
}

.empty-day-cell:hover .half-drop-slot.slot-am[b-y2qwvwjtw1] {
    border-right-color: #e2e8f0;
}

.half-drop-slot.slot-active[b-y2qwvwjtw1] {
    background: rgba(2, 132, 199, 0.25) !important;
    border: 2px dashed #0284c7 !important;
    box-shadow: inset 0 0 0 1.5px #0284c7, 0 0 8px rgba(2, 132, 199, 0.35) !important;
    border-radius: 6px;
}

/* Offset de Medio Día en Tarjeta */
.vehicle-cell.half-day-offset .vehicle-capsule-card[b-y2qwvwjtw1] {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Tag de Jornada (1 día vs ½ día) */
.capsule-schedule-time-tag[b-y2qwvwjtw1] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.2px;
    line-height: 1.2;
    transition: all 0.15s ease;
}

.capsule-schedule-time-tag.tag-full-day[b-y2qwvwjtw1] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.capsule-schedule-time-tag.tag-full-day:hover[b-y2qwvwjtw1] {
    background: #0284c7;
    color: #ffffff;
}

.capsule-schedule-time-tag.tag-half-day[b-y2qwvwjtw1] {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.capsule-schedule-time-tag.tag-half-day:hover[b-y2qwvwjtw1] {
    background: #f59e0b;
    color: #ffffff;
}

/* La cápsula de vehículo (.vehicle-capsule-card y .capsule-*) es común al JSCB y al JPCB y vive en
   wwwroot/css/board-vehicle-card.css. Aquí solo queda lo que este tablero le añade. */
.drop-cell-active[b-y2qwvwjtw1] {
    background: #e0f2fe !important;
    outline: 2px dashed #0284c7 !important;
    outline-offset: -2px;
}

/* Tramo sin plan que sigue abierto: termina justo en «ahora» y sigue después. Se pinta igual que
   un corte (.has-cut-end): lado recto y borde gris segmentado, que es lo que en todos los
   tableros significa «el chip continúa en otra parte». Antes llevaba una raya negra propia y se
   leía como un estado distinto. */
.capsule-phase-segment.phase-open-end[b-y2qwvwjtw1] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.vehicle-capsule-card.is-open-ended:not(.has-cut-end)[b-y2qwvwjtw1] {
    padding-right: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 2.5px dashed #94a3b8 !important;
}

/* La tarjeta «Sin equipo» reúne lo que está en manos de alguien que no pertenece a ningún equipo.
   No es un equipo: no se edita, no se borra y no recibe arrastres. */
.jscb-team-card.is-unassigned-team .team-meta-box[b-y2qwvwjtw1] {
    border-style: dashed;
    opacity: .92;
}

.phase-segment-label[b-y2qwvwjtw1] {
    display: none !important;
    position: relative;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    padding: 0 4px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-branch-badge[b-y2qwvwjtw1] {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    padding: 0 3px;
    height: 12px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.75);
    color: #38bdf8;
    letter-spacing: -0.5px;
    pointer-events: none;
}

.jscb-branch-badge.parallel[b-y2qwvwjtw1] {
    color: #a855f7;
}

.jscb-branch-badge.dependency[b-y2qwvwjtw1] {
    color: #f59e0b;
}

/* Espacio en Blanco / Gap Slot con Animación Fluida */
.phase-gap-slot[b-y2qwvwjtw1] {
    background: #ffffff !important;
    border: 1.5px dashed #cbd5e1;
    box-shadow: none !important;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    position: relative;
    user-select: none;
    animation: gapSlotPopIn-b-y2qwvwjtw1 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    transition: flex 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                min-width 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.15s ease, 
                border-color 0.15s ease, 
                box-shadow 0.15s ease;
}

.phase-gap-slot:hover[b-y2qwvwjtw1] {
    border-color: #0284c7 !important;
    background: #f8fafc !important;
}

.phase-gap-slot:active[b-y2qwvwjtw1] {
    cursor: grabbing;
}

.gap-remove-symbol[b-y2qwvwjtw1] {
    font-size: 14px;
    font-weight: 900;
    color: #94a3b8;
    line-height: 1;
    user-select: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.gap-remove-symbol:hover[b-y2qwvwjtw1] {
    color: #ef4444;
    background: #fee2e2;
}

@keyframes gapSlotPopIn-b-y2qwvwjtw1 {
    from {
        opacity: 0;
        transform: scaleX(0.4);
    }
to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.gap-slot-dot[b-y2qwvwjtw1] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
}

.phase-drop-active[b-y2qwvwjtw1] {
    outline: 2px dashed #0284c7 !important;
    outline-offset: 1px;
    background: #e0f2fe !important;
    filter: brightness(1.05);
}

.phase-segment-label[b-y2qwvwjtw1] {
    display: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.9);
    letter-spacing: -0.1px;
}

/* ── Botones Estandarizados Estilo Navegación ── */
.nav-std-btn[b-y2qwvwjtw1] {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-std-btn:hover[b-y2qwvwjtw1] {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
}

.nav-std-btn-cyan[b-y2qwvwjtw1] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.nav-std-btn-cyan:hover[b-y2qwvwjtw1] {
    background: #0369a1;
    border-color: #0369a1;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
}

.nav-std-btn-secondary[b-y2qwvwjtw1] {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.nav-std-btn-secondary:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
    color: #0284c7;
    border-color: #38bdf8;
}

.jscb-badge-icon[b-y2qwvwjtw1] {
    width: 44px;
    height: 44px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.jscb-title[b-y2qwvwjtw1] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.jscb-subtitle[b-y2qwvwjtw1] {
    font-size: 12px;
    color: #64748b;
}

.date-month-badge[b-y2qwvwjtw1] {
    background: #f1f5f9;
    color: #0284c7;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid #cbd5e1;
}

/* Grid de 3 Columnas */
.jscb-layout-grid[b-y2qwvwjtw1] {
    display: grid;
    grid-template-columns: 240px 1fr 240px;
    gap: 16px;
    min-height: 0;
    flex: 1;
}

/* 1. Columna de Colas de Espera (Izquierda) */
.jscb-queues-column[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jscb-queue-box[b-y2qwvwjtw1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.jscb-queue-box.collapsed[b-y2qwvwjtw1] {
    padding-bottom: 10px;
}

.queue-header[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    gap: 8px;
    min-height: 34px;
}

.queue-header:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
}

.collapse-icon[b-y2qwvwjtw1] {
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.queue-count[b-y2qwvwjtw1] {
    background: #e0f2fe;
    color: #0284c7;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.queue-cards-list[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 260px;
    padding-top: 8px;
    padding-right: 4px;
}

/* Header y Filtros del Panel Izquierdo de Espera (Estilo Premium Multi-Select) */
.queues-column-header[b-y2qwvwjtw1] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.queue-filter-chips[b-y2qwvwjtw1] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.queue-chip-btn[b-y2qwvwjtw1] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

.queue-chip-btn:hover[b-y2qwvwjtw1] {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.queue-chip-btn.active-chip[b-y2qwvwjtw1] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

.queue-chip-btn .chip-count[b-y2qwvwjtw1] {
    font-size: 9.5px;
    font-weight: 800;
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 8px;
}

.queue-chip-btn.active-chip .chip-count[b-y2qwvwjtw1] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Tarjetas Miniatura con Foto de Vehículo */
.jscb-mini-card[b-y2qwvwjtw1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.jscb-mini-card:hover[b-y2qwvwjtw1] {
    background: #f0f9ff;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
}

.mini-car-photo[b-y2qwvwjtw1] {
    width: 52px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

.mini-car-photo img[b-y2qwvwjtw1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-card-details[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mini-card-top[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-ro[b-y2qwvwjtw1] {
    font-weight: 700;
    font-size: 11px;
    color: #0f172a;
}

.mini-plate[b-y2qwvwjtw1] {
    background: #e0f2fe;
    color: #0284c7;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.mini-card-sub[b-y2qwvwjtw1] {
    font-size: 11px;
    color: #475569;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-card-worker[b-y2qwvwjtw1] {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}

/* 2. Área Central (Tablero por Equipos) */
.jscb-main-center-board[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: auto;
}

.jscb-team-section[b-y2qwvwjtw1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.jscb-team-section.collapsed .jscb-timeline-table-wrapper[b-y2qwvwjtw1] {
    display: none;
}

.team-section-header[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 8px;
}

.team-section-header:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
}

.team-name[b-y2qwvwjtw1] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.team-veh-count[b-y2qwvwjtw1] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.jscb-timeline-table-wrapper[b-y2qwvwjtw1] {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.jscb-timeline-table[b-y2qwvwjtw1] {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
    background: #ffffff;
}

.jscb-timeline-table th[b-y2qwvwjtw1],
.jscb-timeline-table td[b-y2qwvwjtw1] {
    border: 1px solid #e2e8f0;
    padding: 3px 2px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

.col-workers-header[b-y2qwvwjtw1] {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    box-sizing: border-box;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 11px;
    text-align: left !important;
    padding-left: 12px !important;
    font-weight: 700;
}

.col-day-header[b-y2qwvwjtw1] {
    background: #f8fafc;
    font-size: 11px;
    color: #475569;
    position: relative;
}

.col-day-header.today-header[b-y2qwvwjtw1] {
    background: #e0f2fe;
    border: 1.5px solid #0284c7 !important;
    border-left: 1.5px solid #0284c7 !important;
    border-right: 1.5px solid #0284c7 !important;
    border-top: 1.5px solid #0284c7 !important;
    border-bottom: 1.5px solid #0284c7 !important;
    color: #0284c7;
    box-shadow: inset 0 0 0 1.5px #0284c7;
    position: relative;
    z-index: 2;
}

.today-pill[b-y2qwvwjtw1] {
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.col-day-header.holiday-header[b-y2qwvwjtw1] {
    /* Gris, como el resto del bloqueo: un día que el taller no abre no es una alerta. El borde
       izquierdo se declara aparte porque la cabecera solo traía derecho e inferior, y sin él el
       marco del domingo quedaba abierto por ese lado. */
    background: #f1f5f9;
    border-color: #cbd5e1 !important;
    border-left: 1px solid #cbd5e1 !important;
    color: #64748b;
}

.col-day-header.past-day-header[b-y2qwvwjtw1] {
    background: #f8fafc;
    color: #94a3b8;
}

.past-day-header .day-simple-name[b-y2qwvwjtw1],
.past-day-header .day-simple-num[b-y2qwvwjtw1] {
    color: #94a3b8;
}

.holiday-pill[b-y2qwvwjtw1] {
    background: #dc2626;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

.timeline-day-cell.holiday-day-cell[b-y2qwvwjtw1] {
    /* Gris, no rojo: un día que el taller no abre no es una alerta ni un error, es una zona donde
       no se puede planear. En rojo competía por atención con los vehículos detenidos, que sí piden
       intervención. */
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
    position: relative;
}

.holiday-cell-pattern[b-y2qwvwjtw1] {
    /* Posicionado sobre toda la celda en vez de `height: 100%`: dentro de un `td` esa altura no se
       resuelve y el rótulo quedaba pegado arriba, a distinta altura en cada fila. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
}

.holiday-blocked-tag[b-y2qwvwjtw1] {
    /* Sin recuadro: el rayado de fondo ya dice que la zona está bloqueada, y el marco lo repetía.
       En dos líneas —candado y «NO» arriba, «DISPONIBLE» abajo— porque en una sola no cabía en el
       ancho de una celda de día y se recortaba. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    background: transparent;
    border: 0;
    padding: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.25;
}

.holiday-num-pill[b-y2qwvwjtw1] {
    background: #94a3b8 !important;
    color: #ffffff !important;
    border-radius: 9999px;
    padding: 1px 6px;
    font-weight: 800;
}

.timeline-day-cell.past-day-cell[b-y2qwvwjtw1],
.timeline-hour-cell.past-day-cell[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #f1f5f9 6px,
        #f1f5f9 12px
    ) !important;
    cursor: not-allowed !important;
    opacity: 0.75;
    position: relative;
}

.past-day-header-icon[b-y2qwvwjtw1] {
    color: #ef4444;
    font-size: 9.5px;
}

.past-cell-pattern[b-y2qwvwjtw1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    pointer-events: none;
}

.past-blocked-tag[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Celda vacía de un día de margen: rayada, sin guías de soltado. */
.timeline-day-cell.margin-day-cell[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
    cursor: not-allowed !important;
    position: relative;
}

.margin-cell-pattern[b-y2qwvwjtw1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    pointer-events: none;
}

.margin-blocked-tag[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* La orden que cae entera en el margen: rayado detrás y cápsula atenuada. */
.timeline-day-cell.vehicle-cell.is-outside-period[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
}

.vehicle-capsule-card.is-outside-period[b-y2qwvwjtw1] {
    opacity: 0.72;
    filter: saturate(0.6);
    cursor: default;
}

.vehicle-capsule-card.is-outside-period:hover[b-y2qwvwjtw1] {
    opacity: 0.95;
    filter: none;
}

/* Celda vacía fuera de jornada: mismo rayado y rótulo que un día pasado, sin guía de soltado. */
.timeline-hour-cell.off-shift-cell[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
    cursor: not-allowed !important;
    position: relative;
}

.timeline-hour-cell.off-shift-cell:hover[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
}

.off-shift-cell-pattern[b-y2qwvwjtw1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    pointer-events: none;
}

.off-shift-blocked-tag[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* La celda con cápsula que toca esas horas conserva el rayado detrás; la cápsula se atenúa. */
.timeline-hour-cell.vehicle-cell.is-off-shift[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #eef2f7 6px,
        #eef2f7 12px
    ) !important;
}

.vehicle-capsule-card.is-off-shift[b-y2qwvwjtw1] {
    opacity: 0.72;
    filter: saturate(0.6);
    cursor: default;
}

.vehicle-capsule-card.is-off-shift:hover[b-y2qwvwjtw1] {
    opacity: 0.95;
    filter: none;
}

.vehicle-drop-subslot.is-off-shift[b-y2qwvwjtw1] {
    pointer-events: none;
}

.timeline-day-cell.sunday-day-cell[b-y2qwvwjtw1] {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 6px,
        #f1f5f9 6px,
        #f1f5f9 12px
    ) !important;
    opacity: 0.85;
    position: relative;
}

.sunday-blocked-tag[b-y2qwvwjtw1] {
    font-size: 8.5px;
    font-weight: 800;
    color: #64748b;
    background: rgba(241, 245, 249, 0.95);
    border: 1px solid #cbd5e1;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.timeline-day-cell.drop-target-active[b-y2qwvwjtw1] {
    background: rgba(2, 132, 199, 0.18) !important;
    outline: 2px dashed #0284c7 !important;
    outline-offset: -2px;
    cursor: copy !important;
    transition: all 0.15s ease;
}

.drop-hint-slot[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #0284c7;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 4px 6px;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.2);
    animation: pulse-drop-b-y2qwvwjtw1 1s infinite alternate;
}

@keyframes pulse-drop-b-y2qwvwjtw1 {
    0% { transform: scale(0.96); }
100% { transform: scale(1.04); }
}

.day-name[b-y2qwvwjtw1] {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

.day-num[b-y2qwvwjtw1] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.phase-label-cell[b-y2qwvwjtw1] {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box;
    padding: 6px 10px !important;
    text-align: left !important;
    background: #ffffff;
    vertical-align: middle;
    height: 60px;
}

.combined-team-phases-cell[b-y2qwvwjtw1] {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box;
    padding: 8px !important;
    background: #f8fafc !important;
    vertical-align: middle !important;
    border-right: 2px solid #cbd5e1 !important;
}

.team-phases-unified-container[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    justify-content: space-between;
}

.team-phase-item[b-y2qwvwjtw1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.team-phase-item:hover[b-y2qwvwjtw1] {
    border-color: #cbd5e1;
    background: #fdfdfd;
}

.team-phase-item .phase-indicator[b-y2qwvwjtw1] {
    height: 32px;
    width: 5px;
    border-radius: 3px;
    margin-top: 1px;
    flex-shrink: 0;
}

.phase-info-block[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.col-workers-header[b-y2qwvwjtw1] {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 11px;
    text-align: left !important;
    padding-left: 12px !important;
    font-weight: 700;
}

.phase-label-content[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.phase-indicator[b-y2qwvwjtw1] {
    width: 6px;
    height: 38px;
    border-radius: 3px;
    flex-shrink: 0;
}

.phase-indicator.green[b-y2qwvwjtw1] {
    background: #10b981;
}

.phase-indicator.yellow[b-y2qwvwjtw1] {
    background: #f59e0b;
}

.phase-indicator.pink[b-y2qwvwjtw1] {
    background: #ec4899;
}

.phase-indicator.cyan[b-y2qwvwjtw1] {
    background: #06b6d4;
}

.card-info-box[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.card-header-top[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ro-badge[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 800;
    color: #1e293b;
}

.plate-badge[b-y2qwvwjtw1] {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.model-title[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-workers-list[b-y2qwvwjtw1] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.worker-pill[b-y2qwvwjtw1] {
    font-size: 9px;
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #475569;
    padding: 1px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.timeline-day-cell[b-y2qwvwjtw1] {
    height: 60px;
    padding: 3px 4px;
    vertical-align: middle;
    background: #ffffff;
}

/* Barras de Etapa Continuas sin Espacios Estilo Toyota JSCB */
.vehicle-stream-row .timeline-day-cell.p-0[b-y2qwvwjtw1] {
    padding: 2px 1px !important;
}

.stage-bar[b-y2qwvwjtw1] {
    height: 54px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    gap: 0;
    overflow: hidden;
}

.promised-date-subtext[b-y2qwvwjtw1] {
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1px 5px;
    border-radius: 4px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.stage-bar:hover[b-y2qwvwjtw1] {
    transform: scale(1.02);
    filter: brightness(1.06);
    z-index: 5;
}

.stage-bar-car-photo[b-y2qwvwjtw1] {
    width: 54px !important;
    height: 100% !important;
    min-width: 54px !important;
    min-height: 100% !important;
    max-width: 54px !important;
    max-height: 100% !important;
    border-radius: 7px 0 0 7px !important;
    overflow: hidden !important;
    flex-shrink: 0;
    background: #0f172a;
    border: none !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    display: block !important;
    margin: 0 !important;
}

.stage-bar.compact-bar[b-y2qwvwjtw1] {
    padding-right: 2px !important;
}

.stage-bar.compact-bar .stage-bar-car-photo[b-y2qwvwjtw1] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
}

.stage-bar.compact-bar .stage-bar-green-info[b-y2qwvwjtw1] {
    padding: 2px 5px !important;
}

.stage-bar.compact-bar .stage-bar-ro-title[b-y2qwvwjtw1] {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.stage-bar.compact-bar .stage-bar-subtext[b-y2qwvwjtw1] {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

.stage-bar.compact-bar .promised-date-badge[b-y2qwvwjtw1] {
    font-size: 8px !important;
    padding: 1px 3px !important;
}

.stage-bar-car-photo img[b-y2qwvwjtw1],
.phase-label-cell img[b-y2qwvwjtw1] {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.stage-bar-green-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.25;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    padding: 4px 8px 4px 8px;
}

.stage-bar-ro-title[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.1px;
}

.stage-bar-subtext[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.promised-date-badge[b-y2qwvwjtw1] {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Actividades Pasadas (Completadas / Transcurridas): 100% Sólidas con el color de su fase */
.stage-bar.completed[b-y2qwvwjtw1] {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Actividad Actual (En Proceso): Fondo del MISMO color de la etapa en versión clara (SIN GRIS) */
.stage-bar.in-progress[b-y2qwvwjtw1] {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.stage-bar.in-progress.green-bar[b-y2qwvwjtw1] {
    background: #10b981 !important;
    border: 1.5px solid #059669 !important;
}

.stage-bar.in-progress.yellow-bar[b-y2qwvwjtw1] {
    background: #f59e0b !important;
    border: 1.5px solid #d97706 !important;
}

.stage-bar.in-progress.pink-bar[b-y2qwvwjtw1] {
    background: #ec4899 !important;
    border: 1.5px solid #db2777 !important;
}

.stage-bar.in-progress.cyan-bar[b-y2qwvwjtw1] {
    background: #06b6d4 !important;
    border: 1.5px solid #0891b2 !important;
}

.stage-bar.in-progress.delay-red-bar[b-y2qwvwjtw1] {
    background: #ef4444 !important;
    border: 1.5px solid #dc2626 !important;
}

.stage-bar.in-progress .stage-bar-clean-text[b-y2qwvwjtw1],
.stage-bar.in-progress .stage-bar-ro-title[b-y2qwvwjtw1],
.stage-bar.in-progress .stage-bar-subtext[b-y2qwvwjtw1] {
    color: #ffffff !important;
    font-weight: 800;
}

.stage-bar-clean-text[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.stage-bar-title-line[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.stage-bar-ro[b-y2qwvwjtw1] {
    font-weight: 800;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.stage-bar-model[b-y2qwvwjtw1] {
    font-weight: 600;
    font-size: 11px;
    color: #ffffff;
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-bar-code[b-y2qwvwjtw1] {
    font-weight: 700;
    font-size: 10px;
    color: #ffffff;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stage-bar-right-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
}

.variance-pill[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.variance-pill.excess[b-y2qwvwjtw1] {
    background: #ffe4e6;
    color: #991b1b;
}

.variance-pill.early[b-y2qwvwjtw1] {
    background: #dcfce7;
    color: #166534;
}

.stage-bar-time[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.95;
    white-space: nowrap;
}

.green-bar[b-y2qwvwjtw1],
.stage-bar-green[b-y2qwvwjtw1],
.stage-bar.green-bar[b-y2qwvwjtw1],
.stage-bar.stage-bar-green[b-y2qwvwjtw1] {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.yellow-bar[b-y2qwvwjtw1],
.stage-bar-yellow[b-y2qwvwjtw1],
.stage-bar.yellow-bar[b-y2qwvwjtw1],
.stage-bar.stage-bar-yellow[b-y2qwvwjtw1] {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

.pink-bar[b-y2qwvwjtw1],
.stage-bar-pink[b-y2qwvwjtw1],
.stage-bar.pink-bar[b-y2qwvwjtw1],
.stage-bar.stage-bar-pink[b-y2qwvwjtw1] {
    background: #ec4899 !important;
    color: #ffffff !important;
    border-color: #db2777 !important;
}

.cyan-bar[b-y2qwvwjtw1],
.stage-bar-cyan[b-y2qwvwjtw1],
.stage-bar.cyan-bar[b-y2qwvwjtw1],
.stage-bar.stage-bar-cyan[b-y2qwvwjtw1] {
    background: #06b6d4 !important;
    color: #ffffff !important;
    border-color: #0891b2 !important;
}

.delay-red-bar[b-y2qwvwjtw1],
.stage-bar-striped-red[b-y2qwvwjtw1],
.stage-bar.delay-red-bar[b-y2qwvwjtw1],
.stage-bar.stage-bar-striped-red[b-y2qwvwjtw1] {
    background-color: #ef4444 !important;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.35) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.35) 75%,
            transparent 75%,
            transparent) !important;
    background-size: 20px 20px !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

/* 3. Columna Derecha (Leyenda, Inspección y Alertas Rojas) */
.jscb-right-column[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jscb-legend-box[b-y2qwvwjtw1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.legend-title[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.legend-item[b-y2qwvwjtw1] {
    font-size: 10px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-weight: 600;
}

.legend-dot[b-y2qwvwjtw1] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-dot.green[b-y2qwvwjtw1] {
    background: #10b981;
}

.legend-dot.yellow[b-y2qwvwjtw1] {
    background: #f59e0b;
}

.legend-dot.pink[b-y2qwvwjtw1] {
    background: #ec4899;
}

.legend-dot.cyan[b-y2qwvwjtw1] {
    background: #38bdf8;
}

/* Leyenda de Estado de Avance y Convención */
.legend-subtitle[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.legend-divider[b-y2qwvwjtw1] {
    height: 1px;
    background: #e2e8f0;
}

.legend-status-item[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #334155;
}

.legend-status-text strong[b-y2qwvwjtw1] {
    color: #1e293b;
}

.status-preview-bar[b-y2qwvwjtw1] {
    width: 28px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Previsualización: Transcurrido / Pasado */
.status-preview-bar.completed-preview[b-y2qwvwjtw1] {
    background-color: #10b981;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    background-size: 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Previsualización: Transcurriendo ahora */
.status-preview-bar.in-progress-preview[b-y2qwvwjtw1] {
    background: #cffafe;
    border: 1px solid #06b6d4;
}

.status-preview-bar.in-progress-preview[b-y2qwvwjtw1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60%;
    background-color: #06b6d4;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    background-size: 10px 10px;
}

/* Cajas de Alertas Rojas (No-Shows & Job Stoppages) */
.jscb-red-alert-box[b-y2qwvwjtw1] {
    background: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}

.jscb-red-alert-box.collapsed[b-y2qwvwjtw1] {
    padding-bottom: 10px;
}

.red-alert-header[b-y2qwvwjtw1] {
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    min-height: 34px;
}

.red-count[b-y2qwvwjtw1] {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    flex-shrink: 0;
}

.alert-card[b-y2qwvwjtw1] {
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #ef4444 !important;
}

.text-danger-subtle[b-y2qwvwjtw1] {
    color: #dc2626;
    font-weight: 600;
}

.fade-in[b-y2qwvwjtw1] {
    animation: fadeIn-b-y2qwvwjtw1 0.2s ease-in;
}

@keyframes fadeIn-b-y2qwvwjtw1 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vehicle-drop-subslot[b-y2qwvwjtw1] {
    transition: background-color 0.15s ease;
}

.vehicle-drop-subslot.drop-subslot-active[b-y2qwvwjtw1] {
    background-color: rgba(56, 189, 248, 0.22) !important;
    outline: 2px dashed #0284c7;
    outline-offset: -2px;
}

.jscb-continuation-pill[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: #001f3f;
    color: #38bdf8;
    border: 1px solid #38bdf844;
    letter-spacing: -0.3px;
}

.jscb-continuation-pill.next[b-y2qwvwjtw1] {
    color: #e91e63;
    border-color: #e91e6344;
}
/* Board-level notices: an action in flight and a failure that must not be silent. */
.jscb-board-empty[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.jscb-empty-action[b-y2qwvwjtw1],
.jscb-board-state button[b-y2qwvwjtw1] {
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid #d81b84;
    background: #d81b84;
    color: #ffffff;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jscb-empty-action:hover[b-y2qwvwjtw1],
.jscb-board-state button:hover[b-y2qwvwjtw1] {
    background: #b81570;
    border-color: #b81570;
    box-shadow: 0 3px 8px rgba(216, 27, 132, 0.22);
}

.jscb-board-state button:disabled[b-y2qwvwjtw1] {
    cursor: not-allowed;
    opacity: 0.6;
}

.jscb-empty-action:focus-visible[b-y2qwvwjtw1],
.jscb-board-state button:focus-visible[b-y2qwvwjtw1],
.team-action-btn:focus-visible[b-y2qwvwjtw1] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.jscb-board-state[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
}

.jscb-board-state.is-error[b-y2qwvwjtw1] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.jscb-board-empty svg[b-y2qwvwjtw1] {
    width: 28px;
    height: 28px;
    color: #64748b;
}

.team-member-summary[b-y2qwvwjtw1] {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-member-details[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #64748b;
    font-size: 10px;
}

.team-member-details > span:not(.team-more-members)[b-y2qwvwjtw1] {
    display: grid;
    min-width: 0;
}

.team-member-details strong[b-y2qwvwjtw1] {
    overflow: hidden;
    color: #334155;
    font-size: 10.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-member-details small[b-y2qwvwjtw1],
.team-more-members[b-y2qwvwjtw1] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-capacity-panel[b-y2qwvwjtw1],
.team-capacity-metrics[b-y2qwvwjtw1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.team-capacity-panel > div[b-y2qwvwjtw1],
.team-capacity-metrics > span[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 4px 5px;
    border-radius: 6px;
    background: #f1f5f9;
}

.team-capacity-panel small[b-y2qwvwjtw1],
.team-capacity-metrics small[b-y2qwvwjtw1] {
    overflow: hidden;
    color: #64748b;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-capacity-panel strong[b-y2qwvwjtw1],
.team-capacity-metrics strong[b-y2qwvwjtw1] {
    color: #1e293b;
    font-size: 10.5px;
    line-height: 1.25;
}

.team-capacity-panel .is-free[b-y2qwvwjtw1],
.team-capacity-metrics .is-free[b-y2qwvwjtw1] {
    background: #ecfdf5;
}

.team-capacity-panel .is-free strong[b-y2qwvwjtw1],
.team-capacity-metrics .is-free strong[b-y2qwvwjtw1] {
    color: #166534;
}

.team-capacity-panel .is-over[b-y2qwvwjtw1],
.team-capacity-metrics .is-over[b-y2qwvwjtw1] {
    background: #fef2f2;
}

.team-capacity-panel .is-over strong[b-y2qwvwjtw1],
.team-capacity-metrics .is-over strong[b-y2qwvwjtw1] {
    color: #b91c1c;
}

.team-capacity-status[b-y2qwvwjtw1] {
    color: #475569;
    font-size: 9px;
    line-height: 1.3;
}

.team-capacity-status.needs-attention[b-y2qwvwjtw1] {
    color: #9a3412;
    font-weight: 700;
}

/* ── Resumen del equipo cerrado ──────────────────────────────────────────────
   Una sola línea bajo la cabecera: las caras del equipo, los nombres y, a la derecha, la capacidad
   del periodo. Antes el nombre se repetía dentro de la columna de técnicos de 189 px y las cifras
   vivían en otra celda, con un hueco muerto de media pantalla entre ambas. */
.team-collapsed-line[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.team-collapsed-line .team-avatar-stack-container[b-y2qwvwjtw1] {
    flex: 0 0 auto;
    width: auto;
    padding-left: 0;
}

/* Los nombres se quedan con el ancho sobrante: es lo que empuja las cifras al lado derecho y lo que
   deja de recortar «Eden Niñ…» habiendo sitio de sobra. */
.team-collapsed-line .team-member-summary[b-y2qwvwjtw1] {
    flex: 1 1 auto;
}

.team-collapsed-line .team-capacity-metrics[b-y2qwvwjtw1] {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(88px, auto));
}

.team-collapsed-line .team-capacity-status[b-y2qwvwjtw1] {
    flex: 0 0 auto;
    max-width: 220px;
}

@media (max-width: 900px) {
    .jscb-board-state[b-y2qwvwjtw1] {
        align-items: stretch;
        flex-direction: column;
    }

    .jscb-board-state button[b-y2qwvwjtw1] {
        justify-content: center;
        width: 100%;
    }

    .team-collapsed-line[b-y2qwvwjtw1] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jscb-empty-action[b-y2qwvwjtw1],
    .jscb-board-state button[b-y2qwvwjtw1] {
        transition-duration: 0.01ms;
    }
}

/* ── Carga del equipo ────────────────────────────────────────────────────────
   La barra es la capacidad disponible del equipo en el rango visible; lo relleno es lo ya
   comprometido. Sin jornada configurada no hay capacidad que repartir y la barra queda vacía,
   que es justo lo que hay que ver: no es que no haya trabajo, es que falta configurar turnos. */
/* Alto, radios y color copiados de `.operarios-progress-track` / `.operarios-progress-bar`, la barra
   de equipos de la cabecera: son la misma medida —qué parte de una capacidad está usada— y hasta
   ahora se dibujaban distinto, una en verde plano de 7 px y esta en degradado azul de 5 px. */
.team-load-bar[b-y2qwvwjtw1] {
    position: relative !important;
    height: 7px !important;
    /* El hueco de abajo separa la barra de sus cifras: con 1 px, «19 h comprometidas» y «181 h libres
       de 200» se leían pegadas al relleno y parecían parte de él. */
    margin: 1px 0 5px 0 !important;
    border-radius: 4px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
    cursor: help !important;
}

.team-load-fill[b-y2qwvwjtw1] {
    height: 100% !important;
    border-radius: 3px !important;
    background: #10b981 !important;
    transition: width .25s ease !important;
}

/* El equipo comprometido por encima de su capacidad conserva su aviso, en plano como el resto: es
   un dato que la barra de la cabecera no tiene y que se perdería al igualar los dos colores. */
.team-load-bar.is-over .team-load-fill[b-y2qwvwjtw1] {
    background: #ea580c !important;
}

.team-load-legend[b-y2qwvwjtw1] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    color: #64748b !important;
}

.team-load-legend strong[b-y2qwvwjtw1] {
    font-weight: 700 !important;
    color: #334155 !important;
}

.team-load-legend .is-free strong[b-y2qwvwjtw1] { color: #15803d !important; }
.team-load-legend .is-over strong[b-y2qwvwjtw1] { color: #c2410c !important; }

/* Horas planificadas de cada grupo de proceso, junto a su color en la leyenda. Un grupo sin trabajo
   se muestra apagado: la diferencia entre «no hay carga» y «hay carga» se lee de un vistazo. */
.jscb-legend-hours[b-y2qwvwjtw1] {
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Capacidad instalada del grupo, detrás de las horas planificadas: se lee «12/48 h» como doce
   planificadas sobre cuarenta y ocho disponibles. Si lo planificado supera la capacidad, el par
   entero pasa a ámbar. */
.jscb-legend-capacity[b-y2qwvwjtw1] {
    font-weight: 600 !important;
    opacity: .72 !important;
}

/* Planificado por encima de la capacidad: el par de horas se separa del color de la fase para que
   el exceso se vea sin tener que comparar las dos cifras. */
.jscb-legend-hours.is-over[b-y2qwvwjtw1] {
    padding: 1px 7px !important;
    margin: -1px -4px -1px 0 !important;
    border-radius: 999px !important;
    background: #fef3c7 !important;
    color: #b45309 !important;
}

/* ── Carga por cargo dentro del equipo ───────────────────────────────────────
   «Al equipo le quedan 149 h libres» no dice dónde están esas horas: puede haber holgura de sobra
   en mecánica y latonería estar al tope. Este desglose lo resuelve, cargo por cargo. */
.team-role-load[b-y2qwvwjtw1] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 6px !important;
}

.team-role-row[b-y2qwvwjtw1] {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
}

.team-role-name[b-y2qwvwjtw1] {
    /* Se prefiere el salto de línea al recorte: el cargo completo dice de qué oficio son esas
       horas, y cortado con puntos suspensivos deja de distinguir «Técnico Latonero» de «Técnico
       Latonero, Técnico Mecánico», que son capacidades distintas. */
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.team-role-hours[b-y2qwvwjtw1] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    color: #94a3b8 !important;
}

.team-role-hours strong[b-y2qwvwjtw1] {
    font-weight: 700 !important;
    color: #334155 !important;
}

.team-role-row.is-over .team-role-hours strong[b-y2qwvwjtw1] { color: #c2410c !important; }

/* ── Encabezado fijo y tarjetas por equipo ─────────────────────────────────
   La grilla es el único dueño del scroll. Esto mantiene sincronizados el eje temporal,
   la columna fija y todas las tarjetas de equipo durante el desplazamiento. */
.jscb-unified-table > thead > tr > th[b-y2qwvwjtw1] {
    position: sticky !important;
    top: 0;
    z-index: 20;
    background-clip: padding-box;
    box-shadow: 0 1px 0 #cbd5e1;
    /* El encabezado se cierra por su cuenta ahora que el contenedor no lo enmarca. */
    border-top: 1px solid #e2e8f0;
}

.jscb-unified-table > thead > tr > th:first-child[b-y2qwvwjtw1] {
    border-left: 1px solid #e2e8f0;
    border-top-left-radius: 10px;
}

.jscb-unified-table > thead > tr > th:last-child[b-y2qwvwjtw1] {
    border-right: 1px solid #e2e8f0;
    border-top-right-radius: 10px;
}

.jscb-unified-table > thead > tr > .col-tecnico-header[b-y2qwvwjtw1] {
    z-index: 22;
}

.jscb-unified-table > thead > tr > .col-day-header.today-header[b-y2qwvwjtw1] {
    z-index: 21;
}

.jscb-team-card-gap > tr > td[b-y2qwvwjtw1] {
    /* Fila que separa una tarjeta de equipo de la siguiente. Solo aporta el hueco, y lo deja
       transparente para que por él se vea el panel de la zona: es el `gap` de JPCB entre sus
       tarjetas de equipo, hecho con la única pieza que una tabla admite entre dos `tbody`. */
    height: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.jscb-team-card > .team-schedule-row > td[b-y2qwvwjtw1] {
    background-clip: padding-box;
}

.jscb-team-card > .team-schedule-row:first-child > td[b-y2qwvwjtw1] {
    border-top: 1px solid #cbd5e1;
}

.jscb-team-card > .team-schedule-row:last-child > td[b-y2qwvwjtw1] {
    border-bottom: 1px solid #cbd5e1;
}

.jscb-team-card > .team-schedule-row > td:last-child[b-y2qwvwjtw1] {
    border-right: 1px solid #cbd5e1;
}

.jscb-team-card > .team-schedule-row:first-child > td:last-child[b-y2qwvwjtw1] {
    border-top-right-radius: 10px;
}

.jscb-team-card > .team-schedule-row:last-child > td:last-child[b-y2qwvwjtw1] {
    border-bottom-right-radius: 10px;
}

.jscb-team-card .col-tecnico-cell[b-y2qwvwjtw1] {
    border-left: 1px solid #cbd5e1;
    border-radius: 10px 0 0 10px;
    box-shadow: 2px 1px 6px rgba(15, 23, 42, 0.06);
}

.jscb-team-card.is-collapsed .team-collapsed-row[b-y2qwvwjtw1],
.jscb-team-card.is-collapsed .team-collapsed-row > td[b-y2qwvwjtw1] {
    background: #f8fafc;
}

/* La cabecera cierra la tarjeta por arriba y esta línea por abajo: sin sus bordes laterales, el
   resumen se salía del recuadro que dibuja la cabecera. El relleno superior es corto a propósito,
   para que las caras queden pegadas al nombre y no a media altura de la tarjeta. */
.jscb-team-card.is-collapsed .team-collapsed-cell[b-y2qwvwjtw1] {
    padding: 4px 14px 8px 14px;
    border-left: 1px solid #cbd5e1;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0 0 10px 10px;
    box-shadow: 2px 1px 6px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

/* ── Tarjeta estrecha (solo lo propio del JSCB) ─────────────────────────────
   Los niveles por ancho de la cápsula viven en css/board-vehicle-card.css (compartido con el
   JPCB). Aquí solo lo que el JSCB añade: el badge «sin planear» se retira junto con la OT. */
@container board-card (max-width: 319px) {
    .vehicle-capsule-card .jscb-virtual-badge[b-y2qwvwjtw1] {
        display: none;
    }
}

/* ── Menú de acciones de la tarjeta ──────────────────────────────────────── */
.vehicle-actions-backdrop[b-y2qwvwjtw1] {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: transparent;
}

.vehicle-capsule-card.is-menu-open[b-y2qwvwjtw1] {
    border-color: #7dd3fc;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.2);
}

.vehicle-actions-menu[b-y2qwvwjtw1] {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 74;
    display: flex;
    min-width: 156px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
    flex-direction: column;
}

.vehicle-actions-menu-floating[b-y2qwvwjtw1] {
    top: 48px;
    right: 8px;
    z-index: 74;
}

.vehicle-actions-menu button[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #334d6e;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vehicle-actions-menu button:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
    color: #0369a1;
}

.vehicle-actions-menu button.is-destructive[b-y2qwvwjtw1],
.vehicle-actions-menu button.is-danger[b-y2qwvwjtw1] {
    color: #b91c1c;
}

.vehicle-actions-menu button.is-destructive:hover[b-y2qwvwjtw1],
.vehicle-actions-menu button.is-danger:hover[b-y2qwvwjtw1] {
    background: #fef2f2;
    color: #991b1b;
}

.vehicle-actions-menu button svg[b-y2qwvwjtw1] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.vehicle-actions-menu button:focus-visible[b-y2qwvwjtw1] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* El hueco permanece punteado. Su acción secundaria aparece solo cuando el usuario lo señala. */
.phase-gap-slot .gap-remove-symbol[b-y2qwvwjtw1] {
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.phase-gap-slot:hover .gap-remove-symbol[b-y2qwvwjtw1] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .vehicle-capsule-card[b-y2qwvwjtw1],
    .capsule-duration-text[b-y2qwvwjtw1],
    .vehicle-actions-trigger[b-y2qwvwjtw1],
    .vehicle-actions-menu button[b-y2qwvwjtw1],
    .phase-gap-slot .gap-remove-symbol[b-y2qwvwjtw1] {
        transition-duration: 0.01ms !important;
    }
}


/* ── El rótulo de celda bloqueada se queda dentro de su celda ──────────────
   «NO PROGRAMABLE» y «NO DISPONIBLE» se salían por los costados y se leían encima de las celdas
   vecinas: el rótulo se medía por su texto mientras la columna, con `table-layout: fixed`, se
   estrecha sin avisar. Ahora el ancho lo manda la celda en cada escalón —celda, caja, rótulo y
   línea—, el cuerpo de letra encoge junto con la columna, y lo que aun así sobre se recorta con
   puntos suspensivos. El motivo completo sigue en el tooltip de la celda. */
.timeline-day-cell.past-day-cell[b-y2qwvwjtw1],
.timeline-hour-cell.past-day-cell[b-y2qwvwjtw1],
.timeline-day-cell.holiday-day-cell[b-y2qwvwjtw1],
.timeline-hour-cell.holiday-day-cell[b-y2qwvwjtw1],
.timeline-hour-cell.off-shift-cell[b-y2qwvwjtw1],
.timeline-day-cell.margin-day-cell[b-y2qwvwjtw1] {
    overflow: hidden !important;
}

.holiday-cell-pattern[b-y2qwvwjtw1],
.past-cell-pattern[b-y2qwvwjtw1],
.off-shift-cell-pattern[b-y2qwvwjtw1],
.margin-cell-pattern[b-y2qwvwjtw1] {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    container-type: inline-size;
}

.holiday-blocked-tag[b-y2qwvwjtw1],
.past-blocked-tag[b-y2qwvwjtw1],
.off-shift-blocked-tag[b-y2qwvwjtw1],
.margin-blocked-tag[b-y2qwvwjtw1] {
    /* Ancho de la celda, no del texto: sin esto el `max-width: 100%` de las líneas no tenía contra
       qué medirse y el rótulo crecía hasta donde le pedía la palabra más larga. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* El cuerpo de letra sigue al ancho de la columna: en las anchas se lee igual que antes y en las
   estrechas encoge en lugar de desbordarse. Si el navegador no resuelve `cqi` se queda en el
   máximo, que es el tamaño que ya tenía. */
.past-blocked-tag[b-y2qwvwjtw1],
.off-shift-blocked-tag[b-y2qwvwjtw1],
.margin-blocked-tag[b-y2qwvwjtw1] {
    font-size: clamp(6.5px, 10cqi, 8.5px) !important;
}

.holiday-blocked-tag[b-y2qwvwjtw1] {
    font-size: clamp(6.5px, 10cqi, 9px) !important;
}

.holiday-blocked-line[b-y2qwvwjtw1],
.past-blocked-line[b-y2qwvwjtw1],
.off-shift-blocked-line[b-y2qwvwjtw1],
.margin-blocked-line[b-y2qwvwjtw1] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* La línea que es solo palabra vuelve a ser caja de bloque: `text-overflow` no actúa sobre una
   caja flex, así que ahí el recorte quedaba a hachazo, sin puntos suspensivos. */
.holiday-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
.past-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
.off-shift-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
.margin-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
}

/* Por debajo de ~56 px ni al cuerpo de letra más pequeño cabe la palabra, y recortada quedaría en
   tres o cuatro letras que no dicen nada: en columnas así de estrechas (vista de mes, semanas
   largas) se deja solo el icono —candado o prohibido— y el motivo completo sigue en el tooltip. */
@container (max-width: 56px) {
    .holiday-blocked-tag .blocked-word[b-y2qwvwjtw1],
    .past-blocked-tag .blocked-word[b-y2qwvwjtw1],
    .off-shift-blocked-tag .blocked-word[b-y2qwvwjtw1],
    .margin-blocked-tag .blocked-word[b-y2qwvwjtw1],
    .holiday-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
    .past-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
    .off-shift-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1],
    .margin-blocked-line.blocked-word:not(.blocked-icon-line)[b-y2qwvwjtw1] {
        display: none !important;
    }
}

/* ── Cabecera del equipo, a lo ancho de la tarjeta ───────────────────────────
   El nombre del equipo y su barra de carga vivían dentro de la columna de técnicos, encajonados en
   189 px. Ahora ocupan una fila propia que cruza toda la tabla: la barra de carga se lee de un
   vistazo y el nombre deja de recortarse. */
.team-header-cell[b-y2qwvwjtw1] {
    /* Aire de la cabecera, medido de borde interno a caja de texto: arriba había 6.5 px (2 px de
       relleno más los 4.5 px que aporta el centrado del nombre en su fila de 24 px) y abajo 2 px.
       Ahora son 10 px por ambos lados —la mitad más de lo que había arriba, repetida debajo de las
       horas comprometidas—, así que el relleno superior se queda en 5.5 px y el inferior en 10 px. */
    padding: 5.5px 14px 10px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* La cabecera ya separa por sí misma; el bloque interior deja de añadir su propia línea. */
.team-header-cell .team-meta-box[b-y2qwvwjtw1] {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* ── La cabecera del equipo entra dentro del marco de la tarjeta ─────────────
   El borde superior lo dibujaba la primera fila de agenda. Al pasar la cabecera a una fila propia,
   esa dejó de ser la primera y el nombre y la barra quedaron fuera del recuadro. Ahora es la
   cabecera quien cierra la tarjeta por arriba. */
.jscb-team-card > .team-header-row > td[b-y2qwvwjtw1] {
    border-top: 1px solid #cbd5e1 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 2px -1px 6px rgba(15, 23, 42, 0.06) !important;
}

/* Con cabecera encima, la columna de técnicos solo redondea su esquina inferior izquierda. */
.jscb-team-card.is-expanded .col-tecnico-cell[b-y2qwvwjtw1] {
    border-radius: 0 0 0 10px !important;
}

/* El icono del día cerrado acompaña al gris de su cabecera en lugar de marcar alerta. */
.holiday-header-icon[b-y2qwvwjtw1] {
    color: #94a3b8 !important;
}

/* El bloque de la cabecera ya no añade relleno inferior: la celda que lo contiene fija el suyo, y
   los dos sumaban una franja vacía bajo la leyenda de horas. */
.team-header-cell .team-meta-box[b-y2qwvwjtw1] {
    padding-bottom: 0 !important;
}

.team-header-cell .team-load-legend[b-y2qwvwjtw1] {
    line-height: 1.1 !important;
}

/* En la cabecera a lo ancho, el nombre ya no está limitado a los 155 px que imponía la columna de
   técnicos: ese tope venía de cuando vivía dentro de ella, y era lo que seguía recortando
   «Team 2 - Prueba de asi…» pese a haber sitio de sobra. */
.team-header-cell .team-meta-name[b-y2qwvwjtw1] {
    max-width: none !important;
}

/* ── Barras de desplazamiento ocultas ────────────────────────────────────────
   El tablero se desplaza igual con rueda, gesto o arrastre; lo que se retira es solo el indicador
   visible, que cruzaba el calendario cada vez que alguien lo movía. Se cubren los tres motores:
   `scrollbar-width` (Firefox), `-ms-overflow-style` (Edge antiguo) y el pseudo-elemento de WebKit. */
.custom-scroll[b-y2qwvwjtw1],
.jscb-board-container[b-y2qwvwjtw1],
.jscb-unified-table-wrapper[b-y2qwvwjtw1],
.jscb-top-legend-bar[b-y2qwvwjtw1] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.custom-scroll[b-y2qwvwjtw1]::-webkit-scrollbar,
.jscb-board-container[b-y2qwvwjtw1]::-webkit-scrollbar,
.jscb-unified-table-wrapper[b-y2qwvwjtw1]::-webkit-scrollbar,
.jscb-top-legend-bar[b-y2qwvwjtw1]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Lo que marcaba la altura de la cabecera no era el relleno sino los botones de acción: con
   `min-height: 36px` la fila medía 36 px mientras el nombre mide 13, y ese sobrante se repartía
   arriba y abajo del texto. En la cabecera del equipo se ajustan al tamaño del icono; siguen
   midiendo 24 px, suficiente para pulsarlos con comodidad. */
.team-header-cell .team-action-btn[b-y2qwvwjtw1] {
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 2px !important;
}

.team-header-cell .team-meta-box > div:first-child[b-y2qwvwjtw1] {
    min-height: 0 !important;
}

/* Indicadores de la barra (advertencia, concluido, proceso actual) en una sola fila pegada al
   arranque del segmento. El `margin-right: auto` absorbe el espacio del flex centrado, de modo que
   con uno o con varios quedan a la misma distancia del borde. */
.jscb-phase-indicators[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding-left: 7px;
    margin-right: auto;
    line-height: 1;
}

/* Triángulo de advertencia plano: amarillo con signo oscuro, sin círculo ni degradado. */
.jscb-phase-warning-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
    transition: transform 0.18s ease, filter 0.18s ease;
}

.jscb-phase-warning-badge:hover[b-y2qwvwjtw1] {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.jscb-phase-warning-badge svg[b-y2qwvwjtw1] {
    width: 18px;
    height: 18px;
    display: block;
}

.jscb-phase-status-icon.done[b-y2qwvwjtw1] {
    font-size: 13px;
    color: #ffffff;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

/* Pin de "proceso actual", en blanco. Solo estilo; la condición (isActivePhase) vive en el razor. */
.jscb-current-process-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.jscb-current-process-badge i[b-y2qwvwjtw1] {
    color: inherit;
}

/* Estilos para Mejora 1 y 4 (Listado individual de tecnicos) */
.team-workers-list[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.team-worker-row[b-y2qwvwjtw1] {
    padding: 4px 6px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    justify-content: space-between;
    align-items: center;
}
.team-worker-row:last-child[b-y2qwvwjtw1] {
    border-bottom: none;
}
.team-worker-row.is-over .worker-hours[b-y2qwvwjtw1] {
    color: #ef4444;
}
/* Nombre, cargo y horas apilados. `min-width: 0` es lo que deja que el nombre recorte con
   elipsis según el ancho que quede, en vez de un tope fijo que no sabía cuánto ocupaba el badge. */
.worker-identity[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.worker-name[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.worker-role[b-y2qwvwjtw1] {
    font-size: 9px;
    color: #94a3b8;
}
.worker-hours[b-y2qwvwjtw1] {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.2;
    color: #475569;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.worker-hours-sep[b-y2qwvwjtw1] {
    margin: 0 2px;
    color: #cbd5e1;
}
.team-worker-row.is-over .worker-hours-sep[b-y2qwvwjtw1] {
    color: rgba(239, 68, 68, 0.5);
}

/* Badge de turno: la letra dice cuál es, el color si está en curso. TA en azul, TB en ámbar
   —la misma pareja que usa el drawer de equipos— y gris cuando el turno no está activo ahora. */
.worker-shift-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.2);
}
/* Un color por turno, por su orden en el tablero (`GetShiftOrdinal`): el primero azul, el segundo
   ámbar —la misma pareja que usa el drawer de equipos— y luego violeta, verde, rosa y verde
   azulado. Si hay más turnos que colores, la paleta da la vuelta. */
.worker-shift-badge.is-shift-1.is-on[b-y2qwvwjtw1] {
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.3);
}
.worker-shift-badge.is-shift-2.is-on[b-y2qwvwjtw1] {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.32);
}
.worker-shift-badge.is-shift-3.is-on[b-y2qwvwjtw1] {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.3);
}
.worker-shift-badge.is-shift-4.is-on[b-y2qwvwjtw1] {
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
    border-color: rgba(5, 150, 105, 0.3);
}
.worker-shift-badge.is-shift-5.is-on[b-y2qwvwjtw1] {
    background: rgba(190, 24, 93, 0.12);
    color: #be185d;
    border-color: rgba(190, 24, 93, 0.3);
}
.worker-shift-badge.is-shift-6.is-on[b-y2qwvwjtw1] {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.3);
}
.worker-shift-badge.is-off[b-y2qwvwjtw1] {
    background: rgba(100, 116, 139, 0.08);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.2);
}

/* ===== Mini-ficha del proceso (al tocar una barra) =====
   Fija en el viewport: la cápsula recorta lo que sobresale, así que la ficha se pinta fuera de
   ella con las coordenadas que mide el módulo JS. Misma paleta clara que el menú de acciones. */
.capsule-phase-segment.is-popover-target[b-y2qwvwjtw1] {
    /* Anillo por dentro: la pista recorta su desbordamiento y un outline exterior no se vería. */
    box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px rgba(2, 132, 199, 0.95) !important;
    filter: brightness(0.97);
}

.jscb-phase-popover[b-y2qwvwjtw1] {
    position: fixed;
    z-index: 80;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
    color: #1e293b;
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    outline: none;
    cursor: default;
    animation: jscb-phase-popover-in-b-y2qwvwjtw1 0.16s ease-out;
}

@keyframes jscb-phase-popover-in-b-y2qwvwjtw1 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.jscb-phase-popover.opens-upward[b-y2qwvwjtw1] {
    animation-name: jscb-phase-popover-in-up-b-y2qwvwjtw1;
}

@keyframes jscb-phase-popover-in-up-b-y2qwvwjtw1 {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Caret hacia la barra. Se pinta con un pseudo-elemento rotado; `--jscb-popover-caret-left` lo
   alinea con el arranque de la barra aunque la ficha se haya corrido para no salirse de pantalla. */
.jscb-phase-popover[b-y2qwvwjtw1]::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--jscb-popover-caret-left, 40px);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
    z-index: 1;
}

.jscb-phase-popover.opens-upward[b-y2qwvwjtw1]::before {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jscb-phase-popover-head[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.jscb-phase-popover-title[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.jscb-phase-popover-kicker[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8898aa;
}

.jscb-phase-popover-name[b-y2qwvwjtw1] {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-phase-popover-chip[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #f1f5f9;
    color: #64748b;
}

.jscb-phase-popover-chip-dot[b-y2qwvwjtw1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.jscb-phase-popover-chip-dot.is-live[b-y2qwvwjtw1] {
    animation: jscb-phase-popover-pulse-b-y2qwvwjtw1 1.4s ease-in-out infinite;
}

@keyframes jscb-phase-popover-pulse-b-y2qwvwjtw1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.jscb-phase-popover-chip.is-dispatched[b-y2qwvwjtw1] { background: #e0f2fe; color: #0284c7; }
.jscb-phase-popover-chip.is-in-progress[b-y2qwvwjtw1] { background: #fef3c7; color: #b45309; }
.jscb-phase-popover-chip.is-done[b-y2qwvwjtw1] { background: #dcfce7; color: #15803d; }
.jscb-phase-popover-chip.is-cancelled[b-y2qwvwjtw1] { background: #fee2e2; color: #b91c1c; }

.jscb-phase-popover-edit[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jscb-phase-popover-edit svg[b-y2qwvwjtw1] {
    width: 15px;
    height: 15px;
}

.jscb-phase-popover-edit:hover[b-y2qwvwjtw1] {
    background: #fdf2f8;
    border-color: #fbcfe8;
    color: #d81b84;
}

.jscb-phase-popover-facts[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px 14px 6px 16px;
}

.jscb-phase-popover-fact[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.jscb-phase-popover-fact > svg[b-y2qwvwjtw1] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #8898aa;
}

.jscb-phase-popover-fact dt[b-y2qwvwjtw1] {
    flex: 0 0 72px;
    margin: 0;
    color: #64748b;
    font-weight: 400;
}

.jscb-phase-popover-fact dd[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
}

.jscb-phase-popover-fact dd strong[b-y2qwvwjtw1] {
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-phase-popover-fact dd small[b-y2qwvwjtw1] {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-phase-popover-fact dd em[b-y2qwvwjtw1] {
    font-style: italic;
    color: #94a3b8;
}

.jscb-phase-popover-avatar[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #334d6e;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    object-fit: cover;
}

.jscb-phase-popover-sub[b-y2qwvwjtw1] {
    margin: 0;
    padding: 0 16px 6px;
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ciclo de vida del bloque: Planeado → Entregado → En trabajo → Concluido. Responde de un vistazo
   "¿ya se lo entregaron? ¿ya empezó?" sin leer las fechas. */
.jscb-phase-popover-steps[b-y2qwvwjtw1] {
    display: flex;
    align-items: flex-start;
    margin: 4px 12px 10px;
    padding: 0;
    list-style: none;
}

.jscb-phase-popover-steps li[b-y2qwvwjtw1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.jscb-phase-popover-steps li:not(:last-child)[b-y2qwvwjtw1]::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
}

.jscb-phase-popover-step-node[b-y2qwvwjtw1] {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    box-sizing: border-box;
}

.jscb-phase-popover-step-label[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

/* Lo recorrido se pinta del color de la barra tocada (--jscb-phase-color, puesto en línea por el
   razor): así la ficha se lee como parte de esa barra y no como un widget ajeno. */
.jscb-phase-popover-steps li.is-reached .jscb-phase-popover-step-node[b-y2qwvwjtw1] {
    background: var(--jscb-phase-color, #0284c7);
    border-color: var(--jscb-phase-color, #0284c7);
}

.jscb-phase-popover-steps li.is-reached .jscb-phase-popover-step-label[b-y2qwvwjtw1] {
    color: var(--jscb-phase-color, #0284c7);
}

.jscb-phase-popover-steps li.is-reached:not(.is-current):not(:last-child)[b-y2qwvwjtw1]::after {
    background: var(--jscb-phase-color, #0284c7);
}

.jscb-phase-popover-steps li.is-current .jscb-phase-popover-step-node[b-y2qwvwjtw1] {
    background: #ffffff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jscb-phase-color, #0284c7) 25%, transparent);
}

.jscb-phase-popover-foot[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 9px 16px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.jscb-phase-popover-link[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #0369a1;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.jscb-phase-popover-link svg[b-y2qwvwjtw1] {
    width: 14px;
    height: 14px;
}

.jscb-phase-popover-link:hover[b-y2qwvwjtw1] {
    background: #e0f2fe;
}

.jscb-phase-popover-hint[b-y2qwvwjtw1] {
    font-size: 11px;
    color: #94a3b8;
}

.jscb-phase-popover-edit:focus-visible[b-y2qwvwjtw1],
.jscb-phase-popover-link:focus-visible[b-y2qwvwjtw1] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .jscb-phase-popover[b-y2qwvwjtw1],
    .jscb-phase-popover-chip-dot.is-live[b-y2qwvwjtw1] {
        animation: none;
    }
}

/* ── Proyecciones Virtuales JSCB (OTs activas en DCB sin agenda formal) ── */
.vehicle-capsule-card.jscb-virtual-scheduled[b-y2qwvwjtw1] {
    min-height: 86px;
    border: 1.5px dashed rgba(255, 255, 255, 0.75) !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.08) 8px,
        rgba(0, 0, 0, 0.04) 8px,
        rgba(0, 0, 0, 0.04) 16px
    ) !important;
    opacity: 0.94;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.vehicle-capsule-card.jscb-virtual-scheduled:hover[b-y2qwvwjtw1] {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

.jscb-virtual-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 8px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.jscb-virtual-dot[b-y2qwvwjtw1] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.jscb-virtual-text[b-y2qwvwjtw1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capsule-phase-segment.jscb-phase-virtual[b-y2qwvwjtw1] {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.25) 4px,
        transparent 4px,
        transparent 8px
    ) !important;
}

/* --- Cell Scheduling Loading Card --- */
.cell-scheduling-card[b-y2qwvwjtw1] {
    position: absolute;
    inset: 4px;
    z-index: 25;
    background: #ffffff;
    border: 1.5px solid #0284c7;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
    display: flex;
    align-items: center;
    padding: 6px 10px;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: border-box;
    animation: scheduling-card-pop-b-y2qwvwjtw1 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.scheduling-card-pulse[b-y2qwvwjtw1] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: scheduling-shimmer-b-y2qwvwjtw1 1.5s infinite;
    pointer-events: none;
}

.scheduling-card-body[b-y2qwvwjtw1] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.scheduling-card-left[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.scheduling-card-spinner[b-y2qwvwjtw1] {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(2, 132, 199, 0.2);
    border-top-color: #FE00E4;
    border-radius: 50%;
    flex-shrink: 0;
    animation: scheduling-spin-b-y2qwvwjtw1 0.75s linear infinite;
}

.scheduling-card-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scheduling-card-plate[b-y2qwvwjtw1] {
    font-size: 14px;
    font-weight: 800;
    color: #334d6e;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheduling-card-ot[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.scheduling-card-badge[b-y2qwvwjtw1] {
    flex-shrink: 0;
}

.scheduling-card-status[b-y2qwvwjtw1] {
    font-size: 10px;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@keyframes scheduling-spin-b-y2qwvwjtw1 {
    to { transform: rotate(360deg); }
}

@keyframes scheduling-card-pop-b-y2qwvwjtw1 {
    0% { transform: scale(0.96); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scheduling-shimmer-b-y2qwvwjtw1 {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   Visualización por Bahía (JSCB Bay View)
   ========================================================================== */

.col-bay-cell[b-y2qwvwjtw1] {
    background: #ffffff;
    vertical-align: top;
    padding: 8px 10px 10px 10px;
}

.jscb-bay-card-inner[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.jscb-bay-header-top[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.jscb-bay-code-badge[b-y2qwvwjtw1] {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    color: #0f172a;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.jscb-bay-name-text[b-y2qwvwjtw1] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.jscb-bay-workers-list[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jscb-bay-tech-pill[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.jscb-bay-tech-pill:hover[b-y2qwvwjtw1] {
    background-color: #f1f5f9;
}

.jscb-bay-tech-avatar[b-y2qwvwjtw1] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
}

.jscb-bay-tech-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.jscb-bay-tech-name[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.jscb-bay-tech-role[b-y2qwvwjtw1] {
    font-size: 9.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.jscb-bay-no-tech[b-y2qwvwjtw1] {
    padding: 4px 2px;
}

.jscb-bay-unassigned-badge[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}

.jscb-bay-unassigned-title[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.jscb-bay-unassigned-sub[b-y2qwvwjtw1] {
    font-size: 9.5px;
    color: #94a3b8;
    line-height: 1.2;
}

/* Paginación progresiva de bahías */
.bay-pagination-row[b-y2qwvwjtw1] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.bay-pagination-cell[b-y2qwvwjtw1] {
    padding: 6px 12px;
    vertical-align: middle;
}

.bay-pagination-content[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bay-pagination-text[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.bay-pagination-actions[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-bay-paginate[b-y2qwvwjtw1] {
    font-size: 10.5px;
    font-weight: 600;
    color: #0284c7;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-bay-paginate:hover[b-y2qwvwjtw1] {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
}

.btn-bay-collapse[b-y2qwvwjtw1] {
    color: #64748b;
}

.btn-bay-collapse:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

/* ==========================================================================
   Visualización por Persona (JSCB Person View)
   ========================================================================== */

.col-person-cell[b-y2qwvwjtw1] {
    background: #ffffff;
    vertical-align: top;
    padding: 8px 10px 10px 10px;
}

.jscb-person-card-inner[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.jscb-person-header-top[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.jscb-person-avatar[b-y2qwvwjtw1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
}

.jscb-person-header-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.jscb-person-name[b-y2qwvwjtw1] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.jscb-person-role[b-y2qwvwjtw1] {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.jscb-person-team-badge[b-y2qwvwjtw1] {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-unassigned-person-badge[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}

.jscb-unassigned-person-badge .badge[b-y2qwvwjtw1] {
    align-self: flex-start;
}

.jscb-person-unassigned-sub[b-y2qwvwjtw1] {
    font-size: 9.5px;
    color: #94a3b8;
    line-height: 1.2;
}

/* Dropdown selector de agrupación en barra superior */
.jscb-grouping-menu[b-y2qwvwjtw1] {
    min-width: 165px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.jscb-grouping-menu .dropdown-item[b-y2qwvwjtw1] {
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.jscb-grouping-menu .dropdown-item:hover[b-y2qwvwjtw1] {
    background: #f1f5f9;
    color: #0f172a;
}

.jscb-grouping-menu .dropdown-item.active[b-y2qwvwjtw1] {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

/* Fila cabecera de bahía (separador sticky/destacado de bahía) */
.bay-header-row[b-y2qwvwjtw1] {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
}

.bay-header-cell[b-y2qwvwjtw1] {
    padding: 8px 16px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6; /* Acento azul suave */
}

.bay-header-content[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.bay-header-left[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jscb-bay-badge-gold[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #8a6100;
    background: #fff8e1;
    border: 1px solid #f0c14b;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bay-header-name[b-y2qwvwjtw1] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.bay-header-specialty[b-y2qwvwjtw1] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Barra de capacidad similar a JPCB */
.bay-header-capacity-container[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 240px;
}

.jscb-bay-load-bar[b-y2qwvwjtw1] {
    width: 100%;
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.jscb-bay-load-fill[b-y2qwvwjtw1] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.jscb-bay-load-fill.is-normal[b-y2qwvwjtw1] {
    background: #10b981; /* Verde esmeralda */
}

.jscb-bay-load-fill.is-warning[b-y2qwvwjtw1] {
    background: #f59e0b; /* Ámbar */
}

.jscb-bay-load-fill.is-overload[b-y2qwvwjtw1] {
    background: #ef4444; /* Rojo */
}

.jscb-bay-load-legend[b-y2qwvwjtw1] {
    font-size: 10.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bay-header-stats[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
}

.bay-header-stat-divider[b-y2qwvwjtw1] {
    color: #94a3b8;
}

/* Celda de técnico dentro de la bahía */
.col-bay-worker-cell[b-y2qwvwjtw1] {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    vertical-align: middle;
    padding: 6px 10px;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0;
    transition: background 0.15s ease;
}

.col-bay-worker-cell[data-drop-target][b-y2qwvwjtw1] {
    cursor: pointer;
}

.col-bay-worker-cell.drop-cell-active[b-y2qwvwjtw1] {
    background: #e0f2fe !important;
    outline: 2px dashed #0284c7 !important;
    outline-offset: -2px;
}

.jscb-bay-worker-cell-inner[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.jscb-bay-tech-avatar[b-y2qwvwjtw1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

.jscb-bay-tech-avatar--initials[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border: none;
}

.jscb-bay-unassigned-avatar[b-y2qwvwjtw1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    border: 1px dashed #cbd5e1;
}

.jscb-bay-tech-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.jscb-bay-tech-name[b-y2qwvwjtw1] {
    font-size: 11.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.jscb-bay-tech-role[b-y2qwvwjtw1] {
    font-size: 9.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.jscb-bay-tech-hours-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9.5px;
    font-weight: 600;
    color: #0284c7;
    margin-top: 2px;
    line-height: 1;
}

.jscb-bay-tech-hours-badge .hours-sep[b-y2qwvwjtw1] {
    color: #94a3b8;
    font-weight: 400;
    margin: 0 1px;
}

.jscb-bay-tech-hours-badge.is-over[b-y2qwvwjtw1] {
    color: #dc2626;
}

.jscb-bay-tech-hours-badge.is-over strong[b-y2qwvwjtw1] {
    color: #b91c1c;
}

.bay-worker-row.is-unassigned-row[b-y2qwvwjtw1] {
    background-color: #fafbfc;
}

/* Badge discreto de múltiples órdenes en el mismo día */
.jscb-multi-order-badge[b-y2qwvwjtw1] {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 6;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

.jscb-multi-order-badge:hover[b-y2qwvwjtw1] {
    background: #0369a1;
    border-color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.5);
}

.jscb-multi-order-badge:active[b-y2qwvwjtw1] {
    transform: scale(0.95);
}

/* Fila de técnico estilizada y nítida en vista por bahía (~78px) */
.bay-worker-row[b-y2qwvwjtw1] {
    height: 78px;
    min-height: 78px;
}

.bay-worker-row .timeline-day-cell[b-y2qwvwjtw1] {
    height: 78px;
    min-height: 78px;
    padding: 3px 4px;
    vertical-align: middle;
}

.bay-worker-row .timeline-day-cell.vehicle-cell[b-y2qwvwjtw1] {
    min-height: 78px;
    height: auto;
}

.bay-worker-row .col-bay-worker-cell[b-y2qwvwjtw1] {
    height: 78px;
    min-height: 78px;
    padding: 6px 10px;
    vertical-align: middle;
}

.bay-worker-row .vehicle-capsule-card[b-y2qwvwjtw1] {
    min-height: 72px;
    height: 72px;
    max-height: none;
    margin: 0;
    padding: 3px 6px;
    gap: 3px;
    border-radius: 10px;
}

.bay-worker-row .vehicle-capsule-card .capsule-top-row[b-y2qwvwjtw1] {
    min-height: 30px;
    height: 30px;
}

.bay-worker-row .vehicle-capsule-card .capsule-car-thumb-wrap[b-y2qwvwjtw1] {
    width: 34px;
    height: 30px;
    border-radius: 6px;
}

.bay-worker-row .vehicle-capsule-card .capsule-traffic-status-indicator[b-y2qwvwjtw1] {
    height: 30px;
    width: 6px;
    border-radius: 3px;
}

.bay-worker-row .vehicle-capsule-card .capsule-phase-track[b-y2qwvwjtw1] {
    height: 26px;
    min-height: 26px;
}

.bay-worker-row .vehicle-capsule-card .capsule-phase-segment[b-y2qwvwjtw1] {
    height: 26px;
    line-height: 26px;
    font-size: 9px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   JSCB CONCURRENT VEHICLES MODAL (+N BADGE)
   ═════════════════════════════════════════════════════════════════════════════ */

/* Modal Overlay & Container */
.jscb-concurrent-modal-overlay[b-y2qwvwjtw1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: jscbConcurrentFadeIn-b-y2qwvwjtw1 0.2s ease-out;
}

@keyframes jscbConcurrentFadeIn-b-y2qwvwjtw1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.jscb-concurrent-modal-card[b-y2qwvwjtw1] {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    width: 680px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    animation: jscbConcurrentScaleUp-b-y2qwvwjtw1 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jscbConcurrentScaleUp-b-y2qwvwjtw1 {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header */
.jscb-concurrent-modal-header[b-y2qwvwjtw1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #001f3f 0%, #002b55 100%);
    border-bottom: 2px solid #e91e63;
    flex-shrink: 0;
}

.jscb-concurrent-header-left[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jscb-concurrent-icon-box[b-y2qwvwjtw1] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(233, 30, 99, 0.18);
    border: 1px solid rgba(233, 30, 99, 0.4);
    color: #f43f5e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.jscb-concurrent-title-group[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jscb-concurrent-title[b-y2qwvwjtw1] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.jscb-concurrent-meta-row[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.jscb-concurrent-date[b-y2qwvwjtw1] {
    color: #38bdf8;
    font-weight: 500;
}

.jscb-concurrent-meta-sep[b-y2qwvwjtw1] {
    color: #475569;
}

.jscb-concurrent-worker[b-y2qwvwjtw1] {
    color: #cbd5e1;
    font-weight: 500;
}

.jscb-concurrent-close-btn[b-y2qwvwjtw1] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jscb-concurrent-close-btn:hover[b-y2qwvwjtw1] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Body */
.jscb-concurrent-modal-body[b-y2qwvwjtw1] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
    background: #090e17;
}

.jscb-concurrent-cards-list[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual Card */
.jscb-concurrent-card[b-y2qwvwjtw1] {
    background: #131d2e;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    cursor: default;
    transition: all 0.18s ease-in-out;
    gap: 8px;
}

.jscb-concurrent-card.is-reassigning[b-y2qwvwjtw1] {
    border-color: rgba(56, 189, 248, 0.4);
    background: #152238;
}

.jscb-concurrent-card:hover[b-y2qwvwjtw1] {
    background: #172437;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.jscb-concurrent-card-main[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.jscb-concurrent-card-left[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.jscb-concurrent-thumb-wrap[b-y2qwvwjtw1] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #1e293b;
    border: 1px solid #334155;
    flex-shrink: 0;
}

.jscb-concurrent-thumb[b-y2qwvwjtw1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jscb-concurrent-status-dot[b-y2qwvwjtw1] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #0f172a;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.jscb-concurrent-card-info[b-y2qwvwjtw1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.jscb-concurrent-card-topline[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jscb-concurrent-plate[b-y2qwvwjtw1] {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.02em;
}

.jscb-concurrent-model[b-y2qwvwjtw1] {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-concurrent-card-details[b-y2qwvwjtw1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.jscb-concurrent-detail-badge[b-y2qwvwjtw1] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.jscb-concurrent-detail-badge.ot[b-y2qwvwjtw1] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.jscb-concurrent-detail-badge.promise[b-y2qwvwjtw1] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.jscb-concurrent-detail-badge.process[b-y2qwvwjtw1] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.jscb-concurrent-detail-badge.hours[b-y2qwvwjtw1] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.jscb-concurrent-card-right[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.jscb-concurrent-reassign-toggle-btn[b-y2qwvwjtw1] {
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.08);
    transition: all 0.15s ease;
    cursor: pointer;
}

.jscb-concurrent-reassign-toggle-btn:hover[b-y2qwvwjtw1] {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

.jscb-concurrent-reassign-toggle-btn.active[b-y2qwvwjtw1] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.jscb-concurrent-select-btn[b-y2qwvwjtw1] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.jscb-concurrent-select-btn:hover[b-y2qwvwjtw1] {
    background: #0369a1;
    color: #ffffff;
    transform: translateX(2px);
}

/* Selector Desplegable de Reasignación de Día */
.jscb-reassign-day-selector[b-y2qwvwjtw1] {
    background: #0b1320;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 2px;
    animation: jscbReassignSlideDown-b-y2qwvwjtw1 0.18s ease-out;
    cursor: default;
}

@keyframes jscbReassignSlideDown-b-y2qwvwjtw1 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Barra de Navegación Multisemana */
.jscb-reassign-week-nav[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.btn-week-nav[b-y2qwvwjtw1] {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-week-nav:hover[b-y2qwvwjtw1] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    transform: scale(1.05);
}

.jscb-week-quick-btns[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jscb-week-quick-btn[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.jscb-week-quick-btn:hover[b-y2qwvwjtw1] {
    background: #27364b;
    color: #f1f5f9;
}

.jscb-week-quick-btn.active[b-y2qwvwjtw1] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.4);
}

.jscb-reassign-week-label[b-y2qwvwjtw1] {
    font-size: 11.5px;
    color: #38bdf8;
    font-weight: 600;
    margin-left: 4px;
}

.jscb-reassign-body-row[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.jscb-reassign-pills[b-y2qwvwjtw1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jscb-reassign-pill[b-y2qwvwjtw1] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 10px;
    min-width: 48px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    color: #f1f5f9;
}

.jscb-reassign-pill:hover:not(:disabled)[b-y2qwvwjtw1] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.4);
}

.jscb-reassign-pill:active:not(:disabled)[b-y2qwvwjtw1] {
    transform: scale(0.96);
}

.jscb-reassign-pill.is-current-disabled[b-y2qwvwjtw1] {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.jscb-reassign-pill .pill-day-name[b-y2qwvwjtw1] {
    font-size: 10px;
    text-transform: capitalize;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.1;
}

.jscb-reassign-pill:hover:not(:disabled) .pill-day-name[b-y2qwvwjtw1] {
    color: #e0f2fe;
}

.jscb-reassign-pill .pill-day-num[b-y2qwvwjtw1] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

/* Selector de Fecha Libre */
.jscb-reassign-custom-date[b-y2qwvwjtw1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.jscb-custom-date-label[b-y2qwvwjtw1] {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.jscb-custom-date-input[b-y2qwvwjtw1] {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
    font-size: 11.5px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    max-width: 130px;
    cursor: pointer;
}

.jscb-custom-date-input:focus[b-y2qwvwjtw1] {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
    outline: none;
}

/* Footer */
.jscb-concurrent-modal-footer[b-y2qwvwjtw1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #0f172a;
    border-top: 1px solid #1e293b;
    flex-shrink: 0;
}

.jscb-concurrent-footer-info[b-y2qwvwjtw1] {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.jscb-concurrent-btn-close[b-y2qwvwjtw1] {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 16px;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    transition: all 0.15s ease;
}

.jscb-concurrent-btn-close:hover[b-y2qwvwjtw1] {
    background: #334155;
    color: #ffffff;
}



/* /Pages/Home/Components/Calendar/Components/JscbBoard/JscbScheduleAssignmentModal.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════════════
   JSCB SCHEDULE ASSIGNMENT MODAL (GROUP VS INDIVIDUAL) — SYSTIME PALETTE
   ═════════════════════════════════════════════════════════════════════════════ */

.jscb-modal-overlay[b-jto1smllct] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: jscbModalFadeIn-b-jto1smllct 0.2s ease-out;
}

@keyframes jscbModalFadeIn-b-jto1smllct {
    from { opacity: 0; }
    to { opacity: 1; }
}

.jscb-modal-card[b-jto1smllct] {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    width: 640px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    animation: jscbCardScaleUp-b-jto1smllct 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jscbCardScaleUp-b-jto1smllct {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Header ───────────────────────────────────────────────────────────────── */
.jscb-modal-header[b-jto1smllct] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #001f3f 0%, #002b55 100%);
    border-bottom: 3px solid #e91e63;
    flex-shrink: 0;
}

.jscb-header-info[b-jto1smllct] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.jscb-header-icon[b-jto1smllct] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(233, 30, 99, 0.18);
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.jscb-modal-title[b-jto1smllct] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.jscb-modal-subtitle[b-jto1smllct] {
    margin: 4px 0 0 0;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.35;
}

.jscb-header-badges[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.jscb-badge-plate[b-jto1smllct] {
    background: #dea301;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.jscb-badge-ot[b-jto1smllct] {
    font-size: 11.5px;
    font-weight: 700;
    color: #38bdf8;
}

.jscb-badge-date[b-jto1smllct],
.jscb-badge-team[b-jto1smllct] {
    font-size: 11px;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
}

/* ─── Body ─────────────────────────────────────────────────────────────────── */
.jscb-modal-body[b-jto1smllct] {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    background: #0f172a;
}

/* ─── Mode Selector ───────────────────────────────────────────────────────── */
.jscb-mode-selector[b-jto1smllct] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.jscb-mode-card[b-jto1smllct] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 12px;
    color: #f1f5f9;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.jscb-mode-card:hover[b-jto1smllct] {
    border-color: #64748b;
    background: #253348;
}

.jscb-mode-card.active[b-jto1smllct] {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    box-shadow: 0 0 0 1px #38bdf8;
}

.jscb-mode-icon[b-jto1smllct] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.jscb-mode-icon.group[b-jto1smllct] {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.jscb-mode-icon.individual[b-jto1smllct] {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
}

.jscb-mode-text[b-jto1smllct] {
    flex: 1 1 auto;
    min-width: 0;
}

.jscb-mode-title[b-jto1smllct] {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.jscb-mode-sub[b-jto1smllct] {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-mode-radio[b-jto1smllct] {
    font-size: 16px;
    color: #64748b;
    flex-shrink: 0;
}

.active-icon[b-jto1smllct] {
    color: #38bdf8;
}

/* ─── Group Mode Content ──────────────────────────────────────────────────── */
.jscb-group-content[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jscb-info-banner[b-jto1smllct] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
}

.banner-icon[b-jto1smllct] {
    font-size: 20px;
    color: #38bdf8;
    flex-shrink: 0;
    margin-top: 2px;
}

.banner-body[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.banner-headline[b-jto1smllct] {
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
}

.banner-text[b-jto1smllct] {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

.jscb-team-preview[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-label[b-jto1smllct] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.preview-avatars[b-jto1smllct] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.member-chip[b-jto1smllct] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
}

.chip-avatar-box[b-jto1smllct] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #0284c7 0%, #001f3f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.chip-avatar[b-jto1smllct] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chip-info[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chip-name[b-jto1smllct] {
    font-size: 12px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-role[b-jto1smllct] {
    font-size: 10.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Individual Mode Content ─────────────────────────────────────────────── */
.jscb-individual-content[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jscb-search-filter[b-jto1smllct] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-jto1smllct] {
    position: absolute;
    left: 12px;
    font-size: 13px;
    color: #64748b;
    pointer-events: none;
}

.jscb-search-input[b-jto1smllct] {
    width: 100%;
    padding: 8px 34px 8px 34px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f8fafc;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s ease;
}

.jscb-search-input:focus[b-jto1smllct] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8;
}

.btn-clear-search[b-jto1smllct] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.btn-clear-search:hover[b-jto1smllct] {
    color: #cbd5e1;
}

.jscb-workers-list[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.worker-card[b-jto1smllct] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.worker-card:hover[b-jto1smllct] {
    border-color: #64748b;
    background: #253348;
}

.worker-card.selected[b-jto1smllct] {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    box-shadow: 0 0 0 1px #38bdf8;
}

.worker-avatar[b-jto1smllct] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #0284c7 0%, #001f3f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.worker-avatar img[b-jto1smllct] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-details[b-jto1smllct] {
    flex: 1 1 auto;
    min-width: 0;
}

.worker-name[b-jto1smllct] {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-role[b-jto1smllct] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-shift[b-jto1smllct] {
    font-size: 10.5px;
    color: #38bdf8;
    margin-top: 2px;
}

.worker-check[b-jto1smllct] {
    font-size: 18px;
    flex-shrink: 0;
}

.check-selected[b-jto1smllct] {
    color: #22c55e;
}

.check-unselected[b-jto1smllct] {
    color: #475569;
}

.jscb-empty-workers[b-jto1smllct] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 16px;
    color: #64748b;
    font-size: 13px;
}

.jscb-empty-workers i[b-jto1smllct] {
    font-size: 28px;
}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.jscb-modal-footer[b-jto1smllct] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #0b1120;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.btn-modal-cancel[b-jto1smllct] {
    padding: 9px 18px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: transparent;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-cancel:hover[b-jto1smllct] {
    background: #1e293b;
    color: #ffffff;
}

.btn-modal-confirm[b-jto1smllct] {
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: #e91e63;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
}

.btn-modal-confirm:hover:not(:disabled)[b-jto1smllct] {
    background: #d81b60;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.5);
}

.btn-modal-confirm:disabled[b-jto1smllct] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Pages/Home/Components/Calendar/Components/JscbBoard/JscbSummaryMetricCard.razor.rz.scp.css */
/* Ancho de referencia, no el del contenido: con `auto` cada tarjeta medía lo que le pedía su rótulo
   y la fila salía escalonada. 110 px es el tope que ya tenían las tarjetas de PROC, así que las
   cuatro quedan iguales entre sí y con el resto.

   Ceden hasta 88 px cuando la fila aprieta, y lo hacen las cuatro a la vez porque parten del mismo
   ancho: clavadas a 110 px, en una pantalla estrecha era la tarjeta de operarios la que se comía el
   recorte y sus rótulos acababan unos encima de otros. */
.proc-kpi-card.jscb-summary-metric[b-ds72b61irs] {
    appearance: none;
    flex: 1 1 110px !important;
    width: auto !important;
    min-width: 88px !important;
    max-width: 110px !important;
    min-height: 46px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: #f5f9fa !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font: inherit;
    text-align: left;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.proc-kpi-card.jscb-summary-metric:hover[b-ds72b61irs] {
    transform: none !important;
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.jscb-summary-metric__primary[b-ds72b61irs] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jscb-summary-metric__icon[b-ds72b61irs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.jscb-summary-metric__icon svg[b-ds72b61irs] {
    width: 24px;
    height: 24px;
}

.jscb-summary-metric__number[b-ds72b61irs] {
    color: var(--color-light-text-primary, #1e293b);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1;
}

.jscb-summary-metric__label[b-ds72b61irs] {
    display: block;
    color: var(--color-light-text-secondary, #475569);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desglose de la cifra. Va por debajo del rótulo y en gris: explica el número sin competir con él. */
.jscb-summary-metric__hint[b-ds72b61irs] {
    display: block;
    color: var(--color-light-text-tertiary, #94a3b8);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jscb-summary-metric--warning .jscb-summary-metric__icon[b-ds72b61irs] {
    color: var(--color-accent-secondary, #b45309);
}

.jscb-summary-metric--info .jscb-summary-metric__icon[b-ds72b61irs] {
    color: var(--color-info, #2563eb);
}

.jscb-summary-metric--success .jscb-summary-metric__icon[b-ds72b61irs] {
    color: var(--color-success, #15803d);
}

.jscb-summary-metric--danger .jscb-summary-metric__icon[b-ds72b61irs],
.jscb-summary-metric--danger .jscb-summary-metric__number[b-ds72b61irs] {
    color: var(--color-error, #dc2626);
}

.proc-kpi-card.jscb-summary-metric:focus-visible[b-ds72b61irs] {
    outline: 2px solid var(--color-accent-primary, #d81b84);
    outline-offset: 2px;
}

/* Sin nada que listar: la tarjeta sigue informando, pero no se ofrece al clic. */
.proc-kpi-card.jscb-summary-metric.is-idle[b-ds72b61irs] {
    cursor: default;
    opacity: 0.62;
}
/* /Pages/Home/Components/Calendar/Components/JscbBoard/JscbVehicleTimelineDrawer.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════════════
   JSCB / JPCB VEHICLE TIMELINE DRAWER — ESTILOS MODERNOS Y LÍNEAS DE TIEMPO
   ═════════════════════════════════════════════════════════════════════════════ */

/* Backdrop Transparente con Blur sutil */
.jscb-drawer-backdrop[b-lcn8d9edu7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.jscb-drawer-backdrop.open[b-lcn8d9edu7] {
    opacity: 1;
    pointer-events: auto;
}

/* Panel Emergente Lateral (Drawer) */
.jscb-vehicle-drawer[b-lcn8d9edu7] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 92vw;
    background: #f8fafc;
    z-index: 1060;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px 22px;
    overflow-y: auto;
    color: #0f172a;
    display: flex;
    flex-direction: column;
}

.jscb-vehicle-drawer.open[b-lcn8d9edu7] {
    transform: translateX(0);
}

/* ─── Header Principal ──────────────────────────────────────────────────────── */
.drawer-header-row[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}

.ro-badge-chip[b-lcn8d9edu7] {
    display: inline-flex;
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 14px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

.status-pill[b-lcn8d9edu7] {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: capitalize;
}

.status-pill.status-inprogress[b-lcn8d9edu7],
.status-pill.status-in_progress[b-lcn8d9edu7] {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.status-pill.status-completed[b-lcn8d9edu7],
.status-pill.status-early[b-lcn8d9edu7] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.status-pill.status-stopped[b-lcn8d9edu7],
.status-pill.status-delayed[b-lcn8d9edu7] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.close-drawer-btn[b-lcn8d9edu7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.close-drawer-btn:hover[b-lcn8d9edu7] {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.05);
}

/* ─── Encabezado del Vehículo (Modelo y Placa) ──────────────────────────────── */
.vehicle-heading[b-lcn8d9edu7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.vehicle-model-name[b-lcn8d9edu7] {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.vehicle-plate-badge[b-lcn8d9edu7] {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

/* ─── Tarjetas Generales de Sección ─────────────────────────────────────────── */
.drawer-section-card[b-lcn8d9edu7] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ─── Ficha del Vehículo ────────────────────────────────────────────────────── */
.vehicle-card-thumb-wrap[b-lcn8d9edu7] {
    width: 92px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.vehicle-card-thumb[b-lcn8d9edu7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summary-insurance[b-lcn8d9edu7] {
    font-weight: 700;
    font-size: 12.5px;
    color: #1e293b;
}

.summary-meta-label[b-lcn8d9edu7] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.stage-name-text[b-lcn8d9edu7] {
    font-size: 12.5px;
    color: #0f172a;
    font-weight: 700;
}

.badge-stage-code[b-lcn8d9edu7] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.badge-stage-code.rep[b-lcn8d9edu7] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-stage-code.prep[b-lcn8d9edu7] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-stage-code.paint[b-lcn8d9edu7] {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #fbcfe8;
}

.badge-stage-code.rem[b-lcn8d9edu7] {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.progress-section[b-lcn8d9edu7] {
    border-color: #f1f5f9 !important;
}

.progress-label[b-lcn8d9edu7] {
    color: #475569;
    font-weight: 600;
    font-size: 11.5px;
}

.progress-val-text[b-lcn8d9edu7] {
    color: #059669;
    font-weight: 800;
    font-size: 12.5px;
}

.progress-bar-wrap[b-lcn8d9edu7] {
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill[b-lcn8d9edu7] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.35s ease;
}

/* ─── Banners Divisores de Sección ─────────────────────────────────────────── */
.section-divider-banner[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.section-banner-icon[b-lcn8d9edu7] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.section-banner-text[b-lcn8d9edu7] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.section-banner-title[b-lcn8d9edu7] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.section-banner-sub[b-lcn8d9edu7] {
    font-size: 10.5px;
    opacity: 0.85;
}

/* Tema del Trabajador (Violeta / Indigo) */
.section-divider-banner.worker-theme[b-lcn8d9edu7] {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
    color: #6d28d9;
}

.section-divider-banner.worker-theme .section-banner-icon[b-lcn8d9edu7] {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.section-divider-banner.worker-theme .section-banner-title[b-lcn8d9edu7] {
    color: #5b21b6;
}

.section-divider-banner.worker-theme .section-banner-sub[b-lcn8d9edu7] {
    color: #6d28d9;
}

/* Tema de Línea de Tiempo del Vehículo (Esmeralda / Teal) */
.section-divider-banner.timeline-theme[b-lcn8d9edu7] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: #047857;
}

.section-divider-banner.timeline-theme .section-banner-icon[b-lcn8d9edu7] {
    background: #059669;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.section-divider-banner.timeline-theme .section-banner-title[b-lcn8d9edu7] {
    color: #065f46;
}

.section-divider-banner.timeline-theme .section-banner-sub[b-lcn8d9edu7] {
    color: #047857;
}

/* ─── Ficha del Trabajador (JPCB) ───────────────────────────────────────────── */
.worker-avatar-wrap[b-lcn8d9edu7] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #7c3aed;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
    flex-shrink: 0;
}

.worker-avatar-wrap img[b-lcn8d9edu7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-name-text[b-lcn8d9edu7] {
    font-size: 14px;
    font-weight: 800;
    color: #1e1b4b;
    display: block;
    line-height: 1.2;
}

.worker-role-badge[b-lcn8d9edu7] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #6b21a8;
    background: #f3e8ff;
    border: 1px solid #e9d5ff;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* ─── Línea de Tiempo Vertical del Trabajador (Stepper Diario Continuo) ─────── */
.worker-timeline-stepper[b-lcn8d9edu7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 2px;
}

.worker-timeline-node[b-lcn8d9edu7] {
    display: flex;
    align-items: stretch; /* CLAVE: El track izquierdo estira el 100% de la altura de la tarjeta */
    gap: 12px;
    position: relative;
}

.node-left-track[b-lcn8d9edu7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    min-width: 48px;
    flex-shrink: 0;
    position: relative;
}

.node-time-badge[b-lcn8d9edu7] {
    font-size: 10.5px;
    font-weight: 800;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    margin-bottom: 6px;
    z-index: 2;
}

.node-dot[b-lcn8d9edu7] {
    width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 2;
    background: #ffffff;
    border: 2px solid #94a3b8;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.node-dot.dot-completed[b-lcn8d9edu7] {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
}

.node-dot.dot-delayed[b-lcn8d9edu7] {
    background: #ef4444;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.node-dot.dot-inprogress[b-lcn8d9edu7] {
    background: #3b82f6;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.node-dot.dot-assigned[b-lcn8d9edu7] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #94a3b8;
}

/* LÍNEA CONECTORA VERTICAL CONTINUA: Nunca se corta */
.node-connector-line[b-lcn8d9edu7] {
    position: absolute;
    top: 56px;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #cbd5e1;
    z-index: 1;
    border-radius: 2px;
}

.node-right-card[b-lcn8d9edu7] {
    flex-grow: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.node-ro-tag[b-lcn8d9edu7] {
    font-size: 11px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 1px 6px;
    border-radius: 4px;
}

.node-hours-chip[b-lcn8d9edu7] {
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
}

.node-status-pill[b-lcn8d9edu7] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
}

.node-status-pill.status-completed[b-lcn8d9edu7],
.node-status-pill.status-early[b-lcn8d9edu7] {
    background: #dcfce7;
    color: #15803d;
}

.node-status-pill.status-delayed[b-lcn8d9edu7] {
    background: #fee2e2;
    color: #b91c1c;
}

.node-status-pill.status-inprogress[b-lcn8d9edu7] {
    background: #dbeafe;
    color: #1d4ed8;
}

.node-status-pill.status-assigned[b-lcn8d9edu7] {
    background: #f1f5f9;
    color: #64748b;
}

.node-car-thumb[b-lcn8d9edu7] {
    width: 46px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
}

.node-car-thumb img[b-lcn8d9edu7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.node-vehicle-name[b-lcn8d9edu7] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

.node-plate-text[b-lcn8d9edu7] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.node-stage-desc[b-lcn8d9edu7] {
    font-size: 11px;
    color: #475569;
    font-weight: 500;
}

.node-progress-bar[b-lcn8d9edu7] {
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.node-progress-fill[b-lcn8d9edu7] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.node-expand-action[b-lcn8d9edu7] {
    border-color: #f1f5f9 !important;
    cursor: pointer;
    user-select: none;
}

.node-expand-action:hover span[b-lcn8d9edu7] {
    color: #2563eb !important;
}

/* ─── Lista de Actividades (Solo Lectura / Auditoría) ───────────────────────── */
.node-activities-list[b-lcn8d9edu7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-row[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.activity-row.activity-done[b-lcn8d9edu7] {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.activity-row.activity-pending[b-lcn8d9edu7] {
    background: #ffffff;
    border-color: #e2e8f0;
}

.activity-left[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-icon[b-lcn8d9edu7] {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.completed[b-lcn8d9edu7] {
    color: #10b981;
}

.activity-icon.pending[b-lcn8d9edu7] {
    color: #3b82f6;
}

.activity-name[b-lcn8d9edu7] {
    font-size: 11.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.activity-row.activity-done .activity-name[b-lcn8d9edu7] {
    color: #166534;
}

.activity-row.activity-pending .activity-name[b-lcn8d9edu7] {
    color: #475569;
}

.activity-pill[b-lcn8d9edu7] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.activity-pill.done[b-lcn8d9edu7] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.activity-pill.pending[b-lcn8d9edu7] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* ─── Contenedor e Integración del TimelinePanel ────────────────────────────── */
.timeline-component-wrapper[b-lcn8d9edu7] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Overrides de scoped CSS para que TimelinePanel luzca impecable y nativo dentro del drawer */
[b-lcn8d9edu7] .timeline-panel {
    min-width: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
}

[b-lcn8d9edu7] .timeline-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
}

[b-lcn8d9edu7] .summary-cards {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 8px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* ─── Control de Fases y Tiempos de Holgura (Espacios en Blanco) ───────────── */
.phases-control-card[b-lcn8d9edu7] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.btn-add-gap[b-lcn8d9edu7] {
    background: #f1f5f9;
    color: #0284c7;
    border: 1px dashed #93c5fd;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-add-gap:hover[b-lcn8d9edu7] {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
}

.phases-stepper-list[b-lcn8d9edu7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phase-stepper-row[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.phase-stepper-row.row-work[b-lcn8d9edu7] {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.phase-stepper-row.row-gap[b-lcn8d9edu7] {
    background: #fafafa;
    border: 1px dashed #cbd5e1;
}

.phase-stepper-info[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.phase-color-dot[b-lcn8d9edu7] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.phase-stepper-name[b-lcn8d9edu7] {
    font-size: 12px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phase-gap-indicator[b-lcn8d9edu7] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
}

.phase-stepper-actions[b-lcn8d9edu7] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.stepper-btn[b-lcn8d9edu7] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.stepper-btn:hover:not(:disabled)[b-lcn8d9edu7] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.stepper-btn:disabled[b-lcn8d9edu7] {
    opacity: 0.35;
    cursor: not-allowed;
}

.stepper-btn.remove[b-lcn8d9edu7] {
    border-color: #fecaca;
    color: #ef4444;
    background: #fff5f5;
    margin-left: 2px;
}

.stepper-btn.remove:hover[b-lcn8d9edu7] {
    background: #ef4444;
    color: #ffffff;
    border-color: #dc2626;
}

.stepper-value-pill[b-lcn8d9edu7] {
    min-width: 58px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 2px 6px;
    border-radius: 6px;
}

.stepper-value-pill.val-gap[b-lcn8d9edu7] {
    color: #0284c7;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.promise-summary-box[b-lcn8d9edu7] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 12px;
}

.promise-date-highlight[b-lcn8d9edu7] {
    background: #ffffff;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* /Pages/Home/Components/Calendar/Components/JscbBoard/WorkforceCard.razor.rz.scp.css */
/* Estilos de la tarjeta de operarios. Viven aquí y no en CalendarPanel.razor.css porque el CSS
   aislado de Blazor solo viste los elementos escritos en su propio componente: al mover este markup
   fuera del panel, las reglas se quedaron atrás y la tarjeta salió sin columnas y con el avatar a
   tamaño natural, que era lo que rompía la fila entera del encabezado.

   La base de la tarjeta (`.proc-kpi-card`) y el ancho que le daba la fila se copian abajo por la
   misma razón: el selector del padre no alcanza al hijo. */

/* Base compartida de las tarjetas del encabezado. */
.proc-kpi-card[b-qm9itr5uq2] {
    background: #F5F9FA !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

/* Lo que la fila del encabezado le asignaba: ocupa el resto del ancho y no baja de su piso.

   Base 0 y no `auto`: con `auto` la base era su ancho máximo de contenido y, al apretar la fila, el
   reparto del recorte caía sobre el panel de OT autorizadas del JSCB, que quedaba en su mínimo con
   los desgloses recortados mientras esta tarjeta conservaba aire. Con base 0 solo crece con lo que
   sobra; su piso sigue siendo `min-content`. */
.jscb-operarios-kpi-card[b-qm9itr5uq2] {
    flex: 1 1 0 !important;
    /* Nunca por debajo de lo que sus rótulos necesitan. Un ancho fijo dejaba los textos
       apretados en pantallas estrechas y aire sobrante en las anchas. */
    min-width: min-content !important;
}

/* ==========================================================================
   Operarios & Equipos Card (Slot 5 Dashboard)
   ========================================================================== */
.jscb-operarios-kpi-card[b-qm9itr5uq2] {
    display: grid !important;
    /* Las tres primeras columnas llevan cifras y rótulos de una palabra; la cuarta, botones con
       rótulo («Asignar bahías», «Agregar novedad»). Repartida a proporción fija, la cuarta columna
       salía más estrecha que su rótulo en cuanto la tarjeta apretaba, y el texto se salía de la
       píldora. El mínimo `max-content` hace que la columna nunca baje del botón más ancho: en JPCB
       crece hasta lo que piden sus dos rótulos y las tres columnas de cifras se reparten el resto;
       en PROC y JSCB, con solo «Agregar», conserva la proporción de siempre. */
    grid-template-columns: repeat(3, minmax(min-content, 1fr)) minmax(max-content, 1.6fr) !important;
    align-items: stretch !important;
    padding: 4px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Col 1: Totales Operarios y Equipos */
.operarios-col-totals[b-qm9itr5uq2] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    border-right: none !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Las dos cifras de la primera columna, apiladas: operarios arriba y equipos debajo. Las demás
   columnas se centran en el alto de la tarjeta, que ahora lo marca esta pila; el relleno es el mismo
   arriba y abajo para que el centrado sea real. */
.operarios-stack[b-qm9itr5uq2] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Col 2: Sin Equipo */
.operarios-col-sin-equipo[b-qm9itr5uq2] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    border-right: none !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Col 3: Fuera de Servicio */
.operarios-col-fuera-servicio[b-qm9itr5uq2] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    border-right: none !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.operarios-col-totals[b-qm9itr5uq2]::after,
.operarios-col-sin-equipo[b-qm9itr5uq2]::after,
.operarios-col-fuera-servicio[b-qm9itr5uq2]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.5px;
    height: 42px;
    border-radius: 999px;
    background: #edf2f7;
    transform: translateY(-50%);
}

/* Avatares */
.operarios-avatar-row[b-qm9itr5uq2] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 3px !important;
    min-height: 24px !important;
}

.operario-avatar-circle[b-qm9itr5uq2] {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover !important;
    background: #cbd5e1 !important;
    margin-right: -6px !important;
}

.operarios-more-badge[b-qm9itr5uq2] {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #475569 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    margin-right: -5px !important;
    z-index: 2 !important;
}

/* Col 4: Integrantes asignados a equipos y acción contextual */
.operarios-col-actions[b-qm9itr5uq2] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    gap: 3px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}

/* Equipos que no cubren todos los procesos: se nombran, porque «4 de 6» sin decir cuáles obliga a
   abrir la administración para averiguarlo. Los chips van en la escala del desglose (8.5 px), como
   la nota de la barra que tienen encima. */
.team-gap-chips[b-qm9itr5uq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.team-gap-chip[b-qm9itr5uq2] {
    max-width: 78px;
    padding: 1px 6px;
    border: 1px solid #fcd9a4;
    border-radius: 9px;
    background-color: #fff7ed;
    color: #b45309;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.team-gap-chip:hover[b-qm9itr5uq2] {
    background-color: #ffedd5;
}

.team-gap-more[b-qm9itr5uq2] {
    color: #b45309;
    font-size: 8.5px;
    font-weight: 700;
}

/* /Pages/Home/Components/Calendar/Components/MetricsDrawer/ControlBoardMetricsDrawer.razor.rz.scp.css */
/* ============================================================
   ControlBoardMetricsDrawer — Estilos del contenido interno
   El shell (backdrop, posición contra el NavMenu, animación, botón cerrar)
   es el LeftSidebar compartido (xShared/Components/Sidebars), en modo Flush.
   ============================================================ */

/* Header de la ventana emergente: goes inside the shell's HeaderContent. The right padding
   leaves room for the shell's close button (32 px at right:16px in the flush variant). */
.metrics-drawer-header[b-mzax4ozdga] {
    padding: 20px 56px 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #1f2f45;
}

/* Buscador interno */
.metrics-drawer-search[b-mzax4ozdga] {
    padding: 16px 20px 12px 20px;
}

.search-input-wrap[b-mzax4ozdga] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap .search-icon[b-mzax4ozdga] {
    position: absolute;
    left: 14px;
    color: #38bdf8;
    font-size: 14px;
}

.metrics-search-input[b-mzax4ozdga] {
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding-left: 38px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.metrics-search-input[b-mzax4ozdga]::placeholder {
    color: #64748b !important;
}

/* Cuerpo escroleable */
.metrics-drawer-body[b-mzax4ozdga] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 24px 20px;
}

/* Estilos de Textos y Colores Claros */
.text-cyan[b-mzax4ozdga] {
    color: #38bdf8 !important;
}

.text-bright-sub[b-mzax4ozdga] {
    color: #93c5fd !important;
}

.drawer-section-title[b-mzax4ozdga] {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

.readiness-drawer-icon[b-mzax4ozdga] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    color: #38bdf8;
}

.readiness-drawer-icon svg[b-mzax4ozdga] {
    width: 24px;
    height: 24px;
}

.drawer-chevron[b-mzax4ozdga] {
    color: #38bdf8 !important;
}

.drawer-plan-text[b-mzax4ozdga] {
    color: #94a3b8 !important;
}

/* Tarjetas Acordeón */
.drawer-item-card[b-mzax4ozdga] {
    background: #243447;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawer-item-card:hover[b-mzax4ozdga] {
    background: #2a3a4f;
    border-color: rgba(56, 189, 248, 0.3);
}

.drawer-item-card.selected[b-mzax4ozdga] {
    background: #2a3a4f;
    border-color: #38bdf8;
}

.item-card-left[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-car-thumb[b-mzax4ozdga] {
    width: 86px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #172335;
}

.item-car-thumb img[b-mzax4ozdga] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-ro-icon[b-mzax4ozdga] {
    width: 86px;
    height: 56px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.item-info[b-mzax4ozdga] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.item-title-row[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.item-title-row strong[b-mzax4ozdga] {
    color: #ffffff;
    font-size: 14px;
    white-space: nowrap;
}

.item-plate[b-mzax4ozdga] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.item-sub[b-mzax4ozdga] {
    font-size: 12px;
    color: #93c5fd;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-tags-row[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-worker[b-mzax4ozdga] {
    font-size: 11px;
    color: #ffffff;
    white-space: nowrap;
}

/* Badges y Píldoras */
.badge-stage-code[b-mzax4ozdga] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-stage-code.rep[b-mzax4ozdga] { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.badge-stage-code.prep[b-mzax4ozdga] { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.badge-stage-code.paint[b-mzax4ozdga] { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.badge-stage-code.rem[b-mzax4ozdga] { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

.status-badge-light[b-mzax4ozdga] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-block;
}

.status-badge-light.status-inprogress[b-mzax4ozdga],
.status-badge-light.status-in_progress[b-mzax4ozdga] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.status-badge-light.status-completed[b-mzax4ozdga] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.status-badge-light.status-pending[b-mzax4ozdga] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Paneles Expandidos de Subdetalle (Cuadro independiente separado) */
.drawer-expanded-subpanel[b-mzax4ozdga] {
    background: #1c2b3d;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 8px;
}

.expanded-grid[b-mzax4ozdga] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.exp-row[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.exp-label[b-mzax4ozdga] {
    color: #94a3b8;
    white-space: nowrap;
}

.exp-val[b-mzax4ozdga] {
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

/* Tarjetas de Vehículos Grandes */
.drawer-item-card.vehicle-card[b-mzax4ozdga] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.item-car-photo-large[b-mzax4ozdga] {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
}

.item-car-photo-large img[b-mzax4ozdga] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-plate-badge[b-mzax4ozdga] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.vehicle-level-badge[b-mzax4ozdga] {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.vehicle-days-badge[b-mzax4ozdga] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.vehicle-days-badge.days-normal[b-mzax4ozdga] {
    background: rgba(16, 185, 129, 0.88);
}

.vehicle-days-badge.days-warning[b-mzax4ozdga] {
    background: rgba(245, 158, 11, 0.92);
}

.vehicle-days-badge.days-danger[b-mzax4ozdga] {
    background: rgba(239, 68, 68, 0.95);
}

.vehicle-ot-badge[b-mzax4ozdga] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.kpi-tag-pill[b-mzax4ozdga] {
    display: inline-flex;
    align-items: center;
    background: #172335;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    color: #cbd5e1;
}

.tech-mini-avatar[b-mzax4ozdga] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.tech-initials-mini[b-mzax4ozdga] {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
}

.border-danger-glow[b-mzax4ozdga] {
    border-color: rgba(239, 68, 68, 0.5) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

.detained-alert-tag[b-mzax4ozdga] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-indicator-dot.danger[b-mzax4ozdga] {
    background: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8) !important;
}

.vehicle-no-photo[b-mzax4ozdga] {
    background: #172335;
    height: 100%;
}

.btn-outline-cyan[b-mzax4ozdga] {
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.btn-outline-cyan:hover[b-mzax4ozdga] {
    background: #38bdf8 !important;
    color: #0f172a !important;
}

/* Procesos / Aseguradoras / Personas */
.process-icon-box[b-mzax4ozdga] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.worker-avatar-circle[b-mzax4ozdga] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.insurance-badge-box[b-mzax4ozdga] {
    padding-left: 10px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.nested-orders-list[b-mzax4ozdga] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nested-order-item[b-mzax4ozdga] {
    background: #243447;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
}

.nested-order-item:hover[b-mzax4ozdga] {
    background: #2a3a4f;
}

.nested-item-left[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nested-car-thumb[b-mzax4ozdga] {
    width: 86px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0f172a;
}

.nested-car-thumb img[b-mzax4ozdga] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrollbar personalizado */
.custom-scroll[b-mzax4ozdga]::-webkit-scrollbar {
    width: 5px;
    height: 0px !important; /* Evita scrollbar horizontal en Windows */
}
.custom-scroll[b-mzax4ozdga]::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll[b-mzax4ozdga]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.custom-scroll[b-mzax4ozdga]::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5);
}

/* Estilos de Alta Visibilidad, Jerarquía Visual y Contraste */
.drawer-card-box[b-mzax4ozdga] {
    background: #162436 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.form-divider[b-mzax4ozdga] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);
}

.dark-input[b-mzax4ozdga], .dark-select[b-mzax4ozdga] {
    background-color: #1e2d42 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.dark-input[b-mzax4ozdga]::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.dark-input:focus[b-mzax4ozdga], .dark-select:focus[b-mzax4ozdga] {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    background-color: #24354d !important;
    color: #ffffff !important;
}

.dark-select option[b-mzax4ozdga] {
    background-color: #1a2738 !important;
    color: #ffffff !important;
}

.btn-cyan[b-mzax4ozdga] {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
    border: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.btn-cyan:hover[b-mzax4ozdga] {
    background-color: #7dd3fc !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}

.btn-outline-cyan[b-mzax4ozdga] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border: 1px solid #38bdf8 !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.btn-outline-cyan:hover[b-mzax4ozdga] {
    background-color: rgba(56, 189, 248, 0.25) !important;
    color: #7dd3fc !important;
}

.btn-create-team[b-mzax4ozdga] {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.btn-create-team:hover:not(:disabled)[b-mzax4ozdga] {
    background-color: #7dd3fc !important;
    transform: translateY(-1px);
}

.btn-create-team:disabled[b-mzax4ozdga] {
    background-color: rgba(56, 189, 248, 0.2) !important;
    color: #64748b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.section-technical-card[b-mzax4ozdga] {
    background: #1d2c40 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

.badge-section-count[b-mzax4ozdga] {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.section-empty-text[b-mzax4ozdga] {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-style: italic !important;
    display: block !important;
    margin: 3px 0 !important;
}

.btn-assign-section[b-mzax4ozdga] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-assign-section:hover[b-mzax4ozdga] {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
}

.worker-section-chip[b-mzax4ozdga] {
    background: #152232 !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}

.worker-section-chip .chip-initials[b-mzax4ozdga] {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

.worker-section-chip .chip-remove[b-mzax4ozdga] {
    color: #f87171 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: color 0.15s ease !important;
}

.worker-section-chip .chip-remove:hover[b-mzax4ozdga] {
    color: #ef4444 !important;
}

/* ─── Formulario de Registro de Ausencias / Novedades ──────────────────────── */
.absence-form-container[b-mzax4ozdga] {
    padding: 26px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    overflow-y: auto !important;
}

.absence-feedback-error[b-mzax4ozdga] {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-left: 4px solid #ef4444 !important;
    color: #fca5a5 !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.absence-feedback-error .btn-outline-light[b-mzax4ozdga] {
    margin-left: auto !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
}

/* ============================================================
   Multi-Team Modal
   ============================================================ */
.multi-team-modal-backdrop[b-mzax4ozdga] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multi-team-modal[b-mzax4ozdga] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.multi-team-modal-header[b-mzax4ozdga] {
    background: #0f172a;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.multi-team-modal-header h5[b-mzax4ozdga] {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 600;
}

.multi-team-modal-body[b-mzax4ozdga] {
    padding: 20px;
}

.multi-team-desc[b-mzax4ozdga] {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.multi-team-modal-footer[b-mzax4ozdga] {
    padding: 16px 20px;
    background: #0f172a;
    border-top: 1px solid #334155;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.absence-info-box[b-mzax4ozdga] {
    background: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.22) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 2px !important;
}

.absence-field-group[b-mzax4ozdga] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.absence-field-label[b-mzax4ozdga] {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: -0.01em !important;
}

.absence-field-control[b-mzax4ozdga] {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #334155 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    width: 100% !important;
    height: 48px !important;
    color-scheme: dark !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

select.absence-field-control[b-mzax4ozdga] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    background-size: 13px 9px !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}

.absence-field-control:focus[b-mzax4ozdga] {
    border-color: #3b82f6 !important;
    background-color: #0d1527 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

.absence-field-control:hover:not(:focus)[b-mzax4ozdga] {
    border-color: #475569 !important;
}

/* Disparador de fecha (solo lectura) que abre el PickerSidebarDate estándar. */
.absence-date-picker[b-mzax4ozdga] {
    position: relative;
}

.absence-date-picker .absence-field-control[readonly][b-mzax4ozdga] {
    padding-right: 42px !important;
    cursor: pointer !important;
}

.absence-date-picker-icon[b-mzax4ozdga] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.absence-field-control[b-mzax4ozdga]::placeholder,
textarea.absence-field-control[b-mzax4ozdga]::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

textarea.absence-field-control.absence-textarea[b-mzax4ozdga] {
    min-height: 110px !important;
    height: auto !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

.absence-submit-button[b-mzax4ozdga] {
    width: 100% !important;
    height: 50px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.02em !important;
}

.absence-submit-button:not(:disabled)[b-mzax4ozdga] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.45) !important;
    cursor: pointer !important;
}

.absence-submit-button:not(:disabled):hover[b-mzax4ozdga] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 6px 22px rgba(220, 38, 38, 0.6) !important;
    transform: translateY(-1px) !important;
}

.absence-submit-button:disabled[b-mzax4ozdga] {
    background: #1e293b !important;
    background-image: none !important;
    color: #64748b !important;
    border: 1.5px solid #334155 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    pointer-events: none !important;
}



.absence-fields[b-mzax4ozdga] { border: 0; padding: 0; margin: 0; min-width: 0; }
.absence-feedback-error[b-mzax4ozdga] { color: #fca5a5; margin-bottom: 12px; }
.absence-feedback-error button[b-mzax4ozdga] { margin-left: 8px; }
.absence-submit-button[b-mzax4ozdga] { min-height: 40px; }

/* Refresh over already visible content: a strip, not a replacement of the open form. */
.drawer-inline-status[b-mzax4ozdga] {
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.18);
}

/* Filas de novedades del JPCB: persona o bahía, motivo y vigencia. */
.novelty-row[b-mzax4ozdga] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    font-size: 12px;
}

.novelty-name[b-mzax4ozdga] {
    color: #e2e8f0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.novelty-reason[b-mzax4ozdga] {
    color: #94a3b8;
    font-weight: 600;
}

.novelty-range[b-mzax4ozdga] {
    color: #cbd5e1;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Con acciones la vigencia deja de tener ancho fijo: una pausa muestra su franja, más larga que
   dos fechas, y los dos botones van al final sin robar sitio al nombre. */
.novelty-row--actions[b-mzax4ozdga] {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
}

.novelty-actions[b-mzax4ozdga] {
    display: inline-flex;
    gap: 4px;
}

.novelty-action[b-mzax4ozdga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.novelty-action:hover:not(:disabled)[b-mzax4ozdga] {
    background: rgba(148, 163, 184, 0.16);
    color: #ffffff;
}

.novelty-action.is-danger:hover:not(:disabled)[b-mzax4ozdga] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.novelty-action:disabled[b-mzax4ozdga] {
    opacity: 0.5;
    cursor: default;
}

.novelty-action .spinner-border[b-mzax4ozdga] {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* Interruptor «solo una franja del día» del formulario de novedad. */
.absence-partial-toggle[b-mzax4ozdga] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.absence-partial-toggle input[b-mzax4ozdga] {
    accent-color: #ef4444;
    width: 15px;
    height: 15px;
    margin: 0;
}

/* Aclaración bajo un título de sección, cuando la cifra necesita una advertencia. */
.drawer-section-hint[b-mzax4ozdga] {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.4;
}

/* Buscador de operarios en formulario de equipos */
.worker-search-dropdown[b-mzax4ozdga] {
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.worker-dropdown-item:hover[b-mzax4ozdga] {
    background-color: #1e293b !important;
}

/* /Pages/Home/Components/Calendar/Components/MetricsDrawer/DcbHiddenWorkDrawerList.razor.rz.scp.css */

/* Base heredada del cajón. El CSS aislado del contenedor no viste los elementos de un componente
   hijo, así que cada lista trae la suya, igual que hace la lista de OT autorizadas. */
.drawer-item-card[b-j6q4bfcr8o] {
    background: #243447;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.drawer-section-title[b-j6q4bfcr8o] {
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
}

.drawer-section-info[b-j6q4bfcr8o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hidden-process-row[b-j6q4bfcr8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.hidden-process-main[b-j6q4bfcr8o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hidden-process-name[b-j6q4bfcr8o] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden-process-meta[b-j6q4bfcr8o] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.btn-hidden-process-show[b-j6q4bfcr8o] {
    flex: none;
    padding: 4px 10px;
    border: 1px solid #22d3ee;
    border-radius: 4px;
    background: transparent;
    color: #22d3ee;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.btn-hidden-process-show:hover[b-j6q4bfcr8o] {
    background: rgba(34, 211, 238, .12);
}

.hidden-order-row[b-j6q4bfcr8o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.2fr) 68px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    font-size: 12px;
}

.hidden-order-label[b-j6q4bfcr8o] {
    color: #e2e8f0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden-order-plate[b-j6q4bfcr8o],
.hidden-order-process[b-j6q4bfcr8o] {
    color: #94a3b8;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden-order-days[b-j6q4bfcr8o] {
    color: #cbd5e1;
    font-weight: 600;
    text-align: right;
}

.drawer-section-hint[b-j6q4bfcr8o] {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .hidden-order-row[b-j6q4bfcr8o] {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* /Pages/Home/Components/Calendar/Components/MetricsDrawer/JpcbExecutionDrawerList.razor.rz.scp.css */

/* Base heredada del cajón. El CSS aislado del contenedor no viste los elementos de un componente
   hijo, así que cada lista trae la suya, igual que hace la lista de OT autorizadas. */
.drawer-item-card[b-8y912q7v9f] {
    background: #243447;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.drawer-section-title[b-8y912q7v9f] {
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
}

.drawer-section-info[b-8y912q7v9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.execution-row[b-8y912q7v9f] {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    cursor: pointer;
}

.execution-row-main[b-8y912q7v9f] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.execution-ot[b-8y912q7v9f] {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}

.execution-plate[b-8y912q7v9f] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.execution-row-meta[b-8y912q7v9f] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.execution-bay[b-8y912q7v9f] {
    color: #22d3ee;
}

.execution-detail[b-8y912q7v9f] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
}
/* /Pages/Home/Components/Calendar/Components/MetricsDrawer/JscbAuthorizationReadinessDrawerList.razor.rz.scp.css */
.readiness-list[b-td07d8i98y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.readiness-item[b-td07d8i98y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: #243447;
}

.readiness-item__top[b-td07d8i98y],
.readiness-item__vehicle[b-td07d8i98y],
.readiness-item__status[b-td07d8i98y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.readiness-item__order[b-td07d8i98y] {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 800;
}

.readiness-item__location[b-td07d8i98y],
.readiness-item__assignment[b-td07d8i98y],
.readiness-item__schedule[b-td07d8i98y] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.readiness-item__location[b-td07d8i98y] {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.readiness-item__location.is-in-store[b-td07d8i98y] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
}

.readiness-item__location-dot[b-td07d8i98y] {
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
}

.readiness-item__vehicle[b-td07d8i98y] {
    justify-content: flex-start;
}

.readiness-item__plate[b-td07d8i98y] {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 5px;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.readiness-item__model[b-td07d8i98y] {
    min-width: 0;
    overflow: hidden;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-item__assignment.no-assignment[b-td07d8i98y] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
}

.readiness-item__assignment.has-assignment[b-td07d8i98y] {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
}

.readiness-item__schedule[b-td07d8i98y] {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.readiness-empty[b-td07d8i98y] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: #94a3b8;
    text-align: center;
}

.readiness-empty svg[b-td07d8i98y] {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    color: #64748b;
}

.readiness-empty strong[b-td07d8i98y] {
    color: #e2e8f0;
    font-size: 14px;
}

.readiness-empty span[b-td07d8i98y] {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.5;
}
/* /Pages/Home/Components/Calendar/Components/MetricsDrawer/JscbDeparturesDrawerList.razor.rz.scp.css */

/* Base heredada del cajón. El CSS aislado del contenedor no viste los elementos de un componente
   hijo, así que cada lista trae la suya, igual que hace la lista de OT autorizadas. */
.drawer-item-card[b-kiw3m46hg3] {
    background: #243447;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.drawer-section-title[b-kiw3m46hg3] {
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
}

.drawer-section-info[b-kiw3m46hg3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.departure-summary[b-kiw3m46hg3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.departure-chip[b-kiw3m46hg3] {
    padding: 3px 9px;
    border: 1px solid #334155;
    border-radius: 11px;
    background-color: #0f172a;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.departure-chip b[b-kiw3m46hg3] {
    color: #22d3ee;
    margin-left: 3px;
}

.departure-row[b-kiw3m46hg3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 96px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    font-size: 12px;
    cursor: pointer;
}

.departure-ot[b-kiw3m46hg3] {
    color: #e2e8f0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.departure-plate[b-kiw3m46hg3],
.departure-process[b-kiw3m46hg3] {
    color: #94a3b8;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.departure-when[b-kiw3m46hg3] {
    color: #cbd5e1;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 640px) {
    .departure-row[b-kiw3m46hg3] {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/CollapsedPocketRail.razor.rz.scp.css */
/* =========================================
   CollapsedPocketRail.razor.css — Franja de bolsillos recogidos
   ========================================= */

.collapsed-pocket-rail[b-7d62urj0jo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    /* 26px es el ancho de la pestaña: lo justo para el contador y el nombre girado. La zona cede
       eso a cambio de no gastar una columna entera por cada bolsillo que solo se consulta. */
    width: 26px;
    min-width: 26px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.collapsed-rail-item[b-7d62urj0jo] {
    display: flex;
    flex: 1 1 0;
    min-height: 48px;
}

/* ── La pestaña ── */
.collapsed-pocket-tab[b-7d62urj0jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 2px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.collapsed-pocket-tab:hover[b-7d62urj0jo] {
    filter: brightness(1.08);
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.2);
}

.collapsed-pocket-tab.is-open[b-7d62urj0jo] {
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.55);
}

/* Los hijos de la pestaña no reciben eventos: con ellos activos, cruzar del botón al contador
   disparaba un `dragleave` del botón y el temporizador del spring loading se cancelaba a mitad. */
.collapsed-pocket-tab > *[b-7d62urj0jo] {
    pointer-events: none;
}

/* ── Destino de un arrastre ──
   Mismo código de color que las columnas (`pocket-drop-valid` / `pocket-drop-invalid`), aplicado a
   la pestaña y al panel que abre: la tarjeta en vuelo sabe dónde puede caer también aquí. */
.collapsed-pocket-tab.is-drop-valid[b-7d62urj0jo] {
    box-shadow: 0 0 0 2px #10b981, 0 0 8px rgba(16, 185, 129, 0.35);
}

.collapsed-pocket-tab.is-drop-invalid[b-7d62urj0jo] {
    box-shadow: 0 0 0 2px #ef4444;
    opacity: 0.8;
}

.collapsed-pocket-popup.is-drop-valid[b-7d62urj0jo] {
    border-color: #10b981;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22), inset 0 0 14px rgba(16, 185, 129, 0.18);
}

.collapsed-pocket-popup.is-drop-invalid[b-7d62urj0jo] {
    border-color: #ef4444;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22), inset 0 0 14px rgba(239, 68, 68, 0.14);
}

.collapsed-tab-count[b-7d62urj0jo] {
    flex-shrink: 0;
    min-width: 18px;
    padding: 1px 3px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.collapsed-tab-title[b-7d62urj0jo] {
    /* Girado y leyéndose de abajo arriba, como el lomo de una carpeta. `min-height: 0` deja que el
       recorte lo haga la pestaña y no el texto, que si no desbordaba la zona. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
    flex: 1 1 auto;
}

/* ── El panel flotante ── */
.collapsed-pocket-backdrop[b-7d62urj0jo] {
    /* Cubre el tablero para que el clic de fuera cierre el panel y no active nada de debajo. */
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}

/* El panel se ancla a la zona (que el tablero marca `position: relative`) y no a su pestaña. Es lo
   que lo salva del `overflow: hidden` de las filas intermedias: un absoluto solo lo recorta el
   overflow de los ancestros que quedan por debajo de su bloque contenedor, y aquí la zona está por
   encima de todos ellos. Anclado a la pestaña, el panel salía cortado por el borde de la zona. */
.collapsed-pocket-popup[b-7d62urj0jo] {
    --popup-col-width: var(--pocket-col-width);
    --popup-col-gap: 8px;
    /* El relleno lateral del cuerpo: lo único que el panel suma a sus columnas. */
    --popup-side-room: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 61;
    width: calc(
        var(--popup-columns, 1) * var(--popup-col-width)
        + (var(--popup-columns, 1) - 1) * var(--popup-col-gap)
        + var(--popup-side-room));
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

/* Cada franja abre hacia el interior de su zona: la de la izquierda a su derecha y al contrario,
   que es el único lado con sitio. El desplazamiento se mide desde el borde de la zona, no desde la
   pestaña: con la franja arrancando tras los 6 px de relleno de la zona, los 34 de antes dejaban
   dos míseros píxeles de aire y el panel salía pegado a la pestaña, como si fuera su prolongación.
   46 px dejan 14 de separación y lo devuelven a ser una capa que flota por encima.

   El ancho lo fijan las columnas que el panel va a usar —`--popup-columns`, que el componente
   calcula con las órdenes que hay y el sitio que queda al costado—. Antes lo fijaba la zona, y como
   el grid solo coloca columnas enteras de 160 px, lo que sobraba sin llegar a otra columna se
   quedaba de hueco muerto al lado de las tarjetas. */
.popup-to-right[b-7d62urj0jo] {
    left: 46px;
    right: auto;
}

.popup-to-left[b-7d62urj0jo] {
    right: 46px;
    left: auto;
}

.collapsed-popup-header[b-7d62urj0jo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.collapsed-popup-title[b-7d62urj0jo] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapsed-popup-count[b-7d62urj0jo] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Gestos de sesión en la cabecera del panel: fijar abierto y ver en foco. Del color del texto de la
   cabecera, sobre un velo claro para que se lean como botones sin pelear con el color del proceso. */
.collapsed-popup-action[b-7d62urj0jo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.collapsed-popup-action:hover[b-7d62urj0jo] {
    background: rgba(255, 255, 255, 0.36);
}

.collapsed-popup-action:focus-visible[b-7d62urj0jo] {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 1px;
}

/* Tantas columnas como el panel se dimensionó para tener: con `auto-fill` el grid decidía por su
   cuenta según el ancho recibido, y esa cuenta ya no manda —la hace el componente antes. */
.collapsed-popup-body[b-7d62urj0jo] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--popup-columns, 1), var(--pocket-col-width));
    grid-auto-rows: min-content;
    align-content: start;
    justify-content: start;
    gap: 6px 8px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 6px;
    background: #F5F9FA;
}

.collapsed-popup-empty[b-7d62urj0jo] {
    grid-column: 1 / -1;
    padding: 14px 12px;
    font-size: 11.5px;
    color: #64748b;
    text-align: center;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/DailySummaryDonutCard.razor.rz.scp.css */
/* =========================================
   DailySummaryDonutCard.razor.css — Resumen del Día Widget
   ========================================= */

.daily-summary-card[b-dkootsui4g] {
    display: flex;
    flex-direction: column;
    background: #F5F9FA !important;
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    user-select: none;
}

/* ── Cabecera ── */
.summary-card-header[b-dkootsui4g] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.btn-summary-chevron[b-dkootsui4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-summary-chevron:hover[b-dkootsui4g] {
    background-color: #f1f5f9;
    color: #1e293b;
}

.summary-card-title[b-dkootsui4g] {
    font-size: 13px;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: -0.2px;
}

/* ── Cuerpo: Dona + Leyenda ── */
.summary-card-body[b-dkootsui4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* ── Donut Chart ── */
.donut-chart-wrapper[b-dkootsui4g] {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-ring[b-dkootsui4g] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease;
}

.donut-center-hole[b-dkootsui4g] {
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Misma escala que las cifras de las tarjetas del encabezado: el total del anillo y los contadores de
   la fila se miran seguidos. */
.donut-total-number[b-dkootsui4g] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1e293b;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.donut-total-label[b-dkootsui4g] {
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
    line-height: 1;
    margin-top: 1px;
    text-transform: lowercase;
}

/* ── Desglose de Leyenda ── */
/* La leyenda tiene cuatro filas en el DCB y el JSCB y cinco en el JPCB —los cinco estados de
   ejecución—, así que la fila se ajusta para que las cinco ocupen lo mismo que cuatro y un
   separador: es lo que mantiene la franja superior a la misma altura en los tres tableros. */
.summary-legend-list[b-dkootsui4g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.legend-item[b-dkootsui4g] {
    display: flex;
    align-items: center;
    font-size: 9.5px;
    line-height: 1.15;
    gap: 6px;
    width: 100%;
    padding: 0 2px;
    border: none;
    border-radius: 4px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.legend-item:disabled[b-dkootsui4g] {
    cursor: default;
}

.legend-item:not(:disabled):hover[b-dkootsui4g] {
    background-color: #f1f5f9;
}

/* El atraso no es una fase: va bajo un separador para que no se lea como el cuarto tramo del anillo. */
.legend-item-cross[b-dkootsui4g] {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px dashed #e2e8f0;
    border-radius: 0 0 4px 4px;
}

/* La píldora marca el alto de la fila, así que es la que decide si cinco estados de ejecución ocupan
   lo mismo que tres fases y su atraso. Con 14 px, los cinco del JPCB caben en el alto de la franja
   que fijan las otras dos pestañas. */
.legend-badge[b-dkootsui4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 14px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.badge-en-espera[b-dkootsui4g] {
    background-color: #10b981;
}

.badge-en-proceso[b-dkootsui4g] {
    background-color: #f59e0b;
}

.badge-bloqueados[b-dkootsui4g] {
    background-color: #ef4444;
}

.badge-terminados[b-dkootsui4g] {
    background-color: #94a3b8;
}

.legend-label[b-dkootsui4g] {
    flex: 1 1 auto;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9.5px;
}

.legend-percent[b-dkootsui4g] {
    font-size: 9.5px;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    text-align: right;
    min-width: 26px;
}

/* Neutral ring while the counts have not arrived: no slice claims a share it does not have yet. */
.donut-ring.is-loading[b-dkootsui4g] { animation: donut-ring-pulse-b-dkootsui4g 1.2s ease-in-out infinite; }

@keyframes donut-ring-pulse-b-dkootsui4g {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Lo que la dona no puede contar: OT del taller sin columna en este tablero.
   Va en la cabecera y no al pie: ahí la lee quien mira el resumen, y la tarjeta conserva la misma
   altura que las de los otros tableros en lugar de crecer una fila. */
.summary-outside-chip[b-dkootsui4g] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background-color: #eff6ff;
    color: #2563eb;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

.summary-outside-chip:hover[b-dkootsui4g] {
    background-color: #dbeafe;
    border-color: #93c5fd;
}

.summary-outside-chip i[b-dkootsui4g] {
    font-size: 9px;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/DcbConfigZoneGrid.razor.rz.scp.css */
.dcb-config-zone-grid[b-pzfpyvbzpr] {
    --dcb-cell-width: var(--pocket-col-width);
    --dcb-growth-rail-width: 8px;
    --dcb-growth-hit-width: 28px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--dcb-zone-columns), var(--dcb-cell-width));
    grid-template-rows: repeat(var(--dcb-zone-rows), var(--dcb-row-height, 152px));
    gap: 8px;
    width: max-content;
    min-width: 100%;
    height: var(--dcb-grid-content-height);
    min-height: var(--dcb-grid-content-height);
    align-items: stretch;
}

.dcb-config-process[b-pzfpyvbzpr] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transform: translate(var(--dcb-reflow-x, 0), var(--dcb-reflow-y, 0));
    transition: transform 170ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.dcb-config-process.is-reflow-shifted[b-pzfpyvbzpr] {
    z-index: 6;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.dcb-config-process.is-drag-source[b-pzfpyvbzpr] {
    opacity: 0.3;
}

.dcb-config-process.is-resizing[b-pzfpyvbzpr] {
    z-index: 6;
    border-color: #d81b84;
    box-shadow: 0 0 0 2px rgba(216, 27, 132, 0.18), 0 6px 18px rgba(15, 23, 42, 0.14);
}

.dcb-config-process-header[b-pzfpyvbzpr] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
}

.dcb-config-process-header:active[b-pzfpyvbzpr] {
    cursor: grabbing;
}

/* Hasta dos renglones antes de recortar: en una sola línea, «Estimación de daños» y otros nombres
   largos se cortaban tan pronto que dejaban de distinguirse entre sí. */
.dcb-config-process-title[b-pzfpyvbzpr] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.dcb-config-process-sequence[b-pzfpyvbzpr] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dcb-config-process-count[b-pzfpyvbzpr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: #1f304d;
    font-size: 10px;
    font-weight: 800;
}

.dcb-config-process-body[b-pzfpyvbzpr] {
    flex: 1;
    min-height: 0;
    margin-top: 3px;
    border-radius: 6px;
    background: #f8fafc;
    overflow: hidden;
}

/* Píldoras del cuerpo de la tarjeta: el pin y las acciones de filtro hablan el mismo idioma. Antes
   la de duplicar era un bloque azul a todo lo ancho y el pin una píldora gris centrada; puestas una
   encima de otra parecían venir de dos pantallas distintas.

   Todas del mismo ancho, y no del de su rótulo: apiladas y centradas, cada una con el suyo dibujaba
   un zigzag de bordes. 124 px es lo que pide el rótulo más largo —«Fijado abierto»— sin llegar a ser
   el bloque a todo lo ancho que se comía el cuerpo del proceso en una celda de 160 px. */
.dcb-config-pin-toggle[b-pzfpyvbzpr],
.dcb-config-filter-action[b-pzfpyvbzpr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 124px;
    max-width: calc(100% - 12px);
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    user-select: none;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Los márgenes automáticos centran el pin sin convertir el cuerpo en contenedor flex; las acciones
   de filtro ya viven en uno propio y no los necesitan. */
.dcb-config-pin-toggle[b-pzfpyvbzpr] {
    margin: 6px auto 0;
}

.dcb-config-pin-toggle svg[b-pzfpyvbzpr],
.dcb-config-filter-action svg[b-pzfpyvbzpr] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.dcb-config-pin-toggle svg[b-pzfpyvbzpr] {
    transition: transform 160ms ease;
}

/* El pin ladeado refuerza el estado sin depender del color: quien no distingue verde de gris ve la
   diferencia igual, y el rótulo la nombra. Ladeado es el que no está fijado; los dos fijados lo
   llevan derecho y se separan entre sí por el color y por el rótulo. */
.dcb-config-pin-toggle.is-unpinned svg[b-pzfpyvbzpr] {
    transform: rotate(40deg);
}

.dcb-config-pin-toggle span[b-pzfpyvbzpr],
.dcb-config-filter-action span[b-pzfpyvbzpr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcb-config-pin-toggle:hover[b-pzfpyvbzpr],
.dcb-config-filter-action:hover:not(:disabled)[b-pzfpyvbzpr] {
    border-color: #94a3b8;
    background: #e2e8f0;
    color: #334155;
}

/* Fijado abierto: verde, el estado pleno —columna propia con sus órdenes—. */
.dcb-config-pin-toggle.is-pinned-open[b-pzfpyvbzpr] {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}

.dcb-config-pin-toggle.is-pinned-open:hover[b-pzfpyvbzpr] {
    border-color: #15803d;
    background: #bbf7d0;
    color: #14532d;
}

/* Fijado cerrado: ámbar, a medio camino entre estar en el tablero y no ocupar columna. Sigue
   fijado, así que se distingue del gris de «no fijado» y del verde del abierto. */
.dcb-config-pin-toggle.is-pinned-collapsed[b-pzfpyvbzpr] {
    border-color: #d97706;
    background: #fef3c7;
    color: #92400e;
}

.dcb-config-pin-toggle.is-pinned-collapsed:hover[b-pzfpyvbzpr] {
    border-color: #b45309;
    background: #fde68a;
    color: #78350f;
}

/* No fijado: el gris de la píldora en reposo, el mismo que tenían antes los no fijados. */
.dcb-config-pin-toggle.is-unpinned[b-pzfpyvbzpr] {
    border-color: #cbd5e1;
    background: #eef2f7;
    color: #475569;
}

.dcb-config-pin-toggle:focus-visible[b-pzfpyvbzpr] {
    outline: 2px solid #d81b84;
    outline-offset: 1px;
}

/* En columna y centradas, en línea con el pin de arriba. Lado a lado en un grid de dos, los rótulos
   se cortaban en cuanto aparecía el segundo botón: la celda mide 160 px. */
.dcb-config-filter-actions[b-pzfpyvbzpr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 6px;
}

.dcb-config-filter-action:focus-visible[b-pzfpyvbzpr] {
    outline: 2px solid #d81b84;
    outline-offset: 1px;
}

.dcb-config-filter-action:disabled[b-pzfpyvbzpr] {
    cursor: not-allowed;
    opacity: 0.52;
}

.dcb-config-grid-cell[b-pzfpyvbzpr] {
    z-index: 4;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    background: rgba(241, 245, 249, 0.42);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.dcb-insertion-edge-anchor[b-pzfpyvbzpr] {
    position: relative;
    z-index: 9;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
}

.dcb-insertion-edge[b-pzfpyvbzpr] {
    position: absolute;
    display: block;
    pointer-events: auto;
}

.dcb-insertion-edge[b-pzfpyvbzpr]::after {
    position: absolute;
    content: "";
    border-radius: 999px;
    background: transparent;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.dcb-insertion-edge.is-left[b-pzfpyvbzpr],
.dcb-insertion-edge.is-right[b-pzfpyvbzpr] {
    top: 0;
    bottom: 18px;
    width: 28px;
}

.dcb-insertion-edge.is-left[b-pzfpyvbzpr] {
    left: -12px;
}

.dcb-insertion-edge.is-right[b-pzfpyvbzpr] {
    right: -12px;
}

.dcb-insertion-edge.is-left[b-pzfpyvbzpr]::after,
.dcb-insertion-edge.is-right[b-pzfpyvbzpr]::after {
    top: 8px;
    bottom: 8px;
    width: 3px;
}

.dcb-insertion-edge.is-left[b-pzfpyvbzpr]::after {
    left: 11px;
}

.dcb-insertion-edge.is-right[b-pzfpyvbzpr]::after {
    right: 11px;
}

.dcb-insertion-edge.is-bottom[b-pzfpyvbzpr] {
    right: 18px;
    bottom: -12px;
    left: 18px;
    height: 28px;
}

.dcb-insertion-edge.is-bottom[b-pzfpyvbzpr]::after {
    right: 8px;
    bottom: 11px;
    left: 8px;
    height: 3px;
}

.dcb-insertion-edge:hover[b-pzfpyvbzpr]::after,
.dcb-insertion-edge.dcb-native-drag-target[b-pzfpyvbzpr]::after,
.dcb-insertion-edge.is-active.is-valid[b-pzfpyvbzpr]::after {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.dcb-insertion-edge.is-active.is-invalid[b-pzfpyvbzpr]::after {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.dcb-config-grid-cell.is-available[b-pzfpyvbzpr] {
    cursor: copy;
}

.dcb-config-grid-cell.is-available:hover[b-pzfpyvbzpr] {
    border-color: #2563eb;
    background: rgba(59, 130, 246, 0.12);
}

.dcb-config-grid-cell.dcb-native-drag-target[b-pzfpyvbzpr] {
    border-color: #dea301;
    background: rgba(222, 163, 1, 0.16);
}

.dcb-config-grid-cell.is-resize-reference[b-pzfpyvbzpr] {
    pointer-events: none;
}

.dcb-config-grid-cell.is-growth-column[b-pzfpyvbzpr] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #0284c7;
    background: rgba(14, 165, 233, 0.1);
}

.dcb-config-growth-hit-target[b-pzfpyvbzpr] {
    position: absolute;
    z-index: 10;
    right: 0;
    display: block;
    width: var(--dcb-growth-hit-width);
    background: transparent;
    cursor: copy;
}

.dcb-config-growth-hit-target[aria-disabled="true"][b-pzfpyvbzpr] {
    cursor: not-allowed;
}

.dcb-config-growth-hit-target.dcb-native-drag-target[b-pzfpyvbzpr] {
    background: rgba(222, 163, 1, 0.18);
}

.dcb-config-zone-grid.is-right-to-left .dcb-config-growth-hit-target[b-pzfpyvbzpr] {
    right: auto;
    left: 0;
}

.dcb-config-growth-rail[b-pzfpyvbzpr] {
    position: absolute;
    z-index: 11;
    right: 0;
    display: block;
    width: var(--dcb-growth-rail-width);
    border-radius: 4px;
    pointer-events: none;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.dcb-config-zone-grid.is-right-to-left .dcb-config-growth-rail[b-pzfpyvbzpr] {
    right: auto;
    left: 0;
}

.dcb-config-growth-rail.is-valid[b-pzfpyvbzpr] {
    background: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.28);
}

.dcb-config-growth-rail.is-invalid[b-pzfpyvbzpr] {
    background: #dc2626;
    box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.28);
}

.dcb-config-growth-label[b-pzfpyvbzpr] {
    padding: 3px 6px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}

.dcb-config-grid-cell.is-occupied[b-pzfpyvbzpr],
.dcb-config-grid-cell.is-forbidden[b-pzfpyvbzpr] {
    cursor: not-allowed;
    border-color: #cbd5e1;
    background: repeating-linear-gradient(
        -45deg,
        rgba(100, 116, 139, 0.16),
        rgba(100, 116, 139, 0.16) 4px,
        rgba(226, 232, 240, 0.34) 4px,
        rgba(226, 232, 240, 0.34) 8px);
}

.dcb-config-drop-preview[b-pzfpyvbzpr] {
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    border: 2px solid;
    border-radius: 8px;
    pointer-events: none;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.dcb-config-drop-preview.is-valid[b-pzfpyvbzpr] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.2);
    color: #166534;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.dcb-config-drop-preview.is-invalid[b-pzfpyvbzpr] {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.18);
    color: #991b1b;
}

@media (prefers-reduced-motion: reduce) {
    .dcb-config-process[b-pzfpyvbzpr],
    .dcb-insertion-edge[b-pzfpyvbzpr]::after,
    .dcb-config-grid-cell[b-pzfpyvbzpr],
    .dcb-config-growth-rail[b-pzfpyvbzpr] {
        transition-duration: 0.01ms;
    }
}

.dcb-resize-handle[b-pzfpyvbzpr] {
    position: absolute;
    z-index: 8;
    display: block;
    border: 0;
    background: transparent;
    opacity: 0;
    touch-action: none;
    user-select: none;
    transition: opacity 160ms ease;
}

.dcb-resize-handle[b-pzfpyvbzpr]::before {
    position: absolute;
    content: "";
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.58);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.84);
}

.dcb-config-process:hover .dcb-resize-handle[b-pzfpyvbzpr],
.dcb-config-process:focus-within .dcb-resize-handle[b-pzfpyvbzpr],
.dcb-config-process.is-resizing .dcb-resize-handle[b-pzfpyvbzpr] {
    opacity: 1;
}

.dcb-config-zone-grid.is-resizing-layout .dcb-config-process:not(.is-resizing) .dcb-resize-handle[b-pzfpyvbzpr] {
    pointer-events: none;
}

.dcb-resize-handle:focus-visible[b-pzfpyvbzpr] {
    outline: 2px solid #d81b84;
    outline-offset: -4px;
    opacity: 1;
}

.dcb-resize-handle.is-width[b-pzfpyvbzpr] {
    top: 50%;
    right: -18px;
    width: 36px;
    height: 44px;
    cursor: col-resize;
    transform: translateY(-50%);
}

.dcb-resize-handle.is-width[b-pzfpyvbzpr]::before {
    top: 10px;
    right: 16px;
    width: 4px;
    height: 24px;
}

.dcb-resize-handle.is-height[b-pzfpyvbzpr] {
    bottom: -18px;
    left: 50%;
    width: 44px;
    height: 36px;
    cursor: row-resize;
    transform: translateX(-50%);
}

.dcb-resize-handle.is-height[b-pzfpyvbzpr]::before {
    bottom: 16px;
    left: 10px;
    width: 24px;
    height: 4px;
}

.dcb-resize-handle.is-both[b-pzfpyvbzpr] {
    right: -18px;
    bottom: -18px;
    width: 36px;
    height: 36px;
    cursor: nwse-resize;
}

.dcb-resize-handle.is-both[b-pzfpyvbzpr]::before {
    right: 12px;
    bottom: 12px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-width[b-pzfpyvbzpr] {
    right: auto;
    left: -18px;
}

.dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-width[b-pzfpyvbzpr]::before {
    right: auto;
    left: 16px;
}

.dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-both[b-pzfpyvbzpr] {
    right: auto;
    left: -18px;
    cursor: nesw-resize;
}

.dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-both[b-pzfpyvbzpr]::before {
    right: auto;
    left: 12px;
}

.dcb-visually-hidden[b-pzfpyvbzpr] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (hover: none), (pointer: coarse) {
    .dcb-resize-handle[b-pzfpyvbzpr] {
        width: 44px !important;
        height: 44px !important;
        opacity: 0.42;
    }

    .dcb-resize-handle.is-width[b-pzfpyvbzpr] {
        right: -22px;
    }

    .dcb-resize-handle.is-height[b-pzfpyvbzpr] {
        bottom: -22px;
    }

    .dcb-resize-handle.is-both[b-pzfpyvbzpr] {
        right: -22px;
        bottom: -22px;
    }

    .dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-width[b-pzfpyvbzpr],
    .dcb-config-zone-grid.is-right-to-left .dcb-resize-handle.is-both[b-pzfpyvbzpr] {
        right: auto;
        left: -22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dcb-config-process[b-pzfpyvbzpr],
    .dcb-config-grid-cell[b-pzfpyvbzpr],
    .dcb-config-pin-toggle[b-pzfpyvbzpr],
    .dcb-config-pin-toggle svg[b-pzfpyvbzpr],
    .dcb-config-growth-rail[b-pzfpyvbzpr],
    .dcb-resize-handle[b-pzfpyvbzpr],
    .dcb-insertion-edge[b-pzfpyvbzpr]::after {
        transition-duration: 0.01ms;
    }
}

@media (pointer: coarse) {
    .dcb-config-zone-grid[b-pzfpyvbzpr] {
        --dcb-growth-hit-width: 44px;
    }

    /* Las tres píldoras crecen juntas: con el área táctil aplicada solo al pin, en una pantalla de
       taller quedaba una fila de 36 px sobre dos de 28 y se veía el desnivel. */
    .dcb-config-pin-toggle[b-pzfpyvbzpr],
    .dcb-config-filter-action[b-pzfpyvbzpr] {
        height: 36px;
        padding: 0 14px;
        font-size: 11px;
    }

    .dcb-insertion-edge.is-left[b-pzfpyvbzpr],
    .dcb-insertion-edge.is-right[b-pzfpyvbzpr] {
        width: 44px;
    }

    .dcb-insertion-edge.is-left[b-pzfpyvbzpr] {
        left: -20px;
    }

    .dcb-insertion-edge.is-right[b-pzfpyvbzpr] {
        right: -20px;
    }

    .dcb-insertion-edge.is-left[b-pzfpyvbzpr]::after {
        left: 19px;
    }

    .dcb-insertion-edge.is-right[b-pzfpyvbzpr]::after {
        right: 19px;
    }

    .dcb-insertion-edge.is-bottom[b-pzfpyvbzpr] {
        bottom: -20px;
        height: 44px;
    }

    .dcb-insertion-edge.is-bottom[b-pzfpyvbzpr]::after {
        bottom: 19px;
    }
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/DcbProcessDeleteDialog.razor.rz.scp.css */
.dcb-delete-dialog-backdrop[b-jeewricbye] {
    position: fixed;
    inset: 0;
    z-index: 3210;
    display: grid;
    place-items: center;
    padding: 24px;
}

.dcb-delete-dialog[b-jeewricbye] {
    width: min(500px, 100%);
    overflow: hidden;
    border: 1px solid rgba(143, 31, 31, 0.2);
    border-radius: 16px;
    background: #ffffff;
    color: #1f304d;
    box-shadow: 0 24px 72px rgba(0, 20, 42, 0.34);
}

.dcb-delete-dialog:focus[b-jeewricbye] {
    outline: none;
}

.dcb-delete-dialog-header[b-jeewricbye] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid #fecaca;
    background: #fff7f7;
}

.dcb-delete-dialog-header h2[b-jeewricbye] {
    margin: 0;
    color: #7f1d1d;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.dcb-delete-dialog-header p[b-jeewricbye] {
    margin: 6px 0 0;
    color: #5e3a3a;
    font-size: 13px;
    line-height: 1.45;
}

.dcb-delete-dialog-icon[b-jeewricbye] {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 10px;
    background: #fee2e2;
    color: #b42318;
}

.dcb-delete-dialog-icon svg[b-jeewricbye] {
    width: 21px;
    height: 21px;
}

.dcb-delete-dialog-body[b-jeewricbye] {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.dcb-delete-dialog fieldset[b-jeewricbye] {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dcb-delete-dialog legend[b-jeewricbye] {
    margin-bottom: 10px;
    color: #1f304d;
    font-size: 14px;
    font-weight: 800;
}

.dcb-delete-choice[b-jeewricbye] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

.dcb-delete-choice:hover[b-jeewricbye] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.dcb-delete-choice.is-selected[b-jeewricbye] {
    border-color: #d81b84;
    background: #fff4fa;
    box-shadow: inset 0 0 0 1px rgba(216, 27, 132, 0.12);
}

.dcb-delete-choice input[b-jeewricbye] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #d81b84;
}

.dcb-delete-choice span[b-jeewricbye] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dcb-delete-choice strong[b-jeewricbye] {
    overflow-wrap: anywhere;
    color: #1f304d;
    font-size: 13px;
}

.dcb-delete-choice small[b-jeewricbye] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.dcb-delete-dialog-warning[b-jeewricbye] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff8e7;
    color: #7a4b00;
    font-size: 12px;
    line-height: 1.4;
}

.dcb-delete-dialog-warning svg[b-jeewricbye] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.dcb-delete-dialog-actions[b-jeewricbye] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 22px;
}

.dcb-delete-dialog-button[b-jeewricbye] {
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
}

.dcb-delete-dialog-button.is-secondary[b-jeewricbye] {
    border-color: #b8c5d6;
    background: #ffffff;
    color: #1f304d;
}

.dcb-delete-dialog-button.is-danger[b-jeewricbye] {
    border-color: #b42318;
    background: #b42318;
    color: #ffffff;
}

.dcb-delete-dialog-button.is-danger:hover[b-jeewricbye] {
    border-color: #8f1f1f;
    background: #8f1f1f;
}

.dcb-delete-dialog-button:focus-visible[b-jeewricbye],
.dcb-delete-choice input:focus-visible[b-jeewricbye] {
    outline: 3px solid rgba(216, 27, 132, 0.28);
    outline-offset: 2px;
}

.dcb-delete-dialog-button:disabled[b-jeewricbye],
.dcb-delete-dialog fieldset:disabled .dcb-delete-choice[b-jeewricbye] {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 520px) {
    .dcb-delete-dialog-backdrop[b-jeewricbye] {
        align-items: end;
        padding: 12px;
    }

    .dcb-delete-dialog-header[b-jeewricbye],
    .dcb-delete-dialog-body[b-jeewricbye] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .dcb-delete-dialog-actions[b-jeewricbye] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .dcb-delete-dialog-button[b-jeewricbye] {
        flex: 1;
    }
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/DcbProcessFilterDialog.razor.rz.scp.css */
.dcb-filter-dialog-backdrop[b-700gxvqr13] {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: grid;
    place-items: center;
    padding: 24px;
}

.dcb-filter-dialog[b-700gxvqr13] {
    width: min(520px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    max-height: min(760px, calc(100dvh - 48px));
    overflow: hidden auto;
    border: 1px solid rgba(0, 31, 63, 0.14);
    border-radius: 16px;
    background: #ffffff;
    color: #1f304d;
    box-shadow: 0 24px 72px rgba(0, 20, 42, 0.34);
}

.dcb-filter-dialog:focus[b-700gxvqr13] {
    outline: none;
}

/* El fondo lo pone el proceso de origen, por atributo `style`. Aquí no se fija color: el navy que
   había antes no era ninguno de los de la paleta y, sobre todo, no decía nada de lo que se duplica. */
.dcb-filter-dialog-header[b-700gxvqr13] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    color: #ffffff;
}

.dcb-filter-dialog-heading[b-700gxvqr13] {
    min-width: 0;
}

/* Sin `flex-wrap`: con un nombre largo la píldora de secuencia se iba sola a una línea; así se
   queda fija al inicio y el nombre envuelve a su lado. */
.dcb-filter-dialog-header h2[b-700gxvqr13] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0;
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* La misma píldora de secuencia que lleva la tarjeta en la configuración del tablero, para que
   el número se reconozca de un vistazo como «el orden del proceso» y no como un contador. */
.dcb-filter-dialog-sequence[b-700gxvqr13] {
    display: inline-grid;
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dcb-filter-dialog-origin[b-700gxvqr13] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    line-height: 1.3;
}

.dcb-filter-dialog-origin-label[b-700gxvqr13] {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dcb-filter-dialog-origin-name[b-700gxvqr13] {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dcb-filter-dialog-visually-hidden[b-700gxvqr13] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dcb-filter-dialog-eyebrow[b-700gxvqr13] {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dcb-filter-dialog-intro[b-700gxvqr13] {
    margin: 0 0 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.dcb-filter-dialog-icon[b-700gxvqr13] {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
}

.dcb-filter-dialog-icon svg[b-700gxvqr13],
.dcb-filter-dialog-close svg[b-700gxvqr13] {
    width: 20px;
    height: 20px;
}

.dcb-filter-dialog-close[b-700gxvqr13] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.dcb-filter-dialog-form[b-700gxvqr13] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.dcb-filter-dialog-field[b-700gxvqr13] {
    display: grid;
    gap: 7px;
}

.dcb-filter-dialog-field label[b-700gxvqr13] {
    color: #334d6e;
    font-size: 13px;
    font-weight: 700;
}

/* Campos del estándar administrativo de SysTime: fondo hueso, borde tenue y foco magenta con halo.
   El blanco sobre blanco de antes dejaba el campo sin límite visible hasta pasarle el puntero. */
.dcb-filter-dialog-field input[b-700gxvqr13],
.dcb-filter-dialog-field select[b-700gxvqr13] {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #e4e9f2;
    border-radius: 8px;
    background: #f7f9fc;
    color: #334d6e;
    font: inherit;
    font-size: 14px;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.dcb-filter-dialog-field input:hover[b-700gxvqr13],
.dcb-filter-dialog-field select:hover[b-700gxvqr13] {
    border-color: #cbd5e1;
}

.dcb-filter-dialog-close:focus-visible[b-700gxvqr13],
.dcb-filter-dialog-button:focus-visible[b-700gxvqr13] {
    outline: 3px solid rgba(216, 27, 132, 0.28);
    outline-offset: 2px;
}

.dcb-filter-dialog-field input:focus[b-700gxvqr13],
.dcb-filter-dialog-field select:focus[b-700gxvqr13] {
    outline: none;
    border-color: #d81b84;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(216, 27, 132, 0.12);
}

.dcb-filter-dialog-field input:disabled[b-700gxvqr13],
.dcb-filter-dialog-field select:disabled[b-700gxvqr13] {
    cursor: not-allowed;
    background: #eef2f7;
    color: #718096;
}

.dcb-filter-dialog-help[b-700gxvqr13] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.dcb-filter-dialog-help.is-warning[b-700gxvqr13] {
    color: #9a5b00;
}

.dcb-filter-dialog-summary[b-700gxvqr13] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #a7d7bf;
    border-radius: 10px;
    background: #ecfdf5;
    color: #166534;
    font-size: 13px;
    line-height: 1.45;
}

.dcb-filter-dialog-summary svg[b-700gxvqr13] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.dcb-filter-dialog-error[b-700gxvqr13] {
    margin: -4px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #c62828;
    border-radius: 6px;
    background: #fff1f2;
    color: #9f1239;
    font-size: 13px;
}

.dcb-filter-dialog-actions[b-700gxvqr13] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}

.dcb-filter-dialog-action-spacer[b-700gxvqr13] {
    flex: 1;
}

/* Píldoras, como el resto de los formularios administrativos. */
.dcb-filter-dialog-button[b-700gxvqr13] {
    min-height: 40px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Magenta: es el color de acción de la marca. En navy competía con la cabecera y no se distinguía
   de «Cancelar» más que por el relleno. */
.dcb-filter-dialog-button.is-primary[b-700gxvqr13] {
    background: #d81b84;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(216, 27, 132, 0.3);
}

.dcb-filter-dialog-button.is-primary:hover:not(:disabled)[b-700gxvqr13] {
    background: #be185d;
    box-shadow: 0 6px 14px rgba(216, 27, 132, 0.36);
    transform: translateY(-1px);
}

.dcb-filter-dialog-button.is-secondary[b-700gxvqr13] {
    background: #e8ebed;
    color: #334d6e;
}

.dcb-filter-dialog-button.is-secondary:hover:not(:disabled)[b-700gxvqr13] {
    background: #dbe0e4;
}

@media (prefers-reduced-motion: reduce) {
    .dcb-filter-dialog-button[b-700gxvqr13],
    .dcb-filter-dialog-field input[b-700gxvqr13],
    .dcb-filter-dialog-field select[b-700gxvqr13] {
        transition: none;
    }

    .dcb-filter-dialog-button.is-primary:hover:not(:disabled)[b-700gxvqr13] {
        transform: none;
    }
}

.dcb-filter-dialog-button.is-delete[b-700gxvqr13] {
    border-color: transparent;
    background: transparent;
    color: #b42318;
}

.dcb-filter-dialog-button.is-delete:hover[b-700gxvqr13] {
    background: #fff1f2;
}

.dcb-filter-dialog-button:disabled[b-700gxvqr13] {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 560px) {
    .dcb-filter-dialog-backdrop[b-700gxvqr13] {
        align-items: end;
        padding: 12px;
    }

    .dcb-filter-dialog[b-700gxvqr13] {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
    }

    .dcb-filter-dialog-header[b-700gxvqr13],
    .dcb-filter-dialog-form[b-700gxvqr13] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .dcb-filter-dialog-actions[b-700gxvqr13] {
        flex-wrap: wrap;
    }

    .dcb-filter-dialog-action-spacer[b-700gxvqr13] {
        display: none;
    }

    .dcb-filter-dialog-button[b-700gxvqr13] {
        flex: 1 1 140px;
    }

    .dcb-filter-dialog-button.is-delete[b-700gxvqr13] {
        flex-basis: 100%;
    }
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/DcbWorkforceCard.razor.rz.scp.css */
/* La tarjeta trae su propio recuadro: el CSS aislado del panel no viste los elementos de un componente
   hijo, así que heredar `.proc-kpi-card` de allí la dejaría sin fondo ni altura. Las medidas son las
   de la tarjeta de operarios y la de bahías, que ocupan este mismo sitio en las otras dos pestañas. */
.proc-kpi-card[b-s1jmttvlip] {
    background: #F5F9FA;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.dcb-workforce-card[b-s1jmttvlip] {
    /* Base 0: con `auto` la tarjeta reclamaba toda la fila y el recorte caía sobre las cuatro
       tarjetas de estado, que perdían el final de sus rótulos. Solo crece con lo que sobra. */
    flex: 1 1 0;
    min-width: min-content;
    width: 100%;
    display: grid;
    /* `min-content` es la palabra más larga de la columna: por debajo de eso el rótulo se saldría
       sobre su vecino. La cuarta lleva la barra y el botón, y no baja de lo que el botón pide. */
    grid-template-columns: repeat(3, minmax(min-content, 1fr)) minmax(max-content, 1.6fr);
    align-items: stretch;
    gap: 0;
    padding: 4px 10px;
    min-height: 52px;
    overflow: hidden;
}

/* Columna centrada con un filete a la derecha, igual que en las otras dos tarjetas: sin él, cinco
   cifras seguidas se leen como una sola lista y se pierde qué rótulo va con cuál. */
.dcb-wf-col[b-s1jmttvlip] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 0 6px;
    border: none;
    background: transparent;
    text-align: left;
    box-sizing: border-box;
}

.dcb-wf-col:not(:last-child)[b-s1jmttvlip]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.5px;
    height: 42px;
    border-radius: 999px;
    background: #edf2f7;
    transform: translateY(-50%);
}

.dcb-wf-col--action[b-s1jmttvlip] {
    cursor: pointer;
}

.dcb-wf-col--action:hover[b-s1jmttvlip] {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
}

.dcb-wf-col--actions[b-s1jmttvlip] {
    justify-content: center;
    align-items: stretch;
    gap: 4px;
}

/* Las dos cifras de la primera columna, apiladas: cuánto hay en reparación y cuánto de eso tiene
   reloj. Leídas una sobre otra, la resta entre ambas es la cifra roja de al lado. */
.dcb-wf-stack[b-s1jmttvlip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

/* Las placas de lo que está quieto y el proceso que acumula lo estancado. Nombrarlos evita que la
   cifra obligue a abrir el cajón solo para saber de qué vehículo se trata.

   `contain: inline-size` es lo que impide que las placas fijen el ancho mínimo de su columna: el
   elemento deja de medirse por su contenido y toma el ancho que la columna le dé. Sin eso, tres
   placas seguidas pedían 114 px y la tarjeta entera no bajaba de 386 —la que reemplaza pide 298—,
   así que en una pantalla estrecha se salía de la fila en vez de encogerse. Las placas son el
   detalle; lo que no puede recortarse es la cifra con su rótulo. */
.dcb-wf-chips[b-s1jmttvlip] {
    display: flex;
    /* Envuelven, con la caja a la altura de una sola línea: lo que no cabe cae al renglón siguiente,
       que queda fuera de la caja y no se ve. Sin envolver, la columna estrecha mostraba media placa
       —«KTE7…» partido por la mitad— y una placa a medias no identifica ningún vehículo. */
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* El ancho tiene que venir declarado, no del contenido: con `contain` y sin `width`, el elemento
       se mide sin lo que lleva dentro y las placas quedaban recortadas a cero en todos los anchos. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    contain: inline-size;
    height: 15px;
}

.dcb-wf-chip[b-s1jmttvlip] {
    flex: 0 0 auto;
    /* Nunca más ancha que su caja: así la placa que no cabe se recorta con puntos suspensivos en vez
       de salirse partida por la mitad. */
    max-width: min(78px, 100%);
    padding: 1px 5px;
    border-radius: 9px;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcb-wf-chip--alert[b-s1jmttvlip] {
    border: 1px solid #fecaca;
    background-color: #fef2f2;
    color: #b91c1c;
}

.dcb-wf-chip--watch[b-s1jmttvlip] {
    border: 1px solid #fcd9a4;
    background-color: #fff7ed;
    color: #b45309;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/WorkshopPocketCard.razor.rz.scp.css */
/* =========================================
   WorkshopPocketCard.razor.css — Physical Pocket Card & Sleeve (Full Soft Tone Tint)
   ========================================= */

.workshop-pocket-slot-container[b-df1ez223qo] {
    position: relative;
    width: 100%;
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* The rack grid already provides the 6px separation between work orders. Keeping a second
       bottom margin made a single card overflow a 1x1 DCB row. */
    margin-bottom: 0;
    box-sizing: border-box;
    overflow: visible !important;
    padding-top: 4px;
}

/* ── The Physical Card (Independent, Nestled Inside the Pocket Slot) ── */
.workshop-pocket-card[b-df1ez223qo] {
    position: relative;
    z-index: 2;
    /* Ancho único de la tarjeta de orden: lo publica CalendarPanel desde
       `DcbGridLayout.CardWidthPixels`, así mide lo mismo en PROC, JSCB, JPCB y en el panel de un
       bolsillo recogido. Medida contra el 100 % de la columna, el DCB —con su columna más ancha—
       dibujaba tarjetas más anchas que los otros dos tableros. El calce a cada lado lo sigue
       repartiendo el centrado.

       Los tres anchos son el mismo valor a propósito: con solo `width`, un pie largo —el contador de
       días cuando la orden no tiene fecha de ingreso— ensanchaba la tarjeta y rompía la retícula. El respaldo de 144 px
       —`DcbGridLayout.CardWidthPixels`— cubre el caso de que la tarjeta se dibuje fuera del panel
       que publica la variable: sin él, `width` quedaría en `auto` y volvería a mandar el contenido. */
    --pocket-card-width: var(--work-order-card-width, 144px);
    width: var(--pocket-card-width);
    min-width: var(--pocket-card-width);
    max-width: var(--pocket-card-width);
    flex: 0 0 auto;
    align-self: center;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 10px 10px;
    cursor: grab;
    box-shadow: 0 -4px 7px -1px rgba(15, 23, 42, 0.12);
    transition: transform 0.25s cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 0.25s ease;
    user-select: none;
    box-sizing: border-box;
    height: 82px;
    min-height: 82px;
    max-height: 82px;
    padding: 5px 8px 11px 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible !important;
    will-change: transform, box-shadow;
}

/* Animación física: Al pasar el mouse, la tarjeta se extrae con sombra sutil y contenida sin tocar bordes laterales */
.workshop-pocket-card:hover[b-df1ez223qo] {
    transform: translateY(-8px);
    box-shadow: 0 -4px 8px -1px rgba(15, 23, 42, 0.09);
    z-index: 2; /* Se mantiene siempre dentro del riel detrás de la solapa frontal */
}

.workshop-pocket-card.dragging[b-df1ez223qo] {
    opacity: 0.45 !important;
    transform: scale(0.97);
}

.workshop-pocket-card.pending-handover[b-df1ez223qo] {
    cursor: wait;
    opacity: 0.72;
}

.handover-pending-label[b-df1ez223qo] {
    position: absolute;
    inset: auto 8px 6px 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

.pocket-card-traffic-indicator[b-df1ez223qo] {
    position: absolute;
    left: 5px;
    top: 8px;
    width: 6px;
    height: 38px;
    border-radius: 3px;
    flex-shrink: 0;
    z-index: 3;
    pointer-events: none;
    transition: background-color 0.2s ease;
}

/* ── Physical Pocket Base & Front Notch Lip (Spans 100% Flush to Column Borders, Deep Pocketing) ── */
.pocket-slot-front-notch[b-df1ez223qo] {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 100%;
    height: 22px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 -3px 3px rgba(15, 23, 42, 0.12));
    clip-path: inset(-12px 1px 0px 1px);
}

.pocket-slot-front-notch[b-df1ez223qo]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #F5F9FA !important;
    clip-path: polygon(0 0, 10px 0, 20px 10px, calc(100% - 20px) 10px, calc(100% - 10px) 0, 100% 0, 100% 100%, 0 100%);
}

/* ── Card Main Content ── */
.card-main-content[b-df1ez223qo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 0;
}

/* Line 1: OT Number (Siempre visible, con prioridad de capa por encima de la matrícula) */
.card-ot-number[b-df1ez223qo] {
    position: relative;
    z-index: 2;
    font-size: 13px;
    font-weight: 700;
    color: #334155 !important;
    line-height: 1.15;
    min-height: 16px;
    margin: 0 0 1px 0;
    padding: 0 26px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

/* Line 2: Plate Number + Insurance Badge (Debajo de la OT, sin solaparla) */
.card-plate-row[b-df1ez223qo] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    margin-top: 1px;
    margin-bottom: 2px;
    width: 100%;
    line-height: 1.2;
}

.card-plate-number[b-df1ez223qo] {
    font-family: 'DIN 1451', 'DIN 1451 Mittelschrift', 'Bahnschrift', 'DIN Alternate', 'DIN Next LT Pro', 'DINPro', sans-serif !important;
    font-size: 16px;
    font-weight: 700;
    color: #3D5676 !important;
    letter-spacing: -0.2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Damage Level Badge (Gold/Ochre Circle - En el borde superior derecho sin borde blanco) */
.damage-level-badge[b-df1ez223qo] {
    position: absolute;
    top: -8px;
    right: 1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 6;
    pointer-events: none;
    line-height: 1;
}

.insurance-badge-container[b-df1ez223qo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 48px;
    height: 16px;
    margin-left: auto;
    margin-top: -6px;
    transform: translateY(-3px);
    flex-shrink: 0;
}

.insurance-logo-img[b-df1ez223qo] {
    max-height: 14px;
    max-width: 45px;
    object-fit: contain;
    border-radius: 2px;
}

/* Particular: Ícono morado sin texto */
.particular-shield-icon[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #c026d3;
    filter: drop-shadow(0 1px 2px rgba(192, 38, 211, 0.25));
    line-height: 1;
}

.insurance-name-pill[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 8.5px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    line-height: 1;
}

.insurance-name-pill.priority-high[b-df1ez223qo] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.insurance-label-text[b-df1ez223qo] {
    letter-spacing: -0.2px;
}

/* Line 3: Days in Workshop + Technician Avatar (Completamente visible por encima de la solapa) */
.card-footer-row[b-df1ez223qo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    padding-bottom: 0;
}

.card-days-counter[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-light-text-secondary, #64748b);
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
    margin-bottom: 0;
    transform: translateY(-4px);
    min-width: 0;
    overflow: hidden;
}

/* El texto se recorta dentro del ancho fijo de la tarjeta en vez de estirarla. */
.card-days-text[b-df1ez223qo] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pocket-card-indicator[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-left: 2px;
    vertical-align: middle;
}

.pocket-card-indicator.is-ready[b-df1ez223qo] {
    color: #10b981;
    opacity: 0.95;
}

.pocket-card-indicator.is-authorized-only[b-df1ez223qo] {
    color: #0284c7;
    opacity: 0.95;
}

.pocket-card-indicator.is-pending-auth[b-df1ez223qo] {
    color: #f59e0b;
    opacity: 0.95;
}

.pocket-card-indicator.is-out-of-store[b-df1ez223qo] {
    color: #ef4444;
    opacity: 0.95;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Reloj minimalista: la OT ya tiene horas asignadas a procesos de reparación. Va en el mismo
   tono que los días y con trazo fino para que informe sin competir con el semáforo ni el nivel. */
.repair-hours-clock[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: var(--color-light-text-secondary, #64748b);
    opacity: 0.85;
    flex-shrink: 0;
}

.repair-hours-clock svg[b-df1ez223qo] {
    width: 12px;
    height: 12px;
    stroke-width: 2.25;
}

.authorization-shield[b-df1ez223qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: #10b981;
    opacity: 0.9;
    flex-shrink: 0;
}

.card-tech-avatar[b-df1ez223qo] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-tech-avatar img[b-df1ez223qo] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    display: block;
}

.tech-initials-avatar[b-df1ez223qo] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1.5px solid #ffffff;
    letter-spacing: -0.5px;
    user-select: none;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/WorkshopPocketColumn.razor.rz.scp.css */
/* =========================================
   WorkshopPocketColumn.razor.css — Pocket Column Structure & Rack
   ========================================= */

/* La columna ya no pinta panel: el fondo lo pone la zona (pre-reparación, reparación,
   post-reparación) por detrás de todas sus listas, así el tablero se lee como tres tableros
   físicos y no como una fila de cajitas sueltas. Se deja el borde transparente para que
   `drag-over` siga teniendo dónde dibujarse sin mover el layout. */
.workshop-pocket-column[b-ct97folnfq] {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    height: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 !important;
}

.workshop-pocket-column.multi-col-pocket[b-ct97folnfq] {
    min-height: 80px;
}

.workshop-pocket-column.drag-over[b-ct97folnfq] {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

/* ── Pocket Header (Cuadrado Redondeado en los Bordes) ── */
.pocket-column-header[b-ct97folnfq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    /* Caja fija: el título se recorta a dos renglones, y con `min-height` la cabecera de dos líneas
       salía más alta que la de una, así que los bolsillos vecinos no arrancaban su rack a la misma
       altura. 36 px dan sitio a los dos renglones (11 px × 1.15 × 2 + relleno) sin que la de un solo
       renglón crezca ni se encoja. El ancho es siempre el de la columna, nunca el del texto. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    align-self: stretch;
    /* La cabecera nunca cede alto: es un elemento flex dentro de la columna y, con la zona apretada,
       sin esto se comprime hasta desaparecer y el bolsillo se queda sin título. */
    flex-shrink: 0;
    box-sizing: border-box;
    user-select: none;
    border-radius: 7px;
    gap: 4px;
}

/* Hasta dos renglones antes de recortar, igual que en configuración
   (`.dcb-config-process-title`): con una sola línea los nombres largos se cortaban tan pronto que
   dejaban de distinguirse entre sí. CalendarPanel.razor.css repite la regla porque sus selectores
   pisan a los del componente. */
.pocket-header-title[b-ct97folnfq] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pocket-header-badge[b-ct97folnfq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* ── Gestos de sesión en la cabecera ──
   Los botones se superponen al título, no se le suman: la cabecera es una caja fija de 36 px y un
   hueco que aparezca al pasar el ratón desplazaría el nombre. Se colocan a la izquierda del
   contador —que sigue leyéndose— y, mientras están a la vista, toman el fondo de la cabecera para
   taparle el trozo de título que les toca. El color viene por herencia porque cada bolsillo lo
   pinta en línea. */
.pocket-column-header[b-ct97folnfq] {
    position: relative;
}

.pocket-header-actions[b-ct97folnfq] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 34px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    pointer-events: none;
}

.pocket-column-header:hover .pocket-header-actions[b-ct97folnfq],
.pocket-column-header:focus-within .pocket-header-actions[b-ct97folnfq] {
    background-color: inherit;
    pointer-events: auto;
}

.pocket-header-action[b-ct97folnfq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.pocket-column-header:hover .pocket-header-action[b-ct97folnfq],
.pocket-column-header:focus-within .pocket-header-action[b-ct97folnfq],
.pocket-header-action.is-on[b-ct97folnfq] {
    opacity: 1;
    pointer-events: auto;
}

.pocket-header-action:hover[b-ct97folnfq] {
    background: rgba(255, 255, 255, 0.34);
}

.pocket-header-action:focus-visible[b-ct97folnfq] {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 1px;
}

/* En foco el botón de salir se queda fijo; el título le cede ese sitio siempre, no solo al pasar
   el ratón, así no hay salto. */
.workshop-pocket-column.is-focused .pocket-header-title[b-ct97folnfq] {
    padding-right: 26px;
}

.pocket-header-action.is-on[b-ct97folnfq] {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

@media (prefers-reduced-motion: reduce) {
    .pocket-header-action[b-ct97folnfq] {
        transition: none;
    }
}

/* ── Pocket Slot Rack (Physical Card Holder Rack - Centered with Padding) ── */
.pocket-slot-rack[b-ct97folnfq] {
    display: grid;
    grid-template-columns: repeat(var(--pocket-card-columns, 1), var(--pocket-col-width));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px 8px;
    padding: 10px 0 6px 0 !important;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 0 0 6px 6px;
    background: transparent !important;
    /* La lista sigue desplazándose; solo se oculta la barra. */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.pocket-slot-rack[b-ct97folnfq]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.empty-pocket-slot[b-ct97folnfq] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px !important;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    margin: 2px !important;
    padding: 0 4px !important;
    background: rgba(241, 245, 249, 0.6);
}

.empty-pocket-hint[b-ct97folnfq] {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.pocket-drop-valid[b-ct97folnfq] {
    border: 2px solid #10b981 !important;
    box-shadow: inset 0 0 14px rgba(16, 185, 129, 0.22), 0 0 8px rgba(16, 185, 129, 0.25) !important;
}
.pocket-drop-invalid[b-ct97folnfq] {
    border: 2px solid #ef4444 !important;
    box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.18), 0 0 8px rgba(239, 68, 68, 0.2) !important;
    opacity: 0.85;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/WorkshopPocketsConfigModal.razor.rz.scp.css */
/* ── Workshop Pockets Config Modal Backdrop ── */
.pockets-config-modal-backdrop[b-dx4wdter7d] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* ── Modal Main Window ── */
.pockets-config-modal-window[b-dx4wdter7d] {
    background: #ffffff;
    width: 96vw;
    max-width: 1560px;
    height: 94vh;
    max-height: 880px;
    border-radius: 16px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px 20px 20px;
    box-sizing: border-box;
}

/* ── Modal Header ── */
.pockets-modal-header[b-dx4wdter7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.header-branding[b-dx4wdter7d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-box[b-dx4wdter7d] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #475569;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.header-titles[b-dx4wdter7d] {
    display: flex;
    flex-direction: column;
}

.modal-title[b-dx4wdter7d] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

.modal-subtitle[b-dx4wdter7d] {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.header-modal-actions[b-dx4wdter7d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-cancel-pockets[b-dx4wdter7d] {
    background: #1e293b;
    color: #ffffff;
    border: none;
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-cancel-pockets:hover[b-dx4wdter7d] {
    background: #334155;
}

.btn-save-pockets[b-dx4wdter7d] {
    background: linear-gradient(135deg, #e500cd 0%, #c800b0 100%);
    color: #ffffff;
    border: none;
    padding: 6px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(229, 0, 205, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-save-pockets:hover[b-dx4wdter7d] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.45);
}

.modal-time-pill[b-dx4wdter7d] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.modal-brand-badge[b-dx4wdter7d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 9px;
    font-weight: 900;
    margin: 0 4px;
}

.brand-red[b-dx4wdter7d] {
    color: #dc2626;
    letter-spacing: 0.5px;
}

.brand-gray[b-dx4wdter7d] {
    color: #64748b;
    font-size: 8px;
    font-weight: 700;
}

.btn-close-modal[b-dx4wdter7d] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-close-modal:hover[b-dx4wdter7d] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* ── Top Area: Unassigned Operations Container ── */
.unassigned-operations-container[b-dx4wdter7d] {
    border: 1.5px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 12px;
    min-height: 80px;
    max-height: 110px;
    position: relative;
    padding: 10px 14px;
    margin-bottom: 12px;
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.watermark-label[b-dx4wdter7d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.35;
    text-align: center;
}

.watermark-label span[b-dx4wdter7d] {
    font-size: 10px;
    color: #64748b;
    text-transform: lowercase;
}

.watermark-label strong[b-dx4wdter7d] {
    font-size: 11px;
    color: #475569;
    letter-spacing: 0.8px;
    font-weight: 800;
}

.unassigned-grid[b-dx4wdter7d] {
    position: relative;
    min-height: 60px;
    z-index: 2;
}

.chip-pill[b-dx4wdter7d] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    height: 100%;
    box-sizing: border-box;
}

.chip-drag-handle[b-dx4wdter7d] {
    font-size: 14px;
    opacity: 0.8;
    margin-left: 6px;
}

/* ── Bottom Area: Active Board Layout ── */
.active-board-layout-container[b-dx4wdter7d] {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── Left Rack (2 Subcolumns / 4 Slots) ── */
.board-rack-left[b-dx4wdter7d] {
    display: flex;
    gap: 6px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    height: 100%;
}

.rack-subcol[b-dx4wdter7d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    height: 100%;
}

.rack-slot-card[b-dx4wdter7d] {
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.rack-slot-header[b-dx4wdter7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 700;
    user-select: none;
}

.rack-slot-body[b-dx4wdter7d] {
    flex: 1;
    position: relative;
    background: repeating-linear-gradient(
        45deg,
        rgba(241, 245, 249, 0.5),
        rgba(241, 245, 249, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
    );
}

.slot-resize-corner[b-dx4wdter7d] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 13px;
    color: #94a3b8;
    cursor: nwse-resize;
    user-select: none;
    line-height: 1;
    transition: color 0.15s ease;
}

.slot-resize-corner:hover[b-dx4wdter7d] {
    color: #3b82f6;
}

/* ── Center Stage (Dynamic Production Columns Grid) ── */
.board-stage-center[b-dx4wdter7d] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    position: relative;
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

.watermark-label-center[b-dx4wdter7d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.3;
    text-align: center;
}

.watermark-label-center span[b-dx4wdter7d] {
    font-size: 10px;
    color: #64748b;
    text-transform: lowercase;
}

.watermark-label-center strong[b-dx4wdter7d] {
    font-size: 11px;
    color: #475569;
    letter-spacing: 0.8px;
    font-weight: 800;
}

.center-pockets-grid[b-dx4wdter7d] {
    position: relative;
    min-height: 100%;
    z-index: 2;
}

.center-column-card[b-dx4wdter7d] {
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.column-card-header[b-dx4wdter7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    user-select: none;
    min-height: 24px;
}

.column-card-title[b-dx4wdter7d] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-drag-handle[b-dx4wdter7d] {
    font-size: 14px;
    opacity: 0.85;
    cursor: grab;
}

.column-card-body[b-dx4wdter7d] {
    flex: 1;
    position: relative;
    background: #ffffff;
}

/* ── Right Rack (3 Slots: QC, Close, Stopped) ── */
.board-rack-right[b-dx4wdter7d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    flex-shrink: 0;
    height: 100%;
}
/* /Pages/Home/Components/Calendar/Components/PocketsBoard/WorkshopPocketsZoneView.razor.rz.scp.css */
.workshop-pockets-zone-grid[b-t5enf8b1xz] {
    display: grid;
    grid-template-columns: repeat(var(--dcb-zone-columns), var(--pocket-col-width));
    grid-template-rows: repeat(var(--dcb-zone-rows), minmax(0, 1fr));
    gap: 8px;
    width: max-content;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.workshop-pockets-zone-grid.uses-fixed-row-height[b-t5enf8b1xz] {
    grid-template-rows: repeat(var(--dcb-zone-rows), var(--dcb-row-height, 152px));
    height: var(--dcb-grid-content-height);
    min-height: var(--dcb-grid-content-height);
}

/* Foco: una sola columna elástica y todas las filas. En las zonas laterales el ancho ya lo fijó el
   panel con las columnas del bolsillo; en el centro la celda se estira a la zona entera. */
.workshop-pockets-zone-grid.is-focus-layout[b-t5enf8b1xz] {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.workshop-pockets-zone-cell[b-t5enf8b1xz] {
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.workshop-pockets-zone-cell[b-t5enf8b1xz]  .workshop-pocket-column {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.workshop-pockets-zone-empty[b-t5enf8b1xz] {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}
/* /Pages/Home/Components/CenterDialog.razor.rz.scp.css */
/* Overlay ocupa todo para centrar. El fondo difuminado lo aporta la clase global
   .st-blurred-backdrop (app.css). */
.st-dialog-overlay[b-i6t5lluulg] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: st-fade-in-b-i6t5lluulg 0.25s ease;
}

.st-dialog-overlay.st-local-overlay[b-i6t5lluulg] {
    position: absolute;
    border-radius: 16px; /* Para que encaje en el slide-panel si tiene bordes redondeados */
}

.st-dialog-card[b-i6t5lluulg] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 28px 24px 20px;
    width: calc(100% - 48px);
    max-width: 340px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
    animation: st-dialog-pop-b-i6t5lluulg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Elementos Internos */
.acd-icon[b-i6t5lluulg] {
    width: 56px;
    height: 56px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: #22c55e;
}

.acd-title[b-i6t5lluulg] {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px;
    letter-spacing: 0.3px;
}

/* Permitir que el contenido hijo use estas clases */
[b-i6t5lluulg] .acd-summary {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

[b-i6t5lluulg] .acd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-i6t5lluulg] .acd-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

[b-i6t5lluulg] .acd-value {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
}

.acd-actions[b-i6t5lluulg] {
    display: flex;
    gap: 10px;
}

.acd-cancel-btn[b-i6t5lluulg] {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.acd-cancel-btn:hover:not(:disabled)[b-i6t5lluulg] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.acd-confirm-btn[b-i6t5lluulg] {
    flex: 1.5;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: #e84393;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.acd-confirm-btn:hover:not(:disabled)[b-i6t5lluulg] {
    transform: translateY(-1px);
    background: #d83a84;
}

.acd-confirm-btn:disabled[b-i6t5lluulg], .acd-cancel-btn:disabled[b-i6t5lluulg] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.acd-loading-view[b-i6t5lluulg] {
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.acd-spinner-large[b-i6t5lluulg] {
    width: 42px;
    height: 42px;
    border: 3.5px solid rgba(255, 255, 255, 0.08);
    border-top: 3.5px solid #E500CD;
    border-radius: 50%;
    animation: acd-spin-b-i6t5lluulg 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.acd-loading-text[b-i6t5lluulg] {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

@keyframes acd-spin-b-i6t5lluulg { to { transform: rotate(360deg); } }
@keyframes st-fade-in-b-i6t5lluulg { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-dialog-pop-b-i6t5lluulg {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
/* /Pages/Home/Components/Common/FolderTabStrip.razor.rz.scp.css */
.folder-tab-strip[b-0agno2pwmp] {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
}

.folder-tab-scroll[b-0agno2pwmp] {
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 30px;
    padding-right: var(--tab-overlap);
}

.folder-tab-scroll[b-0agno2pwmp]::-webkit-scrollbar {
    display: none;
}

.folder-tab[b-0agno2pwmp] {
    position: relative;
    width: var(--tab-w);
    height: var(--tab-h);
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0;
    margin-right: calc(var(--tab-overlap) * -1);
    margin-bottom: -4px;
    transition: filter 0.15s ease;
    pointer-events: none;
}

.folder-tab.interactive[b-0agno2pwmp] {
    cursor: pointer;
}

.folder-tab.interactive:not(.active):has(path:hover, .folder-tab-content:hover)[b-0agno2pwmp] {
    filter: brightness(0.88);
}

.folder-tab svg[b-0agno2pwmp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(4px 3px 5px rgba(0, 0, 0, 0.25)) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.folder-tab svg path[b-0agno2pwmp] {
    pointer-events: visiblePainted;
}

.folder-tab-content[b-0agno2pwmp] {
    position: relative;
    z-index: 1;
    height: 100%;
    pointer-events: auto;
    display: inline-flex;
    max-width: calc(var(--tab-w) * 0.88);
}

.folder-tab-label[b-0agno2pwmp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 1px 16px 10px 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    user-select: none;
}

.folder-tab-add[b-0agno2pwmp] {
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    pointer-events: none;
}

.folder-tab-add:has(path:hover, .folder-tab-add-label:hover)[b-0agno2pwmp] {
    filter: brightness(0.75);
}

.folder-tab-add .folder-tab-add-label[b-0agno2pwmp] {
    pointer-events: auto;
}

.folder-tab-add svg[b-0agno2pwmp] {
    filter: none;
}

.folder-tab-add-label[b-0agno2pwmp] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 4px calc(var(--tab-w) * 0.1463);
}

.folder-tab-add.disabled[b-0agno2pwmp] {
    cursor: not-allowed;
    opacity: 0.55;
}

.folder-tab-add.disabled:has(path:hover, .folder-tab-add-label:hover)[b-0agno2pwmp] {
    filter: none;
}
/* /Pages/Home/Components/Creation/Assets/Accordions/AssetAccordion.razor.rz.scp.css */
/* AssetAccordion — Estilos específicos del formulario interno */

/* Grid de 2 columnas para los campos */
.asset-form-grid[b-kbk2ax9bm6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    overflow: visible;
}

[b-kbk2ax9bm6] .accordion-item,
[b-kbk2ax9bm6] .accordion-body {
    overflow: visible !important;
}

.asset-field[b-kbk2ax9bm6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.asset-field.full-width[b-kbk2ax9bm6] {
    grid-column: 1 / -1;
}

.asset-label[b-kbk2ax9bm6] {
    font-size: 11px;
    font-weight: 700;
    color: #334966;
    /* Color azul oscuro solicitado */
    letter-spacing: 0.2px;
}

.asset-label.required[b-kbk2ax9bm6]::before {
    content: "* ";
    color: #D33BB2;
}

.asset-input[b-kbk2ax9bm6] {
    width: 100%;
    background: #ebf1f7 !important;
    /* Fondo claro como en diseño original */
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 8px;
    padding: 10px 12px;
    color: #334966 !important;
    /* Texto oscuro solicitado */
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.asset-input:focus[b-kbk2ax9bm6] {
    border-color: #D33BB2 !important;
}

.asset-input.input-field-warning[b-kbk2ax9bm6] {
    border-color: #e53e3e !important;
}

/* Input con botón escáner */
.asset-input-with-scanner[b-kbk2ax9bm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.asset-input-with-scanner .asset-input[b-kbk2ax9bm6] {
    flex: 1;
    min-width: 0;
}

[b-kbk2ax9bm6] .asset-field-scanner-btn {
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 8px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

[b-kbk2ax9bm6] .asset-field-scanner-btn:hover {
    background: #D33BB2 !important;
    border-color: #D33BB2 !important;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.3) !important;
}

[b-kbk2ax9bm6] .asset-field-scanner-btn .scanner-svg-icon {
    stroke: #D33BB2 !important;
    width: 20px !important;
    height: 20px !important;
}

[b-kbk2ax9bm6] .asset-field-scanner-btn:hover .scanner-svg-icon {
    stroke: #ffffff !important;
}

.field-duplicate-warning[b-kbk2ax9bm6] {
    font-size: 11px;
    font-weight: 600;
    color: #e53e3e;
    margin-top: 2px;
}

.asset-input[b-kbk2ax9bm6]::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Select con chevron personalizado */
.asset-select-wrapper[b-kbk2ax9bm6] {
    position: relative;
}

.asset-select[b-kbk2ax9bm6] {
    width: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 8px;
    padding: 10px 28px 10px 12px;
    color: #334966 !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.asset-select:focus[b-kbk2ax9bm6] {
    border-color: #D33BB2 !important;
}

/* Chevron del select usando CSS puro */
.asset-select-wrapper[b-kbk2ax9bm6]::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #D33BB2;
    pointer-events: none;
}
/* /Pages/Home/Components/Creation/Assets/Accordions/InventarioAccordion.razor.rz.scp.css */
/* InventarioAccordion — Estilos del formulario interno */

.inventario-form-grid[b-qnzcrdaotl] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px 14px;
    overflow: visible;
}

[b-qnzcrdaotl] .accordion-item,
[b-qnzcrdaotl] .accordion-body {
    overflow: visible !important;
}

/* Forzar estilo claro en FlatpickrDate (mismo que inventario-input) */
[b-qnzcrdaotl] .inventario-input {
    background: #ebf1f7 !important;
    color: #334966 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 34px 12px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

[b-qnzcrdaotl] .inventario-input:focus {
    border-color: #D33BB2 !important;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.1) !important;
}



.inventario-field[b-qnzcrdaotl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inventario-field.full-width[b-qnzcrdaotl] {
    grid-column: 1 / -1;
}

.inventario-label[b-qnzcrdaotl] {
    font-size: 11px;
    font-weight: 700;
    color: #334966;
    letter-spacing: 0.1px;
}

.inventario-label.required[b-qnzcrdaotl]::before {
    content: "* ";
    color: #D33BB2;
}

/* Contenedor del input con icono (para Asesor, Responsable...) */
.inventario-input-container[b-qnzcrdaotl] {
    position: relative;
    display: flex;
    align-items: center;
}

.inventario-input-icon[b-qnzcrdaotl] {
    position: absolute;
    left: 8px;
    width: 28px;
    height: 28px;
    background: #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none;
}

.inventario-input-with-icon[b-qnzcrdaotl] {
    padding-left: 44px !important;
}

.inventario-input[b-qnzcrdaotl],
.inventario-select[b-qnzcrdaotl] {
    width: 100%;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 12px;
    padding: 12px 14px;
    color: #334966 !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.inventario-select[b-qnzcrdaotl] {
    appearance: none;
    cursor: pointer;
    padding-right: 32px;
}

.inventario-input:focus[b-qnzcrdaotl],
.inventario-select:focus[b-qnzcrdaotl] {
    border-color: #D33BB2 !important;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.1);
}

/* Contenedor relativo para posicionar overlays */
.inventario-select-wrapper[b-qnzcrdaotl] {
    position: relative;
    width: 100%;
}

/* Icono de calendario/reloj con triángulo rosa (Overlay) */
.inventario-icon-overlay[b-qnzcrdaotl] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 5;
}

.inventario-pink-triangle[b-qnzcrdaotl] {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #D33BB2;
    margin-top: 2px;
}

.inventario-input-with-overlay[b-qnzcrdaotl] {
    padding-right: 44px !important;
}

/* Switch / Toggle (En taller) */
.inventario-switch-container[b-qnzcrdaotl] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.inventario-switch[b-qnzcrdaotl] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.inventario-switch input[b-qnzcrdaotl] {
    opacity: 0;
    width: 0;
    height: 0;
}

.inventario-slider[b-qnzcrdaotl] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 24px;
}

.inventario-slider[b-qnzcrdaotl]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.inventario-slider[b-qnzcrdaotl] {
    background-color: #D33BB2;
}

input:checked+.inventario-slider[b-qnzcrdaotl]:before {
    transform: translateX(20px);
}

.inventario-switch-label[b-qnzcrdaotl] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* Separador de Proceso Actual */
.inventario-section-divider[b-qnzcrdaotl] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 4px 0;
}

.inventario-section-label[b-qnzcrdaotl] {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Textarea - Observaciones */
/* Time Dropdown removed in favor of FlatpickrDate */
.inventario-pink-triangle.rotated[b-qnzcrdaotl] {
    transform: rotate(180deg);
}

.inventario-textarea[b-qnzcrdaotl] {
    width: 100%;
    min-height: 80px;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 12px;
    padding: 12px 14px;
    color: #334966 !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    border-bottom: 2px solid #cbd5e1;
}

.inventario-textarea:focus[b-qnzcrdaotl] {
    border-color: #D33BB2 !important;
    border-bottom-color: #D33BB2 !important;
}
/* /Pages/Home/Components/Creation/Assets/AssetCreationFormPanel.razor.rz.scp.css */
/* =============================================================
   AssetCreationFormPanel — Estilos del contenido interno
   El shell (posición, header, animación) está en SlidePanel.razor.css
   ============================================================= */

/* ---- Lista de acordeones ---- */
.caf-accordions[b-nnn1ednbin] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* ---- Estilos compartidos de acordeón (via ::deep) ---- */
[b-nnn1ednbin] .accordion-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: visible;
    margin-bottom: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

[b-nnn1ednbin] .accordion-item.locked {
    opacity: 0.9;
    filter: grayscale(0.3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

[b-nnn1ednbin] .locked .accordion-title {
    color: rgba(255, 255, 255, 0.6) !important;
}

[b-nnn1ednbin] .accordion-item.completed {
    border-color: #10b981;
}

[b-nnn1ednbin] .accordion-item.expanded {
    background: #ffffff;
    border-color: rgba(211, 59, 178, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

[b-nnn1ednbin] .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

[b-nnn1ednbin] .accordion-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

[b-nnn1ednbin] .accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-nnn1ednbin] .accordion-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334966;
    flex-shrink: 0;
}

[b-nnn1ednbin] .accordion-title {
    font-size: 15px;
    font-weight: 700;
    color: #334966;
    letter-spacing: 0.2px;
}

[b-nnn1ednbin] .accordion-chevron {
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

[b-nnn1ednbin] .accordion-chevron.rotated {
    transform: rotate(180deg);
}

[b-nnn1ednbin] .accordion-body {
    padding: 0 16px 16px;
    animation: accordionSlide-b-nnn1ednbin 0.25s ease-out;
}

@keyframes accordionSlide-b-nnn1ednbin {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Botones del footer ---- */
.caf-footer[b-nnn1ednbin] {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Evita scrolls durante la animación */
}

/* El botón de cancelar/anular: corazón de la animación */
[b-nnn1ednbin] .caf-btn-secondary {
    transition: all 0.6s cubic-bezier(0.34, 1.25, 0.64, 1) !important;
    white-space: nowrap;
}

/* ESTADO 1: Botón solo y centrado */
.caf-footer:not(.caf-footer--multi) .caf-btn-secondary[b-nnn1ednbin] {
    flex: none !important;
    width: 180px !important;
    /* Centrado manual con margen izquierdo dinámico */
    margin-left: calc(50% - 90px) !important;
    margin-right: calc(50% - 90px) !important;
}

/* ESTADO 2: Botón acompañado (empujado a la izquierda) */
.caf-footer--multi .caf-btn-secondary[b-nnn1ednbin] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: none !important;
}

/* El botón Siguiente/Actualizar siempre presente pero con transición de entrada */
[b-nnn1ednbin] .caf-btn-next {
    transition: all 0.6s cubic-bezier(0.34, 1.25, 0.64, 1) !important;
    overflow: hidden;
    flex: 1;
    opacity: 1;
    transform: translateX(0);
}

/* Cuando el botón debe estar oculto (Estado Inicial de Edición) */
[b-nnn1ednbin] .caf-btn-next--hidden {
    flex: 0 !important;
    opacity: 0 !important;
    transform: translateX(40px) !important;
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -12px !important;
    /* Absorbe el gap del flex */
    pointer-events: none;
}
/* /Pages/Home/Components/Creation/Assets/Components/AssetPhotoUploader.razor.rz.scp.css */
.caf-photo-section[b-x42bs954nq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 0 25px;
}

.caf-photo-wrapper[b-x42bs954nq] {
    position: relative;
    /* ancla el badge dentro de la imagen */
    width: 140px;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    /* clip de la imagen — el badge se posiciona relativo a este */
    cursor: pointer;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.caf-photo-wrapper:hover[b-x42bs954nq] {
    border-color: #D33BB2;
}

.caf-photo-input[b-x42bs954nq] {
    display: none;
}

.caf-photo-img[b-x42bs954nq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.caf-photo-placeholder[b-x42bs954nq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
}

/* Badge de lápiz — aparece en la esquina inferior derecha DENTRO de la foto */
.caf-photo-edit-hint[b-x42bs954nq] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.caf-photo-wrapper:hover .caf-photo-edit-hint[b-x42bs954nq] {
    opacity: 1;
}

.caf-name-display[b-x42bs954nq] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.5);
    /* Gris como el título */
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    cursor: default;
    user-select: text;
}

.caf-name-input[b-x42bs954nq]::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}
/* /Pages/Home/Components/Creation/Assets/Components/CreationWizardAlert.razor.rz.scp.css */
.wizard-alert-icon-container[b-4qxev4qhyv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto;
}

.wizard-alert-pulse[b-4qxev4qhyv] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    animation: success-pulse-b-4qxev4qhyv 2s ease-in-out infinite;
}

.wizard-alert-ring-mid[b-4qxev4qhyv] {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
}

.wizard-alert-circle-success[b-4qxev4qhyv] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-alert-ring-error-bg[b-4qxev4qhyv] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
}

.wizard-alert-circle-error[b-4qxev4qhyv] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes success-pulse-b-4qxev4qhyv {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
}
/* /Pages/Home/Components/Creation/Assets/Components/VehicleIdentifierDisplay.razor.rz.scp.css */
.asset-label[b-trsgm5ses1] {
    font-size: 11px;
    font-weight: 700;
    color: #334966;
    letter-spacing: 0.2px;
}

.asset-label.required[b-trsgm5ses1]::before {
    content: "* ";
    color: #D33BB2;
}

.vehicle-identifier-row[b-trsgm5ses1] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
}

.vehicle-identifier-row--locked[b-trsgm5ses1] {
    background: #e4e9ef;
    border: 1px solid rgba(51, 73, 102, 0.1);
    border-radius: 8px;
    cursor: not-allowed;
}

.vehicle-identifier-row--locked .vehicle-identifier-value[b-trsgm5ses1] {
    color: rgba(51, 73, 102, 0.55);
}

.vehicle-identifier-value[b-trsgm5ses1] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334966;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}

.vehicle-identifier-value[b-trsgm5ses1]::-webkit-scrollbar {
    display: none;
}

.vehicle-identifier-value--plain[b-trsgm5ses1] {
    font-style: italic;
    font-weight: 500;
    color: rgba(51, 73, 102, 0.55);
}

.vehicle-identifier-search-btn[b-trsgm5ses1] {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #D33BB2;
    cursor: pointer;
    transition: background 0.15s ease;
}

.vehicle-identifier-search-btn:hover[b-trsgm5ses1] {
    background: rgba(211, 59, 178, 0.12);
}
/* /Pages/Home/Components/Creation/Assets/CreationPanel.razor.rz.scp.css */
/* ============================================================
   CreationPanel — Estilos del contenido interno
   El shell (posición, animación, header) está en SlidePanel.razor.css
   ============================================================ */

/* ---- Buscador  ---- */
.creation-search-wrapper[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    gap: 8px;

    /* Sincronizamos con el desplazamiento del grid (Nuevos márgenes reducidos) */
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);

    padding-left: 18px;
    padding-right: 18px;

    margin-bottom: 25px;
}

.creation-results-header[b-kjbddxoobl] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    padding-right: 16px;
    /* Para que quede alineado con el final de las tarjetas */
}

.creation-results-count[b-kjbddxoobl] {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* .creation-search-icon eliminado — el icono ahora es el botón al final */

.creation-search-input[b-kjbddxoobl] {
    flex: 1;
    height: 40px;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 0 12px;
    color: #ffffff !important;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    color-scheme: dark;
}

.creation-search-btn[b-kjbddxoobl] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.creation-search-btn:hover[b-kjbddxoobl] {
    background: #D33BB2;
    border-color: #D33BB2;
    color: #ffffff;
}

[b-kjbddxoobl] .creation-scanner-btn {
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

[b-kjbddxoobl] .creation-scanner-btn:hover {
    background: #D33BB2 !important;
    border-color: #D33BB2 !important;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.3) !important;
}

[b-kjbddxoobl] .creation-scanner-btn .scanner-svg-icon {
    stroke: rgba(255, 255, 255, 0.6) !important;
    width: 18px !important;
    height: 18px !important;
}

[b-kjbddxoobl] .creation-scanner-btn:hover .scanner-svg-icon {
    stroke: #ffffff !important;
}

.creation-search-input[b-kjbddxoobl]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.creation-search-input:focus[b-kjbddxoobl] {
    border-color: #D33BB2 !important;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.2);
}

/* ---- Botón Crear (magenta estándar) ---- */
.creation-action-row[b-kjbddxoobl] {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    gap: 10px;
    padding: 4px 0;
    margin-bottom: 15px;
}

.creation-action-row.creation-dual-action-row[b-kjbddxoobl] {
    grid-template-columns: repeat(2, max-content);
    gap: 12px;
}

@media (max-width: 480px) {
    .creation-action-row.creation-dual-action-row[b-kjbddxoobl] {
        grid-template-columns: 1fr;
    }
}

.creation-crear-btn[b-kjbddxoobl] {
    padding: 10px 24px;
    background: #D33BB2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
}

.creation-crear-btn:hover[b-kjbddxoobl] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(211, 59, 178, 0.45);
}

.creation-crear-btn:active[b-kjbddxoobl] {
    transform: scale(0.98);
}

/* ---- Tarjeta / Popup de Datos del VIN ---- */
.creation-vin-popup-card[b-kjbddxoobl] {
    margin: 4px 0 15px;
    background: #1e293b;
    border: 1px solid rgba(211, 59, 178, 0.35);
    border-radius: 12px;
    padding: 16px;
    box-shadow: none;
    animation: creationFadeIn-b-kjbddxoobl 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.creation-vin-popup-header[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.creation-vin-popup-title-row[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creation-vin-popup-icon[b-kjbddxoobl] {
    color: #D33BB2;
    flex-shrink: 0;
}

.creation-vin-popup-title[b-kjbddxoobl] {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.3px;
}

.creation-vin-badge-decoding[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 3px 8px;
    border-radius: 12px;
}

.creation-vin-mini-spinner[b-kjbddxoobl] {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 50%;
    border-top-color: #38bdf8;
    animation: creationSpin-b-kjbddxoobl 0.8s linear infinite;
}

.creation-vin-badge-success[b-kjbddxoobl] {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Grid de datos del VIN */
.creation-vin-data-grid[b-kjbddxoobl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.creation-vin-data-item[b-kjbddxoobl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.creation-vin-data-label[b-kjbddxoobl] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.creation-vin-data-value[b-kjbddxoobl] {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    word-break: break-all;
}

.creation-vin-data-value.vin-highlight[b-kjbddxoobl] {
    color: #EFCE7D;
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    grid-column: span 2;
}

/* Sección de Placa Opcional */
.creation-vin-plate-box[b-kjbddxoobl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.creation-vin-plate-title[b-kjbddxoobl] {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
}

.creation-vin-plate-row[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creation-vin-plate-input-wrapper[b-kjbddxoobl] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.creation-vin-plate-input[b-kjbddxoobl] {
    width: 100%;
    height: 38px;
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    padding: 0 32px 0 12px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.creation-vin-plate-input:focus[b-kjbddxoobl] {
    border-color: #D33BB2 !important;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.25);
}

.creation-vin-plate-input[b-kjbddxoobl]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.creation-vin-plate-clear[b-kjbddxoobl] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creation-vin-plate-clear:hover[b-kjbddxoobl] {
    color: #ffffff;
}

.creation-vin-scanner-btn[b-kjbddxoobl] {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
}

/* Footer / Botón de Acción dentro del popup */
.creation-vin-footer-actions[b-kjbddxoobl] {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    animation: creationFadeIn-b-kjbddxoobl 0.25s ease-out;
}

.creation-vin-footer-actions .creation-crear-btn[b-kjbddxoobl] {
    width: 100%;
}

/* ---- Enlace "¿No tiene placa?" ---- */
.creation-noplate-row[b-kjbddxoobl] {
    display: flex;
    justify-content: center;
    padding: 2px 0 10px;
}

.creation-noplate-link[b-kjbddxoobl] {
    background: none;
    border: none;
    color: #9b59b6;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.creation-noplate-link:hover[b-kjbddxoobl] {
    opacity: 1;
}


.creation-empty-state[b-kjbddxoobl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px 20px;
    text-align: center;
    animation: creationFadeIn-b-kjbddxoobl 0.5s ease-out;
}

/* ---- Spinner de carga ---- */
.creation-loading-spinner[b-kjbddxoobl] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #D33BB2;
    animation: creationSpin-b-kjbddxoobl 1s ease-in-out infinite;
    margin: 0 auto 15px;
}

@keyframes creationSpin-b-kjbddxoobl {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Botón Cargar Más ---- */
.creation-load-more-row[b-kjbddxoobl] {
    display: flex;
    justify-content: center;
    padding: 20px 0 30px;
    width: 100%;
}

.creation-load-more-btn[b-kjbddxoobl] {
    padding: 10px 40px;
    background: #D33BB2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.creation-load-more-btn:hover:not(:disabled)[b-kjbddxoobl] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(211, 59, 178, 0.45);
}

.creation-load-more-btn:active:not(:disabled)[b-kjbddxoobl] {
    transform: scale(0.98);
}

.creation-load-more-btn:disabled[b-kjbddxoobl] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.creation-btn-spinner[b-kjbddxoobl] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: creationSpin-b-kjbddxoobl 1s linear infinite;
}

.creation-empty-illustration[b-kjbddxoobl] {
    margin-bottom: 20px;
}

.creation-empty-circle[b-kjbddxoobl] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.creation-empty-icon[b-kjbddxoobl] {
    color: #475569;
    opacity: 0.6;
}

.creation-empty-title[b-kjbddxoobl] {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.3px;
}

.creation-empty-subtitle[b-kjbddxoobl] {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.creation-min-chars-hint[b-kjbddxoobl] {
    margin: 4px 12px 15px;
    padding: 8px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #DEA301;
    background: rgba(222, 163, 1, 0.2);
    border: 1px solid #EFCE7D;
    border-radius: 8px;
    line-height: 1.4;
}

@keyframes creationFadeIn-b-kjbddxoobl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Grid para AssetCards (Mismo estilo que InboxPanel)
   ============================================================ */

.creation-results-container[b-kjbddxoobl] {
    /* 
       Alineamos con el nuevo padding de 15px del LeftSidebar
    */
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);

    padding-left: 18px;
    padding-right: 18px;

    flex: 1;
    overflow-y: auto;
    /* Evitamos el scroll horizontal y permitimos el vertical */
    overflow-x: hidden;
    min-height: 0;
}

.creation-assets-grid[b-kjbddxoobl] {
    display: grid;
    /* 3 Columnas idéntico al Inbox */
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 4px;
    justify-items: center;
}

/* Forzamos que la tarjeta ocupe el espacio de la columna exacto */
.creation-assets-grid[b-kjbddxoobl]  .asset-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* ---- Botón Secundario 'Crear sin placa' ---- */
.creation-crear-secondary-btn[b-kjbddxoobl] {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.creation-crear-secondary-btn:hover[b-kjbddxoobl] {
    background: #475569 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   Modal de Advertencia de Placa Duplicada
   ============================================================ */
.duplicate-modal-backdrop[b-kjbddxoobl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: duplicateFadeIn-b-kjbddxoobl 0.25s ease-out;
}

.duplicate-modal-dialog[b-kjbddxoobl] {
    background: #1e293b;
    border: 1px solid rgba(211, 59, 178, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    padding: 24px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(211, 59, 178, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: duplicateScaleUp-b-kjbddxoobl 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.duplicate-modal-illustration[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.duplicate-modal-icon-badge[b-kjbddxoobl] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    border: 2px solid rgba(245, 158, 11, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.duplicate-modal-title[b-kjbddxoobl] {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    text-align: center;
}

.duplicate-modal-message[b-kjbddxoobl] {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

/* Card con Preview del Vehículo */
.duplicate-modal-vehicle-card[b-kjbddxoobl] {
    width: 100%;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

.duplicate-modal-vehicle-thumb[b-kjbddxoobl] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.duplicate-vehicle-img[b-kjbddxoobl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.duplicate-vehicle-placeholder-svg[b-kjbddxoobl] {
    color: #64748b;
}

.duplicate-modal-vehicle-info[b-kjbddxoobl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.duplicate-vehicle-plate[b-kjbddxoobl] {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.duplicate-vehicle-desc[b-kjbddxoobl] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duplicate-vehicle-year[b-kjbddxoobl],
.duplicate-vehicle-spec[b-kjbddxoobl] {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botones Cancelar / Ok */
.duplicate-modal-actions[b-kjbddxoobl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 6px;
}

.duplicate-btn-cancel[b-kjbddxoobl] {
    flex: 1;
    padding: 10px 18px;
    background: #334155;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.duplicate-btn-cancel:hover[b-kjbddxoobl] {
    background: #475569;
    color: #ffffff;
}

.duplicate-btn-confirm[b-kjbddxoobl] {
    flex: 1;
    padding: 10px 18px;
    background: #D33BB2;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(211, 59, 178, 0.4);
    transition: all 0.2s ease;
    text-align: center;
}

.duplicate-btn-confirm:hover[b-kjbddxoobl] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
    box-shadow: 0 6px 18px rgba(211, 59, 178, 0.55);
    transform: translateY(-1px);
}

@keyframes duplicateFadeIn-b-kjbddxoobl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes duplicateScaleUp-b-kjbddxoobl {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Pages/Home/Components/Creation/WorkOrders/Components/WorkOrderFormBody.razor.rz.scp.css */
/* El recuadro blanco que envuelve el formulario (como accordion-item.expanded) */
.wo-white-box[b-hg0ash6urn] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(229, 0, 205, 0.3);
    transition: all 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.wo-box-header[b-hg0ash6urn] {
    display: none;
    /* Titulo eliminado por instruccion del usuario */
}

.wo-box-title[b-hg0ash6urn] {
    display: none;
}

.wo-box-body[b-hg0ash6urn] {
    padding: 16px 20px;
}

/* --- Form Grid --- */
.asset-form-grid[b-hg0ash6urn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
    width: 100%;
}

.asset-field[b-hg0ash6urn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* Crucial para que el truncamiento funcione en grid */
}

.asset-field.full-width[b-hg0ash6urn] {
    grid-column: 1 / -1;
}

.asset-label[b-hg0ash6urn] {
    font-size: 11px;
    font-weight: 700;
    color: #334966;
    text-transform: capitalize;
    letter-spacing: 0.2px;
}

.asset-label.required[b-hg0ash6urn]::before {
    content: "* ";
    color: #e500cd;
}

.asset-input[b-hg0ash6urn] {
    width: 100%;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.12) !important;
    border-radius: 12px;
    padding: 0 16px;
    height: 48px;
    color: #334966 !important;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.asset-input:focus[b-hg0ash6urn] {
    border-color: #D33BB2 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.08);
}

.asset-input[b-hg0ash6urn]::placeholder {
    color: rgba(51, 73, 102, 0.35);
}

/* Select con chevron */
.asset-select-wrapper[b-hg0ash6urn] {
    position: relative;
}

.asset-select[b-hg0ash6urn] {
    width: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 8px;
    padding: 11px 32px 11px 14px;
    color: #334966 !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
}

.asset-select:focus[b-hg0ash6urn] {
    border-color: #D33BB2 !important;
    background: #ffffff !important;
}

/* --- Date Squares (Modified for white box) --- */
.edit-dates-row[b-hg0ash6urn] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}

.date-square[b-hg0ash6urn] {
    flex: 1;
    background: #f1f5f9;
    border-radius: 12px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(51, 73, 102, 0.08);
    transition: all 0.2s;
}

.date-square:hover[b-hg0ash6urn] {
    transform: translateY(-2px);
    background: #e2e8f0;
    border-color: #D33BB2;
}

.date-square.suggested[b-hg0ash6urn] {
    border: 2px dashed #D33BB2;
}

.date-label[b-hg0ash6urn] {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.date-number[b-hg0ash6urn] {
    font-size: 20px;
    font-weight: 800;
    color: #334966;
    line-height: 1;
}

.date-month[b-hg0ash6urn] {
    font-size: 10px;
    font-weight: 600;
    color: #D33BB2;
    text-transform: uppercase;
    margin-top: 2px;
}

.asset-select-wrapper[b-hg0ash6urn]::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #e500cd;
    pointer-events: none;
}
/* /Pages/Home/Components/Creation/WorkOrders/WorkOrderCreationPanel.razor.rz.scp.css */
/* =============================================================
   WorkOrderCreationPanel — Estilos replicados de Asset/Inventario
   ============================================================= */

.caf-accordions[b-yc3c9mh8s0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}


/* ---- Botones del footer ---- */
.caf-footer[b-yc3c9mh8s0] {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    flex-shrink: 0;
    margin-top: auto; /* Empuja al final como en inventarios */
}
/* /Pages/Home/Components/Creation/WorkOrders/WorkOrderEditPanel.razor.rz.scp.css */
/* --- Accordions Container (Match Creation Forms) --- */
.caf-accordions[b-o376u6ikfd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

/* --- Form Container --- */
.wo-white-box[b-o376u6ikfd] {
    background: #ffffff;
    border: 1px solid rgba(229, 0, 205, 0.3);
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.wo-box-body[b-o376u6ikfd] {
    padding: 16px 20px;
}

/* --- Grid Layout --- */
.asset-form-grid[b-o376u6ikfd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
    width: 100%;
}

.asset-field[b-o376u6ikfd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.asset-field.full-width[b-o376u6ikfd] {
    grid-column: 1 / -1;
}

.asset-label[b-o376u6ikfd] {
    font-size: 11px;
    font-weight: 700;
    color: #334966;
    text-transform: capitalize;
    letter-spacing: 0.2px;
}

.asset-label.required[b-o376u6ikfd]::before {
    content: "* ";
    color: #e500cd;
}

.asset-input[b-o376u6ikfd] {
    width: 100%;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.12) !important;
    border-radius: 12px;
    padding: 0 16px;
    height: 48px;
    color: #334966 !important;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.asset-input:focus[b-o376u6ikfd] {
    border-color: #e500cd !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(229, 0, 205, 0.08);
}

.asset-input[b-o376u6ikfd]::placeholder {
    color: rgba(51, 73, 102, 0.35);
}

/* --- Date Squares (Modified for white box) --- */
.edit-dates-row[b-o376u6ikfd] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}

.date-square[b-o376u6ikfd] {
    flex: 1;
    background: #f1f5f9;
    border-radius: 12px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(51, 73, 102, 0.08);
    transition: all 0.2s;
}

.date-square:hover[b-o376u6ikfd] {
    transform: translateY(-2px);
    background: #e2e8f0;
    border-color: #e500cd;
}

.date-square.suggested[b-o376u6ikfd] {
    border: 2px dashed #e500cd;
}

.promise-suggestion-inline[b-o376u6ikfd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: #6B5320;
}

.promise-suggestion-apply[b-o376u6ikfd] {
    padding: 0;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 500;
    color: #C77F1A;
    text-decoration: underline;
    cursor: pointer;
}

.date-label[b-o376u6ikfd] {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.date-number[b-o376u6ikfd] {
    font-size: 20px;
    font-weight: 800;
    color: #334966;
    line-height: 1;
}

.date-month[b-o376u6ikfd] {
    font-size: 10px;
    font-weight: 600;
    color: #e500cd;
    text-transform: uppercase;
    margin-top: 2px;
}

/* --- Footer Buttons (Match exact Creation Wizard Standard) --- */
.caf-footer[b-o376u6ikfd] {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    flex-shrink: 0;
    margin-top: auto;
}

.caf-footer .caf-btn-cancel[b-o376u6ikfd],
.caf-footer .caf-btn-secondary[b-o376u6ikfd],
.caf-footer .caf-btn-next[b-o376u6ikfd] {
    flex: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
/* /Pages/Home/Components/DynamicPanel.razor.rz.scp.css */
/* Search Wrapper - Contenedor independiente del buscador */
.search-wrapper[b-fkxx6hjwiu] {
    position: absolute;
    top: 20px;
    left: 240px;
    width: 400px;
    z-index: 26;
    /* Siempre visible */
    opacity: 1;
    pointer-events: auto;
    transition: left 0.4s ease-in-out;
}

.search-wrapper.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 100px;
}

/* Dynamic Content Panel */
.dynamic-panel[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel {
    position: absolute;
    top: 20px;
    left: 230px;
    /* 10px inside the map frame (top 10px, left 220px) on every side: the same inset the
       top-bar buttons use (top 20px), so the floating UI shares one margin. */
    width: var(--panel-width, 450px);
    bottom: 20px;
    /* Same width as search bar */
    /* max-height: calc(100vh - 60px);*/
    /* Limit height to not overflow */
    background: var(--st-backdrop-tint);
    /* Dark blue glass */
    backdrop-filter: blur(var(--st-backdrop-blur));
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 25;
    display: flex;
    flex-direction: column;
    /* Animation */
    opacity: 0;
    pointer-events: none;
    transform: translatex(-20px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, left 0.4s ease-in-out, width 0.4s ease-in-out;
    overflow: hidden;
}

/* Ancho arrastrable: exclusivo del Inbox.
   El handle guarda la medida del usuario en --inbox-panel-width y SOLO esta regla la lee.
   Antes escribía sobre --panel-width, que es de Blazor: como Autorización, Perfil y Empresa
   declaran el mismo "450px" que el Inbox, el atributo style no cambiaba entre paneles,
   Blazor no lo reescribía y esos paneles heredaban el ancho estirado del Inbox. */
/* Solo escritorio: en móvil manda el "width: 90vw" de abajo (el arrastre es de ratón
   y allí nunca tuvo efecto), y sin este @media esta regla —más específica— lo pisaría. */
@media (min-width: 769px) {
    .dynamic-panel.inbox-resizable[b-fkxx6hjwiu],
    [b-fkxx6hjwiu] .dynamic-panel.inbox-resizable {
        width: var(--inbox-panel-width, var(--panel-width, 450px));
    }
}

/* Estado inicial para la tabla de inventarios para que nazca a mitad de pantalla */
@media (min-width: 769px) {
    .dynamic-panel.inbox-table-mode[b-fkxx6hjwiu] {
        top: 50vh;
    }
}

.dynamic-panel.visible[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Restaurar modo tarjeta flotante para el contenedor principal del Calendario */

.dynamic-panel.high-z-index[b-fkxx6hjwiu] {
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    transition: none !important;
    z-index: 10000;
}

/* Adjust when sidebar is collapsed */
.dynamic-panel.sidebar-collapsed[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel.sidebar-collapsed {
    left: 90px;
    /* Collapsed sidebar is 80px wide: keep the same 10px inset from the map frame */
}

/* ===== Inbox Expand Handle (Minimalist Pill) ===== */
.inbox-expand-handle[b-fkxx6hjwiu] {
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 36px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 4px;
    cursor: col-resize;
    z-index: 30;
    transition: all 0.2s ease;
    padding: 0;
    outline: none;
    box-shadow: none;
}

.inbox-expand-handle:hover[b-fkxx6hjwiu] {
    background: rgba(255, 255, 255, 0.8);
    width: 8px;
    right: -11px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.inbox-expand-handle:active[b-fkxx6hjwiu] {
    background: rgba(255, 255, 255, 0.8);
    width: 8px;
    right: -11px;
}

/* Remove .expanded logic */

/* ===== Inbox Dragging Mode ===== */
.dynamic-panel.dragging[b-fkxx6hjwiu] {
    transition: none !important;
}

/* Inbox mode base: permitir que el handle no sea cortado por overflow:hidden del panel genérico */
.dynamic-panel.inbox-mode[b-fkxx6hjwiu] {
    overflow: visible;
}

.dynamic-panel-header[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.dynamic-panel.reportes-mode[b-fkxx6hjwiu] {
    width: auto !important;
    top: 10px !important;
    left: 220px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    border-radius: 30px;
    background: #1c2738 !important;
    /* Opaco para ocultar el mapa */
    border: 1px solid rgba(255, 255, 255, 0.18);
    /* Borde sutil para delimitar el panel y evitar ilusión de desbordamiento */
    max-height: none;
    /* Ensure grid stack has space */
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: reportesGlobalSlideIn-b-fkxx6hjwiu 0.4s ease-out;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out;
}

@keyframes reportesGlobalSlideIn-b-fkxx6hjwiu {
    from {
        opacity: 0;
        transform: translateX(-100px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.dynamic-panel.reportes-mode .dynamic-panel-content[b-fkxx6hjwiu] {
    overflow: visible !important;
}

.dynamic-panel.reportes-mode[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
}

/* Adjust for collapsed sidebar */
.dynamic-panel.reportes-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 30px;
    background: #1c2738 !important;
}

/* === Collision Mode — Full-screen layout === */
.dynamic-panel.collision-mode[b-fkxx6hjwiu] {
    width: auto !important;
    top: 10px !important;
    left: 220px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    border-radius: 20px;
    background: #f4f5f7 !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    max-height: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: collisionSlideIn-b-fkxx6hjwiu 0.4s ease-out;
}

@keyframes collisionSlideIn-b-fkxx6hjwiu {
    from {
        opacity: 0;
        transform: translateX(-60px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.dynamic-panel.collision-mode .dynamic-panel-content[b-fkxx6hjwiu] {
    overflow: hidden !important;
}

.dynamic-panel.collision-mode[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
}

.dynamic-panel.collision-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
}

/* === Calendario Mode — Full-screen / Auto layout === */
.dynamic-panel.calendario-mode[b-fkxx6hjwiu] {
    width: auto !important;
    top: 10px !important;
    left: 220px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    border-radius: 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-height: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: calendarioSlideIn-b-fkxx6hjwiu 0.4s ease-out;
}

@keyframes calendarioSlideIn-b-fkxx6hjwiu {
    from {
        opacity: 0;
        transform: translateX(-40px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.dynamic-panel.calendario-mode .dynamic-panel-content[b-fkxx6hjwiu] {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

.dynamic-panel.calendario-mode[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
}

.dynamic-panel.calendario-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
}

/* === Integracion Mode — Full-screen layout === */
.dynamic-panel.integracion-mode[b-fkxx6hjwiu] {
    width: auto !important;
    top: 10px !important;
    left: 220px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    border-radius: 20px;
    background: #0d1117 !important;
    border: 1px solid #21262d;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
    max-height: none;
    animation: reportesGlobalSlideIn-b-fkxx6hjwiu 0.4s ease-out;
}

.dynamic-panel.integracion-mode .dynamic-panel-content[b-fkxx6hjwiu] {
    overflow: hidden !important;
}

.dynamic-panel.integracion-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
}

.dynamic-panel-title[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.dynamic-panel-close-btn[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel-close-btn {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.dynamic-panel-close-btn:hover[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.dynamic-panel-content[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel-content {
    flex: 1;
    padding: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: #a0a0b0;
    border-radius: inherit;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel completo se oculta al expandir el asset — permanece oculto hasta cerrar con X */
.dynamic-panel.expanded[b-fkxx6hjwiu] {
    opacity: 0 !important;
    transform: translateX(-60px) !important;
    pointer-events: none !important;
}

.panel-placeholder[b-fkxx6hjwiu] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* Search Bar dentro del Dynamic Panel */
.search-container[b-fkxx6hjwiu] {
    background: #9aa1abeb;
    backdrop-filter: blur(1px);
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.search-input[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-size: 0.95rem;
}

.search-input[b-fkxx6hjwiu]::placeholder {
    color: white;
}

/* Inbox Card Container */
.inbox-card-container[b-fkxx6hjwiu] {
    padding: 10px 0;
}

.inbox-card[b-fkxx6hjwiu] {
    background: rgba(31, 47, 69, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
}

.inbox-card:hover[b-fkxx6hjwiu] {
    background: rgba(31, 47, 69, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.inbox-card-image[b-fkxx6hjwiu] {
    width: 100px;
    height: 100px;
    background: rgba(154, 161, 171, 0.3);
    border-radius: 12px;
    flex-shrink: 0;
}

.inbox-card-info[b-fkxx6hjwiu] {
    flex: 1;
    color: white;
}

.inbox-card-info h3[b-fkxx6hjwiu] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.inbox-card-info p[b-fkxx6hjwiu] {
    font-size: 0.9rem;
    color: #a0aab0;
    line-height: 1.5;
}

/* Animación de ocultar search wrapper */
.search-wrapper.hidden[b-fkxx6hjwiu] {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

/* Animación de ocultar panel principal */
.dynamic-panel.hiding[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel.hiding {
    animation: panelHideAnimation-b-fkxx6hjwiu 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes panelHideAnimation-b-fkxx6hjwiu {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    40% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translateX(-40px) scale(0.9);
    }
}

/*Animacion de re-entrada cuando vuelve del expanded view*/
.dynamic-panel.returning[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .dynamic-panel.returning {
    animation: panelReturnAnimation-b-fkxx6hjwiu 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes panelReturnAnimation-b-fkxx6hjwiu {
    0% {
        opacity: 0;
        transform: translateX(-40px) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Inbox card clickeable */


/* Soporte HUD 3D Workshop: el panel conserva su apariencia normal durante el modo taller */

/* Close button flotante en esquina superior derecha del expanded-card-view,
   alineado verticalmente con los folder-tabs (height:40px, top:9px desde el content) */
.expanded-view-close[b-fkxx6hjwiu] {
    position: absolute;
    top: 11px;
    right: 18px;
    z-index: 200;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expanded-view-close svg[b-fkxx6hjwiu] {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.expanded-view-close:hover[b-fkxx6hjwiu] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Expanded Card View - 3 Column Layout */
.expanded-card-view[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view {
    position: absolute;
    top: 10px;
    left: 220px;
    right: 10px;
    bottom: 10px;
    background: var(--st-backdrop-tint);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 27;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-60px);
    pointer-events: none;

    /* CLOSING: rápido hacia la derecha */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 1, 1),
        transform 0.25s cubic-bezier(0.4, 0, 1, 1),
        left 0.4s ease-in-out,
        right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.expanded-card-view.active[b-fkxx6hjwiu] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;

    /* OPENING: empuje desde la derecha */
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.4s ease-in-out,
        right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Igual que .dynamic-panel.high-z-index: cuando hay un modal/RightSidebar (position:fixed) abierto dentro,
   se elimina el transform/backdrop-filter que crea un containing block propio, para que ese elemento
   se posicione contra el viewport real en vez de quedar contenido/inset dentro de esta tarjeta. */
.expanded-card-view.high-z-index[b-fkxx6hjwiu] {
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    overflow: visible !important;
}

.expanded-card-view.hiding[b-fkxx6hjwiu] {
    animation: panelHideAnimation-b-fkxx6hjwiu 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* Escape para overlays position:fixed abiertos DENTRO de la tarjeta expandida (p. ej. los
   formularios de crear Proceso/Entrega del wizard de entrega).
   backdrop-filter/transform/filter convierten a este contenedor en containing block de sus
   descendientes fixed: dejan de referirse al viewport y su overflow:hidden los recorta.
   Neutralizarlos devuelve el viewport como referencia y elimina el recorte (mismo patrón que
   .dynamic-panel.high-z-index). El transform aquí es solo de animación, así que quitarlo en
   estado .active no mueve nada. */
.expanded-card-view.high-z-index[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view.high-z-index {
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    transition: none !important;
}

/* Work Orders Header Bar - Translucent top bar */
.wo-header-bar[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 6px 0;
    background: transparent;
    margin-bottom: 0px;
    flex-shrink: 0;
}

.wo-header-info[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-info {
    flex: 1;
    min-width: 0;
}

.wo-header-title[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e8e8e8;
    margin: 0 0 2px 0;
}

.wo-header-subtitle[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-subtitle {
    font-size: 0.75rem;
    color: #e8e8e8b5;
    margin: 0;
    line-height: 1.3;
    max-width: 100%;
}

.wo-header-pills[b-fkxx6hjwiu] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wo-header-bar .add-wo-btn[b-fkxx6hjwiu] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FE00E4;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wo-header-bar .add-wo-btn:hover[b-fkxx6hjwiu] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.4);
}

.wo-pill[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(31, 47, 69, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.wo-pill:hover[b-fkxx6hjwiu] {
    background: rgba(31, 47, 69, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.wo-pill.active[b-fkxx6hjwiu] {
    background: rgba(31, 47, 69, 0.95);
    border-color: #e5b900;
    border-width: 2px;
}

.wo-pill-progress[b-fkxx6hjwiu] {
    padding: 3px 10px;
    background: #e5b900;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1f2f45;
}

.wo-pill.active .wo-pill-progress[b-fkxx6hjwiu] {
    background: #e5b900;
    color: #1f2f45;
}

.wo-header-close[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wo-header-close:hover[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.expanded-card-view.active[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.expanded-card-view.sidebar-collapsed[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view.sidebar-collapsed {
    left: 80px;
}

/* Chat Open Adjustments */
.expanded-card-view.chat-open[b-fkxx6hjwiu] {
    right: 370px;
    /* 350px (Chat Panel) + 20px (Margin) */
}

.expanded-card-view.sidebar-collapsed.chat-open[b-fkxx6hjwiu] {
    left: 100px;
    right: 370px;
}

.expanded-card-header[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #E0E0E0;
    background: #FFFFFF;
    flex-shrink: 0;
}

.header-asset-info[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

.header-asset-logo[b-fkxx6hjwiu] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #E0E0E0;
}

.header-asset-number[b-fkxx6hjwiu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A1A2E;
    letter-spacing: 0.5px;
}

.back-btn[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #4ecdc4;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    transition: all 0.2s;
}

.back-btn:hover[b-fkxx6hjwiu] {
    background: rgba(78, 205, 196, 0.1);
}

.close-expanded-btn[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.2s;
}

.close-expanded-btn:hover[b-fkxx6hjwiu] {
    background: rgba(0, 0, 0, 0.05);
    color: #333333;
}

.expanded-card-content[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-content {
    padding: 9px;
    overflow: visible;
    display: flex;
    gap: 9px;
    height: 100%;
    box-sizing: border-box;
}

.expanded-card-content.single-column-layout[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-content.single-column-layout {
    flex-direction: row;
    align-items: stretch;
}

/* Three Column Layout */
.expanded-card-content.three-column-layout[b-fkxx6hjwiu] {
    flex-direction: row;
    align-items: stretch;
}

/* Two-column layout: AssetDetail | WorkOrder Folder */
.expanded-card-content.two-column-layout[b-fkxx6hjwiu] {
    gap: 16px;
    flex-direction: row;
    align-items: stretch;
}

/* In 2-column layout, AssetDetailPanel stretches full height */
.expanded-card-content.two-column-layout[b-fkxx6hjwiu]  .asset-detail-panel {
    flex: none;
    flex-shrink: 0;
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    align-self: stretch;
}

/* Panel slide container takes remaining space */
.expanded-card-content.two-column-layout .panel-slide-container[b-fkxx6hjwiu] {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 380px;
    max-height: 100%;
    overflow: hidden;
}

/* ===== WorkOrder Folder Container ===== */
.workorder-folder-container[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .workorder-folder-container {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 40px;
    /* Space for tab */
    min-width: 600px;
    min-height: 0;
    overflow: hidden;
}

/* Folder Tabs Container - envuelve el botón "+" y el <FolderTabStrip> con las
   tabs de work orders (Components/Common/FolderTabStrip). El scroll horizontal
   lo maneja el propio componente, así que este contenedor no recorta nada. */
.folder-tabs-container[b-fkxx6hjwiu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    z-index: 2;
    height: 40px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* Título, warning y badge de progreso se renderizan vía el LabelTemplate del
   FolderTabStrip, por eso siguen viviendo acá (con el scope de DynamicPanel).
   .folder-tab-content es el wrapper del propio componente (::deep, viven en
   su scope) que antes daba el .folder-tab viejo: layout en fila + padding. */
.folder-tabs-container[b-fkxx6hjwiu]  .folder-tab-content {
    /* Usamos flex (no inline-flex) + width:100% del área plana segura del tab
       (el max-width del componente base ya limita eso al 88% del tab-w).
       Así title-wrap y badge se distribuyen correctamente en todo el ancho
       disponible y el número de la OT no queda truncado si hay espacio. */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 14px;
    min-width: 0;
    width: 100%;
}

.folder-tab-title[b-fkxx6hjwiu] {
    /* La tira de pestañas apaga la selección en bloque para que arrastrar no marque texto.
       El número de orden se excluye: hay que poder seleccionarlo y copiarlo como en cualquier
       otro sitio, con Ctrl+C o el menú contextual. */
    user-select: text;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* Permite que el número se expanda hasta ocupar el espacio disponible;
       solo aplica ellipsis cuando realmente no hay lugar. */
    flex: 1 1 auto;
}

.folder-tab-title-wrap[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* Ocupa todo el espacio que sobre después del badge de progreso. */
    flex: 1 1 auto;
    overflow: hidden;
}

.folder-tab.active .folder-tab-title[b-fkxx6hjwiu] {
    color: #3D5676;
}

.folder-tab-progress[b-fkxx6hjwiu] {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    padding: 2px 8px;
    background: #7A8A9A;
    border-radius: 10px;
    /* Nunca se comprime ni se corta, aunque el nombre de la OT sea muy largo. */
    flex-shrink: 0;
    white-space: nowrap;
}

.folder-tab.active .folder-tab-progress[b-fkxx6hjwiu] {
    background: #e5b900;
    color: #1f2f45;
}


/* Folder Body - main content area */
.folder-body[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .folder-body {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    gap: 9px;
    background: #E1E1E1;
    border-radius: 0 15px 15px 15px;
    padding: 9px;
    min-height: 0;
    overflow: hidden;
    max-height: calc(100% - 0px);
    /* Account for folder tab */
}

/* Tarjeta única para las secciones distintas de Órdenes (Archivos, Vehículo, Históricos…): ocupa
   el cuerpo entero con la misma tarjeta blanca que la línea de tiempo, para que cambiar de sección
   no mueva la estructura. Lo que va dentro lo estandariza AssetSectionShell. */
.folder-section-card[b-fkxx6hjwiu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Timeline Section inside folder */
.folder-timeline-section[b-fkxx6hjwiu] {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    overflow: visible;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.folder-timeline-section> :last-child[b-fkxx6hjwiu] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.folder-timeline-section> :last-child[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Deep scroll styles for timeline */
.folder-timeline-section[b-fkxx6hjwiu]  .timeline-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.folder-timeline-section[b-fkxx6hjwiu]  .timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.folder-timeline-section[b-fkxx6hjwiu]  .timeline-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.folder-timeline-section[b-fkxx6hjwiu]  .timeline-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folder-timeline-section[b-fkxx6hjwiu]  .timeline-list::-webkit-scrollbar {
    display: none;
}

.section-header[b-fkxx6hjwiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #D0D0D0;
}

.section-title[b-fkxx6hjwiu] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3D5676;
}

.folder-timeline-section .assign-btn[b-fkxx6hjwiu] {
    padding: 6px 16px;
    background: #e5b900;
    border: none;
    border-radius: 6px;
    color: #1f2f45;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-timeline-section .assign-btn:hover[b-fkxx6hjwiu] {
    background: #cc9f00;
}

/* Detail Section inside folder */
.folder-detail-section[b-fkxx6hjwiu] {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-self: stretch;
}

.folder-detail-section[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
}

.folder-detail-section[b-fkxx6hjwiu]  .workorder-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.folder-detail-section[b-fkxx6hjwiu]  .unified-card {
    flex: 1;
    border-radius: 12px !important;
}

/* Embedded panel styles (when inside folder container) */
.folder-timeline-section[b-fkxx6hjwiu]  .timeline-panel.no-folder-style {
    padding-top: 0;
}

.folder-timeline-section[b-fkxx6hjwiu]  .timeline-content.embedded {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.folder-detail-section[b-fkxx6hjwiu]  .workorder-detail-panel.no-folder-style {
    padding-top: 0;
    gap: 9px;
}

.folder-detail-section[b-fkxx6hjwiu]  .workorder-section.embedded {
    background: white;
    border-radius: 12px;
}

/* Legacy: In 3-column layout (keep for backwards compat) */
.expanded-card-content.three-column-layout[b-fkxx6hjwiu] {
    gap: 9px;
    flex-direction: row;
    align-items: stretch;
}

.expanded-card-content.three-column-layout[b-fkxx6hjwiu]  .asset-detail-panel {
    flex: none;
    flex-shrink: 0;
    width: 432px;
    min-width: 432px;
    max-width: 432px;
}

.expanded-card-content.three-column-layout[b-fkxx6hjwiu]  .timeline-panel {
    flex: 2;
    flex-shrink: 0;
    min-width: 280px;
}

.expanded-card-content.three-column-layout .panel-slide-container[b-fkxx6hjwiu] {
    flex: 1;
    flex-shrink: 0;
    min-width: 600px;
}

/* Single Column Layout - Only AssetDetailPanel visible */
.expanded-card-content.single-column-layout[b-fkxx6hjwiu] {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px;
}

/* In single column, AssetDetailPanel SAME fixed width (stays static) */
.expanded-card-content.single-column-layout[b-fkxx6hjwiu]  .asset-detail-panel {
    flex: none;
    flex-shrink: 0;
    width: 432px;
    min-width: 432px;
    max-width: 432px;
}



/* Compact mode - uses RIGHT instead of width for smooth animation */
.expanded-card-view.compact[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view.compact {
    /* Formula: 100vw - left(220px) - desired_width */
    right: calc(100vw - 220px - var(--panel-compact-width, 450px));
    /* COLLAPSING: delay 0.4s so panels collapse BEFORE container shrinks */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.4s ease-in-out,
        right 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.expanded-card-view.compact.sidebar-collapsed[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view.compact.sidebar-collapsed {
    left: 80px;
    right: calc(100vw - 80px - var(--panel-compact-width, 450px));
}

/* ===== Reglas específicas por modo ===== */

/* Reportes e Inventarios: panel de ancho completo */

/* Inventarios: panel de ancho completo (igual patrón que reportes-mode) */
.dynamic-panel.inventarios-mode[b-fkxx6hjwiu] {
    width: auto !important;
    top: 10px;
    /* SIN !important → el JS puede sobreescribir esto al hacer drag */
    left: 220px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto;
    /* SIN !important → el JS puede sobreescribir esto al hacer drag */
    border-radius: 30px;
    background: var(--st-backdrop-tint);
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-height: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dynamic-panel.inventarios-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    right: 10px !important;
    top: 10px;
    /* SIN !important → el JS puede sobreescribir esto al hacer drag */
    bottom: 10px !important;
    width: auto !important;
    height: auto;
    /* SIN !important → el JS puede sobreescribir esto al hacer drag */
    border-radius: 30px;
}

/* Cuando se abre un modal (asignación, entrega, etc.) desde Inventarios,
   el panel pasa a modo sidebar izquierdo igual que el Inbox (450px de ancho) */
.dynamic-panel.inventarios-mode.inbox-mode[b-fkxx6hjwiu] {
    width: 450px !important;
    right: auto !important;
    left: 220px !important;
    bottom: 10px !important;
    top: 10px !important;
    height: auto !important;
}

.dynamic-panel.inventarios-mode.inbox-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px !important;
    width: 450px !important;
    right: auto !important;
}

/* Empresa: mismo posicionamiento que .expanded-card-view para que el listado
   y el detalle de empresa/tienda no salten de lugar al navegar entre ambos. */
.dynamic-panel.empresa-mode[b-fkxx6hjwiu] {
    top: 10px;
    left: 220px;
    bottom: 10px;
    border-radius: 24px;
}

.dynamic-panel.empresa-mode.sidebar-collapsed[b-fkxx6hjwiu] {
    left: 80px;
}


/* Panel slide container - panels that appear/disappear with sweep effect */
.panel-slide-container[b-fkxx6hjwiu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transform-origin: left center;
}

/* Visible state - entra desde la derecha */
.panel-slide-container.visible[b-fkxx6hjwiu] {
    opacity: 1;
    transform: translateX(0);
    flex: 1;
    max-width: 100%;
    transition: opacity 0.3s ease-out,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        flex 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden state - sale hacia la izquierda */
.panel-slide-container.hidden[b-fkxx6hjwiu] {
    opacity: 0;
    transform: translateX(-40px);
    flex: 0;
    min-width: 0 !important;
    max-width: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in,
        transform 0.2s ease-in,
        flex 0.25s ease-in,
        max-width 0.25s ease-in;
}

.panel-slide-container.delay.visible[b-fkxx6hjwiu] {
    transition-delay: 0.35s;
}

.panel-slide-container.delay.hidden[b-fkxx6hjwiu] {
    transition-delay: 0s;
}

.no-asset-placeholder[b-fkxx6hjwiu] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    font-size: 1rem;
}

.expanded-card-image[b-fkxx6hjwiu] {
    width: 100%;
    height: 250px;
    background: #E8E8E8;
    border-radius: 20px;
    flex-shrink: 0;
}

.expanded-card-details[b-fkxx6hjwiu] {
    color: #333333;
}

.expanded-card-details h3[b-fkxx6hjwiu] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #4ecdc4;
}

.expanded-card-details p[b-fkxx6hjwiu] {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* --- RESPONSIVE DESIGN (Móvil) --- */
@media (max-width: 768px) {

    /* 1. Buscador: Centrado y ancho fluido (90% de la pantalla) */
    .search-wrapper[b-fkxx6hjwiu] {
        left: 5vw;
        /* 5% desde la izquierda */
        width: 90vw;
        /* 90% del ancho */
        top: 15px;
    }

    /* Ignoramos el estado del sidebar en móvil */
    .search-wrapper.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 5vw;
    }

    /* 2. Panel Dinámico: Centrado y ancho fluido */
    .dynamic-panel[b-fkxx6hjwiu] {
        left: 5vw;
        width: 90vw;
        top: 70px;
    }

    .dynamic-panel.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 5vw;
    }

    /* 3. Tarjeta Expandida: Pantalla completa para mejor lectura */
    .expanded-card-view[b-fkxx6hjwiu] {
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        z-index: 100;
    }

    .expanded-card-view.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 0;
    }

    /* Ajuste del contenido interno para móvil */
    .expanded-card-image[b-fkxx6hjwiu] {
        height: 200px;
        /* Un poco más pequeña la imagen */
    }
}

/* === Historial Integracion Mode — Bottom Float layout === */
.dynamic-panel.historial-integracion-mode[b-fkxx6hjwiu] {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 30px !important;
    top: auto !important;
    width: 600px !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    border-radius: 12px !important;
    background: #0d1117 !important;
    border: 1px solid #21262d !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.dynamic-panel.historial-integracion-mode.visible[b-fkxx6hjwiu] {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.dynamic-panel.historial-integracion-mode:not(.visible)[b-fkxx6hjwiu] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(20px) !important;
}

.dynamic-panel.historial-integracion-mode .dynamic-panel-content[b-fkxx6hjwiu] {
    background: #0d1117 !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
}

/* ==========================================================================
   Company Tabs Strip (Empresa panel: switch between open companies)
   ========================================================================== */
.company-column[b-fkxx6hjwiu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    width: 430px;
    min-width: 430px;
    max-width: 430px;
    flex-shrink: 0;
}

/* Cuando hay una opción de tienda seleccionada, el StoreDetailPanel adentro
   se colapsa a un riel de íconos (ver StoreDetailPanel.razor.css) para
   cederle espacio al panel ancho de la opción. :has() reacciona a la clase
   .rail-expanded, que el propio StoreDetailPanel solo aplica tras un clic
   explícito del usuario (ToggleRailExpanded) — nunca con hover. */
.company-column.collapsed[b-fkxx6hjwiu] {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    transition: width 0.45s ease, min-width 0.45s ease, max-width 0.45s ease;
    /* Los tooltips del riel se dibujan fuera de sus 76px, encima del panel ancho de la opción
       (.collapsed-option-icon::after en StoreDetailPanel.razor.css). Sin contexto de apilamiento
       propio quedaban a merced del orden de pintado: .store-option-wide-panel es un hermano
       POSTERIOR con fondo blanco opaco, y cualquier descendiente suyo con z-index —las vistas de
       tabla montan AG Grid, que usa z-index en header, columnas fijas y popups— compite en el mismo
       contexto y tapa el tooltip. Por eso el corte se veía solo en vista de tabla y no en tarjetas.
       Con position + z-index, la columna entera (y sus tooltips) pasa a pintarse por encima de ese
       subárbol. Queda muy por debajo de los 10000 de modales y RightSidebar, que siguen tapándola. */
    position: relative;
    z-index: 5;
}

.company-column.collapsed:has(.store-detail-panel.rail-expanded)[b-fkxx6hjwiu] {
    width: 430px;
    min-width: 430px;
    max-width: 430px;
}

/* Los tabs de tiendas abiertas ceden el espacio al riel colapsado; solo el
   botón de volver a la empresa permanece visible. Si el riel se expande
   manualmente (panel vuelto a la normalidad), los chips de tienda reaparecen. */
.company-column.collapsed .company-tabs-scroll[b-fkxx6hjwiu] {
    display: none;
}

.company-column.collapsed:has(.store-detail-panel.rail-expanded) .company-tabs-scroll[b-fkxx6hjwiu] {
    display: flex;
}

/* Con los chips ocultos, el botón de volver queda solo en la tira; se centra
   dentro del riel angosto en vez de quedar pegado a la izquierda. Si el riel
   se expande manualmente los chips reaparecen, así que se restaura la
   alineación normal para no descentrar esa fila. */
.company-column.collapsed .company-tabs-strip[b-fkxx6hjwiu] {
    justify-content: center;
}

.company-column.collapsed:has(.store-detail-panel.rail-expanded) .company-tabs-strip[b-fkxx6hjwiu] {
    justify-content: flex-start;
}

.company-tabs-strip[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tabs-back-btn[b-fkxx6hjwiu] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tabs-back-btn:hover[b-fkxx6hjwiu] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-2px);
}

.company-tabs-scroll[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.company-tabs-scroll[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
}

.company-tab-pill[b-fkxx6hjwiu] {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

.company-tab-pill:hover[b-fkxx6hjwiu] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.company-tab-pill.active[b-fkxx6hjwiu] {
    background: #dea301;
    color: #1a2a42;
    box-shadow: 0 4px 10px rgba(222, 163, 1, 0.35);
}

/* Wide sibling panel that shows a store config sub-panel (Cargos, Roles, etc.)
   while the narrow store column keeps its own summary/options list visible. */
.store-option-wide-panel[b-fkxx6hjwiu] {
    background: #ffffff;
    border-radius: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
}

/* ===== Panel de Asignacion Lateral superpuesto ENCIMA del Calendario ===== */
.calendar-assignment-backdrop[b-fkxx6hjwiu] {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9993 !important;
    animation: fadeInCalendarBackdrop-b-fkxx6hjwiu 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInCalendarBackdrop-b-fkxx6hjwiu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.calendar-assignment-drawer[b-fkxx6hjwiu],
.calendar-assignment-modal-wrapper[b-fkxx6hjwiu] {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    /* 432px = 480px menos un 10%. */
    width: 432px !important;
    max-width: calc(100vw - 90px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #1f2f45 !important;
    color: #ffffff !important;
    /* Por debajo del sidebar, que usa 9995: empatados ganaba el modal por orden de documento y
       tapaba los contadores de bandeja y notificaciones, que deben verse siempre. */
    z-index: 9994 !important;
    box-shadow: 25px 0 35px -8px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 16px 16px 0 !important;
    overflow: hidden !important;
    animation: slideInCalendarDrawer-b-fkxx6hjwiu 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInCalendarDrawer-b-fkxx6hjwiu {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.calendar-assignment-close-btn[b-fkxx6hjwiu] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1060;
    transition: all 0.2s ease;
    outline: none;
}

.calendar-assignment-close-btn:hover[b-fkxx6hjwiu] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    transform: scale(1.05);
}
/* /Pages/Home/Components/ExportInboxTableModal.razor.rz.scp.css */
.export-description[b-1nydxw4ivz] {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 24px;
}

.export-options-grid[b-1nydxw4ivz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 32px;
}

.field-group h4[b-1nydxw4ivz] {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.field-list[b-1nydxw4ivz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Checkbox styling */
.checkbox-container[b-1nydxw4ivz] {
    display: block;
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #cbd5e1;
    user-select: none;
    transition: color 0.2s;
}

.checkbox-container:hover[b-1nydxw4ivz] {
    color: #f8fafc;
}

.checkbox-container input[b-1nydxw4ivz] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark[b-1nydxw4ivz] {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-container:hover input ~ .checkmark[b-1nydxw4ivz] {
    background-color: rgba(255, 255, 255, 0.08);
}

.checkbox-container input:checked ~ .checkmark[b-1nydxw4ivz] {
    background-color: #e5b900;
    border: none;
    box-shadow: none;
}

.checkmark[b-1nydxw4ivz]:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark[b-1nydxw4ivz]:after {
    display: block;
}

.checkbox-container .checkmark[b-1nydxw4ivz]:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkbox styling finaliza aquí */

/* /Pages/Home/Components/HandOver/HandOverModal.razor.rz.scp.css */
/* ===== Wizard Container — fills its parent (DynamicPanel expanded view) ===== */
/* NOTA: El efecto glassmorphism (fondo oscuro + blur) lo maneja el PADRE (expanded-card-view via :has)
   porque backdrop-filter no funciona dentro de overflow:hidden del contenedor padre.
   Este elemento debe permanecer transparente. */
.wizard-modal-glass[b-ul1pjpvhjd] {
    background: transparent;
    border: none;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    animation: fadeIn-b-ul1pjpvhjd 0.25s ease;
    position: relative;
    overflow: hidden;
    margin: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
}

/* === HUD Mode (3D Workshop Active) === */
/* El panel conserva su apariencia normal (fondo gris + blur del padre).
   Solo ajustamos pointer-events para que los clics pasen al mapa 3D
   fuera de la tarjeta blanca. */
.wizard-modal-glass.in-workshop[b-ul1pjpvhjd] {
    border: none;
}

/* La tarjeta blanca mantiene su estilo normal en modo taller */



/* ===== Header (Top Bar) ===== */
.wizard-top-bar[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 10px 24px;
    position: relative;
    z-index: 2;
}

.owner-card[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 120px;
    text-align: center;
}

.owner-avatar-wrapper[b-ul1pjpvhjd] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 4px; /* Space for border */
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3);
}

.owner-avatar-wrapper.placeholder-style[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.05);
    border: 2px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.owner-avatar-wrapper.placeholder-style.filled[b-ul1pjpvhjd] {
    border: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3);
}

.owner-img[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.question-mark[b-ul1pjpvhjd] {
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.process-badge[b-ul1pjpvhjd] {
    position: absolute;
    bottom: -4px;
    left: -8px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: white;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-badge img[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.owner-info[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

/* Sólo es tocable cuando HAY otra rama a la que cambiar: un affordance que no lleva a ninguna
   decisión es una promesa vacía. Se marca discreto —el origen ya está elegido, esto es corregir,
   no elegir— pero visible, porque un control invisible no existe. */
.owner-info.clickable[b-ul1pjpvhjd] {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 8px;
    transition: background-color 120ms ease;
}

.owner-info.clickable:hover[b-ul1pjpvhjd] {
    background-color: rgb(255 255 255 / 0.12);
}

.owner-name[b-ul1pjpvhjd] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display:block;
}

.owner-process[b-ul1pjpvhjd] {
    font-size: 11px;
    color: white;
}

.owner-placeholder[b-ul1pjpvhjd] {
    font-size: 11px;
    color: white;
    line-height: 1.2;
}

.asset-card-center[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    width: 150px;
    height:170px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    z-index: 3;
    position: relative;
    top: -10px;
}

.asset-img[b-ul1pjpvhjd] {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: #cdcdcd;
}

.asset-plate[b-ul1pjpvhjd] {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.dots-decoration[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.dots-decoration .dot[b-ul1pjpvhjd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dots-decoration .dot.active[b-ul1pjpvhjd] {
    background: #94a3b8;
}

.chevron-right[b-ul1pjpvhjd] {
    color: #94a3b8;
    margin-left: 2px;
}

/* ===== Pill Orden / Aseguradora (reutilización de AssignmentModal) ===== */
.hc-order-pill[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #eab308;
    border-radius: 10px;
    padding: 4px 10px 4px 4px;
    margin-top: 12px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
    position: relative;
    z-index: 90;
    width: 100%;
    box-sizing: border-box;
}

.hc-order-pill.clickable[b-ul1pjpvhjd] {
    cursor: pointer;
}

.hc-order-pill.clickable:not(.dropdown-open):hover[b-ul1pjpvhjd] {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.hc-order-pill.clickable:not(.dropdown-open):active[b-ul1pjpvhjd] {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* La orden pedida dejó de resolver y hay varias vivas: el usuario tiene que elegir. */
.hc-order-pill.needs-choice[b-ul1pjpvhjd] {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

.hc-order-choice-hint[b-ul1pjpvhjd] {
    margin-top: 8px;
    max-width: 260px;
    font-size: 12px;
    line-height: 1.4;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
}

/* Avatar encargado — izquierda */
.hop-worker-avatar[b-ul1pjpvhjd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hop-worker-avatar img[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hop-avatar-initials[b-ul1pjpvhjd] {
    font-size: 10px;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
}

/* Centro: número + aseguradora */
.hop-center[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.hop-order-number[b-ul1pjpvhjd] {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.hop-insurer-name[b-ul1pjpvhjd] {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Derecha: logo + badge */
.hop-right[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    position: relative;
}

.hop-insurer-logo[b-ul1pjpvhjd] {
    width: 32px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    color: #b45309;
}

.hop-insurer-logo img[b-ul1pjpvhjd] {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.hop-count-badge[b-ul1pjpvhjd] {
    position: absolute;
    bottom: -10px;
    right: -14px;
    background: #ffffff;
    color: #eab308;
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0;
}

/* Dropdown de órdenes de trabajo */
.hop-wo-dropdown[b-ul1pjpvhjd] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: auto; /* reset left to use right align like Assignment */
    background: #1f2f45;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: dropdownFadeIn-b-ul1pjpvhjd 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hop-wo-dropdown[b-ul1pjpvhjd]::-webkit-scrollbar {
    display: none;
}

@keyframes dropdownFadeIn-b-ul1pjpvhjd {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hop-wo-item[b-ul1pjpvhjd] {
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.hop-wo-item[b-ul1pjpvhjd]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    height: 60%;
    width: 3px;
    background: #eab308;
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 0 4px 4px 0;
}

.hop-wo-item:hover[b-ul1pjpvhjd] {
    background: rgba(255, 255, 255, 0.06);
}

.hop-wo-item:hover[b-ul1pjpvhjd]::before {
    transform: translateY(-50%) scaleY(0.7);
    background: rgba(255, 255, 255, 0.4);
}

.hop-wo-item.active[b-ul1pjpvhjd] {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.03) 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.hop-wo-item.active[b-ul1pjpvhjd]::before {
    transform: translateY(-50%) scaleY(1);
    background: #eab308;
}

.hop-wo-number[b-ul1pjpvhjd] {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
    z-index: 1;
}

.hop-wo-insurance[b-ul1pjpvhjd] {
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8 !important;
    z-index: 1;
}

.hop-wo-item.active .hop-wo-number[b-ul1pjpvhjd] {
    color: #fef08a !important;
}

.hop-wo-item.active .hop-wo-insurance[b-ul1pjpvhjd] {
    color: #f8fafc !important;
}

.hop-wo-backdrop[b-ul1pjpvhjd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: transparent;
}

/* ===== Close Button Overlay ===== */
.top-close-btn[b-ul1pjpvhjd] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    transition: all 0.2s ease;
}
.top-close-btn:hover[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.15);
}
.top-close-btn svg[b-ul1pjpvhjd] {
    color: rgba(255,255,255,0.7);
}

/* ===== Main White Content Area ===== */
.wizard-white-card[b-ul1pjpvhjd] {
    background: #fff;
    border-radius: 20px;
    margin: 0 6px;
    padding: 19px 12px 24px 12px;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Solo scroll vertical; nada debe desbordar horizontalmente */
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1; /* Ocultar barra de scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    /* Chrome, Safari, Opera */
    .wizard-white-card[b-ul1pjpvhjd]::-webkit-scrollbar {
        display: none;
    }

.step-content[b-ul1pjpvhjd] {
    animation: fadeSlideIn-b-ul1pjpvhjd 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ho-step-title[b-ul1pjpvhjd] {
    text-align: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.2px;
}

.ho-step-subtitle[b-ul1pjpvhjd] {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    margin-top: -12px;
    margin-bottom: 20px;
}

/* Tabs Simulation */
.tabs-sim[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.ho-tab[b-ul1pjpvhjd] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #94a3b8;
}
    .ho-tab.active[b-ul1pjpvhjd] {
        background: #e5b900;
        color: #fff;
        box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
    }

.search-sim[b-ul1pjpvhjd] {
    background: #f1f5f9;
    padding: 10px 16px;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    border: 1px solid transparent;
}
.search-sim:focus-within[b-ul1pjpvhjd] {
    border-color: #cbd5e1;
}
.ho-search-input[b-ul1pjpvhjd] {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: #1e293b;
}
.ho-search-input[b-ul1pjpvhjd]::placeholder {
    color: #94a3b8;
}

/* Grid & Cards */
.person-grid[b-ul1pjpvhjd], .ho-person-grid[b-ul1pjpvhjd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 12px;
}

.person-card-squared[b-ul1pjpvhjd], .ho-person-card[b-ul1pjpvhjd] {
    background: #94a3b8; /* Exact color from Figma */
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    /* Los grid items tienen min-width:auto por defecto y NO encogen por debajo de su
       contenido (nombre largo, footer carga+badge), desbordando las columnas 1fr y
       generando scroll horizontal. min-width:0 permite que respeten el ancho del grid. */
    min-width: 0;
}

    .person-card-squared.selected[b-ul1pjpvhjd] {
        border-color: #e5b900;
        box-shadow: 0 4px 16px rgba(234, 179, 8, 0.3);
        transform: translateY(-2px);
        background: #e5b900;
    }

    .person-card-squared.suggested:not(.selected)[b-ul1pjpvhjd] {
        border-color: #e5b900;
        box-shadow: 0 0 10px rgba(229, 185, 0, 0.4);
    }

.person-card-squared:hover[b-ul1pjpvhjd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.person-avatar-circle[b-ul1pjpvhjd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.person-avatar-circle img[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-placeholder.person-icon[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.process-avatar-circle[b-ul1pjpvhjd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-avatar-circle img[b-ul1pjpvhjd] {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.avatar-placeholder.process-icon[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

.person-card-name[b-ul1pjpvhjd] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 12px;
    height: 28px;
    overflow: hidden;
}

.person-stats-row[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.stat-pill[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
}

.stat-pill.white[b-ul1pjpvhjd] {
    background: #fff;
    color: #64748b;
}

/* ===== Tarjeta "+ Agregar" (paridad MAUI) =====
   Mismo fondo azul-gris que las tarjetas hermanas + círculo brillante con "+" y etiqueta.
   Aplica al paso de Procesos (.add-btn) y de Personas (.ho-invite-card). */
.person-card-squared.add-btn[b-ul1pjpvhjd],
.ho-person-card.ho-invite-card[b-ul1pjpvhjd] {
    background: #94a3b8;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
}

.person-card-squared.add-btn:hover[b-ul1pjpvhjd],
.ho-person-card.ho-invite-card:hover[b-ul1pjpvhjd] {
    background: #8b98ad;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.ho-add-circle[b-ul1pjpvhjd] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45),
                inset 0 0 10px rgba(255, 255, 255, 0.18);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.person-card-squared.add-btn:hover .ho-add-circle[b-ul1pjpvhjd],
.ho-person-card.ho-invite-card:hover .ho-add-circle[b-ul1pjpvhjd] {
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.7),
                inset 0 0 12px rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.ho-add-circle svg[b-ul1pjpvhjd] {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.ho-add-label[b-ul1pjpvhjd] {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.2px;
    text-align: center;
}

/* Specific Person Card Styles (Step Person) */
.ho-person-card[b-ul1pjpvhjd] {
    background: #94a3b8;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 145px;
    position: relative;
}

    .ho-person-card:hover[b-ul1pjpvhjd] {
        background: #94a3b8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

.ho-person-card.selected[b-ul1pjpvhjd] {
    background: #e5b900;
    border-color: #e5b900;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
    transform: translateY(-2px);
}

.ho-person-card.suggested:not(.selected)[b-ul1pjpvhjd] {
    border-color: #e5b900;
    box-shadow: 0 0 10px rgba(229, 185, 0, 0.4);
}

.ho-pc-avatar[b-ul1pjpvhjd] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden; 
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-bottom: 4px;
}

.ho-pc-avatar img[b-ul1pjpvhjd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ho-pc-initials[b-ul1pjpvhjd] {
    font-size: 18px;
    font-weight: 700;
    color: #4a6fa5;
}

.ho-pc-info[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
    flex: 1;
}

.ho-pc-name[b-ul1pjpvhjd] {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    max-height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ho-pc-role[b-ul1pjpvhjd] {
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin-top: 2px;
}

/* Badges footer: workload + counts */
.ho-pc-footer[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: 6px;
    gap: 4px;
}

.ho-pc-workload[b-ul1pjpvhjd] {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    padding: 2px 6px;
    white-space: nowrap;
}

.ho-person-card.selected .ho-pc-workload[b-ul1pjpvhjd] {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

.ho-pc-count-badge[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 2px 6px;
}

.ho-pc-count-badge b[b-ul1pjpvhjd] {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

/* La magnitud que NO gobierna el orden en este tenant queda atenuada, igual que en el móvil.
   Las dos siguen visibles —el operario quiere ver horas y vehículos— pero se lee de un
   vistazo cuál es la que está decidiendo quién va primero. */
.ho-pc-metric-muted[b-ul1pjpvhjd] {
    opacity: 0.45;
}

.ho-pc-count-badge small[b-ul1pjpvhjd] {
    font-size: 9px;
    color: rgba(255,255,255,0.75);
}

/* Punto verde de sugerido */
/* Pasó a la izquierda: la derecha la ocupan ahora las bolitas de nivel, y superpuestos
   no se distinguía cuál era cuál. */
.ho-pc-suggested-dot[b-ul1pjpvhjd] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34,197,94,0.6);
}

/* No está habilitada para el nivel de la orden. Se atenúa para que se vea POR QUÉ quedó
   al final de la lista, pero sigue clickeable: el operario tiene que poder entregarle a
   mano a quien tiene enfrente aunque el dato de niveles esté mal cargado.
   Al pasar el mouse y al quedar seleccionada vuelve a opacidad plena, para poder leerla
   bien justo cuando se la está por elegir. */
.ho-person-card.level-mismatch[b-ul1pjpvhjd] {
    opacity: 0.45;
}

.ho-person-card.level-mismatch:hover[b-ul1pjpvhjd],
.ho-person-card.level-mismatch.selected[b-ul1pjpvhjd] {
    opacity: 1;
}

/* Niveles de colisión que la persona puede trabajar, de menor a mayor intensidad.
   Sólo se dibujan los habilitados, así que el ancho de la fila dice de un vistazo hasta
   dónde llega. Los hexadecimales son los MISMOS que en el móvil a propósito: el operario
   aprende la escala una vez y la lee igual en los dos clientes. */
.ho-pc-levels[b-ul1pjpvhjd] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 3px;
}

.ho-pc-level-dot[b-ul1pjpvhjd] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ho-pc-level-dot.express[b-ul1pjpvhjd] {
    background: #3b82f6;
}

.ho-pc-level-dot.leve[b-ul1pjpvhjd] {
    background: #86d26d;
}

.ho-pc-level-dot.medio[b-ul1pjpvhjd] {
    background: #ffd255;
}

.ho-pc-level-dot.fuerte[b-ul1pjpvhjd] {
    background: #e03d3d;
}

.ho-invite-card[b-ul1pjpvhjd] {
    min-height: 145px;
}


/* Form Inputs (for Form Step inside white card) */
.ho-form-group[b-ul1pjpvhjd] {
    margin-bottom: 20px;
}
.ho-label[b-ul1pjpvhjd] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}
.ho-select[b-ul1pjpvhjd], .ho-textarea[b-ul1pjpvhjd] {
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}
.ho-select:focus[b-ul1pjpvhjd], .ho-textarea:focus[b-ul1pjpvhjd] {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.ho-textarea[b-ul1pjpvhjd] {
    min-height: 100px;
    resize: vertical;
}

/* IsInStore Checkbox (Form Step) */
.ho-instore-group[b-ul1pjpvhjd] {
    margin-top: 4px;
    margin-bottom: 16px;
}
.ho-instore-label[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    user-select: none;
}
.ho-instore-checkbox[b-ul1pjpvhjd] {
    width: 18px;
    height: 18px;
    accent-color: #e84393;
    cursor: pointer;
    flex-shrink: 0;
}

/* IsInStore Badge (Summary Step) */
.ho-instore-badge[b-ul1pjpvhjd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.ho-instore-yes[b-ul1pjpvhjd] {
    background: #dcfce7;
    color: #15803d;
}
.ho-instore-no[b-ul1pjpvhjd] {
    background: #fef9c3;
    color: #92400e;
}


/* Empty States */
.ho-empty-state[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    flex: 1;
}

.ho-empty-state.ho-small[b-ul1pjpvhjd] {
    padding: 12px;
    font-size: 12px;
}

/* Aviso del paso de Personas cuando el proceso destino no tiene cargo configurado: la lista queda
   vacía A PROPÓSITO (antes venía el taller entero) y esto explica por qué, justo debajo del "+". */
.ho-config-note[b-ul1pjpvhjd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.ho-config-note svg[b-ul1pjpvhjd] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #64748b;
}

/* ===== Summary (Resume Step — inside CenterDialog) ===== */
.ho-summary-row[b-ul1pjpvhjd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ho-summary-row:last-child[b-ul1pjpvhjd] {
    border-bottom: none;
}

.ho-summary-label[b-ul1pjpvhjd] {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.ho-summary-value[b-ul1pjpvhjd] {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    text-align: right;
    max-width: 55%;
    word-break: break-word;
}

/* ===== Location 3D Step ===== */
.ho-location-content[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    flex: 1;
}

/* ===== Footer Operations ===== */
.wizard-footer-bar[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 10px 24px 10px;
    background: transparent;
    gap: 8px; /* separación mínima entre timeline y botones al comprimirse */
}

.step-timeline-bar[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    gap: 1px;
    /* Cuando aparece el botón "Atrás" (paso Personas+), el footer necesita más
       ancho del disponible en 450px. En vez de desbordar (scroll horizontal),
       la barra de timeline se comprime: los nodos quedan fijos y las líneas
       encogen. En el paso Procesos (hay espacio de sobra) no cambia nada. */
    flex-shrink: 1;
    min-width: 0;
}

.timeline-node[b-ul1pjpvhjd] {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cbd5e1;
    color: #fff;
    transition: all 0.3s;
    position: relative;
    flex-shrink: 0; /* los nodos nunca se deforman; solo las líneas encogen */
}

.timeline-node.completed[b-ul1pjpvhjd] {
    background: #fe00e4;
}

.timeline-node.active[b-ul1pjpvhjd] {
    background: #e5b900;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.timeline-line[b-ul1pjpvhjd] {
    width: 24px;
    min-width: 6px; /* puede encoger hasta 6px cuando el footer necesita espacio */
    flex-shrink: 1;
    height: 2px;
    background: rgba(255,255,255,0.2);
}

/* Los botones de acción mantienen su tamaño; la timeline es la que cede espacio. */
.action-buttons[b-ul1pjpvhjd] {
    flex-shrink: 0;
}

.action-buttons button[b-ul1pjpvhjd] {
    white-space: nowrap;
}

.btn-next-pink[b-ul1pjpvhjd] {
    background: #e84393;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(232, 67, 147, 0.4);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-next-pink:hover:not(:disabled)[b-ul1pjpvhjd] {
    background: #d63080;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 67, 147, 0.5);
}

.btn-next-pink:disabled[b-ul1pjpvhjd] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ho-btn-back[b-ul1pjpvhjd] {
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.ho-btn-back:hover[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.ho-btn-back:disabled[b-ul1pjpvhjd] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* New Buttons */
.ho-btn-confirm[b-ul1pjpvhjd], .ho-btn-confirm-loc[b-ul1pjpvhjd] {
    background: #eab308;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
    transition: all 0.2s;
}

.ho-btn-confirm:hover[b-ul1pjpvhjd], .ho-btn-confirm-loc:hover[b-ul1pjpvhjd] {
    background: #d97706;
    transform: translateY(-1px);
}

.ho-btn-3d[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
    margin: 20px 0;
}

.ho-btn-3d:hover[b-ul1pjpvhjd] {
    background: rgba(255,255,255,0.15);
}

.ho-btn-cancel[b-ul1pjpvhjd] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ho-btn-cancel:hover[b-ul1pjpvhjd] {
    background: #f1f5f9;
}


/* Animations */
@keyframes fadeIn-b-ul1pjpvhjd {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp-b-ul1pjpvhjd {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeSlideIn-b-ul1pjpvhjd {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Validation Toast */
.validation-toast-overlay[b-ul1pjpvhjd] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.validation-toast[b-ul1pjpvhjd] {
    background: #0f172a;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    animation: toastSlideUp-b-ul1pjpvhjd 0.3s ease-out;
    pointer-events: auto;
}

@keyframes toastSlideUp-b-ul1pjpvhjd {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ===== Selector "¿Qué deseas crear?" y host de formularios de creación =====
   Se muestra sobre el wizard cuando el usuario pulsa la tarjeta "+" del paso de procesos. */
.ho-create-chooser-overlay[b-ul1pjpvhjd] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.ho-create-chooser[b-ul1pjpvhjd] {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    width: min(380px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.ho-create-option[b-ul1pjpvhjd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ho-create-option:hover[b-ul1pjpvhjd] {
    background: #eef2f7;
    border-color: #e84393;
}

.ho-create-option-title[b-ul1pjpvhjd] {
    font-weight: 700;
    font-size: 14px;
    color: #1f2f45;
}

.ho-create-option-desc[b-ul1pjpvhjd] {
    font-size: 12px;
    color: #64748b;
}

/* (Los formularios de creación Proceso/Entrega/Persona ahora se alojan en el componente
   reutilizable LeftSidebar — ver variante .ho-create-sidebar en LeftSidebar.razor.css.) */
/* /Pages/Home/Components/HandOver/PersonWorkloadModal.razor.rz.scp.css */
/* Person Workload Sidebar Styles */

/* Header Styles */
.pw-header-title[b-x5i858jp9g] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.pw-header-subtitle[b-x5i858jp9g] {
    font-size: 0.85rem;
    color: #a0aab0;
    margin: 0;
}

/* Tabs & Hours Row */
.pw-tabs-row[b-x5i858jp9g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.pw-pills-container[b-x5i858jp9g] {
    display: flex;
    gap: 10px;
}
.pw-pill[b-x5i858jp9g] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pw-pill.active[b-x5i858jp9g] {
    background-color: #FFBB00; /* Yellow */
    color: #202B3C;
}
.pw-pill.inactive[b-x5i858jp9g] {
    background-color: #334155; /* Dark blue pill */
    color: #ffffff;
}
.pw-pill.inactive:hover[b-x5i858jp9g] {
    background-color: #3b4b63;
}

/* Hours Display */
.pw-hours-display[b-x5i858jp9g] {
    text-align: right;
    font-size: 0.75rem;
    color: #a0aab0;
}
.pw-hours-display div[b-x5i858jp9g] {
    margin-bottom: 2px;
}
.pw-hours-display strong[b-x5i858jp9g] {
    color: #ffffff;
    font-weight: 700;
}

/* Search Bar */
.pw-search-container[b-x5i858jp9g] {
    margin-bottom: 20px;
}
.pw-search-input[b-x5i858jp9g] {
    width: 100%;
    background-color: #334155;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: #ffffff;
    font-size: 0.95rem;
    outline: none;
}
.pw-search-input[b-x5i858jp9g]::placeholder {
    color: #838c96;
}

/* Cards Grid */
.pw-cards-grid[b-x5i858jp9g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.pw-card[b-x5i858jp9g] {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pw-card-img-container[b-x5i858jp9g] {
    height: 90px;
    background-color: white;
    position: relative;
    padding: 4px;
}
.pw-card-img[b-x5i858jp9g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:12px;
}
.pw-card-img-placeholder[b-x5i858jp9g] {
    width: 100%;
    height: 100%;
    background: darkgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.pw-card-img-default[b-x5i858jp9g] {
    width: 100%;
    height: 100%;
    color: #ffffff;
    object-fit: contain;
}

.pw-card-body[b-x5i858jp9g] {
    padding: 2px 10px 8px 10px;
    display: flex;
    flex-direction: column;
}
.pw-card-title[b-x5i858jp9g] {
    font-size: 1rem;
    font-weight: 800;
    color: #202b3c;
    text-align: center;
    margin: 0 0 5px 0;
}
.pw-card-hours-row[b-x5i858jp9g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
}
.pw-card-hours-left[b-x5i858jp9g] {
    color: #838c96;
}
.pw-card-hours-right[b-x5i858jp9g] {
    color: #202b3c;
}
.pw-unit[b-x5i858jp9g] {
    font-weight: 500;
    font-size: 0.65rem;
    color: #a0aab0;
}
/* /Pages/Home/Components/HandOver/ProxyWorkerPickerModal.razor.rz.scp.css */
.pwp-container[b-8kkpjl0h97] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 16px;
}

.pwp-search-box[b-8kkpjl0h97] {
    width: 100%;
}

.pwp-search-input[b-8kkpjl0h97] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.pwp-search-input:focus[b-8kkpjl0h97] {
    border-color: #e84393;
}

.pwp-worker-list[b-8kkpjl0h97] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.pwp-empty[b-8kkpjl0h97] {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-size: 0.9rem;
}

.pwp-worker-card[b-8kkpjl0h97] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}

.pwp-worker-card:hover[b-8kkpjl0h97] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.pwp-worker-card.pwp-selected[b-8kkpjl0h97] {
    background: #fdf0f6;
    border-color: #e84393;
}

.pwp-avatar[b-8kkpjl0h97] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pwp-avatar img[b-8kkpjl0h97] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pwp-initials[b-8kkpjl0h97] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.pwp-info[b-8kkpjl0h97] {
    display: flex;
    flex-direction: column;
}

.pwp-name[b-8kkpjl0h97] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
}


.ho-search-input[b-8kkpjl0h97] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.ho-search-input:focus[b-8kkpjl0h97] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.pwp-worker-list[b-8kkpjl0h97] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

/* Fallback styles in case global ones aren't loaded */
.ho-person-card[b-8kkpjl0h97] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s;
}

.ho-person-card:hover[b-8kkpjl0h97] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.ho-person-card.selected[b-8kkpjl0h97] {
    background: #eff6ff;
    border-color: #3b82f6;
}

.ho-pc-avatar[b-8kkpjl0h97] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ho-pc-avatar img[b-8kkpjl0h97] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ho-pc-avatar-initials[b-8kkpjl0h97] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.ho-pc-info[b-8kkpjl0h97] {
    display: flex;
    flex-direction: column;
}

.ho-pc-name[b-8kkpjl0h97] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
}
/* /Pages/Home/Components/HandOver/QuickHandOverModal.razor.rz.scp.css */
/* ===== QuickHandOverModal.razor.css ===== */
.quick-handover-container[b-an6dt19667] {
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===== Main White Content Area ===== */
.quick-ho-context-header[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 12px;
    box-sizing: border-box;
    width: 100%;
}

.quick-ho-flow-step[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 82px;
}

.quick-ho-step-label[b-an6dt19667] {
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.quick-ho-flow-step.is-origin .quick-ho-step-name[b-an6dt19667] {
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #475569;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 4px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.quick-ho-flow-step.is-destination .quick-ho-step-name[b-an6dt19667] {
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #0284c7;
    text-align: center;
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 6px;
    padding: 4px 4px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.06);
}

.quick-ho-flow-arrow[b-an6dt19667] {
    color: #d97706;
    flex: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-ho-vehicle-card[b-an6dt19667] {
    --work-order-card-width: 118px;
    flex: 0 0 118px;
    max-width: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
}
.qho-card-main-content[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    width: 144px;
    justify-content: flex-start;
    box-sizing: border-box;
}
.qho-card-ot-number[b-an6dt19667] {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    line-height: 1.15;
    min-height: 15px;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
    display: block;
    width: 100%;
}
.qho-card-plate-row[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 1px;
    margin-bottom: 3px;
    width: 100%;
    line-height: 1.2;
}
.qho-card-plate-number[b-an6dt19667] {
    font-family: 'DIN 1451', system-ui, -apple-system, sans-serif !important;
    font-size: 16px;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: -0.2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.qho-insurance-badge-container[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 48px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
}
.qho-insurance-logo-img[b-an6dt19667] {
    max-height: 14px;
    max-width: 45px;
    object-fit: contain;
    border-radius: 2px;
}
.qho-insurance-name-pill[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 8.5px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    line-height: 1;
}
.qho-card-footer-row[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
}
.qho-card-days-counter[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
}
.qho-card-days-text[b-an6dt19667] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.qho-card-tech-avatar[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qho-card-tech-avatar img[b-an6dt19667] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    display: block;
}
.qho-tech-initials-avatar[b-an6dt19667] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1.5px solid #ffffff;
}

/* ===== Main White Content Area ===== */
.wizard-white-card[b-an6dt19667] {
    background: #ffffff;
    border-radius: 20px;
    margin: 32px 10px 0 10px;
    padding: 18px 14px 18px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.ho-loading-sim[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.loading-spinner[b-an6dt19667] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(100, 116, 139, 0.2);
    border-top-color: #e84393;
    border-radius: 50%;
    animation: submitSpin-b-an6dt19667 0.7s linear infinite;
}

.wizard-white-card[b-an6dt19667]::-webkit-scrollbar {
    width: 5px;
}

.wizard-white-card[b-an6dt19667]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.step-content[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ho-section-divider[b-an6dt19667] {
    height: 1px;
    background: #e2e8f0;
    margin: 22px 0 18px 0;
    width: 100%;
}

.ho-step-title[b-an6dt19667] {
    text-align: center;
    color: #475569;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.ho-step-subtitle[b-an6dt19667] {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 16px;
}

/* Pestañas Internos / Externos */
.tabs-sim[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ho-tab[b-an6dt19667] {
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #64748b;
    border: none;
}

.ho-tab.active[b-an6dt19667] {
    background: #eab308;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

/* Buscador */
.search-sim[b-an6dt19667] {
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-sim:focus-within[b-an6dt19667] {
    border-color: #cbd5e1;
    background: #ffffff;
}

.search-icon[b-an6dt19667] {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    flex-shrink: 0;
}

.ho-search-input[b-an6dt19667] {
    background: transparent;
    border: none;
    outline: none;
    color: #1e293b;
    font-size: 13px;
    width: 100%;
}

.ho-search-input[b-an6dt19667]::placeholder {
    color: #94a3b8;
}

/* Grilla de Personas (3 columnas) */
.ho-person-grid[b-an6dt19667] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding-bottom: 8px;
}

/* Tarjeta individual de operario */
.ho-person-card[b-an6dt19667] {
    background: #7f94a8;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 6px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 135px;
    position: relative;
    box-sizing: border-box;
}

.ho-person-card:hover[b-an6dt19667] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.ho-person-card.selected[b-an6dt19667] {
    background: #dea301;
    border-color: #dea301;
    box-shadow: 0 4px 16px rgba(222, 163, 1, 0.4);
    transform: translateY(-2px);
}

/* No está habilitada para el nivel de la orden: se atenúa, pero sigue clickeable. */
.ho-person-card.level-mismatch[b-an6dt19667] {
    opacity: 0.45;
}

.ho-person-card.level-mismatch:hover[b-an6dt19667],
.ho-person-card.level-mismatch.selected[b-an6dt19667] {
    opacity: 1;
}

/* Niveles de colisión que la persona puede trabajar, de menor a mayor intensidad.
   Mismos hexadecimales que en el móvil y en el asistente completo: la escala se aprende
   una vez y se lee igual en todos lados. */
.ho-pc-levels[b-an6dt19667] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 3px;
}

.ho-pc-level-dot[b-an6dt19667] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ho-pc-level-dot.express[b-an6dt19667] {
    background: #3b82f6;
}

.ho-pc-level-dot.leve[b-an6dt19667] {
    background: #86d26d;
}

.ho-pc-level-dot.medio[b-an6dt19667] {
    background: #ffd255;
}

.ho-pc-level-dot.fuerte[b-an6dt19667] {
    background: #e03d3d;
}

.ho-pc-suggested-dot[b-an6dt19667] {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.8);
}

.ho-pc-avatar[b-an6dt19667] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    margin-bottom: 2px;
}

.ho-pc-avatar img[b-an6dt19667] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ho-pc-initials[b-an6dt19667] {
    font-size: 16px;
    font-weight: 700;
    color: #4a6fa5;
}

.ho-pc-info[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.ho-pc-name[b-an6dt19667] {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.15;
    max-height: 26px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ho-pc-role[b-an6dt19667] {
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-top: 1px;
}

.ho-pc-footer[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: 4px;
    gap: 2px;
}

.ho-pc-workload[b-an6dt19667] {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 1px 5px;
    white-space: nowrap;
}

.ho-pc-count-badge[b-an6dt19667] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 1px 5px;
    color: #ffffff;
    font-size: 10px;
}

.ho-pc-count-badge b[b-an6dt19667] {
    font-weight: 800;
}

.ho-pc-count-badge small[b-an6dt19667] {
    font-size: 8.5px;
    opacity: 0.85;
}

/* Tarjeta "+ Agregar" */
.ho-invite-card[b-an6dt19667] {
    background: #7f94a8;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 6px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    min-height: 135px;
    color: #ffffff;
    transition: all 0.2s ease;
}

.ho-invite-card:hover[b-an6dt19667] {
    background: #6e8499;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.ho-add-circle[b-an6dt19667] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.ho-add-circle svg[b-an6dt19667] {
    width: 22px;
    height: 22px;
}

.ho-add-label[b-an6dt19667] {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

/* Note when target process is missing a configured job title: the person list is kept empty on purpose. */
.ho-config-note[b-an6dt19667] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.ho-config-note svg[b-an6dt19667] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #64748b;
}

/* ===== Formulario Paso 2: Detalles ===== */
.ho-form-group[b-an6dt19667] {
    margin-bottom: 16px;
}

/* ===== Sección Razón / Observaciones ===== */
.reason-section[b-an6dt19667] {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reason-label[b-an6dt19667] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.reason-select[b-an6dt19667] {
    width: 100%;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1e293b;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
    cursor: pointer;
}

.reason-select:focus[b-an6dt19667] {
    border-color: #eab308;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12);
}

.reason-textarea[b-an6dt19667] {
    width: 100%;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1e293b;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.45;
}

.reason-textarea:focus[b-an6dt19667] {
    border-color: #eab308;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12);
}

.reason-textarea[b-an6dt19667]::placeholder {
    color: #94a3b8;
}

/* ===== Sección Evidencias Fotográficas ===== */
.evidence-section[b-an6dt19667] {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.evidence-header[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.required-badge[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(232, 67, 147, 0.1);
    color: #e84393;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid rgba(232, 67, 147, 0.25);
    white-space: nowrap;
}

.evidence-uploader[b-an6dt19667] {
    position: relative;
}

.evidence-uploader[b-an6dt19667]  .evidence-input,
.evidence-uploader[b-an6dt19667]  input[type="file"],
.evidence-input[b-an6dt19667] {
    display: none !important;
}

.evidence-dropzone[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    user-select: none;
}

.evidence-dropzone:hover[b-an6dt19667] {
    border-color: #eab308;
    background: #fffbeb;
    color: #b45309;
}

.evidence-dropzone svg[b-an6dt19667] {
    flex-shrink: 0;
    opacity: 0.75;
}

.evidence-preview-row[b-an6dt19667] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.ho-label[b-an6dt19667] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.ho-select[b-an6dt19667], .ho-textarea[b-an6dt19667] {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.ho-select:focus[b-an6dt19667], .ho-textarea:focus[b-an6dt19667] {
    border-color: #eab308;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.ho-textarea[b-an6dt19667] {
    min-height: 95px;
    resize: vertical;
}

.ho-empty-text[b-an6dt19667] {
    font-size: 13px;
    color: #94a3b8;
    margin: 4px 0 10px 0;
    font-style: italic;
}

/* Subida y Miniaturas de Fotos */
.photo-upload-header[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.btn-add-photo[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    transition: all 0.2s;
}

.btn-add-photo:hover[b-an6dt19667] {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-add-photo svg[b-an6dt19667] {
    width: 15px;
    height: 15px;
    color: #475569;
}

.evidence-preview-list[b-an6dt19667] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.evidence-pill[b-an6dt19667] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8fafc;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    position: relative;
    width: 72px;
    box-sizing: border-box;
}

.evidence-thumbnail[b-an6dt19667] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 4px;
}

.evidence-name[b-an6dt19667] {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #475569;
    text-align: center;
    font-size: 9.5px;
}

.btn-remove-evidence[b-an6dt19667] {
    background: #ef4444;
    border: none;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.btn-remove-evidence:hover[b-an6dt19667] {
    background: #dc2626;
}

/* ===== Footer Operations ===== */
.wizard-footer-bar[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.action-buttons[b-an6dt19667] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.submit-spinner[b-an6dt19667] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: submitSpin-b-an6dt19667 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes submitSpin-b-an6dt19667 {
    to { transform: rotate(360deg); }
}

.ho-btn-back[b-an6dt19667] {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ho-btn-back:hover[b-an6dt19667] {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

.btn-next-pink[b-an6dt19667] {
    background: #e84393;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(232, 67, 147, 0.4);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-next-pink:hover:not(:disabled)[b-an6dt19667] {
    background: #d63080;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232, 67, 147, 0.5);
}

.btn-next-pink:disabled[b-an6dt19667] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Toast de validación / mensaje */
.quick-toast[b-an6dt19667] {
    position: absolute;
    bottom: 75px;
    left: 14px;
    right: 14px;
    background: #0f172a;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    animation: toastSlideUp-b-an6dt19667 0.25s ease-out;
}

@keyframes toastSlideUp-b-an6dt19667 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.ho-fields[b-an6dt19667] { border: 0; padding: 0; margin: 0; min-width: 0; }
.ho-feedback-error[b-an6dt19667] { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 12px; border-radius: 8px; margin: 8px 0; font-size: 13px; }
.ho-feedback-retry[b-an6dt19667] { color: #334d6e; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; min-height: 36px; margin-left: 8px; cursor: pointer; }
.ho-feedback-retry:focus-visible[b-an6dt19667] { outline: 2px solid #d81b84; outline-offset: 2px; }

.ho-feedback-force[b-an6dt19667] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ho-feedback-force:hover[b-an6dt19667] {
    background: #1d4ed8;
}
.btn-next-pink:disabled[b-an6dt19667], .ho-btn-back:disabled[b-an6dt19667] { cursor: wait; opacity: .65; }

.wizard-white-card[b-an6dt19667]  .st-panel-loading-text { color: #64748b; }
@media (prefers-reduced-motion: reduce) { .submit-spinner[b-an6dt19667], .wizard-white-card[b-an6dt19667]  .st-panel-loading-spinner { animation: none; } }

/* IsInStore Checkbox (Form Step) */
.ho-instore-group[b-an6dt19667] {
    margin-top: 4px;
    margin-bottom: 16px;
}
.ho-instore-label[b-an6dt19667] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    user-select: none;
}
.ho-instore-checkbox[b-an6dt19667] {
    width: 18px;
    height: 18px;
    accent-color: #e84393;
    cursor: pointer;
    flex-shrink: 0;
}
/* /Pages/Home/Components/HandOver/ReclaimModal.razor.rz.scp.css */
/* ===== Wizard Container — fills its parent (DynamicPanel expanded view) ===== */
/* NOTA: El efecto glassmorphism (fondo oscuro + blur) lo maneja el PADRE (expanded-card-view via :has)
   porque backdrop-filter no funciona dentro de overflow:hidden del contenedor padre.
   Este elemento debe permanecer transparente. */
.wizard-modal-glass[b-szifxvmksa] {
    background: transparent;
    border: none;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    animation: fadeIn-b-szifxvmksa 0.25s ease;
    position: relative;
    overflow: hidden;
    margin: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
}

/* === HUD Mode (3D Workshop Active) === */
/* El panel conserva su apariencia normal (fondo gris + blur del padre).
   Solo ajustamos pointer-events para que los clics pasen al mapa 3D
   fuera de la tarjeta blanca. */
.wizard-modal-glass.in-workshop[b-szifxvmksa] {
    border: none;
}

/* La tarjeta blanca mantiene su estilo normal en modo taller */



/* ===== Header (Top Bar) ===== */
.wizard-top-bar[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 10px 24px;
    position: relative;
    z-index: 2;
}

.owner-card[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 120px;
    text-align: center;
}

.owner-avatar-wrapper[b-szifxvmksa] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 4px; /* Space for border */
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3);
}

.owner-avatar-wrapper.placeholder-style[b-szifxvmksa] {
    background: rgba(255,255,255,0.05);
    border: 2px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.owner-avatar-wrapper.placeholder-style.filled[b-szifxvmksa] {
    border: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3);
}

.owner-img[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.question-mark[b-szifxvmksa] {
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.process-badge[b-szifxvmksa] {
    position: absolute;
    bottom: -4px;
    left: -8px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: white;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-badge img[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.owner-info[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0; 
    overflow: hidden; 
    max-width: 100%; 
}

.owner-name[b-szifxvmksa] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display:block;
}

.owner-process[b-szifxvmksa] {
    font-size: 11px;
    color: white;
}

.owner-placeholder[b-szifxvmksa] {
    font-size: 11px;
    color: white;
    line-height: 1.2;
}

.asset-card-center[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    width: 150px;
    height:170px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    z-index: 3;
    position: relative;
    top: -10px;
}

.asset-img[b-szifxvmksa] {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: #cdcdcd;
}

.asset-plate[b-szifxvmksa] {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.dots-decoration[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.dots-decoration .dot[b-szifxvmksa] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dots-decoration .dot.active[b-szifxvmksa] {
    background: #94a3b8;
}

.chevron-right[b-szifxvmksa] {
    color: #94a3b8;
    margin-left: 2px;
}

/* ===== Pill Orden / Aseguradora (reutilización de AssignmentModal) ===== */
.hc-order-pill[b-szifxvmksa] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #eab308;
    border-radius: 10px;
    padding: 4px 10px 4px 4px;
    margin-top: 12px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
    position: relative;
    z-index: 90;
    width: 100%;
    box-sizing: border-box;
}

.hc-order-pill.clickable[b-szifxvmksa] {
    cursor: pointer;
}

.hc-order-pill.clickable:not(.dropdown-open):hover[b-szifxvmksa] {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.hc-order-pill.clickable:not(.dropdown-open):active[b-szifxvmksa] {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* Avatar encargado — izquierda */
.hop-worker-avatar[b-szifxvmksa] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hop-worker-avatar img[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hop-avatar-initials[b-szifxvmksa] {
    font-size: 10px;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
}

/* Centro: número + aseguradora */
.hop-center[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.hop-order-number[b-szifxvmksa] {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.hop-insurer-name[b-szifxvmksa] {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Derecha: logo + badge */
.hop-right[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    position: relative;
}

.hop-insurer-logo[b-szifxvmksa] {
    width: 32px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    color: #b45309;
}

.hop-insurer-logo img[b-szifxvmksa] {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.hop-count-badge[b-szifxvmksa] {
    position: absolute;
    bottom: -10px;
    right: -14px;
    background: #ffffff;
    color: #eab308;
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0;
}

/* Dropdown de órdenes de trabajo */
.hop-wo-dropdown[b-szifxvmksa] {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    background: #1f2f45;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: dropdownFadeIn-b-szifxvmksa 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hop-wo-dropdown[b-szifxvmksa]::-webkit-scrollbar {
    display: none;
}

@keyframes dropdownFadeIn-b-szifxvmksa {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hop-wo-item[b-szifxvmksa] {
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.hop-wo-item[b-szifxvmksa]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    height: 60%;
    width: 3px;
    background: #eab308;
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 0 4px 4px 0;
}

.hop-wo-item:hover[b-szifxvmksa] {
    background: rgba(255, 255, 255, 0.06);
}

.hop-wo-item:hover[b-szifxvmksa]::before {
    transform: translateY(-50%) scaleY(0.7);
    background: rgba(255, 255, 255, 0.4);
}

.hop-wo-item.active[b-szifxvmksa] {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.03) 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.hop-wo-item.active[b-szifxvmksa]::before {
    transform: translateY(-50%) scaleY(1);
    background: #eab308;
}

.hop-wo-number[b-szifxvmksa] {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
    z-index: 1;
}

.hop-wo-insurance[b-szifxvmksa] {
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8 !important;
    z-index: 1;
}

.hop-wo-item.active .hop-wo-number[b-szifxvmksa] {
    color: #fef08a !important;
}

.hop-wo-item.active .hop-wo-insurance[b-szifxvmksa] {
    color: #f8fafc !important;
}

.hop-wo-backdrop[b-szifxvmksa] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: transparent;
}

/* ===== Close Button Overlay ===== */
.top-close-btn[b-szifxvmksa] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    transition: all 0.2s ease;
}
.top-close-btn:hover[b-szifxvmksa] {
    background: rgba(255,255,255,0.15);
}
.top-close-btn svg[b-szifxvmksa] {
    color: rgba(255,255,255,0.7);
}

/* ===== Main White Content Area ===== */
.wizard-white-card[b-szifxvmksa] {
    background: #fff;
    border-radius: 20px;
    margin: 0 6px;
    padding: 19px 12px 24px 12px;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1; /* Ocultar barra de scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    /* Chrome, Safari, Opera */
    .wizard-white-card[b-szifxvmksa]::-webkit-scrollbar {
        display: none;
    }

.step-content[b-szifxvmksa] {
    animation: fadeSlideIn-b-szifxvmksa 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ho-step-title[b-szifxvmksa] {
    text-align: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.2px;
}

.ho-step-subtitle[b-szifxvmksa] {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    margin-top: -12px;
    margin-bottom: 20px;
}

/* Tabs Simulation */
.tabs-sim[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.ho-tab[b-szifxvmksa] {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #94a3b8;
}
    .ho-tab.active[b-szifxvmksa] {
        background: #e5b900;
        color: #fff;
        box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
    }

.search-sim[b-szifxvmksa] {
    background: #f1f5f9;
    padding: 10px 16px;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    border: 1px solid transparent;
}
.search-sim:focus-within[b-szifxvmksa] {
    border-color: #cbd5e1;
}
.ho-search-input[b-szifxvmksa] {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: #1e293b;
}
.ho-search-input[b-szifxvmksa]::placeholder {
    color: #94a3b8;
}

/* Grid & Cards */
.person-grid[b-szifxvmksa], .ho-person-grid[b-szifxvmksa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 12px;
}

.person-card-squared[b-szifxvmksa], .ho-person-card[b-szifxvmksa] {
    background: #94a3b8; /* Exact color from Figma */
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

    .person-card-squared.selected[b-szifxvmksa] {
        border-color: #e5b900;
        box-shadow: 0 4px 16px rgba(234, 179, 8, 0.3);
        transform: translateY(-2px);
        background: #e5b900;
    }

    .person-card-squared.suggested:not(.selected)[b-szifxvmksa] {
        border-color: #e5b900;
        box-shadow: 0 0 10px rgba(229, 185, 0, 0.4);
    }

.person-card-squared:hover[b-szifxvmksa] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.person-avatar-circle[b-szifxvmksa] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.person-avatar-circle img[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-placeholder.person-icon[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.process-avatar-circle[b-szifxvmksa] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-avatar-circle img[b-szifxvmksa] {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.avatar-placeholder.process-icon[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

.person-card-name[b-szifxvmksa] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 12px;
    height: 28px;
    overflow: hidden;
}

.person-stats-row[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.stat-pill[b-szifxvmksa] {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
}

.stat-pill.white[b-szifxvmksa] {
    background: #fff;
    color: #64748b;
}

.person-card-squared.add-btn[b-szifxvmksa] {
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.person-card-squared.add-btn svg[b-szifxvmksa] {
    color: #cbd5e1;
    width: 48px;
    height: 48px;
}
.person-card-squared.add-btn:hover[b-szifxvmksa] {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* Specific Person Card Styles (Step Person) */
.ho-person-card[b-szifxvmksa] {
    background: #94a3b8;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 145px;
    position: relative;
}

.ho-person-card:hover[b-szifxvmksa] {
    background: #3d5e8c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ho-person-card.selected[b-szifxvmksa] {
    background: #e5b900;
    border-color: #e5b900;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
    transform: translateY(-2px);
}

.ho-person-card.suggested:not(.selected)[b-szifxvmksa] {
    border-color: #e5b900;
    box-shadow: 0 0 10px rgba(229, 185, 0, 0.4);
}

.ho-pc-avatar[b-szifxvmksa] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden; 
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-bottom: 4px;
}

.ho-pc-avatar img[b-szifxvmksa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ho-pc-initials[b-szifxvmksa] {
    font-size: 18px;
    font-weight: 700;
    color: #4a6fa5;
}

.ho-pc-info[b-szifxvmksa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
    flex: 1;
}

.ho-pc-name[b-szifxvmksa] {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    max-height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ho-pc-role[b-szifxvmksa] {
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin-top: 2px;
}

/* Badges footer: workload + counts */
.ho-pc-footer[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: 6px;
    gap: 4px;
}

.ho-pc-workload[b-szifxvmksa] {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    padding: 2px 6px;
    white-space: nowrap;
}

.ho-person-card.selected .ho-pc-workload[b-szifxvmksa] {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

.ho-pc-count-badge[b-szifxvmksa] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 2px 6px;
}

.ho-pc-count-badge b[b-szifxvmksa] {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.ho-pc-count-badge small[b-szifxvmksa] {
    font-size: 9px;
    color: rgba(255,255,255,0.75);
}

/* Punto verde de sugerido */
.ho-pc-suggested-dot[b-szifxvmksa] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34,197,94,0.6);
}

.ho-invite-card[b-szifxvmksa] {
    justify-content: center;
    border: 2px dashed rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35);
    min-height: 145px;
}

.ho-invite-card:hover[b-szifxvmksa] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.6);
}


/* Form Inputs (for Form Step inside white card) */
.ho-form-group[b-szifxvmksa] {
    margin-bottom: 20px;
}
.ho-label[b-szifxvmksa] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}
.ho-select[b-szifxvmksa], .ho-textarea[b-szifxvmksa] {
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}
.ho-select:focus[b-szifxvmksa], .ho-textarea:focus[b-szifxvmksa] {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.ho-textarea[b-szifxvmksa] {
    min-height: 100px;
    resize: vertical;
}


/* Empty States */
.ho-empty-state[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    flex: 1;
}

.ho-empty-state.ho-small[b-szifxvmksa] {
    padding: 12px;
    font-size: 12px;
}

/* ===== Summary (Resume Step — inside CenterDialog) ===== */
.ho-summary-row[b-szifxvmksa] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ho-summary-row:last-child[b-szifxvmksa] {
    border-bottom: none;
}

.ho-summary-label[b-szifxvmksa] {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.ho-summary-value[b-szifxvmksa] {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    text-align: right;
    max-width: 55%;
    word-break: break-word;
}

/* ===== Location 3D Step ===== */
.ho-location-content[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    flex: 1;
}

/* ===== Footer Operations ===== */
.wizard-footer-bar[b-szifxvmksa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: transparent;
}

.step-timeline-bar[b-szifxvmksa] {
    display: flex;
    align-items: center;
    gap: 1px;
}

.timeline-node[b-szifxvmksa] {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cbd5e1;
    color: #fff;
    transition: all 0.3s;
    position: relative;
}

.timeline-node.completed[b-szifxvmksa] {
    background: #fe00e4;
}

.timeline-node.active[b-szifxvmksa] {
    background: #e5b900;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.timeline-line[b-szifxvmksa] {
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.2);
}

.btn-next-pink[b-szifxvmksa] {
    background: #e84393;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(232, 67, 147, 0.4);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-next-pink:hover:not(:disabled)[b-szifxvmksa] {
    background: #d63080;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 67, 147, 0.5);
}

.btn-next-pink:disabled[b-szifxvmksa] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ho-btn-back[b-szifxvmksa] {
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.ho-btn-back:hover[b-szifxvmksa] {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.ho-btn-back:disabled[b-szifxvmksa] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* New Buttons */
.ho-btn-confirm[b-szifxvmksa], .ho-btn-confirm-loc[b-szifxvmksa] {
    background: #eab308;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
    transition: all 0.2s;
}

.ho-btn-confirm:hover[b-szifxvmksa], .ho-btn-confirm-loc:hover[b-szifxvmksa] {
    background: #d97706;
    transform: translateY(-1px);
}

.ho-btn-3d[b-szifxvmksa] {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
    margin: 20px 0;
}

.ho-btn-3d:hover[b-szifxvmksa] {
    background: rgba(255,255,255,0.15);
}

.ho-btn-cancel[b-szifxvmksa] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ho-btn-cancel:hover[b-szifxvmksa] {
    background: #f1f5f9;
}


/* Animations */
@keyframes fadeIn-b-szifxvmksa {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp-b-szifxvmksa {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeSlideIn-b-szifxvmksa {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Validation Toast */
.validation-toast-overlay[b-szifxvmksa] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.validation-toast[b-szifxvmksa] {
    background: #0f172a;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    animation: toastSlideUp-b-szifxvmksa 0.3s ease-out;
    pointer-events: auto;
}

@keyframes toastSlideUp-b-szifxvmksa {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/Home/Components/InboxPanel.razor.rz.scp.css */
/* InboxPanel.razor.css - Styles matching Figma design */

/* Main Container */
.inbox-panel-container[b-bx2pro5onx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    /* Required for nested flex scroll */
}

/* Search Wrapper */
.inbox-search-wrapper[b-bx2pro5onx] {
    padding: 12px 12px 12px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Keep static, don't scroll */
}

/* Toggle button to switch between Inbox and Table views */
.view-toggle-btn[b-bx2pro5onx] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    padding: 0;
}

.view-toggle-btn:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.inbox-search[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 12px;
    gap: 8px;
    flex: 1;
    width: 100%;
}

.search-icon[b-bx2pro5onx] {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.search-input[b-bx2pro5onx] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 14px;
}

.search-input[b-bx2pro5onx]::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.clear-search[b-bx2pro5onx] {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.clear-search:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.3);
}

.clear-search svg[b-bx2pro5onx] {
    width: 12px;
    height: 12px;
    color: white;
}

/* Main Filters Row */
.inbox-filters-row[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 10px 12px;
    flex-shrink: 0;
    /* Keep static, don't scroll */
}

.filter-count-btn[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    max-width: 220px;
    min-width: 0;
}

.filter-count-btn.active[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.9);
}

.filter-count-btn.active .filter-count[b-bx2pro5onx],
.filter-count-btn.active .filter-label[b-bx2pro5onx],
.filter-count-btn.active .dropdown-arrow[b-bx2pro5onx] {
    color: #1a365d;
}

/* min-width:0 es OBLIGATORIO, no decorativo: por defecto un hijo flex no encoge por debajo de su
   contenido (min-width:auto), así que overflow+ellipsis nunca llegan a activarse y el botón
   desborda su max-width igual. Es el motivo #1 por el que "el ellipsis no funciona" en flexbox. */
.filter-count[b-bx2pro5onx] {
    font-size: 14px;
    font-weight: 600;
    color: #1a365d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.filter-label[b-bx2pro5onx] {
    font-size: 14px;
    color: #1a365d;
}

.dropdown-arrow[b-bx2pro5onx] {
    width: 14px;
    height: 14px;
    color: #1a365d;
    flex-shrink: 0;
}

.filter-sort-btn[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    color: white;
    font-size: 14px;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-sort-btn:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.25);
}

.sort-direction-btn[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    transition: background 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.sort-direction-btn:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.25);
}

.sort-direction-btn svg[b-bx2pro5onx] {
    width: 16px;
    height: 16px;
}

.action-buttons[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.info-btn[b-bx2pro5onx],
.refresh-btn[b-bx2pro5onx] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.info-btn:hover[b-bx2pro5onx],
.refresh-btn:hover:not(:disabled)[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.1);
}

.info-btn svg[b-bx2pro5onx],
.refresh-btn svg[b-bx2pro5onx] {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.refresh-btn:disabled[b-bx2pro5onx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-btn:disabled svg[b-bx2pro5onx] {
    animation: spin-b-bx2pro5onx 1s linear infinite;
}

/* Sub-filters (Pills) */
.inbox-subfilters[b-bx2pro5onx] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 12px 12px 12px;
    flex-shrink: 0;
    overflow-x: auto;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Better touch scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Allow drag scrolling */
    cursor: grab;
}

.inbox-subfilters:active[b-bx2pro5onx] {
    cursor: grabbing;
}

.inbox-subfilters[b-bx2pro5onx]::-webkit-scrollbar {
    display: none;
}

.filter-pill[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1f2f45;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    color: white;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-pill:hover[b-bx2pro5onx] {
    background: #264a73;
}

.filter-pill.active[b-bx2pro5onx] {
    background: linear-gradient(135deg, #e5b900 0%, #e5b900 100%);
    color: white;
    font-weight: 600;
}

/* Asset Groups */
.inbox-groups[b-bx2pro5onx] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px 8px;
    min-height: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inbox-groups[b-bx2pro5onx]::-webkit-scrollbar {
    display: none;
}

/* Asset Group Row (new MAUI-style layout) */
.asset-group-row[b-bx2pro5onx] {
    margin-bottom: 4px;
}

.asset-group-row.inactive[b-bx2pro5onx] {
    opacity: 0.7;
}

.group-row-btn[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #9aa1ab;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-row-btn:hover[b-bx2pro5onx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.15);
}

.group-icon-wrapper[b-bx2pro5onx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: white;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Asegura que la imagen no se desborde del círculo */
}

/* Imágenes de Pestaña PROCESOS */
.filter-procesos .group-icon-img[b-bx2pro5onx] {
    width: 24px;
    /* Tamaño más pequeño e icónico */
    height: 24px;
    object-fit: contain;
    /* Ajusta sin recortar */
    border-radius: 0;
}

/* Imágenes de Personas y Asesores */
.filter-personas .group-icon-img[b-bx2pro5onx],
.filter-asesores .group-icon-img[b-bx2pro5onx] {
    width: 40px;
    /* Tamaño completo que abarca el contenedor redondo */
    height: 40px;
    object-fit: cover;
    /* Recorta para llenar como una foto de perfil redonda */
    border-radius: 50%;
}

/* Imágenes de Aseguradoras – adaptadas para ver los logotipos completos con fondo blanco */
.filter-aseguradoras .group-icon-img[b-bx2pro5onx] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: white;
}


.group-icon-placeholder[b-bx2pro5onx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.group-icon-placeholder svg[b-bx2pro5onx] {
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.6);
}

.group-info[b-bx2pro5onx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.group-title[b-bx2pro5onx] {
    font-size: 14px;
    font-weight: 500;
    color: white;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.inactive-badge[b-bx2pro5onx] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-count-badge[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(229, 185, 0, 0.9) 0%, rgba(229, 185, 0, 0.7) 100%);
    border-radius: 14px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.worker-count-badges[b-bx2pro5onx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}

.worker-badge-in-process[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #8E8EA0;
    color: white;
    font-size: 11px;
    font-weight: 600;
}

.worker-badge-pending[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #AF52DE;
    color: white;
    font-size: 11px;
    font-weight: 600;
}

/* Original dropdown style content (no left margin) */
.group-content-original[b-bx2pro5onx] {
    padding: 12px 4px;
    border-radius: 15px;
    margin-top: 10px;
}

.group-content-original[b-bx2pro5onx]::-webkit-scrollbar {
    display: none;
}

/* Row style content (with left margin for icon alignment) */
.group-content-row[b-bx2pro5onx] {
    padding: 12px 4px;
    margin-left: auto;
}

/* Legacy styles (keep for compatibility) */
.asset-group[b-bx2pro5onx] {
    margin-bottom: 8px;
}

.group-header[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.group-header:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.12);
}

.group-count[b-bx2pro5onx] {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.group-arrow[b-bx2pro5onx] {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.2s;
    margin-left: auto;
}

.group-arrow.expanded[b-bx2pro5onx] {
    transform: rotate(180deg);
}

/* Assets Grid */
.assets-grid[b-bx2pro5onx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    justify-items: center;
}

/* Loading State */
.inbox-loading[b-bx2pro5onx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner[b-bx2pro5onx] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-bx2pro5onx 1s linear infinite;
}

/* Terminal load failure: keep it visually distinct from both loading and an empty inbox. */
.inbox-error[b-bx2pro5onx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.inbox-error > span[b-bx2pro5onx] {
    max-width: 360px;
    font-size: 14px;
    line-height: 1.5;
}

.inbox-error-icon[b-bx2pro5onx] {
    width: 44px;
    height: 44px;
    color: #f6c453;
}

.inbox-retry-btn[b-bx2pro5onx] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: #d81b84;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inbox-retry-btn:hover:not(:disabled)[b-bx2pro5onx] {
    background: #eb5bb6;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(216, 27, 132, 0.3);
}

.inbox-retry-btn:focus-visible[b-bx2pro5onx],
.refresh-btn:focus-visible[b-bx2pro5onx] {
    outline: 2px solid #dea301;
    outline-offset: 2px;
}

.inbox-retry-btn:disabled[b-bx2pro5onx] {
    cursor: not-allowed;
    opacity: 0.65;
}

.inbox-retry-btn svg[b-bx2pro5onx] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes spin-b-bx2pro5onx {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-bx2pro5onx],
    .refresh-btn:disabled svg[b-bx2pro5onx] {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }

    .inbox-retry-btn[b-bx2pro5onx] {
        transition-duration: 0.01ms;
    }
}

/* Empty State */
.inbox-empty[b-bx2pro5onx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.inbox-empty svg[b-bx2pro5onx] {
    width: 48px;
    height: 48px;
}

.inbox-empty span[b-bx2pro5onx] {
    font-size: 14px;
}

/* Cross-filter hint (sugiere cambiar de Míos↔Todos) */
.cross-filter-message[b-bx2pro5onx] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.5;
}

.cross-filter-message strong[b-bx2pro5onx] {
    color: rgba(255, 255, 255, 0.95);
}

.cross-filter-btn[b-bx2pro5onx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #e5b900 0%, #d4a800 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(229, 185, 0, 0.3);
}

.cross-filter-btn:hover[b-bx2pro5onx] {
    background: linear-gradient(135deg, #f0c400 0%, #e5b900 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.45);
}

.cross-filter-btn:active[b-bx2pro5onx] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(229, 185, 0, 0.3);
}

/* Inactive group indicator */
.group-inactive-badge[b-bx2pro5onx] {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Enhanced group header for "Todos" mode */
.group-header-enhanced[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-header-enhanced:hover[b-bx2pro5onx] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.group-info .group-subtitle[b-bx2pro5onx] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Filter Dropdown */
.filter-dropdown-wrapper[b-bx2pro5onx] {
    position: relative;
    z-index: 50;
}

.filter-dropdown-menu[b-bx2pro5onx] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: #1f2f45;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeIn-b-bx2pro5onx 0.2s ease-out;
}

.dropdown-item[b-bx2pro5onx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.dropdown-item:hover[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.dropdown-item.selected[b-bx2pro5onx] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 600;
}

.check-icon[b-bx2pro5onx] {
    width: 16px;
    height: 16px;
    color: #ffd700;
    /* Yellow */
}

@keyframes fadeIn-b-bx2pro5onx {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay for click-outside behavior */
.dropdown-overlay[b-bx2pro5onx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 49;
    background: transparent;
    cursor: default;
}
/* /Pages/Home/Components/Integration/IntegrationDashboardPanel.razor.rz.scp.css */
/* ============================================================
   IntegrationDashboardPanel — Systime Reportes Style
   Paleta: #1c2738 (fondo), #111c2a (superficies), rgba(255,255,255,0.05) (bordes),
           #e5b900 (acento primario), #cbd5e1 (texto), #cbd5e1 (muted)
   ============================================================ */

.idp-root[b-krepaffmqx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    border-radius: 30px;
}

/* ── Header ─────────────────────────────────────────────────── */
.idp-header[b-krepaffmqx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #111c2a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    gap: 16px;
}

.idp-header-left[b-krepaffmqx] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.idp-logo[b-krepaffmqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(129, 140, 248, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    flex-shrink: 0;
}

.idp-header-text[b-krepaffmqx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.idp-title[b-krepaffmqx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.idp-subtitle[b-krepaffmqx] {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* ── Header actions ─────────────────────────────────────────── */
.idp-header-actions[b-krepaffmqx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.idp-divider[b-krepaffmqx] {
    width: 1px;
    height: 24px;
    background: #475569;
    margin: 0 4px;
}

/* ── Action Buttons ─────────────────────────────────────────── */
.idp-action-btn[b-krepaffmqx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    border: 1px solid #475569;
    background: #1e293b;
    color: #cbd5e1;
}

.idp-action-btn:hover[b-krepaffmqx] {
    background: #334155;
    border-color: #94a3b8;
    color: #f1f5f9;
}

.idp-action-btn:active[b-krepaffmqx] {
    transform: scale(0.97);
}

/* Apertura accent */
.idp-btn-apertura:hover[b-krepaffmqx] {
    border-color: #818cf8;
    color: #818cf8;
    background: rgba(99, 102, 241, 0.12);
}

/* Cierre accent */
.idp-btn-cierre:hover[b-krepaffmqx] {
    border-color: #fbbf24;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* Config accent */
.idp-btn-config:hover[b-krepaffmqx] {
    border-color: #94a3b8;
    color: #f1f5f9;
    background: #334155;
}

/* Chevron rotation */
.idp-chevron[b-krepaffmqx] {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.idp-chevron-up[b-krepaffmqx] {
    transform: rotate(180deg);
}

/* ── Dropdown ───────────────────────────────────────────────── */
.idp-dropdown-wrap[b-krepaffmqx] {
    position: relative;
}

.idp-dropdown-menu[b-krepaffmqx] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 6px 0;
    min-width: 210px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: idp-dropdown-in-b-krepaffmqx 0.15s ease-out;
}

@keyframes idp-dropdown-in-b-krepaffmqx {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.idp-dropdown-item[b-krepaffmqx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.12s ease;
}

.idp-dropdown-item:hover[b-krepaffmqx] {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
}

.idp-dropdown-item svg[b-krepaffmqx] {
    opacity: 0.7;
    flex-shrink: 0;
}

.idp-dropdown-item:hover svg[b-krepaffmqx] {
    opacity: 1;
}

.idp-dropdown-group-title[b-krepaffmqx] {
    padding: 8px 16px 4px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.idp-dropdown-divider[b-krepaffmqx] {
    height: 1px;
    background: #334155;
    margin: 4px 12px;
}

/* ── Content area ───────────────────────────────────────────── */
.idp-content[b-krepaffmqx] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #0d1117;
}

/* Scrollbar styling */
.idp-content[b-krepaffmqx]::-webkit-scrollbar {
    width: 6px;
}

.idp-content[b-krepaffmqx]::-webkit-scrollbar-track {
    background: transparent;
}

.idp-content[b-krepaffmqx]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

.idp-content[b-krepaffmqx]::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Close accent */
.idp-btn-close:hover[b-krepaffmqx] {
    border-color: #f85149;
    color: #f85149;
    background: rgba(248, 81, 73, 0.08);
}

.idp-tabs-container[b-krepaffmqx] {
    padding: 12px 24px 16px 24px;
    display: flex;
    justify-content: flex-start;
    background: #111c2a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.idp-tabs[b-krepaffmqx] {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.idp-tab-btn[b-krepaffmqx] {
    background: transparent;
    border: none;
    padding: 5px 16px;
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI', sans-serif;
}

.idp-tab-btn svg[b-krepaffmqx] {
    color: #cbd5e1;
    width: 14px;
    height: 14px;
    transition: all 0.3s ease;
}

.idp-tab-btn:hover[b-krepaffmqx] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.idp-tab-btn:hover svg[b-krepaffmqx] {
    color: #ffffff;
}

.idp-tab-btn.active[b-krepaffmqx] {
    background: #e5b900;
    color: #1a365d;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
    border: none;
}

.idp-tab-btn.active svg[b-krepaffmqx] {
    color: #1a365d;
}
.permission-disabled[b-krepaffmqx],
.permission-disabled:hover[b-krepaffmqx],
.permission-disabled:active[b-krepaffmqx] {
    opacity: 0.42;
    filter: grayscale(1);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.permission-disabled:focus-visible[b-krepaffmqx] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.idp-access-message[b-krepaffmqx] {
    display: grid;
    min-height: 160px;
    place-items: center;
    color: #b0b5c1;
    padding: 24px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .permission-disabled[b-krepaffmqx] {
        transition-duration: 0.01ms !important;
    }
}
/* /Pages/Home/Components/Integration/IntegrationHistoryPanel.razor.rz.scp.css */
/* ============================================================
   IntegrationHistoryPanel — Systime Reportes style
   ============================================================ */

.ih-panel[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0d1117;
    border: none;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    color: #cbd5e1;
}

.ih-body-scroll[b-0shlhts12d] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* ---- Header ---- */
.ih-header[b-0shlhts12d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #111c2a;
}

.ih-header-title[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #cbd5e1;
}

.ih-refresh-btn[b-0shlhts12d] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}

.ih-refresh-btn:hover[b-0shlhts12d] {
    border-color: #e5b900;
    color: #e5b900;
    background: rgba(229, 185, 0, 0.08);
}

/* ---- Filtros (Estilo Reportes) ---- */
.ih-filter-chips-container[b-0shlhts12d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 20px;
    padding: 0;
}

.ih-filter-chip[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ih-filter-chip:hover[b-0shlhts12d] {
    background: rgba(229, 185, 0, 0.15);
    border-color: rgba(229, 185, 0, 0.3);
    color: #e5b900;
}

.ih-filter-chip.active[b-0shlhts12d] {
    background: #e5b900 !important;
    border: none !important;
    color: #1a365d !important;
    box-shadow: 0 2px 8px rgba(229, 185, 0, 0.3);
}

.ih-refresh-btn:disabled[b-0shlhts12d] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Skeleton loading ---- */
.ih-loading[b-0shlhts12d] {
    padding: 16px;
}

.ih-skeleton[b-0shlhts12d] {
    background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
    background-size: 200% 100%;
    animation: ih-shimmer-b-0shlhts12d 1.5s infinite;
    border-radius: 8px;
}

@keyframes ih-shimmer-b-0shlhts12d {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Empty state ---- */
.ih-empty[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #8b949e;
    gap: 12px;
}

.ih-empty p[b-0shlhts12d] {
    margin: 0;
    font-size: 14px;
}

/* ---- Job list ---- */
.ih-list[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
}

.ih-job-row[b-0shlhts12d] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.ih-job-row:last-child[b-0shlhts12d] {
    border-bottom: none;
}

.ih-job-row:hover[b-0shlhts12d] {
    background: rgba(255, 255, 255, 0.02);
}

.ih-job-row.ih-job-active[b-0shlhts12d] {
    border-left: 3px solid #e5b900;
    padding-left: 15px;
}

/* ---- Status badge ---- */
.ih-job-status[b-0shlhts12d] {
    flex-shrink: 0;
    padding-top: 2px;
}

.ih-badge[b-0shlhts12d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.ih-badge-success[b-0shlhts12d] {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    border: 1.5px solid #3fb950;
}

.ih-badge-failed[b-0shlhts12d] {
    background: rgba(248, 81, 73, 0.15);
    color: #f85149;
    border: 1.5px solid #f85149;
}

.ih-badge-warning[b-0shlhts12d] {
    background: rgba(229, 185, 0, 0.15);
    color: #e5b900;
    border: 1.5px solid #e5b900;
}

.ih-badge-partial[b-0shlhts12d] {
    background: rgba(63, 185, 80, 0.15);
    color: #e5b900;
    border: 1.5px solid #e5b900;
}

.ih-badge-running[b-0shlhts12d] {
    background: rgba(229, 185, 0, 0.15);
    border: 1.5px solid #e5b900;
    position: relative;
}

.ih-pulse[b-0shlhts12d] {
    width: 8px;
    height: 8px;
    background: #e5b900;
    border-radius: 50%;
    display: block;
    animation: ih-pulse-anim-b-0shlhts12d 1.4s ease-in-out infinite;
}

@keyframes ih-pulse-anim-b-0shlhts12d {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ---- Job info ---- */
.ih-job-info[b-0shlhts12d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ih-job-name[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ih-job-type-tag[b-0shlhts12d] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.ih-tag-create[b-0shlhts12d] {
    background: rgba(229, 185, 0, 0.1);
    color: #e5b900;
    border: 1px solid rgba(229, 185, 0, 0.3);
}

.ih-tag-close[b-0shlhts12d] {
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    border: 1px solid rgba(210, 153, 34, 0.3);
}

.ih-job-filename[b-0shlhts12d] {
    font-weight: 500;
    color: #e6edf3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

/* ---- Meta info ---- */
.ih-job-meta[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #8b949e;
    font-size: 12px;
}

.ih-meta-item[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ih-duration[b-0shlhts12d] {
    color: #8b949e;
}

/* ---- Stats ---- */
.ih-job-stats[b-0shlhts12d] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.ih-stat[b-0shlhts12d] {
    font-size: 11.5px;
    padding: 1px 7px;
    border-radius: 10px;
}

.ih-stat-created[b-0shlhts12d] {
    background: rgba(63, 185, 80, 0.12);
    color: #3fb950;
}

.ih-stat-updated[b-0shlhts12d] {
    background: rgba(88, 166, 255, 0.12);
    color: #58a6ff;
}

.ih-stat-failed[b-0shlhts12d] {
    background: rgba(248, 81, 73, 0.12);
    color: #f85149;
}

.ih-stat-processed[b-0shlhts12d] {
    background: rgba(45, 212, 191, 0.12);
    color: #2dd4bf;
}

.ih-stat-filter-match[b-0shlhts12d] {
    background: rgba(56, 189, 248, 0.13);
    color: #38bdf8;
    font-weight: 600;
}

.ih-stat-filter-none[b-0shlhts12d] {
    color: #4b5563;
    font-style: italic;
}

/* ---- Error message ---- */
.ih-job-error[b-0shlhts12d] {
    font-size: 12px;
    color: #f85149;
    background: rgba(248, 81, 73, 0.08);
    border: 1px solid rgba(248, 81, 73, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Actions ---- */
.ih-job-actions[b-0shlhts12d] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ih-summary-btn[b-0shlhts12d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(210, 153, 34, 0.1);
    border: 1px solid rgba(210, 153, 34, 0.3);
    border-radius: 6px;
    color: #d29922;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ih-summary-btn:hover[b-0shlhts12d] {
    border-color: #d29922;
    color: #e5b900;
    background: rgba(210, 153, 34, 0.18);
}

.ih-details-btn[b-0shlhts12d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ih-details-btn:hover[b-0shlhts12d] {
    border-color: #e5b900;
    color: #e5b900;
    background: rgba(229, 185, 0, 0.08);
}

.ih-details-btn--loading[b-0shlhts12d],
.ih-details-btn:disabled[b-0shlhts12d] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Spinner inline para el botón de detalles del historial */
.ih-btn-spinner[b-0shlhts12d] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(203, 213, 225, 0.3);
    border-top-color: #cbd5e1;
    border-radius: 50%;
    animation: ihBtnSpin-b-0shlhts12d 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ihBtnSpin-b-0shlhts12d {
    to { transform: rotate(360deg); }
}

/* Selector de integración en el header del Historial — más ancho */
.ih-select-job[b-0shlhts12d] {
    max-width: 220px;
}

/* ---- Load more ---- */
.ih-load-more[b-0shlhts12d] {
    padding: 12px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #21262d;
    background: #161b22;
}

.ih-load-more-btn[b-0shlhts12d] {
    background: none;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    font-size: 13px;
    padding: 6px 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ih-load-more-btn:hover:not(:disabled)[b-0shlhts12d] {
    border-color: #58a6ff;
    color: #58a6ff;
}

.ih-load-more-btn:disabled[b-0shlhts12d] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Spinner animation ---- */
.ih-spin[b-0shlhts12d] {
    animation: ih-rotate-b-0shlhts12d 0.8s linear infinite;
}

@keyframes ih-rotate-b-0shlhts12d {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Active banner (GitHub Actions style) ---- */
.ih-active-banner[b-0shlhts12d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #111c2a;
    border-bottom: 1.5px solid #e5b900;
    gap: 16px;
    flex-wrap: wrap;
}

.ih-active-banner-left[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ih-pulse-yellow[b-0shlhts12d] {
    width: 10px;
    height: 10px;
    background: #e5b900;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(229, 185, 0, 0.7);
    animation: ih-pulse-yellow-anim-b-0shlhts12d 1.6s infinite;
}

@keyframes ih-pulse-yellow-anim-b-0shlhts12d {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(229, 185, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(229, 185, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(229, 185, 0, 0);
    }
}

.ih-active-banner-text[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ih-active-banner-title[b-0shlhts12d] {
    font-weight: 600;
    color: #e5b900;
    font-size: 13px;
}

.ih-active-banner-desc[b-0shlhts12d] {
    color: #c9d1d9;
    font-size: 12px;
}

.ih-active-banner-desc strong[b-0shlhts12d] {
    color: #e6edf3;
    font-weight: 500;
}

.ih-active-banner-right[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ih-active-banner-timer[b-0shlhts12d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: monospace;
    font-size: 13px;
    color: #8b949e;
}

.ih-active-banner-btn[b-0shlhts12d] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ih-active-banner-btn:hover[b-0shlhts12d] {
    background: rgba(229, 185, 0, 0.1);
    border-color: #e5b900;
    color: #e5b900;
}

.ih-global-counters[b-0shlhts12d] {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: #111c2a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.ih-counter-card[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1c2738;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 18px;
    min-width: 180px;
    flex: 1;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ih-counter-card:hover[b-0shlhts12d] {
    border-color: #e5b900;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.15);
}

.ih-counter-icon[b-0shlhts12d] {
    font-size: 1.3rem;
}

.ih-counter-label[b-0shlhts12d] {
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 500;
    flex-grow: 1;
}

.ih-counter-value[b-0shlhts12d] {
    font-size: 16px;
    font-weight: 700;
    color: #e5b900;
    background: #111c2a;
    border-radius: 6px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---- Header Actions & Select Filter ---- */
.ih-header-actions[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ih-select-filter[b-0shlhts12d] {
    background: #1c2738;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
    padding: 5px 30px 5px 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23cbd5e1' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.ih-select-filter:hover[b-0shlhts12d], .ih-select-filter:focus[b-0shlhts12d] {
    border-color: #e5b900;
    color: #e5b900;
}

/* ---- Flat Warnings List CSS ---- */
.ih-warning-flat-list[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

.ih-warning-row[b-0shlhts12d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1c2738;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
    gap: 16px;
    transition: border-color 0.2s, background 0.2s;
}

.ih-warning-row:hover[b-0shlhts12d] {
    background: #252f3f;
    border-color: #e5b900;
}

.ih-warning-row.ih-row-resolved[b-0shlhts12d] {
    opacity: 0.65;
    border-color: rgba(63, 185, 80, 0.3);
    background: rgba(63, 185, 80, 0.03);
}

.ih-warning-row.ih-row-auto[b-0shlhts12d] {
    border-color: rgba(210, 153, 34, 0.3);
    background: rgba(210, 153, 34, 0.02);
}

.ih-warning-meta[b-0shlhts12d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    max-width: 200px;
    flex-shrink: 0;
}

.ih-warning-job-badge[b-0shlhts12d] {
    font-size: 11px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #111c2a;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ih-warning-ot[b-0shlhts12d] {
    font-size: 13.5px;
    font-weight: 700;
    color: #f85149;
}

.ih-ot-error[b-0shlhts12d] {
    color: #f85149;
}

.ih-row-resolved .ih-warning-ot[b-0shlhts12d] {
    color: #3fb950;
}

.ih-row-auto .ih-warning-ot[b-0shlhts12d] {
    color: #d29922;
}

.ih-warning-body[b-0shlhts12d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ih-warning-type[b-0shlhts12d] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8b949e;
    font-weight: 600;
}

.ih-warning-details[b-0shlhts12d] {
    font-size: 13px;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ih-warning-actions[b-0shlhts12d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ih-warning-action-btn[b-0shlhts12d] {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.btn-close-order[b-0shlhts12d] {
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.3);
    color: #f85149;
}

.btn-close-order:hover[b-0shlhts12d] {
    background: rgba(248, 81, 73, 0.2);
    border-color: #f85149;
}

.btn-map-relation[b-0shlhts12d] {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

.btn-map-relation:hover[b-0shlhts12d] {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
}

.ih-badge-resolved[b-0shlhts12d] {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.ih-badge-auto[b-0shlhts12d] {
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* /Pages/Home/Components/Integration/IntegrationSummaryPanel.razor.rz.scp.css */
/* ============================================================
   IntegrationSummaryPanel — Systime Dark Theme Aesthetics
   ============================================================ */

.isp-panel[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    background: #0d1117;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: #e6edf3;
    padding: 20px;
    box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────── */
.isp-header[b-x9epn0ytub] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #21262d;
    flex-wrap: wrap;
    gap: 16px;
}

.isp-header-title[b-x9epn0ytub] {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: #f0f6fc;
    letter-spacing: -0.01em;
}

.isp-header-subtitle[b-x9epn0ytub] {
    display: block;
    font-size: 0.8rem;
    color: #8b949e;
    margin-top: 4px;
}

/* ── Refresh button ─────────────────────────────────────────── */
.isp-refresh-btn[b-x9epn0ytub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.isp-refresh-btn:hover[b-x9epn0ytub] {
    background: #30363d;
    border-color: #58a6ff;
    color: #58a6ff;
}

.isp-loading-label[b-x9epn0ytub] {
    font-size: 12px;
    color: #8b949e;
    font-style: italic;
}

/* ── Semáforo — filas de tabla ──────────────────────────────── */

/* Resueltas manualmente — tachadas */
.isp-row-resolved td[b-x9epn0ytub] {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Auto-resueltas por la integración — amarillo suave */
.isp-row-auto-resolved td[b-x9epn0ytub] {
    background: rgba(210, 153, 34, 0.04);
}

/* Requieren acción manual — rojo suave */
.isp-row-actionable td[b-x9epn0ytub] {
    background: rgba(248, 81, 73, 0.04);
}

/* ── Badges de estado ───────────────────────────────────────── */
.isp-badge[b-x9epn0ytub] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    text-decoration: none;
}

.isp-badge-resolved[b-x9epn0ytub] {
    background: rgba(46, 160, 67, 0.15);
    color: #56d364;
    border: 1px solid rgba(46, 160, 67, 0.3);
}

.isp-badge-auto[b-x9epn0ytub] {
    background: rgba(210, 153, 34, 0.15);
    color: #e3b341;
    border: 1px solid rgba(210, 153, 34, 0.3);
}

/* WarningType badge colores */
.isp-badge-type-auto[b-x9epn0ytub] {
    color: #e3b341;
    border-color: rgba(210, 153, 34, 0.3);
    background: rgba(210, 153, 34, 0.08);
}

.isp-badge-type-error[b-x9epn0ytub] {
    color: #ff7b72;
    border-color: rgba(248, 81, 73, 0.3);
    background: rgba(248, 81, 73, 0.08);
}

/* OT en rojo para filas accionables */
.isp-row-ot-error[b-x9epn0ytub] {
    color: #ff7b72;
}

/* Acción confirmada */
.isp-badge-ok[b-x9epn0ytub] {
    color: #56d364;
    font-weight: 600;
    font-size: 12px;
}

/* Texto atenuado */
.isp-text-muted[b-x9epn0ytub] {
    opacity: 0.6;
}

.isp-text-auto[b-x9epn0ytub] {
    color: #e3b341;
}

/* ── Card preview — semáforo ────────────────────────────────── */
.isp-preview-auto[b-x9epn0ytub] {
    font-size: 12px;
    color: #e3b341;
    font-style: italic;
    margin: auto 0;
}

.isp-preview-error[b-x9epn0ytub] {
    color: #ff7b72;
}

.isp-preview-auto-hint[b-x9epn0ytub] {
    font-size: 11px;
    color: #e3b341;
    margin-top: 6px;
    display: block;
}

/* ── Action Buttons ─────────────────────────────────────────── */
.isp-action-btn[b-x9epn0ytub] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    transition: all 0.15s ease;
}

.btn-action-close:hover[b-x9epn0ytub] {
    border-color: #da3637;
    background: rgba(248, 81, 73, 0.1);
    color: #ff7b72;
}

.btn-action-map:hover[b-x9epn0ytub] {
    border-color: #1f6feb;
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
}

.isp-no-action[b-x9epn0ytub] {
    color: #8b949e;
    font-style: italic;
}

.isp-empty[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    background: #161b22;
    border: 1px dashed #30363d;
    border-radius: 12px;
    color: #8b949e;
    text-align: center;
    gap: 16px;
}

.isp-empty p[b-x9epn0ytub] {
    margin: 0;
    font-size: 14px;
}

/* ── Grid & Cards ───────────────────────────────────────────── */
.isp-grid[b-x9epn0ytub] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .isp-grid[b-x9epn0ytub] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.isp-card[b-x9epn0ytub] {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.isp-card:hover[b-x9epn0ytub] {
    transform: translateY(-2px);
    border-color: #8b949e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.isp-card-has-warnings:hover[b-x9epn0ytub] {
    border-color: #f85149;
    box-shadow: 0 8px 24px rgba(248, 81, 73, 0.08);
}

.isp-card-header[b-x9epn0ytub] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 10px;
}

.isp-card-icon[b-x9epn0ytub] {
    font-size: 1.4rem;
}

.isp-card-title[b-x9epn0ytub] {
    font-weight: 600;
    font-size: 14px;
    color: #f0f6fc;
    flex-grow: 1;
}

.isp-card-badge[b-x9epn0ytub] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.badge-success[b-x9epn0ytub] {
    background: rgba(46, 160, 67, 0.15);
    color: #56d364;
    border: 1px solid rgba(46, 160, 67, 0.25);
}

.badge-danger[b-x9epn0ytub] {
    background: rgba(248, 81, 73, 0.15);
    color: #ff7b72;
    border: 1px solid rgba(248, 81, 73, 0.25);
}

.badge-info[b-x9epn0ytub] {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
    border: 1px solid rgba(56, 139, 253, 0.25);
}


.isp-card-preview[b-x9epn0ytub] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.isp-preview-empty[b-x9epn0ytub] {
    color: #56d364;
    font-size: 12px;
    font-style: italic;
    margin: auto 0;
}

.isp-card-preview ul[b-x9epn0ytub] {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 12px;
    color: #c9d1d9;
}

.isp-card-preview li[b-x9epn0ytub] {
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.isp-card-preview li strong[b-x9epn0ytub] {
    color: #f0f6fc;
}

.isp-more-link[b-x9epn0ytub] {
    font-size: 11px;
    color: #58a6ff;
    font-weight: 500;
    margin-top: 10px;
    align-self: flex-start;
}

.isp-card:hover .isp-more-link[b-x9epn0ytub] {
    text-decoration: underline;
}

/* ── Detailed Drill-down View ───────────────────────────────── */
.isp-detailed-view[b-x9epn0ytub] {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.isp-back-btn[b-x9epn0ytub] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s ease;
}

.isp-back-btn:hover[b-x9epn0ytub] {
    background: #30363d;
    border-color: #8b949e;
    color: #e6edf3;
}

.isp-detail-header[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 16px;
}

.isp-detail-title[b-x9epn0ytub] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f0f6fc;
}

.isp-detail-empty[b-x9epn0ytub] {
    padding: 32px;
    text-align: center;
    color: #8b949e;
    font-style: italic;
}

/* ── Table Aesthetics ───────────────────────────────────────── */
.isp-detail-table[b-x9epn0ytub] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.isp-detail-table th[b-x9epn0ytub] {
    padding: 12px;
    background: #21262d;
    color: #8b949e;
    font-weight: 500;
    border-bottom: 1px solid #30363d;
}

.isp-detail-table td[b-x9epn0ytub] {
    padding: 12px;
    border-bottom: 1px solid #21262d;
    color: #c9d1d9;
    vertical-align: middle;
}

.isp-detail-table tr:hover td[b-x9epn0ytub] {
    background: rgba(255, 255, 255, 0.015);
}

.isp-row-ot[b-x9epn0ytub] {
    color: #58a6ff;
    font-family: monospace;
}

.isp-row-ot-link[b-x9epn0ytub] {
    cursor: pointer;
    transition: color 0.15s ease;
}

.isp-row-ot-link:hover[b-x9epn0ytub] {
    text-decoration: underline;
    color: #79c0ff;
}

.isp-badge-type[b-x9epn0ytub] {
    background: #0d1117;
    border: 1px solid #30363d;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #8b949e;
    font-family: monospace;
}

.isp-detail-text[b-x9epn0ytub] {
    line-height: 1.4;
    word-break: break-all;
}

/* ── Action Buttons ─────────────────────────────────────────── */
.isp-action-btn[b-x9epn0ytub] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    transition: all 0.15s ease;
}

.btn-action-close:hover[b-x9epn0ytub] {
    border-color: #da3637;
    background: rgba(248, 81, 73, 0.1);
    color: #ff7b72;
}

.btn-action-map:hover[b-x9epn0ytub] {
    border-color: #1f6feb;
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
}

.isp-no-action[b-x9epn0ytub] {
    color: #8b949e;
    font-style: italic;
}

/* ============================================================
   Nuevos estilos para la columna Nombre en Excel y sus Badges
   ============================================================ */

.isp-cell-name-container[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.isp-row-ot-text[b-x9epn0ytub] {
    font-size: 13.5px;
    font-weight: 600;
    color: #e6edf3;
    word-break: break-all;
}

.isp-row-ot-link[b-x9epn0ytub] {
    cursor: pointer;
    transition: color 0.15s ease;
}
.isp-row-ot-link:hover[b-x9epn0ytub] {
    color: #58a6ff;
    text-decoration: underline;
}

.isp-cell-badges-row[b-x9epn0ytub] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.isp-cell-badges-row .isp-badge[b-x9epn0ytub] {
    margin-left: 0 !important;
}

.isp-badge-ot-count[b-x9epn0ytub] {
    background-color: #21262d;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    color: #8b949e;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.isp-badge-ot-count-danger[b-x9epn0ytub] {
    background-color: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    color: #ff7b72;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

/* ── Assembling Overlay (Alternativa 1 UX Waiting) ───────────────────────── */
.isp-assembling-overlay[b-x9epn0ytub] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    height: 100%;
    min-height: 350px;
    background: #0d1117;
    box-sizing: border-box;
}

.isp-assembling-card[b-x9epn0ytub] {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 32px 24px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: isp-fade-in-b-x9epn0ytub 0.3s ease-out;
}

.isp-assembling-title[b-x9epn0ytub] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #58a6ff;
    margin: 0;
}

.isp-assembling-desc[b-x9epn0ytub] {
    font-size: 0.9rem;
    color: #8b949e;
    line-height: 1.5;
    margin: 0;
}

.isp-assembling-badge[b-x9epn0ytub] {
    background-color: rgba(88, 166, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    color: #58a6ff;
    font-weight: 500;
    letter-spacing: 0.02em;
    animation: isp-pulse-badge-b-x9epn0ytub 1.8s infinite ease-in-out;
}

/* Spinner animado con efecto de pulso circular concéntrico */
.isp-pulse-spinner[b-x9epn0ytub] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #58a6ff;
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7);
    animation: isp-pulse-ring-b-x9epn0ytub 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
}

.isp-pulse-spinner[b-x9epn0ytub]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #161b22;
    border: 2px solid #58a6ff;
}

@keyframes isp-pulse-ring-b-x9epn0ytub {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 16px rgba(88, 166, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(88, 166, 255, 0);
    }
}

@keyframes isp-pulse-badge-b-x9epn0ytub {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.5; }
}

@keyframes isp-fade-in-b-x9epn0ytub {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Secciones de Resumen y Agrupación ───────────────────────── */
.isp-sections-container[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.isp-section[b-x9epn0ytub] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.isp-section-title[b-x9epn0ytub] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: #f0f6fc;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 8px;
    letter-spacing: -0.01em;
}

/* /Pages/Home/Components/Integration/UnifiedIntegrationResultsPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BulkUploadResultsPanel — estilo panel principal.
   Usa el mismo contenedor que Reportes.
   ═══════════════════════════════════════════════════ */

.bulk-results-panel[b-lpxfaoj0zp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f8fafc;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.bulk-results-header[b-lpxfaoj0zp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    flex-shrink: 0;
}

.bulk-results-header-left h2[b-lpxfaoj0zp] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.bulk-results-filename[b-lpxfaoj0zp] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    display: block;
}

.bulk-results-header-actions[b-lpxfaoj0zp] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Resumen ── */
.bulk-results-summary[b-lpxfaoj0zp] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    flex-shrink: 0;
}

.bulk-summary-card[b-lpxfaoj0zp] {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.bulk-summary-ok[b-lpxfaoj0zp] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.bulk-summary-err[b-lpxfaoj0zp] {
    border-color: #fecaca;
    background: #fef2f2;
}

.bulk-summary-number[b-lpxfaoj0zp] {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.bulk-summary-ok .bulk-summary-number[b-lpxfaoj0zp] { color: #16a34a; }
.bulk-summary-err .bulk-summary-number[b-lpxfaoj0zp] { color: #dc2626; }

.bulk-summary-label[b-lpxfaoj0zp] {
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
}

/* ── Alertas ── */
.bulk-alert[b-lpxfaoj0zp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.bulk-alert-error[b-lpxfaoj0zp] {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

.bulk-alert-success[b-lpxfaoj0zp] {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}

.bulk-alert-info[b-lpxfaoj0zp] {
    background: #eff6ff;
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
}

/* ── Tabla ── */
.bulk-results-toolbar[b-lpxfaoj0zp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px 14px;
    background: #fff7ed;
    border-top: 1px solid #fdba74;
    border-bottom: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.82rem;
}

.bulk-results-toolbar-copy[b-lpxfaoj0zp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.4;
}

.bulk-results-pager[b-lpxfaoj0zp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.bulk-page-btn[b-lpxfaoj0zp] {
    border: 1px solid #fdba74;
    background: #ffffff;
    color: #9a3412;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-page-btn:hover:not(:disabled)[b-lpxfaoj0zp] {
    background: #fff1e6;
}

.bulk-page-btn:disabled[b-lpxfaoj0zp] {
    opacity: 0.45;
    cursor: not-allowed;
}

.bulk-results-table-wrap[b-lpxfaoj0zp] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.bulk-table[b-lpxfaoj0zp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    user-select: none;
    -webkit-user-select: none;
}

.bulk-table th[b-lpxfaoj0zp] {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    padding: 11px 14px;
    text-align: left;
    font-weight: 700;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    z-index: 2;
}

.bulk-table td[b-lpxfaoj0zp] {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}

.bulk-table tr[b-lpxfaoj0zp] {
    background: #fff;
}

.bulk-row-ok:hover[b-lpxfaoj0zp] { background: #f0fdf4; }

.bulk-row-error[b-lpxfaoj0zp] {
    background: #fef2f2;
}

.bulk-row-error:hover[b-lpxfaoj0zp] {
    background: #fee2e2;
}

.bulk-row-warn[b-lpxfaoj0zp] {
    background: #fffbeb;
}

.bulk-row-warn:hover[b-lpxfaoj0zp] {
    background: #fef3c7;
}

.bulk-col-index[b-lpxfaoj0zp] {
    position: sticky;
    left: 0;
    background: #f1f5f9;
    z-index: 5;
    text-align: center;
    border-right: 1px solid #cbd5e1;
    min-width: 50px;
    width: 50px;
    font-weight: 600;
    color: #64748b;
}

.bulk-col-fixed-left[b-lpxfaoj0zp] {
    position: sticky;
    left: 50px;
    background: inherit;
    z-index: 3;
    border-right: 2px solid #e2e8f0;
    box-shadow: 4px 0 6px -1px rgba(0,0,0,0.05);
}

.bulk-table th.bulk-col-index[b-lpxfaoj0zp] {
    background: #f1f5f9;
    z-index: 6;
}

.bulk-table th.bulk-col-fixed-left[b-lpxfaoj0zp] {
    background: #f1f5f9;
    z-index: 5;
    overflow: visible;
}

.bulk-cell-dup[b-lpxfaoj0zp] {
    color: #dc2626 !important;
    font-weight: 700;
}

/* ── Badges ── */
.bulk-badge[b-lpxfaoj0zp] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-badge-ok[b-lpxfaoj0zp] {
    background: #dcfce7;
    color: #166534;
}

.bulk-badge-err[b-lpxfaoj0zp] {
    background: #fee2e2;
    color: #991b1b;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-badge-warn[b-lpxfaoj0zp] {
    background: #fef3c7;
    color: #92400e;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Loading ── */
.bulk-loading[b-lpxfaoj0zp] {
    text-align: center;
    padding: 48px 0;
    color: #64748b;
}

.bulk-spinner[b-lpxfaoj0zp] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bulkResultsSpin-b-lpxfaoj0zp 0.7s linear infinite;
    margin: 0 auto 14px;
}

@keyframes bulkResultsSpin-b-lpxfaoj0zp {
    to { transform: rotate(360deg); }
}

/* ── Botones ── */
.bulk-btn-primary[b-lpxfaoj0zp] {
    padding: 9px 20px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bulk-btn-primary:hover:not(:disabled)[b-lpxfaoj0zp] {
    background: #4f46e5;
}

.bulk-btn-primary:disabled[b-lpxfaoj0zp] {
    background: #c7d2fe;
    cursor: not-allowed;
}

.bulk-btn-secondary[b-lpxfaoj0zp] {
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.bulk-btn-secondary:hover:not(:disabled)[b-lpxfaoj0zp] {
    background: rgba(255, 255, 255, 0.2);
}

.bulk-btn-secondary:disabled[b-lpxfaoj0zp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal / Overlay ── */
/* `inset: 0` y no `100vw × 100vh`: este panel vive dentro de .dynamic-panel (transform +
   backdrop-filter), que es el bloque contenedor del `fixed`. Con 100vw el diálogo se centraba
   respecto a un fondo que arrancaba en el borde del panel y quedaba corrido 220 px a la derecha. */
.bulk-overlay[b-lpxfaoj0zp] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bulk-dialog[b-lpxfaoj0zp] {
    background: #ffffff;
    border-radius: 12px;
    width: 480px;
    max-width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: bulkScaleIn-b-lpxfaoj0zp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@keyframes bulkScaleIn-b-lpxfaoj0zp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.bulk-dialog-header[b-lpxfaoj0zp] {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-dialog-header h3[b-lpxfaoj0zp] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.bulk-close-btn[b-lpxfaoj0zp] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.bulk-close-btn:hover[b-lpxfaoj0zp] {
    color: #ef4444;
}

.bulk-dialog-body[b-lpxfaoj0zp] {
    padding: 20px;
    font-size: 0.95rem;
    color: #475569;
}

/* ── Popover de Advertencia ── */
.integration-warning-popover[b-lpxfaoj0zp] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 320px;
    max-width: 450px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    white-space: normal;
    word-break: break-word;
}

.integration-warning-popover[b-lpxfaoj0zp]::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    width: 8px;
    height: 8px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    border-left: 1px solid #fde68a;
    transform: rotate(45deg);
}

/* ── Warnings Contextuales por Celda (Dots) ── */
.cell-warning-wrapper[b-lpxfaoj0zp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.cell-warning-dot[b-lpxfaoj0zp] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 1px 3px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: warning-pulse-dot-b-lpxfaoj0zp 2.5s infinite ease-in-out;
}

@keyframes warning-pulse-dot-b-lpxfaoj0zp {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 4px #fde68a; }
    100% { transform: scale(1); opacity: 0.85; }
}

.cell-warning-popup[b-lpxfaoj0zp] {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    width: 260px;
    z-index: 1000;
    text-align: left;
    font-size: 0.75rem;
    color: #1e293b;
    border-top: 3px solid #eab308; /* Color amarillo de advertencia */
    white-space: normal;
    word-break: break-word;
}

.cell-warning-popup-header[b-lpxfaoj0zp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 600;
    color: #854d0e;
}

.cell-warning-popup-close[b-lpxfaoj0zp] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #94a3b8;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.cell-warning-popup-close:hover[b-lpxfaoj0zp] {
    color: #ef4444;
}

.cell-warning-popup-body[b-lpxfaoj0zp] {
    padding: 8px 10px;
}

.cell-warning-popup-body ul[b-lpxfaoj0zp] {
    margin: 0;
    padding-left: 14px;
    list-style-type: disc;
}

.cell-warning-popup-body li[b-lpxfaoj0zp] {
    margin-bottom: 3px;
    color: #475569;
    line-height: 1.35;
}

.cell-warning-popup-body li:last-child[b-lpxfaoj0zp] {
    margin-bottom: 0;
}

/* ── Filtro de Estado ── */
.status-filter-backdrop[b-lpxfaoj0zp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 998;
    background: transparent;
    cursor: default;
}

.status-filter-dropdown[b-lpxfaoj0zp] {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    z-index: 999;
    min-width: 160px;
    margin-top: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-filter-option[b-lpxfaoj0zp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #475569;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.status-filter-option:hover[b-lpxfaoj0zp] {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.status-filter-option.selected[b-lpxfaoj0zp] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-weight: 600;
}

.status-filter-option i[b-lpxfaoj0zp] {
    font-size: 0.85rem;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Home/Components/Integration/UnifiedIntegrationUploadModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   UnifiedIntegrationUploadModal — Paso 1: selector de archivo.
   Prefijo "bulk-" para evitar colisiones con CSS global.
   ═══════════════════════════════════════════════════ */

/* ── Overlay ── */
.bulk-overlay[b-6ch2q2oxzq] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ── Diálogo ── */
.bulk-dialog[b-6ch2q2oxzq] {
    background: #fff;
    width: 480px;
    max-width: 95vw;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bulkSlideUp-b-6ch2q2oxzq 0.25s ease-out;
}

@keyframes bulkSlideUp-b-6ch2q2oxzq {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.bulk-dialog-header[b-6ch2q2oxzq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 14px 14px 0 0;
}

.bulk-dialog-header h3[b-6ch2q2oxzq] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

.bulk-close-btn[b-6ch2q2oxzq] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.bulk-close-btn:hover[b-6ch2q2oxzq] {
    background: #fee2e2;
    color: #ef4444;
}

.bulk-dialog-body[b-6ch2q2oxzq] {
    padding: 24px 32px 32px 32px;
}

/* ── Dropzone ── */
.bulk-dropzone[b-6ch2q2oxzq] {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
}

.bulk-dropzone:hover[b-6ch2q2oxzq], .bulk-dropzone.bulk-drag-over[b-6ch2q2oxzq] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.bulk-dropzone-icon[b-6ch2q2oxzq] {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.bulk-dropzone-title[b-6ch2q2oxzq] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}

.bulk-dropzone-hint[b-6ch2q2oxzq] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 16px;
}

.bulk-file-label[b-6ch2q2oxzq] {
    display: inline-block;
    padding: 10px 24px;
    background: #6366f1;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bulk-file-label:hover[b-6ch2q2oxzq] {
    background: #4f46e5;
}

/* ── Loading ── */
.bulk-loading[b-6ch2q2oxzq] {
    text-align: center;
    padding: 32px 0;
    color: #6b7280;
}

.bulk-spinner[b-6ch2q2oxzq] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bulkSpin-b-6ch2q2oxzq 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes bulkSpin-b-6ch2q2oxzq {
    to { transform: rotate(360deg); }
}

/* ── Alertas ── */
.bulk-alert[b-6ch2q2oxzq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.bulk-alert-error[b-6ch2q2oxzq] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Botón Secundario ── */
.bulk-btn-secondary[b-6ch2q2oxzq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bulk-btn-secondary:hover[b-6ch2q2oxzq] {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.bulk-btn-secondary:active[b-6ch2q2oxzq] {
    transform: translateY(1px);
    background: #e2e8f0;
}
/* /Pages/Home/Components/NavMenu/TopHeader.razor.rz.scp.css */
/* Contenido que TopHeader inyecta dentro del TenantSelector en sesión de operador EsferaTech.
   Vive aquí y no en TenantSelector.razor.css porque el CSS aislado de Blazor tiene por scope el
   componente que RENDERIZA el markup, y estos fragmentos los renderiza TopHeader.

   Van sin fondo propio, directamente sobre el color de la tarjeta: los recuadros blancos quedan
   reservados para lo seleccionable (acordeón y sedes). */

.tenant-operator-note[b-ldbff5f822] {
    font-size: 0.83rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 2px;
    margin-bottom: 12px;
}

/* Separador respecto a la lista: el motivo cierra el bloque de la elección. */
.tenant-operator-reason[b-ldbff5f822] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.tenant-operator-reason textarea[b-ldbff5f822] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.35;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    outline: none;
    resize: vertical;
}

.tenant-operator-reason textarea[b-ldbff5f822]::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.tenant-operator-reason textarea:focus[b-ldbff5f822] {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.65);
}

.top-bar-main-row[b-ldbff5f822] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    pointer-events: none;
}

.tenant-selector-slot[b-ldbff5f822] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    pointer-events: auto;
}

.top-bar-sub-row[b-ldbff5f822] {
    position: absolute;
    top: calc(100% + 6px);
    right: 20px;
    pointer-events: auto;
    z-index: 1000;
}

[b-ldbff5f822] .tenant-card {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    width: fit-content;
    max-width: fit-content;
}

[b-ldbff5f822] .tenant-card.expanded {
    width: 270px;
    max-width: 270px;
}

@media (max-width: 768px) {
    .top-bar-main-row[b-ldbff5f822] {
        width: 100%;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .tenant-selector-slot.expanded[b-ldbff5f822] {
        order: 3;
        flex: 0 0 100%;
    }

    [b-ldbff5f822] .active-work-banner-wrapper {
        order: 2;
        flex: 0 0 100%;
        display: flex;
        justify-content: flex-end;
        max-width: 100%;
    }

    [b-ldbff5f822] .active-work-banner-wrapper .vehicle-info-stack {
        display: none;
    }

    [b-ldbff5f822] .active-work-capsule {
        max-width: 100%;
    }

    [b-ldbff5f822] .tenant-card.expanded {
        width: min(340px, 100%);
        min-width: min(270px, 100%);
        max-width: 100%;
        max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .top-bar.has-active-work-session[b-ldbff5f822]  .tenant-card.expanded {
        max-height: calc(100vh - 130px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 130px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/Home/Components/Notifications/NotificationsPanel.razor.rz.scp.css */
.notifications-panel[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #f1f1f1;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.notifications-header[b-2ou1aq5yar] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 14px;
    flex: 0 0 auto;
}

.notifications-heading[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.header-icon[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.header-icon img[b-2ou1aq5yar] {
    width: 25px;
    height: 25px;
}

.header-text[b-2ou1aq5yar] {
    min-width: 0;
}

.header-text h2[b-2ou1aq5yar] {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.header-subtitle[b-2ou1aq5yar] {
    display: block;
    margin-top: 3px;
    color: rgba(241, 241, 241, 0.68);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.close-notifications-btn[b-2ou1aq5yar] {
    position: relative;
    isolation: isolate;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-block-start: -12px;
    margin-inline-end: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(241, 241, 241, 0.85);
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-notifications-btn[b-2ou1aq5yar]::before {
    position: absolute;
    inset: 6px;
    z-index: -1;
    border-radius: 10px;
    background: transparent;
    content: "";
    transition: background-color 0.2s ease;
}

.close-notifications-btn svg[b-2ou1aq5yar] {
    width: 28px;
    height: 28px;
}

.close-notifications-btn:hover[b-2ou1aq5yar] {
    color: #ffffff;
}

.close-notifications-btn:hover[b-2ou1aq5yar]::before {
    background: rgba(255, 255, 255, 0.1);
}

.close-notifications-btn:focus-visible[b-2ou1aq5yar] {
    outline-offset: -6px;
}

.notifications-toolbar[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 0;
    flex: 0 0 auto;
}

.notification-filters[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn[b-2ou1aq5yar],
.mark-all-read-btn[b-2ou1aq5yar] {
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--inbox-pill-radius, 20px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-btn[b-2ou1aq5yar] {
    position: relative;
    isolation: isolate;
    min-width: 88px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-weight: 500;
}

.filter-btn[b-2ou1aq5yar]::before {
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-radius: var(--inbox-pill-radius, 20px);
    background: var(--inbox-pill-background, #1f2f45);
    content: "";
    transition: background-color 0.2s ease;
}

.filter-btn:not(.active):hover[b-2ou1aq5yar]::before,
.filter-btn:not(.active):focus-visible[b-2ou1aq5yar]::before {
    background: #264a73;
}

.filter-btn.active[b-2ou1aq5yar] {
    background: transparent;
    color: #ffffff;
    font-weight: 600;
}

.filter-btn.active[b-2ou1aq5yar]::before {
    background: var(--inbox-pill-active-background, #e5b900);
}

.mark-all-read-btn[b-2ou1aq5yar] {
    position: relative;
    isolation: isolate;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #ffffff;
}

.mark-all-read-btn[b-2ou1aq5yar]::before {
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--inbox-pill-radius, 20px);
    background: transparent;
    content: "";
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mark-all-read-btn:not(:disabled):hover[b-2ou1aq5yar]::before,
.mark-all-read-btn:not(:disabled):focus-visible[b-2ou1aq5yar]::before {
    border-color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.08);
}

.mark-all-read-btn:disabled[b-2ou1aq5yar] {
    color: rgba(241, 241, 241, 0.38);
    cursor: not-allowed;
}

.mark-all-read-btn:disabled[b-2ou1aq5yar]::before {
    border-color: rgba(255, 255, 255, 0.2);
}

.notifications-body[b-2ou1aq5yar] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.notifications-body[b-2ou1aq5yar]::-webkit-scrollbar {
    width: 6px;
}

.notifications-body[b-2ou1aq5yar]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}

.loading-state[b-2ou1aq5yar],
.empty-state[b-2ou1aq5yar] {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    color: rgba(241, 241, 241, 0.72);
}

.notification-spinner[b-2ou1aq5yar] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: #d81b84;
    border-radius: 50%;
    animation: notification-spin-b-2ou1aq5yar 0.8s linear infinite;
}

@keyframes notification-spin-b-2ou1aq5yar {
    to { transform: rotate(360deg); }
}

.empty-icon[b-2ou1aq5yar] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
}

.empty-icon img[b-2ou1aq5yar] {
    width: 30px;
    height: 30px;
    opacity: 0.8;
}

.empty-state h3[b-2ou1aq5yar],
.empty-state p[b-2ou1aq5yar] {
    margin: 0;
}

.empty-state h3[b-2ou1aq5yar] {
    color: #ffffff;
    font-size: 17px;
}

.empty-state p[b-2ou1aq5yar] {
    max-width: 290px;
    font-size: 13px;
    line-height: 1.5;
}

.notification-group + .notification-group[b-2ou1aq5yar] {
    margin-top: 8px;
}

.group-header[b-2ou1aq5yar] {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
}

.group-header[b-2ou1aq5yar]::before {
    position: absolute;
    inset: 5px 0;
    z-index: -1;
    border-radius: var(--inbox-group-header-radius, 10px);
    background: var(--inbox-group-header-background, rgba(255, 255, 255, 0.08));
    content: "";
}

.group-header:hover[b-2ou1aq5yar] {
    background: transparent;
}

.group-header:hover[b-2ou1aq5yar]::before {
    background: var(--inbox-group-header-hover-background, rgba(255, 255, 255, 0.12));
}

.group-header-left[b-2ou1aq5yar] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-icon[b-2ou1aq5yar] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
}

.group-icon svg[b-2ou1aq5yar] {
    width: 18px;
    height: 18px;
}

.group-name[b-2ou1aq5yar] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.group-chevron[b-2ou1aq5yar] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: rgba(255, 255, 255, 0.6);
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.group-chevron.collapsed[b-2ou1aq5yar] {
    transform: none;
}

.group-items[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.notification-item[b-2ou1aq5yar] {
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px 6px 4px 8px;
    border: 1px solid rgba(218, 225, 235, 0.88);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #334d6e;
    box-shadow: 0 5px 14px rgba(31, 47, 69, 0.12);
    box-sizing: border-box;
}

.notification-item.read[b-2ou1aq5yar] {
    background: rgba(248, 250, 252, 0.9);
}

.notification-item.read .notification-description[b-2ou1aq5yar] {
    color: #52657d;
}

.notification-main[b-2ou1aq5yar] {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.notification-icon[b-2ou1aq5yar] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #8592a8;
    color: #ffffff;
}

.notification-icon svg[b-2ou1aq5yar],
.notification-icon img[b-2ou1aq5yar] {
    width: 18px;
    height: 18px;
}

.notification-content[b-2ou1aq5yar] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-title[b-2ou1aq5yar],
.notification-description[b-2ou1aq5yar] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-title[b-2ou1aq5yar] {
    color: #334d6e;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}

.notification-description[b-2ou1aq5yar] {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-meta[b-2ou1aq5yar] {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 4px;
}

.notification-time[b-2ou1aq5yar] {
    color: #52657d;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.notification-actions[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.delete-btn[b-2ou1aq5yar],
.read-status-btn[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.delete-btn[b-2ou1aq5yar] {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #91a0b5;
    opacity: 0;
}

.notification-item:hover .delete-btn[b-2ou1aq5yar],
.notification-item:focus-within .delete-btn[b-2ou1aq5yar] {
    opacity: 1;
}

.delete-btn:hover[b-2ou1aq5yar] {
    background: #fee2e2;
    color: #dc2626;
}

.delete-btn svg[b-2ou1aq5yar] {
    width: 16px;
    height: 16px;
}

.read-status-btn[b-2ou1aq5yar] {
    width: 44px;
    height: 44px;
    border: 2px solid #63cf8a;
}

.read-status-btn.unread[b-2ou1aq5yar] {
    background: #63cf8a;
    color: #ffffff;
}

.read-status-btn.read[b-2ou1aq5yar] {
    border-color: #aeb9c8;
    background: transparent;
    color: #8290a4;
}

.read-status-btn.read:disabled[b-2ou1aq5yar] {
    opacity: 1;
    cursor: default;
}

.read-status-btn svg[b-2ou1aq5yar] {
    width: 15px;
    height: 15px;
}

button:focus-visible[b-2ou1aq5yar] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .notifications-header[b-2ou1aq5yar] {
        padding: 12px 12px 10px;
    }

    .notifications-toolbar[b-2ou1aq5yar] {
        align-items: stretch;
        flex-direction: column;
        padding-inline: 12px;
    }

    .notification-filters[b-2ou1aq5yar],
    .filter-btn[b-2ou1aq5yar] {
        flex: 1;
    }

    .mark-all-read-btn[b-2ou1aq5yar] {
        align-self: flex-end;
        min-height: 44px;
    }

    .filter-btn[b-2ou1aq5yar],
    .close-notifications-btn[b-2ou1aq5yar],
    .delete-btn[b-2ou1aq5yar],
    .read-status-btn[b-2ou1aq5yar] {
        min-width: 44px;
        min-height: 44px;
    }

    .notification-item[b-2ou1aq5yar] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .notification-icon[b-2ou1aq5yar] {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .delete-btn[b-2ou1aq5yar] {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-spinner[b-2ou1aq5yar],
    .group-chevron[b-2ou1aq5yar],
    button[b-2ou1aq5yar] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Pages/Home/Components/Reportes/Components/Cards/MetricCard.razor.rz.scp.css */
/* Contenedor Principal con estilo "Glass" oscuro y pro */
.metric-card-container[b-vi4tqkd1by] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px 24px;
    background: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 2px 4px -1px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Brillo superior interno */
    color: #e2e8f0;
    font-family: 'Segoe UI', sans-serif;
    /* Mantenemos fuente según solicitud */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.metric-card-container:hover[b-vi4tqkd1by] {
    transform: translateY(-4px);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Efecto de resplandor dinámico que sigue al mouse */
.metric-card-container[b-vi4tqkd1by]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            var(--glow-color, rgba(56, 189, 248, 0.08)),
            transparent 40%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.metric-card-container:hover[b-vi4tqkd1by]::before {
    opacity: 1;
}

.metric-content-wrapper[b-vi4tqkd1by] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
    position: relative;
    z-index: 1;
}

/* HEADER: Título e Icono */
.metric-header[b-vi4tqkd1by] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 1rem;
}

.metric-title[b-vi4tqkd1by] {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 4px;
    /* Alineación visual con icono */
    flex: 1;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Selectores integrados Premium (Pill-shaped, glassmorphism) */
.metric-select[b-vi4tqkd1by] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255, 255, 255, 0.05); /* Sutil, como el icono */
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px; /* Estilo píldora */
    padding: 2px 24px 2px 10px;
    font-size: 0.75rem; /* Mismo tamaño que el título */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    font-family: inherit;
    box-shadow: none;
    text-transform: none; /* Evita que herede el uppercase del titulo si no se desea */
    letter-spacing: normal;
    margin: 0 4px;
}

.metric-select:hover[b-vi4tqkd1by] {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.metric-select:focus[b-vi4tqkd1by] {
    border-color: rgba(56, 189, 248, 0.6);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.metric-select option[b-vi4tqkd1by] {
    background-color: #0f172a; /* Fondo oscuro sólido para las opciones */
    color: #f1f5f9;
    padding: 10px;
    font-weight: 500;
}

/* Icono con fondo sutil */
.metric-icon[b-vi4tqkd1by] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.metric-card-container:hover .metric-icon[b-vi4tqkd1by] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
}


/* BODY: Valor y Unidad */
.metric-body[b-vi4tqkd1by] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: auto;
    margin-bottom: 12px;
}

.metric-value[b-vi4tqkd1by] {
    font-size: 2.2rem;
    /* Más grande 36px aprox */
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.metric-unit[b-vi4tqkd1by] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
    /* Alinear base */
}

/* FOOTER: Tendencia */
.metric-footer[b-vi4tqkd1by] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 24px;
}

.metric-trend[b-vi4tqkd1by] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    align-self: flex-start;
    /* No ocupar todo el ancho */
    border: 1px solid transparent;
}

.trend-label[b-vi4tqkd1by] {
    color: #64748b;
    font-weight: 400;
    font-size: 0.75rem;
    margin-left: 4px;
}

/* Colores de tendencia con bordes y fondos sutiles */
.metric-trend.success[b-vi4tqkd1by] {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}

.metric-trend.danger[b-vi4tqkd1by] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

.metric-trend.warning[b-vi4tqkd1by] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.metric-trend.neutral[b-vi4tqkd1by] {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.1);
}

/* Barra de Progreso */
.progress-bar-container[b-vi4tqkd1by] {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-bar[b-vi4tqkd1by] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    border-radius: 9999px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

/* Colores del resplandor interactivo según el estado */
.metric-card-container.success[b-vi4tqkd1by] {
    --glow-color: rgba(74, 222, 128, 0.08);
    /* Verde */
}

.metric-card-container.warning[b-vi4tqkd1by] {
    --glow-color: rgba(251, 191, 36, 0.08);
    /* Amarillo */
}

.metric-card-container.danger[b-vi4tqkd1by] {
    --glow-color: rgba(248, 113, 113, 0.08);
    /* Rojo */
}

.metric-card-container.neutral[b-vi4tqkd1by] {
    --glow-color: rgba(148, 163, 184, 0.08);
    /* Gris/Azul */
}

/* Estado deshabilitado en modo edición */
.metric-card-disabled[b-vi4tqkd1by] {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.4) brightness(0.9);
    cursor: default;
    border-color: rgba(255, 255, 255, 0.02);
}

.metric-card-disabled:hover[b-vi4tqkd1by] {
    transform: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
/* /Pages/Home/Components/Reportes/Components/Cards/ReporteCard.razor.rz.scp.css */
/* Estilos extraídos de ReportesPanel para que el componente sea autónomo */

.reporte-card[b-qfend5n1w0] {
    /* Degradado sutil para profundidad, igual que MetricCard */
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.reporte-card:hover[b-qfend5n1w0] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
        0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Efecto de brillo superior estático original */
/* Efecto de brillo superior estático original removido */

/* Efecto de luz dinámica que sigue al mouse (Mismo que KPIs) */
.reporte-card[b-qfend5n1w0]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            var(--glow-color, rgba(56, 189, 248, 0.08)),
            transparent 40%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.reporte-card:hover[b-qfend5n1w0]::after {
    opacity: 1;
}

.card-header[b-qfend5n1w0] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: none;
    flex-wrap: wrap;
    gap: 10px;
}

.card-header h4[b-qfend5n1w0] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    /* Slate-400 para consistencia con MetricCard */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-content[b-qfend5n1w0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fondo muy sutil para delimitar el área gráfica, opcional */
    background: transparent;
    border-radius: 8px;
    min-height: 0;
    position: relative;
    z-index: 1;
    padding: 10px;
}

/* Botones de acción en el header */
.icon-btn[b-qfend5n1w0] {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover[b-qfend5n1w0] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
}

.header-actions select[b-qfend5n1w0] {
    background-color: rgba(30, 41, 59, 0.7);
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 24px 4px 10px;
    /* Extra padding for arrow */
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Force Dark Mode for Options (Critical) */
    color-scheme: dark;

    /* Custom Arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}

.header-actions select:hover[b-qfend5n1w0] {
    background: linear-gradient(to bottom, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

.header-actions select:focus[b-qfend5n1w0] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Option Styles */
.header-actions select option[b-qfend5n1w0] {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 12px;
}
/* /Pages/Home/Components/Reportes/Components/Charts/Views/ComplianceTrendChart.razor.rz.scp.css */
.compliance-summary-cards[b-c8v1hmnius] {
    display: flex;
    gap: 16px;
    padding: 16px 20px 8px 20px;
    flex-wrap: wrap;
}

.compliance-card[b-c8v1hmnius] {
    padding: 14px 20px;
    border-radius: 12px;
    flex: 1;
    min-width: 320px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-icon[b-c8v1hmnius] {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.card-content[b-c8v1hmnius] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-metrics-horizontal[b-c8v1hmnius] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.sub-metric[b-c8v1hmnius] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 6px;
}

.sub-metric.green[b-c8v1hmnius] {
    color: #10b981;
}

.sub-metric.orange[b-c8v1hmnius] {
    color: #f59e0b;
}

.compliance-card-blue[b-c8v1hmnius] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}
.compliance-card-blue .card-icon[b-c8v1hmnius] { color: #3b82f6; background: rgba(59, 130, 246, 0.08); }

.compliance-card-orange[b-c8v1hmnius] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-color: rgba(245, 158, 11, 0.15);
}
.compliance-card-orange .card-icon[b-c8v1hmnius] { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }

.card-label[b-c8v1hmnius] {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.card-value[b-c8v1hmnius] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f8fafc;
}

.compliance-card-blue .card-label[b-c8v1hmnius] { color: rgba(59, 130, 246, 0.7); }
.compliance-card-orange .card-label[b-c8v1hmnius] { color: rgba(245, 158, 11, 0.7); }

.custom-chart-scroll[b-c8v1hmnius] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-c8v1hmnius]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-c8v1hmnius]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-c8v1hmnius]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-c8v1hmnius]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/DiasPerdidosChart.razor.rz.scp.css */
.custom-chart-scroll[b-w5c0gwd0wj] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-w5c0gwd0wj]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-w5c0gwd0wj]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-w5c0gwd0wj]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-w5c0gwd0wj]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/HistoricoVehiculosSummary.razor.rz.scp.css */
/* El espacio se reclama un nivel arriba, en ReporteCard.razor (TightContent),
   que es quien conoce con certeza el padding real a cancelar. Este componente
   solo necesita llenar el espacio que le llega. */
.historico-summary[b-fwnge813hp] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
}

.historico-summary-empty[b-fwnge813hp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
    padding: 12px;
}

.historico-summary-table-wrap[b-fwnge813hp] {
    flex: 1;
    overflow: auto;
    position: relative;
    isolation: isolate;
}

.historico-summary-table[b-fwnge813hp] {
    width: 100%;
    height: 100%;
    /* border-collapse:collapse impide que border-radius funcione en las celdas
       de esquina (limitación conocida de CSS) — con "separate" el redondeo del
       encabezado/última fila sí se aplica y no se ve recortado contra la
       tarjeta. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.historico-summary-table thead th[b-fwnge813hp] {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Fondo SÓLIDO (no rgba con alpha) — con transparencia, las filas que
       hacen scroll por debajo del encabezado sticky se ven a través. */
    background-color: #232f42;
    color: #f8fafc;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    border-bottom: 2px solid rgba(229, 185, 0, 0.35);
    white-space: nowrap;
}

.historico-summary-table thead th:first-child[b-fwnge813hp] {
    border-top-left-radius: 12px;
}

.historico-summary-table thead th:last-child[b-fwnge813hp] {
    border-top-right-radius: 12px;
}

.historico-summary-table tbody td[b-fwnge813hp] {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    vertical-align: middle;
}

.historico-summary-table tbody tr:last-child td:first-child[b-fwnge813hp] {
    border-bottom-left-radius: 12px;
}

.historico-summary-table tbody tr:last-child td:last-child[b-fwnge813hp] {
    border-bottom-right-radius: 12px;
}

.historico-summary-table tbody tr:hover[b-fwnge813hp] {
    background: rgba(255, 255, 255, 0.04);
}

.historico-summary-more[b-fwnge813hp] {
    text-align: center;
    padding: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── Celdas estilo "Inbox", con paleta dorada/oscura de Reportes ── */

.hs-cell[b-fwnge813hp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.hs-cell-asset[b-fwnge813hp] {
    justify-content: flex-start;
    text-align: left;
}

.hs-title[b-fwnge813hp] {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: #f8fafc;
    font-size: 0.8rem;
}

.hs-subtitle[b-fwnge813hp] {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 0.7rem;
    margin-top: 1px;
}

.hs-person-text[b-fwnge813hp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hs-thumb[b-fwnge813hp] {
    width: 46px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(15, 21, 33, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-thumb-img[b-fwnge813hp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-thumb-fallback[b-fwnge813hp] {
    color: rgba(248, 250, 252, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-order-count[b-fwnge813hp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(229, 185, 0, 0.20);
    color: #e5b900;
    font-weight: 800;
    font-size: 0.76rem;
}

.hs-calendar[b-fwnge813hp] {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 36px;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto;
}

.hs-calendar-header[b-fwnge813hp] {
    background: #f0c800;
    color: #1c2738;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
    padding: 1px 3px;
    line-height: 1.2;
}

.hs-calendar-body[b-fwnge813hp] {
    background: rgba(15, 21, 33, 0.6);
    color: #f8fafc;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 3px 2px;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.hs-permanence[b-fwnge813hp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(229, 185, 0, 0.16);
    border: 1px solid rgba(229, 185, 0, 0.22);
    color: #e5b900;
    font-weight: 600;
    font-size: 0.74rem;
    white-space: nowrap;
}
/* /Pages/Home/Components/Reportes/Components/Charts/Views/ProcessBottleneckChart.razor.rz.scp.css */
.custom-chart-scroll[b-6nkum9k6tj] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-6nkum9k6tj]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-6nkum9k6tj]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-6nkum9k6tj]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-6nkum9k6tj]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
@keyframes slideDown-b-6nkum9k6tj { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/StayDaysChart.razor.rz.scp.css */
.custom-chart-scroll[b-h1oilp2p0u] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-h1oilp2p0u]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-h1oilp2p0u]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-h1oilp2p0u]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-h1oilp2p0u]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/SuggestionAccuracyChart.razor.rz.scp.css */
.suggestion-accuracy-container[b-yzlczbbgl6] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', sans-serif;
}

.accuracy-cards-container[b-yzlczbbgl6] {
    padding: 10px 16px 0px 16px;
    width: 100%;
}

.accuracy-card[b-yzlczbbgl6] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    animation: slideDown-b-yzlczbbgl6 0.4s ease-out;
}

.expanded-cards .accuracy-card[b-yzlczbbgl6] {
    padding: 8px 12px;
}

.accuracy-card-icon[b-yzlczbbgl6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.process-icon[b-yzlczbbgl6] {
    background: #eff6ff;
    color: #1d4ed8;
}

.stakeholder-icon[b-yzlczbbgl6] {
    background: #f0fdf4;
    color: #15803d;
}

.accuracy-card-content[b-yzlczbbgl6] {
    display: flex;
    flex-direction: column;
}

.accuracy-card-title[b-yzlczbbgl6] {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.accuracy-card-value[b-yzlczbbgl6] {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.highlight-blue[b-yzlczbbgl6] {
    color: #1d4ed8;
}

.highlight-green[b-yzlczbbgl6] {
    color: #15803d;
}

.accuracy-card-subtitle[b-yzlczbbgl6] {
    color: #64748b;
    font-size: 11px;
}

.chart-wrapper[b-yzlczbbgl6] {
    flex: 1;
    min-height: 0;
}

.empty-state[b-yzlczbbgl6] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #ccc;
}

.view-toggle-container[b-yzlczbbgl6] {
    display: flex;
    justify-content: flex-start;
    margin: 0 16px 16px 16px;
}

.pill-toggle[b-yzlczbbgl6] {
    display: flex;
    background: #e2e8f0;
    border-radius: 9999px;
    padding: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pill-button[b-yzlczbbgl6] {
    background: transparent;
    border: none;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill-button:hover[b-yzlczbbgl6] {
    color: #334155;
}

.pill-button.active[b-yzlczbbgl6] {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Expanded Dark Mode Styles */
.expanded-cards .accuracy-card[b-yzlczbbgl6] {
    background: #1e293b;
    border-color: #334155;
}

.expanded-cards .accuracy-card-title[b-yzlczbbgl6] {
    color: #f8fafc;
}

.expanded-cards .accuracy-card-subtitle[b-yzlczbbgl6] {
    color: #94a3b8;
}

.expanded-cards .process-icon[b-yzlczbbgl6] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.expanded-cards .stakeholder-icon[b-yzlczbbgl6] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.expanded-cards .highlight-blue[b-yzlczbbgl6] {
    color: #60a5fa;
}

.expanded-cards .highlight-green[b-yzlczbbgl6] {
    color: #4ade80;
}

@keyframes slideDown-b-yzlczbbgl6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-chart-scroll[b-yzlczbbgl6] {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 5px;
}

.custom-chart-scroll[b-yzlczbbgl6]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-chart-scroll[b-yzlczbbgl6]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.custom-chart-scroll[b-yzlczbbgl6]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.custom-chart-scroll[b-yzlczbbgl6]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}
/* /Pages/Home/Components/Reportes/Components/Charts/Views/TopWaitingPartsChart.razor.rz.scp.css */
.custom-chart-scroll[b-rn7z9vqp9n]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

.empty-state-container[b-rn7z9vqp9n] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    margin: 10px;
}

.empty-state-icon[b-rn7z9vqp9n] {
    color: #3b82f6;
    margin-bottom: 16px;
    opacity: 0.8;
}

.empty-state-title[b-rn7z9vqp9n] {
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-text[b-rn7z9vqp9n] {
    color: #94a3b8;
    font-size: 0.9rem;
    max-width: 250px;
    line-height: 1.5;
}
/* /Pages/Home/Components/Reportes/Components/Charts/Views/UserAdoptionChart.razor.rz.scp.css */
.custom-chart-scroll[b-1ycko3u023] {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 5px;
}

.custom-chart-scroll[b-1ycko3u023]::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-chart-scroll[b-1ycko3u023]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-1ycko3u023]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-1ycko3u023]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

.ua-ranking-card[b-1ycko3u023] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ua-ranking-card:hover[b-1ycko3u023] {
    background: rgba(255, 255, 255, 0.03);
}

.ua-seg[b-1ycko3u023] {
    position: relative;
    height: 100%;
}

.ua-seg-tip[b-1ycko3u023] {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
    border: 1px solid #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ua-seg:hover .ua-seg-tip[b-1ycko3u023] {
    opacity: 1;
}
/* /Pages/Home/Components/Reportes/Components/Charts/Views/WorkloadByOperatorChart.razor.rz.scp.css */
.custom-chart-scroll[b-1arm4j5vht] {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 5px;
}
.custom-chart-scroll[b-1arm4j5vht]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-1arm4j5vht]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-1arm4j5vht]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-1arm4j5vht]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/WorkloadByProcessChart.razor.rz.scp.css */
.custom-chart-scroll[b-odin7mbg8l] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-odin7mbg8l]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-odin7mbg8l]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-odin7mbg8l]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-odin7mbg8l]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Charts/Views/WorkshopStateChart.razor.rz.scp.css */
.custom-chart-scroll[b-xdfayq8oc7] { width: 100%; height: 100%; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; }
.custom-chart-scroll[b-xdfayq8oc7]::-webkit-scrollbar { height: 6px; }
.custom-chart-scroll[b-xdfayq8oc7]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.custom-chart-scroll[b-xdfayq8oc7]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.custom-chart-scroll[b-xdfayq8oc7]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
/* /Pages/Home/Components/Reportes/Components/Grids/ColumnOptionsPanel.razor.rz.scp.css */
.column-options-container[b-x5vgbg3xrz] {
    padding: 1rem;
    color: #cbd5e1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.options-desc[b-x5vgbg3xrz] {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: #94a3b8;
}

.active-columns-list[b-x5vgbg3xrz] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.column-row[b-x5vgbg3xrz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.column-row:hover[b-x5vgbg3xrz] {
    background-color: rgba(255, 255, 255, 0.03);
}

.column-row.dragging[b-x5vgbg3xrz] {
    opacity: 0.5;
}

.column-row.drag-target[b-x5vgbg3xrz] {
    border-top: 2px solid #38bdf8;
}

.drag-handle[b-x5vgbg3xrz] {
    cursor: grab;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.drag-handle:active[b-x5vgbg3xrz] {
    cursor: grabbing;
}

.drag-handle:hover[b-x5vgbg3xrz] {
    color: #cbd5e1;
}

.field-select[b-x5vgbg3xrz] {
    flex: 1;
    background-color: transparent;
    border: 1px solid rgba(71, 85, 105, 0.4);
    color: #f8fafc;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    appearance: none; /* remove default arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.field-select:focus[b-x5vgbg3xrz] {
    border-color: #38bdf8;
}

.field-select option[b-x5vgbg3xrz] {
    background-color: #1e293b;
    color: #f8fafc;
}

.row-actions[b-x5vgbg3xrz] {
    display: flex;
    align-items: center;
}

.action-btn[b-x5vgbg3xrz] {
    background: transparent;
    border: none;
    color: #ef4444; /* red icon for remove */
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0.7;
    transition: all 0.2s;
}

.action-btn:hover[b-x5vgbg3xrz] {
    opacity: 1;
    background-color: rgba(239, 68, 68, 0.1);
}

.row-divider[b-x5vgbg3xrz] {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    margin: 0;
}

.add-section[b-x5vgbg3xrz] {
    margin-bottom: 2rem;
}

.add-col-btn[b-x5vgbg3xrz] {
    background: transparent;
    border: none;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.add-col-btn:hover:not(:disabled)[b-x5vgbg3xrz] {
    background-color: rgba(56, 189, 248, 0.1);
}

.add-col-btn:disabled[b-x5vgbg3xrz] {
    color: #64748b;
    cursor: not-allowed;
}

.footer-actions[b-x5vgbg3xrz] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
}

.btn-cancel[b-x5vgbg3xrz], .btn-primary[b-x5vgbg3xrz] {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel[b-x5vgbg3xrz] {
    background: transparent;
    border: 1px solid rgba(71, 85, 105, 0.4);
    color: #94a3b8;
}

.btn-cancel:hover[b-x5vgbg3xrz] {
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
}

.btn-primary[b-x5vgbg3xrz] {
    background: #38bdf8;
    border: 1px solid #38bdf8;
    color: #0f172a;
    font-weight: 600;
}

.btn-primary:hover[b-x5vgbg3xrz] {
    background: #0ea5e9;
    border-color: #0ea5e9;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/BottleneckGrid.razor.rz.scp.css */
.bottleneck-grid-host[b-joanmg8emh] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-joanmg8emh] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-joanmg8emh] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-joanmg8emh] .ag-header-cell:last-child::after,
[b-joanmg8emh] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-joanmg8emh] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-joanmg8emh] .ag-row,
[b-joanmg8emh] .ag-row .ag-cell,
[b-joanmg8emh] .ag-row-odd,
[b-joanmg8emh] .ag-row-even {
    border: none !important;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/DiasPerdidosGrid.razor.rz.scp.css */
.dias-perdidos-grid-host[b-oa6irjswef] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-oa6irjswef] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-oa6irjswef] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-oa6irjswef] .ag-header-cell:last-child::after,
[b-oa6irjswef] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-oa6irjswef] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-oa6irjswef] .ag-row,
[b-oa6irjswef] .ag-row .ag-cell,
[b-oa6irjswef] .ag-row-odd,
[b-oa6irjswef] .ag-row-even {
    border: none !important;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/HistoricoVehiculosGrid.razor.rz.scp.css */
.historico-table-wrap[b-yem3zp2pvl] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.historico-table-toolbar[b-yem3zp2pvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.historico-table-filters[b-yem3zp2pvl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector {
    width: auto;
    min-width: 168px;
    min-height: 34px;
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector-trigger {
    height: 34px;
    border-radius: 999px;
    padding: 0 32px 0 14px;
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector-value {
    font-size: 0.78rem;
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector.dark .st-native-selector-trigger {
    background: rgba(15, 21, 33, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector.dark:hover .st-native-selector-trigger,
.historico-table-filters[b-yem3zp2pvl]  .st-native-selector.dark.is-open .st-native-selector-trigger {
    border-color: #e5b900;
    box-shadow: 0 0 0 2px rgba(229, 185, 0, 0.25);
}

.historico-table-filters[b-yem3zp2pvl]  .st-native-selector.is-disabled .st-native-selector-trigger {
    opacity: 0.5;
}

.historico-table-actions[b-yem3zp2pvl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.historico-toolbar-btn[b-yem3zp2pvl] {
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.historico-toolbar-btn:hover:not(:disabled)[b-yem3zp2pvl] {
    border-color: rgba(229, 185, 0, 0.5);
    color: #f8fafc;
}

.historico-toolbar-btn:disabled[b-yem3zp2pvl] {
    opacity: 0.4;
    cursor: not-allowed;
}

.historico-toolbar-btn.is-hidden[b-yem3zp2pvl] {
    display: none;
}

.historico-toolbar-btn.primary[b-yem3zp2pvl] {
    background: #e5b900;
    border-color: #e5b900;
    color: #1c2738;
}

.historico-toolbar-btn.primary:hover:not(:disabled)[b-yem3zp2pvl] {
    background: #f0c800;
    border-color: #f0c800;
}

.historico-metric-pill[b-yem3zp2pvl] {
    background: rgba(229, 185, 0, 0.14);
    color: #f8fafc;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.historico-table-grid-shell[b-yem3zp2pvl] {
    position: relative;
    flex: 1;
    min-height: 320px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 21, 33, 0.35);
    overflow: hidden;
}

.historico-table-grid[b-yem3zp2pvl] {
    width: 100%;
    height: 100%;
}

.historico-table-no-rows-overlay[b-yem3zp2pvl],
.historico-table-loading-overlay[b-yem3zp2pvl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.85rem;
    background: rgba(15, 21, 33, 0.55);
    backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 5;
}

.historico-table-loading-overlay[b-yem3zp2pvl] {
    flex-direction: column;
    pointer-events: all;
}

.historico-table-loading-spinner[b-yem3zp2pvl] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(229, 185, 0, 0.2);
    border-top-color: #e5b900;
    animation: historico-spin-b-yem3zp2pvl 0.8s linear infinite;
}

@keyframes historico-spin-b-yem3zp2pvl {
    to { transform: rotate(360deg); }
}

/* ── Estructura de celdas del grid (portada de AssetInventoriesPanel.razor.css) ──
   Los renderers JS reutilizados del Inbox (permanenceRenderer/etc.)
   producen las mismas clases .st-inbox-*, pero ese CSS vive scoped al componente
   del Inbox (Blazor CSS isolation) y no llega hasta aquí. Se porta el layout tal
   cual y se reemplaza la paleta azul/clara del Inbox por la dorada/oscura de
   Reportes (mismos tamaños y estructura, "familia visual" distinta). */

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row) {
    /* Las filas de detalle usan overflow:visible y quedan en z-index:0 (más abajo).
       Sin esto, el orden de pintado durante el scroll virtualizado de AG-Grid no es
       confiable, y el contenido del detalle puede asomarse por encima de la fila del
       vehículo siguiente al reciclar filas. */
    z-index: 1 !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    right: 0;
    background: rgba(31, 47, 69, 0.98);
    border-radius: 10px;
    border-left: 1px solid rgba(229, 185, 0, 0.14);
    border-right: 1px solid rgba(229, 185, 0, 0.14);
    z-index: -1;
    pointer-events: none;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row[aria-expanded="true"]:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    bottom: -3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row-hover:not(.ag-details-row):not(.st-inbox-detail-row)::before {
    background: rgba(43, 61, 87, 0.98);
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row-hover {
    background: transparent !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.ag-details-row,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.st-inbox-detail-row {
    cursor: default;
    border-bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin-top: -3px !important;
    z-index: 0 !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.ag-details-row .ag-cell,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.st-inbox-detail-row .ag-cell {
    margin: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 8px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.ag-details-row .ag-cell-wrapper,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.ag-details-row .ag-cell-value,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.st-inbox-detail-row .ag-cell-wrapper,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row.st-inbox-detail-row .ag-cell-value {
    justify-content: stretch;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row) .ag-cell.ag-column-first,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-row:not(.ag-details-row):not(.st-inbox-detail-row) .ag-cell.ag-column-last {
    border: none !important;
    box-shadow: none !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-asset-left .st-inbox-cell {
    justify-content: flex-start;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-asset-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-wrap2 .ag-cell-wrapper,
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-wrap2 .ag-cell-value {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-wrap2 .ag-cell-value {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center !important;
    line-height: 1.15;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-asset-left .st-inbox-cell-text {
    align-items: flex-start;
    text-align: left;
    flex: 0 0 auto;
    overflow: hidden;
    width: 140px;
    max-width: 140px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* El texto de Cumplimiento cambia de largo por fila ("Cumplió" vs "Cumplió con
   cambios") — con justify-content:center el grupo icono+texto se corre de
   posición entre filas. Alineado a la izquierda para que el icono quede fijo. */
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .ag-cell.st-inbox-col-compliance {
    justify-content: flex-start !important;
    padding-left: 14px !important;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-cell-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    gap: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-cell-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(0.76rem, 0.72rem + 0.18vw, 0.92rem);
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.15;
    margin-bottom: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-cell-subtitle {
    display: -webkit-box;
    font-size: clamp(0.66rem, 0.62rem + 0.12vw, 0.78rem);
    color: #94a3b8;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    margin-top: 1px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-cell-asset {
    gap: 18px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-image {
    width: 85px;
    height: 55px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(15, 21, 33, 0.5);
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-avatar-wrapper {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-avatar-wrapper.st-inbox-asset-thumb {
    width: 66px;
    height: 44px;
    border-radius: 11px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-thumb {
    position: relative;
    overflow: visible;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-image-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-placeholder-icon {
    width: 36%;
    height: 36%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    opacity: 0.6;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-progress-chip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    top: auto;
    transform: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    line-height: 1.2;
    z-index: 2;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-thumb > .st-inbox-progress-chip {
    right: -24px;
    bottom: 0px;
    padding: 4px 12px;
    font-size: 0.68rem;
    z-index: 3;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-cell-order .st-inbox-progress-chip.st-inbox-subtable-progress-chip {
    position: static;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-orders-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(229, 185, 0, 0.20);
    color: #e5b900;
    font-size: 0.76rem;
    font-weight: 800;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-permanence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(229, 185, 0, 0.16);
    border: 1px solid rgba(229, 185, 0, 0.22);
    color: #e5b900;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-repair-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(229, 185, 0, 0.16);
    border: 1px solid rgba(229, 185, 0, 0.22);
    color: #e5b900;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-calendar {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 40px;
    border-radius: 7px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-calendar-header {
    background: #f0c800;
    color: #1c2738;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: center;
    padding: 1px 3px;
    line-height: 1.2;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-calendar-body {
    background: rgba(15, 21, 33, 0.6);
    color: #f8fafc;
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 3px 2px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

/* ── Subtabla de órdenes (expandida al hacer clic en una fila) ── */
.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-host {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-wrap {
    width: var(--st-inbox-row-width, 100%);
    max-width: var(--st-inbox-row-width, 100%);
    min-width: 0;
    margin: 0;
    padding: 16px 10px 8px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-grid {
    display: grid;
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-block > * {
    flex: 1;
    min-width: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-header {
    margin-bottom: 7px;
    background: transparent;
    border-radius: 8px;
    padding: 7px 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-pill {
    min-height: 0;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(229, 185, 0, 0.20);
    box-shadow: none;
    color: #eae6da;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid rgba(229, 185, 0, 0.14);
    background: rgba(15, 21, 33, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) inset;
    box-sizing: border-box;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-row + .st-inbox-subtable-row {
    padding-top: 6px;
    border-top: 1px solid rgba(229, 185, 0, 0.1);
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-row {
    color: #f8fafc;
    font-size: 0.79rem;
    font-weight: 600;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-cell {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    padding: 0 4px;
    box-sizing: border-box;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-value {
    display: -webkit-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.12;
    text-align: center;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-cell-order {
    font-weight: 800;
    color: #f8fafc;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-order-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-order-number {
    font-weight: 800;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-progress-chip {
    position: static;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-person {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-avatar-wrap {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-avatar-fallback {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e5b900;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-advisor-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    gap: 1px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-advisor-doc {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-advisor-name {
    font-size: 0.8rem;
    color: #f8fafc;
    font-weight: 700;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    max-width: 100%;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3d5676;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 750;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-cell-stat {
    overflow: visible;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #252319;
    border: 1px solid rgba(245, 184, 0, 0.15);
    color: #e5b900;
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-process-btn {
    appearance: none;
    outline: none;
    background: rgba(229, 185, 0, 0.12);
    border: 1px solid rgba(229, 185, 0, 0.20);
    color: #eae6da;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-process-btn:hover {
    background: rgba(229, 185, 0, 0.20);
    border-color: rgba(229, 185, 0, 0.35);
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-stat-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #f0c800;
    color: #1c2738;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    border: 2px solid #1c2738;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar-wrap {
    width: 48px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar-fallback {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.88rem;
    font-weight: 700;
    color: #e5b900;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-block {
        gap: 4px;
        padding: 0 2px;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-row {
        font-size: 0.72rem;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-pill {
        font-size: 0.65rem;
        padding: 0 6px;
        min-height: 20px;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-avatar,
    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-avatar-wrap {
        width: 28px;
        height: 28px;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar-wrap,
    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar,
    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-subtable-insurance-avatar-fallback {
        width: 38px;
        height: 28px;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-asset-image {
        width: 60px;
        height: 40px;
    }

    .historico-table-grid.inbox-table-grid[b-yem3zp2pvl]  .st-inbox-avatar-wrapper.st-inbox-asset-thumb {
        width: 50px;
        height: 34px;
    }
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/PromesaChangesPanel.razor.rz.scp.css */
.promesa-changes-panel[b-g8qhg5ifmm] {
    padding: 8px 4px;
    color: #f8fafc;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.promesa-changes-loading[b-g8qhg5ifmm],
.promesa-changes-empty[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 12px;
    color: #94a3b8;
    font-size: 14px;
}

.promesa-changes-spinner[b-g8qhg5ifmm] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(229, 185, 0, 0.25);
    border-top-color: #e5b900;
    animation: promesa-changes-spin-b-g8qhg5ifmm 0.8s linear infinite;
}

@keyframes promesa-changes-spin-b-g8qhg5ifmm {
    to { transform: rotate(360deg); }
}

.promesa-changes-subtitle[b-g8qhg5ifmm] {
    margin: 0 0 12px;
    font-size: 13px;
    color: #94a3b8;
}

.promesa-changes-count-badge[b-g8qhg5ifmm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60a5fa;
    font-size: 13px;
    font-weight: 600;
}

.promesa-changes-list[b-g8qhg5ifmm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.promesa-change-item[b-g8qhg5ifmm] {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.promesa-change-header[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.promesa-change-heading[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promesa-change-index[b-g8qhg5ifmm] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(229, 185, 0, 0.15);
    border: 1px solid rgba(229, 185, 0, 0.4);
    color: #e5b900;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.promesa-change-title[b-g8qhg5ifmm] {
    font-size: 14px;
    font-weight: 600;
}

.promesa-change-meta-group[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.promesa-change-meta-item[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
}

.promesa-change-meta-text[b-g8qhg5ifmm] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.promesa-change-meta-label[b-g8qhg5ifmm] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.promesa-change-meta-value[b-g8qhg5ifmm] {
    font-size: 12px;
    color: #cbd5e1;
}

.promesa-change-toggle[b-g8qhg5ifmm] {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.promesa-change-toggle.expanded[b-g8qhg5ifmm] {
    transform: rotate(180deg);
}

.promesa-change-compare[b-g8qhg5ifmm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fila propia para los títulos: así comparten la misma línea base sin depender
   de la altura del contenido de cada columna. El spacer imita el ancho+gaps
   de la flecha para que cada título quede sobre su columna. */
.promesa-change-titles[b-g8qhg5ifmm] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.promesa-change-arrow-spacer[b-g8qhg5ifmm] {
    flex: none;
    width: 28px;
}

.promesa-change-facts-row[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.promesa-change-column[b-g8qhg5ifmm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.promesa-change-column-title[b-g8qhg5ifmm] {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.promesa-change-arrow[b-g8qhg5ifmm] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

.promesa-change-fact[b-g8qhg5ifmm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.promesa-change-fact--suggested[b-g8qhg5ifmm] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.25);
    color: #60a5fa;
}

.promesa-change-fact--confirmed[b-g8qhg5ifmm] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #22c55e;
}

.promesa-change-fact-text[b-g8qhg5ifmm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promesa-change-label[b-g8qhg5ifmm] {
    font-size: 11px;
    color: inherit;
    opacity: 0.85;
}

.promesa-change-value[b-g8qhg5ifmm] {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
}

.promesa-change-fact--suggested .promesa-change-value[b-g8qhg5ifmm],
.promesa-change-fact--confirmed .promesa-change-value[b-g8qhg5ifmm] {
    color: inherit;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/StayDaysGrid.razor.rz.scp.css */
.stay-days-grid-host[b-9ioleujf72] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-9ioleujf72] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-9ioleujf72] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-9ioleujf72] .ag-header-cell:last-child::after,
[b-9ioleujf72] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-9ioleujf72] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-9ioleujf72] .ag-row,
[b-9ioleujf72] .ag-row .ag-cell,
[b-9ioleujf72] .ag-row-odd,
[b-9ioleujf72] .ag-row-even {
    border: none !important;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/WaitingPartsDetailsGrid.razor.rz.scp.css */
.waiting-parts-grid-host[b-raf6b7l60x] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-raf6b7l60x] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-raf6b7l60x] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-raf6b7l60x] .ag-header-cell:last-child::after,
[b-raf6b7l60x] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-raf6b7l60x] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-raf6b7l60x] .ag-row,
[b-raf6b7l60x] .ag-row .ag-cell,
[b-raf6b7l60x] .ag-row-odd,
[b-raf6b7l60x] .ag-row-even {
    border: none !important;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/WorkloadByOperatorDetailsGrid.razor.rz.scp.css */
.wbo-detail-table[b-qt9qme8phk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
}

.wbo-detail-table thead tr[b-qt9qme8phk] {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wbo-detail-table th[b-qt9qme8phk] {
    padding: 8px 12px;
    text-align: left;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.wbo-detail-table th:nth-child(3)[b-qt9qme8phk] { text-align: right; }

.wbo-detail-table tbody tr[b-qt9qme8phk] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.wbo-detail-table tbody tr:hover[b-qt9qme8phk] {
    background: rgba(59, 130, 246, 0.06);
}

.wbo-detail-table td[b-qt9qme8phk] {
    padding: 8px 12px;
    color: #e2e8f0;
    vertical-align: middle;
}

.wbo-badge-placa[b-qt9qme8phk] {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/WorkloadByOperatorGrid.razor.rz.scp.css */
.workload-operator-grid-host[b-9rgzft5248] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-9rgzft5248] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-9rgzft5248] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-9rgzft5248] .ag-header-cell:last-child::after,
[b-9rgzft5248] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-9rgzft5248] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-9rgzft5248] .ag-row,
[b-9rgzft5248] .ag-row .ag-cell,
[b-9rgzft5248] .ag-row-odd,
[b-9rgzft5248] .ag-row-even {
    border: none !important;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/WorkloadByProcessDetailsGrid.razor.rz.scp.css */
.wbp-detail-table[b-alykrntcoh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
}

.wbp-detail-table thead tr[b-alykrntcoh] {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wbp-detail-table th[b-alykrntcoh] {
    padding: 8px 12px;
    text-align: left;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.wbp-detail-table th:nth-child(3)[b-alykrntcoh] { text-align: right; }

.wbp-detail-table tbody tr[b-alykrntcoh] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.wbp-detail-table tbody tr:hover[b-alykrntcoh] {
    background: rgba(16, 185, 129, 0.06);
}

.wbp-detail-table td[b-alykrntcoh] {
    padding: 8px 12px;
    color: #e2e8f0;
    vertical-align: middle;
}

.wbp-badge-placa[b-alykrntcoh] {
    display: inline-block;
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* /Pages/Home/Components/Reportes/Components/Grids/Views/WorkloadByProcessGrid.razor.rz.scp.css */
.workload-process-grid-host[b-xuf8ipenb6] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    --ag-header-foreground-color: #f8fafc;
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-xuf8ipenb6] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-xuf8ipenb6] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

[b-xuf8ipenb6] .ag-header-cell:last-child::after,
[b-xuf8ipenb6] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-xuf8ipenb6] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

[b-xuf8ipenb6] .ag-row,
[b-xuf8ipenb6] .ag-row .ag-cell,
[b-xuf8ipenb6] .ag-row-odd,
[b-xuf8ipenb6] .ag-row-even {
    border: none !important;
}

/* /Pages/Home/Components/Reportes/Components/Grids/Views/WorkshopStateGrid.razor.rz.scp.css */
.workshop-state-grid-host[b-7r1ahv4wit] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    --ag-background-color: transparent;
    --ag-header-background-color: rgba(59, 130, 246, 0.15);
    /* Subtle blue tint */
    --ag-header-foreground-color: #f8fafc;
    /* Much brighter text */
    --ag-foreground-color: #cbd5e1;
    --ag-row-hover-color: rgba(51, 65, 85, 0.5);
    --ag-border-color: rgba(71, 85, 105, 0.3);
    --ag-secondary-border-color: rgba(71, 85, 105, 0.15);
    --ag-odd-row-background-color: rgba(15, 23, 42, 0.25);
    --ag-row-border-color: transparent;
    --ag-font-size: 13px;
    --ag-font-family: 'Segoe UI', 'Inter', sans-serif;
    --ag-header-height: 38px;
    --ag-row-height: 38px;
    --ag-borders: none;
    --ag-wrapper-border-radius: 8px;
}

[b-7r1ahv4wit] .ag-header-cell-label {
    justify-content: center;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

[b-7r1ahv4wit] .ag-header-cell:first-child .ag-header-cell-label {
    justify-content: flex-start;
}

/* Ocultar barra separadora de la última columna */
[b-7r1ahv4wit] .ag-header-cell:last-child::after,
[b-7r1ahv4wit] .ag-header-cell:last-child .ag-header-cell-resize {
    display: none !important;
}

[b-7r1ahv4wit] .ag-root-wrapper {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Forzar la eliminación de la línea que separa cada fila */
[b-7r1ahv4wit] .ag-row,
[b-7r1ahv4wit] .ag-row .ag-cell,
[b-7r1ahv4wit] .ag-row-odd,
[b-7r1ahv4wit] .ag-row-even {
    border: none !important;
}

/* Column Chooser styles → ver chart-grid-filters.css (.workshop-state-grid-host) */
/* /Pages/Home/Components/Reportes/ReportCatalogSidebar.razor.rz.scp.css */
.reportes-panel[b-m4izttxsz5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    /* Restaurado para posicionamiento del pseudo-elemento de edición */
}

/* Estilos de posicionamiento ahora gestionados por LeftSidebar */

.reportes-scrollable-content[b-m4izttxsz5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25px 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reportes-title-header[b-m4izttxsz5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 35px;
    /* Ajuste para alinear con el gridstack que tiene 10px de margen */
    padding-right: 50px;
    /* Precise alignment with chart card edges */
    position: relative;
    z-index: 20;
}

.reportes-title-header h2[b-m4izttxsz5] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Slate-200 */
    text-transform: capitalize;
    letter-spacing: 0.05em;
    font-family: 'Segoe UI', sans-serif;
}

.header-divider[b-m4izttxsz5] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    /* Mucho más visible (0.4 opacity) */
    margin: 5px 0 25px 0;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    opacity: 0.8;
    /* Asegurar visibilidad global */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Sombra para darle relieve */
}


.reportes-actions[b-m4izttxsz5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.action-buttons-group[b-m4izttxsz5] {
    display: flex;
    gap: 8px;
    padding: 0;
}

.action-btn[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    /* Pill shape */
    background: rgba(30, 41, 59, 0.82);
    /* Dark slate background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-btn i[b-m4izttxsz5],
.action-btn svg[b-m4izttxsz5] {
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.action-btn:hover[b-m4izttxsz5] {
    transform: translateY(-2px);
    border-color: rgba(211, 59, 178, 0.5);
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.action-btn:hover i[b-m4izttxsz5],
.action-btn:hover svg[b-m4izttxsz5] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn.refresh-btn[b-m4izttxsz5] {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.action-btn.refresh-btn i[b-m4izttxsz5],
.action-btn.refresh-btn svg[b-m4izttxsz5] {
    color: rgba(255, 255, 255, 0.7) !important;
    filter: none;
    transition: all 0.3s ease;
}

.action-btn.refresh-btn:hover i[b-m4izttxsz5],
.action-btn.refresh-btn:hover svg[b-m4izttxsz5] {
    color: #D33BB2 !important;
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
    /* Explicitly keep the rotation for the refresh icon only on hover */
    transform: scale(1.1) rotate(15deg);
}

.action-btn.active[b-m4izttxsz5] {
    background: rgba(30, 41, 59, 0.82) !important;
    border-color: #D33BB2;
    color: #fff;
    box-shadow: 0 0 15px rgba(211, 59, 178, 0.4);
    outline: none !important;
}

.action-btn.active i[b-m4izttxsz5],
.action-btn.active svg[b-m4izttxsz5] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn:disabled[b-m4izttxsz5],
.action-btn[disabled][b-m4izttxsz5] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(30, 41, 59, 0.82) !important;
    color: #ffffff !important;
    opacity: 0.5 !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-btn:hover[b-m4izttxsz5] {
    transform: translateY(-2px) scale(1.02);
}


/* ── Grilla de gráficas disponibles ── */

.graficas-grid[b-m4izttxsz5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px 10px 0;
}

.graficas-grid[b-m4izttxsz5]::-webkit-scrollbar {
    width: 6px;
}

.graficas-grid[b-m4izttxsz5]::-webkit-scrollbar-track {
    background: transparent;
}

.graficas-grid[b-m4izttxsz5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.agregar-btn[b-m4izttxsz5] {
    margin-top: 15px;
    padding: 12px;
    align-self: flex-start;
    background: #D33BB2;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.agregar-btn:hover[b-m4izttxsz5] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}



/* ── Estilos de filtros ── */

.filtro-section[b-m4izttxsz5] {
    margin-bottom: 20px;
}

.filtro-section label[b-m4izttxsz5] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-m4izttxsz5] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-m4izttxsz5] .filtro-input {
    flex: 1;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-m4izttxsz5] {
    width: 100%;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

/* FILTER CHIPS */
.filter-chips-container[b-m4izttxsz5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 0 0 0 5px;
    animation: fadeIn-b-m4izttxsz5 0.4s ease-out;
}

.modal-filter-chips[b-m4izttxsz5] {
    padding: 10px 0;
    margin-bottom: 5px;
}

.filter-chip[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(211, 59, 178, 0.1);
    /* Magenta BG */
    border: 1px solid rgba(211, 59, 178, 0.2);
    border-radius: 20px;
    color: #E88AD4;
    /* Light Magenta */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    cursor: default;
}

.filter-chip:hover[b-m4izttxsz5] {
    background: rgba(211, 59, 178, 0.15);
    border-color: rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.1);
}

.filter-chip-label[b-m4izttxsz5] {
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 9px;
    margin-right: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.filter-chip-value[b-m4izttxsz5] {
    color: #f8fafc;
}

/* Specific Chip Colors matched from user screenshot */
.chip-period[b-m4izttxsz5] {
    background: linear-gradient(135deg, #e5b900 0%, #e5b900 100%) !important;
    border: none !important;
    color: #1a365d !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.15);
}

.chip-period .filter-chip-label[b-m4izttxsz5],
.chip-period .filter-chip-value[b-m4izttxsz5],
.chip-period .remove-filter-btn[b-m4izttxsz5] {
    color: #1a365d !important;
    opacity: 1 !important;
}

.chip-time[b-m4izttxsz5] {
    background: #1e293b !important;
    /* Branded Dark Slate Blue */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chip-time .filter-chip-label[b-m4izttxsz5] {
    color: rgba(255, 255, 255, 0.6) !important;
}

.chip-time .filter-chip-value[b-m4izttxsz5],
.chip-time .remove-filter-btn[b-m4izttxsz5] {
    color: #f8fafc !important;
}

.chip-comparison[b-m4izttxsz5] {
    background: rgba(211, 59, 178, 0.15) !important;
    border-color: rgba(211, 59, 178, 0.4) !important;
    color: #E88AD4 !important;
}

/* BLOCKED/DISABLED STATE */
.chip-disabled[b-m4izttxsz5] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    pointer-events: none;
    /* Disables all interactions including hover and clicks */
}

.chip-disabled .remove-filter-btn[b-m4izttxsz5] {
    display: none !important;
    /* Hide the X button when blocked */
}

.remove-filter-btn[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.remove-filter-btn:hover[b-m4izttxsz5] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    transform: rotate(90deg);
}

@keyframes fadeIn-b-m4izttxsz5 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filtro-toggle-row[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-m4izttxsz5] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-m4izttxsz5] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-m4izttxsz5] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-m4izttxsz5] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-m4izttxsz5] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-m4izttxsz5] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

/* AZURE-STYLE CATALOG ITEMS */
.azure-catalog-item:not(.ui-draggable-dragging)[b-m4izttxsz5] {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 80px;
    display: block !important;
    /* Reset gridstack absolute positioning for the sidebar only */
    top: auto !important;
    left: auto !important;
}

.azure-catalog-content[b-m4izttxsz5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid transparent !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.azure-catalog-content:active[b-m4izttxsz5] {
    cursor: grabbing;
    transform: scale(0.98);
}

.azure-catalog-content:hover[b-m4izttxsz5] {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-left-color: #D33BB2 !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    transform: translateX(4px) translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(211, 59, 178, 0.15);
}

.azure-catalog-item.selected-chart .azure-catalog-content[b-m4izttxsz5] {
    border: 1px solid #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.4), 0 10px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.azure-thumbnail[b-m4izttxsz5] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.azure-thumbnail img[b-m4izttxsz5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.azure-thumbnail span[b-m4izttxsz5] {
    font-size: 24px;
}

.azure-info[b-m4izttxsz5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.azure-title[b-m4izttxsz5] {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    letter-spacing: 0.3px;
}

.azure-desc[b-m4izttxsz5] {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-stack .grafica-option:hover[b-m4izttxsz5] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-m4izttxsz5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-m4izttxsz5 0.3s ease-out;
}




.filtro-section label[b-m4izttxsz5] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-m4izttxsz5] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-m4izttxsz5] .filtro-input {
    flex: 1;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-m4izttxsz5] {
    width: 100%;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.filtro-toggle-row[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-m4izttxsz5] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-m4izttxsz5] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-m4izttxsz5] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-m4izttxsz5] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-m4izttxsz5] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-m4izttxsz5] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

.graficas-sidebar[b-m4izttxsz5]  .reporte-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    height: auto !important;
    gap: 8px;
    transition: all 0.2s ease;
}


.graficas-sidebar[b-m4izttxsz5]  .reporte-card:hover {
    border-color: #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.graficas-sidebar[b-m4izttxsz5]  .card-header {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.graficas-sidebar[b-m4izttxsz5]  .card-header h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    text-transform: none !important;
    text-align: left;
}


.graficas-sidebar[b-m4izttxsz5]  .card-content {
    order: 1 !important;
    width: 100%;
    height: 100px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    border: none !important;
    flex: none !important;
}


.graficas-sidebar[b-m4izttxsz5]  .card-options {
    display: none !important;
}

.grid-stack .grafica-option:hover[b-m4izttxsz5] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-m4izttxsz5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-m4izttxsz5 0.3s ease-out;
}

/* Contenido del Modal estilo Glass/Dark */
.modal-content[b-m4izttxsz5] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    width: 96%;
    max-width: 1600px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUpModal-b-m4izttxsz5 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo superior en el modal */
.modal-content[b-m4izttxsz5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

@keyframes fadeInOverlay-b-m4izttxsz5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-m4izttxsz5 {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-m4izttxsz5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h3[b-m4izttxsz5] {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-modal-btn[b-m4izttxsz5] {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    font-weight: bold;
}

.close-modal-btn:hover[b-m4izttxsz5] {
    background: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.modal-body[b-m4izttxsz5] {
    flex: 1;
    overflow-y: auto;
    color: #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
}

.close-panel-btn[b-m4izttxsz5] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    backdrop-filter: blur(12px);
    /* Standardized blur to match action buttons */
}

.close-panel-btn i[b-m4izttxsz5],
.close-panel-btn svg[b-m4izttxsz5] {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.close-panel-btn:hover[b-m4izttxsz5] {
    background: transparent;
    border-color: transparent;
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
}

.close-panel-btn:hover i[b-m4izttxsz5],
.close-panel-btn:hover svg[b-m4izttxsz5] {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Estilos para el select de tipo de gráfica (migrado de ReporteCard) */
.chart-select[b-m4izttxsz5] {
    background-color: rgba(30, 41, 59, 0.7);
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 50px;
    text-overflow: ellipsis;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 8px center;
    background-size: 14px;
}

.chart-select:hover[b-m4izttxsz5] {
    background: linear-gradient(to bottom, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);

}

.chart-select:focus[b-m4izttxsz5] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.chart-select option[b-m4izttxsz5] {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 12px;
}

/* Empty State (sin tenant) */
.reportes-empty-state[b-m4izttxsz5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
}

.empty-state-icon[b-m4izttxsz5] {
    color: rgba(148, 163, 184, 0.4);
    margin-bottom: 4px;
}

.empty-state-text[b-m4izttxsz5] {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
}

/* Loading Indicator */
.reportes-loading-overlay[b-m4izttxsz5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.reportes-spinner[b-m4izttxsz5] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #D33BB2;
    border-radius: 50%;
    animation: spin-b-m4izttxsz5 0.8s linear infinite;
}

.reportes-loading-text[b-m4izttxsz5] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.03em;
    animation: pulse-b-m4izttxsz5 1.5s ease-in-out infinite;
}

@keyframes spin-b-m4izttxsz5 {
    to {
        transform: rotate(360deg);
    }
}

.spinning[b-m4izttxsz5] {
    animation: spin-b-m4izttxsz5 1s linear infinite;
}

@keyframes pulse-b-m4izttxsz5 {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Switch Toggle (Time Machine) */
.switch[b-m4izttxsz5] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input[b-m4izttxsz5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-m4izttxsz5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider[b-m4izttxsz5]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider[b-m4izttxsz5] {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

input:checked+.slider[b-m4izttxsz5]:before {
    transform: translateX(20px);
    background-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.slider.round[b-m4izttxsz5] {
    border-radius: 34px;
}

.slider.round[b-m4izttxsz5]:before {
    border-radius: 50%;
}

/* Modal Filters Layout */
.expanded-filters[b-m4izttxsz5] {
    padding: 12px 20px;
}

.expanded-filters .filtro-select[b-m4izttxsz5],
.expanded-filters .filtro-input[b-m4izttxsz5] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transition: all 0.2s ease;
}

.expanded-filters .filtro-select:hover[b-m4izttxsz5],
.expanded-filters .filtro-input:hover[b-m4izttxsz5] {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(15, 23, 42, 0.8);
}

.expanded-filters .action-btn:hover[b-m4izttxsz5] {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    transform: translateY(-1px);
}

.expanded-filters .action-btn:disabled[b-m4izttxsz5] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========== Custom Time Dropdown ========== */
.time-dropdown[b-m4izttxsz5] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.time-dropdown-header[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.time-dropdown-list[b-m4izttxsz5] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    max-height: 165px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}

.time-dropdown-list[b-m4izttxsz5]::-webkit-scrollbar {
    width: 5px;
}

.time-dropdown-list[b-m4izttxsz5]::-webkit-scrollbar-track {
    background: transparent;
}

.time-dropdown-list[b-m4izttxsz5]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.time-dropdown-item[b-m4izttxsz5] {
    padding: 6px 12px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.time-dropdown-item:hover[b-m4izttxsz5] {
    background: rgba(14, 165, 233, 0.15);
    color: #e2e8f0;
}

.time-dropdown-item.active[b-m4izttxsz5] {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

/* MODAL 3-SECTION LAYOUT */
.modal-layout-container[b-m4izttxsz5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding-bottom: 5px;
    min-height: 0;
}

.modal-top-section[b-m4izttxsz5] {
    display: flex;
    gap: 24px;
    flex: 6;
    min-height: 0;
    overflow: hidden;
}

.modal-sidebar-filters[b-m4izttxsz5] {
    flex: 0 0 300px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 16px;
    min-height: 0;
}

.modal-chart-section[b-m4izttxsz5] {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    min-height: 0;
}

.modal-grid-section[b-m4izttxsz5] {
    flex: 4;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
}

/* BRANDED MODAL REFINEMENTS */
.modal-refresh-btn[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    background: rgba(211, 59, 178, 0.1);
    border: 1px solid rgba(211, 59, 178, 0.2);
    border-radius: 8px;
    color: #d33bb2;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.05);
}

.modal-refresh-btn span[b-m4izttxsz5] {
    font-size: 13px;
    font-weight: 600;
}

.modal-refresh-btn:hover:not(:disabled)[b-m4izttxsz5] {
    background: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(211, 59, 178, 0.15);
}

.modal-refresh-btn:active:not(:disabled)[b-m4izttxsz5] {
    transform: scale(0.98);
}

.modal-refresh-btn:disabled[b-m4izttxsz5] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.modal-refresh-btn svg.spinning[b-m4izttxsz5] {
    animation: spin-b-m4izttxsz5 1s linear infinite;
}

/* Branded Switch Toggle */
.time-machine-toggle-branded[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(211, 59, 178, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(211, 59, 178, 0.15);
}

.switch-branded[b-m4izttxsz5] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch-branded input[b-m4izttxsz5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-branded[b-m4izttxsz5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-branded[b-m4izttxsz5]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 1px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider-branded[b-m4izttxsz5] {
    background-color: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
}

input:checked+.slider-branded[b-m4izttxsz5]:before {
    transform: translateX(16px);
    background-color: #d33bb2;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.4);
}

.slider-branded.round[b-m4izttxsz5] {
    border-radius: 34px;
}

.slider-branded.round[b-m4izttxsz5]:before {
    border-radius: 50%;
}

.toggle-label[b-m4izttxsz5] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

input:checked~.toggle-label[b-m4izttxsz5] {
    color: #d33bb2;
}

/* === MEJORAS MODO EDICIÓN (REFINAMIENTO ORO) === */

.is-editing-active[b-m4izttxsz5] {
    position: relative;
    z-index: 1;
}

/* Oscurecimiento de fondo (Profundidad) - Sutil */
.is-editing-active[b-m4izttxsz5]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(15, 23, 42, 0.15);
    /* Muy sutil */
    backdrop-filter: blur(2px);
    border-radius: 30px;
    z-index: -1;
    animation: fadeInOverlay-b-m4izttxsz5 0.5s ease-out forwards;
    pointer-events: none;
}

/* Borde Guía en Edición (Dorado) */
.is-editing-active[b-m4izttxsz5]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 24px;
    bottom: 5px;
    right: 24px;
    border: 3.5px dashed rgba(229, 185, 0, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 0;
    animation: borderGoldPulse-b-m4izttxsz5 4s infinite ease-in-out;
}

@keyframes borderGoldPulse-b-m4izttxsz5 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
    }
}

/* Indicador Pill Amarillo (Estilo Ref imagen) */
.edit-mode-tag.gold[b-m4izttxsz5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e293b;
    /* Fondo oscuro sólido como la imagen */
    border: 1.5px solid #e5b900;
    padding: 6px 18px;
    border-radius: 30px;
    color: #e5b900;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(229, 185, 0, 0.2);
    animation: indicatorFadeSlide-b-m4izttxsz5 0.5s ease-out;
    /* Ajuste para centrar en el header */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes indicatorFadeSlide-b-m4izttxsz5 {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.pulse-dot[b-m4izttxsz5] {
    width: 8px;
    height: 8px;
    background-color: #e5b900;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px #e5b900;
}

.pulse-dot[b-m4izttxsz5]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: goldRingPulse-b-m4izttxsz5 2s infinite ease-out;
}

@keyframes goldRingPulse-b-m4izttxsz5 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Animación de Resplandor Estático solo para tarjetas editables (Sin movimiento) */
.is-editing-active[b-m4izttxsz5]  .is-card-editable {
    border: 1px solid rgba(229, 185, 0, 0.2) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    animation: cardGlowPulse-b-m4izttxsz5 4s infinite ease-in-out;
}

@keyframes cardGlowPulse-b-m4izttxsz5 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
        box-shadow: 0 4px 20px rgba(229, 185, 0, 0.15), 0 12px 30px rgba(0, 0, 0, 0.4);
    }
}

.is-editing-active[b-m4izttxsz5]  .is-card-editable:hover {
    border-color: #e5b900 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 185, 0, 0.2) !important;
    z-index: 10;
}

/* Efecto al arrastrar */
.is-editing-active[b-m4izttxsz5]  .grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
    animation: none;
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: #e5b900 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 185, 0, 0.4) !important;
    transform: scale(1.02) !important;
}

/* Ocultar elementos antiguos */
.edit-mode-toast[b-m4izttxsz5],
.editing-badge[b-m4izttxsz5] {
    display: none !important;
}

.badge-dot[b-m4izttxsz5] {
    width: 6px;
    height: 6px;
    background-color: #D33BB2;
    border-radius: 50%;
    box-shadow: 0 0 8px #D33BB2;
}

@keyframes badgePulse-b-m4izttxsz5 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Forzar visibilidad de manejadores de GridStack */
.is-editing-active[b-m4izttxsz5]  .ui-resizable-handle {
    display: block !important;
    opacity: 1 !important;
}

/* Ocultar iconos blancos de los laterales (s, e, w) pero mantener el área interactiva */
.is-editing-active[b-m4izttxsz5]  .ui-resizable-s,
.is-editing-active[b-m4izttxsz5]  .ui-resizable-e,
.is-editing-active[b-m4izttxsz5]  .ui-resizable-w,
.is-editing-active[b-m4izttxsz5]  .ui-resizable-n {
    background-image: none !important;
}

/* Asegurar que las esquinas (se, sw) mantengan su icono original pero en color blanco */
.is-editing-active[b-m4izttxsz5]  .ui-resizable-se,
.is-editing-active[b-m4izttxsz5]  .ui-resizable-sw {
    width: 20px !important;
}

/* <--- LA LLAVE QUE FALTABA PARA CERRAR EL BLOQUE Y SALVAR LA PÁGINA */

/* Deshabilitar interacción con botones de acción cuando están disabled */
.action-btn:disabled[b-m4izttxsz5] {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1);
}

.delete-btn[b-m4izttxsz5] {
    background: rgba(239, 68, 68, 0.1);
    /* Fondo sutil rojo */
    border: none;
    color: #ef4444;
    /* Rojo por defecto */
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn svg[b-m4izttxsz5] {
    width: 17px;
    /* Aumentado a 17px según solicitud */
    height: 17px;
}

.delete-btn:hover[b-m4izttxsz5] {
    color: #fca5a5;
    /* Rojo más claro/brillante al hacer hover */
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}
/* EMPTY CATALOG STATE */
.empty-catalog-message[b-m4izttxsz5] {
    text-align: center;
    padding: 40px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-top: 10px;
}
.empty-catalog-message .icon[b-m4izttxsz5] {
    font-size: 2.5rem;
    margin-bottom: 5px;
    opacity: 0.8;
}
.empty-catalog-message p[b-m4izttxsz5] {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: #e2e8f0;
}
.empty-catalog-message small[b-m4izttxsz5] {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.4;
}
/* /Pages/Home/Components/Reportes/ReportDetailModal.razor.rz.scp.css */
.reportes-panel[b-zg54ni3vvx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    /* Restaurado para posicionamiento del pseudo-elemento de edición */
}

.reportes-scrollable-content[b-zg54ni3vvx] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25px 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reportes-title-header[b-zg54ni3vvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 35px;
    /* Ajuste para alinear con el gridstack que tiene 10px de margen */
    padding-right: 50px;
    /* Precise alignment with chart card edges */
    position: relative;
    z-index: 20;
}

.reportes-title-header h2[b-zg54ni3vvx] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Slate-200 */
    text-transform: capitalize;
    letter-spacing: 0.05em;
    font-family: 'Segoe UI', sans-serif;
}

.header-divider[b-zg54ni3vvx] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    /* Mucho más visible (0.4 opacity) */
    margin: 5px 0 25px 0;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    opacity: 0.8;
    /* Asegurar visibilidad global */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Sombra para darle relieve */
}


.reportes-actions[b-zg54ni3vvx] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.action-buttons-group[b-zg54ni3vvx] {
    display: flex;
    gap: 8px;
    padding: 0;
}

.action-btn[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    /* Pill shape */
    background: rgba(30, 41, 59, 0.82);
    /* Dark slate background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-btn i[b-zg54ni3vvx],
.action-btn svg[b-zg54ni3vvx] {
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.action-btn:hover[b-zg54ni3vvx] {
    transform: translateY(-2px);
    border-color: rgba(211, 59, 178, 0.5);
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.action-btn:hover i[b-zg54ni3vvx],
.action-btn:hover svg[b-zg54ni3vvx] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn.refresh-btn[b-zg54ni3vvx] {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.action-btn.refresh-btn i[b-zg54ni3vvx],
.action-btn.refresh-btn svg[b-zg54ni3vvx] {
    color: rgba(255, 255, 255, 0.7) !important;
    filter: none;
    transition: all 0.3s ease;
}

.action-btn.refresh-btn:hover i[b-zg54ni3vvx],
.action-btn.refresh-btn:hover svg[b-zg54ni3vvx] {
    color: #D33BB2 !important;
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
    /* Explicitly keep the rotation for the refresh icon only on hover */
    transform: scale(1.1) rotate(15deg);
}

.action-btn.active[b-zg54ni3vvx] {
    background: rgba(30, 41, 59, 0.82) !important;
    border-color: #D33BB2;
    color: #fff;
    box-shadow: 0 0 15px rgba(211, 59, 178, 0.4);
    outline: none !important;
}

.action-btn.active i[b-zg54ni3vvx],
.action-btn.active svg[b-zg54ni3vvx] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn:disabled[b-zg54ni3vvx],
.action-btn[disabled][b-zg54ni3vvx] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(30, 41, 59, 0.82) !important;
    color: #ffffff !important;
    opacity: 0.5 !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-btn:hover[b-zg54ni3vvx] {
    transform: translateY(-2px) scale(1.02);
}

.graficas-sidebar[b-zg54ni3vvx] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.graficas-sidebar.open[b-zg54ni3vvx] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}

.sidebar-header[b-zg54ni3vvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    margin-bottom: 15px;
}

.sidebar-header h3[b-zg54ni3vvx] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}

.close-sidebar-btn[b-zg54ni3vvx] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 32px;
    height: 32px;
}

.close-sidebar-btn:hover[b-zg54ni3vvx] {
    background: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.sidebar-instructions[b-zg54ni3vvx] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    line-height: 1.4;
}

.graficas-grid[b-zg54ni3vvx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px 10px 0;
}

.graficas-grid[b-zg54ni3vvx]::-webkit-scrollbar {
    width: 6px;
}

.graficas-grid[b-zg54ni3vvx]::-webkit-scrollbar-track {
    background: transparent;
}

.graficas-grid[b-zg54ni3vvx]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.agregar-btn[b-zg54ni3vvx] {
    margin-top: 15px;
    padding: 12px;
    align-self: flex-start;
    background: #D33BB2;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.agregar-btn:hover[b-zg54ni3vvx] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}


.filtros-sidebar[b-zg54ni3vvx] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.filtros-sidebar.open[b-zg54ni3vvx] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}


.filtro-section[b-zg54ni3vvx] {
    margin-bottom: 20px;
}

.filtro-section label[b-zg54ni3vvx] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-zg54ni3vvx] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-zg54ni3vvx] .filtro-input {
    flex: 1;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-zg54ni3vvx] {
    width: 100%;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

/* FILTER CHIPS */
.filter-chips-container[b-zg54ni3vvx] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 0 0 0 5px;
    animation: fadeIn-b-zg54ni3vvx 0.4s ease-out;
}

.modal-filter-chips[b-zg54ni3vvx] {
    padding: 10px 0;
    margin-bottom: 5px;
}

.filter-chip[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #e5b900;
    border: none;
    border-radius: 20px;
    color: #1a365d;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    cursor: default;
    box-shadow: 0 2px 8px rgba(229, 185, 0, 0.2);
    /* Prevent overflow */
    max-width: 100%;
    overflow: hidden;
}

.filter-chip:hover[b-zg54ni3vvx] {
    background: #f2c600;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
}

.filter-chip-label[b-zg54ni3vvx] {
    opacity: 0.85;
    text-transform: uppercase;
    font-size: 9px;
    margin-right: 2px;
    color: #1a365d;
}

.filter-chip-value[b-zg54ni3vvx] {
    color: #1a365d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    /* Limit value width */
}

/* Specific Chip Colors matched from user screenshot */
.chip-default[b-zg54ni3vvx],
.chip-period[b-zg54ni3vvx],
.chip-time[b-zg54ni3vvx],
.chip-comparison[b-zg54ni3vvx] {
    background: #e5b900 !important;
    border: none !important;
    color: #1a365d !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.15);
}

.chip-default .filter-chip-label[b-zg54ni3vvx],
.chip-period .filter-chip-label[b-zg54ni3vvx],
.chip-time .filter-chip-label[b-zg54ni3vvx],
.chip-comparison .filter-chip-label[b-zg54ni3vvx],
.chip-default .filter-chip-value[b-zg54ni3vvx],
.chip-period .filter-chip-value[b-zg54ni3vvx],
.chip-time .filter-chip-value[b-zg54ni3vvx],
.chip-comparison .filter-chip-value[b-zg54ni3vvx],
.chip-default .remove-filter-btn[b-zg54ni3vvx],
.chip-period .remove-filter-btn[b-zg54ni3vvx],
.chip-time .remove-filter-btn[b-zg54ni3vvx],
.chip-comparison .remove-filter-btn[b-zg54ni3vvx] {
    color: #1a365d !important;
    opacity: 1 !important;
}

.chip-default .filter-chip-label[b-zg54ni3vvx],
.chip-period .filter-chip-label[b-zg54ni3vvx],
.chip-time .filter-chip-label[b-zg54ni3vvx],
.chip-comparison .filter-chip-label[b-zg54ni3vvx] {
    opacity: 0.8 !important;
}

/* BLOCKED/DISABLED STATE */
.chip-disabled[b-zg54ni3vvx] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    pointer-events: none;
    /* Disables all interactions including hover and clicks */
}

.chip-disabled .remove-filter-btn[b-zg54ni3vvx] {
    display: none !important;
    /* Hide the X button when blocked */
}

.remove-filter-btn[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.remove-filter-btn:hover[b-zg54ni3vvx] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    transform: rotate(90deg);
}

@keyframes fadeIn-b-zg54ni3vvx {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filtro-toggle-row[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-zg54ni3vvx] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-zg54ni3vvx] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-zg54ni3vvx] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-zg54ni3vvx] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-zg54ni3vvx] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-zg54ni3vvx] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

/* AZURE-STYLE CATALOG ITEMS */
.azure-catalog-item:not(.ui-draggable-dragging)[b-zg54ni3vvx] {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 80px;
    display: block !important;
    /* Reset gridstack absolute positioning for the sidebar only */
    top: auto !important;
    left: auto !important;
}

.azure-catalog-content[b-zg54ni3vvx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid transparent !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.azure-catalog-content:active[b-zg54ni3vvx] {
    cursor: grabbing;
    transform: scale(0.98);
}

.azure-catalog-content:hover[b-zg54ni3vvx] {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-left-color: #D33BB2 !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    transform: translateX(4px) translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(211, 59, 178, 0.15);
}

.azure-catalog-item.selected-chart .azure-catalog-content[b-zg54ni3vvx] {
    border: 1px solid #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.4), 0 10px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.azure-thumbnail[b-zg54ni3vvx] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.azure-thumbnail img[b-zg54ni3vvx] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.azure-thumbnail span[b-zg54ni3vvx] {
    font-size: 24px;
}

.azure-info[b-zg54ni3vvx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.azure-title[b-zg54ni3vvx] {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    letter-spacing: 0.3px;
}

.azure-desc[b-zg54ni3vvx] {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-stack .grafica-option:hover[b-zg54ni3vvx] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-zg54ni3vvx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-zg54ni3vvx 0.3s ease-out;
}


.filtros-sidebar[b-zg54ni3vvx] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.filtros-sidebar.open[b-zg54ni3vvx] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}

.filtro-section[b-zg54ni3vvx] {
    margin-bottom: 20px;
}

.filtro-section label[b-zg54ni3vvx] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-zg54ni3vvx] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-zg54ni3vvx] .filtro-input {
    flex: 1;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-zg54ni3vvx] {
    width: 100%;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.filtro-toggle-row[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-zg54ni3vvx] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-zg54ni3vvx] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-zg54ni3vvx] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-zg54ni3vvx] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-zg54ni3vvx] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-zg54ni3vvx] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

.graficas-sidebar[b-zg54ni3vvx]  .reporte-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    height: auto !important;
    gap: 8px;
    transition: all 0.2s ease;
}


.graficas-sidebar[b-zg54ni3vvx]  .reporte-card:hover {
    border-color: #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.graficas-sidebar[b-zg54ni3vvx]  .card-header {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.graficas-sidebar[b-zg54ni3vvx]  .card-header h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    text-transform: none !important;
    text-align: left;
}


.graficas-sidebar[b-zg54ni3vvx]  .card-content {
    order: 1 !important;
    width: 100%;
    height: 100px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    border: none !important;
    flex: none !important;
}


.graficas-sidebar[b-zg54ni3vvx]  .card-options {
    display: none !important;
}

.grid-stack .grafica-option:hover[b-zg54ni3vvx] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-zg54ni3vvx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-zg54ni3vvx 0.3s ease-out;
}

/* Contenido del Modal estilo Glass/Dark */
.modal-content[b-zg54ni3vvx] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 10px 24px 24px 24px;
    width: 96%;
    max-width: 1600px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUpModal-b-zg54ni3vvx 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo superior en el modal */
.modal-content[b-zg54ni3vvx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

@keyframes fadeInOverlay-b-zg54ni3vvx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-zg54ni3vvx {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-zg54ni3vvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.modal-header h3[b-zg54ni3vvx] {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-modal-btn[b-zg54ni3vvx] {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    font-weight: bold;
}

.close-modal-btn:hover[b-zg54ni3vvx] {
    background: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.modal-body[b-zg54ni3vvx] {
    flex: 1;
    overflow-y: auto;
    color: #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
}

.close-panel-btn[b-zg54ni3vvx] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    backdrop-filter: blur(12px);
    /* Standardized blur to match action buttons */
}

.close-panel-btn i[b-zg54ni3vvx],
.close-panel-btn svg[b-zg54ni3vvx] {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.close-panel-btn:hover[b-zg54ni3vvx] {
    background: transparent;
    border-color: transparent;
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
}

.close-panel-btn:hover i[b-zg54ni3vvx],
.close-panel-btn:hover svg[b-zg54ni3vvx] {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Estilos para el select de tipo de gráfica (migrado de ReporteCard) */
.chart-select[b-zg54ni3vvx] {
    background-color: rgba(30, 41, 59, 0.7);
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 50px;
    text-overflow: ellipsis;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 8px center;
    background-size: 14px;
}

.chart-select:hover[b-zg54ni3vvx] {
    background: linear-gradient(to bottom, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);

}

.chart-select:focus[b-zg54ni3vvx] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.chart-select option[b-zg54ni3vvx] {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 12px;
}

/* Empty State (sin tenant) */
.reportes-empty-state[b-zg54ni3vvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
}

.empty-state-icon[b-zg54ni3vvx] {
    color: rgba(148, 163, 184, 0.4);
    margin-bottom: 4px;
}

.empty-state-text[b-zg54ni3vvx] {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
}

/* Loading Indicator */
.reportes-loading-overlay[b-zg54ni3vvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.reportes-spinner[b-zg54ni3vvx] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #D33BB2;
    border-radius: 50%;
    animation: spin-b-zg54ni3vvx 0.8s linear infinite;
}

.reportes-loading-text[b-zg54ni3vvx] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.03em;
    animation: pulse-b-zg54ni3vvx 1.5s ease-in-out infinite;
}

@keyframes spin-b-zg54ni3vvx {
    to {
        transform: rotate(360deg);
    }
}

.spinning[b-zg54ni3vvx] {
    animation: spin-b-zg54ni3vvx 1s linear infinite;
}

@keyframes pulse-b-zg54ni3vvx {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Switch Toggle (Time Machine) */
.switch[b-zg54ni3vvx] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input[b-zg54ni3vvx] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-zg54ni3vvx] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider[b-zg54ni3vvx]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider[b-zg54ni3vvx] {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

input:checked+.slider[b-zg54ni3vvx]:before {
    transform: translateX(20px);
    background-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.slider.round[b-zg54ni3vvx] {
    border-radius: 34px;
}

.slider.round[b-zg54ni3vvx]:before {
    border-radius: 50%;
}

/* Modal Filters Layout */
.expanded-filters[b-zg54ni3vvx] {
    padding: 12px 20px;
}

.expanded-filters .filtro-select[b-zg54ni3vvx],
.expanded-filters .filtro-input[b-zg54ni3vvx] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transition: all 0.2s ease;
}

.expanded-filters .filtro-select:hover[b-zg54ni3vvx],
.expanded-filters .filtro-input:hover[b-zg54ni3vvx] {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(15, 23, 42, 0.8);
}

.expanded-filters .action-btn:hover[b-zg54ni3vvx] {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    transform: translateY(-1px);
}

.expanded-filters .action-btn:disabled[b-zg54ni3vvx] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========== Custom Time Dropdown ========== */
.time-dropdown[b-zg54ni3vvx] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.time-dropdown-header[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.time-dropdown-list[b-zg54ni3vvx] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    max-height: 165px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}

.time-dropdown-list[b-zg54ni3vvx]::-webkit-scrollbar {
    width: 5px;
}

.time-dropdown-list[b-zg54ni3vvx]::-webkit-scrollbar-track {
    background: transparent;
}

.time-dropdown-list[b-zg54ni3vvx]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.time-dropdown-item[b-zg54ni3vvx] {
    padding: 6px 12px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.time-dropdown-item:hover[b-zg54ni3vvx] {
    background: rgba(14, 165, 233, 0.15);
    color: #e2e8f0;
}

.time-dropdown-item.active[b-zg54ni3vvx] {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

/* MODAL 3-SECTION LAYOUT */
.modal-layout-container[b-zg54ni3vvx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding-bottom: 5px;
    min-height: 0;
}

.modal-top-section[b-zg54ni3vvx] {
    display: flex;
    gap: 24px;
    flex: 7;
    min-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-sidebar-filters[b-zg54ni3vvx] {
    flex: 0 0 350px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 16px;
    min-height: 0;
}

.modal-chart-section[b-zg54ni3vvx] {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-grid-section[b-zg54ni3vvx] {
    flex: 3;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: none;
    border-radius: 12px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-grid-section[b-zg54ni3vvx]::-webkit-scrollbar {
    display: none;
}

/* LAYOUT STATES */
.modal-layout-container.chart-focus .modal-top-section[b-zg54ni3vvx] {
    flex: 1;
    /* Was 9.2 */
}

.modal-layout-container.chart-focus .modal-grid-section[b-zg54ni3vvx] {
    flex: 0 0 56px;
    min-height: 56px;
    padding: 0;
    overflow: hidden;
    opacity: 0.9;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.modal-layout-container.table-focus .modal-top-section[b-zg54ni3vvx] {
    flex: 0 0 56px;
    min-height: 56px;
    margin-bottom: 12px;
    overflow: hidden;
    opacity: 0.9;
}

.modal-layout-container.table-focus .modal-chart-section[b-zg54ni3vvx] {
    padding: 0;
}

.modal-layout-container.table-focus .modal-grid-section[b-zg54ni3vvx] {
    flex: 1;
    /* Was 9.2 */
}

.modal-layout-container.chart-focus .modal-grid-section:hover[b-zg54ni3vvx],
.modal-layout-container.table-focus .modal-top-section:hover[b-zg54ni3vvx] {
    opacity: 1;
    background: rgba(30, 41, 59, 0.8);
}

/* RESIZE BUTTONS */
.layout-resize-btn[b-zg54ni3vvx] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.layout-resize-btn:hover[b-zg54ni3vvx] {
    background: rgba(211, 59, 178, 0.1);
    border-color: rgba(211, 59, 178, 0.3);
    color: #d33bb2;
    transform: scale(1.05);
}

.grid-resize-btn[b-zg54ni3vvx] {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}

.minimized-resize-btn[b-zg54ni3vvx] {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 18px !important;
}

.modal-grid-section[b-zg54ni3vvx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.section-minimized-title[b-zg54ni3vvx] {
    display: none;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 10px;
}

/* REMOVED CSS rules for section-minimized-title and child divs hiding since it's now handled by Razor logic */

.report-minimized-placeholder-modal[b-zg54ni3vvx] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.minimized-pill-modal[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.minimized-pill-modal:hover[b-zg54ni3vvx] {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(211, 59, 178, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(211, 59, 178, 0.15);
}


/* BRANDED MODAL REFINEMENTS */
.modal-refresh-btn[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    background: rgba(211, 59, 178, 0.1);
    border: 1px solid rgba(211, 59, 178, 0.2);
    border-radius: 8px;
    color: #d33bb2;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.05);
}

.modal-refresh-btn span[b-zg54ni3vvx] {
    font-size: 13px;
    font-weight: 600;
}

.modal-refresh-btn:hover:not(:disabled)[b-zg54ni3vvx] {
    background: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(211, 59, 178, 0.15);
}

.modal-refresh-btn:active:not(:disabled)[b-zg54ni3vvx] {
    transform: scale(0.98);
}

.modal-refresh-btn:disabled[b-zg54ni3vvx] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.modal-refresh-btn svg.spinning[b-zg54ni3vvx] {
    animation: spin-b-zg54ni3vvx 1s linear infinite;
}

/* Branded Switch Toggle */
.time-machine-toggle-branded[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(211, 59, 178, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(211, 59, 178, 0.15);
}

.switch-branded[b-zg54ni3vvx] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch-branded input[b-zg54ni3vvx] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-branded[b-zg54ni3vvx] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-branded[b-zg54ni3vvx]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 1px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider-branded[b-zg54ni3vvx] {
    background-color: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
}

input:checked+.slider-branded[b-zg54ni3vvx]:before {
    transform: translateX(16px);
    background-color: #d33bb2;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.4);
}

.slider-branded.round[b-zg54ni3vvx] {
    border-radius: 34px;
}

.slider-branded.round[b-zg54ni3vvx]:before {
    border-radius: 50%;
}

.toggle-label[b-zg54ni3vvx] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

input:checked~.toggle-label[b-zg54ni3vvx] {
    color: #d33bb2;
}

/* === MEJORAS MODO EDICIÓN (REFINAMIENTO ORO) === */

.is-editing-active[b-zg54ni3vvx] {
    position: relative;
    z-index: 1;
}

/* Oscurecimiento de fondo (Profundidad) - Sutil */
.is-editing-active[b-zg54ni3vvx]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(15, 23, 42, 0.15);
    /* Muy sutil */
    backdrop-filter: blur(2px);
    border-radius: 30px;
    z-index: -1;
    animation: fadeInOverlay-b-zg54ni3vvx 0.5s ease-out forwards;
    pointer-events: none;
}

/* Borde Guía en Edición (Dorado) */
.is-editing-active[b-zg54ni3vvx]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 24px;
    bottom: 5px;
    right: 24px;
    border: 3.5px dashed rgba(229, 185, 0, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 0;
    animation: borderGoldPulse-b-zg54ni3vvx 4s infinite ease-in-out;
}

@keyframes borderGoldPulse-b-zg54ni3vvx {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
    }
}

/* Indicador Pill Amarillo (Estilo Ref imagen) */
.edit-mode-tag.gold[b-zg54ni3vvx] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e293b;
    /* Fondo oscuro sólido como la imagen */
    border: 1.5px solid #e5b900;
    padding: 6px 18px;
    border-radius: 30px;
    color: #e5b900;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(229, 185, 0, 0.2);
    animation: indicatorFadeSlide-b-zg54ni3vvx 0.5s ease-out;
    /* Ajuste para centrar en el header */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes indicatorFadeSlide-b-zg54ni3vvx {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.pulse-dot[b-zg54ni3vvx] {
    width: 8px;
    height: 8px;
    background-color: #e5b900;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px #e5b900;
}

.pulse-dot[b-zg54ni3vvx]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: goldRingPulse-b-zg54ni3vvx 2s infinite ease-out;
}

@keyframes goldRingPulse-b-zg54ni3vvx {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Animación de Resplandor Estático solo para tarjetas editables (Sin movimiento) */
.is-editing-active[b-zg54ni3vvx]  .is-card-editable {
    border: 1px solid rgba(229, 185, 0, 0.2) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    animation: cardGlowPulse-b-zg54ni3vvx 4s infinite ease-in-out;
}

@keyframes cardGlowPulse-b-zg54ni3vvx {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
        box-shadow: 0 4px 20px rgba(229, 185, 0, 0.15), 0 12px 30px rgba(0, 0, 0, 0.4);
    }
}

.is-editing-active[b-zg54ni3vvx]  .is-card-editable:hover {
    border-color: #e5b900 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 185, 0, 0.2) !important;
    z-index: 10;
}

/* Efecto al arrastrar */
.is-editing-active[b-zg54ni3vvx]  .grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
    animation: none;
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: #e5b900 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 185, 0, 0.4) !important;
    transform: scale(1.02) !important;
}

/* Ocultar elementos antiguos */
.edit-mode-toast[b-zg54ni3vvx],
.editing-badge[b-zg54ni3vvx] {
    display: none !important;
}

.badge-dot[b-zg54ni3vvx] {
    width: 6px;
    height: 6px;
    background-color: #D33BB2;
    border-radius: 50%;
    box-shadow: 0 0 8px #D33BB2;
}

@keyframes badgePulse-b-zg54ni3vvx {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Forzar visibilidad de manejadores de GridStack */
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-handle {
    display: block !important;
    opacity: 1 !important;
}

/* Ocultar iconos blancos de los laterales (s, e, w) pero mantener el área interactiva */
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-s,
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-e,
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-w,
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-n {
    background-image: none !important;
}

/* Asegurar que las esquinas (se, sw) mantengan su icono original pero en color blanco */
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-se,
.is-editing-active[b-zg54ni3vvx]  .ui-resizable-sw {
    width: 20px !important;
}

/* <--- LA LLAVE QUE FALTABA PARA CERRAR EL BLOQUE Y SALVAR LA PÁGINA */

/* Deshabilitar interacción con botones de acción cuando están disabled */
.action-btn:disabled[b-zg54ni3vvx] {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1);
}

.delete-btn[b-zg54ni3vvx] {
    background: rgba(239, 68, 68, 0.1);
    /* Fondo sutil rojo */
    border: none;
    color: #ef4444;
    /* Rojo por defecto */
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn svg[b-zg54ni3vvx] {
    width: 17px;
    /* Aumentado a 17px según solicitud */
    height: 17px;
}

.delete-btn:hover[b-zg54ni3vvx] {
    color: #fca5a5;
    /* Rojo más claro/brillante al hacer hover */
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}
/* /Pages/Home/Components/Reportes/ReportesPanel.razor.rz.scp.css */
.reportes-panel[b-sn08ule079] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    /* Pegado a los bordes */
    position: relative;
    background: #1c2738;
    /* Color que tenían las tarjetas */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: none;
}


/* Aviso de alcance de filtros */
.filter-scope-notice[b-sn08ule079] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Espacio para la X */
    gap: 12px;
    background: rgba(234, 179, 8, 0.08);
    /* Amarillo muy suave */
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 12px;
    padding: 10px 18px;
    margin: 0 10px 15px 10px;
    /* Alineado con el margen del gridstack (10px) */
    animation: noticeSlideDown-b-sn08ule079 0.4s ease-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.notice-close-btn[b-sn08ule079] {
    background: transparent;
    border: none;
    color: #eab308;
    /* Color sólido más visible */
    opacity: 0.7;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: -4px;
}

.notice-close-btn svg[b-sn08ule079] {
    width: 18px;
    /* Más grande */
    height: 18px;
}

.notice-close-btn:hover[b-sn08ule079] {
    background: rgba(234, 179, 8, 0.2);
    opacity: 1;
    transform: scale(1.15);
}

.notice-icon[b-sn08ule079] {
    color: #eab308;
    display: flex;
    align-items: center;
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.3));
}

.notice-text[b-sn08ule079] {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
}

.notice-text span[b-sn08ule079] {
    color: #eab308;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.2);
}

@keyframes noticeSlideDown-b-sn08ule079 {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reportes-scrollable-content[b-sn08ule079] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25px 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reportes-title-header[b-sn08ule079] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 35px;
    padding-right: 50px;
    position: relative;
    z-index: 20;
}

.reportes-title-header h2[b-sn08ule079] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Slate-200 */
    text-transform: capitalize;
    letter-spacing: 0.05em;
    font-family: 'Segoe UI', sans-serif;
}

.header-divider[b-sn08ule079] {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 2px 0 20px 0;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

/* TABS CONTAINER */
.reportes-tabs-container[b-sn08ule079] {
    padding: 0 35px 15px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn-b-sn08ule079 0.4s ease-out;
}

.tabs-row-actions[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.reportes-tabs[b-sn08ule079] {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tab-btn[b-sn08ule079] {
    background: transparent;
    border: none;
    padding: 5px 16px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI', sans-serif;
}

.tab-btn svg[b-sn08ule079] {
    color: #ffffff;
    width: 14px;
    height: 14px;
    transition: all 0.3s ease;
}

.tab-btn:hover[b-sn08ule079] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active[b-sn08ule079] {
    background: #e5b900;
    color: #1a365d;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
    border: none;
}

.tab-btn.active svg[b-sn08ule079] {
    color: #ffffff;
    opacity: 1;
    filter: none;
}


.reportes-actions[b-sn08ule079] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.action-buttons-group[b-sn08ule079] {
    display: flex;
    align-items: center;
    /* Alineación vertical centralizada */
    gap: 12px;
    padding: 0;
}

.filter-group-container[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px 0 0;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.filter-group-container .action-btn[b-sn08ule079] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.filter-group-container:hover[b-sn08ule079] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.header-filter-chips[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideInLeft-b-sn08ule079 0.3s ease-out;
    flex-wrap: wrap; /* Wrap to next line when overflowing */
}

@keyframes slideInLeft-b-sn08ule079 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.action-btn[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    /* Pill shape */
    background: rgba(30, 41, 59, 0.45);
    /* Soft Glass background */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.action-btn i[b-sn08ule079],
.action-btn svg[b-sn08ule079] {
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.action-btn:hover[b-sn08ule079] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.action-btn:hover i[b-sn08ule079],
.action-btn:hover svg[b-sn08ule079] {
    color: #ffffff !important;
    transform: none;
    filter: none;
}

.action-btn.cancel-btn.active[b-sn08ule079] {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    outline: none !important;
}

.action-btn.cancel-btn.active svg[b-sn08ule079] {
    color: #D33BB2 !important;
}

.action-btn.edit-btn.active.is-modified[b-sn08ule079] {
    margin-right: 8px;
    /* Separar del botón Cancelar */
}

.action-btn.refresh-btn[b-sn08ule079] {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

.action-btn.refresh-btn i[b-sn08ule079],
.action-btn.refresh-btn svg[b-sn08ule079] {
    color: rgba(255, 255, 255, 0.7) !important;
    filter: none;
    transition: all 0.3s ease;
}

.action-btn.refresh-btn:hover i[b-sn08ule079],
.action-btn.refresh-btn:hover svg[b-sn08ule079] {
    color: #ffffff !important;
    filter: none;
    transform: rotate(45deg);
}

.action-btn.active[b-sn08ule079] {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    outline: none !important;
}

.action-btn.active i[b-sn08ule079],
.action-btn.active svg[b-sn08ule079] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(211, 59, 178, 0.4));
}

.action-btn.active.is-modified[b-sn08ule079] {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: #D33BB2;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.6), inset 0 0 12px rgba(211, 59, 178, 0.1);
    animation: pulseBorder 2s infinite;
}

.action-btn:disabled[b-sn08ule079],
.action-btn[disabled][b-sn08ule079] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(30, 41, 59, 0.82) !important;
    color: #ffffff !important;
    opacity: 0.5 !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-btn:hover[b-sn08ule079] {
    transform: translateY(-2px) scale(1.02);
}





























/* FILTER CHIPS */
.filter-chips-container[b-sn08ule079] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 0 0 0 5px;
    animation: fadeIn-b-sn08ule079 0.4s ease-out;
}



.filter-chip[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #e5b900;
    border: none;
    border-radius: 16px;
    color: #1a365d;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(229, 185, 0, 0.2);
}

.filter-chip:hover[b-sn08ule079] {
    background: #f2c600;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
}

.filter-chip-label[b-sn08ule079] {
    opacity: 0.85;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 700;
    color: #1a365d;
    margin-right: 2px;
}

.filter-chip-value[b-sn08ule079] {
    color: #1a365d;
}

.chip-default[b-sn08ule079],
.chip-period[b-sn08ule079] {
    background: #e5b900 !important;
    border: none !important;
    color: #1a365d !important;
}

.chip-default .filter-chip-label[b-sn08ule079],
.chip-period .filter-chip-label[b-sn08ule079] {
    color: #1a365d !important;
    opacity: 0.8 !important;
}

.chip-default .filter-chip-value[b-sn08ule079],
.chip-period .filter-chip-value[b-sn08ule079],
.chip-default .remove-filter-btn[b-sn08ule079],
.chip-period .remove-filter-btn[b-sn08ule079] {
    color: #1a365d !important;
}

.chip-time[b-sn08ule079],
.chip-comparison[b-sn08ule079],
.chip-insurance[b-sn08ule079],
.chip-level[b-sn08ule079],
.chip-isinstore[b-sn08ule079] {
    background: #e5b900 !important;
    border: none !important;
    color: #1a365d !important;
    box-shadow: 0 2px 8px rgba(229, 185, 0, 0.2);
}

.chip-time .filter-chip-label[b-sn08ule079],
.chip-comparison .filter-chip-label[b-sn08ule079],
.chip-insurance .filter-chip-label[b-sn08ule079],
.chip-level .filter-chip-label[b-sn08ule079],
.chip-isinstore .filter-chip-label[b-sn08ule079] {
    color: #1a365d !important;
    opacity: 0.8 !important;
}

.chip-time .filter-chip-value[b-sn08ule079],
.chip-comparison .filter-chip-value[b-sn08ule079],
.chip-insurance .filter-chip-value[b-sn08ule079],
.chip-level .filter-chip-value[b-sn08ule079],
.chip-isinstore .filter-chip-value[b-sn08ule079],
.chip-time .remove-filter-btn[b-sn08ule079],
.chip-comparison .remove-filter-btn[b-sn08ule079],
.chip-insurance .remove-filter-btn[b-sn08ule079],
.chip-level .remove-filter-btn[b-sn08ule079],
.chip-isinstore .remove-filter-btn[b-sn08ule079] {
    color: #1a365d !important;
}

/* BLOCKED/DISABLED STATE */




.remove-filter-btn[b-sn08ule079] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 3px;
    /* Reduced to keep chips compact */
    margin-left: 2px;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
    z-index: 10;
}

.remove-filter-btn:hover[b-sn08ule079] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    transform: rotate(90deg);
}

@keyframes fadeIn-b-sn08ule079 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.toggle-switch[b-sn08ule079] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}



.grid-stack[b-sn08ule079] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-sn08ule079] {
    background: #1f2f45;
    /* Color que tenía el panel */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Contorno amarillo: filtro global activo sobre esta tarjeta */
.grid-stack-item-content.global-filter-active[b-sn08ule079] {
    border-color: #eab308;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.5),
        0 0 16px rgba(234, 179, 8, 0.12),
        inset 0 0 10px rgba(234, 179, 8, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.graficas-sidebar .grafica-option[b-sn08ule079] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

/* AZURE-STYLE CATALOG ITEMS */
.azure-catalog-item:not(.ui-draggable-dragging)[b-sn08ule079] {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 80px;
    display: block !important;
    /* Reset gridstack absolute positioning for the sidebar only */
    top: auto !important;
    left: auto !important;
}













.grid-stack .grafica-option:hover[b-sn08ule079] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/


















.toggle-switch[b-sn08ule079] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}



.grid-stack[b-sn08ule079] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-sn08ule079] {
    background: #1f2f45;
    /* Color que tenía el panel */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Contorno amarillo: filtro global activo sobre esta tarjeta (duplicado para especificidad) */
.grid-stack-item-content.global-filter-active[b-sn08ule079] {
    border-color: #eab308;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.5),
        0 0 16px rgba(234, 179, 8, 0.12),
        inset 0 0 10px rgba(234, 179, 8, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.graficas-sidebar .grafica-option[b-sn08ule079] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

.graficas-sidebar[b-sn08ule079]  .reporte-card {
    background: #1f2f45 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    height: auto !important;
    gap: 8px;
    transition: all 0.2s ease;
}


.graficas-sidebar[b-sn08ule079]  .reporte-card:hover {
    border-color: #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.graficas-sidebar[b-sn08ule079]  .card-header {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.graficas-sidebar[b-sn08ule079]  .card-header h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    text-transform: none !important;
    text-align: left;
}


.graficas-sidebar[b-sn08ule079]  .card-content {
    order: 1 !important;
    width: 100%;
    height: 100px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    border: none !important;
    flex: none !important;
}


.graficas-sidebar[b-sn08ule079]  .card-options {
    display: none !important;
}

.grid-stack .grafica-option:hover[b-sn08ule079] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/



/* Contenido del Modal estilo Glass/Dark */


/* Efecto de brillo superior en el modal */


@keyframes fadeInOverlay-b-sn08ule079 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-sn08ule079 {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}





.modal-body[b-sn08ule079] {
    flex: 1;
    overflow-y: auto;
    color: #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
}

.close-panel-btn[b-sn08ule079] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    /* Limpiar padding para control total con width/height */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.close-panel-btn i[b-sn08ule079],
.close-panel-btn svg[b-sn08ule079] {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.close-panel-btn:hover[b-sn08ule079] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.close-panel-btn:hover i[b-sn08ule079],
.close-panel-btn:hover svg[b-sn08ule079] {
    color: #ffffff !important;
    filter: none;
}

/* Estilos para el select de tipo de gráfica (migrado de ReporteCard) */
.chart-select[b-sn08ule079] {
    background-color: rgba(30, 41, 59, 0.7);
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 50px;
    text-overflow: ellipsis;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 8px center;
    background-size: 14px;
}

.chart-select:hover[b-sn08ule079] {
    background: linear-gradient(to bottom, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);

}

.chart-select:focus[b-sn08ule079] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.chart-select option[b-sn08ule079] {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 12px;
}

/* --- Placeholder para reportes minimizados --- */
.report-minimized-placeholder[b-sn08ule079] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    background: rgba(15, 23, 42, 0.15) !important;
    backdrop-filter: blur(4px) !important;
}

.minimized-pill[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.minimized-pill:hover[b-sn08ule079] {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(211, 59, 178, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(211, 59, 178, 0.15);
}

/* Empty State (sin tenant) */
.reportes-empty-state[b-sn08ule079] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
}

.empty-state-icon[b-sn08ule079] {
    color: rgba(148, 163, 184, 0.4);
    margin-bottom: 4px;
}

.empty-state-text[b-sn08ule079] {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
}

/* Loading Indicator */
.reportes-loading-overlay[b-sn08ule079] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.reportes-spinner[b-sn08ule079] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #D33BB2;
    border-radius: 50%;
    animation: spin-b-sn08ule079 0.8s linear infinite;
}

.reportes-loading-text[b-sn08ule079] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.03em;
    animation: pulse-b-sn08ule079 1.5s ease-in-out infinite;
}

@keyframes spin-b-sn08ule079 {
    to {
        transform: rotate(360deg);
    }
}

.spinning[b-sn08ule079] {
    animation: spin-b-sn08ule079 1s linear infinite;
}

@keyframes pulse-b-sn08ule079 {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Switch Toggle (Time Machine) */
.switch[b-sn08ule079] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input[b-sn08ule079] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-sn08ule079] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider[b-sn08ule079]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider[b-sn08ule079] {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

input:checked+.slider[b-sn08ule079]:before {
    transform: translateX(20px);
    background-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.slider.round[b-sn08ule079] {
    border-radius: 34px;
}

.slider.round[b-sn08ule079]:before {
    border-radius: 50%;
}

/* Modal Filters Layout */
.expanded-filters[b-sn08ule079] {
    padding: 12px 20px;
}

.expanded-filters .expanded-filters .expanded-filters .action-btn:hover[b-sn08ule079] {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    transform: translateY(-1px);
}

.expanded-filters .action-btn:disabled[b-sn08ule079] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========== Custom Time Dropdown ========== */
.time-dropdown[b-sn08ule079] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.time-dropdown-header[b-sn08ule079] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.time-dropdown-list[b-sn08ule079] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    max-height: 165px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}

.time-dropdown-list[b-sn08ule079]::-webkit-scrollbar {
    width: 5px;
}

.time-dropdown-list[b-sn08ule079]::-webkit-scrollbar-track {
    background: transparent;
}

.time-dropdown-list[b-sn08ule079]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.time-dropdown-item[b-sn08ule079] {
    padding: 6px 12px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.time-dropdown-item:hover[b-sn08ule079] {
    background: rgba(14, 165, 233, 0.15);
    color: #e2e8f0;
}

.time-dropdown-item.active[b-sn08ule079] {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

/* MODAL 3-SECTION LAYOUT */










/* BRANDED MODAL REFINEMENTS */


/* Branded Switch Toggle */
.time-machine-toggle-branded[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(211, 59, 178, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(211, 59, 178, 0.15);
}

.switch-branded[b-sn08ule079] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch-branded input[b-sn08ule079] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-branded[b-sn08ule079] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-branded[b-sn08ule079]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 1px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider-branded[b-sn08ule079] {
    background-color: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
}

input:checked+.slider-branded[b-sn08ule079]:before {
    transform: translateX(16px);
    background-color: #d33bb2;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.4);
}

.slider-branded.round[b-sn08ule079] {
    border-radius: 34px;
}

.slider-branded.round[b-sn08ule079]:before {
    border-radius: 50%;
}

.toggle-label[b-sn08ule079] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

input:checked~.toggle-label[b-sn08ule079] {
    color: #d33bb2;
}

/* === MEJORAS MODO EDICIÓN (REFINAMIENTO ORO) === */

.is-editing-active[b-sn08ule079] {
    position: relative;
    z-index: 1;
}

/* Oscurecimiento de fondo (Profundidad) - Sutil */
.is-editing-active[b-sn08ule079]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(15, 23, 42, 0.15);
    /* Muy sutil */
    backdrop-filter: blur(2px);
    border-radius: 30px;
    z-index: -1;
    animation: fadeInOverlay-b-sn08ule079 0.5s ease-out forwards;
    pointer-events: none;
}

/* Borde Guía en Edición (Dorado) */
.is-editing-active[b-sn08ule079]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 24px;
    bottom: 5px;
    right: 24px;
    border: 3.5px dashed rgba(229, 185, 0, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 0;
    animation: borderGoldPulse-b-sn08ule079 4s infinite ease-in-out;
}

@keyframes borderGoldPulse-b-sn08ule079 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
    }
}

/* Indicador Pill Amarillo (Estilo Ref imagen) */
.edit-mode-tag.gold[b-sn08ule079] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e293b;
    border: 1.5px solid #e5b900;
    padding: 6px 18px;
    border-radius: 30px;
    color: #e5b900;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(229, 185, 0, 0.2);
    animation: indicatorFadeSlide-b-sn08ule079 0.5s ease-out;
    position: relative;
    white-space: nowrap;
    z-index: 21;
}

@keyframes indicatorFadeSlide-b-sn08ule079 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE HEADER ADJUSTMENTS */
@media (max-width: 1400px) {
    .reportes-title-header[b-sn08ule079] {
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 1100px) {
    .reportes-title-header[b-sn08ule079] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .edit-mode-tag.gold[b-sn08ule079] {
        order: -1;
        /* Poner el modo edición arriba en móviles */
    }

    .reportes-actions[b-sn08ule079] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .title-container h2[b-sn08ule079] {
        font-size: 1.3rem;
    }
}

.pulse-dot[b-sn08ule079] {
    width: 8px;
    height: 8px;
    background-color: #e5b900;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px #e5b900;
}

.pulse-dot[b-sn08ule079]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: goldRingPulse-b-sn08ule079 2s infinite ease-out;
}

@keyframes goldRingPulse-b-sn08ule079 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Animación de Resplandor Estático solo para tarjetas editables (Sin movimiento) */
.is-editing-active[b-sn08ule079]  .is-card-editable {
    border: 1px solid rgba(229, 185, 0, 0.2) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    animation: cardGlowPulse-b-sn08ule079 4s infinite ease-in-out;
}

@keyframes cardGlowPulse-b-sn08ule079 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
        box-shadow: 0 4px 20px rgba(229, 185, 0, 0.15), 0 12px 30px rgba(0, 0, 0, 0.4);
    }
}

.is-editing-active[b-sn08ule079]  .is-card-editable:hover {
    border-color: #e5b900 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 185, 0, 0.2) !important;
    z-index: 10;
}

/* Efecto al arrastrar */
.is-editing-active[b-sn08ule079]  .grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
    animation: none;
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: #e5b900 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 185, 0, 0.4) !important;
    transform: scale(1.02) !important;
}

/* Ocultar elementos antiguos */
.edit-mode-toast[b-sn08ule079],
.editing-badge[b-sn08ule079] {
    display: none !important;
}

.badge-dot[b-sn08ule079] {
    width: 6px;
    height: 6px;
    background-color: #D33BB2;
    border-radius: 50%;
    box-shadow: 0 0 8px #D33BB2;
}

@keyframes badgePulse-b-sn08ule079 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Forzar visibilidad de manejadores de GridStack */
.is-editing-active[b-sn08ule079]  .ui-resizable-handle {
    display: block !important;
    opacity: 1 !important;
}

/* Ocultar iconos blancos de los laterales (s, e, w) pero mantener el área interactiva */
.is-editing-active[b-sn08ule079]  .ui-resizable-s,
.is-editing-active[b-sn08ule079]  .ui-resizable-e,
.is-editing-active[b-sn08ule079]  .ui-resizable-w,
.is-editing-active[b-sn08ule079]  .ui-resizable-n {
    background-image: none !important;
}

/* Asegurar que las esquinas (se, sw) mantengan su icono original pero en color blanco */
.is-editing-active[b-sn08ule079]  .ui-resizable-se,
.is-editing-active[b-sn08ule079]  .ui-resizable-sw {
    width: 20px !important;
}

/* <--- LA LLAVE QUE FALTABA PARA CERRAR EL BLOQUE Y SALVAR LA PÁGINA */

/* Deshabilitar interacción con botones de acción cuando están disabled */
.action-btn:disabled[b-sn08ule079] {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1);
}

.delete-btn[b-sn08ule079] {
    background: rgba(239, 68, 68, 0.1);
    /* Fondo sutil rojo */
    border: none;
    color: #ef4444;
    /* Rojo por defecto */
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn svg[b-sn08ule079] {
    width: 17px;
    /* Aumentado a 17px según solicitud */
    height: 17px;
}

.delete-btn:hover[b-sn08ule079] {
    color: #fca5a5;
    /* Rojo más claro/brillante al hacer hover */
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — Botones de acción
────────────────────────────────────────────── */

.my-charts-add-btn[b-sn08ule079] {
    color: #e5b900;
    border-color: rgba(229, 185, 0, 0.25);
}

.my-charts-add-btn:hover:not(:disabled)[b-sn08ule079] {
    background: rgba(229, 185, 0, 0.12);
    border-color: rgba(229, 185, 0, 0.5);
    color: #fcd34d;
}

.my-charts-add-btn:disabled[b-sn08ule079] {
    opacity: 0.35;
    cursor: not-allowed;
}

.cancel-selection-btn[b-sn08ule079] {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.2);
}

.cancel-selection-btn:hover[b-sn08ule079] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}

.save-to-my-charts-btn[b-sn08ule079] {
    color: #1a365d;
    background: #e5b900;
    border-color: #e5b900;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
    animation: fadeIn-b-sn08ule079 0.2s ease-out;
}

.save-to-my-charts-btn:hover[b-sn08ule079] {
    background: #fcd34d;
    border-color: #fcd34d;
    box-shadow: 0 6px 16px rgba(229, 185, 0, 0.45);
    transform: translateY(-1px);
}

.selection-counter-badge[b-sn08ule079] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
    font-family: 'Segoe UI', sans-serif;
    animation: fadeIn-b-sn08ule079 0.2s ease-out;
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — Pestaña y badge
────────────────────────────────────────────── */

.my-charts-tab[b-sn08ule079] {
    position: relative;
}

.tab-count-badge[b-sn08ule079] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5b900;
    color: #1a365d;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    line-height: 1;
}

.tab-btn.active .tab-count-badge[b-sn08ule079] {
    background: #1a365d;
    color: #e5b900;
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — Modo de selección (checkboxes)
────────────────────────────────────────────── */

.selection-mode-item[b-sn08ule079] {
    cursor: pointer !important;
}

.selection-mode-item .grid-stack-item-content[b-sn08ule079] {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.selection-mode-item:hover .grid-stack-item-content[b-sn08ule079] {
    border: 1.5px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12) !important;
}

.is-selected-favorite .grid-stack-item-content[b-sn08ule079] {
    border: 2px solid rgba(59, 130, 246, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 4px 20px rgba(59, 130, 246, 0.15) !important;
}

.selection-checkbox-overlay[b-sn08ule079] {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 100;
    cursor: pointer;
}

.selection-checkbox[b-sn08ule079] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.selection-checkbox:hover[b-sn08ule079] {
    border-color: rgba(59, 130, 246, 0.8);
    background: rgba(59, 130, 246, 0.1);
}

.selection-checkbox.checked[b-sn08ule079] {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.selection-checkbox.checked svg[b-sn08ule079] {
    color: #ffffff;
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — KPIs estáticas
────────────────────────────────────────────── */

.my-charts-static-kpis[b-sn08ule079] {
    display: flex;
    gap: 10px;
    padding: 10px 10px 0 10px;
    flex-wrap: wrap;
}

.my-charts-kpi-item[b-sn08ule079] {
    flex: 1 1 0;
    min-width: 220px;
    height: 190px;
    position: relative;
    background: #1f2f45;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.my-charts-kpi-item .grid-stack-item-content[b-sn08ule079] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — Estado vacío y botón quitar
────────────────────────────────────────────── */

.my-charts-empty-state[b-sn08ule079] {
    height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.empty-state-title[b-sn08ule079] {
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 500;
    margin: 16px 0 8px 0;
}

.my-chart-remove-btn-wrap[b-sn08ule079] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.my-chart-remove-btn-wrap[b-sn08ule079] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* ──────────────────────────────────────────────
   MIS GRÁFICAS — Grid layout (sin GridStack)
────────────────────────────────────────────── */

.my-charts-grid[b-sn08ule079] {
    padding: 0 10px 20px 10px;
    min-height: 400px;
}
/* /Pages/Home/Components/Reportes/ReportFiltersSidebar.razor.rz.scp.css */
.reportes-panel[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    /* Restaurado para posicionamiento del pseudo-elemento de edición */
}

/* Estilos de posicionamiento ahora gestionados por LeftSidebar */

.reportes-scrollable-content[b-oyj0lr2ms2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25px 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reportes-title-header[b-oyj0lr2ms2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 35px;
    /* Ajuste para alinear con el gridstack que tiene 10px de margen */
    padding-right: 50px;
    /* Precise alignment with chart card edges */
    position: relative;
    z-index: 20;
}

.reportes-title-header h2[b-oyj0lr2ms2] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Slate-200 */
    text-transform: capitalize;
    letter-spacing: 0.05em;
    font-family: 'Segoe UI', sans-serif;
}

.header-divider[b-oyj0lr2ms2] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    /* Mucho más visible (0.4 opacity) */
    margin: 5px 0 25px 0;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    opacity: 0.8;
    /* Asegurar visibilidad global */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Sombra para darle relieve */
}


.reportes-actions[b-oyj0lr2ms2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.action-buttons-group[b-oyj0lr2ms2] {
    display: flex;
    gap: 8px;
    padding: 0;
}

.action-btn[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    /* Pill shape */
    background: rgba(30, 41, 59, 0.82);
    /* Dark slate background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-btn i[b-oyj0lr2ms2],
.action-btn svg[b-oyj0lr2ms2] {
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.action-btn:hover[b-oyj0lr2ms2] {
    transform: translateY(-2px);
    border-color: rgba(211, 59, 178, 0.5);
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.action-btn:hover i[b-oyj0lr2ms2],
.action-btn:hover svg[b-oyj0lr2ms2] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn.refresh-btn[b-oyj0lr2ms2] {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.action-btn.refresh-btn i[b-oyj0lr2ms2],
.action-btn.refresh-btn svg[b-oyj0lr2ms2] {
    color: rgba(255, 255, 255, 0.7) !important;
    filter: none;
    transition: all 0.3s ease;
}

.action-btn.refresh-btn:hover i[b-oyj0lr2ms2],
.action-btn.refresh-btn:hover svg[b-oyj0lr2ms2] {
    color: #D33BB2 !important;
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
    /* Explicitly keep the rotation for the refresh icon only on hover */
    transform: scale(1.1) rotate(15deg);
}

.action-btn.active[b-oyj0lr2ms2] {
    background: rgba(30, 41, 59, 0.82) !important;
    border-color: #D33BB2;
    color: #fff;
    box-shadow: 0 0 15px rgba(211, 59, 178, 0.4);
    outline: none !important;
}

.action-btn.active i[b-oyj0lr2ms2],
.action-btn.active svg[b-oyj0lr2ms2] {
    color: #D33BB2 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(211, 59, 178, 0.6));
}

.action-btn:disabled[b-oyj0lr2ms2],
.action-btn[disabled][b-oyj0lr2ms2] {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(30, 41, 59, 0.82) !important;
    color: #ffffff !important;
    opacity: 0.5 !important;
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-btn:hover[b-oyj0lr2ms2] {
    transform: translateY(-2px) scale(1.02);
}

.graficas-sidebar[b-oyj0lr2ms2] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.graficas-sidebar.open[b-oyj0lr2ms2] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}

.sidebar-header[b-oyj0lr2ms2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 15px;
}

.sidebar-header h3[b-oyj0lr2ms2] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    flex: 1;
}

.close-sidebar-btn[b-oyj0lr2ms2] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 32px;
    height: 32px;
}

.close-sidebar-btn:hover[b-oyj0lr2ms2] {
    background: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.sidebar-instructions[b-oyj0lr2ms2] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    line-height: 1.4;
}

.graficas-grid[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px 10px 0;
}

.graficas-grid[b-oyj0lr2ms2]::-webkit-scrollbar {
    width: 6px;
}

.graficas-grid[b-oyj0lr2ms2]::-webkit-scrollbar-track {
    background: transparent;
}

.graficas-grid[b-oyj0lr2ms2]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.agregar-btn[b-oyj0lr2ms2] {
    margin-top: 15px;
    padding: 12px;
    align-self: flex-start;
    background: #D33BB2;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.agregar-btn:hover[b-oyj0lr2ms2] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}


.filtros-sidebar[b-oyj0lr2ms2] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.filtros-sidebar.open[b-oyj0lr2ms2] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}


.filtro-section[b-oyj0lr2ms2] {
    margin-bottom: 20px;
}

.filtro-section label[b-oyj0lr2ms2] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-oyj0lr2ms2] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-oyj0lr2ms2] .filtro-input {
    flex: 1;
    background: #1f2f45 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-oyj0lr2ms2] {
    width: 100%;
    background: #2a3a4f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

/* FILTER CHIPS */
.filter-chips-container[b-oyj0lr2ms2] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 0 0 0 5px;
    animation: fadeIn-b-oyj0lr2ms2 0.4s ease-out;
}

.modal-filter-chips[b-oyj0lr2ms2] {
    padding: 10px 0;
    margin-bottom: 5px;
}

.filter-chip[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(211, 59, 178, 0.1);
    /* Magenta BG */
    border: 1px solid rgba(211, 59, 178, 0.2);
    border-radius: 20px;
    color: #E88AD4;
    /* Light Magenta */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    cursor: default;
}

.filter-chip:hover[b-oyj0lr2ms2] {
    background: rgba(211, 59, 178, 0.15);
    border-color: rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.1);
}

.filter-chip-label[b-oyj0lr2ms2] {
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 9px;
    margin-right: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.filter-chip-value[b-oyj0lr2ms2] {
    color: #f8fafc;
}

/* Specific Chip Colors matched from user screenshot */
.chip-period[b-oyj0lr2ms2] {
    background: linear-gradient(135deg, #e5b900 0%, #e5b900 100%) !important;
    border: none !important;
    color: #1a365d !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.15);
}

.chip-period .filter-chip-label[b-oyj0lr2ms2],
.chip-period .filter-chip-value[b-oyj0lr2ms2],
.chip-period .remove-filter-btn[b-oyj0lr2ms2] {
    color: #1a365d !important;
    opacity: 1 !important;
}

.chip-time[b-oyj0lr2ms2] {
    background: #1e293b !important;
    /* Branded Dark Slate Blue */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chip-time .filter-chip-label[b-oyj0lr2ms2] {
    color: rgba(255, 255, 255, 0.6) !important;
}

.chip-time .filter-chip-value[b-oyj0lr2ms2],
.chip-time .remove-filter-btn[b-oyj0lr2ms2] {
    color: #f8fafc !important;
}

.chip-comparison[b-oyj0lr2ms2] {
    background: rgba(211, 59, 178, 0.15) !important;
    border-color: rgba(211, 59, 178, 0.4) !important;
    color: #E88AD4 !important;
}

/* BLOCKED/DISABLED STATE */
.chip-disabled[b-oyj0lr2ms2] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    pointer-events: none;
    /* Disables all interactions including hover and clicks */
}

.chip-disabled .remove-filter-btn[b-oyj0lr2ms2] {
    display: none !important;
    /* Hide the X button when blocked */
}

.remove-filter-btn[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.remove-filter-btn:hover[b-oyj0lr2ms2] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    transform: rotate(90deg);
}

@keyframes fadeIn-b-oyj0lr2ms2 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filtro-toggle-row[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-oyj0lr2ms2] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-oyj0lr2ms2] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-oyj0lr2ms2] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-oyj0lr2ms2] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-oyj0lr2ms2] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-oyj0lr2ms2] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

/* AZURE-STYLE CATALOG ITEMS */
.azure-catalog-item:not(.ui-draggable-dragging)[b-oyj0lr2ms2] {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 80px;
    display: block !important;
    /* Reset gridstack absolute positioning for the sidebar only */
    top: auto !important;
    left: auto !important;
}

.azure-catalog-content[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid transparent !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.azure-catalog-content:active[b-oyj0lr2ms2] {
    cursor: grabbing;
    transform: scale(0.98);
}

.azure-catalog-content:hover[b-oyj0lr2ms2] {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-left-color: #D33BB2 !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    transform: translateX(4px) translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(211, 59, 178, 0.15);
}

.azure-catalog-item.selected-chart .azure-catalog-content[b-oyj0lr2ms2] {
    border: 1px solid #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.4), 0 10px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.azure-thumbnail[b-oyj0lr2ms2] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.azure-thumbnail img[b-oyj0lr2ms2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.azure-thumbnail span[b-oyj0lr2ms2] {
    font-size: 24px;
}

.azure-info[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.azure-title[b-oyj0lr2ms2] {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    letter-spacing: 0.3px;
}

.azure-desc[b-oyj0lr2ms2] {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-stack .grafica-option:hover[b-oyj0lr2ms2] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-oyj0lr2ms2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-oyj0lr2ms2 0.3s ease-out;
}


.filtros-sidebar[b-oyj0lr2ms2] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.filtros-sidebar.open[b-oyj0lr2ms2] {
    left: -32px;
    visibility: visible;
    border-radius: 0 16px 16px 0;
    opacity: 1;
}

.filtro-section[b-oyj0lr2ms2] {
    margin-bottom: 20px;
}

.filtro-section label[b-oyj0lr2ms2] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-oyj0lr2ms2] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

[b-oyj0lr2ms2] .filtro-input {
    flex: 1;
    background: #1f2f45 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 10px;
    color: white !important;
    font-size: 14px;
    color-scheme: dark;
}



.filtro-select[b-oyj0lr2ms2] {
    width: 100%;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.filtro-toggle-row[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-oyj0lr2ms2] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

.aplicar-btn[b-oyj0lr2ms2] {
    margin-top: auto;
    padding: 12px;
    background: #D33BB2;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.aplicar-btn:hover[b-oyj0lr2ms2] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.grid-stack[b-oyj0lr2ms2] {
    background: transparent;
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.grid-stack-item-content[b-oyj0lr2ms2] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}


.graficas-sidebar .grafica-option[b-oyj0lr2ms2] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

.graficas-sidebar[b-oyj0lr2ms2]  .reporte-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    height: auto !important;
    gap: 8px;
    transition: all 0.2s ease;
}


.graficas-sidebar[b-oyj0lr2ms2]  .reporte-card:hover {
    border-color: #D33BB2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.graficas-sidebar[b-oyj0lr2ms2]  .card-header {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.graficas-sidebar[b-oyj0lr2ms2]  .card-header h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    text-transform: none !important;
    text-align: left;
}


.graficas-sidebar[b-oyj0lr2ms2]  .card-content {
    order: 1 !important;
    width: 100%;
    height: 100px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    border: none !important;
    flex: none !important;
}


.graficas-sidebar[b-oyj0lr2ms2]  .card-options {
    display: none !important;
}

.grid-stack .grafica-option:hover[b-oyj0lr2ms2] {
    background: transparent !important;
    border-color: transparent !important;
}

/* MODAL GRAFICAS EXPANDIDAS*/

.modal-overlay[b-oyj0lr2ms2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInOverlay-b-oyj0lr2ms2 0.3s ease-out;
}

/* Contenido del Modal estilo Glass/Dark */
.modal-content[b-oyj0lr2ms2] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    width: 96%;
    max-width: 1600px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUpModal-b-oyj0lr2ms2 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo superior en el modal */
.modal-content[b-oyj0lr2ms2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

@keyframes fadeInOverlay-b-oyj0lr2ms2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-oyj0lr2ms2 {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-oyj0lr2ms2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h3[b-oyj0lr2ms2] {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-modal-btn[b-oyj0lr2ms2] {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    font-weight: bold;
}

.close-modal-btn:hover[b-oyj0lr2ms2] {
    background: transparent;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
    transform: scale(1.1);
}

.modal-body[b-oyj0lr2ms2] {
    flex: 1;
    overflow-y: auto;
    color: #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
}

.close-panel-btn[b-oyj0lr2ms2] {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    backdrop-filter: blur(12px);
    /* Standardized blur to match action buttons */
}

.close-panel-btn i[b-oyj0lr2ms2],
.close-panel-btn svg[b-oyj0lr2ms2] {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.close-panel-btn:hover[b-oyj0lr2ms2] {
    background: transparent;
    border-color: transparent;
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.8);
}

.close-panel-btn:hover i[b-oyj0lr2ms2],
.close-panel-btn:hover svg[b-oyj0lr2ms2] {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Estilos para el select de tipo de gráfica (migrado de ReporteCard) */
.chart-select[b-oyj0lr2ms2] {
    background-color: rgba(30, 41, 59, 0.7);
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 50px;
    text-overflow: ellipsis;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 8px center;
    background-size: 14px;
}

.chart-select:hover[b-oyj0lr2ms2] {
    background: linear-gradient(to bottom, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);

}

.chart-select:focus[b-oyj0lr2ms2] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.chart-select option[b-oyj0lr2ms2] {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 12px;
}

/* Empty State (sin tenant) */
.reportes-empty-state[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
}

.empty-state-icon[b-oyj0lr2ms2] {
    color: rgba(148, 163, 184, 0.4);
    margin-bottom: 4px;
}

.empty-state-text[b-oyj0lr2ms2] {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
}

/* Loading Indicator */
.reportes-loading-overlay[b-oyj0lr2ms2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.reportes-spinner[b-oyj0lr2ms2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #D33BB2;
    border-radius: 50%;
    animation: spin-b-oyj0lr2ms2 0.8s linear infinite;
}

.reportes-loading-text[b-oyj0lr2ms2] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.03em;
    animation: pulse-b-oyj0lr2ms2 1.5s ease-in-out infinite;
}

@keyframes spin-b-oyj0lr2ms2 {
    to {
        transform: rotate(360deg);
    }
}

.spinning[b-oyj0lr2ms2] {
    animation: spin-b-oyj0lr2ms2 1s linear infinite;
}

@keyframes pulse-b-oyj0lr2ms2 {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Switch Toggle (Time Machine) */
.switch[b-oyj0lr2ms2] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input[b-oyj0lr2ms2] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-oyj0lr2ms2] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider[b-oyj0lr2ms2]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider[b-oyj0lr2ms2] {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

input:checked+.slider[b-oyj0lr2ms2]:before {
    transform: translateX(20px);
    background-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.slider.round[b-oyj0lr2ms2] {
    border-radius: 34px;
}

.slider.round[b-oyj0lr2ms2]:before {
    border-radius: 50%;
}

/* Modal Filters Layout */
.expanded-filters[b-oyj0lr2ms2] {
    padding: 12px 20px;
}

.expanded-filters .filtro-select[b-oyj0lr2ms2],
.expanded-filters .filtro-input[b-oyj0lr2ms2] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transition: all 0.2s ease;
}

.expanded-filters .filtro-select:hover[b-oyj0lr2ms2],
[b-oyj0lr2ms2] .filtro-input:hover,
.expanded-filters .filtro-input:hover[b-oyj0lr2ms2] {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.expanded-filters .action-btn:hover[b-oyj0lr2ms2] {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    transform: translateY(-1px);
}

.expanded-filters .action-btn:disabled[b-oyj0lr2ms2] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========== Custom Time Dropdown ========== */
.time-dropdown[b-oyj0lr2ms2] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.time-dropdown-header[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.time-dropdown-list[b-oyj0lr2ms2] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    max-height: 165px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}

.time-dropdown-list[b-oyj0lr2ms2]::-webkit-scrollbar {
    width: 5px;
}

.time-dropdown-list[b-oyj0lr2ms2]::-webkit-scrollbar-track {
    background: transparent;
}

.time-dropdown-list[b-oyj0lr2ms2]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.time-dropdown-item[b-oyj0lr2ms2] {
    padding: 6px 12px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.time-dropdown-item:hover[b-oyj0lr2ms2] {
    background: rgba(14, 165, 233, 0.15);
    color: #e2e8f0;
}

.time-dropdown-item.active[b-oyj0lr2ms2] {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

/* MODAL 3-SECTION LAYOUT */
.modal-layout-container[b-oyj0lr2ms2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding-bottom: 5px;
    min-height: 0;
}

.modal-top-section[b-oyj0lr2ms2] {
    display: flex;
    gap: 24px;
    flex: 6;
    min-height: 0;
    overflow: hidden;
}

.modal-sidebar-filters[b-oyj0lr2ms2] {
    flex: 0 0 300px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 16px;
    min-height: 0;
}

.modal-chart-section[b-oyj0lr2ms2] {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    min-height: 0;
}

.modal-grid-section[b-oyj0lr2ms2] {
    flex: 4;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
}

/* BRANDED MODAL REFINEMENTS */
.modal-refresh-btn[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    background: rgba(211, 59, 178, 0.1);
    border: 1px solid rgba(211, 59, 178, 0.2);
    border-radius: 8px;
    color: #d33bb2;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.05);
}

.modal-refresh-btn span[b-oyj0lr2ms2] {
    font-size: 13px;
    font-weight: 600;
}

.modal-refresh-btn:hover:not(:disabled)[b-oyj0lr2ms2] {
    background: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(211, 59, 178, 0.15);
}

.modal-refresh-btn:active:not(:disabled)[b-oyj0lr2ms2] {
    transform: scale(0.98);
}

.modal-refresh-btn:disabled[b-oyj0lr2ms2] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.modal-refresh-btn svg.spinning[b-oyj0lr2ms2] {
    animation: spin-b-oyj0lr2ms2 1s linear infinite;
}

/* Branded Switch Toggle */
.time-machine-toggle-branded[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(211, 59, 178, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(211, 59, 178, 0.15);
}

.switch-branded[b-oyj0lr2ms2] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch-branded input[b-oyj0lr2ms2] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-branded[b-oyj0lr2ms2] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(71, 85, 105, 0.4);
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-branded[b-oyj0lr2ms2]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 1px;
    background-color: #94a3b8;
    transition: .4s;
}

input:checked+.slider-branded[b-oyj0lr2ms2] {
    background-color: rgba(211, 59, 178, 0.2);
    border-color: rgba(211, 59, 178, 0.4);
}

input:checked+.slider-branded[b-oyj0lr2ms2]:before {
    transform: translateX(16px);
    background-color: #d33bb2;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.4);
}

.slider-branded.round[b-oyj0lr2ms2] {
    border-radius: 34px;
}

.slider-branded.round[b-oyj0lr2ms2]:before {
    border-radius: 50%;
}

.toggle-label[b-oyj0lr2ms2] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

input:checked~.toggle-label[b-oyj0lr2ms2] {
    color: #d33bb2;
}

/* === MEJORAS MODO EDICIÓN (REFINAMIENTO ORO) === */

.is-editing-active[b-oyj0lr2ms2] {
    position: relative;
    z-index: 1;
}

/* Oscurecimiento de fondo (Profundidad) - Sutil */
.is-editing-active[b-oyj0lr2ms2]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(15, 23, 42, 0.15);
    /* Muy sutil */
    backdrop-filter: blur(2px);
    border-radius: 30px;
    z-index: -1;
    animation: fadeInOverlay-b-oyj0lr2ms2 0.5s ease-out forwards;
    pointer-events: none;
}

/* Borde Guía en Edición (Dorado) */
.is-editing-active[b-oyj0lr2ms2]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 24px;
    bottom: 5px;
    right: 24px;
    border: 3.5px dashed rgba(229, 185, 0, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 0;
    animation: borderGoldPulse-b-oyj0lr2ms2 4s infinite ease-in-out;
}

@keyframes borderGoldPulse-b-oyj0lr2ms2 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
    }
}

/* Indicador Pill Amarillo (Estilo Ref imagen) */
.edit-mode-tag.gold[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e293b;
    /* Fondo oscuro sólido como la imagen */
    border: 1.5px solid #e5b900;
    padding: 6px 18px;
    border-radius: 30px;
    color: #e5b900;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(229, 185, 0, 0.2);
    animation: indicatorFadeSlide-b-oyj0lr2ms2 0.5s ease-out;
    /* Ajuste para centrar en el header */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes indicatorFadeSlide-b-oyj0lr2ms2 {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.pulse-dot[b-oyj0lr2ms2] {
    width: 8px;
    height: 8px;
    background-color: #e5b900;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px #e5b900;
}

.pulse-dot[b-oyj0lr2ms2]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: goldRingPulse-b-oyj0lr2ms2 2s infinite ease-out;
}

@keyframes goldRingPulse-b-oyj0lr2ms2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Animación de Resplandor Estático solo para tarjetas editables (Sin movimiento) */
.is-editing-active[b-oyj0lr2ms2]  .is-card-editable {
    border: 1px solid rgba(229, 185, 0, 0.2) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    animation: cardGlowPulse-b-oyj0lr2ms2 4s infinite ease-in-out;
}

@keyframes cardGlowPulse-b-oyj0lr2ms2 {

    0%,
    100% {
        border-color: rgba(229, 185, 0, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    50% {
        border-color: rgba(229, 185, 0, 0.5);
        box-shadow: 0 4px 20px rgba(229, 185, 0, 0.15), 0 12px 30px rgba(0, 0, 0, 0.4);
    }
}

.is-editing-active[b-oyj0lr2ms2]  .is-card-editable:hover {
    border-color: #e5b900 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 185, 0, 0.2) !important;
    z-index: 10;
}

/* Efecto al arrastrar */
.is-editing-active[b-oyj0lr2ms2]  .grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
    animation: none;
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: #e5b900 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 185, 0, 0.4) !important;
    transform: scale(1.02) !important;
}

/* Ocultar elementos antiguos */
.edit-mode-toast[b-oyj0lr2ms2],
.editing-badge[b-oyj0lr2ms2] {
    display: none !important;
}

.badge-dot[b-oyj0lr2ms2] {
    width: 6px;
    height: 6px;
    background-color: #D33BB2;
    border-radius: 50%;
    box-shadow: 0 0 8px #D33BB2;
}

@keyframes badgePulse-b-oyj0lr2ms2 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Forzar visibilidad de manejadores de GridStack */
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-handle {
    display: block !important;
    opacity: 1 !important;
}

/* Ocultar iconos blancos de los laterales (s, e, w) pero mantener el área interactiva */
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-s,
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-e,
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-w,
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-n {
    background-image: none !important;
}

/* Asegurar que las esquinas (se, sw) mantengan su icono original pero en color blanco */
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-se,
.is-editing-active[b-oyj0lr2ms2]  .ui-resizable-sw {
    width: 20px !important;
}

/* <--- LA LLAVE QUE FALTABA PARA CERRAR EL BLOQUE Y SALVAR LA PÁGINA */

/* Deshabilitar interacción con botones de acción cuando están disabled */
.action-btn:disabled[b-oyj0lr2ms2] {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1);
}

.delete-btn[b-oyj0lr2ms2] {
    background: rgba(239, 68, 68, 0.1);
    /* Fondo sutil rojo */
    border: none;
    color: #ef4444;
    /* Rojo por defecto */
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn svg[b-oyj0lr2ms2] {
    width: 17px;
    /* Aumentado a 17px según solicitud */
    height: 17px;
}

.delete-btn:hover[b-oyj0lr2ms2] {
    color: #fca5a5;
    /* Rojo más claro/brillante al hacer hover */
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}

.shop-status-toggle[b-oyj0lr2ms2] {
    display: flex;
    background: #0f172a;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-status-btn[b-oyj0lr2ms2] {
    flex: 1;
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.shop-status-btn:hover[b-oyj0lr2ms2] {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
}

.shop-status-btn.active[b-oyj0lr2ms2] {
    background: #334155;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.reportes-tabs-container[b-oyj0lr2ms2] {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reportes-tabs[b-oyj0lr2ms2] {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.reportes-tabs.w-100[b-oyj0lr2ms2] {
    width: 100%;
}

.tab-btn[b-oyj0lr2ms2] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 5px 16px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Segoe UI', sans-serif;
}

.tab-btn:hover[b-oyj0lr2ms2] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active[b-oyj0lr2ms2] {
    background: #e5b900;
    color: #1a365d;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(229, 185, 0, 0.3);
    border: none;
}
/* /Pages/Home/Components/Setting/Company/CompanyDetailPanel.razor.rz.scp.css */
.company-detail-panel[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    height: 100%;
    min-height: 0;
    overflow: clip;
    /* clip no recorta box-shadow de hijos como hidden */
    flex: 1;
    width: 430px;
    min-width: 430px;
    max-width: 430px;
}

.company-header-fixed[b-xm752azppp] {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    min-height: 130px;
}

/* Back Button Styles - Overlay on Image */
.back-nav-btn[b-xm752azppp] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(84, 101, 117, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.back-nav-btn:hover[b-xm752azppp] {
    background: rgba(60, 75, 89, 0.95);
    transform: scale(1.05);
}

.company-logo[b-xm752azppp] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background: #E9EDF0;
    /* Matching the main panel light grey */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF00FF;
    /* Icon color in magenta */
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.company-logo-img[b-xm752azppp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-info[b-xm752azppp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 0;
    /* Align top with image */
    justify-content: flex-start;
    min-width: 0;
    padding-right: 10px;
    /* Prevent text collision with absolute edit button */
}

.company-name[b-xm752azppp] {
    font-size: 24px;
    /* Requested size */
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: break-word;
}

.company-industry-badge[b-xm752azppp] {
    display: inline-block;
    background-color: #dea301;
    color: #1a2a42;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    /* Requested size */
    font-weight: 700;
    margin: 8px 0;
    align-self: flex-start;
    letter-spacing: 0.3px;
}

/* ... existing meta ... */
.company-meta[b-xm752azppp] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    min-width: 0;
}

.meta-item[b-xm752azppp] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.meta-label[b-xm752azppp] {
    font-size: 13px;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    flex-shrink: 0;
}

.meta-label[b-xm752azppp]::after {
    content: ":";
}

.meta-value[b-xm752azppp] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

/* Position edit button in the top right corner of the header area */
.company-actions[b-xm752azppp] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    z-index: 10;
}

.edit-btn[b-xm752azppp] {
    /* Refined match for Image 2 */
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FE00E4;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 8px 16px;
    /* Slightly more compact */
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-btn:hover[b-xm752azppp] {
    background: #D500C0;
    box-shadow: 0 6px 6px rgba(255, 0, 255, 0.35);
}

.list-header[b-xm752azppp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Divider */
    margin-top: 8px;
    flex-shrink: 0;
}

.list-header-text[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.panel-title[b-xm752azppp] {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.panel-subtitle[b-xm752azppp] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    margin: 0;
}

.add-store-btn[b-xm752azppp] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.add-store-btn:hover[b-xm752azppp] {
    transform: rotate(90deg) scale(1.05);
    background: #FE00E4;
    border-color: #FE00E4;
    color: white;
    box-shadow: 0 4px 10px rgba(254, 0, 228, 0.3);
}

.add-store-btn svg[b-xm752azppp] {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
}

.company-scrollable-content[b-xm752azppp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
    padding-left: 6px;
    /* espacio para que la sombra izquierda de las cards no se corte */
    padding-right: 6px;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Empty state when company has no stores */
.empty-stores-state[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    flex: 1;
}

.empty-stores-icon[b-xm752azppp] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8898AA;
    margin-bottom: 16px;
}

.empty-stores-title[b-xm752azppp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.empty-stores-subtitle[b-xm752azppp] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
    max-width: 260px;
}

/* Empty State Unified MAUI Design (Light Theme variation) */
.inbox-empty-container[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 12px 20px;
    height: 100%;
    width: 100%;
}

.empty-state-img[b-xm752azppp] {
    width: 155px;
    max-width: 100%;
    height: auto;
    margin-top: -15px;
    margin-bottom: 0px;
    opacity: 0.95;
}

.empty-state-text[b-xm752azppp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: lowercase;
    margin-top: -25px;
    margin-bottom: 8px;
}

.empty-state-buttons[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.btn-empty-create[b-xm752azppp] {
    background: linear-gradient(135deg, #e500cd, #c800b0);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.3);
}

.btn-empty-create:hover[b-xm752azppp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(229, 0, 205, 0.5);
}

.btn-empty-create:active[b-xm752azppp] {
    transform: translateY(0);
}

.btn-empty-join[b-xm752azppp] {
    background: #5c6f84;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-empty-join:hover[b-xm752azppp] {
    background: #4b5c6e;
    transform: translateY(-2px);
}

.btn-empty-join:active[b-xm752azppp] {
    transform: translateY(0);
}
/* /Pages/Home/Components/Setting/Company/CompanyEditModal.razor.rz.scp.css */
.companyedit-overlay[b-3l8pq9qdb4] {
    position: fixed;
    top: 0;
    left: 80px;
    width: calc(100vw - 80px);
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.companyedit-overlay.sidebar-collapsed[b-3l8pq9qdb4] {
    left: 0px;
    width: 100%;
}

.companyedit-modal[b-3l8pq9qdb4] {
    background-color: #ffffff;
    border-radius: 20px;
    width: 900px;
    max-width: 90vw;
    height: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInScale-b-3l8pq9qdb4 0.3s ease-out;
    overflow: hidden;
}

@keyframes fadeInScale-b-3l8pq9qdb4 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header */
.companyedit-header[b-3l8pq9qdb4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 32px 16px;
    border-bottom: 1px solid #E8EBED;
}

.header-title[b-3l8pq9qdb4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
}

.header-subtitle[b-3l8pq9qdb4] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: #8898AA;
    font-weight: 500;
}

.header-actions[b-3l8pq9qdb4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-close-modal[b-3l8pq9qdb4] {
    background: transparent;
    border: none;
    color: #8898AA;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    transition: all 0.2s;
}

.btn-close-modal:hover[b-3l8pq9qdb4] {
    background: #F1F4F8;
    color: #334D6E;
}

/* Body */
.companyedit-body[b-3l8pq9qdb4] {
    flex: 1;
    display: flex;
    padding: 0;
    overflow: hidden;
}

/* Main Column */
.main-column[b-3l8pq9qdb4] {
    flex: 1;
    padding: 24px 32px;
    border-right: 1px solid #E8EBED;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Toggle Switch */
.form-toggle-group[b-3l8pq9qdb4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.toggle-switch[b-3l8pq9qdb4] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-3l8pq9qdb4] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-3l8pq9qdb4] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E8EBED;
    transition: .3s;
}

.slider[b-3l8pq9qdb4]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider.round[b-3l8pq9qdb4] {
    border-radius: 24px;
}

.slider.round[b-3l8pq9qdb4]:before {
    border-radius: 50%;
}

input:checked+.slider[b-3l8pq9qdb4] {
    background-color: #00D06A;
}

input:checked+.slider[b-3l8pq9qdb4]:before {
    transform: translateX(20px);
}

.toggle-label[b-3l8pq9qdb4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #00D06A;
}

input:not(:checked)+.slider+.toggle-label[b-3l8pq9qdb4] {
    color: #8898AA;
}

/* Forms */
.form-grid[b-3l8pq9qdb4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.form-group[b-3l8pq9qdb4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-3l8pq9qdb4] {
    grid-column: 1 / -1;
}

.form-label[b-3l8pq9qdb4] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334D6E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-toggle-row[b-3l8pq9qdb4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-toggle-label[b-3l8pq9qdb4] {
    font-size: 0.875rem;
    font-weight: 600;
}

.status-toggle-label.active[b-3l8pq9qdb4] {
    color: #4CAF50;
}

.status-toggle-label.inactive[b-3l8pq9qdb4] {
    color: #94a3b8;
}

.form-control[b-3l8pq9qdb4],
.form-select[b-3l8pq9qdb4] {
    padding: 10px 14px;
    border: 1px solid #E8EBED;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #334D6E;
    font-family: inherit;
    transition: all 0.2s;
    background-color: #FCFDFD;
}

.form-control:focus[b-3l8pq9qdb4],
.form-select:focus[b-3l8pq9qdb4] {
    outline: none;
    border-color: #FECB00;
    box-shadow: 0 0 0 3px rgba(254, 203, 0, 0.15);
    background-color: #FFFFFF;
}

.form-control[b-3l8pq9qdb4]::placeholder {
    color: #A3B5C6;
}

select.form-select[b-3l8pq9qdb4],
select.form-control[b-3l8pq9qdb4] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238898AA' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    padding-right: 32px;
}

/* Delete Profile */
.delete-profile-section[b-3l8pq9qdb4] {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-profile-label[b-3l8pq9qdb4] {
    font-size: 0.875rem;
    color: #334D6E;
    font-weight: 500;
}

.btn-delete-profile[b-3l8pq9qdb4] {
    background: transparent;
    border: 1px solid #FF3B30;
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-profile:hover[b-3l8pq9qdb4] {
    background: #FFF2F1;
}

/* Photo Column */
.photo-column[b-3l8pq9qdb4] {
    width: 250px;
    background-color: #F8FAFB;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-preview[b-3l8pq9qdb4] {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: contain;
    background-color: #E9EDF0;
    /* New light grey/blue background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
    border: 1px solid #E8EBED;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.photo-preview.placeholder[b-3l8pq9qdb4] {
    color: #FF00FF;
    /* Magenta color for the default icon */
}

.photo-label[b-3l8pq9qdb4] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.photo-actions[b-3l8pq9qdb4] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.btn-upload-foto[b-3l8pq9qdb4] {
    flex: 1;
    background: white;
    border: 1px solid #E8EBED;
    color: #334D6E;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-upload-foto:hover[b-3l8pq9qdb4] {
    border-color: #FECB00;
    color: #FECB00;
}

.btn-camera-icon[b-3l8pq9qdb4] {
    width: 36px;
    background: white;
    border: 1px solid #E8EBED;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-camera-icon:hover[b-3l8pq9qdb4] {
    color: #334D6E;
    border-color: #A3B5C6;
}

/* Footer */
.companyedit-footer[b-3l8pq9qdb4] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid #E8EBED;
    background-color: #F8FAFB;
}

.btn-secondary[b-3l8pq9qdb4] {
    background: white;
    border: 1px solid #E8EBED;
    color: #334D6E;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover:not(:disabled)[b-3l8pq9qdb4] {
    background: #F1F4F8;
}

.btn-primary[b-3l8pq9qdb4] {
    background: #FF00FF;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-3l8pq9qdb4] {
    background: #D500C0;
    transform: translateY(-1px);
}

.btn-primary:disabled[b-3l8pq9qdb4],
.btn-secondary:disabled[b-3l8pq9qdb4] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-spinner[b-3l8pq9qdb4] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-3l8pq9qdb4 1s ease-in-out infinite;
}

@keyframes spin-b-3l8pq9qdb4 {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar styles for main column */
.main-column[b-3l8pq9qdb4]::-webkit-scrollbar {
    width: 6px;
}

.main-column[b-3l8pq9qdb4]::-webkit-scrollbar-track {
    background: transparent;
}

.main-column[b-3l8pq9qdb4]::-webkit-scrollbar-thumb {
    background: #E8EBED;
    border-radius: 3px;
}

.main-column[b-3l8pq9qdb4]::-webkit-scrollbar-thumb:hover {
    background: #A3B5C6;
}
/* /Pages/Home/Components/Setting/Company/CompanyPanel.razor.rz.scp.css */
/* CompanyPanel.razor.css */

/* Reusing generic container structure from InboxPanel */
.inbox-panel-container[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
}

/* Search Wrapper */
.inbox-search-wrapper[b-3263r7v37u] {
    padding: 12px 12px 12px 12px;
    flex-shrink: 0;
}

/* Panel Header (Title + Subtitle) */
.panel-header-text[b-3263r7v37u] {
    padding: 12px 12px 0 12px;
    flex-shrink: 0;
}

.panel-title[b-3263r7v37u] {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.panel-subtitle[b-3263r7v37u] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 500;
    margin: 4px 0 0;
}

.inbox-search[b-3263r7v37u] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 12px;
    gap: 8px;
}

.search-icon[b-3263r7v37u] {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.search-input[b-3263r7v37u] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 14px;
}

.search-input[b-3263r7v37u]::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.clear-search[b-3263r7v37u] {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.clear-search:hover[b-3263r7v37u] {
    background: rgba(255, 255, 255, 0.3);
}

.clear-search svg[b-3263r7v37u] {
    width: 12px;
    height: 12px;
    color: white;
}

/* Company List Container */
.inbox-groups[b-3263r7v37u] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px 12px;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inbox-groups[b-3263r7v37u]::-webkit-scrollbar {
    display: none;
}

.company-card-list[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Loading State */
.loading-state[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.85);
}

.loading-state .spinner[b-3263r7v37u] {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #FE00E4;
    border-radius: 50%;
    animation: company-panel-spin-b-3263r7v37u 0.8s linear infinite;
}

@keyframes company-panel-spin-b-3263r7v37u {
    to {
        transform: rotate(360deg);
    }
}

.loading-state span[b-3263r7v37u] {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Empty State */
.inbox-empty[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.inbox-empty svg[b-3263r7v37u] {
    width: 48px;
    height: 48px;
}

.inbox-empty span[b-3263r7v37u] {
    font-size: 14px;
}

/* ==========================================================================
   COMPANY CARD STYLES (Matching Figure 2)
   ========================================================================== */

.company-card[b-3263r7v37u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 80px;
}

.company-card:hover[b-3263r7v37u] {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.company-card-left[b-3263r7v37u] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.company-logo-wrapper[b-3263r7v37u] {
    width: 100px;
    height: 100px;
    background: #E9EDF0;
    /* Light grey/blue background instead of black */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.company-logo-img[b-3263r7v37u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0px;
}

.company-logo-placeholder[b-3263r7v37u] {
    color: #FF00FF;
    /* Using the standard Magenta for the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.company-logo-placeholder svg[b-3263r7v37u] {
    width: 32px;
    height: 32px;
}

/* Info Section */
.company-info[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.company-name[b-3263r7v37u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A365D;
    /* Dark blue text */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-id[b-3263r7v37u] {
    font-size: 0.9rem;
    color: #556B85;
    font-weight: 500;
}

.company-subtitle[b-3263r7v37u] {
    font-size: 0.8rem;
    color: #8899AA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View More Button */
.view-more-btn[b-3263r7v37u] {
    background: #FE00E4;
    /* Pink/Magenta button */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    margin-left: 12px;
}

.view-more-btn:hover[b-3263r7v37u] {
    background: #8F1483;
    transform: scale(1.05);
}

.view-more-btn:active[b-3263r7v37u] {
    transform: scale(0.95);
}

/* ==========================================================================
   STATIC SIZE & FAB STYLES
   ========================================================================== */

/* Override/Extend container to force static size look */
/* Override/Extend container to force static size look */
.inbox-panel-container[b-3263r7v37u] {
    height: 100%;
    /* Fill the dynamic panel */
    max-height: none;
    position: relative;
    /* Context for FAB */
    display: flex;
    flex-direction: column;
}

/* Floating Action Button (+) */
.company-fab-add[b-3263r7v37u] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: #FE00E4;
    /* Pink/Magenta */
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    z-index: 10;
}

.company-fab-add:hover[b-3263r7v37u] {
    background: #D500C0;
    transform: scale(1.1) rotate(90deg);
}

.company-fab-add:active[b-3263r7v37u] {
    transform: scale(0.95) rotate(90deg);
}

.company-fab-add svg[b-3263r7v37u] {
    width: 24px;
    height: 24px;
}

/* Empty State Unified MAUI Design */
.inbox-empty-container[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 12px 20px;
    height: 100%;
    width: 100%;
}

.empty-state-img[b-3263r7v37u] {
    width: 155px;
    max-width: 100%;
    height: auto;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state-text[b-3263r7v37u] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #cbd5e1;
    text-transform: lowercase;
    margin-bottom: 8px;
}

.empty-state-buttons[b-3263r7v37u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.btn-empty-create[b-3263r7v37u] {
    background: linear-gradient(135deg, #e500cd, #c800b0);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.3);
}

.btn-empty-create:hover[b-3263r7v37u] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(229, 0, 205, 0.5);
}

.btn-empty-create:active[b-3263r7v37u] {
    transform: translateY(0);
}

.btn-empty-join[b-3263r7v37u] {
    background: #5c6f84;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-empty-join:hover[b-3263r7v37u] {
    background: #4b5c6e;
    transform: translateY(-2px);
}

.btn-empty-join:active[b-3263r7v37u] {
    transform: translateY(0);
}
/* /Pages/Home/Components/Setting/Department/Components/Documents/DocumentTypesPanel.razor.rz.scp.css */
.doctypes-panel[b-x0fvb3yns0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 20px;
    color: #1e2f45;
    height: 100%;
    overflow: auto;
}

.doctypes-head[b-x0fvb3yns0] { display: flex; align-items: flex-start; gap: 16px; }
.doctypes-head h3[b-x0fvb3yns0] { margin: 0; font-size: 18px; font-weight: 700; }

.doctypes-head p[b-x0fvb3yns0] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #64748b;
    max-width: 68ch;
}

.doctypes-head-actions[b-x0fvb3yns0] { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

.doctypes-primary[b-x0fvb3yns0] {
    border: 1px solid #d81b84;
    background: #d81b84;
    color: #ffffff;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.doctypes-primary:hover:enabled[b-x0fvb3yns0] { background: #eb5bb6; border-color: #eb5bb6; }
.doctypes-primary:disabled[b-x0fvb3yns0] { opacity: 0.5; cursor: not-allowed; }

.doctypes-secondary[b-x0fvb3yns0] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.doctypes-secondary:hover:enabled[b-x0fvb3yns0] { border-color: #d81b84; color: #d81b84; background: #fdf0f7; }
.doctypes-secondary:disabled[b-x0fvb3yns0] { opacity: 0.5; cursor: not-allowed; }

.doctypes-notice[b-x0fvb3yns0] {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
}

.doctypes-notice.is-ok[b-x0fvb3yns0] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #15803d; }
.doctypes-notice.is-error[b-x0fvb3yns0] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.doctypes-table[b-x0fvb3yns0] { display: flex; flex-direction: column; }

.doctypes-row[b-x0fvb3yns0] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 1fr 64px 96px 72px 48px;
    gap: 10px;
    align-items: center;
    padding: 8px 6px;
    border-top: 1px solid #e3e9ef;
}

.doctypes-row:last-of-type[b-x0fvb3yns0] { border-bottom: 1px solid #e3e9ef; }
.doctypes-row.is-new[b-x0fvb3yns0] { background: #fdf7fb; }

.doctypes-row-head[b-x0fvb3yns0] {
    border-top: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8898aa;
    padding-bottom: 4px;
}

.doctypes-center[b-x0fvb3yns0] { text-align: center; }

.doctypes-input[b-x0fvb3yns0] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #1e2f45;
    background: #ffffff;
    width: 100%;
}

.doctypes-input:focus-visible[b-x0fvb3yns0] { outline: none; border-color: #d81b84; box-shadow: 0 0 0 2px rgba(216, 27, 132, 0.25); }
.doctypes-input:disabled[b-x0fvb3yns0] { background: #f5f9fa; color: #64748b; }
.doctypes-code[b-x0fvb3yns0] { font-weight: 600; letter-spacing: 0.04em; }

.doctypes-color input[b-x0fvb3yns0] {
    width: 44px;
    height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    padding: 2px;
    cursor: pointer;
}

.doctypes-row-actions[b-x0fvb3yns0] { display: flex; justify-content: flex-end; }

.doctypes-icon[b-x0fvb3yns0] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #8898aa;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.doctypes-icon:hover:enabled[b-x0fvb3yns0] { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.doctypes-icon:disabled[b-x0fvb3yns0] { opacity: 0.4; cursor: not-allowed; }

.doctypes-empty[b-x0fvb3yns0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f5f9fa;
    padding: 40px 24px;
}

.doctypes-empty p[b-x0fvb3yns0] { margin: 0; color: #64748b; font-size: 13px; }
.doctypes-foot[b-x0fvb3yns0] { margin: 0; font-size: 11.5px; color: #8898aa; }

@media (max-width: 900px) {
    .doctypes-row[b-x0fvb3yns0] { grid-template-columns: minmax(0, 2fr) 1fr 64px 48px; }
    .doctypes-row > .doctypes-center:nth-child(4)[b-x0fvb3yns0],
    .doctypes-row > .doctypes-center:nth-child(5)[b-x0fvb3yns0] { display: none; }
}
/* /Pages/Home/Components/Setting/Department/Components/JobTitlesLevels/JobTitleEditPanel.razor.rz.scp.css */
.jobtitle-edit-panel[b-e20rdf7f4g] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 850px;
    height: 100%;
    box-sizing: border-box;
}

/* ---- Modo embebido: sin tarjeta propia, integrado al tema oscuro del RightSidebar ---- */
.jobtitle-edit-panel.embedded[b-e20rdf7f4g] {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 4px 0;
    min-width: 0;
    width: 100%;
}

.jobtitle-edit-panel.embedded .jte-main-layout[b-e20rdf7f4g] {
    gap: 0;
    width: 100%;
    min-width: 0;
}

.jobtitle-edit-panel.embedded .jte-body[b-e20rdf7f4g] {
    width: 100%;
    min-width: 0;
}

.jobtitle-edit-panel.embedded .jte-avatar[b-e20rdf7f4g] {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.jobtitle-edit-panel.embedded .jte-avatar svg[b-e20rdf7f4g] {
    fill: rgba(255, 255, 255, 0.5);
}

.jobtitle-edit-panel.embedded .jte-toggle-label.inactive[b-e20rdf7f4g] {
    color: #f87171;
}

.jobtitle-edit-panel.embedded .form-label[b-e20rdf7f4g] {
    color: rgba(255, 255, 255, 0.85);
}

.jobtitle-edit-panel.embedded .form-select[b-e20rdf7f4g] {
    background-color: #2a3a4f;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.jobtitle-edit-panel.embedded .form-select:focus[b-e20rdf7f4g] {
    border-color: #D33BB2;
    background-color: #2a3a4f;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.2);
}

.jobtitle-edit-panel.embedded .jte-info-section[b-e20rdf7f4g] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.jobtitle-edit-panel.embedded .info-title[b-e20rdf7f4g] {
    color: rgba(255, 255, 255, 0.85);
}

.jobtitle-edit-panel.embedded .info-desc[b-e20rdf7f4g] {
    color: rgba(255, 255, 255, 0.5);
}

.jobtitle-edit-panel.embedded .jte-footer[b-e20rdf7f4g] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.jobtitle-edit-panel.embedded .btn-secondary[b-e20rdf7f4g] {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.jobtitle-edit-panel.embedded .btn-secondary:hover[b-e20rdf7f4g] {
    background: rgba(255, 255, 255, 0.15);
}

.jobtitle-edit-panel.embedded .btn-primary[b-e20rdf7f4g] {
    background: #D33BB2;
}

.jobtitle-edit-panel.embedded .btn-primary:hover[b-e20rdf7f4g] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

.jte-header[b-e20rdf7f4g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #E8EBED;
    padding-bottom: 10px;
}

.jte-header-text[b-e20rdf7f4g] {
    min-width: 0;
}

.jte-header-actions[b-e20rdf7f4g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.jte-title[b-e20rdf7f4g] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.jte-subtitle[b-e20rdf7f4g] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.jte-main-layout[b-e20rdf7f4g] {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.jte-body[b-e20rdf7f4g] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.jte-body[b-e20rdf7f4g]::-webkit-scrollbar {
    display: none;
}

.jte-main-layout.split .jte-body[b-e20rdf7f4g] {
    width: 340px;
    flex: none;
    flex-shrink: 0;
}

.jte-permissions-col[b-e20rdf7f4g] {
    flex: 1;
    min-width: 380px;
    padding-left: 15px;
    padding-bottom: 15px;
    border-left: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* La lista de features scrollea dentro del RoleEditPanel embebido (.re-body); acá solo se oculta
   la barra sin quitar el scroll. */
.jte-permissions-col[b-e20rdf7f4g]  .re-body {
    scrollbar-width: none;
}

.jte-permissions-col[b-e20rdf7f4g]  .re-body::-webkit-scrollbar {
    display: none;
}

.jte-avatar-section[b-e20rdf7f4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 0px 20px;
    margin-bottom: 8px;
}

.jte-avatar[b-e20rdf7f4g] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #E8EBED;
    border: 1px solid #c4cdd5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jte-toggle-section[b-e20rdf7f4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.jte-toggle-section--header[b-e20rdf7f4g] {
    flex-direction: row;
    gap: 8px;
}

.jte-toggle-label[b-e20rdf7f4g] {
    font-size: 0.85rem;
    font-weight: 600;
}

.jte-toggle-label.active[b-e20rdf7f4g] {
    color: #4CAF50;
}

.jte-toggle-label.inactive[b-e20rdf7f4g] {
    color: #f44336;
}

/* Switch */
.toggle-switch[b-e20rdf7f4g] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-e20rdf7f4g] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-e20rdf7f4g] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-e20rdf7f4g]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider[b-e20rdf7f4g] {
    background-color: #4CAF50;
}

input:checked+.slider[b-e20rdf7f4g]:before {
    transform: translateX(20px);
}

.form-label[b-e20rdf7f4g] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

.form-select[b-e20rdf7f4g] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #f1f5f9;
    font-size: 0.9rem;
    color: #334D6E;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.form-select:focus[b-e20rdf7f4g] {
    border-color: #0E223B;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 34, 59, 0.1);
}

.jte-info-section[b-e20rdf7f4g] {
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-e20rdf7f4g] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-e20rdf7f4g] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.btn-delete-profile[b-e20rdf7f4g] {
    margin-right: auto;
    background: transparent;
    color: #FF00FF;
    border: 1px solid #FF00FF;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-profile:hover[b-e20rdf7f4g] {
    background: #FFF0FF;
}

.jte-footer[b-e20rdf7f4g] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-e20rdf7f4g] {
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #E2E8F0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secondary:hover[b-e20rdf7f4g] {
    background: #CBD5E1;
}

.btn-primary[b-e20rdf7f4g] {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    background: #FF00FF;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-primary:hover[b-e20rdf7f4g] {
    background: #e600e6;
}

.btn-primary:disabled[b-e20rdf7f4g] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Selección de Cargo EN LÍNEA (caso embebido dentro de un RightSidebar) ---- */
.jte-inline-picker[b-e20rdf7f4g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
}

.jte-inline-back[b-e20rdf7f4g] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.jte-inline-back:hover[b-e20rdf7f4g] {
    background: rgba(255, 255, 255, 0.08);
    color: #D33BB2;
}

.jte-inline-search[b-e20rdf7f4g] {
    margin-bottom: 4px;
}

.jte-inline-search-input[b-e20rdf7f4g] {
    width: 100%;
    box-sizing: border-box;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.jte-inline-search-input[b-e20rdf7f4g]::placeholder {
    color: #64748b;
}

.jte-inline-search-input:focus[b-e20rdf7f4g] {
    border-color: rgba(255, 255, 255, 0.2);
    background: #233145;
}

.jte-inline-subtitle[b-e20rdf7f4g] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 4px 0;
    text-transform: lowercase;
}

.jte-inline-empty[b-e20rdf7f4g] {
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.jte-inline-grid[b-e20rdf7f4g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.mt-auto[b-e20rdf7f4g] {
    margin-top: auto;
}

.w-100[b-e20rdf7f4g] {
    width: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/JobTitlesLevels/JobTitleLevelEditPanel.razor.rz.scp.css */
.worklevel-edit-panel[b-x95fqw3t5b] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    min-width: 400px;
    display: flex;
    flex-direction: column;
}

.we-header[b-x95fqw3t5b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.we-header-text[b-x95fqw3t5b] {
    min-width: 0;
}

.we-title[b-x95fqw3t5b] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.we-subtitle[b-x95fqw3t5b] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.we-body[b-x95fqw3t5b] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.we-avatar-section[b-x95fqw3t5b] {
    display: flex;
    justify-content: center;
}

.we-avatar[b-x95fqw3t5b] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.we-avatar-initial[b-x95fqw3t5b] {
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
}

.form-label[b-x95fqw3t5b] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

/* El desplegable del nivel usa PickerDropdown (variante Light, acento magenta). */
.we-form-group[b-x95fqw3t5b] {
    position: relative;
    z-index: 5;
}

.we-info-section[b-x95fqw3t5b] {
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-x95fqw3t5b] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-x95fqw3t5b] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.delete-profile-section[b-x95fqw3t5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-profile-label[b-x95fqw3t5b] {
    font-size: 0.85rem;
    color: #334D6E;
}

.btn-delete-profile[b-x95fqw3t5b] {
    align-self: flex-start;
    background: transparent;
    color: #FF00FF;
    border: 1px solid #FF00FF;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-profile:hover[b-x95fqw3t5b] {
    background: #FFF0FF;
}

.we-footer[b-x95fqw3t5b] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-x95fqw3t5b] {
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #E2E8F0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secondary:hover[b-x95fqw3t5b] {
    background: #CBD5E1;
}

.btn-primary[b-x95fqw3t5b] {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    background: #FF00FF;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-primary:hover[b-x95fqw3t5b] {
    background: #e600e6;
}

.btn-primary:disabled[b-x95fqw3t5b] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mt-4[b-x95fqw3t5b] {
    margin-top: 1.5rem;
}

.mt-auto[b-x95fqw3t5b] {
    margin-top: auto;
}

.w-100[b-x95fqw3t5b] {
    width: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/JobTitlesLevels/JobTitlesLevelPanel.razor.rz.scp.css */
.cargos-niveles-panel[b-nvnio3ccal] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

.cn-items-list[b-nvnio3ccal] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
}

.cn-items-list[b-nvnio3ccal]::-webkit-scrollbar {
    display: none;
}

.cn-item-card[b-nvnio3ccal] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.cn-item-card:hover[b-nvnio3ccal] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.cn-item-card.selected[b-nvnio3ccal] {
    border: 2px solid #FFC107;
}

.cn-item-avatar[b-nvnio3ccal] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #E8EBF2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-item-info[b-nvnio3ccal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cn-item-name[b-nvnio3ccal] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.cn-item-role[b-nvnio3ccal] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.cn-item-status[b-nvnio3ccal] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cn-status-dot[b-nvnio3ccal] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.cn-status-dot.active[b-nvnio3ccal] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.cn-status-dot.inactive[b-nvnio3ccal] {
    background: #E0E0E0;
}

.cn-status-label[b-nvnio3ccal] {
    font-size: 0.7rem;
    font-weight: 600;
}

.cn-status-label.active[b-nvnio3ccal] {
    color: #4CAF50;
}

.cn-status-label.inactive[b-nvnio3ccal] {
    color: #999;
}

.cn-niveles-layout[b-nvnio3ccal] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.cn-niveles-list[b-nvnio3ccal] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 400px;
    width: 400px;
    min-width: 280px;
    max-width: 600px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-top: 5px;
    padding-right: 8px;
}

.st-panel-resizer[b-nvnio3ccal] {
    width: 10px;
    margin-left: 0;
    margin-right: 0;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.st-panel-resizer:hover[b-nvnio3ccal],
.st-panel-resizer.active[b-nvnio3ccal] {
    background-color: rgba(211, 59, 178, 0.12);
    border-right-color: #D33BB2;
}

.st-panel-resizer[b-nvnio3ccal]::after {
    content: "";
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background-color: #CBD5E1;
    transition: background-color 0.2s ease, height 0.2s ease;
}

.st-panel-resizer:hover[b-nvnio3ccal]::after,
.st-panel-resizer.active[b-nvnio3ccal]::after {
    background-color: #D33BB2;
    height: 48px;
}

.cn-niveles-list[b-nvnio3ccal]::-webkit-scrollbar {
    display: none;
}

.cn-nivel-bar[b-nvnio3ccal] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    flex-shrink: 0;
}

.cn-nivel-bar:hover[b-nvnio3ccal] {
    opacity: 0.85;
    transform: translateX(2px);
}

.cn-nivel-bar.selected[b-nvnio3ccal] {
    border: 2px solid #FFC107;
}

.cn-nivel-name[b-nvnio3ccal] {
    font-size: 1rem;
    font-weight: 700;
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}

.cn-nivel-badge[b-nvnio3ccal] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-nivel-badge span[b-nvnio3ccal] {
    color: white;
    font-weight: 800;
    font-size: 0.95rem;
}

.cn-nivel-detail[b-nvnio3ccal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 10px 20px;
    gap: 12px;
    animation: fadeInDetail-b-nvnio3ccal 0.3s ease;
    min-width: 0;
    height: 100%;
}

.cn-nivel-detail[b-nvnio3ccal]::-webkit-scrollbar {
    width: 6px;
}

.cn-nivel-detail[b-nvnio3ccal]::-webkit-scrollbar-track {
    background: transparent;
}

.cn-nivel-detail[b-nvnio3ccal]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.cn-nivel-detail[b-nvnio3ccal]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

@keyframes fadeInDetail-b-nvnio3ccal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cn-nivel-detail-badge[b-nvnio3ccal] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.cn-nivel-detail-badge span[b-nvnio3ccal] {
    font-size: 2rem;
    font-weight: 800;
}

.cn-nivel-detail-name[b-nvnio3ccal] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.cn-nivel-detail-desc[b-nvnio3ccal] {
    font-size: 0.85rem;
    color: #8898AA;
    text-align: center;
    margin: 0;
    max-width: 200px;
    line-height: 1.4;
}
/* /Pages/Home/Components/Setting/Department/Components/JobTitlesLevels/JobTitlesLevelsTablePanel.razor.rz.scp.css */
.jt-table-panel-container[b-vp80dvmd31] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 10px;
}

.jt-readonly-notice[b-vp80dvmd31] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #FFF8E6;
    border: 1px solid #F5E1A4;
    color: #8A6D1D;
    font-size: 0.82rem;
    font-weight: 500;
    flex-shrink: 0;
}

.jt-readonly-notice svg[b-vp80dvmd31] {
    flex-shrink: 0;
}

.jt-table-grid-wrapper[b-vp80dvmd31] {
    position: relative;
    flex: 1;
    min-height: 400px;
    width: 100%;
}

.jt-table-grid[b-vp80dvmd31] {
    width: 100%;
    height: 100%;
    min-height: 400px;
    
    --ag-foreground-color: #334D6E;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #F1F4F7;
    --ag-header-foreground-color: #475569;
    --ag-border-color: #E4E8EE;
    --ag-row-border-color: #F1F4F7;
    --ag-row-hover-color: #F7F9FC;
    --ag-column-hover-color: #EBF0F5;
    --ag-selected-row-background-color: #E2E8F0;
    --ag-range-selection-background-color: rgba(211, 59, 178, 0.12);
    --ag-checkbox-checked-color: #d33bb2;
    --ag-input-focus-border-color: #d33bb2;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-wrapper-border-radius: 10px;
}

.jt-table-grid[b-vp80dvmd31]  .ag-header-cell-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jt-table-grid[b-vp80dvmd31]  .ag-root-wrapper {
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    overflow: hidden;
}

.jt-table-grid[b-vp80dvmd31]  .ag-details-row {
    padding: 10px 14px;
    background-color: #FAFBFD;
    border-top: 1px solid #E4E8EE;
    border-bottom: 1px solid #E4E8EE;
}

.jt-table-loading-overlay[b-vp80dvmd31] {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 8px;
    font-size: 0.9rem;
    color: #334D6E;
}

.loading-spinner[b-vp80dvmd31] {
    width: 28px;
    height: 28px;
    border: 3px solid #E4E8EE;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: spin-b-vp80dvmd31 0.8s linear infinite;
}

@keyframes spin-b-vp80dvmd31 {
    to {
        transform: rotate(360deg);
    }
}

.jt-table-grid[b-vp80dvmd31]  .ag-paging-panel {
    background-color: #F7F9FC;
    border-top: 1px solid #E4E8EE;
    color: #334D6E;
    white-space: nowrap !important;
    min-height: 38px;
}

.jt-table-grid[b-vp80dvmd31]  .ag-paging-row-summary-panel,
.jt-table-grid[b-vp80dvmd31]  .ag-paging-page-summary-panel,
.jt-table-grid[b-vp80dvmd31]  .ag-paging-page-size {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
/* /Pages/Home/Components/Setting/Department/Components/Notifications/NotificationSettingsPanel.razor.rz.scp.css */
.notificaciones-designer-panel[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #ffffff;
    color: #0f172a;
    overflow: hidden;
    font-family: inherit;
}

.notif-designer-body[b-tpg0ljmaiq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 24px 28px 24px;
    overflow-y: auto;
    position: relative;
    background: #f8fafc;
}

/* Toast Message */
.notif-designer-toast[b-tpg0ljmaiq] {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 16px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    animation: fadeInSlide-b-tpg0ljmaiq 0.3s ease-out;
}

.notif-designer-toast.success[b-tpg0ljmaiq] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
}

.notif-designer-toast.error[b-tpg0ljmaiq] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

@keyframes fadeInSlide-b-tpg0ljmaiq {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grid Layout */
.designer-grid[b-tpg0ljmaiq] {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .designer-grid[b-tpg0ljmaiq] {
        grid-template-columns: 1fr;
    }
}

/* Left Column: Form Editor */
.designer-editor-col[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor-section-card[b-tpg0ljmaiq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.editor-section-header[b-tpg0ljmaiq] {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
}

.event-meta-badge[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.badge-tag[b-tpg0ljmaiq] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.badge-id[b-tpg0ljmaiq] {
    color: #64748b;
    font-size: 0.78rem;
    font-family: monospace;
}

.editor-event-title[b-tpg0ljmaiq] {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.editor-event-desc[b-tpg0ljmaiq] {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.4;
}

/* Form Groups */
.form-group-notif[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.label-with-hint[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif-label[b-tpg0ljmaiq] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
}

.hint-tag[b-tpg0ljmaiq] {
    font-size: 0.74rem;
    color: #94a3b8;
}

.notif-input[b-tpg0ljmaiq], .notif-textarea[b-tpg0ljmaiq], .notif-select[b-tpg0ljmaiq] {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    color: #0f172a;
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.notif-input:focus[b-tpg0ljmaiq], .notif-textarea:focus[b-tpg0ljmaiq], .notif-select:focus[b-tpg0ljmaiq] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.notif-textarea[b-tpg0ljmaiq] {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

/* Variable Chips */
.variable-chips[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.chips-title[b-tpg0ljmaiq] {
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
}

.btn-chip[b-tpg0ljmaiq] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #2563eb;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: monospace;
    font-weight: 600;
}

.btn-chip:hover[b-tpg0ljmaiq] {
    background: #e0e7ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

/* Icon Selector Grid */
.icon-selector-grid[b-tpg0ljmaiq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
}

.icon-choice-card[b-tpg0ljmaiq] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.icon-choice-card:hover[b-tpg0ljmaiq] {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-2px);
}

.icon-choice-card.selected[b-tpg0ljmaiq] {
    background: #eff6ff;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.icon-preview-box[b-tpg0ljmaiq] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.icon-name[b-tpg0ljmaiq] {
    font-size: 0.74rem;
    color: #334155;
    font-weight: 600;
}

/* Color Swatches */
.color-palette-row[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.color-palette-label[b-tpg0ljmaiq] {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 500;
}

.color-swatches[b-tpg0ljmaiq] {
    display: flex;
    gap: 8px;
}

.swatch[b-tpg0ljmaiq] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.swatch:hover[b-tpg0ljmaiq] {
    transform: scale(1.15);
}

.swatch.active[b-tpg0ljmaiq] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
    transform: scale(1.1);
}

/* Two Columns Settings */
.settings-row-two-col[b-tpg0ljmaiq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Mandatory Toggle */
.mandatory-toggle-row[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    padding: 12px 16px;
}

.switch-container[b-tpg0ljmaiq] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-container input[b-tpg0ljmaiq] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider[b-tpg0ljmaiq] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 24px;
}

.switch-slider[b-tpg0ljmaiq]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

input:checked + .switch-slider[b-tpg0ljmaiq] {
    background-color: #ef4444;
}

input:checked + .switch-slider[b-tpg0ljmaiq]:before {
    transform: translateX(20px);
}

.mandatory-text[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mandatory-title[b-tpg0ljmaiq] {
    font-size: 0.86rem;
    font-weight: 600;
    color: #991b1b;
}

.mandatory-sub[b-tpg0ljmaiq] {
    font-size: 0.74rem;
    color: #b91c1c;
}

/* Editor Action Button */
.editor-actions-row[b-tpg0ljmaiq] {
    margin-top: 4px;
}

.btn-save-template[b-tpg0ljmaiq] {
    width: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-save-template:hover:not(:disabled)[b-tpg0ljmaiq] {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-save-template:disabled[b-tpg0ljmaiq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Right Column: Live Preview Area */
.designer-preview-col[b-tpg0ljmaiq] {
    position: sticky;
    top: 0;
}

.preview-sticky-container[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-header-bar[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.preview-title-wrap[b-tpg0ljmaiq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-main-title[b-tpg0ljmaiq] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

.preview-badge-sub[b-tpg0ljmaiq] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.preview-theme-toggle[b-tpg0ljmaiq] {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.btn-mode[b-tpg0ljmaiq] {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.btn-mode.active[b-tpg0ljmaiq] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Mobile Device Viewport Mockup */
.mobile-device-viewport[b-tpg0ljmaiq] {
    border-radius: 28px;
    padding: 14px 16px 20px 16px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 3px solid #cbd5e1;
    transition: background 0.3s ease;
}

.mobile-device-viewport.light-theme[b-tpg0ljmaiq] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.mobile-device-viewport.dark-theme[b-tpg0ljmaiq] {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.mobile-status-bar[b-tpg0ljmaiq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 12px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.light-theme .mobile-status-bar[b-tpg0ljmaiq] {
    color: #334155;
}

.dark-theme .mobile-status-bar[b-tpg0ljmaiq] {
    color: #94a3b8;
}

.status-icons[b-tpg0ljmaiq] {
    display: flex;
    gap: 6px;
    font-size: 0.72rem;
}

.mobile-notification-stack[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========================================================= */
/* LA TARJETA PUSH MÓVIL EXACTA A LA IMAGEN 2 (PIXEL PERFECT) */
/* ========================================================= */
.mobile-notification-card[b-tpg0ljmaiq] {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08), 0 3px 8px -2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark-theme .mobile-notification-card[b-tpg0ljmaiq] {
    background: #1e293b;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5);
}

.mobile-card-icon-wrapper[b-tpg0ljmaiq] {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.custom-card-img[b-tpg0ljmaiq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-card-text-wrapper[b-tpg0ljmaiq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-card-header-row[b-tpg0ljmaiq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.mobile-card-title[b-tpg0ljmaiq] {
    font-size: 1.12rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-theme .mobile-card-title[b-tpg0ljmaiq] {
    color: #f8fafc;
}

.mobile-card-time[b-tpg0ljmaiq] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
    flex-shrink: 0;
}

.mobile-card-body-text[b-tpg0ljmaiq] {
    font-size: 0.92rem;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.35;
    word-break: break-word;
}

.dark-theme .mobile-card-body-text[b-tpg0ljmaiq] {
    color: #cbd5e1;
}

.mobile-home-indicator[b-tpg0ljmaiq] {
    width: 120px;
    height: 4px;
    background: #94a3b8;
    border-radius: 4px;
    margin: 20px auto 0 auto;
    opacity: 0.4;
}

/* Sample Testing Toolbar */
.preview-controls-card[b-tpg0ljmaiq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.controls-title[b-tpg0ljmaiq] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sample-data-row[b-tpg0ljmaiq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.sample-input-group[b-tpg0ljmaiq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sample-input-group label[b-tpg0ljmaiq] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.sample-input-group input[b-tpg0ljmaiq] {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 8px;
    color: #0f172a;
    font-size: 0.82rem;
    font-family: monospace;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
}

.sample-input-group input:focus[b-tpg0ljmaiq] {
    border-color: #2563eb;
}

.test-device-actions[b-tpg0ljmaiq] {
    margin-top: 4px;
}

.btn-test-push[b-tpg0ljmaiq] {
    width: 100%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-test-push:hover:not(:disabled)[b-tpg0ljmaiq] {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.btn-test-push:disabled[b-tpg0ljmaiq] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/CreateGroupPanel.razor.rz.scp.css */
.create-group-panel[b-f1p1ekyljb] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.cgp-header[b-f1p1ekyljb] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.cgp-title[b-f1p1ekyljb] {
    font-size: 24px;
    color: #1e293b;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.cgp-subtitle[b-f1p1ekyljb] {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}

.cgp-body[b-f1p1ekyljb] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.cgp-body .form-group[b-f1p1ekyljb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cgp-body label[b-f1p1ekyljb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
}

.cgp-body input[b-f1p1ekyljb],
.cgp-body select[b-f1p1ekyljb] {
    padding: 11px 14px;
    border: 1px solid #E4E8EE;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #334D6E;
    background-color: #f7f9fc;
    transition: all 0.2s;
}

.cgp-body input:focus[b-f1p1ekyljb],
.cgp-body select:focus[b-f1p1ekyljb] {
    outline: none;
    border-color: #0EA5E9;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.cgp-hint[b-f1p1ekyljb] {
    font-size: 0.8rem;
    color: #94A3B8;
}

.cgp-error[b-f1p1ekyljb] {
    font-size: 0.85rem;
    color: #DC2626;
    background: #FEF2F2;
    border-radius: 8px;
    padding: 10px 14px;
}

.cgp-footer[b-f1p1ekyljb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.cgp-footer button[b-f1p1ekyljb] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cgp-footer .btn-cancel[b-f1p1ekyljb] {
    background-color: #F1F5F9;
    color: #475569;
}

.cgp-footer .btn-cancel:hover:not(:disabled)[b-f1p1ekyljb] {
    background-color: #E2E8F0;
    color: #1E293B;
}

.cgp-footer .btn-primary[b-f1p1ekyljb] {
    background-color: #0EA5E9;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);
}

.cgp-footer .btn-primary:hover:not(:disabled)[b-f1p1ekyljb] {
    background-color: #0284C7;
}

.cgp-footer button:disabled[b-f1p1ekyljb] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/HandoverFormModal.razor.rz.scp.css */
[b-u877ommr4e] .handover-form-modal {
    max-width: 640px;
}

.ho-form-alert[b-u877ommr4e] {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fecaca;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.ho-form-row[b-u877ommr4e] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.ho-form-row-double[b-u877ommr4e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.ho-form-row label[b-u877ommr4e] {
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.ho-form-row select[b-u877ommr4e],
.ho-form-row input[type="text"][b-u877ommr4e] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    font-size: 14px;
}

.ho-form-row select[b-u877ommr4e] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.ho-form-row select:focus[b-u877ommr4e] {
    outline: none;
    border-color: #d33bb2;
    box-shadow: 0 0 0 2px rgba(211, 59, 178, 0.2);
}

.ho-form-row select option[b-u877ommr4e] {
    background-color: #182234;
    color: #f1f5f9;
}

.ho-form-toggles[b-u877ommr4e] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.ho-toggle[b-u877ommr4e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
}

.ho-form-reasons[b-u877ommr4e] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.ho-reasons-header[b-u877ommr4e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ho-reasons-header label[b-u877ommr4e] {
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
}

.ho-add-reason-btn[b-u877ommr4e] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

.ho-add-reason-btn:hover[b-u877ommr4e] {
    background-color: rgba(255, 255, 255, 0.08);
}

.ho-reason-row[b-u877ommr4e] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.ho-icon-btn[b-u877ommr4e] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #94a3b8;
    padding: 6px;
    border-radius: 6px;
}

.ho-icon-btn-danger:hover[b-u877ommr4e] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.ho-empty[b-u877ommr4e] {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

/* =====================================================================
   Modo EMBEBIDO (wizard de entrega dentro del LeftSidebar navy).
   El formulario se presenta como tarjeta blanca limpia, en paridad con
   ProcessEditPanel / UserEditPanel. Estas reglas SOLO afectan a
   .handover-form-embedded; el modo CenterModal (Configuración, tema
   oscuro) conserva las reglas base de arriba intactas.
   ===================================================================== */
.handover-form-embedded[b-u877ommr4e] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

/* Labels oscuros sobre tarjeta blanca */
.handover-form-embedded .ho-form-row label[b-u877ommr4e],
.handover-form-embedded .ho-reasons-header label[b-u877ommr4e] {
    font-size: 13px;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 8px;
}

/* Separación uniforme entre grupos */
.handover-form-embedded .ho-form-row-double[b-u877ommr4e] {
    margin-bottom: 16px;
}

.handover-form-embedded .ho-form-row-double .ho-form-row[b-u877ommr4e] {
    margin-bottom: 0;
}

/* Inputs y selects: tema claro */
.handover-form-embedded .ho-form-row select[b-u877ommr4e],
.handover-form-embedded .ho-form-row input[type="text"][b-u877ommr4e] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    background-color: #f7f9fc;
    color: #334D6E;
    font-size: 14px;
    transition: all 0.2s ease;
}

.handover-form-embedded .ho-form-row select:focus[b-u877ommr4e],
.handover-form-embedded .ho-form-row input[type="text"]:focus[b-u877ommr4e] {
    outline: none;
    border-color: #d33bb2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.12);
}

/* Chevron custom en selects */
.handover-form-embedded .ho-form-row select[b-u877ommr4e] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.handover-form-embedded .ho-form-row select option[b-u877ommr4e] {
    background-color: #ffffff;
    color: #334D6E;
}

/* Toggles como checkboxes con acento de marca */
.handover-form-embedded .ho-form-toggles[b-u877ommr4e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 20px;
}

.handover-form-embedded .ho-toggle[b-u877ommr4e] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
    background: #f7f9fc;
    border: 1px solid #e8ecf2;
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.handover-form-embedded .ho-toggle:hover[b-u877ommr4e] {
    background: #eef2f8;
}

.handover-form-embedded .ho-toggle input[type="checkbox"][b-u877ommr4e] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #d33bb2;
    flex-shrink: 0;
}

/* Sección de razones */
.handover-form-embedded .ho-form-reasons[b-u877ommr4e] {
    border-top: 1px solid #e8ecf2;
    padding-top: 18px;
    margin-top: 4px;
}

.handover-form-embedded .ho-add-reason-btn[b-u877ommr4e] {
    background: #fdf2fb;
    border: 1px solid #f3cfeb;
    color: #b02e93;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.handover-form-embedded .ho-add-reason-btn:hover[b-u877ommr4e] {
    background: #fbe6f6;
}

.handover-form-embedded .ho-reason-row input[type="text"][b-u877ommr4e] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    background: #f7f9fc;
    color: #334D6E;
    font-size: 13.5px;
}

.handover-form-embedded .ho-reason-row input[type="text"]:focus[b-u877ommr4e] {
    outline: none;
    border-color: #d33bb2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.12);
}

.handover-form-embedded .ho-icon-btn-danger[b-u877ommr4e] {
    color: #ef4444;
}

.handover-form-embedded .ho-icon-btn-danger:hover[b-u877ommr4e] {
    background-color: #fef2f2;
    color: #dc2626;
}

.handover-form-embedded .ho-empty[b-u877ommr4e] {
    color: #94a3b8;
    font-size: 13px;
}

.handover-form-embedded .ho-form-alert[b-u877ommr4e] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* Footer + botones (antes sin estilos → "no se veían") */
.handover-form-embedded .footer-actions[b-u877ommr4e] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8ecf2;
}

.handover-form-embedded .footer-actions .btn-secondary[b-u877ommr4e],
.handover-form-embedded .footer-actions .btn-primary[b-u877ommr4e] {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.handover-form-embedded .footer-actions .btn-secondary[b-u877ommr4e] {
    background: #eef1f6;
    color: #475569;
}

.handover-form-embedded .footer-actions .btn-secondary:hover:not(:disabled)[b-u877ommr4e] {
    background: #e2e8f0;
}

.handover-form-embedded .footer-actions .btn-primary[b-u877ommr4e] {
    background: #d33bb2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.3);
}

.handover-form-embedded .footer-actions .btn-primary:hover:not(:disabled)[b-u877ommr4e] {
    background: #b02e93;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(211, 59, 178, 0.4);
}

.handover-form-embedded .footer-actions .btn-primary:disabled[b-u877ommr4e],
.handover-form-embedded .footer-actions .btn-secondary:disabled[b-u877ommr4e] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/HandoverListSection.razor.rz.scp.css */
.ho-section[b-ul2aegkabc] {
    display: flex;
    flex-direction: column;
}

.ho-header[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.ho-header h4[b-ul2aegkabc] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.ho-header-actions[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ho-order-confirm-actions[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: ho-fade-in-b-ul2aegkabc 0.2s ease-in-out;
}

@keyframes ho-fade-in-b-ul2aegkabc {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ho-btn-save-order[b-ul2aegkabc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    background-color: #10B981;
    color: white;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

.ho-btn-save-order:hover:not(:disabled)[b-ul2aegkabc] {
    background-color: #059669;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.ho-btn-save-order:disabled[b-ul2aegkabc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ho-btn-cancel-order[b-ul2aegkabc] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    background-color: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ho-btn-cancel-order:hover:not(:disabled)[b-ul2aegkabc] {
    background-color: #f1f5f9;
    color: #334155;
}

.ho-btn-cancel-order:disabled[b-ul2aegkabc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ho-card-container[b-ul2aegkabc] {
    background: #ffffff;
    border: 1px solid #e8ecf2;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ho-card-container.has-pending-order[b-ul2aegkabc] {
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.ho-add-btn[b-ul2aegkabc] {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    background-color: #d33bb2;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ho-add-btn:hover:not(:disabled)[b-ul2aegkabc] {
    background-color: #b02e93;
}

.ho-add-btn:disabled[b-ul2aegkabc] {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.ho-order-saving-banner[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 10px;
    background-color: #fdf2fa;
    border: 1px solid #f3c9ea;
    border-radius: 6px;
    color: #b02e93;
    font-size: 12px;
    font-weight: 500;
}

.ho-order-saving-spinner[b-ul2aegkabc] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid #f3c9ea;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: ho-order-spin-b-ul2aegkabc 0.7s linear infinite;
}

@keyframes ho-order-spin-b-ul2aegkabc {
    to {
        transform: rotate(360deg);
    }
}

.ho-hint[b-ul2aegkabc],
.ho-empty[b-ul2aegkabc] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.ho-list[b-ul2aegkabc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ho-item[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
}

.ho-item.ho-draggable[b-ul2aegkabc] {
    cursor: grab;
}

.ho-item.ho-draggable:active[b-ul2aegkabc] {
    cursor: grabbing;
}

.ho-item.ho-dragging[b-ul2aegkabc] {
    opacity: 0.45;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ho-drag-handle[b-ul2aegkabc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    cursor: grab;
}

.ho-drag-handle span[b-ul2aegkabc] {
    width: 7px;
    height: 2px;
    border-radius: 1px;
    background-color: #C4CDD5;
}

.ho-item-main[b-ul2aegkabc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ho-item-title-row[b-ul2aegkabc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ho-item-icon[b-ul2aegkabc] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.ho-item-icon-fallback[b-ul2aegkabc] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 4px;
    color: #ffc107;
    flex-shrink: 0;
}

.ho-item-name[b-ul2aegkabc] {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ho-item-reasons-badge[b-ul2aegkabc] {
    font-size: 11px;
    color: #64748b;
}

.ho-item-actions[b-ul2aegkabc] {
    display: flex;
    gap: 6px;
}

.ho-icon-btn[b-ul2aegkabc] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    color: #64748b;
}

.ho-icon-btn:hover[b-ul2aegkabc] {
    background-color: #e2e8f0;
}

.ho-icon-btn-danger:hover[b-ul2aegkabc] {
    background-color: #fee2e2;
    color: #ef4444;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/HandoverTable.razor.rz.scp.css */
.ho-table-section[b-fgdivhyneg] {
    display: flex;
    flex-direction: column;
    /* Toma el alto que le cede .pr-handovers-panel-body para repartirlo al grid. */
    flex: 1;
    min-height: 0;
}

.ho-header[b-fgdivhyneg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ho-header h4[b-fgdivhyneg] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #334D6E;
}

.ho-add-btn[b-fgdivhyneg] {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    background-color: #d33bb2;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ho-add-btn:hover:not(:disabled)[b-fgdivhyneg] {
    background-color: #b02e93;
}

.ho-add-btn:disabled[b-fgdivhyneg] {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.ho-hint[b-fgdivhyneg] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

/* ── Tabla embebida de Razones (mismo patrón que "Entregas" en ProcessTablePanel) ─────────── */
.ho-reasons-panel-embedded[b-fgdivhyneg] {
    margin-top: 12px;
    background-color: #ffffff;
    border: 1px solid #E4E8EE;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 45%;
    min-height: 220px;
}

.ho-reasons-panel-header[b-fgdivhyneg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background-color: #F7F9FC;
    border-bottom: 1px solid #E4E8EE;
}

.ho-reasons-panel-title[b-fgdivhyneg] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
}

.ho-reasons-panel-actions[b-fgdivhyneg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ho-reasons-panel-add[b-fgdivhyneg] {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    background-color: #d33bb2;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ho-reasons-panel-add:hover[b-fgdivhyneg] {
    background-color: #b02e93;
}

.ho-reasons-panel-close[b-fgdivhyneg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ho-reasons-panel-close:hover[b-fgdivhyneg] {
    background-color: #F1F4F7;
    color: #334D6E;
}

.ho-reasons-panel-body[b-fgdivhyneg] {
    padding: 8px 16px 16px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.ho-reasons-table[b-fgdivhyneg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ho-reasons-table th[b-fgdivhyneg] {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #E4E8EE;
}

.ho-reasons-table td[b-fgdivhyneg] {
    padding: 8px 10px;
    border-bottom: 1px solid #F1F4F7;
    color: #334D6E;
    vertical-align: middle;
}

.ho-reasons-table tr:last-child td[b-fgdivhyneg] {
    border-bottom: none;
}

.ho-reasons-table tbody tr:hover td[b-fgdivhyneg] {
    background-color: #FDF1FA;
}

.ho-reasons-table-actions-col[b-fgdivhyneg] {
    width: 90px;
}

.ho-reasons-table-actions[b-fgdivhyneg] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ho-reasons-table-empty[b-fgdivhyneg] {
    text-align: center;
    color: #94a3b8;
    padding: 18px 10px;
}

.ho-reasons-readonly-hint[b-fgdivhyneg] {
    margin: 0 0 10px;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.ho-reasons-cell-input[b-fgdivhyneg] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #E4E8EE;
    background-color: #F7F9FC;
    font-size: 13px;
    color: #334D6E;
    outline: none;
    transition: all 0.2s ease;
}

.ho-reasons-cell-input:focus[b-fgdivhyneg] {
    border-color: #d33bb2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.1);
}

.ho-reasons-btn[b-fgdivhyneg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
}

.ho-reasons-btn.delete[b-fgdivhyneg] { color: #dc3545; }
.ho-reasons-btn:disabled[b-fgdivhyneg] { color: #adb5bd; cursor: not-allowed; }

.ho-table-grid-wrapper[b-fgdivhyneg] {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.ho-table-grid[b-fgdivhyneg] {
    width: 100%;
    height: 100%;
    /* Mismo theming del AG Grid que la tabla de Procesos (pr-table-grid en
       ProcessTablePanel.razor.css): navy/magenta en vez del azul por defecto. */
    --ag-foreground-color: #334D6E;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #F1F4F7;
    --ag-header-foreground-color: #475569;
    --ag-border-color: #E4E8EE;
    --ag-row-border-color: #F1F4F7;
    --ag-row-hover-color: #F7F9FC;
    --ag-column-hover-color: #EBF0F5;
    --ag-selected-row-background-color: #E2E8F0;
    --ag-range-selection-background-color: rgba(211, 59, 178, 0.12);
    --ag-checkbox-checked-color: #d33bb2;
    --ag-input-focus-border-color: #d33bb2;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-wrapper-border-radius: 10px;
}

.ho-table-grid[b-fgdivhyneg]  .ag-cell:hover,
.ho-table-grid[b-fgdivhyneg]  .ag-cell-hover {
    background-color: #EBF0F5 !important;
}

.ho-table-grid[b-fgdivhyneg]  .ag-header-cell-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ho-table-grid[b-fgdivhyneg]  .ag-root-wrapper {
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    overflow: hidden;
}

.ho-table-grid[b-fgdivhyneg]  .ag-paging-panel {
    background-color: #F7F9FC;
    border-top: 1px solid #E4E8EE;
    color: #334D6E;
}

.ho-table-grid[b-fgdivhyneg]  .ag-paging-panel {
    white-space: nowrap !important;
    min-height: 38px;
}

.ho-table-grid[b-fgdivhyneg]  .ag-paging-row-summary-panel,
.ho-table-grid[b-fgdivhyneg]  .ag-paging-page-summary-panel,
.ho-table-grid[b-fgdivhyneg]  .ag-paging-page-size {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ho-table-grid[b-fgdivhyneg]  .ag-paging-row-summary-panel * {
    white-space: nowrap !important;
    display: inline-block !important;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/ProcessEditPanel.razor.rz.scp.css */
/* Form Layout and Aesthetics */
.process-edit-panel[b-136xqm2tqi] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    max-width: none;
    margin: 0;
}

.pe-columns[b-136xqm2tqi] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.pe-form-column[b-136xqm2tqi] {
    flex: 1 1 620px;
    max-width: 680px;
    min-width: 320px;
}

.pe-handovers-column[b-136xqm2tqi] {
    flex: 1 1 440px;
    min-width: 400px;
    border-left: 1px solid #e2e8f0;
    padding-left: 32px;
}

@media (max-width: 1100px) {
    .pe-columns[b-136xqm2tqi] {
        flex-direction: column;
    }

    .pe-handovers-column[b-136xqm2tqi] {
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding-left: 0;
        padding-top: 24px;
        width: 100%;
    }
}

.pe-header[b-136xqm2tqi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}

.pe-header-text[b-136xqm2tqi] {
    min-width: 0;
}

.pe-header-actions[b-136xqm2tqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pe-status-toggle[b-136xqm2tqi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pe-status-label[b-136xqm2tqi] {
    font-size: 0.85rem;
    font-weight: 600;
}

.pe-status-label.active[b-136xqm2tqi] {
    color: #4CAF50;
}

.pe-status-label.inactive[b-136xqm2tqi] {
    color: #64748b;
}

.pe-title[b-136xqm2tqi] {
    font-size: 24px;
    color: #1e293b;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.pe-subtitle[b-136xqm2tqi] {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}

.form-row[b-136xqm2tqi] {
    padding: 10px;
}

.form-row.double[b-136xqm2tqi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.form-group[b-136xqm2tqi] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-136xqm2tqi] {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 8px;
}

.form-group input[b-136xqm2tqi],
.form-group select[b-136xqm2tqi],
.form-group textarea[b-136xqm2tqi] {
    padding: 11px 14px;
    border: 1px solid #E4E8EE;
    border-radius: 10px;
    font-size: 14px;
    color: #334155;
    background-color: #f7f9fc;
    transition: all 0.2s ease;
}

.form-group select[b-136xqm2tqi] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-group input:focus[b-136xqm2tqi],
.form-group select:focus[b-136xqm2tqi],
.form-group textarea:focus[b-136xqm2tqi] {
    outline: none;
    border-color: #d33bb2;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.1);
    background-color: #ffffff;
}

.form-group input.disabled-input[b-136xqm2tqi] {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.pe-hint[b-136xqm2tqi] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

/* ── Number Input con Sufijo (%) ────────────────────────────── */
.input-suffix-wrapper[b-136xqm2tqi] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-suffix-wrapper input[b-136xqm2tqi] {
    width: 100%;
    padding-right: 36px !important;
}

.input-suffix-wrapper .input-suffix[b-136xqm2tqi] {
    position: absolute;
    right: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    pointer-events: none;
    user-select: none;
}

.pe-field-hint[b-136xqm2tqi] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
}

/* ── Tiempo de alerta (horas + minutos) ─────────────────────── */
.pe-alert-time[b-136xqm2tqi] {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border: 1px solid #E4E8EE;
    border-radius: 12px;
    background-color: #f7f9fc;
}

.pe-alert-time-title[b-136xqm2tqi] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}

.pe-alert-time-inputs[b-136xqm2tqi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.pe-alert-time-inputs .form-group input[b-136xqm2tqi] {
    background-color: #ffffff;
}

.pe-alert-time-summary[b-136xqm2tqi] {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #d33bb2;
}

.label-with-info[b-136xqm2tqi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.label-with-info label[b-136xqm2tqi] {
    margin-bottom: 0 !important;
}

.info-popover-backdrop[b-136xqm2tqi] {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: transparent;
}

.info-popover-wrapper[b-136xqm2tqi] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-icon-btn[b-136xqm2tqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #2563EB;
    cursor: pointer;
    transition: all 0.2s ease;
}

.info-icon-btn:hover[b-136xqm2tqi],
.info-icon-btn.active[b-136xqm2tqi] {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1D4ED8;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.info-popover-card[b-136xqm2tqi] {
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    z-index: 120;
    min-width: 260px;
    max-width: 300px;
    background: #0F172A;
    color: #FFFFFF;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 6px 12px -3px rgba(0, 0, 0, 0.3);
    animation: popoverFadeIn-b-136xqm2tqi 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-popover-card[b-136xqm2tqi]::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 14px;
    width: 9px;
    height: 9px;
    background: #0F172A;
    border-top: 1px solid #334155;
    border-left: 1px solid #334155;
    transform: rotate(45deg);
}

.info-popover-header[b-136xqm2tqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.info-popover-title[b-136xqm2tqi] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.01em;
}

.info-popover-close[b-136xqm2tqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.info-popover-close:hover[b-136xqm2tqi] {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.info-popover-text[b-136xqm2tqi] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #CBD5E1;
    font-weight: 400;
}

.info-popover-text strong[b-136xqm2tqi] {
    color: #38BDF8;
    font-weight: 600;
}

@keyframes popoverFadeIn-b-136xqm2tqi {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.input-suffix-wrapper.is-readonly input[b-136xqm2tqi],
.pe-readonly-input[b-136xqm2tqi] {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
    font-weight: 600;
}

.pe-footer[b-136xqm2tqi] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.pe-footer button[b-136xqm2tqi] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel[b-136xqm2tqi] {
    background-color: #f1f5f9;
    color: #475569;
}

.btn-cancel:hover[b-136xqm2tqi] {
    background-color: #e2e8f0;
}

.btn-save[b-136xqm2tqi] {
    background-color: #d33bb2;
    color: white;
    box-shadow: 0 2px 4px rgba(211, 59, 178, 0.3);
}

.btn-save:hover[b-136xqm2tqi] {
    background-color: #b02e93;
    box-shadow: 0 4px 6px rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
}

.btn-delete[b-136xqm2tqi] {
    background-color: #fee2e2;
    color: #ef4444;
    margin-right: auto;
}

.btn-delete:hover[b-136xqm2tqi] {
    background-color: #fecaca;
}

/* Contenedor desplegable para 'Cambiar nombre del proceso visible' */
.pe-expandable-card[b-136xqm2tqi] {
    margin: 10px;
    border: 1px solid #e8ecf2;
    border-radius: 12px;
    background-color: #f8fafc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pe-expandable-card.is-expanded[b-136xqm2tqi] {
    border-color: #d33bb2;
    background-color: #fdfafc;
    box-shadow: 0 4px 14px rgba(211, 59, 178, 0.08);
}

.pe-expandable-header[b-136xqm2tqi] {
    padding: 0;
}

.pe-custom-switch[b-136xqm2tqi] {
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 12px 16px !important;
}

.pe-expandable-content-wrapper[b-136xqm2tqi] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pe-expandable-content-wrapper.open[b-136xqm2tqi] {
    grid-template-rows: 1fr;
}

.pe-expandable-body[b-136xqm2tqi] {
    min-height: 0;
    overflow: hidden;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, padding 0.35s ease;
}

.pe-expandable-content-wrapper.open .pe-expandable-body[b-136xqm2tqi] {
    opacity: 1;
    transform: translateY(0);
    padding: 4px 16px 16px 16px;
    border-top: 1px dashed rgba(211, 59, 178, 0.25);
}

/* Rejilla de 2 columnas para los toggles booleanos (Asignable, Por Defecto, etc.)
   Antes iban en una fila flex horizontal (5 en línea) que estiraba el panel a lo ancho.
   Con grid de 2 columnas el bloque queda compacto y ordenado. */
.pe-toggle-grid[b-136xqm2tqi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Toggle Switch Styling */
.switch-container[b-136xqm2tqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    background-color: #f8fafc;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e8ecf2;
    transition: background-color 0.2s ease;
}

.pe-toggle-grid .switch-container[b-136xqm2tqi] {
    margin-bottom: 0;
}

.switch-container:hover[b-136xqm2tqi] {
    background-color: #f1f5f9;
}

.switch-label[b-136xqm2tqi] {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.switch[b-136xqm2tqi] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-136xqm2tqi] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-136xqm2tqi] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
}

.slider[b-136xqm2tqi]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.slider[b-136xqm2tqi] {
    background-color: #d33bb2;
}

input:focus+.slider[b-136xqm2tqi] {
    box-shadow: 0 0 1px #d33bb2;
}

input:checked+.slider[b-136xqm2tqi]:before {
    transform: translateX(20px);
}

.slider.round[b-136xqm2tqi] {
    border-radius: 24px;
}

.slider.round[b-136xqm2tqi]:before {
    border-radius: 50%;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/ProcessesPanel.razor.rz.scp.css */
.procesos-panel[b-1mumvdvrhn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

@keyframes prCardHighlight-b-1mumvdvrhn {
    0% { box-shadow: 0 0 0 0 rgba(211, 59, 178, 0.7); transform: scale(1.02); }
    70% { box-shadow: 0 0 0 10px rgba(211, 59, 178, 0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 rgba(211, 59, 178, 0); transform: scale(1); }
}

.pr-card-highlight-pulse[b-1mumvdvrhn] {
    animation: prCardHighlight-b-1mumvdvrhn 1.5s ease-out;
}

/* Drag handle (modo Secuencia) */
.pr-drag-handle[b-1mumvdvrhn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    cursor: grab;
}

.pr-drag-handle span[b-1mumvdvrhn] {
    width: 7px;
    height: 2px;
    border-radius: 1px;
    background: #C4CDD5;
}

.pr-process-card.pr-draggable[b-1mumvdvrhn] {
    cursor: grab;
}

.pr-process-card.pr-draggable:active[b-1mumvdvrhn] {
    cursor: grabbing;
    opacity: 0.7;
}

.pr-process-card.pr-dragging[b-1mumvdvrhn] {
    opacity: 0.45;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.pr-order-saving-banner[b-1mumvdvrhn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 4px;
    background-color: #fdf2fa;
    border: 1px solid #f3c9ea;
    border-radius: 6px;
    color: #b02e93;
    font-size: 12px;
    font-weight: 500;
}

.pr-order-saving-spinner[b-1mumvdvrhn] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid #f3c9ea;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: pr-order-spin-b-1mumvdvrhn 0.7s linear infinite;
}

@keyframes pr-order-spin-b-1mumvdvrhn {
    to {
        transform: rotate(360deg);
    }
}

/* Groups List */
.pr-groups-list[b-1mumvdvrhn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 400px;
    width: 400px;
    min-width: 280px;
    max-width: 600px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    padding-top: 5px;
    padding-right: 8px;
}

.pr-groups-list[b-1mumvdvrhn]::-webkit-scrollbar {
    display: none;
}

.st-panel-resizer[b-1mumvdvrhn] {
    width: 10px;
    margin-left: 0;
    margin-right: 0;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.st-panel-resizer:hover[b-1mumvdvrhn],
.st-panel-resizer.active[b-1mumvdvrhn] {
    background-color: rgba(211, 59, 178, 0.12);
    border-right-color: #D33BB2;
}

.st-panel-resizer[b-1mumvdvrhn]::after {
    content: "";
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background-color: #CBD5E1;
    transition: background-color 0.2s ease, height 0.2s ease;
}

.st-panel-resizer:hover[b-1mumvdvrhn]::after,
.st-panel-resizer.active[b-1mumvdvrhn]::after {
    background-color: #D33BB2;
    height: 48px;
}

.pr-content-split[b-1mumvdvrhn] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Group Header */
.pr-group-header[b-1mumvdvrhn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    margin-top: 6px;
}

.pr-group-header:first-child[b-1mumvdvrhn] {
    margin-top: 0;
}

.pr-group-header-left[b-1mumvdvrhn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-group-name[b-1mumvdvrhn] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.pr-group-total-badge[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pr-group-total-badge:hover[b-1mumvdvrhn] {
    transform: scale(1.05);
}

.pr-group-total-badge.complete[b-1mumvdvrhn] {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.pr-group-total-badge.incomplete[b-1mumvdvrhn] {
    background: #FEF3C7;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.pr-group-count[b-1mumvdvrhn] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8898AA;
}

.pr-group-header-actions[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pr-btn-group-confirm[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
    color: #15803D;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.pr-btn-group-confirm:hover[b-1mumvdvrhn] {
    background: #BBF7D0;
    color: #166534;
    transform: scale(1.1);
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.2);
}

.pr-btn-group-cancel[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.pr-btn-group-cancel:hover[b-1mumvdvrhn] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
    transform: scale(1.1);
}

/* Process Card */
.pr-process-card[b-1mumvdvrhn] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #F0F0F0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.pr-process-card:hover[b-1mumvdvrhn] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.pr-process-card.selected[b-1mumvdvrhn] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

/* Process Icon */
.pr-process-icon[b-1mumvdvrhn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #C4CDD5;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
}

.pr-process-icon img[b-1mumvdvrhn] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Process Info & Progress */
.pr-process-info[b-1mumvdvrhn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 3px;
}

.pr-process-name[b-1mumvdvrhn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1E293B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    min-width: 0;
}

.pr-process-progress-row[b-1mumvdvrhn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    min-height: 18px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

/* Console-style range slider */
.pr-slider-container[b-1mumvdvrhn] {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: 16px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.pr-slider-range[b-1mumvdvrhn] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(to right, #3B6C9B 0%, #5283B5 var(--slider-pct, 0%), #E2E8F0 var(--slider-pct, 0%), #E2E8F0 100%);
    outline: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: none; /* Deslizamiento ultra fluido nativo sin lag */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* WebKit (Chrome, Safari, Edge) Thumb */
.pr-slider-range[b-1mumvdvrhn]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #3B6C9B;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pr-slider-range[b-1mumvdvrhn]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    border-color: #1E3E62;
    box-shadow: 0 0 0 4px rgba(59, 108, 155, 0.2);
}

.pr-slider-range:active[b-1mumvdvrhn]::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(59, 108, 155, 0.25);
}

/* Firefox Thumb */
.pr-slider-range[b-1mumvdvrhn]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #3B6C9B;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pr-slider-range[b-1mumvdvrhn]::-moz-range-thumb:hover {
    transform: scale(1.2);
    border-color: #1E3E62;
    box-shadow: 0 0 0 4px rgba(59, 108, 155, 0.2);
}

.pr-slider-range:active[b-1mumvdvrhn]::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(59, 108, 155, 0.25);
}

.pr-progress-val[b-1mumvdvrhn] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334D6E;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Sequence Advance Progress Badge */
.pr-advance-badge-row[b-1mumvdvrhn] {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.pr-advance-pill[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #334D6E;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pr-advance-pill:hover[b-1mumvdvrhn] {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #0F172A;
    transform: scale(1.02);
}

.pr-percentage-pill[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #3B6C9B;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pr-percentage-pill:hover[b-1mumvdvrhn] {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #1E3E62;
    transform: scale(1.03);
}

.pr-advance-icon[b-1mumvdvrhn] {
    color: #64748B;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.pr-advance-text[b-1mumvdvrhn] {
    font-weight: 700;
}

.pr-advance-pct[b-1mumvdvrhn] {
    color: #64748B;
    font-weight: 500;
    font-size: 0.68rem;
}

.pr-inline-actions[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.pr-btn-confirm-inline[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
    color: #15803D;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.pr-btn-confirm-inline:hover[b-1mumvdvrhn] {
    background: #BBF7D0;
    color: #166534;
    transform: scale(1.1);
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.2);
}

.pr-btn-cancel-inline[b-1mumvdvrhn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.pr-btn-cancel-inline:hover[b-1mumvdvrhn] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
    transform: scale(1.1);
}

/* Status */
.pr-process-status[b-1mumvdvrhn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 44px;
}

.pr-status-dot[b-1mumvdvrhn] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.pr-status-dot.active[b-1mumvdvrhn] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.pr-status-dot.inactive[b-1mumvdvrhn] {
    background: #BDBDBD;
}

.pr-status-label[b-1mumvdvrhn] {
    font-size: 0.65rem;
    font-weight: 600;
}

.pr-status-label.active[b-1mumvdvrhn] {
    color: #4CAF50;
}

.pr-status-label.inactive[b-1mumvdvrhn] {
    color: #999;
}

.pr-edit-detail[b-1mumvdvrhn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    height: 100%;
    padding-left: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.pr-edit-detail[b-1mumvdvrhn]::-webkit-scrollbar {
    display: none;
}
/* /Pages/Home/Components/Setting/Department/Components/Processes/ProcessTablePanel.razor.rz.scp.css */
.pr-table-panel-container[b-o19kytsla0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.pr-table-grid-wrapper[b-o19kytsla0] {
    position: relative;
    flex: 1;
    min-height: 400px;
    width: 100%;
}

.pr-table-grid[b-o19kytsla0] {
    width: 100%;
    height: 100%;
    min-height: 400px;
    /* Theming del AG Grid alineado a la paleta del resto de Configuración
       (navy/magenta), en vez del azul genérico de Element-UI que traía por defecto. */
    --ag-foreground-color: #334D6E;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #F1F4F7;
    --ag-header-foreground-color: #475569;
    --ag-border-color: #E4E8EE;
    --ag-row-border-color: #F1F4F7;
    --ag-row-hover-color: #F7F9FC;
    --ag-column-hover-color: #EBF0F5;
    --ag-selected-row-background-color: #E2E8F0;
    --ag-range-selection-background-color: rgba(211, 59, 178, 0.12);
    --ag-checkbox-checked-color: #d33bb2;
    --ag-input-focus-border-color: #d33bb2;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-wrapper-border-radius: 10px;
}

.pr-table-grid[b-o19kytsla0]  .ag-cell:hover,
.pr-table-grid[b-o19kytsla0]  .ag-cell-hover {
    background-color: #EBF0F5 !important;
}

.pr-table-grid[b-o19kytsla0]  .ag-header-cell-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pr-table-grid[b-o19kytsla0]  .ag-root-wrapper {
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    overflow: hidden;
}

.pr-table-grid[b-o19kytsla0]  .ag-paging-panel {
    background-color: #F7F9FC;
    border-top: 1px solid #E4E8EE;
    color: #334D6E;
}

/* Fila del acordeón anidado (Nivel 1: detail grid de Entregas dentro de la fila de Proceso). El
   grid anidado hereda las variables --ag-* de .pr-table-grid por cascada normal de CSS custom
   properties (vive dentro del mismo subárbol del DOM), así que solo hace falta el "marco". */
.pr-table-grid[b-o19kytsla0]  .ag-details-row {
    padding: 10px 14px;
    background-color: #FAFBFD;
    border-top: 1px solid #E4E8EE;
    border-bottom: 1px solid #E4E8EE;
}

.pr-table-loading-overlay[b-o19kytsla0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 8px;
    font-size: 0.9rem;
    color: #334D6E;
}

.loading-spinner[b-o19kytsla0] {
    width: 28px;
    height: 28px;
    border: 3px solid #E4E8EE;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: spin-b-o19kytsla0 0.8s linear infinite;
}

@keyframes spin-b-o19kytsla0 {
    to {
        transform: rotate(360deg);
    }
}

/* Fix AG Grid Pagination Panel text wrapping */
.pr-table-grid[b-o19kytsla0]  .ag-paging-panel {
    white-space: nowrap !important;
    min-height: 38px;
}

.pr-table-grid[b-o19kytsla0]  .ag-paging-row-summary-panel,
.pr-table-grid[b-o19kytsla0]  .ag-paging-page-summary-panel,
.pr-table-grid[b-o19kytsla0]  .ag-paging-page-size {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.pr-table-grid[b-o19kytsla0]  .ag-paging-row-summary-panel * {
    white-space: nowrap !important;
    display: inline-block !important;
}
/* /Pages/Home/Components/Setting/Department/Components/RolesPermissions/RoleEditPanel.razor.rz.scp.css */
/* ══════════════════════════════════════
   RoleEditPanel – consistent with app design system
   Colors: #FF00FF/#d33bb2 primary, #FFC107 selection, #334D6E text
   ══════════════════════════════════════ */

.role-edit-panel[b-a2a25x0be0] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 800px;
    height: 100%;
}

/* ── Embebido dentro de otro panel (ej. Editar Cargo): sin tarjeta propia, el padre da el footer ── */
.role-edit-panel.embedded[b-a2a25x0be0] {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.re-header[b-a2a25x0be0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.re-header-text[b-a2a25x0be0] {
    min-width: 0;
}

.re-title[b-a2a25x0be0] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.re-subtitle[b-a2a25x0be0] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.re-body[b-a2a25x0be0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.re-body[b-a2a25x0be0]::-webkit-scrollbar {
    width: 6px;
}

.re-body[b-a2a25x0be0]::-webkit-scrollbar-track {
    background: transparent;
}

.re-body[b-a2a25x0be0]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

/* ── JobTitle picker (sin caja contenedora) ── */
.re-jobtitle-picker[b-a2a25x0be0] {
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ── Form Section (JobTitle selector) ── */
.re-form-section[b-a2a25x0be0] {
    background-color: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.re-field-label[b-a2a25x0be0] {
    font-size: 13px;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 8px;
    display: block;
}

.re-select[b-a2a25x0be0] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #E8EBED;
    border-radius: 8px;
    font-size: 14px;
    color: #334D6E;
    background-color: #fff;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
}

.re-select:focus[b-a2a25x0be0] {
    border-color: #FF00FF;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

/* ── Título + buscador: ancladas juntas arriba del scroll de re-body ── */
.re-sticky-header[b-a2a25x0be0] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 4px;
    padding-bottom: 10px;
    background: #fff;
}

.re-section-title[b-a2a25x0be0] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1f36;
}

.re-search-box[b-a2a25x0be0] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.re-search-box svg[b-a2a25x0be0] {
    position: absolute;
    left: 14px;
    color: #8898AA;
    pointer-events: none;
}

.re-search-box input[b-a2a25x0be0] {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    color: #334D6E;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.re-search-box input:focus[b-a2a25x0be0] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

/* ══════════════════════════════════════
   Feature Accordion (Permisos Asociados)
   ══════════════════════════════════════ */
.re-features-list[b-a2a25x0be0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-feature-group[b-a2a25x0be0] {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #F0F0F0;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.re-feature-group.expanded[b-a2a25x0be0] {
    border-color: #F0D6EC;
}

.re-feature-group-header[b-a2a25x0be0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.re-feature-group.expanded .re-feature-group-header[b-a2a25x0be0] {
    border-left-color: #d33bb2;
    background: #FDF4FB;
}

.re-feature-group-name[b-a2a25x0be0] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-feature-group-count[b-a2a25x0be0] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8898AA;
    background: #F0F2F5;
    border-radius: 10px;
    padding: 2px 9px;
    flex-shrink: 0;
}

.re-feature-group-actions[b-a2a25x0be0] {
    display: flex;
    flex-direction: column;
    padding: 2px 14px 12px;
    animation: reSlideDown-b-a2a25x0be0 0.25s ease;
}

@keyframes reSlideDown-b-a2a25x0be0 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.re-toggle-row[b-a2a25x0be0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.re-toggle-row:last-child[b-a2a25x0be0] {
    border-bottom: none;
}

.re-toggle-row-name[b-a2a25x0be0] {
    font-size: 0.88rem;
    color: #8898AA;
    font-weight: 500;
}

.re-toggle-row.on .re-toggle-row-name[b-a2a25x0be0] {
    color: #334D6E;
    font-weight: 600;
}

/* ── DIV-based Toggle Switch (no CSS sibling selectors) ── */
.re-toggle[b-a2a25x0be0] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 24px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.re-toggle.off[b-a2a25x0be0] {
    background-color: #cbd5e1;
}

.re-toggle.on[b-a2a25x0be0] {
    background-color: #d33bb2;
}

.re-toggle-thumb[b-a2a25x0be0] {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.re-toggle.off .re-toggle-thumb[b-a2a25x0be0] {
    left: 3px;
}

.re-toggle.on .re-toggle-thumb[b-a2a25x0be0] {
    left: 23px;
}

/* ── Empty State ── */
.re-empty[b-a2a25x0be0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #8898AA;
    text-align: center;
    min-height: 200px;
    gap: 12px;
}

.re-empty svg[b-a2a25x0be0] {
    opacity: 0.4;
}

.re-empty p[b-a2a25x0be0] {
    font-size: 0.9rem;
    margin: 0;
}

/* ── Footer ── */
.re-footer[b-a2a25x0be0] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.btn-cancel[b-a2a25x0be0] {
    flex: 1;
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #E2E8F0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.btn-cancel:hover[b-a2a25x0be0] {
    background: #CBD5E1;
}

.btn-save[b-a2a25x0be0] {
    flex: 1;
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    background: #FF00FF;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(255, 0, 255, 0.3);
    box-sizing: border-box;
}

.btn-save:hover[b-a2a25x0be0] {
    background: #e600e6;
    box-shadow: 0 4px 6px rgba(255, 0, 255, 0.4);
    transform: translateY(-1px);
}

.btn-save:disabled[b-a2a25x0be0] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* /Pages/Home/Components/Setting/Department/Components/Schedules/ScheduleShiftEditPanel.razor.rz.scp.css */
.schedule-shift-edit-panel[b-k3yruqueiv] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    min-width: 0;
}

.ssep-header[b-k3yruqueiv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
}

.ssep-header-text[b-k3yruqueiv] {
    min-width: 0;
}

.ssep-title[b-k3yruqueiv] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.ssep-subtitle[b-k3yruqueiv] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.ssep-alert[b-k3yruqueiv] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.ssep-alert.error[b-k3yruqueiv] {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.ssep-body[b-k3yruqueiv] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ssep-form[b-k3yruqueiv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-k3yruqueiv] {
    display: flex;
    gap: 16px;
    width: 100%;
}

.form-row.double > .form-group[b-k3yruqueiv] {
    flex: 1 1 calc(50% - 8px);
}

.form-group[b-k3yruqueiv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-group label[b-k3yruqueiv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334d6e;
}

.form-group input[b-k3yruqueiv] {
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus[b-k3yruqueiv] {
    border-color: #d33bb2;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.15);
}

/* Disparador de hora (solo lectura) que abre el PickerSidebarTime estándar. */
.ssep-time-trigger[b-k3yruqueiv] {
    position: relative;
}

.ssep-time-trigger input[readonly][b-k3yruqueiv] {
    width: 100%;
    padding-right: 36px;
    cursor: pointer;
}

.ssep-time-trigger-icon[b-k3yruqueiv] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8898aa;
    font-size: 0.85rem;
    pointer-events: none;
}

.form-group input:disabled[b-k3yruqueiv] {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border-color: #e2e8f0;
}

.field-hint[b-k3yruqueiv] {
    font-size: 0.75rem;
    color: #8898aa;
    margin-top: 2px;
}

.days-chips-container[b-k3yruqueiv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.day-chip[b-k3yruqueiv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-chip:hover[b-k3yruqueiv] {
    border-color: #d33bb2;
    color: #d33bb2;
    background: rgba(211, 59, 178, 0.05);
}

.day-chip.selected[b-k3yruqueiv] {
    background: #d33bb2;
    border-color: #d33bb2;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(211, 59, 178, 0.3);
}

.day-chip-short[b-k3yruqueiv] {
    font-weight: 700;
}

.pause-section[b-k3yruqueiv] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pause-times-row[b-k3yruqueiv] {
    margin-top: 4px;
}

.toggle-container[b-k3yruqueiv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-switch[b-k3yruqueiv] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.st-switch input[b-k3yruqueiv] {
    opacity: 0;
    width: 0;
    height: 0;
}

.st-slider[b-k3yruqueiv] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 24px;
}

.st-slider[b-k3yruqueiv]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.st-switch input:checked + .st-slider[b-k3yruqueiv] {
    background-color: #d33bb2;
}

.st-switch input:checked + .st-slider[b-k3yruqueiv]:before {
    transform: translateX(20px);
}

.st-switch-text[b-k3yruqueiv] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
}

.st-switch-text.active[b-k3yruqueiv] {
    color: #1e293b;
}

.ssep-actions[b-k3yruqueiv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.ssep-actions-right[b-k3yruqueiv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.btn-save[b-k3yruqueiv] {
    background: #d33bb2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(211, 59, 178, 0.3);
}

.btn-save:hover:not(:disabled)[b-k3yruqueiv] {
    background: #b82b99;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.4);
}

.btn-save:disabled[b-k3yruqueiv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-k3yruqueiv] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-k3yruqueiv] {
    background: #e2e8f0;
    color: #334d6e;
}

.btn-delete[b-k3yruqueiv] {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-delete:hover:not(:disabled)[b-k3yruqueiv] {
    background: #fee2e2;
    color: #dc2626;
}
/* /Pages/Home/Components/Setting/Department/Components/Schedules/SchedulesPanel.razor.rz.scp.css */
.schedules-panel[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

.schedules-loading[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    color: #64748B;
    font-size: 0.95rem;
    font-weight: 500;
}

.sc-layout[b-qydwzf0xgk] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 6px;
}

.sc-list[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    max-width: 600px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 12px;
}

.sc-list[b-qydwzf0xgk]::-webkit-scrollbar {
    display: none;
}

/* Panel Resizer */
.st-panel-resizer[b-qydwzf0xgk] {
    width: 10px;
    margin-left: 0;
    margin-right: 0;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.st-panel-resizer:hover[b-qydwzf0xgk],
.st-panel-resizer.active[b-qydwzf0xgk] {
    background-color: rgba(211, 59, 178, 0.12);
    border-right-color: #D33BB2;
}

.st-panel-resizer[b-qydwzf0xgk]::after {
    content: "";
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background-color: #CBD5E1;
    transition: background-color 0.2s ease, height 0.2s ease;
}

.st-panel-resizer:hover[b-qydwzf0xgk]::after,
.st-panel-resizer.active[b-qydwzf0xgk]::after {
    background-color: #D33BB2;
    height: 48px;
}

/* Detail Area */
.sc-detail-area[b-qydwzf0xgk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    padding-left: 12px;
    padding-right: 6px;
}

/* Cards */
.sc-item-card[b-qydwzf0xgk] {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.sc-item-card:hover[b-qydwzf0xgk] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
    border-color: #CBD5E1;
}

.sc-item-card.selected[b-qydwzf0xgk] {
    border: 2px solid #FFC107;
    background: #FDFEFE;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.18);
}

.sc-item-icon[b-qydwzf0xgk] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-item-card.selected .sc-item-icon[b-qydwzf0xgk] {
    background: #FEF3C7;
    color: #D97706;
}

.sc-item-info[b-qydwzf0xgk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sc-item-title-row[b-qydwzf0xgk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sc-item-name[b-qydwzf0xgk] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-item-code[b-qydwzf0xgk] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
    background: #F1F5F9;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.sc-item-badges-row[b-qydwzf0xgk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sc-badge-days[b-qydwzf0xgk] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4F46E5;
    background: #EEF2FF;
    padding: 2px 7px;
    border-radius: 6px;
}

.sc-badge-hours[b-qydwzf0xgk] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #0369A1;
    background: #E0F2FE;
    padding: 2px 7px;
    border-radius: 6px;
}

.sc-item-break[b-qydwzf0xgk] {
    font-size: 0.72rem;
    color: #64748B;
    font-weight: 500;
}

.sc-item-status[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.sc-status-dot[b-qydwzf0xgk] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.sc-status-dot.active[b-qydwzf0xgk] {
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.sc-status-dot.inactive[b-qydwzf0xgk] {
    background: #CBD5E1;
}

.sc-status-label[b-qydwzf0xgk] {
    font-size: 0.68rem;
    font-weight: 600;
}

.sc-status-label.active[b-qydwzf0xgk] {
    color: #10B981;
}

.sc-status-label.inactive[b-qydwzf0xgk] {
    color: #94A3B8;
}

/* Collaborator Card Specifics */
.sc-collab-avatar[b-qydwzf0xgk] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #334155;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sc-collab-avatar .avatar-img[b-qydwzf0xgk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-collab-role-row[b-qydwzf0xgk] {
    display: flex;
    align-items: center;
}

.sc-collab-role[b-qydwzf0xgk] {
    font-size: 0.78rem;
    color: #64748B;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-collab-shift-badge[b-qydwzf0xgk] {
    margin-top: 2px;
}

.badge-shift-assigned[b-qydwzf0xgk] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #047857;
    background: #D1FAE5;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-shift-none[b-qydwzf0xgk] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #B45309;
    background: #FEF3C7;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* Empty & Placeholder States */
.sc-empty-list[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
    color: #94A3B8;
    background: #F8FAFC;
    border: 2px dashed #E2E8F0;
    border-radius: 14px;
    margin-top: 12px;
}

.sc-empty-list svg[b-qydwzf0xgk] {
    margin-bottom: 12px;
    color: #CBD5E1;
}

.sc-empty-list h3[b-qydwzf0xgk] {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px 0;
}

.sc-empty-list p[b-qydwzf0xgk] {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0;
    max-width: 240px;
}

.sc-placeholder-card[b-qydwzf0xgk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
    padding: 32px;
    text-align: center;
    color: #94A3B8;
    background: #F8FAFC;
    border: 2px dashed #E2E8F0;
    border-radius: 14px;
}

.sc-placeholder-card svg[b-qydwzf0xgk] {
    margin-bottom: 14px;
    color: #CBD5E1;
}

.sc-placeholder-card h4[b-qydwzf0xgk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 8px 0;
}

.sc-placeholder-card p[b-qydwzf0xgk] {
    font-size: 0.9rem;
    color: #64748B;
    margin: 0;
    max-width: 320px;
}
/* /Pages/Home/Components/Setting/Department/Components/Schedules/SchedulesTablePanel.razor.rz.scp.css */
.schedules-table-container[b-53afw2s8pg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.st-table-wrapper[b-53afw2s8pg] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    overflow-x: auto;
    flex: 1;
}

.st-table[b-53afw2s8pg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.st-table thead tr[b-53afw2s8pg] {
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
}

.st-table th[b-53afw2s8pg] {
    padding: 12px 16px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.th-actions[b-53afw2s8pg] {
    text-align: right;
    padding-right: 20px;
}

.st-table tbody tr[b-53afw2s8pg] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.st-table tbody tr:nth-child(even)[b-53afw2s8pg] {
    background-color: #fafbfc;
}

.st-table tbody tr:hover[b-53afw2s8pg] {
    background-color: #f1f5f9;
}

.st-table td[b-53afw2s8pg] {
    padding: 12px 16px;
    color: #1e293b;
    vertical-align: middle;
}

.td-primary[b-53afw2s8pg] {
    font-weight: 600;
}

.shift-name-cell[b-53afw2s8pg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-title[b-53afw2s8pg] {
    font-weight: 600;
    color: #1e293b;
}

.cell-subtitle[b-53afw2s8pg] {
    font-size: 0.75rem;
    color: #8898aa;
    font-weight: 400;
}

.badge-code[b-53afw2s8pg] {
    background: rgba(222, 163, 1, 0.15);
    color: #dea301;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(222, 163, 1, 0.3);
}

.badge-days[b-53afw2s8pg] {
    background: rgba(211, 59, 178, 0.1);
    color: #d33bb2;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.badge-hours[b-53afw2s8pg] {
    background: #e2e8f0;
    color: #334d6e;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

.badge-assigned-shift[b-53afw2s8pg] {
    background: rgba(222, 163, 1, 0.15);
    color: #b45309;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(222, 163, 1, 0.3);
    white-space: nowrap;
}

.badge-unassigned[b-53afw2s8pg] {
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.status-badge[b-53afw2s8pg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.status-badge.active[b-53afw2s8pg] {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.inactive[b-53afw2s8pg] {
    background: #f1f5f9;
    color: #94a3b8;
}

.status-dot[b-53afw2s8pg] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.td-actions[b-53afw2s8pg] {
    text-align: right;
    white-space: nowrap;
    padding-right: 20px;
}

.action-btn[b-53afw2s8pg] {
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.action-btn.edit[b-53afw2s8pg] {
    background: #f1f5f9;
    color: #475569;
}

.action-btn.edit:hover[b-53afw2s8pg] {
    background: rgba(211, 59, 178, 0.12);
    color: #d33bb2;
}

.action-btn.delete[b-53afw2s8pg] {
    background: #fef2f2;
    color: #ef4444;
}

.action-btn.delete:hover[b-53afw2s8pg] {
    background: #fee2e2;
    color: #dc2626;
}

.collab-cell[b-53afw2s8pg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collab-avatar-small[b-53afw2s8pg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.collab-name-block[b-53afw2s8pg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.roles-cell[b-53afw2s8pg] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.role-chip[b-53afw2s8pg] {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.text-muted[b-53afw2s8pg] {
    color: #94a3b8;
    font-size: 0.8rem;
}

.empty-table-state[b-53afw2s8pg] {
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

.empty-table-state svg[b-53afw2s8pg] {
    color: #94a3b8;
    margin-bottom: 12px;
    opacity: 0.6;
}

.empty-table-state h4[b-53afw2s8pg] {
    margin: 0 0 6px 0;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 600;
}

.empty-table-state p[b-53afw2s8pg] {
    margin: 0;
    font-size: 0.88rem;
    max-width: 400px;
}
/* /Pages/Home/Components/Setting/Department/Components/Schedules/ScheduleStakeholderEditPanel.razor.rz.scp.css */
.schedule-stakeholder-edit-panel[b-mspi2ainab] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    min-width: 0;
}

.ssep-header[b-mspi2ainab] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
}

.collaborator-avatar[b-mspi2ainab] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #cbd5e1;
}

.avatar-img[b-mspi2ainab] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-mspi2ainab] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
}

.collaborator-info[b-mspi2ainab] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.collaborator-name[b-mspi2ainab] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.collaborator-meta[b-mspi2ainab] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-tag[b-mspi2ainab] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.collaborator-roles[b-mspi2ainab] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.role-badge[b-mspi2ainab] {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.level-badge[b-mspi2ainab] {
    background: #fef3c7;
    color: #d97706;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.ssep-alert[b-mspi2ainab] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.ssep-alert.error[b-mspi2ainab] {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.ssep-alert.success[b-mspi2ainab] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.ssep-body[b-mspi2ainab] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ssep-form[b-mspi2ainab] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-mspi2ainab] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-group label[b-mspi2ainab] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334d6e;
}

.form-select[b-mspi2ainab] {
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.form-select:focus[b-mspi2ainab] {
    border-color: #d33bb2;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.15);
}

.field-hint[b-mspi2ainab] {
    font-size: 0.75rem;
    color: #8898aa;
    margin-top: 2px;
}

.shift-preview-card[b-mspi2ainab] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-header[b-mspi2ainab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.preview-title[b-mspi2ainab] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.preview-code[b-mspi2ainab] {
    background: rgba(222, 163, 1, 0.15);
    color: #dea301;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(222, 163, 1, 0.3);
}

.preview-desc[b-mspi2ainab] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

.preview-details[b-mspi2ainab] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.preview-detail-row[b-mspi2ainab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.detail-label[b-mspi2ainab] {
    color: #64748b;
    font-weight: 500;
}

.detail-value[b-mspi2ainab] {
    color: #1e293b;
    font-weight: 600;
}

.days-badge[b-mspi2ainab] {
    background: rgba(211, 59, 178, 0.1);
    color: #d33bb2;
    padding: 2px 8px;
    border-radius: 6px;
}

.hours-badge[b-mspi2ainab] {
    background: #e2e8f0;
    color: #334d6e;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: monospace;
}

.no-shift-card[b-mspi2ainab] {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
}

.no-shift-card svg[b-mspi2ainab] {
    color: #94a3b8;
}

.ssep-actions[b-mspi2ainab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.ssep-actions-right[b-mspi2ainab] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.btn-save[b-mspi2ainab] {
    background: #d33bb2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(211, 59, 178, 0.3);
}

.btn-save:hover:not(:disabled)[b-mspi2ainab] {
    background: #b82b99;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.4);
}

.btn-save:disabled[b-mspi2ainab] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-mspi2ainab] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-mspi2ainab] {
    background: #e2e8f0;
    color: #334d6e;
}

.btn-unlink[b-mspi2ainab] {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-unlink:hover:not(:disabled)[b-mspi2ainab] {
    background: #fee2e2;
    color: #dc2626;
}

.empty-state[b-mspi2ainab] {
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
}
/* /Pages/Home/Components/Setting/Department/Components/Setup/Components/BusinessHoursEditor.razor.rz.scp.css */
.bhe-container[b-h5y6bof834] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
}

/* Header Summary Bar - Light Surface */
.bhe-header-summary[b-h5y6bof834] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.bhe-metrics[b-h5y6bof834] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bhe-metric-chip[b-h5y6bof834] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.78rem;
    color: #475569;
}

.bhe-metric-chip svg[b-h5y6bof834] {
    color: #64748b;
}

.bhe-metric-chip.highlight[b-h5y6bof834] {
    background: #fffbeb;
    border-color: #fef08a;
    color: #b45309;
}

.bhe-metric-chip.highlight svg[b-h5y6bof834] {
    color: #dea301;
}

.bhe-btn-copy[b-h5y6bof834] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.bhe-btn-copy:hover[b-h5y6bof834] {
    background: #fffbeb;
    border-color: #dea301;
    color: #b45309;
}

/* Days Grid - Light Surface */
.bhe-days-grid[b-h5y6bof834] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.bhe-day-row[b-h5y6bof834] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 150ms ease;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.bhe-day-row.open[b-h5y6bof834] {
    border-left: 4px solid #dea301;
}

.bhe-day-row.closed[b-h5y6bof834] {
    background: #f8fafc;
    border-left: 4px solid #cbd5e1;
    opacity: 0.8;
}

.bhe-day-meta[b-h5y6bof834] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 125px;
    min-width: 0;
}

.bhe-day-name[b-h5y6bof834] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    width: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Switch Styles (Verde Formulario) */
.bhe-switch[b-h5y6bof834] {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}

.bhe-switch input[b-h5y6bof834] {
    opacity: 0;
    width: 0;
    height: 0;
}

.bhe-switch .st-slider[b-h5y6bof834] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.2s;
    border-radius: 18px;
}

.bhe-switch .st-slider[b-h5y6bof834]:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bhe-switch input:checked + .st-slider[b-h5y6bof834] {
    background-color: #16a34a;
}

.bhe-switch input:checked + .st-slider[b-h5y6bof834]:before {
    transform: translateX(14px);
}

.bhe-status-label[b-h5y6bof834] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.bhe-status-label.active[b-h5y6bof834] {
    color: #16a34a;
}

/* Day Time Pickers - Light Surface */
.bhe-day-times[b-h5y6bof834] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.bhe-time-input[b-h5y6bof834] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 6px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    color-scheme: light;
    accent-color: #dea301;
    width: 108px;
    min-width: 95px;
    max-width: 115px;
    cursor: pointer;
    box-sizing: border-box;
}

.bhe-time-input:hover:not(:disabled)[b-h5y6bof834] {
    border-color: #dea301;
    background-color: #fffbeb;
}

.bhe-time-input:focus[b-h5y6bof834] {
    border-color: #dea301;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(222, 163, 1, 0.2);
}

.bhe-time-input:disabled[b-h5y6bof834] {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.bhe-time-separator[b-h5y6bof834] {
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 2px;
}

/* Day Hours Badge (Gris Neutro) */
.bhe-day-hours[b-h5y6bof834] {
    flex: 0 0 55px;
    min-width: 50px;
    text-align: right;
}

.bhe-hours-badge[b-h5y6bof834] {
    display: inline-block;
    padding: 2px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.bhe-hours-badge.disabled[b-h5y6bof834] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .bhe-day-row[b-h5y6bof834] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bhe-day-times[b-h5y6bof834] {
        width: 100%;
        justify-content: flex-start;
    }

    .bhe-day-hours[b-h5y6bof834] {
        align-self: flex-end;
    }
}
/* /Pages/Home/Components/Setting/Department/Components/Setup/SetupEditPanel.razor.rz.scp.css */
.setup-edit-panel[b-1xu4vgx73e] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    box-sizing: border-box;
    min-width: 0;    /* evita desbordamiento horizontal en flex */
}

.se-header[b-1xu4vgx73e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.se-header-text[b-1xu4vgx73e] {
    min-width: 0;
}

.se-title[b-1xu4vgx73e] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.se-subtitle[b-1xu4vgx73e] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.se-alert[b-1xu4vgx73e] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.se-alert.error[b-1xu4vgx73e] {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.se-body[b-1xu4vgx73e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.se-form[b-1xu4vgx73e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-1xu4vgx73e] {
    display: flex;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.form-row.double>.form-group[b-1xu4vgx73e] {
    flex: 1 1 200px;
}

.form-group[b-1xu4vgx73e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.form-group label[b-1xu4vgx73e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
}

.form-group input[b-1xu4vgx73e],
.form-group select[b-1xu4vgx73e],
.form-group textarea[b-1xu4vgx73e] {
    padding: 10px 14px;
    border: 1px solid #E8EBED;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #334D6E;
    transition: all 0.2s;
    background-color: #fafbfc;
    box-sizing: border-box;
    width: 100%;
}

.form-group input[b-1xu4vgx73e]::placeholder,
.form-group textarea[b-1xu4vgx73e]::placeholder {
    font-weight: 400;
}

.form-group input:focus[b-1xu4vgx73e],
.form-group select:focus[b-1xu4vgx73e],
.form-group textarea:focus[b-1xu4vgx73e] {
    outline: none;
    border-color: #FF00FF;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

.form-group textarea[b-1xu4vgx73e] {
    resize: vertical;
    min-height: 80px;
}

.toggle-container[b-1xu4vgx73e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.st-switch[b-1xu4vgx73e] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.st-switch input[b-1xu4vgx73e] {
    opacity: 0;
    width: 0;
    height: 0;
}

.st-slider[b-1xu4vgx73e] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 26px;
}

.st-slider[b-1xu4vgx73e]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.st-switch input:checked + .st-slider[b-1xu4vgx73e] {
    background-color: #059669;
}

.st-switch input:checked + .st-slider[b-1xu4vgx73e]:before {
    transform: translateX(22px);
}

.st-switch-text[b-1xu4vgx73e] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    user-select: none;
}

.st-switch-text.active[b-1xu4vgx73e] {
    color: #059669;
}

.se-footer[b-1xu4vgx73e] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #E8EBED;
}

.btn-delete[b-1xu4vgx73e] {
    padding: 10px 20px;
    border-radius: 24px;
    border: 1px solid #ef4444;
    background: transparent;
    color: #ef4444;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    margin-right: auto;
}

.btn-delete:hover[b-1xu4vgx73e] {
    background: #fef2f2;
}

.btn-cancel[b-1xu4vgx73e] {
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #E2E8F0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-cancel:hover[b-1xu4vgx73e] {
    background: #CBD5E1;
}

.btn-save[b-1xu4vgx73e] {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    background: #FF00FF;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-save:hover[b-1xu4vgx73e] {
    background: #e600e6;
}

.btn-save:disabled[b-1xu4vgx73e],
.btn-delete:disabled[b-1xu4vgx73e],
.btn-cancel:disabled[b-1xu4vgx73e] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Selectores laterales (ERP, Proceso, Cargo) ───────────────────────── */
.erp-select-container[b-1xu4vgx73e],
.process-select-container[b-1xu4vgx73e],
.jobtitle-select-container[b-1xu4vgx73e] {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.erp-select-container[b-1xu4vgx73e]  .st-picker-trigger,
.process-select-container[b-1xu4vgx73e]  .st-picker-trigger,
.jobtitle-select-container[b-1xu4vgx73e]  .st-picker-trigger {
    width: 100%;
    min-height: 38px;
    height: 38px;
    border-radius: 8px;
    padding: 0 40px 0 40px;
    background: #F8F9FA;
    border: 1px solid #E0E4E8;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-select-container[b-1xu4vgx73e]  .st-picker-trigger.has-icon-right,
.process-select-container[b-1xu4vgx73e]  .st-picker-trigger.has-icon-right,
.jobtitle-select-container[b-1xu4vgx73e]  .st-picker-trigger.has-icon-right {
    padding: 0 56px 0 12px;
}

.erp-select-container[b-1xu4vgx73e]  .st-picker-icon-container,
.process-select-container[b-1xu4vgx73e]  .st-picker-icon-container,
.jobtitle-select-container[b-1xu4vgx73e]  .st-picker-icon-container {
    width: 24px;
    height: 24px;
}

.erp-select-container[b-1xu4vgx73e]  .st-picker-trigger:hover,
.process-select-container[b-1xu4vgx73e]  .st-picker-trigger:hover,
.jobtitle-select-container[b-1xu4vgx73e]  .st-picker-trigger:hover {
    border-color: #FF00FF;
}

.erp-select-container[b-1xu4vgx73e]  .st-picker-value,
.process-select-container[b-1xu4vgx73e]  .st-picker-value,
.jobtitle-select-container[b-1xu4vgx73e]  .st-picker-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
}

/* ── Custom Select (Workload, WorkLevels, 2FA) ──────────────── */
.custom-select-container[b-1xu4vgx73e] {
    position: relative;
    width: 100%;
}

.st-select[b-1xu4vgx73e] {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    background-color: #F8F9FA;
    border: 1px solid #E0E4E8;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.st-select:focus[b-1xu4vgx73e] {
    outline: none;
    border-color: #FF00FF;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

/* ── Number Input con Sufijo ───────────────────────────────── */
.number-input-container[b-1xu4vgx73e] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.st-number-input[b-1xu4vgx73e] {
    width: 100%;
    height: 38px;
    padding: 8px 60px 8px 12px;
    border: 1px solid #E0E4E8;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334D6E;
    background: #F8F9FA;
}

.unit-badge[b-1xu4vgx73e] {
    position: absolute;
    right: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8898AA;
    pointer-events: none;
    background: #E8EBED;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ── Encabezado de Configuración y Descripción fija ─────────── */
.se-config-header-display[b-1xu4vgx73e] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.se-config-title[b-1xu4vgx73e] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
}

.se-config-desc[b-1xu4vgx73e] {
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.35;
    margin: 0;
}

/* ── Fila dividida para Origen / Destino ──────────────────────── */
.form-row-split[b-1xu4vgx73e] {
    display: flex;
    gap: 12px;
    width: 100%;
}

.split-col[b-1xu4vgx73e] {
    flex: 1 1 0;
    min-width: 0;
}
/* /Pages/Home/Components/Setting/Department/Components/Setup/SetupPanel.razor.rz.scp.css */
.taller-panel[b-46w37m48oh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

.tp-sub-header[b-46w37m48oh] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tp-params-label[b-46w37m48oh] {
    font-size: 1rem;
    font-weight: 700;
    color: #FFC107;
}

.tp-copy-btn[b-46w37m48oh] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border-radius: 21px;
    background: transparent;
    color: #FF00FF;
    border: 1.5px solid #FF00FF;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.tp-copy-btn:hover[b-46w37m48oh] {
    background: rgba(255, 0, 255, 0.08);
}

.tp-content-layout[b-46w37m48oh] {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tp-params-list[b-46w37m48oh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 400px;
    width: 400px;
    min-width: 280px;
    max-width: 600px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-top: 5px;
    padding-right: 8px;
}

.st-panel-resizer[b-46w37m48oh] {
    width: 10px;
    margin-left: 0;
    margin-right: 0;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.st-panel-resizer:hover[b-46w37m48oh],
.st-panel-resizer.active[b-46w37m48oh] {
    background-color: rgba(211, 59, 178, 0.12);
    border-right-color: #D33BB2;
}

.st-panel-resizer[b-46w37m48oh]::after {
    content: "";
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background-color: #CBD5E1;
    transition: background-color 0.2s ease, height 0.2s ease;
}

.st-panel-resizer:hover[b-46w37m48oh]::after,
.st-panel-resizer.active[b-46w37m48oh]::after {
    background-color: #D33BB2;
    height: 48px;
}

.tp-params-list[b-46w37m48oh]::-webkit-scrollbar {
    display: none;
}

.tp-param-card[b-46w37m48oh] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #F0F0F0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.tp-param-card:hover[b-46w37m48oh] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.tp-param-card.selected[b-46w37m48oh] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

.tp-param-icon[b-46w37m48oh] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #689F38;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(104, 159, 56, 0.3);
}

.tp-param-info[b-46w37m48oh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-param-name[b-46w37m48oh] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.tp-param-value[b-46w37m48oh] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.tp-param-detail[b-46w37m48oh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 14px;
    animation: tpFadeIn-b-46w37m48oh 0.3s ease;
    min-width: 0;
    
}

.tp-param-detail[b-46w37m48oh]::-webkit-scrollbar {
    width: 6px;
}

.tp-param-detail[b-46w37m48oh]::-webkit-scrollbar-track {
    background: transparent;
}

.tp-param-detail[b-46w37m48oh]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.tp-param-detail[b-46w37m48oh]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

@keyframes tpFadeIn-b-46w37m48oh {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tp-detail-icon[b-46w37m48oh] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #689F38;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(104, 159, 56, 0.3);
}

.tp-detail-name[b-46w37m48oh] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-align: center;
}

.tp-detail-value[b-46w37m48oh] {
    font-size: 0.9rem;
    color: #8898AA;
    font-weight: 500;
}

.tp-edit-detail[b-46w37m48oh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    min-width: 0;
    height: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/Setup/SetupTablePanel.razor.rz.scp.css */
.st-table-panel-container[b-3t0vc28kc1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 10px;
}

.st-table-grid-wrapper[b-3t0vc28kc1] {
    position: relative;
    flex: 1;
    min-height: 400px;
    width: 100%;
}

.st-table-grid[b-3t0vc28kc1] {
    width: 100%;
    height: 100%;
    min-height: 400px;
    
    --ag-foreground-color: #334D6E;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #F1F4F7;
    --ag-header-foreground-color: #475569;
    --ag-border-color: #E4E8EE;
    --ag-row-border-color: #F1F4F7;
    --ag-row-hover-color: #F7F9FC;
    --ag-column-hover-color: #EBF0F5;
    --ag-selected-row-background-color: #E2E8F0;
    --ag-range-selection-background-color: rgba(211, 59, 178, 0.12);
    --ag-checkbox-checked-color: #d33bb2;
    --ag-input-focus-border-color: #d33bb2;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-wrapper-border-radius: 10px;
}

.st-table-grid[b-3t0vc28kc1]  .ag-header-cell-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.st-table-grid[b-3t0vc28kc1]  .ag-root-wrapper {
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    overflow: hidden;
}

.st-table-grid[b-3t0vc28kc1]  .ag-details-row {
    padding: 10px 14px;
    background-color: #FAFBFD;
    border-top: 1px solid #E4E8EE;
    border-bottom: 1px solid #E4E8EE;
}

.st-table-loading-overlay[b-3t0vc28kc1] {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 8px;
    font-size: 0.9rem;
    color: #334D6E;
}

.loading-spinner[b-3t0vc28kc1] {
    width: 28px;
    height: 28px;
    border: 3px solid #E4E8EE;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: spin-b-3t0vc28kc1 0.8s linear infinite;
}

@keyframes spin-b-3t0vc28kc1 {
    to {
        transform: rotate(360deg);
    }
}

.st-table-grid[b-3t0vc28kc1]  .ag-paging-panel {
    background-color: #F7F9FC;
    border-top: 1px solid #E4E8EE;
    color: #334D6E;
    white-space: nowrap !important;
    min-height: 38px;
}

.st-table-grid[b-3t0vc28kc1]  .ag-paging-row-summary-panel,
.st-table-grid[b-3t0vc28kc1]  .ag-paging-page-summary-panel,
.st-table-grid[b-3t0vc28kc1]  .ag-paging-page-size {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
/* /Pages/Home/Components/Setting/Department/Components/Stakeholders/StakeholderEditPanel.razor.rz.scp.css */
.user-edit-panel[b-t0o1q9thiv] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

.user-edit-panel.split[b-t0o1q9thiv] {
    max-width: 1400px;
}

.ue-main-layout[b-t0o1q9thiv] {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ue-main-layout.split .ue-body[b-t0o1q9thiv] {
    width: 380px;
    flex: none;
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.ue-main-layout.split .ue-body[b-t0o1q9thiv]::-webkit-scrollbar {
    display: none;
}

.ue-permissions-col[b-t0o1q9thiv] {
    flex: 1;
    min-width: 380px;
    padding-left: 15px;
    padding-top: 15px;
    border-left: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* La lista de features scrollea dentro del RoleEditPanel embebido (título + buscador anclados
   arriba, .re-body hace el scroll); acá solo se oculta la barra sin quitar el scroll. */
.ue-permissions-col[b-t0o1q9thiv]  .re-body {
    scrollbar-width: none;
}

.ue-permissions-col[b-t0o1q9thiv]  .re-body::-webkit-scrollbar {
    display: none;
}

.ue-permissions-title[b-t0o1q9thiv] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1f3698;
    margin: 0 0 4px 0;
}

.ue-permissions-subtitle[b-t0o1q9thiv] {
    font-size: 0.82rem;
    color: #8898AA;
    margin: 0 0 14px 0;
}

.ue-jobtitle-tabs[b-t0o1q9thiv] {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    gap: 8px;
}

.ue-jobtitle-tab[b-t0o1q9thiv] {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #E0E0E0;
    background: #fff;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ue-jobtitle-tab:hover[b-t0o1q9thiv] {
    border-color: #FF00FF;
    color: #FF00FF;
}

.ue-jobtitle-tab.active[b-t0o1q9thiv] {
    background: #FF00FF;
    border-color: #FF00FF;
    color: #fff;
}

.ue-jobtitle-tab.add[b-t0o1q9thiv] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
}

/* Columna del cargo (Activo/Asignable/Cargo/Fecha/Niveles, antes un panel aparte) + Permisos
   Asociados del cargo elegido en las pestañas de arriba. */
.ue-cargo-permissions-split[b-t0o1q9thiv] {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ue-cargo-fields-col[b-t0o1q9thiv] {
    width: 300px;
    flex: none;
    flex-shrink: 0;
    padding-right: 15px;
    padding-bottom: 15px;
    border-right: 1px solid #E2E8F0;
    overflow-y: auto;
    scrollbar-width: none;
}

.ue-cargo-fields-col[b-t0o1q9thiv]::-webkit-scrollbar {
    display: none;
}

.ue-cargo-permissions-inner-col[b-t0o1q9thiv] {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ue-header[b-t0o1q9thiv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #E8EBED;
    gap: 12px;
}

.ue-header-text[b-t0o1q9thiv] {
    min-width: 0;
}

.ue-header-actions[b-t0o1q9thiv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ue-title[b-t0o1q9thiv] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.ue-subtitle[b-t0o1q9thiv] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.ue-body[b-t0o1q9thiv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}

.ue-body[b-t0o1q9thiv]::-webkit-scrollbar {
    display: none;
}

.ue-form[b-t0o1q9thiv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.form-row[b-t0o1q9thiv] {
    display: flex;
    gap: 16px;
    width: 100%;
}

.form-row.double[b-t0o1q9thiv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row.double>.form-group[b-t0o1q9thiv] {
    flex: initial;
    min-width: 0;
}

.form-group[b-t0o1q9thiv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.form-group label[b-t0o1q9thiv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
}

.form-group input[b-t0o1q9thiv],
.form-group select[b-t0o1q9thiv],
.form-group textarea[b-t0o1q9thiv] {
    padding: 11px 14px;
    border: 1px solid #E4E8EE;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #334D6E;
    transition: all 0.2s;
    background-color: #f7f9fc;
}

.form-group select[b-t0o1q9thiv] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-group input[b-t0o1q9thiv]::placeholder,
.form-group textarea[b-t0o1q9thiv]::placeholder {
    font-weight: 400;
}

.form-group input:focus[b-t0o1q9thiv],
.form-group select:focus[b-t0o1q9thiv],
.form-group textarea:focus[b-t0o1q9thiv] {
    outline: none;
    border-color: #FF00FF;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

.form-group input[b-t0o1q9thiv],
.form-group select[b-t0o1q9thiv] {
    min-width: 0;
    box-sizing: border-box;
}

.form-group textarea[b-t0o1q9thiv] {
    resize: vertical;
    min-height: 80px;
}

/* Campo de solo consulta (celular y correo al editar): se puede leer y copiar, no escribir. */
.form-group input.readonly-input[b-t0o1q9thiv] {
    background-color: #eef2f7;
    color: #64748b;
    cursor: default;
}

.form-group input.readonly-input:focus[b-t0o1q9thiv] {
    border-color: #E4E8EE;
    background-color: #eef2f7;
    box-shadow: none;
}

/* Aviso que aparece al tocar un campo de solo consulta. */
.contact-locked-hint[b-t0o1q9thiv] {
    display: block;
    margin-top: -2px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #b0349a;
}

.upload-row[b-t0o1q9thiv] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 8px;
}

.avatar-upload[b-t0o1q9thiv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}

.ue-status-group[b-t0o1q9thiv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.ue-status-label[b-t0o1q9thiv] {
    font-size: 0.85rem;
    font-weight: 600;
}

.ue-status-label.active[b-t0o1q9thiv] {
    color: #4CAF50;
}

.ue-status-label.inactive[b-t0o1q9thiv] {
    color: #94a3b8;
}

.avatar-preview[b-t0o1q9thiv] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8EBF2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-preview img[b-t0o1q9thiv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-icon[b-t0o1q9thiv] {
    color: #ffffff;
}

.upload-controls[b-t0o1q9thiv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.upload-buttons[b-t0o1q9thiv] {
    display: flex;
    align-items: center;
}

.btn-upload[b-t0o1q9thiv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
}

.btn-upload:hover:not([disabled])[b-t0o1q9thiv] {
    background-color: #e2e8f0;
    color: #1e293b;
}

.btn-upload[disabled][b-t0o1q9thiv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.toggles[b-t0o1q9thiv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.btn-add-jobtitle[b-t0o1q9thiv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #E8EBED;
    background-color: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.btn-add-jobtitle:hover[b-t0o1q9thiv] {
    background-color: #e2e8f0;
    color: #1e293b;
}

.ue-footer[b-t0o1q9thiv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
    flex-shrink: 0;
    background: #fff;
    position: relative;
    z-index: 1;
}

.btn-delete[b-t0o1q9thiv] {
    padding: 10px 20px;
    border-radius: 24px;
    border: 1px solid #ef4444;
    background: transparent;
    color: #ef4444;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    margin-right: auto;
}

.btn-delete:hover[b-t0o1q9thiv] {
    background: #fef2f2;
}

.btn-cancel[b-t0o1q9thiv] {
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #E2E8F0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-cancel:hover[b-t0o1q9thiv] {
    background: #CBD5E1;
}

.btn-save[b-t0o1q9thiv] {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    background: #FF00FF;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-save:hover[b-t0o1q9thiv] {
    background: #e600e6;
}

.btn-share-access[b-t0o1q9thiv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 24px;
    border: none;
    background: #3A4C64;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-share-access:hover[b-t0o1q9thiv] {
    background: #2E3D51;
}

.btn-save:disabled[b-t0o1q9thiv],
.btn-delete:disabled[b-t0o1q9thiv],
.btn-cancel:disabled[b-t0o1q9thiv] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/Home/Components/Setting/Department/Components/Stakeholders/StakeholderJobTitleEditPanel.razor.rz.scp.css */
/* Siempre embebido (columna del medio de StakeholderEditPanel): sin tarjeta blanca propia, el
   contenedor padre ya la pone. */
.jobtitle-edit-panel[b-14im16vwj6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 15px;
    height: 100%;
}

.jte-header[b-14im16vwj6] {
    margin-bottom: 24px;
}

.jte-title[b-14im16vwj6] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0;
}

.jte-body[b-14im16vwj6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.jte-body[b-14im16vwj6]::-webkit-scrollbar {
    display: none;
}

.jte-toggles-col[b-14im16vwj6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}

.jte-toggle-section[b-14im16vwj6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.jte-toggle-label[b-14im16vwj6] {
    font-size: 0.85rem;
    font-weight: 600;
}

.jte-toggle-label.active[b-14im16vwj6] {
    color: #4CAF50;
}

.jte-toggle-label.inactive[b-14im16vwj6] {
    color: #f44336;
}

/* Switch */
.toggle-switch[b-14im16vwj6] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-14im16vwj6] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-14im16vwj6] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-14im16vwj6]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider[b-14im16vwj6] {
    background-color: #4CAF50;
}

input:checked+.slider[b-14im16vwj6]:before {
    transform: translateX(20px);
}

.select-with-action[b-14im16vwj6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.select-with-action select[b-14im16vwj6] {
    flex: 1;
    min-width: 0;
}

.btn-add-jobtitle[b-14im16vwj6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 8px;
    border: none;
    background-color: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-jobtitle:hover[b-14im16vwj6] {
    background-color: #e2e8f0;
    color: #1e293b;
}

.form-label[b-14im16vwj6] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

.form-select[b-14im16vwj6],
.form-control[b-14im16vwj6] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #f1f5f9;
    font-size: 0.9rem;
    color: #334D6E;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.form-select[b-14im16vwj6] {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* Disparador de fecha (solo lectura) que abre el PickerSidebarDate estándar. */
.jte-date-picker[b-14im16vwj6] {
    position: relative;
}

.jte-date-picker .form-control[readonly][b-14im16vwj6] {
    padding-right: 2.5rem;
}

.jte-date-picker-icon[b-14im16vwj6] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8898AA;
    font-size: 0.9rem;
    pointer-events: none;
}

.form-select:focus[b-14im16vwj6],
.form-control:focus[b-14im16vwj6] {
    border-color: #0E223B;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 34, 59, 0.1);
}

.jte-info-section[b-14im16vwj6] {
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-14im16vwj6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-14im16vwj6] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.delete-profile-section[b-14im16vwj6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-profile-label[b-14im16vwj6] {
    font-size: 0.85rem;
    color: #334D6E;
}

.btn-delete-profile[b-14im16vwj6] {
    align-self: flex-start;
    background: transparent;
    color: #FF00FF;
    border: 1px solid #FF00FF;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-profile:hover[b-14im16vwj6] {
    background: #FFF0FF;
}

.mt-3[b-14im16vwj6] {
    margin-top: 1rem;
}
/* /Pages/Home/Components/Setting/Department/Components/Stakeholders/StakeholdersPanel.razor.rz.scp.css */
.usuarios-panel[b-07yum1yt4l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

.us-tab[b-07yum1yt4l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    border-radius: 25px;
    border: 2px solid #E0E0E0;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8898AA;
    white-space: nowrap;
    flex-shrink: 0;
}

.us-tab:hover[b-07yum1yt4l] {
    border-color: #FFC107;
    color: #555;
}

.us-tab.active[b-07yum1yt4l] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
}

.us-tab.selected[b-07yum1yt4l] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.2);
}

.us-tab-label[b-07yum1yt4l] {
    font-weight: 700;
}

.us-groups-list[b-07yum1yt4l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 400px;
    width: 400px;
    min-width: 280px;
    max-width: 600px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    padding-right: 8px;
}

.st-panel-resizer[b-07yum1yt4l] {
    width: 10px;
    margin-left: 0;
    margin-right: 0;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.st-panel-resizer:hover[b-07yum1yt4l],
.st-panel-resizer.active[b-07yum1yt4l] {
    background-color: rgba(211, 59, 178, 0.12);
    border-right-color: #D33BB2;
}

.st-panel-resizer[b-07yum1yt4l]::after {
    content: "";
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background-color: #CBD5E1;
    transition: background-color 0.2s ease, height 0.2s ease;
}

.st-panel-resizer:hover[b-07yum1yt4l]::after,
.st-panel-resizer.active[b-07yum1yt4l]::after {
    background-color: #D33BB2;
    height: 48px;
}

.us-content-split[b-07yum1yt4l] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.us-groups-list[b-07yum1yt4l]::-webkit-scrollbar {
    display: none;
}

.us-group-header[b-07yum1yt4l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    margin-top: 8px;
}

.us-group-header:first-child[b-07yum1yt4l] {
    margin-top: 0;
}

.us-group-name[b-07yum1yt4l] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.us-group-count[b-07yum1yt4l] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8898AA;
}

.us-user-card[b-07yum1yt4l] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #F0F0F0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.us-user-card.expanded[b-07yum1yt4l] {
    border-bottom: 2px solid #FFC107;
}

.us-card-header[b-07yum1yt4l] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.us-user-card:hover[b-07yum1yt4l] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.us-user-card.selected[b-07yum1yt4l] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

.us-user-avatar[b-07yum1yt4l] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E8EBF2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.us-user-avatar img[b-07yum1yt4l] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.us-user-avatar img.loaded[b-07yum1yt4l] {
    opacity: 1;
}

.us-user-info[b-07yum1yt4l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.us-user-name[b-07yum1yt4l] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.us-user-lastname[b-07yum1yt4l] {
    font-size: 0.78rem;
    color: #8898AA;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.us-user-badge[b-07yum1yt4l] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.us-user-badge span[b-07yum1yt4l] {
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
}

.us-user-status[b-07yum1yt4l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 44px;
}

.us-status-dot[b-07yum1yt4l] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.us-status-dot.active[b-07yum1yt4l] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.us-status-dot.inactive[b-07yum1yt4l] {
    background: #BDBDBD;
}

.us-status-label[b-07yum1yt4l] {
    font-size: 0.65rem;
    font-weight: 600;
}

.us-status-label.active[b-07yum1yt4l] {
    color: #4CAF50;
}

.us-status-label.inactive[b-07yum1yt4l] {
    color: #999;
}

.us-toggle-btn[b-07yum1yt4l] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    
}

.us-toggle-btn:hover[b-07yum1yt4l] {
    background: #F5F5F5;
    color: #333;
}

.us-user-card.expanded .us-toggle-btn svg[b-07yum1yt4l] {
    transform: rotate(180deg);
}

.us-card-body[b-07yum1yt4l] {
    padding: 0 14px 14px 14px;
    border-top: 1px solid #F0F0F0;
    margin-top: 4px;
}

.us-job-list[b-07yum1yt4l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.us-job-item[b-07yum1yt4l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8F9FA;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.us-job-item:hover[b-07yum1yt4l] {
    background: #F1F3F5;
    border-color: #E2E8F0;
}

.us-job-item.selected[b-07yum1yt4l] {
    background: #FFF8E1;
    border-color: #FFC107;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.2);
}

.us-job-name[b-07yum1yt4l] {
    font-weight: 600;
    color: #333;
}

.us-job-level[b-07yum1yt4l] {
    color: #8898AA;
    font-size: 0.75rem;
}

.us-edit-detail[b-07yum1yt4l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px 30px 20px 40px;
    min-width: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.us-edit-detail[b-07yum1yt4l]::-webkit-scrollbar {
    width: 6px;
}

.us-edit-detail[b-07yum1yt4l]::-webkit-scrollbar-track {
    background: transparent;
}

.us-edit-detail[b-07yum1yt4l]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}
/* /Pages/Home/Components/Setting/Department/Components/Stakeholders/StakeholderTablePanel.razor.rz.scp.css */
.sh-table-panel-container[b-hdcrxgyora] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 10px;
}

.sh-table-grid-wrapper[b-hdcrxgyora] {
    position: relative;
    flex: 1;
    min-height: 400px;
    width: 100%;
}

.sh-table-grid[b-hdcrxgyora] {
    width: 100%;
    height: 100%;
    min-height: 400px;
    
    --ag-foreground-color: #334D6E;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #F1F4F7;
    --ag-header-foreground-color: #475569;
    --ag-border-color: #E4E8EE;
    --ag-row-border-color: #F1F4F7;
    --ag-row-hover-color: #F7F9FC;
    --ag-column-hover-color: #EBF0F5;
    --ag-selected-row-background-color: #E2E8F0;
    --ag-range-selection-background-color: rgba(211, 59, 178, 0.12);
    --ag-checkbox-checked-color: #d33bb2;
    --ag-input-focus-border-color: #d33bb2;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-font-size: 13px;
    --ag-wrapper-border-radius: 10px;
}

.sh-table-grid[b-hdcrxgyora]  .ag-header-cell-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sh-table-grid[b-hdcrxgyora]  .ag-root-wrapper {
    border-radius: 10px;
    border: 1px solid #E4E8EE;
    overflow: hidden;
}

.sh-table-grid[b-hdcrxgyora]  .ag-details-row {
    padding: 10px 14px;
    background-color: #FAFBFD;
    border-top: 1px solid #E4E8EE;
    border-bottom: 1px solid #E4E8EE;
}

.sh-table-loading-overlay[b-hdcrxgyora] {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 8px;
    font-size: 0.9rem;
    color: #334D6E;
}

.loading-spinner[b-hdcrxgyora] {
    width: 28px;
    height: 28px;
    border: 3px solid #E4E8EE;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: spin-b-hdcrxgyora 0.8s linear infinite;
}

@keyframes spin-b-hdcrxgyora {
    to {
        transform: rotate(360deg);
    }
}

.sh-table-grid[b-hdcrxgyora]  .ag-paging-panel {
    background-color: #F7F9FC;
    border-top: 1px solid #E4E8EE;
    color: #334D6E;
    white-space: nowrap !important;
    min-height: 38px;
}

.sh-table-grid[b-hdcrxgyora]  .ag-paging-row-summary-panel,
.sh-table-grid[b-hdcrxgyora]  .ag-paging-page-summary-panel,
.sh-table-grid[b-hdcrxgyora]  .ag-paging-page-size {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
/* /Pages/Home/Components/Setting/Department/DepartmentEditPanel.razor.rz.scp.css */
.department-edit-container[b-ya4twore6w] {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    height: auto;
    width: auto;
    max-width: 860px;
    overflow-y: auto;
    animation: fadeIn-b-ya4twore6w 0.3s ease-out;
}

@keyframes fadeIn-b-ya4twore6w {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.department-edit-header[b-ya4twore6w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.department-edit-header-text[b-ya4twore6w] {
    min-width: 0;
}

.edit-title[b-ya4twore6w] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334D6E;
}

.edit-subtitle[b-ya4twore6w] {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: #8898AA;
    font-weight: 500;
}

.department-edit-body[b-ya4twore6w] {
    flex-grow: 1;
    position: relative;
}

.department-loading-overlay[b-ya4twore6w] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
}

.department-loading-overlay .loading-text[b-ya4twore6w] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
}

.department-loading-overlay .st-spinner-blue[b-ya4twore6w] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(51, 77, 110, 0.15);
    border-radius: 50%;
    border-top-color: #FE00E4;
    animation: department-spin-b-ya4twore6w 0.8s linear infinite;
}

@keyframes department-spin-b-ya4twore6w {
    to {
        transform: rotate(360deg);
    }
}

.edit-department-form[b-ya4twore6w] {
    display: flex;
    flex-direction: column;
    max-width: 800px;
}

/* Avatar Group */
.avatar-group[b-ya4twore6w] {
    margin-bottom: 24px;
}

.avatar-wrapper[b-ya4twore6w] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: #E8EBED;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.department-avatar[b-ya4twore6w],
.avatar-placeholder[b-ya4twore6w] {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8898AA;
}

.upload-btn[b-ya4twore6w] {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FE00E4;
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(254, 0, 228, 0.3);
    transition: transform 0.2s;
}

.upload-btn:hover[b-ya4twore6w] {
    transform: scale(1.1);
}

/* Form Groups */
.form-group[b-ya4twore6w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.inline-group[b-ya4twore6w] {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.form-label[b-ya4twore6w],
.toggle-label[b-ya4twore6w] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
}

.input-with-icon[b-ya4twore6w] {
    position: relative;
    width: 100%;
}

.st-input[b-ya4twore6w] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E4E9F2;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #334D6E;
    font-weight: 500;
    background-color: #F7F9FC;
    transition: all 0.2s ease;
}

.st-input[b-ya4twore6w]::placeholder {
    color: #8F9BB3;
    font-weight: 400;
}

.st-input:focus[b-ya4twore6w] {
    outline: none;
    border-color: #FE00E4;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(254, 0, 228, 0.1);
}

.st-textarea[b-ya4twore6w] {
    resize: vertical;
    min-height: 80px;
}

/* Switch Toggle */
.switch[b-ya4twore6w] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input[b-ya4twore6w] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-ya4twore6w] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider[b-ya4twore6w]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider[b-ya4twore6w] {
    background-color: #FE00E4;
}

input:focus+.slider[b-ya4twore6w] {
    box-shadow: 0 0 1px #FE00E4;
}

input:checked+.slider[b-ya4twore6w]:before {
    transform: translateX(20px);
}

/* Form Actions */
.form-actions[b-ya4twore6w] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #E4E9F2;
    margin-bottom: 20px;
}

.btn-cancel[b-ya4twore6w] {
    padding: 10px 24px;
    background-color: #E8EBED;
    color: #334D6E;
    border: none;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-cancel:hover[b-ya4twore6w] {
    background-color: #DFE3E6;
}

.btn-save[b-ya4twore6w] {
    padding: 10px 32px;
    background-color: #FE00E4;
    color: white;
    border: none;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.3);
    transition: all 0.2s;
}

.btn-save:hover[b-ya4twore6w] {
    background-color: #D500C0;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(254, 0, 228, 0.4);
}

.flex-spacer[b-ya4twore6w] {
    flex-grow: 1;
}

.btn-delete[b-ya4twore6w] {
    padding: 10px 24px;
    background-color: transparent;
    color: #FF4D4F;
    border: 1px solid #FF4D4F;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete:hover[b-ya4twore6w] {
    background-color: #FFF1F0;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 77, 79, 0.15);
}
/* Aviso cuando la tienda ya usó todos los tipos de departamento disponibles. */
.dept-types-exhausted[b-ya4twore6w] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #F5D9A0;
    border-radius: 8px;
    background: #FDF8EC;
    color: #8A6A1F;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.dept-types-exhausted svg[b-ya4twore6w] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Eliminar va bajo Descripción, separado de Cancelar/Guardar para que una acción
   destructiva no quede pegada a las de confirmación. */
.delete-department-row[b-ya4twore6w] {
    display: flex;
    margin-top: 8px;
}
/* /Pages/Home/Components/Setting/Store/StoreCard.razor.rz.scp.css */
/* ========================================
   StoreCard - Estilo card1
   ======================================== */

.store-card[b-0j3eb0jhw9] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.store-card:hover[b-0j3eb0jhw9] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.store-card.active[b-0j3eb0jhw9] {
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.7),
        0 4px 20px rgba(212, 175, 55, 0.45),
        0 8px 32px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

/* ========================================
   Header - Background Image or Solid
   ======================================== */
.store-card-header[b-0j3eb0jhw9] {
    background: #4A5A6A;
    padding: 16px;
    padding-bottom: 28px;
    position: relative;
    min-height: 110px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    /* Sin overflow:hidden: el tab SVG de departamento sobresale del borde
       inferior del header hacia el cuerpo blanco (recortado igual por
       .store-card, que ya delimita las esquinas redondeadas de la tarjeta). */
    overflow: visible;
}

/* Dark overlay gradient for text readability over images */
.header-overlay[b-0j3eb0jhw9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.25) 60%,
            rgba(0, 0, 0, 0.10) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ========================================
   Header Content (Left side)
   ======================================== */
.store-header-content[b-0j3eb0jhw9] {
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-name[b-0j3eb0jhw9] {
    color: white;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ========================================
   Ubication Button
   ======================================== */
.ubication-btn[b-0j3eb0jhw9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 5px 12px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
    z-index: 2;
}

.ubication-btn svg[b-0j3eb0jhw9] {
    color: #ffffff;
    flex-shrink: 0;
}

.ubication-btn:hover[b-0j3eb0jhw9] {
    background: rgba(255, 255, 255, 0.856);
    border-color: rgba(247, 0, 255, 0.749);
    transform: scale(1.03);
    color: #FF00FF;
}

.ubication-btn:hover svg[b-0j3eb0jhw9] {
    color: #FF00FF;
}

/* ========================================
   Default Store Icon (Right side)
   ======================================== */
.store-default-icon[b-0j3eb0jhw9] {
    z-index: 2;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ========================================
   Department Tabs (Overlapping Header/Body)
   Usa el componente reutilizable FolderTabStrip (Components/Common), escalado
   a 130x24. ::deep ajusta el label del componente para el tamaño compacto.
   ======================================== */
.store-tabs-container[b-0j3eb0jhw9] {
    position: absolute;
    bottom: -1px;
    left: 0px;
    z-index: 10;
    max-width: calc(100% - 32px);
}

.store-tabs-container[b-0j3eb0jhw9]  .folder-tab-label {
    padding: 0px 0px 2px 14px;
    font-size: 0.75rem;
}

/* ========================================
   Body Section
   ======================================== */
.store-card-body[b-0j3eb0jhw9] {
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: white;
    position: relative;
    padding-top: 28px;
}

.store-details[b-0j3eb0jhw9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-row[b-0j3eb0jhw9] {
    display: flex;
    gap: 8px;
    font-size: 0.9rem;
}

.detail-label[b-0j3eb0jhw9] {
    font-weight: 700;
    color: #334D6E;
    min-width: 55px;
}

.detail-value[b-0j3eb0jhw9] {
    color: #66788A;
    word-break: break-all;
}

/* ========================================
   Actions
   ======================================== */
.store-actions[b-0j3eb0jhw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.edit-btn[b-0j3eb0jhw9] {
    background: #FF00FF;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-btn:hover[b-0j3eb0jhw9] {
    background: #D500C0;
    box-shadow: 0 6px 6px rgba(255, 0, 255, 0.35);
}

.view-more-btn:hover[b-0j3eb0jhw9] {
    background: #E8F0FE;
    border-color: #1a73e8;
    box-shadow: 0 2px 4px rgba(26, 115, 232, 0.2);
}

/* ========================================
   ERP Select / Picker Styles
   ======================================== */
.erp-row[b-0j3eb0jhw9] {
    margin-top: 4px;
    align-items: center;
}

.erp-select-container[b-0j3eb0jhw9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 140px;
    position: relative;
}

.erp-select-container[b-0j3eb0jhw9]  .st-picker-trigger {
    width: 100%;
    min-height: 34px;
    height: 34px;
    border-radius: 8px;
    padding: 0 46px 0 10px;
    background: #F8F9FA;
    border: 1px solid #E0E4E8;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-select-container[b-0j3eb0jhw9]  .st-picker-trigger:hover {
    border-color: #FF00FF;
}

.erp-select-container[b-0j3eb0jhw9]  .st-picker-value {
    font-size: 13px;
    font-weight: 600;
    color: #4A5A6A;
}

.erp-select-container[b-0j3eb0jhw9]  .st-picker-icon-container {
    width: 22px;
    height: 22px;
}

.erp-select-container[b-0j3eb0jhw9]  .st-picker-initials {
    font-size: 10px;
}

.view-more-btn[b-0j3eb0jhw9] {
    background: transparent;
    color: #FF00FF;
    border: none;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.view-more-btn:hover[b-0j3eb0jhw9] {
    color: #D500C0;
    text-decoration: underline;
}
/* /Pages/Home/Components/Setting/Store/StoreDetailPanel.razor.rz.scp.css */
.store-detail-panel[b-csz30x23qw] {
    height: 100%;
    min-height: 0;
    overflow: clip;
}

/* En modo colapsado no hay contenido ancho que recortar, y el clip de arriba
   cortaría los tooltips de las opciones (que se dibujan fuera del riel
   angosto de 76px). Se libera el recorte solo en ese modo. */
.store-detail-panel.collapsed[b-csz30x23qw] {
    overflow: visible;
}

/* store-full-content reemplaza al layout que antes vivía directo en
   .store-detail-panel; se separa para poder ocultarlo/mostrarlo según el
   modo colapsado sin duplicar el resto de las reglas de este archivo. */
.store-full-content[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

/* ==========================================================================
   Riel colapsado — reemplaza al contenido completo cuando hay una opción
   seleccionada, para cederle espacio al panel ancho de esa opción. Solo se
   expande con un clic explícito en el ícono junto al acrónimo del
   departamento (clase .rail-expanded, ver ToggleRailExpanded en el
   code-behind); nunca con hover. .company-column en DynamicPanel.razor.css
   reacciona a esta misma clase con :has() para ceder ancho a la columna.
   ========================================================================== */
.store-detail-panel.collapsed .store-full-content[b-csz30x23qw] {
    display: none;
}

.store-detail-panel.collapsed.rail-expanded .store-full-content[b-csz30x23qw] {
    display: flex;
}

/* Se oculta el contenedor completo (foto + sidebar), no solo el sidebar
   interior: si solo se ocultara .store-collapsed-rail, .store-collapsed-container
   seguiría ocupando height:100% y empujaría .store-full-content fuera de vista. */
.store-detail-panel.collapsed.rail-expanded .store-collapsed-container[b-csz30x23qw] {
    display: none;
}

/* Contenedor exterior: foto de tienda (fuera del sidebar blanco, sobre el
   fondo oscuro del panel) + sidebar blanco con título/opciones. Sin scroll
   propio: una lista fija de 5 opciones siempre entra en el alto disponible,
   y evitar overflow:auto/hidden aquí es lo que permite que los tooltips de
   las opciones se vean fuera del riel angosto (ver .collapsed-option-icon::after). */
.store-collapsed-container[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    height: 100%;
}

.store-collapsed-rail[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding-bottom: 12px;
    background: #ffffff;
    border-radius: 16px 16px 22px 22px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.40);
}

.collapsed-store-photo[b-csz30x23qw] {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: #E9EDF0;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF00FF;
    overflow: hidden;
    flex-shrink: 0;
}

.collapsed-store-photo-img[b-csz30x23qw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Título de la sección: el acrónimo del departamento actúa como encabezado
   del sidebar colapsado, con un ícono junto a él que indica que se puede
   expandir el panel. Solo expande con clic (ToggleRailExpanded), no con hover. */
.collapsed-dept-header[b-csz30x23qw] {
    flex-shrink: 0;
    width: 100%;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px solid #E4E8EC;
}

.collapsed-dept-title[b-csz30x23qw] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapsed-dept-expand-btn[b-csz30x23qw] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #E4E8EC;
    color: #556575;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collapsed-dept-expand-btn:hover[b-csz30x23qw] {
    background: #dea301;
    color: #1a2a42;
}

.collapsed-options-list[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.collapsed-option-icon[b-csz30x23qw] {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #F1F4F7;
    color: #556575;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.collapsed-option-icon:hover[b-csz30x23qw] {
    background: #E4E8EC;
    color: #1a1a2e;
    transform: scale(1.05);
}

.collapsed-option-icon.active[b-csz30x23qw] {
    background: #dea301;
    color: #ffffff;
}

.collapsed-option-icon.active svg[b-csz30x23qw] {
    color: #ffffff;
    fill: #ffffff;
}

.collapsed-option-icon svg[b-csz30x23qw] {
    width: 22px;
    height: 22px;
}

/* Tooltip: al pasar el cursor sobre una opción del riel, se muestra su
   nombre a la derecha del ícono (el riel vive pegado al borde izquierdo). */
.collapsed-option-icon[b-csz30x23qw]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: #ffffff;
    color: #1a1a2e;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

.collapsed-option-icon:hover[b-csz30x23qw]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Store Summary Header (mirrors CompanyDetailPanel's company summary)
   ========================================================================== */
.store-summary-header[b-csz30x23qw] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.store-summary-logo[b-csz30x23qw] {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: #E9EDF0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF00FF;
    overflow: hidden;
    flex-shrink: 0;
}

.store-summary-logo-img[b-csz30x23qw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-summary-info[b-csz30x23qw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.store-summary-name[b-csz30x23qw] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.store-summary-meta[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.store-summary-line[b-csz30x23qw] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Department Folder Tabs — usa el componente reutilizable FolderTabStrip
   (Components/Common). Su CSS de tabs/curvas vive en FolderTabStrip.razor.css.
   ========================================================================== */
.dept-tabs-bar[b-csz30x23qw] {
    flex-shrink: 0;
    /* Cancela el gap:16px del contenedor padre, más el margen de recorte
       propio de cada tab (clip-path), para que no quede espacio visible
       entre las pestañas y la tarjeta blanca. */
    margin-bottom: -17px;
    padding-right: 10px;
}

/* ==========================================================================
   Store Config Card (options / sub-panels)
   ========================================================================== */
.store-config-card[b-csz30x23qw] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0 12px 12px 12px;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.40);
}

.store-config-body[b-csz30x23qw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.options-header-row[b-csz30x23qw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.options-header-title[b-csz30x23qw] {
    font-size: 1rem;
    font-weight: 700;
    color: #8898AA;
}

.dept-edit-btn[b-csz30x23qw] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dept-edit-btn:hover[b-csz30x23qw] {
    background: #FE00E4;
    color: white;
}

/* ==========================================================================
   Options List (vertical rows, no icons — matches the flat card design)
   ========================================================================== */
.options-list[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-row[b-csz30x23qw] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #E4E8EC;
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-row:hover[b-csz30x23qw] {
    background: #DADFE4;
    transform: translateX(2px);
}

.option-row.selected[b-csz30x23qw] {
    box-shadow: 0 0 0 2px #dea301;
    background: #DADFE4;
}

.option-row-icon[b-csz30x23qw] {
    color: #556575;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-row-icon svg[b-csz30x23qw] {
    width: 20px;
    height: 20px;
}

.option-row-label[b-csz30x23qw] {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    color: #334155;
}

.option-row-count[b-csz30x23qw] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #8898AA;
    min-width: 24px;
    text-align: right;
}

/* ==========================================================================
   No Departments Empty State
   ========================================================================== */
.no-departments-full-container[b-csz30x23qw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.inbox-empty-container[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 12px 20px;
    height: 100%;
    width: 100%;
}

.inbox-empty-container h3[b-csz30x23qw] {
    font-size: 1rem;
    color: #334D6E;
    margin-bottom: 12px;
    font-weight: 600;
}

.inbox-empty-container p[b-csz30x23qw] {
    color: #8898AA;
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 320px;
    line-height: 1.5;
}

.empty-state-img[b-csz30x23qw] {
    width: 155px;
    max-width: 100%;
    height: auto;
    margin-bottom: 0px;
    opacity: 0.95;
}

.empty-state-text[b-csz30x23qw] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #475569;
    text-transform: lowercase;
    margin-bottom: 8px;
}

.empty-state-buttons[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.btn-empty-create[b-csz30x23qw] {
    background: linear-gradient(135deg, #e500cd, #c800b0);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.3);
}

.btn-empty-create:hover[b-csz30x23qw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(229, 0, 205, 0.5);
}

.btn-empty-create:active[b-csz30x23qw] {
    transform: translateY(0);
}

.btn-empty-join[b-csz30x23qw] {
    background: #5c6f84;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 700;
    width: 160px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-empty-join:hover[b-csz30x23qw] {
    background: #4b5c6e;
    transform: translateY(-2px);
}

.btn-empty-join:active[b-csz30x23qw] {
    transform: translateY(0);
}

.btn-create-first-dept[b-csz30x23qw] {
    background: #FF00FF;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-create-first-dept:hover[b-csz30x23qw] {
    background: #D500C0;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 0, 255, 0.5);
}

.btn-create-first-dept:active[b-csz30x23qw] {
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Setting/Store/StoreEditModal.razor.rz.scp.css */
.companyedit-overlay[b-hwoj7n6hgb] {
    position: fixed;
    top: 0;
    left: 80px;
    width: calc(100vw - 80px);
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.companyedit-overlay.sidebar-collapsed[b-hwoj7n6hgb] {
    left: 0px;
    width: 100%;
}

.companyedit-modal[b-hwoj7n6hgb] {
    background-color: #ffffff;
    border-radius: 20px;
    width: 900px;
    max-width: 90vw;
    height: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInScale-b-hwoj7n6hgb 0.3s ease-out;
    overflow: hidden;
}

@keyframes fadeInScale-b-hwoj7n6hgb {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header */
.companyedit-header[b-hwoj7n6hgb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 32px 16px;
    border-bottom: 1px solid #E8EBED;
}

.header-title[b-hwoj7n6hgb] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
}

.header-subtitle[b-hwoj7n6hgb] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: #8898AA;
    font-weight: 500;
}

.header-actions[b-hwoj7n6hgb] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-close-modal[b-hwoj7n6hgb] {
    background: transparent;
    border: none;
    color: #8898AA;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    transition: all 0.2s;
}

.btn-close-modal:hover[b-hwoj7n6hgb] {
    background: #F1F4F8;
    color: #334D6E;
}

/* Body */
.companyedit-body[b-hwoj7n6hgb] {
    flex: 1;
    display: flex;
    padding: 0;
    overflow: hidden;
}

/* Main Column */
.main-column[b-hwoj7n6hgb] {
    flex: 1;
    padding: 24px 32px;
    border-right: 1px solid #E8EBED;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Toggle Switch */
.form-toggle-group[b-hwoj7n6hgb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.toggle-switch[b-hwoj7n6hgb] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-hwoj7n6hgb] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-hwoj7n6hgb] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E8EBED;
    transition: .3s;
}

.slider[b-hwoj7n6hgb]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider.round[b-hwoj7n6hgb] {
    border-radius: 24px;
}

.slider.round[b-hwoj7n6hgb]:before {
    border-radius: 50%;
}

input:checked+.slider[b-hwoj7n6hgb] {
    background-color: #00D06A;
}

input:checked+.slider[b-hwoj7n6hgb]:before {
    transform: translateX(20px);
}

.toggle-label[b-hwoj7n6hgb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #00D06A;
}

input:not(:checked)+.slider+.toggle-label[b-hwoj7n6hgb] {
    color: #8898AA;
}

/* Forms */
.form-grid[b-hwoj7n6hgb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.form-group[b-hwoj7n6hgb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-hwoj7n6hgb] {
    grid-column: 1 / -1;
}

.form-label[b-hwoj7n6hgb] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334D6E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control[b-hwoj7n6hgb],
.form-select[b-hwoj7n6hgb] {
    padding: 10px 14px;
    border: 1px solid #E8EBED;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #334D6E;
    font-family: inherit;
    transition: all 0.2s;
    background-color: #FCFDFD;
}

.form-control:focus[b-hwoj7n6hgb],
.form-select:focus[b-hwoj7n6hgb] {
    outline: none;
    border-color: #FECB00;
    box-shadow: 0 0 0 3px rgba(254, 203, 0, 0.15);
    background-color: #FFFFFF;
}

.form-control[b-hwoj7n6hgb]::placeholder {
    color: #A3B5C6;
}

select.form-select[b-hwoj7n6hgb],
select.form-control[b-hwoj7n6hgb] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238898AA' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    padding-right: 32px;
}

/* Delete Profile */
.delete-profile-section[b-hwoj7n6hgb] {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-profile-label[b-hwoj7n6hgb] {
    font-size: 0.875rem;
    color: #334D6E;
    font-weight: 500;
}

.btn-delete-profile[b-hwoj7n6hgb] {
    background: transparent;
    border: 1px solid #FF3B30;
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-profile:hover[b-hwoj7n6hgb] {
    background: #FFF2F1;
}

/* Photo Column */
.photo-column[b-hwoj7n6hgb] {
    width: 250px;
    background-color: #F8FAFB;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-preview[b-hwoj7n6hgb] {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: contain;
    background-color: #E9EDF0;
    /* Matching unified background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
    border: 1px solid #E8EBED;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-preview.placeholder[b-hwoj7n6hgb] {
    padding: 0;
}

.photo-label[b-hwoj7n6hgb] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.photo-actions[b-hwoj7n6hgb] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.btn-upload-foto[b-hwoj7n6hgb] {
    flex: 1;
    background: white;
    border: 1px solid #E8EBED;
    color: #334D6E;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-upload-foto:hover[b-hwoj7n6hgb] {
    border-color: #FECB00;
    color: #FECB00;
}

.btn-camera-icon[b-hwoj7n6hgb] {
    width: 36px;
    background: white;
    border: 1px solid #E8EBED;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-camera-icon:hover[b-hwoj7n6hgb] {
    color: #334D6E;
    border-color: #A3B5C6;
}

/* Footer */
.companyedit-footer[b-hwoj7n6hgb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid #E8EBED;
    background-color: #F8FAFB;
}

.btn-secondary[b-hwoj7n6hgb] {
    background: white;
    border: 1px solid #E8EBED;
    color: #334D6E;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover:not(:disabled)[b-hwoj7n6hgb] {
    background: #F1F4F8;
}

.btn-primary[b-hwoj7n6hgb] {
    background: #FF00FF;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled)[b-hwoj7n6hgb] {
    background: #D500C0;
    transform: translateY(-1px);
}

.btn-primary:disabled[b-hwoj7n6hgb],
.btn-secondary:disabled[b-hwoj7n6hgb] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-spinner[b-hwoj7n6hgb] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-hwoj7n6hgb 1s ease-in-out infinite;
}

@keyframes spin-b-hwoj7n6hgb {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar styles for main column */
.main-column[b-hwoj7n6hgb]::-webkit-scrollbar {
    width: 6px;
}

.main-column[b-hwoj7n6hgb]::-webkit-scrollbar-track {
    background: transparent;
}

.main-column[b-hwoj7n6hgb]::-webkit-scrollbar-thumb {
    background: #E8EBED;
    border-radius: 3px;
}

.main-column[b-hwoj7n6hgb]::-webkit-scrollbar-thumb:hover {
    background: #A3B5C6;
}
/* ==========================================
   Selector de ubicación en mapa
   ========================================== */
.location-btn-row[b-hwoj7n6hgb] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-pick-location[b-hwoj7n6hgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 20px;
    border: none;
    border-radius: 18px;
    background: #FF00FF;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.3);
}

.btn-pick-location:hover[b-hwoj7n6hgb] {
    background: #D500C0;
    transform: translateY(-1px);
}

.btn-gps-location[b-hwoj7n6hgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 18px;
    border: 1px solid #1A2A42;
    border-radius: 18px;
    background: #1A2A42;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(26, 42, 66, 0.15);
}

.btn-gps-location:hover:not(:disabled)[b-hwoj7n6hgb] {
    background: #253d5e;
    border-color: #253d5e;
    transform: translateY(-1px);
}

.btn-gps-location:disabled[b-hwoj7n6hgb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Por encima del modal de tienda (z-index 2000) pero debajo de
   ConfirmModal/AlertModal (999999), que deben poder taparlo. */
.locpicker-overlay[b-hwoj7n6hgb] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.locpicker-modal[b-hwoj7n6hgb] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    height: 100%;
    max-height: 640px;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26, 42, 66, 0.35);
}

.locpicker-header[b-hwoj7n6hgb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #E8EBED;
}

.locpicker-title[b-hwoj7n6hgb] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1A2A42;
}

.locpicker-subtitle[b-hwoj7n6hgb] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: #8898AA;
}

.locpicker-header-actions[b-hwoj7n6hgb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-locate-me[b-hwoj7n6hgb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #FF00FF;
    border-radius: 14px;
    background: rgba(255, 0, 255, 0.08);
    color: #D500C0;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-locate-me:hover:not(:disabled)[b-hwoj7n6hgb] {
    background: #FF00FF;
    color: #FFFFFF;
}

.btn-locate-me:disabled[b-hwoj7n6hgb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* El mapa toma el alto sobrante; min-height:0 evita que el flex item lo desborde. */
.locpicker-map[b-hwoj7n6hgb] {
    flex: 1;
    min-height: 0;
    background: #F1F1F1;
}

.locpicker-footer[b-hwoj7n6hgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid #E8EBED;
    background: #FCFDFD;
}

.locpicker-coords[b-hwoj7n6hgb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.locpicker-coords-label[b-hwoj7n6hgb] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.locpicker-coords-value[b-hwoj7n6hgb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334D6E;
}

.locpicker-coords-empty[b-hwoj7n6hgb] {
    font-size: 0.8125rem;
    color: #A3B5C6;
}

.locpicker-actions[b-hwoj7n6hgb] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* /Pages/Home/Components/Shift/ShiftUnavailableBanner.razor.rz.scp.css */
.shift-unavailable-wrapper[b-1wozqjf92l] {
    position: relative;
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0;
    margin-top: 0;
    animation: shiftSlideDown-b-1wozqjf92l 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shiftSlideDown-b-1wozqjf92l {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shift-unavailable-capsule[b-1wozqjf92l] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(30, 41, 59, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 4px 8px 4px 12px;
    height: 46px;
    box-sizing: border-box;
}

.help-btn[b-1wozqjf92l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.help-btn:hover[b-1wozqjf92l] {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: scale(1.05);
}

.help-icon[b-1wozqjf92l] {
    width: 18px;
    height: 18px;
}

.shift-text-container[b-1wozqjf92l] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    user-select: none;
}

.shift-text-line1[b-1wozqjf92l] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

.shift-text-line2[b-1wozqjf92l] {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.start-shift-btn[b-1wozqjf92l] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e500cd;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.4px;
    border: none;
    border-radius: 24px;
    height: 40px;
    padding: 0 18px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(229, 0, 205, 0.4);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.start-shift-btn:hover:not(:disabled)[b-1wozqjf92l] {
    background: #f01bd7;
    box-shadow: 0 6px 16px rgba(229, 0, 205, 0.55);
    transform: translateY(-1px);
}

.start-shift-btn:active:not(:disabled)[b-1wozqjf92l] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(229, 0, 205, 0.4);
}

.start-shift-btn:disabled[b-1wozqjf92l] {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .shift-unavailable-wrapper[b-1wozqjf92l] {
        bottom: 16px;
        width: 92%;
    }

    .shift-unavailable-capsule[b-1wozqjf92l] {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
}
/* /Pages/Home/Components/TenantSelector.razor.rz.scp.css */
/* TenantSelector Styles */

/* Base Tenant Card */
.tenant-card[b-k5uqchi5w6] {
    pointer-events: auto;
    background: rgba(104, 119, 141, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    box-sizing: border-box;
    /* 190px y no 240px: el contenido colapsado (logo + sede/departamento) cabe de sobra y los 50px
       que sobraban los ocupa el botón de pantalla completa de la cabecera. Es solo el piso: un
       nombre largo sigue ensanchando la tarjeta porque el ancho es fit-content. */
    min-width: 190px;
    width: fit-content;
    box-shadow: 0 8px 20px rgba(15, 28, 45, 0.3);
}

.tenant-card:not(.expanded)[b-k5uqchi5w6] {
    height: 44px;
}

.tenant-card.expanded[b-k5uqchi5w6] {
    width: 270px;
    min-width: 270px;
    cursor: default;
    max-height: calc(100vh - 60px); /* Evitar que el panel total se salga de la pantalla */
    max-height: calc(100dvh - 60px);
    display: flex;
    flex-direction: column;
}

/* Header (Always Visible) */
.tenant-header[b-k5uqchi5w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    box-sizing: border-box;
    padding: 3px 4px 3px 16px;
    gap: 12px;
}

.tenant-card:not(.expanded) .tenant-header[b-k5uqchi5w6] {
    height: 100%;
    min-height: 0;
    padding: 1px 3px 1px 12px;
}

.tenant-card:not(.expanded) .tenant-header-info[b-k5uqchi5w6] {
    gap: 1px;
}

.tenant-card:not(.expanded) .tenant-name[b-k5uqchi5w6] {
    font-size: 1rem;
    line-height: 1.1;
}

.tenant-card:not(.expanded) .tenant-subtitle[b-k5uqchi5w6] {
    font-size: 0.75rem;
    line-height: 1.1;
}

.tenant-card.operator:not(.expanded) .tenant-subtitle[b-k5uqchi5w6],
.tenant-card.operator:not(.expanded) .tenant-operator-badge[b-k5uqchi5w6] {
    display: none;
}

.tenant-card.operator:not(.expanded) .tenant-operator-tag[b-k5uqchi5w6] {
    margin-bottom: 0;
}

.tenant-card.operator:not(.expanded) .tenant-operator-role[b-k5uqchi5w6] {
    font-size: 0.7rem;
    line-height: 1.1;
}

.tenant-card.expanded .tenant-header[b-k5uqchi5w6] {
    padding: 9px 20px;
    border-bottom: none;
}

.tenant-header-info[b-k5uqchi5w6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    text-align: right;
    order: 0;
    min-width: 0;
}

/* Etiqueta de modo operador sobre el nombre del taller: sustituye al banner flotante. */
.tenant-operator-tag[b-k5uqchi5w6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    line-height: 1.2;
    margin-bottom: 2px;
    min-width: 0;
}

.tenant-operator-role[b-k5uqchi5w6] {
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Distintivo de plataforma: pastilla blanca con el ámbar de EsferaTech, para que se lea igual sobre
   la tarjeta gris de producción y sobre el amarillo de staging. */
.tenant-operator-badge[b-k5uqchi5w6] {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: #ffffff;
    color: #e5a600;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tenant-card.expanded .tenant-operator-role[b-k5uqchi5w6] {
    font-size: 0.85rem;
}

.tenant-card.expanded .tenant-operator-badge[b-k5uqchi5w6] {
    font-size: 0.72rem;
}

.tenant-name[b-k5uqchi5w6] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-card.expanded .tenant-name[b-k5uqchi5w6] {
    font-size: 1.3rem;
}

.tenant-subtitle[b-k5uqchi5w6] {
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.tenant-card.expanded .tenant-subtitle[b-k5uqchi5w6] {
    font-size: 0.9rem;
}

.tenant-icon[b-k5uqchi5w6] {
    width: 48px;
    height: 48px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(100, 100, 120, 0.7);
    flex-shrink: 0;
    order: 1;
}

.tenant-card:not(.expanded) .tenant-icon[b-k5uqchi5w6] {
    width: 40px;
    height: 40px;
}

.tenant-image[b-k5uqchi5w6] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

.tenant-card:not(.expanded) .tenant-image[b-k5uqchi5w6] {
    width: 36px;
    height: 36px;
}

.tenant-card.expanded .tenant-icon[b-k5uqchi5w6] {
    width: 55px;
    height: 55px;
}

/* Expanded Content */
.tenant-expanded-content[b-k5uqchi5w6] {
    animation: fadeIn-b-k5uqchi5w6 0.2s ease-out;
    background: transparent;
    padding: 9px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.tenant-expanded-content[b-k5uqchi5w6]::-webkit-scrollbar {
    width: 6px;
}

.tenant-expanded-content[b-k5uqchi5w6]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
}

@keyframes fadeIn-b-k5uqchi5w6 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .tenant-card:not(.expanded)[b-k5uqchi5w6] {
        min-width: 45px;
        width: 45px;
    }

    .tenant-card:not(.expanded) .tenant-header[b-k5uqchi5w6] {
        min-height: 0;
        padding: 1px;
    }

    .tenant-card:not(.expanded) .tenant-header-info[b-k5uqchi5w6] {
        display: none;
    }

    .tenant-card:not(.expanded) .tenant-icon[b-k5uqchi5w6] {
        width: 40px;
        height: 40px;
    }

    .tenant-card:not(.expanded) .tenant-image[b-k5uqchi5w6] {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tenant-card[b-k5uqchi5w6],
    .tenant-expanded-content[b-k5uqchi5w6] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Company Accordion */
.company-accordion[b-k5uqchi5w6] {
    background: white;
    border-radius: 15px;
    margin-bottom: 8px;
    overflow: hidden;
}

.company-accordion:last-of-type[b-k5uqchi5w6] {
    margin-bottom: 0;
}

.company-accordion-header[b-k5uqchi5w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    padding-bottom:2px;
    background: white;
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 15px;
}

.company-accordion-header:hover[b-k5uqchi5w6] {
    background: #f8f9fa;
}

.company-accordion-header.expanded[b-k5uqchi5w6] {
    border-radius: 15px 15px 0 0;
}

.company-accordion-header .company-name[b-k5uqchi5w6] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow[b-k5uqchi5w6] {
    transition: transform 0.2s;
    color: #2c3e50;
}

.dropdown-arrow.open[b-k5uqchi5w6] {
    transform: rotate(180deg);
}

/* Tenant List */
.tenant-list[b-k5uqchi5w6] {
    max-height: none; /* Quitamos el límite individual ya que el contenedor principal tiene el scroll */
    overflow-y: visible;
    padding: 7px;
    background: white;
    border-radius: 0 0 15px 15px;
    padding-top: 0px;
}

.tenant-item[b-k5uqchi5w6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    color: #2c3e50;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 12px;
    margin-bottom: 9px;
    transition: all 0.15s;
    border: 1px solid #ecf0f1;
    background: #D9D9D9;
}

.tenant-item:last-child[b-k5uqchi5w6] {
    margin-bottom: 0;
}

.tenant-item:hover[b-k5uqchi5w6] {
    background: #D9D9D9;
    border-color: #dde1e4;
}

.tenant-item.selected[b-k5uqchi5w6] {
    background: #e5b900;
    color: white;
    font-weight: 600;
    border-color: #e5b900;
}

/* Tenant Icon (Custom SVG) */
.tenant-item-icon[b-k5uqchi5w6] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 0px;
    opacity: 0.6;
    filter: invert(0);
    transition: all 0.2s;
}

.tenant-item.selected .tenant-item-icon[b-k5uqchi5w6] {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Tenant Info Text */
.tenant-item-info[b-k5uqchi5w6] {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
}

.tenant-item-name[b-k5uqchi5w6] {
    font-size: 1rem;
    font-weight: 600;
    color: #3D5676;
    margin-bottom: -5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-item.selected .tenant-item-name[b-k5uqchi5w6] {
    color: white;
}

.tenant-item-dept[b-k5uqchi5w6] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #3d5676eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-item.selected .tenant-item-dept[b-k5uqchi5w6] {
    color: #f8f9fa;
}

/* Action Buttons */
.tenant-actions[b-k5uqchi5w6] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.btn-cancel[b-k5uqchi5w6],
.btn-confirm[b-k5uqchi5w6] {
    padding: 10px 15px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel[b-k5uqchi5w6] {
    background: #ecf0f1;
    color: #2c3e50;
    border: 1px solid #dde1e4;
}

.btn-cancel:hover[b-k5uqchi5w6] {
    background: #dde1e4;
    transform: scale(1.02);
}

.btn-confirm[b-k5uqchi5w6] {
    background: #e500cd;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(229, 0, 205, 0.3);
}

.btn-confirm:hover[b-k5uqchi5w6] {
    background: #cc00b8;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(229, 0, 205, 0.4);
}

/* Environment Color Indicators */

/* Development - Red */
.tenant-card.env-development[b-k5uqchi5w6] {
    background: rgba(220, 53, 69, 0.85) !important;
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.5) !important;
}

.tenant-card.env-development.expanded[b-k5uqchi5w6] {
    background: rgba(220, 53, 69, 0.9) !important;
}

.tenant-card.env-development .tenant-header[b-k5uqchi5w6] {
    border-left: none;
}

/* Staging/Test - Yellow */
.tenant-card.env-staging[b-k5uqchi5w6] {
    background: rgba(255, 193, 7, 0.85) !important;
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5) !important;
}

.tenant-card.env-staging.expanded[b-k5uqchi5w6] {
    background: rgba(255, 193, 7, 0.9) !important;
}

.tenant-card.env-staging .tenant-icon[b-k5uqchi5w6] {
    color: #1f2f45 !important;
}

.tenant-card.env-staging .tenant-header[b-k5uqchi5w6] {
    border-left: none;
}
/* ---------------------------------------------------------------------------------------------
   Sesión de operador EsferaTech: mismo control, tarjeta más ancha porque además de la lista lleva
   buscador, aviso de acceso delegado y motivo. Con buscador solo scrollea la lista, para que el
   botón de confirmar no se vaya fuera de vista.
   --------------------------------------------------------------------------------------------- */
.tenant-card.operator.expanded[b-k5uqchi5w6] {
    width: 340px;
    min-width: 340px;
}

.tenant-picker-fixed[b-k5uqchi5w6] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 9px;
    animation: fadeIn-b-k5uqchi5w6 0.2s ease-out;
}

.tenant-picker-fixed .tenant-expanded-content[b-k5uqchi5w6] {
    padding: 0;
    max-height: min(42vh, 320px);
    flex: 0 1 auto;
}

/* El motivo ya trae su propia línea divisoria arriba, así que los botones no repiten borde. */
.tenant-picker-fixed .tenant-actions[b-k5uqchi5w6] {
    background: transparent;
    border-top: none;
    justify-content: center;
    padding: 16px 0 4px;
}

.tenant-picker-fixed .btn-confirm[b-k5uqchi5w6] {
    min-width: 150px;
    padding: 12px 28px;
    font-size: 1rem;
}

.btn-confirm:disabled[b-k5uqchi5w6] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Buscador (solo cuando ShowSearch): separado de la lista por una línea sutil. */
.tenant-search[b-k5uqchi5w6] {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.tenant-search input[b-k5uqchi5w6] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px; /* mitad de la altura: píldora */
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
}

.tenant-search input[b-k5uqchi5w6]::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

/* Botones que el navegador inyecta dentro del campo: autorrelleno de contacto/credenciales (WebKit)
   y la "x" de limpiar de type=search. Se pintan encima del texto y no son parte del diseño. */
.tenant-search input[b-k5uqchi5w6]::-webkit-contacts-auto-fill-button,
.tenant-search input[b-k5uqchi5w6]::-webkit-credentials-auto-fill-button,
.tenant-search input[b-k5uqchi5w6]::-webkit-caps-lock-indicator {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.tenant-search input[b-k5uqchi5w6]::-webkit-search-decoration,
.tenant-search input[b-k5uqchi5w6]::-webkit-search-cancel-button,
.tenant-search input[b-k5uqchi5w6]::-webkit-search-results-button,
.tenant-search input[b-k5uqchi5w6]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.tenant-search input:focus[b-k5uqchi5w6] {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.7);
}

.tenant-empty[b-k5uqchi5w6] {
    padding: 18px 4px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}
/* /Pages/Home/Components/TrafficLight/TrafficLightAssetCard.razor.rz.scp.css */
.tl-asset-card[b-w6oiq1hxkm] {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 195px;
    overflow: hidden;
}

.tl-card-top[b-w6oiq1hxkm] {
    display: flex;
    flex-direction: row;
    padding: 8px 8px 0 8px; /* Inner padding */
}

.tl-image-area[b-w6oiq1hxkm] {
    position: relative;
    width: 150px;
    height: 110px;
    flex-shrink: 0;
}

.tl-main-image[b-w6oiq1hxkm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    background: #f1f5f9;
}

.tl-progress-pill[b-w6oiq1hxkm] {
    position: absolute;
    bottom: 5px;
    left: 4px;
    padding: 2px 14px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.9rem;
    border: 2px solid #ffffff; /* Cutout look */
    z-index: 3;
    color: #ffffff;
    background: #ACACAC; /* Fallback; el color real llega por style inline (TrafficLightColorHelper) */
}

.tl-details-area[b-w6oiq1hxkm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 28px; /* Space for the overlap icons */
}

.tl-wo-number[b-w6oiq1hxkm] {
    text-align: right;
    font-weight: 800;
    color: #e879f9; /* Pink from mockup */
    font-size: 0.85rem;
    margin-bottom: 8px;
    padding-right: 8px;
}

.tl-info-row[b-w6oiq1hxkm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    margin-left: -44px; /* Pull just the row left to overlap the image */
}

.tl-icon-circle[b-w6oiq1hxkm] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; /* Cutout look */
    z-index: 2;
    background: #e2e8f0;
    flex-shrink: 0;
    object-fit: cover;
}

.tl-process-icon[b-w6oiq1hxkm] {
    font-size: 1.1rem;
    color: #ffffff;
}

.tl-worker-avatar[b-w6oiq1hxkm] {
    border-color: #fcd34d; /* yellow border for avatar in mockup */
}

.tl-process-avatar[b-w6oiq1hxkm] {
    object-fit: contain;
    padding: 4px;
    background: #ffffff;
    border-color: #fcd34d; /* Mismo borde amarillo que el avatar del trabajador */
}

.tl-info-text[b-w6oiq1hxkm] {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-card-bottom[b-w6oiq1hxkm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 16px;
    margin-top: auto;
}

.tl-bottom-left[b-w6oiq1hxkm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

.tl-plate[b-w6oiq1hxkm] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #334155;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-description[b-w6oiq1hxkm] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.tl-bottom-right[b-w6oiq1hxkm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 2px;
    flex-shrink: 0;
    margin-right: 42px;
}

.tl-date[b-w6oiq1hxkm] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px;
}

.tl-insurance-name[b-w6oiq1hxkm] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    margin-bottom: 2px;
}

.tl-time-label[b-w6oiq1hxkm] {
    font-size: 0.8rem;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
}

/* Botón de Entregar (Handover Button) */
.tl-handover-btn[b-w6oiq1hxkm] {
    width: 36px;
    height: 26px;
    border-radius: 15px;
    background: #e500cd;
    background: linear-gradient(135deg, #e500cd 0%, #c800b0 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 10px rgba(229, 0, 205, 0.45);
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 5;
}

.tl-handover-btn svg[b-w6oiq1hxkm] {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

.tl-handover-btn:hover[b-w6oiq1hxkm] {
    transform: scale(1.1);
    background: linear-gradient(135deg, #f01bd7 0%, #e500cd 100%);
    box-shadow: 0 5px 14px rgba(229, 0, 205, 0.6);
}

.tl-handover-btn:active[b-w6oiq1hxkm] {
    transform: scale(0.95);
}

/* Color real inyectado por style inline en TrafficLightAssetCard.razor (Asset.Status.GetHexColor()) */

/* /Pages/Home/Components/TrafficLight/TrafficLightMatrix.razor.rz.scp.css */
/* Contenedor Principal */
.traffic-light-container[b-szle0tvvte] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.traffic-light-container.expanded[b-szle0tvvte] {
    /* Márgen uniforme ~20px visual en los tres lados:
       - left: 95px = espacio óptimo para separar del panel de nav
       - right: 90px = 20px borde + 50px botones flotantes + 20px margen visual */
    left: 91px;
    right: 20px;
    width: auto;
    transform: none;
    max-width: none;
}

/* Cuando el panel lateral está abierto, encogemos la matriz para darle espacio al sidebar */
.traffic-light-container.expanded.sidebar-open[b-szle0tvvte] {
    left: 95px;
    right: 400px;
    width: auto;
    transform: none;
    max-width: none;
}

/* Cuando el menú de navegación izquierdo está expandido (220px), empujamos el semáforo */
.traffic-light-container.expanded.nav-expanded[b-szle0tvvte] {
    left: 230px;
    right: 90px;
}

/* Combinación: menú expandido + panel lateral abierto */
.traffic-light-container.expanded.nav-expanded.sidebar-open[b-szle0tvvte] {
    left: 230px;
    right: 400px;
}

/* Editor del Gemelo Digital abierto (LeftSidebar de 450px). Empuja el semáforo para que
   arranque justo después del panel, en vez de quedar montado debajo.
   LeftSidebar: left = (nav 80/220) - 12; ancho 450 → borde derecho + ~12px de margen. */
.traffic-light-container.expanded.editor-open[b-szle0tvvte] {
    left: 530px; /* (80 - 12) + 450 + 12 */
}

/* Editor abierto + menú de navegación expandido (220px) */
.traffic-light-container.expanded.nav-expanded.editor-open[b-szle0tvvte] {
    left: 670px; /* (220 - 12) + 450 + 12 */
}

/* Cuando el panel de chat derecho está abierto (350px width), empujamos el semáforo */
.traffic-light-container.expanded.chat-expanded[b-szle0tvvte] {
    right: 370px;
}

/* Combinación: chat expandido + menú izquierdo expandido */
.traffic-light-container.expanded.nav-expanded.chat-expanded[b-szle0tvvte] {
    left: 230px;
    right: 370px;
}

/* --- Estado Minimizado --- */
.minimized-toggle[b-szle0tvvte] {
    display: flex;
    align-items: center;
    gap: 12px; /* Reducido en 10% (de 16px) */
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px; /* Reducido en 10% (de 12px 20px) */
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
}

.minimized-toggle:hover[b-szle0tvvte] {
    background: rgba(30, 41, 59, 0.95);
    transform: translateY(-2px);
}

.toggle-icon[b-szle0tvvte] {
    width: 32px; /* Reducido en 10% (de 36px) */
    height: 32px; /* Reducido en 10% (de 36px) */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    font-size: 1.05rem; /* Reducido en 10% (de 1.2rem) */
}

.toggle-content[b-szle0tvvte] {
    display: flex;
    align-items: center;
}

.toggle-title[b-szle0tvvte] {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.toggle-badges[b-szle0tvvte] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge[b-szle0tvvte] {
    padding: 3px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; /* Ancho mínimo para mantener simetría entre números grandes y pequeños */
}
.badge-red[b-szle0tvvte] { background-color: #ef4444; }
.badge-yellow[b-szle0tvvte] { background-color: #eab308; color: #ffffff; }
.badge-green[b-szle0tvvte] { background-color: #10b981; }

.toggle-arrow[b-szle0tvvte] {
    color: #64748b;
    font-size: 1.2rem;
    margin-left: 8px;
}

/* --- Estado Expandido (Panel Glassmorphism) --- */
.glass-panel[b-szle0tvvte] {
    background: #9aa1ab72; /* Match InboxPanel glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 20px 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
}

.matrix-panel[b-szle0tvvte] {
    width: 100%;
}

.matrix-scroll-wrapper[b-szle0tvvte] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px; /* Dar espacio para el scrollbar para no chocar con elementos */
}

/* Custom scrollbar para el wrapper interno */
.matrix-scroll-wrapper[b-szle0tvvte]::-webkit-scrollbar {
    height: 6px;
}
.matrix-scroll-wrapper[b-szle0tvvte]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.matrix-scroll-wrapper[b-szle0tvvte]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.matrix-scroll-wrapper[b-szle0tvvte]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Header */
.matrix-header[b-szle0tvvte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permitir que los elementos salten de línea si es muy estrecho */
}

.header-search[b-szle0tvvte] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-filters[b-szle0tvvte] {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Toggle Grupo / Proceso */
.view-mode-toggle[b-szle0tvvte] {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.view-mode-toggle .toggle-btn[b-szle0tvvte] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 5px 12px; /* -15%: de 6px/14px a 5px/12px */
    border-radius: 100px;
    font-size: 0.7rem; /* -15%: de 0.8rem a 0.7rem */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: 1;
    min-width: 68px; /* -15%: de 80px a 68px */
}

.view-mode-toggle .toggle-btn:hover[b-szle0tvvte] {
    color: #e2e8f0;
}

.view-mode-toggle .toggle-btn.active[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}

.toolbar-search[b-szle0tvvte] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 400px;
    min-height: 34px;
    padding: 6px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #a0a0b0;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1;
}

.toolbar-search-icon[b-szle0tvvte] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* Mayor visibilidad para la lupa */
    flex-shrink: 0;
}

.toolbar-search-icon svg[b-szle0tvvte] {
    width: 16px;
    height: 16px;
    display: block;
}

.toolbar-search-input[b-szle0tvvte] {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 1px 2px;
}

.toolbar-search-input[b-szle0tvvte]::placeholder {
    color: #b0b7c6;
    opacity: 1;
    font-weight: 500;
}

.toolbar-search-input[type="search"][b-szle0tvvte]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.toolbar-search:focus-within[b-szle0tvvte] {
    border-color: transparent;
    box-shadow: none;
}

.toolbar-btn[b-szle0tvvte] {
    border: none;
    background: #e5b900;
    color: #1a365d;
    border-radius: 15px;
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    white-space: nowrap;
}

.toolbar-btn:hover[b-szle0tvvte] {
    color: #0f2746;
}

.toolbar-btn.primary[b-szle0tvvte] {
    background: #1f2f45;
    color: white;
    border-radius: 20px;
}

.toolbar-btn.primary:hover[b-szle0tvvte] {
    background: #0b3f80;
}

.toolbar-general-filter[b-szle0tvvte] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
}

.toolbar-general-filter[b-szle0tvvte]::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(244, 250, 255, 0.92);
    border-bottom: 2px solid rgba(244, 250, 255, 0.92);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.toolbar-filter-select[b-szle0tvvte] {
    appearance: none;
    border: none;
    border-radius: 999px;
    min-width: 143px; /* -15%: de 168px a 143px */
    height: 29px; /* -15%: de 34px a 29px — igual al alto resultante del toggle */
    padding: 0px 24px 0px 11px; /* -15%: de 28px/13px a 24px/11px */
    background: linear-gradient(rgba(131, 140, 154, 0.84), rgba(131, 140, 154, 0.84));
    color: #f3f7ff;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.7rem; /* igualado al toggle */
    font-weight: 600;
    line-height: 29px; /* igualado al height */
    cursor: pointer;
    outline: none;
}

.toolbar-filter-select:focus-visible[b-szle0tvvte] {
    box-shadow: 0 0 0 1px rgba(247, 251, 255, 0.6) inset;
}

.toolbar-filter-select:disabled[b-szle0tvvte] {
    opacity: 0.58;
    cursor: not-allowed;
}

.toolbar-filter-select option[b-szle0tvvte] {
    color: #16385f;
}

.header-actions[b-szle0tvvte] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Botón de Refresh — mismo patrón que InboxPanel */
.refresh-btn[b-szle0tvvte] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.refresh-btn:hover:not(:disabled)[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.1);
}

.refresh-btn svg[b-szle0tvvte] {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.refresh-btn:disabled[b-szle0tvvte] {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-btn:disabled svg[b-szle0tvvte] {
    animation: tl-spin-b-szle0tvvte 1s linear infinite;
}

.btn-close[b-szle0tvvte] {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.btn-close:hover[b-szle0tvvte] { color: #f8fafc; }

/* Grid / Matriz */
.matrix-body[b-szle0tvvte] {
    width: 100%;
}

.matrix-grid[b-szle0tvvte] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 100%;
    padding-bottom: 10px;
    padding-right: 15px; /* Espacio extra para que el hover (scale) no recorte la última celda */
    padding-left: 5px;   /* Prevenir cualquier recorte a la izquierda */
    user-select: none;
    -webkit-user-select: none;
}

.matrix-row[b-szle0tvvte] {
    display: flex;
    align-items: center;
    gap: 12px; /* Gap between individual pills */
}

.header-row[b-szle0tvvte] {
    padding-bottom: 0;
}

.matrix-cell[b-szle0tvvte] {
    flex: 1 1 90px;      /* Se estira cuando hay espacio, se encoge hasta 90px mínimo */
    min-width: 90px;     /* Scroll activa antes de llegar aquí */
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* En modo Grupo, las celdas se estiran para llenar el espacio vacío, pero tienen un límite inferior más bajo para evitar scroll innecesario */
.matrix-grid.view-mode-group .matrix-cell[b-szle0tvvte] {
    flex: 1 1 100px; /* grow: 1, shrink: 1, basis: 100px */
    min-width: 100px;
    width: auto;
}

/* Los títulos no deben estirarse en ningún caso */
.matrix-grid.view-mode-group .col-title[b-szle0tvvte],
.matrix-grid.view-mode-group .row-title[b-szle0tvvte] {
    flex: 0 0 170px !important;
    width: 170px !important;
}

.col-title[b-szle0tvvte] {
    flex: 0 0 auto;
    width: 170px;
    background: transparent; /* Sin fondo de cápsula */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}

.total-assets[b-szle0tvvte] {
    color: #e2e8f0; /* Brighter grey */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.col-header[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.06);
    min-height: 36px;
    height: auto;
    padding: 4px 0;
    border-radius: 8px; /* Slightly squarer than data pills */
}

.col-header span[b-szle0tvvte] {
    color: #f8fafc; /* Almost pure white */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize; /* As in mockup: Imprevistos, Mecanica */
    text-align: center;
    
    /* Truncamiento a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    
    max-width: 100%;
    padding: 0 4px;
}

.row-title[b-szle0tvvte] {
    flex: 0 0 auto;
    width: 170px;
    background: transparent; /* Sin fondo de cápsula */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    gap: 10px;
}

.row-count[b-szle0tvvte] {
    color: #ffffff;
    font-size: 0.95rem; /* Slightly larger */
    font-weight: 700;
}

.row-label[b-szle0tvvte] {
    color: #f8fafc; /* Almost pure white */
    font-size: 0.85rem;
    font-weight: 600; /* Bolder */
}

/* Burbujas / Pills */
.status-pill[b-szle0tvvte] {
    width: 100%;
    height: 36px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.status-pill.empty[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff; /* Tono único: blanco para todos los estados */
    font-weight: 600;
    box-shadow: none;
}

/* Color de fondo inyectado por style inline (row.Status.GetHexColor() -> TrafficLightColorHelper).
   Aquí solo queda lo estructural, común a cualquier estado. */
.status-pill.active[b-szle0tvvte] {
    color: #ffffff;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.status-pill.active:hover[b-szle0tvvte] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px -3px rgba(0, 0, 0, 0.35);
}

/* Glow effect specific to the selected cell */
.status-pill.active.selected[b-szle0tvvte] {
    border: 2px solid #ffffff;
    transform: scale(1.15);
    height: 48px;
    width: 48px; /* Make it a larger circle like the mockup */
    border-radius: 50%;
    font-size: 1.1rem;
    z-index: 10;
}

/* ==============================================
   Right Sidebar Customization (Glassmorphism)
============================================== */
/* El overlay (fondo) debe ser transparente para no opacar el semáforo */
[b-szle0tvvte] .tl-sidebar-overlay {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none; /* Permitir clics a través del overlay hacia el mapa/semáforo */
}

/* El contenido del sidebar sí captura clics */
[b-szle0tvvte] .tl-sidebar-overlay .right-sidebar-content {
    pointer-events: auto;
}

[b-szle0tvvte] .glass-sidebar.right-sidebar-content {
    background: #9aa1ab72 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    height: calc(100vh - 50px) !important; /* 30px arriba + 20px abajo = 50px */
    height: calc(100dvh - 50px) !important;
    margin: 30px 30px 20px 0 !important; /* Margen inferior de 20px para alinear con bottom: 20px de la matriz */
    width: 360px !important; /* 20% más pequeño horizontalmente para dar espacio a la matriz */
}

[b-szle0tvvte] .tl-sidebar .right-sidebar-title {
    color: #f8fafc !important;
    font-size: 1.1rem;
    padding: 0 46px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

/* Header personalizado del sidebar: logo fijo a la izquierda, título siempre centrado */
.tl-sidebar-header-inner[b-szle0tvvte] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
}

.tl-sidebar-header-logo[b-szle0tvvte] {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    padding: 3px;
}

.tl-sidebar-header-logo-fallback[b-szle0tvvte] {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
}

/* Ocultar scrollbar en el sidebar del semáforo para dar más espacio a las tarjetas */
[b-szle0tvvte] .tl-sidebar .right-sidebar-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

[b-szle0tvvte] .tl-sidebar .right-sidebar-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.tl-assets-list[b-szle0tvvte] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.tl-no-data[b-szle0tvvte] {
    color: #94a3b8;
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}

/* Títulos separadores de proceso (solo modo Grupo) */
.tl-process-group-header[b-szle0tvvte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tl-group-header-left[b-szle0tvvte] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Permite truncar el h5 si es largo */
}

.tl-group-logo[b-szle0tvvte] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    padding: 2px;
}

.tl-group-logo-fallback[b-szle0tvvte] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.tl-process-group-header h5[b-szle0tvvte] {
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-badge-count[b-szle0tvvte] {
    background: #0b3f80;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================== */
/* LOADER (ESTADOS DE CARGA)                      */
/* ============================================== */
.tl-loading-container[b-szle0tvvte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
}

.tl-loading-container p[b-szle0tvvte] {
    margin-top: 15px;
    letter-spacing: 0.5px;
}

.tl-spinner[b-szle0tvvte] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: tl-spin-b-szle0tvvte 1s ease-in-out infinite;
}

@keyframes tl-spin-b-szle0tvvte {
    to {
        transform: rotate(360deg);
    }
}

/* TABS DEL SIDEBAR (FILTROS DE COLORES) */
.tl-sidebar-tabs[b-szle0tvvte] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 10px 0 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tl-tab-btn[b-szle0tvvte] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tl-tab-btn:hover[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tl-tab-btn.active[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.tl-tab-btn .badge[b-szle0tvvte] {
    padding: 2px 5px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tl-sidebar-subfilter[b-szle0tvvte] {
    margin-bottom: 20px;
    padding: 0;
}

.tl-subfilter-select[b-szle0tvvte] {
    width: 100%;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-family: Inter, sans-serif;
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
}

.tl-subfilter-select:focus[b-szle0tvvte] {
    border-color: rgba(255, 255, 255, 0.3);
}

.tl-subfilter-select option[b-szle0tvvte] {
    background: #1f2f45;
    color: #fff;
}

.tl-tab-red.active[b-szle0tvvte] { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #fff; }
.tl-tab-red .badge-red[b-szle0tvvte] { background: #ef4444; }

.tl-tab-yellow.active[b-szle0tvvte] { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); color: #fff; }
.tl-tab-yellow .badge-yellow[b-szle0tvvte] { background: #f59e0b; }

.tl-tab-green.active[b-szle0tvvte] { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.5); color: #fff; }
.tl-tab-green .badge-green[b-szle0tvvte] { background: #22c55e; }

.tl-tab-neutral.active[b-szle0tvvte] { background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.5); color: #fff; }
.tl-tab-neutral .badge-neutral[b-szle0tvvte] { background: #94a3b8; color: #fff; }

/* CABECERAS CLICKEABLES */
.matrix-cell.col-header.clickable[b-szle0tvvte] {
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.matrix-cell.col-header.clickable:hover[b-szle0tvvte] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
}
/* /Pages/Home/Components/User/MappingFieldRow.razor.rz.scp.css */
.mapping-row[b-3drgz7amd8] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.mapping-row:hover[b-3drgz7amd8] {
    background: #f8fafc;
}

.mapping-col-systime[b-3drgz7amd8] {
    flex: 1;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mapping-prop-name[b-3drgz7amd8] {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}

.mapping-required[b-3drgz7amd8] {
    color: #ef4444;
    font-weight: 700;
}

.mapping-col-excel[b-3drgz7amd8] {
    flex: 1;
    display: flex;
    align-items: center;
}

/* ── input container ── */
.mapping-input-container[b-3drgz7amd8] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mapping-input[b-3drgz7amd8] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1e293b;
    background: #ffffff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.mapping-input:focus[b-3drgz7amd8] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.mapping-input[b-3drgz7amd8]::placeholder {
    color: #94a3b8;
}

/* ── badge wrapper ── */
.mapping-badge-wrapper[b-3drgz7amd8] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mapping-badge[b-3drgz7amd8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 9999px;
    color: #2563eb;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.05);
}

.excel-icon[b-3drgz7amd8] {
    color: #10b981;
}

.mapping-badge-val[b-3drgz7amd8] {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapping-badge-actions[b-3drgz7amd8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── action buttons ── */
.mapping-row-action-btn[b-3drgz7amd8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mapping-row-action-btn:hover[b-3drgz7amd8] {
    transform: translateY(-1px);
}

.mapping-row-action-btn:active[b-3drgz7amd8] {
    transform: translateY(0);
}

/* confirm */
.confirm-btn[b-3drgz7amd8] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
}
.confirm-btn:hover[b-3drgz7amd8] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #059669;
}

/* edit */
.edit-btn[b-3drgz7amd8] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
}
.edit-btn:hover[b-3drgz7amd8] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

/* delete */
.delete-btn[b-3drgz7amd8] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #64748b;
}
.delete-btn:hover[b-3drgz7amd8] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
/* /Pages/Home/Components/User/PlatformConfigSection.razor.rz.scp.css */
/* Vive dentro del panel a pantalla completa (reportes-mode), que ya es un flex column con altura
   definida. Encadenarse a ese flex en vez de poner topes fijos es lo que hace que la sección ocupe
   todo el ancho y toda la altura disponibles: un max-width dejaba una franja muerta a la derecha y
   un calc(100vh - N) otra abajo, y ambas se desajustaban al cambiar la altura del panel. */
.platform-config[b-1cbzqsh8wg] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 14px 22px 18px;
    color: #cbd5e1;
    font-size: 12px;
}

/* La tabla es lo único que crece: ocupa el hueco que dejan pestañas, aviso y barra de acciones. */
.pc-scroll[b-1cbzqsh8wg] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.pc-scroll[b-1cbzqsh8wg]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pc-scroll[b-1cbzqsh8wg]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid white;
    border-radius: 8px;
}

/* ── Catalog list ── */
.pc-catalog-list[b-1cbzqsh8wg] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-catalog-list li + li[b-1cbzqsh8wg] {
    border-top: 1px solid #f3f4f6;
}

.pc-catalog[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pc-catalog:hover[b-1cbzqsh8wg] {
    background: #eef2ff;
}

.pc-catalog-name[b-1cbzqsh8wg] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-catalog-meta[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pc-catalog-count[b-1cbzqsh8wg] {
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
}

/* Marca de catálogo replicado. Texto, no etiqueta: el índigo ya lo separa del recuento en gris
   que va justo al lado. */
.pc-badge-replica[b-1cbzqsh8wg] {
    color: #6366f1;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.pc-chevron[b-1cbzqsh8wg] {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="gray"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>');
}

/* ── Barra de acciones ──────────────────────────────────────
   Volver, título, contador, buscador y "Nueva entrada" en una sola línea. Antes el botón vivía en
   su propio bloque y dejaba una banda vacía de ~60 px entre el aviso y la tabla. */
.pc-toolbar[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 32px;
}

.pc-toolbar-left[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.pc-toolbar-right[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pc-back[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pc-back[b-1cbzqsh8wg]::before {
    content: "\2190";
    margin-right: 4px;
}

.pc-back:hover[b-1cbzqsh8wg] {
    background: rgba(99, 102, 241, 0.32);
}

.pc-rows-title[b-1cbzqsh8wg] {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuántas filas se están viendo de cuántas hay: con el buscador activo es la única pista. */
.pc-count[b-1cbzqsh8wg] {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}

/* ── Conmutador configurados / faltantes ──────────────────
   Dos vistas del mismo taller, no dos secciones: por eso un conmutador en la barra y no otra
   pestaña arriba, que sugeriría haber salido del taller. */
.pc-seg[b-1cbzqsh8wg] {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    overflow: hidden;
}

.pc-seg-item[b-1cbzqsh8wg] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pc-seg-item + .pc-seg-item[b-1cbzqsh8wg] {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.pc-seg-item:hover[b-1cbzqsh8wg] {
    color: #e2e8f0;
}

.pc-seg-active[b-1cbzqsh8wg],
.pc-seg-active:hover[b-1cbzqsh8wg] {
    background: rgba(211, 59, 178, 0.18);
    color: #f5d0ec;
}

/* Que falte algo merece verse desde la pestaña de al lado, sin tener que entrar. */
.pc-seg-alert:not(.pc-seg-active)[b-1cbzqsh8wg] {
    color: #fbbf24;
}

.pc-search[b-1cbzqsh8wg] {
    width: 230px;
    padding: 6px 10px 6px 30px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 9px center;
}

.pc-search[b-1cbzqsh8wg]::placeholder {
    color: #94a3b8;
}

.pc-search:focus[b-1cbzqsh8wg] {
    outline: none;
    border-color: #d33bb2;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Tablas ── */
.pc-table[b-1cbzqsh8wg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    table-layout: fixed;
}

.pc-table th[b-1cbzqsh8wg] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 14px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

/* Los anchos van por clase y no por nth-child: la columna de acciones aparece y desaparece según
   si el catálogo es editable, y con nth-child los porcentajes se corrían a la columna equivocada. */
.pc-table th.pc-col-name[b-1cbzqsh8wg] {
    width: 30%;
}

.pc-table th.pc-col-group[b-1cbzqsh8wg] {
    width: 20%;
}

.pc-table th.pc-col-industry[b-1cbzqsh8wg] {
    width: 14%;
}

.pc-table th.pc-col-value[b-1cbzqsh8wg] {
    width: 34%;
}

.pc-table th.pc-col-value-wide[b-1cbzqsh8wg] {
    width: 38%;
}

.pc-table th.pc-col-match[b-1cbzqsh8wg] {
    width: 10%;
}

/* Rastro: cuándo se tocó y por quién. Va discreto porque es contexto, no el dato de la fila. */
.pc-table th.pc-col-audit[b-1cbzqsh8wg] {
    width: 16%;
}

.pc-audit[b-1cbzqsh8wg] {
    color: #94a3b8;
    font-size: 11px;
    cursor: help;
}

/* La tabla de faltantes tiene cuatro columnas propias: reutilizar las de arriba sumaba 114%. */
.pc-table th.pc-col-missing-name[b-1cbzqsh8wg] {
    width: 34%;
}

.pc-table th.pc-col-missing-value[b-1cbzqsh8wg] {
    width: 28%;
}

.pc-table th.pc-col-missing-effect[b-1cbzqsh8wg] {
    width: 24%;
}

.pc-table td[b-1cbzqsh8wg] {
    padding: 8px 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.pc-table tbody tr:nth-child(even) td[b-1cbzqsh8wg] {
    background: #fafbfc;
}

.pc-table tbody tr:last-child td[b-1cbzqsh8wg] {
    border-bottom: none;
}

.pc-table tbody tr:hover td[b-1cbzqsh8wg] {
    background: #eef2ff;
}

.pc-td-name[b-1cbzqsh8wg] {
    font-weight: 600;
    color: #1f2937;
}

.pc-sub[b-1cbzqsh8wg] {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 400;
}

/* El valor es un id técnico (CLOSE_ASSET_INVENTORY): monoespaciado se lee mucho mejor. */
.pc-code[b-1cbzqsh8wg] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11.5px;
    color: #334155;
}

/* Un valor booleano crudo llega como "true", "True" o "False" según quién lo escribió; unificar el
   texto evita que el operador crea que hay tres valores distintos. Va como texto de la celda, sin
   caja: el estado apagado se distingue atenuando el color, que es lo que ya hace la tabla con el
   resto de datos secundarios. */
.pc-bool[b-1cbzqsh8wg] {
    font-weight: 600;
}

.pc-bool-on[b-1cbzqsh8wg] {
    color: #334155;
}

.pc-bool-off[b-1cbzqsh8wg] {
    color: #94a3b8;
}

/* Talleres que siguen igual a la plantilla. Va como dato de tabla, sin distintivo: es una cifra
   que se lee de corrido, no una etiqueta de estado. El total en gris separa numerador de total sin
   necesidad de ningún adorno. */
.pc-match[b-1cbzqsh8wg] {
    font-variant-numeric: tabular-nums;
    color: #334155;
    cursor: help;
}

.pc-match-total[b-1cbzqsh8wg] {
    color: #94a3b8;
}

/* ── Loading / empty / error ── */
.pc-state[b-1cbzqsh8wg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 140px;
    padding: 24px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #9ca3af;
    font-style: italic;
    text-align: center;
}

.pc-state-error[b-1cbzqsh8wg] {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.3);
    color: #b91c1c;
    font-style: normal;
}

.pc-retry[b-1cbzqsh8wg] {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    background: #6366f1;
    color: white;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pc-retry:hover[b-1cbzqsh8wg] {
    background: #4f46e5;
}

.pc-footnote[b-1cbzqsh8wg] {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 10px;
    font-style: italic;
    text-align: right;
}

/* ── Botones ── */
.pc-primary[b-1cbzqsh8wg],
.pc-secondary[b-1cbzqsh8wg],
.pc-danger[b-1cbzqsh8wg] {
    padding: 6px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pc-primary[b-1cbzqsh8wg] {
    background: #d33bb2;
    color: #fff;
}

.pc-secondary[b-1cbzqsh8wg] {
    background: #fff;
    color: #475569;
    border-color: #cbd5e1;
}

.pc-danger[b-1cbzqsh8wg] {
    background: #dc2626;
    color: #fff;
}

.pc-primary:disabled[b-1cbzqsh8wg],
.pc-secondary:disabled[b-1cbzqsh8wg],
.pc-danger:disabled[b-1cbzqsh8wg] {
    opacity: .6;
    cursor: default;
}

.pc-link[b-1cbzqsh8wg] {
    background: none;
    border: none;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 12px;
    color: #4f46e5;
    cursor: pointer;
}

.pc-link:hover[b-1cbzqsh8wg] {
    text-decoration: underline;
}

.pc-link-danger[b-1cbzqsh8wg] {
    color: #dc2626;
}

/* La columna de acciones tiene que poder crecer hacia abajo: en estado de confirmación caben tres
   elementos y con nowrap el último quedaba recortado por el overflow de la celda. */
.pc-table th.pc-th-actions[b-1cbzqsh8wg],
.pc-table td.pc-td-actions[b-1cbzqsh8wg] {
    width: 14%;
    text-align: right;
    white-space: normal;
    overflow: visible;
}

.pc-actions[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.pc-confirm[b-1cbzqsh8wg] {
    font-size: 11px;
    font-weight: 600;
    color: #b91c1c;
}

/* ── Editor ── */
.pc-editor[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.pc-editor-grid[b-1cbzqsh8wg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 16px;
    align-items: end;
}

.pc-field[b-1cbzqsh8wg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: #475569;
}

.pc-field-wide[b-1cbzqsh8wg] {
    grid-column: 1 / -1;
}

/* El identificador es largo por naturaleza (WORKTIMETRACKING_WARNONUNAVAILABLE…): se le da toda la
   fila y fuente monoespaciada para que se lea entero. */
.pc-field-id[b-1cbzqsh8wg] {
    grid-column: 1 / -1;
}

.pc-field-id input[b-1cbzqsh8wg] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Los <select> comparten el aspecto de los <input> para que el editor se lea como un solo formulario. */
.pc-field input[b-1cbzqsh8wg],
.pc-field select[b-1cbzqsh8wg] {
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    background-color: #fff;
    text-overflow: ellipsis;
    min-width: 0;
}

.pc-field select[b-1cbzqsh8wg] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.pc-field input:focus[b-1cbzqsh8wg],
.pc-field select:focus[b-1cbzqsh8wg] {
    outline: none;
    border-color: #d33bb2;
}

/* El identificador no se edita tras crearse: es la clave que referencian los settings. */
.pc-field input.pc-readonly[b-1cbzqsh8wg] {
    background-color: #eef2f7;
    color: #64748b;
    cursor: default;
}

.pc-editor-actions[b-1cbzqsh8wg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Este error se pinta suelto, sin .pc-state: sin caja propia quedaba como una franja de color sin
   margen ni borde pegada al texto de al lado. */
.pc-editor-error[b-1cbzqsh8wg] {
    flex-shrink: 0;
    margin-top: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.pc-feedback[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
}

/* Acción rechazada. Mismo peso visual que el aviso verde y en el mismo sitio: es el resultado de
   lo que el operador acaba de pedir, no una caída de la pantalla, así que no ocupa la tabla. */
.pc-action-error[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.45;
}

/* Edición en línea del valor de un parámetro de taller. */
.pc-inline-input[b-1cbzqsh8wg] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    color: #334155;
    background-color: #fff;
}

select.pc-inline-input[b-1cbzqsh8wg] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

/* ── Pestañas ──────────────────────────────────────────────
   Van sobre el fondo oscuro del panel, no sobre tarjeta blanca: los grises de texto normal ahí no
   se leen. */
.pc-tabs[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Cerrar la sección. Vive en la fila de pestañas porque el panel a pantalla completa no pinta
   cabecera propia: sin esto la única salida es elegir otra opción del menú. */
.pc-close[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-bottom: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pc-close:hover[b-1cbzqsh8wg] {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.pc-tab[b-1cbzqsh8wg] {
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease;
}

.pc-tab:hover[b-1cbzqsh8wg] {
    color: #e2e8f0;
}

.pc-tab-active[b-1cbzqsh8wg],
.pc-tab-active:hover[b-1cbzqsh8wg] {
    color: #d33bb2;
    border-bottom-color: #d33bb2;
}

/* ── Faltantes ─────────────────────────────────────────────
   Añadir un interruptor con valor falso apaga algo que hoy está disponible. La fila se marca y el
   efecto se dice con palabras: un icono solo no basta para algo que cambia el comportamiento. */
.pc-row-warn td[b-1cbzqsh8wg] {
    background: #fffbeb !important;
}

.pc-effect-warn[b-1cbzqsh8wg] {
    color: #b45309;
    font-weight: 600;
    white-space: normal;
}

.pc-effect-neutral[b-1cbzqsh8wg] {
    color: #94a3b8;
    white-space: normal;
}

/* El valor de la plantilla se lee como referencia, no como el dato del taller: atenuado para que
   la columna de la izquierda siga siendo la que manda. */
.pc-template-value[b-1cbzqsh8wg] {
    color: #94a3b8;
}

.pc-table td:has(.pc-effect-warn)[b-1cbzqsh8wg],
.pc-table td:has(.pc-effect-neutral)[b-1cbzqsh8wg] {
    white-space: normal;
}

/* Aviso de alcance: editar plantillas no toca los talleres ya creados. */
.pc-notice[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #bfdbfe;
    font-size: 12px;
    line-height: 1.45;
}

/* Variante de aviso para lo que puede quitar algo. Va despues de .pc-notice a proposito: comparten
   especificidad, asi que el orden es lo unico que decide cual pinta. */
.pc-notice-warn[b-1cbzqsh8wg] {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fde68a;
}

/* ---------------------------------------------------------------------------
   Despliegue por taller.
   El contador de la lista es lo que hace visible la diferencia entre una fila
   que existe en el catálogo y una que además está trabajando en algún sitio:
   0/18 no es un error, es una entrada creada y desplegada a nadie.
   --------------------------------------------------------------------------- */

.pc-table th.pc-col-coverage[b-1cbzqsh8wg] {
    width: 12%;
}

.pc-coverage[b-1cbzqsh8wg] {
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-family: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    cursor: pointer;
}

.pc-coverage:hover[b-1cbzqsh8wg] {
    background: #e2e8f0;
    color: #1e293b;
}

/* Desplegada en ningún taller: el único valor que pide una decisión. */
.pc-coverage-none[b-1cbzqsh8wg] {
    background: #fffbeb;
    color: #b45309;
}

.pc-coverage-none:hover[b-1cbzqsh8wg] {
    background: #fef3c7;
    color: #92400e;
}

.pc-assign[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-assign-head[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-assign-title[b-1cbzqsh8wg] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.pc-assign-count[b-1cbzqsh8wg] {
    padding: 2px 8px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pc-assign-count-none[b-1cbzqsh8wg] {
    background: #fef3c7;
    color: #b45309;
}

/* El aspa del panel vive sobre fondo claro; la de la cabecera de la pantalla, sobre el azul
   oscuro. Sin esto heredaría el color claro y quedaría invisible aquí. */
.pc-assign .pc-close[b-1cbzqsh8wg] {
    margin-bottom: 0;
    color: #94a3b8;
}

.pc-assign .pc-close:hover[b-1cbzqsh8wg] {
    background: #e2e8f0;
    color: #475569;
}

/* .pc-notice y su variante ámbar están pensados para el fondo oscuro de la pantalla: texto claro
   sobre azul marino. Esta tarjeta es una isla clara, como el editor, así que ahí ese texto queda
   casi invisible y hay que darle la vuelta a los tres colores. */
.pc-assign .pc-notice[b-1cbzqsh8wg] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.pc-assign .pc-notice-warn[b-1cbzqsh8wg] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #b45309;
}

.pc-assign-reference[b-1cbzqsh8wg] {
    max-width: 420px;
}

.pc-assign-all[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.pc-assign-selected[b-1cbzqsh8wg] {
    color: #64748b;
    font-size: 12px;
}

.pc-assign-list[b-1cbzqsh8wg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 16px;
    max-height: 220px;
    overflow-y: auto;
}

.pc-check[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    min-width: 0;
}

.pc-check input[b-1cbzqsh8wg] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: #d33bb2;
    cursor: pointer;
}

.pc-check span[b-1cbzqsh8wg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-assign-actions[b-1cbzqsh8wg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pc-assign-done summary[b-1cbzqsh8wg] {
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
}

.pc-assign-done .pc-assign-list[b-1cbzqsh8wg] {
    margin-top: 8px;
    max-height: 160px;
}

.pc-assign-done-item[b-1cbzqsh8wg] {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-assign-hint[b-1cbzqsh8wg] {
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

/* El nombre del taller es accionable: lleva a configurarlo dentro de ese taller. */
.pc-assign-goto[b-1cbzqsh8wg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: #4f46e5;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.pc-assign-goto span:first-child[b-1cbzqsh8wg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-assign-goto:hover[b-1cbzqsh8wg] {
    text-decoration: underline;
}

.pc-assign-goto-icon[b-1cbzqsh8wg] {
    flex-shrink: 0;
    opacity: .6;
}

.pc-check-goto[b-1cbzqsh8wg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* El radio elige el origen de la copia; la casilla, los destinos. Distinto color para que no se
   lean como el mismo control repetido. */
.pc-check-goto input[type="radio"][b-1cbzqsh8wg] {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    accent-color: #0ea5e9;
    cursor: pointer;
}

/* Taller cuyo departamento ya no existe en la estructura de la empresa: se le puede desplegar,
   pero no se puede entrar a configurarlo, así que su nombre deja de ser un enlace. */
.pc-assign-nodept[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: #fef3c7;
    color: #b45309;
    font-size: 10px;
    font-weight: 600;
    cursor: help;
}

.pc-assign-goto-off[b-1cbzqsh8wg] {
    color: #94a3b8;
    cursor: help;
}

.pc-assign-goto-off:hover[b-1cbzqsh8wg] {
    text-decoration: none;
}

/* Marca de taller sin departamento activo. Un asterisco y no una etiqueta: son 17 de 23 en los
   entornos de prueba, y una etiqueta por fila dejaba los nombres partidos a la mitad. */
.pc-nodept-mark[b-1cbzqsh8wg] {
    flex-shrink: 0;
    color: #d97706;
    font-weight: 700;
    cursor: help;
}

/* ---------------------------------------------------------------------------
   Interruptores del taller. Isla clara como el editor: la tabla de al lado ya
   lo es, y una lista de conmutadores sobre el azul oscuro del panel obligaría a
   redefinir todos los colores del texto.
   --------------------------------------------------------------------------- */

.pc-switches[b-1cbzqsh8wg] {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.pc-switch-group[b-1cbzqsh8wg] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pc-switch[b-1cbzqsh8wg] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.pc-switch:hover[b-1cbzqsh8wg] {
    background: #f8fafc;
}

/* El taller no tiene la fila: se distingue sin gritar, el asterisco lo explica. */
.pc-switch-unset .pc-switch-name[b-1cbzqsh8wg] {
    color: #64748b;
}

.pc-switch-text[b-1cbzqsh8wg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pc-switch-name[b-1cbzqsh8wg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

/* Sin configurar es la excepción, no la norma: suele haber uno o dos de veintitantos, así que
   una etiqueta legible no satura y un asterisco se perdía entre las descripciones. */
.pc-switch-unset-mark[b-1cbzqsh8wg] {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 5px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: help;
}

/* Y la fila entera se marca en el borde, para localizarlas de un vistazo al recorrer la lista. */
.pc-switch-unset[b-1cbzqsh8wg] {
    background: #fffdf5;
    box-shadow: inset 3px 0 0 #fcd34d;
}

.pc-switch-unset:hover[b-1cbzqsh8wg] {
    background: #fffbeb;
}

.pc-switch-desc[b-1cbzqsh8wg] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.pc-switch-key[b-1cbzqsh8wg] {
    color: #94a3b8;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 10px;
}

.pc-switch-busy[b-1cbzqsh8wg] {
    margin-left: auto;
    align-self: center;
    color: #64748b;
    font-size: 11px;
}

/* El conmutador. Se pinta a mano y no con un checkbox porque el estado no es del
   navegador: lo confirma el servidor, y hasta entonces no debe moverse. */
.pc-toggle[b-1cbzqsh8wg] {
    flex-shrink: 0;
    position: relative;
    width: 38px;
    height: 21px;
    margin-top: 1px;
    padding: 0;
    border: none;
    border-radius: 11px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.pc-toggle-on[b-1cbzqsh8wg] {
    background: #d33bb2;
}

.pc-toggle:disabled[b-1cbzqsh8wg] {
    opacity: .55;
    cursor: default;
}

.pc-toggle-knob[b-1cbzqsh8wg] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .3);
    transition: transform .15s ease;
}

.pc-toggle-on .pc-toggle-knob[b-1cbzqsh8wg] {
    transform: translateX(17px);
}
/* /Pages/Home/Components/User/ProfilePanel.razor.rz.scp.css */
.profile-panel[b-cn5loyi2ml] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: white;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
}

.profile-panel[b-cn5loyi2ml]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.profile-header[b-cn5loyi2ml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    text-align: center;
}

.avatar-container[b-cn5loyi2ml] {
    position: relative;
    margin-bottom: 15px;
}

.profile-avatar[b-cn5loyi2ml] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.profile-avatar-placeholder[b-cn5loyi2ml] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.status-indicator[b-cn5loyi2ml] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #1a1f2e;
}

.status-indicator.active[b-cn5loyi2ml] {
    background-color: #10b981;
    /* Emerald 500 */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.status-indicator.inactive[b-cn5loyi2ml] {
    background-color: #ef4444;
    /* Red 500 */
}

.profile-name[b-cn5loyi2ml] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.profile-role[b-cn5loyi2ml] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 15px 0;
    font-style: italic;
}

.status-badge[b-cn5loyi2ml] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    gap: 8px;
}

.status-dot[b-cn5loyi2ml] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
}

.status-text[b-cn5loyi2ml] {
    font-size: 14px;
    font-weight: 500;
}

/* Sections */
.profile-sections[b-cn5loyi2ml] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-section[b-cn5loyi2ml] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-header[b-cn5loyi2ml] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: white;
    color: #1f2937;
    font-weight: 600;
}

.section-title-group[b-cn5loyi2ml] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon[b-cn5loyi2ml] {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.section-icon.personal[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>');
}

.section-icon.professional[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>');
}

.section-icon.metrics[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>');
}

.section-icon.security[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>');
}

.section-icon.integration[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>');
}

.section-icon.platform[b-cn5loyi2ml] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm0 10a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm3-9h.01M7 17h.01" /></svg>');
}

.chevron-icon[b-cn5loyi2ml] {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="gray"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
    background-size: contain;
}

.chevron-icon.up[b-cn5loyi2ml] {
    transform: rotate(180deg);
}

.section-content[b-cn5loyi2ml] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
    background: #f9fafb;
}

.profile-section.expanded .section-content[b-cn5loyi2ml] {
    max-height: 500px;
    padding-bottom: 20px;
}

.info-grid[b-cn5loyi2ml] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.info-item[b-cn5loyi2ml] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item.full-width[b-cn5loyi2ml] {
    grid-column: span 2;
}

.info-item label[b-cn5loyi2ml] {
    font-size: 12px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}

.info-value[b-cn5loyi2ml] {
    background: #e5e7eb;
    padding: 10px 14px;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.placeholder-content[b-cn5loyi2ml] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    font-size: 14px;
}

/* Edit Mode Styles */
.profile-input[b-cn5loyi2ml] {
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    border: 1px solid #d1d5db;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.profile-input:focus[b-cn5loyi2ml] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.profile-input:disabled[b-cn5loyi2ml] {
    background: #e5e7eb;
    cursor: not-allowed;
    color: #6b7280;
}

.btn-edit[b-cn5loyi2ml] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-edit:hover[b-cn5loyi2ml] {
    background: rgba(99, 102, 241, 0.2);
}

.btn-cancel[b-cn5loyi2ml] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-cancel:hover[b-cn5loyi2ml] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-save[b-cn5loyi2ml] {
    background: #6366f1;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-save:hover[b-cn5loyi2ml] {
    background: #4f46e5;
}

.btn-save:disabled[b-cn5loyi2ml] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* /Pages/Home/Components/WorkSession/ActiveWorkSessionBanner.razor.rz.scp.css */
.active-work-banner-wrapper[b-a9scfdpn02] {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: workSessionFadeIn-b-a9scfdpn02 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes workSessionFadeIn-b-a9scfdpn02 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.active-work-capsule[b-a9scfdpn02] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(22, 36, 61, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 26px;
    padding: 3px 8px 3px 5px;
    height: 50px;
    box-sizing: border-box;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Vehicle Thumbnail */
.car-thumb-border[b-a9scfdpn02] {
    position: relative;
    width: 52px;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid #ffffff;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.pending-authorization-overlay[b-a9scfdpn02] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 2;
}

.pending-authorization-overlay svg[b-a9scfdpn02] {
    width: 28px;
    height: 28px;
    color: #ffffff;
    opacity: 0.95;
    animation: authClockPulse-b-a9scfdpn02 2s ease-in-out infinite;
}

@keyframes authClockPulse-b-a9scfdpn02 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85));
    }
}

.car-thumb-img[b-a9scfdpn02] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.car-thumb-placeholder[b-a9scfdpn02] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #334155;
}

.car-placeholder-icon[b-a9scfdpn02] {
    width: 28px;
    height: 22px;
    object-fit: contain;
    opacity: 0.85;
}

/* Vehicle Info */
.vehicle-info-stack[b-a9scfdpn02] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 130px;
    overflow: hidden;
}

.vehicle-plate[b-a9scfdpn02] {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
}

.vehicle-subtext[b-a9scfdpn02] {
    font-size: 11px;
    font-weight: 500;
    color: #cbd5e1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
}

/* Digital Timer */
.timer-container[b-a9scfdpn02] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: 800;
    color: #4ade80;
    padding: 0 6px;
    user-select: none;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.timer-container.timer-paused[b-a9scfdpn02] {
    color: #ffd255;
}

.timer-digits[b-a9scfdpn02] {
    display: inline-block;
    min-width: 28px;
    text-align: center;
}

.timer-colon[b-a9scfdpn02] {
    display: inline-block;
    transition: opacity 0.15s ease;
}

.timer-colon.colon-visible[b-a9scfdpn02] {
    opacity: 1;
}

.timer-colon.colon-hidden[b-a9scfdpn02] {
    opacity: 0.15;
}

/* Action Buttons */
.action-btn[b-a9scfdpn02] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.action-btn:hover[b-a9scfdpn02] {
    transform: scale(1.05);
}

.action-btn:active[b-a9scfdpn02] {
    transform: scale(0.95);
}

.action-btn.blocked[b-a9scfdpn02] {
    opacity: 0.45;
    filter: blur(0.5px) grayscale(60%);
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

.pause-btn[b-a9scfdpn02] {
    background: #cbd5e1;
    color: #1e293b;
}

.pause-btn.is-paused[b-a9scfdpn02] {
    background: #4ade80;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}

.stop-btn[b-a9scfdpn02] {
    background: #fb7185;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.4);
}

.stop-btn:hover[b-a9scfdpn02] {
    background: #f43f5e;
}

.action-icon[b-a9scfdpn02] {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .active-work-banner-wrapper[b-a9scfdpn02] {
        right: auto;
        bottom: auto;
        width: auto;
        max-width: 100%;
        transform: none;
        justify-content: flex-end;
    }

    .active-work-capsule[b-a9scfdpn02] {
        width: auto;
        max-width: 100%;
        justify-content: space-between;
    }

    .vehicle-info-stack[b-a9scfdpn02] {
        display: none;
    }
}
/* /Pages/Home/Components/WorkSession/FinishWorkSessionModal.razor.rz.scp.css */
.finish-modal-overlay[b-w99i0cmz7b] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: modalFadeIn-b-w99i0cmz7b 0.2s ease-out;
}

@keyframes modalFadeIn-b-w99i0cmz7b {
    from { opacity: 0; }
    to { opacity: 1; }
}

.finish-modal-card[b-w99i0cmz7b] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: modalScaleUp-b-w99i0cmz7b 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp-b-w99i0cmz7b {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.finish-modal-header[b-w99i0cmz7b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-title-row[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.finish-modal-title[b-w99i0cmz7b] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.info-icon-btn[b-w99i0cmz7b] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon-btn svg[b-w99i0cmz7b] {
    width: 20px;
    height: 20px;
}

.finish-modal-subtitle[b-w99i0cmz7b] {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.section-label[b-w99i0cmz7b] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Photo Slots */
.evidence-section[b-w99i0cmz7b] {
    display: flex;
    flex-direction: column;
}

.photo-slots-grid[b-w99i0cmz7b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.photo-slot[b-w99i0cmz7b] {
    aspect-ratio: 1;
    border-radius: 14px;
    background: #334155;
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.photo-slot.empty-slot[b-w99i0cmz7b] {
    cursor: pointer;
    user-select: none;
}

.photo-slot.empty-slot:hover[b-w99i0cmz7b] {
    border-color: rgba(255, 255, 255, 0.6);
    border-style: solid;
    background: #3e4f68;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.photo-slot.empty-slot:active[b-w99i0cmz7b] {
    transform: translateY(0);
}

.slot-plus-container[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slot-plus-icon[b-w99i0cmz7b] {
    width: 32px;
    height: 32px;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.photo-slot.empty-slot:hover .slot-plus-icon[b-w99i0cmz7b] {
    color: #ffffff;
    transform: scale(1.18);
}

.photo-slot.has-photo[b-w99i0cmz7b] {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: #0f172a;
}

.slot-image[b-w99i0cmz7b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remove-photo-btn[b-w99i0cmz7b] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.remove-photo-btn:hover[b-w99i0cmz7b] {
    transform: scale(1.12);
    background: #dc2626;
}

.remove-photo-btn svg[b-w99i0cmz7b] {
    width: 15px;
    height: 15px;
}

[b-w99i0cmz7b] input[type="file"],
.slot-file-input[b-w99i0cmz7b],
.slot-file-input-hidden[b-w99i0cmz7b] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Observations */
.observations-section[b-w99i0cmz7b] {
    display: flex;
    flex-direction: column;
}

.observations-textarea[b-w99i0cmz7b] {
    width: 100%;
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.observations-textarea:focus[b-w99i0cmz7b] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}

.observations-textarea[b-w99i0cmz7b]::placeholder {
    color: #94a3b8;
}

/* Actions */
.finish-modal-actions[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel[b-w99i0cmz7b] {
    padding: 10px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-w99i0cmz7b] {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.btn-finish[b-w99i0cmz7b] {
    padding: 10px 22px;
    border-radius: 20px;
    background: var(--systime-violet, #984063);
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(152, 64, 99, 0.4);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-finish:hover:not(:disabled)[b-w99i0cmz7b] {
    background: #b04d74;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(152, 64, 99, 0.5);
}

.btn-finish:disabled[b-w99i0cmz7b],
.btn-cancel:disabled[b-w99i0cmz7b] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Suggested Process Badge */
.suggested-process-badge[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: -6px;
}

.badge-icon[b-w99i0cmz7b] {
    width: 18px;
    height: 18px;
    color: #60a5fa;
    flex-shrink: 0;
}

.badge-label[b-w99i0cmz7b] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.badge-target[b-w99i0cmz7b] {
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
}

/* Reasons Section */
.reasons-section[b-w99i0cmz7b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-chips-grid[b-w99i0cmz7b] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reason-chip[b-w99i0cmz7b] {
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reason-chip:hover:not(:disabled)[b-w99i0cmz7b] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.reason-chip.selected[b-w99i0cmz7b] {
    background: #984063;
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(152, 64, 99, 0.4);
}

.reason-chip:disabled[b-w99i0cmz7b] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error Banner */
.modal-error-banner[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    padding: 8px 12px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 500;
}

.error-icon[b-w99i0cmz7b] {
    width: 18px;
    height: 18px;
    color: #ef4444;
    flex-shrink: 0;
}

/* Spinner */
.btn-spinner[b-w99i0cmz7b] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: acd-spin-b-w99i0cmz7b 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes acd-spin-b-w99i0cmz7b {
    to { transform: rotate(360deg); }
}

/* Success Confirmation Modal */
.finish-success-card[b-w99i0cmz7b] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: modalScaleUp-b-w99i0cmz7b 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.success-icon-wrapper[b-w99i0cmz7b] {
    margin-bottom: 20px;
}

.success-icon-circle[b-w99i0cmz7b] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    border: 2px solid rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

.success-icon-circle.pending-auth[b-w99i0cmz7b] {
    background: rgba(255, 210, 85, 0.12);
    border: 2px solid rgba(255, 210, 85, 0.4);
    box-shadow: 0 0 20px rgba(255, 210, 85, 0.25);
}

.success-check-svg[b-w99i0cmz7b] {
    width: 36px;
    height: 36px;
    color: #22c55e;
}

.success-check-svg.pending-auth-svg[b-w99i0cmz7b] {
    color: #ffd255;
}

/* Authorization Notice Banner */
.authorization-notice-banner[b-w99i0cmz7b] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFD25515;
    border: 1px solid #FFD25540;
    border-radius: 10px;
    padding: 10px 14px;
    color: #FFD255;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    box-sizing: border-box;
}

.auth-notice-icon[b-w99i0cmz7b] {
    width: 20px;
    height: 20px;
    color: #FFD255;
    flex-shrink: 0;
}

.success-title[b-w99i0cmz7b] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.success-message[b-w99i0cmz7b] {
    margin: 0 0 24px;
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
}

.success-actions[b-w99i0cmz7b] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-success-ok[b-w99i0cmz7b] {
    width: 100%;
    max-width: 200px;
    padding: 12px 24px;
    border-radius: 30px;
    background: #984063;
    border: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(152, 64, 99, 0.4);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-success-ok:hover[b-w99i0cmz7b] {
    background: #b04d74;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(152, 64, 99, 0.5);
}

.btn-success-ok:active[b-w99i0cmz7b] {
    transform: translateY(0);
}
/* /Pages/Home/Components/WorkSession/PauseWorkSessionModal.razor.rz.scp.css */
.pause-modal-overlay[b-ukpnffuaz3] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: modalFadeIn-b-ukpnffuaz3 0.2s ease-out;
}

@keyframes modalFadeIn-b-ukpnffuaz3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pause-modal-card[b-ukpnffuaz3] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: modalScaleUp-b-ukpnffuaz3 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp-b-ukpnffuaz3 {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pause-modal-header[b-ukpnffuaz3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-title-row[b-ukpnffuaz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pause-modal-title[b-ukpnffuaz3] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.info-icon-btn[b-ukpnffuaz3] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.info-icon-btn:hover[b-ukpnffuaz3] {
    color: #ffffff;
}

.info-icon-btn svg[b-ukpnffuaz3] {
    width: 20px;
    height: 20px;
}

.pause-modal-subtitle[b-ukpnffuaz3] {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.pause-options-list[b-ukpnffuaz3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.pause-options-list[b-ukpnffuaz3]::-webkit-scrollbar {
    width: 6px;
}

.pause-options-list[b-ukpnffuaz3]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.pause-options-list[b-ukpnffuaz3]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.pause-options-list[b-ukpnffuaz3]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.pause-option-card[b-ukpnffuaz3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: #334155;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.pause-option-card.option-card-expanded[b-ukpnffuaz3] {
    gap: 10px;
    padding: 14px 16px 16px 16px;
}

.option-header-row[b-ukpnffuaz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pause-option-card:hover[b-ukpnffuaz3] {
    background: #3e4f68;
    border-color: rgba(255, 255, 255, 0.25);
}

.pause-option-card.selected[b-ukpnffuaz3] {
    background: #dea301;
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(222, 163, 1, 0.35);
}

.option-label[b-ukpnffuaz3] {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.option-badge[b-ukpnffuaz3] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.option-badge.badge-selected[b-ukpnffuaz3] {
    background: #ffffff;
    border-color: #ffffff;
}

.check-icon[b-ukpnffuaz3] {
    width: 14px;
    height: 14px;
    color: #dea301;
}

.pause-modal-actions[b-ukpnffuaz3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.btn-cancel[b-ukpnffuaz3] {
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-ukpnffuaz3] {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.btn-pause[b-ukpnffuaz3] {
    padding: 10px 24px;
    border-radius: 10px;
    background: #dea301;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(222, 163, 1, 0.35);
    transition: all 0.2s;
}

.btn-pause:hover:not(:disabled)[b-ukpnffuaz3] {
    background: #f5b002;
    transform: translateY(-1px);
}

.btn-pause:disabled[b-ukpnffuaz3] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.other-reason-container[b-ukpnffuaz3] {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: otherFadeIn-b-ukpnffuaz3 0.2s ease-out;
}

@keyframes otherFadeIn-b-ukpnffuaz3 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.other-reason-input[b-ukpnffuaz3] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid transparent;
    color: #1e293b;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.other-reason-input[b-ukpnffuaz3]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.other-reason-input:focus[b-ukpnffuaz3] {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* /Pages/Home/Components/WorkSession/ResumeWorkSessionModal.razor.rz.scp.css */
.resume-modal-overlay[b-4en0j1g0yb] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: modalFadeIn-b-4en0j1g0yb 0.2s ease-out;
}

@keyframes modalFadeIn-b-4en0j1g0yb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.resume-modal-card[b-4en0j1g0yb] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: modalScaleUp-b-4en0j1g0yb 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp-b-4en0j1g0yb {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.resume-modal-header[b-4en0j1g0yb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-title-row[b-4en0j1g0yb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resume-modal-title[b-4en0j1g0yb] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.info-icon-btn[b-4en0j1g0yb] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon-btn svg[b-4en0j1g0yb] {
    width: 20px;
    height: 20px;
}

.resume-modal-subtitle[b-4en0j1g0yb] {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.4;
}

/* Vehicle Preview Card */
.resume-vehicle-card[b-4en0j1g0yb] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #2b3e59;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 10px 14px;
}

.vehicle-thumb-box[b-4en0j1g0yb] {
    position: relative;
    width: 58px;
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    background: #152238;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-authorization-overlay[b-4en0j1g0yb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 2;
}

.pending-authorization-overlay svg[b-4en0j1g0yb] {
    width: 28px;
    height: 28px;
    color: #ffffff;
    opacity: 0.95;
}

.vehicle-thumb[b-4en0j1g0yb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-thumb-placeholder[b-4en0j1g0yb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #152238;
}

.placeholder-icon[b-4en0j1g0yb] {
    width: 28px;
    height: 22px;
    object-fit: contain;
    opacity: 0.85;
}

.vehicle-info-content[b-4en0j1g0yb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

.vehicle-plate[b-4en0j1g0yb] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-details[b-4en0j1g0yb] {
    font-size: 11.5px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-timer-box[b-4en0j1g0yb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 4px 8px;
    flex-shrink: 0;
}

.timer-clock-icon[b-4en0j1g0yb] {
    width: 14px;
    height: 14px;
    color: #ffd255;
    flex-shrink: 0;
}

.timer-display[b-4en0j1g0yb] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: 800;
    color: #ffd255;
    letter-spacing: 0.5px;
}

/* Action Buttons Row */
.resume-actions-row[b-4en0j1g0yb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

.action-btn[b-4en0j1g0yb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.action-btn:hover[b-4en0j1g0yb] {
    transform: translateY(-1px);
}

.action-btn:active[b-4en0j1g0yb] {
    transform: translateY(0);
}

.choice-icon[b-4en0j1g0yb] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* No por ahora */
.btn-no-now[b-4en0j1g0yb] {
    background: #152238;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-no-now:hover[b-4en0j1g0yb] {
    background: #233554;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Continuar trabajando */
.btn-resume-work[b-4en0j1g0yb] {
    background: #20e5a5;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(32, 229, 165, 0.35);
}

.btn-resume-work:hover[b-4en0j1g0yb] {
    background: #1bd195;
    box-shadow: 0 6px 16px rgba(32, 229, 165, 0.5);
}
/* /Pages/Home/Components/WorkSession/SwitchWorkSessionModal.razor.rz.scp.css */
.switch-modal-overlay[b-2lrlozawq2] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: modalFadeIn-b-2lrlozawq2 0.2s ease-out;
}

@keyframes modalFadeIn-b-2lrlozawq2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.switch-modal-card[b-2lrlozawq2] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: modalScaleUp-b-2lrlozawq2 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp-b-2lrlozawq2 {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.switch-modal-header[b-2lrlozawq2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-title-row[b-2lrlozawq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switch-modal-title[b-2lrlozawq2] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.info-icon-btn[b-2lrlozawq2] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon-btn svg[b-2lrlozawq2] {
    width: 20px;
    height: 20px;
}

.switch-modal-subtitle[b-2lrlozawq2] {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

/* Current Vehicle Card */
.current-vehicle-card[b-2lrlozawq2] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 14px;
}

.vehicle-thumb-box[b-2lrlozawq2] {
    position: relative;
    width: 58px;
    height: 46px;
    border-radius: 10px;
    border: 1.5px solid #ffffff;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-authorization-overlay[b-2lrlozawq2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 2;
}

.pending-authorization-overlay svg[b-2lrlozawq2] {
    width: 28px;
    height: 28px;
    color: #ffffff;
    opacity: 0.95;
}

.vehicle-thumb[b-2lrlozawq2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-thumb-placeholder[b-2lrlozawq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #334155;
}

.placeholder-icon[b-2lrlozawq2] {
    width: 28px;
    height: 22px;
    object-fit: contain;
    opacity: 0.85;
}

.vehicle-info-content[b-2lrlozawq2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

.vehicle-plate[b-2lrlozawq2] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-details[b-2lrlozawq2] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-timer-box[b-2lrlozawq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: 800;
    color: #4ade80;
    padding-left: 8px;
}

.vehicle-timer-box.timer-paused[b-2lrlozawq2] {
    color: #ffd255;
}

/* Action Buttons Row: Cancelar | Pausar | Finalizar in a single horizontal line */
.switch-actions-row[b-2lrlozawq2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.action-btn[b-2lrlozawq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.action-btn:hover[b-2lrlozawq2] {
    transform: translateY(-1px);
}

.action-btn:active[b-2lrlozawq2] {
    transform: translateY(0);
}

.choice-icon[b-2lrlozawq2] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Cancelar */
.btn-cancel-choice[b-2lrlozawq2] {
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-cancel-choice:hover[b-2lrlozawq2] {
    background: #475569;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Pausar */
.btn-pause-choice[b-2lrlozawq2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.btn-pause-choice:hover[b-2lrlozawq2] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.5);
}

/* Cerrar sesión */
.btn-logout-choice[b-2lrlozawq2] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
}

.btn-logout-choice:hover[b-2lrlozawq2] {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.5);
}

/* Finalizar */
.btn-finish-choice[b-2lrlozawq2] {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.btn-finish-choice:hover[b-2lrlozawq2] {
    background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.5);
}
/* /Pages/Home/Home.razor.rz.scp.css */
/* ===== Global Thin Scrollbar Style ===== */
[b-03x8r00w0l] * {
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

[b-03x8r00w0l] *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-03x8r00w0l] *::-webkit-scrollbar-track {
    background: transparent;
}

[b-03x8r00w0l] *::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

[b-03x8r00w0l] *::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Force no scroll on parent containers */
:host[b-03x8r00w0l],
:root[b-03x8r00w0l] {
    overflow: hidden !important;
}


/* Container for the entire dashboard */
.dashboard-container[b-03x8r00w0l] {
    position: fixed;
    /* `inset: 0` y no `height: 100vh`: en Chrome/Samsung Internet para Android `100vh` mide la
       pantalla con la barra de direcciones OCULTA, y como el tablero no tiene scroll la barra nunca
       se esconde, así que la franja inferior (inbox/semáforo) quedaba detrás de ella en TVs y
       celulares. Un `fixed` anclado arriba y abajo mide siempre el área visible real; en escritorio
       es exactamente el mismo tamaño que antes. */
    inset: 0;
    overflow: hidden;
    background-color: #1f2f45;
    font-family: 'Inter', sans-serif;
    /* Ancho del chat. --chat-width es lo que el mapa y la top-bar ceden: 0 cerrado, el ancho abierto. */
    --chat-panel-width: 350px;
    --chat-width: 0px;
    --inbox-pill-radius: 20px;
    --inbox-pill-background: #1f2f45;
    --inbox-pill-active-background: #e5b900;
    --inbox-group-header-background: rgba(255, 255, 255, 0.08);
    --inbox-group-header-hover-background: rgba(255, 255, 255, 0.12);
    --inbox-group-header-radius: 10px;
}

.dashboard-container.chat-open[b-03x8r00w0l] {
    --chat-width: var(--chat-panel-width);
}

/* Full-screen Map */
[b-03x8r00w0l] #map {
    /* Lo hacemos más grande que el marco (100% + desborde) */
    width: 110%;
    height: 110%;
    /* Lo centramos negativamente para compensar el tamaño extra */
    position: absolute;
    top: -5%;
    left: -5%;
    /* Quitamos propiedades que ahora maneja el marco */
    border-radius: 0;
    transition: none;
    /* El mapa no se mueve, se mueve el marco */
}

[b-03x8r00w0l] .map-frame {
    /* 1. Posición y Tamaño (Lo que antes tenía #map) */
    position: absolute;
    top: 10px;
    left: 220px;
    width: calc(100% - 230px);
    height: calc(100% - 20px);
    /* 2. Estética y Recorte */
    border-radius: 30px;
    overflow: hidden;
    /* ¡CLAVE! Esto corta lo que sobre del mapa */
    z-index: 0;
    /* 3. Transiciones (El marco es el que se anima) */
    transition: left 0.4s ease-in-out, width 0.4s ease-in-out;
}

/* Map adjustment when Chat is Open */
.dashboard-container.chat-open[b-03x8r00w0l]  .map-frame {
    width: calc(100% - 230px - var(--chat-width));
    /* Sidebar (220) + Chat (350) */
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .map-frame {
    left: 80px;
    width: calc(100% - 90px);
}

/* left 80 + right 10 = 90, the same right edge (10px + chat) as with the sidebar open, so the
   top-bar buttons keep their 10px inset from the frame in every sidebar/chat combination. */
.dashboard-container.sidebar-collapsed.chat-open[b-03x8r00w0l]  .map-frame {
    width: calc(100% - 90px - var(--chat-width));
}

/* Reportes panel: same right-edge adjustment as the map when chat is open */
.dashboard-container.chat-open[b-03x8r00w0l]  .dynamic-panel.reportes-mode {
    right: calc(var(--chat-width) + 10px) !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dashboard-container.sidebar-collapsed.chat-open[b-03x8r00w0l]  .dynamic-panel.reportes-mode {
    right: calc(var(--chat-width) + 10px) !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Calendario panel: same right-edge adjustment as the map when chat is open */
.dashboard-container.chat-open[b-03x8r00w0l]  .dynamic-panel.calendario-mode {
    right: calc(var(--chat-width) + 10px) !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dashboard-container.sidebar-collapsed.chat-open[b-03x8r00w0l]  .dynamic-panel.calendario-mode {
    right: calc(var(--chat-width) + 10px) !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar (Glassmorphism) */
[b-03x8r00w0l] .sidebar-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background: #1f2f45;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    z-index: 1005;
    box-sizing: border-box;
    color: white;
    transition: width 0.4s ease-in-out;
    overflow: visible;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-glass {
    width: 80px;
}

/* Header */
[b-03x8r00w0l] .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 30px;
    padding-left: 0;
}

/* Logo wrapper - Fixed width to keep icon static */
[b-03x8r00w0l] .sidebar-icon.logo-icon {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

[b-03x8r00w0l] .app-title {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out;
    opacity: 1;
    width: 120px;
    margin-top: 8px;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .app-title {
    opacity: 0;
    width: 0;
}

[b-03x8r00w0l] .title-main {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

[b-03x8r00w0l] .title-sub {
    font-size: 0.7rem;
    color: #a0a0b0;
}

/* Section Header */
[b-03x8r00w0l] .sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5d6b82;
    font-size: 0.9rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 0;
    position: relative;
}

[b-03x8r00w0l] .sidebar-section-header::after {
    content: "";
    position: absolute;
    bottom: 16px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    left: 30px;
    right: 30px;
}

[b-03x8r00w0l] .sidebar-section-header span {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
    white-space: nowrap;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-section-header {
    justify-content: center;
    padding-left: 0;
    border-bottom: none;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-section-header span {
    opacity: 0;
    display: none;
}

/* Union Icon Wrapper */
[b-03x8r00w0l] .sidebar-icon.union-icon {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* Menu Items */
[b-03x8r00w0l] .sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

[b-03x8r00w0l] .sidebar-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    cursor: pointer;
    padding: 10px 0;
    padding-left: 0;
    /* overflow visible para que la cápsula del badge se vea SOBRE el contenedor
       (esquina) y no quede recortada dentro de él. Aplica a TODOS los items, no
       solo al activo, para que seleccionados y no seleccionados se comporten
       igual. El texto colapsado se oculta por opacity/width:0, no por overflow,
       así que es seguro. */
    overflow: visible;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    /* Contenedor de posicionamiento del badge cuando el item está EXPANDIDO
       (sidebar abierto o en hover): el badge se ancla a la esquina inferior
       derecha de esta cápsula completa. */
    position: relative;
}

/* Regla para dar forma de "cuadrito" a los ítems cuando el sidebar está cerrado */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item {
    width: 45px;
    margin-left: 17.5px;
    padding-left: 0;
    justify-content: center;
    border-radius: 12px;
    position: relative;
}

/* Icon Wrapper - Fixed width to keep icon static */
[b-03x8r00w0l] .sidebar-icon {
    width: 60px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a0a0b0;
    flex-shrink: 0;
    margin: 0;
    user-select: none;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-icon {
    width: 45px;
}

[b-03x8r00w0l] .sidebar-icon.inbox-table-menu-icon {
    color: #ffffff;
    opacity: 1;
}

/* SysColor es el único icono del sidebar dibujado en SVG en línea: los demás son <img> con el
   blanco horneado dentro del archivo. Al heredar `currentColor` tomaba el #a0a0b0 de .sidebar-icon
   y se veía apagado al lado del resto. Se iguala aquí, y no cambiándole el fill en el marcado,
   para que siga respondiendo al color y no quede un blanco fijo imposible de tematizar. */
[b-03x8r00w0l] .sidebar-icon.syscolor-icon {
    color: #ffffff;
}

[b-03x8r00w0l] .sidebar-text {
    font-size: 1rem;
    color: white;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
    padding-left: 10px;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-text {
    opacity: 0;
    width: 0;
    padding-left: 0;
    overflow: hidden;
}

/* El aviso de estado del tenant vive abajo a la derecha, como notificación: arriba al centro
   tapaba la barra superior y el buscador del inbox justo mientras se cargan los datos. */
.tenant-access-progress[b-03x8r00w0l] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(520px, calc(100vw - 32px));
    padding: 8px 14px;
    color: #ffffff;
    font-size: 13px;
    background: rgba(31, 47, 69, 0.92);
    border: 1px solid rgba(229, 185, 0, 0.55);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    animation: tenant-access-progress-in-b-03x8r00w0l 0.2s ease-out;
}

/* Con el chat abierto el aviso se corre a la izquierda del panel en vez de quedar encima. */
.dashboard-container.chat-open .tenant-access-progress[b-03x8r00w0l] {
    right: 370px;
}

@keyframes tenant-access-progress-in-b-03x8r00w0l {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tenant-action-disabled[b-03x8r00w0l] {
    cursor: not-allowed !important;
    filter: grayscale(0.75);
    opacity: 0.5;
}

.fab-container.tenant-action-disabled .fab[b-03x8r00w0l],
.fab-container.tenant-action-disabled .fab:hover[b-03x8r00w0l] {
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(1) saturate(0.15);
    transform: none;
}

.fab-container.tenant-action-disabled .fab:focus-visible[b-03x8r00w0l] {
    outline: 2px solid var(--st-color-gold, #e5b900);
    outline-offset: 2px;
}

/* 1. Efecto HOVER (Gris difuminado) para ítems NO seleccionados */
[b-03x8r00w0l] .sidebar-item:not(.add-button):not(.active):not(.disabled):hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

/* 2. Efecto ACTIVE (Amarillo) para el ítem seleccionado */
[b-03x8r00w0l] .sidebar-item.active:not(.disabled) {
    color: white;
    background-color: #e5b900;
    border-radius: 12px;
    /* overflow visible para que la cápsula del badge pueda apoyarse en la esquina
       inferior derecha del recuadro amarillo sin quedar recortada. El texto se
       oculta en colapsado por opacity/width:0, no por overflow, así que es seguro. */
    overflow: visible;
}

/* Tenant-blocked items remain focusable and clickable so the contextual guard can explain why. */
[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"] {
    background: transparent;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

[b-03x8r00w0l] .sidebar-item:focus-visible,
[b-03x8r00w0l] .popup-item:focus-visible {
    outline: 2px solid var(--st-color-gold, #e5b900);
    outline-offset: 2px;
}

[b-03x8r00w0l] .popup-item.disabled[aria-disabled="true"] {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

/* Default state when collapsed for active items and non-hovered items */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.active {
    width: 45px;
    height: auto;
    margin-left: 17.5px;
    padding-left: 0;
    justify-content: center;
    border-radius: 12px;
}

/* Tooltip flotante para el sidebar colapsado: mismo mecanismo que el riel de
   Configuración (::after + data-tooltip), conservando el look "glass" propio
   del sidebar (fondo oscuro difuminado + texto blanco) en vez de la caja
   blanca sólida que usa aquel. */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: #1f2f45;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 1010;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.disabled)[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ════════════════════════════════════════════════════════════════════════
   Colapsado: el hover/clic debe vivir SOLO en la cápsula del icono
   ────────────────────────────────────────────────────────────────────────
   Antes, los ítems no-activos quedaban a lo ancho de toda la fila (width:100%)
   y, al hacer hover, la cápsula crecía (width:max-content) sobre el mapa; esa
   zona expandida seguía siendo hover, así que el efecto se quedaba "prendido"
   al mover el mouse hacia donde aparece el texto.
   Fix en dos partes:
   (1) Los ítems no-activos usan la MISMA cápsula de 45px que el activo, con el
       icono a 45px ESTABLE (no se encoge en hover ⇒ sin parpadeo).
   (2) pointer-events: solo el icono (auto) captura hover/clic; el resto de la
       píldora expandida (none) deja pasar el puntero, por lo que el hover se
       suelta apenas el cursor sale del icono. El :hover del item sigue
       activándose porque es ancestro del icono que está bajo el cursor, así que
       la animación de expansión de la píldora se conserva intacta. */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.add-button) {
    width: 45px;
    margin: 0 0 0 17.5px;
    padding-left: 0;
    justify-content: center;
    border-radius: 12px;
    pointer-events: none;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.add-button) .sidebar-icon {
    width: 100%;
    pointer-events: auto;
    cursor: pointer;
}

[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"] .sidebar-icon,
[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"] .sidebar-text {
    filter: grayscale(1) saturate(0.15);
    opacity: 0.3;
}

[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"] .inbox-badge {
    animation: none;
    box-shadow: none;
    filter: grayscale(1) saturate(0.15);
    opacity: 0.35;
    transform: none;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.disabled[aria-disabled="true"] .sidebar-icon {
    cursor: not-allowed;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.disabled[aria-disabled="true"] .sidebar-text {
    opacity: 0;
}

[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"]:hover,
[b-03x8r00w0l] .sidebar-item.disabled[aria-disabled="true"].active {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

[b-03x8r00w0l] .sidebar-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
}

[b-03x8r00w0l] .sidebar-icon.logo-icon img {
    width: 43px;
    height: 43px;
}

[b-03x8r00w0l] .sidebar-icon.union-icon img {
    width: 18px;
    height: 18px;
}

/* Bottom Section */
[b-03x8r00w0l] .sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: align-items 0.3s ease-in-out;
}

[b-03x8r00w0l] .add-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

[b-03x8r00w0l] .add-button .fab {
    margin: 0 auto;
}

[b-03x8r00w0l] .sidebar-item.add-button {
    padding-left: 0;
}

[b-03x8r00w0l] .sidebar-item.add-button .fab {
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

[b-03x8r00w0l] .fab {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e500cd;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.4);
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
    flex-shrink: 0;
}

[b-03x8r00w0l] .fab:hover {
    transform: scale(1.1);
}

[b-03x8r00w0l] .sidebar-item.add-button.disabled[aria-disabled="true"] .fab {
    box-shadow: none;
    filter: grayscale(1) saturate(0.15);
}

[b-03x8r00w0l] .sidebar-item.add-button.disabled[aria-disabled="true"] .fab:hover {
    box-shadow: none;
    transform: none;
}

/* User Profile in Sidebar */
[b-03x8r00w0l] .sidebar-user-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

[b-03x8r00w0l] .sidebar-avatar {
    width: 80px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

[b-03x8r00w0l] .shift-status-dot {
    position: absolute;
    bottom: 0px;
    right: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #1e293b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

[b-03x8r00w0l] .shift-status-dot.shift-online {
    background-color: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

[b-03x8r00w0l] .shift-status-dot.shift-paused {
    background-color: #F59E0B;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
    animation: pulse-paused-b-03x8r00w0l 2s infinite ease-in-out;
}

@keyframes pulse-paused-b-03x8r00w0l {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.92); }
}

[b-03x8r00w0l] .shift-status-dot.shift-offline {
    background-color: #94A3B8;
}

[b-03x8r00w0l] .availability-toggle-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

[b-03x8r00w0l] .availability-toggle-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[b-03x8r00w0l] .icon-availability-active {
    color: #10B981;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.45));
}

[b-03x8r00w0l] .icon-availability-paused {
    color: #F59E0B;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.45));
}

[b-03x8r00w0l] .availability-item-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

[b-03x8r00w0l] .availability-item-status {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

[b-03x8r00w0l] .availability-item-status.status-active {
    color: #10B981;
}

[b-03x8r00w0l] .availability-item-status.status-paused {
    color: #F59E0B;
}

[b-03x8r00w0l] .shift-toggle-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
    margin-bottom: 4px;
    cursor: pointer;
}

[b-03x8r00w0l] .icon-shift-active {
    color: #EF4444;
}

[b-03x8r00w0l] .icon-shift-start {
    color: #D8289F;
}

[b-03x8r00w0l] .icon-shift-inactive {
    color: #94A3B8;
}

[b-03x8r00w0l] .shift-item-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

[b-03x8r00w0l] .shift-item-duration {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 600;
}

[b-03x8r00w0l] .avatar-inner {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 3px solid #10B981;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-03x8r00w0l] .avatar-inner.shift-active {
    border: 3px solid #10B981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
    opacity: 1;
    filter: none;
}

[b-03x8r00w0l] .avatar-inner.shift-paused {
    border: 3px solid #F59E0B;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
    opacity: 1;
    filter: none;
}

[b-03x8r00w0l] .avatar-inner.shift-inactive {
    border: 3px solid #94A3B8;
    opacity: 0.45;
    filter: grayscale(100%);
    box-shadow: none;
}

[b-03x8r00w0l] .avatar-inner.shift-active:hover {
    border-color: #059669;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.65);
}

[b-03x8r00w0l] .avatar-inner.shift-paused:hover {
    border-color: #D97706;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.65);
}

[b-03x8r00w0l] .user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out;
    opacity: 1;
    width: 130px;
    padding-left: 0px;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .user-info {
    opacity: 0;
    width: 0;
    padding-left: 0;
}

[b-03x8r00w0l] .user-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

[b-03x8r00w0l] .user-role {
    font-size: 0.75rem;
    color: #e500cd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Top Search Bar */
/* The map frame ends 10px from the viewport edge (see .map-frame): right 20px keeps the buttons
   10px inside the frame, the same inset they have at the top. */
[b-03x8r00w0l] .top-bar {
    position: absolute;
    top: 20px;
    left: 240px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
    pointer-events: none;
    transition: left 0.4s ease-in-out, right 0.4s ease-in-out;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .top-bar {
    left: 100px;
}

.dashboard-container.notifications-open[b-03x8r00w0l]  .top-bar {
    z-index: 1095;
}

/* Con el selector de taller desplegado la barra sube por encima de paneles, tablas y overlays del
   dashboard (inbox z-index 50, chat 30, sidebar 1000): si no, el desplegable queda detrás y sus
   botones son inalcanzables. Solo mientras está abierto. */
[b-03x8r00w0l] .top-bar.selector-open {
    z-index: 2100;
}

/* With the chat open the frame retreats exactly --chat-width, so the same 10px inset holds. */
.dashboard-container.chat-open[b-03x8r00w0l]  .top-bar {
    right: calc(20px + var(--chat-width));
}

[b-03x8r00w0l] .search-container {
    pointer-events: auto;
    background: #9aa1abeb;
    backdrop-filter: blur(1px);
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    width: 400px;
}

[b-03x8r00w0l] .search-input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-size: 0.95rem;
}

[b-03x8r00w0l] .search-input::placeholder {
    color: white;
}

/* User Profile (Top Right) */
[b-03x8r00w0l] .user-profile {
    pointer-events: auto;
    background: #9aa1ab72;
    backdrop-filter: blur(10px);
    padding: 8px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 20px;
    margin-top: 10px;
}

[b-03x8r00w0l] .user-profile-staging {
    background: #ffc107;
    color: #000;
}

[b-03x8r00w0l] .user-profile-dev {
    background: #dc3545;
}

[b-03x8r00w0l] .user-profile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-03x8r00w0l] .workspace-name {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    line-height: 1;
}

[b-03x8r00w0l] .workspace-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: #e500cd;
    line-height: 1;
}

[b-03x8r00w0l] .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
}

/* Compact controls aligned with the tenant selector. */
.top-action-btn[b-03x8r00w0l] {
    position: relative;
    width: 45px;
    height: 44px;
    flex: 0 0 45px;
    box-sizing: border-box;
    padding: 0;
    background: rgba(104, 119, 141, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 20px rgba(15, 28, 45, 0.3);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: white;
}

.top-action-btn:hover[b-03x8r00w0l],
.top-action-btn.active[b-03x8r00w0l] {
    background: rgba(122, 137, 159, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 24px rgba(15, 28, 45, 0.38);
}

.top-action-btn:focus-visible[b-03x8r00w0l] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* Burbuja de la campana (<CountBadge>): se saca hacia abajo-derecha para que no tape el glifo,
   con dos tercios de su alto (20px) por fuera del borde del botón (el offset se mide desde el
   padding-box, de ahí el px extra del borde). A la derecha no más de 8px, que es el gap hasta
   la tarjeta del taller. */
.top-action-btn.notifications-trigger[b-03x8r00w0l] {
    --st-badge-offset-x: -8px;
    --st-badge-offset-y: -14px;
}

.top-action-btn:disabled[b-03x8r00w0l],
.top-action-btn.tenant-action-disabled[b-03x8r00w0l] {
    cursor: not-allowed;
}

.top-action-btn img[b-03x8r00w0l] {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.top-action-btn svg[b-03x8r00w0l] {
    display: block;
    width: 24px;
    height: 24px;
}

.workshop-mode-label[b-03x8r00w0l] {
    color: #ffffff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.notifications-backdrop[b-03x8r00w0l] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.notifications-popover[b-03x8r00w0l] {
    position: absolute;
    top: 72px;
    right: 20px;
    bottom: 20px;
    width: 450px;
    min-height: 0;
    z-index: 1100;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background: rgba(91, 110, 136, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    backdrop-filter: blur(22px) saturate(118%);
    box-shadow: 0 24px 60px rgba(13, 27, 45, 0.38);
    animation: notifications-popover-in-b-03x8r00w0l 0.2s ease-out;
}

@keyframes notifications-popover-in-b-03x8r00w0l {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat Panel Styles */
/* El marco del mapa termina 10px antes de --chat-width (ver .map-frame), y la caja del panel se
   extiende hasta ese borde: así el padding interior (8px) es el único margen de los elementos del
   chat, igual contra el mapa que contra el borde de la pantalla. Si la caja midiera solo
   --chat-panel-width, esos 10px se sumarían al margen izquierdo y quedaría 18px vs 8px. */
.chat-panel[b-03x8r00w0l] {
    position: absolute;
    top: 20px;
    right: -400px;
    width: calc(var(--chat-panel-width) + 10px);
    height: calc(100% - 20px);
    background-color: #1f2f45;
    z-index: 30;
    transition: right 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
}

.chat-panel.open[b-03x8r00w0l] {
    right: 0;
}

.chat-header[b-03x8r00w0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin-top: -20px;
    margin-bottom: -8px;
}

.chat-title-dropdown[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.close-chat-btn[b-03x8r00w0l] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background 0.2s;
}

.close-chat-btn:hover[b-03x8r00w0l] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.close-chat-btn:focus-visible[b-03x8r00w0l] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

.chat-body[b-03x8r00w0l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    overflow-y: auto;
    color: #a0a0b0;
}

.welcome-message[b-03x8r00w0l] {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: #a0a0b0;
    margin: auto;
    max-width: 80%;
}

/* ── Chat Bubbles ── */
.chat-bubble[b-03x8r00w0l] {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
    animation: bubble-in-b-03x8r00w0l 0.2s ease-out;
}

.user-bubble[b-03x8r00w0l] {
    align-self: flex-end;
    background: linear-gradient(135deg, #e500cd, #c800b0);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-bubble[b-03x8r00w0l] {
    align-self: flex-start;
    background: #2b394f;
    color: #d0dbe8;
    border-bottom-left-radius: 4px;
}

/* Estilos para el HTML generado por Markdig dentro de burbujas AI */
.ai-bubble.markdown-content p[b-03x8r00w0l] {
    margin: 0 0 6px 0;
}

.ai-bubble.markdown-content p:last-child[b-03x8r00w0l] {
    margin-bottom: 0;
}

.ai-bubble.markdown-content ul[b-03x8r00w0l],
.ai-bubble.markdown-content ol[b-03x8r00w0l] {
    margin: 4px 0 6px 0;
    padding-left: 18px;
}

.ai-bubble.markdown-content li[b-03x8r00w0l] {
    margin-bottom: 3px;
    line-height: 1.5;
}

.ai-bubble.markdown-content strong[b-03x8r00w0l] {
    color: #e0ecff;
    font-weight: 600;
}

.ai-bubble.markdown-content em[b-03x8r00w0l] {
    color: #b8cce0;
    font-style: italic;
}

.ai-bubble.markdown-content code[b-03x8r00w0l] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.82rem;
    font-family: 'Courier New', monospace;
}

/* Typing indicator */
.chat-typing[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
}

.dot[b-03x8r00w0l] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5d6b82;
    animation: typing-bounce-b-03x8r00w0l 1.2s infinite ease-in-out;
}

.dot:nth-child(2)[b-03x8r00w0l] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-03x8r00w0l] { animation-delay: 0.4s; }

@keyframes typing-bounce-b-03x8r00w0l {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

@keyframes bubble-in-b-03x8r00w0l {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Disabled send button */
.chat-action-btn:disabled[b-03x8r00w0l] {
    opacity: 0.35;
    cursor: default;
}

.chat-footer[b-03x8r00w0l] {
    /* Margen para que flote y no toque los bordes */
    margin: 8px;
    /* Relleno interno */
    padding: 8px 14px;
    /* Flexbox para alinear los iconos y texto */
    display: flex;
    align-items: center;
    gap: 10px;
    /* COLOR DE FONDO DE LA CÁPSULA (Ajusta este color al gris azulado de tu imagen) */
    background: #2b394f;
    /* BORDES REDONDEADOS (Esto crea el efecto cápsula) */
    border-radius: 50px;
}

.chat-input[b-03x8r00w0l] {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    outline: none;
    font-size: 0.9rem;
    border-radius: 50px;
}

.chat-input[b-03x8r00w0l]::placeholder {
    color: #5d6b82;
}

.chat-action-btn[b-03x8r00w0l] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: color 0.2s;
}

.chat-action-btn:hover[b-03x8r00w0l] {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

[b-03x8r00w0l] .add-button .sidebar-text {
    padding-left: 10px;
}

/* Restaurar posición del botón FAB al colapsar */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.add-button .fab {
    margin-left: 20px;
}

/* Restaurar ancho del ícono al colapsar */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-icon {
    width: 80px;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.active .sidebar-icon,
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.add-button):not(.disabled):hover .sidebar-icon {
    width: 100%;
}

/* ── Inbox Badge (count de assets "Míos") ── */
/* EXPANDIDO (sidebar abierto o item en hover): el wrapper NO es contenedor de
   posicionamiento, así el badge escapa hasta el .sidebar-item y se ancla a la
   esquina inferior derecha de la cápsula amarilla completa.
   COLAPSADO (sin hover): el wrapper sí es relative para anclar el badge al
   centro del ícono (esquina del recuadro amarillo de 45px). */
[b-03x8r00w0l] .inbox-icon-wrapper {
    position: static;
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .inbox-icon-wrapper {
    position: relative;
}

/* Colapsado + hover: la cápsula se expande; el wrapper vuelve a static para que
   el badge se ancle a la esquina inferior derecha del item expandido. */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.disabled):hover .inbox-icon-wrapper {
    position: static;
}

/* El badge es un <CountBadge> (xShared/Components/Badges): estilo, tamaño y color viven allí.
   Aquí SOLO se ajusta su posición según el estado del sidebar.
   Modo EXPANDIDO: esquina inferior derecha de la cápsula (offsets vía variables del componente). */
[b-03x8r00w0l] .sidebar-item .inbox-badge {
    --st-badge-offset-x: -6px;
    --st-badge-offset-y: -4px;
}

/* Ajuste del badge cuando el sidebar está colapsado.
   Se ancla al CENTRO del wrapper (left:50%) en lugar del borde derecho, porque
   el centro del ícono es estable (x=40) en todos los estados: normal, activo y
   hover. Así la cápsula NUNCA se mueve horizontalmente (elimina el corrimiento
   derecha→izquierda del hover) y siempre queda en la esquina inferior derecha
   del recuadro amarillo, fuera del ícono. */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .inbox-badge {
    left: 50%;
    right: auto;
    margin-left: 12px;
    bottom: -15px;
    /* La animación de aparición usa transform:scale; conviene que no reintroduzca
       desplazamiento horizontal, por eso el anclaje es por left fijo. */
}

/* Colapsado + hover (cápsula expandida): el badge se ancla a la esquina inferior
   derecha del item expandido, igual que en sidebar abierto. */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.disabled):hover .inbox-badge {
    left: auto;
    right: -6px;
    margin-left: 0;
    bottom: -4px;
}

/* ==========================================================================
   LOGOUT ITEM - Inside the "Configuración" popup, below "Gemelo Digital"
   ========================================================================== */

[b-03x8r00w0l] .popup-item.popup-item-logout {
    margin-top: 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 16px;
    background: #dc354533;
    color: #dc3545;
}

[b-03x8r00w0l] .popup-item.popup-item-logout .popup-icon {
    color: #dc3545;
}

[b-03x8r00w0l] .popup-item.popup-item-logout .popup-icon svg {
    transform: rotate(180deg);
}

[b-03x8r00w0l] .popup-item.popup-item-logout:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    box-shadow: none;
}

[b-03x8r00w0l] .popup-item.popup-item-logout:hover .popup-icon {
    color: #dc3545;
}

[b-03x8r00w0l] .popup-item.popup-item-logout:active {
    background: rgba(220, 53, 69, 0.2);
}

/* ==========================================================================
   LOGOUT CONFIRMATION MODAL - Swift-style Alert
   ========================================================================== */

[b-03x8r00w0l] .logout-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}

[b-03x8r00w0l] .logout-confirm-modal {
    background: rgba(31, 47, 69, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 30px 40px;
    text-align: center;
    min-width: 300px;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-03x8r00w0l 0.25s ease-out;
}

@keyframes slideUp-b-03x8r00w0l {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[b-03x8r00w0l] .logout-confirm-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff6b7a;
}

[b-03x8r00w0l] .logout-confirm-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin: 0 0 12px 0;
}

[b-03x8r00w0l] .logout-confirm-message {
    font-size: 1rem;
    color: #a0a0b0;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

[b-03x8r00w0l] .logout-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

[b-03x8r00w0l] .btn-logout-cancel,
[b-03x8r00w0l] .btn-logout-confirm {
    padding: 12px 28px;
    border-radius: 25px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-03x8r00w0l] .btn-logout-cancel {
    background: #3a4a5a;
    color: white;
}

[b-03x8r00w0l] .btn-logout-cancel:hover {
    background: #4a5a6a;
    transform: scale(1.02);
}

[b-03x8r00w0l] .btn-logout-confirm {
    background: #dc3545;
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

[b-03x8r00w0l] .btn-logout-confirm:hover {
    background: #ff4757;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

/* --- RESPONSIVE DESIGN (Móvil) --- */
@media (max-width: 768px) {

    /* 1. Sidebar: Se oculta visualmente para dar espacio */
    [b-03x8r00w0l] .sidebar-glass {
        width: 0;
        padding: 0;
        overflow: hidden;
    }

    /* Aseguramos que colapsado también sea 0 en móvil */
    .dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-glass {
        width: 0;
    }

    /* 2. Mapa: Ocupa toda la pantalla y se quitan los bordes redondeados */
    [b-03x8r00w0l] .map-frame {
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 0;
    }

    .dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .map-frame {
        left: 0;
        width: 100%;
    }

    /* 3. Barra Superior: Se ajusta a los márgenes de la pantalla */
    [b-03x8r00w0l] .top-bar {
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: calc(10px + env(safe-area-inset-left, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        width: auto;
        justify-content: space-between;
    }

    .dashboard-container.chat-open[b-03x8r00w0l]  .top-bar {
        right: calc(10px + env(safe-area-inset-right, 0px));
    }

    .top-action-btn[b-03x8r00w0l] {
        width: 45px;
        height: 44px;
        flex-basis: 45px;
    }

    .notifications-popover[b-03x8r00w0l] {
        top: calc(62px + env(safe-area-inset-top, 0px));
        left: calc(10px + env(safe-area-inset-left, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        border-radius: 22px;
    }

    .dashboard-container.work-session-active .notifications-popover[b-03x8r00w0l] {
        top: calc(120px + env(safe-area-inset-top, 0px));
    }

    .dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .top-bar {
        left: calc(10px + env(safe-area-inset-left, 0px));
    }

    /* Ocultamos el perfil de usuario en móvil para ahorrar espacio (opcional) */
    [b-03x8r00w0l] .user-profile {
        display: none;
    }

    /* 4. Chat Panel: Ocupa el 100% de la pantalla al abrirse */
    .chat-panel[b-03x8r00w0l] {
        width: 100%;
        right: -100%;
        /* Se esconde completamente a la derecha */
    }

    .chat-panel.open[b-03x8r00w0l] {
        right: 0;
    }

    /* El chat ocupa todo el ancho: no hay hueco a la izquierda donde correr el aviso. */
    .dashboard-container.chat-open .tenant-access-progress[b-03x8r00w0l] {
        right: 10px;
    }

    .tenant-access-progress[b-03x8r00w0l] {
        right: 10px;
        bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-action-btn[b-03x8r00w0l],
    .notifications-popover[b-03x8r00w0l] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   TENANT SELECTOR - FIGMA DESIGN
   ========================================= */

/* =========================================
   ENVIRONMENT COLOR INDICATORS
   ========================================= */

/* Development - Red background (like login button) */
[b-03x8r00w0l] .tenant-card.env-development {
    background: rgba(220, 53, 69, 0.85) !important;
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.5) !important;
}

[b-03x8r00w0l] .tenant-card.env-development.expanded {
    background: rgba(220, 53, 69, 0.9) !important;
}

[b-03x8r00w0l] .tenant-card.env-development .tenant-header {
    border-left: none;
}

/* Staging/Test - Yellow/Orange background (like login button) */
[b-03x8r00w0l] .tenant-card.env-staging {
    background: rgba(255, 193, 7, 0.85) !important;
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5) !important;
}

[b-03x8r00w0l] .tenant-card.env-staging.expanded {
    background: rgba(255, 193, 7, 0.9) !important;
}

/* Solo el icono se oscurece sobre el ámbar de staging: el nombre del taller y su departamento van
   siempre en blanco (ver TenantSelector.razor.css), igual que en el resto de entornos. */
[b-03x8r00w0l] .tenant-card.env-staging .tenant-icon {
    color: #1f2f45 !important;
}

[b-03x8r00w0l] .tenant-card.env-staging .tenant-header {
    border-left: none;
}



/* =========================================
   REPORTES SIDEBARS - Paneles laterales
   ========================================= */

/* Panel lateral base */
.graficas-sidebar[b-03x8r00w0l],
.filtros-sidebar[b-03x8r00w0l] {
    position: fixed;
    top: 0;
    left: -400px;
    width: 400px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    box-sizing: border-box;
    transition: left 0.4s ease-in-out;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.graficas-sidebar.open[b-03x8r00w0l],
.filtros-sidebar.open[b-03x8r00w0l] {
    left: 80px;
}

.sidebar-header-reportes[b-03x8r00w0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.sidebar-header-reportes h3[b-03x8r00w0l] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}

.close-sidebar-btn[b-03x8r00w0l] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
}

.close-sidebar-btn:hover[b-03x8r00w0l] {
    color: #fff;
}

.sidebar-instructions[b-03x8r00w0l] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    line-height: 1.4;
}

.graficas-grid[b-03x8r00w0l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
}

.grafica-option[b-03x8r00w0l] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grafica-option:hover[b-03x8r00w0l] {
    background: rgba(255, 255, 255, 0.1);
    border-color: #D33BB2;
}

.grafica-preview[b-03x8r00w0l] {
    height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 8px;
}

.grafica-option h4[b-03x8r00w0l] {
    margin: 0 0 4px 0;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
}

.grafica-option p[b-03x8r00w0l] {
    margin: 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.agregar-btn[b-03x8r00w0l],
.aplicar-btn[b-03x8r00w0l] {
    margin-top: 15px;
    padding: 12px;
    background: #D33BB2;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    align-self: flex-start;
}

.agregar-btn:hover[b-03x8r00w0l],
.aplicar-btn:hover[b-03x8r00w0l] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
}

/* Filtros sidebar specific */
.filtro-section[b-03x8r00w0l] {
    margin-bottom: 20px;
}

.filtro-section label[b-03x8r00w0l] {
    display: block;
    color: #a0aab0;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.filtro-row[b-03x8r00w0l] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.filtro-input[b-03x8r00w0l] {
    flex: 1;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.filtro-select[b-03x8r00w0l] {
    width: 100%;
    background: #2a3a4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.filtro-toggle-row[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch[b-03x8r00w0l] {
    width: 40px;
    height: 20px;
    background: #D33BB2;
    border-radius: 10px;
    cursor: pointer;
}

/* Adjustments for reportes-mode with chat open */
[b-03x8r00w0l] .dynamic-panel.reportes-mode.chat-open {
    right: 350px !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-03x8r00w0l] .dynamic-panel.reportes-mode.sidebar-collapsed.chat-open {
    right: 350px !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   USER OPTIONS POPUP - Fixed Position
   ========================================================================== */

/* Overlay to click-outside-to-close */
[b-03x8r00w0l] .user-options-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: transparent;
}

/* The Popup Container */
[b-03x8r00w0l] .user-options-popup {
    position: fixed;
    bottom: 20px;
    left: 228px;
    width: 320px;
    background: rgba(43, 62, 89, 0.75);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    border-radius: 24px;
    padding: 12px 10px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: popupFadeIn-b-03x8r00w0l 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    transition: left 0.4s ease-in-out;
}

/* Dynamic positioning based on sidebar state */
[b-03x8r00w0l] .user-options-popup.sidebar-expanded-mode {
    left: 228px;
}

[b-03x8r00w0l] .user-options-popup.sidebar-collapsed-mode {
    left: 88px;
}

.sidebar-collapsed[b-03x8r00w0l]  .user-options-popup {
    left: 88px;
}

/* Header/Title */
[b-03x8r00w0l] .popup-header {
    margin-bottom: 8px;
    padding-left: 4px;
}

[b-03x8r00w0l] .popup-title {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tarjeta Blanca Superior */
[b-03x8r00w0l] .user-opitons-content {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

@keyframes popupFadeIn-b-03x8r00w0l {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* List Items dentro de la tarjeta blanca */
[b-03x8r00w0l] .popup-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-03x8r00w0l] .popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: #ECEEF2;
    border-radius: 12px;
    cursor: pointer;
    color: #2F435E;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease-in-out;
}

[b-03x8r00w0l] .popup-item:hover {
    background: #E5B900;
    color: #1F2F45;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(229, 185, 0, 0.35);
}

[b-03x8r00w0l] .popup-item.disabled[aria-disabled="true"] .popup-icon,
[b-03x8r00w0l] .popup-item.disabled[aria-disabled="true"] .popup-text {
    filter: grayscale(1) saturate(0.15);
    opacity: 0.4;
}

[b-03x8r00w0l] .popup-item.disabled[aria-disabled="true"]:hover {
    background: #ECEEF2;
    box-shadow: none;
    color: #2F435E;
    transform: none;
}

[b-03x8r00w0l] .popup-item.popup-item-selected {
    background: #DE9C02;
    color: #2B3B52;
}

[b-03x8r00w0l] .popup-item-primary {
    background: #E5B900;
    color: #FFFFFF;
}

[b-03x8r00w0l] .popup-item-primary:hover {
    background: #D49E00;
    color: #FFFFFF;
}

[b-03x8r00w0l] .popup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-03x8r00w0l] .popup-text {
    font-size: 0.94rem;
    letter-spacing: -0.1px;
}

/* ==========================================================================
   POPUP FOOTER SECTION (Mockup Style: Glassmorphism Dark)
   ========================================================================== */

[b-03x8r00w0l] .popup-footer-section {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    gap: 12px;
    padding: 0 2px;
}

/* Fila de Usuario y Disponibilidad */
[b-03x8r00w0l] .popup-user-availability-row {
    background: rgba(115, 128, 145, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: all 0.18s ease;
}

[b-03x8r00w0l] .popup-user-availability-row.clickable-avail {
    cursor: pointer;
}

[b-03x8r00w0l] .popup-user-availability-row.clickable-avail:hover {
    background: rgba(115, 128, 145, 0.5);
}

/* Badges circulares de estado */
[b-03x8r00w0l] .user-avail-status-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-03x8r00w0l] .user-avail-status-badge.badge-online {
    background: #C7FCEB;
    border: 2px solid #20E5A5;
    color: #20E5A5;
}

[b-03x8r00w0l] .user-avail-status-badge.badge-paused {
    background: #FDE2E4;
    border: 2px solid #F43F5E;
    color: #F43F5E;
}

[b-03x8r00w0l] .user-avail-status-badge.badge-offline {
    background: #E2E8F0;
    border: 2px solid #94A3B8;
    color: #94A3B8;
}

[b-03x8r00w0l] .user-avail-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

[b-03x8r00w0l] .user-avail-name {
    color: #FFFFFF;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

[b-03x8r00w0l] .user-avail-status {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

[b-03x8r00w0l] .user-avail-status.status-online {
    color: #20E5A5;
}

[b-03x8r00w0l] .user-avail-status.status-paused {
    color: #F43F5E;
}

[b-03x8r00w0l] .user-avail-status.status-offline {
    color: #94A3B8;
}

[b-03x8r00w0l] .user-avail-status.status-role {
    color: #94A3B8;
    font-weight: 500;
}

/* Píldora de duración digital 0:05 */
[b-03x8r00w0l] .shift-duration-pill {
    background: #27E79F;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 12px;
    padding: 3px 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(39, 231, 159, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-03x8r00w0l] .user-avail-arrow {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

[b-03x8r00w0l] .popup-user-availability-row.clickable-avail:hover .user-avail-arrow {
    transform: translateX(2px);
    color: #FFFFFF;
}

/* Botonera Dual Inferior */
[b-03x8r00w0l] .popup-actions-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

[b-03x8r00w0l] .popup-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 12px;
    transition: all 0.18s ease;
    text-align: left;
    flex: 1;
}

[b-03x8r00w0l] .popup-action-btn:hover {
    background: rgba(255, 255, 255, 0.09);
}

[b-03x8r00w0l] .action-btn-clean-icon {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

[b-03x8r00w0l] .popup-action-btn:hover .action-btn-clean-icon {
    transform: scale(1.1);
}

[b-03x8r00w0l] .action-btn-text {
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.2px;
}

/* Divisor Vertical entre botones */
[b-03x8r00w0l] .popup-actions-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0 4px;
}

[b-03x8r00w0l] .btn-shift-disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==========================================================================
   SUB-POPUP FLOTANTE DE DISPONIBILIDAD (A la derecha)
   ========================================================================== */

[b-03x8r00w0l] .availability-sub-popup {
    position: absolute;
    left: calc(100% + 14px);
    bottom: 0;
    width: 230px;
    background: rgba(43, 62, 89, 0.78);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    border-radius: 24px;
    padding: 16px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    animation: popupFadeIn-b-03x8r00w0l 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[b-03x8r00w0l] .avail-popup-content {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[b-03x8r00w0l] .avail-sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.18s ease-in-out;
}

[b-03x8r00w0l] .avail-sub-item.avail-item-selected {
    background: #DE9C02;
    color: #FFFFFF;
}

[b-03x8r00w0l] .avail-sub-item.avail-item-selected:hover {
    background: #C48800;
}

[b-03x8r00w0l] .avail-sub-item.avail-item-unselected {
    background: #ECEEF2;
    color: #2F435E;
}

[b-03x8r00w0l] .avail-sub-item.avail-item-unselected:hover {
    background: #E2E4E9;
}

[b-03x8r00w0l] .avail-sub-text {
    font-size: 0.94rem;
    letter-spacing: -0.1px;
}

/* Make Sidebar Profile Clickable */
[b-03x8r00w0l] .sidebar-user-profile {
    cursor: pointer;
    transition: transform 0.3s;
    border-radius: 10px;
}

[b-03x8r00w0l] .sidebar-avatar:hover {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .tenant-access-progress[b-03x8r00w0l],
    [b-03x8r00w0l] .sidebar-item,
    [b-03x8r00w0l] .sidebar-text,
    [b-03x8r00w0l] .sidebar-item[data-tooltip]::after,
    [b-03x8r00w0l] .sidebar-item .fab,
    [b-03x8r00w0l] .popup-item {
        animation: none !important;
        transition: none !important;
    }

    [b-03x8r00w0l] .sidebar-item .fab:hover,
    [b-03x8r00w0l] .popup-item:hover {
        transform: none !important;
    }
}

/* Barrera de errores del tablero. Ocupa la pantalla porque cuando aparece no hay tablero que
   mostrar detrás, pero la sesión sigue viva: el botón reintenta sin recargar la página. */
.dashboard-error[b-03x8r00w0l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100vh;
    height: 100dvh;
    padding: 24px;
    text-align: center;
    background-color: #1f2f45;
    color: #e2e8f0;
}

.dashboard-error h2[b-03x8r00w0l] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-error p[b-03x8r00w0l] {
    margin: 0;
    color: #94a3b8;
    max-width: 32rem;
}
/* /Pages/LandinPage/About.razor.rz.scp.css */
.about-hero-section[b-5wryko4w50] {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 100%), url('/about.jpg') no-repeat center center;
    background-size: cover;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.hero-top-text[b-5wryko4w50] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #b0b0b0;
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.hero-main-title[b-5wryko4w50] {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.hero-main-title .thin[b-5wryko4w50] {
    font-weight: 200;
    color: #fff;
}

.btn-pink[b-5wryko4w50] {
    background-color: #e500cd;
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
}

.btn-pink:hover[b-5wryko4w50] {
    background-color: #c400ae;
    transform: translateY(-2px);
}

[b-5wryko4w50] .text-pink {
    color: #e500cd !important;
    font-weight: 700;
}

/* --- SECCIÓN PROBLEMA/SOLUCIÓN (Con Difuminado) --- */
.problem-solution-section[b-5wryko4w50] {
    position: relative;
    background-color: #0d1117;
    padding: 100px 10rem;
    color: #fff;
    display: flex;
    justify-content: center;
    z-index: 2;
}

/* El "Difuminado" (Gradient Fade) entre el Hero y esta sección */
.problem-solution-section[b-5wryko4w50]::before {
    content: "";
    position: absolute;
    top: -150px;
    /* Se solapa con el Hero para crear el efecto de desvanecimiento */
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, #0d1117);
    pointer-events: none;
}

.problem-container[b-5wryko4w50] {
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 80px;
}

.problem-left[b-5wryko4w50] {
    flex: 1.5;
}

.problem-left h2[b-5wryko4w50] {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.problem-right[b-5wryko4w50] {
    flex: 1;
}

.problem-right p[b-5wryko4w50] {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.text-pink[b-5wryko4w50] {
    color: #e500cd !important;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .problem-solution-section[b-5wryko4w50] {
        padding: 80px 5rem;
    }
}

@media (max-width: 992px) {
    .problem-solution-section[b-5wryko4w50] {
        padding: 60px 2rem;
    }

    .problem-container[b-5wryko4w50] {
        flex-direction: column;
        gap: 30px;
    }

    .problem-left h2[b-5wryko4w50] {
        font-size: 2.2rem;
    }
}

/* --- SECCIÓN PILARES --- */
.section-pillars[b-5wryko4w50] {
    background: #0d1117;
    /* Darker background to match the theme */
    padding: 0px 0px 10rem;
    color: #fff;
}

.pillars-container[b-5wryko4w50] {
    max-width: 1400px;
    margin: 0 auto;
}

.pillars-grid[b-5wryko4w50] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Reduced gap like in the image */
    align-items: stretch;
}

.pillar-card[b-5wryko4w50] {
    background: #121c2a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
    min-height: 380px;
}

.pillar-card.highlighted[b-5wryko4w50] {
    background: #e500cd;
    /* Brand pink */
    color: #fff;
    border: none;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(229, 0, 205, 0.2);
}

.pillar-number[b-5wryko4w50] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #e500cd;
    /* Brand pink for dark cards */
    display: block;
}

.pillar-card.highlighted .pillar-number[b-5wryko4w50] {
    color: #fff;
}

.pillar-card h3[b-5wryko4w50] {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.1;
}

.pillar-card.highlighted h3[b-5wryko4w50] {
    color: #fff;
}

.pillar-card p[b-5wryko4w50] {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.6;
}

.pillar-card.highlighted p[b-5wryko4w50] {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1200px) {
    .section-pillars[b-5wryko4w50] {
        padding: 80px 5%;
    }

    .pillars-grid[b-5wryko4w50] {
        gap: 15px;
    }

    .pillar-card[b-5wryko4w50] {
        padding: 40px 30px;
    }
}

@media (max-width: 992px) {
    .pillars-grid[b-5wryko4w50] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pillar-card.highlighted[b-5wryko4w50] {
        transform: none;
    }
}

/* --- NEW CONTACT SECTION --- */
.new-contact-section[b-5wryko4w50] {
    background-color: #0d1117;
    padding: 100px 10rem 0 10rem;
    color: #fff;
}

.contact-header[b-5wryko4w50] {
    text-align: center;
    margin-bottom: 80px;
}

.contact-header h1[b-5wryko4w50] {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.contact-grid-container[b-5wryko4w50] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.contact-subtitle[b-5wryko4w50] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.contact-desc[b-5wryko4w50] {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 48px;
    max-width: 500px;
}

.location-item[b-5wryko4w50] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.location-icon[b-5wryko4w50] {
    width: 60px;
    height: 60px;
    background: rgba(229, 0, 205, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e500cd;
    flex-shrink: 0;
}

.location-icon svg[b-5wryko4w50] {
    width: 28px;
    height: 28px;
}

.location-text h4[b-5wryko4w50] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.location-text p[b-5wryko4w50] {
    color: #94a3b8;
    font-size: 1rem;
}

/* Form Card */
.contact-card-modern[b-5wryko4w50] {
    background: #121c2a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.contact-card-modern h3[b-5wryko4w50] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 32px;
}

.form-row[b-5wryko4w50] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group[b-5wryko4w50] {
    margin-bottom: 24px;
}

.form-group label[b-5wryko4w50] {
    display: block;
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 8px;
}

.form-group input[b-5wryko4w50],
.form-group textarea[b-5wryko4w50] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 0;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus[b-5wryko4w50],
.form-group textarea:focus[b-5wryko4w50] {
    border-color: #e500cd;
}

.form-group textarea[b-5wryko4w50] {
    height: 100px;
    resize: none;
}

.btn-full[b-5wryko4w50] {
    width: 100%;
    margin-top: 20px;
    padding: 18px;
}

/* Map */
.map-container[b-5wryko4w50] {
    height: 500px;
    margin-top: -80px; 
    position: relative;
    background: #0d1117;
    width: 100%;
    overflow: hidden;
}

.styled-map[b-5wryko4w50] {
    width: 100%;
    height: 100%;
}

.styled-map iframe[b-5wryko4w50] {
    filter: grayscale(1) invert(0.9) brightness(0.8) contrast(1.2);
    width: 100%;
    height: 100%;
}

.map-overlay[b-5wryko4w50] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px 100px 0px 100px;
    pointer-events: none; /* Allow interaction with map */
    z-index: 2;
}

@media (max-width: 1200px) {
    .new-contact-section[b-5wryko4w50] {
        padding: 80px 5% 0 5%;
    }

    .contact-grid-container[b-5wryko4w50] {
        gap: 50px;
    }
}

@media (max-width: 992px) {
    .contact-grid-container[b-5wryko4w50] {
        grid-template-columns: 1fr;
    }

    .contact-info-side[b-5wryko4w50] {
        text-align: center;
    }

    .contact-desc[b-5wryko4w50] {
        margin-left: auto;
        margin-right: auto;
    }

    .location-item[b-5wryko4w50] {
        justify-content: center;
    }

    .map-container[b-5wryko4w50] {
        margin-top: 50px;
    }
}

/* --- SECCIÓN MANIFIESTO --- */
.section-manifesto[b-5wryko4w50] {
    background-color: #0d1117;
    padding: 120px 10rem;
    color: #fff;
}

.manifesto-container[b-5wryko4w50] {
    max-width: 1400px;
    margin: 0 auto;
}

.manifesto-content[b-5wryko4w50] {
    display: flex;
    align-items: flex-start;
    gap: 120px;
}

.manifesto-left[b-5wryko4w50] {
    flex: 1;
}

.manifesto-left h2[b-5wryko4w50] {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px;
}

.manifesto-right[b-5wryko4w50] {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.manifesto-item[b-5wryko4w50] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.manifesto-icon[b-5wryko4w50] {
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manifesto-item.negative[b-5wryko4w50] {
    opacity: 0.5;
}

.manifesto-item.negative .manifesto-icon[b-5wryko4w50] {
    color: #94a3b8;
}

.manifesto-item.negative p[b-5wryko4w50] {
    font-size: 1.4rem;
    color: #94a3b8;
    margin: 0;
}

.manifesto-item.positive .manifesto-icon[b-5wryko4w50] {
    color: #e500cd;
    font-size: 2rem;
    font-weight: 700;
}

.manifesto-item.positive p[b-5wryko4w50] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

@media (max-width: 1200px) {
    .section-manifesto[b-5wryko4w50] {
        padding: 80px 5%;
    }

    .manifesto-content[b-5wryko4w50] {
        gap: 60px;
    }

    .manifesto-left h2[b-5wryko4w50] {
        font-size: 2.8rem;
    }
}

@media (max-width: 992px) {
    .manifesto-content[b-5wryko4w50] {
        flex-direction: column;
        gap: 40px;
    }

    .manifesto-item.positive p[b-5wryko4w50] {
        font-size: 1.5rem;
    }

    .manifesto-item.negative p[b-5wryko4w50] {
        font-size: 1.2rem;
    }
}

/* --- SECCIÓN EQUIPO --- */
.section-team[b-5wryko4w50] {
    background-color: #0d1117;
    padding: 100px 10rem;
    color: #fff;
    text-align: center;
}

.team-container[b-5wryko4w50] {
    max-width: 1400px;
    margin: 0 auto;
}

.team-top-text[b-5wryko4w50] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #e500cd;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.5rem;
}

.team-manifesto[b-5wryko4w50] {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: 900px;
    margin: 0 auto 80px auto;
    color: #fff;
}

.team-grid[b-5wryko4w50] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.team-member[b-5wryko4w50] {
    background: #121c2a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 40px 40px 40px;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: visible;
}

.team-member:hover[b-5wryko4w50] {
    transform: translateY(-10px);
    background: #162436;
}

/* Icon Wrap - The "Jewel" Container */
.member-icon-wrap[b-5wryko4w50] {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    z-index: 10;
}

.member-icon[b-5wryko4w50] {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    /* Squircle/Diamond look */
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.member-icon svg[b-5wryko4w50] {
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
    /* Counter-rotate icon back */
    color: #fff;
    z-index: 2;
}

/* Accent Themes */
.accent-pink .member-icon[b-5wryko4w50] {
    background: linear-gradient(135deg, #e500cd 0%, #ff4edc 100%);
    box-shadow: 0 10px 25px rgba(229, 0, 205, 0.4);
}

.accent-pink[b-5wryko4w50]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom right, rgba(229, 0, 205, 0.1), transparent 70%);
    border-radius: 24px;
    pointer-events: none;
}

.accent-blue .member-icon[b-5wryko4w50] {
    background: linear-gradient(135deg, #0070f3 0%, #00c6ff 100%);
    box-shadow: 0 10px 25px rgba(0, 112, 243, 0.4);
}

.accent-blue[b-5wryko4w50]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom right, rgba(0, 112, 243, 0.1), transparent 70%);
    border-radius: 24px;
    pointer-events: none;
}

.accent-violet .member-icon[b-5wryko4w50] {
    background: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
    box-shadow: 0 10px 25px rgba(121, 40, 202, 0.4);
}

.accent-violet[b-5wryko4w50]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom right, rgba(121, 40, 202, 0.1), transparent 70%);
    border-radius: 24px;
    pointer-events: none;
}

.member-role[b-5wryko4w50] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

@media (max-width: 992px) {
    .section-team[b-5wryko4w50] {
        padding: 80px 5%;
    }

    .team-manifesto[b-5wryko4w50] {
        font-size: 2rem;
    }

    .team-grid[b-5wryko4w50] {
        grid-template-columns: 1fr;
    }
}

/* Media Queries */
@media (max-width: 600px) {
    .contact-section h2[b-5wryko4w50] {
        font-size: 2.5rem;
    }

    .contact-card[b-5wryko4w50] {
        align-items: center;
        text-align: center;
    }
}
/* /Pages/LandinPage/Comunity.razor.rz.scp.css */
/* Community Page Styles */

.community-container[b-gk0p9tiosn] {
    width: 100%;
    min-height: 100vh;
    background-color: #1a2332;
}

/* Hero Section */
.hero-section[b-gk0p9tiosn] {
    width: 100%;
    height: 400px;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200') center/cover;
    position: relative;
}

.hero-overlay[b-gk0p9tiosn] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content[b-gk0p9tiosn] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 2rem;
}

.hero-title[b-gk0p9tiosn] {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
}

.hero-subtitle[b-gk0p9tiosn] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.hero-buttons[b-gk0p9tiosn] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-join[b-gk0p9tiosn] {
    background-color: #1e2d41;
    color: white;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-join:hover[b-gk0p9tiosn] {
        background-color: #2a3f5f;
    }

.btn-explore[b-gk0p9tiosn] {
    background-color: white;
    color: #333;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

    .btn-explore:hover[b-gk0p9tiosn] {
        background-color: #f0f0f0;
    }

.icon-users[b-gk0p9tiosn] {
    font-size: 1.2rem;
}

/* Tabs Section - Positioned at bottom of hero */
.tabs-section[b-gk0p9tiosn] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(30, 45, 65, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
}

.tabs-container[b-gk0p9tiosn] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0 2rem;
}

.tab-item[b-gk0p9tiosn] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

    .tab-item:hover[b-gk0p9tiosn] {
        color: white;
    }

    .tab-item.active[b-gk0p9tiosn] {
        color: white;
    }

        .tab-item.active[b-gk0p9tiosn]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: white;
        }

.btn-ask[b-gk0p9tiosn] {
    margin-left: auto;
    background-color: #e500cd;
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-ask:hover[b-gk0p9tiosn] {
        background-color: #cb00b6;
    }

/* Questions Section */
.questions-section[b-gk0p9tiosn] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.question-card[b-gk0p9tiosn] {
    background-color: #243447;
    border-radius: 8px;
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

    .question-card:hover[b-gk0p9tiosn] {
        background-color: #2a3f5f;
    }

.question-stats[b-gk0p9tiosn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 100px;
}

.stat-item[b-gk0p9tiosn] {
    text-align: center;
}

.stat-number[b-gk0p9tiosn] {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.stat-label[b-gk0p9tiosn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.question-content[b-gk0p9tiosn] {
    flex: 1;
}

.question-title[b-gk0p9tiosn] {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.8rem;
}

.question-text[b-gk0p9tiosn] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.question-footer[b-gk0p9tiosn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info[b-gk0p9tiosn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.user-avatar[b-gk0p9tiosn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #5a6c84;
}

.user-name[b-gk0p9tiosn] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.question-time[b-gk0p9tiosn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-section[b-gk0p9tiosn] {
        height: 350px;
    }

    .hero-title[b-gk0p9tiosn] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 1rem;
    }

    .tabs-container[b-gk0p9tiosn] {
        padding: 0 1.5rem;
        gap: 1rem;
    }

    .tab-item[b-gk0p9tiosn] {
        font-size: 0.9rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .hero-section[b-gk0p9tiosn] {
        height: auto;
        min-height: 450px;
    }

    .hero-title[b-gk0p9tiosn] {
        font-size: 2rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 0.95rem;
    }

    .hero-content[b-gk0p9tiosn] {
        padding: 1.5rem;
    }

    .hero-buttons[b-gk0p9tiosn] {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
    }

    .btn-join[b-gk0p9tiosn],
    .btn-explore[b-gk0p9tiosn] {
        width: 100%;
        max-width: 300px;
    }

    .tabs-section[b-gk0p9tiosn] {
        position: relative;
        background-color: #1e2d41;
    }

    .tabs-container[b-gk0p9tiosn] {
        flex-wrap: wrap;
        gap: 0.8rem;
        padding: 1rem;
        justify-content: center;
    }

    .tab-item[b-gk0p9tiosn] {
        font-size: 0.85rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        margin-left: 0;
        width: 100%;
        max-width: 150px;
    }

    .questions-section[b-gk0p9tiosn] {
        padding: 1rem;
    }

    .question-card[b-gk0p9tiosn] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .question-stats[b-gk0p9tiosn] {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
    }

    .question-title[b-gk0p9tiosn] {
        font-size: 1.1rem;
    }

    .question-text[b-gk0p9tiosn] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-gk0p9tiosn] {
        font-size: 1.5rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .btn-join[b-gk0p9tiosn],
    .btn-explore[b-gk0p9tiosn] {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .tabs-container[b-gk0p9tiosn] {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-item[b-gk0p9tiosn] {
        text-align: center;
        padding: 0.5rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        max-width: 100%;
    }

    .stat-number[b-gk0p9tiosn] {
        font-size: 1.2rem;
    }

    .stat-label[b-gk0p9tiosn] {
        font-size: 0.75rem;
    }
}
/* /Pages/LandinPage/Divice.razor.rz.scp.css */
/* --- PRODUCT HERO SECTION --- */
.product-hero-section[b-n67vq40t4c] {
    position: relative;
    /* Cambia 'fondo-producto.png' por el nombre real de tu imagen de fondo */
    background: url('/productoPage.svg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    padding: 100px 5%;
    color: #fff;
    overflow: hidden;
    /* Evita scroll innecesario */
}

.product-container[b-n67vq40t4c] {
    position: relative;
    z-index: 2;
    /* Para que el contenido quede encima del overlay */
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Separa texto e imagen */
    gap: 50px;
}

/* --- COLUMNA IZQUIERDA (TEXTO) --- */
.product-content[b-n67vq40t4c] {
    flex: 1;
    /* Toma el espacio disponible */
    max-width: 600px;
    margin-left: 70px;
    margin-top: -70px;
}

    .product-content h1[b-n67vq40t4c] {
        font-size: 4rem;
        /* Texto grande */
        font-weight: 550;
        line-height: 1.1;
        margin-bottom: 15px;
        color: #e0e6ed;
        /* Blanco suave */
    }

    .product-content .subtitle[b-n67vq40t4c] {
        font-size: 1.2rem;
        color: #a0aab5;
        margin-bottom: 30px;
        font-weight: 400;
    }

/* Botón Rosa "Acerca de" */
.btn-pink[b-n67vq40t4c] {
    display: inline-block;
    background-color: #e500cd;
    color: #fff;
    padding: 12px 60px;
    border-radius: 8px;
    /* Bordes muy redondos */
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 20px;
    transition: background 0.3s;
}

    .btn-pink:hover[b-n67vq40t4c] {
        background-color: #c200ad;
    }

/* Bloques de descarga */
.downloads-block[b-n67vq40t4c] {
    margin-bottom: 30px;
}

.os-label[b-n67vq40t4c] {
    font-size: 1rem;
    color: #a0aab5;
    margin-bottom: 15px;
}

.store-buttons[b-n67vq40t4c] {
    display: flex;
    gap: 15px;
}

/* Estilo para las imágenes dentro de los botones */
.btn-store img[b-n67vq40t4c] {
    width: 20px;
    /* Ajusta este tamaño según  iconos*/
    height: auto;
    /* Mantiene la proporción */
    margin-right: 10px;
    /* Espacio entre la imagen y el texto */
    object-fit: contain;
    /* Asegura que el logo no se estire feo */
    display: inline-block;
    pointer-events: none;
}


/* Botones de las tiendas (Transparentes con borde) */
.btn-store[b-n67vq40t4c] {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 25px;
    border-radius: 8px;
    /* Bordes ligeramente redondeados */
    font-size: 1rem;
    cursor: pointer;
    gap: 10px;
    transition: all 0.3s;
    min-width: 175px;
    /* Para que tengan el mismo ancho aprox */
    justify-content: center;
}

    .btn-store:hover[b-n67vq40t4c] {
        background: rgba(255, 255, 255, 0.1);
        border-color: #e500cd;
        /* Detalle rosa al pasar el mouse */
    }

    .btn-store .icon[b-n67vq40t4c] {
        font-size: 1.2rem;
    }

/* --- COLUMNA DERECHA (IMAGEN) --- */
.product-image-wrapper[b-n67vq40t4c] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Alinea la imagen a la derecha */
}

    .product-image-wrapper img[b-n67vq40t4c] {
        max-width: 190%;
        /* Se adapta al ancho */
        height: auto;
        margin-top: -10px;
        margin-right: -200px;
        position: relative;
        z-index: -1;
    }

.store-buttons.vertical-stack[b-n67vq40t4c] {
    flex-direction: column;
    /* Esto los pone uno bajo el otro */
    align-items: flex-start;
    /* Los alinea a la izquierda */
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 900px) {
    .product-hero-section[b-n67vq40t4c] {
        background-image: none;
        /* Elimina imagen de fondo */
        align-items: flex-start;
        /* Alinea al inicio para manejar mejor el padding */
        padding-top: 0;
    }

    .product-container[b-n67vq40t4c] {
        flex-direction: column;
        text-align: center;
        padding-top: 0;
        gap: 30px;
    }

    .product-content[b-n67vq40t4c] {
        max-width: 100%;
        margin-left: 0;
        /* Resetea margen negativo */
        margin-top: 0;
        /* Resetea margen negativo */
        margin-bottom: 20px;
        padding-top: 15vh;
        /* Baja el texto */
    }

        .product-content h1[b-n67vq40t4c] {
            font-size: 3rem;
        }

    .store-buttons[b-n67vq40t4c] {
        justify-content: center;
    }

    .product-image-wrapper[b-n67vq40t4c] {
        justify-content: center;
        margin-top: 0;
    }

        .product-image-wrapper img[b-n67vq40t4c] {
            max-width: 140%;
            /* Ajusta ancho de imagen */
            margin-top: 0;
            /* Resetea margen negativo */
            transform: translateX(-90px);
        }
}
/* /Pages/LandinPage/HomePage.razor.rz.scp.css */
/* =========================================
   HOMEPAGE STYLES — SysTime Landing Page
   =========================================
   Bootstrap carga ANTES que este CSS y define:
     h1,h2,...,h6 { font-weight: 500; }
   Por eso usamos !important en font-weight
   para garantizar el grosor correcto siempre.
   ========================================= */

/* -------- SECCIÓN 1: HERO -------- */

.main-background[b-pbwbl0jf6k] {
    background-color: #192432;
    background-image: url('/index.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    min-height: 110vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.homepage-content[b-pbwbl0jf6k] {
    padding-left: 312px;
    color: #fff;
    max-width: 1400px;
    z-index: 2;
    transform: translateY(-100px);
}

@media (max-width: 1400px) {
    .homepage-content[b-pbwbl0jf6k] {
        padding-left: 10vw;
    }
}

/* --- Título principal del hero --- */
.homepage-title[b-pbwbl0jf6k] {
    font-size: 4.5rem;
    font-weight: 550;
    /* Texto blanco: delgado (light) */
    line-height: 1.15;
    margin-bottom: 20px;
    max-width: 720px;
}

/* --- Texto rosado "Sigue tus activos" --- */
.highlight-pink[b-pbwbl0jf6k] {
    color: #e500cd;
    font-size: 4.5rem;
    font-weight: 550;
    /* Texto rosa: negrita (bold) */
}

.text-pink[b-pbwbl0jf6k] {
    color: #e500cd;
}

/* --- Párrafo descriptivo --- */
.homepage-description[b-pbwbl0jf6k] {
    max-width: 580px;
    font-size: 1rem;
    margin-bottom: 32px;
    color: #fff;
}

/* --- Botones del hero --- */
.homepage-buttons[b-pbwbl0jf6k] {
    display: flex;
    gap: 16px;
}

.btn-pink[b-pbwbl0jf6k] {
    background: #e500cd;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-pink:hover[b-pbwbl0jf6k] {
    background: #cb00b6;
}

.btn-outline[b-pbwbl0jf6k] {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.btn-outline:hover[b-pbwbl0jf6k] {
    border-color: #cb00b6;
    color: #cb00b6;
}

@media (max-width: 900px) {
    .main-background[b-pbwbl0jf6k] {
        background-image: none;
    }

    .homepage-content[b-pbwbl0jf6k] {
        padding-top: 17vh;
        transform: translateX(-20px);
    }
}

/*
-------------------------------------
  SECCIÓN 2: ACERCA DE (CORREGIDO)
-------------------------------------
*/

/* 1. El contenedor principal de la sección */
.section-about[b-pbwbl0jf6k] {
    /* --- TUS ESTILOS DE FONDO (ESTÁN PERFECTOS) --- */
    background: linear-gradient(to bottom, #192432 0%, rgba(25, 36, 50, 0) 15%),
        linear-gradient(to top, #192432 0%, rgba(25, 36, 50, 0) 15%),
        url('/fondoHome.png') no-repeat;
    background-position: center bottom;
    background-size: cover;
    /* --- ALTURA Y POSICIÓN (LIMPIADO) --- */
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* Evita que el contenido se salga */
    box-sizing: border-box;
    color: #fff;
    z-index: 1;
    /* --- LA SOLUCIÓN ---
      Usamos flex AQUÍ solo para centrar verticalmente 
      el .about-container dentro de la sección.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 312px;
}

@media (max-width: 1400px) {
    .section-about[b-pbwbl0jf6k] {
        padding: 80px 5%;
    }
}

/* 2. El contenedor que crea las 2 columnas (El div de ADENTRO) */
.about-container[b-pbwbl0jf6k] {
    /* AQUÍ es donde creamos las 2 columnas.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    /* Espacio entre la imagen y el texto */
    /* Le damos un ancho máximo */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    /* Asegura el centrado */
}

/* 3. Columna izquierda (imagen del teléfono) */
.about-image-wrapper[b-pbwbl0jf6k] {
    flex: 1;
    /* La columna toma la mitad del espacio */
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-mockup[b-pbwbl0jf6k] {
    width: 160%;
    max-width: none;
    /* Ajusta el tamaño del teléfono */
    transform: rotateZ(0deg) translateY(90px);
    /* Ligera rotación como en la imagen */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

/* 4. Columna derecha (título y tarjetas) */
.about-content[b-pbwbl0jf6k] {
    flex: 1.5;
    /* La columna de texto es un poco más ancha */
    text-align: right !important;
    /* <-- CAMBIO APLICADO: Alinea todo a la derecha */
}

.about-content h2[b-pbwbl0jf6k] {
    font-size: 3.2rem;
    /* <-- CAMBIO APLICADO: Tamaño de título ajustado */
    font-weight: 600;
    margin-bottom: 40px;
}

.about-content p[b-pbwbl0jf6k] {
    font-size: 1rem;
    /* <-- CAMBIO APLICADO: Tamaño de descripción ajustado */
    color: #d0d0d0;
    /* Un gris claro */
    margin-bottom: 80px;
    margin-left: 180px;
}

/* 5. El grid de 2x2 para las características */
.features-grid[b-pbwbl0jf6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columnas de igual tamaño */
    gap: 20px;
    /* Espacio entre los bloques */
}

/* 6. Los bloques con el efecto "vidrio" */
.feature-item[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease-in-out;
    text-align: right !important;
    /* <-- CAMBIO APLICADO: Alinea texto de tarjeta a la izquierda */
}

.feature-item:hover[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* 7. El círculo blanco del icono */
.feature-icon[b-pbwbl0jf6k] {
    background: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 8. La imagen del icono dentro del círculo */
.feature-icon img[b-pbwbl0jf6k] {
    /* Corregí el error de '..' */
    max-width: 50px;
    /* Tamaño correcto para el círculo de 80px */
    max-height: 50px;
    width: auto;
    height: auto;
}

.feature-item span[b-pbwbl0jf6k] {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
    flex: 1;
}


/* --- Media Query para Móviles --- */
@media (max-width: 900px) {
    .about-container[b-pbwbl0jf6k] {
        flex-direction: column;
        /* Apila las columnas en vertical */
        /* text-align: center; */
        /* <-- CAMBIO APLICADO: Línea eliminada */
    }

    .about-content[b-pbwbl0jf6k] {
        align-items: center;
    }

    .about-content p[b-pbwbl0jf6k] {
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    .features-grid[b-pbwbl0jf6k] {
        grid-template-columns: 1fr;
        /* 1 columna en móviles pequeños */
    }

    .about-content h2[b-pbwbl0jf6k] {
        font-size: 2rem;
    }
}

/*
-------------------------------------
  SECCIÓN 3: ESPACIOS DE TRABAJO
-------------------------------------
*/

/* 1. Contenedor principal de la sección */
.section-workspaces[b-pbwbl0jf6k] {
    background: #192432;
    color: #fff;
    padding: 0px 312px 100px 312px;
    text-align: left;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

@media (max-width: 1400px) {
    .section-workspaces[b-pbwbl0jf6k] {
        padding: 60px 5%;
    }
}

/* 2. Contenedor para centrar el contenido */
.workspaces-container[b-pbwbl0jf6k] {
    max-width: 1400px;
    margin: 0 auto;
}

.section-workspaces h2[b-pbwbl0jf6k] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.workspaces-description[b-pbwbl0jf6k] {
    font-size: 1rem;
    color: #d0d0d0;
    max-width: 750px;
    margin: 0 0 40px 0;
    line-height: 1.6;
}

/* 3. La cuadrícula para las 3 tarjetas */
.workspaces-grid[b-pbwbl0jf6k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: left;
}

/* 4. Estilo de cada tarjeta (AHORA ES FLEX) */
.workspace-card[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 25px;
    transition: all 0.3s ease;
}

.workspace-card:hover[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 0, 205, 0.5);
    transform: translateY(-5px);
}

/* 5. Contenedor del ícono */
.workspace-icon[b-pbwbl0jf6k] {
    flex-shrink: 0;
    /* Evita que el ícono se encoja */
}

/* 6. Estilo del ícono */
.workspace-icon svg[b-pbwbl0jf6k] {
    width: 40px;
    height: 40px;
    color: #e500cd;
}

.workspace-icon img[b-pbwbl0jf6k] {
    width: 40px;
    height: 40px;
    filter: invert(27%) sepia(99%) saturate(5439%) hue-rotate(293deg) brightness(94%) contrast(100%);
}

/* 7. Contenedor del texto */
.workspace-content[b-pbwbl0jf6k] {
    flex: 1;
    /* Ocupa el resto del espacio */
}

/* 8. Título de la tarjeta */
.workspace-card h3[b-pbwbl0jf6k] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    /* <-- CORREGIDO (devuelta) */
    color: #fff;
}

/* 9. Subtítulo de la tarjeta */
.workspace-card .card-subtitle[b-pbwbl0jf6k] {
    font-size: 0.8rem;
    color: #c0c0c0;
    margin-bottom: 15px;
    font-weight: 500;
}

/* 10. Párrafo principal de la tarjeta */
.workspace-card p[b-pbwbl0jf6k] {
    font-size: 0.8rem;
    color: #d0d0d0;
    line-height: 1.6;
}


/* --- Media Query para Móviles --- */
@media (max-width: 900px) {
    .workspaces-grid[b-pbwbl0jf6k] {
        grid-template-columns: 1fr;
        /* Apila las tarjetas en 1 columna */
    }

    .section-workspaces h2[b-pbwbl0jf6k] {
        font-size: 2.5rem;
    }
}

/* -------- NUEVA SECCIÓN: SEÑALES DE CONFIANZA -------- */

.trust-signals[b-pbwbl0jf6k] {
    margin-top: 60px;
    opacity: 0.8;
}

.trust-signals p[b-pbwbl0jf6k] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #d0d0d0;
}

.trust-logos[b-pbwbl0jf6k] {
    display: flex;
    gap: 40px;
    align-items: center;
}

.trust-logo[b-pbwbl0jf6k] {
    height: 30px;
    filter: grayscale(1) brightness(2);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.trust-logo:hover[b-pbwbl0jf6k] {
    opacity: 1;
}

/* -------- NUEVA SECCIÓN: INDUSTRIAS -------- */

.section-industries[b-pbwbl0jf6k] {
    background: #192432;
    padding: 60px 312px;
    color: #fff;
}

@media (max-width: 1400px) {
    .section-industries[b-pbwbl0jf6k] {
        padding: 60px 10vw;
    }
}

.industries-container h2[b-pbwbl0jf6k] {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 80px;
    text-align: center;
}

.highlight-underline[b-pbwbl0jf6k] {
    position: relative;
    display: inline-block;
}

.highlight-underline[b-pbwbl0jf6k]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    /* Ajuste para separar la línea del texto */
    width: 100%;
    height: 5px;
    /* Grosor de la línea */
    background-color: #e500cd;
    /* Color rosa */
}

.industries-grid[b-pbwbl0jf6k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.industry-card[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px; /* Reducido un poco para acomodar el ancho */
    border-radius: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

.industry-card:hover[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.05);
    border-color: #e500cd;
    transform: translateY(-5px);
}

.industry-card.active[b-pbwbl0jf6k] {
    border-color: #e500cd;
    background: rgba(229, 0, 205, 0.05);
    box-shadow: 0 10px 30px rgba(229, 0, 205, 0.1);
}

.industry-icon[b-pbwbl0jf6k] {
    width: 50px; /* Un poco más pequeño para diseño horizontal */
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.industry-text[b-pbwbl0jf6k] {
    flex: 1;
}

.industry-icon img[b-pbwbl0jf6k],
.industry-icon svg[b-pbwbl0jf6k] {
    width: 32px;
    height: 32px;
    color: #fff;
}

.industry-icon img[b-pbwbl0jf6k] {
    filter: invert(1);
}

.industry-card h3[b-pbwbl0jf6k] {
    font-size: 1.3rem; /* Ajustado para el nuevo layout */
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
}

.industry-card p[b-pbwbl0jf6k] {
    font-size: 1rem;
    color: #b0b0b0;
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .industries-grid[b-pbwbl0jf6k] {
        grid-template-columns: 1fr;
    }

    .homepage-title[b-pbwbl0jf6k] {
        font-size: 3rem;
    }

    .highlight-pink[b-pbwbl0jf6k] {
        font-size: 3rem;
    }

    .trust-logos[b-pbwbl0jf6k] {
        gap: 20px;
        flex-wrap: wrap;
    }
}
/* /Pages/LandinPage/Pricing.razor.rz.scp.css */
/* Estilos movidos a PricingSection.razor.css */
/* /Pages/LandinPage/PricingSection.razor.rz.scp.css */
/* --- SECCIÓN PRECIOS: MODO STANDALONE (página /pricing) --- */
.pricing-section.standalone[b-v6upsbcdzf] {
    background: radial-gradient(circle at bottom right, #4a1a55 0%, #0f172a 60%);
    min-height: 100vh;
    padding: 80px 5%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- SECCIÓN PRECIOS: MODO EMBEBIDO (en HomePage) --- */
.pricing-section.embedded[b-v6upsbcdzf] {
    background: linear-gradient(to bottom, #192432 0%, rgba(25, 36, 50, 0) 25%), radial-gradient(circle at bottom right, #3a1245 0%, #0c1221 60%);
    padding: 80px 312px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1400px) {
    .pricing-section.embedded[b-v6upsbcdzf] {
        padding: 80px 5%;
    }
}

/* Encabezado */
.pricing-header[b-v6upsbcdzf] {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
}

.pricing-header h1[b-v6upsbcdzf] {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #e0e0e0;
}

.pricing-header h2[b-v6upsbcdzf] {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #e0e0e0;
}

.pricing-header p[b-v6upsbcdzf] {
    font-size: 1rem;
    color: #a0aab5;
    line-height: 1.6;
}

/* Grid de Tarjetas */
.pricing-grid[b-v6upsbcdzf] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

/* --- ESTILOS GENERALES DE LA TARJETA --- */
.pricing-card[b-v6upsbcdzf] {
    flex: 1;
    min-width: 300px;
    max-width: 380px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover[b-v6upsbcdzf] {
    transform: translateY(-10px);
}

.pricing-card .icon[b-v6upsbcdzf] {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing-icon[b-v6upsbcdzf] {
    width: 64px;
    height: 64px;
    color: #e500cd;
    filter: drop-shadow(0 0 5px rgba(229, 0, 205, 0.5));
}

/* Títulos y Textos */
.pricing-card h2[b-v6upsbcdzf] {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.card-description[b-v6upsbcdzf] {
    font-size: 0.9rem;
    color: #d1d5db;
    margin-bottom: 20px;
    font-style: italic;
    min-height: 40px;
}

/* Lista de características */
.features[b-v6upsbcdzf] {
    text-align: left;
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #e5e7eb;
}

.features strong[b-v6upsbcdzf] {
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.features ul[b-v6upsbcdzf] {
    list-style: none;
    padding: 0;
}

.features li[b-v6upsbcdzf] {
    margin-bottom: 8px;
    line-height: 1.4;
}

.features li[b-v6upsbcdzf]::before {
    content: "✓ ";
    color: #e500cd;
    font-weight: 700;
}

/* Botón de Precio */
.btn-price[b-v6upsbcdzf] {
    background-color: #d930b5;
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.btn-price:hover[b-v6upsbcdzf] {
    background-color: #b02090;
}

/* CTA "Ver todos los planes" — solo en modo embebido */
.pricing-cta[b-v6upsbcdzf] {
    margin-top: 50px;
    text-align: center;
}

.btn-pricing-detail[b-v6upsbcdzf] {
    background: transparent;
    border: 2px solid #e500cd;
    color: #e500cd;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.btn-pricing-detail:hover[b-v6upsbcdzf] {
    background: #e500cd;
    color: #fff;
}

/* --- COLORES ESPECÍFICOS DE CADA TARJETA --- */

/* 1. Plan Básico */
.pricing-card.basic[b-v6upsbcdzf] {
    background-color: #17254072;
    border: 1px solid #2a3b5e;
}

.pricing-card.basic:hover[b-v6upsbcdzf] {
    box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
    border-color: #e500cd;
}

/* 2. Plan Pro */
.pricing-card.pro[b-v6upsbcdzf] {
    background-color: #2d1b4e72;
    border: 1px solid #4a2b82;
}

.pricing-card.pro:hover[b-v6upsbcdzf] {
    box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
    border-color: #e500cd;
}

/* 3. Plan Premium */
.pricing-card.premium[b-v6upsbcdzf] {
    background-color: #1f1f1f72;
    border: 1px solid #333;
}

.pricing-card.premium:hover[b-v6upsbcdzf] {
    box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
    border-color: #e500cd;
}

/* Responsive */
@media (max-width: 900px) {
    .pricing-grid[b-v6upsbcdzf] {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card[b-v6upsbcdzf] {
        width: 100%;
        max-width: 100%;
    }

    .pricing-header h1[b-v6upsbcdzf] {
        font-size: 2.5rem;
    }

    .pricing-header h2[b-v6upsbcdzf] {
        font-size: 2rem;
    }
}
/* /Pages/Login/Login.razor.rz.scp.css */
/* --- TUS ESTILOS ORIGINALES (Mantenidos igual) --- */
.login-left[b-lwdzw028cn] {
    background-color: #1E2D41;
}

.input-dark[b-lwdzw028cn] {
    background-color: rgba(25, 36, 49, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    transition: none;
}

    .input-dark:focus[b-lwdzw028cn] {
        background-color: #192432;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        outline: none;
    }

.login-right[b-lwdzw028cn] {
    background: url('/map_blur.svg') center/cover no-repeat;
    position: relative;
}

    .login-right[b-lwdzw028cn]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(1px);
        z-index: 0;
    }

    .login-right > *[b-lwdzw028cn] {
        position: relative;
        z-index: 1;
    }

.text-pink[b-lwdzw028cn] {
    color: #FE00E4;
}

.btn-pink[b-lwdzw028cn] {
    width: 150px;
    background-color: #fe00e4;
    color: #fff;
    border: none;
    transition: 0.5s;
}

    .btn-pink:hover[b-lwdzw028cn] {
        background-color: #CB00B6;
    }

.btn-white[b-lwdzw028cn] {
    width: 150px;
    background-color: white;
    transition: 0.5s;
}

    .btn-white:hover[b-lwdzw028cn] {
        background-color: #FE00E4;
        color: #fff;
    }

.social-icons a img[b-lwdzw028cn] {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icons a:hover img[b-lwdzw028cn] {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.2)) brightness(1.2);
}

.env-footer .env-link[b-lwdzw028cn] {
    background: transparent;
    border: none;
    color: #fe00e4;
    text-decoration: underline;
    font-weight: 600;
    padding: 0;
}

.env-footer .env-link:hover[b-lwdzw028cn] {
    color: #CB00B6;
}

.env-chips .badge[b-lwdzw028cn] {
    font-weight: 600;
}

.env-modal-backdrop[b-lwdzw028cn] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.env-modal[b-lwdzw028cn] {
    width: min(560px, 90vw);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.env-option[b-lwdzw028cn] {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.env-option:last-child[b-lwdzw028cn] {
    border-bottom: none;
}

.env-connection[b-lwdzw028cn] {
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ======================================================== */
/* === ZONA DE PROTECCIàN DE ESCRITORIO Y AJUSTE MàVIL === */
/* ======================================================== */


@media (min-width: 992px) {
    .login-left[b-lwdzw028cn] {
        /* Esto restaura el 'rounded-start-3' original pero solo en PC */
        border-top-left-radius: var(--bs-border-radius-lg) !important;
        border-bottom-left-radius: var(--bs-border-radius-lg) !important;
    }

    /* Si tu dise¤o original ten¡a la parte derecha cuadrada, esto lo mantiene as¡ */
    .login-right[b-lwdzw028cn] {
        border-radius: 0 !important;
    }
}

/* 2. REGLAS PARA MàVIL/TABLET (Responsive) */
/* Se activan solo si la pantalla es menor a 991px */
@media (max-width: 991px) {

    /* Parche para permitir scroll en m¢viles muy peque¤os aunque uses vh-100 */
    .h-auto-mobile[b-lwdzw028cn] {
        height: auto !important;
        min-height: 100vh;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .login-container[b-lwdzw028cn] {
        width: 95% !important; /* Casi todo el ancho */
        margin-top: 4rem !important;
    }

    .login-left[b-lwdzw028cn] {
        /* En m¢vil redondeamos arriba */
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 2rem !important;
    }

    .login-right[b-lwdzw028cn] {
        /* En m¢vil redondeamos abajo */
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding: 3rem 1rem !important;
    }
}

/* Clear Text Toggle Button inside Inputs */
.btn-clear-toggle[b-lwdzw028cn] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    z-index: 5;
    transition: color 0.3s, transform 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-toggle:hover[b-lwdzw028cn] {
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Password Toggle Eye Button */
.btn-password-toggle[b-lwdzw028cn] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
    z-index: 5;
}

.btn-password-toggle:hover[b-lwdzw028cn] {
    color: #FE00E4; /* Rosadito as requested */
}
/* /Pages/Login/ResetPassword.razor.rz.scp.css */
/* --- TUS ESTILOS ORIGINALES (Mantenidos igual) --- */
.login-left[b-7226v9i5hc] {
    background-color: #1E2D41;
}

.input-dark[b-7226v9i5hc] {
    background-color: rgba(25, 36, 49, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    transition: none;
}

    .input-dark:focus[b-7226v9i5hc] {
        background-color: #192432;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        outline: none;
    }

.login-right[b-7226v9i5hc] {
    background: url('/map_blur.svg') center/cover no-repeat;
    position: relative;
}

    .login-right[b-7226v9i5hc]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(1px);
        z-index: 0;
    }

    .login-right > *[b-7226v9i5hc] {
        position: relative;
        z-index: 1;
    }

.text-pink[b-7226v9i5hc] {
    color: #FE00E4;
}

.btn-pink[b-7226v9i5hc] {
    width: 150px;
    background-color: #fe00e4;
    color: #fff;
    border: none;
    transition: 0.5s;
}

    .btn-pink:hover[b-7226v9i5hc] {
        background-color: #CB00B6;
    }

.btn-white[b-7226v9i5hc] {
    width: 150px;
    background-color: white;
    transition: 0.5s;
}

    .btn-white:hover[b-7226v9i5hc] {
        background-color: #FE00E4;
        color: #fff;
    }

.social-icons a img[b-7226v9i5hc] {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icons a:hover img[b-7226v9i5hc] {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.2)) brightness(1.2);
}

.env-footer .env-link[b-7226v9i5hc] {
    background: transparent;
    border: none;
    color: #fe00e4;
    text-decoration: underline;
    font-weight: 600;
    padding: 0;
}

.env-footer .env-link:hover[b-7226v9i5hc] {
    color: #CB00B6;
}

.env-chips .badge[b-7226v9i5hc] {
    font-weight: 600;
}

.env-modal-backdrop[b-7226v9i5hc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.env-modal[b-7226v9i5hc] {
    width: min(560px, 90vw);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.env-option[b-7226v9i5hc] {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.env-option:last-child[b-7226v9i5hc] {
    border-bottom: none;
}

.env-connection[b-7226v9i5hc] {
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ======================================================== */
/* === ZONA DE PROTECCIàN DE ESCRITORIO Y AJUSTE MàVIL === */
/* ======================================================== */


@media (min-width: 992px) {
    .login-left[b-7226v9i5hc] {
        /* Esto restaura el 'rounded-start-3' original pero solo en PC */
        border-top-left-radius: var(--bs-border-radius-lg) !important;
        border-bottom-left-radius: var(--bs-border-radius-lg) !important;
    }

    /* Si tu dise¤o original ten¡a la parte derecha cuadrada, esto lo mantiene as¡ */
    .login-right[b-7226v9i5hc] {
        border-radius: 0 !important;
    }
}

/* 2. REGLAS PARA MàVIL/TABLET (Responsive) */
/* Se activan solo si la pantalla es menor a 991px */
@media (max-width: 991px) {

    /* Parche para permitir scroll en m¢viles muy peque¤os aunque uses vh-100 */
    .h-auto-mobile[b-7226v9i5hc] {
        height: auto !important;
        min-height: 100vh;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .login-container[b-7226v9i5hc] {
        width: 95% !important; /* Casi todo el ancho */
        margin-top: 4rem !important;
    }

    .login-left[b-7226v9i5hc] {
        /* En m¢vil redondeamos arriba */
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 2rem !important;
    }

    .login-right[b-7226v9i5hc] {
        /* En m¢vil redondeamos abajo */
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding: 3rem 1rem !important;
    }
}

/* Clear Text Toggle Button inside Inputs */
.btn-clear-toggle[b-7226v9i5hc] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    z-index: 5;
    transition: color 0.3s, transform 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-toggle:hover[b-7226v9i5hc] {
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Password Toggle Eye Button */
.btn-password-toggle[b-7226v9i5hc] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
    z-index: 5;
}

.btn-password-toggle:hover[b-7226v9i5hc] {
    color: #FE00E4; /* Rosadito as requested */
}
/* /Pages/Platform/PlatformConfigPage.razor.rz.scp.css */
/* Ruta a pantalla completa, sin el chrome de /home. La sección de configuración se encadena a este
   flex igual que hacía dentro del panel dinámico: sin la cadena completa de alturas la tabla no sabe
   cuánto puede crecer y aparece la franja muerta que ya costó una ronda de ajustes. */
.pcp-shell[b-xf1vh2rk08] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #101a2b;
    color: #cbd5e1;
    font-family: 'Segoe UI', sans-serif;
}

.pcp-bar[b-xf1vh2rk08] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.pcp-back[b-xf1vh2rk08] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.pcp-back:hover[b-xf1vh2rk08],
.pcp-back:focus-visible[b-xf1vh2rk08] {
    background: rgba(148, 163, 184, 0.22);
    color: #f1f5f9;
}

.pcp-title[b-xf1vh2rk08] {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
}

/* El hueco que queda es todo para la sección: es ella la que reparte pestañas, avisos y tabla. */
.pcp-body[b-xf1vh2rk08] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #1c2738;
    margin: 14px 18px 18px;
    border-radius: 18px;
    overflow: hidden;
}

.pcp-state[b-xf1vh2rk08] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 13px;
}

.pcp-primary[b-xf1vh2rk08] {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: #d33bb2;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pcp-primary:hover[b-xf1vh2rk08] {
    background: #b92f9b;
}
/* /Pages/Register/Register.razor.rz.scp.css */
/* === ESTILOS BASE === */
.login-right[b-ir055ggt9o] {
    background-color: #1E2D41;
    /* Quitamos border-radius fijo para manejarlo en responsive */
}

/* Estilo unificado para inputs (Igual que en Login) */
.input-dark[b-ir055ggt9o] {
    background-color: rgba(25, 36, 49, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 0.5rem;
}

    .input-dark:focus[b-ir055ggt9o] {
        background-color: #192432 !important;
        border-color: #e43fad !important;
        box-shadow: none !important;
        outline: none;
    }

/* Arreglo para el select y sus opciones */
select.input-dark option[b-ir055ggt9o] {
    background-color: #1E2D41;
    color: white;
}

.btn-pink[b-ir055ggt9o] {
    background-color: #e43fad;
    color: #fff;
    border: none;
    transition: background 0.3s;
}

    .btn-pink:hover[b-ir055ggt9o] {
        background-color: #ff5ecb;
        color: white;
    }

.login-left[b-ir055ggt9o] {
    background: url('/map_blur.svg') center/cover no-repeat;
    position: relative;
    color: white;
}

    .login-left[b-ir055ggt9o]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(1px);
        z-index: 0;
    }

    .login-left > *[b-ir055ggt9o] {
        position: relative;
        z-index: 1;
    }

.text-pink[b-ir055ggt9o] {
    color: #FE00E4;
}

.btn-white[b-ir055ggt9o] {
    background-color: white;
    color: #333;
    transition: 0.5s;
    border: none;
}

    .btn-white:hover[b-ir055ggt9o] {
        background-color: #FE00E4;
        color: #fff;
    }

.social-icons a img[b-ir055ggt9o] {
    transition: transform 0.2s ease;
}

.social-icons a:hover img[b-ir055ggt9o] {
    transform: scale(1.15);
}


/* === RESPONSIVE (Lógica unificada) === */

/* ESCRITORIO (Pantallas grandes > 992px) */
@media (min-width: 992px) {
    .login-container[b-ir055ggt9o] {
        max-width: 1100px; /* Un poco más ancho para el registro */
    }

    /* Panel Izquierdo (Mapa): Bordes redondeados a la izquierda */
    .login-left[b-ir055ggt9o] {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

    /* Panel Derecho (Formulario): Bordes redondeados a la derecha */
    .login-right[b-ir055ggt9o] {
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    /* Anchos específicos para distribuir mejor el espacio */
    .w-lg-40[b-ir055ggt9o] {
        width: 40% !important;
    }

    .w-lg-60[b-ir055ggt9o] {
        width: 60% !important;
    }
}

/* MÓVIL Y TABLET (Pantallas < 991px) */
@media (max-width: 991px) {
    .login-container[b-ir055ggt9o] {
        width: 95% !important;
        /* Margen superior grande para evitar choque con el navbar */
        margin-top: 6rem !important;
        margin-bottom: 2rem !important;
    }

    /* Panel Izquierdo (Mapa): Va arriba, bordes redondeados arriba */
    .login-left[b-ir055ggt9o] {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 3rem 1rem !important;
    }

    /* Panel Derecho (Formulario): Va abajo, bordes redondeados abajo */
    .login-right[b-ir055ggt9o] {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding: 2rem 1rem !important;
    }
}

/* Custom Close Button (Same as Login) */
.btn-close-custom[b-ir055ggt9o] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    z-index: 10;
    transition: color 0.3s, transform 0.2s;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-custom:hover[b-ir055ggt9o] {
    color: #fff;
    transform: scale(1.1);
}

/* Password Toggle Eye Button (Same as Login) */
.btn-password-toggle[b-ir055ggt9o] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
    z-index: 5;
}

.btn-password-toggle:hover[b-ir055ggt9o] {
    color: #FE00E4; /* Rosadito as requested */
}
/* /Pages/Settings/Notifications/Components/NotificationCard.razor.rz.scp.css */
.st-notif-card[b-p82sjwzhxo] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.st-notif-card:hover[b-p82sjwzhxo] {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.12);
}

.st-notif-card.mandatory[b-p82sjwzhxo] {
    border-left: 4px solid #f59e0b;
}

.st-card-header[b-p82sjwzhxo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.st-event-info[b-p82sjwzhxo] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-event-icon[b-p82sjwzhxo] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.st-event-name[b-p82sjwzhxo] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
}

.st-event-id[b-p82sjwzhxo] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.st-badge-mandatory[b-p82sjwzhxo] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.st-switch[b-p82sjwzhxo] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.st-switch input[b-p82sjwzhxo] {
    opacity: 0;
    width: 0;
    height: 0;
}

.st-slider[b-p82sjwzhxo] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #334155;
    transition: .3s;
    border-radius: 26px;
}

.st-slider[b-p82sjwzhxo]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .st-slider[b-p82sjwzhxo] {
    background-color: #3b82f6;
}

input:checked + .st-slider[b-p82sjwzhxo]:before {
    transform: translateX(22px);
}

.st-card-body[b-p82sjwzhxo] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: center;
}

.st-option-group[b-p82sjwzhxo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-option-label[b-p82sjwzhxo] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #cbd5e1;
}

.st-select[b-p82sjwzhxo] {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    outline: none;
}

.st-btn-test[b-p82sjwzhxo] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease;
}

.st-btn-test:hover:not(:disabled)[b-p82sjwzhxo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.st-btn-test:disabled[b-p82sjwzhxo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.st-spinner[b-p82sjwzhxo] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p82sjwzhxo 0.8s linear infinite;
}

@keyframes spin-b-p82sjwzhxo {
    to { transform: rotate(360deg); }
}
/* /Pages/Settings/Notifications/Components/TenantSettingsTab.razor.rz.scp.css */
.st-tab-content[b-v7fnsihbf0] {
    animation: fadeIn 0.3s ease-in-out;
}

.st-tab-header-description[b-v7fnsihbf0] {
    margin-bottom: 24px;
}

.st-tab-header-description h3[b-v7fnsihbf0] {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    color: #f8fafc;
}

.st-tab-header-description p[b-v7fnsihbf0] {
    margin: 0;
    font-size: 0.9rem;
    color: #94a3b8;
}

.st-tenant-list[b-v7fnsihbf0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-tenant-card[b-v7fnsihbf0] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.st-tenant-info[b-v7fnsihbf0] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-tenant-icon[b-v7fnsihbf0] {
    font-size: 1.5rem;
}

.st-tenant-title[b-v7fnsihbf0] {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
}

.st-tenant-sub[b-v7fnsihbf0] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.st-checkbox-label[b-v7fnsihbf0] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #cbd5e1;
}

.st-checkbox-label input[type="checkbox"][b-v7fnsihbf0] {
    width: 18px;
    height: 18px;
    accent-color: #f59e0b;
    cursor: pointer;
}

.st-empty-state[b-v7fnsihbf0] {
    text-align: center;
    padding: 48px 24px;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 16px;
    color: #94a3b8;
}

.st-empty-state span[b-v7fnsihbf0] {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}
/* /Pages/Settings/Notifications/Components/UserPreferencesTab.razor.rz.scp.css */
.st-tab-content[b-opxksus9ns] {
    animation: fadeIn-b-opxksus9ns 0.3s ease-in-out;
}

.st-tab-header-description[b-opxksus9ns] {
    margin-bottom: 24px;
}

.st-tab-header-description h3[b-opxksus9ns] {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    color: #f8fafc;
}

.st-tab-header-description p[b-opxksus9ns] {
    margin: 0;
    font-size: 0.9rem;
    color: #94a3b8;
}

.st-cards-list[b-opxksus9ns] {
    display: flex;
    flex-direction: column;
}

.st-skeleton-container[b-opxksus9ns] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-skeleton-card[b-opxksus9ns] {
    height: 110px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: skeletonWave-b-opxksus9ns 1.5s infinite;
    border-radius: 14px;
}

@keyframes skeletonWave-b-opxksus9ns {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn-b-opxksus9ns {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.st-empty-state[b-opxksus9ns] {
    text-align: center;
    padding: 48px 24px;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 16px;
    color: #94a3b8;
}

.st-empty-state span[b-opxksus9ns] {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}
/* /Pages/Settings/Notifications/NotificationSettingsPage.razor.rz.scp.css */
.st-settings-page[b-xbslvtptif] {
    padding: 32px;
    max-width: 1100px;
    margin: 0 auto;
    color: #f8fafc;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.st-header[b-xbslvtptif] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.st-page-title[b-xbslvtptif] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #ffffff;
}

.st-page-subtitle[b-xbslvtptif] {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
}

.st-status-badge[b-xbslvtptif] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

.st-status-dot[b-xbslvtptif] {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.st-toast-banner[b-xbslvtptif] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideDown-b-xbslvtptif 0.25s ease-out;
}

@keyframes slideDown-b-xbslvtptif {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.st-tabs-nav[b-xbslvtptif] {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 28px;
}

.st-tab-btn[b-xbslvtptif] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.st-tab-btn:hover[b-xbslvtptif] {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.04);
}

.st-tab-btn.active[b-xbslvtptif] {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.st-page-body[b-xbslvtptif] {
    margin-top: 12px;
}
/* /Pages/SysColor/Catalogs/ContainersPanel.razor.rz.scp.css */
.cp-panel[b-735jldw4j0] {
    max-width: 1100px;
}

.cp-head[b-735jldw4j0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.cp-title[b-735jldw4j0] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #1d2530;
}

.cp-sub[b-735jldw4j0] {
    margin: 0;
    font-size: 13px;
    color: #647082;
    max-width: 60ch;
}

.cp-toast[b-735jldw4j0] {
    background: #e7f1ec;
    color: #2e6b52;
    border: 1px solid #bcd9cc;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

.cp-toast.error[b-735jldw4j0] {
    background: #f7e7e9;
    color: #9b2c3a;
    border-color: #e4bcc2;
}

.cp-grid[b-735jldw4j0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.cp-table-wrap[b-735jldw4j0] {
    background: #fff;
    border: 1px solid #e2ded4;
    border-radius: 10px;
    overflow-x: auto;
}

.cp-table[b-735jldw4j0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cp-table th[b-735jldw4j0] {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b95a6;
    padding: 10px 12px;
    border-bottom: 1px solid #e2ded4;
    background: #faf8f3;
}

.cp-table td[b-735jldw4j0] {
    padding: 9px 12px;
    border-bottom: 1px solid #efece4;
    vertical-align: middle;
}

.cp-table tbody tr[b-735jldw4j0] {
    cursor: pointer;
}

.cp-table tbody tr:hover[b-735jldw4j0] {
    background: #faf6ef;
}

.cp-table tbody tr.selected[b-735jldw4j0] {
    background: #fbeef7;
}

.cp-table .num[b-735jldw4j0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cp-table .mono[b-735jldw4j0] {
    font-family: Consolas, monospace;
    font-size: 12.5px;
}

.cp-thumb[b-735jldw4j0] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    display: inline-block;
}

.cp-thumb-empty[b-735jldw4j0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0ede5;
    color: #b3aca0;
    font-size: 14px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
}

.cp-badge[b-735jldw4j0] {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
}

.cp-badge.on[b-735jldw4j0] {
    background: #e7f1ec;
    color: #2e6b52;
}

.cp-badge.off[b-735jldw4j0] {
    background: #f0ede5;
    color: #8b95a6;
}

.cp-link[b-735jldw4j0] {
    background: none;
    border: none;
    color: #0e4c63;
    font-size: 12.5px;
    cursor: pointer;
    padding: 2px 4px;
}

.cp-link.danger[b-735jldw4j0] {
    color: #9b2c3a;
}

.cp-form[b-735jldw4j0] {
    background: #fff;
    border: 1px solid #e2ded4;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-form-title[b-735jldw4j0] {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1d2530;
}

.cp-form label[b-735jldw4j0] {
    font-size: 11.5px;
    font-weight: 600;
    color: #647082;
    margin-top: 6px;
}

.cp-form input[type="text"][b-735jldw4j0],
.cp-form input:not([type])[b-735jldw4j0],
.cp-form input[type="number"][b-735jldw4j0] {
    border: 1px solid #d8d3c7;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13.5px;
    background: #fdfcf9;
}

.cp-check[b-735jldw4j0] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #1d2530;
    margin-top: 8px;
}

.cp-photo[b-735jldw4j0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-photo-preview[b-735jldw4j0] {
    width: 100%;
    max-height: 130px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2ded4;
}

.cp-actions[b-735jldw4j0] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cp-btn[b-735jldw4j0] {
    border: 1px solid #d8d3c7;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

.cp-btn.primary[b-735jldw4j0] {
    background: #d33bb2;
    border-color: #d33bb2;
    color: #fff;
    font-weight: 600;
}

.cp-btn.primary:disabled[b-735jldw4j0] {
    opacity: .6;
    cursor: default;
}

.cp-btn.danger[b-735jldw4j0] {
    background: #9b2c3a;
    border-color: #9b2c3a;
    color: #fff;
}

.cp-empty[b-735jldw4j0] {
    padding: 34px;
    text-align: center;
    color: #8b95a6;
    font-size: 13.5px;
}

.cp-confirm[b-735jldw4j0] {
    margin-top: 14px;
    background: #fff;
    border: 1px solid #e4bcc2;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
}
/* /Pages/SysColor/SysColorPage.razor.rz.scp.css */
.sc-shell[b-ai8d2ojlzv] {
    display: flex;
    min-height: 100vh;
    background: #f6f4ef;
    color: #1d2530;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.sc-nav[b-ai8d2ojlzv] {
    width: 232px;
    flex-shrink: 0;
    background: #101725;
    color: #e8ebf0;
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    gap: 4px;
}

.sc-back[b-ai8d2ojlzv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 0 0 14px 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    font-size: 12px;
    color: #93a1b5;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.sc-back:hover[b-ai8d2ojlzv],
.sc-back:focus-visible[b-ai8d2ojlzv] {
    color: #e8ebf0;
    background: rgba(255, 255, 255, .07);
}

.sc-brand[b-ai8d2ojlzv] {
    display: flex;
    align-items: center;
    padding: 6px 10px 18px;
}

/* El logotipo de SysColor: caja alta, peso fuerte y tracking abierto, como en la marca del taller.
   Va sin la palabra CONNECT.

   Es una reconstrucción con tipografía del sistema, no el logotipo real: la marca usa una grotesca
   geométrica que no está en Windows, y traer una fuente externa por dos palabras no compensa. Si el
   archivo del logo entra en wwwroot, esto se reemplaza por la imagen y queda exacto.

   El azul de la marca no se usa aquí a propósito: sobre el fondo #101725 de la consola no tendría
   contraste suficiente para leerse. */
.sc-brand-name[b-ai8d2ojlzv] {
    font-family: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.1;
    color: #f2f5f9;
}

.sc-brand-sub[b-ai8d2ojlzv] {
    font-size: 11px;
    color: #93a1b5;

    /* Un pelo de tracking para que cuelgue del logotipo en vez de flotar suelto debajo. */
    letter-spacing: .03em;
    margin-top: 2px;
}

.sc-group[b-ai8d2ojlzv] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #7c8aa0;
    padding: 14px 10px 6px;
}

.sc-item[b-ai8d2ojlzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #cdd6e2;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

.sc-item:hover:not([aria-disabled="true"])[b-ai8d2ojlzv] {
    background: rgba(255, 255, 255, .06);
}

.sc-item.active[b-ai8d2ojlzv] {
    background: #d33bb2;
    color: #fff;
    font-weight: 600;
}

.sc-item.permission-disabled[b-ai8d2ojlzv],
.sc-item[aria-disabled="true"][b-ai8d2ojlzv] {
    color: #5d6b80;
    cursor: help;
    filter: grayscale(1);
    opacity: .48;
}

.sc-item.permission-disabled.active[b-ai8d2ojlzv],
.sc-item[aria-disabled="true"].active[b-ai8d2ojlzv],
.sc-item.permission-disabled:hover[b-ai8d2ojlzv],
.sc-item[aria-disabled="true"]:hover[b-ai8d2ojlzv] {
    background: transparent;
    box-shadow: none;
    color: #5d6b80;
    transform: none;
}

.sc-item.permission-disabled:focus-visible[b-ai8d2ojlzv],
.sc-item[aria-disabled="true"]:focus-visible[b-ai8d2ojlzv],
.sc-content[b-ai8d2ojlzv]  .permission-disabled:focus-visible {
    outline: 2px solid #f2c94c;
    outline-offset: 2px;
}

.sc-content[b-ai8d2ojlzv]  .permission-disabled {
    cursor: help;
    filter: grayscale(1);
    opacity: .48;
}

.sc-content[b-ai8d2ojlzv]  .permission-disabled:hover {
    box-shadow: none;
    transform: none;
}

.sc-soon[b-ai8d2ojlzv] {
    font-size: 10px;
    border: 1px solid #3a4557;
    border-radius: 999px;
    padding: 1px 7px;
    color: #7c8aa0;
}

.sc-footnote[b-ai8d2ojlzv] {
    margin-top: auto;
    font-size: 11px;
    color: #7c8aa0;
    padding: 12px 10px 0;
    border-top: 1px solid #232d3f;
}

.sc-content[b-ai8d2ojlzv] {
    flex: 1;
    padding: 26px 30px;
    overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sc-item[b-ai8d2ojlzv],
    .sc-content[b-ai8d2ojlzv]  .permission-disabled {
        transition: none !important;
    }
}

/* ── Estilos compartidos por los paneles hijos (F2) ── */

.sc-content[b-ai8d2ojlzv]  .sct-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.sc-content[b-ai8d2ojlzv]  .sct-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #1d2530;
}

.sc-content[b-ai8d2ojlzv]  .sct-sub {
    margin: 0;
    font-size: 13px;
    color: #647082;
    max-width: 68ch;
}

.sc-content[b-ai8d2ojlzv]  .sct-toast {
    background: #e7f1ec;
    color: #2e6b52;
    border: 1px solid #bcd9cc;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

.sc-content[b-ai8d2ojlzv]  .sct-toast.error {
    background: #f7e7e9;
    color: #9b2c3a;
    border-color: #e4bcc2;
}

.sc-content[b-ai8d2ojlzv]  .sct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.sc-content[b-ai8d2ojlzv]  .sct-table-wrap {
    background: #fff;
    border: 1px solid #e2ded4;
    border-radius: 10px;
    overflow-x: auto;
}

.sc-content[b-ai8d2ojlzv]  .sct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sc-content[b-ai8d2ojlzv]  .sct-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b95a6;
    padding: 10px 12px;
    border-bottom: 1px solid #e2ded4;
    background: #faf8f3;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #efece4;
    vertical-align: middle;
}

.sc-content[b-ai8d2ojlzv]  .sct-table tbody tr:hover {
    background: #faf6ef;
}

.sc-content[b-ai8d2ojlzv]  .sct-table tbody tr.selected {
    background: #fbeef7;
}

.sc-content[b-ai8d2ojlzv]  .sct-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-table .mono {
    font-family: Consolas, monospace;
    font-size: 12.5px;
}

.sc-content[b-ai8d2ojlzv]  .sct-form {
    background: #fff;
    border: 1px solid #e2ded4;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-form-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1d2530;
}

.sc-content[b-ai8d2ojlzv]  .sct-form label {
    font-size: 11.5px;
    font-weight: 600;
    color: #647082;
    margin-top: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-form input,
.sc-content[b-ai8d2ojlzv]  .sct-form select,
.sc-content[b-ai8d2ojlzv]  .sct-form textarea {
    border: 1px solid #d8d3c7;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13.5px;
    background: #fdfcf9;
    width: 100%;
}

.sc-content[b-ai8d2ojlzv]  .sct-badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-badge.on { background: #e7f1ec; color: #2e6b52; }
.sc-content[b-ai8d2ojlzv]  .sct-badge.off { background: #f0ede5; color: #8b95a6; }
.sc-content[b-ai8d2ojlzv]  .sct-badge.warn { background: #f6efde; color: #8a6a1f; }
.sc-content[b-ai8d2ojlzv]  .sct-badge.bad { background: #f7e7e9; color: #9b2c3a; }

.sc-content[b-ai8d2ojlzv]  .sct-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-btn {
    border: 1px solid #d8d3c7;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

.sc-content[b-ai8d2ojlzv]  .sct-btn.primary {
    background: #d33bb2;
    border-color: #d33bb2;
    color: #fff;
    font-weight: 600;
}

.sc-content[b-ai8d2ojlzv]  .sct-btn.primary:disabled {
    opacity: .6;
    cursor: default;
}

.sc-content[b-ai8d2ojlzv]  .sct-btn.danger {
    background: #9b2c3a;
    border-color: #9b2c3a;
    color: #fff;
}

.sc-content[b-ai8d2ojlzv]  .sct-link {
    background: none;
    border: none;
    color: #0e4c63;
    font-size: 12.5px;
    cursor: pointer;
    padding: 2px 4px;
}

.sc-content[b-ai8d2ojlzv]  .sct-empty {
    padding: 34px;
    text-align: center;
    color: #8b95a6;
    font-size: 13.5px;
}

/* Carga: mismo anillo que usa el resto de SysTime (inbox, timeline), con la paleta del modulo.
   Va con ::deep porque los paneles son componentes hijos y el CSS aislado no les llega solo. */
.sc-content[b-ai8d2ojlzv]  .sct-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px;
    color: #8b95a6;
    font-size: 13.5px;
}

.sc-content[b-ai8d2ojlzv]  .sct-spinner {
    width: 18px;
    height: 18px;
    flex: none;
    border: 2px solid #e8e3d8;
    border-top-color: #d33bb2;
    border-radius: 50%;
    animation: sct-spin-b-ai8d2ojlzv 0.8s linear infinite;
}

@keyframes sct-spin-b-ai8d2ojlzv {
    to { transform: rotate(360deg); }
}

/* Respeta a quien pidio menos animacion: el anillo se queda quieto en vez de girar. */
@media (prefers-reduced-motion: reduce) {
    .sc-content[b-ai8d2ojlzv]  .sct-spinner { animation: none; }
}

.sc-content[b-ai8d2ojlzv]  .sct-filter {
    border: 1px solid #d8d3c7;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fdfcf9;
    min-width: 220px;
}

/* Barra de filtros con varios controles (marca -> modelo -> buscar): se reparten en linea y
   bajan solos en pantallas angostas en vez de desbordar la tabla. */
.sc-content[b-ai8d2ojlzv]  .sct-filter:has(select) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.sc-content[b-ai8d2ojlzv]  .sct-filter label {
    color: #8b95a6;
    font-size: 12.5px;
}

.sc-content[b-ai8d2ojlzv]  .sct-filter select,
.sc-content[b-ai8d2ojlzv]  .sct-filter input {
    border: 1px solid #d8d3c7;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 13px;
    background: #fff;
    color: #2b3444;
    max-width: 260px;
}

.sc-content[b-ai8d2ojlzv]  .sct-filter select:focus,
.sc-content[b-ai8d2ojlzv]  .sct-filter input:focus {
    outline: 2px solid #d33bb2;
    outline-offset: 1px;
}

/* ── Ficha del vehiculo: foto + placa + specs, como la ficha de activo de SysTime ───────── */

.sc-content[b-ai8d2ojlzv]  .sct-asset {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e8e3d8;
    border-radius: 10px;
    background: #fdfcf9;
    margin-bottom: 12px;
}

/* Mismas medidas de la tarjeta de SysTime: esquina de 14 px y foto recortada a cubrir. */
.sc-content[b-ai8d2ojlzv]  .sct-asset-photo {
    position: relative;
    flex: none;
    width: 116px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: #2a2a2a;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sin foto: el gris y la camara blanca de AssetCard, para que la ausencia se lea igual que alla. */
.sc-content[b-ai8d2ojlzv]  .sct-asset-noimg {
    width: 100%;
    height: 100%;
    background: darkgrey;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-noimg img {
    width: 58%;
    height: 58%;
    object-fit: contain;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-body {
    flex: 1;
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-title h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: #2b3444;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-vehicle {
    font-size: 13.5px;
    color: #8b95a6;
}

/* auto-fit: las 14 celdas se reparten segun el ancho y bajan solas en vez de desbordarse. */
.sc-content[b-ai8d2ojlzv]  .sct-asset-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 14px;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-specs > div {
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-asset-specs span {
    display: block;
    font-size: 11.5px;
    color: #8b95a6;
}

/* El valor no se parte a mitad de palabra: si no cabe, se recorta con puntos suspensivos y el
   dato completo queda en el title del navegador. */
.sc-content[b-ai8d2ojlzv]  .sct-asset-specs strong {
    display: block;
    font-size: 13px;
    color: #2b3444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Autorizado vs entregado: dos columnas fijas, sin texto fuera del marco ─────────────── */

.sc-content[b-ai8d2ojlzv]  .sct-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 20px;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-head {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b95a6;
    padding-bottom: 5px;
    border-bottom: 1px solid #e8e3d8;
    margin-bottom: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-item span {
    font-size: 12.5px;
    color: #8b95a6;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-item strong {
    font-size: 13.5px;
    color: #2b3444;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-item.total {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid #e8e3d8;
}

.sc-content[b-ai8d2ojlzv]  .sct-money-item strong.neg { color: #b3261e; }
.sc-content[b-ai8d2ojlzv]  .sct-money-item strong.pos { color: #1f7a45; }

/* ── Ruta de entrega: los cuatro pasos del seguimiento del trabajo ──────────────────────── */

.sc-content[b-ai8d2ojlzv]  .sct-steps {
    list-style: none;
    margin: 6px 0 10px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #e8e3d8;
    border-radius: 8px;
    background: #fdfcf9;
}

/* El paso hecho se apaga y el pendiente se destaca: lo que importa es dónde continuar. */
.sc-content[b-ai8d2ojlzv]  .sct-steps li.done {
    opacity: 0.62;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li.todo {
    border-color: #d33bb2;
    background: #fbeef7;
}

.sc-content[b-ai8d2ojlzv]  .sct-step-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #b9b2a4;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li.todo .sct-step-mark {
    background: #d33bb2;
}

/* El texto se lleva el ancho sobrante y el boton queda alineado a la derecha en TODOS los pasos:
   sin esto cada boton se pega al final de su texto y la columna sale escalonada. */
.sc-content[b-ai8d2ojlzv]  .sct-steps li > div {
    flex: 1;
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li .sct-btn {
    flex: none;
    margin-left: auto;
    align-self: center;
}

/* El motivo de un bloqueo se lee BAJO su paso, no en el toast global: ahi se pierde entre avisos
   de otras acciones y no queda claro a cual de los cuatro pertenece. */
.sc-content[b-ai8d2ojlzv]  .sct-step-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #8b95a6;
}

.sc-content[b-ai8d2ojlzv]  .sct-step-note.blocked {
    color: #d33bb2;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li strong {
    display: block;
    font-size: 13.5px;
    color: #2b3444;
}

.sc-content[b-ai8d2ojlzv]  .sct-steps li span:not(.sct-step-mark) {
    font-size: 12.5px;
    color: #8b95a6;
}

/* ── F3 · valoración: rejilla, pie consolidado y pintado táctil ─────────────────────────── */

.sc-content[b-ai8d2ojlzv]  .sct-table tfoot td {
    background: #f3efe6;
    font-weight: 600;
    color: #2b3444;
    border-top: 1px solid #d8d3c7;
}

.sc-content[b-ai8d2ojlzv]  .sct-table tr.sel {
    background: #fbeef7;
}

/* Celda ajustada a mano: se marca para que el colorista vea qué tocó y no se pierda de vista */
.sc-content[b-ai8d2ojlzv]  .sct-table td.edited {
    background: #fbeef7;
    color: #a3268b;
    font-weight: 600;
}

.sc-content[b-ai8d2ojlzv]  .sct-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #8b95a6;
    max-width: 96ch;
}

.sc-content[b-ai8d2ojlzv]  .sct-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #ece7dc;
    font-size: 13px;
}

.sc-content[b-ai8d2ojlzv]  .sct-kv span { color: #6b7688; }
.sc-content[b-ai8d2ojlzv]  .sct-kv b { color: #2b3444; font-weight: 600; }

.sc-content[b-ai8d2ojlzv]  .sct-paint {
    margin: 18px 0;
    border: 1px solid #d8d3c7;
    border-radius: 10px;
    background: #fdfcf9;
    overflow: hidden;
}

.sc-content[b-ai8d2ojlzv]  .sct-paint-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid #ece7dc;
}

.sc-content[b-ai8d2ojlzv]  .sct-paint-body {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 320px);
    gap: 18px;
    padding: 16px;
}

.sc-content[b-ai8d2ojlzv]  .sct-canvas {
    width: 100%;
    max-width: 560px;
    touch-action: none;
    border: 1px solid #d8d3c7;
    border-radius: 8px;
    background: #f3efe6;
    cursor: crosshair;
}

.sc-content[b-ai8d2ojlzv]  .sct-paint-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-content[b-ai8d2ojlzv]  .sct-paint-side label {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b95a6;
    margin-top: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-paint-piece {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #2b3444;
}

.sc-content[b-ai8d2ojlzv]  .sct-phase-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sc-content[b-ai8d2ojlzv]  .sct-phase {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid #d8d3c7;
    border-radius: 7px;
    background: #fff;
    font-size: 12.5px;
    color: #4a5568;
    cursor: pointer;
    text-align: left;
}

.sc-content[b-ai8d2ojlzv]  .sct-phase:hover { border-color: #b9b2a3; }

.sc-content[b-ai8d2ojlzv]  .sct-phase.on {
    border-color: #d33bb2;
    background: #fbeef7;
    color: #2b3444;
}

.sc-content[b-ai8d2ojlzv]  .sct-phase i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: none;
}

.sc-content[b-ai8d2ojlzv]  .sct-phase span { flex: 1; }
.sc-content[b-ai8d2ojlzv]  .sct-phase b { font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
    .sc-content[b-ai8d2ojlzv]  .sct-paint-body { grid-template-columns: 1fr; }
}

/* ── F4 · balanza del pesaje guiado y filas de conversión ───────────────────────────────── */

.sc-content[b-ai8d2ojlzv]  .sct-scale {
    border: 1px solid #d8d3c7;
    border-radius: 8px;
    background: #fdfcf9;
    padding: 14px 16px;
}

.sc-content[b-ai8d2ojlzv]  .sct-scale-label {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8b95a6;
    margin-bottom: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-scale-value {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 40px;
    font-weight: 600;
    color: #2b3444;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.sc-content[b-ai8d2ojlzv]  .sct-scale-value span {
    font-size: 17px;
    color: #6b7688;
    margin-left: 4px;
}

/* La marca vertical es el objetivo; el relleno, lo acumulado. Sin semáforo: el mockup no lo tiene */
.sc-content[b-ai8d2ojlzv]  .sct-gauge {
    margin-top: 13px;
    height: 6px;
    background: #e6e1d5;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.sc-content[b-ai8d2ojlzv]  .sct-gauge i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #d33bb2;
}

.sc-content[b-ai8d2ojlzv]  .sct-gauge u {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: #2b3444;
}

.sc-content[b-ai8d2ojlzv]  .sct-gauge-legend {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: #8b95a6;
    margin-top: 5px;
}

.sc-content[b-ai8d2ojlzv]  .sct-conv {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.sc-content[b-ai8d2ojlzv]  .sct-conv select { flex: 1; }
.sc-content[b-ai8d2ojlzv]  .sct-conv input { width: 90px; }

/* ── Captura de valoración (F1) ─────────────────────────────────────────────────────────────── */

/* La cabecera del documento son ~16 campos. En una columna quedaba una pantalla de scroll para
   transcribir un papel; en rejilla que se adapta al ancho cabe en una o dos filas. */
.sc-content[b-ai8d2ojlzv]  .sct-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 2px 14px;
    align-items: end;
}

.sc-content[b-ai8d2ojlzv]  .sct-form-grid > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-form-grid > div.wide {
    grid-column: span 2;
}

/* Los controles de la rejilla de captura se acotan a `.sct-capture` a proposito: `.sct-table input`
   a secas alcanzaria las casillas de aprobacion de la valoracion y del hub, y un checkbox al 100 %
   de ancho es exactamente el defecto que esto evita. */
.sc-content[b-ai8d2ojlzv]  .sct-capture input,
.sc-content[b-ai8d2ojlzv]  .sct-capture select {
    border: 1px solid #d8d3c7;
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 12.5px;
    background: #fff;
    color: #2b3444;
    width: 100%;
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-capture input:focus,
.sc-content[b-ai8d2ojlzv]  .sct-capture select:focus {
    outline: 2px solid #d33bb2;
    outline-offset: 1px;
}

.sc-content[b-ai8d2ojlzv]  .sct-capture input.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sc-content[b-ai8d2ojlzv]  .sct-capture td {
    vertical-align: top;
}

/* Procedencia del dato bajo su celda: que el area venga del catalogo o se haya escrito a mano
   cambia lo que significa el estimado, y no puede quedar solo en la cabeza de quien digito. */
.sc-content[b-ai8d2ojlzv]  .sct-cell-note {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
}

.sc-content[b-ai8d2ojlzv]  .sct-cell-note.ok { color: #2e6b52; }
.sc-content[b-ai8d2ojlzv]  .sct-cell-note.warn { color: #8a6a1f; }

.sc-content[b-ai8d2ojlzv]  .sct-problems {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #8a6a1f;
}

/* Pista de advertencia: el mismo tono ambar de los avisos que no bloquean, para que un
   emparejamiento de modelo que no resolvio no se lea como texto de ayuda cualquiera. */
.sc-content[b-ai8d2ojlzv]  .sct-hint.warn {
    color: #8a6a1f;
    font-weight: 600;
}

/* La ficha del vehiculo dentro de una tarjeta de formulario ya tiene el borde de la tarjeta
   alrededor: el suyo propio dibujaba un marco dentro de otro. */
.sc-content[b-ai8d2ojlzv]  .sct-form > .sct-asset {
    border: 0;
    background: transparent;
    padding: 10px 0 0;
    margin-bottom: 0;
}

/* ── Acciones por fila (anular valoracion) ──────────────────────────────────────────────────── */

.sc-content[b-ai8d2ojlzv]  .sct-row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-link.danger { color: #9b2c3a; }
.sc-content[b-ai8d2ojlzv]  .sct-link.danger:hover:not(:disabled) { color: #7d232f; }
.sc-content[b-ai8d2ojlzv]  .sct-link:disabled { opacity: .5; cursor: default; }

/* Accion no disponible: se ve que existe y el `title` dice por que no. Esconderla dejaria al
   usuario preguntandose si la funcion esta o no. */
.sc-content[b-ai8d2ojlzv]  .sct-link-off {
    color: #b3bac6;
    font-size: 12.5px;
    cursor: help;
    text-decoration: line-through;
}

.sc-content[b-ai8d2ojlzv]  .sct-confirm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f7e7e9;
    color: #9b2c3a;
    font-size: 12px;
    font-weight: 600;
}

/* Vinculo de la valoracion con la orden: se separa del resto del formulario porque no es un dato
   del documento sino la decision de a que trabajo pertenece. */
.sc-content[b-ai8d2ojlzv]  .sct-link-order {
    border-left: 3px solid #d33bb2;
    margin-bottom: 12px;
}

.sc-content[b-ai8d2ojlzv]  .sct-link-order .sct-filter {
    border: 0;
    background: transparent;
    padding: 0;
}

/* Campo de fila completa dentro de la rejilla del formulario: las notas del documento traen frases
   largas («2 cierres y 6 modificaciones; la puerta izquierda aparece en 3 secciones») y en una
   celda de 168 px solo se veia el principio. */
.sc-content[b-ai8d2ojlzv]  .sct-form-grid > div.full {
    grid-column: 1 / -1;
}

.sc-content[b-ai8d2ojlzv]  .sct-form-grid > div.full textarea {
    min-height: 62px;
    resize: vertical;
    line-height: 1.45;
}

/* ── Selector de trabajo por tarjetas ───────────────────────────────────────────────────────
   El taller reconoce el carro, no el consecutivo. Misma gramatica que el tablero de SysTime:
   foto arriba, placa de titular y el numero de orden en letra menor. */

.sc-content[b-ai8d2ojlzv]  .sct-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sc-content[b-ai8d2ojlzv]  .sct-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid #e2ded4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.sc-content[b-ai8d2ojlzv]  .sct-card:hover {
    border-color: #d33bb2;
    box-shadow: 0 4px 14px -6px rgba(31, 47, 69, .28);
    transform: translateY(-1px);
}

.sc-content[b-ai8d2ojlzv]  .sct-card:focus-visible {
    outline: 2px solid #d33bb2;
    outline-offset: 2px;
}

/* Una orden cerrada se puede abrir igual —el seguimiento existe para el trabajo terminado— pero
   se atenua para que no compita con las que estan en el taller. */
.sc-content[b-ai8d2ojlzv]  .sct-card.closed { opacity: .62; }
.sc-content[b-ai8d2ojlzv]  .sct-card.closed:hover { opacity: 1; }

.sc-content[b-ai8d2ojlzv]  .sct-card-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #eceae4;
    overflow: hidden;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-photo .sct-asset-noimg {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #a9a9a9;
    border-radius: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-photo .sct-asset-noimg img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Distintivo sobre la foto, como el punto de estado del tablero de SysTime. */
.sc-content[b-ai8d2ojlzv]  .sct-card-flag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.sc-content[b-ai8d2ojlzv]  .sct-card-flag.warranty { background: #b3261e; }
.sc-content[b-ai8d2ojlzv]  .sct-card-flag.closed { background: #2e6b52; }

.sc-content[b-ai8d2ojlzv]  .sct-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 11px 11px;
    min-width: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-body b {
    font-size: 14.5px;
    font-weight: 700;
    color: #1d2530;
    letter-spacing: .01em;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-vehicle,
.sc-content[b-ai8d2ojlzv]  .sct-card-meta-text {
    font-size: 11px;
    color: #8b95a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-vehicle {
    color: #6b7688;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La fila del pie reparte: el numero de orden se encoge y las marcas nunca, para que no sean lo
   primero que se corta cuando el nombre del vehiculo es largo. */
.sc-content[b-ai8d2ojlzv]  .sct-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    min-width: 0;
    margin-top: 2px;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-meta-text { min-width: 0; }

.sc-content[b-ai8d2ojlzv]  .sct-card-marks {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.sc-content[b-ai8d2ojlzv]  .sct-card-mark {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* Verde = paso 1 hecho, la valoracion esta atada. Ambar = cuantas ordenes tiene el vehiculo; es el
   mismo codigo de color del tablero de SysTime, donde ese numero avisa de la placa repetida. */
.sc-content[b-ai8d2ojlzv]  .sct-card-mark.valued { background: #2e6b52; }
.sc-content[b-ai8d2ojlzv]  .sct-card-mark.count { background: #c9a227; color: #3d2f00; }

/* ---- Desglose del estimado ---------------------------------------------------------------------
   El desglose se abre DENTRO de la tabla de fases y no en un panel aparte: la comprobacion que
   habilita es «esta fila da 4.312 g; a ver de donde salen», y sacarla de contexto obliga a recordar
   la cifra que se estaba comprobando. */
.sc-content[b-ai8d2ojlzv]  .sct-table tr.sct-breakdown > td {
    background: #faf8f3;
    padding: 12px 16px 14px 34px;
    border-bottom: 1px solid #e2ded4;
}

/* Tabla anidada: fondo blanco y letra un punto menor para que se lea como el detalle de la fila de
   arriba y no como una segunda tabla independiente. */
.sc-content[b-ai8d2ojlzv]  .sct-subtable {
    background: #fff;
    border: 1px solid #e9e5db;
    border-radius: 8px;
    font-size: 12.5px;
    margin-top: 8px;
}

.sc-content[b-ai8d2ojlzv]  .sct-subtable th { background: #fff; padding: 8px 10px; }
.sc-content[b-ai8d2ojlzv]  .sct-subtable td { padding: 7px 10px; }
.sc-content[b-ai8d2ojlzv]  .sct-subtable tbody tr:last-child td { border-bottom: 0; }

/* El pie repite las dos cifras de la fila padre: es lo que cierra la comprobacion a mano. */
.sc-content[b-ai8d2ojlzv]  .sct-subtable tfoot td {
    background: #faf8f3;
    font-weight: 600;
    border-top: 1px solid #e2ded4;
    border-bottom: 0;
}

.sc-content[b-ai8d2ojlzv]  .sct-why {
    margin: 0;
    font-size: 12.5px;
    color: #647082;
    max-width: 96ch;
}

/* Contador junto al nombre: dice cuantas piezas hay detras SIN abrir el desglose, para no tener que
   desplegar fase por fase buscando cual tiene piezas. */
.sc-content[b-ai8d2ojlzv]  .sct-count {
    margin-left: 7px;
    font-size: 11px;
    color: #8b95a6;
}

/* Aviso de piezas que no aportan gramos. Ambar y no rojo a proposito: no es un error del sistema
   —el dato falta en el catalogo del taller— pero cambia el total, asi que no puede ser gris. */
.sc-content[b-ai8d2ojlzv]  .sct-silent {
    background: #fdf9ee;
    border: 1px solid #e8dcc0;
    border-left: 3px solid #c9a227;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.sc-content[b-ai8d2ojlzv]  .sct-silent > p {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #6b5a2a;
    max-width: 92ch;
}

/* ---- Abrir preparacion: de donde sale el objetivo y que mezcla sale de el --------------------- */

/* La resta a la vista: pedido - entregado = pendiente. En una linea y con las cifras en negrita,
   porque el colorista lo que necesita saber es si le piden la tanda entera o el resto de una. */
.sc-content[b-ai8d2ojlzv]  .sct-target {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    background: #f3f6f4;
    border: 1px solid #d7e2da;
    border-radius: 8px;
    padding: 9px 13px;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: #3f5147;
}

/* Vista previa de la mezcla. Fondo blanco sobre la tarjeta gris del formulario: se lee como el
   resultado de lo elegido arriba y no como otro formulario mas. */
.sc-content[b-ai8d2ojlzv]  .sct-preview {
    margin-top: 12px;
    border-top: 1px solid #e2ded4;
    padding-top: 12px;
}

.sc-content[b-ai8d2ojlzv]  .sct-preview h4 {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1d2530;
}

/* ---- Desviacion contra el sugerido (F3, dia 7) --------------------------------------------------
   Verde no: una desviacion dentro de tolerancia no es un logro, es lo normal. Se pinta gris y solo
   se enciende en ambar cuando pasa el umbral, para que el ojo salte a la unica fila que importa. */
.sc-content[b-ai8d2ojlzv]  .sct-dev {
    font-variant-numeric: tabular-nums;
    color: #647082;
}

.sc-content[b-ai8d2ojlzv]  .sct-dev.bad {
    color: #8a6a1f;
    font-weight: 700;
}

/* Renglon bajo la balanza: acompana al peso acumulado, asi que comparte su caja. */
.sc-content[b-ai8d2ojlzv]  .sct-dev-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2ded4;
    font-size: 12px;
    color: #8b95a6;
}

.sc-content[b-ai8d2ojlzv]  .sct-dev-line b {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: #4a5568;
}

.sc-content[b-ai8d2ojlzv]  .sct-dev-line.bad b { color: #8a6a1f; }

/* La desviacion viva del componente en balanza: pegada bajo el campo, sin caja propia, porque es
   una lectura del numero que se esta tecleando y no un dato aparte. */
.sc-content[b-ai8d2ojlzv]  .sct-dev-live {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 4px 0 2px;
    font-size: 12.5px;
    color: #647082;
}

.sc-content[b-ai8d2ojlzv]  .sct-dev-live b {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: #1d2530;
}

.sc-content[b-ai8d2ojlzv]  .sct-dev-live span { color: #8b95a6; font-size: 11.5px; }

.sc-content[b-ai8d2ojlzv]  .sct-dev-live.bad b { color: #8a6a1f; }

/* ---- Costeo por componente (F3, dia 8) ----------------------------------------------------------
   Tres botones en linea y no un desplegable: son tres opciones fijas, y con un select hay que abrir,
   leer y elegir para ver cual esta puesta. Aqui la que rige se ve sin tocar nada. */
.sc-content[b-ai8d2ojlzv]  .sct-costing-set {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-chip {
    border: 1px solid #d8d3c7;
    background: #fff;
    color: #647082;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
}

.sc-content[b-ai8d2ojlzv]  .sct-chip:hover:not(:disabled) { border-color: #b9b2a3; }

.sc-content[b-ai8d2ojlzv]  .sct-chip:disabled { opacity: .5; cursor: default; }

/* La que rige. Navy y no magenta: el magenta del modulo es para la accion principal de la pantalla,
   y aqui hay tres botones por fila en veinticinco filas — teniirlos todos gritaria sin informar. */
.sc-content[b-ai8d2ojlzv]  .sct-chip.on {
    background: #101725;
    border-color: #101725;
    color: #fff;
    font-weight: 600;
}

.sc-content[b-ai8d2ojlzv]  .sct-hint-inline {
    font-size: 11px;
    color: #8b95a6;
    font-style: italic;
    margin-left: 2px;
}

/* Renglon de la presentacion elegida en complementarios: el contenido por unidad y el cajon de
   costeo juntos, porque son las dos cosas que cambian lo que va a pasar al registrar. */
.sc-content[b-ai8d2ojlzv]  .sct-extra-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 2px;
    padding: 7px 10px;
    background: #faf8f3;
    border: 1px solid #e9e5db;
    border-radius: 7px;
    font-size: 12.5px;
    color: #4a5568;
}
/* /xShared/Components/Badges/CountBadge.razor.rz.scp.css */
/* CountBadge — única definición visual de las burbujas contador de la web.
   Sin variantes de color, tamaño ni borde: los valores viven en los tokens --st-badge-* de app.css
   y aquí solo hay fallbacks. */

.st-count-badge[b-jrbbgygogb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--st-badge-size, 20px);
    height: var(--st-badge-size, 20px);
    padding: 0 6px;
    border-radius: 999px;
    background: var(--st-badge-bg, #d81b84);
    color: var(--st-badge-fg, #ffffff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    animation: st-count-badge-pop-in-b-jrbbgygogb 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.st-count-badge[title][b-jrbbgygogb] {
    cursor: help;
}

/* Anclaje: absoluto en una esquina del contenedor (que debe ser position:relative).
   Los offsets se leen de variables para que el consumidor los ajuste sin !important. */
.st-count-badge.is-anchored[b-jrbbgygogb] {
    position: absolute;
    z-index: 3;
}

.st-count-badge.anchor-top-right[b-jrbbgygogb] {
    top: var(--st-badge-offset-y, -4px);
    right: var(--st-badge-offset-x, -4px);
}

.st-count-badge.anchor-bottom-right[b-jrbbgygogb] {
    bottom: var(--st-badge-offset-y, -4px);
    right: var(--st-badge-offset-x, -4px);
}

.st-count-badge.anchor-top-left[b-jrbbgygogb] {
    top: var(--st-badge-offset-y, -4px);
    left: var(--st-badge-offset-x, -4px);
}

.st-count-badge.anchor-bottom-left[b-jrbbgygogb] {
    bottom: var(--st-badge-offset-y, -4px);
    left: var(--st-badge-offset-x, -4px);
}

/* Aparición con rebote (solo al montarse; Blazor no vuelve a insertar el nodo en re-renders). */
@keyframes st-count-badge-pop-in-b-jrbbgygogb {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-count-badge[b-jrbbgygogb] {
        animation: none;
    }
}
/* /xShared/Components/Buttons/ActionButtonBar.razor.rz.scp.css */
/* ─── ActionButtonBar — acciones directas sobre superficie clara ─── */

/* El host toma el ancho que le da el LAYOUT y no el de su contenido (containment en línea):
   así la medida del ajuste es el sitio real del panel, y la barra nunca empuja a sus vecinos
   ni ensancha a un padre con fit-content. La tarjeta de detalle se angosta al abrirse en 3
   columnas con la ventana igual de ancha, y ahí es donde hace falta encoger. */
.st-ab-host[b-56vs0ay005] {
    display: block;
    width: 100%;
    min-width: 0;
    container-type: inline-size;
}

/* AutoFit="false": sin medida ni containment, el host mide lo que miden sus botones y puede ir
   como un ítem más de una fila flex (cabecera de la línea de tiempo). */
.st-ab-host.st-ab-static[b-56vs0ay005] {
    display: inline-block;
    width: auto;
    container-type: normal;
}

.st-ab-host.st-ab-static .st-ab-bar[b-56vs0ay005] {
    flex-wrap: nowrap;
}

.st-ab-bar[b-56vs0ay005] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.st-ab-divider[b-56vs0ay005] {
    width: 1px;
    height: 24px;
    background: #E4E9F2;
    margin: 0 4px;
    flex-shrink: 0;
}

.st-ab-btn[b-56vs0ay005] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.st-ab-btn:focus-visible[b-56vs0ay005] {
    outline: 2px solid #FE00E4;
    outline-offset: 2px;
}

.st-ab-icon[b-56vs0ay005] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Primary: la acción que empuja la orden hacia adelante ── */
.st-ab-primary[b-56vs0ay005] {
    background: #FE00E4;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(254, 0, 228, 0.25);
}

.st-ab-primary:hover[b-56vs0ay005] {
    background: #D500C0;
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.35);
}

/* ── Neutral: lo habitual, sin competir con la primaria ── */
.st-ab-neutral[b-56vs0ay005] {
    border-color: #E4E9F2;
    color: #334D6E;
}

.st-ab-neutral .st-ab-icon[b-56vs0ay005] {
    color: #8898AA;
}

.st-ab-neutral:hover[b-56vs0ay005] {
    background: #F7F9FC;
    border-color: #CBD5E1;
}

.st-ab-neutral:hover .st-ab-icon[b-56vs0ay005] {
    color: #334D6E;
}

/* ── Success: cierre correcto del trabajo ── */
.st-ab-success[b-56vs0ay005] {
    border-color: #A7E0C2;
    color: #1F8A5B;
}

.st-ab-success:hover[b-56vs0ay005] {
    background: #F0FAF5;
    border-color: #6FCFA3;
}

/* ── Danger: contorno vacío. Un rojo sólido competiría con el semáforo de retraso
   y atraería el clic hacia lo irreversible. ── */
.st-ab-danger[b-56vs0ay005] {
    background: transparent;
    color: #C1272D;
}

.st-ab-danger:hover[b-56vs0ay005] {
    background: #FDF1F1;
    border-color: #F3C2C2;
}

/* ── No disponible: sigue a la vista, con el motivo en el title ── */
.st-ab-btn.st-ab-disabled[b-56vs0ay005] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.st-ab-btn.st-ab-disabled:hover[b-56vs0ay005] {
    background: #ffffff;
    border-color: #E4E9F2;
}

.st-ab-primary.st-ab-disabled:hover[b-56vs0ay005] {
    background: #FE00E4;
}

.st-ab-danger.st-ab-disabled:hover[b-56vs0ay005] {
    background: transparent;
    border-color: transparent;
}

/* ── Ajuste al ancho, en tres pasos. Lo mide action-button-bar.js y lo escribe en data-fit:
   sin atributo o "full" todos llevan rótulo; "partial" deja en icono sólo los botones marcados
   con CollapsesFirst (editar y anular: los que no empujan la orden); "compact" los deja a todos.
   Se mide en vez de estimar umbrales porque el ancho de un rótulo depende del idioma y de
   cuántas acciones hay, y con umbrales fijos la barra quedaba en iconos aunque sobrara sitio.

   En icono el botón es un círculo de 36px. El texto se oculta a la vista pero sigue siendo
   el nombre accesible y el tooltip, así que no se pierde. Sin texto, el ghost de Anular
   tampoco se leería como botón: en círculo lleva contorno. ── */
.st-ab-bar[data-fit="partial"] .st-ab-has-icon.st-ab-collapses-first[b-56vs0ay005],
.st-ab-bar[data-fit="compact"] .st-ab-has-icon[b-56vs0ay005] {
    width: 36px;
    padding: 0;
    border-radius: 50%;
}

.st-ab-bar[data-fit="partial"] .st-ab-has-icon.st-ab-collapses-first .st-ab-label[b-56vs0ay005],
.st-ab-bar[data-fit="compact"] .st-ab-has-icon .st-ab-label[b-56vs0ay005] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.st-ab-bar[data-fit="partial"] .st-ab-danger.st-ab-has-icon.st-ab-collapses-first[b-56vs0ay005],
.st-ab-bar[data-fit="compact"] .st-ab-danger.st-ab-has-icon[b-56vs0ay005] {
    border-color: #F3C2C2;
}

@media (prefers-reduced-motion: reduce) {
    .st-ab-btn[b-56vs0ay005] {
        transition-duration: 0.01ms;
    }
}
/* /xShared/Components/HelpButton.razor.rz.scp.css */
.st-help-btn[b-1ogn8d9clo] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(211, 59, 178, 0.35);
    background: rgba(211, 59, 178, 0.08);
    color: #D33BB2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.st-help-btn:hover[b-1ogn8d9clo] {
    background: rgba(211, 59, 178, 0.18);
    border-color: #D33BB2;
}
/* /xShared/Components/InfoCarouselPopover.razor.rz.scp.css */
/* Chasis del popover de ayuda. Lo que el consumidor pasa como contenido lleva su propio
   scope de CSS isolation, por eso el vocabulario de las entradas va con ::deep. */

.info-carousel-wrapper[b-m3e9e9o8ij] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-carousel-backdrop[b-m3e9e9o8ij] {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: transparent;
}

.info-carousel-btn[b-m3e9e9o8ij] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #2563EB;
    cursor: pointer;
    transition: all 0.2s ease;
}

.info-carousel-btn:hover[b-m3e9e9o8ij],
.info-carousel-btn.active[b-m3e9e9o8ij] {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1D4ED8;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

/* Cuelga del icono y sobresale 14px a su derecha: el pico cae sobre el icono, que es de
   donde sale la ayuda, y la tarjeta crece hacia la izquierda sin salirse del panel. */
.info-carousel-card[b-m3e9e9o8ij] {
    position: absolute;
    top: calc(100% + 8px);
    right: -14px;
    z-index: 120;
    width: 340px;
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18), 0 6px 12px -3px rgba(15, 23, 42, 0.1);
    cursor: default;
    animation: infoCarouselFadeIn-b-m3e9e9o8ij 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-carousel-card[b-m3e9e9o8ij]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 20px;
    width: 9px;
    height: 9px;
    background: #FFFFFF;
    border-left: 1px solid #E2E8F0;
    border-top: 1px solid #E2E8F0;
    transform: rotate(45deg);
}

@keyframes infoCarouselFadeIn-b-m3e9e9o8ij {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.info-carousel-header[b-m3e9e9o8ij] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-carousel-title[b-m3e9e9o8ij] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0F172A;
}

.info-carousel-close[b-m3e9e9o8ij] {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.info-carousel-close:hover[b-m3e9e9o8ij] { color: #475569; }

/* Alto fijo para que las flechas no salten al cambiar de paso. */
.info-carousel-step[b-m3e9e9o8ij] {
    min-height: 210px;
}

[b-m3e9e9o8ij] .info-carousel-step-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}

.info-carousel-nav[b-m3e9e9o8ij] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.info-carousel-arrow[b-m3e9e9o8ij] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background: #FFFFFF;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.info-carousel-arrow:hover:not(:disabled)[b-m3e9e9o8ij] {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1D4ED8;
}

.info-carousel-arrow:disabled[b-m3e9e9o8ij] {
    opacity: 0.35;
    cursor: default;
}

.info-carousel-dots[b-m3e9e9o8ij] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.info-carousel-dot[b-m3e9e9o8ij] {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.info-carousel-dot.active[b-m3e9e9o8ij] {
    background: #2563EB;
    transform: scale(1.25);
}

.info-carousel-footer[b-m3e9e9o8ij] {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #E2E8F0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #475569;
}

/* Dibujo del paso: el consumidor lo pasa como contenido, aquí solo se le da el marco. */
[b-m3e9e9o8ij] .info-carousel-illustration {
    width: 100%;
    height: auto;
    display: block;
    background: #F8FAFC;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: visible;
}

/* Vocabulario de las entradas: marca de color, titular y descripción. */
[b-m3e9e9o8ij] .info-carousel-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 8px;
    margin-bottom: 8px;
}

[b-m3e9e9o8ij] .info-carousel-key {
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: start;
    margin-top: 5px;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

[b-m3e9e9o8ij] .info-carousel-name {
    align-self: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0F172A;
}

[b-m3e9e9o8ij] .info-carousel-desc {
    grid-column: 2;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #475569;
}
/* /xShared/Components/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher[b-xyct11bbxp] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    margin-left: 8px;
}

.lang-btn[b-xyct11bbxp] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.lang-btn:hover[b-xyct11bbxp] {
    color: #e500cd !important;
}

.lang-btn.active[b-xyct11bbxp] {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.lang-divider[b-xyct11bbxp] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    user-select: none;
}
/* /xShared/Components/Modals/ActionLoadingModal.razor.rz.scp.css */
/* ActionLoadingModal — Estándar Universal */

.shared-modal-overlay[b-g53xi4hybd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.shared-modal-overlay.is-visible[b-g53xi4hybd] {
    opacity: 1;
    pointer-events: auto;
}

.action-loading-content[b-g53xi4hybd] {
    width: 380px;
    background: #ffffff;
    border-radius: 28px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .action-loading-content[b-g53xi4hybd] {
    transform: scale(1) translateY(0);
}

.action-loading-spinner-container[b-g53xi4hybd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px auto;
}

.action-loading-pulse[b-g53xi4hybd] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(211, 59, 178, 0.12);
    animation: loading-pulse-b-g53xi4hybd 2s ease-in-out infinite;
}

.action-loading-spinner[b-g53xi4hybd] {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(211, 59, 178, 0.15);
    border-top-color: #D33BB2;
    border-radius: 50%;
    animation: action-loading-spin-b-g53xi4hybd 0.8s linear infinite;
    z-index: 2;
}

@keyframes action-loading-spin-b-g53xi4hybd {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-pulse-b-g53xi4hybd {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.2;
    }
}

.shared-modal-title[b-g53xi4hybd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.shared-modal-message[b-g53xi4hybd] {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
/* /xShared/Components/Modals/ActionReasonModal.razor.rz.scp.css */
/* ============================================================
   ActionReasonModal — Estilos del Modal de Cierre/Anulación
   ============================================================ */

/* Overlay y Contenedor Principal */
/* El fondo difuminado lo aporta la clase global .st-blurred-backdrop (app.css). */
.confirm-modal-overlay[b-ow9p1tzmoh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.confirm-modal-overlay.is-ready[b-ow9p1tzmoh] {
    opacity: 1;
}

.confirm-modal-content[b-ow9p1tzmoh] {
    background-color: #ffffff;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.confirm-modal-header[b-ow9p1tzmoh] {
    display: flex;
    justify-content: center;
    border-bottom: none;
    padding: 20px 32px 0 32px; /* Más aire arriba y a los lados */
}

.confirm-modal-title[b-ow9p1tzmoh] {
    text-align: center;
    width: 100%;
    font-size: 20px; /* Un poco más grande para que destaque */
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.confirm-modal-body[b-ow9p1tzmoh] {
    padding: 24px 32px; /* Más aire lateral y vertical */
}

.confirm-modal-message[b-ow9p1tzmoh] {
    text-align: center;
    color: #4a5568;
    font-size: 15px;
    margin-bottom: 32px; /* Más espacio después del mensaje */
    line-height: 1.5;
}

.confirm-modal-row[b-ow9p1tzmoh] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px; /* Más espacio entre filas de pickers */
    justify-content: center;
}

.hour-picker[b-ow9p1tzmoh],
.minute-picker[b-ow9p1tzmoh] {
    max-width: 100px;
}

/* Pickers de fecha y hora */
.maui-picker-wrapper[b-ow9p1tzmoh] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.maui-picker-label[b-ow9p1tzmoh] {
    font-size: 13px;
    color: #718096;
    margin-bottom: 4px;
    text-align: center;
    font-weight: 500;
}

.maui-picker-select[b-ow9p1tzmoh] {
    background-color: #ebf1f7;
    border: 1px solid rgba(51, 73, 102, 0.1);
    border-radius: 8px;
    padding: 10px 24px 10px 10px;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23df3ca8" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: right 4px;
    background-position-y: center;
    font-size: 14px;
    color: #334966;
    font-weight: 600;
    width: 100%;
    text-align: center;
    cursor: pointer;
    outline: none;
}

/* El Textarea de Razones (Estándar Inventario) */
.inventario-textarea[b-ow9p1tzmoh] {
    width: 100%;
    min-height: 80px;
    background: #ebf1f7 !important;
    border: 1px solid rgba(51, 73, 102, 0.1) !important;
    border-radius: 12px;
    padding: 12px 14px;
    color: #334966 !important;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
    border-bottom: 2px solid #cbd5e1 !important;
    transition: all 0.2s ease;
}

.inventario-textarea:focus[b-ow9p1tzmoh] {
    border-color: #ff33a6 !important;
    border-bottom-color: #ff33a6 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 51, 166, 0.08);
}

.confirm-modal-textarea-container[b-ow9p1tzmoh] {
    text-align: left;
    margin-top: 8px; /* Un poco más de aire arriba */
    margin-bottom: 28px; /* Más aire antes de los botones */
}

.confirm-modal-textarea-label[b-ow9p1tzmoh] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Botones del Footer */
.btn-cancel[b-ow9p1tzmoh] {
    border-radius: 20px;
    padding: 10px 30px;
    font-weight: 600;
    background: #0d1e33;
    color: white;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-confirm[b-ow9p1tzmoh] {
    border-radius: 20px;
    padding: 10px 45px;
    font-weight: 600;
    background: #ff33a6;
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.confirm-modal-footer[b-ow9p1tzmoh] {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 32px 32px 32px; /* Mucho más aire abajo y a los lados */
    border-top: none;
}

.btn-cancel:hover[b-ow9p1tzmoh], .btn-confirm:hover[b-ow9p1tzmoh] {
    opacity: 0.9;
}

.btn-confirm:active[b-ow9p1tzmoh] {
    transform: scale(0.95);
}
/* /xShared/Components/Modals/AlertModal.razor.rz.scp.css */
/* AlertModal — Estándar Universal */

/* El fondo difuminado lo aporta la clase global .st-blurred-backdrop (app.css). */
.shared-modal-overlay[b-5tgeybeijb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.shared-modal-overlay.is-visible[b-5tgeybeijb] {
    opacity: 1;
    pointer-events: auto;
}

.shared-modal-content[b-5tgeybeijb] {
    width: auto;
    min-width: 320px;
    max-width: min(90vw, 460px);
    max-height: 85vh;
    background: #ffffff;
    border-radius: 28px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .shared-modal-content[b-5tgeybeijb] {
    transform: scale(1) translateY(0);
}

/* Slot para la ilustración o icono */
.shared-modal-illustration[b-5tgeybeijb] {
    width: 140px;
    height: 140px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ────────────────────────────────────────────
   Íconos animados de estado (éxito / error / warning)
   Usados tanto por AlertModal (AlertType)
   como por CreationWizardAlert (<IconTemplate>)
──────────────────────────────────────────── */
.wizard-alert-icon-container[b-5tgeybeijb] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto;
}

.wizard-alert-pulse[b-5tgeybeijb] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    animation: success-pulse-b-5tgeybeijb 2s ease-in-out infinite;
}

.wizard-alert-ring-mid[b-5tgeybeijb] {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
}

.wizard-alert-circle-success[b-5tgeybeijb] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-alert-ring-error-bg[b-5tgeybeijb] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
}

.wizard-alert-circle-error[b-5tgeybeijb] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ícono de advertencia por defecto */
.shared-modal-default-icon[b-5tgeybeijb] {
    color: #f0ad4e;
    background: rgba(240, 173, 78, 0.15);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ícono de información (ayuda contextual) */
.shared-modal-info-icon[b-5tgeybeijb] {
    color: #D33BB2;
    background: rgba(211, 59, 178, 0.12);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes success-pulse-b-5tgeybeijb {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
}

/* ─── Tipografía ─── */
.shared-modal-title[b-5tgeybeijb] {
    font-size: 22px;
    font-weight: 700;
    color: #334966;
    margin: 0 0 12px 0;
    letter-spacing: -0.2px;
}

.shared-modal-message[b-5tgeybeijb] {
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 32px 0;
    max-width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    color-scheme: light;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.shared-modal-message[b-5tgeybeijb]::-webkit-scrollbar {
    width: 6px;
}

.shared-modal-message[b-5tgeybeijb]::-webkit-scrollbar-track {
    background: transparent;
}

.shared-modal-message[b-5tgeybeijb]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

.shared-modal-message[b-5tgeybeijb]::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.shared-modal-actions[b-5tgeybeijb] {
    width: 100%;
}

/* ─── Botón Ok ─── */
.shared-modal-btn-confirm[b-5tgeybeijb] {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(135deg, #D33BB2, #E147C1);
    color: #ffffff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 10px 25px rgba(211, 59, 178, 0.35);
}

.shared-modal-btn-confirm:hover[b-5tgeybeijb] {
    box-shadow: 0 12px 30px rgba(211, 59, 178, 0.5);
    transform: translateY(-2px);
}

.shared-modal-btn-confirm:active[b-5tgeybeijb] {
    transform: translateY(0);
}
/* /xShared/Components/Modals/CenterModal.razor.rz.scp.css */
/* El fondo difuminado lo aporta la clase global .st-blurred-backdrop (app.css). */
.modal-overlay[b-wwj1orpkff] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Massive Z-Index to escape any nesting and cover maps/sidebar/topbar */
    z-index: 2147483647;
    animation: fadeInOverlay-b-wwj1orpkff 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content.center-modal[b-wwj1orpkff] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 0;
    width: 90%;
    max-width: 820px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: slideUpModal-b-wwj1orpkff 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.modal-header[b-wwj1orpkff] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header-actions[b-wwj1orpkff] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.modal-header h3[b-wwj1orpkff] {
    margin: 0;
    color: #f8fafc;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.modal-body-container[b-wwj1orpkff] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer[b-wwj1orpkff] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.close-modal-btn[b-wwj1orpkff] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-modal-btn:hover[b-wwj1orpkff] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

[b-wwj1orpkff] .footer-actions {
    display: flex;
    gap: 12px;
}

[b-wwj1orpkff] .btn-primary, [b-wwj1orpkff] .btn-secondary {
    padding: 10px 20px;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

[b-wwj1orpkff] .btn-primary {
    background: #e500cd;
    color: white;
    border: none;
    box-shadow: none;
}

[b-wwj1orpkff] .btn-primary:hover:not(:disabled) {
    background: #ff00e5;
    transform: translateY(-1px);
    box-shadow: none;
}

[b-wwj1orpkff] .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #64748b;
    box-shadow: none;
}

[b-wwj1orpkff] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-wwj1orpkff] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

@keyframes fadeInOverlay-b-wwj1orpkff {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUpModal-b-wwj1orpkff {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /xShared/Components/Modals/ConfirmModal.razor.rz.scp.css */
/* El fondo difuminado lo aporta la clase global .st-blurred-backdrop (app.css). */
.confirm-modal-overlay[b-5baw50qbwl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: st-fade-in-b-5baw50qbwl 0.2s ease-out;
    transition: opacity 0.1s ease-in-out;
}

.confirm-modal-overlay.is-moving[b-5baw50qbwl] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.confirm-modal-overlay.is-ready[b-5baw50qbwl] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.confirm-modal-content[b-5baw50qbwl] {
    background: #ffffff;
    border-radius: 20px;
    width: calc(100% - 32px);
    max-width: 440px;
    padding: 28px 24px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: st-dialog-pop-b-5baw50qbwl 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.confirm-modal-close[b-5baw50qbwl] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.15s ease;
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-close:hover[b-5baw50qbwl] {
    background-color: #F1F5F9;
    color: #475569;
}

.confirm-modal-close svg[b-5baw50qbwl] {
    width: 20px;
    height: 20px;
}

/* Icono Circular de Cabecera (Estilo HandOver) */
.confirm-modal-icon-wrapper[b-5baw50qbwl] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    flex-shrink: 0;
}

.confirm-modal-icon-wrapper.info[b-5baw50qbwl] {
    background: rgba(216, 27, 132, 0.12);
    color: #d81b84;
}

.confirm-modal-icon-wrapper.destructive[b-5baw50qbwl] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.confirm-modal-icon-wrapper svg[b-5baw50qbwl] {
    width: 28px;
    height: 28px;
}

.confirm-modal-title[b-5baw50qbwl] {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 700;
    color: #1E293B;
    letter-spacing: -0.2px;
}

.confirm-modal-subtitle[b-5baw50qbwl] {
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 14px;
    line-height: 1.4;
    padding: 0 8px;
}

.confirm-modal-body[b-5baw50qbwl] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.confirm-modal-header-hint[b-5baw50qbwl] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    margin-bottom: 6px;
    padding-left: 2px;
}

/* Caja de Resumen Estructurada (Estilo HandOver .ho-summary-row / .acd-summary) */
.confirm-modal-summary-box[b-5baw50qbwl] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    max-height: 42vh;
    overflow-y: auto;
}

.confirm-modal-summary-box[b-5baw50qbwl]::-webkit-scrollbar {
    width: 6px;
}

.confirm-modal-summary-box[b-5baw50qbwl]::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 10px;
}

.scd-row[b-5baw50qbwl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #F1F5F9;
}

.scd-row:last-child[b-5baw50qbwl] {
    border-bottom: none;
}

.scd-label[b-5baw50qbwl] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748B;
    flex-shrink: 0;
}

.scd-value[b-5baw50qbwl] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    text-align: right;
    word-break: break-word;
}

.scd-previous[b-5baw50qbwl] {
    color: #94A3B8;
    text-decoration: line-through;
    margin-right: 4px;
    font-weight: 400;
}

.scd-arrow[b-5baw50qbwl] {
    color: #D81B84;
    margin: 0 4px;
    font-weight: 700;
}

.scd-next[b-5baw50qbwl] {
    color: #0284C7;
    font-weight: 700;
}

.confirm-modal-message[b-5baw50qbwl] {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 16px;
    text-align: center;
}

/* Botones de Acción (Estilo HandOver) */
.confirm-modal-footer[b-5baw50qbwl] {
    display: flex;
    gap: 10px;
    width: 100%;
}

.confirm-modal-footer button[b-5baw50qbwl] {
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.btn-cancel[b-5baw50qbwl] {
    background-color: #F1F5F9;
    border: 1px solid #E2E8F0 !important;
    color: #475569;
    flex: 1;
}

.btn-cancel:hover[b-5baw50qbwl] {
    background-color: #E2E8F0;
    color: #1E293B;
}

.btn-primary[b-5baw50qbwl] {
    background-color: #D81B84;
    color: #ffffff;
    flex: 1.4;
    box-shadow: 0 4px 12px rgba(216, 27, 132, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary:hover[b-5baw50qbwl] {
    background-color: #c21774;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(216, 27, 132, 0.35);
}

.btn-danger[b-5baw50qbwl] {
    background-color: #EF4444;
    color: #ffffff;
    flex: 1.4;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-danger:hover[b-5baw50qbwl] {
    background-color: #DC2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

@keyframes st-fade-in-b-5baw50qbwl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes st-dialog-pop-b-5baw50qbwl {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .confirm-modal-content[b-5baw50qbwl] {
        margin: 12px;
        padding: 20px 16px 16px;
    }

    .confirm-modal-footer[b-5baw50qbwl] {
        flex-direction: column-reverse;
    }

    .confirm-modal-footer button[b-5baw50qbwl] {
        width: 100%;
    }
}
/* /xShared/Components/Modals/ShareCredentialsModal.razor.rz.scp.css */
/* ShareCredentialsModal — mismo estándar visual que AlertModal (ver AlertModal.razor.css) */

.shared-modal-overlay[b-cokflpit9t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.shared-modal-overlay.is-visible[b-cokflpit9t] {
    opacity: 1;
    pointer-events: auto;
}

.shared-modal-content[b-cokflpit9t] {
    width: auto;
    min-width: 320px;
    max-width: min(90vw, 460px);
    max-height: 85vh;
    background: #ffffff;
    border-radius: 28px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .shared-modal-content[b-cokflpit9t] {
    transform: scale(1) translateY(0);
}

.shared-modal-illustration[b-cokflpit9t] {
    width: 100px;
    height: 100px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-alert-icon-container[b-cokflpit9t] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
}

.wizard-alert-pulse[b-cokflpit9t] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    animation: scm-success-pulse-b-cokflpit9t 2s ease-in-out infinite;
}

.wizard-alert-ring-mid[b-cokflpit9t] {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
}

.wizard-alert-circle-success[b-cokflpit9t] {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes scm-success-pulse-b-cokflpit9t {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
}

.shared-modal-title[b-cokflpit9t] {
    font-size: 22px;
    font-weight: 700;
    color: #334966;
    margin: 0 0 12px 0;
    letter-spacing: -0.2px;
}

.shared-modal-message[b-cokflpit9t] {
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 20px 0;
    max-width: 100%;
}

/* ─── Bloque de texto a compartir ─── */
.scm-textarea[b-cokflpit9t] {
    width: 100%;
    min-height: 120px;
    max-height: 220px;
    resize: vertical;
    box-sizing: border-box;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.5;
    font-family: inherit;
    /* Fuerza el scrollbar nativo claro (Windows/Chrome pintan uno oscuro con el tema del SO en dark mode). */
    color-scheme: light;
    scrollbar-color: #cbd5e1 #f8fafc;
}

.scm-textarea[b-cokflpit9t]::-webkit-scrollbar {
    width: 10px;
}

.scm-textarea[b-cokflpit9t]::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 14px;
}

.scm-textarea[b-cokflpit9t]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 14px;
    border: 2px solid #f8fafc;
}

.scm-textarea[b-cokflpit9t]::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.scm-actions-row[b-cokflpit9t] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.scm-btn-copy[b-cokflpit9t],
.scm-btn-whatsapp[b-cokflpit9t] {
    flex: 1;
    padding: 11px 0;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.scm-btn-copy[b-cokflpit9t] {
    background: #ffffff;
    color: #334966;
}

.scm-btn-copy:hover[b-cokflpit9t] {
    background: #f1f5f9;
}

.scm-btn-whatsapp[b-cokflpit9t] {
    background: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.scm-btn-whatsapp:hover[b-cokflpit9t] {
    background: #1fb955;
}

.shared-modal-actions[b-cokflpit9t] {
    width: 100%;
}

.shared-modal-btn-confirm[b-cokflpit9t] {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(135deg, #D33BB2, #E147C1);
    color: #ffffff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 10px 25px rgba(211, 59, 178, 0.35);
}

.shared-modal-btn-confirm:hover[b-cokflpit9t] {
    box-shadow: 0 12px 30px rgba(211, 59, 178, 0.5);
    transform: translateY(-2px);
}

.shared-modal-btn-confirm:active[b-cokflpit9t] {
    transform: translateY(0);
}
/* /xShared/Components/Modals/StopReasonModal.razor.rz.scp.css */
/* Overlay Backdrop */
.stop-reason-modal-overlay[b-1ei76oc9di] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: fadeIn-b-1ei76oc9di 0.2s ease-out;
    transition: opacity 0.15s ease-in-out;
    padding: 16px;
}

.stop-reason-modal-overlay.is-moving[b-1ei76oc9di] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.stop-reason-modal-overlay.is-ready[b-1ei76oc9di] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Modal Card */
.stop-reason-modal-card[b-1ei76oc9di] {
    background: linear-gradient(155deg, rgba(35, 52, 78, 0.94) 0%, rgba(20, 32, 50, 0.98) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    padding: 22px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: scaleUp-b-1ei76oc9di 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 85vh;
}

/* Header */
.stop-reason-header[b-1ei76oc9di] {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding-bottom: 4px;
}

.stop-reason-header-icon[b-1ei76oc9di] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(222, 156, 2, 0.18);
    border: 1px solid rgba(222, 156, 2, 0.4);
    color: #DE9C02;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(222, 156, 2, 0.2);
}

.stop-reason-header-text[b-1ei76oc9di] {
    flex: 1;
    min-width: 0;
}

.stop-reason-title[b-1ei76oc9di] {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.2px;
}

.stop-reason-subtitle[b-1ei76oc9di] {
    margin: 2px 0 0 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.65);
}

.stop-reason-close-btn[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stop-reason-close-btn:hover[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    transform: scale(1.05);
}

/* Search Wrapper */
.stop-reason-search-wrapper[b-1ei76oc9di] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-1ei76oc9di] {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.stop-reason-search-input[b-1ei76oc9di] {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 14px 10px 38px;
    color: #FFFFFF;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.18s ease;
}

.stop-reason-search-input:focus[b-1ei76oc9di] {
    border-color: #DE9C02;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 0 0 3px rgba(222, 156, 2, 0.22);
}

.stop-reason-search-input[b-1ei76oc9di]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Body / Reasons List */
.stop-reason-body[b-1ei76oc9di] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 52vh;
    padding-right: 4px;
}

.stop-reason-body[b-1ei76oc9di]::-webkit-scrollbar {
    width: 5px;
}

.stop-reason-body[b-1ei76oc9di]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.stop-reason-body[b-1ei76oc9di]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.stop-reason-body[b-1ei76oc9di]::-webkit-scrollbar-thumb:hover {
    background: #DE9C02;
}

/* Loading Skeletons */
.stop-reason-loading[b-1ei76oc9di] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stop-reason-skeleton[b-1ei76oc9di] {
    height: 52px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    animation: skeletonPulse-b-1ei76oc9di 1.4s infinite ease-in-out;
}

@keyframes skeletonPulse-b-1ei76oc9di {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.stop-reason-empty[b-1ei76oc9di] {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding: 20px 0;
    font-size: 0.9rem;
}

/* Reason Items */
.stop-reason-list[b-1ei76oc9di] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stop-reason-item[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    user-select: none;
}

.stop-reason-item:hover[b-1ei76oc9di] {
    background: rgba(222, 156, 2, 0.12);
    border-color: rgba(222, 156, 2, 0.35);
    transform: translateY(-1px);
}

.stop-reason-item.is-selected[b-1ei76oc9di] {
    background: linear-gradient(135deg, #DE9C02 0%, #B88200 100%);
    border-color: #DE9C02;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(222, 156, 2, 0.35);
    transform: translateY(-1px);
}

.reason-item-left[b-1ei76oc9di] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.reason-icon-circle[b-1ei76oc9di] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.reason-icon-circle.icon-selected[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.reason-text-group[b-1ei76oc9di] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reason-name[b-1ei76oc9di] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

.reason-desc[b-1ei76oc9di] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-reason-item.is-selected .reason-desc[b-1ei76oc9di] {
    color: rgba(255, 255, 255, 0.88);
}

/* Radio Badge */
.reason-radio-badge[b-1ei76oc9di] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.reason-radio-badge.radio-checked[b-1ei76oc9di] {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #DE9C02;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Footer Actions */
.stop-reason-footer[b-1ei76oc9di] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-stop-cancel[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #E2E8F0;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-stop-cancel:hover[b-1ei76oc9di] {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

.btn-stop-confirm[b-1ei76oc9di] {
    background: #DE9C02;
    border: none;
    color: #FFFFFF;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 4px 12px rgba(222, 156, 2, 0.35);
}

.btn-stop-confirm:hover:not(:disabled)[b-1ei76oc9di] {
    background: #C48800;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(222, 156, 2, 0.45);
}

.btn-stop-confirm:disabled[b-1ei76oc9di] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Animations */
@keyframes fadeIn-b-1ei76oc9di {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp-b-1ei76oc9di {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile Responsive */
@media (max-width: 500px) {
    .stop-reason-modal-card[b-1ei76oc9di] {
        padding: 18px;
        border-radius: 20px;
    }

    .stop-reason-footer[b-1ei76oc9di] {
        flex-direction: column-reverse;
    }

    .stop-reason-footer button[b-1ei76oc9di] {
        width: 100%;
    }
}
/* /xShared/Components/Modals/SummaryConfirmDialog.razor.rz.scp.css */
/* Mismas filas que el resumen de entrega del HandOver, para que el modal se lea igual en todos los flujos. */
.scd-row[b-kh0bb4e36r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scd-row:last-child[b-kh0bb4e36r] {
    border-bottom: none;
}

.scd-label[b-kh0bb4e36r] {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.scd-value[b-kh0bb4e36r] {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* En edición: lo que había queda tachado y atenuado, y lo nuevo resaltado. */
.scd-previous[b-kh0bb4e36r] {
    color: #94a3b8;
    text-decoration: line-through;
}

.scd-arrow[b-kh0bb4e36r] {
    color: #94a3b8;
    margin: 0 6px;
}

.scd-next[b-kh0bb4e36r] {
    font-weight: 600;
}
/* /xShared/Components/Navigation/TenantRouteGuard.razor.rz.scp.css */
.tenant-route-status[b-1ah4a8u6hy] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #1f2f45;
}
/* /xShared/Components/PanelLoading.razor.rz.scp.css */
.st-panel-loading[b-5xp31lpsvb] {
    flex: 1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    animation: st-panel-loading-fade-in-b-5xp31lpsvb 0.25s ease;
}

.st-panel-loading.compact[b-5xp31lpsvb] {
    flex: none;
    min-height: 100px;
    gap: 10px;
}

.st-panel-loading-spinner[b-5xp31lpsvb] {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(51, 77, 110, 0.15);
    border-top-color: #FE00E4;
    border-radius: 50%;
    animation: st-panel-loading-spin-b-5xp31lpsvb 0.8s linear infinite;
}

.st-panel-loading.compact .st-panel-loading-spinner[b-5xp31lpsvb] {
    width: 24px;
    height: 24px;
    border-width: 2.5px;
}

.st-panel-loading-text[b-5xp31lpsvb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #8898AA;
    letter-spacing: 0.2px;
}

.st-panel-loading.compact .st-panel-loading-text[b-5xp31lpsvb] {
    font-size: 0.85rem;
}

@keyframes st-panel-loading-spin-b-5xp31lpsvb {
    to {
        transform: rotate(360deg);
    }
}

@keyframes st-panel-loading-fade-in-b-5xp31lpsvb {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Single-line variant: a refresh notice must not reserve height, or the content jumps. */
.st-panel-loading.inline[b-5xp31lpsvb] {
    flex: none;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.st-panel-loading.inline .st-panel-loading-spinner[b-5xp31lpsvb] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    flex: none;
}

.st-panel-loading.inline .st-panel-loading-text[b-5xp31lpsvb] {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /xShared/Components/SavingToast.razor.rz.scp.css */
.st-saving-toast[b-rr1bh772li] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #2f3b26;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    animation: st-saving-toast-in-b-rr1bh772li 0.2s ease-out;
}

.st-saving-toast-spinner[b-rr1bh772li] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: st-saving-spin-b-rr1bh772li 0.7s linear infinite;
}

@keyframes st-saving-spin-b-rr1bh772li {
    to {
        transform: rotate(360deg);
    }
}

@keyframes st-saving-toast-in-b-rr1bh772li {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /xShared/Components/ScannerQR/ST_ScannerButton.razor.rz.scp.css */
.st-scanner-btn[b-5n9d0vqwzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0ea5e9;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    flex-shrink: 0;
}

.st-scanner-btn:hover:not(.disabled)[b-5n9d0vqwzu] {
    background: #0284c7;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.35);
}

.st-scanner-btn:active:not(.disabled)[b-5n9d0vqwzu] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.st-scanner-btn.disabled[b-5n9d0vqwzu] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.scanner-svg-icon[b-5n9d0vqwzu] {
    width: 60%;
    height: 60%;
    stroke: #ffffff;
    transition: stroke 0.2s ease;
}

.st-scanner-btn:hover .scanner-svg-icon[b-5n9d0vqwzu] {
    stroke: #ffffff;
}

.scanner-btn-icon[b-5n9d0vqwzu] {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.scanner-btn-text[b-5n9d0vqwzu] {
    margin-left: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}
/* /xShared/Components/ScannerQR/ST_ScannerModal.razor.rz.scp.css */
/* ============================================================
   ST_ScannerModal — Escáner Inteligente con Estilo Systime
   ============================================================ */

.st-scanner-modal-overlay[b-26hgcptpx7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    animation: fadeIn-b-26hgcptpx7 0.2s ease-out;
}

.st-scanner-modal-container[b-26hgcptpx7] {
    position: relative;
    z-index: 10;
    isolation: isolate;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(211, 59, 178, 0.15);
    overflow: hidden;
    color: #ffffff;
    animation: slideUp-b-26hgcptpx7 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header */
.st-scanner-modal-header[b-26hgcptpx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-title[b-26hgcptpx7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-scanner-icon[b-26hgcptpx7] {
    color: #D33BB2;
    flex-shrink: 0;
}

.header-title h3[b-26hgcptpx7] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.btn-close-modal[b-26hgcptpx7] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.btn-close-modal:hover[b-26hgcptpx7] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Body */
.st-scanner-modal-body[b-26hgcptpx7] {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Dropzone */
.dropzone-container[b-26hgcptpx7] {
    border: 2px dashed rgba(211, 59, 178, 0.4);
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dropzone-container:hover[b-26hgcptpx7] {
    border-color: #D33BB2;
    background: rgba(211, 59, 178, 0.06);
}

.dropzone-content[b-26hgcptpx7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropzone-icon[b-26hgcptpx7] {
    font-size: 2.4rem;
    margin-bottom: 10px;
    color: #D33BB2;
}

.dropzone-content h4[b-26hgcptpx7] {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
}

.dropzone-hint[b-26hgcptpx7] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 18px;
}

/* Botones con estilo Systime */
.btn-systime-primary[b-26hgcptpx7] {
    background: #D33BB2;
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(211, 59, 178, 0.4);
    transition: all 0.2s ease;
    user-select: none;
}

.btn-systime-primary:hover[b-26hgcptpx7] {
    background: linear-gradient(135deg, #D33BB2, #E88AD4);
    box-shadow: 0 6px 18px rgba(211, 59, 178, 0.55);
    transform: translateY(-1px);
}

.btn-systime-secondary[b-26hgcptpx7] {
    background: #334155;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-systime-secondary:hover[b-26hgcptpx7] {
    background: #475569;
    color: #ffffff;
}

.btn-browse[b-26hgcptpx7] {
    cursor: pointer;
    margin: 0 auto;
}

/* Dropzone Analyzing State */
.analyzing-dropzone[b-26hgcptpx7] {
    border-color: #D33BB2 !important;
    background: rgba(211, 59, 178, 0.08) !important;
    animation: borderPulse-b-26hgcptpx7 1.8s ease-in-out infinite;
}

.analyzing-title-lg[b-26hgcptpx7] {
    margin: 12px 0 4px 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #D33BB2;
    letter-spacing: 0.3px;
}

/* Previews & Results */
.preview-container[b-26hgcptpx7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.image-preview-wrapper[b-26hgcptpx7] {
    position: relative;
    max-height: 220px;
    min-height: 170px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-placeholder-scanning[b-26hgcptpx7] {
    height: 170px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    opacity: 0.3;
}

.image-preview-wrapper.scanning-active[b-26hgcptpx7] {
    border-color: #D33BB2;
    box-shadow: 0 0 20px rgba(211, 59, 178, 0.3);
}

.image-preview[b-26hgcptpx7] {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.image-preview-wrapper.scanning-active .image-preview[b-26hgcptpx7] {
    filter: brightness(0.65) contrast(1.1);
}

/* Laser Scan Animation */
.scanner-laser[b-26hgcptpx7] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(211, 59, 178, 0) 0%, #D33BB2 20%, #E88AD4 80%, rgba(211, 59, 178, 0) 100%);
    box-shadow: 0 0 12px 2px #D33BB2, 0 0 24px 6px rgba(211, 59, 178, 0.5);
    z-index: 5;
    animation: laserScan-b-26hgcptpx7 1.6s ease-in-out infinite alternate;
}

/* HUD Tech Corners */
.scan-corner[b-26hgcptpx7] {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #D33BB2;
    z-index: 6;
    pointer-events: none;
}

.scan-corner.tl[b-26hgcptpx7] { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.scan-corner.tr[b-26hgcptpx7] { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.scan-corner.bl[b-26hgcptpx7] { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.scan-corner.br[b-26hgcptpx7] { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* Analyzing Overlay & Card */
.analyzing-overlay[b-26hgcptpx7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 7;
}

.analyzing-card[b-26hgcptpx7] {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(211, 59, 178, 0.4);
    border-radius: 12px;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 18px rgba(211, 59, 178, 0.25);
    min-width: 240px;
    animation: fadeIn-b-26hgcptpx7 0.25s ease-out;
}

.spinner-pulse-container[b-26hgcptpx7] {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-spinner[b-26hgcptpx7] {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid rgba(211, 59, 178, 0.2);
    border-top: 3px solid #D33BB2;
    border-right: 3px solid #EFCE7D;
    border-radius: 50%;
    animation: spin-b-26hgcptpx7 0.85s linear infinite;
}

.scanner-pulse-icon[b-26hgcptpx7] {
    font-size: 1.15rem;
    animation: pulseScale-b-26hgcptpx7 1.2s ease-in-out infinite alternate;
}

.analyzing-text-block[b-26hgcptpx7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.analyzing-title[b-26hgcptpx7] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.3px;
}

.analyzing-subtitle[b-26hgcptpx7] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Progress Shimmer Bar */
.scanner-progress-bar[b-26hgcptpx7] {
    width: 100%;
    max-width: 220px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-top: 4px;
}

.scanner-progress-fill[b-26hgcptpx7] {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #D33BB2, #EFCE7D, transparent);
    border-radius: 4px;
    animation: shimmerProgress-b-26hgcptpx7 1.4s ease-in-out infinite;
}

.result-card[b-26hgcptpx7] {
    padding: 14px 16px;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.result-card.success[b-26hgcptpx7] {
    border-color: rgba(211, 59, 178, 0.35);
}

.result-card.error[b-26hgcptpx7] {
    border-color: rgba(239, 68, 68, 0.35);
}

.result-header[b-26hgcptpx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.badge-success[b-26hgcptpx7] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-multi-detected[b-26hgcptpx7] {
    background: rgba(211, 59, 178, 0.18);
    color: #E88AD4;
    border: 1px solid rgba(211, 59, 178, 0.35);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-error[b-26hgcptpx7] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Extraction Selector Pills */
.extraction-selector-container[b-26hgcptpx7] {
    margin: 8px 0 10px 0;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(211, 59, 178, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selector-label[b-26hgcptpx7] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selector-pills[b-26hgcptpx7] {
    display: flex;
    gap: 8px;
}

.selector-pill[b-26hgcptpx7] {
    flex: 1;
    background: #1e293b;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    text-align: left;
}

.selector-pill:hover[b-26hgcptpx7] {
    background: #334155;
    border-color: rgba(211, 59, 178, 0.5);
}

.selector-pill.active[b-26hgcptpx7] {
    background: rgba(211, 59, 178, 0.2);
    border-color: #D33BB2;
    box-shadow: 0 0 12px rgba(211, 59, 178, 0.3);
}

.pill-radio-icon[b-26hgcptpx7] {
    font-size: 1rem;
    color: #D33BB2;
    user-select: none;
    line-height: 1;
}

.selector-pill.active .pill-radio-icon[b-26hgcptpx7] {
    color: #E88AD4;
}

.pill-text-group[b-26hgcptpx7] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pill-title[b-26hgcptpx7] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
}

.selector-pill.active .pill-title[b-26hgcptpx7] {
    color: #E88AD4;
    font-weight: 600;
}

.pill-value[b-26hgcptpx7] {
    font-size: 0.98rem;
    font-weight: 700;
    color: #EFCE7D;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-val[b-26hgcptpx7] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #EFCE7D;
    letter-spacing: 0.5px;
}

.result-edit-section[b-26hgcptpx7] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-hint-label[b-26hgcptpx7] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.result-input-group[b-26hgcptpx7] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-editable-input[b-26hgcptpx7] {
    background: #0f172a !important;
    border: 1px solid #D33BB2 !important;
    color: #EFCE7D !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 36px 6px 12px !important;
    border-radius: 6px !important;
    width: 100%;
}

.result-editable-input:focus[b-26hgcptpx7] {
    box-shadow: 0 0 0 2px rgba(211, 59, 178, 0.35) !important;
    border-color: #E88AD4 !important;
}

.btn-clear-result[b-26hgcptpx7] {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.btn-clear-result:hover[b-26hgcptpx7] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
}

.error-fallback[b-26hgcptpx7] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(239, 68, 68, 0.3);
}

.btn-sm-validate[b-26hgcptpx7] {
    padding: 6px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.result-details-grid[b-26hgcptpx7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-item[b-26hgcptpx7] {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    min-width: 0;
    overflow: hidden;
}

.detail-item.clickable[b-26hgcptpx7] {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-item.clickable:hover[b-26hgcptpx7] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(211, 59, 178, 0.35);
}

.detail-item.selected-field[b-26hgcptpx7] {
    background: rgba(211, 59, 178, 0.18);
    border: 1px solid #D33BB2;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.25);
    padding: 6px 10px;
}

.detail-item.detail-item-wide[b-26hgcptpx7] {
    grid-column: span 2;
}

.detail-item .label[b-26hgcptpx7] {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.detail-item .val[b-26hgcptpx7] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f1f5f9;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.detail-item.selected-field .val[b-26hgcptpx7] {
    color: #EFCE7D;
}

.preview-actions[b-26hgcptpx7] {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

.btn-apply[b-26hgcptpx7] {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 10px 22px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-26hgcptpx7] {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.55);
}

/* Manual Input */
.manual-input-box[b-26hgcptpx7] {
    background: #0f172a;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.manual-label[b-26hgcptpx7] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
    display: block;
}

.manual-input-row[b-26hgcptpx7] {
    display: flex;
    gap: 8px;
}

.manual-input[b-26hgcptpx7] {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    flex: 1;
}

.manual-input:focus[b-26hgcptpx7] {
    border-color: #D33BB2 !important;
    box-shadow: 0 0 10px rgba(211, 59, 178, 0.25);
}

.btn-validate-manual[b-26hgcptpx7] {
    white-space: nowrap;
    padding: 8px 18px;
}

/* Footer: Selector de Modos en la parte inferior */
.st-scanner-modal-footer-modes[b-26hgcptpx7] {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-btn[b-26hgcptpx7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-26hgcptpx7] {
    background: #334155;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.tab-btn.active[b-26hgcptpx7] {
    background: #D33BB2;
    border-color: #D33BB2;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(211, 59, 178, 0.4);
}

.tab-btn-icon[b-26hgcptpx7] {
    font-size: 0.9rem;
}

.tab-icon[b-26hgcptpx7] {
    flex-shrink: 0;
}

/* Animations */
@keyframes spin-b-26hgcptpx7 {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-26hgcptpx7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-26hgcptpx7 {
    from { transform: translateY(20px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes laserScan-b-26hgcptpx7 {
    0% { top: 0%; opacity: 0.8; }
    50% { opacity: 1; }
    100% { top: 98%; opacity: 0.8; }
}

@keyframes shimmerProgress-b-26hgcptpx7 {
    0% { left: -50%; width: 40%; }
    50% { width: 70%; }
    100% { left: 110%; width: 40%; }
}

@keyframes pulseScale-b-26hgcptpx7 {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
}

@keyframes borderPulse-b-26hgcptpx7 {
    0%, 100% { border-color: rgba(211, 59, 178, 0.4); }
    50% { border-color: #D33BB2; box-shadow: inset 0 0 15px rgba(211, 59, 178, 0.15); }
}
/* /xShared/Components/Selectors/ActionSelectorCard.razor.rz.scp.css */
/* ─── ActionSelectorCard — componente reutilizable de selección ─── */

/* Contenedor base */
.st-as-card[b-zzze8dyr5h] {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1.5px solid #E8E8E8;
    border-bottom: 2.5px solid #FE00E4;
    border-radius: 12px;
    background: white;
    position: relative;
    overflow: visible;
    transition: border-color 0.15s;
}

.st-as-card.st-as-disabled[b-zzze8dyr5h] {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Variante Standard ── */

/* Sección izquierda gris con el label */
.st-as-label-section[b-zzze8dyr5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 12px;
    background: #F0F2F5;
    border-radius: 10px 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #3D5676;
    flex-shrink: 0;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.st-as-label-icon[b-zzze8dyr5h] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3D5676;
    opacity: 0.8;
}

.st-as-label-text[b-zzze8dyr5h] {
    display: block;
}

/* Wrapper del trigger — posicionamiento relativo para el menú Standard */
.st-as-trigger-wrapper[b-zzze8dyr5h] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

/* Botón trigger sección derecha */
.st-as-trigger[b-zzze8dyr5h] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #3D5676;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.st-as-placeholder[b-zzze8dyr5h] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron */
.st-as-chevron[b-zzze8dyr5h] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.st-as-chevron.st-as-chevron-up[b-zzze8dyr5h] {
    transform: rotate(180deg);
}

/* En variante Responsable el menú abre hacia la izquierda (trigger en borde derecho del panel) */
.st-as-card.st-as-responsable .st-as-menu[b-zzze8dyr5h] {
    left: auto;
    right: 0;
}

/* ── Variante Responsable ── */
.st-as-card.st-as-responsable[b-zzze8dyr5h] {
    border-radius: 50px;
    border: 1.5px solid #E8E8E8;
    border-bottom: 2.5px solid #FE00E4;
    display: inline-flex;
    width: auto;
}

.st-as-avatar-trigger[b-zzze8dyr5h] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 3px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.st-as-avatar-circle[b-zzze8dyr5h] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-as-avatar-img[b-zzze8dyr5h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-as-avatar-initials[b-zzze8dyr5h] {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
}

/* ── Overlay (cierre al click fuera) ── */
.st-as-overlay[b-zzze8dyr5h] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

/* ── Menú desplegable ── */
.st-as-menu[b-zzze8dyr5h] {
    position: absolute;
    left: 0;
    min-width: 160px;
    background: #1f2f45;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.st-as-menu.st-as-menu-down[b-zzze8dyr5h] {
    top: calc(100% + 6px);
    animation: stAsMenuDown-b-zzze8dyr5h 0.15s ease-out;
}

.st-as-menu.st-as-menu-up[b-zzze8dyr5h] {
    bottom: calc(100% + 6px);
    animation: stAsMenuUp-b-zzze8dyr5h 0.15s ease-out;
}

@keyframes stAsMenuDown-b-zzze8dyr5h {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes stAsMenuUp-b-zzze8dyr5h {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Ítems del menú ── */
.st-as-item[b-zzze8dyr5h] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.st-as-item:hover[b-zzze8dyr5h] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.st-as-item.st-as-item-selected[b-zzze8dyr5h] {
    color: white;
}

/* Avatar dentro del ítem (variante responsable) */
.st-as-item-avatar[b-zzze8dyr5h] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-as-item-avatar img[b-zzze8dyr5h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-as-item-initials[b-zzze8dyr5h] {
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
}

.st-as-item-label[b-zzze8dyr5h] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-as-item-icon[b-zzze8dyr5h] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.85);
}

.st-as-item:hover .st-as-item-icon[b-zzze8dyr5h] {
    opacity: 1;
}

.st-as-item-check[b-zzze8dyr5h] {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Variante clara (Light=true): popup blanco, hover gris clarito, igual a PickerDropdown Light ── */
.st-as-card.st-as-light .st-as-menu[b-zzze8dyr5h] {
    background: #ffffff;
    border: 1px solid rgba(51, 73, 102, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.st-as-card.st-as-light .st-as-item[b-zzze8dyr5h] {
    color: #334966;
}

.st-as-card.st-as-light .st-as-item:hover[b-zzze8dyr5h] {
    background: #f3f4f6;
    color: #334966;
}

.st-as-card.st-as-light .st-as-item.st-as-item-selected[b-zzze8dyr5h] {
    color: #D33BB2;
}

.st-as-card.st-as-light .st-as-item-icon[b-zzze8dyr5h] {
    color: rgba(51, 73, 102, 0.7);
}

.st-as-card.st-as-light .st-as-item:hover .st-as-item-icon[b-zzze8dyr5h] {
    color: #334966;
    opacity: 1;
}
/* /xShared/Components/Selectors/Cards/CustomerSelectorCard.razor.rz.scp.css */
.customer-card-squared[b-hbv428vkwd] {
    background: #94a3b8;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 100%;
    height: 100%; /* Permite que el grid estire todas las tarjetas a la misma altura */
}

.customer-card-squared.selected[b-hbv428vkwd] {
    background: #eab308;
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
    transform: translateY(-2px);
}

.customer-card-squared:hover[b-hbv428vkwd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.customer-avatar-circle[b-hbv428vkwd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-img[b-hbv428vkwd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder.person-icon[b-hbv428vkwd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 700;
    font-size: 18px;
}

.customer-card-name[b-hbv428vkwd] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 12px;
    height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.customer-stats-row[b-hbv428vkwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto; /* Empuja las estadísticas al fondo */
    min-height: 2px;
}
/* /xShared/Components/Selectors/Cards/InsuranceSelectorCard.razor.rz.scp.css */
.process-card-squared[b-luzgbqw54g] {
    background: #94a3b8;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 100%;
    height: 100%;
}

.process-card-squared.selected[b-luzgbqw54g] {
    background: #eab308;
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
    transform: translateY(-2px);
}

.process-card-squared:hover[b-luzgbqw54g] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.process-avatar-circle[b-luzgbqw54g] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-img[b-luzgbqw54g] {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.avatar-placeholder.process-icon[b-luzgbqw54g] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.process-card-name[b-luzgbqw54g] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.process-stats-row[b-luzgbqw54g] {
    width: 100%;
    margin-top: auto;
    min-height: 20px;
}
/* /xShared/Components/Selectors/Cards/ProcessSelectorCard.razor.rz.scp.css */
.process-card-squared[b-9oa1lac999] {
    background: #94a3b8;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 100%;
    height: 100%;
}





.process-card-squared.selected[b-9oa1lac999] {
    background: #eab308;
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
    transform: translateY(-2px);
}

.process-card-squared:hover[b-9oa1lac999] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.process-avatar-circle[b-9oa1lac999] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-img[b-9oa1lac999] {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.avatar-placeholder.process-icon[b-9oa1lac999] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.process-card-name[b-9oa1lac999] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.process-stats-row[b-9oa1lac999] {
    width: 100%;
    margin-top: auto;
    min-height: 20px;
}
/* /xShared/Components/Selectors/Cards/StakeholderSelectorCard.razor.rz.scp.css */
.stakeholder-card-squared[b-k856uj2jvn] {
    background: #94a3b8;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 100%;
    height: 100%; /* Permite que el grid estire todas las tarjetas a la misma altura */
}





.stakeholder-card-squared.selected[b-k856uj2jvn] {
    background: #eab308;
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
    transform: translateY(-2px);
}

.stakeholder-card-squared:hover[b-k856uj2jvn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stakeholder-avatar-circle[b-k856uj2jvn] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stakeholder-img[b-k856uj2jvn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder.person-icon[b-k856uj2jvn] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 700;
    font-size: 18px;
}

.stakeholder-card-name[b-k856uj2jvn] {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 12px;
    height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stakeholder-stats-row[b-k856uj2jvn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto; /* Empuja las estadísticas al fondo */
    min-height: 20px;
}


.stat-pill[b-k856uj2jvn] {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}
/* /xShared/Components/Selectors/PickerDropdown.razor.rz.scp.css */
.st-native-selector[b-h0ipyym3p7] {
    position: relative;
    width: 100%;
    cursor: pointer;
    min-height: 48px;
    outline: none;
    user-select: none;
    z-index: 50;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.st-native-selector-trigger[b-h0ipyym3p7] {
    background: #ebf1f7;
    border: 1px solid rgba(51, 73, 102, 0.12);
    border-radius: 12px;
    padding: 0 44px 0 16px;
    height: 48px;
    display: flex;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.st-native-selector:hover .st-native-selector-trigger[b-h0ipyym3p7],
.st-native-selector.is-open .st-native-selector-trigger[b-h0ipyym3p7] {
    border-color: #D33BB2;
    box-shadow: 0 4px 12px rgba(211, 59, 178, 0.08);
}

.st-native-selector.is-open[b-h0ipyym3p7] {
    z-index: 2000;
}

/* Solo lectura: mismo tratamiento que PickerTrigger.is-disabled */
.st-native-selector.is-disabled[b-h0ipyym3p7] {
    cursor: not-allowed;
    opacity: 0.6;
}

.st-native-selector.is-disabled .st-native-selector-trigger[b-h0ipyym3p7] {
    background: #f1f5f9;
}

.st-native-selector.is-disabled:hover .st-native-selector-trigger[b-h0ipyym3p7] {
    border-color: rgba(51, 73, 102, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.st-native-selector-value[b-h0ipyym3p7] {
    width: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #334966;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.st-native-selector.is-empty .st-native-selector-value[b-h0ipyym3p7] {
    color: #94a3b8;
    font-weight: 500;
}

.st-native-selector-arrow-container[b-h0ipyym3p7] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-native-selector-pink-triangle[b-h0ipyym3p7] {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #D33BB2;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.st-native-selector-pink-triangle.up[b-h0ipyym3p7] {
    transform: rotate(180deg);
}

/* Dropdown list */
.st-native-selector-dropdown[b-h0ipyym3p7] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #1f2f45;
    /* Color del select de tiempo */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    /* Permite scroll si hay muchos ítems */
    max-height: 280px;
    /* Evita que la lista se salga de la pantalla */
    animation: st-selector-slide-down-b-h0ipyym3p7 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;

    /* Ocultamos la barra de scroll visualmente */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.st-native-selector-dropdown[b-h0ipyym3p7]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, etc. */
}

@keyframes st-selector-slide-down-b-h0ipyym3p7 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.st-native-selector-search[b-h0ipyym3p7] {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 1001;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.st-native-selector-search-input[b-h0ipyym3p7] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 13.5px;
    outline: none;
    transition: all 0.2s;
}

.st-native-selector-search-input:focus[b-h0ipyym3p7] {
    border-color: rgba(211, 59, 178, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.st-native-selector-search-input[b-h0ipyym3p7]::placeholder {
    color: #94a3b8;
}

.st-native-selector-item[b-h0ipyym3p7] {
    padding: 12px 16px;
    font-size: 13.5px;
    color: #e2e8f0;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.st-native-selector-item:last-child[b-h0ipyym3p7] {
    border-bottom: none;
}

.st-native-selector-item:hover[b-h0ipyym3p7] {
    background: rgba(211, 59, 178, 0.15);
    /* Magenta sutil */
    color: #ffffff;
    padding-left: 20px;
    /* Micro-animación */
}

.st-native-selector-item.selected[b-h0ipyym3p7] {
    background: rgba(211, 59, 178, 0.12);
    /* Transparente magenta */
    color: #D33BB2;
    font-weight: 700;
}

/* ── Variante clara (Light=true): popup blanco estilo lista, acento magenta clarito, hover gris ── */
.st-native-selector.light .st-native-selector-dropdown[b-h0ipyym3p7] {
    background: #ffffff;
    border: 1px solid rgba(51, 73, 102, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.st-native-selector.light .st-native-selector-item[b-h0ipyym3p7] {
    color: #334966;
    border-bottom: 1px solid #f1f5f9;
}

.st-native-selector.light .st-native-selector-search[b-h0ipyym3p7] {
    border-bottom: 1px solid #f1f5f9;
    background: rgba(255, 255, 255, 0.95);
}

.st-native-selector.light .st-native-selector-search-input[b-h0ipyym3p7] {
    background: #f8fafc;
    border: 1px solid rgba(51, 73, 102, 0.12);
    color: #334966;
}

.st-native-selector.light .st-native-selector-search-input:focus[b-h0ipyym3p7] {
    border-color: #D33BB2;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(211, 59, 178, 0.1);
}

.st-native-selector.light .st-native-selector-item:hover[b-h0ipyym3p7] {
    background: #f3f4f6;
    /* gris clarito */
    color: #334966;
    padding-left: 20px;
}

.st-native-selector.light .st-native-selector-item.selected[b-h0ipyym3p7] {
    background: #fbe9f6;
    /* magenta clarito */
    color: #D33BB2;
    font-weight: 700;
}

.st-native-selector.light .st-native-selector-item.selected:hover[b-h0ipyym3p7] {
    background: #f7dff0;
}

/* ── Variante oscura (Dark=true): fondo translúcido, bordes sutiles para panel glassmorphism ── */
.st-native-selector.dark .st-native-selector-trigger[b-h0ipyym3p7] {
    background: #1f2f45;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.st-native-selector.dark:hover .st-native-selector-trigger[b-h0ipyym3p7],
.st-native-selector.dark.is-open .st-native-selector-trigger[b-h0ipyym3p7] {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.st-native-selector.dark .st-native-selector-value[b-h0ipyym3p7] {
    color: #e2e8f0;
}

.st-native-selector.dark.is-empty .st-native-selector-value[b-h0ipyym3p7] {
    color: #94a3b8;
}

.st-native-selector.dark .st-native-selector-dropdown[b-h0ipyym3p7] {
    background: #1f2f45;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* /xShared/Components/Selectors/PickerMultiSelect.razor.rz.scp.css */
[b-zcbzpou2bp] .multi-select-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    background: #1f2f45;
    margin-top: 8px;
}
[b-zcbzpou2bp] .multi-select-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 12px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.2s;
    margin-bottom: 2px;
}
[b-zcbzpou2bp] .multi-select-item span {
    flex: 1 1 auto;
    line-height: 1.2;
}
[b-zcbzpou2bp] .multi-select-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
[b-zcbzpou2bp] .multi-select-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
[b-zcbzpou2bp] .multi-select-item input[type="checkbox"]:checked {
    background: #d33bb2;
    border-color: #d33bb2;
}
[b-zcbzpou2bp] .multi-select-item input[type="checkbox"]:checked::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}
/* /xShared/Components/Selectors/PickerTime.razor.rz.scp.css */
.st-time-wheel-picker[b-i9m2hqqaj7] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 210px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    overflow: hidden;
    
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.st-time-wheel-picker.visible[b-i9m2hqqaj7] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.st-time-wheel-picker.inline[b-i9m2hqqaj7] {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
}

.st-time-wheel-container[b-i9m2hqqaj7] {
    padding: 4px;
    display: flex;
    justify-content: center;
    position: relative;
    height: 190px; /* Alrededor de 5 items */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* Spacer should be half the container height minus half an item height */
.st-time-wheel-spacer[b-i9m2hqqaj7] {
    min-height: 76px; /* 190/2 - 38/2 = 95 - 19 = 76 */
}

/* The gradient overlays are now replaced by native mask-image on the container */

.st-time-wheel-highlight[b-i9m2hqqaj7] {
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 38px;
    transform: translateY(-50%);
    background: rgba(254, 0, 228, 0.15); /* Rosadito theme FE00E4 */
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.st-time-wheel-column[b-i9m2hqqaj7] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; /* Firefox */
}

.st-time-wheel-column[b-i9m2hqqaj7]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.st-time-wheel-item[b-i9m2hqqaj7] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    width: 100%;
    scroll-snap-align: center;
    transition: all 0.2s;
    z-index: 3;
}

.st-time-wheel-item.active[b-i9m2hqqaj7] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.st-time-wheel-footer[b-i9m2hqqaj7] {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(30, 41, 59, 0.5);
}

.st-time-wheel-btn[b-i9m2hqqaj7] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.st-time-wheel-btn.cancel[b-i9m2hqqaj7] {
    color: #ef4444;
}

.st-time-wheel-btn.confirm[b-i9m2hqqaj7] {
    color: #10b981;
}

.st-time-wheel-btn:hover[b-i9m2hqqaj7] {
    background: rgba(255, 255, 255, 0.05);
}

.st-time-wheel-btn:active[b-i9m2hqqaj7] {
    background: rgba(255, 255, 255, 0.1);
}
/* /xShared/Components/Selectors/PickerTrigger.razor.rz.scp.css */
.st-picker-trigger[b-i9pbmkhmt7] {
    cursor: pointer;
    width: 100%;
    background: #ebf1f7;
    border: 1px solid rgba(51, 73, 102, 0.1);
    border-radius: 12px;
    padding: 10px 44px 10px 44px;
    min-height: 46px;
    user-select: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.st-picker-trigger.has-icon-right[b-i9pbmkhmt7] {
    padding: 10px 56px 10px 14px;
}

.st-picker-trigger:hover[b-i9pbmkhmt7] {
    border-color: #D33BB2;
    box-shadow: 0 0 0 3px rgba(211, 59, 178, 0.08);
}

.st-picker-value[b-i9pbmkhmt7] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334966;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.st-picker-trigger.is-empty .st-picker-value[b-i9pbmkhmt7] {
    color: #94a3b8;
    font-weight: 500;
}

.st-picker-icon-container[b-i9pbmkhmt7] {
    position: absolute;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none;
    overflow: hidden;
}

.st-picker-icon-container.is-right[b-i9pbmkhmt7] {
    position: relative;
    left: auto;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.st-picker-icon-container.avatar-mode[b-i9pbmkhmt7] {
    background: #cbd5e1;
}

.st-picker-icon-container.avatar-mode .st-picker-img[b-i9pbmkhmt7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-picker-icon-container.process-mode[b-i9pbmkhmt7] {
    background: white;
    border: 1px solid #cbd5e1;
}

.st-picker-icon-container.process-mode .st-picker-img[b-i9pbmkhmt7] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}

.st-picker-initials[b-i9pbmkhmt7] {
    font-size: 13px;
    font-weight: 700;
    color: #334966;
}

.st-picker-empty-process[b-i9pbmkhmt7] {
    width: 14px;
    height: 14px;
    background: #cbd5e1;
    border-radius: 50%;
}

.st-picker-overlay[b-i9pbmkhmt7] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 5;
}

.st-picker-pink-triangle[b-i9pbmkhmt7] {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #D33BB2;
    margin-top: 2px;
}

.st-picker-trigger.is-disabled[b-i9pbmkhmt7] {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f1f5f9;
}

.st-picker-spinner[b-i9pbmkhmt7] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(211, 59, 178, 0.2);
    border-radius: 50%;
    border-top-color: #D33BB2;
    animation: stPickerSpin-b-i9pbmkhmt7 0.8s linear infinite;
}

@keyframes stPickerSpin-b-i9pbmkhmt7 {
    to { transform: rotate(360deg); }
}
/* /xShared/Components/Sidebars/LeftSidebar.razor.rz.scp.css */
/* ============================================================
   LeftSidebar — Shell genérico (ESTÁNDAR CON REPORTES)
   ============================================================ */

/* MOUNT RULE: the panel is `position: absolute` against `.dashboard-container` (fixed, inset 0),
   so it must be rendered at the root of Home / DynamicPanel — never inside `.dynamic-panel`
   (or any ancestor with transform / overflow:hidden / border-radius). Mounted inside a board
   card it gets clipped to that card's rounded inset frame instead of spanning the viewport. */

/* Fondo difuminado detrás del panel (opt-in vía ShowBackdrop). Cubre todo el
   viewport y queda por debajo del panel (z-index 28) pero por encima del contenido,
   enfocando el formulario y bloqueando la interacción con lo de atrás. */
/* El fondo difuminado (background + blur) lo aporta la clase global .st-blurred-backdrop
   (app.css). Aquí solo va posición/z-index/transición propios de este panel. */
.slide-panel-backdrop[b-8n2fhcekzx] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* `left` and `clip-path` come inline from BackdropLeftStyle: the backdrop starts just inside
       the panel's right edge (so the rounded-corner cut-outs get dimmed too) and the panel's
       silhouette is carved out of it, so it never tints the panel nor the NavMenu. */
    /* Por encima de todo el contenido del Home (capas en z ~1000-2000) para que el blur no
       quede tapado, pero por debajo de los modales (Anular/Terminar en 9999+). El backdrop
       solo existe cuando ShowBackdrop=true (forms de crear/editar), así que no afecta los
       usos normales del LeftSidebar. */
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
    cursor: pointer;
}

.slide-panel-backdrop.open[b-8n2fhcekzx] {
    opacity: 1;
    visibility: visible;
}

.slide-panel[b-8n2fhcekzx] {
    position: absolute;
    /* Edge to edge vertically, like the NavMenu it slides out of (no gap above/below: it would
       show the shadow and read as a margin). `top/bottom` instead of `height: 100vh` so mobile
       browser bars never push the bottom off screen (see .dashboard-container). */
    top: 0;
    bottom: 0;
    left: -500px;
    /* The ONE width of every side panel in the app (432 visible + 12 under the NavMenu).
       Mirrored in LeftSidebar.razor (PanelWidth): change both together. */
    width: 444px;
    background: #1f2f45;
    /* Color exacto del NavMenu */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Mirrored in LeftSidebar.razor (CornerRadius): the backdrop carves this silhouette out. */
    border-radius: 0 16px 16px 0;
    padding: 20px 15px 15px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease-in-out,
        visibility 0.4s ease-in-out;

    visibility: hidden;
    opacity: 0;
    z-index: 28;
    /* Restauramos a 28 para que la animación pase por debajo del NavMenu (30) */
    box-shadow: 15px 0 35px rgba(0, 0, 0, 0.4);
}

.slide-panel.open[b-8n2fhcekzx] {
    visibility: visible;
    opacity: 1;
}

/* .slide-panel.has-backdrop.open {
    z-index: 9995;
} */

/* ===== Variante "ho-create-sidebar" =====
   Para alojar formularios de creación (Proceso/Entrega/Persona) del wizard de entrega, que vive
   dentro de .expanded-card-view (un containing block por su transform/backdrop-filter). Cambios:
   - position:fixed → se posiciona contra el viewport una vez que el contenedor neutraliza su
     transform/filter (regla .expanded-card-view.high-z-index), igual que el resto de LeftSidebars.
   - z-index alto → por encima del backdrop (9990) y del contenido del Home.
   - se fuerza a una sola columna el ProcessEditPanel (su 2-columnas depende del ancho de
     viewport, no del contenedor, y no cabría en el panel). El ancho es el estándar del shell. */
.slide-panel.ho-create-sidebar[b-8n2fhcekzx] {
    position: fixed;
    z-index: 10000;
}

.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .pe-columns {
    flex-direction: column;
}

.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .pe-handovers-column {
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding-left: 0;
    padding-top: 24px;
    width: 100%;
}

/* El host (LeftSidebar) ya muestra el título + subtítulo del formulario en su cabecera.
   Ocultamos la cabecera interna de cada formulario para evitar el doble encabezado y
   lograr una presentación limpia de un solo título. */
.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .pe-header,
.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .ue-header {
    display: none;
}

/* La tarjeta blanca del formulario ocupa el ancho del panel sin límites internos. */
.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .pe-form-column,
.slide-panel.ho-create-sidebar[b-8n2fhcekzx]  .process-edit-panel {
    max-width: 500px;
    min-width: 0;
    flex: 1 1 auto;
}

.slide-panel-back-btn[b-8n2fhcekzx] {
    position: absolute;
    top: -8px;
    /* Compensación para padding 20px (12 - 20 = -8) */
    left: -3px;
    /* Compensación para padding 15px (12 - 15 = -3) */
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    /* Blanco por defecto */
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    z-index: 10;
}

.slide-panel-close-btn[b-8n2fhcekzx] {
    position: absolute;
    top: -8px;
    /* Compensación para padding 20px (12 - 20 = -8) */
    right: -3px;
    /* Compensación para padding 15px (12 - 15 = -3) */
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    /* Blanco por defecto */
    cursor: pointer;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    z-index: 10;
}

/* ---- Header ---- */
.slide-panel-header[b-8n2fhcekzx] {
    display: flex;
    flex-direction: column;
    /* Cambiamos a columna para centrar sin interferencia de botones */
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    position: relative;
    width: 100%;
}

.slide-panel-back-btn:hover[b-8n2fhcekzx],
.slide-panel-close-btn:hover[b-8n2fhcekzx] {
    background: rgba(255, 255, 255, 0.05);
    /* El círculo aparece solo en hover */
    border-color: rgba(255, 255, 255, 0.1);
    color: #D33BB2;
    /* Color magenta en hover */
    transform: scale(1.05);
}

.slide-panel-close-btn:disabled[b-8n2fhcekzx] {
    opacity: 0.45;
    cursor: not-allowed;
}

.slide-panel:focus-visible[b-8n2fhcekzx],
.slide-panel-back-btn:focus-visible[b-8n2fhcekzx],
.slide-panel-close-btn:focus-visible[b-8n2fhcekzx] {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

/* El espaciador ya no es necesario con el nuevo layout de columna */
.slide-panel-header-spacer[b-8n2fhcekzx] {
    display: none;
}

.slide-panel-title-block[b-8n2fhcekzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    margin-top: 15px;
    /* Bajamos solo los textos */
    box-sizing: border-box;
}

/* Custom header (opt-in via HeaderContent): full width, left aligned, and kept clear of the
   absolutely positioned close button on the right. */
.slide-panel-custom-header[b-8n2fhcekzx] {
    width: 100%;
    box-sizing: border-box;
    padding-right: 40px;
    text-align: left;
}

.slide-panel-label[b-8n2fhcekzx] {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #64748b;
    text-transform: uppercase;
    font-family: 'Segoe UI', sans-serif;
}

.slide-panel-loading-text[b-8n2fhcekzx] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

.slide-panel-subtitle[b-8n2fhcekzx] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', sans-serif;
}

.slide-panel-description[b-8n2fhcekzx] {
    margin: 6px auto 0 auto;
    /* Centrado automático */
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.4;
    font-family: 'Segoe UI', sans-serif;
    max-width: 280px;
    animation: slidePanelDescInit-b-8n2fhcekzx 0.8s ease-out backwards;
    animation-delay: 0.2s;
}

@keyframes slidePanelDescInit-b-8n2fhcekzx {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Botón cerrar (X)  ---- */
/* El hover ya está agrupado arriba */

/* ---- Body ---- */
.slide-panel-body[b-8n2fhcekzx] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 16px;
    padding-bottom: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

.slide-panel-body.is-loading[b-8n2fhcekzx] {
    overflow: hidden !important;
}

/* ===== Variante "flush" (opt-in via Flush) =====
   Edge-to-edge layout for list/detail drawers (metrics drawer of the control boards): the
   content brings its own paddings, so the shell drops its inner padding, the header bottom
   margin and the body gap. The back/close buttons move inside the header area. */
.slide-panel.slide-panel--flush[b-8n2fhcekzx] {
    padding: 0;
}

.slide-panel.slide-panel--flush .slide-panel-header[b-8n2fhcekzx] {
    margin-bottom: 0;
}

/* 24px centers the 32px button on a 20px-padded, two-line header row (label + title). */
.slide-panel.slide-panel--flush .slide-panel-back-btn[b-8n2fhcekzx] {
    top: 24px;
    left: 16px;
}

.slide-panel.slide-panel--flush .slide-panel-close-btn[b-8n2fhcekzx] {
    top: 24px;
    right: 16px;
}

/* The consumer's header owns the paddings (and must leave room on the right for the close button). */
.slide-panel.slide-panel--flush .slide-panel-custom-header[b-8n2fhcekzx] {
    padding-right: 0;
}

.slide-panel.slide-panel--flush .slide-panel-body[b-8n2fhcekzx] {
    gap: 0;
    padding: 0;
}

/* Hide scrollbar for all browsers */
.slide-panel[b-8n2fhcekzx],
.slide-panel-body[b-8n2fhcekzx] {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.slide-panel[b-8n2fhcekzx]::-webkit-scrollbar,
.slide-panel-body[b-8n2fhcekzx]::-webkit-scrollbar {
    display: none;
}

/* ---- Loading Spinner Estándar ---- */
.slide-panel-full-loading[b-8n2fhcekzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
    color: #fff;
}

.caf-btn-spinner[b-8n2fhcekzx] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(211, 59, 178, 0.2);
    border-radius: 50%;
    border-top-color: #D33BB2;
    animation: caf-spin-b-8n2fhcekzx 0.8s ease-in-out infinite;
    display: inline-block;
}

.caf-btn-spinner-sm[b-8n2fhcekzx] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: caf-spin-b-8n2fhcekzx 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* ---- Botones Estándar (Globales vía ::deep) ---- */
[b-8n2fhcekzx] .caf-btn-cancel,
[b-8n2fhcekzx] .caf-btn-secondary,
[b-8n2fhcekzx] .caf-btn-next {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-wrap: nowrap;
}

[b-8n2fhcekzx] .caf-btn-cancel {
    background: #ffffff;
    color: #24354b;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

[b-8n2fhcekzx] .caf-btn-cancel:hover {
    background: #f9fafb;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

[b-8n2fhcekzx] .caf-btn-secondary {
    background: #152233;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-8n2fhcekzx] .caf-btn-secondary:hover {
    background: #1f2f45;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

[b-8n2fhcekzx] .caf-btn-next {
    background: #e500cd;
    color: white;
}

[b-8n2fhcekzx] .caf-btn-next:hover:not(:disabled) {
    background: #cc00b6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(229, 0, 205, 0.35);
}

[b-8n2fhcekzx] .caf-btn-next:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-8n2fhcekzx] .caf-btn-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: caf-spin-b-8n2fhcekzx 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes caf-spin-b-8n2fhcekzx {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide-panel[b-8n2fhcekzx],
    .slide-panel-backdrop[b-8n2fhcekzx],
    .slide-panel-description[b-8n2fhcekzx],
    .slide-panel-back-btn[b-8n2fhcekzx],
    .slide-panel-close-btn[b-8n2fhcekzx] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /xShared/Components/Sidebars/PickerSidebarDate.razor.rz.scp.css */
.st-picker-date-container[b-2y267wydsp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.st-picker-sidebar-subtitle[b-2y267wydsp] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
    text-align: left;
}

.st-picker-calendar-wrapper[b-2y267wydsp] {
    flex: none;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Forzar que el flatpickr inline ocupe buen espacio y se reseten estilos intrusivos */
[b-2y267wydsp] .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Controles de mes y año */
[b-2y267wydsp] .flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Flechas a los extremos, mes al centro */
    margin-bottom: 12px;
    background: transparent !important;
    padding: 0 4px;
    /* Espacio para que las flechas no toquen el borde */
    width: 100% !important;
    box-sizing: border-box;
}

[b-2y267wydsp] .flatpickr-months .flatpickr-month {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    height: auto !important;
    color: #fff !important;
    fill: #fff !important;
}

/* Forzar que los contendores internos usen todo el espacio del Grid */
[b-2y267wydsp] .flatpickr-innerContainer,
[b-2y267wydsp] .flatpickr-rContainer {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

[b-2y267wydsp] .flatpickr-current-month {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    left: auto !important;
}

[b-2y267wydsp] .flatpickr-months .flatpickr-prev-month,
[b-2y267wydsp] .flatpickr-months .flatpickr-next-month {
    position: static !important;
    /* Quitar absoluto para que quede alineado perfecto con flex */
    height: auto !important;
    padding: 8px !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    fill: #94a3b8 !important;
    color: #94a3b8 !important;
}

[b-2y267wydsp] .flatpickr-months .flatpickr-prev-month:hover,
[b-2y267wydsp] .flatpickr-months .flatpickr-next-month:hover {
    fill: #FE00E4 !important;
    background: rgba(254, 0, 228, 0.1);
}

[b-2y267wydsp] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    /* Quitamos el recuadro gris feo */
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    appearance: none;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s;
}

[b-2y267wydsp] .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    color: #FE00E4;
}

[b-2y267wydsp] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #0f172a;
    color: #fff;
}

/* Wrapper del año */
[b-2y267wydsp] .flatpickr-current-month .numInputWrapper {
    width: 6ch;
    margin-left: 4px;
}

[b-2y267wydsp] .flatpickr-current-month input.cur-year {
    background: transparent !important;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.2s;
}

[b-2y267wydsp] .flatpickr-current-month input.cur-year:hover {
    color: #FE00E4;
}

/* --- Alineación de Días de la Semana usando GRID --- */
[b-2y267wydsp] .flatpickr-weekdays {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    background: transparent !important;
    height: auto !important;
    /* resetear alturas locas de flatpickr */
}

[b-2y267wydsp] .flatpickr-weekdaycontainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100%;
    background: transparent !important;
    /* quitar si habia gris */
}

[b-2y267wydsp] span.flatpickr-weekday {
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: transparent !important;
    /* Quitar cualquier fondo heredado de themes */
    margin: 0 !important;
    padding: 0 !important;
}

/* Alineación de los Días usando GRID */
[b-2y267wydsp] .flatpickr-days {
    width: 100% !important;
    display: flex;
    justify-content: center;
    border: none !important;
    padding: 6px 0 !important;
    overflow: visible !important;
}

[b-2y267wydsp] .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    justify-items: center;
    gap: 8px 0;
    /* Espaciado vertical entre filas */
    box-shadow: none !important;
}

/* Estilo individual de cada día */
[b-2y267wydsp] .flatpickr-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    color: #e2e8f0;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Días de otros meses */
[b-2y267wydsp] .flatpickr-day.prevMonthDay,
[b-2y267wydsp] .flatpickr-day.nextMonthDay {
    color: #475569;
}

/* Hover de días */
[b-2y267wydsp] .flatpickr-day:hover {
    background: rgba(254, 0, 228, 0.15);
    border-color: rgba(254, 0, 228, 0.3);
    color: #fff;
}

/* Día Seleccionado con color #FE00E4 */
[b-2y267wydsp] .flatpickr-day.selected,
[b-2y267wydsp] .flatpickr-day.startRange,
[b-2y267wydsp] .flatpickr-day.endRange,
[b-2y267wydsp] .flatpickr-day.selected:focus,
[b-2y267wydsp] .flatpickr-day.selected:hover {
    background: #FE00E4 !important;
    border-color: #FE00E4 !important;
    color: #ffffff !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(254, 0, 228, 0.5);
    transform: scale(1.05);
    /* Efecto pop premium */
}

/* Hoy */
[b-2y267wydsp] .flatpickr-day.today {
    border-color: #FE00E4;
    border-width: 2px;
}

[b-2y267wydsp] .flatpickr-day.today:hover {
    border-color: #FE00E4;
}

/* Domingos: slate gray / cerrado / tachado cuando deshabilitado */
[b-2y267wydsp] .flatpickr-day.st-sunday-day {
    color: #94a3b8;
    position: relative;
}

[b-2y267wydsp] .flatpickr-day.st-sunday-day:not(.flatpickr-disabled):hover {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.35);
    color: #f1f5f9;
}

[b-2y267wydsp] .flatpickr-day.st-sunday-day.flatpickr-disabled,
[b-2y267wydsp] .flatpickr-day.st-sunday-day.flatpickr-disabled:hover {
    color: #64748b !important;
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: transparent !important;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Festivos oficiales: golden amber / festivo / indicador con punto */
[b-2y267wydsp] .flatpickr-day.st-holiday-day {
    color: #f59e0b !important;
    font-weight: 700;
    position: relative;
}

[b-2y267wydsp] .flatpickr-day.st-holiday-day::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.6);
}

[b-2y267wydsp] .flatpickr-day.st-holiday-day:not(.flatpickr-disabled):hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

[b-2y267wydsp] .flatpickr-day.st-holiday-day.flatpickr-disabled,
[b-2y267wydsp] .flatpickr-day.st-holiday-day.flatpickr-disabled:hover {
    color: #d97706 !important;
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.75;
}

[b-2y267wydsp] .flatpickr-day.st-holiday-day.selected {
    color: #ffffff !important;
}

[b-2y267wydsp] .flatpickr-day.st-holiday-day.selected::after {
    background-color: #ffffff;
    box-shadow: none;
}

/* Dia sugerido (resaltado especial) */
[b-2y267wydsp] .flatpickr-day.st-suggested-day {
    box-shadow: inset 0 0 0 2px #06b6d4 !important;
}

/* Acciones inferiores (Botones) */
.st-picker-date-actions[b-2y267wydsp] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: auto;
    padding-bottom: 20px;
}

.st-picker-date-actions .limpiar-btn[b-2y267wydsp] {
    width: auto;
    min-width: 120px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #24354b;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.st-picker-date-actions .limpiar-btn:hover[b-2y267wydsp] {
    background: #f9fafb;
    color: #24354b;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.st-picker-date-actions .aplicar-btn[b-2y267wydsp] {
    width: auto;
    min-width: 120px;
    background: #e500cd;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    padding: 10px 24px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.25);
}

.st-picker-date-actions .aplicar-btn:hover[b-2y267wydsp] {
    background: #cc00b6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(229, 0, 205, 0.35);
}

.st-picker-date-actions .aplicar-btn:active[b-2y267wydsp] {
    transform: translateY(0);
}
/* /xShared/Components/Sidebars/PickerSidebarSearch.razor.rz.scp.css */
.st-picker-sidebar-subtitle[b-quj25n6e1y] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 16px 0;
    text-transform: lowercase;
}

.st-picker-sidebar-empty[b-quj25n6e1y] {
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.st-picker-sidebar-spinner[b-quj25n6e1y] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(211, 59, 178, 0.2);
    border-radius: 50%;
    border-top-color: #D33BB2;
    animation: stPickerSidebarSpin-b-quj25n6e1y 0.8s linear infinite;
}

@keyframes stPickerSidebarSpin-b-quj25n6e1y {
    to { transform: rotate(360deg); }
}

.st-sidebar-search-container[b-quj25n6e1y] {
    margin-bottom: 12px;
}

.st-sidebar-search-input[b-quj25n6e1y] {
    width: 100%;
    background: #2a3a50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.st-sidebar-search-input[b-quj25n6e1y]::placeholder {
    color: #64748b;
}

.st-sidebar-search-input:focus[b-quj25n6e1y] {
    border-color: rgba(255, 255, 255, 0.2);
    background: #233145;
}

.st-picker-grid[b-quj25n6e1y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 0;
    overflow: visible;
}
/* /xShared/Components/Sidebars/PickerSidebarTime.razor.rz.scp.css */
.st-picker-date-container[b-a6stvrguzd] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.st-picker-sidebar-subtitle[b-a6stvrguzd] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
    text-align: left;
}


.st-picker-calendar-wrapper[b-a6stvrguzd] {
    flex: none;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Acciones inferiores (Botones) */
.st-picker-date-actions[b-a6stvrguzd] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: auto;
    padding-bottom: 20px;
}

.st-picker-date-actions .limpiar-btn[b-a6stvrguzd] {
    width: auto;
    min-width: 120px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #24354b;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.st-picker-date-actions .limpiar-btn:hover[b-a6stvrguzd] {
    background: #f9fafb;
    color: #24354b;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.st-picker-date-actions .aplicar-btn[b-a6stvrguzd] {
    width: auto;
    min-width: 120px;
    background: #e500cd;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    padding: 10px 24px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.25);
}

.st-picker-date-actions .aplicar-btn:hover[b-a6stvrguzd] {
    background: #cc00b6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(229, 0, 205, 0.35);
}

.st-picker-date-actions .aplicar-btn:active[b-a6stvrguzd] {
    transform: translateY(0);
}
/* /xShared/Components/Sidebars/RightSidebar.razor.rz.scp.css */
/* El fondo difuminado lo aporta la clase global .st-blurred-backdrop (app.css). */
.right-sidebar-overlay[b-1arlmy5aq4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 200000;
    /* Super alto para cubrir NavMenu y todo */
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.right-sidebar-overlay.open[b-1arlmy5aq4] {
    opacity: 1;
    visibility: visible;
}

.right-sidebar-content[b-1arlmy5aq4] {
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background: #1f2f45;
    box-shadow: -15px 0 35px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-radius: 16px 0 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);

    /* Añadimos el padding del contenedor igual que en LeftSidebar */
    padding: 20px 15px 15px 15px;
    box-sizing: border-box;
}

.right-sidebar-content.open[b-1arlmy5aq4] {
    transform: translateX(0);
}

.right-sidebar-header[b-1arlmy5aq4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Align to bottom of header space */
    padding: 0 20px 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    min-height: 45px;
}

.right-sidebar-title[b-1arlmy5aq4] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.right-sidebar-close[b-1arlmy5aq4] {
    position: absolute;
    top: -12px;
    right: -8px;
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    cursor: pointer;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.right-sidebar-close:hover[b-1arlmy5aq4] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #D33BB2;
    transform: scale(1.05);
}

.right-sidebar-body[b-1arlmy5aq4] {
    flex: 1;
    overflow-y: auto;
    padding: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar for right sidebar body */
.right-sidebar-body[b-1arlmy5aq4]::-webkit-scrollbar {
    width: 6px;
}

.right-sidebar-body[b-1arlmy5aq4]::-webkit-scrollbar-track {
    background: transparent;
}

.right-sidebar-body[b-1arlmy5aq4]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.right-sidebar-body[b-1arlmy5aq4]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .right-sidebar-content[b-1arlmy5aq4] {
        width: 100%;
    }
}
/* /xShared/Components/ToggleSwitch.razor.rz.scp.css */
.st-toggle[b-hpb69o7hpd] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.st-toggle input[b-hpb69o7hpd] {
    opacity: 0;
    width: 0;
    height: 0;
}

.st-toggle-slider[b-hpb69o7hpd] {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.st-toggle-slider[b-hpb69o7hpd]::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.st-toggle input:checked + .st-toggle-slider[b-hpb69o7hpd] {
    background-color: #4CAF50;
}

.st-toggle input:checked + .st-toggle-slider[b-hpb69o7hpd]::before {
    transform: translateX(20px);
}

.st-toggle.is-disabled[b-hpb69o7hpd] {
    opacity: 0.6;
}

.st-toggle.is-disabled .st-toggle-slider[b-hpb69o7hpd] {
    cursor: not-allowed;
}