:root{
      /* Paleta base (ajuste se quiser) */
      --bg-color: #071C26;         /* fundo geral (azul petróleo bem escuro) */
      --card-bg: #0A3A4A;          /* fundo do card */
      --card-bg-2: #0a3a4abf;      /* fundo do card com transparência p/ brilho */
      --stroke: rgba(200,230,240,.20);
      --stroke-focus: #75C8D8;
      --text: #EAF4F8;
      --muted: #AFC4CC;

      /* Gradiente do botão “Entrar” (esquerda→direita) */
      --btn-a: #FFB088;            /* laranja claro */
      --btn-b: #E46D55;            /* laranja avermelhado */
      --btn-c: #D33D34;            /* vermelho */
      --btn-d: #171E27;            /* escurecido à direita, como no print */
    }

    /* ====== Plano de fundo ====== */
    html, body { height: 100%; }
    body{
      margin: 0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      background-color: var(--bg-color);
      background-image:
        radial-gradient(1200px 600px at 70% -10%, rgba(20,70,90,.35), transparent 60%),
        radial-gradient(1000px 500px at -10% 80%, rgba(20,70,90,.35), transparent 60%),
        url('/manager/assets/img/background-manager.png'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .wrap{
      min-height: 100%;
      display: grid;
      place-items: center;
    }

    /* ====== Card ====== */
    .card{
      width: 420px;
      max-width: 94vw;
      background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
      border: 1px solid rgba(255,255,255,.05);
      border-radius: 28px;
      padding: 40px 32px 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,.45);
      position: relative;
      backdrop-filter: saturate(120%) blur(2px);
    }

    .title{
      margin: 0 0 6px;
      text-align: center;
      font-weight: 700;
      font-size: 28px;
      letter-spacing: .2px;
      color: #fff;
    }
    .subtitle{
      margin: 0 0 22px;
      text-align: center;
      color: var(--muted);
      font-size: 16px;
    }

    .fields{ display: grid; gap: 16px; }

    #cliente-input{
      width: 100%;
    }
    .input{
      height: 54px;
      padding: 0 16px;
      color: var(--text);
      background: rgba(5, 24, 32, .35);
      border: 2px solid var(--stroke);
      border-radius: 14px;
      font-size: 20px;
      outline: none;
      transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .input::placeholder{ color: var(--muted); }
    .input:focus{
      border-color: var(--stroke-focus);
      box-shadow: 0 0 0 4px rgba(117,200,216,.20);
      background: rgba(5, 24, 32, .45);
    }

    .btn{
      margin-top: 10px;
      height: 56px;
      width: 100%;
      border: 0;
      border-radius: 16px;
      font-weight: 700;
      letter-spacing: .3px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      background-image: linear-gradient(90deg, var(--btn-c) 100%);
      box-shadow: 0 10px 25px rgba(211,61,52,.35);
      transition: filter .15s ease, transform .06s ease;
      color: #ffff;
    }
    .btn:hover{
      color: #fff;
    }

    .logo{
      display: block;
      margin: 18px auto 0;
      height: 90px;               /* ajuste conforme a sua arte */
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
    }

    @media (max-width: 480px){
      .card{ padding: 32px 22px 24px; border-radius: 22px; }
      .title{ font-size: 24px; }
      .input{ height: 50px; border-radius: 12px; }
      .btn{ height: 52px; border-radius: 14px; }
    }


  /* Combobox */
  .combo{
    position:relative;
  }
  .combo-input{
    /* width:100%;
    height:52px;
    padding:0 44px 0 16px;
    background:var(--input);
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--text);
    font-size:15px;
    outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s; */
  }
  /* .combo-input::placeholder{color:#8fb1b8}
  .combo-input:focus{
    box-shadow:0 0 0 6px var(--ring);
    border-color:transparent;
    background:#10414d;
  } */
  .combo-spinner{
    position:absolute; right:12px; top:50%; translate:0 -50%;
    width:18px; height:18px; border-radius:50%;
    border:2px solid rgba(255,255,255,.25);
    border-top-color:#fff; display:none;
    animation:spin 1s linear infinite;
  }
  .combo.loading .combo-spinner{display:block}
  @keyframes spin{to{transform:rotate(360deg)}}

  .combo-panel{
    position:absolute; inset-inline:0; top: calc(100% + 8px);
    background: #0c3038;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:none;
    z-index:50;
  }
  .combo.open .combo-panel{display:block}
  .list{
    max-height:310px; overflow:auto; margin:0; padding:6px 0; list-style:none;
  }
  .opt{
    display:flex; gap:10px; align-items:center;
    padding:10px 12px; cursor:pointer;
    transition:background .12s;
  }
  .opt:hover{background:#0e3a45}
  .opt[aria-selected="true"]{background:#11434f}
  .logo_cliente_opt{
    width:28px; height:28px; border-radius:50%; flex:0 0 28px;
    background:#fff; display:grid; place-items:center;
    font-weight:700; font-size:12px; color:#d6eef2; overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
  }
  .logo_cliente_opt img{width:100%; height:100%; object-fit:cover; display:block}
  .opt-main{display:flex; flex-direction:column; line-height:1.15}
  .name{font-size:14px; font-weight:600; color:#eaf6f8}
  .sub{font-size:12px; color:#9ebec4}
  .empty{
    padding:14px 12px; color:#9ebec4; font-size:13px;
  }