@import "../css/style.css";


   .container-header-panel {
    position: relative;
       width: 100%;
       margin-bottom: 1%;
  
   }

   /* ================= HEADER CARD ================= */
   .header-card {
       background-color: var(--color-fondo-header-panel);
       border: solid 1px var(--color-border-header-panel);
       border-radius: 14px;
       padding: 24px 28px;
       box-shadow: var(--color-box-shadow-header-panel);
   }

   /* ================= TOP ROW ================= */
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 20px;
       flex-wrap: wrap;
   }

   .title-panel {
       font-size: 26px;
       font-weight: 700;
       color: var(--color-tipografia-three-header-panel);
   }

   .breadcrumb {
       font-family: 'Outfit';
       font-size: 16px;
       color: var(--color-tipografia-one-header-panel);
       margin-top: 4px;
   }

   .breadcrumb span {
       color: #2563eb;
   }


   .menu-row{
    color: var(--color-tipografia-one-header-panel);
   }
   /* ================= ACTIONS ================= */
   .actions {
       display: flex;
       gap: 12px;
       align-items: center;
       flex-wrap: wrap;
   }

   /* ================= SEARCH ================= */
   .search-box {
       position: relative;
       width: 280px;
   }

   .search-box i {
       position: absolute;
       left: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: #9ca3af;
       font-size: 22px;
   }

   .search-box input {
       width: 100%;
       padding: 10px 14px 10px 40px;
       border-radius: 10px;
       border: 1px solid var(--color-border-input-header-panel);
       outline:blue;
       color: var(--color-tipografia-three-header-panel);
       background-color: var(--color-input-search-header-panel);
   }

   /* ================= BUTTONS ================= */
   .btn {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 10px 16px;
       border-radius: 10px;
       border: none;
       cursor: pointer;
       font-weight: 600;
       transition: 0.25s;
   }

   .btn.primary {
       background:radial-gradient( var(--color-btn2-create-header-panel),var(--color-btn-create-header-panel));
       color: var(--color-tipografia-two-header-panel);
   }

   .btn.primary:hover {
       background: #1e40af;
   }

   .btn.secondary {
       background-color: var(--color-border-header-panel);
       color: var(--color-tipografia-one-header-panel);
       border: solid 1px var(--color-border-input-header-panel);
   }

   .btn.secondary:hover {
       background-color: var(--color-border-input-header-panel);
   }

   /* ================= MENU ROW ================= */
   .menu-row {
       display: flex;
       gap: 18px;
       margin-top: 20px;
       flex-wrap: wrap;
       border-top: 1px solid var(--color-border-input-header-panel);
       padding-top: 18px;
   }



   .menu-item.active {
       color: #2563eb;
       border-color: #2563eb;
   }

   .menu-item:hover {
       color: #2563eb;
       color:#1858e0;
   }

   /* ================= RESPONSIVE ================= */
   @media(max-width: 768px) {
       .search-box {
           width: 100%;
       }

       .actions {
           width: 100%;
           justify-content: space-between;
       }
   }