/* =============================================================================
   website-responsive.css
   CSBC 2026 — Mobile & Tablet Responsive Patch
   -----------------------------------------------------------------------------
   Carregue este arquivo APÓS website.css. Não modifica o CSS original — apenas
   sobrescreve/estende seletores existentes e adiciona media queries faltantes.

   Problemas corrigidos:
     1.  Navbar mobile — sub-menus com touch, fecha ao clicar em link,
         z-index do menu aberto sobre o conteúdo
     2.  Hero stats — quebra em 2×2 no mobile, fonte menor
     3.  Tabs bar — min-width menor, ícones somem em telas muito estreitas
     4.  Ranking table — padding compacto, células responsivas abaixo de 480px
     5.  Toolbar — search + filter empilham verticalmente em mobile
     6.  Chat FAB & panel — panel fullscreen em mobile, FAB não conflita com toast
     7.  Agenda — padding, timeline compacta, calendar sticky desabilitado mobile
     8.  New-leader banner — centralizado e sem overflow em mobile
     9.  Connection toast — não sobrepõe o FAB
    10.  Uni detail layout — empilha corretamente
    11.  Podium page — stage-slot menor em telas muito estreitas
    12.  Runners-up — texto não transborda
    13.  Safe-area insets (iPhone notch / home bar)
   ============================================================================= */

/* ── 0. Variáveis e Safe-areas ────────────────────────────────────────────── */
:root {
    --safe-bottom : env(safe-area-inset-bottom, 0px);
    --safe-top    : env(safe-area-inset-top,    0px);
    --safe-left   : env(safe-area-inset-left,   0px);
    --safe-right  : env(safe-area-inset-right,  0px);
}

/* Garante que o body nunca gere scroll horizontal */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* =============================================================================
   1. NAVBAR — MOBILE
   ============================================================================= */

/* ── 1a. Toggle button — área de toque maior ── */
.nav-toggle {
    padding     : 10px;
    margin-right: 4px;
    line-height : 1;
    font-size   : 1.5rem;
    /* Garante que o botão fique visível mesmo com logo grande */
    flex-shrink : 0;
}

/* ── 1b. Logo não encolhe demais ── */
.nav-logo img {
    max-width : 140px;   /* reduz do 175px original em mobile */
    max-height: 44px;
}

/* ── 1c. Menu aberto — sobrepõe o conteúdo e tem scroll interno ── */
@media (max-width: 900px) {
    /* O header é sticky; o menu precisa de position:fixed para não
       empurrar o conteúdo da página */
    .site-header {
        position: sticky;
        /* z-index já é 1000 no original */
    }

    .nav-inner {
        position: relative; /* âncora do absolute do menu */
    }

    .nav-menu.open {
        position  : fixed;           /* sai do fluxo, sobrepõe tudo      */
        top       : 70px;            /* altura do header                  */
        left      : 0;
        right     : 0;
        bottom    : 0;               /* ocupa até o fim da viewport       */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1.5rem + var(--safe-bottom));
        /* z-index acima do conteúdo mas abaixo do FAB do chat */
        z-index   : 950;
    }

    /* ── 1d. Links do menu — tamanho de toque adequado ── */
    .nav-menu.open > li > a {
        padding    : 14px 24px;
        font-size  : 0.95rem;
        min-height : 48px;           /* WCAG: mínimo 44px para touch      */
        display    : flex;
        align-items: center;
    }

    /* ── 1e. Sub-menus no mobile — togglam via classe, não hover ──
       O JS adiciona .open-sub ao <li> quando o usuário toca na seta.
       O CSS existente já tem `.nav-menu.open>li.open-sub .nav-sub { display:block }`
       mas faltava o indicador visual de qual sub está aberto. */
    .nav-menu.open > li .nav-sub {
        display: none; /* reset de segurança */
    }
    .nav-menu.open > li.open-sub .nav-sub {
        display      : block;
        border-left  : 3px solid var(--csbc-bright);
        margin-left  : 20px;
        padding      : 4px 0;
    }
    .nav-menu.open > li.open-sub .nav-sub li a {
        padding   : 11px 20px;
        font-size : 0.88rem;
        min-height: 44px;
        display   : flex;
        align-items: center;
    }

    /* ── 1f. Seta de dropdown — animação ao abrir ── */
    .nav-menu.open > li.open-sub .nav-arrow {
        transform: rotate(180deg);
        opacity  : 1;
    }

    /* ── 1g. Botão CTA no menu mobile — largura total ── */
    .nav-menu.open .nav-cta-link {
        padding    : 8px 24px !important;
        width      : 100%;
        display    : flex !important;
        align-items: center;
    }
    .nav-menu.open .nav-cta-btn {
        width     : 100%;
        text-align: center;
        padding   : 13px 18px;
        font-size : 0.95rem;
    }
}

/* =============================================================================
   2. HERO BANNER — MOBILE
   ============================================================================= */

@media (max-width: 640px) {
    .hero-banner {
        padding: 1.75rem 1rem 2rem;
    }

    .hero-eyebrow {
        font-size    : 0.6rem;
        padding      : 4px 10px;
        margin-bottom: 0.85rem;
        /* evita transbordamento em telas muito estreitas */
        white-space  : normal;
        text-align   : center;
    }

    .hero-title {
        font-size    : clamp(1.6rem, 7vw, 2.2rem);
        margin-bottom: 0.5rem;
    }

    .hero-sub {
        font-size    : 0.8rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.2rem;
        max-width    : 100%;
    }

    /* ── Stats: 2 colunas × 2 linhas ── */
    .hero-stats {
        display              : grid;
        grid-template-columns: 1fr 1fr;
        gap                  : 1rem 0;
    }

    .hero-stat {
        border-right  : none;
        padding-right : 0;
        margin-right  : 0;
        /* borda entre colunas via box-shadow no item esquerdo */
    }

    .hero-stat:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,0.1);
        padding-right: 0.75rem;
    }

    .hero-stat:nth-child(even) {
        padding-left: 0.75rem;
    }

    /* linha separadora horizontal entre as duas fileiras */
    .hero-stat:nth-child(1),
    .hero-stat:nth-child(2) {
        padding-bottom: 1rem;
        border-bottom : 1px solid rgba(255,255,255,0.07);
    }

    .hero-stat-num   { font-size: 1.4rem; }
    .hero-stat-label { font-size: 0.6rem; }
}

/* =============================================================================
   3. TABS BAR — MOBILE
   ============================================================================= */

@media (max-width: 640px) {
    .tabs-bar {
        padding      : 4px;
        gap          : 2px;
        border-radius: 16px;
        /* Scroll horizontal suave se as tabs não couberem */
        overflow-x   : auto;
        flex-wrap    : nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-bar::-webkit-scrollbar { display: none; }

    .tab-btn {
        flex       : 0 0 auto;       /* não shrinka: cada tab tem seu tamanho */
        min-width  : 0;
        padding    : 8px 10px;
        font-size  : 0.75rem;
        gap        : 5px;
        border-radius: 12px;
        white-space: nowrap;
    }

    /* Ícone das tabs: mantém mas menor */
    .tab-icon-svg {
        width : 14px;
        height: 14px;
    }
}

/* Telas muito estreitas (< 360px): oculta texto, mantém só ícone */
@media (max-width: 359px) {
    .tab-btn {
        padding: 8px;
        font-size: 0;  /* esconde texto */
        gap: 0;
    }
    .tab-icon-svg {
        width : 18px;
        height: 18px;
        opacity: 1 !important;
        margin: 0;
    }
}

/* =============================================================================
   4. TOOLBAR (busca + filtro) — MOBILE
   ============================================================================= */

@media (max-width: 640px) {
    .toolbar {
        flex-direction: column;
        align-items   : stretch;
        gap           : 8px;
    }

    .search-box {
        min-width: 0;
        width    : 100%;
    }

    .filter-select {
        width    : 100%;
        font-size: 0.9rem;  /* evita zoom iOS em inputs < 16px */
    }

    .search-box input {
        font-size: 1rem;   /* >= 16px para evitar zoom iOS */
    }

    .results-count {
        text-align: right;
    }
}

/* =============================================================================
   5. RANKING TABLE — MOBILE
   ============================================================================= */

@media (max-width: 640px) {
    /* Comprime padding das células */
    .ranking-table th,
    .ranking-table td {
        padding: 10px 10px;
    }

    /* Primeira coluna (rank badge) — mais estreita */
    .ranking-table th:first-child,
    .ranking-table td:first-child {
        padding-left : 12px;
        padding-right: 6px;
    }

    /* Coluna de pontuação — não quebra */
    .ranking-table th:last-child,
    .ranking-table td:last-child {
        padding-right: 12px;
    }

    /* Esconde universidade (coluna 3) — já existe no CSS original */
    .ranking-table th:nth-child(3),
    .ranking-table td:nth-child(3) {
        display: none;
    }

    /* Student cell: nome + curso empilhados */
    .student-cell {
        gap: 8px;
    }

    .student-name {
        font-size: 0.85rem;
    }

    .student-course {
        font-size: 0.7rem;
    }

    /* Avatar menor */
    .avatar {
        width : 28px;
        height: 28px;
        font-size: 0.65rem;
        border-radius: 8px;
    }

    /* Score badge compacto */
    .score-cell {
        font-size: 0.95rem;
        padding  : 2px 7px;
    }

    /* Barra de pontuação — esconde em mobile (pouco espaço) */
    .score-bar-wrap {
        display: none;
    }

    /* Activity chips — 1 chip por linha no mobile */
    .act-chip {
        font-size: 0.62rem;
        padding  : 1px 5px;
    }
}

/* Telas < 400px: oculta também a coluna de cursos na tabela de detalhe */
@media (max-width: 400px) {
    /* Tabela de detalhe de universidade tem: # | Nome | Curso | Pts */
    #tab-universidades .ranking-table th:nth-child(3),
    #tab-universidades .ranking-table td:nth-child(3) {
        display: none;
    }
}

/* =============================================================================
   6. PAGINAÇÃO — MOBILE
   ============================================================================= */

@media (max-width: 480px) {
    .pagination-bar {
        gap       : 3px;
        flex-wrap : wrap;
        margin-top: 1rem;
    }

    .page-btn {
        min-width: 32px;
        height   : 32px;
        font-size: 0.78rem;
        padding  : 0 7px;
    }

    /* Esconde botões de ellipsis em telas pequenas */
    .page-btn.page-ellipsis {
        display: none;
    }
}

/* =============================================================================
   7. UNI GRID & CARDS — TABLET/MOBILE
   ============================================================================= */

@media (max-width: 640px) {
    .uni-grid {
        grid-template-columns: 1fr;
        gap                  : 0.75rem;
    }

    .uni-card {
        padding: 1rem 1.25rem;
    }

    .uni-score-big {
        font-size: 1.9rem;
    }

    .uni-meta {
        gap: 1rem;
    }
}

/* =============================================================================
   8. UNI DETAIL — MOBILE
   ============================================================================= */

@media (max-width: 760px) {
    /* O original já tem flex-direction:column mas falta ajuste de padding */
    .detail-top-layout {
        gap: 1rem;
    }

    .detail-stats-wrap {
        width: 100%;
    }

    .detail-stats {
        grid-template-columns: 1fr 1fr;
        gap                  : 8px;
    }

    .detail-uni-name {
        font-size: 1.25rem;
    }

    .detail-header {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .detail-header {
        flex-direction: column;
        align-items   : flex-start;
    }

    .detail-uni-name {
        font-size: 1.1rem;
    }

    .stat-card {
        padding   : 1rem 0.75rem;
        min-height: 72px;
    }

    .stat-card-val {
        font-size: 1.5rem;
    }
}

/* =============================================================================
   9. PODIUM — MOBILE
   ============================================================================= */

@media (max-width: 480px) {
    /* Pódio global (aba Pódio) */
    .champions-stage {
        padding      : 1.5rem 0.75rem 0;
        border-radius: 16px;
    }

    .champions-title {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    .stage-podium {
        gap: 2px;
    }

    .stage-slot {
        max-width: 110px;
    }

    .stage-slot:nth-child(2) .stage-avatar {
        width    : 56px;
        height   : 56px;
        font-size: 1.1rem;
    }

    .stage-avatar {
        width    : 40px;
        height   : 40px;
        font-size: 0.85rem;
    }

    .stage-name {
        font-size: 0.82rem;
    }

    .stage-slot:nth-child(2) .stage-name {
        font-size: 0.95rem;
    }

    .stage-score        { font-size: 1rem; }
    .stage-block        { font-size: 1.2rem; }

    .stage-slot:nth-child(1) .stage-block { height: 70px; }
    .stage-slot:nth-child(2) .stage-block { height: 100px; }
    .stage-slot:nth-child(3) .stage-block { height: 50px; }

    /* Pódio mini (nas abas de universidade) */
    .podium-stage {
        padding      : 1rem 1rem 0;
        border-radius: 16px;
    }

    .podium-step { max-width: 110px; }

    .podium-step.podium-1 .podium-avatar {
        width    : 44px;
        height   : 44px;
        font-size: 0.95rem;
    }

    .podium-avatar {
        width    : 34px;
        height   : 34px;
        font-size: 0.75rem;
    }
}

/* ── Uni podium cards: 1 coluna em mobile ── */
@media (max-width: 640px) {
    .uni-podium-row {
        grid-template-columns: 1fr;
    }

    .uni-podium-card {
        padding: 1rem 1.25rem;
    }

    .uni-podium-uni-name {
        font-size: 1.15rem;
    }
}

/* ── Runners-up: texto truncado em mobile ── */
@media (max-width: 480px) {
    .runners-up-row {
        padding: 10px 14px;
        gap    : 10px;
    }

    .runners-up-name {
        font-size: 0.875rem;
        /* Trunca se muito longo */
        overflow     : hidden;
        text-overflow: ellipsis;
        white-space  : nowrap;
        min-width    : 0;
    }

    .runners-up-course {
        display: none;  /* economiza espaço em mobile */
    }
}

/* =============================================================================
   10. AGENDA — MOBILE
   ============================================================================= */

@media (max-width: 860px) {
    /* Calendar card: sai do sticky no mobile */
    .ag-cal-card {
        position: static;
    }

    .ag-topbar {
        gap: 0.75rem;
    }

    .ag-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 600px) {
    .ag-body {
        gap: 0.875rem;
    }

    /* Timeline mais compacta */
    .ag-timeline::before {
        left: 42px;
    }

    .ag-time-col {
        width       : 42px;
        padding-right: 9px;
        padding-top : 14px;
    }

    .ag-t-start {
        font-size: 0.78rem;
    }

    .ag-t-end {
        font-size: 0.62rem;
    }

    .ag-node-col {
        padding-top: 17px;
    }

    .ag-card-col {
        padding-left: 10px;
    }

    /* Card de evento mais compacto */
    .ag-card-inner {
        padding: 0.7rem 0.9rem 0.7rem 1rem;
    }

    .ag-card-name {
        font-size: 0.95rem;
    }

    /* Activity items: empilha tempo */
    .ag-atv-item {
        grid-template-columns: 1fr auto;
        gap                  : 6px 8px;
    }

    .ag-atv-time {
        grid-column: 1 / -1;
        font-size  : 0.75rem;
    }

    .ag-atv-name {
        font-size: 0.82rem;
    }

    .ag-atv-desc {
        font-size: 0.74rem;
    }

    /* Day header compacto */
    .ag-day-header {
        padding: 0.75rem 1rem;
        gap    : 0.5rem;
    }

    .ag-day-num-big {
        font-size: 2rem;
    }

    .ag-day-weekday {
        font-size: 0.9rem;
    }

    /* Live pill: esconde texto, mantém dot */
    .ag-live-pill span:not(.ag-live-dot) {
        display: none;
    }
    .ag-live-pill {
        padding: 6px 10px;
    }
}

/* Calendar cell: toque mais fácil */
@media (max-width: 400px) {
    .ag-cal-grid {
        padding: 0.4rem 0.5rem 0.75rem;
        gap    : 2px;
    }

    .ag-cal-cell-inner {
        width : 26px;
        height: 26px;
    }

    .ag-cal-cell {
        font-size: 0.75rem;
    }

    .ag-cal-wd {
        font-size: 0.56rem;
    }
}

/* =============================================================================
   11. CHAT FAB & PANEL — MOBILE FULLSCREEN
   ============================================================================= */

@media (max-width: 480px) {
    /* FAB: afasta do canto inferior para não conflitar com home bar do iPhone */
    #chat-fab {
        bottom: calc(20px + var(--safe-bottom));
        right : calc(16px + var(--safe-right));
    }

    /* Tooltip: escondido em mobile (sem hover) */
    #chat-fab::before {
        display: none;
    }
}

/*
 * CHAT PANEL — FULLSCREEN EM MOBILE
 * ─────────────────────────────────────────────────────────────────────────────
 * NÃO controlado por @media + !important aqui, pois o <style> inline do
 * website.html tem mesma especificidade (#id) e sobrepõe qualquer CSS externo.
 *
 * O controle é feito via JavaScript (ver script #csbc-mobile-chat no HTML):
 * body.mobile-chat-fullscreen #chat-panel  → panel fullscreen
 * body.mobile-chat-fullscreen #chat-fab    → FAB acima do panel
 *
 * Este bloco apenas estiliza o panel quando a classe está presente.
 * A classe é adicionada/removida pelo JS baseado em window.innerWidth.
 */
body.mobile-chat-fullscreen #chat-panel {
    position      : fixed;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    width         : 100%;
    height        : 100%;
    max-width     : none;
    max-height    : none;
    border-radius : 0;
    z-index       : 8998;
    /* Animação slide-up substitui o scale() do desktop */
    transform        : translateY(100%);
    transform-origin : bottom center;
    opacity          : 1;
    pointer-events   : none;
    transition       : transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow       : none;
}

body.mobile-chat-fullscreen #chat-panel.open {
    transform     : translateY(0);
    pointer-events: all;
    opacity       : 1;
}

/* FAB sempre visível acima do panel fullscreen */
body.mobile-chat-fullscreen #chat-fab {
    z-index: 9000;
}

/* =============================================================================
   12. CONNECTION TOAST — não sobrepõe o FAB
   ============================================================================= */

@media (max-width: 480px) {
    #conn-toast {
        /* Sobe o toast para não ficar atrás do FAB (56px) + margem */
        bottom   : calc(84px + var(--safe-bottom));
        right    : 14px;
        left     : 14px;
        font-size: 0.78rem;
        padding  : 9px 14px;
    }
}

/* =============================================================================
   13. NEW LEADER BANNER — não transborda em mobile
   ============================================================================= */

@media (max-width: 640px) {
    #new-leader-banner {
        /* Remove o translateX(-50%) + left:50% que causa overflow */
        left     : 50%;
        right    : auto;
        max-width: calc(100vw - 2rem);
        font-size: 0.95rem;
        padding  : 10px 18px;
        gap      : 7px;

        /* Quando show: desce até um pouco abaixo do header */
        top      : calc(80px + var(--safe-top));
    }

    #new-leader-banner.show {
        transform: translateX(-50%) translateY(0);
    }

    #new-leader-banner.hide {
        transform: translateX(-50%) translateY(-180px);
    }

    .banner-crown svg {
        width : 18px;
        height: 18px;
    }
}

/* =============================================================================
   14. FOOTER — MOBILE
   ============================================================================= */

@media (max-width: 480px) {
    .site-footer {
        padding-bottom: calc(1rem + var(--safe-bottom));
        font-size     : 0.7rem;
        padding-left  : 1rem;
        padding-right : 1rem;
    }
}

/* =============================================================================
   15. MAIN PADDING — PEQUENOS AJUSTES
   ============================================================================= */

@media (max-width: 480px) {
    .main {
        padding: 1rem 0.875rem 4rem;
    }
}

/* =============================================================================
   16. DB ERROR OVERLAY — MOBILE
   ============================================================================= */

@media (max-width: 480px) {
    .db-error-card {
        padding      : 2rem 1.5rem 1.75rem;
        border-radius: 18px;
        margin       : 1rem;
    }

    .db-error-title {
        font-size: 1.2rem;
    }

    .db-error-msg {
        font-size: 0.84rem;
    }
}

/* =============================================================================
   17. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    #chat-panel,
    #chat-fab,
    #new-leader-banner,
    .uni-card,
    .ag-card,
    .confetti-piece {
        transition: none !important;
        animation : none !important;
    }
}