/* Badge prazos */
/* estilo base */
.chr-badge-prazo {
  display: inline-block;
  font-size: .700rem;
  
  padding: 1px 4px;
  border-radius: 4px;
  cursor: default;
  min-width: 70px;
  text-align: center;
}

/* Dentro do prazo (verde pastel) */
.chr-badge-prazo.dentro {
  background-color: #eafff1;  /* verde pastel */
  color: #04b440;             /* verde escuro */
  border: 1px solid #17c65333;
}

/* Estourando (amarelo pastel) */
.chr-badge-prazo.estourando {
    background-color: #fff3cd;
    color: #b98500;
    border: 1px solid #f6b1004f;
}

/* Estourado (vermelho pastel) */
.chr-badge-prazo.estourado {
  background-color: #ffeef3;  /* vermelho pastel */
  color: #f8285a;             /* vinho */
  border: 1px solid #f8285a33;
}




/* Badge de motivos (hashtags transformadas) */
.chr-motivo-badge {
    display: inline-flex;             
    align-items: center;
    background: #ffffff;              
    border: 1px solid #3F51B5;        
    color: #3F51B5;                   
    padding: 2px 8px;
    border-radius: 12px;              
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
    line-height: 1.2;
    white-space: nowrap;              
    transition: all 0.2s ease-in-out; 
    cursor: default;
    text-transform: uppercase;        /* força texto em maiúsculo */
}

.chr-motivo-badge i {
    margin-right: 4px;                
    font-size: 13px;
}

/* efeito hover */
.chr-motivo-badge:hover {
    background: #3F51B5;
    color: #ffffff;
}


/*	========================
//		Color Defination
//	======================== 
*/


.loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    background: #fff url('app/images/preloaders/1.gif') no-repeat center center;
    display: none; /* Inicialmente oculto */
}



.badge-chr-success {
    /* verde */    
    color: #00ab55;
    background-color: #ddf5f0;
    border: 1px solid #ddf5f0;
}
.badge-chr-success-b {
        color: #04b440;
        background: #eafff1;
        border: 1px solid #17c65333;    
        border-radius: 3px;
    }

.badge-chr-danger {
    /* vermelho */
    color: #e7515a;
    background-color: #fbeced;
    border: 1px solid #e7515a1c;
}


.badge-chr-danger-b {
    /* vermelho nb*/
    color: #fff;
    background: #c0392b;
    border: 1px solid #fff;
   
}
   



.badge-chr-warning {
    /* laranja */
    color: #e2a03f;
    background-color: #fcf5e9;
    border: 1px solid #fcf5e9;
}



.badge-chr-info {
    /* Azul */
    color: #2196f3;
    background-color: #e6f4ff;
    border: 1px solid #e6f4ff;
}


.badge-chr-secondary {
    /* roxoul */
    color: #805dca;
    background-color: #f2eafa;
    border: 1px solid #f2eafa;
}


.badge-chr-light {
    /* cinza */
    color: #343a40;
    background-color: #ececec;
    border: 1px solid #66717c38;
} 



.badge-chr-light-b {
   color: #e7515a;
   background-color: #fbeced;
   border: 1px solid #e7515a1c;
}

.badge-chr-yellow-a {
    color: #f6b100;
    background: #fff8dd;
    border: 1px solid #f6b10033;
}

.badge-chr-cyan {
    color: #616161;
    background: #d8dee9;
    border: 1px solid #1a1a1a33;
}

  
  /* INICIO Classe Badge  */
  
  
  .chr-badge-etapa {
    justify-content: center;
    line-height: 1;
    border-radius: .25rem;
    padding: .5rem;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: .6875rem;
  }
  
  .chr-badge-prioridade {
    justify-content: center;
    line-height: 1;
    border-radius: .25rem;
    padding: .5rem;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: .6875rem;
  }
 
 
 
    /* INICIO Classe Badge Etapa */
    .badge-etp01 {
        color: #ff9f29; /* Amarelo */
        background: #fff8dd;
        border: 1px solid #f6b10033;
    }   
   
    
    .badge-etp02 {
        
        color: #04b440; /* Verde */
        background: #eafff1;        
        border: 1px solid #17c65333;
    } 
        
    
    .badge-etp03 {
        color: #f8285a; /* Vermelho */
        background: #ffeef3;
        border: 1px solid #f8285a33;
    }
    
    .badge-etp04 {
        color: #f6b100; /* cotação */
        background: #fff8dd;
        border: 1px solid #f6b10033;
        


    }
    
    .badge-etp05 {

         color: #ff7f5d; /* Verde */
        background: #ffece7;        
        border: 1px solid #ff7f5d38;

        
    }
    
    .badge-etp06 {
        color: #687cfe; /* Roxo */
        background: #e8ebff;
        border: 1px solid #687cfe4d;
       
        
        
    }
    
    .badge-etp07 {
        color: #c2185b; /* Rosa escuro */
        background: #fce4ec;
        border: 1px solid #c2185b33;
    }
    
    .badge-etp08 {
        color: #dc2626; /* Verde escuro */
        background: #fee2e2;
        border: 1px solid #dc262642;
    }
    
    .badge-etp09 {

        color: #212529; /* Marrom */
        background: #f3f6f9;        
        border: 1px solid#21252940;
      
    }
    
    .badge-etp10 {
        color: #04b440;
        background: #eafff1;
        border: 1px solid #17c65333;
    
    }
    
    .badge-etp11 {

        
        color: #d32f2f; /* Vermelho escuro */
        background: #fdecea;
        border: 1px solid #d32f2f33;
    }



    .badge-etp12 {

       color: #008cfc; /* Pedido Finalizado */
       background: #bbe4faad;
       border: 1px solid #60c6ff59;
    }
    
    .badge-etp13 {
        color: #ffffff; /* Azul escuro */
        background: #1976d2;
        border: 1px solid #1976d233;
    }
    
    .badge-etp14 {
        color: #00796b; /* Verde petróleo */
        background: #e0f2f1;
      
        border: 1px solid#00796b33;
    }
    
    .badge-etp15 {
        color: #f57c00; /* Laranja queimado */
        background: #fff3e0;
        border: 1px solid #f57c0033;
    }
    /* FIM Classe Badge Etapa */
    

   /* INICI Classe Badge Prioridade */ 
  .chr-badge-baixa {
 
    color: #04b440 ;
    background: #eafff1 ;
    border: 1px solid #17c65333;
}

  .chr-badge-media {
 
    color: #f6b100 ;
    background: #fff8dd ;
    border: 1px solid #f6b10033;
}

   .chr-badge-alto {
    color: #f8285a ;
    background: #ffeef3;
    border: 1px solid #f8285a33;
}

  /* FIM Classe Badge Prioridade */
  
    
    
    
        .chr-badge-sm {
            padding: .3125rem .375rem;
        }
  
        .chr-badge-xs {
            font-size: 0.700rem;
            padding: .1875rem .3125rem;
            border-radius: 4px;
        }
        
    
        .badge-sm {
            padding: .3125rem .375rem;
        }
  
        .badge-xs {
            font-size: .700rem;
            padding: .1875rem .3125rem
        }
     
        .badge.badge-pill {
            border-radius: 1.875rem;
            padding-inline-start:.625rem;padding-inline-end:.625rem}
        
        .badge-circle,.badge-dot {
            padding: 0;
            border-radius: 50%
        }
        
        .badge-circle {
            flex-shrink: 0;
            line-height: 0
        }
        
        .badge-xs.badge-pill {
            padding-inline-start:.25rem;padding-inline-end:.25rem}
      
 
        .badge-sm.badge-pill {
            padding-inline-start:.375rem;padding-inline-end:.375rem
            
        }
        
        .badge-lg.badge-pill {
            padding-inline-start:.6875rem;padding-inline-end:.6875rem;
            
        }




        .badge-default{
            text-transform: uppercase;
        
            box-sizing: border-box;
            display: inline-block;
            line-height: 12px ;
            min-width: 150px;
            text-align: left;
            padding: 5px 6px;
            border-radius: 4px;
            margin-right: 4px;
            font-size: 11px;
            direction: ltr;
            /* font-weight: 500; */
            letter-spacing: 0.1px;
       
        }

/* BADGE COTACAO  */
        .badge-default...{
            text-transform: uppercase;
            padding: 2px 8px;
            box-sizing: border-box;
            display: inline-block;
            line-height: 9px;
            min-width: 175px;
            text-align: left;
            padding: 4px 6px;
            border-radius: 4px;
            margin-right: 8px;
            font-size: 11px;
            direction: ltr;
            font-weight: 500;
            letter-spacing: 0.2px;
            line-height: 16px;
        }













 /* cores badge-primary https://designreset.com/cork/html/vertical-light-menu/element-badges.html */
      
      
      
            .cota-badge {
                --badge-padding-x: 0.4375rem;
                --badge-padding-y: 0.3125rem;
                --badge-font-size: 0.75rem;
                --badge-color: #fff;
                --badge-border-radius: 0.25rem;
                display: inline-block;
                padding: var(--badge-padding-y) var(--badge-padding-x);
                font-size: var(--badge-font-size);
                line-height: 1;
                color: var(--badge-color);
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: var(--badge-border-radius);
            }
            
            
              .cota-badge-bold {
                --badge-padding-x: 0.4375rem;
                --badge-padding-y: 0.3125rem;
                --badge-font-size: 0.75rem;
                --badge-font-weight: 600;
                --badge-color: #fff;
                --badge-border-radius: 0.25rem;
                display: inline-block;
                padding: var(--badge-padding-y) var(--badge-padding-x);
                font-size: var(--badge-font-size);
                font-weight: var(--badge-font-weight);
                line-height: 1;
                color: var(--badge-color);
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: var(--badge-border-radius);
            }
            
              
            .cota-primary {
              --bg-opacity: 1;
               background-color: rgba(12,131,255, var(--bg-opacity))
            }
            
            
            
            .chr-primary {
                --bg-opacity: 1;
                background-color: rgba(12,131,255, var(--bg-opacity))
      
          
              }
            
            .badge-info {
              color: #fff;
              background-color: $info;
            }
            
            .badge-success {
              color: #fff;
              background-color: #00ab55;
            }
            
            .badge-danger {
              color: #fff;
              background-color: $danger;
            }
            
            .badge-warning {
              color: #fff;
              background-color: $warning;
            }
            
            .badge-dark {
              color: #fff;
              background-color: $dark;
            }
            
            .badge-secondary {
              background-color: var(--secondary);
            }

      /* cores badge-light https://designreset.com/cork/html/vertical-light-menu/element-badges.html */

            .badge-light-b-primary {
                color: #4361ee;
                background-color: #eceffe;
                border: 1px solid #4361ee;
            }
            
            .badge-light-b-info {
                color: #2196f3;
                background-color: #e6f4ff;
                border: 1px solid #2196f3;
            }
            
            .badge-light-b-success {
              color: #00ab55;
              background-color: #ddf5f0;
              border: 1px solid #00ab55;
            }
            
            .badge-light-b-danger {
                color: #e7515a;
                background-color: #fbeced;
                border: 1px solid #e7515a;
            }
            
            .badge-light-b-warning {
                color: #e2a03f;
                background-color: #fcf5e9;
                border: 1px solid #fcf5e9;
            }
            
            .badge-light-b-dark {
                color: #3b3f5c;
                background-color: #eaeaec;
                border: 1px solid #3b3f5c;
            }
                        
            .badge-light-b-secondary {
                color: #805dca;
                background-color: #f2eafa;
                border: 1px solid #f2eafa;
            }

  
            .badge-light--primary {
                color: #4361ee;
                background-color: #eceffe;
                border: 1px solid #eceffe;
            }
            
            .badge-light-info {
                color: #2196f3;
                background-color: #e6f4ff;
                border: 1px solid #e6f4ff;
            }
            
            .badge-light-success {
              color: #00ab55;
              background-color: #ddf5f0;
              border: 1px solid #ddf5f0;
            }
            
            .badge-light-danger {
                color: #e7515a;
                background-color: #fbeced;
                border: 1px solid #fbeced;
            }
            
            .badge-light-warning {
                color: #e2a03f;
                background-color: #fcf5e9;
                border: 1px solid #fcf5e9;
            }
            
            .badge-light-dark {
                color: #3b3f5c;
                background-color: #eaeaec;
                border: 1px solid #eaeaec;
            }
                        
            .badge-light-secondary {
                color: #805dca;
                background-color: #f2eafa;
                border: 1px solid #f2eafa;
            }


 


       /* cores badge-light https://designreset.com/cork/html/vertical-light-menu/element-badges.html */
  
  
              .popover-primary .popover-header {
                background-color: #eceffe;
                border: none;
                color: #4361ee;
            }
            
            .popover .popover-header {
                border-radius: 0;
                color: #060818;    
                font-size: 12px;
            }
  
  
  .profile-card {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            max-width: 300px;
            padding: 16px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #f0f0f0;
        }

        .name-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .name {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
        }

        .pro-badge {
            background: #1a1a1a;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .title {
            color: #666;
            font-size: 14px;
            margin: 0;
        }

        .info01 {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 16px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
        }

        .actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .flag-button {
            color: #666;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            padding: 0;
        }

        .follow-button {
            background: #00ba88;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
        }