:root{
      --ink:#0f2f35;
      --muted:#62757a;
      --brand:#0a5964;     /* azul/verde do Atlantis */
      --brand2:#2BA1BD;    /* azul do header das tabelas antigas */
      --accent:#ff6a2a;    /* laranja CTA (se quiser usar depois) */
      --bg:#ffffff;
      --soft:#f5f7f8;
      --line:#e3eaec;
      --line2:#eef3f4;
      --shadow: 0 12px 24px rgba(0,0,0,.06);
      --radius: 14px;
      --radius2: 12px;
    }


    /* usar Barlow Condensed em destaques/labels */
    .horarios-head h1,
    .chip-label,
    .resultado-titulo {
      font-family: 'Barlow Condensed', Arial, sans-serif;
      font-weight:700;
      letter-spacing: .2px;
    }
    /* Container para encaixar na área branca do seu layout */
    .horarios-wrap{
      max-width: 1280px;
      margin: 0 auto;
      padding: 26px 16px 50px;
    }

    .horarios-head{
      margin-bottom: 14px;
    }
    .horarios-head h1{
      margin:0 0 10px;
      font-size: 36px;           /* maior título */
      font-weight: 700;
      color: var(--brand);
      letter-spacing: .2px;
    }
    .horarios-head p{
      margin:0;
      color: var(--muted);
      line-height: 1.5;
      max-width: 820px;
      font-size: 15px;
    }

    /* NOVO: visual mais simples por interesse (categorias grandes + cards) */
    .categories{
      display:flex;
      gap:14px;
      margin: 8px 0 18px;
      overflow: initial;

      @media (max-width:768px){
        overflow-x:auto;
      }
    }

    .category-card{
      flex:1 1 0;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:flex-start;
      padding:20px;
      border-radius:12px;
      background:#fff;
      border:1px solid var(--line);
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      min-height:92px;
      min-width: 150px;
    }

    .category-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 24px rgba(10,89,100,0.06); }
    .category-card small{ color:var(--muted); font-size:14px; }
    .category-card h3{
      margin:0;
      font-family:'Barlow Condensed', Arial, sans-serif;
      font-size:22px;
      font-weight:700;
      color:var(--brand);
      text-transform:uppercase;
      letter-spacing: .6px;
    }
    .category-card.active{
      /* fundo sólido sem gradiente */
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      box-shadow: 0 14px 28px rgba(10,89,100,0.12);
    }
    /* garante que título e subtítulo fiquem brancos quando ativo */
    .category-card.active h3{
      color: #fff;
    }
    .category-card.active small{
      color: rgba(255,255,255,0.9);
    }
    .controls{
      display:flex;
      gap:12px;
      margin: 18px 0;
      align-items:center;
      flex-wrap:wrap;
      background:#fff;
      border:1px solid var(--line);
      border-left:4px solid var(--brand); /* barra de destaque à esquerda */
      padding:12px 14px;
      border-radius:12px;
      box-shadow: 0 10px 30px rgba(10,89,100,0.07);
      position:relative;
      z-index:1;
    }
    .group-list{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:100%; padding-bottom:2px; }
    .group-btn{
      background:#fff;
      border:1px solid rgba(10,89,100,0.06);
      padding:10px 14px;
      border-radius:999px; /* pills */
      cursor:pointer;
      font-weight:800;
      text-transform:uppercase;
      font-size:14px;
      color:var(--brand);
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      white-space:nowrap;
    }
    .group-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(10,89,100,0.06); }
    .group-btn.active{
      background:var(--brand);
      color:#fff;
      border-color:transparent;
      box-shadow:0 8px 22px rgba(10,89,100,0.18);
    }

    /* garantir bom espaçamento e legibilidade do select ao lado */
    .select-day{
      margin-left:auto;
      display:flex;
      gap:12px;
      align-items:center;
      /* pequena elevação para destacar do fundo */
      padding:6px;
      border-radius:10px;
    }
    /* label ao lado do select (mais proeminente) */
    .select-day label{
      font-weight:800;
      color:var(--muted);
      font-size:14px;
      margin-right:6px;
      display:inline-block;
      white-space:nowrap;
    }
    /* select destacado */
    .select-day select{
      min-width:170px;
      padding:10px 14px;
      border-radius:10px;
      border:1px solid rgba(10,89,100,0.12);
      /* fundo + ícone SVG de seta à direita */
      background-image:
        linear-gradient(180deg,#ffffff,#fbfefe),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a5964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat, no-repeat;
      background-position: center, calc(100% - 14px) center;
      background-size: auto, 12px;
      color:var(--brand);
      font-weight:800;
      box-shadow: 0 6px 18px rgba(10,89,100,0.06);
      transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
      -webkit-appearance: none;
      appearance: none;
      padding-right: 44px; /* espaço para a seta */
    }
    .select-day select:focus{
      outline:none;
      border-color: var(--brand);
      box-shadow: 0 10px 30px rgba(10,89,100,0.18);
      transform: translateY(-1px);
    }
    /* garante responsividade */
    @media (max-width:520px){
      .select-day select{ min-width:120px; padding:8px 10px; font-size:14px; }
    }

    /* cards: já existente, apenas reforço espaçamento para o novo layout */
    .lista{
      padding: 12px 8px 8px;
      display:grid;
      gap:14px;
      grid-template-columns: 1fr;
      /* trocar 1fr por auto: cada ROW terá altura do maior item nessa mesma ROW */
      grid-auto-rows: auto;
      align-items: start; /* não forçar stretch global */
    }
    @media (min-width: 520px){
      .lista{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 900px){
      .lista{ grid-template-columns: repeat(2, 1fr); }
    }

    /* garante que os cards tenham layout em coluna, mas não forcem altura global */
    .item{
      display:flex;
      flex-direction:column;          /* título em cima, conteúdo abaixo */
      justify-content:space-between;  /* empurra conteúdo para ocupar o card */
      gap:12px;
      padding: 14px;
      box-sizing:border-box;
      align-self: stretch;            /* estica apenas ao tamanho da linha atual */
      border: 1px solid #e8eff1;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(9,44,46,0.04);
      transition: transform .12s ease, box-shadow .12s ease;
    }

    /* quando estreito, empilha conteúdo do card */
    @media (max-width: 520px){
      .item{ flex-direction:column; align-items:flex-start; }
      .item-hora{ width:100%; margin-top:10px; text-align:center; }
    }

    /* Resultado */
    .horarios-resultado{
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
      overflow:hidden;
      box-shadow: var(--shadow);
    }

    .resultado-top{
      padding: 20px 18px 14px; /* um pouco mais de espaço para destacar */
      border-bottom: 1px solid var(--line2);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .resultado-titulo{
      font-weight: 700;
      color: var(--ink);
      font-size: 22px;      /* aumentado (era 18px) */
      line-height:1.15;
      letter-spacing: .3px;
    }
    .resultado-info{
      color: #405a5c;       /* tom ligeiramente mais escuro */
      font-size: 16px;      /* aumentado (era 15px) */
      font-weight: 600;     /* leve destaque */
      margin-top: 2px;
    }

    /* Card visual (mantém sombreamento) - sem sobrescrever direção do flex */
    .item{
      border: 1px solid #e8eff1;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(9,44,46,0.04);
      transition: transform .12s ease, box-shadow .12s ease;
    }

    /* hover leve para realçar o card */
    .item:hover{
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(9,44,46,0.08);
    }

    /* Tipografia dos itens maior */
    .item-nome{
      font-weight: 700;
      color: #000;
      font-size: 28px;        /* maior */
      white-space:normal;     /* permite quebra de linha em títulos longos */
      overflow:visible;
      text-overflow:initial;
      max-width: 100%;
    }

    .item-detalhe{
      color: var(--muted);
      font-size: 16px;        /* maior */
      line-height: 1.3;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 620px;
    }

    .item-hora{
      padding: 10px 12px;     /* mais destaque */
      border-radius: 10px;
      background: var(--brand);
      color:#fff;
      white-space:nowrap;
      font-size: 18px;        /* maior */
    }

    .vazio{
      padding: 16px;
      color: var(--muted);
      background:#fbfcfc;
      border-top:1px dashed #e8eff1;
      text-align:center;
      font-size: 13px;
    }

    .obs{
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }
    .obs b{ color: var(--ink); }

    /* Desktop: 3 colunas nos filtros */
    @media (min-width: 900px){
      .horarios-filtros{
        grid-template-columns: 1fr 1fr 1fr;
        align-items:start;
      }
      .resultado-titulo{ font-size: 25px; }
    }

    /* Mobile: cards mais enxutos */
    @media (max-width: 520px){
      .horarios-head h1{ font-size: 26px; }
      .item{ flex-direction:column; align-items:flex-start; }
      .item-hora{ width:100%; text-align:center; margin-top:10px; }
    }

    /* Responsividade para 2 colunas em tablets */
    @media (min-width: 520px){
      .lista{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Responsividade para 3 colunas em desktop */
    @media (min-width: 900px){
      .lista{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* permite quebra e múltiplas linhas nos detalhes (evita corte) */
    .item-left{ flex: 1 1 auto; min-width:0; }
    .item-detalhe{
      color: var(--muted);
      font-size: 16px;
      line-height: 1.45;
      white-space: normal;        /* allow wrapping */
      overflow: visible;
      text-overflow: initial;
      max-width: none;
    }

    /* lista compacta de dias/horários */
    .schedule-list{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:6px;
      font-size:14px;
      color:var(--muted);
    }
    .schedule-list .day-line{ display:flex; gap:12px; align-items:flex-start; }
    .day-bullet{ color:var(--brand); flex:0 0 20px; }
    .day-text{ flex:1 1 auto; word-break:break-word; }

    /* esconder bloco extra e botão de toggle */
    .more-hidden{ display:none; }
    .more-toggle{
      margin-top:6px;
      display:inline-block;
      color:var(--brand);
      font-weight:700;
      cursor:pointer;
      font-size:13px;
    }

    /* remove o badge único (mantive a classe para compatibilidade) */
    .item-hora{ display:none; }

    /* chips de horário (pequenos) */
    .time-chip{
      display:inline-block;
      background:#eef7f7;
      border:1px solid rgba(10,89,100,0.06);
      padding:6px 8px;
      border-radius:8px;
      font-size:18px;
      white-space:nowrap;
      line-height: 17px;
    }

    /* container de tempos: usar flex-wrap para manter alinhamento à esquerda e permitir quebra */
    .times-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:5px;
      align-items:flex-start;
      justify-content:flex-start; /* evita centralização quando poucas chips */
      padding-bottom: 8px;
      border-bottom: var(--brand2) dotted 1px;
      margin-bottom: 15px;
    }

    /* garantir dia-line com label fixa e conteúdo fluido */
    .day-line{ display:flex; gap:12px; align-items:flex-start; }
    .day-line .day-label{ flex:0 0 auto; font-weight:800; color:var(--muted); margin-right:8px; }
    .day-line .times-wrap{ flex:1 1 auto; }