/*
 * BOLEPIX_COBRANCAS_MOBILE_FINAL_V5703Z190COBMOBILE1C5
 *
 * Substitui SOMENTE os CSS recentes:
 * - cobmobile1c3
 * - cobmobile1c4
 * - cobperf1c2r6
 *
 * Desktop permanece fora deste bloco.
 */


/* ============================================================
 * CAMPOS DA FATURA — TEXTO ESCURO
 * ============================================================ */

html body #view
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),

html body #view
select,

html body #view
textarea{

  color:#111827 !important;

  -webkit-text-fill-color:#111827 !important;

  caret-color:#111827 !important;

  background-color:#ffffff !important;

  color-scheme:light !important;
}


html body #view
input::placeholder,

html body #view
textarea::placeholder{

  color:#6b7280 !important;

  -webkit-text-fill-color:#6b7280 !important;

  opacity:1 !important;
}


html body #view option,
html body #view optgroup{

  color:#111827 !important;

  -webkit-text-fill-color:#111827 !important;

  background:#ffffff !important;
}


html body #view
[contenteditable="true"]{

  color:#111827 !important;

  -webkit-text-fill-color:#111827 !important;

  caret-color:#111827 !important;

  background:#ffffff !important;
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media screen and (max-width:980px){


  /* ----------------------------------------------------------
   * 1. CABECALHO DE COBRANCAS
   * ---------------------------------------------------------- */

  html body #view
  > .bp-faturas-native-head-v5703z186{

    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    justify-content:flex-start !important;

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;

    margin:0 0 8px 0 !important;

    padding:0 !important;

    overflow:visible !important;

    overflow-anchor:none !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;
  }


  /*
   * O H1 não muda de geometria durante o carregamento.
   */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > h1{

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;

    margin-left:0 !important;

    margin-right:0 !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;
  }


  /* ----------------------------------------------------------
   * 2. SOMENTE OS 3 BOTOES AZUIS
   *
   * Altura total fixa:
   * 74 + 16 + 74 + 16 + 74 = 254px
   *
   * Portanto a chegada dos blocos inferiores não pode
   * recalcular a geometria desse conjunto.
   * ---------------------------------------------------------- */

  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186{

    display:grid !important;

    grid-template-columns:minmax(0,1fr) !important;

    grid-template-rows:
      74px
      74px
      74px
      !important;

    grid-auto-flow:row !important;

    gap:16px !important;

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    height:254px !important;

    min-height:254px !important;

    max-height:254px !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    overflow-anchor:none !important;

    contain:layout !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;
  }


  /*
   * IMPORTANTE:
   *
   * Não usamos mais:
   * button.bp-top-slot-v158k9c
   *
   * porque essa classe também pertence aos botões brancos
   * que entram depois do carregamento.
   */


  /* FATURAS */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-top-fatura-v5703z87{

    grid-row:1 !important;

    order:1 !important;
  }


  /* PLANOS — exclui explicitamente o Carnê */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-top-planos-v5703z87:not(.bp-top-carne-v5703z189carne1c1){

    grid-row:2 !important;

    order:2 !important;
  }


  /* CARNE */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-top-carne-v5703z189carne1c1{

    grid-row:3 !important;

    order:3 !important;
  }


  /*
   * Geometria idêntica dos três módulos.
   */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-top-fatura-v5703z87,

  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-top-planos-v5703z87{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    align-self:stretch !important;

    justify-self:stretch !important;

    position:relative !important;

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    height:74px !important;

    min-height:74px !important;

    max-height:74px !important;

    margin:0 !important;

    padding:
      15px
      18px
      15px
      18px
      !important;

    box-sizing:border-box !important;

    white-space:normal !important;

    text-align:center !important;

    line-height:1.2 !important;

    flex:none !important;

    transform:none !important;

    translate:none !important;

    scale:1 !important;

    transition:none !important;

    animation:none !important;

    overflow:visible !important;

    overflow-anchor:none !important;
  }


  /*
   * Aba ativa:
   * só desenha a seta.
   * Nenhuma mudança de width/height/padding/order.
   */
  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-cobrancas-tab-active-v5703z189c16{

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    height:74px !important;

    min-height:74px !important;

    max-height:74px !important;

    padding:
      15px
      18px
      15px
      18px
      !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;
  }


  html body #view
  > .bp-faturas-native-head-v5703z186
  > .bp-faturas-native-primary-v5703z186
  > .bp-cobrancas-tab-active-v5703z189c16::before{

    position:absolute !important;

    top:4px !important;

    left:50% !important;

    margin:0 !important;

    padding:0 !important;

    transform:translateX(-50%) !important;

    transition:none !important;

    animation:none !important;

    pointer-events:none !important;
  }


  /* ----------------------------------------------------------
   * 3. SLOT QUE RECEBE OS BLOCOS INFERIORES
   * ---------------------------------------------------------- */

  html body #view
  > .bp-cobrancas-body-slot-v5703z190{

    display:block !important;

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;

    overflow-x:hidden !important;

    overflow-anchor:none !important;

    contain:layout !important;
  }


  /* ----------------------------------------------------------
   * 4. BOTOES BRANCOS INFERIORES
   *
   * Regra independente dos 3 módulos azuis.
   * ---------------------------------------------------------- */

  html body #view
  .bp-faturas-secondary-actions-v5703z186{

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)
      !important;

    gap:12px !important;

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;

    margin:
      0
      0
      14px
      0
      !important;

    padding:0 !important;
  }


  html body #view
  .bp-faturas-secondary-actions-v5703z186
  > button,

  html body #view
  .bp-faturas-secondary-actions-v5703z186
  > a{

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    min-height:56px !important;

    height:auto !important;

    margin:0 !important;

    padding:10px 12px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    white-space:normal !important;

    box-sizing:border-box !important;
  }


  /*
   * Relatório ocupa a primeira linha inteira,
   * preservando o desenho atual aprovado.
   */
  html body #view
  .bp-faturas-secondary-actions-v5703z186
  > .bp-top-relatorio-v158k9c{

    grid-column:1 / -1 !important;
  }


  /* ----------------------------------------------------------
   * 5. PROTEÇÃO CONTRA CONTEUDO LARGO
   * ---------------------------------------------------------- */

  html body #view
  .card,

  html body #view
  table,

  html body #view
  form{

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;
  }

}


/* ==================================================================
 * BOLEPIX_COBRANCAS_MOBILE_WIDTH_LOCK_V5703Z190COBMOBILE1C6
 *
 * O CSS global mobile possui regras como:
 *
 * html.<classe-mobile> #view .head-row > .actions {
 *   grid-template-columns: repeat(2,minmax(0,1fr)) !important;
 * }
 *
 * Essa regra fazia os três módulos alternarem entre
 * meia largura e largura total.
 *
 * Aqui aumentamos a especificidade SOMENTE para Cobranças.
 * ================================================================== */

@media screen and (max-width:980px){


  /*
   * CONTAINER EXATO DOS 3 MODULOS.
   *
   * O seletor contém simultaneamente:
   * - head-row
   * - classe nativa de Faturas
   * - actions
   * - classe primary nativa
   *
   * Portanto vence os layouts mobile globais sem afetar
   * os demais menus do sistema.
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186{

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      !important;

    grid-template-rows:
      74px
      74px
      74px
      !important;

    grid-auto-columns:
      minmax(0,1fr)
      !important;

    grid-auto-flow:row !important;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    height:254px !important;
    min-height:254px !important;
    max-height:254px !important;

    flex:0 0 100% !important;
    flex-basis:100% !important;

    align-self:stretch !important;
    justify-self:stretch !important;

    gap:16px !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    transform:none !important;
    translate:none !important;
    scale:1 !important;

    transition:none !important;
    animation:none !important;
  }


  /*
   * FATURAS
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-top-fatura-v5703z87{

    grid-column:1 / -1 !important;
    grid-row:1 !important;

    order:1 !important;
  }


  /*
   * PLANOS
   *
   * Carnê também possui bp-top-planos histórica,
   * portanto excluímos explicitamente a classe do Carnê.
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-top-planos-v5703z87:not(.bp-top-carne-v5703z189carne1c1){

    grid-column:1 / -1 !important;
    grid-row:2 !important;

    order:2 !important;
  }


  /*
   * CARNE
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-top-carne-v5703z189carne1c1{

    grid-column:1 / -1 !important;
    grid-row:3 !important;

    order:3 !important;
  }


  /*
   * GEOMETRIA INALTERAVEL DOS 3.
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-top-fatura-v5703z87,

  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-top-planos-v5703z87{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;

    flex:0 0 100% !important;
    flex-basis:100% !important;

    align-self:stretch !important;
    justify-self:stretch !important;

    margin:0 !important;

    padding:
      15px
      18px
      15px
      18px
      !important;

    box-sizing:border-box !important;

    position:relative !important;

    white-space:normal !important;

    transform:none !important;
    translate:none !important;
    scale:1 !important;

    transition:none !important;
    animation:none !important;
  }


  /*
   * Nem a classe .primary do CSS global poderá
   * alterar coluna/largura.
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.primary{

    grid-column:1 / -1 !important;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }


  /*
   * Aba ativa apenas desenha a seta.
   */
  html body #view
  > .head-row.bp-faturas-native-head-v5703z186
  > .actions.bp-faturas-native-primary-v5703z186
  > button.bp-cobrancas-tab-active-v5703z189c16{

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;

    margin:0 !important;

    transform:none !important;
    transition:none !important;
    animation:none !important;
  }

}