/* =========================================================
   FS ORÇAMENTOS - clientes-inline.css
   CSS principal extraído de clientes.html
   ========================================================= */

:root {
      --fs-amarelo: #ffc400;
      --fs-amarelo-claro: #fff8e1;

      --fs-marrom: #3e2723;
      --fs-marrom-2: #4e342e;
      --fs-marrom-claro: #5d4037;

      --fs-fundo-escuro: #2c2c2c;
      --fs-bege: #f4ece1;
      --fs-bege-2: #fffaf0;

      --fs-branco: #ffffff;
      --fs-borda: #d7ccc8;

      --fs-texto: #3e2723;
      --fs-texto-suave: #6d4c41;

      --fs-perigo: #dc2626;
      --fs-sucesso: #25D366;
      --fs-verde-escuro: #083b2f;

      --fs-radius: 16px;
      --fs-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);

      --fs-azul: #ffc400;
      --fs-azul-escuro: #3e2723;
      --fs-azul-claro: #fff8e1;
      --fs-verde: #25D366;
      --fs-vermelho: #dc2626;
      --fs-cinza: #6d4c41;
      --fs-fundo: #2c2c2c;
      --fs-texto-claro: #f4ece1;
    }

    body {
      background: var(--fs-fundo-escuro);
      color: #eeeeee;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .pagina-clientes {
      max-width: 1180px;
      margin: 0 auto;
      padding: 24px 16px 60px;
      color: var(--fs-texto);
    }

    .clientes-hero {
      background: linear-gradient(135deg, #3e2723, #2c2c2c);
      color: #ffffff;
      border-radius: 22px;
      border-top: 6px solid var(--fs-amarelo);
      padding: 28px;
      box-shadow: var(--fs-shadow);
      margin-bottom: 22px;
      position: relative;
      overflow: hidden;
    }

    .clientes-hero::after {
      content: "";
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: rgba(255, 196, 0, 0.16);
      right: -80px;
      top: -90px;
    }

    .clientes-hero h1 {
      margin: 0 0 8px;
      font-size: 30px;
      color: #ffffff;
      position: relative;
      z-index: 1;
    }

    .clientes-hero p {
      margin: 0;
      max-width: 720px;
      color: var(--fs-bege);
      font-size: 15px;
      line-height: 1.6;
      opacity: 0.96;
      position: relative;
      z-index: 1;
    }

    .clientes-resumo {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }

    .card-resumo {
      background: linear-gradient(135deg, #fffaf0, #f4ece1);
      border: 1px solid var(--fs-borda);
      border-left: 6px solid var(--fs-amarelo);
      border-radius: var(--fs-radius);
      padding: 18px;
      box-shadow: var(--fs-shadow);
    }

    .card-resumo span {
      display: block;
      color: var(--fs-texto-suave);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .card-resumo strong {
      display: block;
      font-size: 26px;
      color: var(--fs-marrom);
    }

    .clientes-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 18px;
      align-items: start;
    }

    .clientes-card {
      background: var(--fs-bege);
      color: var(--fs-texto);
      border: 1px solid var(--fs-borda);
      border-top: 5px solid var(--fs-amarelo);
      border-radius: var(--fs-radius);
      box-shadow: var(--fs-shadow);
      overflow: hidden;
    }

    .clientes-card-header {
      padding: 18px 20px;
      border-bottom: 2px solid var(--fs-amarelo);
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
    }

    .clientes-card-header h2 {
      margin: 0;
      font-size: 20px;
      color: var(--fs-amarelo);
    }

    .clientes-card-header p {
      margin: 6px 0 0;
      color: var(--fs-bege);
      font-size: 13px;
      line-height: 1.5;
    }

    .clientes-card-body {
      padding: 20px;
      background: var(--fs-bege);
      color: var(--fs-texto);
    }

    .clientes-topo-acoes {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .form-clientes {
      display: grid;
      gap: 14px;
    }

    .form-linha {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .campo {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .campo label {
      font-size: 13px;
      font-weight: 800;
      color: var(--fs-marrom-claro);
    }

    .campo input,
    .campo select,
    .campo textarea {
      width: 100%;
      border: 1px solid var(--fs-borda);
      border-radius: 12px;
      padding: 11px 12px;
      font-size: 14px;
      outline: none;
      background: #ffffff;
      color: var(--fs-texto);
      box-sizing: border-box;
      transition: 0.2s ease;
    }

    .campo textarea {
      min-height: 92px;
      resize: vertical;
    }

    .campo input:focus,
    .campo select:focus,
    .campo textarea:focus {
      border-color: var(--fs-amarelo);
      box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.22);
    }

    .campo small {
      color: var(--fs-texto-suave);
      font-size: 12px;
      line-height: 1.4;
    }

    .clientes-acoes-form {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .btn {
      border: none;
      border-radius: 12px;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: 0.2s ease;
      min-height: 42px;
    }

    .btn:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }

    .btn-primario {
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
      border: 2px solid var(--fs-marrom);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    }

    .btn-primario:hover {
      background: #ffffff;
      color: var(--fs-marrom);
      transform: translateY(-1px);
    }

    .btn-secundario {
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      border: 2px solid var(--fs-amarelo);
    }

    .btn-secundario:hover {
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
    }

    .btn-perigo {
      background: #fff1f1;
      color: var(--fs-perigo);
      border: 2px solid var(--fs-perigo);
    }

    .btn-perigo:hover {
      background: var(--fs-perigo);
      color: #ffffff;
    }

    .btn-verde {
      background: var(--fs-sucesso);
      color: var(--fs-verde-escuro);
      border: 2px solid #128c4a;
    }

    .btn-verde:hover {
      background: #20ba5a;
      color: #ffffff;
    }

    .btn-pequeno {
      min-height: 36px;
      padding: 8px 11px;
      font-size: 12px;
      border-radius: 10px;
    }

    .clientes-filtros {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }

    .lista-clientes {
      display: grid;
      gap: 12px;
    }

    .cliente-item {
      border: 1px solid var(--fs-borda);
      border-radius: 16px;
      padding: 16px;
      background: #ffffff;
      color: var(--fs-texto);
      transition: 0.2s ease;
    }

    .cliente-item:hover {
      border-color: var(--fs-amarelo);
      box-shadow: 0 8px 22px rgba(62, 39, 35, 0.18);
    }

    .cliente-linha-topo {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .cliente-info h3 {
      margin: 0 0 4px;
      color: var(--fs-marrom);
      font-size: 18px;
    }

    .cliente-info p {
      margin: 0;
      color: var(--fs-texto-suave);
      font-size: 13px;
      line-height: 1.5;
    }

    .cliente-id-linha {
      margin-top: 6px !important;
      font-size: 12px !important;
      color: var(--fs-marrom-claro) !important;
      word-break: break-all;
    }

    .cliente-id-linha strong {
      color: var(--fs-marrom);
    }

    .cliente-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 800;
      background: #efebe9;
      color: var(--fs-marrom);
      border: 1px solid #d7ccc8;
    }

    .tag.ativo {
      background: #dcfce7;
      color: #166534;
      border-color: #bbf7d0;
    }

    .tag.inativo {
      background: #f1f1f1;
      color: #475569;
    }

    .tag.preferencial,
    .tag.empresa,
    .tag.recorrente {
      background: #fff8e1;
      color: #8a5a00;
      border-color: var(--fs-amarelo);
    }

    .tag.inadimplente {
      background: #fee2e2;
      color: #991b1b;
      border-color: #fecaca;
    }

    .cliente-acoes {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .estado-vazio {
      text-align: center;
      padding: 36px 20px;
      border: 1px dashed var(--fs-amarelo);
      border-radius: 16px;
      background: #fffaf0;
      color: var(--fs-texto-suave);
    }

    .estado-vazio strong {
      display: block;
      color: var(--fs-marrom);
      font-size: 18px;
      margin-bottom: 8px;
    }

    .aviso-plano {
      background: #fff8e1;
      color: var(--fs-marrom);
      border: 1px solid var(--fs-amarelo);
      border-left: 6px solid var(--fs-amarelo);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 18px;
      font-size: 14px;
      line-height: 1.5;
    }

    .mensagem-clientes {
      display: none;
      margin-bottom: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
    }

    .mensagem-clientes.sucesso {
      display: block;
      background: #dcfce7;
      color: #166534;
      border: 1px solid #bbf7d0;
    }

    .mensagem-clientes.erro {
      display: block;
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }

    .mensagem-clientes.info {
      display: block;
      background: #fff8e1;
      color: var(--fs-marrom);
      border: 1px solid var(--fs-amarelo);
    }

    .loading-clientes {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px;
      color: var(--fs-marrom-claro);
      font-weight: 800;
    }

    .loading-clientes.ativo {
      display: flex;
    }

    .spinner {
      width: 18px;
      height: 18px;
      border: 3px solid #f4e3a1;
      border-top-color: var(--fs-amarelo);
      border-radius: 50%;
      animation: girar 0.8s linear infinite;
    }

    @keyframes girar {
      to {
        transform: rotate(360deg);
      }
    }

    .oculto {
      display: none !important;
    }

    .btn-toggle-form-mobile {
      display: none;
      border: 2px solid var(--fs-amarelo);
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .btn-toggle-form-mobile:hover {
      background: #ffffff;
      color: var(--fs-marrom);
    }

    .header-form-mobile {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    @media (max-width: 980px) {
      .clientes-grid {
        grid-template-columns: 1fr;
      }

      .clientes-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .clientes-filtros {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 680px) {
      .pagina-clientes {
        padding: 18px 12px 42px;
      }

      .clientes-hero {
        padding: 22px;
        border-radius: 18px;
      }

      .clientes-hero h1 {
        font-size: 24px;
      }

      .clientes-resumo {
        grid-template-columns: 1fr;
      }

      .form-linha,
      .clientes-filtros {
        grid-template-columns: 1fr;
      }

      .cliente-linha-topo {
        flex-direction: column;
      }

      .clientes-acoes-form .btn,
      .cliente-acoes .btn {
        width: 100%;
      }

      .btn-toggle-form-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .card-form-mobile.form-fechado .corpo-form-mobile {
        display: none;
      }

      .card-form-mobile.form-fechado .clientes-card-header {
        border-bottom: none;
      }

      .header-form-mobile p {
        display: none;
      }
    }

    /* =========================================================
       CLIENTES MOBILE - LISTA RECOLHIDA POR PADRÃO
       ========================================================= */

    .clientes-lista-toggle-mobile {
      display: none;
      margin: 0 0 14px;
    }

    .clientes-lista-toggle-mobile button {
      width: 100%;
      border: 2px solid var(--fs-amarelo);
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: .2px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    }

    .clientes-lista-toggle-mobile button:hover {
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
    }

    @media (max-width: 680px) {
      .clientes-lista-toggle-mobile {
        display: block;
      }

      .lista-clientes-mobile-fechada {
        display: none !important;
      }

      .cliente-item {
        padding: 14px !important;
      }

      .cliente-acoes {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px !important;
      }

      .cliente-acoes .btn,
      .cliente-acoes button {
        width: 100% !important;
      }
    }