/* Home Care — camada MOBILE (DEC-055, André 20/07). Regra do André: "não muda o desktop,
   só cria a versão mobile". Por isso quase tudo mora dentro do @media de tela estreita; o
   único elemento novo é a barra de progresso, escondida no desktop. Desktop (>760px) intacto. */
.hc-prog{ display:none; }

@media (max-width:760px){
  /* raiz ocupa a largura toda do celular */
  .hc-tela{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }

  /* barra de progresso do dia (só no celular) */
  .hc-prog{ display:flex; align-items:center; gap:10px; margin:2px 2px 14px; }
  .hc-prog .hc-bar{ flex:1; height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
  .hc-prog .hc-bar i{ display:block; height:100%; background:var(--green); border-radius:99px; transition:width .4s ease; }
  .hc-prog b{ font-size:13px; font-weight:700; color:var(--green); white-space:nowrap; }

  /* Enfermagem: 3 colunas (Feitas · Agora · Próximas) viram 1 empilhada; AGORA sobe pro topo */
  .hc-cols{ grid-template-columns:1fr !important; gap:16px !important; }
  .hc-col-agora{ order:-1; }

  /* ADM: 4 colunas viram 1 */
  .hc-adm-grid{ grid-template-columns:1fr !important; }

  /* barra de ações do topo: botões grandes, 2 por linha, bons no dedo */
  #hcAcoesTopo{ gap:8px !important; }
  .hc-act{ flex:1 1 44% !important; justify-content:center; padding:14px 10px !important;
    font-size:15px !important; border-radius:12px !important; }

  /* cartão AGORA: mais respiro e botões grandes */
  .hc-agora-card{ padding:14px !important; }
  .hc-agora-card button{ padding:13px 14px !important; font-size:15px !important; border-radius:10px !important; }

  /* Barra de cima do app (.subhead) no Home Care: no celular ela não quebrava linha e os controles
     de data (que o Home Care nem usa — é sempre "hoje") empurravam os botões de ação pra fora da
     tela pela direita. Escopo body.hc-ativo (só no Home Care) — as outras telas ficam intactas. */
  body.hc-ativo .subhead{ flex-wrap:wrap !important; gap:8px !important; padding:8px 10px !important; }
  body.hc-ativo .subhead .dia-resumo,
  body.hc-ativo .subhead .data-label,
  body.hc-ativo .subhead .ir-data,
  body.hc-ativo .subhead > button{ display:none !important; }   /* data + ‹ Hoje › somem no Home Care mobile */
  body.hc-ativo #hcAcoesTopo{ flex:1 1 100% !important; min-width:0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ENFERMAGEM no CELULAR — refeita pra bater com o mockup aprovado pelo André (20/07).
   Camada 100% mobile: o JS (hcRender) só emite a marcação `.hcm-*` quando a tela é
   estreita (matchMedia ≤760). Tudo aqui mora dentro do @media ≤760 → o DESKTOP não
   vê nada disto e continua idêntico. Cores puxam os tokens do app (var(--acento),
   --green, --red…) via color-mix, então acompanham o tema claro/escuro sozinhas.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .hcm{
    --hcm-teal:var(--acento); --hcm-ok:var(--green); --hcm-danger:var(--red);
    --hcm-card:var(--superficie); --hcm-line:var(--line); --hcm-ink:var(--ink); --hcm-soft:var(--ink-soft);
    --hcm-teal-bg:color-mix(in srgb, var(--acento) 12%, var(--superficie));
    --hcm-teal-ink:color-mix(in srgb, var(--acento) 72%, var(--ink));
    --hcm-ok-bg:color-mix(in srgb, var(--green) 12%, var(--superficie));
    --hcm-ok-line:color-mix(in srgb, var(--green) 34%, var(--superficie));
    --hcm-danger-bg:color-mix(in srgb, var(--red) 10%, var(--superficie));
    --hcm-danger-line:color-mix(in srgb, var(--red) 32%, var(--superficie));
    --hcm-amber:#b45309; --hcm-amber-bg:color-mix(in srgb,#b45309 12%, var(--superficie));
    max-width:560px; margin:0 auto; padding:2px 12px 44px;
    color:var(--hcm-ink);
  }

  /* cabeçalho: nome + plantão + dia + abas (tudo num cartão, como no mockup) */
  .hcm-head{ background:var(--hcm-card); border:1px solid var(--hcm-line); border-radius:16px; padding:14px 16px 12px; margin:8px 0 4px; }
  .hcm-toprow{ display:flex; align-items:center; gap:10px; }
  .hcm-pat{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
  .hcm-pat .hcm-home{ color:var(--hcm-teal); }
  .hcm-plant{ margin-left:auto; display:flex; align-items:center; gap:7px; font:inherit; font-size:13px; color:var(--hcm-soft);
    background:none; border:0; cursor:pointer; padding:4px; border-radius:99px; }
  .hcm-plant:active{ background:var(--hcm-line); }
  .hcm-ava{ width:26px; height:26px; border-radius:50%; background:var(--hcm-teal-bg); color:var(--hcm-teal-ink);
    display:grid; place-items:center; font-size:12px; font-weight:700; }
  .hcm-day{ margin-top:6px; font-size:13px; color:var(--hcm-soft); }
  .hcm-seg{ display:flex; gap:4px; margin-top:12px; background:var(--fundo); border:1px solid var(--hcm-line); border-radius:12px; padding:4px; }
  .hcm-seg button{ flex:1; border:0; background:transparent; color:var(--hcm-soft); font:inherit; font-size:13.5px; font-weight:600;
    padding:9px 6px; border-radius:9px; cursor:pointer; white-space:nowrap; }
  .hcm-seg button[aria-selected="true"]{ background:var(--hcm-card); color:var(--hcm-ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }

  /* barra de progresso do dia */
  .hcm-prog{ display:flex; align-items:center; gap:10px; margin:14px 2px 2px; }
  .hcm-bar{ flex:1; height:8px; border-radius:99px; background:var(--hcm-line); overflow:hidden; }
  .hcm-bar i{ display:block; height:100%; background:var(--hcm-ok); border-radius:99px; transition:width .4s ease; }
  .hcm-prog b{ font-size:13px; font-weight:700; color:var(--hcm-ok); white-space:nowrap; font-variant-numeric:tabular-nums; }

  /* rótulos de seção */
  .hcm-lbl{ font-size:11.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--hcm-soft); margin:22px 2px 9px; }
  .hcm-lbl.now{ color:var(--hcm-teal); }
  .hcm-lbl-sub{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--hcm-soft); }

  /* AGORA — cartão grande em destaque */
  .hcm-now{ background:linear-gradient(180deg,var(--hcm-teal-bg),var(--hcm-card) 46%); border:1.5px solid var(--hcm-teal);
    border-radius:16px; padding:16px; margin-bottom:10px; }
  .hcm-now-top{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
  .hcm-chip{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--hcm-teal-bg); color:var(--hcm-teal-ink);
    font-variant-numeric:tabular-nums; }
  .hcm-now-med{ font-size:22px; font-weight:700; letter-spacing:-.4px; margin:8px 0 2px; }
  .hcm-now-sub{ font-size:13.5px; color:var(--hcm-soft); margin-bottom:14px; }
  .hcm-acts{ display:flex; gap:10px; margin-top:12px; }
  .hcm-btn{ flex:1; border:0; font:inherit; font-size:16px; font-weight:700; padding:15px; border-radius:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px; -webkit-tap-highlight-color:transparent; }
  .hcm-btn:active{ transform:scale(.97); }
  .hcm-btn-ok{ background:var(--hcm-ok); color:#fff; }
  .hcm-btn-no{ background:var(--hcm-card); color:var(--hcm-danger); border:1.5px solid var(--hcm-danger-line); }
  .hcm-empty{ background:var(--hcm-card); border:1px solid var(--hcm-line); border-radius:16px; padding:18px; text-align:center;
    font-size:14px; color:var(--hcm-soft); }

  /* LANÇAR AGORA — azulejos 2 por linha */
  .hcm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hcm-tile{ background:var(--hcm-card); border:1px solid var(--hcm-line); border-radius:14px; padding:14px; cursor:pointer;
    display:flex; flex-direction:column; gap:6px; text-align:left; font:inherit; color:var(--hcm-ink); }
  .hcm-tile:active{ transform:scale(.98); background:var(--fundo); }
  .hcm-tile .ico{ font-size:20px; }
  .hcm-tile .t{ font-size:14.5px; font-weight:700; }
  .hcm-tile .s{ font-size:12px; color:var(--hcm-soft); }

  /* listas (Próximas / Feitas / Medicações) */
  .hcm-list{ background:var(--hcm-card); border:1px solid var(--hcm-line); border-radius:16px; overflow:hidden; }
  .hcm-row{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-top:1px solid var(--hcm-line); }
  .hcm-row:first-child{ border-top:0; }
  .hcm-tap{ cursor:pointer; }
  .hcm-tap:active{ background:var(--fundo); }
  .hcm-time{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--hcm-ink); min-width:42px; }
  .hcm-rmeta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .hcm-rname{ font-size:14.5px; font-weight:600; }
  .hcm-rsub{ font-size:12px; color:var(--hcm-soft); }
  .hcm-tick{ margin-left:auto; width:24px; height:24px; border-radius:50%; background:var(--hcm-ok-bg); color:var(--hcm-ok);
    display:grid; place-items:center; font-size:13px; font-weight:700; border:1px solid var(--hcm-ok-line); flex:none; }
  .hcm-no{ margin-left:auto; font-size:12px; font-weight:700; color:var(--hcm-danger); background:var(--hcm-danger-bg);
    padding:3px 10px; border-radius:99px; flex:none; }
  .hcm-pull{ margin-left:auto; font-size:12px; font-weight:700; color:var(--hcm-teal); background:var(--hcm-teal-bg);
    padding:4px 11px; border-radius:99px; white-space:nowrap; flex:none; }
  .hcm-undo{ font:inherit; font-size:12px; margin-left:8px; padding:3px 8px; border:1px solid var(--hcm-line); border-radius:8px;
    background:none; color:var(--hcm-soft); cursor:pointer; flex:none; }
  .hcm-empty2{ padding:14px 15px; font-size:13px; color:var(--hcm-soft); }

  /* Medicações em uso — dois blocos lado a lado (nomes “Medicações 1/2”, regra do produto) */
  .hcm-med2{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--hcm-card); border:1px solid var(--hcm-line);
    border-radius:16px; overflow:hidden; }
  .hcm-col{ padding:13px 15px; min-width:0; }
  .hcm-col+.hcm-col{ border-left:1px solid var(--hcm-line); }

  /* ADM/IA no celular herdam o cabeçalho novo; o corpo delas continua o de antes */
  .hcm-body .hc-adm-grid{ grid-template-columns:1fr !important; }
}