/*
Theme Name: Portal Beluah
Theme URI:
Author: PROEMI studio
Author URI: https://proemistudio.com
Description: Portal de laudos da Beluah Clínica Médica — área restrita para a clínica publicar laudos (PDF/DICOM) e para os pacientes consultarem os seus. Arquivos em pasta privada, sem dependência de plugins.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: portal-beluah
*/

/* ==========================================================================
   style.css — "home + header + footer" do portal Beluah:
   tokens (:root), fontes, reset, tela de LOGIN (home) e a SIDEBAR (chrome).
   As telas internas (painel da clínica e área do paciente) ficam no
   style-pages.css, que herda estes tokens.
   ========================================================================== */

/* FONTES — Inter + Nunito hospedadas localmente (assets/fonts/), swap. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-400.woff2') format('woff2');
}

/* ============================================================
   BELUAH — Clínica Médica
   Tokens do spec.md + valores reais extraídos da aba Dev (Figma)
   ============================================================ */

:root {
  /* Marca (spec.md) */
  --primary:      #A91C17;
  --primary-dark: #8A1712;
  --dark:         #3C3C3B;
  --white:        #FFFFFF;
  --text:         #1A1A1A;
  --muted:        #555555;

  /* Cor de destaque da UI (Figma — B2). Botões, ativos, contornos de ação */
  --accent:        #F25A55;
  --accent-hover:  #E24B46;

  /* Neutros / superfícies (Figma) */
  --ink:              #232323; /* B1 — texto principal da app */
  --input-text:       #030229; /* placeholder do login */
  --app-bg:           #F3F3F3; /* fundo da tela de login */
  --panel-bg:         #F3F3F3; /* painel do dashboard */
  --field-bg:         #F7F7F8; /* inputs do login */
  --nav-active-bg:    #FFFAF9; /* item de menu ativo */
  --badge-bg:         #FBE9E6;
  --badge-text:       #D11A2A;
  --border-soft:      #EFEFEF; /* borda da busca */
  --row-border:       #F8F3F2; /* borda das linhas da tabela */
  --divider:          #E9E9E9;
  --logout-text:      #636363; /* "Sair" da sidebar */
  --marca-titulo:     #141414; /* "Laudos Online" (marca da sidebar) */
  --marca-sub:        #6B6B6B; /* "Beluah / Centrocardio" */
  --page-active-text: #F7F8FA;

  /* Feedback de sucesso (avisos "tarefa concluída") */
  --success:        #2FA35F; /* bolinha do ícone de check */

  /* Visualizador DICOM: fundo preto padrão de imagem médica */
  --viewer-bg:      #000000;
  --success-bg:     #EAF7EE;
  --success-border: #CBEBD5;
  --success-text:   #1F6B3A;

  /* Fontes (Figma: Inter + Nunito) */
  --font-primary:   'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-secondary: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ---- Scroll customizado + Seleção de texto (template scroll-selecao.md)
        [cor primária] = cor de destaque da UI (--accent #F25A55) ---- */
:root {
  --sbw: 8px;
  --sbc: #F25A55;
}
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
#sb {
  position: fixed;
  top: 0;
  right: 2px;
  width: var(--sbw);
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
#sb i {
  position: absolute;
  right: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--sbc);
  opacity: 0;
  transition: opacity .35s ease;
}
html.scrolling #sb i { opacity: 1; }
@media (max-width: 1024px) { #sb { display: none; } }

::selection      { color: #fff; background-color: #F25A55; }
::-moz-selection { color: #fff; background-color: #F25A55; }

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-primary); color: var(--ink); background: var(--white); line-height: normal; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ============================================================
   TELA DE LOGIN  (block: login)
   ============================================================ */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-bg);
  padding: 40px 20px;
}

.login__card {
  background: var(--white);
  width: 486px;
  max-width: 100%;
  min-height: 550px;
  border-radius: 20px;
  padding: 57px 38px 34px;
  display: flex;
  justify-content: center;
}

.login__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 410.675px;
  max-width: 100%;
}

.login__logo {
  width: 150.696px;
  height: 133.764px;
  object-fit: contain;
}

.login__fields {
  display: flex;
  flex-direction: column;
  gap: 31px;
  width: 100%;
}

.login__email-group { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.login__password-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.login__email-label,
.login__password-label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: #000;
}

.login__email-input,
.login__password-input {
  background: var(--field-bg);
  height: 50px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  align-items: center;
}
.login__email-input { padding: 0 12px; }
.login__password-input { padding: 0 18px; }

.login__email-value,
.login__password-value {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: var(--font-secondary);
  font-size: 14px;
  color: var(--input-text);
}
.login__email-value::placeholder { color: var(--input-text); opacity: .7; }
.login__password-value { color: var(--ink); letter-spacing: .18em; }
.login__password-value::placeholder { color: var(--ink); opacity: .7; letter-spacing: .18em; }

.login__submit {
  background: var(--accent);
  height: 50px;
  border-radius: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s ease;
}
.login__submit:hover { background: var(--accent-hover); }
.login__submit-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

/* ============================================================
   SIDEBAR (componente compartilhado — block: sidebar)
   ============================================================ */
.sidebar {
  width: 243px;
  flex-shrink: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 28px 15px 24px;
}
.sidebar__top { display: flex; flex-direction: column; gap: 30px; }
.sidebar__logo { width: 144.382px; height: 41px; object-fit: contain; }
.sidebar__divider { border: none; border-top: 1px solid var(--divider); width: 100%; }

/* Marca "Laudos Online" (proposta — o logo antigo, .sidebar__logo, está comentado no sidebar.php) */
.sidebar__logo-link.sidebar__marca { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; text-decoration: none; }
.sidebar__marca-simbolos { width: 61px; height: 38px; flex-shrink: 0; display: block; }
.sidebar__marca-texto { display: flex; flex-direction: column; gap: 1px; line-height: normal; }
.sidebar__marca-titulo {
  font-family: var(--font-primary); font-weight: 500; font-size: 17.51px; letter-spacing: -0.1751px;
  color: var(--marca-titulo); opacity: .9; white-space: nowrap;
}
.sidebar__marca-sub {
  font-family: var(--font-primary); font-weight: 400; font-size: 9.672px; letter-spacing: -0.0967px;
  color: var(--marca-sub); opacity: .9; white-space: nowrap;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 7px; margin-top: 38px; }
.sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 41px;
  padding: 11px 12px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
.sidebar__nav-item--active { background: var(--nav-active-bg); }
.sidebar__nav-icon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.sidebar__nav-label {
  flex: 1;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  opacity: .9;
  letter-spacing: -0.16px;
}
.sidebar__badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  line-height: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__logout {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 41px;
  padding: 11px 12px;
  border-radius: 6px;
  text-decoration: none;
}
.sidebar__logout-icon { width: 17.316px; height: 16.667px; flex-shrink: 0; object-fit: contain; }
.sidebar__logout-label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--logout-text);
}


/* Mensagem de erro do login (código/senha inválidos, bloqueio temporário) */
.login__error {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.4;
}

/* Logo clicável */
.sidebar__logo-link { display: inline-block; line-height: 0; border-radius: 8px; }

/* Sidebar compacta (≤900) — vira barra superior */
@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 16px;
  }
  .sidebar__top { flex: 0 0 auto; }
  .sidebar__divider { display: none; }
  .sidebar__logout { order: 1; flex: 0 0 auto; margin: 0; }
  .sidebar__nav {
    order: 2;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0;
    gap: 8px;
    min-width: 0;
  }
}

/* ---- Hover float em todos os botões ---- */
button[class]:not(.pw-toggle):not(.gerar-senha),
a[class*="-btn"],
a[class*="__submit"],
a[class*="__back"],
.back-btn {
  transition: transform .16s ease, box-shadow .16s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
button[class]:not(.pw-toggle):not(.gerar-senha):hover,
a[class*="-btn"]:hover,
a[class*="__submit"]:hover,
a[class*="__back"]:hover,
.back-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(35,35,35,.14);
}
button[class]:not(.pw-toggle):not(.gerar-senha):active,
a[class*="-btn"]:active,
a[class*="__submit"]:active,
a[class*="__back"]:active,
.back-btn:active { transform: translateY(-1px); }

/* Texto só para leitores de tela (acessibilidade) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}