/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   LAYOUT GERAL — SaaS Tecnológico Premium
============================================================ */
/* ============================================================
   TIPOGRAFIA — USO CONTÍNUO 6–8H (ANTI-FADIGA VISUAL)
   Padrão Prontuário / HealthTech Enterprise
============================================================ */

/* =========================
   VARIÁVEIS TIPOGRÁFICAS
========================= */

:root {
  /* Fontes */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-input: "IBM Plex Sans", "Inter", sans-serif;
  --font-output: "IBM Plex Serif", "Georgia", serif;

  /* Pesos equilibrados (evita tensão ocular) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tracking fisiológico (evita compressão visual) */
  --tracking-ui: -0.005em;
  --tracking-input: 0.02em;
  --tracking-output: 0.03em;
}

/* =========================
   BASE GLOBAL — CONFORTO VISUAL
========================= */

html {
  font-size: 17.5px; /* 🔥 ideal para leitura prolongada */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);

  font-size: 17.5px;
  line-height: 1.65;               /* ritmo respiratório */
  letter-spacing: var(--tracking-ui);

  color: #243244;                  /* cinza-azulado suave (não preto) */

  background: #f9fafb;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================
   UI / HEADER / BOTÕES
========================= */

.header,
.mode-trigger,
.plan-badge,
.dropdown-item,
.dropdown-logout,
button {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);

  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: var(--tracking-ui);

  color: #1e293b;
}

/* =========================
   LABEL PRINCIPAL (PROMPT)
========================= */

.input-section label {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);

  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;

  color: #1f2937;

  margin-bottom: 56px; /* mais respiro cognitivo */
}

/* =========================
   INPUT — TEXTO MÉDICO (ANTI-FADIGA)
========================= */

textarea {
  font-family: var(--font-input);
  font-weight: var(--weight-regular);

  font-size: 17px;
  line-height: 1.65;               /* leitura contínua confortável */
  letter-spacing: var(--tracking-input);

  

  color: #1f2937;                  /* menos contraste que #111 */

  background: transparent;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Placeholder — discreto e não cansativo */
textarea::placeholder {
  font-family: var(--font-input);
  font-weight: var(--weight-regular);
  font-style: italic;

  font-size: 16.5px;
  letter-spacing: var(--tracking-input);

  color: rgba(31, 41, 55, 0.45);
}

/* INPUT EM MODO BARRA */
.input-section.active textarea {
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* =========================
   OUTPUT — TEXTO CLÍNICO / LAUDO
========================= */

#resultado,
.resultado-editor {
  font-family: var(--font-output);
  font-weight: var(--weight-regular);

  font-size: 18px;                 /* 🔥 leitura longa premium */
  line-height: 1.75;               /* leitura tipo livro */
  letter-spacing: var(--tracking-output);

  color: #1f2937;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   PARÁGRAFOS — RITMO VISUAL
========================= */

#resultado p,
.resultado-editor p {
  margin-bottom: 16px;             /* pausa cognitiva */
}

/* =========================
   DESTAQUES CLÍNICOS
========================= */

#resultado strong,
.resultado-editor strong {
  font-weight: 500;
  letter-spacing: 0.015em;
}

/* =========================
   BOTÕES INTERNOS (DISCRETOS)
========================= */

.copy-btn,
.edit-btn,
.btn-interno {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);

  font-size: 14px;
  letter-spacing: -0.005em;
}

/* =========================
   DROPDOWN / AVATAR
========================= */

.dd-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.dd-value {
  font-size: 15.5px;
  letter-spacing: 0.02em;
  font-weight: 500;
}


/* Container máximo de SaaS */
.page-wrapper {
  max-width: 1200px;                /* mais espaço visual */
  margin: 0 auto;
  padding: 24px 32px;               /* margin interna confortável */
}


/* ===== HEADER (versão profissional) ===== */
.header {
  width: 100%;
  padding: 10px 24px; /* espaçamento igual dos dois lados */
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;
  z-index: 9999; /* a maior camada da interface*/

  background:#ffffff
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.3);
}


/* ===== COLUNAS DO HEADER ===== */
.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-logo {
  height: 32px; /* Tamanho perfeito para SaaS */
  width: auto;
}
.header-right {
  width: 180px;     /* espaço suficiente */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* ===== TÍTULO ===== ( no momento está sem título, pq eu apaguei do html e estou usando o título como o label da caixa de imput*/
.header-title {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  padding-top: %
}

/* ============================================================
   MODE SELECT — SaaS Premium Minimal (Native Select)
============================================================ */
/* Espaçamento em relação ao logo (importante)*/
.mode-picker {
  position: relative;
  margin-left: 26px; /* 🔥 respiro visual, não colado */
  margin-top: 2px;
}

/*Botão gatilho (texto + chevron)*/
.mode-trigger {
  display: flex;
  align-items: center;
  gap: 6px;

  background:  rgba(0,0,0,0.03);     /* 🔥 fundo sutil permanente */
  border: 0px solid rgba(0,0,0,0.06);
  padding: 10px 10px;

  font-size: 16px;
  font-weight: 600;
  color: #334155;

  cursor: pointer;
  user-select: none;

  border-radius: 10px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.6);

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.mode-trigger:hover {
  background: rgba(0,0,0,0.055);
  border-color: rgba(0,0,0,0.10);
}

/* Texto do modo*/
.mode-trigger-label {
  white-space: nowrap;
}

/* Chevron discreto (estilo ChatGPT)*/
.mode-trigger-chevron {
  font-size: 18px;
  opacity: 0.6;
  transform: translateY(1px);
}
.mode-picker.open .mode-trigger-chevron {
  transform: rotate(180deg);
}

/* Dropdown (menu flutuante moderno)*/
.mode-menu {
  position: absolute;
  top: 40px;
  left: 0;

  min-width: 160px;

  background: #ffffff;
  border-radius: 12px;
  padding: 6px;

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

  display: none;
  flex-direction: column;
  gap: 2px;

  z-index: 9999;
}

/* Dropdown aberto*/
.mode-picker.open .mode-menu {
  display: flex;
}

/* Itens do menu*/
.mode-item {
  padding: 8px 10px;
  border-radius: 8px;

  font-size: 14px;
  font-weight: 500;
  color: #1e293b;

  cursor: pointer;
  transition: background 0.15s ease;
}

.mode-item:hover {
  background: rgba(74,108,247,0.08);
}



/* ============================================================
   BADGE DE PLANO — ESTILO STRIPE / LINEAR (Tint Capsule)
============================================================ */

.plan-badge {
  padding: 6px 14px;
  border-radius: 999px; /* pill shape */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25px;

  height: 30px;
  min-width: 70px;

  cursor: pointer;
  user-select: none;

  transition: background 0.22s ease, color 0.22s ease;
}

/* ============================================================
   FREE — estilo Stripe neutro (cinza leve)
============================================================ */

.plan-free {
  background: rgba(0,0,0,0.04);   /* tint leve igual Stripe */
  color: #4d4d4d;
}

.plan-free:hover {
  background: rgba(0,0,0,0.07);
}

/* ============================================================
   PRO — estilo Stripe / Linear premium (azul vibrante)
============================================================ */

.plan-pro {
  background: rgba(74,108,247,0.12); /* tint azul estilo Linear */
  color: #2d4be8;
}

/*
.plan-pro:hover {
  background: rgba(74,108,247,0.18);
}
*/  


/* ============================================================
   AVATAR — Google Workspace Premium + Blue Halo
============================================================ */

.avatar-wrapper {
  position: relative;
  cursor: pointer;
}

/* Avatar Premium */
.avatar-circle {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
  font-weight: 600;
  color: #1e293b; /* cinza-azulado premium, Workspace */

  border-radius: 50%;

  /* Fundo Workspace */
  background: #ffffff;

  /* ===== HALO AZUL CORPORATIVO (Workspace Identity) ===== */
  box-shadow:
    0 0 0 2px rgba(66, 133, 244, 0.35),  /* halo azul Google */
    0 4px 10px rgba(0,0,0,0.10),          /* sombra externa */
    inset 0 0 0 1px #ffffff;              /* halo interno Material */

  border: 1px solid #d7dbe5; /* borda workspace premium */

  user-select: none;
  transition: 0.25s ease;
}

/* Hover — sensação Google Cloud / Workspace Enterprise */
.avatar-circle:hover {
  box-shadow:
    0 0 0 3px rgba(66, 133, 244, 0.45), /* halo azul intensificado */
    0 6px 14px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px #ffffff;

  transform: translateY(-1px);
}



/* ================================
   DROPDOWN — SaaS Premium Workspace
=================================== */

.avatar-dropdown {
  position: absolute;
  top: 56px;
  right: 0;

  width: 280px;

  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 16px;
  padding: 18px 16px;

  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.35);

  display: none;
  flex-direction: column;
  gap: 14px;

  z-index: 9999; /* 🔥 nunca mais fica atrás */
}

.avatar-dropdown.show {
  display: flex;
}


.dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dd-label {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5f6b7a;
  font-weight: 600;
  opacity: 0.9;
}

.dd-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding-bottom: 4px;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  width: 100%;
  margin: 4px 0 6px;
}


/* BOTÃO "MEU PLANO" – VERSÃO SAAS MÉDICO PREMIUM */
.dropdown-item {
  width: 100%;
  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);

  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);

  color: #0f1f46;
  font-size: 15px;
  font-weight: 600;
  text-align: center;

  cursor: pointer;

  box-shadow:
    0 3px 10px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.35);

  transition: 0.25s;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.dropdown-item:active {
  transform: translateY(0px);
  background: rgba(255,255,255,0.45);
}


/* --- BOTÃO DE SAIR do dropdown Avatar Menu --- */
.dropdown-logout {
  padding: 12px 14px;

  background: rgba(255, 0, 0, 0.08);
  backdrop-filter: blur(8px);

  border-radius: 12px;
  border: 1px solid rgba(255,0,0,0.15);

  color: #b91c1c;

  font-weight: 600;
  text-align: center;
  cursor: pointer;

  transition: 0.25s ease;
}

.dropdown-logout:hover {
  background: rgba(255, 0, 0, 0.12);
}


/* ============================================
   SEÇÃO INPUT — ANIMAÇÃO CENTRAL → TOPO
============================================ */

.main-content {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
/*manter o imput active abaixo*/
.main-content.generated {
  flex-direction: column-reverse;
}

/* ESTADO INICIAL: CENTRALIZADO */
.input-section.initial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  max-width: 650px;
  transform: translate(-50%, -50%);
  transition: all 0.55s ease;
  z-index: 5;
}

/* ESTADO ATIVO: VAI PARA O TOPO */
/* INPUT SECTION — ESTADO ATIVO (alinhado ao OUTPUT) */
.input-section.active {
  width: 95%;
  max-width: 900px;
  margin: 0 auto;               /* 🔥 Centraliza como o output */
  padding-top: 0px;
}


/* LABEL — estilo IA premium */
.input-section label {
  font-weight: 600;              /* Semibold, elegante */
  display: block;               
  text-align: center;            /* 🔥 Centraliza perfeitamente */
  margin-bottom: 64px;           /* Espaço premium entre label e caixa */
  color: #1f2937;                /* Cinza escuro moderno (mais elegante que #34495e) */
  font-size: 28px;               /* Tipografia maior → padrão IA */
  letter-spacing: 0.2px;         /* Micro-tipografia moderna */
  opacity: 0.9;                  /* Sofisticado, não gritante */
}

/* INPUT — LABEL APENAS NO ESTADO INICIAL */
.main-content.generated .input-section label {
  display: none;
}


/* CAIXA DO INPUT (container) */
/* GLASS INPUT BOX — estilo Perplexity / ChatGPT */
.input-box {
  position: relative;
  border-radius: 28px;

  background: rgba(255, 255, 255, 0.12);    /* Transparência */
  backdrop-filter: blur(18px);              /* 🔥 Glass real */
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 15px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.28);

  padding: 0;
  transition: all 0.35s ease;
}


/* MODO BARRA SUPERIOR */
.input-section.active .input-box {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px);

  box-shadow:
    0 3px 12px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}


/* TEXTAREA */
textarea {
  width: 100%;
  height: 160px;

  padding: 18px 22px;
  background: transparent;               /* 🔥 Integra com o glass */
  color: #111;                           /* Texto escuro e limpo */

  border: none;                          /* Sem borda */
  outline: none;

  font-size: 15px;
  line-height: 1.45;
  border-radius: 28px;

  resize: none;                          /* Igual ChatGPT */
}

textarea::placeholder {
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.2px;
}


/* ALTURA REDUZIDA QUANDO ATIVO */
.input-section.active textarea {
  height: 60px !important;
  border-radius: 18px;
}


/* BOTÃO INTERNO DO INPUT */
.btn-interno {
  position: absolute;
  bottom: 14px;
  right: 16px;

  padding: 10px 22px;

  background: rgba(74,108,247,1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(10, 0, 0, 0.35);

  border-radius: 20px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;

  transition: 0.25s ease;
}

.btn-interno:hover {
  background: rgba(255,255,255,1);
  color: #0c0c0c;
}


/* ============================================
   OUTPUT SECTION
============================================ */

#outputSection {
  opacity: 0;
  pointer-events: none;
  transition: all 0.45s ease;
}

#outputSection.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================
   OUTPUT SECTION — GLASS STYLE IA (corrigido)
============================================ */

.output-section {
  position: relative; /* IMPORTANTE: permite posicionar o botão acima */

  width: 95%;
  max-width: 900px;
  margin: 0 auto;
  padding: 38px 26px 32px; /* top maior para não colidir com botão */

  border-radius: 28px;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.32);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}




/* ==
   BOTÃO COPY — AGORA CORRETAMENTE ACIMA DO TEXTO
====== */
.copy-btn {
  position: absolute;
  top: 12px;
  right: 16px;

  z-index: 10;  /* 🚀 AGORA FICA POR CIMA DO TEXTO SEMPRE */

  padding: 8px 18px;

  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);

  color: #111;
  font-size: 13px;
  font-weight: 600;
  border-radius: 18px;

  cursor: pointer;
  transition: 0.25s ease;

  box-shadow:
    0 2px 10px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}
/* ==
   BOTÃO EDITAR — 
====== */
.edit-btn {
  position: absolute;
  top: 12px;
  right: 96px; /* ao lado do copiar */

  padding: 8px 18px;
  border-radius: 18px;

  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);

  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  transition: 0.2s ease;
}

.edit-btn:hover {
  background: rgba(255,255,255,0.45);
}

.resultado-editor {
  width: 100%;
  min-height: 320px;

  padding: 18px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);

  font-size: 15px;
  line-height: 1.55;
  color: #111;

  resize: vertical;
}

/* ============================================
   EDIT MODE — EXPANSÃO DO OUTPUT (WORKSPACE)
============================================ */

.output-section.editing {
  max-width: 1100px;              /* maior que o modo leitura */
  padding: 46px 36px 40px;

  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 14px 48px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.35);

  transition: all 0.35s ease;
}
.output-section.editing #resultado {
  display: none;
}
.output-section.editing .resultado-editor {
  min-height: 520px;
  max-height: 70vh;

  padding: 26px 28px;

  font-size: 18px;
  line-height: 1.75;

  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.45),
    0 8px 28px rgba(0,0,0,0.12);

  transition: all 0.35s ease;
}
.output-section.editing::before {
  content: "Modo edição";
  position: absolute;
  top: 14px;
  left: 22px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #4a6cf7;
  opacity: 0.85;
}



/* ==
   ÁREA DO RESULTADO — NÃO SOBREPÕE MAIS O BOTÃO
==== */
#resultado {
  max-height: 540px;

  white-space: pre-wrap;
  word-wrap: break-word;

  overflow-y: auto;
  padding: 18px;

  /* ⚠ NÃO PODE SOBREPOR O BOTÃO */
  padding-top: 10px;        /* margem interna normal */
  margin-top: 12px;         /* distância real do botão */
  
  position: relative;
  z-index: 1;               /* abaixo do botão */
  
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,0.22);

  font-size: 15px;
  line-height: 1.55;
  color: #111;
}



/* ============================================
   MODAIS (Meu Plano & Premium)
============================================ */
/* ============================================
   MODAL OVERLAY — 
============================================ */
.modal-premium-overlay {
  display: none;
  position: fixed;
  inset: 0;

  /* Background workspace */
  background: rgba(15, 17, 20, 0.45);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  justify-content: center;
  align-items: center;

  z-index: 9999; /* acima de tudo */
}

.modal-premium-overlay.show-premium-modal {
  display: flex;
  animation: modalFadeIn 0.25s ease;
}

/* ============================================
   MODAL BOX — Workspace + Linear + Notion
============================================ */
.modal-premium-box {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  border-radius: 20px;

  padding: 32px 28px;
  width: 92%;
  max-width: 440px;

  box-shadow:
    0 12px 40px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.35);

  animation: modalSlideUp 0.35s ease;

  text-align: center;
}

/* TÍTULO */
.mp-title {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

/* SUBTÍTULO */
.mp-subtitle {
  font-size: 15px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* BENEFÍCIOS LIST STYLE — Linear */
.mp-benefits p {
  text-align: left;
  margin: 6px 0;
  font-size: 14px;
  color: #2b2b2b;
  font-weight: 500;
}

/* ============================================
   BOTÃO DE UPGRADE — Workspace Premium Style
============================================ */
.mp-btn-upgrade {
  background: linear-gradient(
    135deg,
    #4a6cf7,
    #6d83ff
  );

  color: #fff;
  width: 100%;
  padding: 14px;

  border: none;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
  transition: 0.25s ease;

  box-shadow:
    0 3px 12px rgba(74,108,247,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}

.mp-btn-upgrade:hover {
  background: linear-gradient(
    135deg,
    #3a5ae8,
    #6074ff
  );
  transform: translateY(-1px);
}

.mp-btn-upgrade:active {
  transform: translateY(0);
}

/* ============================================
   BOTÃO FECHAR — Notion Minimal
============================================ */
.mp-btn-close {
  margin-top: 18px;
  background: rgba(240,240,240,0.9);

  padding: 12px;
  width: 100%;

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);

  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #333;

  transition: 0.2s ease;
}

.mp-btn-close:hover {
  background: rgba(228,228,228,1);
}

/* ============================================
   ANIMAÇÕES — Workspace + Linear
============================================ */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   BULLETS DO MEU PLANO — estilo SaaS Premium
============================================ */

.mp-bullets {
  margin: 18px 0 10px;
  text-align: left;
}

.mp-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 6px 0;

  font-size: 14px;
  color: #2f2f2f;
  line-height: 1.45;

  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

.mp-bullet-icon {
  font-size: 16px;
  line-height: 1;
  margin-top: 1px;
  color: #4a6cf7;
}

/* GRÁTIS */
.mp-bullet-free .mp-bullet-icon {
  color: #888;
}

/* PRO */
.mp-bullet-pro .mp-bullet-icon {
  color: #4a6cf7;
}

/* animação */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ============================================
   LOADING OVERLAY
============================================ */

.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.7);
  justify-content: center;
  align-items: center;
  z-index: 300;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 5px solid #d0d5dd;
  border-top-color: #4a6cf7;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* ANIMAÇÕES */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVIDADE
============================================ */
@media (max-width: 600px) {
  .header-left,
  .header-right {
    width: auto;
  }

  textarea {
    height: 150px;
  }

  #resultado {
    max-height: 350px;
  }
}

/* ======================================
      LOGO NAS PÁGINAS LOGIN / SIGNUP
====================================== */

.login-logo-area {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
  position: relative;
}

.login-logo-area::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;                 /* largura suave */
  height: 1px;
  background: rgba(0, 0, 0, 0.08); /* linha premium */
  border-radius: 20px;
}



/* ======================================
   LOGIN PAGE
====================================== */

.login-body {
  background: #ffffff; /* tema branco clínico */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* centralização perfeita */
.login-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 20px;
}

/* caixa branca elegante */
.login-box {
  background: #ffffff;
  padding: 32px 28px;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  box-shadow: 0px 4px 14px rgba(0,0,0,0.06);
}

/* Título médico profissional */
.login-title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 4px;
}

.login-subtitle {
  text-align: center;
  color: #777;
  font-size: 15px;
  margin-bottom: 24px;
}

/* Form */
.login-box form label {
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.login-box input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  margin-bottom: 18px;
  font-size: 15px;
  background: #fafafa;
  transition: 0.2s;
}

.login-box input:focus {
  border-color: #9bbdf4;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(155,189,244,0.25);
}

/* Botão */
.login-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #1f6feb;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 6px;
}

.login-btn:hover {
  background: #1a5fcc;
}

/* erro */
.erro {
  margin-top: 12px;
  font-size: 14px;
  color: #c62828;
  text-align: center;
}

/* ======================================
   Sign UP - Botão e texto na Login Page
====================================== */

/* signup button abaixo do entrar */
.signup-btn {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #d0d7e2;
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
  color: #1f3b66;
  cursor: pointer;
  transition: 0.2s;
}

.signup-btn:hover {
  background: #f3f6fb;
}

.signup-text {
  text-align: center;
  font-size: 14px;
  margin-top: 14px;
  color: #586174;
}


/* ======================================
   Página Signup – Alinhamento perfeito
====================================== */

/* linha do checkbox + frase */
.checkbox-row {
  margin: 12px 0 18px 0;
}

.checkbox-left {
  display: flex;
  align-items: center;   /* garante centralização real */
  gap: 10px;
}

/* checkbox */
.checkbox-left input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transform: translateY(-3px); /* AJUSTE FINO — deixa no centro perfeito */
}

/* texto do consentimento */
.checkbox-left label {
  font-size: 14px;
  color: #444;
  line-height: 16px; /* IGUAL à altura do checkbox → centralização perfeita */
  margin: 0;
  cursor: default;
}

/* link azul */
.terms-link {
  color: #1f6feb;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}

/* ================================
   MODAL ( página sign up ?) — versão limpa e centralizada
================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;              /* aparece via JS */
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

/* Card central */
.modal-box {
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  background: white;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.20);

  display: flex;
  flex-direction: column;
}

/* Conteúdo com scroll */
.modal-content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
}

/* Títulos (01. OBJETO etc.) */
.modal-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 8px 0;
  color: #1a2b49;
}

/* Texto */
.modal-content p {
  font-size: 14px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 12px;
}

/* Lista */
.modal-content ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.modal-content li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
}

/* Botão fechar – centralizado */
.close-modal-btn {
  align-self: center;
  padding: 10px 22px;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  background: #4a6cf7;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

.close-modal-btn:hover {
  background: #3a54d6;
}


/* ======================================
   LOADING OVERLAY MÉDICO
====================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 17px;
  color: #1c1c1c;
  z-index: 999;
  display: none; /* inicia invisível */
}

.spinner {
  width: 46px;
  height: 46px;
  border: 4px solid #e3e7ee;
  border-top-color: #1f6feb;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* botao copiar */
.copy-btn {
  background: #e9eef7;
  color: #1f3b66;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #cdd6e6;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: 0.2s;
}

.copy-btn:hover {
  background: #dce4f3;
}

/* ==== OVERLAY do MODAL PARA PRMIUM QUANDO CLINA NO BADGE GRATIS ==== */
.modal-premium-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

/* ==== CAIXA ==== */
.modal-premium-box {
  background: #fff;
  width: 90%;
  max-width: 420px;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  text-align: center;
  animation: scaleIn .25s ease;
}

@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.mp-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.mp-subtitle {
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
}

.mp-benefits {
  text-align: left;
  margin-bottom: 24px;
  font-size: 15px;
  color: #444;
}

.mp-btn-upgrade {
  width: 100%;
  padding: 12px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 15px;
}

.mp-btn-upgrade:hover {
  background: #4338ca;
}

.mp-btn-close {
  width: 100%;
  padding: 10px;
  background: #e5e7eb;
  color: #333;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.mp-btn-close:hover {
  background: #d1d5db;
}

/* Mostrar Modal */
.show-premium-modal {
  display: flex !important;
}