/* =====================================================================
   ELY DA SAÚDE — Sistema visual
   Azul-marinho institucional · Azul de apoio · Verde saúde · Fundo clean
   ===================================================================== */

:root{
  /* Marca */
  --navy:        #0E2F6B;
  --navy-800:    #143C86;
  --navy-900:    #08214C;
  --navy-soft:   #E9F0FB;

  --blue:        #1E6FD9;
  --blue-soft:   #E7F1FE;

  --green:       #5FB246;
  --green-700:   #479130;
  --green-soft:  #EDF7E8;

  /* Neutros */
  --bg:          #F4F7FC;
  --card:        #FFFFFF;
  --line:        #E3E9F2;
  --line-2:      #EFF3F8;
  --ink:         #152238;
  --ink-2:       #3F4E68;
  --muted:       #7C8BA4;

  /* Semânticos */
  --amber:       #D9931F;
  --amber-soft:  #FDF3E2;
  --danger:      #CE4141;
  --danger-soft: #FCEDED;
  --slate:       #64748B;
  --slate-soft:  #EEF2F7;

  /* Forma */
  --r-sm: 10px;  --r: 14px;  --r-lg: 20px;  --r-xl: 26px;
  --sh-1: 0 1px 2px rgba(16,38,74,.05), 0 4px 16px rgba(16,38,74,.05);
  --sh-2: 0 12px 34px rgba(16,38,74,.11);
  --sh-3: 0 24px 70px rgba(8,33,76,.22);
  --max: 1200px;
  --t: 180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ margin:0; line-height:1.22; letter-spacing:-.02em; color:var(--navy); font-weight:800; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--green); color:#fff; }

:focus-visible{ outline:3px solid rgba(30,111,217,.45); outline-offset:2px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ico{ width:20px; height:20px; flex:none; }

/* =====================================================================
   LOGOTIPO
   ===================================================================== */
.logo{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; }
.logo:hover{ text-decoration:none; }
.logo__mark{ width:46px; height:46px; flex:none; }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__ely{
  font-size:27px; font-weight:900; letter-spacing:-.03em; color:var(--navy);
}
.logo__saude{
  font-size:11.5px; font-weight:800; letter-spacing:.32em; color:var(--green); margin-top:3px;
}
.logo--claro .logo__ely{ color:#fff; }
.logo--claro .logo__saude{ color:#A8E08C; }
.logo--sm .logo__mark{ width:38px; height:38px; }
.logo--sm .logo__ely{ font-size:21px; }
.logo--sm .logo__saude{ font-size:9.5px; letter-spacing:.28em; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{
  --bg-btn:var(--navy); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border:1px solid transparent; border-radius:var(--r);
  background:var(--bg-btn); color:var(--fg-btn);
  font:inherit; font-size:14.5px; font-weight:650; letter-spacing:.005em;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  box-shadow:0 1px 2px rgba(16,38,74,.08);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,38,74,.16); text-decoration:none; }
.btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(16,38,74,.1); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none; }
.btn .ico{ width:18px; height:18px; }

.btn--verde{ --bg-btn:var(--green); }
.btn--verde:hover{ --bg-btn:var(--green-700); }
.btn--azul{ --bg-btn:var(--blue); }
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--navy); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:#fff; border-color:#CBD7E8; }
.btn--branco{ --bg-btn:#fff; --fg-btn:var(--navy); }
.btn--perigo{ --bg-btn:var(--danger-soft); --fg-btn:var(--danger); box-shadow:none; }
.btn--perigo:hover{ --bg-btn:var(--danger); --fg-btn:#fff; }
.btn--lg{ padding:16px 34px; font-size:16px; border-radius:var(--r-lg); }
.btn--sm{ padding:8px 14px; font-size:13px; border-radius:11px; }
.btn--bloco{ width:100%; }

/* Botão-ícone (ações em tabela) */
.iconbtn{
  display:inline-grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink-2);
  cursor:pointer; transition:all var(--t);
}
.iconbtn:hover{ border-color:var(--navy); color:var(--navy); background:var(--navy-soft); }
.iconbtn--whats:hover{ border-color:var(--green); color:#fff; background:var(--green); }
.iconbtn--perigo:hover{ border-color:var(--danger); color:#fff; background:var(--danger); }
.iconbtn .ico{ width:17px; height:17px; }

/* =====================================================================
   CARDS / SUPERFÍCIES
   ===================================================================== */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.card--pad{ padding:26px 28px; }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  font-size:11.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase;
  background:var(--navy-soft); color:var(--navy);
}
.chip .ico{ width:14px; height:14px; }
.chip--verde{ background:var(--green-soft); color:var(--green-700); }
.chip--azul{ background:var(--blue-soft); color:var(--blue); }
.chip--ambar{ background:var(--amber-soft); color:var(--amber); }
.chip--slate{ background:var(--slate-soft); color:var(--slate); }
.chip--perigo{ background:var(--danger-soft); color:var(--danger); }

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.campo{ margin-bottom:20px; }
.campo__label{
  display:block; margin-bottom:7px;
  font-size:13.5px; font-weight:650; color:var(--ink-2);
}
.campo__label .req{ color:var(--green); margin-left:2px; }
.campo__dica{ font-size:12.5px; color:var(--muted); margin-top:6px; }

.input, .textarea, .select{
  width:100%; padding:13px 15px;
  border:1.5px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink);
  font:inherit; font-size:16px; /* nunca menor que 16px: evita o Safari dar zoom sozinho no iOS */
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.input::placeholder, .textarea::placeholder{ color:#A9B5C8; }
.input:hover, .textarea:hover, .select:hover{ border-color:#CBD7E8; }
.input:focus, .textarea:focus, .select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(30,111,217,.13);
}
.textarea{ min-height:132px; resize:vertical; line-height:1.6; }
.select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%237C8BA4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.campo--erro .input, .campo--erro .textarea, .campo--erro .select{
  border-color:var(--danger); background:#FFFBFB;
}
.campo__erro{
  display:none; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--danger);
}
.campo--erro .campo__erro{ display:block; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 20px; }
@media (max-width:720px){ .grid2, .grid3{ grid-template-columns:1fr; } }

/* Cards de categoria (seleção no formulário) */
.catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
@media (max-width:860px){ .catgrid{ grid-template-columns:1fr 1fr; } }

.catopt{ position:relative; }
.catopt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.catopt__box{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:20px 12px; border:1.5px solid var(--line); border-radius:var(--r-lg);
  background:#fff; cursor:pointer; transition:all var(--t); height:100%;
}
.catopt__box .ico{ width:26px; height:26px; color:var(--blue); transition:color var(--t); }
.catopt__box strong{ font-size:14.5px; font-weight:700; color:var(--navy); }
.catopt__box small{ font-size:11.5px; color:var(--muted); line-height:1.4; }
.catopt input:hover + .catopt__box{ border-color:#BFD3EE; transform:translateY(-2px); }
.catopt input:checked + .catopt__box{
  border-color:var(--green); background:var(--green-soft);
  box-shadow:0 0 0 4px rgba(95,178,70,.15);
}
.catopt input:checked + .catopt__box .ico{ color:var(--green-700); }
.catopt input:focus-visible + .catopt__box{ outline:3px solid rgba(30,111,217,.45); outline-offset:2px; }

/* Área de upload — uma zona pequena por tipo de documento */
.upgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .upgrid{ grid-template-columns:1fr; } }

.dropmini{
  display:flex; align-items:center; gap:12px;
  border:1.5px dashed #C6D4E8; border-radius:var(--r-lg);
  background:#FBFCFE; padding:13px 15px; cursor:pointer;
  transition:all var(--t);
}
.dropmini:hover, .dropmini.is-drag{
  border-color:var(--green); background:var(--green-soft);
}
.dropmini__ico{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:11px;
  background:var(--blue-soft); color:var(--blue);
}
.dropmini__ico .ico{ width:18px; height:18px; }
.dropmini__txt{ flex:1; min-width:0; }
.dropmini__txt strong{ display:block; font-size:13.8px; color:var(--navy); }
.dropmini__txt small{ display:block; font-size:11.8px; color:var(--muted); margin-top:2px; line-height:1.35; }
.dropmini__mais{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:8px;
  background:#fff; border:1px solid var(--line); color:var(--blue);
}
.dropmini__mais .ico{ width:14px; height:14px; }
.dropmini input{ display:none; }

/* Campo-isca anti-robô: fora da tela, não via display:none (alguns bots
   ignoram campos display:none/visibility:hidden de propósito). */
.hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.arquivos{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.arquivo{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font-size:13.5px;
}
.arquivo__thumb{
  width:42px; height:42px; flex:none; border-radius:9px; overflow:hidden;
  background:var(--navy-soft); display:grid; place-items:center; color:var(--navy);
}
.arquivo__thumb img{ width:100%; height:100%; object-fit:cover; }
.arquivo__info{ flex:1; min-width:0; }
.arquivo__info b{ display:block; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arquivo__info span{ color:var(--muted); font-size:12px; }

/* =====================================================================
   TOASTS
   ===================================================================== */
.toasts{
  position:fixed; z-index:9999; right:20px; bottom:20px;
  display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 40px));
}
.toast{
  padding:13px 18px; border-radius:var(--r); background:var(--navy); color:#fff;
  font-size:14px; font-weight:550; box-shadow:var(--sh-2);
  opacity:0; transform:translateY(12px); transition:all 260ms cubic-bezier(.2,.8,.2,1);
  border-left:4px solid var(--green);
}
.toast.is-in{ opacity:1; transform:translateY(0); }
.toast--erro{ background:#8E2626; border-left-color:#F0A0A0; }
.toast--aviso{ background:#8A5A11; border-left-color:#F3CE86; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(9,26,58,.55); backdrop-filter:blur(4px);
}
.modal.is-open{ display:flex; animation:fadeIn 180ms ease; }
.modal__box{
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-3);
  width:100%; max-width:560px; max-height:92vh; overflow:auto;
  animation:popIn 240ms cubic-bezier(.2,.9,.3,1);
}
.modal__box--lg{ max-width:880px; }
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:24px 28px 18px; border-bottom:1px solid var(--line-2);
  position:sticky; top:0; background:#fff; z-index:2; border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal__head h3{ font-size:19px; }
.modal__head p{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.modal__body{ padding:24px 28px; }
.modal__foot{
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  padding:18px 28px 24px; border-top:1px solid var(--line-2);
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }

/* =====================================================================
   TABELA
   ===================================================================== */
.tabela-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; }
table.tabela{ width:100%; border-collapse:collapse; min-width:780px; }
table.tabela th{
  text-align:left; padding:13px 16px; background:#FAFCFE;
  font-size:11.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tabela td{ padding:13px 16px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:middle; }
table.tabela tbody tr:last-child td{ border-bottom:0; }
table.tabela tbody tr{ transition:background var(--t); }
table.tabela tbody tr:hover{ background:#FAFCFE; }
.tabela__nome{
  display:flex; align-items:center; gap:11px; background:none; border:0; padding:0;
  font:inherit; cursor:pointer; text-align:left; color:var(--navy); font-weight:650;
}
.tabela__nome:hover{ color:var(--blue); }
.avatar{
  width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--navy-soft); color:var(--navy); font-size:12.5px; font-weight:750;
}
.avatar--urg{ background:var(--danger-soft); color:var(--danger); }
.acoes{ display:flex; gap:6px; justify-content:flex-end; }

.select--status{
  padding:7px 30px 7px 12px; font-size:12.5px; font-weight:650; border-radius:9px;
  border:1.5px solid var(--line); background-position:right 10px center; cursor:pointer;
}

/* =====================================================================
   VAZIO
   ===================================================================== */
.vazio{ text-align:center; padding:56px 24px; color:var(--muted); }
.vazio .ico{ width:44px; height:44px; margin:0 auto 14px; color:#C3CFE0; }
.vazio h4{ color:var(--ink-2); font-size:16px; margin-bottom:6px; }
.vazio p{ font-size:14px; max-width:400px; margin-inline:auto; }

/* =====================================================================
   IMPRESSÃO
   ===================================================================== */
@media print{
  .nao-imprime, .toasts{ display:none !important; }
}