/************************************************************
  RESPONSIVO — LOGIN (index.php)
  Observação: só toca classes .auth-* (seguro para outras páginas)
*************************************************************/

/* ---------- Tipografia fluida para títulos e inputs ---------- */
:root{
  /* tamanhos “inteligentes” — escalam com a largura (sem quebrar layout) */
  --auth-fs-12: clamp(12px, 1.8vw, 13px);
  --auth-fs-14: clamp(13px, 2.1vw, 15px);
  --auth-fs-28: clamp(22px, 4.6vw, 28px);
}

/* aplica apenas no login */
.auth-title { font-size: var(--auth-fs-28); }
.auth-form input,
.auth-btn     { font-size: var(--auth-fs-14); }

/* ---------- Área “tocável” para dedos (guidelines iOS/Android) ---------- */
.auth-form input,
.auth-btn,
.auth-toggle {
  min-height: 44px;
}

/* ---------- Cartão central: largura adaptativa ---------- */
.auth-card{
  width: min(420px, 92vw);     /* limita no desktop, cabe no mobile */
  margin: 6vh auto;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ---------- Campos com ícone à esquerda e botão de mostrar senha ---------- */
.auth-field{
  position: relative;
  display: block;
  margin-bottom: 12px;
  padding-left: 38px;  /* espaço pro ícone */
}

.auth-field .auth-icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events:none;
}

.auth-field input{
  width: 100%;
  padding: 12px 44px 12px 10px; /* espaço pro olho à direita */
}

/* botão “mostrar/ocultar senha” maior pra toque */
.auth-toggle{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px; height: 36px;
  border: none; background: transparent; cursor: pointer;
  color: inherit;
}

/* ---------- Mensagem de erro melhor distribuída ---------- */
.auth-error{
  margin: 6px 0 12px 0;
  font-size: var(--auth-fs-12);
  line-height: 1.35;
}

/* ---------- Botão principal adaptável ---------- */
.auth-btn{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
}

/* ---------- Safe-area (iPhone com notch) ---------- */
@supports (padding: max(0px)){
  body.auth-bg{
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
}

/* ---------- Redução de movimento (acessibilidade) ---------- */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ---------- Foco visível para teclado ---------- */
.auth-card :focus-visible{
  outline: 3px solid rgba(192,150,116,.75);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ===================== BREAKPOINTS ===================== */

/* —— Mobile estreito (≤ 380px) —— */
@media (max-width: 380px){
  .auth-card{ margin: 4vh auto; padding: 16px; }
  .auth-field{ padding-left: 34px; }
  .auth-field input{ padding: 12px 40px 12px 8px; }
  .auth-toggle{ width: 34px; height: 34px; right: 6px; }
}

/* —— Smartphones (≤ 480px) —— */
@media (max-width: 480px){
  body.auth-bg{ padding: 14px; }
  .auth-card{ width: 100%; }
}

/* —— Tablets (481px–900px) —— */
@media (min-width: 481px) and (max-width: 900px){
  .auth-card{ width: min(520px, 92vw); }
}

/* —— Notebook/desktop médios (901px–1366px): mantemos o cartão central — nada a mudar por padrão —— */

/* —— Ultrawide (≥ 1600px): aumenta respiro vertical —— */
@media (min-width: 1600px){
  .auth-card{ margin: 10vh auto; }
}



/************************************************************
  RESPONSIVO — PAINEL ADMIN (painel.php)
  Classes tocadas: .sidebar-menu, .container-painel, .painel-header,
  .metricas, .metric-box, .main, .section-linha, .section-barras,
  .section-pizza, .bar-container, .card, .card--line, .card--bar,
  .card--donut
*************************************************************/

/* Alturas dos gráficos controladas por variáveis */
:root{
  /* desktop padrão */
  --h-line: 360px;      /* Sessões por Mês (linha)  */
  --h-bar: 320px;       /* Barras (duas colunas)    */
  --h-donut: 280px;     /* Donuts (duas colunas)    */
}

/* -------------- Layout base (desktop) -------------- */
/* nada de especial aqui — seguimos seu style.css */

/* -------------- ≥ 1400px (largas): um pouco mais de respiro -------------- */
@media (min-width: 1400px){
  :root{
    --h-line: 420px;
    --h-bar: 360px;
    --h-donut: 300px;
  }
  .container-painel{ padding-right: 28px; }
}

/* -------------- 1200px–1399px: mantém 2 colunas, ajusta alturas -------------- */
@media (min-width: 1200px) and (max-width: 1399px){
  :root{
    --h-line: 380px;
    --h-bar: 330px;
    --h-donut: 290px;
  }
}

/* -------------- ≤ 1199px (tablets landscape / notebooks pequenos) -------------- */
@media (max-width: 1199px){

  /* Sidebar vira barra superior */
  .sidebar-menu{
    position: static;
    width: 100%;
    max-width: none;
    border-radius: 14px;
    margin: 12px 16px 0;
    padding: 12px 14px;
  }
  .sidebar-menu .brand{
    display: flex; align-items: center; gap: 10px;
  }
  .sidebar-menu nav{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
  }
  .sidebar-menu nav a{
    padding: 8px 10px; border-radius: 8px;
    white-space: nowrap;
  }
  .sidebar-menu .btn-sair{ margin-left: auto; }

  /* Conteúdo agora ocupa 100% */
  .container-painel{
    margin-left: 0 !important;
    padding: 8px 16px 24px;
  }

  /* Métricas (cards) em 2 colunas */
  .painel-header .metricas{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Cartões de gráfico com alturas suavizadas */
  :root{
    --h-line: 340px;
    --h-bar: 300px;
    --h-donut: 260px;
  }

  .section-barras .bar-container{
    display: grid; gap: 12px;
    grid-template-columns: 1fr 1fr;
  }
  .section-pizza{
    display: grid; gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .card--line  { height: var(--h-line);  }
  .card--bar   { height: var(--h-bar);   }
  .card--donut { height: var(--h-donut); }
}

/* -------------- ≤ 900px (tablets portrait) -------------- */
@media (max-width: 900px){

  /* Métricas: 2 colunas ainda, fontes um pouco menores se necessário */
  .painel-header h1{ font-size: clamp(18px, 4.2vw, 22px); }
  .metric-box .valor{ font-size: clamp(18px, 5vw, 22px); }

  /* Grids: passa a 1 coluna (cada gráfico ocupa a linha toda) */
  .section-barras .bar-container{ grid-template-columns: 1fr; }
  .section-pizza{ grid-template-columns: 1fr; }

  :root{
    --h-line: 320px;
    --h-bar: 300px;
    --h-donut: 280px;
  }
}

/* -------------- ≤ 680px (smartphones grandes) -------------- */
@media (max-width: 680px){

  /* Barra superior (ex-sidebar) com rolagem horizontal caso muitos links */
  .sidebar-menu nav{
    overflow-x: auto; scrollbar-width: thin;
    gap: 6px;
  }
  .sidebar-menu nav a{
    flex: 0 0 auto;
  }

  /* Métricas em 2 colunas justinhas */
  .painel-header .metricas{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Alturas de gráfico para caber sem scroll excessivo */
  :root{
    --h-line: 280px;
    --h-bar: 260px;
    --h-donut: 240px;
  }

  .card{ padding: 10px; border-radius: 12px; }
  .card h3{ font-size: clamp(14px, 3.8vw, 16px); }
}

/* -------------- ≤ 480px (smartphones) -------------- */
@media (max-width: 480px){

  /* Métricas em 1 coluna */
  .painel-header .metricas{
    grid-template-columns: 1fr;
  }

  /* Mais respiro nas laterais */
  .container-painel{
    padding-left: 12px; padding-right: 12px;
  }

  /* Alturas finais enxutas */
  :root{
    --h-line: 240px;
    --h-bar: 220px;
    --h-donut: 220px;
  }

  /* Títulos e textos dos cartões */
  .card h3{ font-size: 14px; }
}

/* -------------- Acessibilidade & safe-area -------------- */
@supports (padding: max(0px)){
  .container-painel{
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
}

/* Redução de movimento continua valendo do bloco global */


/**********************
  MENU MOBILE (PAINEL)
**********************/
@media (max-width: 900px){

  /* Esconde a sidebar desktop no mobile */
  .sidebar-menu{ display:none; }

  /* Appbar fixo no topo */
  .appbar-mobile{
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: var(--sand, #e9d8c9);
    color: var(--ink, #5c3d27);
    padding: 10px 14px;
    border-radius: 14px;
    margin: 12px 12px 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
  }

  .appbar-title{ display:flex; align-items:center; gap:10px; }
  .appbar-title img{ width:36px; height:36px; object-fit:cover; border-radius:10px; }
  .appbar-name strong{ display:block; line-height:1.1; font-size:14px; }
  .appbar-name small{ color: var(--muted, #6e5b4e); font-size:12px; }

  .appbar-logout{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--brand, #b07b58); color:#fff;
    border-radius:10px; padding:8px 12px; text-decoration:none; font-weight:700;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  .appbar-logout:hover{ background: var(--brand-dark, #8f644a); }

  /* Botão hamburguer */
  .hamburger{
    display:inline-flex; flex-direction:column; gap:4px;
    width:36px; height:36px; border-radius:10px;
    border:1px solid rgba(0,0,0,.06); background:#fff; cursor:pointer;
    align-items:center; justify-content:center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .hamburger span{
    display:block; width:18px; height:2px; background:#7b685c; border-radius:2px;
  }

  /* Gaveta lateral (off-canvas) */
  .mobile-drawer{
    position: fixed; inset: 0 auto 0 0; /* top,right,bottom,left */
    width: 86vw; max-width: 360px; height: 100vh;
    background: #fff; color: var(--ink, #5c3d27);
    transform: translateX(-100%); transition: transform .28s ease;
    z-index: 70; box-shadow: 6px 0 28px rgba(0,0,0,.18);
    border-top-right-radius: 16px; border-bottom-right-radius: 16px;
    display:flex; flex-direction:column;
  }
  .mobile-drawer.open{ transform: translateX(0); }

  .drawer-backdrop{
    position: fixed; inset:0; background: rgba(0,0,0,.28);
    opacity:0; pointer-events:none; transition: opacity .2s ease; z-index: 65;
  }
  .drawer-backdrop.show{ opacity:1; pointer-events:auto; }

  .drawer-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 14px 8px; border-bottom:1px solid #f0e6d8;
  }
  .brand-mini{ display:flex; align-items:center; gap:10px; }
  .brand-mini img{ width:36px; height:36px; border-radius:10px; object-fit:cover; }
  .drawer-close{
    font-size:28px; line-height:1; border:none; background:transparent; cursor:pointer;
    color:#7b685c; padding:4px 8px; border-radius:8px;
  }

  .drawer-nav{
    display:flex; flex-direction:column; gap:8px; padding:12px 14px 18px;
    overflow:auto;
  }
  .drawer-nav a{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color: var(--ink, #5c3d27); font-weight:700;
    padding:10px 12px; border:1px solid #e8dccf; border-radius:10px; background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
  }
  .drawer-nav a:hover{ background:#f7efe7; }

  .drawer-nav .drawer-logout{
    background: #fde9e7; color:#b64433; border-color:#f5c9c4;
  }

  /* Evita que o topo cubra o conteúdo */
  .container-painel{ padding-top: 4px; }
  body.drawer-open{ overflow:hidden; }
}

/**********************
  DESKTOP — SIDEBAR FIXA BONITA
**********************/
@media (min-width: 901px){
  :root{
    --sidebar-w: 260px;           /* largura da sidebar */
    --gutter: 16px;               /* respiro lateral */
  }

  /* Esconde os elementos de menu mobile no desktop */
  .appbar-mobile,
  .mobile-drawer,
  .drawer-backdrop { display: none !important; }

  /* Sidebar fixa, com rolagem própria */
  .sidebar-menu{
    position: fixed;
    top: var(--gutter);
    left: var(--gutter);
    width: var(--sidebar-w);
    height: calc(100vh - var(--gutter) * 2);
    overflow: auto;
    background: var(--sand, #e9d8c9);
    color: var(--ink, #5c3d27);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    padding: 12px 12px 16px;
    z-index: 30;
  }

  .sidebar-menu .brand{
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 12px; border-bottom: 1px solid #eadfd1; margin-bottom: 10px;
  }
  .sidebar-menu .brand img{
    width: 44px; height: 44px; object-fit: cover; border-radius: 12px;
  }
  .sidebar-menu .titulo-sidebar{
    margin: 6px 4px 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #8f644a;
  }
  .sidebar-menu nav{
    display: flex; flex-direction: column; gap: 8px;
  }
  .sidebar-menu nav a{
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e8dccf;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink, #5c3d27);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: background .18s ease, transform .06s ease;
    white-space: nowrap;
  }
  .sidebar-menu nav a:hover{
    background: #f7efe7; transform: translateY(-1px);
  }
  .sidebar-menu nav a.btn-sair{
    background: #fde9e7; color: #b64433; border-color: #f5c9c4;
  }

  /* Empurra o conteúdo pra não ficar por baixo da sidebar */
  .container-painel{
    margin-left: calc(var(--sidebar-w) + var(--gutter) * 2);
    margin-right: var(--gutter);
  }

  /* Cabeçalho do painel com respiro adequado */
  .painel-header{
    margin-top: var(--gutter);
  }
}

/* OPCIONAL: se aparecer aquela linha de links “soltos” acima do painel, esconda.
   Se não precisar, pode remover este bloco. */
@media (min-width: 901px){
  .container-painel > .painel-header + .main > a {
    display: none !important;
  }
}



/************************************************************
  RESPONSIVO — AGENDAMENTOS (agendamentos/lista.php)
  Toca apenas estruturas desta página:
  .pagina-header, .ph-*, .painel-tabela, #tabela-agenda (DataTables),
  .tag, .btn-mini, .btn-voltar-top
*************************************************************/

/* ---------- Tipografia fluida e áreas tocáveis ---------- */
:root{
  --ag-fs-12: clamp(12px, 1.8vw, 13px);
  --ag-fs-14: clamp(13px, 2.1vw, 15px);
  --ag-fs-16: clamp(14px, 2.6vw, 16px);
  --ag-fs-22: clamp(18px, 4.2vw, 22px);
}

.pagina-header h1{ font-size: var(--ag-fs-22); line-height: 1.15; }
.pagina-header p{ font-size: var(--ag-fs-14); }

.btn-voltar-top,
.btn-mini{
  min-height: 40px; /* dedo feliz */
  font-size: var(--ag-fs-14);
}

/* ---------- Header alinhável ---------- */
.pagina-header{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.pagina-header .ph-left{ display:none; } /* slot livre, escondido por ora */
.pagina-header .ph-center{ min-width: 0; }
.pagina-header .ph-actions{ display:flex; gap: 8px; }

/* ---------- Tabela responsiva (overflow + colunas prioritárias) ---------- */
.painel-tabela{
  margin: 12px 16px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* wrapper para permitir scroll horizontal sem quebrar layout */
.painel-tabela::before{ content:""; display:block; }
.painel-tabela{ overflow-x: auto; }
#tabela-agenda{ width: 100%; min-width: 860px; } /* largura mínima saudável */

/* Células: respiro compacto mas tocável */
#tabela-agenda th,
#tabela-agenda td{
  padding: 10px 12px;
  font-size: var(--ag-fs-14);
  vertical-align: middle;
  white-space: nowrap; /* evita quebra feia em datas/ações */
}
#tabela-agenda td:nth-child(2),  /* Paciente */
#tabela-agenda td:nth-child(7),  /* Especialidade */
#tabela-agenda td:nth-child(8){  /* Procedimento */
  white-space: normal; /* esses podem quebrar */
}

/* Badges (status/pagamento) escaláveis */
.tag{
  font-size: var(--ag-fs-12);
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Ações: botões em linha no desktop */
#tabela-agenda td:last-child .btn-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 10px; border-radius:10px; margin: 2px 4px 2px 0;
}

/* ---------- DataTables (filtros/paginação) ---------- */
.dataTables_wrapper{
  padding: 12px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin: 6px 0;
}
.dataTables_wrapper .dataTables_filter input{
  font-size: var(--ag-fs-14);
  min-height: 38px;
}
.dataTables_wrapper .dataTables_paginate{
  display:flex; flex-wrap: wrap; gap: 6px;
}
.dataTables_wrapper .dataTables_info{
  font-size: var(--ag-fs-12);
}

/* ===================== BREAKPOINTS ===================== */

/* —— ≥ 1400px: respiro maior —— */
@media (min-width: 1400px){
  .painel-tabela{ margin: 16px 20px 28px; }
}

/* —— ≤ 1199px: ajustes gerais e esconder colunas menos críticas —— */
@media (max-width: 1199px){
  /* Header: empilhar */
  .pagina-header{
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .pagina-header .ph-actions{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* DataTables controles lado a lado, quebram se necessário */
  .dataTables_wrapper{
    display:grid;
    gap: 8px;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter{
    display:flex; align-items:center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
  }
  .dataTables_wrapper .dataTables_filter{
    justify-content: flex-end;
  }

  /* Esconder colunas de baixa prioridade */
  /* 1 ID, 5 Hora Fim, 8 Procedimento, 9 Frequência */
  #tabela-agenda th:nth-child(1),
  #tabela-agenda td:nth-child(1),
  #tabela-agenda th:nth-child(5),
  #tabela-agenda td:nth-child(5),
  #tabela-agenda th:nth-child(8),
  #tabela-agenda td:nth-child(8),
  #tabela-agenda th:nth-child(9),
  #tabela-agenda td:nth-child(9){
    display: none;
  }
}

/* —— ≤ 900px: foco em informações essenciais —— */
@media (max-width: 900px){
  /* esconder mais algumas colunas para caber sem scroll horizontal demais */
  /* 7 Especialidade, 10 Clínica */
  #tabela-agenda th:nth-child(7),
  #tabela-agenda td:nth-child(7),
  #tabela-agenda th:nth-child(10),
  #tabela-agenda td:nth-child(10){
    display:none;
  }

  /* Ações empilhadas verticalmente */
  #tabela-agenda td:last-child .btn-mini{
    display:flex;
    width: 100%;
    justify-content: center;
    margin: 6px 0;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter{
    flex-direction: column; align-items: stretch;
  }
  .dataTables_wrapper .dataTables_filter input{
    width: 100%;
  }
}

/* —— ≤ 680px: visão super compacta —— */
@media (max-width: 680px){
  /* esconder Fisioterapeuta (3) para manter Paciente/Data/Status/Pagamento/Ações */
  #tabela-agenda th:nth-child(3),
  #tabela-agenda td:nth-child(3){
    display:none;
  }

  /* compactar padding da tabela */
  #tabela-agenda th,
  #tabela-agenda td{ padding: 8px 10px; }

  /* Botão voltar: full width */
  .btn-voltar-top{ display:flex; width: 100%; justify-content:center; }
}

/* —— ≤ 560px: última redução — deixa só o essencial —— */
@media (max-width: 560px){
  /* esconder Tipo (6) — mantemos: Paciente (2), Data/Hora (4),
     Status (11), Pagamento (12), Ações (13) */
  #tabela-agenda th:nth-child(6),
  #tabela-agenda td:nth-child(6){
    display:none;
  }

  /* Títulos menores */
  .pagina-header h1{ font-size: clamp(17px, 5vw, 20px); }
  .pagina-header p{ font-size: var(--ag-fs-12); }

  /* Badges mais compactas */
  .tag{ padding: 3px 8px; }
}

/* ---------- Safe-area (iPhone com notch) ---------- */
@supports (padding: max(0px)){
  .painel-tabela{
    margin-left:  max(12px, env(safe-area-inset-left));
    margin-right: max(12px, env(safe-area-inset-right));
    margin-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ---------- Redução de movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .painel-tabela,
  .dataTables_wrapper,
  #tabela-agenda,
  .btn-mini{ transition: none !important; }
}