/* ═══════════════════════════════════════════════════════════════════════
   encontreme.app — interface de celular
   ═══════════════════════════════════════════════════════════════════════

   Este arquivo e carregado com media="(max-width:767px)" na propria tag
   <link>. Isso nao e detalhe de estilo: e a garantia. Acima de 767px o
   navegador nem aplica o que esta aqui, entao nenhuma regra deste arquivo
   pode alcancar o desktop, nem por engano, nem por especificidade.

   A regra do cliente era "mobile novo, desktop preservado". Separar por
   arquivo com media na tag torna a segunda metade dessa frase verificavel
   em vez de prometida.

   Mesmo assim, tudo aqui dentro vai ENVOLVIDO em @media (max-width:767px):
   se um dia alguem importar este arquivo sem o media na tag, o limite
   continua de pe.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 1. Fundacao ──────────────────────────────────────────────────────
     O painel do desktop e feito de barra lateral + area de conteudo. No
     celular essas duas pecas somem e dao lugar a header + navegacao
     inferior, que e como se navega num aplicativo. */

  :root {
    --m-gutter: 16px;          /* margem lateral unica em toda a interface */
    --m-header: 58px;
    --m-nav: 64px;
    --m-raio: 18px;
    --m-borda: #E9E7F2;
    --m-tinta: #14121F;
    --m-suave: #6B7280;
    --m-fundo: #F5F4F9;
  }

  /* o fundo com gradiente dominava a tela e deixava tudo com cara de
     vazio (seseção 49). Aqui ele vira so uma cor calma. */
  body { background: var(--m-fundo); }
  .fundo { display: none; }

  /* nada de rolagem lateral por acidente (secao 57) */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ── 2. O que o celular NAO tem ───────────────────────────────────────
     Sidebar (secao 46) e o menu institucional do topo (secao 24). O menu
     de Funcionalidades/Blog pertence ao site publico; dentro do app ele
     so ocupa lugar. */
  .rail { display: none !important; }
  .canvas-top { display: none !important; }

  /* ── 3. Header do aplicativo (secao 25) ───────────────────────────── */
  .m-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    height: calc(var(--m-header) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--m-gutter) 0;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--m-borda);
  }
  .m-marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
  .m-marca svg { width: 30px; height: 30px; }
  .m-marca span { font-size: 1.02rem; font-weight: 800; color: var(--m-tinta);
                  letter-spacing: -.03em; }
  .m-marca b { color: var(--accent); font-weight: 800; }

  /* 44px de area de toque mesmo com avatar de 34 (secao 34) */
  .m-avatar {
    width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: none;
    background: none; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%;
  }
  .m-avatar img, .m-avatar .m-ini {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6C38FF, #9F6BFF); color: #fff;
    font-size: .84rem; font-weight: 800;
  }
  .m-avatar:active { background: rgba(108,56,255,.1); }

  /* ── 4. Navegacao inferior (secoes 32 e 33) ──────────────────────── */
  .m-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    height: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--m-borda);
  }
  .m-nav-i {
    border: none; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 0;
    min-height: 48px;                       /* secao 34 */
    font-size: .63rem; font-weight: 700; letter-spacing: -.01em;
    color: #9A96A8; transition: color .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-i svg { width: 22px; height: 22px; stroke-width: 1.9; }
  .m-nav-i.is-on { color: var(--accent); }
  .m-nav-i:active { color: var(--accent2); }

  /* o + nao e mais um quadradinho: e a acao principal da barra (secao 33) */
  .m-nav-mais { position: relative; }
  .m-nav-mais i {
    position: absolute; top: -14px; left: 50%; margin-left: -26px;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #6C38FF, #8B5CF6);
    box-shadow: 0 8px 22px rgba(108,56,255,.42);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s ease;
  }
  .m-nav-mais i svg { width: 26px; height: 26px; color: #fff; stroke-width: 2.4; }
  .m-nav-mais:active i { transform: scale(.93); }
  .m-nav-mais span { margin-top: 30px; }

  /* ── 5. A area de conteudo entre os dois ─────────────────────────── */
  .canvas {
    padding: calc(var(--m-header) + env(safe-area-inset-top, 0px) + 12px)
             var(--m-gutter)
             calc(var(--m-nav) + env(safe-area-inset-bottom, 0px) + 20px);
    gap: 0;
  }

  /* O grid de duas colunas do desktop sobrevivia no celular por causa do
     :has() — que vence qualquer regra por especificidade, esteja ela em
     media query ou nao. A coluna de anuncio de 336px comia os 358px da
     tela e sobrava ZERO para os eventos: era dai que vinha o cartao de
     140px. Aqui e uma coluna so, sempre. */
  .canvas-body,
  .canvas-body:has(.ad-slot:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }
  .ad-slot { min-height: 0; margin-top: 1.4rem; }
  .events-col { gap: 0; max-width: none; }

  /* ── 6. Home: saudacao e acao principal (secao 26) ───────────────── */
  .m-ola { margin-bottom: 1.15rem; }
  .m-ola h1 {
    font-size: 1.62rem; font-weight: 800; letter-spacing: -.035em;
    color: var(--m-tinta); line-height: 1.2;
  }
  .m-ola p { font-size: .95rem; color: var(--m-suave); margin-top: .22rem; }

  .m-cta {
    width: 100%; min-height: 52px;              /* secao 26 */
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    border: none; border-radius: 15px; cursor: pointer;
    background: linear-gradient(135deg, #6C38FF, #8B5CF6); color: #fff;
    font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
    box-shadow: 0 8px 20px rgba(108,56,255,.3);
    transition: transform .16s ease, box-shadow .16s ease;
    margin-bottom: 1.6rem;
  }
  .m-cta svg { width: 20px; height: 20px; stroke-width: 2.6; }
  .m-cta:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(108,56,255,.3); }

  /* ── 7. Secao "Meus eventos" (secao 27) ──────────────────────────── */
  .page-title-row { margin-bottom: .85rem; }
  .events-col .page-title-row h1 {
    font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em;
  }
  .events-col .events-grid {
    grid-template-columns: 1fr !important;     /* um cartao por linha */
    gap: 1rem;
  }

  /* ── 8. Cartao de evento (secoes 28 e 29) ────────────────────────
     O cartao do desktop e compacto porque cabem varios lado a lado. No
     celular ele e a tela inteira: imagem em cima, texto legivel embaixo,
     uma acao principal grande e o resto no "...". */
  .event-card {
    width: 100%; padding: 0; gap: 0; overflow: hidden;
    border-radius: var(--m-raio); background: #fff;
    border: 1px solid var(--m-borda);
    box-shadow: 0 2px 10px rgba(20,18,31,.05);
  }
  .event-thumb {
    width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 0;
    margin: 0; font-size: 2.6rem;
  }
  .event-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .event-card-head { padding: .95rem var(--m-gutter) 0; }
  .event-card-name {
    font-size: 1.16rem; font-weight: 800; letter-spacing: -.028em;
    line-height: 1.28; white-space: normal;
  }
  .event-card-slug {
    padding: .2rem var(--m-gutter) 0; font-size: .82rem; color: var(--m-suave);
  }
  .event-card .expiry-ring-wrap,
  .event-card .expiry-wrap { padding: .75rem var(--m-gutter) 0; }

  .event-card-actions {
    display: grid; grid-template-columns: 1fr; gap: .55rem;
    padding: .95rem var(--m-gutter) 1.05rem;
  }
  /* a acao principal vem primeiro e ocupa a largura toda (secao 30) */
  .event-card-actions .btn-primary {
    order: 1; width: 100%; min-height: 48px; font-size: .95rem;
    border-radius: 13px; justify-content: center;
  }
  .event-card-actions .btn-copy { order: 2; min-height: 46px; border-radius: 13px; }

  /* linha de baixo: copiar de um lado, "..." do outro */
  .event-card-actions:has(.m-mais) { grid-template-columns: 1fr auto; }
  .event-card-actions:has(.m-mais) .btn-primary { grid-column: 1 / -1; }
  .m-mais {
    order: 3; width: 48px; height: 46px; border-radius: 13px; cursor: pointer;
    border: 1px solid var(--m-borda); background: #fff; color: var(--m-suave);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .m-mais svg { width: 20px; height: 20px; }
  .m-mais:active { background: #F3F2F8; }

  /* ── 9. Tipografia (secao 35): nada relevante abaixo de 13px ─────── */
  .card, .settings-section, .tut-txt { font-size: .95rem; }
  .settings-section h4 { font-size: .78rem; }
  .field-label { font-size: .85rem; }

  /* ── 10. Toques: nenhum alvo importante menor que 44px (secao 34) ── */
  .btn, .btn-icon, .btn-sm {
    min-height: 44px;
  }
  .btn-sm { padding-left: .9rem; padding-right: .9rem; }

  /* hover nao existe no celular (secao 56): o estado visivel e o :active */
  .btn:active, .m-lista-i:active { filter: brightness(.96); }

  /* ── 11. Bottom sheet (secao 31) ─────────────────────────────────── */
  .m-sheet-fundo {
    position: fixed; inset: 0; z-index: 500; background: rgba(8,6,20,.5);
    opacity: 0; transition: opacity .2s ease;
  }
  .m-sheet-fundo.is-on { opacity: 1; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 501;
    max-height: 86vh; overflow-y: auto;
    background: #fff; border-radius: 22px 22px 0 0;
    padding: .55rem var(--m-gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.16, 1, .3, 1);   /* secao 55 */
    box-shadow: 0 -10px 40px rgba(0,0,0,.24);
  }
  .m-sheet.is-on { transform: none; }
  /* 44x44 de area de toque, encostado no canto (secao 34) */
  .m-sheet-x {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    width: 44px; height: 44px; border: none; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--m-suave);
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet-x svg { width: 20px; height: 20px; stroke-width: 2.2; }
  .m-sheet-x:active { background: #F3F2F8; }
  .m-sheet { position: fixed; }
  .m-sheet h3 { padding-right: 44px; }

  /* o puxador tambem fecha: e o gesto que a pessoa ja tenta */
  .m-sheet-puxador { cursor: pointer; }
  .m-sheet-puxador {
    width: 38px; height: 4px; border-radius: 99px; background: #D8D5E4;
    margin: .35rem auto .8rem;
  }
  .m-sheet h3 {
    font-size: 1.06rem; font-weight: 800; letter-spacing: -.028em;
    color: var(--m-tinta); margin-bottom: .2rem;
  }
  .m-sheet > p { font-size: .87rem; color: var(--m-suave); margin-bottom: .9rem; }

  .m-lista { display: flex; flex-direction: column; gap: .15rem; margin-top: .6rem; }
  .m-lista-i {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    min-height: 52px; padding: .3rem .2rem;            /* secao 34 */
    border: none; background: none; cursor: pointer; text-align: left;
    font-size: .98rem; font-weight: 600; color: var(--m-tinta);
    border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .m-lista-i svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--accent);
                   stroke-width: 1.9; }
  .m-lista-i i {
    font-style: normal; display: block; font-size: .78rem; font-weight: 500;
    color: var(--m-suave); margin-top: .06rem;
  }
  .m-lista-i.e-perigo, .m-lista-i.e-perigo svg { color: #DC2626; }
  .m-lista-i:active { background: #F3F2F8; }

  /* ── 12. Estado vazio (secao 53) ─────────────────────────────────── */
  .m-vazio {
    text-align: center; padding: 2.6rem 1rem 2rem;
    background: #fff; border: 1px solid var(--m-borda);
    border-radius: var(--m-raio);
  }
  .m-vazio-ico {
    width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F0EAFF, #E6DBFF); color: var(--accent);
  }
  .m-vazio-ico svg { width: 28px; height: 28px; }
  .m-vazio h3 { font-size: 1.08rem; font-weight: 800; color: var(--m-tinta);
                letter-spacing: -.025em; }
  .m-vazio p { font-size: .9rem; color: var(--m-suave); line-height: 1.55;
               margin: .4rem auto 1.2rem; max-width: 30ch; }

  /* ── 13. Esqueleto de carregamento (secao 52) ────────────────────── */
  .m-esq { display: flex; flex-direction: column; gap: 1rem; }
  .m-esq-card {
    background: #fff; border: 1px solid var(--m-borda);
    border-radius: var(--m-raio); overflow: hidden;
  }
  .m-esq-img { width: 100%; aspect-ratio: 16 / 9; }
  .m-esq-l { height: 13px; border-radius: 7px; margin: 0 var(--m-gutter); }
  .m-brilho {
    background: linear-gradient(90deg, #EDEBF3 25%, #F7F6FA 50%, #EDEBF3 75%);
    background-size: 240% 100%;
    animation: mBrilho 1.3s ease-in-out infinite;
  }
  @keyframes mBrilho { from { background-position: 140% 0 } to { background-position: -40% 0 } }
  @media (prefers-reduced-motion: reduce) {
    .m-brilho { animation: none; }
    .m-sheet { transition: none; }
  }

  /* ── 14. Aviso de acao concluida (secao 54) ──────────────────────── */
  .m-toast {
    position: fixed; z-index: 600; left: var(--m-gutter); right: var(--m-gutter);
    bottom: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px) + 14px);
    background: #14121F; color: #fff; border-radius: 14px;
    padding: .85rem 1rem; font-size: .9rem; font-weight: 600;
    display: flex; align-items: center; gap: .6rem;
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
    transform: translateY(18px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
  }
  .m-toast.is-on { transform: none; opacity: 1; }
  .m-toast svg { width: 18px; height: 18px; color: #4ADE80; flex-shrink: 0; }

  /* ── 15. Modais viram tela cheia ────────────────────────────────────
     Um modal centrado de 520px num aparelho de 360 vira uma caixinha com
     margem sobrando dos dois lados e conteudo espremido no meio. */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: none; max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding: 1.2rem var(--m-gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }
  .modal-box h2 { font-size: 1.18rem; }

  /* ── 16. Formularios (secao 37) ──────────────────────────────────── */
  input[type="text"], input[type="email"], input[type="url"],
  input[type="number"], select, textarea {
    width: 100%; min-height: 48px; font-size: 16px;  /* 16px evita o zoom do iOS */
    border-radius: 12px;
  }
  textarea { min-height: 110px; }
  .field-label { display: block; margin-bottom: .35rem; }

  /* ── 17. Acoes rapidas do evento (secao 43) ──────────────────────── */
  .m-rapidas {
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
    margin: 1.1rem 0 1.4rem;
  }
  .m-rapida {
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    min-height: 84px; padding: .95rem; cursor: pointer; text-align: left;
    background: #fff; border: 1px solid var(--m-borda); border-radius: 15px;
    font-size: .9rem; font-weight: 700; color: var(--m-tinta);
  }
  .m-rapida svg { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.9; }
  .m-rapida:active { background: #F7F5FF; border-color: #D9CCFF; }

  /* ── 18. QR code em tela (secao 45) ──────────────────────────────── */
  .m-qr { text-align: center; padding: .4rem 0 .6rem; }
  .m-qr-caixa {
    width: 232px; height: 232px; margin: 0 auto; padding: 14px;
    background: #fff; border: 1px solid var(--m-borda); border-radius: 18px;
  }
  .m-qr-caixa img, .m-qr-caixa canvas, .m-qr-caixa svg { width: 100%; height: 100%; }
  .m-qr-nome { font-size: 1rem; font-weight: 800; color: var(--m-tinta);
               margin-top: .9rem; letter-spacing: -.02em; }
  .m-qr-link { font-size: .84rem; color: var(--m-suave); margin-top: .15rem; }

  /* ═══ Pagina interna do evento (secoes 36, 39, 42, 43) ═══════════════
     Ate aqui esta tela era o formulario do desktop espremido em 390px:
     campo e botao lado a lado cortando o endereco no meio, "Excluir
     evento" como PRIMEIRA coisa da tela, e o conteudo final escondido
     atras da barra de baixo. */

  /* O painel pinta #events-page de #E4E0F2 e a tela inteira vira um bloco
     de lilas com pouco conteudo em cima — e a queixa da secao 49. No
     celular o fundo sai de cena e quem aparece e o conteudo. */
  #events-page, #event-page { background: var(--m-fundo); }
  #event-page .fundo { display: none; }

  /* A .topbar e sticky no topo e ficava ATRAS do meu cabecalho fixo — o
     botao "Voltar" existia e era inalcancavel. Quem volta agora e o
     proprio cabecalho de celular, que vira "← nome do evento" nesta tela. */
  #event-page .topbar { display: none; }

  #event-page .page-body {
    padding: calc(var(--m-header) + env(safe-area-inset-top, 0px) + 14px)
             var(--m-gutter)
             calc(var(--m-nav) + env(safe-area-inset-bottom, 0px) + 28px);
    max-width: none; gap: 1rem;
  }
  #event-page .card { padding: 1.1rem var(--m-gutter); border-radius: var(--m-raio); }

  /* cabecalho do evento: nome grande, endereco embaixo */
  #event-page .ev-cab { flex-direction: column; align-items: stretch; gap: .5rem; }
  #event-page .ev-cab h2 { font-size: 1.42rem; letter-spacing: -.035em; line-height: 1.22; }

  /* O botao de apagar sai do topo. Ele continua na pagina — so deixa de
     ser a primeira coisa que a pessoa encontra ao abrir o evento. */
  #event-page #btn-delete-event {
    width: 100%; justify-content: center; margin-top: .3rem;
  }

  /* Uma informacao por linha (secao 37). O endereco vinha num campo ao
     lado do botao e aparecia cortado em "https://encontreme.ap". */
  #event-page div:has(> #event-public-url) { flex-direction: column; gap: .55rem !important; }
  #event-page #event-public-url { width: 100%; font-size: 15px; }
  #event-page div:has(> #event-public-url) .btn { width: 100%; justify-content: center; }

  #event-page .settings-row-value,
  #event-page .slug-tag { font-size: .84rem; word-break: break-word; }

  /* ── Acoes rapidas, 2x2 (secao 43) ─────────────────────────────────── */
  .m-rapidas { margin: 0 0 .2rem; }

  /* ── Miniatura e envio ─────────────────────────────────────────────── */
  #event-page #event-logo-preview { width: 100%; height: auto; aspect-ratio: 16/9; }
  #event-page #event-logo-card > div { flex-direction: column; align-items: stretch; }
  #event-page #event-logo-card .btn { width: 100%; justify-content: center; }

  #event-page .drop-zone { padding: 1.9rem 1rem; min-height: 150px; }
  #event-page .drop-zone p { font-size: .96rem; }

  /* progresso do envio (secoes 40 e 41): tem de dar para ler de longe */
  #upload-progress .progress-bar { height: 10px; border-radius: 99px; }
  #upload-progress #progress-label { font-size: .88rem !important; font-weight: 600; }

  /* ── Galeria (secao 39) ────────────────────────────────────────────── */
  .library-head { flex-wrap: wrap; gap: .6rem; }
  .view-toggle-btn { min-width: 44px; min-height: 44px; }    /* secao 34 */
  #btn-toggle-selection { min-height: 44px; }

  .photo-list.view-mode-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: .5rem;
  }

  /* barra de selecao: os botoes nao cabem numa linha so em 360px */
  #selection-toolbar { flex-wrap: wrap; gap: .5rem; }
  #selection-toolbar .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }

  /* ── Cabecalho quando estamos DENTRO de um evento ──────────────────── */
  .m-header.e-dentro .m-marca { display: none; }
  .m-voltar {
    display: none; align-items: center; gap: .5rem; min-width: 0;
    min-height: 44px; padding: 0; border: none; background: none;
    cursor: pointer; color: var(--m-tinta); font-family: inherit;
  }
  .m-header.e-dentro .m-voltar { display: inline-flex; }
  .m-voltar svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 2.2; }
  .m-voltar span {
    font-size: 1rem; font-weight: 800; letter-spacing: -.028em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100vw - 118px);
  }
  .m-voltar:active { opacity: .6; }

  /* ── Alvo pequeno que restou ───────────────────────────────────────────
     Medido, nao suposto: a marca do meu proprio cabecalho tinha 165x30.
     E link de verdade, que alguem vai tentar acertar com o polegar
     (secao 34). O irmao dela, "Ver os guias", saiu junto com o bloco
     "Comece por aqui" — regra sem alvo nao fica de lembranca. */
  .m-marca { min-height: 44px; }

}