/* ============================================================
   CAREPEOPLE-CUIDADORES — Estilos Mobile
   Arquivo: mobile.css
   Breakpoints: max-width 768px (tablet/celular)
   ============================================================ */

/* ── UTILITÁRIOS MOBILE ───────────────────────────────────── */
.mob-hidden  { display: none !important; }
.mob-only    { display: none; }
/* desk-only: visível por padrão no desktop, oculto no mobile via media query */
.desk-only   { display: inline-flex; }
a.desk-only  { display: inline-flex; }
div.desk-only{ display: flex; }
button.desk-only { display: inline-flex; }

@media (max-width: 768px) {

  /* ── RESET GERAL ── */
  body { font-size: 14px; overflow-x: hidden; }

  /* ── UTILITÁRIOS ── */
  .mob-only    { display: block !important; }
  .desk-only   { display: none !important; }

  /* ══════════════════════════════════════════════════════════
     NAVBAR MOBILE — hamburguer menu
  ══════════════════════════════════════════════════════════ */
  .nav {
    height: 52px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Esconde links extras da navbar no mobile */
  .nav .nav-link:not(.mob-keep),
  .nav a.nav-btn-dest,
  .nav-btn-ajuda,
  .nav div[style*="text-align:right"],
  .nav a[href="curriculo.php"] { display: none !important; }

  /* Menu hamburguer */
  .mob-menu-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Drawer lateral */
  .mob-drawer {
    position: fixed;
    top: 0; left: -280px;
    width: 280px; height: 100%;
    background: #0d1f5c;
    z-index: 999;
    transition: left .25s ease;
    padding: 20px;
    overflow-y: auto;
  }
  .mob-drawer.open { left: 0; }
  .mob-drawer-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 998;
    display: none;
  }
  .mob-drawer-overlay.open { display: block; }
  .mob-drawer-logo {
    font-size: 18px;
    font-weight: 500;
    font-style: italic;
    color: #fff;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mob-drawer-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 22px;
    cursor: pointer;
  }
  .mob-drawer a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 14px;
  }
  .mob-drawer a:hover { color: #fff; }

  /* ══════════════════════════════════════════════════════════
     LAYOUT GERAL
  ══════════════════════════════════════════════════════════ */

  /* Esconde sidebars no mobile */
  .ptabs, .sidebar { display: none !important; }

  /* Remove layout flex do prontuário e currículo */
  .layout { flex-direction: column; overflow: visible; }

  /* Abas horizontais no topo (prontuário mobile) */
  .mob-abas-scroll {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mob-abas-scroll::-webkit-scrollbar { display: none; }
  .mob-aba-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
  .mob-aba-btn.active {
    background: #1e3a8a;
    color: #fff;
    border-color: #1e3a8a;
  }

  /* Painéis */
  .pane { display: none; }
  .pane.active { display: block; }

  /* ══════════════════════════════════════════════════════════
     CARDS E GRIDS
  ══════════════════════════════════════════════════════════ */

  /* Cards grid: 1 coluna */
  .cards-grid {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  /* Grids de 2-4 colunas → 1 coluna */
  .g2, .g3, .g4,
  .form-row.c2, .form-row.c3, .form-row.c4 {
    grid-template-columns: 1fr !important;
  }

  /* Stats: 2 colunas no mobile */
  .stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Card padding menor */
  .card { padding: 14px !important; }
  .card-hdr { padding: 12px 14px !important; }
  .content { padding: 12px !important; }

  /* ══════════════════════════════════════════════════════════
     TABELAS → CARDS EMPILHADOS
  ══════════════════════════════════════════════════════════ */
  .mob-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mob-table-wrap table { min-width: 480px; }

  /* ══════════════════════════════════════════════════════════
     TELA PROFISSIONAL
  ══════════════════════════════════════════════════════════ */
  .bv {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .bv .stat-chips, .bv > div:last-child {
    width: 100%;
    justify-content: space-between;
  }
  .stat-mini { min-width: 0 !important; flex: 1; }

  /* Botões do card de acompanhado */
  .btns { gap: 8px !important; }
  .btns .btn { padding: 8px 10px !important; font-size: 12px !important; }

  /* ══════════════════════════════════════════════════════════
     TELA DE ATENDIMENTO
  ══════════════════════════════════════════════════════════ */
  .pac-hdr { padding: 12px 14px !important; }

  /* Chips de acesso rápido: scroll horizontal */
  .chips-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chips-bar::-webkit-scrollbar { display: none; }
  .chip-btn { flex-shrink: 0 !important; font-size: 11px !important; padding: 5px 10px !important; }

  /* Tabela de atividades mobile */
  .mob-ativ-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .mob-ativ-card.concluida { border-left: 3px solid #059669; background: #f0fdf4; }
  .mob-ativ-card.pendente  { border-left: 3px solid #d97706; }

  /* Esconde tabela de atividades e mostra cards no mobile */
  .mob-hide-table { display: none !important; }
  .mob-show-cards { display: block !important; }

  /* ══════════════════════════════════════════════════════════
     AGENDA — visão simplificada mobile
  ══════════════════════════════════════════════════════════ */
  .cal-wrap { display: none !important; }
  .sidebar  { display: none !important; }

  /* Agenda mobile: lista de atendimentos */
  .mob-agenda {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0 12px 20px;
  }
  .mob-agenda-dia {
    margin-bottom: 16px;
  }
  .mob-agenda-dia-hdr {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 0 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
  }
  .mob-agenda-dia-hdr.hoje { color: #1e3a8a; }
  .mob-evento-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    text-decoration: none;
  }
  .mob-evento-barra {
    width: 4px;
    border-radius: 2px;
    align-self: stretch;
    flex-shrink: 0;
    min-height: 44px;
  }
  .mob-evento-nome { font-size: 13px; font-weight: 500; color: #0d1f5c; }
  .mob-evento-sub  { font-size: 11px; color: #64748b; margin-top: 2px; }
  .mob-sem-eventos { text-align: center; color: #94a3b8; padding: 20px 0; font-size: 13px; }

  /* Toolbar da agenda mobile */
  .toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .info-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  .info-bar > div { width: 100%; }
  .stat-chips { justify-content: space-between; width: 100%; }
  .btn-add, .btn-pac { width: 100%; justify-content: center; }

  /* ══════════════════════════════════════════════════════════
     PRONTUÁRIO MOBILE
  ══════════════════════════════════════════════════════════ */
  .subhdr {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }

  /* ══════════════════════════════════════════════════════════
     CURRÍCULO MOBILE
  ══════════════════════════════════════════════════════════ */
  .sidebar { display: none !important; }
  .pane-titulo { font-size: 18px !important; }
  .avatar-wrap { margin-right: 0 !important; margin-bottom: 16px !important; }
  .avatar-grande { width: 70px !important; height: 70px !important; font-size: 22px !important; }
  .check-grid { grid-template-columns: 1fr !important; }
  .form-row.c3 { grid-template-columns: 1fr !important; }

  /* Plano box mobile */
  .plano-box { flex-direction: column !important; text-align: center; }

  /* ══════════════════════════════════════════════════════════
     MODAIS MOBILE
  ══════════════════════════════════════════════════════════ */
  .modal-wrap { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 14px 14px 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ══════════════════════════════════════════════════════════
     HOME / LOGIN MOBILE
  ══════════════════════════════════════════════════════════ */
  /* Esconde o hero no mobile, mostra só o login */
  .hero-left { display: none !important; }
  #login-box {
    width: 100% !important;
    min-height: 100vh;
    border-left: none !important;
    padding: 24px 20px !important;
  }

  /* ══════════════════════════════════════════════════════════
     ADMIN MOBILE
  ══════════════════════════════════════════════════════════ */
  .layout { display: block !important; }
  .sidebar { display: none !important; }

  /* Tabs horizontais para admin */
  .mob-admin-tabs {
    display: flex !important;
    overflow-x: auto;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mob-admin-tabs::-webkit-scrollbar { display: none; }

  /* ══════════════════════════════════════════════════════════
     BOTÕES MOBILE
  ══════════════════════════════════════════════════════════ */
  /* Botões de ação ocupam largura total */
  .mob-btn-full {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Botão flutuante de ação principal (FAB) */
  .mob-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(30,58,138,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    text-decoration: none;
  }

  /* ══════════════════════════════════════════════════════════
     BARRA DE NAVEGAÇÃO INFERIOR (Bottom Nav)
  ══════════════════════════════════════════════════════════ */
  .mob-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    display: flex !important;
    z-index: 90;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  }
  .mob-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    text-decoration: none;
    color: #64748b;
    font-size: 10px;
    gap: 3px;
    transition: color .15s;
  }
  .mob-bottom-nav a.active { color: #1e3a8a; }
  .mob-bottom-nav a span:first-child { font-size: 20px; }

  /* Espaço para o bottom nav não cobrir conteúdo */
  body { padding-bottom: 64px; }

  /* ══════════════════════════════════════════════════════════
     TIPOGRAFIA MOBILE
  ══════════════════════════════════════════════════════════ */
  h1, .pane-titulo { font-size: 18px !important; }
  .titulo-semana   { font-size: 12px !important; }

  /* ══════════════════════════════════════════════════════════
     FORMULÁRIOS MOBILE
  ══════════════════════════════════════════════════════════ */
  input, select, textarea {
    font-size: 16px !important; /* evita zoom automático no iOS */
    padding: 10px 12px !important;
  }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important;
  }

  /* ══════════════════════════════════════════════════════════
     FOOTER MOBILE
  ══════════════════════════════════════════════════════════ */
  .footer { display: none; } /* footer fica escondido por causa do bottom nav */

} /* fim @media 768px */

/* Tablet (769px - 1024px) — ajustes menores */
@media (min-width: 769px) and (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .g3, .form-row.c3, .form-row.c4 { grid-template-columns: 1fr 1fr !important; }
  .ptabs { width: 160px !important; }
  .sidebar { width: 180px !important; }
}