/* =========================================================
   BASE
   ========================================================= */

* { box-sizing: border-box; }

body{
  margin: 0;
  font-family: Arial, sans-serif;
  color: #111;
  background: transparent; /* importante: quem manda no fundo é .auth-body/.app-body */
}

/* =========================================================
   LAYOUT PADRÃO
   ========================================================= */

.container{
  max-width: 980px;
  margin: 28px auto;
  padding: 0 14px;
  position: relative;
  z-index: 1; /* acima dos blobs */
}

.row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}

/* =========================================================
   COMPONENTES (base)
   ========================================================= */

label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin-top: 10px;
}

input, select, textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7dde3;
  border-radius: 14px;
  margin-top: 6px;
  font-size: 14px;
  background: rgba(255,255,255,.92);
  outline: none;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(17,17,17,.35);
  box-shadow: 0 0 0 4px rgba(17,17,17,.08);
}

.actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn{
  border: 1px solid #e7edf3;
  background: rgba(255,255,255,.90);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.primary{
  background:#111;
  color:#fff;
  border-color:#111;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.msg{
  margin-top: 10px;
  font-weight: 800;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid #e7edf3;
}

.small{
  font-size: 12px;
  color:#5b6270;
  margin-top: 6px;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
}

.bigNumber{
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 34px;
  font-weight: 900;
}

/* Lista */
.item{
  background: rgba(255,255,255,.86);
  border: 1px solid #e7edf3;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  padding: 12px;
  margin-top: 10px;
}
.item .topline{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

/* Grid (filtros/admin etc.) */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Paginação */
.pager{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;

  background: rgba(255,255,255,.70);
  border: 1px solid #e7edf3;
  border-radius: 14px;
  padding: 10px 12px;
}
.pager-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Responsivo */
@media (max-width: 720px){
  .actions{ flex-direction: column; align-items: stretch; }
}

/* =========================================================
   VARIÁVEIS DE TEMA (padrão do login)
   ========================================================= */

:root{
  --bg: #f4f6f8;
  --text: #111;
  --muted: #5b6270;
  --border: #e7edf3;
  --border2: #d7dde3;
  --card: rgba(255,255,255,.78);
  --shadow2: 0 10px 26px rgba(0,0,0,.08);
  --radius: 18px;
  --radius2: 14px;
  --black: #111;
  --white: #fff;
}

/* =========================================================
   APP (telas internas - index/admin)
   ========================================================= */

.app-body{
  min-height: 100vh;
  background: var(--bg);
  overflow-x: hidden;
}

.app-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.app-blob{
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  filter: blur(55px);
  opacity: .32;
}
.app-blob.a{
  top: -220px;
  left: -180px;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.35), transparent 60%);
}
.app-blob.b{
  bottom: -240px;
  right: -190px;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.22), transparent 60%);
}

/* Header/top premium */
.top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;

  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.top h1{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* Badge base (será sobrescrito pelos badges de status/perfil abaixo quando usados) */
.badge{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  color: #333;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* Cards estilo glass */
.card{
  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
  margin-bottom: 14px;
}

.card h2{
  margin-top: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Subcard (para evitar "card dentro de card") */
.subcard{
  background: rgba(255,255,255,.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* =========================================================
   LOGIN (visual moderno)
   ========================================================= */

.auth-body{
  min-height: 100vh;
  background: #f4f6f8;
  overflow: hidden;
}

.auth-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.auth-blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .45;
}
.auth-blob.a{
  top: -180px;
  left: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.35), transparent 55%);
}
.auth-blob.b{
  bottom: -200px;
  right: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.25), transparent 55%);
}

.auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px 14px;
  position: relative;
  z-index: 1;
}

.auth-card{
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(230,235,240,.9);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  padding: 18px;
}

.auth-header{
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.auth-logo{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.auth-title h1{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.auth-title p{
  margin: 4px 0 0 0;
  color: #5b6270;
  font-size: 13px;
}

.auth-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e7edf3;
  background: rgba(255,255,255,.85);
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

.auth-alert{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,0,0,.18);
  background: rgba(255,0,0,.06);
  color: #a40000;
  margin: 10px 0 12px 0;
  font-weight: 700;
}

.auth-form{ margin-top: 8px; }

.auth-label{
  display: block;
  margin-top: 12px;
  font-weight: 800;
  font-size: 13px;
}
.auth-label span{
  display:block;
  margin-bottom: 6px;
  color: #2a2f38;
}

.auth-input{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid #d7dde3;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.9);
}

.auth-input i{
  color: #2a2f38;
  opacity: .85;
}

.auth-input input{
  border: none !important;
  outline: none !important;
  width: 100%;
  padding: 2px 0;
  font-size: 14px;
  background: transparent !important;
  margin-top: 0 !important;
}

.auth-eye{
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.auth-eye:hover{ background: rgba(0,0,0,.06); }

.auth-btn{
  margin-top: 14px;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  transition: transform .12s ease;
}
.auth-btn:hover{ transform: translateY(-1px); }
.auth-btn:active{ transform: translateY(0); }

.auth-footer{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;
  color:#6b7280;
  font-size: 12px;
}
.auth-footer .dot{ opacity: .6; }

@media (max-width: 520px){
  .auth-header{
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
  }
  .auth-pill{
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ===== Fix: foco duplicado no login ===== */

/* Remove o foco/box-shadow global do input dentro do login */
.auth-input input:focus{
  box-shadow: none !important;
  outline: none !important;
}

/* Aplica o foco no "wrapper" (fica mais bonito e consistente) */
.auth-input:focus-within{
  border-color: rgba(17,17,17,.35);
  box-shadow: 0 0 0 4px rgba(17,17,17,.08);
}

/* (opcional) deixa o botão do olho alinhado com o foco também */
.auth-input:focus-within .auth-eye{
  background: rgba(0,0,0,.04);
}

/* ===========================
   LISTAGEM DE OFÍCIOS – VISUAL REFINADO
   =========================== */

.item{
  padding: 0;
  overflow: hidden;
}

/* Faixa superior (Ano/Número) */
.item-header{
  background: linear-gradient(135deg, #111, #2a2a2a);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-header .numero{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.item-header .data{
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
}

/* Corpo do card */
.item-body{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.92);
}

/* Observação em destaque */
.item-obs{
  font-size: 15px;
  line-height: 1.55;
  color: #111;
}

.item-obs.empty{
  color: #6b7280;
  font-style: italic;
}

/* Emissor discreto */
.item-footer{
  font-size: 12px;
  color: #6b7280;
}

/* ===== Validação de erro ===== */
.input-error {
  border-color: #e5533d !important;
  box-shadow: 0 0 0 2px rgba(229, 83, 61, 0.25);
}

.msg {
  margin-top: 8px;
  font-size: 0.9rem;
}

.msg.error {
  color: #e5533d;
}

.msg.success {
  color: #2fbf71;
}

/* =========================================================
   ADMIN / TABELAS – evitar corte de conteúdo
   ========================================================= */

/* Wrapper para tabelas/listagens grandes */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

/* Tabela “responsiva” dentro do card */
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 900px; /* força rolagem horizontal no mobile/desktop estreito */
}

.table th,
.table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap; /* evita cortar dados (login, depto etc.) */
}

.table thead th{
  font-size: 12px;
  color: #4b5563;
  font-weight: 900;
}

.table tbody tr:hover{
  background: rgba(0,0,0,.03);
}

/* Colunas longas (ex.: nome, depto) podem quebrar se quiser */
.table td.wrap{
  white-space: normal;
}

/* Inputs dentro de tabelas não “estouram” */
.table input,
.table select{
  min-width: 180px;
}

/* Botões pequenos para ações dentro de linhas */
.btn.sm{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
}

/* Se quiser permitir mais espaço nas telas internas */
@media (min-width: 1100px){
  .container.wide{
    max-width: 1180px;
  }
}

/* =========================
   BOTÕES DE AÇÃO (Admin)
   ========================= */

/* Editar - laranja claro */
.btn-edit {
  background: rgba(255, 165, 0, 0.18);
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: #7a4a00;
}
.btn-edit:hover {
  background: rgba(255, 165, 0, 0.28);
}

/* Desativar - vermelho claro */
.btn-danger {
  background: rgba(229, 83, 61, 0.18);
  border: 1px solid rgba(229, 83, 61, 0.35);
  color: #8a1f15;
}
.btn-danger:hover {
  background: rgba(229, 83, 61, 0.28);
}

/* Ativar - verde claro */
.btn-success {
  background: rgba(47, 191, 113, 0.18);
  border: 1px solid rgba(47, 191, 113, 0.35);
  color: #1f7a4a;
}
.btn-success:hover {
  background: rgba(47, 191, 113, 0.28);
}

/* =========================
   BADGES (Status / Perfil)
   ========================= */

/* Badge compacto (tabela) */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;

  /* mantém visual glass */
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  color: #333;
}

/* Status */
.badge-ativo{
  background: rgba(47, 191, 113, 0.18);
  border: 1px solid rgba(47, 191, 113, 0.35);
  color: #1f7a4a;
}

.badge-inativo{
  background: rgba(229, 83, 61, 0.18);
  border: 1px solid rgba(229, 83, 61, 0.35);
  color: #8a1f15;
}

/* Perfil */
.badge-admin{
  background: rgba(90, 135, 255, 0.18);
  border: 1px solid rgba(90, 135, 255, 0.35);
  color: #1f3c88;
}

.badge-user{
  background: rgba(160, 170, 180, 0.25);
  border: 1px solid rgba(160, 170, 180, 0.45);
  color: #374151;
}

/* ===== TOPBAR / HEADER ===== */

.topbar{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.topbar-inner{
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.topbar-left{
  display: flex;
  align-items: center;
  min-width: 220px;
}

.system-title{
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  line-height: 1.15;
  white-space: nowrap;
}

.topbar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

/* ===== USER MENU ===== */

.user-menu{
  position: relative;
}

.user-trigger{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-weight: 900;
  cursor: pointer;
  max-width: 420px;
}

.user-name{
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #111;
}

.caret{
  font-size: 12px;
  opacity: .7;
}

/* dropdown */
.user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  padding: 12px;
  min-width: 240px;
  display: none;
  z-index: 50;
  border: 1px solid #eef2f7;
}

.user-dropdown .user-fullname{
  font-weight: 900;
  margin-bottom: 2px;
  font-size: 13px;
  color: #111;
}

.user-dropdown .user-subinfo{
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}

.user-dropdown .user-role{
  font-size: 11px;
  font-weight: 900;
  color: #0b4aa2;
  background: #e8f2ff;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.user-dropdown a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.user-dropdown a:hover{
  background: #f1f5f9;
}

.user-dropdown a.logout{
  color: #b91c1c;
}

/* aberto */
.user-menu.open .user-dropdown{
  display: block;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 820px){
  .topbar-inner{
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-left{
    min-width: 0;
  }

  .system-title{
    white-space: normal;
  }

  .topbar-right{
    justify-content: flex-start;
  }

  .user-trigger{
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  .user-name{
    max-width: 75%;
  }
}

/* ===== MODAL (CONFIRMAÇÃO) ===== */

.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.modal.is-open{
  display: block;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.modal-dialog{
  position: relative;
  width: min(560px, calc(100% - 24px));
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
}

.modal-title{
  font-weight: 900;
  font-size: 16px;
}

.modal-x{
  border: 1px solid #e2e8f0;
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
}

.modal-x:hover{
  background: #f1f5f9;
}

.modal-body{
  padding: 16px;
}

.modal-text{
  margin: 0 0 12px 0;
  color: #111;
  font-weight: 700;
}

.modal-preview{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.modal-preview-label{
  font-size: 12px;
  font-weight: 900;
  color: #334155;
  margin-bottom: 8px;
}

.modal-preview-box{
  font-size: 13px;
  color: #111;
  line-height: 1.4;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap; /* mantém quebras */
}

.modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #eef2f7;
}

/* animação leve */
.modal.is-open .modal-dialog{
  animation: modalIn .16s ease-out;
}

@keyframes modalIn{
  from { transform: translateY(10px); opacity: .85; }
  to   { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   THEME BLUE (cole no FINAL do style.css)
   ========================================================= */

:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --primary: #2563eb;      /* azul elegante */
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;

  --primary-soft: rgba(37, 99, 235, .10);
  --shadow: 0 18px 50px rgba(2, 6, 23, .08);
  --shadow-soft: 0 10px 30px rgba(2, 6, 23, .06);

  --radius: 18px;
  --radius-sm: 12px;
}

/* fundo geral */
.app-body{
  color: var(--text);
  background: var(--bg);
}

/* melhora os blobs do fundo (fica mais “azul”) */
.app-bg .app-blob.a{
  filter: blur(40px);
  opacity: .55;
}
.app-bg .app-blob.b{
  filter: blur(40px);
  opacity: .50;
}

/* container */
.container{
  max-width: 1050px;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.system-title{
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--text);
}

/* user trigger */
.user-trigger{
  border: 1px solid var(--border);
  background: #f8fafc;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.user-trigger:hover{
  border-color: rgba(37,99,235,.35);
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(37,99,235,.10);
  transform: translateY(-1px);
}

.user-trigger:focus{
  outline: 3px solid rgba(37,99,235,.25);
  outline-offset: 2px;
}

/* dropdown */
.user-dropdown{
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.user-dropdown a{
  transition: background .12s ease, color .12s ease, transform .12s ease;
}

.user-dropdown a:hover{
  background: rgba(37,99,235,.08);
  color: var(--primary-700);
  transform: translateX(2px);
}

.user-dropdown a.logout:hover{
  background: rgba(220,38,38,.08);
  color: #991b1b;
}

/* =========================================================
   CARDS
   ========================================================= */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.card h2{
  font-weight: 900;
  color: var(--text);
}

.subcard{
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,.02));
  border: 1px solid rgba(37,99,235,.14);
  border-radius: var(--radius);
}

/* =========================================================
   LABELS / INPUTS / SELECT / TEXTAREA
   ========================================================= */
label{
  color: var(--text);
}

input, select, textarea{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

input::placeholder, textarea::placeholder{
  color: #94a3b8;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* erro */
.input-error{
  border-color: rgba(220,38,38,.65) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.14) !important;
}

/* textarea mais bonita */
textarea#observacao{
  min-height: 84px;
  resize: vertical;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

.btn:hover{
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0px);
  box-shadow: none;
}

.btn.primary{
  border: 1px solid rgba(37,99,235,.20);
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color: #fff;
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}

.btn.primary:hover{
  background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
  box-shadow: 0 16px 34px rgba(37,99,235,.22);
}

/* botão desabilitado */
.btn:disabled,
.btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   MENSAGENS
   ========================================================= */
.msg{
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
  border: 1px solid var(--border);
  background: #f8fafc;
}

.msg.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
  color: #14532d;
}

.msg.error{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
  color: #7f1d1d;
}

/* =========================================================
   PAGER
   ========================================================= */
.pager{
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* =========================================================
   LISTAGEM (cards de itens)
   ========================================================= */
.item{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.item:hover{
  border-color: rgba(37,99,235,.26);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  transform: translateY(-2px);
}

.item-header{
  border-bottom: 1px solid rgba(37,99,235,.10);
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.03));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.item-header .numero{
  font-weight: 950;
  color: var(--primary-700);
}

.item-header .data{
  color: var(--muted);
}

.item-obs{
  font-size: 14px;
  line-height: 1.55;
  color: #0b1220;
}

.item-obs.empty{
  color: #94a3b8;
}

.item-footer{
  color: var(--muted);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-dialog{
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.modal-header{
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.03));
}

.modal-title{
  color: var(--text);
  font-weight: 950;
}

.modal-preview{
  border: 1px solid rgba(37,99,235,.16);
  background: rgba(37,99,235,.06);
}

.modal-x:hover{
  border-color: rgba(37,99,235,.35);
}

/* =========================================================
   LOGIN – REFINO MODERNO (cole no FINAL do style.css)
   ========================================================= */

/* Tipografia mais moderna (sem mexer no HTML) */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* Fundo do login: mais “clean”, azul sutil e com profundidade */
.auth-body{
  background:
    radial-gradient(900px 500px at 18% 18%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(800px 520px at 80% 78%, rgba(29,78,216,.10), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

/* Blobs mais coerentes com tema azul */
.auth-blob{
  filter: blur(55px);
  opacity: .55;
}
.auth-blob.a{
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.45), transparent 60%);
}
.auth-blob.b{
  background: radial-gradient(circle at 30% 30%, rgba(2,6,23,.18), transparent 62%);
}

/* Card mais “corporativo” */
.auth-card{
  max-width: 560px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow:
    0 30px 80px rgba(2,6,23,.10),
    0 10px 30px rgba(2,6,23,.06);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

/* faixa superior sutil para dar identidade */
.auth-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(37,99,235,1), rgba(29,78,216,1), rgba(30,64,175,1));
}

/* Cabeçalho mais alinhado e com respiro */
.auth-header{
  gap: 14px;
  margin-bottom: 16px;
}

/* Logo com gradiente azul (mais “credibilidade”) */
.auth-logo{
  border-radius: 18px;
  background: linear-gradient(180deg, var(--primary, #2563eb), var(--primary-700, #1e40af));
  box-shadow: 0 14px 28px rgba(37,99,235,.22);
}

/* Títulos */
.auth-title h1{
  font-size: 20px;
  font-weight: 950;
  color: var(--text, #0f172a);
  letter-spacing: -0.02em;
}
.auth-title p{
  font-size: 13px;
  color: var(--muted, #64748b);
}

/* Pill (data/hora) mais discreta e alinhada ao tema */
.auth-pill{
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  color: var(--primary-700, #1e40af);
  font-weight: 900;
}

/* Labels mais legíveis */
.auth-label{
  margin-top: 14px;
  font-size: 13px;
}
.auth-label span{
  color: #0f172a;
  opacity: .92;
}

/* Inputs: altura, borda, foco premium */
.auth-input{
  border: 1px solid rgba(226,232,240,1);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.auth-input i{
  color: var(--primary-700, #1e40af);
  opacity: .85;
}

/* Campo interno */
.auth-input input{
  font-size: 14px;
  color: var(--text, #0f172a);
}
.auth-input input::placeholder{
  color: #94a3b8;
}

/* Foco no wrapper (sem aquele “highlight duplo”) */
.auth-input:focus-within{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  transform: translateY(-1px);
}

/* Botão do olho mais “componente” */
.auth-eye{
  border-radius: 12px;
  padding: 8px 10px;
  transition: background .12s ease, transform .12s ease;
}
.auth-eye:hover{
  background: rgba(37,99,235,.08);
}
.auth-eye:active{
  transform: scale(.98);
}

/* Botão principal em azul (padrão confiável) */
.auth-btn{
  border-radius: 16px;
  padding: 13px 14px;
  background: linear-gradient(180deg, var(--primary, #2563eb), var(--primary-600, #1d4ed8));
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
  letter-spacing: .2px;
}
.auth-btn:hover{
  box-shadow: 0 20px 46px rgba(37,99,235,.26);
}
.auth-btn:active{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
}

/* Alert de erro: mais limpo */
.auth-alert{
  border-radius: 16px;
  border: 1px solid rgba(220,38,38,.22);
  background: rgba(220,38,38,.06);
  color: #7f1d1d;
}

/* Rodapé mais “institucional” */
.auth-footer{
  margin-top: 14px;
  color: #64748b;
}
.auth-footer .dot{ opacity: .5; }

/* Responsivo: card com padding melhor no mobile */
@media (max-width: 520px){
  .auth-card{ padding: 18px; border-radius: 20px; }
}