/* /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: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;
}

/* 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;
}

/* 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 - NO overflow hidden */
.asset-number[b-ho3s8n2ruk] {
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 780;
    color: #1f2f45;
    text-align: left;
    line-height: 1;
    letter-spacing: -0.3px;
    margin: 0px 0px 2px 0px; /* Reducido para unirlo a la fecha */
}

/* 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;
}

/* 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: linear-gradient(135deg, #ec4899 0%, #d946ef 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(236, 72, 153, 0.5);
    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);
    box-shadow: 0 5px 16px rgba(236, 72, 153, 0.6);
}

/* 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;
}

/* 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);
}

/* Dropdown Overlay */
.dropdown-overlay[b-ho3s8n2ruk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 49;
    background: transparent;
    cursor: default;
}

.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 */
/* /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: hidden;
    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: 16px;
}

/* Scrollable content area */
.asset-scrollable-content[b-lo59djkmmu] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    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: 16/10;
    border-radius: 12px;
    overflow: hidden;
    background: #F5F5F5;
}

/* Back Button Overlay - Subtle and Professional */
.back-btn-overlay[b-lo59djkmmu] {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 3;
}

.back-btn-overlay:hover[b-lo59djkmmu] {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.05);
}

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

.back-btn-overlay svg[b-lo59djkmmu] {
    opacity: 0.9;
}

.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);
}

.progress-badge[b-lo59djkmmu] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    backdrop-filter: blur(4px);
}

.progress-badge.progress-on-time[b-lo59djkmmu] {
    background: linear-gradient(135deg, #86D26D 0%, #a8e094 100%);
}

.progress-badge.progress-at-risk[b-lo59djkmmu] {
    background: linear-gradient(135deg, #FFD255 0%, #ffe07a 100%);
}

.progress-badge.progress-delayed[b-lo59djkmmu] {
    background: linear-gradient(135deg, #FB7E7E 0%, #fca0a0 100%);
}

.progress-badge.progress-neutral[b-lo59djkmmu] {
    background: linear-gradient(135deg, #ACACAC 0%, #c8c8c8 100%);
}

.estimation-badge[b-lo59djkmmu] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #e500cd;
    backdrop-filter: blur(4px);
    border-radius: 20px;
    color: white;
    font-size: 0.7rem;
}

.estimation-badge .estimation-label[b-lo59djkmmu] {
    opacity: 0.9;
}

.estimation-badge .estimation-value[b-lo59djkmmu] {
    font-weight: 600;
}

.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: 12px;
}

.asset-info-header[b-lo59djkmmu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.asset-number[b-lo59djkmmu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #3D5676;
    margin: 0;
    letter-spacing: 1px;
    padding-top: 4px;

}

/* ─── 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;
    height: 70px;
    width: 80px;
    padding: 0;
    opacity: 1;
}

.date-label[b-lo59djkmmu] {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

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

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

.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: 8px;
}

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

.spec-label[b-lo59djkmmu] {
    font-size: 0.7rem;
    color: #3D5676;
    text-transform: capitalize;
}

.spec-value[b-lo59djkmmu] {
    font-size: 0.85rem;
    color: #3D5676;
    font-weight: 600;
}

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

.worker-avatar[b-lo59djkmmu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px 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: #E8E8E8;
    color: rgba(0, 0, 0, 0.4);
}

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

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

.worker-role[b-lo59djkmmu] {
    font-size: 0.75rem;
    color: #888888;
}

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

.time-value[b-lo59djkmmu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3D5676;
}

.time-label[b-lo59djkmmu] {
    font-size: 0.65rem;
    color: #888888;
}

/* Action Buttons Row (Asignar + Entrega) */
.action-buttons-row[b-lo59djkmmu] {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Estilo base compartido para ambos botones */
.assign-btn[b-lo59djkmmu],
.handover-btn[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 14px;
    background: #FE00E4;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.25);
}

.assign-btn:hover[b-lo59djkmmu],
.handover-btn:hover[b-lo59djkmmu] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(254, 0, 228, 0.35);
}

.assign-btn:active[b-lo59djkmmu],
.handover-btn:active[b-lo59djkmmu] {
    transform: translateY(0);
}

/* Botón Editar — azul cobalto, coherente con Asignar/Entrega */
.edit-btn[b-lo59djkmmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30);
}

.edit-btn:hover[b-lo59djkmmu] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.42);
}

.edit-btn:active[b-lo59djkmmu] {
    transform: translateY(0);
}

/* 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;
}
/* /Pages/Home/Components/AssetDetail/Charts/BurndownChart.razor.rz.scp.css */
.burndown-chart-container[b-j1dw6kg7gd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.chart-loading[b-j1dw6kg7gd],

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

.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] {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    min-height: 250px;
}

.burndown-footer[b-j1dw6kg7gd] {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background: #f1f5f9;
    /* Un tono un poco más oscuro para que resalte */
    border-radius: 10px;
    font-size: 0.75rem;
    border: 1px solid #cbd5e1;
    /* Borde más definido */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Sombra suave */
}

.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: #3b82f6;
}

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

/* Cambiado a naranja para coincidir con la línea */

.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: 8px;
    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 */
}

/* 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: hidden;
    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;
}

.timeline-assign-btn[b-1u3781oj2d] {
    padding: 8px 20px;
    background: #e5b900;
    border: none;
    border-radius: 8px;
    color: #1f2f45;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-assign-btn:hover[b-1u3781oj2d] {
    background: #cc9f00;
    transform: translateY(-1px);
}

/* 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 */
.timeline-item[b-1u3781oj2d] {
    display: flex;
    gap: 0;
    position: relative;
    min-height: 80px;
}

.timeline-item.has-branches[b-1u3781oj2d] {
    min-height: 120px;
}

/* Timeline Line - Vertical Left */
.timeline-line[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
    position: relative;
}

.line-top[b-1u3781oj2d],
.line-bottom[b-1u3781oj2d] {
    width: 3px;
    flex: 1;
    min-height: 20px;
}

.line-executed[b-1u3781oj2d] {
    background: #e5b900;
}

.line-pending[b-1u3781oj2d] {
    background: #e5b90054;
}

.timeline-item.first .line-top[b-1u3781oj2d] {
    background: transparent;
}

.timeline-item.last .line-bottom[b-1u3781oj2d] {
    background: transparent;
}

/* Timeline Node */
.timeline-node[b-1u3781oj2d] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    background-color: #e5b900;
}

.timeline-node.executed[b-1u3781oj2d] {
    background: #3D5676;
    color: white;
    box-shadow: 0 4px 12px rgb(78 135 205 / 40%);
}

.timeline-node.current[b-1u3781oj2d] {
    background: linear-gradient(135deg, #FFB347 0%, #FFCC33 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 179, 71, 0.4);
    animation: pulse-b-1u3781oj2d 2s infinite;
}

.timeline-node.assigned[b-1u3781oj2d] {
    background: #db8080;
    border: 2px solid #d95e5e;
    color: #ffffff;
}

.current-indicator[b-1u3781oj2d] {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: pulse-inner-b-1u3781oj2d 2s infinite;
}

@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;
    }
}

/* Timeline Content Wrapper */
.timeline-content-wrapper[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

/* Timeline Date */
.timeline-date[b-1u3781oj2d] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 50px;
    flex-shrink: 0;
    padding-top: 4px;
}

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

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

/* Timeline Main Content */
.timeline-main-content[b-1u3781oj2d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

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

.timeline-card.executed[b-1u3781oj2d] {
    border-color: rgb(78 117 205 / 40%);
    background: rgb(78 123 205 / 8%);
}

.timeline-card.current[b-1u3781oj2d] {
    border-color: rgba(255, 179, 71, 0.5);
    background: rgba(255, 179, 71, 0.08);
    box-shadow: 0 4px 16px rgba(255, 179, 71, 0.15);
}

.timeline-card.assigned[b-1u3781oj2d] {
    opacity: 0.7;
}

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

.process-icon[b-1u3781oj2d] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    background: #F0F0F0;
    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: 2px;
}

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

.process-reason[b-1u3781oj2d] {
    font-size: 0.75rem;
    color: #666666;
}

.process-observations[b-1u3781oj2d] {
    font-size: 0.65rem;
    color: #888888;
    line-height: 1.2;
    margin-top: 2px;
}

/* Action Icons */
.action-icons[b-1u3781oj2d] {
    display: flex;
    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] {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    border-color: #D0D0D0;
}

.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: 36px;
    height: 36px;
    border-radius: 18px;
    border: 2px solid;
    overflow: hidden;
    background: #FFFFFF;
    flex-shrink: 0;
}

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

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

.evidence-badge[b-1u3781oj2d] {
    position: absolute;
    bottom: 8px;
    right: 12px;
    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.expanded .evidence-badge[b-1u3781oj2d] {
    opacity: 0;
    visibility: hidden;
}

/* ── 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;
}
/* /Pages/Home/Components/AssetDetail/WorkOrderDetailPanel.razor.rz.scp.css */
.workorder-detail-panel[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    flex: 1;
    min-width: 280px;
    overflow-y: auto;
    position: relative;
    padding-top: 20px;
    /* Space for the tab to protrude */
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.workorder-detail-panel[b-rwhcxlm4dx]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* The folder tab - small protruding tab on top left */
.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;
}

.edit-btn[b-rwhcxlm4dx] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #3D5676;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.edit-btn:hover[b-rwhcxlm4dx] {
    color: #e5b900;
    transform: scale(1.1);
}

/* WorkOrder Section - main folder body */
.workorder-section[b-rwhcxlm4dx] {
    background: #E1E1E1;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 12px;
}

/* Metrics Section (above WorkOrder) */
.metrics-section[b-rwhcxlm4dx] {
    background: #ffffff;
    border-radius: 0 16px 16px 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #E8E8E8;
    border-top: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    /* Ancla el burndown-delay-block del componente hijo */
}

.metrics-header[b-rwhcxlm4dx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metrics-title[b-rwhcxlm4dx] {
    font-size: 1rem;
    font-weight: 600;
    color: #3D5676;
    margin: 0;
}

.metrics-expand-btn[b-rwhcxlm4dx] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(61, 86, 118, 0.1);
    border: none;
    border-radius: 6px;
    color: #3D5676;
    cursor: pointer;
    transition: all 0.2s ease;
}

.metrics-expand-btn:hover[b-rwhcxlm4dx] {
    background: rgba(61, 86, 118, 0.2);
}

.metrics-placeholder[b-rwhcxlm4dx] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.metrics-chart-placeholder[b-rwhcxlm4dx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #F8F9FA;
    border-radius: 12px;
    border: 1px dashed #D0D0D0;
    color: #888888;
    font-size: 0.85rem;
    min-height: 150px;
}

.see-more-btn[b-rwhcxlm4dx] {
    align-self: flex-end;
    margin-top: 12px;
    padding: 8px 16px;
    background: #FE00E4;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.see-more-btn:hover[b-rwhcxlm4dx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}

.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: grid;
    grid-template-columns: 1fr 200px;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 12px;
    gap: 16px;
}

.badges-and-actions[b-rwhcxlm4dx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
}

.round-badges-container[b-rwhcxlm4dx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    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);
    cursor: default !important;
}

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

.circuit-badge[b-rwhcxlm4dx] {
    background: linear-gradient(135deg, #d97706, #e5b900);
}

@media (max-width: 640px) {
    .responsible-header-row[b-rwhcxlm4dx] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .badges-and-actions[b-rwhcxlm4dx] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        gap: 16px;
        margin-top: 4px;
    }

    .responsible-info[b-rwhcxlm4dx] {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

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

    .responsible-name[b-rwhcxlm4dx] {
        font-size: 0.85rem;
        word-break: break-word;
    }

    .round-badges-container[b-rwhcxlm4dx] {
        justify-content: flex-end;
        gap: 8px;
        flex-shrink: 0;
    }

    .edit-order-btn[b-rwhcxlm4dx] {
        flex: 1;
        justify-content: center;
        width: auto;
        margin-top: 0;
    }
}

.process-main-row[b-rwhcxlm4dx] {
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.edit-order-btn[b-rwhcxlm4dx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.edit-order-btn:hover[b-rwhcxlm4dx] {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.edit-order-btn svg[b-rwhcxlm4dx] {
    color: white;
}

.process-status[b-rwhcxlm4dx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.process-label[b-rwhcxlm4dx] {
    font-size: 0.7rem;
    color: #888888;
}

.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;
}

/* Círculo contenedor del icono de proceso */
.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 compacto a la derecha del proceso */
.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);
}

/* Old level badges removed in favor of round badges */

/* 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;
    text-transform: none;
    letter-spacing: 0.5px;
    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;
    }
}

/* 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;
}

/* 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;
}

/* Dates Section en cuadritos/cajas separadas */
.dates-container-row[b-rwhcxlm4dx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

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

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

.date-label[b-rwhcxlm4dx] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #888888;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

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

.date-month[b-rwhcxlm4dx] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #FE00E4;
    /* Magenta como la segunda imagen */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.date-month.no-date[b-rwhcxlm4dx] {
    color: #94a3b8;
    /* Gris para nulo */
}

/* 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;
}

/* Metrics Section is now on top */

.metrics-header[b-rwhcxlm4dx] {
    margin-bottom: 8px;
    /* Espacio moderado entre el título y las tarjetas */
}

.metrics-title[b-rwhcxlm4dx] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3D5676;
    margin: 0;
}
/* /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: calc(var(--ag-pagination-panel-height) + 10px);
}

.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: auto;
    overflow-y: hidden;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-subtable-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.85fr) minmax(0, 0.71fr) minmax(0, 0.82fr) minmax(0, 0.72fr) minmax(0, 1.51fr) minmax(0, 1.28fr) minmax(0, 1.28fr) minmax(0, 1.22fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 7px;
    width: 100%;
    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;
}

.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-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 3200;
    background: rgba(9, 22, 42, 0.35);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup {
    width: min(760px, calc(100vw - 36px));
    max-height: min(72vh, 640px);
    border-radius: 16px;
    border: 1px solid rgba(189, 208, 232, 0.88);
    background: linear-gradient(180deg, #f9fcff 0%, #edf4ff 100%);
    box-shadow: 0 22px 54px rgba(9, 28, 54, 0.34);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(186, 205, 228, 0.76);
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.98) 0%, rgba(229, 239, 252, 0.95) 100%);
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-title-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #153a66;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-subtitle {
    font-size: 0.8rem;
    color: #53759d;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(160, 187, 219, 0.9);
    background: #ffffff;
    color: #274d78;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-popup-body {
    padding: 12px 16px 16px;
    overflow: auto;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-loading,
.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-empty {
    min-height: 132px;
    border-radius: 12px;
    border: 1px dashed rgba(162, 186, 214, 0.82);
    background: rgba(255, 255, 255, 0.76);
    color: #33577f;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.84rem;
    font-weight: 600;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item {
    display: grid;
    grid-template-columns: 24px minmax(86px, 108px) minmax(0, 1fr);
    gap: 11px;
    align-items: stretch;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-line {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-line::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: -11px;
    width: 2px;
    background: rgba(155, 179, 206, 0.78);
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item:last-child .st-inbox-timeline-line::after {
    display: none;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    margin-top: 6px;
    border: 2px solid #98b3d3;
    background: #f4f9ff;
    z-index: 1;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-executed .st-inbox-timeline-dot {
    border-color: #32a86f;
    background: #4ec58d;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-current .st-inbox-timeline-dot {
    border-color: #2f6bb0;
    background: #4b8ed6;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-assigned .st-inbox-timeline-dot {
    border-color: #9cb3cf;
    background: #dce8f7;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    color: #3b5e86;
    font-size: 0.74rem;
    font-weight: 700;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-main {
    border-radius: 12px;
    border: 1px solid rgba(178, 198, 221, 0.86);
    background: rgba(255, 255, 255, 0.88);
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process-avatar,
.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-person-avatar {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    border: 1px solid #cadbee;
    background: #edf4fe;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process-avatar-fallback,
.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-person-avatar-fallback {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1a456f;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process-name {
    font-size: 0.83rem;
    font-weight: 800;
    color: #163b66;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-process-reason {
    font-size: 0.74rem;
    font-weight: 600;
    color: #5d7592;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-state-chip {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-executed .st-inbox-timeline-state-chip {
    background: rgba(58, 166, 114, 0.16);
    color: #1d7f52;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-current .st-inbox-timeline-state-chip {
    background: rgba(49, 115, 187, 0.16);
    color: #255d98;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-item-assigned .st-inbox-timeline-state-chip {
    background: rgba(121, 145, 174, 0.16);
    color: #4f6886;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #24466f;
    min-width: 0;
}

.inbox-table-resizable[b-pkxxgmxhpa]  .st-inbox-timeline-person span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.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;
}

.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 {
    color: #ffffff !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: var(--ag-secondary-foreground-color) !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;
    text-align: center;
    min-width: 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;
}

/* 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;
}

.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-order-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.inbox-table-grid[b-pkxxgmxhpa]  .st-inbox-order-chip {
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9f0fb;
    color: #1c4673;
    font-size: clamp(0.64rem, 0.6rem + 0.1vw, 0.74rem);
    font-weight: 700;
}

.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-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-grid {
        gap: 4px;
    }

    .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-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;
}

/* ===== 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: 0 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-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: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    margin-bottom: 2px;
    transform: scaleX(1.05);
}

.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% + 10px);
    right: 0;
    background: rgba(30, 41, 59, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hop-wo-item[b-y0v5gexn1j] {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
}

.hop-wo-item:hover[b-y0v5gexn1j] {
    background: rgba(255, 255, 255, 0.1);
}

.hop-wo-item.active[b-y0v5gexn1j] {
    background: #eab308;
}

.hop-wo-number[b-y0v5gexn1j] {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.hop-wo-insurance[b-y0v5gexn1j] {
    font-size: 11px;
    color: #94a3b8;
}

.hop-wo-item.active .hop-wo-insurance[b-y0v5gexn1j] {
    color: rgba(255, 255, 255, 0.85);
}

.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;
}


/* ===== 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.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;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    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;
    background: rgba(0, 0, 0, 0.5);
    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)
   ───────────────────────────────────────────── */
/* /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;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    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-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/AuthorizationPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   AuthorizationPanel.razor.css
   Réplica visual de AutorizationPopup.xaml (MAUI)
   Colores: SystimeBlueLigth (#1E3A5F), SystimeBlueUltraLigth (#2A4A6E),
            SystimeViolet (#7B68EE), SystimeGold (#D4A857), SystimeBlueDart (#1A2B3C)
   ═══════════════════════════════════════════════════════════════════════════ */

.authorization-panel[b-iu95llzvd7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
    padding: 4px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.auth-header[b-iu95llzvd7] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1E3A5F, #2A4A6E);
    border-radius: 20px;
    padding: 14px 18px;
    min-height: 52px;
}

.auth-header-icon[b-iu95llzvd7] {
    color: white;
    flex-shrink: 0;
}

.auth-header-title[b-iu95llzvd7] {
    font-size: 18px;
    font-weight: 700;
    color: white;
    flex: 1;
}

.auth-header-badge[b-iu95llzvd7] {
    background: #E57373;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
    animation: pulse-badge-b-iu95llzvd7 2s ease-in-out infinite;
}

@keyframes pulse-badge-b-iu95llzvd7 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ── Tabs ── */
.auth-tabs[b-iu95llzvd7] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    background: #2A4A6E;
    border-radius: 20px;
    padding: 4px;
    min-height: 38px;
}

.auth-tab[b-iu95llzvd7] {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    border-radius: 17px;
    padding: 6px 4px;
    text-align: center;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .auth-tab:hover[b-iu95llzvd7] {
        background: #e5b9007d;
    }

    .auth-tab.active[b-iu95llzvd7] {
        background: #e5b900;
    }

.tab-count[b-iu95llzvd7] {
    font-size: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.pending-count[b-iu95llzvd7] {
    background: rgba(229, 115, 115, 0.5);
}

/* ── Content ── */
.auth-content[b-iu95llzvd7] {
    flex: 1;
    background: linear-gradient(135deg, #1E3A5F, #1A2B3C);
    border-radius: 20px;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Loading ── */
.auth-loading[b-iu95llzvd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
    color: white;
    font-size: 14px;
}

.auth-spinner[b-iu95llzvd7] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #7B68EE;
    border-radius: 50%;
    animation: spin-b-iu95llzvd7 0.8s linear infinite;
}

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

/* ── Empty state ── */
.auth-empty[b-iu95llzvd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    text-align: center;
}

.auth-empty-icon[b-iu95llzvd7] {
    color: rgba(255,255,255,0.3);
}

.auth-empty-title[b-iu95llzvd7] {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.auth-empty-subtitle[b-iu95llzvd7] {
    font-size: 14px;
    font-style: italic;
    color: rgba(255,255,255,0.7);
}

/* ── Card ── */
.auth-card[b-iu95llzvd7] {
    background: #FFF3E0;
    border-radius: 20px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    flex-shrink: 0;
}

.auth-card:hover[b-iu95llzvd7] {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.auth-card.reclaim-card[b-iu95llzvd7] {
    background: #E8F5E9;
}

[b-iu95llzvd7] .auth-card-header {
    display: grid;
    grid-template-columns: 115px 1fr auto 1fr;
    gap: 4px;
    padding: 6px;
    cursor: pointer;
    align-items: start;
}

/* ── Asset section (Col 0) ── */
[b-iu95llzvd7] .auth-asset-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-iu95llzvd7] .auth-asset-image-container {
    position: relative;
    width: 110px;
    height: 85px;
    border-radius: 15px;
    overflow: hidden;
    background: #1A2B3C;
}

[b-iu95llzvd7] .auth-asset-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-iu95llzvd7] .auth-asset-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
}

[b-iu95llzvd7] .auth-elapsed-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: 20px;
}

[b-iu95llzvd7] .auth-elapsed-badge .elapsed-value {
    font-size: 13px;
    font-weight: 700;
    color: white;
}

[b-iu95llzvd7] .auth-elapsed-badge .elapsed-suffix {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

[b-iu95llzvd7] .elapsed-green { background: #4CAF50; }
[b-iu95llzvd7] .elapsed-orange { background: #FF9800; }
[b-iu95llzvd7] .elapsed-red { background: #F44336; }

[b-iu95llzvd7] .auth-asset-info {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
}

[b-iu95llzvd7] .auth-asset-number {
    font-size: 14px;
    font-weight: 700;
    color: #1A2B3C;
}

[b-iu95llzvd7] .auth-asset-date {
    font-size: 10px;
    color: gray;
}

/* ── Person sections (Col 1 & 3) ── */
[b-iu95llzvd7] .auth-person-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

[b-iu95llzvd7] .auth-avatar-pair {
    position: relative;
    width: 50px;
    height: 50px;
}

[b-iu95llzvd7] .auth-process-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-iu95llzvd7] .auth-process-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    padding: 6px;
}

[b-iu95llzvd7] .auth-person-mini-avatar {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #D4A857;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-iu95llzvd7] .auth-person-mini-avatar .mini-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-iu95llzvd7] .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.avatar-placeholder.process[b-iu95llzvd7] {
    padding: 6px;
    color: #1A2B3C;
}

.avatar-placeholder.person[b-iu95llzvd7] {
    color: #1A2B3C;
}

[b-iu95llzvd7] .auth-process-name {
    font-size: 10px;
    font-weight: 700;
    color: #1A2B3C;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-iu95llzvd7] .auth-person-name {
    font-size: 10px;
    color: gray;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Action buttons ── */
[b-iu95llzvd7] .auth-action-btn {
    all: unset;
    cursor: pointer;
    margin-top: 10px;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-align: center;
    transition: all 0.2s ease;
}

[b-iu95llzvd7] .auth-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-iu95llzvd7] .reject-btn {
    background: #E57373;
}

[b-iu95llzvd7] .reject-btn:hover:not(:disabled) {
    background: #EF5350;
    box-shadow: 0 2px 8px rgba(229, 115, 115, 0.4);
}

[b-iu95llzvd7] .accept-btn {
    background: #81C784;
}

[b-iu95llzvd7] .accept-btn:hover:not(:disabled) {
    background: #66BB6A;
    box-shadow: 0 2px 8px rgba(129, 199, 132, 0.4);
}

/* ── Arrow section (Col 2) ── */
[b-iu95llzvd7] .auth-arrow-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 3px;
    min-width: 30px;
}

[b-iu95llzvd7] .auth-direction-arrow {
    color: #1A2B3C;
    padding: 8px 0 4px;
}

[b-iu95llzvd7] .auth-vertical-separator {
    width: 1.5px;
    flex: 1;
    min-height: 30px;
    background: rgba(26, 43, 60, 0.4);
}

[b-iu95llzvd7] .auth-status-label {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 0;
    text-align: center;
}

[b-iu95llzvd7] .status-accepted {
    color: #81C784;
}

[b-iu95llzvd7] .status-rejected {
    color: #E57373;
}

/* ── Expandable content ── */
[b-iu95llzvd7] .auth-card-expanded {
    background: linear-gradient(135deg, #1E3A5F, #1A2B3C);
    border-radius: 0 0 20px 20px;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-iu95llzvd7] .auth-expanded-divider {
    height: 1.5px;
    background: rgba(212, 168, 87, 0.6);
}

[b-iu95llzvd7] .auth-expanded-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-iu95llzvd7] .auth-expanded-label {
    font-size: 12px;
    font-weight: 700;
    color: #D4A857;
}

[b-iu95llzvd7] .auth-expanded-text {
    font-size: 13px;
    color: white;
}

[b-iu95llzvd7] .auth-expanded-empty {
    font-size: 13px;
    font-style: italic;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 8px 0;
}

[b-iu95llzvd7] .auth-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

[b-iu95llzvd7] .auth-photo-item {
    border-radius: 8px;
    overflow: hidden;
    height: 90px;
    background: rgba(0,0,0,0.2);
}

[b-iu95llzvd7] .auth-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Dialogs ── */
.auth-dialog-overlay[b-iu95llzvd7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-iu95llzvd7 0.2s ease;
}

@keyframes fadeIn-b-iu95llzvd7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth-dialog[b-iu95llzvd7] {
    background: linear-gradient(135deg, #1E3A5F, #2A4A6E);
    border-radius: 20px;
    padding: 24px;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-iu95llzvd7 0.3s ease;
}

@keyframes slideUp-b-iu95llzvd7 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.auth-dialog-title[b-iu95llzvd7] {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.auth-dialog-message[b-iu95llzvd7] {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-dialog-actions[b-iu95llzvd7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.auth-dialog-btn[b-iu95llzvd7] {
    all: unset;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-dialog-btn.cancel[b-iu95llzvd7] {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
}

.auth-dialog-btn.cancel:hover[b-iu95llzvd7] {
    background: rgba(255,255,255,0.15);
}

.auth-dialog-btn.confirm[b-iu95llzvd7] {
    color: white;
    background: #7B68EE;
}

.auth-dialog-btn.confirm:hover[b-iu95llzvd7] {
    background: #6A5ACD;
    box-shadow: 0 4px 12px rgba(123, 104, 238, 0.4);
}

.auth-dialog-btn:disabled[b-iu95llzvd7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-iu95llzvd7] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-iu95llzvd7 0.6s linear infinite;
    display: inline-block;
}

/* ── Scrollbar ── */
.auth-content[b-iu95llzvd7]::-webkit-scrollbar {
    width: 4px;
}

.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: 4px;
}

.auth-content[b-iu95llzvd7]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

[b-iu95llzvd7] .auth-load-more {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    margin-top: 4px;
    flex-shrink: 0;
}

[b-iu95llzvd7] .load-more-btn {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    padding: 8px 16px;
    transition: all 0.2s;
}

[b-iu95llzvd7] .load-more-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Home/Components/CenterDialog.razor.rz.scp.css */
/* Overlay ocupa todo para centrar */
.st-dialog-overlay[b-i6t5lluulg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    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/Collision/AssetDefinitionEditModal.razor.rz.scp.css */
.assetdef-overlay[b-zc8forw1dc] {
    position: fixed;
    top: 0;
    left: 80px;
    width: calc(100vw - 80px);
    height: 100vh;
    background-color: rgba(3, 10, 22, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    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);
}

.assetdef-overlay.sidebar-collapsed[b-zc8forw1dc] {
    left: 0px;
    width: 100%;
}

.assetdef-modal[b-zc8forw1dc] {
    background-color: #ffffff;
    border-radius: 20px;
    width: 700px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInScale-b-zc8forw1dc 0.3s ease-out;
    overflow: hidden;
}

@keyframes fadeInScale-b-zc8forw1dc {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.assetdef-header[b-zc8forw1dc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 32px 16px;
    border-bottom: 1px solid #E8EBED;
}

.header-title[b-zc8forw1dc] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
}

.header-subtitle[b-zc8forw1dc] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: #8898AA;
    font-weight: 500;
}

.btn-close-modal[b-zc8forw1dc] {
    background: transparent;
    border: none;
    color: #8898AA;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    transition: all 0.2s;
}

.btn-close-modal:hover[b-zc8forw1dc] {
    background: #F1F4F8;
    color: #334D6E;
}

.assetdef-body[b-zc8forw1dc] {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.alert[b-zc8forw1dc] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.alert-danger[b-zc8forw1dc] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.form-grid[b-zc8forw1dc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group[b-zc8forw1dc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-zc8forw1dc] {
    grid-column: 1 / -1;
}

.form-label[b-zc8forw1dc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334D6E;
}

.form-label .required[b-zc8forw1dc] {
    color: #ef4444;
    margin-left: 2px;
}

.form-control[b-zc8forw1dc] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D6DADE;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.form-control:focus[b-zc8forw1dc] {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:disabled[b-zc8forw1dc] {
    background: #F1F4F8;
    color: #8898AA;
    cursor: not-allowed;
}

.form-control[b-zc8forw1dc]::placeholder {
    color: #A0AAB4;
}

textarea.form-control[b-zc8forw1dc] {
    resize: vertical;
    min-height: 80px;
}

.checkbox-group[b-zc8forw1dc] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-checkbox[b-zc8forw1dc] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input[type="checkbox"][b-zc8forw1dc] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3B82F6;
}

.form-checkbox span[b-zc8forw1dc] {
    font-size: 0.9rem;
    color: #334D6E;
}

.form-checkbox input[type="checkbox"]:disabled[b-zc8forw1dc] {
    cursor: not-allowed;
}

.assetdef-footer[b-zc8forw1dc] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-zc8forw1dc] {
    padding: 10px 24px;
    background: #F1F4F8;
    color: #334D6E;
    border: 1px solid #D6DADE;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.btn-secondary:hover[b-zc8forw1dc] {
    background: #E8EBED;
}

.btn-secondary:disabled[b-zc8forw1dc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-zc8forw1dc] {
    padding: 10px 24px;
    background: #3B82F6;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}

.btn-primary:hover[b-zc8forw1dc] {
    background: #2563EB;
}

.btn-primary:disabled[b-zc8forw1dc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-zc8forw1dc] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-zc8forw1dc 0.6s linear infinite;
}

@keyframes spin-b-zc8forw1dc {
    to { transform: rotate(360deg); }
}
/* /Pages/Home/Components/Collision/AssetEditModal.razor.rz.scp.css */
.asset-overlay[b-3lfox7cq6i] {
    position: fixed;
    top: 0;
    left: 80px;
    width: calc(100vw - 80px);
    height: 100vh;
    background-color: rgba(3, 10, 22, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    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);
}

.asset-overlay.sidebar-collapsed[b-3lfox7cq6i] {
    left: 0px;
    width: 100%;
}

.asset-modal[b-3lfox7cq6i] {
    background-color: #ffffff;
    border-radius: 20px;
    width: 800px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInScale-b-3lfox7cq6i 0.3s ease-out;
    overflow: hidden;
}

@keyframes fadeInScale-b-3lfox7cq6i {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.asset-header[b-3lfox7cq6i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 32px 16px;
    border-bottom: 1px solid #E8EBED;
}

.header-title[b-3lfox7cq6i] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
}

.header-subtitle[b-3lfox7cq6i] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: #8898AA;
    font-weight: 500;
}

.btn-close-modal[b-3lfox7cq6i] {
    background: transparent;
    border: none;
    color: #8898AA;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    transition: all 0.2s;
}

.btn-close-modal:hover[b-3lfox7cq6i] {
    background: #F1F4F8;
    color: #334D6E;
}

.asset-body[b-3lfox7cq6i] {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.alert[b-3lfox7cq6i] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.alert-danger[b-3lfox7cq6i] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.form-grid[b-3lfox7cq6i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group[b-3lfox7cq6i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-3lfox7cq6i] {
    grid-column: 1 / -1;
}

.form-label[b-3lfox7cq6i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334D6E;
}

.form-label .required[b-3lfox7cq6i] {
    color: #ef4444;
    margin-left: 2px;
}

.form-control[b-3lfox7cq6i] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D6DADE;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #334D6E;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.form-control:focus[b-3lfox7cq6i] {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:disabled[b-3lfox7cq6i] {
    background: #F1F4F8;
    color: #8898AA;
    cursor: not-allowed;
}

.form-control[b-3lfox7cq6i]::placeholder {
    color: #A0AAB4;
}

textarea.form-control[b-3lfox7cq6i] {
    resize: vertical;
    min-height: 80px;
}

.form-checkbox[b-3lfox7cq6i] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input[type="checkbox"][b-3lfox7cq6i] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3B82F6;
}

.form-checkbox span[b-3lfox7cq6i] {
    font-size: 0.9rem;
    color: #334D6E;
}

.form-checkbox input[type="checkbox"]:disabled[b-3lfox7cq6i] {
    cursor: not-allowed;
}

.asset-footer[b-3lfox7cq6i] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-3lfox7cq6i] {
    padding: 10px 24px;
    background: #F1F4F8;
    color: #334D6E;
    border: 1px solid #D6DADE;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.btn-secondary:hover[b-3lfox7cq6i] {
    background: #E8EBED;
}

.btn-secondary:disabled[b-3lfox7cq6i] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-3lfox7cq6i] {
    padding: 10px 24px;
    background: #3B82F6;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}

.btn-primary:hover[b-3lfox7cq6i] {
    background: #2563EB;
}

.btn-primary:disabled[b-3lfox7cq6i] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-3lfox7cq6i] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-3lfox7cq6i 0.6s linear infinite;
}

@keyframes spin-b-3lfox7cq6i {
    to { transform: rotate(360deg); }
}
/* /Pages/Home/Components/Collision/CollisionPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   CollisionPanel — Stepper & Layout Principal (Light SaaS)
   ═══════════════════════════════════════════════════════════ */

.collision-panel[b-d664u11dq9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 36px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background: #f4f5f7;
    position: relative;
}

/* SysColor overlay — cubre el panel completo */
.syscolor-overlay[b-d664u11dq9] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    animation: sc-slide-in-b-d664u11dq9 0.3s ease;
}

@keyframes sc-slide-in-b-d664u11dq9 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.stepper-header[b-d664u11dq9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.stepper-title-section[b-d664u11dq9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.collision-icon-wrapper[b-d664u11dq9] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.panel-title[b-d664u11dq9] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.panel-subtitle[b-d664u11dq9] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 2px 0 0;
    font-weight: 500;
}

.close-panel-btn[b-d664u11dq9] {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.close-panel-btn:hover[b-d664u11dq9] {
    background: #e2e8f0;
    color: #0f172a;
}

/* ── Stepper Navigation (Clean Tab Style) ── */
.stepper-nav[b-d664u11dq9] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 6px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.stepper-nav[b-d664u11dq9]::-webkit-scrollbar { display: none; }

.step-item[b-d664u11dq9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.step-circle[b-d664u11dq9] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.step-item.active[b-d664u11dq9] {
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.step-item.active .step-circle[b-d664u11dq9] {
    background: #3b82f6;
    color: white;
}

.step-item.completed .step-circle[b-d664u11dq9] {
    background: #10b981;
    color: white;
}

.step-label[b-d664u11dq9] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.step-item.active .step-label[b-d664u11dq9] {
    color: #0f172a;
    font-weight: 600;
}

.step-item.completed .step-label[b-d664u11dq9] {
    color: #10b981;
}

.step-connector[b-d664u11dq9] {
    width: 16px;
    height: 1px;
    background: #e2e8f0;
    margin: 0 8px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.step-connector.completed[b-d664u11dq9] {
    background: #10b981;
}

/* ── Step Content Area ── */
.step-content[b-d664u11dq9] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    animation: fadeInStep-b-d664u11dq9 0.3s ease;
    min-height: 0;
}

.step-content[b-d664u11dq9]::-webkit-scrollbar { width: 6px; }
.step-content[b-d664u11dq9]::-webkit-scrollbar-track { background: transparent; }
.step-content[b-d664u11dq9]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
.step-content[b-d664u11dq9]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@keyframes fadeInStep-b-d664u11dq9 {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/Home/Components/Collision/Steps/Step1_Reception.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 1 — Recepción / OBD2 + VIN (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-reception[b-5xhisxg6m5] {
    height: 100%;
}

.reception-grid[b-5xhisxg6m5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
}

/* ── Columna Izquierda ── */
.reception-left[b-5xhisxg6m5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.obd-card[b-5xhisxg6m5], .admin-card[b-5xhisxg6m5], .vehicle-card[b-5xhisxg6m5] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.obd-header[b-5xhisxg6m5] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.obd-icon[b-5xhisxg6m5] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.obd-header h3[b-5xhisxg6m5] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}

.obd-subtitle[b-5xhisxg6m5] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 2px 0 0;
}

/* ── VIN Input ── */
.vin-input-section[b-5xhisxg6m5] {
    margin-bottom: 20px;
}

.field-label[b-5xhisxg6m5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

.vin-field[b-5xhisxg6m5] {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.vin-input[b-5xhisxg6m5] {
    width: 100%;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 2px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

.vin-input:focus[b-5xhisxg6m5] {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Barra de escaneo animada */
.scan-bar[b-5xhisxg6m5] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
    animation: scanMove-b-5xhisxg6m5 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scanMove-b-5xhisxg6m5 {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ── Botón Escanear ── */
.scan-btn[b-5xhisxg6m5] {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    transition: all 0.2s ease;
    background: #f1f5f9;
    color: #3b82f6;
}

.scan-btn:hover:not(:disabled)[b-5xhisxg6m5] {
    background: #e2e8f0;
}

.scan-btn:disabled[b-5xhisxg6m5] {
    cursor: default;
    opacity: 0.6;
}

.scan-btn.scanning[b-5xhisxg6m5] {
    background: #3b82f6;
    color: white;
}

.scan-btn.scanned[b-5xhisxg6m5] {
    background: #10b981;
    color: white;
}

.btn-spinner[b-5xhisxg6m5] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5xhisxg6m5 0.8s linear infinite;
}

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

/* ── Dispositivo Info ── */
.obd-device-info[b-5xhisxg6m5] {
    margin-top: 12px;
}

.device-badge[b-5xhisxg6m5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #dcfce7;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #166534;
}

.device-dot[b-5xhisxg6m5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.device-hint[b-5xhisxg6m5] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Admin Card ── */
.card-section-title[b-5xhisxg6m5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px;
}

.card-section-title svg[b-5xhisxg6m5] {
    color: #64748b;
}

.admin-fields[b-5xhisxg6m5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-field[b-5xhisxg6m5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-value[b-5xhisxg6m5] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.field-value.highlight[b-5xhisxg6m5] {
    color: #3b82f6;
}

.field-value.mono[b-5xhisxg6m5] {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #475569;
}

/* ── Columna Derecha: Vehículo ── */
.reception-right[b-5xhisxg6m5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vehicle-card-header[b-5xhisxg6m5] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.vehicle-badge-success[b-5xhisxg6m5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #dcfce7;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #166534;
}

.vehicle-hero[b-5xhisxg6m5] {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.vehicle-name[b-5xhisxg6m5] {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}

.vehicle-trim[b-5xhisxg6m5] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
}

/* ── Specs Grid ── */
.vehicle-specs[b-5xhisxg6m5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spec-row[b-5xhisxg6m5] {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.spec-row:hover[b-5xhisxg6m5] {
    background: #f1f5f9;
}

.spec-icon[b-5xhisxg6m5] {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.spec-label[b-5xhisxg6m5] {
    flex: 1;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.spec-value[b-5xhisxg6m5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

/* ── Status Bar ── */
.vehicle-status-bar[b-5xhisxg6m5] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.status-chip[b-5xhisxg6m5] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-ok[b-5xhisxg6m5] {
    background: #dcfce7;
    color: #166534;
}

.status-danger[b-5xhisxg6m5] {
    background: #fee2e2;
    color: #991b1b;
}

.status-info[b-5xhisxg6m5] {
    background: #dbeafe;
    color: #1e40af;
}

/* ── Placeholder ── */
.vehicle-placeholder[b-5xhisxg6m5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    color: #94a3b8;
    min-height: 300px;
}

.placeholder-icon[b-5xhisxg6m5] {
    opacity: 0.5;
}

.vehicle-placeholder p[b-5xhisxg6m5] {
    font-size: 0.95rem;
    color: #64748b;
}

/* ── Botón Siguiente ── */
.next-step-btn[b-5xhisxg6m5] {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #111827;
    color: #ffffff;
    transition: all 0.2s ease;
}

.next-step-btn:hover[b-5xhisxg6m5] {
    background: #1f2937;
    transform: translateY(-1px);
}

.appear-animation[b-5xhisxg6m5] {
    animation: appearSlide-b-5xhisxg6m5 0.4s ease-out forwards;
}

@keyframes appearSlide-b-5xhisxg6m5 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/Home/Components/Collision/Steps/Step2_Diagnosis.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 2 — Diagnóstico Visual v2 (2-Column + Modal)
   Diseñado para caber en viewport sin scroll
   ═══════════════════════════════════════════════════════════ */

.step-diagnosis-v2[b-77uif2it40] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ── */
.diagnosis-header[b-77uif2it40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.diagnosis-header h3[b-77uif2it40] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}

.diagnosis-subtitle[b-77uif2it40] {
    font-size: 0.78rem;
    color: #64748b;
    margin: 2px 0 0;
}

.damage-counter[b-77uif2it40] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #fef2f2;
    border-radius: 10px;
}

.counter-number[b-77uif2it40] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ef4444;
}

.counter-label[b-77uif2it40] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ef4444;
}

/* ── Grid 2 columnas ── */
.diagnosis-grid[b-77uif2it40] {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Columna Izquierda: Visor ── */
.diagram-section[b-77uif2it40] {
    display: flex;
    flex-direction: column;
}

.diagram-card[b-77uif2it40] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.diagram-header-bar[b-77uif2it40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.diagram-title[b-77uif2it40] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
}

.severity-legend[b-77uif2it40] {
    display: flex;
    gap: 14px;
}

.legend-item[b-77uif2it40] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.legend-dot[b-77uif2it40] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}

.legend-dot.severe[b-77uif2it40] { background: #ef4444; }
.legend-dot.moderate[b-77uif2it40] { background: #f59e0b; }
.legend-dot.light[b-77uif2it40] { background: #3b82f6; }

/* ── View Controls ── */
.view-controls[b-77uif2it40] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
}

.view-arrow[b-77uif2it40] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-arrow:hover:not(:disabled)[b-77uif2it40] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.view-arrow:disabled[b-77uif2it40] {
    opacity: 0.3;
    cursor: not-allowed;
}

.view-info[b-77uif2it40] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.view-name[b-77uif2it40] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}

.view-dots[b-77uif2it40] {
    display: flex;
    gap: 5px;
}

.dot[b-77uif2it40] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.dot.active[b-77uif2it40] {
    background: #3b82f6;
    transform: scale(1.3);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ── SVG Stage ── */
.svg-stage[b-77uif2it40] {
    flex: 1;
    position: relative;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    min-height: 0;
    overflow: hidden;
}

.svg-viewport[b-77uif2it40] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.svg-viewport.fade-out[b-77uif2it40] { opacity: 0; transform: scale(0.97); }
.svg-viewport.fade-in[b-77uif2it40] { opacity: 1; transform: scale(1); }

/* ── Vehicle Image + Overlay ── */
[b-77uif2it40] .vehicle-view-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Escala imagen+overlay juntos para que el carro llene el espacio */
    transform: scale(1.4);
    transform-origin: center center;
}

[b-77uif2it40] .vehicle-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

[b-77uif2it40] .zone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

[b-77uif2it40] .zone-overlay g {
    pointer-events: all;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-77uif2it40] .zone-overlay g:hover path,
[b-77uif2it40] .zone-overlay g:hover ellipse,
[b-77uif2it40] .zone-overlay g:hover circle,
[b-77uif2it40] .zone-overlay g:hover rect {
    opacity: 0.55 !important;
    filter: brightness(0.92);
}

[b-77uif2it40] .zone-overlay g.selected path,
[b-77uif2it40] .zone-overlay g.selected ellipse,
[b-77uif2it40] .zone-overlay g.selected circle,
[b-77uif2it40] .zone-overlay g.selected rect {
    opacity: 0.5 !important;
    animation: zone-pulse-b-77uif2it40 1.5s ease-in-out infinite;
}

@keyframes zone-pulse-b-77uif2it40 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.65; }
}

[b-77uif2it40] .zone-label-overlay {
    font-size: 16px;
    font-weight: 700;
    fill: #1e293b;
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
}

[b-77uif2it40] .zone-label-overlay-sm {
    font-size: 12px;
    font-weight: 700;
    fill: #334155;
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
}

/* ── Instruction ── */
.instruction-hint[b-77uif2it40] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    flex-shrink: 0;
}

/* ── Columna Derecha: Lista de daños ── */
.damages-section[b-77uif2it40] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.damages-list[b-77uif2it40] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.damages-list[b-77uif2it40]::-webkit-scrollbar { width: 5px; }
.damages-list[b-77uif2it40]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }

.damage-item[b-77uif2it40] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.damage-item:hover[b-77uif2it40] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.damage-item.selected[b-77uif2it40] {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.damage-item-header[b-77uif2it40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.severity-badge[b-77uif2it40] {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.severity-badge.severe[b-77uif2it40] { background: #fef2f2; color: #dc2626; }
.severity-badge.moderate[b-77uif2it40] { background: #fffbeb; color: #d97706; }
.severity-badge.light[b-77uif2it40] { background: #eff6ff; color: #2563eb; }

.photo-count[b-77uif2it40] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #64748b;
}

.damage-zone-name[b-77uif2it40] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.damage-type[b-77uif2it40] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 3px;
}

.damage-notes[b-77uif2it40] {
    font-size: 0.72rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Botones Nav ── */
.step-nav-buttons[b-77uif2it40] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}

.nav-btn[b-77uif2it40] {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-77uif2it40] { background: #f1f5f9; color: #475569; }
.back-btn:hover[b-77uif2it40] { background: #e2e8f0; color: #0f172a; }
.next-btn[b-77uif2it40] { background: #111827; color: #ffffff; }
.next-btn:hover[b-77uif2it40] { background: #1f2937; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   Modal de Diagnóstico
   ═══════════════════════════════════════════════════════════ */
.diagnostic-modal-overlay[b-77uif2it40] {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-77uif2it40 0.2s ease-out;
}

.diagnostic-modal-content[b-77uif2it40] {
    background: #ffffff;
    width: 90%;
    max-width: 650px;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp-b-77uif2it40 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn-b-77uif2it40 { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideUp-b-77uif2it40 {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header[b-77uif2it40] {
    padding: 18px 22px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title-group[b-77uif2it40] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title-group h3[b-77uif2it40] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.severity-dot[b-77uif2it40] {
    width: 12px; height: 12px;
    border-radius: 50%;
}

.severity-dot.severe[b-77uif2it40] { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.4); }
.severity-dot.moderate[b-77uif2it40] { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.4); }
.severity-dot.light[b-77uif2it40] { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.4); }

.modal-close-btn[b-77uif2it40] {
    background: #f8fafc;
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.2s;
}

.modal-close-btn:hover[b-77uif2it40] { background: #f1f5f9; color: #0f172a; }

.modal-body[b-77uif2it40] {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-label[b-77uif2it40] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.damage-summary-card[b-77uif2it40] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.summary-row[b-77uif2it40] {
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.88rem;
}

.summary-label[b-77uif2it40] { color: #64748b; font-weight: 500; }
.summary-value[b-77uif2it40] { color: #0f172a; font-weight: 600; }
.summary-value.severe[b-77uif2it40] { color: #ef4444; }
.summary-value.moderate[b-77uif2it40] { color: #f97316; }
.summary-value.light[b-77uif2it40] { color: #3b82f6; }

.summary-notes[b-77uif2it40] {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}

.modal-grid[b-77uif2it40] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.photo-placeholder-grid[b-77uif2it40] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.photo-box[b-77uif2it40] {
    aspect-ratio: 1;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.photo-box:hover[b-77uif2it40] { background: #e2e8f0; border-color: #94a3b8; }
.photo-box.has-image[b-77uif2it40] { border: 1px solid #e2e8f0; }
.photo-box img[b-77uif2it40] { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.add-photo-icon[b-77uif2it40] { font-size: 1.5rem; color: #94a3b8; }

.modal-textarea[b-77uif2it40] {
    width: 100%;
    height: 140px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    font-family: inherit;
    font-size: 0.88rem;
    color: #0f172a;
    resize: none;
    outline: none;
    transition: all 0.2s;
}

.modal-textarea:focus[b-77uif2it40] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.modal-footer[b-77uif2it40] {
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-btn[b-77uif2it40] {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: 'Inter', sans-serif;
}

.modal-btn.primary[b-77uif2it40] { background: #111827; color: #ffffff; }
.modal-btn.primary:hover[b-77uif2it40] { background: #1f2937; transform: translateY(-1px); }
.modal-btn.secondary[b-77uif2it40] { background: #ffffff; color: #475569; border: 1px solid #e2e8f0; }
.modal-btn.secondary:hover[b-77uif2it40] { background: #f1f5f9; }
/* /Pages/Home/Components/Collision/Steps/Step3_Quotation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 3 — Cotización Base con Baremos (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-quotation[b-try6ux8frn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Header ── */
.quotation-header[b-try6ux8frn] { flex-shrink: 0; }

.quotation-title-row[b-try6ux8frn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.quotation-title-row h3[b-try6ux8frn] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}

.baremo-selector[b-try6ux8frn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.baremo-label[b-try6ux8frn] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.baremo-select[b-try6ux8frn] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    min-width: 200px;
    transition: all 0.2s ease;
}

.baremo-select:focus[b-try6ux8frn], .baremo-select:hover[b-try6ux8frn] {
    border-color: #cbd5e1;
}

/* ── Rates Bar ── */
.rates-bar[b-try6ux8frn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.rates-title[b-try6ux8frn] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-right: 8px;
}

.rate-chip[b-try6ux8frn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.rate-cat[b-try6ux8frn] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.rate-val[b-try6ux8frn] {
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 600;
}

/* ── KPI Row ── */
.kpi-row[b-try6ux8frn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex-shrink: 0;
}

.kpi-card[b-try6ux8frn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.kpi-icon[b-try6ux8frn] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.kpi-data[b-try6ux8frn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kpi-value[b-try6ux8frn] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-label[b-try6ux8frn] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Tabla ── */
.quotation-table-wrapper[b-try6ux8frn] {
    flex: 1;
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    min-height: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.quotation-table-wrapper[b-try6ux8frn]::-webkit-scrollbar { width: 6px; }
.quotation-table-wrapper[b-try6ux8frn]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.quotation-table[b-try6ux8frn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.quotation-table thead[b-try6ux8frn] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.quotation-table th[b-try6ux8frn] {
    padding: 14px 16px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.quotation-table td[b-try6ux8frn] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.quotation-table tbody tr:hover[b-try6ux8frn] {
    background: #f8fafc;
}

.highlight-row[b-try6ux8frn] {
    background: #fffbeb !important;
}

.col-num[b-try6ux8frn] { width: 40px; text-align: center; color: #94a3b8; }
.col-op[b-try6ux8frn] { min-width: 220px; font-weight: 500; color: #0f172a; }
.col-cat[b-try6ux8frn] { width: 120px; }
.col-num-r[b-try6ux8frn] { text-align: right; white-space: nowrap; }

.total-cell[b-try6ux8frn] { color: #0f172a !important; font-weight: 600; }

/* ── Category Badges ── */
.cat-badge[b-try6ux8frn] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.cat-body[b-try6ux8frn] { background: #eff6ff; color: #2563eb; }
.cat-paint[b-try6ux8frn] { background: #faf5ff; color: #9333ea; }
.cat-mech[b-try6ux8frn] { background: #ecfdf5; color: #059669; }
.cat-struct[b-try6ux8frn] { background: #fef2f2; color: #dc2626; }
.cat-diag[b-try6ux8frn] { background: #fffbeb; color: #d97706; }
.cat-mat[b-try6ux8frn] { background: #f1f5f9; color: #475569; }

/* ── Totals Row ── */
.totals-row[b-try6ux8frn] {
    background: #f8fafc !important;
}

.totals-row td[b-try6ux8frn] {
    font-weight: 700;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
}

.totals-label[b-try6ux8frn] {
    text-align: right !important;
    padding-right: 20px !important;
    font-size: 0.95rem;
}

/* ── Baremo Info ── */
.baremo-info-bar[b-try6ux8frn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #64748b;
    flex-shrink: 0;
}

.baremo-info-bar svg[b-try6ux8frn] { color: #3b82f6; flex-shrink: 0; }
.baremo-info-bar strong[b-try6ux8frn] { color: #0f172a; font-weight: 600; }

/* ── Navigation ── */
.step-nav-buttons[b-try6ux8frn] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.nav-btn[b-try6ux8frn] {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-try6ux8frn] {
    background: #f1f5f9;
    color: #475569;
    flex: 0.3;
}

.back-btn:hover[b-try6ux8frn] { background: #e2e8f0; color: #0f172a; }

.ai-btn[b-try6ux8frn] {
    background: #111827;
    color: white;
    flex: 0.7;
}

.ai-btn:hover[b-try6ux8frn] {
    background: #1f2937;
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Collision/Steps/Step4_AiAnalysis.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 4 — IA Forensic Analysis (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-ai[b-ltfmc5khnk] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Estado Analizando (Soft rings) ── */
.ai-analyzing[b-ltfmc5khnk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.ai-orb-container[b-ltfmc5khnk] {
    position: relative;
    width: 120px;
    height: 120px;
}

.ai-orb[b-ltfmc5khnk] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orb-core[b-ltfmc5khnk] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    animation: pulse-core-b-ltfmc5khnk 1.5s ease-in-out infinite;
}

@keyframes pulse-core-b-ltfmc5khnk {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); }
}

.orb-ring[b-ltfmc5khnk] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: orbit-b-ltfmc5khnk 3s linear infinite;
}

.ring-1[b-ltfmc5khnk] {
    width: 80px; height: 80px;
    top: 20px; left: 20px;
    border-top-color: #93c5fd;
    border-right-color: #dbeafe;
}

.ring-2[b-ltfmc5khnk] {
    width: 110px; height: 110px;
    top: 5px; left: 5px;
    border-top-color: #bfdbfe;
    border-left-color: #eff6ff;
    animation-duration: 4s;
    animation-direction: reverse;
}

@keyframes orbit-b-ltfmc5khnk { to { transform: rotate(360deg); } }

.ai-status-text[b-ltfmc5khnk] {
    text-align: center;
    max-width: 440px;
}

.ai-status-text h3[b-ltfmc5khnk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}

.analyzing-message[b-ltfmc5khnk] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 24px;
    min-height: 1.3em;
}

.progress-bar[b-ltfmc5khnk] {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}

.progress-fill[b-ltfmc5khnk] {
    height: 100%;
    background: #3b82f6;
    border-radius: 100px;
    transition: width 0.5s ease;
}

/* ── Resultados ── */
.ai-results[b-ltfmc5khnk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    animation: fadeInUp-b-ltfmc5khnk 0.5s ease;
}

@keyframes fadeInUp-b-ltfmc5khnk {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-result-header[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ai-avatar-section[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ai-mini-orb[b-ltfmc5khnk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-core[b-ltfmc5khnk] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    animation: pulse-core-b-ltfmc5khnk 2s ease-in-out infinite;
}

.ai-badge-row[b-ltfmc5khnk] {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.ai-badge[b-ltfmc5khnk], .forensic-badge[b-ltfmc5khnk] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #eff6ff;
    color: #2563eb;
}

.ai-result-header h3[b-ltfmc5khnk] {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}

.supplement-counter[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.supplement-number[b-ltfmc5khnk] {
    font-size: 2rem;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
}

.supplement-label[b-ltfmc5khnk] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.3;
}

/* ── Mensaje IA ── */
.ai-message-card[b-ltfmc5khnk] {
    padding: 16px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.ai-message-card p[b-ltfmc5khnk] {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
}

.ai-message-card strong[b-ltfmc5khnk] { color: #0f172a; font-weight: 600; }

/* ── Tabla Suplementos ── */
.supplement-table-wrapper[b-ltfmc5khnk] {
    flex-shrink: 0;
    min-height: 260px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    overflow: visible;
}

.supplement-table-wrapper[b-ltfmc5khnk]::-webkit-scrollbar { width: 6px; }
.supplement-table-wrapper[b-ltfmc5khnk]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.table-title-bar[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #f8fafc;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #e2e8f0;
}

.table-source[b-ltfmc5khnk] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.supplement-table[b-ltfmc5khnk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.supplement-table th[b-ltfmc5khnk] {
    padding: 12px 20px;
    background: #f8fafc;
    color: #475569;
    font-weight: 500;
    font-size: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.supplement-table td[b-ltfmc5khnk] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.supplement-row:hover[b-ltfmc5khnk] { background: #f8fafc; }

.ai-id-badge[b-ltfmc5khnk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 600;
}

.col-id[b-ltfmc5khnk] { width: 60px; }
.col-op[b-ltfmc5khnk] { font-weight: 500; color: #0f172a; }
.col-just[b-ltfmc5khnk] { max-width: 300px; }
.col-hr[b-ltfmc5khnk], .col-rate[b-ltfmc5khnk], .col-total[b-ltfmc5khnk] { text-align: right; }

.justification-text[b-ltfmc5khnk] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.supplement-totals td[b-ltfmc5khnk] {
    font-weight: 700;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.95rem;
}

/* ── Conclusión ── */
.conclusion-card[b-ltfmc5khnk] {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.conclusion-header[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #f8fafc;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}

.conclusion-body[b-ltfmc5khnk] {
    padding: 24px;
}

.conclusion-body p[b-ltfmc5khnk] {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 20px;
}

.highlight-green[b-ltfmc5khnk] { color: #10b981 !important; font-weight: 600; }

.conclusion-metrics[b-ltfmc5khnk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    justify-content: center;
}

.metric[b-ltfmc5khnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 28px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.metric-label[b-ltfmc5khnk] { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.metric-value[b-ltfmc5khnk] { font-size: 1.3rem; font-weight: 700; color: #0f172a; }
.supplement-val[b-ltfmc5khnk] { color: #3b82f6; }

.highlight-metric[b-ltfmc5khnk] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.highlight-metric .metric-value[b-ltfmc5khnk] { color: #2563eb; }

.metric-arrow[b-ltfmc5khnk] { color: #94a3b8; font-size: 1.2rem; }

.conclusion-recommendation[b-ltfmc5khnk] {
    padding: 14px 20px;
    background: #f0fdf4;
    border-radius: 12px;
    border-left: 4px solid #10b981;
}

.conclusion-recommendation strong[b-ltfmc5khnk] { color: #166534; font-weight: 600; }

/* ── Nav ── */
.step-nav-buttons[b-ltfmc5khnk] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.nav-btn[b-ltfmc5khnk] {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-ltfmc5khnk] {
    background: #f1f5f9;
    color: #475569;
    flex: 0.3;
}

.back-btn:hover[b-ltfmc5khnk] { background: #e2e8f0; color: #0f172a; }

.next-btn-gold[b-ltfmc5khnk] {
    background: #111827;
    color: #ffffff;
    flex: 0.7;
}

.next-btn-gold:hover[b-ltfmc5khnk] {
    background: #1f2937;
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Collision/Steps/Step5_EnhancedQuote.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 5 — Cotización Mejorada (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-enhanced[b-lp9qzq5tnb] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── KPIs ── */
.kpi-row-enhanced[b-lp9qzq5tnb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex-shrink: 0;
}

.kpi-card-e[b-lp9qzq5tnb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.kpi-icon-e[b-lp9qzq5tnb] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.kpi-data-e[b-lp9qzq5tnb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kpi-value-e[b-lp9qzq5tnb] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.kpi-delta[b-lp9qzq5tnb] {
    font-size: 0.8rem;
    font-weight: 600;
}

.kpi-delta.positive[b-lp9qzq5tnb] { color: #10b981; }
.kpi-delta.ai-delta[b-lp9qzq5tnb] { color: #3b82f6; }
.kpi-delta.neutral[b-lp9qzq5tnb] { color: #64748b; }

.kpi-label-e[b-lp9qzq5tnb] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Toggle ── */
.toggle-bar[b-lp9qzq5tnb] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toggle-btn[b-lp9qzq5tnb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-radius: 100px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.toggle-btn.active[b-lp9qzq5tnb] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

.toggle-indicator[b-lp9qzq5tnb] {
    width: 40px;
    height: 24px;
    border-radius: 12px;
    background: #e2e8f0;
    position: relative;
    transition: all 0.2s ease;
}

.toggle-indicator[b-lp9qzq5tnb]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.toggle-indicator.on[b-lp9qzq5tnb] {
    background: #3b82f6;
}

.toggle-indicator.on[b-lp9qzq5tnb]::after {
    left: 18px;
}

/* ── Tabla Consolidada ── */
.enhanced-table-wrapper[b-lp9qzq5tnb] {
    flex: 1;
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    min-height: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.enhanced-table-wrapper[b-lp9qzq5tnb]::-webkit-scrollbar { width: 6px; }
.enhanced-table-wrapper[b-lp9qzq5tnb]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.enhanced-table[b-lp9qzq5tnb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.enhanced-table thead[b-lp9qzq5tnb] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.enhanced-table th[b-lp9qzq5tnb] {
    padding: 14px 16px;
    background: #f8fafc;
    color: #475569;
    font-weight: 500;
    font-size: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.enhanced-table td[b-lp9qzq5tnb] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.enhanced-table tbody tr:hover[b-lp9qzq5tnb] { background: #f8fafc; }

.ai-row[b-lp9qzq5tnb] {
    background: #f0fdfa !important;
}

.ai-row:hover[b-lp9qzq5tnb] { background: #ecfdf5 !important; }

.col-num[b-lp9qzq5tnb] { width: 40px; text-align: center; color: #94a3b8; }
.col-src[b-lp9qzq5tnb] { width: 80px; text-align: left; }
.col-op[b-lp9qzq5tnb] { min-width: 220px; font-weight: 500; color: #0f172a; }
.col-cat[b-lp9qzq5tnb] { width: 120px; font-size: 0.85rem; color: #64748b; }
.col-r[b-lp9qzq5tnb] { text-align: right; white-space: nowrap; }

.total-cell[b-lp9qzq5tnb] { color: #0f172a !important; font-weight: 600; }

.src-badge[b-lp9qzq5tnb] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.src-badge.base[b-lp9qzq5tnb] {
    background: #f1f5f9;
    color: #64748b;
}

.src-badge.ai[b-lp9qzq5tnb] {
    background: #eff6ff;
    color: #2563eb;
}

/* ── Totals ── */
.totals-row-e td[b-lp9qzq5tnb] {
    font-weight: 700;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-bottom: none;
}

.totals-label-e[b-lp9qzq5tnb] {
    text-align: right !important;
    padding-right: 20px !important;
    color: #0f172a;
    font-size: 0.95rem;
}

.total-cell-final[b-lp9qzq5tnb] {
    color: #0f172a !important;
    font-weight: 800;
    font-size: 1rem !important;
}

/* ── Nav ── */
.step-nav-buttons[b-lp9qzq5tnb] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.nav-btn[b-lp9qzq5tnb] {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-lp9qzq5tnb] {
    background: #f1f5f9;
    color: #475569;
    flex: 0.3;
}

.back-btn:hover[b-lp9qzq5tnb] { background: #e2e8f0; color: #0f172a; }

.send-btn[b-lp9qzq5tnb] {
    background: #111827;
    color: white;
    flex: 0.7;
}

.send-btn:hover[b-lp9qzq5tnb] {
    background: #1f2937;
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Collision/Steps/Step6_Approval.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 6 — Aprobación Aseguradora (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-approval[b-rwwia3ccmw] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Sending State ── */
.sending-state[b-rwwia3ccmw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.send-animation[b-rwwia3ccmw] { text-align: center; }

.envelope-icon[b-rwwia3ccmw] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #3b82f6;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    animation: float-up-b-rwwia3ccmw 2s ease-in-out infinite;
}

@keyframes float-up-b-rwwia3ccmw {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.send-progress[b-rwwia3ccmw] {
    width: 240px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 100px;
    margin-top: 20px;
    overflow: hidden;
}

.send-bar[b-rwwia3ccmw] {
    height: 100%;
    background: #3b82f6;
    border-radius: 100px;
    transition: width 0.4s ease;
}

.sending-state h3[b-rwwia3ccmw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.send-msg[b-rwwia3ccmw] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

/* ── Results ── */
.approval-results[b-rwwia3ccmw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    animation: fadeInUp-b-rwwia3ccmw 0.5s ease;
}

@keyframes fadeInUp-b-rwwia3ccmw {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.approval-header[b-rwwia3ccmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.insurer-info[b-rwwia3ccmw] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.insurer-logo[b-rwwia3ccmw] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.insurer-info h3[b-rwwia3ccmw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.response-meta[b-rwwia3ccmw] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0 0;
}

.approval-status-badge[b-rwwia3ccmw] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #fffbeb;
    color: #d97706;
}

/* ── Metrics ── */
.approval-metrics[b-rwwia3ccmw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex-shrink: 0;
}

.metric-card[b-rwwia3ccmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.metric-big[b-rwwia3ccmw] {
    font-size: 1.4rem;
    font-weight: 800;
}

.metric-sub[b-rwwia3ccmw] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

.success-metric .metric-big[b-rwwia3ccmw] { color: #10b981; }
.compare-metric .metric-big[b-rwwia3ccmw] { color: #64748b; }
.money-metric .metric-big[b-rwwia3ccmw] { color: #0f172a; }
.rejected-metric .metric-big[b-rwwia3ccmw] { color: #ef4444; }

/* ── AI Impact ── */
.ai-impact-bar[b-rwwia3ccmw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #1e40af;
    line-height: 1.6;
    flex-shrink: 0;
}

.ai-impact-icon[b-rwwia3ccmw] { flex-shrink: 0; color: #2563eb; }
.ai-impact-bar strong[b-rwwia3ccmw] { color: #1e3a8a; font-weight: 600; }

/* ── Table ── */
.approval-table-wrapper[b-rwwia3ccmw] {
    flex: 1;
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    min-height: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.approval-table-wrapper[b-rwwia3ccmw]::-webkit-scrollbar { width: 6px; }
.approval-table-wrapper[b-rwwia3ccmw]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.approval-table[b-rwwia3ccmw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.approval-table thead[b-rwwia3ccmw] { position: sticky; top: 0; z-index: 2; }

.approval-table th[b-rwwia3ccmw] {
    padding: 14px 16px;
    background: #f8fafc;
    color: #475569;
    font-weight: 500;
    font-size: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.approval-table td[b-rwwia3ccmw] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.col-st[b-rwwia3ccmw] { width: 56px; text-align: center; }
.col-src[b-rwwia3ccmw] { width: 80px; text-align: left; }
.col-op[b-rwwia3ccmw] { min-width: 200px; font-weight: 500; color: #0f172a; }
.col-r[b-rwwia3ccmw] { text-align: right; white-space: nowrap; }
.col-note[b-rwwia3ccmw] { font-size: 0.85rem; color: #64748b; font-style: italic; max-width: 220px; }

.approval-badge[b-rwwia3ccmw] {
    font-size: 1.1rem;
    font-weight: 700;
}

.origin-badge[b-rwwia3ccmw] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.origin-badge.base[b-rwwia3ccmw] { background: #f1f5f9; color: #64748b; }
.origin-badge.ai[b-rwwia3ccmw] { background: #eff6ff; color: #2563eb; }

.approved-val[b-rwwia3ccmw] { color: #10b981 !important; font-weight: 600; }
.partial-val[b-rwwia3ccmw] { color: #d97706 !important; font-weight: 600; }
.rejected-val[b-rwwia3ccmw] { color: #ef4444 !important; font-weight: 600; text-decoration: line-through; }

.row-rejected[b-rwwia3ccmw] { background: #fef2f2; }
.row-partial[b-rwwia3ccmw] { background: #fffbeb; }

.approval-totals td[b-rwwia3ccmw] {
    font-weight: 700;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ── Lock ── */
.lock-estimate-bar[b-rwwia3ccmw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #64748b;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.lock-estimate-bar svg[b-rwwia3ccmw] { color: #475569; flex-shrink: 0; }
.lock-estimate-bar strong[b-rwwia3ccmw] { color: #0f172a; font-weight: 600; }

/* ── Nav ── */
.step-nav-buttons[b-rwwia3ccmw] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.nav-btn[b-rwwia3ccmw] {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-rwwia3ccmw] {
    background: #f1f5f9;
    color: #475569;
    flex: 0.3;
}

.back-btn:hover[b-rwwia3ccmw] { background: #e2e8f0; color: #0f172a; }

.convert-btn[b-rwwia3ccmw] {
    background: #111827;
    color: white;
    flex: 0.7;
}

.convert-btn:hover[b-rwwia3ccmw] {
    background: #1f2937;
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Collision/Steps/Step7_WorkOrder.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Step 7 — Conversión a WorkOrder (Light Clean SaaS)
   ═══════════════════════════════════════════════════════════ */

.step-workorder[b-mriy845cka] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Conversion Animation ── */
.conversion-animation[b-mriy845cka] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.conversion-visual[b-mriy845cka] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.convert-from[b-mriy845cka], .convert-to[b-mriy845cka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.convert-icon[b-mriy845cka] { font-size: 2.5rem; color: #3b82f6; }
.convert-label[b-mriy845cka] { font-size: 0.95rem; font-weight: 500; color: #64748b; }

.convert-arrows[b-mriy845cka] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow-dot[b-mriy845cka] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    animation: dot-flow-b-mriy845cka 1.5s ease-in-out infinite;
}

.a1[b-mriy845cka] { animation-delay: 0ms; }
.a2[b-mriy845cka] { animation-delay: 200ms; }
.a3[b-mriy845cka] { animation-delay: 400ms; }

@keyframes dot-flow-b-mriy845cka {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.conversion-animation h3[b-mriy845cka] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.convert-progress-text[b-mriy845cka] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.convert-progress-bar[b-mriy845cka] {
    width: 280px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}

.convert-fill[b-mriy845cka] {
    height: 100%;
    background: #3b82f6;
    border-radius: 100px;
    transition: width 0.4s ease;
}

/* ── Results ── */
.wo-results[b-mriy845cka] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    animation: fadeInUp-b-mriy845cka 0.5s ease;
}

@keyframes fadeInUp-b-mriy845cka {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.wo-success-header[b-mriy845cka] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.success-check[b-mriy845cka] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #ecfdf5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: pop-in-b-mriy845cka 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in-b-mriy845cka {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.wo-success-header h2[b-mriy845cka] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.success-sub[b-mriy845cka] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 4px 0 0;
}

/* ── WO Preview Card ── */
.wo-preview-card[b-mriy845cka] {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.wo-preview-card[b-mriy845cka]::-webkit-scrollbar { width: 6px; }
.wo-preview-card[b-mriy845cka]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.wo-header-bar[b-mriy845cka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.wo-label[b-mriy845cka] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    display: block;
}

.wo-id[b-mriy845cka] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
}

.wo-status-active[b-mriy845cka] {
    padding: 8px 16px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Details Grid ── */
.wo-details-grid[b-mriy845cka] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.wo-detail[b-mriy845cka] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wo-dt-label[b-mriy845cka] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

.wo-dt-value[b-mriy845cka] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}

.wo-dt-value.mono[b-mriy845cka] {
    font-family: 'Inter', sans-serif;
}

.wo-dt-value.highlight[b-mriy845cka] { color: #3b82f6; }
.wo-dt-value.highlight-gold[b-mriy845cka] { color: #0f172a; }

/* ── Processes ── */
.wo-processes-title[b-mriy845cka], .wo-timeline-title[b-mriy845cka] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    display: block;
    margin-bottom: 16px;
}

.process-chips[b-mriy845cka] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.process-chip[b-mriy845cka] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

.process-chip.body[b-mriy845cka] { background: #eff6ff; color: #1d4ed8; }
.process-chip.paint[b-mriy845cka] { background: #faf5ff; color: #7e22ce; }
.process-chip.mech[b-mriy845cka] { background: #ecfdf5; color: #047857; }
.process-chip.diag[b-mriy845cka] { background: #fffbeb; color: #b45309; }
.process-chip.struct[b-mriy845cka] { background: #fef2f2; color: #b91c1c; }
.process-chip.qa[b-mriy845cka] { background: #f8fafc; color: #475569; }

/* ── Timeline ── */
.timeline-bar[b-mriy845cka] {
    display: flex;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.tl-segment[b-mriy845cka] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: all 0.2s ease;
}

.tl-segment:last-child[b-mriy845cka] { border-right: none; }
.tl-segment:hover[b-mriy845cka] { filter: brightness(1.1); }

.body-seg[b-mriy845cka] { background: #3b82f6; }
.struct-seg[b-mriy845cka] { background: #ef4444; }
.paint-seg[b-mriy845cka] { background: #a855f7; }
.mech-seg[b-mriy845cka] { background: #10b981; }
.qa-seg[b-mriy845cka] { background: #64748b; }

.timeline-days[b-mriy845cka] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Nav ── */
.step-nav-buttons[b-mriy845cka] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.nav-btn[b-mriy845cka] {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.back-btn[b-mriy845cka] {
    background: #f1f5f9;
    color: #475569;
    flex: 0.3;
}

.back-btn:hover[b-mriy845cka] { background: #e2e8f0; color: #0f172a; }

.inbox-btn[b-mriy845cka] {
    background: #111827;
    color: white;
    flex: 0.7;
}

.inbox-btn:hover[b-mriy845cka] {
    background: #1f2937;
    transform: translateY(-1px);
}
/* /Pages/Home/Components/Collision/SysColorPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   SysColor Connect Panel — Light Clean SaaS (alineado al prototipo)
   Tokens: bg #f8fafc, card #fff, border #e2e8f0, text #0f172a,
           sub #64748b, accent-blue #3b82f6, accent-green #10b981,
           dark-btn #111827, radius 12-16px, shadow 0 4px 16px rgba(0,0,0,0.03)
   ══════════════════════════════════════════════════════════════ */

/* ── Panel raíz ── */
.syscolor-panel[b-ax4dzdfhzg] {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f8fafc;
    color: #0f172a;
    overflow: hidden;
}

/* ── HEADER ── */
.sc-header[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.sc-header-brand[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 14px; }

.sc-logo-wrap[b-ax4dzdfhzg] {
    display: flex; align-items: center;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.sc-brand-name[b-ax4dzdfhzg]  { display: block; font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.sc-brand-sub[b-ax4dzdfhzg]   { display: block; font-size: 0.75rem; color: #64748b; font-weight: 500; margin-top: 1px; }

.sc-header-ot[b-ax4dzdfhzg]   { text-align: center; }
.sc-ot-label[b-ax4dzdfhzg]    { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; font-weight: 600; }
.sc-ot-number[b-ax4dzdfhzg]   { display: block; font-size: 1.1rem; font-weight: 800; color: #3b82f6; }
.sc-ot-vehicle[b-ax4dzdfhzg]  { display: block; font-size: 0.75rem; color: #64748b; margin-top: 1px; }

.sc-sync-badge[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem; color: #16a34a; font-weight: 600;
}
.sc-sync-dot[b-ax4dzdfhzg] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    animation: pulse-sync-b-ax4dzdfhzg 2s ease-in-out infinite;
}
@keyframes pulse-sync-b-ax4dzdfhzg {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── TABS ── */
.sc-tabs[b-ax4dzdfhzg] {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.sc-tab[b-ax4dzdfhzg] {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.sc-tab:hover[b-ax4dzdfhzg] { color: #475569; background: #f8fafc; }
.sc-tab.active[b-ax4dzdfhzg] {
    color: #2563eb;
    border-bottom-color: #3b82f6;
    background: #eff6ff;
}

/* ── CONTENIDO ── */
.sc-content[b-ax4dzdfhzg] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.sc-content[b-ax4dzdfhzg]::-webkit-scrollbar { width: 5px; }
.sc-content[b-ax4dzdfhzg]::-webkit-scrollbar-track { background: transparent; }
.sc-content[b-ax4dzdfhzg]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* ── Section Title ── */
.sc-section-title[b-ax4dzdfhzg] {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 16px;
}
.sc-section-title h3[b-ax4dzdfhzg] { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.sc-section-title p[b-ax4dzdfhzg]  { margin: 4px 0 0; font-size: 0.78rem; color: #64748b; }

.sc-action-group[b-ax4dzdfhzg] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Botones (alineados con el prototipo) ── */
.sc-btn-primary[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit; font-size: 0.83rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
}
.sc-btn-primary:hover[b-ax4dzdfhzg] { background: #1f2937; transform: translateY(-1px); }

.sc-btn-secondary[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit; font-size: 0.83rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
}
.sc-btn-secondary:hover[b-ax4dzdfhzg] { background: #e2e8f0; color: #0f172a; }

.sc-btn-icon[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-family: inherit; font-size: 0.77rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.sc-btn-icon:hover[b-ax4dzdfhzg] { background: #dbeafe; }

/* ── Search ── */
.sc-search-box[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #94a3b8;
}
.sc-search-box input[b-ax4dzdfhzg] {
    background: none; border: none; outline: none;
    color: #0f172a; font-family: inherit; font-size: 0.82rem; width: 180px;
}
.sc-search-box input[b-ax4dzdfhzg]::placeholder { color: #94a3b8; }

/* ── OT CARDS ── */
.ot-cards-wrap[b-ax4dzdfhzg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ot-card[b-ax4dzdfhzg] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.ot-card:hover[b-ax4dzdfhzg] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.ot-card.active[b-ax4dzdfhzg] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.ot-card-header[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 12px;
}

.ot-compact[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

.ot-field[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ot-num[b-ax4dzdfhzg] {
    font-weight: 800;
    color: #2563eb;
    font-size: 0.9rem;
}

.ot-placa[b-ax4dzdfhzg] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.78rem;
    color: #475569;
}

.ot-field-val[b-ax4dzdfhzg] {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 500;
}

.ot-color-cell[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.color-swatch[b-ax4dzdfhzg] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}

.ot-status[b-ax4dzdfhzg] {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-active[b-ax4dzdfhzg] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.status-done[b-ax4dzdfhzg] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

.status-pending[b-ax4dzdfhzg] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.status-warn[b-ax4dzdfhzg] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.ot-actions[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ot-expand-btn[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
}

.ot-expand-btn:hover[b-ax4dzdfhzg] {
    background: #e2e8f0;
    color: #334155;
}

.ot-expand-btn svg[b-ax4dzdfhzg] {
    transition: transform 0.3s ease;
}

.ot-expand-btn svg.rotated[b-ax4dzdfhzg] {
    transform: rotate(180deg);
}

.ot-details[b-ax4dzdfhzg] {
    padding: 0 16px 16px;
    border-top: 1px solid #f1f5f9;
    animation: slideDown-b-ax4dzdfhzg 0.25s ease;
}

@keyframes slideDown-b-ax4dzdfhzg {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ot-details-grid[b-ax4dzdfhzg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.ot-detail-item[b-ax4dzdfhzg] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ot-detail-label[b-ax4dzdfhzg] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ot-detail-value[b-ax4dzdfhzg] {
    font-size: 0.86rem;
    font-weight: 600;
    color: #0f172a;
}

.ot-detail-color[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0f172a;
}

/* ── FORMULACIÓN ── */
.form-layout[b-ax4dzdfhzg] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
}

.color-hero[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.color-preview[b-ax4dzdfhzg] {
    width: 56px; height: 56px;
    border-radius: 14px;
    border: 3px solid #e2e8f0;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.color-hero-code[b-ax4dzdfhzg]  { display: block; font-size: 1rem; font-weight: 800; color: #3b82f6; }
.color-hero-name[b-ax4dzdfhzg]  { display: block; font-size: 0.9rem; font-weight: 600; color: #0f172a; }
.color-hero-brand[b-ax4dzdfhzg] { display: block; font-size: 0.75rem; color: #94a3b8; }

.color-meta-grid[b-ax4dzdfhzg] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.meta-item[b-ax4dzdfhzg] {
    background: #ffffff; border: 1px solid #f1f5f9;
    border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.meta-label[b-ax4dzdfhzg] { display: block; font-size: 0.67rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.meta-value[b-ax4dzdfhzg] { display: block; font-size: 0.84rem; font-weight: 600; color: #334155; margin-top: 3px; }
.meta-value.highlight[b-ax4dzdfhzg] { color: #2563eb; }

.sc-card[b-ax4dzdfhzg] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.sc-card-title[b-ax4dzdfhzg] {
    display: block; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; margin-bottom: 12px;
}
.mt-16[b-ax4dzdfhzg] { margin-top: 16px; }

.indicator-list[b-ax4dzdfhzg] { display: flex; flex-direction: column; gap: 10px; }
.indicator-row[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.indicator-row span:first-child[b-ax4dzdfhzg] { width: 88px; color: #64748b; font-size: 0.75rem; }
.indicator-row span:last-child[b-ax4dzdfhzg]  { width: 32px; text-align: right; color: #2563eb; font-weight: 700; font-size: 0.75rem; }
.indicator-bar[b-ax4dzdfhzg] { flex: 1; height: 5px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.indicator-fill[b-ax4dzdfhzg] { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 10px; }

/* Tabla fórmula */
.form-right[b-ax4dzdfhzg] { display: flex; flex-direction: column; gap: 14px; }
.form-header-bar[b-ax4dzdfhzg] { display: flex; align-items: center; justify-content: space-between; }
.form-header-bar h4[b-ax4dzdfhzg] { margin: 0; font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.form-actions[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 10px; }
.formula-total-badge[b-ax4dzdfhzg] {
    background: #eff6ff; border: 1px solid #dbeafe;
    color: #2563eb; border-radius: 20px; padding: 4px 12px;
    font-size: 0.78rem; font-weight: 700;
}

.formula-table-wrap[b-ax4dzdfhzg] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.formula-table[b-ax4dzdfhzg] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.formula-table thead th[b-ax4dzdfhzg] {
    padding: 11px 16px; background: #f8fafc;
    font-size: 0.75rem; font-weight: 600; text-align: left;
    color: #475569; border-bottom: 1px solid #e2e8f0;
}
.formula-table tbody tr:hover[b-ax4dzdfhzg] { background: #f8fafc; }
.formula-table td[b-ax4dzdfhzg] { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.num-col[b-ax4dzdfhzg] { text-align: right; }

.formula-step[b-ax4dzdfhzg]   { font-weight: 700; color: #94a3b8; width: 30px; }
.formula-comp[b-ax4dzdfhzg]   { display: flex; align-items: center; gap: 9px; font-weight: 600; color: #0f172a; }
.formula-gramos[b-ax4dzdfhzg] { font-weight: 700; color: #2563eb; }
.formula-acum[b-ax4dzdfhzg]   { color: #94a3b8; }
.formula-familia[b-ax4dzdfhzg]{ font-size: 0.78rem; color: #94a3b8; }

.comp-dot[b-ax4dzdfhzg] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.pct-bar-inline[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pct-bar-inline > div[b-ax4dzdfhzg] {
    width: 60px; height: 5px;
    background: #f1f5f9;
    border-radius: 10px; overflow: hidden; flex-shrink: 0;
}
.pct-fill[b-ax4dzdfhzg] { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 10px; }

.formula-chart-row[b-ax4dzdfhzg] { display: flex; justify-content: flex-start; }
.donut-legend[b-ax4dzdfhzg] { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legend-item[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-ax4dzdfhzg]  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-name[b-ax4dzdfhzg] { font-size: 0.75rem; color: #64748b; }
.legend-pct[b-ax4dzdfhzg]  { font-size: 0.75rem; font-weight: 700; color: #2563eb; }

/* ── CONSUMOS ── */
.consumo-layout[b-ax4dzdfhzg] { display: flex; flex-direction: column; gap: 16px; }

.consumo-kpis[b-ax4dzdfhzg] { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.kpi-card[b-ax4dzdfhzg] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.kpi-label[b-ax4dzdfhzg] { display: block; font-size: 0.72rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.kpi-value[b-ax4dzdfhzg] { display: block; font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.kpi-value.accent[b-ax4dzdfhzg] { color: #2563eb; }
.kpi-value.gold[b-ax4dzdfhzg]   { color: #d97706; }
.kpi-value.ok[b-ax4dzdfhzg]     { color: #10b981; }
.kpi-value.danger[b-ax4dzdfhzg] { color: #ef4444; }

.consumo-table-wrap[b-ax4dzdfhzg] {
    background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 16px; overflow: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.consumo-table[b-ax4dzdfhzg] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.consumo-table thead th[b-ax4dzdfhzg] {
    padding: 12px 16px; background: #f8fafc;
    font-size: 0.75rem; font-weight: 600;
    color: #475569; border-bottom: 1px solid #e2e8f0; text-align: left;
}
.consumo-table td[b-ax4dzdfhzg] { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.consumo-comp[b-ax4dzdfhzg] { font-weight: 600; color: #0f172a; }
.diff-ok[b-ax4dzdfhzg]   { color: #10b981; font-weight: 700; }
.diff-high[b-ax4dzdfhzg] { color: #ef4444; font-weight: 700; }
.bold[b-ax4dzdfhzg] { font-weight: 700; color: #0f172a; }

.consumo-total-row[b-ax4dzdfhzg] { background: #f8fafc; }
.consumo-total-row td[b-ax4dzdfhzg] {
    font-weight: 700; color: #0f172a;
    border-top: 1px solid #e2e8f0;
}

/* ── INVENTARIO ── */
.inv-grid[b-ax4dzdfhzg] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.inv-card[b-ax4dzdfhzg] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.inv-card:hover[b-ax4dzdfhzg] {
    border-color: #bfdbfe;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

.inv-card-header[b-ax4dzdfhzg] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.inv-codigo[b-ax4dzdfhzg] { font-size: 0.88rem; font-weight: 800; color: #2563eb; }
.inv-linea[b-ax4dzdfhzg]  {
    font-size: 0.7rem; color: #64748b;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    padding: 2px 8px; border-radius: 6px;
}
.inv-nombre[b-ax4dzdfhzg]  { font-size: 0.9rem; font-weight: 600; color: #0f172a; margin-bottom: 3px; }
.inv-familia[b-ax4dzdfhzg] { font-size: 0.75rem; color: #94a3b8; margin-bottom: 10px; }

.inv-stock-row[b-ax4dzdfhzg] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv-stock-bar[b-ax4dzdfhzg] { flex: 1; height: 5px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.inv-stock-fill[b-ax4dzdfhzg] { height: 100%; border-radius: 10px; transition: width 0.6s ease; }
.stock-ok[b-ax4dzdfhzg]  { background: linear-gradient(90deg, #10b981, #34d399); }
.stock-mid[b-ax4dzdfhzg] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stock-low[b-ax4dzdfhzg] { background: linear-gradient(90deg, #ef4444, #f87171); }
.inv-stock-val[b-ax4dzdfhzg] { font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: #334155; }
.inv-precio[b-ax4dzdfhzg] { font-size: 0.77rem; color: #94a3b8; }

/* ── FOOTER ── */
.sc-footer[b-ax4dzdfhzg] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #94a3b8;
}
.sc-footer-btn[b-ax4dzdfhzg] {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit; font-size: 0.83rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.sc-footer-btn:hover[b-ax4dzdfhzg] { background: #e2e8f0; color: #0f172a; }

/* ── CATEGORY FILTERS (Inventario) ── */
.category-filters[b-ax4dzdfhzg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.category-filter[b-ax4dzdfhzg] {
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.category-filter:hover[b-ax4dzdfhzg] {
    background: #f1f5f9;
    color: #3b82f6;
    border-color: #cbd5e1;
}

.category-filter.active[b-ax4dzdfhzg] {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* ── LOADING STATE ── */
.sc-loading[b-ax4dzdfhzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

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

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

.sc-loading p[b-ax4dzdfhzg] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* ── EMPTY STATES ── */
.sc-empty-state[b-ax4dzdfhzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.sc-empty-state svg[b-ax4dzdfhzg] {
    color: #cbd5e1;
    margin-bottom: 16px;
}

.sc-empty-state h4[b-ax4dzdfhzg] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.sc-empty-state p[b-ax4dzdfhzg] {
    font-size: 0.9rem;
    color: #64748b;
    max-width: 400px;
    margin: 0;
}

.sc-empty-state-small[b-ax4dzdfhzg] {
    text-align: center;
    padding: 40px 20px;
}

.sc-empty-state-small p[b-ax4dzdfhzg] {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ── INVENTORY CARD ADDITIONS ── */
.inv-color-row[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.inv-color-label[b-ax4dzdfhzg] {
    color: #94a3b8;
    font-weight: 500;
}

.inv-color-value[b-ax4dzdfhzg] {
    color: #334155;
    font-weight: 600;
}

.inv-spec[b-ax4dzdfhzg] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.inv-meta-row[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #94a3b8;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.inv-meta[b-ax4dzdfhzg] {
    color: #94a3b8;
}

/* ── MODALS ── */
.sc-modal-overlay[b-ax4dzdfhzg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.sc-modal[b-ax4dzdfhzg] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sc-modal-header[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.sc-modal-header h4[b-ax4dzdfhzg] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.sc-modal-body[b-ax4dzdfhzg] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.sc-modal-body p[b-ax4dzdfhzg] {
    margin: 0 0 12px 0;
    color: #334155;
    font-size: 0.9rem;
}

.sc-modal-body .text-muted[b-ax4dzdfhzg] {
    color: #94a3b8;
    font-size: 0.8rem;
}

.sc-modal-footer[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
}

.sc-modal-large[b-ax4dzdfhzg] {
    max-width: 700px;
}

/* ── FORM STYLES ── */
.sc-form-grid[b-ax4dzdfhzg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sc-form-group[b-ax4dzdfhzg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-form-group-full[b-ax4dzdfhzg] {
    grid-column: 1 / -1;
}

.sc-form-label[b-ax4dzdfhzg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.sc-form-label .required[b-ax4dzdfhzg] {
    color: #ef4444;
    margin-left: 2px;
}

.sc-form-input[b-ax4dzdfhzg],
.sc-form-select[b-ax4dzdfhzg] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    transition: all 0.2s;
}

.sc-form-input:focus[b-ax4dzdfhzg],
.sc-form-select:focus[b-ax4dzdfhzg] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sc-form-input:disabled[b-ax4dzdfhzg],
.sc-form-select:disabled[b-ax4dzdfhzg] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.sc-form-textarea[b-ax4dzdfhzg] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    min-height: 80px;
    resize: vertical;
    transition: all 0.2s;
}

.sc-form-textarea:focus[b-ax4dzdfhzg] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sc-form-textarea:disabled[b-ax4dzdfhzg] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.sc-form-checkbox[b-ax4dzdfhzg] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.sc-form-checkbox input[type="checkbox"][b-ax4dzdfhzg] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.sc-form-checkbox span[b-ax4dzdfhzg] {
    font-size: 0.9rem;
    color: #334155;
}

.sc-form-checkbox input[type="checkbox"]:disabled[b-ax4dzdfhzg] {
    cursor: not-allowed;
}

.sc-form-checkboxes[b-ax4dzdfhzg] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ── ALERTS ── */
.sc-alert[b-ax4dzdfhzg] {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.sc-alert-error[b-ax4dzdfhzg] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* /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: 1fr 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;
}

.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[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/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;
}

.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: flex;
    justify-content: center;
    padding: 4px 0;
    margin-bottom: 15px;
}

.creation-crear-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;
}

.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);
}


.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;
}

@keyframes creationFadeIn-b-kjbddxoobl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ============================================================
   Grid para AssetCards (Mismo estilo que InboxPanel)
   ============================================================ */

/* Requerido para que el panel de creación sea EXACTAMENTE igual al Inbox (450px visibles) */
[b-kjbddxoobl] .creation-slide-panel {
    width: 462px !important;
    /* 450px visibles + 12px bajo sidebar */
}

.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;
}
/* /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;
}

.asset-select:focus[b-hg0ash6urn] {
    border-color: #e500cd !important;
    background: #ffffff !important;
}

.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 */
.workorder-slide[b-o376u6ikfd] {
    --sidebar-bg: #1f2f45;
    background: var(--sidebar-bg);
}

/* --- 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-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: 30px;
    left: 240px;
    /* Aligned with top bar when sidebar is open (220px + 20px gap) */
    width: var(--panel-width, 450px);
    bottom: 30px;
    /* Same width as search bar */
    /* max-height: calc(100vh - 60px);*/
    /* Limit height to not overflow */
    background: #9aa1ab72;
    /* Dark blue glass */
    backdrop-filter: blur(10px);
    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;
}

/* 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);
}

.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: 100px;
    /* Aligned with collapsed sidebar (100px for topbar) */
}

/* ===== 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;
}

/* === 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: #f8fafc !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    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;
    /* Let children handle scroll */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Required for nested flex scroll */
    color: #a0a0b0;
    border-radius: inherit;
}

.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 */

/* Expanded Card View - 3 Column Layout */
.expanded-card-view[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .expanded-card-view {
    position: absolute;
    top: 20px;
    left: 240px;
    right: 20px;
    height: calc(100vh - 40px);
    background: #9aa1ab72;
    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: scale(0.95) translateY(10px);
    pointer-events: none;

    /* CLOSING: Fast transition for quick disappearance */
    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: scale(1) translateY(0);
    pointer-events: auto;

    /* OPENING: Slower, smoother transition */
    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);
}

.expanded-card-view.hiding[b-fkxx6hjwiu] {
    animation: panelHideAnimation-b-fkxx6hjwiu 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* 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: 12px 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: 2rem;
    font-weight: 700;
    color: #e8e8e8;
    margin: 0 0 2px 0;
}

.wo-header-subtitle[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .wo-header-subtitle {
    font-size: 1rem;
    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: 100px;
}

/* 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 {
    flex: 1;
    padding: 9px;
    overflow: hidden;
    display: flex;
    gap: 9px;
    min-height: 0;
}

.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;
    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;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: 100%;
    overflow: hidden;
}

/* ===== WorkOrder Folder Container ===== */
.workorder-folder-container[b-fkxx6hjwiu],
[b-fkxx6hjwiu] .workorder-folder-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 40px;
    /* Space for tab */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Folder Tabs Container - holds multiple tabs */
.folder-tabs-container[b-fkxx6hjwiu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    align-items: flex-end;
    z-index: 2;
    padding-left: 16px;
    padding-right: 16px;
    height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.folder-tabs-container[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Chrome-style folder tab */
.folder-tab[b-fkxx6hjwiu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #9aa1ab00;
    cursor: pointer;
    transition: all 0s ease;
    position: relative;
    z-index: 1;
    min-width: 100px;
    max-width: 200px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 13px;
    color: #5f6368;
    margin-top: 4px;
    flex-shrink: 0;
    /* Important: prevents tabs from squeezing */
}

/* Inactive tabs have no curves */
.folder-tab:not(.active):hover[b-fkxx6hjwiu] {
    background: #9aa1ab00;
}

/* Active tab - full height with curved corners */
.folder-tab.active[b-fkxx6hjwiu] {
    background: #E1E1E1;
    color: #202124;
    z-index: 10;
    margin-top: 0;
    /* Active tab is taller */
}

/* Curva inferior izquierda - SOLO para pestaña activa */
.folder-tab.active[b-fkxx6hjwiu]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-bottom-right-radius: 8px;
    box-shadow: 3px 3px 0 0 #E1E1E1;
}

/* Curva inferior derecha - SOLO para pestaña activa */
.folder-tab.active[b-fkxx6hjwiu]::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -10px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-bottom-left-radius: 8px;
    box-shadow: -3px 3px 0 0 #E1E1E1;
}

.folder-tab-title[b-fkxx6hjwiu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
}

.folder-tab-title-wrap[b-fkxx6hjwiu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.folder-tab-warning[b-fkxx6hjwiu] {
    display: inline-flex;
    align-items: center;
    color: #d97706;
    flex-shrink: 0;
}

.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;
}

.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;
    display: flex;
    gap: 9px;
    background: #E1E1E1;
    border-radius: 15px;
    padding: 9px;
    border: 1px solid #D0D0D0;
    min-height: 0;
    overflow: hidden;
    max-height: calc(100% - 0px);
    /* Account for folder tab */
}

/* Timeline Section inside folder */
.folder-timeline-section[b-fkxx6hjwiu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    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;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.folder-detail-section[b-fkxx6hjwiu]::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* 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;
    width: 432px;
    min-width: 432px;
    max-width: 432px;
}

.expanded-card-content.three-column-layout[b-fkxx6hjwiu]  .timeline-panel {
    flex: 2;
}

/* 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;
    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(240px) - desired_width */
    right: calc(100vw - 240px - 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: 100px;
    right: calc(100vw - 100px - 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: #9aa1ab72;
    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;
}


/* 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 - panels fully revealed */
.panel-slide-container.visible[b-fkxx6hjwiu] {
    opacity: 1;
    transform: translateX(0);
    flex: 1;
    max-width: 100%;
    transition: opacity 0.35s ease-out 0.1s,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        flex 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden state - panels swept away to left */
.panel-slide-container.hidden[b-fkxx6hjwiu] {
    opacity: 0;
    transform: translateX(-30px);
    flex: 0;
    max-width: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in,
        transform 0.3s ease-in,
        flex 0.35s ease-in,
        max-width 0.35s ease-in;
}

/* Staggered animation - second panel appears slightly after first */
.panel-slide-container.delay.visible[b-fkxx6hjwiu] {
    transition-delay: 0.12s;
}

.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;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        /* Sin bordes redondeados en pantalla completa */
        z-index: 100;
        /* Asegura que tape todo */
    }

    .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 */
    }
}
/* /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%; 
}

.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);
}

/* 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% + 8px);
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px;
    min-width: 100%;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hop-wo-item[b-ul1pjpvhjd] {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
}

.hop-wo-item:hover[b-ul1pjpvhjd] {
    background: rgba(255, 255, 255, 0.1);
}

.hop-wo-item.active[b-ul1pjpvhjd] {
    background: rgba(234, 179, 8, 0.2);
    border-left: 3px solid #eab308;
}

.hop-wo-number[b-ul1pjpvhjd] {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1px;
}

.hop-wo-insurance[b-ul1pjpvhjd] {
    font-size: 10px;
    color: #94a3b8;
}

.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;
    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;
}

    .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;
}

.person-card-squared.add-btn[b-ul1pjpvhjd] {
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.person-card-squared.add-btn svg[b-ul1pjpvhjd] {
    color: #cbd5e1;
    width: 48px;
    height: 48px;
}
.person-card-squared.add-btn:hover[b-ul1pjpvhjd] {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* 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;
}

.ho-pc-count-badge small[b-ul1pjpvhjd] {
    font-size: 9px;
    color: rgba(255,255,255,0.75);
}

/* Punto verde de sugerido */
.ho-pc-suggested-dot[b-ul1pjpvhjd] {
    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-ul1pjpvhjd] {
    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-ul1pjpvhjd] {
    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-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;
}


/* 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;
}

/* ===== 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;
    background: transparent;
}

.step-timeline-bar[b-ul1pjpvhjd] {
    display: flex;
    align-items: center;
    gap: 1px;
}

.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;
}

.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;
    height: 2px;
    background: rgba(255,255,255,0.2);
}

.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); }
}
/* /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/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% + 8px);
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px;
    min-width: 100%;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hop-wo-item[b-szifxvmksa] {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
}

.hop-wo-item:hover[b-szifxvmksa] {
    background: rgba(255, 255, 255, 0.1);
}

.hop-wo-item.active[b-szifxvmksa] {
    background: rgba(234, 179, 8, 0.2);
    border-left: 3px solid #eab308;
}

.hop-wo-number[b-szifxvmksa] {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1px;
}

.hop-wo-insurance[b-szifxvmksa] {
    font-size: 10px;
    color: #94a3b8;
}

.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;
    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;
}

.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;
}

.filter-count[b-bx2pro5onx] {
    font-size: 14px;
    font-weight: 600;
    color: #1a365d;
}

.filter-label[b-bx2pro5onx] {
    font-size: 14px;
    color: #1a365d;
}

.dropdown-arrow[b-bx2pro5onx] {
    width: 14px;
    height: 14px;
    color: #1a365d;
}

.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;
}

.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;
}

.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;
}

.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, Asesores y Aseguradoras */
.filter-personas .group-icon-img[b-bx2pro5onx],
.filter-asesores .group-icon-img[b-bx2pro5onx],
.filter-aseguradoras .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%;
}


.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;
}

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

/* 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;
    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;
    z-index: 49;
    background: transparent;
    cursor: default;
}
/* /Pages/Home/Components/Notifications/NotificationsPanel.razor.rz.scp.css */
/* ============================================================================
   NotificationsPanel.razor.css
   Panel de notificaciones — estilo glassmorphism premium, paridad con MAUI
   ============================================================================ */

/* ── Panel Container ─────────────────────────────────────────────────────── */
.notifications-panel[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.notifications-header[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.header-left[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon[b-2ou1aq5yar] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(229, 0, 205, 0.2), rgba(138, 43, 226, 0.2));
    border-radius: 10px;
    color: #e500cd;
}

.header-text h2[b-2ou1aq5yar] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.header-subtitle[b-2ou1aq5yar] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.header-subtitle span[b-2ou1aq5yar] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mark-all-read-btn[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(229, 0, 205, 0.12);
    border: 1px solid rgba(229, 0, 205, 0.25);
    border-radius: 20px;
    color: #e500cd;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.mark-all-read-btn:hover[b-2ou1aq5yar] {
    background: rgba(229, 0, 205, 0.25);
    border-color: rgba(229, 0, 205, 0.4);
    transform: translateY(-1px);
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.notifications-body[b-2ou1aq5yar] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.notifications-body[b-2ou1aq5yar]::-webkit-scrollbar {
    width: 5px;
}

.notifications-body[b-2ou1aq5yar]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

/* ── Loading State ───────────────────────────────────────────────────────── */
.loading-state[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: #94a3b8;
    font-size: 13px;
}

.notification-spinner[b-2ou1aq5yar] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(229, 0, 205, 0.15);
    border-top-color: #e500cd;
    border-radius: 50%;
    animation: notification-spin-b-2ou1aq5yar 0.8s linear infinite;
}

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

/* ── Empty State ─────────────────────────────────────────────────────────── */
.empty-state[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.empty-icon[b-2ou1aq5yar] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(229, 0, 205, 0.08), rgba(138, 43, 226, 0.08));
    border-radius: 20px;
    color: #475569;
    margin-bottom: 20px;
}

.empty-state h3[b-2ou1aq5yar] {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #cbd5e1;
}

.empty-state p[b-2ou1aq5yar] {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    max-width: 260px;
}

/* ── Notification Group ──────────────────────────────────────────────────── */
.notification-group[b-2ou1aq5yar] {
    margin-bottom: 6px;
}

.group-header[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
    user-select: none;
}

.group-header:hover[b-2ou1aq5yar] {
    background: rgba(255, 255, 255, 0.04);
}

.group-header-left[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-icon[b-2ou1aq5yar] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    flex-shrink: 0;
}

.group-name[b-2ou1aq5yar] {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-badge[b-2ou1aq5yar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #e500cd, #a855f7);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.group-chevron[b-2ou1aq5yar] {
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.group-chevron.collapsed[b-2ou1aq5yar] {
    transform: rotate(-90deg);
}

/* ── Group Items Container ───────────────────────────────────────────────── */
.group-items[b-2ou1aq5yar] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 4px;
    animation: slideDown-b-2ou1aq5yar 0.2s ease-out;
}

@keyframes slideDown-b-2ou1aq5yar {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Notification Item ───────────────────────────────────────────────────── */
.notification-item[b-2ou1aq5yar] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.notification-item:hover[b-2ou1aq5yar] {
    background: rgba(255, 255, 255, 0.04);
}

.notification-item.unread[b-2ou1aq5yar] {
    background: rgba(229, 0, 205, 0.04);
    border-left: 2px solid #e500cd;
}

.notification-item.unread:hover[b-2ou1aq5yar] {
    background: rgba(229, 0, 205, 0.08);
}

.notification-item.read[b-2ou1aq5yar] {
    border-left: 2px solid transparent;
    opacity: 0.95;
}

.notification-item.read:hover[b-2ou1aq5yar] {
    opacity: 1;
}

/* ── Indicator Dot ───────────────────────────────────────────────────────── */
.notification-indicator[b-2ou1aq5yar] {
    flex-shrink: 0;
    padding-top: 4px;
}

.dot[b-2ou1aq5yar] {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dot.active[b-2ou1aq5yar] {
    background: #e500cd;
    box-shadow: 0 0 8px rgba(229, 0, 205, 0.5);
}

/* ── Notification Icon ───────────────────────────────────────────────────── */
.notification-icon[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.notification-item.unread .notification-icon[b-2ou1aq5yar] {
    background: rgba(229, 0, 205, 0.15);
    color: #e500cd;
}

/* ── Notification Content ────────────────────────────────────────────────── */
.notification-content[b-2ou1aq5yar] {
    flex: 1;
    min-width: 0;
}

.notification-title-row[b-2ou1aq5yar] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.notification-title[b-2ou1aq5yar] {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    word-break: break-word;
}

.notification-item.read .notification-title[b-2ou1aq5yar] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.notification-time[b-2ou1aq5yar] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
}

.notification-description[b-2ou1aq5yar] {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item.read .notification-description[b-2ou1aq5yar] {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Action Buttons ──────────────────────────────────────────────────────── */
.notification-actions[b-2ou1aq5yar] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notification-item:hover .notification-actions[b-2ou1aq5yar] {
    opacity: 1;
}

.action-btn[b-2ou1aq5yar] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.action-btn:hover[b-2ou1aq5yar] {
    transform: scale(1.1);
}

.read-btn:hover[b-2ou1aq5yar] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.delete-btn:hover[b-2ou1aq5yar] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
/* /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/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/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/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;
    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;
    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%;
    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-zg54ni3vvx 0.3s ease-out;
}


.filtros-sidebar[b-zg54ni3vvx] {
    position: absolute;
    top: -30px;
    left: -470px;
    width: 450px;
    height: 100vh;
    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%;
    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-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: 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;
    -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;
    justify-content: flex-start;
    animation: fadeIn-b-sn08ule079 0.4s ease-out;
}

.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: #1a365d;
    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;
}

@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] {
    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] {
    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-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] {
    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);
}
/* /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;
    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;
    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: #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-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;
    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: #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-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],
.expanded-filters .filtro-input:hover[b-oyj0lr2ms2] {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(15, 23, 42, 0.8);
}

.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);
}
/* /Pages/Home/Components/Setting/Company/CompanyDetailPanel.razor.rz.scp.css */
.company-detail-panel[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px;
    background: #E1E1E1;
    border-radius: 16px;
    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;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.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: 180px;
    height: 180px;
    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: 75px; /* Prevent text collision with absolute edit button */
}

.company-name[b-xm752azppp] {
    font-size: 24px;
    /* Requested size */
    font-weight: 800;
    color: #334D6E;
    margin: 0;
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: break-word;
}

.company-industry-badge[b-xm752azppp] {
    display: inline-block;
    background-color: #00A3E0;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    /* Requested size */
    font-weight: 700;
    margin: 8px 0;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(0, 163, 224, 0.3);
    letter-spacing: 0.3px;
}

/* ... existing meta ... */
.company-meta[b-xm752azppp] {
    font-size: 15px;
    color: #546575;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    min-width: 0;
}

.meta-item[b-xm752azppp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meta-label[b-xm752azppp] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898AA;
    font-weight: 700;
}

.meta-value[b-xm752azppp] {
    font-size: 14px;
    color: #334D6E;
    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;
    box-shadow: 0 4px 10px rgba(254, 0, 228, 0.3);
}

.edit-btn:hover[b-xm752azppp] {
    background: #D500C0;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(254, 0, 228, 0.5);
}

.list-header[b-xm752azppp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px 8px 4px;
    color: #8898AA;
    font-size: 1rem;
    font-weight: 700;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
    /* Divider */
    margin-top: 8px;
    flex-shrink: 0;
}

.add-store-btn[b-xm752azppp] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    border: 1px solid rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.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: #ccc 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: #334D6E;
    margin: 0 0 8px 0;
}

.empty-stores-subtitle[b-xm752azppp] {
    font-size: 0.85rem;
    color: #8898AA;
    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: #475569;
    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;
    background-color: rgba(3, 10, 22, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    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;
}

.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;
}

.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;
}

.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-subtitle[b-3263r7v37u] {
    color: rgb(255, 255, 255);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 12px 4px;
}

.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;
}

/* 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;
    box-shadow: 0 4px 10px rgba(245, 0, 87, 0.3);
}

.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;
    box-shadow: 0 4px 12px rgba(254, 0, 228, 0.4);
    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);
    box-shadow: 0 6px 16px rgba(254, 0, 228, 0.5);
}

.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);
}

/* Company Tabs Row (MAUI Style) */
.company-tabs-wrapper[b-3263r7v37u] {
    padding: 12px 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.company-tabs-container[b-3263r7v37u] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.company-tabs-container[b-3263r7v37u]::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.company-tab-btn[b-3263r7v37u] {
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.company-tab-btn:hover[b-3263r7v37u] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.company-tab-btn.active[b-3263r7v37u] {
    background: #FE00E4;
    color: white;
    box-shadow: 0 4px 10px rgba(254, 0, 228, 0.4);
}

.company-tab-add-btn[b-3263r7v37u] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.company-tab-add-btn:hover[b-3263r7v37u] {
    background: rgba(255, 255, 255, 0.25);
}

.plus-icon[b-3263r7v37u] {
    width: 18px;
    height: 18px;
}

/* Embedded Company Detail Panel Overrides for Dark Sidebar context */
.company-detail-embedded-wrapper[b-3263r7v37u] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-detail-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: 100% !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-logo {
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-logo svg {
    width: 48px !important;
    height: 48px !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-name {
    color: white !important;
    font-size: 1.3rem !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .meta-value {
    color: rgba(255, 255, 255, 0.85) !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .meta-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .list-header {
    color: rgba(255, 255, 255, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-scrollable-content {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.company-detail-embedded-wrapper[b-3263r7v37u]  .company-header-fixed {
    min-height: 100px !important;
}
/* /Pages/Home/Components/Setting/Department/Components/CargosNivelesPanel.razor.rz.scp.css */
.cargos-niveles-panel[b-e2j6hwdvj6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

/* Header */
/* Header Row */
.cn-header-row[b-e2j6hwdvj6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cn-header-actions[b-e2j6hwdvj6] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-box[b-e2j6hwdvj6] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-e2j6hwdvj6] {
    position: absolute;
    left: 14px;
    color: #8898AA;
}

.search-box input[b-e2j6hwdvj6] {
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 250px;
}

.search-box input:focus[b-e2j6hwdvj6] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

.cn-header[b-e2j6hwdvj6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-title[b-e2j6hwdvj6] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    margin: 0;
}

.cn-subtitle[b-e2j6hwdvj6] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

/* Tabs - scroll wrapper */
.cn-tabs-wrapper[b-e2j6hwdvj6] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

.cn-tabs-row[b-e2j6hwdvj6] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
    flex: 1;
}

.cn-tabs-row[b-e2j6hwdvj6]::-webkit-scrollbar {
    display: none;
}

.cn-scroll-btn[b-e2j6hwdvj6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cn-scroll-btn:hover[b-e2j6hwdvj6] {
    background: #E8EBF2;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cn-scroll-btn.left[b-e2j6hwdvj6] {
    margin-right: 6px;
}

.cn-scroll-btn.right[b-e2j6hwdvj6] {
    margin-left: 6px;
}

.cn-tab[b-e2j6hwdvj6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    border-radius: 25px;
    border: 2px solid #E0E0E0;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.95rem;
    font-weight: 600;
    color: #8898AA;
}

.cn-tab:hover[b-e2j6hwdvj6] {
    border-color: #FFC107;
    color: #555;
}

.cn-tab.active[b-e2j6hwdvj6] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
}

.cn-tab-label[b-e2j6hwdvj6] {
    font-weight: 700;
}

.cn-tab-count[b-e2j6hwdvj6] {
    font-weight: 800;
    font-size: 1.1rem;
    color: #333;
}

.cn-tab.active .cn-tab-count[b-e2j6hwdvj6] {
    color: #E6A200;
}

/* Top-right Add Button */
.cn-add-btn-top[b-e2j6hwdvj6] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
    flex-shrink: 0;
}

.cn-add-btn-top:hover[b-e2j6hwdvj6] {
    background: #E600E6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}

/* ======================== */
/* CARGOS - Items List      */
/* ======================== */
.cn-items-list[b-e2j6hwdvj6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.cn-items-list[b-e2j6hwdvj6]::-webkit-scrollbar {
    width: 6px;
}

.cn-items-list[b-e2j6hwdvj6]::-webkit-scrollbar-track {
    background: transparent;
}

.cn-items-list[b-e2j6hwdvj6]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.cn-items-list[b-e2j6hwdvj6]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

.cn-item-card[b-e2j6hwdvj6] {
    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-e2j6hwdvj6] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.cn-item-card.selected[b-e2j6hwdvj6] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

.cn-item-avatar[b-e2j6hwdvj6] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #E8EBF2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-item-info[b-e2j6hwdvj6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cn-item-name[b-e2j6hwdvj6] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-item-role[b-e2j6hwdvj6] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
}

.cn-item-status[b-e2j6hwdvj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cn-status-dot[b-e2j6hwdvj6] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.cn-status-dot.active[b-e2j6hwdvj6] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.cn-status-dot.inactive[b-e2j6hwdvj6] {
    background: #E0E0E0;
}

.cn-status-label[b-e2j6hwdvj6] {
    font-size: 0.7rem;
    font-weight: 600;
}

.cn-status-label.active[b-e2j6hwdvj6] {
    color: #4CAF50;
}

.cn-status-label.inactive[b-e2j6hwdvj6] {
    color: #999;
}

/* ======================== */
/* NIVELES - Split Layout   */
/* ======================== */
.cn-niveles-layout[b-e2j6hwdvj6] {
    display: flex;
    gap: 32px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Niveles List (Left) */
.cn-niveles-list[b-e2j6hwdvj6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    max-width: 340px;

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    padding-right: 16px;
    border-right: 1.5px solid #E2E8F0;
    margin-right: -12px;
}

.cn-niveles-list[b-e2j6hwdvj6]::-webkit-scrollbar {
    width: 6px;
}

.cn-niveles-list[b-e2j6hwdvj6]::-webkit-scrollbar-track {
    background: transparent;
}

.cn-niveles-list[b-e2j6hwdvj6]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.cn-niveles-list[b-e2j6hwdvj6]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Individual Nivel Bar */
.cn-nivel-bar[b-e2j6hwdvj6] {
    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-e2j6hwdvj6] {
    opacity: 0.85;
    transform: translateX(2px);
}

.cn-nivel-bar.selected[b-e2j6hwdvj6] {
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
    transform: scale(1.02);
    border: 2px solid #FFC107;
}

.cn-nivel-name[b-e2j6hwdvj6] {
    font-size: 1rem;
    font-weight: 700;
    color: #444;
}

/* Letter Badge Circle */
.cn-nivel-badge[b-e2j6hwdvj6] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-nivel-badge span[b-e2j6hwdvj6] {
    color: white;
    font-weight: 800;
    font-size: 0.95rem;
}

/* Nivel Detail (Right) */
.cn-nivel-detail[b-e2j6hwdvj6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 24px;
    gap: 12px;
    animation: fadeInDetail-b-e2j6hwdvj6 0.3s ease;
    min-width: 0;
    height: 100%;
}

.cn-nivel-detail[b-e2j6hwdvj6]::-webkit-scrollbar {
    width: 6px;
}

.cn-nivel-detail[b-e2j6hwdvj6]::-webkit-scrollbar-track {
    background: transparent;
}

.cn-nivel-detail[b-e2j6hwdvj6]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.cn-nivel-detail[b-e2j6hwdvj6]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

@keyframes fadeInDetail-b-e2j6hwdvj6 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.cn-nivel-detail-badge[b-e2j6hwdvj6] {
    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-e2j6hwdvj6] {
    font-size: 2rem;
    font-weight: 800;
}

.cn-nivel-detail-name[b-e2j6hwdvj6] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.cn-nivel-detail-desc[b-e2j6hwdvj6] {
    font-size: 0.85rem;
    color: #8898AA;
    text-align: center;
    margin: 0;
    max-width: 200px;
    line-height: 1.4;
}
/* /Pages/Home/Components/Setting/Department/Components/JobTitleEditPanel.razor.rz.scp.css */
.jobtitle-edit-panel[b-k4ybsiutpu] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.jte-header[b-k4ybsiutpu] {
    margin-bottom: 24px;
}

.jte-title[b-k4ybsiutpu] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.jte-subtitle[b-k4ybsiutpu] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.jte-body[b-k4ybsiutpu] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

.jte-avatar-section[b-k4ybsiutpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.jte-avatar[b-k4ybsiutpu] {
    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-k4ybsiutpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.jte-toggle-label[b-k4ybsiutpu] {
    font-size: 0.85rem;
    font-weight: 600;
}

.jte-toggle-label.active[b-k4ybsiutpu] {
    color: #4CAF50;
}

.jte-toggle-label.inactive[b-k4ybsiutpu] {
    color: #f44336;
}

/* Switch */
.toggle-switch[b-k4ybsiutpu] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-k4ybsiutpu] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-k4ybsiutpu] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-k4ybsiutpu]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider[b-k4ybsiutpu] {
    background-color: #4CAF50;
}

input:checked+.slider[b-k4ybsiutpu]:before {
    transform: translateX(20px);
}

.form-label[b-k4ybsiutpu] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

.form-select[b-k4ybsiutpu] {
    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;
    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-k4ybsiutpu] {
    border-color: #0E223B;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 34, 59, 0.1);
}

.jte-info-section[b-k4ybsiutpu] {
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-k4ybsiutpu] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-k4ybsiutpu] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.delete-profile-section[b-k4ybsiutpu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-profile-label[b-k4ybsiutpu] {
    font-size: 0.85rem;
    color: #334D6E;
}

.btn-delete-profile[b-k4ybsiutpu] {
    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-k4ybsiutpu] {
    background: #FFF0FF;
}

.jte-footer[b-k4ybsiutpu] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-k4ybsiutpu] {
    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-k4ybsiutpu] {
    background: #CBD5E1;
}

.btn-primary[b-k4ybsiutpu] {
    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-k4ybsiutpu] {
    background: #e600e6;
}

.btn-primary:disabled[b-k4ybsiutpu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mt-4[b-k4ybsiutpu] {
    margin-top: 1.5rem;
}

.mt-auto[b-k4ybsiutpu] {
    margin-top: auto;
}

.w-100[b-k4ybsiutpu] {
    width: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/ProcesosPanel.razor.rz.scp.css */
.procesos-panel[b-2wmwbig28z] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

/* Header Row */
.pr-header-row[b-2wmwbig28z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pr-header-actions[b-2wmwbig28z] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px;
}

.search-box[b-2wmwbig28z] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-2wmwbig28z] {
    position: absolute;
    left: 14px;
    color: #8898AA;
}

.search-box input[b-2wmwbig28z] {
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 250px;
}

.search-box input:focus[b-2wmwbig28z] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

.pr-header[b-2wmwbig28z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pr-title[b-2wmwbig28z] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    margin: 0;
}

.pr-subtitle[b-2wmwbig28z] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

/* Top-right Add Button */
.pr-add-btn-top[b-2wmwbig28z] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
    flex-shrink: 0;
}

.pr-add-btn-top:hover[b-2wmwbig28z] {
    background: #E600E6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}

/* Tabs - scroll wrapper */
.pr-tabs-wrapper[b-2wmwbig28z] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

.pr-tabs-row[b-2wmwbig28z] {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex: 1;
}

.pr-tabs-row[b-2wmwbig28z]::-webkit-scrollbar {
    display: none;
}

.pr-scroll-btn[b-2wmwbig28z] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.pr-scroll-btn:hover[b-2wmwbig28z] {
    background: #E8EBF2;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pr-scroll-btn.left[b-2wmwbig28z] {
    margin-right: 6px;
}

.pr-scroll-btn.right[b-2wmwbig28z] {
    margin-left: 6px;
}

.pr-tab[b-2wmwbig28z] {
    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.9rem;
    font-weight: 600;
    color: #8898AA;
    white-space: nowrap;
    flex-shrink: 0;
}

.pr-tab:hover[b-2wmwbig28z] {
    border-color: #FFC107;
    color: #555;
}

.pr-tab.active[b-2wmwbig28z] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
}

.pr-tab-label[b-2wmwbig28z] {
    font-weight: 700;
}

.pr-tab-count[b-2wmwbig28z] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #333;
}

.pr-tab.active .pr-tab-count[b-2wmwbig28z] {
    color: #E6A200;
}

/* Groups List */
.pr-groups-list[b-2wmwbig28z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    max-width: 400px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    padding-right: 16px;
    border-right: 1.5px solid #E2E8F0;
    margin-right: -12px;
}

.pr-content-split[b-2wmwbig28z] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* Group Header */
.pr-group-header[b-2wmwbig28z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    margin-top: 6px;
}

.pr-group-header:first-child[b-2wmwbig28z] {
    margin-top: 0;
}

.pr-group-name[b-2wmwbig28z] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.pr-group-count[b-2wmwbig28z] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8898AA;
}

/* Process Card */
.pr-process-card[b-2wmwbig28z] {
    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-2wmwbig28z] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.pr-process-card.selected[b-2wmwbig28z] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

/* Process Icon */
.pr-process-icon[b-2wmwbig28z] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #FFC107;
    background: #FFF8E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Process Name */
.pr-process-name[b-2wmwbig28z] {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status */
.pr-process-status[b-2wmwbig28z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 44px;
}

.pr-status-dot[b-2wmwbig28z] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.pr-status-dot.active[b-2wmwbig28z] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.pr-status-dot.inactive[b-2wmwbig28z] {
    background: #BDBDBD;
}

.pr-status-label[b-2wmwbig28z] {
    font-size: 0.65rem;
    font-weight: 600;
}

.pr-status-label.active[b-2wmwbig28z] {
    color: #4CAF50;
}

.pr-status-label.inactive[b-2wmwbig28z] {
    color: #999;
}

.pr-edit-detail[b-2wmwbig28z] {
    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-y: auto;
    overflow-x: hidden;
}
/* /Pages/Home/Components/Setting/Department/Components/ProcessEditPanel.razor.rz.scp.css */
/* Form Layout and Aesthetics */
.process-edit-panel[b-z30lrjspvf] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    margin: 0;
}

.pe-header[b-z30lrjspvf] {
    margin-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}

.pe-title[b-z30lrjspvf] {
    font-size: 24px;
    color: #1e293b;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.pe-subtitle[b-z30lrjspvf] {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}

.form-row[b-z30lrjspvf] {
    margin-bottom: 20px;
}

.form-row.double[b-z30lrjspvf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.form-group[b-z30lrjspvf] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-z30lrjspvf] {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 8px;
}

.form-group input[b-z30lrjspvf], 
.form-group select[b-z30lrjspvf], 
.form-group textarea[b-z30lrjspvf] {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.form-group input:focus[b-z30lrjspvf], 
.form-group select:focus[b-z30lrjspvf], 
.form-group textarea:focus[b-z30lrjspvf] {
    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-z30lrjspvf] {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.pe-footer[b-z30lrjspvf] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.pe-footer button[b-z30lrjspvf] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel[b-z30lrjspvf] {
    background-color: #f1f5f9;
    color: #475569;
}

.btn-cancel:hover[b-z30lrjspvf] {
    background-color: #e2e8f0;
}

.btn-save[b-z30lrjspvf] {
    background-color: #d33bb2;
    color: white;
    box-shadow: 0 2px 4px rgba(211, 59, 178, 0.3);
}

.btn-save:hover[b-z30lrjspvf] {
    background-color: #b02e93;
    box-shadow: 0 4px 6px rgba(211, 59, 178, 0.4);
    transform: translateY(-1px);
}

.btn-delete[b-z30lrjspvf] {
    background-color: #fee2e2;
    color: #ef4444;
    margin-right: auto;
}

.btn-delete:hover[b-z30lrjspvf] {
    background-color: #fecaca;
}

/* Toggle Switch Styling */
.switch-container[b-z30lrjspvf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    background-color: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.switch-container:hover[b-z30lrjspvf] {
    background-color: #f1f5f9;
}

.switch-label[b-z30lrjspvf] {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.switch[b-z30lrjspvf] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input[b-z30lrjspvf] {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider[b-z30lrjspvf] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .4s;
}

.slider[b-z30lrjspvf]: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-z30lrjspvf] {
  background-color: #d33bb2;
}

input:focus + .slider[b-z30lrjspvf] {
  box-shadow: 0 0 1px #d33bb2;
}

input:checked + .slider[b-z30lrjspvf]:before {
  transform: translateX(20px);
}

.slider.round[b-z30lrjspvf] {
  border-radius: 24px;
}

.slider.round[b-z30lrjspvf]:before {
  border-radius: 50%;
}
/* /Pages/Home/Components/Setting/Department/Components/RoleEditPanel.razor.rz.scp.css */
/* ══════════════════════════════════════
   RoleEditPanel – consistent with app design system
   Colors: #FF00FF/#d33bb2 primary, #FFC107 selection, #334D6E text
   ══════════════════════════════════════ */

.role-edit-panel[b-tr52e94bnp] {
    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;
    height: 100%;
}

.re-header[b-tr52e94bnp] {
    margin-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    flex-shrink: 0;
}

.re-title[b-tr52e94bnp] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.re-subtitle[b-tr52e94bnp] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.re-loading[b-tr52e94bnp] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #8898AA;
}

.re-body[b-tr52e94bnp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.re-body[b-tr52e94bnp]::-webkit-scrollbar {
    width: 6px;
}

.re-body[b-tr52e94bnp]::-webkit-scrollbar-track {
    background: transparent;
}

.re-body[b-tr52e94bnp]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

/* ── Form Section (JobTitle selector) ── */
.re-form-section[b-tr52e94bnp] {
    background-color: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.re-field-label[b-tr52e94bnp] {
    font-size: 13px;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 8px;
    display: block;
}

.re-select[b-tr52e94bnp] {
    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-tr52e94bnp] {
    border-color: #FF00FF;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

/* ══════════════════════════════════════
   Feature Cards List
   ══════════════════════════════════════ */
.re-features-list[b-tr52e94bnp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-feature-card[b-tr52e94bnp] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 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;
}

.re-feature-card:hover[b-tr52e94bnp] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #E0E0E0;
    transform: translateY(-1px);
}

.re-feature-icon[b-tr52e94bnp] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #11CDEF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(17, 205, 239, 0.3);
}

.re-feature-info[b-tr52e94bnp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.re-feature-name[b-tr52e94bnp] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-feature-count[b-tr52e94bnp] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
}

.re-feature-indicator[b-tr52e94bnp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.re-feature-progress[b-tr52e94bnp] {
    width: 60px;
    height: 4px;
    background: #F0F2F5;
    border-radius: 2px;
    overflow: hidden;
}

.re-feature-progress-fill[b-tr52e94bnp] {
    height: 100%;
    border-radius: 2px;
    background: #d33bb2;
    transition: width 0.4s ease;
}

.re-feature-arrow[b-tr52e94bnp] {
    color: #CCD6E0;
    transition: all 0.2s;
    flex-shrink: 0;
}

.re-feature-card:hover .re-feature-arrow[b-tr52e94bnp] {
    color: #8898AA;
    transform: translateX(2px);
}

/* ══════════════════════════════════════
   Feature Detail View (Actions)
   ══════════════════════════════════════ */
.re-feature-detail-view[b-tr52e94bnp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: reFadeIn-b-tr52e94bnp 0.25s ease;
}

@keyframes reFadeIn-b-tr52e94bnp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back button – styled as link, not <button> */
.re-back-btn[b-tr52e94bnp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #8898AA;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    padding: 4px 0;
    align-self: flex-start;
}

.re-back-btn:hover[b-tr52e94bnp] {
    color: #d33bb2;
}

.re-back-btn:hover svg[b-tr52e94bnp] {
    transform: translateX(-2px);
}

.re-back-btn svg[b-tr52e94bnp] {
    transition: transform 0.2s;
}

/* Detail Header */
.re-detail-head[b-tr52e94bnp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #E8EBED;
}

.re-detail-badge[b-tr52e94bnp] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #11CDEF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(17, 205, 239, 0.3);
}

.re-detail-head-info[b-tr52e94bnp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.re-detail-head-title[b-tr52e94bnp] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1f36;
}

.re-detail-head-count[b-tr52e94bnp] {
    font-size: 0.82rem;
    color: #8898AA;
    font-weight: 500;
}

/* Actions Section */
.re-actions-section[b-tr52e94bnp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.re-section-label[b-tr52e94bnp] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #8898AA;
    text-transform: uppercase;
}

.re-actions-list[b-tr52e94bnp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Action Item (matching switch-container from ProcessEditPanel) ── */
.re-action-item[b-tr52e94bnp] {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.re-action-item:hover[b-tr52e94bnp] {
    background-color: #f1f5f9;
}

.re-action-item.enabled[b-tr52e94bnp] {
    border-color: #d33bb2;
    background-color: #fdf4fb;
}

.re-action-info[b-tr52e94bnp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.re-action-name[b-tr52e94bnp] {
    font-size: 14px;
    color: #334155;
    font-weight: 600;
}

.re-action-desc[b-tr52e94bnp] {
    font-size: 12px;
    color: #8898AA;
    font-weight: 400;
}

/* ── DIV-based Toggle Switch (no CSS sibling selectors) ── */
.re-toggle[b-tr52e94bnp] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 24px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.re-toggle.off[b-tr52e94bnp] {
    background-color: #cbd5e1;
}

.re-toggle.on[b-tr52e94bnp] {
    background-color: #d33bb2;
}

.re-toggle-thumb[b-tr52e94bnp] {
    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-tr52e94bnp] {
    left: 3px;
}

.re-toggle.on .re-toggle-thumb[b-tr52e94bnp] {
    left: 23px;
}

/* Read-only status indicator */
.re-status-indicator[b-tr52e94bnp] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.re-status-indicator.active[b-tr52e94bnp] {
    background: #4CAF50;
    color: white;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.re-status-indicator.inactive[b-tr52e94bnp] {
    background: #E0E0E0;
}

/* ── Empty State ── */
.re-empty[b-tr52e94bnp] {
    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-tr52e94bnp] {
    opacity: 0.4;
}

.re-empty p[b-tr52e94bnp] {
    font-size: 0.9rem;
    margin: 0;
}

/* ── Footer ── */
.re-footer[b-tr52e94bnp] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.btn-cancel[b-tr52e94bnp] {
    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-tr52e94bnp] {
    background: #CBD5E1;
}

.btn-save[b-tr52e94bnp] {
    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);
}

.btn-save:hover[b-tr52e94bnp] {
    background: #e600e6;
    box-shadow: 0 4px 6px rgba(255, 0, 255, 0.4);
    transform: translateY(-1px);
}

.btn-save:disabled[b-tr52e94bnp] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* /Pages/Home/Components/Setting/Department/Components/RolesPermisosPanel.razor.rz.scp.css */
.roles-permisos-panel[b-f3j5rl4aqk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

/* Header */
/* Header Row */
.rp-header-row[b-f3j5rl4aqk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rp-header-actions[b-f3j5rl4aqk] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-box[b-f3j5rl4aqk] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-f3j5rl4aqk] {
    position: absolute;
    left: 14px;
    color: #8898AA;
}

.search-box input[b-f3j5rl4aqk] {
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 250px;
}

.search-box input:focus[b-f3j5rl4aqk] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

.rp-header[b-f3j5rl4aqk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-title[b-f3j5rl4aqk] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    margin: 0;
}

.rp-subtitle[b-f3j5rl4aqk] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

/* Tabs - scroll wrapper */
.rp-tabs-wrapper[b-f3j5rl4aqk] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

.rp-tabs-row[b-f3j5rl4aqk] {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex: 1;
}

.rp-tabs-row[b-f3j5rl4aqk]::-webkit-scrollbar {
    display: none;
}

.rp-scroll-btn[b-f3j5rl4aqk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.rp-scroll-btn:hover[b-f3j5rl4aqk] {
    background: #E8EBF2;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rp-scroll-btn.left[b-f3j5rl4aqk] {
    margin-right: 6px;
}

.rp-scroll-btn.right[b-f3j5rl4aqk] {
    margin-left: 6px;
}

.rp-tab[b-f3j5rl4aqk] {
    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.9rem;
    font-weight: 600;
    color: #8898AA;
    white-space: nowrap;
    flex-shrink: 0;
}

.rp-tab:hover[b-f3j5rl4aqk] {
    border-color: #FFC107;
    color: #555;
}

.rp-tab.active[b-f3j5rl4aqk] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
}

.rp-tab-label[b-f3j5rl4aqk] {
    font-weight: 700;
}

.rp-tab-count[b-f3j5rl4aqk] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #333;
}

.rp-tab.active .rp-tab-count[b-f3j5rl4aqk] {
    color: #E6A200;
}

/* Top-right Add Button */
.rp-add-btn-top[b-f3j5rl4aqk] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
    flex-shrink: 0;
}

.rp-add-btn-top:hover[b-f3j5rl4aqk] {
    background: #E600E6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}

/* Content Layout */
.rp-content-layout[b-f3j5rl4aqk] {
    display: flex;
    align-items: stretch;
    gap: 32px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Roles List */
.rp-roles-list[b-f3j5rl4aqk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 220px;
    max-width: 380px;

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    padding-right: 16px;
    border-right: 1.5px solid #E2E8F0;
    margin-right: -12px;
}

.rp-roles-list[b-f3j5rl4aqk]::-webkit-scrollbar {
    width: 6px;
}

.rp-roles-list[b-f3j5rl4aqk]::-webkit-scrollbar-track {
    background: transparent;
}

.rp-roles-list[b-f3j5rl4aqk]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.rp-roles-list[b-f3j5rl4aqk]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Role Card */
.rp-role-card[b-f3j5rl4aqk] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #F0F0F0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow: hidden;
    margin: 2px;
    /* Added margin to ensure border/shadow is not clipped */
    box-sizing: border-box;
}

.rp-role-card:hover[b-f3j5rl4aqk] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #E0E0E0;
}

.rp-role-card.selected[b-f3j5rl4aqk] {
    border: 2px solid #FFC107 !important;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.25);
    background-color: #fff;
    z-index: 1;
    /* Ensure border is above neighbors */
}

.rp-card-header[b-f3j5rl4aqk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    width: 100%;
}

.rp-card-body[b-f3j5rl4aqk] {
    padding: 0 16px 16px 72px;
    /* Align with info after icon */
    border-top: 1px solid #F8F9FA;
    animation: rpSlideDown-b-f3j5rl4aqk 0.3s ease;
}

@keyframes rpSlideDown-b-f3j5rl4aqk {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

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

.rp-toggle-btn:hover[b-f3j5rl4aqk] {
    background: #F0F2F5;
    color: #4CAF50;
}

.rp-role-card.expanded .rp-toggle-btn[b-f3j5rl4aqk] {
    transform: rotate(180deg);
}

.rp-perm-list[b-f3j5rl4aqk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.rp-perm-item[b-f3j5rl4aqk] {
    font-size: 0.85rem;
    color: #475569;
    padding: 6px 0;
    border-bottom: 1px solid #F1F5F9;
}

.rp-perm-item:last-child[b-f3j5rl4aqk] {
    border-bottom: none;
}

/* Green Icon */
.rp-role-icon[b-f3j5rl4aqk] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #4CAF50;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}

.rp-role-info[b-f3j5rl4aqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rp-role-name[b-f3j5rl4aqk] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-role-count[b-f3j5rl4aqk] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
}

/* Detail Panel */
.rp-role-detail[b-f3j5rl4aqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 16px 16px 16px;
    gap: 12px;
    border-radius: 16px;
    animation: rpFadeIn-b-f3j5rl4aqk 0.3s ease;
    min-width: 0;
    height: 100%;
    overflow: hidden; /* Prevent parent from scrolling, force child re-body to scroll */
}

.rp-role-detail[b-f3j5rl4aqk]::-webkit-scrollbar {
    width: 6px;
}

.rp-role-detail[b-f3j5rl4aqk]::-webkit-scrollbar-track {
    background: transparent;
}

.rp-role-detail[b-f3j5rl4aqk]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.rp-role-detail[b-f3j5rl4aqk]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

@keyframes rpFadeIn-b-f3j5rl4aqk {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.rp-detail-icon-wrapper[b-f3j5rl4aqk] {
    margin-bottom: 8px;
}

.rp-detail-icon[b-f3j5rl4aqk] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #4CAF50;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}

.rp-detail-name[b-f3j5rl4aqk] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-align: center;
}

/* Categorías Superiores */
.rp-categories-row[b-f3j5rl4aqk] {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.rp-category-btn[b-f3j5rl4aqk] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8898AA;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rp-category-btn:hover[b-f3j5rl4aqk] {
    background: #F8F9FA;
    color: #333;
}

.rp-category-btn.active[b-f3j5rl4aqk] {
    background: #FF00FF;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.2);
}

/* Iconos de Categoría */
.rp-role-icon.user[b-f3j5rl4aqk] { background: #5E72E4; }
.rp-role-icon.job[b-f3j5rl4aqk] { background: #11CDEF; }
.rp-role-icon.permission[b-f3j5rl4aqk] { background: #F5365C; }
.rp-role-icon.role[b-f3j5rl4aqk] { background: #4CAF50; }

.rp-role-subtitle[b-f3j5rl4aqk] {
    font-size: 0.75rem;
    color: #8898AA;
}

/* Effective Permissions List */
.rp-effective-list[b-f3j5rl4aqk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-effective-item[b-f3j5rl4aqk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #F0F0F0;
    transition: all 0.2s ease;
}

.rp-effective-item:hover[b-f3j5rl4aqk] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-color: #E0E0E0;
}

.rp-eff-status[b-f3j5rl4aqk] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp-eff-status.granted[b-f3j5rl4aqk] { background: #2DCE89; color: white; }
.rp-eff-status.deny[b-f3j5rl4aqk] { background: #F5365C; color: white; }
.rp-eff-status.base[b-f3j5rl4aqk] { background: #ADB5BD; color: white; }

.rp-eff-info[b-f3j5rl4aqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-eff-name[b-f3j5rl4aqk] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
}

.rp-eff-desc[b-f3j5rl4aqk] {
    font-size: 0.8rem;
    color: #8898AA;
}

.rp-eff-origin[b-f3j5rl4aqk] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    background: #F0F2F5;
    color: #8898AA;
    text-transform: uppercase;
}

/* Placeholder Detail */
.rp-role-detail.placeholder[b-f3j5rl4aqk] {
    align-items: center;
    justify-content: center;
    color: #8898AA;
    text-align: center;
}

.placeholder-content[b-f3j5rl4aqk] {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.placeholder-icon[b-f3j5rl4aqk] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F0F2F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ADB5BD;
}
/* /Pages/Home/Components/Setting/Department/Components/SetupEditPanel.razor.rz.scp.css */
.setup-edit-panel[b-cbz72y8vcw] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;    /* evita desbordamiento horizontal en flex */
}

.se-header[b-cbz72y8vcw] {
    margin-bottom: 24px;
}

.se-title[b-cbz72y8vcw] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.se-subtitle[b-cbz72y8vcw] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.se-alert[b-cbz72y8vcw] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.se-alert.error[b-cbz72y8vcw] {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.se-body[b-cbz72y8vcw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.se-form[b-cbz72y8vcw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-cbz72y8vcw] {
    display: flex;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.form-row.double>.form-group[b-cbz72y8vcw] {
    flex: 1 1 200px;
}

.form-group[b-cbz72y8vcw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.form-group label[b-cbz72y8vcw] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
}

.form-group input[b-cbz72y8vcw],
.form-group select[b-cbz72y8vcw],
.form-group textarea[b-cbz72y8vcw] {
    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-cbz72y8vcw]::placeholder,
.form-group textarea[b-cbz72y8vcw]::placeholder {
    font-weight: 400;
}

.form-group input:focus[b-cbz72y8vcw],
.form-group select:focus[b-cbz72y8vcw],
.form-group textarea:focus[b-cbz72y8vcw] {
    outline: none;
    border-color: #FF00FF;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
}

.form-group textarea[b-cbz72y8vcw] {
    resize: vertical;
    min-height: 80px;
}

.toggles[b-cbz72y8vcw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.toggle-control[b-cbz72y8vcw] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #475569;
    user-select: none;
}

.toggle-control input[b-cbz72y8vcw] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #FF00FF;
}

.se-footer[b-cbz72y8vcw] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-delete[b-cbz72y8vcw] {
    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-cbz72y8vcw] {
    background: #fef2f2;
}

.btn-cancel[b-cbz72y8vcw] {
    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-cbz72y8vcw] {
    background: #CBD5E1;
}

.btn-save[b-cbz72y8vcw] {
    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-cbz72y8vcw] {
    background: #e600e6;
}

.btn-save:disabled[b-cbz72y8vcw],
.btn-delete:disabled[b-cbz72y8vcw],
.btn-cancel:disabled[b-cbz72y8vcw] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/Home/Components/Setting/Department/Components/TallerPanel.razor.rz.scp.css */
.taller-panel[b-ia9q2l9dz4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

/* Header */
/* Header Row */
.tp-header-row[b-ia9q2l9dz4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tp-header-actions[b-ia9q2l9dz4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-box[b-ia9q2l9dz4] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-ia9q2l9dz4] {
    position: absolute;
    left: 14px;
    color: #8898AA;
}

.search-box input[b-ia9q2l9dz4] {
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 250px;
}

.search-box input:focus[b-ia9q2l9dz4] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

.tp-header[b-ia9q2l9dz4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-title[b-ia9q2l9dz4] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1A202C;
    margin: 0;
    letter-spacing: -0.025em;
}

.tp-sub-header[b-ia9q2l9dz4] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tp-params-label[b-ia9q2l9dz4] {
    font-size: 1rem;
    font-weight: 700;
    color: #FFC107;
}

.tp-params-desc[b-ia9q2l9dz4] {
    font-size: 0.82rem;
    color: #8898AA;
}

/* Tabs - scroll wrapper */
.tp-tabs-wrapper[b-ia9q2l9dz4] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

.tp-tabs-row[b-ia9q2l9dz4] {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex: 1;
}

.tp-tabs-row[b-ia9q2l9dz4]::-webkit-scrollbar {
    display: none;
}

.tp-scroll-btn[b-ia9q2l9dz4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tp-scroll-btn:hover[b-ia9q2l9dz4] {
    background: #E8EBF2;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tp-scroll-btn.left[b-ia9q2l9dz4] {
    margin-right: 6px;
}

.tp-scroll-btn.right[b-ia9q2l9dz4] {
    margin-left: 6px;
}

.tp-tab[b-ia9q2l9dz4] {
    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;
}

.tp-tab:hover[b-ia9q2l9dz4] {
    border-color: #FFC107;
    color: #555;
}

.tp-tab.active[b-ia9q2l9dz4] {
    border-color: #FFC107;
    background: #FFC10715;
    color: #1A202C;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1);
}

.tp-tab-label[b-ia9q2l9dz4] {
    font-weight: 700;
}

.tp-tab-count[b-ia9q2l9dz4] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #333;
}

.tp-tab.active .tp-tab-count[b-ia9q2l9dz4] {
    color: #E6A200;
}

/* Top-right Add Button */
.tp-add-btn-top[b-ia9q2l9dz4] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
    flex-shrink: 0;
}

.tp-add-btn-top:hover[b-ia9q2l9dz4] {
    background: #E600E6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}

/* Content Layout */
.tp-content-layout[b-ia9q2l9dz4] {
    display: flex;
    align-items: stretch;
    gap: 32px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Params List */
.tp-params-list[b-ia9q2l9dz4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 220px;
    max-width: 400px;

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    padding-right: 16px;
    border-right: 1.5px solid #E2E8F0;
    margin-right: -12px;
}

.tp-params-list[b-ia9q2l9dz4]::-webkit-scrollbar {
    width: 6px;
}

.tp-params-list[b-ia9q2l9dz4]::-webkit-scrollbar-track {
    background: transparent;
}

.tp-params-list[b-ia9q2l9dz4]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.tp-params-list[b-ia9q2l9dz4]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Param Card */
.tp-param-card[b-ia9q2l9dz4] {
    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-ia9q2l9dz4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.tp-param-card.selected[b-ia9q2l9dz4] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

/* Green Icon */
.tp-param-icon[b-ia9q2l9dz4] {
    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-ia9q2l9dz4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-param-name[b-ia9q2l9dz4] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-param-value[b-ia9q2l9dz4] {
    font-size: 0.8rem;
    color: #8898AA;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detail Panel */
.tp-param-detail[b-ia9q2l9dz4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 14px;
    animation: tpFadeIn-b-ia9q2l9dz4 0.3s ease;
    min-width: 0;
    /* Sin overflow propio: el scroll lo gestiona store-main-content */
}

.tp-param-detail[b-ia9q2l9dz4]::-webkit-scrollbar {
    width: 6px;
}

.tp-param-detail[b-ia9q2l9dz4]::-webkit-scrollbar-track {
    background: transparent;
}

.tp-param-detail[b-ia9q2l9dz4]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.tp-param-detail[b-ia9q2l9dz4]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

@keyframes tpFadeIn-b-ia9q2l9dz4 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.tp-detail-icon[b-ia9q2l9dz4] {
    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-ia9q2l9dz4] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-align: center;
}

.tp-detail-value[b-ia9q2l9dz4] {
    font-size: 0.9rem;
    color: #8898AA;
    font-weight: 500;
}

/* Detail Panel centering */
.tp-edit-detail[b-ia9q2l9dz4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    max-width: 500px;
    height: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/UserEditPanel.razor.rz.scp.css */
UseEditPanel.css

.user-edit-panel[b-rzwrrtppkj] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.ue-header[b-rzwrrtppkj] {
    margin-bottom: 24px;
}

.ue-title[b-rzwrrtppkj] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.ue-subtitle[b-rzwrrtppkj] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.ue-alert[b-rzwrrtppkj] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

    .ue-alert.error[b-rzwrrtppkj] {
        background-color: #fef2f2;
        color: #ef4444;
        border: 1px solid #fecaca;
    }

    .ue-alert.warning[b-rzwrrtppkj] {
        background-color: #fffbeb;
        color: #d97706;
        border: 1px solid #fde68a;
    }

.ue-body[b-rzwrrtppkj] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ue-form[b-rzwrrtppkj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-rzwrrtppkj] {
    display: flex;
    gap: 16px;
    width: 100%;
}

    .form-row.double[b-rzwrrtppkj] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

        .form-row.double > .form-group[b-rzwrrtppkj] {
            flex: initial;
            min-width: 0;
        }

.form-group[b-rzwrrtppkj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

    .form-group label[b-rzwrrtppkj] {
        font-size: 0.85rem;
        font-weight: 600;
        color: #334D6E;
    }

    .form-group input[b-rzwrrtppkj],
    .form-group select[b-rzwrrtppkj],
    .form-group textarea[b-rzwrrtppkj] {
        padding: 10px 14px;
        border: 1px solid #E8EBED;
        border-radius: 8px;
        font-size: 0.95rem;
        color: #334D6E;
        transition: all 0.2s;
        background-color: #fafbfc;
    }

        .form-group input[b-rzwrrtppkj]::placeholder,
        .form-group textarea[b-rzwrrtppkj]::placeholder {
            font-weight: 400;
        }

        .form-group input:focus[b-rzwrrtppkj],
        .form-group select:focus[b-rzwrrtppkj],
        .form-group textarea:focus[b-rzwrrtppkj] {
            outline: none;
            border-color: #FF00FF;
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.1);
        }

    .form-group input[b-rzwrrtppkj],
    .form-group select[b-rzwrrtppkj] {
        min-width: 0;
        box-sizing: border-box;
    }

    .form-group textarea[b-rzwrrtppkj] {
        resize: vertical;
        min-height: 80px;
    }

.upload-row[b-rzwrrtppkj] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.avatar-upload[b-rzwrrtppkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar-preview[b-rzwrrtppkj] {
    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-rzwrrtppkj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-initials[b-rzwrrtppkj] {
    color: white;
    font-weight: 800;
    font-size: 1.5rem;
    display: block;
    line-height: 1;
}

.upload-controls[b-rzwrrtppkj] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
}

.upload-buttons[b-rzwrrtppkj] {
    display: flex;
    align-items: center;
}

.btn-upload[b-rzwrrtppkj] {
    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-rzwrrtppkj] {
        background-color: #e2e8f0;
        color: #1e293b;
    }

    .btn-upload[disabled][b-rzwrrtppkj] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.color-control[b-rzwrrtppkj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .color-control label[b-rzwrrtppkj] {
        font-size: 0.85rem;
        font-weight: 600;
        color: #334D6E;
    }

.color-picker[b-rzwrrtppkj] {
    width: 60px;
    height: 36px;
    padding: 2px !important;
    cursor: pointer;
    border: 1px solid #E8EBED;
    border-radius: 6px;
}

.toggles[b-rzwrrtppkj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.toggle-control[b-rzwrrtppkj] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #475569;
    user-select: none;
}

    .toggle-control input[b-rzwrrtppkj] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #FF00FF;
    }

.ue-footer[b-rzwrrtppkj] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-delete[b-rzwrrtppkj] {
    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-rzwrrtppkj] {
        background: #fef2f2;
    }

.btn-cancel[b-rzwrrtppkj] {
    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-rzwrrtppkj] {
        background: #CBD5E1;
    }

.btn-save[b-rzwrrtppkj] {
    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-rzwrrtppkj] {
        background: #e600e6;
    }

    .btn-save:disabled[b-rzwrrtppkj],
    .btn-delete:disabled[b-rzwrrtppkj],
    .btn-cancel:disabled[b-rzwrrtppkj] {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* /Pages/Home/Components/Setting/Department/Components/UsuariosPanel.razor.rz.scp.css */
.usuarios-panel[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

/* Header */
/* Header Row */
.us-header-row[b-yhl0ibkhk1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.us-header-actions[b-yhl0ibkhk1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px;
}

.search-box[b-yhl0ibkhk1] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-yhl0ibkhk1] {
    position: absolute;
    left: 14px;
    color: #8898AA;
}

.search-box input[b-yhl0ibkhk1] {
    padding: 10px 14px 10px 38px;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 250px;
}

.search-box input:focus[b-yhl0ibkhk1] {
    border-color: #FF00FF;
    border-width: 2px;
    padding: 9px 13px 9px 37px;
}

.us-header[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.us-title[b-yhl0ibkhk1] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    margin: 0;
}

.us-subtitle[b-yhl0ibkhk1] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

/* Tabs - scroll wrapper */
.us-tabs-wrapper[b-yhl0ibkhk1] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

.us-tabs-row[b-yhl0ibkhk1] {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    padding: 2px 0;
}

.us-tabs-row[b-yhl0ibkhk1]::-webkit-scrollbar {
    display: none;
}

.us-scroll-btn[b-yhl0ibkhk1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    color: #8898AA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.us-scroll-btn:hover[b-yhl0ibkhk1] {
    background: #E8EBF2;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.us-scroll-btn.left[b-yhl0ibkhk1] {
    margin-right: 6px;
}

.us-scroll-btn.right[b-yhl0ibkhk1] {
    margin-left: 6px;
}

.us-tab[b-yhl0ibkhk1] {
    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-yhl0ibkhk1] {
    border-color: #FFC107;
    color: #555;
}

.us-tab.active[b-yhl0ibkhk1] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
}

.us-tab.selected[b-yhl0ibkhk1] {
    border-color: #FFC107;
    background: #FFF8E1;
    color: #333;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.2);
}

.us-tab-label[b-yhl0ibkhk1] {
    font-weight: 700;
}

.us-tab-count[b-yhl0ibkhk1] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #333;
}

.us-tab.active .us-tab-count[b-yhl0ibkhk1] {
    color: #E6A200;
}

/* Top-right Add Button */
.us-add-btn-top[b-yhl0ibkhk1] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
    flex-shrink: 0;
}

.us-add-btn-top:hover[b-yhl0ibkhk1] {
    background: #E600E6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}

/* Groups List */
.us-groups-list[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    padding-right: 16px;
    border-right: 1.5px solid #E2E8F0;
    margin-right: -12px; /* para que la línea no esté tan lejos si hay gap */
}

/* Wrapper split list+edit: scroll del área de contenido, header queda fijo */
.us-content-split[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.us-groups-list[b-yhl0ibkhk1]::-webkit-scrollbar {
    width: 6px;
}

.us-groups-list[b-yhl0ibkhk1]::-webkit-scrollbar-track {
    background: transparent;
}

.us-groups-list[b-yhl0ibkhk1]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}

.us-groups-list[b-yhl0ibkhk1]::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Group Header */
.us-group-header[b-yhl0ibkhk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    margin-top: 8px;
}

.us-group-header:first-child[b-yhl0ibkhk1] {
    margin-top: 0;
}

.us-group-name[b-yhl0ibkhk1] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.us-group-count[b-yhl0ibkhk1] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8898AA;
}

/* User Card */
.us-user-card[b-yhl0ibkhk1] {
    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-yhl0ibkhk1] {
    border-bottom: 2px solid #FFC107;
}

.us-card-header[b-yhl0ibkhk1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.us-user-card:hover[b-yhl0ibkhk1] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.us-user-card.selected[b-yhl0ibkhk1] {
    border: 2px solid #FFC107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}

/* Avatar */
.us-user-avatar[b-yhl0ibkhk1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E8EBF2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Info */
.us-user-info[b-yhl0ibkhk1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.us-user-name[b-yhl0ibkhk1] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.us-user-lastname[b-yhl0ibkhk1] {
    font-size: 0.78rem;
    color: #8898AA;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Level Badge */
.us-user-badge[b-yhl0ibkhk1] {
    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-yhl0ibkhk1] {
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
}

/* Status */
.us-user-status[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 44px;
}

.us-status-dot[b-yhl0ibkhk1] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.us-status-dot.active[b-yhl0ibkhk1] {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.us-status-dot.inactive[b-yhl0ibkhk1] {
    background: #BDBDBD;
}

.us-status-label[b-yhl0ibkhk1] {
    font-size: 0.65rem;
    font-weight: 600;
}

.us-status-label.active[b-yhl0ibkhk1] {
    color: #4CAF50;
}

.us-status-label.inactive[b-yhl0ibkhk1] {
    color: #999;
}

/* Accordion Expand */
.us-toggle-btn[b-yhl0ibkhk1] {
    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;
    /* push to the right if possible, or just alongside status */
}

.us-toggle-btn:hover[b-yhl0ibkhk1] {
    background: #F5F5F5;
    color: #333;
}

.us-user-card.expanded .us-toggle-btn svg[b-yhl0ibkhk1] {
    transform: rotate(180deg);
}

.us-card-body[b-yhl0ibkhk1] {
    padding: 0 14px 14px 14px;
    border-top: 1px solid #F0F0F0;
    margin-top: 4px;
}

.us-job-list[b-yhl0ibkhk1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.us-job-item[b-yhl0ibkhk1] {
    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-yhl0ibkhk1] {
    background: #F1F3F5;
    border-color: #E2E8F0;
}

.us-job-item.selected[b-yhl0ibkhk1] {
    background: #FFF8E1;
    border-color: #FFC107;
    box-shadow: 0 1px 4px rgba(255, 193, 7, 0.2);
}

.us-job-name[b-yhl0ibkhk1] {
    font-weight: 600;
    color: #333;
}

.us-job-level[b-yhl0ibkhk1] {
    color: #8898AA;
    font-size: 0.75rem;
}

.us-edit-detail[b-yhl0ibkhk1] {
    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-yhl0ibkhk1]::-webkit-scrollbar {
    width: 6px;
}

.us-edit-detail[b-yhl0ibkhk1]::-webkit-scrollbar-track {
    background: transparent;
}

.us-edit-detail[b-yhl0ibkhk1]::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    border-radius: 20px;
}
/* /Pages/Home/Components/Setting/Department/Components/WorkerRoleEditPanel.razor.rz.scp.css */
.jobtitle-edit-panel[b-w55oiv27b6] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.jte-header[b-w55oiv27b6] {
    margin-bottom: 24px;
}

.jte-title[b-w55oiv27b6] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.jte-subtitle[b-w55oiv27b6] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.jte-body[b-w55oiv27b6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

.jte-avatar-section[b-w55oiv27b6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.jte-avatar[b-w55oiv27b6] {
    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-w55oiv27b6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.jte-toggle-label[b-w55oiv27b6] {
    font-size: 0.85rem;
    font-weight: 600;
}

.jte-toggle-label.active[b-w55oiv27b6] {
    color: #4CAF50;
}

.jte-toggle-label.inactive[b-w55oiv27b6] {
    color: #f44336;
}

/* Switch */
.toggle-switch[b-w55oiv27b6] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-w55oiv27b6] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-w55oiv27b6] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-w55oiv27b6]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider[b-w55oiv27b6] {
    background-color: #4CAF50;
}

input:checked+.slider[b-w55oiv27b6]:before {
    transform: translateX(20px);
}

.form-label[b-w55oiv27b6] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

.form-select[b-w55oiv27b6], .form-control[b-w55oiv27b6] {
    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-w55oiv27b6] {
    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-w55oiv27b6], .form-control:focus[b-w55oiv27b6] {
    border-color: #0E223B;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 34, 59, 0.1);
}

.jte-info-section[b-w55oiv27b6] {
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-w55oiv27b6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-w55oiv27b6] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.delete-profile-section[b-w55oiv27b6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-profile-label[b-w55oiv27b6] {
    font-size: 0.85rem;
    color: #334D6E;
}

.btn-delete-profile[b-w55oiv27b6] {
    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-w55oiv27b6] {
    background: #FFF0FF;
}

.jte-footer[b-w55oiv27b6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-w55oiv27b6] {
    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-w55oiv27b6] {
    background: #CBD5E1;
}

.btn-primary[b-w55oiv27b6] {
    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-w55oiv27b6] {
    background: #e600e6;
}

.btn-primary:disabled[b-w55oiv27b6], .btn-secondary:disabled[b-w55oiv27b6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mt-3[b-w55oiv27b6] {
    margin-top: 1rem;
}

.mt-4[b-w55oiv27b6] {
    margin-top: 1.5rem;
}

.mt-auto[b-w55oiv27b6] {
    margin-top: auto;
}

.w-100[b-w55oiv27b6] {
    width: 100%;
}
/* /Pages/Home/Components/Setting/Department/Components/WorklevelEditPanel.razor.rz.scp.css */
.worklevel-edit-panel[b-gtwopsa2yc] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.we-header[b-gtwopsa2yc] {
    margin-bottom: 24px;
}

.we-title[b-gtwopsa2yc] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 4px 0;
}

.we-subtitle[b-gtwopsa2yc] {
    font-size: 0.85rem;
    color: #8898AA;
    margin: 0;
}

.we-body[b-gtwopsa2yc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.we-avatar-section[b-gtwopsa2yc] {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.we-avatar[b-gtwopsa2yc] {
    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-gtwopsa2yc] {
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
}

.form-label[b-gtwopsa2yc] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334D6E;
    margin-bottom: 0.5rem;
}

.form-select[b-gtwopsa2yc] {
    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;
    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-gtwopsa2yc] {
    border-color: #0E223B;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 34, 59, 0.1);
}

.we-info-section[b-gtwopsa2yc] {
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
}

.info-title[b-gtwopsa2yc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334D6E;
    margin: 0 0 8px 0;
}

.info-desc[b-gtwopsa2yc] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.delete-profile-section[b-gtwopsa2yc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-profile-label[b-gtwopsa2yc] {
    font-size: 0.85rem;
    color: #334D6E;
}

.btn-delete-profile[b-gtwopsa2yc] {
    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-gtwopsa2yc] {
    background: #FFF0FF;
}

.we-footer[b-gtwopsa2yc] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E8EBED;
}

.btn-secondary[b-gtwopsa2yc] {
    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-gtwopsa2yc] {
    background: #CBD5E1;
}

.btn-primary[b-gtwopsa2yc] {
    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-gtwopsa2yc] {
    background: #e600e6;
}

.btn-primary:disabled[b-gtwopsa2yc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mt-4[b-gtwopsa2yc] {
    margin-top: 1.5rem;
}

.mt-auto[b-gtwopsa2yc] {
    margin-top: auto;
}

.w-100[b-gtwopsa2yc] {
    width: 100%;
}
/* /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: 24px;
    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] {
    margin-bottom: 24px;
}

.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;
}

.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);
}
/* /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;
    overflow: hidden;
}

/* 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)
   ======================================== */
.store-tabs-container[b-0j3eb0jhw9] {
    position: absolute;
    bottom: -12px;
    left: 16px;
    display: flex;
    gap: 0;
    z-index: 10;
    max-width: calc(100% - 32px);
    overflow-x: auto;
    padding-bottom: 4px;
}

.store-tabs-container[b-0j3eb0jhw9]::-webkit-scrollbar {
    display: none;
}

.store-category-tab[b-0j3eb0jhw9] {
    background: white;
    color: #4A5A6A;
    padding: 5px 14px;
    border-radius: 8px 8px 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05), 2px 0 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEEEEE;
    border-bottom: none;
    white-space: nowrap;
}

/* ========================================
   Body Section
   ======================================== */
.store-card-body[b-0j3eb0jhw9] {
    padding: 24px 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;
    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.25);
}

.edit-btn:hover[b-0j3eb0jhw9] {
    background: #D500C0;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 0, 255, 0.35);
}

.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] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.store-panel-title[b-csz30x23qw] {
    padding: 16px 20px 8px 20px;
}

.store-panel-title h2[b-csz30x23qw] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e8e8e8;
}

.store-panel-title p[b-csz30x23qw] {
    margin: 2px 0 0 0;
    font-size: 0.78rem;
    color: #8898AA;
}

/* Store Info Card (compact, inside sidebar) */
.store-info-card[b-csz30x23qw] {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #E8EBF2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.store-info-card-top[b-csz30x23qw] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.store-image-small[b-csz30x23qw] {
    width: 64px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #ccc;
    flex-shrink: 0;
    overflow: hidden;
}

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

.store-name-compact[b-csz30x23qw] {
    font-size: 1rem;
    font-weight: 800;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-meta-compact[b-csz30x23qw] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    font-size: 0.75rem;
    color: #666;
}

.store-tags[b-csz30x23qw] {
    display: flex;
    gap: 6px;
}

.store-tag[b-csz30x23qw] {
    background: #00A3E0;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.meta-label[b-csz30x23qw] {
    font-weight: 600;
    color: #444;
}

.edit-action-btn[b-csz30x23qw] {
    align-self: flex-start;
    background: #FE00E4;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.store-tabs[b-csz30x23qw] {
    display: flex;
    gap: 0;
}

.store-tab[b-csz30x23qw] {
    padding: 10px 24px;
    border-radius: 12px 12px 0 0;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    top: 2px;
    transition: all 0.2s;
}

.store-tab.active[b-csz30x23qw] {
    background: #fff;
    color: #333;
    z-index: 2;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.store-tab.inactive[b-csz30x23qw] {
    background: #B0BCC7;
    /* Grises más oscuro y sólido para contraste claro */
    color: #546575;
}

.store-tab.inactive:hover[b-csz30x23qw] {
    background: #C2CCD6;
}

.add-tab-btn[b-csz30x23qw] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #FF00FF;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
    align-self: flex-end;
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.4);
}

.add-tab-btn:hover[b-csz30x23qw] {
    background: #D500C0;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 0, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.5);
    /* Glow effect */
}

/* Layout Containers */
.store-content-layout[b-csz30x23qw] {
    display: flex;
    flex: 1;
    overflow: hidden;
    margin-top: -2px;
    z-index: 1;
    border-radius: 20px 0 0 0;
}

.store-sidebar[b-csz30x23qw] {
    width: 320px;
    padding: 10px;
    background: #fff;
    overflow-y: auto;
    border-right: 1px solid #E8EEBF;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: width 0.25s ease, padding 0.25s ease;
    overflow-x: clip;
    /* clip: no recorta box-shadow de hijos como hidden */
}

/* Collapsed sidebar: icon-only mode */
.store-sidebar.collapsed[b-csz30x23qw] {
    width: 72px;
    padding: 20px 12px;
}

.store-sidebar.collapsed .option-label[b-csz30x23qw],
.store-sidebar.collapsed .option-value[b-csz30x23qw],
.store-sidebar.collapsed .section-group-title[b-csz30x23qw] {
    display: none;
}

.store-sidebar.collapsed .option-item[b-csz30x23qw] {
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
}

.store-sidebar.collapsed .options-grid[b-csz30x23qw] {
    padding: 2px 0; /* Eliminar padding lateral en colapsado para evitar "adelgazamiento" */
}

/* Sidebar toggle button */
.sidebar-toggle-btn[b-csz30x23qw] {
    align-self: flex-end;
    background: transparent;
    border: 1px solid #E8EBF2;
    cursor: pointer;
    color: #8898AA;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover[b-csz30x23qw] {
    background: #f0f4f8;
    color: #333;
    border-color: #ccc;
}

.sidebar-toggle-btn svg[b-csz30x23qw] {
    transition: transform 0.25s ease;
}

.store-sidebar.collapsed .sidebar-toggle-btn svg[b-csz30x23qw] {
    transform: rotate(180deg);
}

.store-sidebar[b-csz30x23qw]::-webkit-scrollbar {
    width: 6px;
}

.store-sidebar[b-csz30x23qw]::-webkit-scrollbar-track {
    background: transparent;
}

.store-sidebar[b-csz30x23qw]::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.store-sidebar[b-csz30x23qw]::-webkit-scrollbar-thumb:hover {
    background-color: #d0d0d0;
}

.store-main-content[b-csz30x23qw] {
    flex: 1;
    background: #F4F5F7;
    padding: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 15px;
    min-width: 0;
}

.store-main-content[b-csz30x23qw]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    /* scrollbar horizontal */
}

.store-main-content[b-csz30x23qw]::-webkit-scrollbar-track {
    background: transparent;
}

.store-main-content[b-csz30x23qw]::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.store-main-content[b-csz30x23qw]::-webkit-scrollbar-thumb:hover {
    background-color: #d0d0d0;
}

/* ... existing element styles ... */

.section-group-header[b-csz30x23qw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-group-title[b-csz30x23qw] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #8898AA;
}

.edit-dept-btn[b-csz30x23qw] {
    background: #FE00E4;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(254, 0, 228, 0.3);
    transition: all 0.2s;
}

.edit-dept-btn:hover[b-csz30x23qw] {
    background: #D500C0;
    transform: translateY(-1px);
}

.options-grid[b-csz30x23qw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 4px;
    /* espacio para que la sombra dorada no se corte */
}

.option-item[b-csz30x23qw] {
    display: flex;
    align-items: center;
    background: #546575;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    color: white;
    height: 48px;
    cursor: pointer;
    transition: all 0.25s ease;
    /* Sin border reservado: la sombra no lo necesita */
}

.option-item:hover[b-csz30x23qw] {
    opacity: 0.9;
    transform: translateX(2px);
}

.option-item.selected[b-csz30x23qw] {
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.9),
        0 4px 20px rgba(212, 175, 55, 0.65),
        0 8px 32px rgba(212, 175, 55, 0.35);
    transform: translateX(2px);
}

.option-icon-box[b-csz30x23qw] {
    width: 48px;
    height: 48px;
    background: #455463;
    /* gris ligeramente más oscuro que el item para sutil contraste */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.option-icon-box.orange[b-csz30x23qw] {
    background: #455463;
    /* mismo gris, sin distinción de color */
}

/* Variant for Gestión */

.option-label[b-csz30x23qw] {
    flex: 1;
    padding: 0 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.option-value[b-csz30x23qw] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    min-width: 60px;
    justify-content: center;
}

.gestion-section[b-csz30x23qw] {
    margin-top: 12px;
}

.empty-state-message[b-csz30x23qw] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8898AA;
    font-style: italic;
    background: transparent;
}

.empty-state-message p[b-csz30x23qw] {
    font-size: 1.1rem;
}

/* No Departments Empty State */
.no-departments-container[b-csz30x23qw] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.no-departments-full-container[b-csz30x23qw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E1E1E1;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Sombra para dar profundidad */
}

.empty-icon-box[b-csz30x23qw] {
    margin-bottom: 24px;
}

.no-departments-container h3[b-csz30x23qw] {
    font-size: 1rem;
    color: #334D6E;
    margin-bottom: 12px;
    font-weight: 600;
}

.no-departments-container p[b-csz30x23qw] {
    color: #8898AA;
    font-size: 1.05rem;
    margin-bottom: 30px;
    max-width: 320px;
    line-height: 1.5;
}

.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);
}

/* Empty State Unified MAUI Design (Light Theme variation) */
.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%;
}

.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);
}
/* /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;
    background-color: rgba(3, 10, 22, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    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;
}

.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;
}
/* /Pages/Home/Components/TenantSelector.razor.rz.scp.css */
/* TenantSelector Styles */

/* Base Tenant Card */
.tenant-card[b-k5uqchi5w6] {
    pointer-events: auto;
    background: #9aa1ab72;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-right: 20px;
    margin-top: 10px;
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.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 */
    display: flex;
    flex-direction: column;
}

/* Header (Always Visible) */
.tenant-header[b-k5uqchi5w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    gap: 15px;
}

.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;
}

.tenant-name[b-k5uqchi5w6] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f8f9fa;
    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: #e8e8e8;
    line-height: 1;
}

.tenant-card.expanded .tenant-subtitle[b-k5uqchi5w6] {
    font-size: 0.9rem;
}

.tenant-icon[b-k5uqchi5w6] {
    width: 50px;
    height: 50px;
    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.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;
    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);
    }
}

/* 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-name[b-k5uqchi5w6],
.tenant-card.env-staging .tenant-icon[b-k5uqchi5w6] {
    color: #1f2f45 !important;
}

.tenant-card.env-staging .tenant-subtitle[b-k5uqchi5w6] {
    color: #5a3e00 !important;
}

.tenant-card.env-staging .tenant-header[b-k5uqchi5w6] {
    border-left: none;
}
/* /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;
}

.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;
}

.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;
}

.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;
}

/* Status colors for the pill and icon */
.status-green .tl-progress-pill[b-w6oiq1hxkm] { background: #86efac; color: #064e3b; }
.status-green .tl-process-icon[b-w6oiq1hxkm] { background: #86efac; color: #1e293b; }

.status-yellow .tl-progress-pill[b-w6oiq1hxkm] { background: #fde047; color: #713f12; }
.status-yellow .tl-process-icon[b-w6oiq1hxkm] { background: #fde047; color: #1e293b; }

.status-red .tl-progress-pill[b-w6oiq1hxkm] { background: #f87171; color: #7f1d1d; }
.status-red .tl-process-icon[b-w6oiq1hxkm] { background: #f87171; color: #1e293b; }

.status-grey .tl-progress-pill[b-w6oiq1hxkm] { background: #cbd5e1; color: #334155; }
.status-grey .tl-process-icon[b-w6oiq1hxkm] { background: #cbd5e1; color: #334155; }
/* /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: 90px;
    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;
}

/* Opciones de usuario (Perfil) abiertas */
.traffic-light-container.expanded.user-options-open[b-szle0tvvte] {
    left: 360px; /* 100px + 250px + 10px */
}

/* Opciones de usuario abiertas + menú expandido */
.traffic-light-container.expanded.nav-expanded.user-options-open[b-szle0tvvte] {
    left: 500px; /* 240px + 250px + 10px */
}

/* 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);
    height: 36px;
    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;
}

.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;
}

/* Colores */
.status-red.active[b-szle0tvvte] {
    background-color: #f87171; /* Soft red */
    color: #ffffff; /* Tono único: blanco */
    box-shadow: 0 4px 15px -3px rgba(248, 113, 113, 0.4);
}
.status-red.active:hover[b-szle0tvvte] { transform: scale(1.05); box-shadow: 0 6px 20px -3px rgba(248, 113, 113, 0.6); }

.status-yellow.active[b-szle0tvvte] {
    background-color: #fde047; /* Bright yellow */
    color: #ffffff; /* Tono único: blanco */
    box-shadow: 0 4px 15px -3px rgba(253, 224, 71, 0.4);
    text-shadow: 0 1px 3px rgba(0,0,0,0.35); /* Sombra sutil para legibilidad sobre fondo claro */
}
.status-yellow.active:hover[b-szle0tvvte] { transform: scale(1.05); box-shadow: 0 6px 20px -3px rgba(253, 224, 71, 0.6); }

.status-green.active[b-szle0tvvte] {
    background-color: #6ee7b7; /* Mint green */
    color: #ffffff; /* Tono único: blanco */
    box-shadow: 0 4px 15px -3px rgba(110, 231, 183, 0.4);
    text-shadow: 0 1px 3px rgba(0,0,0,0.25); /* Sombra sutil para legibilidad sobre fondo claro */
}
.status-green.active:hover[b-szle0tvvte] { transform: scale(1.05); box-shadow: 0 6px 20px -3px rgba(110, 231, 183, 0.6); }

.status-neutral.active[b-szle0tvvte] {
    background-color: #94a3b8; /* Slate gray */
    color: #ffffff;
    box-shadow: 0 4px 15px -3px rgba(148, 163, 184, 0.4);
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.status-neutral.active:hover[b-szle0tvvte] { transform: scale(1.05); box-shadow: 0 6px 20px -3px rgba(148, 163, 184, 0.6); }

/* 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 */
    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/BulkCloseUploadModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BulkCloseUploadModal — Paso 1: selector de archivo de Cierres.
   Prefijo "bulk-" para evitar colisiones con CSS global.
   ═══════════════════════════════════════════════════ */

/* ── Overlay ── */
.bulk-overlay[b-c4vqbx3gis] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

/* ── Diálogo ── */
.bulk-dialog[b-c4vqbx3gis] {
    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-c4vqbx3gis 0.25s ease-out;
}

@keyframes bulkSlideUp-b-c4vqbx3gis {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.bulk-dialog-header[b-c4vqbx3gis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fef2f2; /* Tono rojo/naranja claro para diferenciar que es de cierres */
    border-radius: 14px 14px 0 0;
}

.bulk-dialog-header h3[b-c4vqbx3gis] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #991b1b; /* Rojo oscuro para diferenciar */
}

.bulk-close-btn[b-c4vqbx3gis] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #fca5a5;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.bulk-close-btn:hover[b-c4vqbx3gis] {
    background: #fee2e2;
    color: #ef4444;
}

.bulk-dialog-body[b-c4vqbx3gis] {
    padding: 24px 32px 32px 32px;
}

/* ── Dropzone ── */
.bulk-dropzone[b-c4vqbx3gis] {
    border: 2px dashed #fca5a5;
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
}

.bulk-dropzone:hover[b-c4vqbx3gis] {
    border-color: #ef4444;
    background: #fef2f2;
}

.bulk-dropzone-icon[b-c4vqbx3gis] {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.bulk-dropzone-title[b-c4vqbx3gis] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}

.bulk-dropzone-hint[b-c4vqbx3gis] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 16px;
}

.bulk-file-label[b-c4vqbx3gis] {
    display: inline-block;
    padding: 10px 24px;
    background: #ef4444; /* Rojo para Cierres */
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bulk-file-label:hover[b-c4vqbx3gis] {
    background: #dc2626;
}

/* ── Loading ── */
.bulk-loading[b-c4vqbx3gis] {
    text-align: center;
    padding: 32px 0;
    color: #6b7280;
}

.bulk-spinner[b-c4vqbx3gis] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #ef4444;
    border-radius: 50%;
    animation: bulkSpin-b-c4vqbx3gis 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes bulkSpin-b-c4vqbx3gis {
    to { transform: rotate(360deg); }
}

/* ── Alertas ── */
.bulk-alert[b-c4vqbx3gis] {
    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-c4vqbx3gis] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Botón Secundario ── */
.bulk-btn-secondary[b-c4vqbx3gis] {
    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-c4vqbx3gis] {
    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-c4vqbx3gis] {
    transform: translateY(1px);
    background: #e2e8f0;
}
/* /Pages/Home/Components/User/BulkCloseUploadResultsPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BulkUploadResultsPanel — estilo panel principal.
   Usa el mismo contenedor que Reportes.
   ═══════════════════════════════════════════════════ */

.bulk-results-panel[b-pa3tn3aw1g] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f8fafc;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.bulk-results-header[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.bulk-results-filename[b-pa3tn3aw1g] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    display: block;
}

.bulk-results-header-actions[b-pa3tn3aw1g] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Resumen ── */
.bulk-results-summary[b-pa3tn3aw1g] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    flex-shrink: 0;
}

.bulk-summary-card[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.bulk-summary-err[b-pa3tn3aw1g] {
    border-color: #fecaca;
    background: #fef2f2;
}

.bulk-summary-number[b-pa3tn3aw1g] {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.bulk-summary-ok .bulk-summary-number[b-pa3tn3aw1g] { color: #16a34a; }
.bulk-summary-err .bulk-summary-number[b-pa3tn3aw1g] { color: #dc2626; }

.bulk-summary-label[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.bulk-alert-error[b-pa3tn3aw1g] {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

.bulk-alert-success[b-pa3tn3aw1g] {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}

/* ── Tabla ── */
.bulk-results-table-wrap[b-pa3tn3aw1g] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.bulk-table[b-pa3tn3aw1g] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    user-select: none;
    -webkit-user-select: none;
}

.bulk-table th[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}

.bulk-table tr[b-pa3tn3aw1g] {
    background: #fff;
}

.bulk-row-ok:hover[b-pa3tn3aw1g] { background: #f0fdf4; }

.bulk-row-error[b-pa3tn3aw1g] {
    background: #fef2f2;
}

.bulk-row-error:hover[b-pa3tn3aw1g] {
    background: #fee2e2;
}

.bulk-row-warn[b-pa3tn3aw1g] {
    background: #fffbeb;
}

.bulk-row-warn:hover[b-pa3tn3aw1g] {
    background: #fef3c7;
}

.bulk-col-index[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    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-fixed-left[b-pa3tn3aw1g] {
    background: #f1f5f9;
    z-index: 4;
}

.bulk-cell-dup[b-pa3tn3aw1g] {
    color: #dc2626 !important;
    font-weight: 700;
}

/* ── Badges ── */
.bulk-badge[b-pa3tn3aw1g] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-badge-ok[b-pa3tn3aw1g] {
    background: #dcfce7;
    color: #166534;
}

.bulk-badge-err[b-pa3tn3aw1g] {
    background: #fee2e2;
    color: #991b1b;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-badge-warn[b-pa3tn3aw1g] {
    background: #fef3c7;
    color: #92400e;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Loading ── */
.bulk-loading[b-pa3tn3aw1g] {
    text-align: center;
    padding: 48px 0;
    color: #64748b;
}

.bulk-spinner[b-pa3tn3aw1g] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bulkResultsSpin-b-pa3tn3aw1g 0.7s linear infinite;
    margin: 0 auto 14px;
}

@keyframes bulkResultsSpin-b-pa3tn3aw1g {
    to { transform: rotate(360deg); }
}

/* ── Botones ── */
.bulk-btn-primary[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    background: #4f46e5;
}

.bulk-btn-primary:disabled[b-pa3tn3aw1g] {
    background: #c7d2fe;
    cursor: not-allowed;
}

.bulk-btn-secondary[b-pa3tn3aw1g] {
    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-pa3tn3aw1g] {
    background: rgba(255, 255, 255, 0.2);
}

.bulk-btn-secondary:disabled[b-pa3tn3aw1g] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal / Overlay ── */
.bulk-overlay[b-pa3tn3aw1g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bulk-dialog[b-pa3tn3aw1g] {
    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-pa3tn3aw1g 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@keyframes bulkScaleIn-b-pa3tn3aw1g {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.bulk-dialog-header[b-pa3tn3aw1g] {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-dialog-header h3[b-pa3tn3aw1g] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.bulk-close-btn[b-pa3tn3aw1g] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.bulk-close-btn:hover[b-pa3tn3aw1g] {
    color: #ef4444;
}

.bulk-dialog-body[b-pa3tn3aw1g] {
    padding: 20px;
    font-size: 0.95rem;
    color: #475569;
}

/* ── Custom Summary Popup Styles ── */
.bulk-status-icon-wrapper[b-pa3tn3aw1g] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.bulk-status-icon-wrapper:hover[b-pa3tn3aw1g] {
    transform: scale(1.08);
}
.bulk-status-icon-wrapper svg[b-pa3tn3aw1g] {
    width: 30px;
    height: 30px;
}
.bulk-status-icon-wrapper.success[b-pa3tn3aw1g] {
    background: #dcfce7;
    color: #166534;
}
.bulk-status-icon-wrapper.warning[b-pa3tn3aw1g] {
    background: #fef3c7;
    color: #b45309;
}
.bulk-status-icon-wrapper.danger[b-pa3tn3aw1g] {
    background: #fee2e2;
    color: #991b1b;
}

.bulk-stat-cards[b-pa3tn3aw1g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}
.bulk-stat-card[b-pa3tn3aw1g] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    transition: all 0.2s ease;
}
.bulk-stat-card:hover[b-pa3tn3aw1g] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.bulk-stat-number[b-pa3tn3aw1g] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    color: #1e293b;
}
.bulk-stat-label[b-pa3tn3aw1g] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}
.bulk-stat-card.bulk-stat-success[b-pa3tn3aw1g] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.bulk-stat-card.bulk-stat-success .bulk-stat-number[b-pa3tn3aw1g] {
    color: #15803d;
}
.bulk-stat-card.bulk-stat-success .bulk-stat-label[b-pa3tn3aw1g] {
    color: #166534;
}
.bulk-stat-card.bulk-stat-failed[b-pa3tn3aw1g] {
    background: #fef2f2;
    border-color: #fecaca;
}
.bulk-stat-card.bulk-stat-failed .bulk-stat-number[b-pa3tn3aw1g] {
    color: #b91c1c;
}
.bulk-stat-card.bulk-stat-failed .bulk-stat-label[b-pa3tn3aw1g] {
    color: #991b1b;
}
/* /Pages/Home/Components/User/BulkUploadModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BulkUploadModal — Paso 1: selector de archivo.
   Prefijo "bulk-" para evitar colisiones con CSS global.
   ═══════════════════════════════════════════════════ */

/* ── Overlay ── */
.bulk-overlay[b-he2rpj0b81] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

/* ── Diálogo ── */
.bulk-dialog[b-he2rpj0b81] {
    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-he2rpj0b81 0.25s ease-out;
}

@keyframes bulkSlideUp-b-he2rpj0b81 {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.bulk-dialog-header[b-he2rpj0b81] {
    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-he2rpj0b81] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

.bulk-close-btn[b-he2rpj0b81] {
    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-he2rpj0b81] {
    background: #fee2e2;
    color: #ef4444;
}

.bulk-dialog-body[b-he2rpj0b81] {
    padding: 24px 32px 32px 32px;
}

/* ── Dropzone ── */
.bulk-dropzone[b-he2rpj0b81] {
    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-he2rpj0b81] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.bulk-dropzone-icon[b-he2rpj0b81] {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.bulk-dropzone-title[b-he2rpj0b81] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}

.bulk-dropzone-hint[b-he2rpj0b81] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 16px;
}

.bulk-file-label[b-he2rpj0b81] {
    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-he2rpj0b81] {
    background: #4f46e5;
}

/* ── Loading ── */
.bulk-loading[b-he2rpj0b81] {
    text-align: center;
    padding: 32px 0;
    color: #6b7280;
}

.bulk-spinner[b-he2rpj0b81] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bulkSpin-b-he2rpj0b81 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes bulkSpin-b-he2rpj0b81 {
    to { transform: rotate(360deg); }
}

/* ── Alertas ── */
.bulk-alert[b-he2rpj0b81] {
    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-he2rpj0b81] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Botón Secundario ── */
.bulk-btn-secondary[b-he2rpj0b81] {
    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-he2rpj0b81] {
    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-he2rpj0b81] {
    transform: translateY(1px);
    background: #e2e8f0;
}
/* /Pages/Home/Components/User/BulkUploadResultsPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BulkUploadResultsPanel — estilo panel principal.
   Usa el mismo contenedor que Reportes.
   ═══════════════════════════════════════════════════ */

.bulk-results-panel[b-ywg92cxuhi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f8fafc;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.bulk-results-header[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.bulk-results-filename[b-ywg92cxuhi] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    display: block;
}

.bulk-results-header-actions[b-ywg92cxuhi] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Resumen ── */
.bulk-results-summary[b-ywg92cxuhi] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    flex-shrink: 0;
}

.bulk-summary-card[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.bulk-summary-err[b-ywg92cxuhi] {
    border-color: #fecaca;
    background: #fef2f2;
}

.bulk-summary-number[b-ywg92cxuhi] {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.bulk-summary-ok .bulk-summary-number[b-ywg92cxuhi] { color: #16a34a; }
.bulk-summary-err .bulk-summary-number[b-ywg92cxuhi] { color: #dc2626; }

.bulk-summary-label[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.bulk-alert-error[b-ywg92cxuhi] {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

.bulk-alert-success[b-ywg92cxuhi] {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}

/* ── Tabla ── */
.bulk-results-table-wrap[b-ywg92cxuhi] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.bulk-table[b-ywg92cxuhi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    user-select: none;
    -webkit-user-select: none;
}

.bulk-table th[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}

.bulk-table tr[b-ywg92cxuhi] {
    background: #fff;
}

.bulk-row-ok:hover[b-ywg92cxuhi] { background: #f0fdf4; }

.bulk-row-error[b-ywg92cxuhi] {
    background: #fef2f2;
}

.bulk-row-error:hover[b-ywg92cxuhi] {
    background: #fee2e2;
}

.bulk-row-warn[b-ywg92cxuhi] {
    background: #fffbeb;
}

.bulk-row-warn:hover[b-ywg92cxuhi] {
    background: #fef3c7;
}

.bulk-col-index[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    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-ywg92cxuhi] {
    background: #f1f5f9;
    z-index: 6;
}

.bulk-table th.bulk-col-fixed-left[b-ywg92cxuhi] {
    background: #f1f5f9;
    z-index: 5;
}

.bulk-cell-dup[b-ywg92cxuhi] {
    color: #dc2626 !important;
    font-weight: 700;
}

/* ── Badges ── */
.bulk-badge[b-ywg92cxuhi] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-badge-ok[b-ywg92cxuhi] {
    background: #dcfce7;
    color: #166534;
}

.bulk-badge-err[b-ywg92cxuhi] {
    background: #fee2e2;
    color: #991b1b;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-badge-warn[b-ywg92cxuhi] {
    background: #fef3c7;
    color: #92400e;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Loading ── */
.bulk-loading[b-ywg92cxuhi] {
    text-align: center;
    padding: 48px 0;
    color: #64748b;
}

.bulk-spinner[b-ywg92cxuhi] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bulkResultsSpin-b-ywg92cxuhi 0.7s linear infinite;
    margin: 0 auto 14px;
}

@keyframes bulkResultsSpin-b-ywg92cxuhi {
    to { transform: rotate(360deg); }
}

/* ── Botones ── */
.bulk-btn-primary[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    background: #4f46e5;
}

.bulk-btn-primary:disabled[b-ywg92cxuhi] {
    background: #c7d2fe;
    cursor: not-allowed;
}

.bulk-btn-secondary[b-ywg92cxuhi] {
    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-ywg92cxuhi] {
    background: rgba(255, 255, 255, 0.2);
}

.bulk-btn-secondary:disabled[b-ywg92cxuhi] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal / Overlay ── */
.bulk-overlay[b-ywg92cxuhi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bulk-dialog[b-ywg92cxuhi] {
    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-ywg92cxuhi 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@keyframes bulkScaleIn-b-ywg92cxuhi {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.bulk-dialog-header[b-ywg92cxuhi] {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-dialog-header h3[b-ywg92cxuhi] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.bulk-close-btn[b-ywg92cxuhi] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.bulk-close-btn:hover[b-ywg92cxuhi] {
    color: #ef4444;
}

.bulk-dialog-body[b-ywg92cxuhi] {
    padding: 20px;
    font-size: 0.95rem;
    color: #475569;
}
/* /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: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: #059669;
}
.confirm-btn:hover[b-3drgz7amd8] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #047857;
}

/* edit */
.edit-btn[b-3drgz7amd8] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #d97706;
}
.edit-btn:hover[b-3drgz7amd8] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #b45309;
}

/* delete */
.delete-btn[b-3drgz7amd8] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}
.delete-btn:hover[b-3drgz7amd8] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}
/* /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>');
}

.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/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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #1f2f45;
    font-family: 'Inter', sans-serif;
    --chat-width: 0px;
}

.dashboard-container.chat-open[b-03x8r00w0l] {
    --chat-width: 350px;
}

/* 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);
}

.dashboard-container.sidebar-collapsed.chat-open[b-03x8r00w0l]  .map-frame {
    width: calc(100% - 100px - 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) + 20px) !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: hidden;
}

.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: 0;
    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: hidden;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Regla para RESETEAR los márgenes cuando el sidebar está cerrado */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

/* 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;
}

[b-03x8r00w0l] .sidebar-icon.inbox-table-menu-icon {
    color: #ffffff;
    opacity: 1;
}

[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;
}

/* 1. Efecto HOVER (Gris difuminado) para ítems NO seleccionados */
[b-03x8r00w0l] .sidebar-item:not(.add-button):not(.active):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 {
    color: white;
    background-color: #e5b900;
    border-radius: 12px;
    overflow: hidden;
}

/* 3. Disabled state for features not yet developed (clickable to show "in development" alert) */
[b-03x8r00w0l] .sidebar-item.disabled {
    opacity: 0.35;
    cursor: pointer;
}

/* Hover effect needs to respect the fixed icon width */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item:not(.add-button):hover,
.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;
}

[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);
}

/* 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;
}

[b-03x8r00w0l] .avatar-inner {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
}

[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 */
[b-03x8r00w0l] .top-bar {
    position: absolute;
    top: 20px;
    left: 240px;
    right: 15px;
    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.chat-open[b-03x8r00w0l]  .top-bar {
    right: calc(15px + 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;
}

/* Message Floating Button */
[b-03x8r00w0l] .message-floating-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #9aa1ab72;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    color: white;
}

[b-03x8r00w0l] .message-floating-btn:hover {
    transform: scale(1.1);
    background-color: #9aa1ab72;
}

/* Chat Panel Styles */
.chat-panel[b-03x8r00w0l] {
    position: absolute;
    top: 20px;
    right: -400px;
    width: 350px;
    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: 20px;
    margin-top: -20px;
    margin-bottom: -20px;
}

.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] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}

.close-chat-btn:hover[b-03x8r00w0l] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.chat-body[b-03x8r00w0l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    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: 20px;
    /* Relleno interno */
    padding: 10px 20px;
    /* 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):hover .sidebar-icon {
    width: 100%;
}

/* ── Inbox Badge (count de assets "Míos") ── */
[b-03x8r00w0l] .inbox-icon-wrapper {
    position: relative;
}

[b-03x8r00w0l] .inbox-badge {
    position: absolute;
    bottom: -6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e500cd, #c800b0);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    border-radius: 10px;
    border: 2px solid #1f2f45;
    box-shadow: 0 2px 8px rgba(229, 0, 205, 0.45);
    z-index: 2;
    pointer-events: none;
    animation: badge-pop-in-b-03x8r00w0l 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop-in-b-03x8r00w0l {
    from {
        transform: scale(0);
        opacity: 0;
    }

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

/* Ajuste del badge cuando el sidebar está colapsado */
.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .inbox-badge {
    right: 18px;
    bottom: -6px;
}

/* ==========================================================================
   LOGOUT BUTTON - COLOR STYLING ONLY (Inherits layout from .sidebar-item)
   ========================================================================== */

/* Base: Only add visual separation and color */
[b-03x8r00w0l] .sidebar-item.logout-button {
    margin-top: 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[b-03x8r00w0l] .sidebar-item.logout-button:hover {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.05) 100%);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.15);
}

[b-03x8r00w0l] .sidebar-item.logout-button .sidebar-icon {
    color: #ff6b7a;
    filter: drop-shadow(0 0 2px rgba(255, 107, 122, 0.2));
}

[b-03x8r00w0l] .sidebar-item.logout-button:hover .sidebar-icon {
    color: #ff4757;
    filter: drop-shadow(0 0 5px rgba(255, 71, 87, 0.4));
}

[b-03x8r00w0l] .sidebar-item.logout-button .sidebar-text {
    color: #ff6b7a;
}

[b-03x8r00w0l] .sidebar-item.logout-button:hover .sidebar-text {
    color: #ff4757;
}

[b-03x8r00w0l] .sidebar-item.logout-button .sidebar-icon svg {
    transform: rotate(180deg);
}

[b-03x8r00w0l] .sidebar-item.logout-button:active {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 0%, rgba(220, 53, 69, 0.1) 100%);
}

.dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .sidebar-item.logout-button:hover {
    background: rgba(220, 53, 69, 0.2);
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

/* ==========================================================================
   LOGOUT CONFIRMATION MODAL - Swift-style Alert
   ========================================================================== */

[b-03x8r00w0l] .logout-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 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: 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 {
        left: 10px;
        right: 10px;
        width: auto;
        justify-content: space-between;
    }

    .dashboard-container.sidebar-collapsed[b-03x8r00w0l]  .top-bar {
        left: 10px;
    }

    /* 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;
    }
}

/* =========================================
   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;
}

[b-03x8r00w0l] .tenant-card.env-staging .tenant-name,
[b-03x8r00w0l] .tenant-card.env-staging .tenant-icon {
    color: #1f2f45 !important;
}

[b-03x8r00w0l] .tenant-card.env-staging .tenant-subtitle {
    color: #5a3e00 !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;
    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: 70px;
    left: 240px;
    width: 250px;
    background: rgba(56, 73, 99, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 15px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: popupFadeIn-b-03x8r00w0l 0.2s ease-out;
    transition: left 0.4s ease-in-out;
}

/* Dynamic positioning based on sidebar state */
[b-03x8r00w0l] .user-options-popup.sidebar-expanded-mode {
    left: 240px;
}

[b-03x8r00w0l] .user-options-popup.sidebar-collapsed-mode {
    left: 100px;
}

[b-03x8r00w0l] .user-opitons-content {
    background: white;
    padding: 10px;
    border-radius: 10px;
}

@keyframes popupFadeIn-b-03x8r00w0l {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

/* Header/Title */
[b-03x8r00w0l] .popup-header {
    margin-bottom: 12px;
    padding-left: 5px;
}

[b-03x8r00w0l] .popup-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* List Items */
[b-03x8r00w0l] .popup-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-03x8r00w0l] .popup-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #E5E5E5;
    border-radius: 12px;
    cursor: pointer;
    color: #3D5676;
    font-weight: bolder;
}

[b-03x8r00w0l] .popup-item:hover {
    background: #d49e00;
    color: #1f2f45;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(212, 158, 0, 0.3);
}

[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;
}

[b-03x8r00w0l] .popup-text {
    font-size: 0.95rem;
}

/* 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);
}

/* /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 110px;
    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: -130px;
        margin-right: -180px;
        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;
}

/* --- 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;
    background: rgba(0, 0, 0, 0.45);
    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/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 */
}
/* /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/ActionReasonModal.razor.rz.scp.css */
/* ============================================================
   ActionReasonModal — Estilos del Modal de Cierre/Anulación
   ============================================================ */

/* Overlay y Contenedor Principal */
.confirm-modal-overlay[b-ow9p1tzmoh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    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 */

.shared-modal-overlay[b-5tgeybeijb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    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: 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 .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;
}

@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;
}

.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 */
.modal-overlay[b-wwj1orpkff] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    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 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 */
.confirm-modal-overlay[b-5baw50qbwl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: fadeIn-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: 16px;
    width: 100%;
    max-width: 400px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: scaleUp-b-5baw50qbwl 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.confirm-modal-header[b-5baw50qbwl] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
}

.confirm-modal-icon-wrapper[b-5baw50qbwl] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirm-modal-icon-wrapper.info[b-5baw50qbwl] {
    background-color: #E0F2FE;
    color: #0284C7;
}

.confirm-modal-icon-wrapper.destructive[b-5baw50qbwl] {
    background-color: #FEE2E2;
    color: #EF4444;
}

.confirm-modal-icon-wrapper svg[b-5baw50qbwl] {
    width: 24px;
    height: 24px;
}

.confirm-modal-title[b-5baw50qbwl] {
    flex: 1;
    margin: 0;
    padding-top: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
}

.confirm-modal-close[b-5baw50qbwl] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s;
    position: absolute;
    top: -8px;
    right: -8px;
}

.confirm-modal-close:hover[b-5baw50qbwl] {
    background-color: #F1F5F9;
    color: #475569;
}

.confirm-modal-close svg[b-5baw50qbwl] {
    width: 20px;
    height: 20px;
}

.confirm-modal-body[b-5baw50qbwl] {
    padding-left: 64px;
    /* Align with text after icon */
}

.confirm-modal-body p[b-5baw50qbwl] {
    margin: 0;
    line-height: 1.5;
}

.confirm-modal-message[b-5baw50qbwl] {
    color: #1E293B;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px !important;
}

.confirm-modal-secondary[b-5baw50qbwl] {
    color: #64748B;
    font-size: 0.95rem;
}

.confirm-modal-footer[b-5baw50qbwl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.confirm-modal-footer button[b-5baw50qbwl] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-cancel[b-5baw50qbwl] {
    background-color: #F1F5F9;
    color: #475569;
}

.btn-cancel:hover[b-5baw50qbwl] {
    background-color: #E2E8F0;
    color: #1E293B;
}

.btn-primary[b-5baw50qbwl] {
    background-color: #0EA5E9;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);
}

.btn-primary:hover[b-5baw50qbwl] {
    background-color: #0284C7;
    transform: translateY(-1px);
}

.btn-danger[b-5baw50qbwl] {
    background-color: #EF4444;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover[b-5baw50qbwl] {
    background-color: #DC2626;
    transform: translateY(-1px);
}

@keyframes fadeIn-b-5baw50qbwl {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp-b-5baw50qbwl {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

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

/* Mobile responsive */
@media (max-width: 480px) {
    .confirm-modal-content[b-5baw50qbwl] {
        margin: 16px;
        padding: 20px;
    }

    .confirm-modal-header[b-5baw50qbwl] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .confirm-modal-title[b-5baw50qbwl] {
        padding-top: 0;
    }

    .confirm-modal-close[b-5baw50qbwl] {
        top: 0;
        right: 0;
    }

    .confirm-modal-body[b-5baw50qbwl] {
        padding-left: 0;
        text-align: center;
    }

    .confirm-modal-footer[b-5baw50qbwl] {
        flex-direction: column-reverse;
    }

    .confirm-modal-footer button[b-5baw50qbwl] {
        width: 100%;
    }
}
/* /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;
}

.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-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;
}
/* /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: 12px 44px 12px 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: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.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: 4px;
    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;
}
/* /xShared/Components/Sidebars/LeftSidebar.razor.rz.scp.css */
/* ============================================================
   LeftSidebar — Shell genérico (ESTÁNDAR CON REPORTES)
   ============================================================ */

.slide-panel[b-8n2fhcekzx] {
    position: absolute;
    top: 0;
    left: -500px;
    width: 450px;
    height: 100vh;
    background: #1f2f45;
    /* Color exacto del NavMenu */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    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-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);
}

/* 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;
}

.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;
}

/* 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);
    }
}
/* /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;
}

/* 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;
}

.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 */
.right-sidebar-overlay[b-1arlmy5aq4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    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;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.right-sidebar-overlay.open[b-1arlmy5aq4] {
    opacity: 1;
    visibility: visible;
}

.right-sidebar-content[b-1arlmy5aq4] {
    width: 450px;
    height: 100vh;
    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%;
    }
}