/* Reset, tipografia, login e elementos de formulário compartilhados */
*{box-sizing:border-box;}

/* Quem ativou "reduzir movimento" no sistema não deve ver as animações de
   abrir/fechar modal etc. - encurta tudo para praticamente instantâneo em
   vez de desligar (evita saltos bruscos de estado inicial/final em
   elementos que dependem da transição pra posicionar). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

  html{
    min-height:100%;
    background:var(--bg-1);
  }

  body{
    margin:0;
    font-family:var(--font-sans);
    font-size:var(--fs-base);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    background:var(--bg-1);
    min-height:100vh;
    min-height:100dvh;
    color:var(--text);
  }

  h1,h2,h3,h4{
    font-family:var(--font-heading);
    font-weight:700;
    letter-spacing:-0.005em;
    color:var(--text);
  }

  ::selection{background:var(--primary-soft-strong);}

  .hidden{display:none !important;}

  /* ============ Scrollbar ============ */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{
    background:var(--border-strong);
    border:2px solid transparent;
    border-radius:var(--radius-pill);
    background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{background-color:var(--text-subtle);}

  /* ============ Login Screen ============ */
  .login-screen{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--bg-1);
    animation:fadeIn .3s var(--ease);
  }

  .login-card{
    width:100%;
    max-width:400px;
    background:var(--surface);
    border:1px solid var(--border);
    border-top:3px solid var(--brand);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:32px 36px 28px;
    text-align:center;
  }

  .login-logo{
    height:64px;
    width:auto;
    margin-bottom:16px;
  }

  .login-card h1{
    margin:0 0 4px;
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--text);
  }

  .login-card .login-sub{
    color:var(--text-muted);
    font-size:var(--fs-xs);
    margin-bottom:24px;
  }

  .login-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
  }

  .login-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:16px 0 12px;
    color:var(--text-muted);
    font-size:var(--fs-xs);
  }

  .login-divider::before,
  .login-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border);
  }

  .sso-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .sso-btn svg,
  .sso-import-btn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
  }

  /* ============ Shared form elements ============ */
  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .field label{
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--text);
  }

  /* Mesma "caixa" visual de um input, só que sem interação - usado nas
     telas de "Visualizar" (dados que não podem ser editados por ali). */
  .field-value{
    padding:10px 14px;
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    border:1px solid var(--border);
    font-size:var(--fs-sm);
    color:var(--text);
    min-height:1.3em;
  }

  .required-marker{
    margin-left:3px;
    color:var(--danger);
    font-weight:600;
  }

  .row{
    display:flex;
    gap:14px;
  }

  .row .field{
    flex:1;
    min-width:0;
  }

  select, textarea, input[type="text"], input[type="email"], input[type="date"], input[type="password"], input[type="number"], input[type="file"]{
    padding:10px 14px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:var(--fs-sm);
    font-family:inherit;
    color:var(--text);
    background:var(--surface);
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    width:100%;
  }

  select:hover, textarea:hover,
  input[type="text"]:hover, input[type="email"]:hover, input[type="date"]:hover,
  input[type="password"]:hover, input[type="number"]:hover, input[type="file"]:hover{
    border-color:var(--text-subtle);
  }

  textarea{
    resize:vertical;
    min-height:72px;
  }

  input[type="file"]{
    font-size:var(--fs-xs);
  }

  select option{
    background:var(--surface);
    color:var(--text);
  }

  select:focus, input:focus, textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--focus-ring);
  }

  input:disabled, select:disabled, textarea:disabled{
    background:var(--surface-sunken);
    color:var(--text-muted);
    cursor:not-allowed;
  }

  /* Anel de foco global para navegação por teclado - cobre botões, abas,
     chips e qualquer outro elemento interativo sem estado de foco próprio
     (inputs/selects/textarea já têm o deles, mais acima). :focus-visible em
     vez de :focus evita o anel aparecer em cliques de mouse. */
  button:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible,
  summary:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  input::placeholder, textarea::placeholder{
    color:var(--text-subtle);
  }

  input[type="radio"]{
    accent-color:var(--primary);
  }

  /* Toda caixa de seleção do sistema é desenhada como interruptor. É o
     próprio <input type="checkbox"> (appearance:none + ::before como
     botão), então continua com o mesmo comportamento, teclado, foco,
     leitor de tela e formulário - e vale também para as caixas criadas
     por JavaScript, sem marcação extra. */
  input[type="checkbox"]{
    -webkit-appearance:none;
    appearance:none;
    position:relative;
    flex:0 0 36px;
    width:36px;
    height:20px;
    margin:0;
    border:0;
    border-radius:var(--radius-pill);
    background:var(--border-strong);
    vertical-align:middle;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  input[type="checkbox"]::before{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.25);
    transition:transform var(--dur) var(--ease);
  }

  input[type="checkbox"]:hover{
    background:var(--text-subtle);
  }

  input[type="checkbox"]:checked{
    background:var(--primary);
  }

  input[type="checkbox"]:checked:hover{
    background:var(--primary-hover);
  }

  input[type="checkbox"]:checked::before{
    transform:translateX(16px);
  }

  /* "Selecionar todos" com só parte da lista marcada: botão no meio. */
  input[type="checkbox"]:indeterminate{
    background:var(--primary-soft-strong);
  }

  input[type="checkbox"]:indeterminate::before{
    transform:translateX(8px);
  }

  input[type="checkbox"]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  input[type="checkbox"]:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  input[type="date"][readonly]{
    cursor:pointer;
  }

  input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
  }

  input[type="date"]:not([readonly])::-webkit-calendar-picker-indicator{
    display:inline-block;
    cursor:pointer;
  }

  :root[data-theme="dark"] input[type="date"]:not([readonly])::-webkit-calendar-picker-indicator{
    filter:invert(0.8);
  }

  .date-input-wrapper{
    position:relative;
  }

  .date-input-wrapper > input[readonly]{
    cursor:pointer;
    padding-right:42px;
  }

  /* Ícone de calendário (traço, mesmo estilo dos demais ícones SVG). */
  .date-input-wrapper::after{
    content:'';
    position:absolute;
    top:50%;
    right:14px;
    width:17px;
    height:17px;
    transform:translateY(-50%);
    background-color:var(--text-muted);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events:none;
  }

  .error-msg{
    font-size:var(--fs-2xs);
    color:var(--danger-text);
    min-height:14px;
  }

  .field.invalid select, .field.invalid input, .field.invalid .styled-select-trigger{
    border-color:var(--danger);
    box-shadow:0 0 0 3px var(--danger-surface);
  }

  button{
    font-family:inherit;
  }

  /* ============ Botões base ============
     Primário sólido na cor da marca; sem gradiente, brilho ou
     deslocamento no hover - só a troca de tom. */
  button.submit-btn{
    margin-top:6px;
    background:var(--primary);
    color:var(--on-primary);
    border:1px solid transparent;
    padding:11px 18px;
    min-height:42px;
    font-size:var(--fs-sm);
    font-weight:600;
    border-radius:var(--radius-sm);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  button.submit-btn:hover{
    background:var(--primary-hover);
  }

  button.submit-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  button.submit-btn:disabled:hover{
    background:var(--primary);
  }

  button.danger-btn{
    background:var(--danger-solid);
    color:#fff;
    border:1px solid transparent;
    padding:10px 16px;
    min-height:40px;
    font-size:var(--fs-sm);
    font-weight:600;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  button.danger-btn:hover{
    background:var(--danger-solid-hover);
  }

  .confirmation{
    display:none;
    background:var(--success-surface);
    border:1px solid var(--success-border);
    border-left:3px solid var(--success);
    color:var(--success-text);
    padding:12px 14px;
    border-radius:var(--radius-sm);
    margin-top:6px;
    font-size:var(--fs-sm);
    align-items:flex-start;
    gap:10px;
  }

  .confirmation.show{
    display:flex;
    animation:fadeIn .2s var(--ease);
  }

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

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

  .confirmation svg{
    flex-shrink:0;
    margin-top:2px;
  }