@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    } 

    /* Animação para o painel de notificações */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    #notification-popover {
        transform-origin: top right;
        animation: fadeInDown 0.2s ease-out forwards;
    }

    /* Layout de cada item da notificação */
    .notification-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        transition: background-color 0.2s ease-in-out;
    }

    /* Indicador de "Não Lido" */
    .notification-item.unread {
        background-color: #f7fafc; /* bg-gray-50 */
        border-left: 3px solid #3b82f6; /* border-blue-500 */
        padding-left: 13px;
    }

    /* Wrapper para o avatar e o ícone de contexto */
    .notification-icon-wrapper {
        position: relative;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .notification-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Ícone de contexto (canto inferior direito do avatar) */
    .notification-context-icon {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.7rem;
        border: 2px solid white;
    }

    /* Conteúdo da notificação (texto) */
    .notification-content p {
        line-height: 1.4;
    }

    /* Animação de entrada do Modal */
    @keyframes slideInDown {
        0% {
            opacity: 0;
            transform: translateY(-30px) scale(0.98);
        }
        75% {
            opacity: 1;
            transform: translateY(10px) scale(1.02);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-animated {
        animation: slideInDown 0.4s ease-out forwards;
    }

    /* Animação de saída do Modal */
    @keyframes slideOutUp {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-30px) scale(0.98);
        }
    }

    .modal-out-animated {
        animation: slideOutUp 0.3s ease-in forwards;
    }

    #solicitacoes-container-comercio,
    #solicitacoes-container-logistica {
        padding-bottom: 60px;
    }

    /* Círculo de notificação para botões flutuantes */
    .fab-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background-color: #388E3C; 
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        border: 2px solid white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    :root {
        --bg-color: #F7FDF9;
        --primary-green-light: #66BB6A;
        --primary-green-dark: #388E3C;
        --text-color: #2E4034;
        --card-bg: #FFFFFF;
        --input-bg: #F1F8F5;
        --shadow-color: rgba(0, 0, 0, 0.1);
    }

    body { 
        font-family: 'Poppins', sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    .flat-card {
        background-color: var(--card-bg);
        border-radius: 24px;
        box-shadow: 0 10px 30px -5px var(--shadow-color);
    }

    .flat-input-wrapper {
        background-color: var(--input-bg);
        border-radius: 12px;
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
    }
    
    .flat-input-wrapper:focus-within {
        border-color: var(--primary-green-light);
    }
    .flat-input-wrapper.error {
        border-color: #EF5350;
    }

    .flat-button {
        border-radius: 12px;
        background-image: linear-gradient(to right, var(--primary-green-light) 0%, var(--primary-green-dark) 100%);
        box-shadow: 0 4px 15px 0 rgba(67, 160, 71, 0.35);
        transition: all 0.3s ease-in-out;
        border: none;
        outline: none;
        color: white;
        cursor: pointer;
        will-change: transform, box-shadow;
    }

    .flat-button:hover {
        transform: translateY(-3px) translateZ(0);
        box-shadow: 0 7px 20px 0 rgba(67, 160, 71, 0.45);
    }

    .flat-button:active {
        transform: translateY(0);
        box-shadow: 0 4px 15px 0 rgba(67, 160, 71, 0.35);
    }
    
    .flat-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: translateY(0);
        box-shadow: 0 4px 15px 0 rgba(67, 160, 71, 0.35);
    }
    
    .nav-link {
        transition: all 0.3s ease;
        border-radius: 12px;
        padding: 8px 16px;
        font-weight: 500;
        position: relative;
    }

    .nav-link.active {
        color: var(--primary-green-dark);
        font-weight: 700;
    }

    .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 16px;
        right: 16px;
        height: 3px;
        border-radius: 2px;
        background-color: var(--primary-green-dark);
    }
    
    input, select {
        background-color: transparent;
        border: none;
        outline: none;
        width: 100%;
        padding: 0.75rem;
    }

    .status-badge {
        display: inline-block;
        padding: 0.35em 0.8em;
        font-size: 0.8em;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 10px;
        color: white;
    }

    .qty-pill {
        display: flex;
        align-items: center;
        background-color: var(--input-bg);
        border-radius: 12px;
        height: 3.5rem;
        overflow: hidden;
    }
    .qty-pill-btn {
        background-color: #D5EADC;
        color: var(--primary-green-dark);
        border: none;
        width: 40px;
        height: 100%;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .qty-pill-btn:hover {
        background-color: #C1DDC8;
    }
    .qty-pill-input {
        width: 50px;
        text-align: center;
        font-weight: 600;
        font-size: 1.1rem;
        padding: 0;
    }
    /* Hide arrows from number input */
    .qty-pill-input::-webkit-outer-spin-button,
    .qty-pill-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .qty-pill-input[type=number] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .item-loader {
        display: none;
    }

    /* Toggle Switch CSS */
    .switch {
      font-size: 17px;
      position: relative;
      display: inline-block;
      width: 3.5em;
      height: 2em;
    }
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #E0E0E0;
      transition: .4s;
      border-radius: 10px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 1.4em;
      width: 1.4em;
      border-radius: 8px;
      left: 0.3em;
      bottom: 0.3em;
      background-color: white;
      transition: .4s;
    }
    .switch input:checked + .slider {
      background-color: var(--primary-green-dark);
    }
    .switch input:focus + .slider {
      box-shadow: 0 0 1px var(--primary-green-dark);
    }
    .switch input:checked + .slider:before {
      transform: translateX(1.5em);
    }
    
    /* Progress Bar */
    .progress-bar-container {
        width: 100%;
        background-color: #e0e0e0;
        border-radius: 10px;
        overflow: hidden;
    }
    .progress-bar {
        width: 0%;
        height: 20px;
        background-color: var(--primary-green-dark);
        text-align: center;
        line-height: 20px;
        color: white;
        transition: width 0.4s ease;
    }
    
    /* Filter Button Styles */
    .filter-button {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        border: 1px solid transparent;
    }
    .filter-button.active {
        background-color: var(--primary-green-dark);
        color: white;
        box-shadow: 0 2px 8px rgba(56, 142, 60, 0.3);
    }
    .filter-button:not(.active) {
        background-color: #e8f5e9;
        color: var(--primary-green-dark);
        border-color: #a5d6a7;
    }
    .filter-button:not(.active):hover {
        background-color: #dcedc8;
    }

    .card-selected {
        outline: 2px solid var(--primary-green-dark);
        box-shadow: 0 0 15px rgba(56, 142, 60, 0.3);
    }

    .tooltip {
      position: relative;
      display: inline-block;
      z-index: 50;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 180px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -90px;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }

    .solicitation-card:hover {
        z-index: 10;
    }

    .status-icon-container .tooltiptext-mobile {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        position: absolute;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        z-index: 20;
    }
    
    .status-icon-container.active .tooltiptext-mobile {
        visibility: visible;
        opacity: 1;
        pointer-events: auto; /* Allow interaction when active */
    }
    @media (min-width: 769px) { /* Desktop styles */
        .status-icon-container .tooltiptext-mobile {
            display: none !important; /* Hide mobile tooltip on desktop */
        }
    }
    @media (max-width: 768px) { /* Mobile styles */
        .status-icon-container .tooltiptext {
            display: none !important; /* Hide desktop tooltip on mobile */
        }
    }


    /* Toast message for copy */
    #copy-message {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: rgba(56, 142, 60, 0.9);
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Allows clicks to pass through */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    #copy-message.show {
        opacity: 1;
    }

    /* Table specific styles for remessa modal */
    #remessa-modal table thead {
        position: sticky;
        top: 0;
        background-color: #f1f8f5; /* Ensure header background is visible when sticky */
        z-index: 10; /* Keep header above scrolling content */
    }

    #remessa-modal table tbody tr:nth-child(even) {
        background-color: #f9fafb; /* Light gray for even rows */
    }
    #remessa-modal table tbody tr:nth-child(odd) {
        background-color: #ffffff; /* White for odd rows */
    }

    /* Print styles */
    @media print {
        body * {
            visibility: hidden;
        }
        #print-area, #print-area * {
            visibility: visible;
        }
        #print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .page-break {
            page-break-after: always;
        }
        .page-container:last-child {
            page-break-after: auto;
        }
    }

    /* Floating action button */
    .custom-fab-button { 
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-image: linear-gradient(to right, var(--primary-green-light) 0%, var(--primary-green-dark) 100%);
        color: white;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 15px 0 rgba(67, 160, 71, 0.35);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        z-index: 40; /* Lower than modals */
    }

    .custom-fab-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 20px 0 rgba(67, 160, 71, 0.45);
    }

    .custom-fab-button:active {
        transform: translateY(0);
        box-shadow: 0 4px 15px 0 rgba(67, 160, 71, 0.35);
    }

    .remessa-card {
        background-color: var(--card-bg);
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .remessa-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    /* Custom CSS for 2-line truncation */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* --- Avatar Stacking Styles --- */
    .avatar-container {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 52px;
        height: 32px;
    }

    .avatar-stack {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .avatar-stack .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
        object-fit: cover;
        position: absolute;
        top: 0;
    }
    
    .avatar-stack .avatar-right {
        right: 0;
    }

    .avatar-stack .avatar-left {
        left: 0;
        z-index: 10;
    }
    
    .avatar-single {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--primary-green-light);
        object-fit: cover;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .initials-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
    }
    /* --- END: Avatar Stacking Styles --- */


    /* Styles for selection mode */
    .selection-mode-active .solicitation-card:not(.card-selected) {
        opacity: 0.6;
        filter: grayscale(50%);
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .selection-mode-active .solicitation-card.card-selected {
        opacity: 1;
        filter: grayscale(0%);
    }
    /* Mantém o número da remessa visível no modo de seleção */
    .selection-mode-active .solicitation-card:not(.card-selected) .remessa-number-text {
        opacity: 1 !important;
        font-weight: 700; /* Deixa o texto a negrito para se destacar mais */
    }
    
    /* Styles for non-selectable cards in selection mode */
    .selection-mode-active .solicitation-card.is-not-selectable {
        position: relative; /* Necessary for overlay positioning */
        cursor: not-allowed;
        border: 2px solid #B0BEC5;
    }

    .selection-mode-active .solicitation-card.is-not-selectable::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5); /* White overlay */
        backdrop-filter: blur(2px); /* Blur effect */
        -webkit-backdrop-filter: blur(2px); /* For Safari */
        border-radius: 1rem; /* Match card's border-radius */
        z-index: 15;
    }

    .selection-mode-active .solicitation-card.is-not-selectable .lock-icon {
        display: flex;
    }

    .lock-icon {
        display: none; /* Hidden by default */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #78909C;
        font-size: 2.5rem;
        z-index: 20;
        opacity: 0.8;
    }


    /* Custom Confirm Modal specific styles */
    #custom-confirm-modal {
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 60;
    }
    /* Section icon wrapper in card */
    .section-icon-in-card {
        width: 24px; /* Smaller size for in-card icon */
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        border-radius: 50%;
        background-color: #e8f5e9; /* Light green background */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem; /* Smaller icon size */
        color: #388e3c; /* Dark green icon color */
        margin-right: 8px; /* Spacing from product title */
    }

    /* Timeline styles for history modal */
    .timeline-item {
        display: flex;
        align-items: flex-start;
        position: relative;
        padding-left: 2.5rem;
        min-height: 50px;
    }
    .timeline-item:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 1.5rem;
        bottom: -0.5rem;
        width: 2px;
        background-color: #e5e7eb;
    }
    .timeline-icon {
        position: absolute;
        left: 1rem;
        top: 0.5rem;
        transform: translateX(-50%);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    /* --- Estilos para Botões Flutuantes (FAB) --- */
    .fab-wrapper {
        display: flex;
        justify-content: center;
        gap: 10px; /* Espaçamento entre os botões */
    }

    .fab-icon {
        position: relative;
        background: var(--primary-green-dark);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); /* Sombra padrão */
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        color: #fff; /* Ícone verde */
    }

    .fab-icon .fab-tooltip {
        position: absolute;
        top: 0;
        font-size: 14px;
        background: var(--primary-green-dark); /* Fundo do tooltip verde */
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        white-space: nowrap;
    }

    .fab-icon .fab-tooltip::before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        background: var(--primary-green-dark); /* Seta do tooltip verde */
        bottom: -3px;
        left: 50%;
        transform: translate(-50%) rotate(45deg);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .fab-icon:hover .fab-tooltip {
        top: -45px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .fab-icon:hover {
        background-image: linear-gradient(to right, var(--primary-green-light) 0%, var(--primary-green-dark) 100%);
        box-shadow: 0 7px 20px 0 rgba(67, 160, 71, 0.45); /* Sombra verde */
        color: #fff;
        transform: translateY(-3px);
    }

    /* Estilo para o botão Voltar (normal e hover) */
    .fab-icon.voltar-btn,
    .fab-icon.voltar-btn:hover {
        background: #78909C; /* Cor cinza-azulado fixa */
        color: #fff;
    }

    /* Tooltip do botão Voltar */
    .fab-icon.voltar-btn .fab-tooltip,
    .fab-icon.voltar-btn .fab-tooltip::before {
        background: #78909C;
    } 

    .flat-button > i {
        pointer-events: none;
    }
    
    /* --- Estilos para Placeholder de Data --- */
    input[type="date"].date-placeholder {
        position: relative;
        color: transparent;
    }

    input[type="date"].date-placeholder::before {
        content: attr(data-placeholder);
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
        transition: all 0.2s ease;
    }

    input[type="date"].date-placeholder:valid,
    input[type="date"].date-placeholder:focus {
        color: var(--text-color);
    }

    input[type="date"].date-placeholder:valid::before,
    input[type="date"].date-placeholder:focus::before {
        display: none;
    }

    .popover-aligned {
        /* Move o popover para cima (100% de sua altura) e adiciona um pequeno espaço de 8px */
        transform: translate(-50%, calc(-100% - 8px));
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .animated-popover {
        /* Estilos base do popover (copiados e adaptados dos IDs) */
        position: absolute;
        background-color: white;
        padding: 8px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        z-index: 50;
        display: flex;
        flex-direction: column;
        gap: 8px;

        /* Estado Inicial (Oculto) */
        opacity: 0;
        visibility: hidden;
        /* Começa um pouco para baixo e menor para um efeito de "emergir" */
        transform: translate(-50%, calc(-100% + 10px)) scale(0.95); 
        transform-origin: bottom center; /* A animação cresce a partir da base */
        pointer-events: none; /* Garante que não seja clicável quando oculto */
        transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
    }

    .animated-popover.is-visible {
        /* Estado Final (Visível) */
        opacity: 1;
        visibility: visible;
         /* Posição final com um pequeno espaço de 8px acima do botão */
        transform: translate(-50%, calc(-100% - 8px)) scale(1);
        pointer-events: auto;
    }

    .icon-btn-tooltip {
        position: relative; /* Essencial para o posicionamento do tooltip */
        background: var(--primary-green-dark);
        border-radius: 12px; /* Menos arredondado que um FAB */
        width: 48px;
        height: 48px;
        font-size: 1.25rem; /* 20px */
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        color: #fff;
    }

    .icon-btn-tooltip .tooltip-text {
        position: absolute;
        top: 0;
        font-size: 14px;
        background: var(--primary-green-dark);
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        white-space: nowrap;
        transform: translateY(10px); /* Começa um pouco para baixo */
    }

    .icon-btn-tooltip:hover .tooltip-text {
        top: -45px; /* Sobe ao passar o mouse */
        opacity: 1;
        transform: translateY(0);
    }

    .icon-btn-tooltip .tooltip-text::before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        background: var(--primary-green-dark);
        bottom: -3px;
        left: 50%;
        transform: translate(-50%) rotate(45deg);
    }

    .icon-btn-tooltip:hover {
        background-image: linear-gradient(to right, var(--primary-green-light) 0%, var(--primary-green-dark) 100%);
        box-shadow: 0 7px 20px 0 rgba(67, 160, 71, 0.45);
        transform: translateY(-3px);
    }

    /* --- Estilos para o Wizard de Finalização --- */
    .wizard-timeline-connector {
        flex-grow: 1;
        height: 2px;
        background-color: #e5e7eb; /* bg-gray-200 */
    }

    .wizard-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: #9ca3af; /* text-gray-400 */
        transition: all 0.3s ease;
    }

    .wizard-step-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #e5e7eb; /* bg-gray-200 */
        color: #9ca3af; /* text-gray-400 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .wizard-step-label {
        font-size: 0.875rem; /* text-sm */
        font-weight: 500;
    }

    /* Estilos para o passo ATIVO */
    .wizard-step.active .wizard-step-icon {
        background-color: var(--primary-green-dark);
        color: white;
    }
    .wizard-step.active {
        color: var(--primary-green-dark);
        font-weight: 600;
    }

    /* Estilos para o passo CONCLUÍDO */
    .wizard-step.completed .wizard-step-icon {
        background-color: #6ee7b7; /* bg-emerald-300 */
        color: var(--primary-green-dark);
    }
    .wizard-step.completed .wizard-step-icon::before {
        content: '\f00c'; /* Ícone de check do Font Awesome */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
    }
    .wizard-step.completed {
        color: #374151; /* text-gray-700 */
    }

    /* Container principal do seletor de falhas */
    .failure-selector-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        gap: 8px;
    }

    /* Campo de conteúdo com o ícone e o texto */
    .failure-selector-content {
        display: flex;
        align-items: center;
        flex-shrink: 0; /* Impede que o campo encolha */
        gap: 8px; /* Espaçamento entre o ícone e o texto */
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap; /* Garante que o texto não quebre a linha */
    }

    .failure-selector-nav-btn {
        background-color: #e5e7eb; /* bg-gray-200 */
        color: #4b5563; /* text-gray-600 */
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .failure-selector-nav-btn:hover {
        background-color: #d1d5db; /* bg-gray-300 */
    }

    .failure-selector-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
    }

    .failure-selector-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #d1d5db; /* bg-gray-300 */
        transition: background-color 0.2s ease;
    }

    .failure-selector-dot.active {
        background-color: var(--primary-green-dark);
    }

    .failure-selector-nav-btn > i {
        /* Torna o ícone "invisível" para eventos de clique.
        O clique passará para o elemento pai (o botão). */
        pointer-events: none;
    }

    @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .floating-card-animated {
        animation: fadeInRight 0.3s ease-out forwards;
    }

    .section-dropdown-panel {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border: 1px solid #f3f4f6;
        width: 250px;
        max-height: 300px;
        overflow-y: auto;
        padding: 8px;
        transform-origin: top left;
        animation: scale-in 0.1s ease-out forwards;
        z-index: 40;
    }

    .section-dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .section-dropdown-item:hover {
        background-color: #f9fafb; /* bg-gray-50 */
    }
    
    @keyframes scale-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    .section-icon-in-dropdown {
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 50%;
        background-color: #e8f5e9; /* Fundo verde claro */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: #388e3c; /* Ícone verde escuro */
        margin-right: 12px;
    }

    #history-view-wrapper {
        position: relative;
        overflow: hidden;
        min-height: 320px; /* Previne o "pulo" do layout durante a transição */
    }
    .history-view {
        width: 100%;
        /* Posicionamento absoluto para empilhar as telas e animá-las no lugar */
        position: absolute;
        top: 0;
        left: 0;
    }
    @keyframes slideInFromRight {
        from { opacity: 0; transform: translateX(30px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideOutToLeft {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(-30px); }
    }
    @keyframes slideInFromLeft {
        from { opacity: 0; transform: translateX(-30px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideOutToRight {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(30px); }
    }
    .slide-in-from-right { animation: slideInFromRight 0.25s ease-out forwards; }
    .slide-out-to-left { animation: slideOutToLeft 0.25s ease-out forwards; }
    .slide-in-from-left { animation: slideInFromLeft 0.25s ease-out forwards; }
    .slide-out-to-right { animation: slideOutToRight 0.25s ease-out forwards; }

    /* --- Estilos para o Accordion --- */
    .accordion-item {
        border: 1px solid #e5e7eb; /* border-gray-200 */
        border-radius: 1rem; /* rounded-xl */
        overflow: hidden; /* Garante que o conteúdo não vaze das bordas arredondadas */
        background-color: white;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        transition: box-shadow 0.2s ease-in-out;
    }

    .accordion-item:hover {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1.125rem; /* text-lg */
        font-weight: 600; /* font-semibold */
        text-align: left;
        color: #374151; /* text-gray-700 */
        background-color: white;
        cursor: pointer;
        border: none;
        outline: none;
    }

    .accordion-header .accordion-icon {
        transition: transform 0.3s ease;
        color: #9ca3af; /* text-gray-400 */
    }

    .accordion-header.active .accordion-icon {
        transform: rotate(180deg);
        color: var(--primary-green-dark);
    }

    .accordion-content {
        /* Animação com max-height */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        padding: 0 1.5rem; /* Começa com padding vertical zero */
        background-color: white;
        border-top: 1px solid transparent; /* Borda "fantasma" para transição */
    }

    .accordion-content.show {
        /* O max-height será definido via JS */
        padding: 1.5rem;
        border-top-color: #e5e7eb; /* border-gray-200 */
        transition: max-height 0.4s ease-in, padding 0.4s ease-in, border-color 0.4s ease-in;
    }

    .accordion-grid-container {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1.5rem; /* gap-6 */
    }

    /* Media queries para responsividade do grid */
    @media (min-width: 640px) { /* sm */
        .accordion-grid-container {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 768px) { /* md */
        .accordion-grid-container {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (min-width: 1024px) { /* lg */
        .accordion-grid-container {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    /* --- CSS: Estilos para as Abas --- */
    .tabs-container {
        position: relative; /* Essencial para o posicionamento do indicador */
        display: flex;
        gap: 8px;
        padding: 4px;
        background-color: #e8f5e9;
        border-radius: 9999px;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs-container::-webkit-scrollbar {
        display: none;
    }
    
    /* Novo elemento para o fundo líquido */
    .tab-indicator {
        position: absolute;
        top: 4px;
        bottom: 4px;
        height: calc(100% - 8px);
        background-color: var(--primary-green-dark);
        border-radius: 9999px;
        box-shadow: 0 4px 12px rgba(56, 142, 60, 0.25);
        z-index: 1; /* Fica atrás dos botões */
        /* A mágica da animação! */
        transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        will-change: left, width;
    }

    .tab-button {
        position: relative; /* Para garantir que fique na frente do indicador */
        z-index: 2; /* Fica na frente do z-index: 1 do indicador */
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--primary-green-dark);
        background-color: transparent; /* O fundo do botão é sempre transparente */
        border: none;
        cursor: pointer;
        transition: color 0.3s ease; /* A transição agora é na cor do texto */
        white-space: nowrap;
    }

    .tab-button.active {
        color: white; /* Aba ativa tem texto branco */
        /* O background-color e a sombra foram movidos para o .tab-indicator */
    }

    .tab-count {
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tab-button:not(.active) .tab-count {
        background-color: var(--primary-green-dark);
        color: white;
    }

    /* Define a animação de entrada */
    @keyframes card-fade-in-up {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Prepara o card para a animação, começando invisível */
    .solicitation-card {
        opacity: 0;
        will-change: transform, opacity;
    }

    /* Classe que aplica a animação */
    .card-entering {
        /* Aplica a animação definida acima */
        animation: card-fade-in-up 0.1s ease-out forwards;
    }

    /* Efeito de brilho para o TEXTO copiado */
    @keyframes text-glow-effect {
        0%   { text-shadow: 0 0 0px rgba(74, 222, 128, 0); }
        50%  { text-shadow: 0 0 15px rgba(74, 222, 128, 0.9); }
        100% { text-shadow: 0 0 0px rgba(74, 222, 128, 0); }
    }

    .cell-copied {
        font-weight: 700; /* bold */
        color: #16a34a; /* green-600 */
        animation: text-glow-effect 1s ease-out;
    }

    /* Novo pop-up de notificação de cópia com ANIMAÇÃO */
    .copy-tooltip-popup {
        position: absolute;
        background-color: #22c55e; /* green-500 */
        color: white;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.875rem; /* text-sm */
        font-weight: 600;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        /* Estado inicial da animação: um pouco para baixo e menor */
        transform: translateY(5px) scale(0.9);
        transform-origin: bottom center;
        /* Transição suave para opacidade e transformação */
        transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
        white-space: nowrap;
    }

    .copy-tooltip-popup.show {
        opacity: 1;
        visibility: visible;
        /* Estado final da animação: posição e tamanho originais */
        transform: translateY(0) scale(1);
    }

    /* Container para a célula copiável, necessário para posicionar o tooltip */
    .copyable-cell-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    /* Tooltip customizado de "Clique para copiar" */
    .copy-tooltip-custom {
        visibility: hidden;
        opacity: 0;
        background-color: #374151; /* Cinza escuro */
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 10;
        bottom: 125%;
        left: 50%;
        /* Animação de entrada */
        transform: translate(-50%, 5px); /* Começa um pouco para baixo */
        transition: all 0.2s ease-out;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
    }

    /* Flecha do tooltip */
    .copy-tooltip-custom::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #374151 transparent transparent transparent;
    }
    
    /* Classe para forçar o tooltip a se esconder durante a cópia */
    .copy-tooltip-custom.is-hidden {
         visibility: hidden !important;
         opacity: 0 !important;
    }

    /* Mostra o tooltip ao passar o mouse, SE ele não estiver forçadamente escondido */
    .copyable-cell-wrapper:hover .copy-tooltip-custom:not(.is-hidden) {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0); /* Posição final da animação */
    }

    /* Muda a cor do texto da célula para verde ao passar o mouse */
    td.is-copyable:hover {
        color: #16a34a; /* verde */
        font-weight: 500;
    }

    /* Estilo e animação do ÍCONE da Lupa */
    .search-icon-wrapper {
        position: relative;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #4b5563;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        cursor: pointer;
        flex-shrink: 0;
    }
    .search-icon-wrapper:hover {
        border-color: var(--primary-green-dark);
        color: var(--primary-green-dark);
    }

    .search-active-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 10px;
        height: 10px;
        background-color: #ef4444;
        border-radius: 50%;
        border: 2px solid white;
    }

    /* Estilo do CAMPO DE BUSCA */
    .search-input-wrapper {
        display: flex;
        align-items: center;
        background-color: white;
        border: 1px solid var(--primary-green-dark);
        border-radius: 9999px;
        padding: 4px;
        width: 100%; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    /* Estilos internos do campo de busca (não precisam de mudança) */
    .search-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        padding: 4px 8px;
        font-size: 0.875rem;
        color: #374151;
    }

    .search-input-clear, .search-input-collapse {
        color: #9ca3af;
        cursor: pointer;
        padding: 4px;
        margin: 0 4px;
        transition: color 0.2s ease;
    }
    .search-input-clear:hover, .search-input-collapse:hover {
        color: #374151;
    }

    /* --- ESTILOS RESPONSIVOS PARA O COMPONENTE DE BUSCA (AGORA COM CLASSES) --- */

    /* ESTILOS PADRÃO (MOBILE FIRST) */
    .search-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .search-icon-wrapper {
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        position: relative;
        z-index: 10;
    }

    .search-icon-hidden {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }

    .search-input-wrapper {
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        pointer-events: none;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out;
    }

    .search-input-wrapper.search-input-visible {
        max-height: 100px;
        opacity: 1;
        margin-top: 12px;
        pointer-events: auto;
    }

    /* ESTILOS PARA TELAS MAIORES (DESKTOP) */
    @media (min-width: 768px) {
        .search-wrapper {
            display: block;
            position: relative; /* CRUCIAL */
        }

        .search-input-wrapper {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            max-height: none;
            margin-top: 0;
            overflow: visible;
            transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
        }

        .search-input-wrapper.search-input-visible {
            width: 250px;
            opacity: 1;
            pointer-events: auto;
        }
    }

    /* --- Estilos para a Pílula de Filtro Unificada e Animada --- */

    /* Estilo base da pílula */
    .filter-pill-unified {
        display: inline-flex; /* Permite que o tamanho se ajuste ao conteúdo */
        align-items: center;
        height: 40px;
        padding: 0 12px; /* Padding horizontal */
        background-color: #e8f5e9;
        border: 1px solid #a5d6a7;
        border-radius: 9999px; /* Totalmente arredondada */
        cursor: pointer;
        overflow: hidden; /* Essencial para a animação de largura */
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Estilo da pílula quando o filtro está ATIVO */
    .filter-pill-unified.active {
        background-color: var(--primary-green-dark);
        border-color: var(--primary-green-dark);
        color: white;
    }

    .filter-pill-unified:hover {
        border-color: var(--primary-green-dark);
    }

    /* Estilo do ícone dentro da pílula */
    .pill-icon {
        font-size: 1rem;
        flex-shrink: 0; /* Impede que o ícone seja espremido */
    }

    /* Estilo do texto dentro da pílula */
    .pill-text {
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap; /* Impede a quebra de linha durante a animação */
        overflow: hidden; /* Garante que o texto não vaze */
        
        /* Estado inicial (recolhido): sem largura, invisível e sem margem */
        max-width: 0;
        opacity: 0;
        margin-left: 0;
        transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.2s ease, 
                    margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Estado EXPANDIDO: Quando a pílula tem a classe '.is-expanded' */
    .filter-pill-unified.is-expanded .pill-text {
        max-width: 100px; /* Largura máxima para o texto aparecer */
        opacity: 1;
        margin-left: 8px; /* Cria um espaçamento entre o ícone e o texto */
    }

    /* O badge de filtro ativo não precisa de mudanças, mas garantimos que ele não fique escondido */
    #active-filters-display:not(:empty) {
        display: block;
    }

    /* --- ESTILIZAÇÃO COMPLETA DO MODAL DE FINALIZAÇÃO --- */

    /* Fundo do modal com efeito de blur */
    #conclude-separation-modal {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Tabela - Cabeçalho */
    #conclude-table-head th {
        padding: 12px 16px;
        background-color: #f9fafb; /* bg-gray-50 */
    }
    /* Alinha o primeiro checkbox à esquerda */
    #conclude-table-head th:first-child {
        text-align: left;
    }
    /* Alinha o último header de quantidade à direita */
    #conclude-table-head th:last-child {
        text-align: right;
        padding-right: 24px;
    }

    /* Tabela - Corpo da Tabela e Linhas */
    #conclude-table-body tr {
        transition: background-color 0.2s ease-in-out;
    }
    #conclude-table-body tr:hover {
        background-color: #f7fdf9; /* Verde muito claro */
    }

    /* Tabela - Células */
    #conclude-table-body td {
        padding: 12px 16px;
        vertical-align: middle;
    }
    /* Alinha o seletor de quantidade à direita */
    #conclude-table-body td:last-child {
        text-align: right;
        padding-right: 24px;
    }

    /* Checkbox estilizado na tabela */
    .table-checkbox {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 0.3rem;
        border: 2px solid #d1d5db; /* cinza-300 */
        cursor: pointer;
        transition: all 0.2s;
        appearance: none;
        -webkit-appearance: none;
        background-color: white;
        position: relative;
    }
    .table-checkbox:checked {
        background-color: var(--primary-green-dark);
        border-color: var(--primary-green-dark);
    }
    /* Adiciona o ícone de 'check' ao checkbox quando marcado */
    .table-checkbox:checked::after {
        content: '\f00c'; /* Código do ícone 'check' do Font Awesome */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Melhorias no Seletor de Quantidade */
    #conclude-separation-modal .qty-pill {
        display: inline-flex; /* Para alinhar à direita */
        height: 2.5rem; /* 40px */
    }
    #conclude-separation-modal .qty-pill-btn {
        width: 32px;
    }
    #conclude-separation-modal .qty-pill-input {
        width: 48px;
        font-size: 1rem;
    }

    /* --- ESTILOS PARA A LISTA SUSPENSA (DROPDOWN) CUSTOMIZADA E ANIMADA --- */

    /* O contêiner principal do dropdown. Precisa ser relativo para posicionar o painel de opções. */
    .custom-dropdown {
        position: relative;
        width: 100%;
        font-size: 0.875rem; /* 14px */
    }

    /* A parte visível do dropdown, que mostra o valor selecionado. */
    .custom-dropdown-selected {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid #d1d5db; /* border-gray-300 */
        background-color: white;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .custom-dropdown-selected:hover {
        border-color: var(--primary-green-dark);
    }
    /* Efeito de anel quando o dropdown está aberto/focado */
    .custom-dropdown.is-open .custom-dropdown-selected {
        border-color: var(--primary-green-dark);
        box-shadow: 0 0 0 2px rgba(56, 142, 60, 0.2);
    }

    /* Ícone da seta no dropdown */
    .custom-dropdown-arrow {
        transition: transform 0.3s ease;
        color: #6b7280; /* text-gray-500 */
    }
    .custom-dropdown.is-open .custom-dropdown-arrow {
        transform: rotate(180deg);
    }

    /* O painel com as opções, que fica escondido por padrão */
    .custom-dropdown-panel {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background-color: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        z-index: 50;
        overflow: hidden; /* Essencial para a animação de altura funcionar */
        max-height: 0; /* Começa recolhido */
        opacity: 0;    /* Começa transparente para um efeito mais suave */
        transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
    }

    /* Estado ABERTO do painel */
    .custom-dropdown-panel.is-active-portal {
        max-height: 200px; 
        opacity: 1;        
        overflow-y: auto; 
    }

    /* Cada opção dentro do painel */
    .custom-dropdown-option {
        padding: 10px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 0.75rem;
    }
    .custom-dropdown-option:hover {
        background-color: #f7fdf9; /* Verde muito claro */
    }
    .custom-dropdown-option.is-selected {
        background-color: #e8f5e9; /* Verde claro */
        font-weight: 600;
        color: var(--primary-green-dark);
    }

    /* --- ESTILOS PARA AS PÍLULAS DE LOCALIZAÇÃO NO MODAL --- */

    /* Estilo base da pílula (botão) */
    .location-pill {
        display: inline-flex;
        align-items: center;
        height: 40px;
        padding: 0 12px;
        background-color: #f3f4f6; /* bg-gray-100 */
        border: 1px solid #e5e7eb; /* border-gray-200 */
        border-radius: 9999px;
        cursor: pointer;
        overflow: hidden; /* Essencial para a animação */
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .location-pill:hover:not(.active) {
        border-color: var(--primary-green-dark);
        background-color: #e8f5e9;
    }

    /* Estilo da pílula quando ATIVA (selecionada) */
    .location-pill.active {
        background-color: var(--primary-green-dark);
        border-color: var(--primary-green-dark);
        color: white;
        box-shadow: 0 4px 12px rgba(56, 142, 60, 0.2);
    }

    /* Ícone dentro da pílula */
    .location-pill .pill-icon {
        font-size: 1rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    
    .location-pill.active .pill-icon {
        transform: scale(1.1);
    }

    /* Texto dentro da pílula (a mágica da animação acontece aqui) */
    .location-pill .pill-text {
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        
        /* Estado inicial (recolhido): sem largura, invisível e sem margem */
        max-width: 0;
        opacity: 0;
        margin-left: 0;
        transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.2s ease, 
                    margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Estado EXPANDIDO: Quando a pílula tem a classe '.active' */
    .location-pill.active .pill-text {
        max-width: 100px; /* Largura máxima para o texto aparecer */
        opacity: 1;
        margin-left: 8px; /* Cria um espaçamento entre o ícone e o texto */
    }

    /* --- ESTILOS PARA O STATUS DE SEPARAÇÃO DINÂMICO --- */

    /* Adiciona uma borda e transição ao seletor de quantidade base */
    .qty-pill {
        border: 2px solid transparent;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    /* Status COMPLETO (Verde) */
    .qty-pill.status-complete {
        border-color: #16a34a; /* green-600 */
        background-color: #f0fdf4; /* green-50 */
    }
    .qty-pill.status-complete .qty-pill-input {
        color: #15803d; /* green-700 */
    }

    /* Status PARCIAL (Amarelo) */
    .qty-pill.status-partial {
        border-color: #f59e0b; /* amber-500 */
        background-color: #fffbeb; /* amber-50 */
    }
    .qty-pill.status-partial .qty-pill-input {
        color: #b45309; /* amber-700 */
    }

    /* Status ZERO (Vermelho) */
    .qty-pill.status-zero {
        border-color: #dc2626; /* red-600 */
        background-color: #fef2f2; /* red-50 */
    }
    .qty-pill.status-zero .qty-pill-input {
        color: #b91c1c; /* red-700 */
    }

    /* --- ESTILOS PARA OS ÍCONES DE STATUS DA LINHA (✔️/❌) --- */

    .status-icon-wrapper {
        display: flex;
        gap: 8px; /* Espaçamento entre os ícones */
        justify-content: center;
    }

    .status-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1rem;
        color: #9ca3af; /* Cor do ícone inativo (cinza) */
        background-color: #f3f4f6; /* Fundo inativo (cinza claro) */
        transition: all 0.2s ease-in-out;
    }

    .status-icon:hover {
        transform: scale(1.1);
    }

    /* Estilo para o ícone ATIVO e VERIFICADO (✔️) */
    .status-icon.active.verified {
        background-color: #16a34a; /* Verde */
        color: white;
        box-shadow: 0 0 10px rgba(22, 163, 74, 0.4);
    }

    /* Estilo para o ícone ATIVO e REJEITADO (❌) */
    .status-icon.active.rejected {
        background-color: #dc2626; /* Vermelho */
        color: white;
        box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
    }

    /* --- ESTILOS PARA LINHAS TRAVADAS E COM STATUS DEFINIDO --- */

    /* Estilo para travar um dropdown */
    .custom-dropdown.is-disabled {
        pointer-events: none; /* Impede cliques */
        background-color: #f9fafb; /* bg-gray-50 */
        opacity: 0.7;
    }
    .custom-dropdown.is-disabled .custom-dropdown-arrow {
        display: none; /* Esconde a seta */
    }

    /* Estilo para travar o seletor de quantidade */
    .qty-pill.is-disabled .qty-pill-btn,
    .qty-pill.is-disabled .qty-pill-input {
        pointer-events: none; /* Impede cliques e digitação */
        opacity: 0.7;
    }

    /* Novo efeito para a linha inteira quando o status é 'verified' ou 'rejected' */
    #conclude-table-body tr.row-decided td {
        background-color: #f9fafb; /* Fundo cinza bem claro */
    }

    /* Garante que o efeito de hover ainda funcione sobre a linha com status definido */
    #conclude-table-body tr.row-decided:hover td {
        background-color: #f7fdf9; /* Verde muito claro do hover original */
    }

    /* --- ESTILOS PARA O FEEDBACK VISUAL DE LINHA PENDENTE --- */

    /* Define a animação de "flash" */
    @keyframes flash-red {
        0%, 100% {
            background-color: inherit; /* Cor original da célula */
        }
        50% {
            background-color: #fef2f2; /* bg-red-50, um vermelho bem claro */
        }
    }

    /* Classe que aplica a animação às células <td> da linha */
    tr.row-pending-flash td {
        animation: flash-red 0.7s ease-in-out;
    }

    /* --- ESTILOS PARA O ÍCONE DE CÓPIA DEDICADO --- */
    .copy-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Alinha o texto à esquerda e o ícone à direita */
        width: 100%;
    }

    .copy-icon-cell {
        color: #9ca3af; /* Cor do ícone (cinza) */
        cursor: pointer;
        margin-left: 8px;
        padding: 4px;
        border-radius: 4px;
        opacity: 0.5; /* Começa um pouco transparente */
        transition: all 0.2s ease-in-out;
    }

    .copy-icon-wrapper:hover .copy-icon-cell {
        opacity: 1; /* Totalmente visível ao passar o mouse na célula */
        color: var(--primary-green-dark); /* Cor do ícone (verde) */
        background-color: #e8f5e9; /* Fundo verde claro */
    }

    /* --- Estilos para o Filtro de Separador Customizado --- */
    .db-filter-dropdown {
        position: relative;
    }
    .db-filter-selected-btn {
        display: flex;
        align-items: center;
        width: 100%;
        height: 46px; /* Altura igual aos outros inputs */
        padding: 0 0.75rem;
        cursor: pointer;
        border-radius: 12px;
        background-color: var(--input-bg);
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }
    .db-filter-selected-btn:hover {
        border-color: var(--primary-green-light);
    }
    .db-filter-selected-btn img,
    .db-filter-selected-btn .avatar-placeholder {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
        object-fit: cover;
    }
    .avatar-placeholder {
        background-color: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #757575; /* Cor do ícone */
    }

    .db-filter-panel {
        position: absolute;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        width: 100%;
        top: calc(100% + 4px);
        z-index: 50;
        max-height: 250px;
        overflow-y: auto;
        padding: 8px;
    }
    .db-filter-option {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-radius: 8px; /* Arredondamento das opções */
    }
    .db-filter-option:hover {
        background-color: var(--input-bg);
    }
    
    /* Regra para ícones de seção no dropdown */
    .db-filter-option .avatar-placeholder {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .db-filter-option img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 8px;
        object-fit: cover;
    }
    .db-filter-option span {
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    /* Checkbox customizado no dropdown */
    .db-filter-option .db-filter-checkbox {
        margin-right: 12px;
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 0.3rem;
        border: 2px solid #d1d5db; /* cinza-300 */
        cursor: pointer;
        transition: all 0.2s;
        appearance: none;
        -webkit-appearance: none;
        background-color: white;
        position: relative;
        flex-shrink: 0;
    }
    .db-filter-option .db-filter-checkbox:checked {
        background-color: var(--primary-green-dark);
        border-color: var(--primary-green-dark);
    }
    .db-filter-option .db-filter-checkbox:checked::after {
        content: '\f00c'; /* Código do ícone 'check' do Font Awesome */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Opção "Todos" */
    .db-filter-option.all-option .avatar-placeholder {
        background-color: #e0e0e0;
        color: #757575;
    }
    
    /* Empilhamento de avatares no botão */
    .db-filter-avatar-stack {
        display: flex;
        align-items: center;
        margin-right: 8px;
    }
    .db-filter-avatar-stack .avatar-item {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid white;
        object-fit: cover;
        background-color: #e0e0e0; /* Fundo para iniciais */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-color);
        flex-shrink: 0;
    }
    .db-filter-avatar-stack .avatar-item:not(:first-child) {
        margin-left: -10px;
    }

    /* --- ESTILOS PARA ÍCONES DE AÇÃO DA TABELA --- */
    .table-actions-container {
        display: flex;
        justify-content: flex-end;
        padding: 8px 4px;
        border-bottom: 1px solid #e5e7eb; /* Divisor */
    }

    .action-icon {
        font-size: 1.1rem;
        color: #9ca3af; /* Cinza (Inativo) */
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 6px;
        transition: all 0.2s ease-in-out;
    }
    
    .action-icon:hover {
        background-color: #f3f4f6;
    }

    .action-icon.active {
        color: var(--primary-green-dark); /* Verde (Ativo) */
        background-color: #e8f5e9;
    }
    
    /* Estilo para setas de ordenação desativadas */
    .sort-icon-disabled .sort-icon {
        color: #d1d5db !important; /* Cinza bem claro */
        cursor: default;
    }

    /* Estilos para dropdowns sem borda dentro da tabela de finalização */
    .custom-dropdown.is-in-table .custom-dropdown-selected {
        border: none;
        padding: 6px;
        background-color: transparent;
    }

    /* Adiciona um leve fundo no hover para dar feedback visual */
    .custom-dropdown.is-in-table .custom-dropdown-selected:hover {
        background-color: #f3f4f6; /* bg-gray-100 */
        border-radius: 6px;
    }

    /* Estilos para o Popover de seleção de fonte da foto */
    #photo-source-popover {
        position: absolute;
        bottom: 100%; /* Posiciona acima do elemento pai */
        left: 0;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        z-index: 10;
        padding: 8px;
        margin-bottom: 8px;
        width: 200px;
        transform-origin: bottom left;
        animation: scale-in 0.1s ease-out forwards;
    }

    .popover-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 0.875rem;
        color: #374151; /* text-gray-700 */
    }

    .popover-option:hover {
        background-color: #f9fafb; /* bg-gray-50 */
    }

    .popover-option i {
        width: 20px;
        text-align: center;
        color: #6b7280; /* text-gray-500 */
    }

    /* Personalização da barra de rolagem dentro do modal */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* Foco suave nos inputs */
    .focus-ring:focus-within {
    box-shadow: 0 0 0 2px #4ade80;
    border-color: transparent;
    }