/* ======= BASE ======= */
.calendario {
  padding: 80px 60px;
  color: white;
  background: black;
}

.calendario h2 {
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: bold;
}

.calendario h2 span {
  border-left: 4px solid #e11b22;
  padding-left: 10px;
}

.calendario-wrapper {
  margin-top: 20px;
  background-color: #000;
  color: white;
  padding: 40px 20px;
  overflow: visible;
}

/* Tabela (desktop por defeito) */
.calendario-wrapper .schedule-table table {
  table-layout: fixed;                /* desktop: respeita larguras */
  background-color: #111 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  color: white;
  position: relative;
  overflow: visible;
  z-index: 0;
}

.calendario-wrapper .schedule-table thead tr {
  background: #e11b22;
}

.calendario-wrapper .schedule-table thead th {
  padding: 20px;
  color: white;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid #333;
}

/* Larguras das colunas (desktop) */
.calendario-wrapper .schedule-table thead th:first-child,
.calendario-wrapper .schedule-table tbody td.day {
  width: 120px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;            /* … quando não couber */
}

.calendario-wrapper .schedule-table tbody td:not(.day) {
  width: 180px;
  max-width: 180px;
}

/* Células base */
.calendario-wrapper .schedule-table tbody td {
  height: 100px;
  max-height: 100px;
  vertical-align: middle;
  border: 1px solid #333;
  font-weight: 500;
  padding: 15px;
  text-align: center;
  background-color: #111;
  color: white;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Células vazias — mais baixas (desktop) */
.calendario-wrapper .schedule-table tbody td:empty {
  height: 36px !important;
  max-height: 36px !important;
  padding: 4px !important;
}

/* Coluna dos dias */
.calendario-wrapper .schedule-table tbody td.day {
  font-size: 20px;
  font-weight: bold;
  background: #111;
  color: white;
}

/* Células com conteúdo */
.calendario-wrapper .schedule-table tbody td.active {
  background-color: #222;
  z-index: 2;
}

/* Conteúdo interno e texto */
.calendario-wrapper .schedule-table tbody td .content {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendario-wrapper .schedule-table tbody td.active h4 {
  font-weight: 700;
  color: white;
  font-size: 18px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendario-wrapper .schedule-table tbody td.active p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover (desktop) */
.calendario-wrapper .schedule-table tbody td .hover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 9999;
  background: #e11b22;
  border-radius: 0.25rem;
  padding: 15px 10px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  color: white;
  white-space: normal;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.calendario-wrapper .schedule-table tbody td .hover h4,
.calendario-wrapper .schedule-table tbody td .hover p,
.calendario-wrapper .schedule-table tbody td .hover span {
  color: white;
  margin-bottom: 5px;
}

.calendario-wrapper .schedule-table tbody td.active:hover .hover {
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  opacity: 1;
}

/* ======= RESPONSIVO (≤1199px) ======= */
@media (max-width: 1199px) {
 
  .calendario{ padding:24px 0px; }

   .calendario h2 {
    display: inline-block;          /* não ocupa 100% */
    margin: 0 0 24px 16px;          /* <-- "margin-left" aqui */
    font-size: 22px;
  }

  .calendario h2 span {
    border-left-width: 3px;
    padding-left: 8px;
  }
  .calendario-wrapper { padding: 12px 0; }

  /* tirar gutters do Bootstrap dentro do wrapper */
  .calendario-wrapper .container,
  .calendario-wrapper .row,
  .calendario-wrapper .col-md-12 {
    padding-left: 0; padding-right: 0;
    margin-left: 0;  margin-right: 0;
  }

  /* mobile/tablet: tabela fluida e sem hover */
  .calendario-wrapper .schedule-table { 
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendario-wrapper .schedule-table table {
    table-layout: auto !important;   /* permite larguras por célula */
  }

  /* 1ª coluna (dia) mais estreita e legível */
  .calendario-wrapper .schedule-table thead th:first-child,
  .calendario-wrapper .schedule-table tbody td.day {
    width: 90px;
    max-width: 90px;
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* restantes células: texto pode quebrar */
  .calendario-wrapper .schedule-table tbody td {
    width: auto; max-width: none;
    height: auto; max-height: none;
    padding: 8px 10px;
    font-size: 13px;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
  }

  /* células vazias — mais compactas no mobile */
  .calendario-wrapper .schedule-table tbody td:empty {
    height: 28px !important;
    max-height: 28px !important;
    padding: 2px !important;
  }

  /* só no mobile: as vazias (não-dia) ficam MAIS estreitas */
  .calendario-wrapper .schedule-table tbody td:not(.day):empty {
    width: 80px !important;
    max-width: 80px !important;
    padding: 4px 6px !important;
  }

  .calendario-wrapper .schedule-table tbody td.active h4 {
    font-size: 13px;
    margin-bottom: 4px;
  }
  .calendario-wrapper .schedule-table tbody td.active p {
    font-size: 12px;
    margin: 0;
    color: #bbb;
  }

  /* hover em toque não é útil */
  .calendario-wrapper .schedule-table tbody td .hover { display: none; }
}

/* ======= EXTRA-PEQUENO (≤400px) ======= */
@media (max-width: 400px) {
  .calendario-wrapper .schedule-table tbody td {
    padding: 6px;
    font-size: 12px;
  }
  .calendario-wrapper .schedule-table tbody td.day {
    font-size: 12px;
    padding: 6px;
    width: 80px;
    max-width: 80px;
  }
  .calendario-wrapper .schedule-table tbody td.active h4 { font-size: 12px; }
  .calendario-wrapper .schedule-table tbody td.active p  { font-size: 11px; }
}
/* 576–1199px: container continua full-width */
@media (min-width: 576px) and (max-width: 1199px){
  .calendario-wrapper .container{
    max-width: 100% !important;
    padding-left: 0; 
    padding-right: 0;
  }
  .calendario-wrapper { padding-left: 0; padding-right: 0; }
  .calendario-wrapper .schedule-table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendario-wrapper .schedule-table table{
    width: 100% !important;
    margin: 0;
    table-layout: auto !important; /* já usas no mobile/tablet */
  }
}

/* Tira a borda direita da última coluna (thead e tbody) */
.calendario-wrapper .schedule-table thead th:last-child,
.calendario-wrapper .schedule-table tbody td:last-child{
  border-right: 0;
}
/* ==== FIX: remover scroll horizontal apenas entre 401–425px ==== */
@media (min-width: 401px) and (max-width: 425px) {
  /* Garantir que nada passa os 100% */
  .calendario,
  .calendario-wrapper,
  .calendario-wrapper .container,
  .calendario-wrapper .row,
  .calendario-wrapper .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Tabela não soma larguras com bordas/padding */
  .calendario-wrapper .schedule-table {
    overflow-x: hidden !important;           /* remove a barra nesse range */
  }
  .calendario-wrapper .schedule-table table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-sizing: border-box;
  }

  /* Evita +1px de overflow por causa das bordas */
  .calendario-wrapper .schedule-table thead th,
  .calendario-wrapper .schedule-table tbody td {
    box-sizing: border-box;
    border-right-width: 0 !important;
    word-break: break-word;       /* quebra palavras longas */
    overflow-wrap: anywhere;
  }

  /* Primeira coluna um pouco mais estreita nesse range */
  .calendario-wrapper .schedule-table thead th:first-child,
  .calendario-wrapper .schedule-table tbody td.day {
    width: 82px !important;       /* de 80–90 para 82 para dar folga */
    max-width: 82px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Células vazias bem compactas */
  .calendario-wrapper .schedule-table tbody td:empty {
    width: 72px !important;       /* dá folga horizontal */
    max-width: 72px !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 2px !important;
  }

  /* Rede de segurança no viewport */
  html, body {
    overflow-x: hidden !important;
  }
}