/* Mamborê Conecta - Serviços Úteis v1.2.1 */
.mcsu-wrap{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1325px,calc(100vw - 32px))!important;
  max-width:1325px!important;
  display:grid;
  grid-template-columns:58.5% 41.5%;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:10px;
  overflow:hidden;
  font-family:inherit;
  box-shadow:0 5px 16px rgba(0,0,0,.06);
  min-height:112px;
  box-sizing:border-box;
}
.mcsu-wrap.mcsu-only{grid-template-columns:1fr}
.mcsu-section{min-width:0;height:112px;box-sizing:border-box}

/* Ônibus */
.mcsu-bus{
  display:grid;
  grid-template-columns:190px minmax(0,225px) minmax(0,225px) 135px;
  align-items:stretch;
}
.mcsu-service-head{display:flex;align-items:center;gap:10px;min-width:0}
.mcsu-bus-head{padding:14px 14px;border-right:1px solid #e5e5e5}
.mcsu-service-icon{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:0 0 40px;font-size:21px;line-height:1
}
.mcsu-bus-icon{background:#ff941f;color:#fff}
.mcsu-service-copy{min-width:0}
.mcsu-service-copy strong{display:block;font-size:14px;line-height:1.15;font-weight:800;color:#111;white-space:nowrap}
.mcsu-service-copy small{display:block;margin-top:3px;color:#555;font-size:10px;line-height:1.15;white-space:nowrap}
.mcsu-routes{display:contents}
.mcsu-route{
  min-width:0;padding:12px 14px 10px;border-right:1px solid #e5e5e5;
  display:flex;flex-direction:column;justify-content:center
}
.mcsu-route>b{
  display:block;margin:0 0 10px;padding-bottom:5px;width:max-content;max-width:100%;
  border-bottom:2px solid #ff7300;color:#f05a00;text-transform:uppercase;
  font-size:11px;line-height:1.1;white-space:nowrap
}
.mcsu-route.mcsu-green>b{color:#087a51;border-bottom-color:#087a51}
.mcsu-route-body{display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:end}
.mcsu-route-body>div+div{border-left:1px solid #e5e5e5;padding-left:12px}
.mcsu-route-body span{display:block;color:#555;font-size:10px;line-height:1.15;margin-bottom:4px;white-space:nowrap}
.mcsu-route-body strong{display:flex;align-items:center;gap:6px;color:#f05a00;font-size:25px;line-height:1;font-weight:800;white-space:nowrap}
.mcsu-route.mcsu-green .mcsu-route-body strong{color:#087a51}
.mcsu-countdown strong{font-size:13px;line-height:1.1}
.mcsu-clock{font-style:normal;font-size:18px;font-weight:400}
.mcsu-outline{
  margin:12px;border:1px solid #ff7b1a;background:#fff;color:#f15a00;border-radius:9px;padding:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-weight:700;font-size:11px;line-height:1.1;cursor:pointer;box-sizing:border-box
}
.mcsu-calendar-icon{display:block;font-size:20px;line-height:1;color:#ff7300}

/* Farmácia */
.mcsu-pharmacy{
  display:grid;grid-template-columns:minmax(0,1fr) 150px;border-left:1px solid #e5e5e5;align-items:stretch
}
.mcsu-ph-main{min-width:0;padding:12px 16px 10px;display:flex;flex-direction:column;justify-content:center}
.mcsu-ph-head{gap:9px;margin-bottom:8px}
.mcsu-ph-icon{background:#eef8f3;color:#078451;font-size:25px;font-weight:800}
.mcsu-ph-line{display:flex;align-items:center;gap:8px;padding-left:50px;min-width:0}
.mcsu-ph-line h3{margin:0;color:#087a51;font-size:19px;line-height:1;font-weight:800;white-space:nowrap}
.mcsu-badge{display:inline-block;background:#087a51;color:#fff;border-radius:999px;padding:4px 8px;font-size:9px;line-height:1;font-weight:700;white-space:nowrap}
.mcsu-ph-date{padding-left:50px;margin-top:7px;display:flex;align-items:center;gap:6px;color:#333;font-size:10px;line-height:1;white-space:nowrap}
.mcsu-date-icon{color:#087a51;font-size:13px;line-height:1}
.mcsu-ph-action{padding:10px 12px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}
.mcsu-logo{width:62px;height:62px;margin:0 auto;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;padding:7px;box-sizing:border-box;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.mcsu-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.mcsu-primary{min-height:29px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:6px 10px;border-radius:6px;background:#087a51;color:#fff!important;text-decoration:none!important;font-size:10px;line-height:1;font-weight:700;white-space:nowrap}
.mcsu-empty{color:#666;font-size:11px}.mcsu-ph-empty{margin:5px 0 0 50px}

/* Modal */
.mcsu-modal{display:none;position:fixed;inset:0;z-index:999999}.mcsu-modal.is-open{display:block}
.mcsu-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mcsu-modal-card{position:relative;z-index:2;background:#fff;width:min(760px,calc(100% - 28px));max-height:82vh;overflow:auto;margin:8vh auto;border-radius:18px;padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.mcsu-close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:32px;cursor:pointer;color:#555}
.mcsu-modal-card h2{margin:0}.mcsu-modal-route{border-top:1px solid #eee;margin-top:22px;padding-top:16px}
.mcsu-modal-route h3{font-size:16px;margin:0 0 10px;color:#ef5a00}.mcsu-modal-row{display:flex;justify-content:space-between;gap:20px;padding:9px 0}.mcsu-modal-row span{color:#555}
body.mcsu-no-scroll{overflow:hidden}

@media(max-width:1100px){
  .mcsu-wrap{left:0;transform:none;width:100%!important;max-width:100%!important;grid-template-columns:1fr}
  .mcsu-section{height:auto}
  .mcsu-bus{grid-template-columns:190px 1fr 1fr 125px}
  .mcsu-pharmacy{border-left:0;border-top:1px solid #e5e5e5;grid-template-columns:1fr 150px}
}
@media(max-width:760px){
  .mcsu-bus{grid-template-columns:1fr 1fr}
  .mcsu-bus-head{grid-column:1/-1;border-right:0;border-bottom:1px solid #e5e5e5}
  .mcsu-route{border-right:0}.mcsu-route:nth-of-type(2){border-left:1px solid #e5e5e5}
  .mcsu-outline{grid-column:1/-1;min-height:44px;flex-direction:row}
}
@media(max-width:560px){
  .mcsu-bus{grid-template-columns:1fr}.mcsu-route:nth-of-type(2){border-left:0;border-top:1px solid #e5e5e5}
  .mcsu-pharmacy{grid-template-columns:1fr}.mcsu-ph-action{flex-direction:row;gap:10px;align-items:center;padding:10px 16px}
  .mcsu-logo{margin:0;width:52px;height:52px}.mcsu-primary{margin-left:auto;padding:9px 14px}
  .mcsu-ph-line,.mcsu-ph-date{padding-left:50px}
}







/* v1.2.6 — não altera o desenho interno aprovado.
   Apenas permite que o JS alinhe o painel às margens reais da Home. */
@media (min-width:1101px){
  .mcsu-wrap[data-mcsu-root="1"]{
    box-sizing:border-box !important;
    max-width:none !important;
  }
}

/* Logo quadrada, sem moldura circular. */
.mcsu-logo{
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.mcsu-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:0 !important;
}


/* v1.2.7 — somente distribuição horizontal.
   Mantém exatamente a composição aprovada; elimina colunas fixas que deixavam
   um grande vazio quando o painel passava a usar toda a largura da Home. */
@media (min-width:1101px){

  /* Proporção do mockup: ônibus ~62,5% / farmácia ~37,5%. */
  .mcsu-wrap{
    grid-template-columns:62.5% 37.5% !important;
  }

  /* Dentro da área dos ônibus:
     título 30% | ida 28% | volta 27% | botão 15%.
     Todas as partes passam a ocupar a largura disponível. */
  .mcsu-bus{
    grid-template-columns:30% 28% 27% 15% !important;
    width:100% !important;
  }

  /* Farmácia: informações ~70% | logo/botão ~30%. */
  .mcsu-pharmacy{
    grid-template-columns:70% 30% !important;
    width:100% !important;
  }

  /* O conteúdo pode respirar dentro das novas colunas sem alterar o desenho. */
  .mcsu-bus-head{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .mcsu-route{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .mcsu-outline{
    margin:12px 14px !important;
  }
  .mcsu-ph-main{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .mcsu-ph-action{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* =========================================================
   v1.2.8 — distribuição interna conforme mockup aprovado
   NÃO altera largura externa, altura geral ou ordem dos blocos.
   Apenas organiza e centraliza visualmente o conteúdo interno.
   ========================================================= */

@media (min-width:1101px){

  /* Mantém a divisão geral, mas com melhor equilíbrio visual. */
  .mcsu-wrap{
    grid-template-columns:64% 36% !important;
  }

  /* Ônibus: título | ida | volta | botão */
  .mcsu-bus{
    grid-template-columns:28% 25% 25% 22% !important;
    align-items:stretch !important;
  }

  /* Bloco "Próximos ônibus" centralizado verticalmente e melhor distribuído. */
  .mcsu-bus-head{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    padding:0 22px !important;
  }

  .mcsu-bus-head .mcsu-service-icon{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    font-size:22px !important;
  }

  .mcsu-bus-head .mcsu-service-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  .mcsu-bus-head .mcsu-service-copy strong{
    font-size:14px !important;
    line-height:1.15 !important;
  }

  .mcsu-bus-head .mcsu-service-copy small{
    margin-top:4px !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }

  /* Cada rota passa a usar a área inteira da coluna,
     com o conteúdo centralizado verticalmente. */
  .mcsu-route{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:0 18px !important;
  }

  .mcsu-route > b{
    margin:0 0 10px !important;
    padding-bottom:5px !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }

  .mcsu-route-body{
    grid-template-columns:minmax(0,1fr) minmax(64px,.72fr) !important;
    align-items:end !important;
    column-gap:12px !important;
  }

  .mcsu-route-body > div + div{
    padding-left:12px !important;
  }

  .mcsu-route-body span{
    margin-bottom:4px !important;
    font-size:9px !important;
  }

  .mcsu-route-body strong{
    font-size:21px !important;
  }

  .mcsu-countdown strong{
    font-size:12px !important;
  }

  /* Botão de horários centralizado dentro da própria coluna. */
  .mcsu-outline{
    width:74% !important;
    max-width:108px !important;
    min-width:84px !important;
    height:66px !important;
    margin:auto !important;
    padding:8px 6px !important;
    align-self:center !important;
    justify-self:center !important;
  }

  /* Farmácia: conteúdo principal | logo + botão */
  .mcsu-pharmacy{
    grid-template-columns:68% 32% !important;
    align-items:stretch !important;
  }

  /* Informações da farmácia distribuídas verticalmente,
     sem ficarem coladas na margem esquerda. */
  .mcsu-ph-main{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:0 24px !important;
  }

  .mcsu-ph-head{
    margin:0 0 8px !important;
    gap:12px !important;
  }

  .mcsu-ph-head .mcsu-service-icon{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }

  .mcsu-ph-head .mcsu-service-copy strong{
    font-size:13px !important;
  }

  .mcsu-ph-head .mcsu-service-copy small{
    margin-top:3px !important;
    font-size:9px !important;
  }

  .mcsu-ph-line{
    padding-left:50px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:1px !important;
  }

  .mcsu-ph-line h3{
    font-size:18px !important;
    line-height:1 !important;
  }

  .mcsu-badge{
    padding:4px 9px !important;
    font-size:8px !important;
  }

  .mcsu-ph-date{
    padding-left:50px !important;
    margin-top:8px !important;
    font-size:9px !important;
    gap:7px !important;
  }

  /* Logo quadrada acima, botão abaixo, ambos centralizados. */
  .mcsu-ph-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:8px 16px !important;
  }

  .mcsu-logo{
    width:56px !important;
    height:56px !important;
    margin:0 auto !important;
  }

  .mcsu-primary{
    width:100% !important;
    max-width:118px !important;
    min-height:28px !important;
    margin:0 auto !important;
    padding:6px 10px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   v1.2.9 — correção visual para reproduzir o mockup aprovado.
   Mantém largura externa e ordem dos blocos.
   Aumenta altura, tipografia, ícones e espaçamento interno.
   ========================================================= */

@media (min-width:1101px){

  .mcsu-wrap{
    min-height:132px !important;
    grid-template-columns:64% 36% !important;
  }

  .mcsu-section{
    height:132px !important;
  }

  /* Ônibus */
  .mcsu-bus{
    grid-template-columns:28% 25% 25% 22% !important;
  }

  .mcsu-bus-head{
    gap:16px !important;
    padding:0 26px !important;
  }

  .mcsu-bus-head .mcsu-service-icon{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    font-size:25px !important;
  }

  .mcsu-bus-head .mcsu-service-copy strong{
    font-size:17px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
  }

  .mcsu-bus-head .mcsu-service-copy small{
    margin-top:5px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .mcsu-route{
    padding:0 22px !important;
  }

  .mcsu-route > b{
    margin:0 0 13px !important;
    padding-bottom:6px !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  .mcsu-route-body{
    grid-template-columns:minmax(0,1fr) minmax(78px,.72fr) !important;
    column-gap:14px !important;
  }

  .mcsu-route-body > div + div{
    padding-left:14px !important;
  }

  .mcsu-route-body span{
    margin-bottom:5px !important;
    font-size:11px !important;
  }

  .mcsu-route-body strong{
    gap:7px !important;
    font-size:29px !important;
  }

  .mcsu-clock{
    font-size:20px !important;
  }

  .mcsu-countdown strong{
    font-size:16px !important;
  }

  .mcsu-outline{
    width:78% !important;
    max-width:126px !important;
    min-width:108px !important;
    height:96px !important;
    margin:auto !important;
    padding:10px 8px !important;
    border-radius:10px !important;
    gap:6px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  .mcsu-calendar-icon{
    font-size:22px !important;
  }

  /* Farmácia */
  .mcsu-pharmacy{
    grid-template-columns:69% 31% !important;
  }

  .mcsu-ph-main{
    padding:0 28px !important;
  }

  .mcsu-ph-head{
    margin:0 0 10px !important;
    gap:14px !important;
  }

  .mcsu-ph-head .mcsu-service-icon{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
    font-size:27px !important;
  }

  .mcsu-ph-head .mcsu-service-copy strong{
    font-size:16px !important;
    line-height:1.15 !important;
  }

  .mcsu-ph-head .mcsu-service-copy small{
    margin-top:4px !important;
    font-size:11px !important;
  }

  .mcsu-ph-line{
    padding-left:60px !important;
    gap:12px !important;
    margin-top:2px !important;
  }

  .mcsu-ph-line h3{
    font-size:24px !important;
    line-height:1 !important;
  }

  .mcsu-badge{
    padding:5px 10px !important;
    font-size:10px !important;
  }

  .mcsu-ph-date{
    padding-left:60px !important;
    margin-top:10px !important;
    gap:8px !important;
    font-size:11px !important;
  }

  .mcsu-date-icon{
    font-size:14px !important;
  }

  .mcsu-ph-action{
    gap:12px !important;
    padding:10px 22px !important;
  }

  .mcsu-logo{
    width:68px !important;
    height:68px !important;
  }

  .mcsu-primary{
    width:100% !important;
    max-width:146px !important;
    min-height:36px !important;
    padding:8px 12px !important;
    font-size:11px !important;
    border-radius:7px !important;
  }
}