/* Telas pequenas e celular (sempre por último) */

  @media (max-width: 980px){ html:not(.celular-ativo) .sidebar{ display:none; } }
  @media (max-width: 760px){ html.celular-ativo .sidebar{ display:none; } }
  @media (max-width: 980px){
    .content-dash{ grid-template-columns: 1fr; }
    .agenda-grid{ grid-template-columns: 1fr; }
    .topbar-search{ display:none; }
    table{ font-size:13px; }
  }

  /* ================= CELULAR (até 760px) ================= */
  .mobile-nav{ display:none; }
  .aviso-computador{ display:none; }
  @media (max-width: 760px){
    html.celular-ativo, html.celular-ativo body{ overflow-x:hidden; }
    html.celular-ativo .main{ overflow-x:hidden; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    html.celular-ativo .mobile-nav{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900; background:#fff; border-top:1px solid var(--border);
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px rgba(20,25,28,.06);
    }
    html.celular-ativo .mobile-nav button{
      flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; padding:6px 4px;
      font-family:inherit; font-size:11.5px; font-weight:700; color:var(--text-muted); cursor:pointer; border-radius:12px; min-height:52px;
    }
    html.celular-ativo .mobile-nav button.active{ color:var(--sidebar-bg); background:var(--pink-light); }
    html.celular-ativo .toast{ bottom: calc(86px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); }
    html.celular-ativo .topbar{ padding:14px 16px; gap:10px; }
    html.celular-ativo .page-title{ font-size:22px; }
    html.celular-ativo .page-subtitle{ font-size:13px; }
    html.celular-ativo body.modo-demo .topbar{ padding-top:30px; }
    html.celular-ativo body.modo-demo::after{ font-size:10.5px; padding:3px 10px; }
    html.celular-ativo .bell-btn{ display:none; }

    /* Modo demonstração: só no computador */
    html.celular-ativo .auth-demo{ display:none; }

    /* Áreas que ficam só no computador */
    html.celular-ativo .view.so-computador.active > :not(.aviso-computador){ display:none !important; }
    html.celular-ativo .view.so-computador.active > .aviso-computador{ display:block; }
    html.celular-ativo .aviso-computador{ margin:28px 16px; padding:28px 22px; background:#fff; border:1px solid var(--border); border-radius:16px; text-align:center; }
    html.celular-ativo .aviso-computador svg{ color:var(--gold); }
    html.celular-ativo .aviso-computador h2{ font-family:'Playfair Display', serif; font-size:20px; margin:12px 0 8px; color:var(--text-dark); }
    html.celular-ativo .aviso-computador p{ font-size:14px; color:var(--text-muted); line-height:1.5; margin:0 0 18px; }
    html.celular-ativo .aviso-computador button{ background:var(--sidebar-bg); color:#fff; border:none; border-radius:10px; padding:12px 18px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }

    /* Ficha da paciente: abas que ficam só no computador */
    html.celular-ativo .registro-tab[data-tab="planoskincare"], html.celular-ativo .registro-tab[data-tab="recomendacoes"]{ display:none !important; }
    html.celular-ativo .registro-tabs{ margin:14px 0 16px; }
    html.celular-ativo .registro-tab{ padding:9px 14px; font-size:13px; }

    /* Lista de pacientes: só nome, telefone e status */
    html.celular-ativo #view-pacientes table th:nth-child(3), html.celular-ativo #view-pacientes table td:nth-child(3),
    html.celular-ativo #view-pacientes table th:nth-child(4), html.celular-ativo #view-pacientes table td:nth-child(4){ display:none; }
    html.celular-ativo #view-pacientes table{ min-width:0 !important; width:100%; table-layout:auto; }
    html.celular-ativo #view-pacientes table th:nth-child(5), html.celular-ativo #view-pacientes table td:nth-child(5){ display:none; }
    html.celular-ativo #view-pacientes table td, html.celular-ativo #view-pacientes table th{ padding-left:8px; padding-right:8px; }
    html.celular-ativo #view-pacientes .phone-cell{ white-space:nowrap; font-size:12.5px; }

    /* Atendimento: botões empilhados e o de comanda em destaque */
    html.celular-ativo #apptDetComanda{ order:-1; }
  }

  /* ================= CELULAR — ajustes de layout (revisão 1) ================= */
  @media (max-width: 760px){
    /* 1. Margens menores: o conteúdo usa a largura da tela */
    html.celular-ativo .content-dash, html.celular-ativo .content-agenda,
    html.celular-ativo .content-pacientes, html.celular-ativo .content-registro{ padding:14px 12px 24px; }
    html.celular-ativo .content-dash, html.celular-ativo .col{ gap:14px; }
    html.celular-ativo .card{ padding:16px 14px 18px; }
    html.celular-ativo .card-table .card-head{ padding:16px 14px 4px; }
    html.celular-ativo .registro-card{ padding:18px 14px; }
    html.celular-ativo .schedule-card{ padding:16px 12px; }

    /* 7. Quadros vazios não ocupam meia tela */
    html.celular-ativo .empty-state{ padding:18px 8px; font-size:13.5px; }

    /* 2. Ficha: campos um embaixo do outro, nada cortado na direita */
    html.celular-ativo .content-registro .form-grid,
    html.celular-ativo .content-registro .checkbox-columns{ grid-template-columns:1fr; gap:14px; }
    html.celular-ativo .content-registro .form-grid > *{ min-width:0; }
    html.celular-ativo .content-registro input, html.celular-ativo .content-registro select,
    html.celular-ativo .content-registro textarea{ max-width:100%; box-sizing:border-box; }
    html.celular-ativo .content-registro textarea{ width:100%; }
    html.celular-ativo .photo-status-row{ gap:14px; margin-bottom:20px; }

    /* 3. Título repetido: o topo já diz "Registro de Paciente" */
    html.celular-ativo .content-registro > .page-title,
    html.celular-ativo .content-registro > .page-subtitle{ display:none !important; }
    html.celular-ativo .content-registro > .breadcrumb{ font-size:14px; }

    /* 4. Abas da ficha em grade: todas aparecem, sem precisar arrastar */
    html.celular-ativo .registro-tabs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; overflow:visible; margin:12px 0 14px; }
    html.celular-ativo .registro-tab{ justify-content:center; padding:10px 8px; font-size:12.5px; min-width:0; white-space:normal; text-align:center; line-height:1.2; }

    /* 5. Agenda: os horários do dia primeiro, o calendário do mês depois */
    html.celular-ativo .agenda-grid{ display:flex; flex-direction:column; gap:14px; }
    html.celular-ativo .agenda-grid > .schedule-card{ order:1; }
    html.celular-ativo .agenda-grid > .agenda-lateral{ order:2; width:100%; align-self:stretch; }

    /* 6. Lista de pacientes: nome numa linha só */
    html.celular-ativo #view-pacientes .patient-avatar{ display:none; }
    html.celular-ativo #view-pacientes .patient-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:44vw; }
    html.celular-ativo #view-pacientes .filter-bar{ gap:8px; }
  }