/*
 * Componentes visuais do sistema hospitalar. O tema do Filament vem
 * pre-compilado, entao estas classes (hs-*) sao escritas a mao e usam as
 * variaveis de cor do Filament (--primary-*, --gray-*) para seguir o tema
 * claro/escuro e a cor configurada.
 */

/* ---------- Faixa do paciente ---------- */
.hs-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1rem 1.25rem;
    border-radius: .75rem; background: var(--primary-50); border: 1px solid var(--primary-200); }
.dark .hs-banner { background: color-mix(in oklab, var(--primary-900) 35%, transparent); border-color: var(--primary-800); }
.hs-avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: grid; place-items: center;
    background: var(--primary-600); color: #fff; font-weight: 700; font-size: 1.15rem; }
.hs-banner-nome { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--gray-950); }
.dark .hs-banner-nome { color: #fff; }
.hs-banner-sub { font-size: .85rem; color: var(--gray-600); margin-top: .15rem; }
.dark .hs-banner-sub { color: var(--gray-300); }
.hs-banner-dados { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-left: auto; }
.hs-dado { display: flex; flex-direction: column; min-width: 4.5rem; }
.hs-dado small { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.hs-dado strong { font-size: .95rem; color: var(--gray-900); }
.dark .hs-dado strong { color: var(--gray-100); }
.hs-alergia { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: .5rem;
    font-weight: 600; font-size: .9rem; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.dark .hs-alergia { background: rgb(127 29 29 / .35); color: #fecaca; border-color: rgb(248 113 113 / .4); }
.hs-alergia.hs-sem-alergia { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-weight: 500; }
.dark .hs-alergia.hs-sem-alergia { background: rgb(20 83 45 / .35); color: #bbf7d0; border-color: rgb(74 222 128 / .3); }

/* ---------- Etapas do atendimento (PA) ---------- */
.hs-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; counter-reset: etapa; }
.hs-etapa { position: relative; padding: .75rem .85rem .75rem 2.9rem; border-radius: .6rem; background: var(--gray-50);
    border: 1px solid var(--gray-200); min-height: 4rem; }
.dark .hs-etapa { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.hs-etapa::before { counter-increment: etapa; content: counter(etapa); position: absolute; left: .8rem; top: .85rem;
    width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
    background: var(--gray-300); color: #fff; }
.hs-etapa b { display: block; font-size: .9rem; }
.hs-etapa span { display: block; font-size: .78rem; color: var(--gray-500); margin-top: .1rem; }
.hs-etapa.feita::before { content: "✓"; background: #16a34a; }
.hs-etapa.atual { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); background: var(--primary-50); }
.dark .hs-etapa.atual { background: color-mix(in oklab, var(--primary-900) 40%, transparent); }
.hs-etapa.atual::before { background: var(--primary-600); }
@media (max-width: 1024px) { .hs-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Painel "Meu trabalho" ---------- */
.hs-saudacao { font-size: 1.05rem; color: var(--gray-600); }
.dark .hs-saudacao { color: var(--gray-300); }
.hs-tarefas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: .75rem; }
.hs-tarefa { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: .85rem;
    background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--hs-cor, var(--primary-500));
    transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; }
.dark .hs-tarefa { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .08); border-top-color: var(--hs-cor, var(--primary-400)); }
.hs-tarefa:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .08); }
.hs-tarefa-numero { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--hs-cor, var(--primary-600)); }
.hs-tarefa-titulo { font-weight: 600; color: var(--gray-900); }
.dark .hs-tarefa-titulo { color: var(--gray-100); }
.hs-tarefa-detalhe { font-size: .8rem; color: var(--gray-500); }
.hs-tarefa-acao { margin-top: auto; padding-top: .35rem; font-size: .82rem; font-weight: 600; color: var(--primary-600); }
.dark .hs-tarefa-acao { color: var(--primary-400); }
.hs-tarefa.zerada { --hs-cor: #16a34a; opacity: .8; }

/* ---------- Faixa de risco na fila do PA ---------- */
.hs-risco-vermelho > td:first-child { box-shadow: inset 5px 0 0 #dc2626; }
.hs-risco-laranja > td:first-child { box-shadow: inset 5px 0 0 #ea580c; }
.hs-risco-amarelo > td:first-child { box-shadow: inset 5px 0 0 #eab308; }
.hs-risco-verde > td:first-child { box-shadow: inset 5px 0 0 #16a34a; }
.hs-risco-azul > td:first-child { box-shadow: inset 5px 0 0 #2563eb; }

/* ---------- Assinaturas ---------- */
.hs-selo { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 9999px;
    font-size: .75rem; font-weight: 600; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.dark .hs-selo { background: rgb(6 78 59 / .4); color: #a7f3d0; border-color: rgb(52 211 153 / .3); }

/* ---------- Topo ---------- */
.hs-acao-rapida { margin-inline-end: .5rem; }

/* Relogio no centro exato da barra; troca de perfil e digital junto ao sininho. */
.fi-topbar { position: relative; }
.hs-centro-topo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; }
.hs-perfil-ctn { position: relative; display: inline-flex; }
.hs-pendentes, .hs-perfil { flex-shrink: 0; }

.hs-relogio { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem;
    border-radius: .5rem; background: var(--gray-100); color: var(--gray-700); font-size: .85rem; white-space: nowrap; }
.dark .hs-relogio { background: rgb(255 255 255 / .06); color: var(--gray-200); }
.hs-relogio-icone { width: 1rem; height: 1rem; opacity: .7; }
.hs-relogio-hora { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.hs-relogio-data { opacity: .75; text-transform: capitalize; }

.hs-perfil-icone { width: 1rem; height: 1rem; }
.hs-perfil-titulo { padding: .35rem .6rem .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
/* Ancorado a direita: o botao fica no canto direito da barra. */
.hs-perfil-menu { position: absolute; top: calc(100% + .4rem); right: 0; min-width: 12rem; z-index: 50; padding: .35rem;
    border-radius: .6rem; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 10px 30px rgb(0 0 0 / .15); }
.dark .hs-perfil-menu { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.hs-perfil-opcao { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem; border-radius: .4rem;
    font-size: .875rem; color: var(--gray-700); text-align: left; white-space: nowrap; cursor: pointer; background: none; border: 0; }
.dark .hs-perfil-opcao { color: var(--gray-200); }
.hs-perfil-opcao:hover { background: var(--gray-100); }
.dark .hs-perfil-opcao:hover { background: rgb(255 255 255 / .06); }
.hs-perfil-opcao.ativo { color: var(--primary-700); font-weight: 600; }
.dark .hs-perfil-opcao.ativo { color: var(--primary-400); }
[x-cloak] { display: none !important; }

/* Menos largura: primeiro some a data do relogio, depois o relogio inteiro. */
@media (max-width: 1280px) { .hs-relogio-data { display: none; } }
/* Tablet/celular (menu recolhido): sem espaco para centralizar; mostra so a troca de perfil. */
@media (max-width: 1024px) {
    .hs-acao-rapida, .hs-centro-topo { display: none; }
}