/* ============================================================
   Calendário de Obrigações v3 — BEM + Mobile drawer
   ============================================================ */

/* --- Tokens --- */
:root {
    --cal-fundo:           #f0f2f5;
    --cal-celula-fundo:     var(--base-ultra-light);
    --cal-celula-radius:   10px;
    --cal-texto:             var(--base);
    --cal-texto-fraco:     #666;
    --cal-hoje-bg:         #1a3a5c;
    --cal-hoje-texto:      #fff;
    --cal-titulo-cor:      var(--base);
    --cal-nav-bg:          #fff;
    --cal-nav-hover-bg:    #1a6b8a;
    --cal-nav-hover-cor:   #fff;
    --cal-evento-radius:   5px;
    --cal-sombra:          0 2px 12px rgba(0,0,0,.08);
    --cal-fonte:          var(--text-font-family);
    --cal-drawer-bg:       #fff;
    --cal-drawer-radius:   16px 16px 0 0;
    --cal-drawer-sombra:   0 -4px 24px rgba(0,0,0,.15);
    --cal-backdrop-bg:     rgba(0,0,0,.4);
    --cal-transition:      .25s ease;
}

/* ============================================================
   Bloco: .calendario
   ============================================================ */
.calendario {
  font-family:  var(--cal-fonte);
color:        var(--cal-texto);
 
    border-radius: 16px;

    margin:       0 auto;
    position:     relative;
}

.calendario--a-carregar::after {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    rgba(240,242,245,.75);
    border-radius: inherit;
    z-index:       10;
}

/* ============================================================
   __header
   ============================================================ */
.calendario__header {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             24px;
    margin-bottom:   28px;
}

.calendario__titulo {
    font-size:   var(--text-m);
    font-weight: 700;
    color:       var(--base);
    margin:      0;
    min-width:   160px;
    text-align:  center;
}

/* ============================================================
   __nav
   ============================================================ */
.calendario__icone-seta--dir {
    transform: rotate(180deg);}

   .calendario__nav {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    background:      #E6EBEC;
    border:          none;
   border-radius: calc(var(--radius-m) * 2);
    font-size:       1.4rem;
    color:           var(--cal-titulo-cor);
    cursor:          pointer;
    box-shadow:      var(--cal-sombra);
    transition:      background var(--cal-transition), color var(--cal-transition), transform .15s;
    line-height:     1;
    flex-shrink:     0;
}

.calendario__nav:hover,
.calendario__nav:focus-visible {
   border:1px solid var(--base);
    transform:  scale(1.08);
    outline:    none;
}

/* ============================================================
   __corpo
   ============================================================ */
.calendario__corpo {
    display:               grid;
    grid-template-columns: 200px 1fr;
    gap:                   20px;
    align-items:           start;
}

/* ============================================================
   __legenda
   ============================================================ */


.calendario__legenda__titulo {
    font-size:      var(--text-m);
    font-weight:    700;
    color:          var(--base);
    margin:         0 0 14px;
}

.calendario__legenda__lista {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    background: var(--base-ultra-light);
    padding: var(--space-s);
    gap: var(--space-m);
    border-radius:20px;
}

.calendario__legenda__item {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   var(--text-s);
    font-weight:500;
}

.calendario__legenda__dot {
    width:         14px;
    height:        20px;
    border-radius: calc(var(--radius-m) * 2);
    flex-shrink:   0;
}

.calendario__legenda__nome {
    line-height: 1.3;
}

/* ============================================================
   __grelha
   ============================================================ */
.calendario__grelha {
    min-width: 0;
}

/* ============================================================
   __semana
   ============================================================ */
.calendario__semana {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   6px;
    margin-bottom:         6px;
}

.calendario__semana__dia {
   font-size:     var(--text-s);
    font-weight:    700;
    color:          var(--cal-texto);
    padding:        0 6px 6px;
}

.calendario__semana__dia--longo { display: inline; }
.calendario__semana__dia--curto { display: none;   }

/* ============================================================
   __dias  (grelha)
   ============================================================ */
.calendario__dias {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   6px;
}

/* ============================================================
   __dia
   ============================================================ */
.calendario__dia {
    background:    var(--cal-celula-fundo);
    border-radius: var(--cal-celula-radius);
    min-height:    110px;
    padding:       10px 8px 8px;
    transition:    box-shadow var(--cal-transition);
    overflow:      hidden;
}

.calendario__dia:hover {
    box-shadow: var(--cal-sombra);
}

.calendario__dia--vazio {
    background:    transparent;
    box-shadow:    none !important;
    pointer-events: none;
}

.calendario__dia--hoje .calendario__dia__numero {
    background:    var(--cal-hoje-bg);
    color:         var(--cal-hoje-texto);
    border-radius: 50%;
    width:         26px;
    height:        26px;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
}

/* ============================================================
   __dia__numero
   ============================================================ */
.calendario__dia__numero {
    display:       block;
    font-size:     .9rem;
    font-weight:   700;
    margin-bottom: 6px;
    line-height:   1;
}

/* ============================================================
   __eventos  (desktop — lista de etiquetas)
   ============================================================ */
.calendario__eventos {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.calendario__evento {
    display:         block;
    padding:         4px 8px;
    border-radius:   var(--cal-evento-radius);
    font-size:       .72rem;
    font-weight:     500;
    color:           #fff;
    text-decoration: none;
    line-height:     1.35;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    transition:      opacity .15s, transform .15s;
}

.calendario__evento:hover {
    opacity:    .85;
    transform:  translateX(2px);
    white-space: normal;
      color:var(--white);
}

/* ============================================================
   __pontos  (mobile — bolinhas coloridas)
   Escondidos por defeito; só visíveis em mobile via media query
   ============================================================ */
.calendario__pontos {
    display: none; /* activado em mobile */
    gap:     4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.calendario__ponto {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

/* ============================================================
   __drawer  (painel mobile que desliza de baixo)
   ============================================================ */
.calendario__drawer {
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    background:    var(--cal-drawer-bg);
    border-radius: var(--cal-drawer-radius);
    box-shadow:    var(--cal-drawer-sombra);
    z-index:       1000;
    transform:     translateY(100%);
    transition:    transform var(--cal-transition);
    max-height:    70vh;
    overflow-y:    auto;
    /* Escondido por defeito em desktop */
    display:       none;
}

.calendario__drawer--aberto {
    transform: translateY(0);
}

.calendario__drawer__conteudo {
    padding: 20px 20px 32px;
}

.calendario__drawer__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
}

.calendario__drawer__data {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--cal-titulo-cor);
}

.calendario__drawer__fechar {
    background:    none;
    border:        none;
    font-size:     1.1rem;
    cursor:        pointer;
    color:         var(--cal-texto-fraco);
    padding:       4px 8px;
    border-radius: 50%;
    transition:    background var(--cal-transition);
    line-height:   1;
    text-decoration:none !important;
}

.calendario__drawer__fechar:hover {
    background: var(--cal-celula-fundo);
}

.calendario__drawer__lista {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.calendario__drawer__item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 14px;
    border-radius: 8px;
    background:    var(--cal-celula-fundo);
}

.calendario__drawer__cor {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.calendario__drawer__info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    line-height:1.3em;
}

.calendario__drawer__tip {
    font-size:  .7rem;
    color:      var(--cal-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .05em;line-height:1.3em;
}

.calendario__drawer__link {
    font-size:       .9rem;
    font-weight:     600;
    color:           var(--cal-texto);
    text-decoration: none;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.calendario__drawer__link:hover {
    color: var(--cal-titulo-cor);
}

/* ============================================================
   __backdrop
   ============================================================ */
.calendario__backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--cal-backdrop-bg);
    z-index:    999;
    opacity:    0;
    transition: opacity var(--cal-transition);
}

.calendario__backdrop--visivel {
    opacity: 1;
}

/* ============================================================
   Responsivo — tablet  (≤ 960px)
   ============================================================ */
@media (max-width: 960px) {
    .calendario__corpo {
        grid-template-columns: 1fr;
    }

    .calendario__legenda {
        padding: 14px 16px;
    }

    .calendario__legenda__lista {
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            8px 16px;
    }

    .calendario__dia {
        min-height: 90px;
    }
}

/* ============================================================
   Responsivo — mobile  (≤ 640px)
   Vista compacta: apenas dias + pontos coloridos + drawer
   ============================================================ */
@media (max-width: 640px) {
    .calendario {
        padding: 12px 10px;
    }

    .calendario__titulo {
        font-size: 1.2rem;
        min-width: 130px;
    }

    /* Dias da semana: versão curta */
    .calendario__semana__dia--longo { display: none;   }
    .calendario__semana__dia--curto { display: inline; }

    .calendario__semana__dia {
        font-size: .62rem;
        padding:   0 2px 4px;
        text-align: center;
    }

    /* Células compactas */
    .calendario__dia {
        min-height:  52px;
        padding:     6px 4px 4px;
        display:     flex;
        flex-direction: column;
        align-items: center;
        cursor:      default;
    }

    /* Dias com eventos são clicáveis */
    .calendario__dia--com-eventos {
        cursor: pointer;
    }

    .calendario__dia--com-eventos:active {
        background: #d8dce2;
    }

    .calendario__dia__numero {
        font-size:     .78rem;
        margin-bottom: 4px;
        text-align:    center;
    }

    /* Esconder lista de eventos desktop */
    .calendario__eventos {
        display: none;
    }

    /* Mostrar pontos mobile */
    .calendario__pontos {
        display:         flex;
        justify-content: center;
    }

    /* Drawer e backdrop activos */
    .calendario__drawer {
        display: block;
    }

    .calendario__backdrop {
        display: block;
    }
}

/* ============================================================
   Mobile pequeno  (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
    .calendario__dias,
    .calendario__semana {
        gap: 3px;
    }

    .calendario__dia {
        min-height: 44px;
    }

    .calendario__ponto {
        width:  6px;
        height: 6px;
    }
}