/*
 * MX Design System — mds.css v2.2
 * www.mxsolutions.com.br
 * Atualizado: 2025
 *
 * Índice:
 *  1. Font
 *  2. CSS Variables (Light + Dark Mode)
 *  3. Keyframes / Animações
 *  4. Reset & Base
 *  5. Utilitários de Cor (bg- / tx-)
 *  6. Utilitários de Alinhamento
 *  7. Utilitários de Flexbox
 *  8. Utilitários de Espaçamento
 *  9. Utilitários de Display / Visibilidade
 * 10. Tipografia
 * 11. Botões (tamanho normal)
 * 12. Botões (tamanho sm)
 * 13. Switch / Toggle
 * 14. Loaders / Spinners
 * 15. Progress Bar
 * 16. Warnings / Alertas
 * 17. Formulários (input, select, textarea)
 * 18. Fieldset
 * 19. Tables
 * 20. Tabs
 * 21. Tooltip
 * 22. Modal / Dialog
 * 23. Panel
 * 24. Dash Cards
 * 25. Paginação
 * 26. Checkbox Customizado
 * 27. Radio Customizado
 * 28. Responsivo
 */


/* =============================================================
   1. FONT
   ============================================================= */

@font-face {
  font-family: default-font;
  src: local("Barlow"), url("/css/font/Barlow-Light.ttf") format("opentype");
}


/* =============================================================
   2. CSS VARIABLES — Light Mode
   ============================================================= */

:root {

  /* Tipografia */
  --font-family:       default-font;
  --font-size:         16px;
  --font-size-sm:      12px;
  --font-size-lg:      20px;

  /* Raio de borda padrão */
  --radius:            5px;
  --radius-sm:         5px;

  /* Sombra padrão */
  --shadow:            0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.10);
  --shadow-lg:         0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

  /* Transição padrão */
  --transition:        all 0.25s linear;

  /* ── Primária ─────────────────────────────────────────────── */
  --primary:           #05354C;
  --primary-900:       #02151E;
  --primary-800:       #031D29;
  --primary-700:       #042535;
  --primary-600:       #042D40;
  --primary-500:       #05354C;
  --primary-400:       #1C556F;
  --primary-300:       #417993;
  --primary-200:       #73A1B7;
  --primary-100:       #B3CEDB;

  /* ── Secundária ───────────────────────────────────────────── */
  --secondary:         #0B6C99;
  --secondary-900:     #052B3D;
  --secondary-800:     #063B54;
  --secondary-700:     #084C6B;
  --secondary-600:     #0A5C82;
  --secondary-500:     #0B6C99;
  --secondary-400:     #2D85AD;
  --secondary-300:     #569FC1;
  --secondary-200:     #87BDD6;
  --secondary-100:     #BFDCEA;

  /* ── Vermelho ─────────────────────────────────────────────── */
  --red:               #E6435E;
  --red-900:           #752230;
  --red-800:           #972C3E;
  --red-700:           #BA374D;
  --red-600:           #DC415B;
  --red-500:           #E6435E;
  --red-400:           #FF6680;
  --red-300:           #FF8196;
  --red-200:           #FF9CAD;
  --red-100:           #FAC5D1;

  /* ── Amarelo ──────────────────────────────────────────────── */
  --yellow:            #E6AD50;
  --yellow-900:        #755729;
  --yellow-800:        #977035;
  --yellow-700:        #BA8A41;
  --yellow-600:        #DCA34D;
  --yellow-500:        #E6AD50;
  --yellow-400:        #FFC772;
  --yellow-300:        #FFD18B;
  --yellow-200:        #FFDBA4;
  --yellow-100:        #FFE5BD;

  /* ── Verde ────────────────────────────────────────────────── */
 
  --green:       #4A9B6F;
  --green-900:   #0F2B1E;
  --green-800:   #1A4230;
  --green-700:   #2D7050;
  --green-600:   #3A8A64;
  --green-500:   #4A9B6F;
  --green-400:   #6CB38A;
  --green-300:   #82C9A2;
  --green-200:   #A8DABC;
  --green-100:   #C8EEDA;
  
/* ── Cinza ────────────────────────────────────────────────── */
  --gray:              #7C7C7D;
  --gray-900:          #323232;
  --gray-800:          #434344;
  --gray-700:          #565657;
  --gray-600:          #69696A;
  --gray-500:          #7C7C7D;
  --gray-400:          #969697;
  --gray-300:          #B0B0B1;
  --gray-200:          #CBCBCB;
  --gray-100:          #E5E5E5;

  /* ── Superfícies / UI (Light) ─────────────────────────────── */
  --bg-body:           #FFFFFF;
  --bg-surface:        #F5F5F5;
  --bg-overlay:        rgba(0, 0, 0, 0.80);
  --text-default:      var(--gray-900);
  --text-muted:        var(--gray-400);
  --border-default:    var(--gray-200);
  --border-focus:      var(--secondary-400);
}


/* =============================================================
   2b. DARK MODE — sobrescreve apenas as variáveis de superfície
       Use  <html data-theme="dark">  ou  prefers-color-scheme
   ============================================================= */

[data-theme="dark"] {
  --bg-body:           #0F1923;
  --bg-surface:        #1C2733;
  --bg-overlay:        rgba(0, 0, 0, 0.90);
  --text-default:      #E5E5E5;
  --text-muted:        var(--gray-400);
  --border-default:    #2E3C49;
  --border-focus:      var(--secondary-300);

  /* Inverte cards / dialogs para tons escuros */
  --gray-100:          #2A3542;
  --gray-200:          #354455;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-body:         #0F1923;
    --bg-surface:      #1C2733;
    --bg-overlay:      rgba(0, 0, 0, 0.90);
    --text-default:    #E5E5E5;
    --text-muted:      var(--gray-400);
    --border-default:  #2E3C49;
    --border-focus:    var(--secondary-300);
    --gray-100:        #2A3542;
    --gray-200:        #354455;
  }
}


/* =============================================================
   3. KEYFRAMES / ANIMAÇÕES
   ============================================================= */

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-down {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  60%  { opacity: 0.6; }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in      { animation: fade-in      0.4s ease forwards; }
.fade-in-down { animation: fade-in-down 0.45s ease-out forwards; }
.fade-out     { animation: fade-out     0.4s ease forwards; }
.slide-up     { animation: slide-up     0.35s ease forwards; }


/* =============================================================
   4. RESET & BASE
   ============================================================= */

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

html {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--font-size);
  font-weight: normal;
  font-family: var(--font-family);
  color: var(--text-default);
  background-color: var(--bg-body);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--bg-body);
  color: var(--text-default);
}

a {
  color: var(--text-default);
  text-decoration: none;
}
a:hover   { text-decoration: underline; color: var(--primary-900); }
a:visited { color: var(--text-default); text-decoration: none; }

h1 { font-size: 2rem;   padding: 0; margin: 0; font-weight: normal; }
h2 { font-size: 1.5rem; padding: 0; margin: 0; font-weight: normal; }
h3 { font-size: 1.2rem; padding: 0; margin: 0; font-weight: normal; }
h4 { font-size: 1rem;   padding: 0; margin: 0; font-weight: normal; }
h5 { font-size: .9rem;  padding: 0; margin: 0; font-weight: normal; }
h6 { font-size: .8rem;  padding: 0; margin: 0; font-weight: normal; }


/* =============================================================
   5. UTILITÁRIOS DE COR  —  bg- / tx-
      CORREÇÃO: todas as classes tx- agora usam color, não background-color
   ============================================================= */

/* Primária */
.bg-primary     { background-color: var(--primary); }
.bg-primary-900 { background-color: var(--primary-900); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-100 { background-color: var(--primary-100); }

.tx-primary     { color: var(--primary); }
.tx-primary-900 { color: var(--primary-900); }
.tx-primary-800 { color: var(--primary-800); }
.tx-primary-700 { color: var(--primary-700); }
.tx-primary-600 { color: var(--primary-600); }
.tx-primary-500 { color: var(--primary-500); }
.tx-primary-400 { color: var(--primary-400); }
.tx-primary-300 { color: var(--primary-300); }
.tx-primary-200 { color: var(--primary-200); }
.tx-primary-100 { color: var(--primary-100); }

/* Secundária */
.bg-secondary     { background-color: var(--secondary); }
.bg-secondary-900 { background-color: var(--secondary-900); }
.bg-secondary-800 { background-color: var(--secondary-800); }
.bg-secondary-700 { background-color: var(--secondary-700); }
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-100 { background-color: var(--secondary-100); }

.tx-secondary     { color: var(--secondary); }
.tx-secondary-900 { color: var(--secondary-900); }
.tx-secondary-800 { color: var(--secondary-800); }
.tx-secondary-700 { color: var(--secondary-700); }
.tx-secondary-600 { color: var(--secondary-600); }
.tx-secondary-500 { color: var(--secondary-500); }
.tx-secondary-400 { color: var(--secondary-400); }
.tx-secondary-300 { color: var(--secondary-300); }
.tx-secondary-200 { color: var(--secondary-200); }
.tx-secondary-100 { color: var(--secondary-100); }

/* Vermelho */
.bg-red     { background-color: var(--red); }
.bg-red-900 { background-color: var(--red-900); }
.bg-red-800 { background-color: var(--red-800); }
.bg-red-700 { background-color: var(--red-700); }
.bg-red-600 { background-color: var(--red-600); }
.bg-red-500 { background-color: var(--red-500); }
.bg-red-400 { background-color: var(--red-400); }
.bg-red-300 { background-color: var(--red-300); }
.bg-red-200 { background-color: var(--red-200); }
.bg-red-100 { background-color: var(--red-100); }

.tx-red     { color: var(--red); }
.tx-red-900 { color: var(--red-900); }
.tx-red-800 { color: var(--red-800); }
.tx-red-700 { color: var(--red-700); }
.tx-red-600 { color: var(--red-600); }
.tx-red-500 { color: var(--red-500); }
.tx-red-400 { color: var(--red-400); }
.tx-red-300 { color: var(--red-300); }
.tx-red-200 { color: var(--red-200); }
.tx-red-100 { color: var(--red-100); }

/* Amarelo */
.bg-yellow     { background-color: var(--yellow); }
.bg-yellow-900 { background-color: var(--yellow-900); }
.bg-yellow-800 { background-color: var(--yellow-800); }
.bg-yellow-700 { background-color: var(--yellow-700); }
.bg-yellow-600 { background-color: var(--yellow-600); }
.bg-yellow-500 { background-color: var(--yellow-500); }
.bg-yellow-400 { background-color: var(--yellow-400); }
.bg-yellow-300 { background-color: var(--yellow-300); }
.bg-yellow-200 { background-color: var(--yellow-200); }
.bg-yellow-100 { background-color: var(--yellow-100); }

.tx-yellow     { color: var(--yellow); }
.tx-yellow-900 { color: var(--yellow-900); }
.tx-yellow-800 { color: var(--yellow-800); }
.tx-yellow-700 { color: var(--yellow-700); }
.tx-yellow-600 { color: var(--yellow-600); }
.tx-yellow-500 { color: var(--yellow-500); }
.tx-yellow-400 { color: var(--yellow-400); }
.tx-yellow-300 { color: var(--yellow-300); }
.tx-yellow-200 { color: var(--yellow-200); }
.tx-yellow-100 { color: var(--yellow-100); }

/* Verde */
.bg-green     { background-color: var(--green); }
.bg-green-900 { background-color: var(--green-900); }
.bg-green-800 { background-color: var(--green-800); }
.bg-green-700 { background-color: var(--green-700); }
.bg-green-600 { background-color: var(--green-600); }
.bg-green-500 { background-color: var(--green-500); }
.bg-green-400 { background-color: var(--green-400); }
.bg-green-300 { background-color: var(--green-300); }
.bg-green-200 { background-color: var(--green-200); }
.bg-green-100 { background-color: var(--green-100); }

.tx-green     { color: var(--green); }
.tx-green-900 { color: var(--green-900); }
.tx-green-800 { color: var(--green-800); }
.tx-green-700 { color: var(--green-700); }
.tx-green-600 { color: var(--green-600); }
.tx-green-500 { color: var(--green-500); }
.tx-green-400 { color: var(--green-400); }
.tx-green-300 { color: var(--green-300); }
.tx-green-200 { color: var(--green-200); }
.tx-green-100 { color: var(--green-100); }

/* Cinza */
.bg-gray     { background-color: var(--gray); }
.bg-gray-900 { background-color: var(--gray-900); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-100 { background-color: var(--gray-100); }

.tx-gray     { color: var(--gray); }
.tx-gray-900 { color: var(--gray-900); }
.tx-gray-800 { color: var(--gray-800); }
.tx-gray-700 { color: var(--gray-700); }
.tx-gray-600 { color: var(--gray-600); }
.tx-gray-500 { color: var(--gray-500); }
.tx-gray-400 { color: var(--gray-400); }
.tx-gray-300 { color: var(--gray-300); }
.tx-gray-200 { color: var(--gray-200); }
.tx-gray-100 { color: var(--gray-100); }

/* Superfície */
.bg-surface { background-color: var(--bg-surface); }
.bg-body    { background-color: var(--bg-body); }
.tx-muted   { color: var(--text-muted); }


/* =============================================================
   6. UTILITÁRIOS DE ALINHAMENTO
      (versão unificada — alias antigos removidos)
   ============================================================= */

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }
.align-middle { vertical-align: middle; }
.align-top    { vertical-align: top; }
.align-bottom { vertical-align: bottom; }

/* compat — mantidos para não quebrar código existente */
.c-align { text-align: center; }
.r-align { text-align: right; }
.l-align { text-align: left; }
.v-align { vertical-align: middle; }
.calign  { text-align: center; }
.ralign  { text-align: right; }
.lalign  { text-align: left; }
.valign  { vertical-align: middle; }


/* =============================================================
   7. UTILITÁRIOS DE FLEXBOX
   ============================================================= */

.flex             { display: flex; }
.flex-inline      { display: inline-flex; }
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }

/* justify-content */
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }

/* align-items */
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.items-center     { align-items: center; }
.items-baseline   { align-items: baseline; }
.items-stretch    { align-items: stretch; }

/* align-self */
.self-start       { align-self: flex-start; }
.self-end         { align-self: flex-end; }
.self-center      { align-self: center; }
.self-stretch     { align-self: stretch; }

/* grow / shrink */
.flex-1           { flex: 1; }
.flex-auto        { flex: auto; }
.flex-none        { flex: none; }
.flex-grow        { flex-grow: 1; }
.flex-shrink-0    { flex-shrink: 0; }

/* gap */
.gap-0   { gap: 0; }
.gap-1   { gap: 4px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-5   { gap: 20px; }
.gap-6   { gap: 24px; }
.gap-8   { gap: 32px; }
.gap-10  { gap: 40px; }


/* =============================================================
   8. UTILITÁRIOS DE ESPAÇAMENTO  (padding / margin)
      escala: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px
   ============================================================= */

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 24px; }
.p-6  { padding: 32px; }
.p-7  { padding: 48px; }
.p-8  { padding: 64px; }

.pt-0 { padding-top: 0; }    .pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }  .pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; } .pt-5 { padding-top: 24px; }
.pt-6 { padding-top: 32px; } .pt-7 { padding-top: 48px; }

.pb-0 { padding-bottom: 0; }    .pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }  .pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; } .pb-5 { padding-bottom: 24px; }
.pb-6 { padding-bottom: 32px; } .pb-7 { padding-bottom: 48px; }

.pl-0 { padding-left: 0; }    .pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }  .pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; } .pl-5 { padding-left: 24px; }
.pl-6 { padding-left: 32px; } .pl-7 { padding-left: 48px; }

.pr-0 { padding-right: 0; }    .pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }  .pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; } .pr-5 { padding-right: 24px; }
.pr-6 { padding-right: 32px; } .pr-7 { padding-right: 48px; }

.px-0 { padding-left: 0;    padding-right: 0; }
.px-1 { padding-left: 4px;  padding-right: 4px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 24px; padding-right: 24px; }
.px-6 { padding-left: 32px; padding-right: 32px; }

.py-0 { padding-top: 0;    padding-bottom: 0; }
.py-1 { padding-top: 4px;  padding-bottom: 4px; }
.py-2 { padding-top: 8px;  padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 24px; padding-bottom: 24px; }
.py-6 { padding-top: 32px; padding-bottom: 32px; }

/* Margin */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-5  { margin: 24px; }
.m-6  { margin: 32px; }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 32px; } .mt-7 { margin-top: 48px; }

.mb-0 { margin-bottom: 0; }    .mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }  .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; } .mb-7 { margin-bottom: 48px; }

.ml-0 { margin-left: 0; }    .ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }  .ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; } .ml-5 { margin-left: 24px; }
.ml-6 { margin-left: 32px; } .ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }    .mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }  .mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; } .mr-5 { margin-right: 24px; }
.mr-6 { margin-right: 32px; } .mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-4    { margin-left: 16px; margin-right: 16px; }

/* Legacy spacing — mantidos para compatibilidade */
.spacing-t    { padding-top: 15px; }
.spacing-b    { padding-bottom: 15px; }
.spacing-l    { padding-left: 15px; }
.spacing-r    { padding-right: 15px; }
.spacing-tblr { padding: 15px; }
.margins-t    { margin-top: 15px; }
.margins-b    { margin-bottom: 15px; }
.margins-l    { margin-left: 15px; }
.margins-r    { margin-right: 15px; }
.margins-tblr { margin: 15px; }


/* =============================================================
   9. UTILITÁRIOS DE DISPLAY / VISIBILIDADE
   ============================================================= */

.hidden         { display: none !important; }
.visible        { display: block; }
.visible-flex   { display: flex; }
.invisible      { visibility: hidden; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-none         { display: none; }
.border-0       { border: 0; }
.w-100          { width: 100%; }
.h-100          { height: 100%; }
.overflow-auto  { overflow: auto; }
.overflow-hidden{ overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.pointer-none   { pointer-events: none; }


/* =============================================================
   10. TIPOGRAFIA
   ============================================================= */

.text-sm  { font-size: var(--font-size-sm); }
.text-base{ font-size: var(--font-size); }
.text-lg  { font-size: var(--font-size-lg); }
.text-bold{ font-weight: 700; }
.text-normal { font-weight: normal; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =============================================================
   11. BOTÕES — tamanho normal
   ============================================================= */

.button-main,
.button-default,
.button-green,
.button-red,
.button-yellow,
.button-main-transparent,
.button-default-transparent,
.button-green-transparent,
.button-red-transparent,
.button-yellow-transparent {
  font-family: var(--font-family);
  font-size: var(--font-size);
  height: 45px;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  min-width: 100px;
  padding: 0 20px;
  transition: var(--transition);
}

/* Disabled — todos os botões */
.button-main:disabled,
.button-default:disabled,
.button-green:disabled,
.button-yellow:disabled,
.button-red:disabled {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}
.button-main:disabled:hover,
.button-default:disabled:hover,
.button-green:disabled:hover,
.button-yellow:disabled:hover,
.button-red:disabled:hover {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-100);
  color: var(--gray-400);
}

/* main */
.button-main { background-color: var(--secondary); border: 1px solid var(--secondary); color: #fff; }
.button-main:hover { background-color: var(--secondary-700); border-color: var(--secondary-700); }

/* default */
.button-default { background-color: var(--gray-100); border: 1px solid var(--gray-100); color: var(--gray-900); }
.button-default:hover { background-color: var(--gray-500); border-color: var(--gray-500); color: #fff; }

/* green */
.button-green { background-color: var(--green); border: 1px solid var(--green); color: #fff; }
.button-green:hover { background-color: var(--green-700); border-color: var(--green-700); }

/* yellow */
.button-yellow { background-color: var(--yellow); border: 1px solid var(--yellow); color: #fff; }
.button-yellow:hover { background-color: var(--yellow-700); border-color: var(--yellow-700); }

/* red */
.button-red { background-color: var(--red); border: 1px solid var(--red); color: #fff; }
.button-red:hover { background-color: var(--red-700); border-color: var(--red-700); }

/* transparent variants */
.button-main-transparent    { background: transparent; border: 1px solid var(--secondary); color: var(--secondary); }
.button-main-transparent:hover { border-color: var(--secondary-700); color: var(--secondary-700); }

.button-default-transparent { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-300); }
.button-default-transparent:hover { border-color: var(--gray-500); color: var(--gray-500); }

.button-green-transparent   { background: transparent; border: 1px solid var(--green); color: var(--green); }
.button-green-transparent:hover { border-color: var(--green-700); color: var(--green-700); }

.button-yellow-transparent  { background: transparent; border: 1px solid var(--yellow); color: var(--yellow); }
.button-yellow-transparent:hover { border-color: var(--yellow-700); color: var(--yellow-700); }

.button-red-transparent     { background: transparent; border: 1px solid var(--red); color: var(--red); }
.button-red-transparent:hover { border-color: var(--red-700); color: var(--red-700); }


/* =============================================================
   12. BOTÕES — tamanho sm
   ============================================================= */

.button-sm-main,
.button-sm-default,
.button-sm-green,
.button-sm-red,
.button-sm-yellow {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  padding: 0 14px;
  transition: var(--transition);
}

.button-sm-main    { background-color: var(--secondary); border: 1px solid var(--secondary); color: #fff; min-width: 80px; }
.button-sm-main:hover { background-color: var(--secondary-600); }

.button-sm-default { background-color: var(--gray-100); border: 1px solid var(--gray-200); color: var(--gray-900); }
.button-sm-default:hover { background-color: var(--gray-500); color: #fff; }

.button-sm-green   { background-color: var(--green); border: 1px solid var(--green); color: #fff; }
.button-sm-green:hover { background-color: var(--green-700); }

.button-sm-red     { background-color: var(--red); border: 1px solid var(--red); color: #fff; }
.button-sm-red:hover { background-color: var(--red-700); }

.button-sm-yellow  { background-color: var(--yellow); border: 1px solid var(--yellow); color: #fff; }
.button-sm-yellow:hover { background-color: var(--yellow-700); }


/* =============================================================
   13. SWITCH / TOGGLE
   ============================================================= */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0 10px;
}

.switch input { display: none; }

.switch-slider-main,
.switch-slider-red,
.switch-slider-green,
.switch-slider-yellow,
.switch-slider-default {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--gray-200);
  transition: 0.4s;
  border-radius: 34px;
}

.switch-slider-main::before,
.switch-slider-red::before,
.switch-slider-green::before,
.switch-slider-yellow::before,
.switch-slider-default::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2.5px;
  bottom: 2.5px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .switch-slider-main    { background-color: var(--secondary); }
input:checked + .switch-slider-red     { background-color: var(--red); }
input:checked + .switch-slider-green   { background-color: var(--green); }
input:checked + .switch-slider-yellow  { background-color: var(--yellow); }
input:checked + .switch-slider-default { background-color: var(--gray-800); }

input:checked + .switch-slider-main::before,
input:checked + .switch-slider-red::before,
input:checked + .switch-slider-green::before,
input:checked + .switch-slider-yellow::before,
input:checked + .switch-slider-default::before {
  transform: translateX(25px);
}


/* =============================================================
   14. LOADERS / SPINNERS
   ============================================================= */

/* Base compartilhada */
[class^="loader-"] {
  border: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1.8s linear infinite;
  margin: 5px;
  display: inline-block;
}

/* Tamanhos */
.loader-main,    .loader-green,    .loader-red,    .loader-yellow,    .loader-default    { width: 40px; height: 40px; }
.loader-main-sm, .loader-green-sm, .loader-red-sm, .loader-yellow-sm, .loader-default-sm { width: 20px; height: 20px; }
.loader-main-lg, .loader-green-lg, .loader-red-lg, .loader-yellow-lg, .loader-default-lg { width: 60px; height: 60px; }

/* Cores */
.loader-main,    .loader-main-sm,    .loader-main-lg    { border-top-color: var(--secondary); border-left-color: var(--secondary); }
.loader-green,   .loader-green-sm,   .loader-green-lg   { border-top-color: var(--green);     border-left-color: var(--green); }
.loader-red,     .loader-red-sm,     .loader-red-lg     { border-top-color: var(--red);       border-left-color: var(--red); }
.loader-yellow,  .loader-yellow-sm,  .loader-yellow-lg  { border-top-color: var(--yellow);    border-left-color: var(--yellow); }
.loader-default, .loader-default-sm, .loader-default-lg { border-top-color: var(--gray-600);  border-left-color: var(--gray-600); }


/* =============================================================
   15. PROGRESS BAR
   ============================================================= */

.progressbar-bg {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.progressbar-main,
.progressbar-green,
.progressbar-yellow,
.progressbar-red,
.progressbar-default {
  width: 0%;
  height: 100%;
  border-radius: 8px;
  transition: width 0.4s ease;
}

.progressbar-main    { background-color: var(--secondary); }
.progressbar-green   { background-color: var(--green); }
.progressbar-yellow  { background-color: var(--yellow); }
.progressbar-red     { background-color: var(--red); }
.progressbar-default { background-color: var(--gray-500); }


/* =============================================================
   16. WARNINGS / ALERTAS
   ============================================================= */

.warning-main,
.warning-information,
.warning-error,
.warning-success,
.warning-blank {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 10px 0;
  min-height: 20px;
  animation: fade-in 0.3s ease;
}

.warning-main        { border: 1px solid var(--secondary-200); color: var(--secondary-700); background-color: var(--secondary-100); }
.warning-information { border: 1px solid var(--yellow-200);    color: var(--yellow-900);    background-color: var(--yellow-100); }
.warning-error       { border: 1px solid var(--red-200);       color: var(--red-900);       background-color: var(--red-100); }
.warning-success     { border: 1px solid var(--green-200);     color: var(--green-900);     background-color: var(--green-100); }
.warning-blank       { border: 1px solid var(--border-default); color: var(--gray);         background-color: transparent; }


/* =============================================================
   17. FORMULÁRIOS
   ============================================================= */

.form-group {
  display: flex;
  flex-wrap: wrap;
}

.form-item {
  position: relative;
  height: 60px;
  display: flex;
  margin: 10px;
  flex-grow: 1;
}

.form-item-block {
  flex-basis: 100%;
}

.label-name {
  position: absolute;
  left: 0;
  top: 33px;
  width: 100%;
  pointer-events: none;
  transition: all 0.3s ease;
  color: var(--text-muted);
  font-size: var(--font-size);
}

/* Input */
.input-default {
  font-family: var(--font-family);
  font-size: var(--font-size);
  outline: none;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-default);
  -webkit-appearance: none;
  appearance: none;
}

.input-default:focus                             { border-bottom-color: var(--border-focus); }
.input-default:focus              + .label-name  { transform: translateY(-33px); font-size: var(--font-size-sm); color: var(--border-focus); }
.input-default:valid              + .label-name  { transform: translateY(-33px); font-size: var(--font-size-sm); }
.input-default:not(:placeholder-shown) + .label-name { transform: translateY(-33px); font-size: var(--font-size-sm); }
.input-default:placeholder-shown + .label-name  { transform: translateY(0); top: 33px; }
.input-default[type=date]         + .label-name  { transform: translateY(-33px); font-size: var(--font-size-sm); }

/* Select */
.select-default {
  font-family: var(--font-family);
  font-size: var(--font-size);
  outline: none;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding-left: 5px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-default);
  -webkit-appearance: none;
  appearance: none;
}

.select-default:focus        { border-bottom-color: var(--border-focus); }
.select-default:focus        + .label-name { transform: translateY(-33px); font-size: var(--font-size-sm); color: var(--border-focus); }
.select-default:valid        ~ .label-name { transform: translateY(-33px); font-size: var(--font-size-sm); }

/* Textarea */
.textarea-default {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-default);
  box-sizing: border-box;
  outline: none;
  width: 100%;
  padding-top: 30px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  resize: vertical;
}

.textarea-default:focus                             { border-bottom-color: var(--border-focus); }
.textarea-default:focus              + .label-name  { transform: translateY(-33px); font-size: var(--font-size-sm); color: var(--border-focus); }
.textarea-default:not(:placeholder-shown) + .label-name { transform: translateY(-33px); font-size: var(--font-size-sm); }
.textarea-default:placeholder-shown + .label-name  { top: 33px; }

/* =============================================================
   INPUT SENHA — .input-password-wrapper

   Mesmo padrão do .form-item + .input-default, com um botão
   de olho para alternar visibilidade da senha.

   ESTRUTURA HTML:
   ─────────────────────────────────────────────────────────────
   <div class="form-item input-password-wrapper">
     <input type="password" class="input-default" id="senha" placeholder=" " required>
     <label class="label-name" for="senha">Senha</label>
     <button type="button" class="input-password-toggle"
             onclick="MDS.togglePassword('senha', this)"
             aria-label="Mostrar senha">
       <svg class="eye-icon eye-show" ...>...</svg>   ← ícone "mostrar"
       <svg class="eye-icon eye-hide" ...>...</svg>   ← ícone "ocultar"
     </button>
   </div>
   ─────────────────────────────────────────────────────────────

   FUNCIONAMENTO:
   - Por padrão o input é type="password" e eye-hide está oculto
   - MDS.togglePassword() alterna entre type="text" e type="password"
     e troca qual ícone fica visível
   - O botão não submete o form (type="button")
   - aria-label é atualizado pelo JS para acessibilidade

   DARK MODE:
   - Usa --text-muted e --border-focus que já se adaptam ao tema
   ============================================================= */

/* Wrapper: herda tudo do .form-item, adiciona contexto para
   posicionar o botão de toggle dentro do campo */
.input-password-wrapper {
  position: relative; /* já herdado de .form-item, mas explícito aqui */
}

/* Recua o input para não sobrepor o botão de toggle */
.input-password-wrapper .input-default {
  padding-right: 40px;
}

/* Botão do olho — posicionado na borda direita, alinhado
   verticalmente no centro inferior do campo (onde fica o texto) */
.input-password-toggle {
  position: absolute;
  right: 0;
  bottom: 8px;             /* alinha com a linha do border-bottom */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  outline: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  line-height: 0;          /* evita altura extra gerada pelo line-height */
}

.input-password-toggle:hover {
  color: var(--border-focus);
}

/* Ícones SVG do olho */
.eye-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;    /* clique passa para o botão pai */
  display: block;
}

/* Controle de visibilidade dos ícones —
   o JS alterna as classes .eye-show e .eye-hide no <button> */
.input-password-toggle .eye-hide { display: none; }
.input-password-toggle.is-visible .eye-show { display: none; }
.input-password-toggle.is-visible .eye-hide { display: block; }

input[type=file] { display: none; }


/* =============================================================
   SELECT CUSTOMIZADO — .select-wrapper

   Substitui o <select> nativo por um componente JS/CSS puro,
   mantendo o mesmo visual do input-default: só linha embaixo
   + label flutuante. Suporta busca/filtro nas opções.

   ESTRUTURA HTML:
   ─────────────────────────────────────────────────────────────
   <div class="form-item select-wrapper" id="wrap_estado">

     <!-- Campo visível — exibe o texto da opção selecionada -->
     <div class="select-custom"
          onclick="MDS.select_open('wrap_estado')"
          tabindex="0"
          onkeydown="MDS.select_key(event, 'wrap_estado')"
          role="combobox" aria-expanded="false"
          aria-haspopup="listbox" aria-controls="list_estado">
       <span class="select-custom-value"></span>
       <svg class="select-arrow" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
         <polyline points="6 9 12 15 18 9"/>
       </svg>
     </div>

     <!-- Label flutuante — mesmo padrão do input-default -->
     <label class="label-name">Estado</label>

     <!-- Input hidden — mantém o valor para submit do form -->
     <input type="hidden" name="estado" id="estado">

     <!-- Dropdown -->
     <div class="select-dropdown" id="list_estado" role="listbox">

       <!-- Campo de busca — opcional, remova se não quiser filtro -->
       <div class="select-search-wrap">
         <input type="text" class="select-search"
                placeholder="Buscar..."
                oninput="MDS.select_filter(event, 'wrap_estado')"
                onkeydown="MDS.select_key(event, 'wrap_estado')">
       </div>

       <!-- Opções -->
       <div class="select-option" data-value="" data-label="">
         Selecione...
       </div>
       <div class="select-option" data-value="MG" data-label="Minas Gerais"
            onclick="MDS.select_pick('wrap_estado', this)">
         Minas Gerais
       </div>
     </div>

   </div>
   ─────────────────────────────────────────────────────────────

   FUNCIONAMENTO:
   - Clicar no campo abre o dropdown e foca o campo de busca
   - Digitar filtra as opções em tempo real (case-insensitive)
   - Clicar numa opção fecha o dropdown, atualiza o campo
     visível, o input hidden e sobe o label
   - Clicar fora fecha o dropdown (listener global no documento)
   - ESC fecha sem selecionar
   - Enter seleciona a primeira opção visível
   - O input hidden é o que vai no submit — use name= nele

   DARK MODE:
   - Dropdown usa --bg-body e --border-default automaticamente
   ============================================================= */

/* Campo fechado — linha + seta, mesmo visual do input-default */
.select-custom {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
  outline: none;
  transition: border-bottom-color 0.2s ease;
  user-select: none;
}

.select-custom:focus,
.select-custom[aria-expanded="true"] {
  border-bottom-color: var(--border-focus);
}

/* Label sobe quando há valor ou está aberto — mesma lógica do input */
.select-wrapper.has-value  .label-name,
.select-wrapper.is-open    .label-name {
  transform: translateY(-33px);
  font-size: var(--font-size-sm);
}

.select-wrapper.is-open .label-name {
  color: var(--border-focus);
}

/* Texto da opção selecionada */
.select-custom-value {
  flex: 1;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Seta — rotaciona quando aberto */
.select-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: 4px;
}

.select-wrapper.is-open .select-arrow {
  transform: rotate(180deg);
}

/* Dropdown — aparece abaixo do campo */
.select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 300;
  background-color: var(--bg-body);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow: hidden;
  flex-direction: column;
  animation: fade-in-down 0.15s ease;
}

.select-wrapper.is-open .select-dropdown {
  display: flex;
}

/* Campo de busca dentro do dropdown */
.select-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.select-search {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-default);
  outline: none;
  padding: 4px 0;
}

.select-search:focus {
  border-bottom-color: var(--border-focus);
}

/* Lista de opções com scroll */
.select-options-list {
  overflow-y: auto;
  flex: 1;
}

/* Cada opção */
.select-option {
  padding: 10px 14px;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-default);
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.select-option:hover {
  background-color: var(--bg-surface);
}

/* Opção selecionada atualmente */
.select-option.is-selected {
  background-color: var(--secondary-100);
  color: var(--secondary-700);
  font-weight: 600;
}

/* Opção oculta pelo filtro de busca */
.select-option.is-hidden {
  display: none;
}

/* Mensagem quando nenhuma opção bate com a busca */
.select-no-results {
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
  display: none;
}

.select-no-results.visible {
  display: block;
}
   /*============================================================= */

fieldset {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

legend {
  color: var(--text-default);
  font-size: medium;
}


/* =============================================================
   19. TABLES
   ============================================================= */

/* table-default: sem bordas laterais, linha horizontal */
.table-default {
  border-collapse: collapse;
  width: 100%;
}
.table-default th {
  height: 35px;
  border-bottom: 2px solid var(--border-default);
  text-align: left;
  padding: 0 10px;
}
.table-default td {
  padding: 0 10px;
  border-bottom: 1px solid var(--border-default);
  height: 35px;
}
.table-default tr:hover td {
  background-color: var(--secondary-400);
  color: #fff;
}
.table-default tr:hover td a { color: #fff; }

/* Hover via JS — mantidos para compat */
.table-default-tr-mouseover    { background-color: var(--secondary); color: #fff; }
.table-default-tr-mouseover a  { color: #fff; }
.table-default-tr-mouseout     { background-color: var(--bg-surface); }

/* table-main: com bordas em todas as células */
.table-main { width: 100%; border-collapse: collapse; }
.table-main th { border: 1px solid var(--border-default); height: 35px; background-color: var(--gray-100); padding: 0 10px; text-align: left; }
.table-main td { border: 1px solid var(--border-default); height: 35px; padding: 0 10px; }
.table-main tr:hover td { background-color: var(--bg-surface); }


/* =============================================================
   20. TABS
   ============================================================= */

.tab {
  border: 1px solid var(--border-default);
  clear: both;
  padding: 10px;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  background-color: var(--bg-body);
}

.tab_off {
  float: left;
  padding: 5px 12px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: var(--transition);
  color: var(--text-default);
}
.tab_off:hover { background-color: var(--gray-100); }

.tab_on {
  float: left;
  padding: 5px 12px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
  background-color: var(--secondary);
  color: #fff;
  border-top: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab_on:hover { background-color: var(--secondary-700); }


/* =============================================================
   21. TOOLTIP
   ============================================================= */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color: var(--primary-700);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 10;
  transition: opacity 0.2s ease;
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* =============================================================
   22. MODAL / DIALOG  (#bgalldiv, #dlgbox, #modal-loader)

   DARK MODE:
   Todos os backgrounds usam --bg-body e --bg-surface (variáveis
   que mudam automaticamente via [data-theme="dark"] definido na
   seção 2b). NÃO use cores hardcoded (white, #fff, #ffffff) aqui.

   Hierarquia de z-index:
     #bgalldiv     → 100  (overlay escuro)
     #dlgbox       → 110  (dialog / modal-loader / panel)
     #mds-toast-*  → 200  (toasts, sempre acima de tudo)
   ============================================================= */

/* Overlay — fundo escurecido que cobre toda a tela */
#bgalldiv {
  position: fixed;
  inset: 0;                        /* top/right/bottom/left: 0 */
  background: var(--bg-overlay);   /* rgba escuro, definido em :root e dark mode */
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dialog box — centralizado sobre o overlay */
#dlgbox {
  z-index: 110;
  position: fixed;
  left: 50%;
  top: 40%;

  /* Superfície: usa variável para funcionar no dark mode */
  background-color: var(--bg-body);
  color: var(--text-default);

  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: fade-in-down 0.3s ease;
}

/* Cabeçalho do dialog */
#dlgboxtitle {
  padding: 20px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 700;
  color: var(--text-default);
}

/* Corpo do dialog */
#dlgboxtext {
  max-width: 500px;
  padding: 20px;
  box-sizing: border-box;
  color: var(--text-default);
}

/* Área dos botões do dialog */
#dlgboxbtn {
  padding: 20px;
  text-align: right;
}

/* Modal de carregamento — aparece dentro do #bgalldiv */
#modal-loader {
  min-height: 130px;
  min-width: 300px;
  padding: 16px;
  z-index: 110;

  /* Superfície: usa variável para funcionar no dark mode */
  background-color: var(--bg-body);
  color: var(--text-default);

  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  animation: fade-in 0.4s ease;
}

/* Duas colunas internas: ícone do loader + texto */
#modal-loader div {
  flex-grow: 1;
  padding: 10px;
}

/* Texto do modal de loading herda a cor do tema */
#modal-loader p {
  color: var(--text-default);
  margin: 0;
}


/* =============================================================
   23. PANEL

   DARK MODE:
   Mesmo princípio do dialog — usa --bg-body e --text-default.
   A sombra (--shadow-lg) já tem opacidade relativa e funciona
   em ambos os temas sem ajuste adicional.

   Para adicionar uma nova variante de panel (ex: panel-primary),
   copie .panel-default e troque background-color e color pelas
   variáveis de cor desejadas. Mantenha z-index: 110.
   ============================================================= */

.panel-default {
  z-index: 110;
  position: fixed;
  left: 50%;
  top: 50%;
  display: none;                   /* controlado via MDS.panel() no JS */

  /* Superfície: usa variável para funcionar no dark mode */
  background-color: var(--bg-body);
  color: var(--text-default);

  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: fade-in-down 0.3s ease;

  /*
   * Posicionamento: left:50% + margin-left negativo é definido
   * dinamicamente pelo MDS.panel() em mds.js com base no wi/he
   * passados como parâmetro. Não defina margin aqui.
   */
}


/* =============================================================
   24. DASH CARDS — Cards de métricas para dashboards
   ============================================================= */

/*
 * Uso:
 *   <div class="dash-cards">
 *     <div class="dash-card accent-blue">
 *       <div class="card-icon blue">✓</div>
 *       <p class="card-label">Tarefas hoje</p>
 *       <p class="card-value">03</p>
 *       <p class="card-sub"><span class="badge badge-success">2 concluídas</span></p>
 *     </div>
 *   </div>
 *
 * Acentos disponíveis: accent-blue · accent-green · accent-red · accent-yellow
 * Ícones (opcional): card-icon blue · green · red · yellow
 * Badges (opcional): badge-success · badge-danger · badge-warn
 * Mini-barra (opcional): card-bar-bg > card-bar-fill
 */

.dash-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-card {
  background: var(--bg-body);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 16px 20px;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 160px;
  position: relative;
  transition: var(--transition);
}

.dash-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--secondary-300);
  transform: translateY(-2px);
}

/* Acentos de cor no topo */
.dash-card.accent-blue   { border-top: 3px solid var(--secondary); }
.dash-card.accent-green  { border-top: 3px solid var(--green); }
.dash-card.accent-red    { border-top: 3px solid var(--red); }
.dash-card.accent-yellow { border-top: 3px solid var(--yellow); }

/* Textos internos */
.card-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.3;
}

.card-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  color: var(--text-default);
}

.card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Ícone circular no canto superior direito */
.card-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.card-icon.blue   { background: var(--secondary-100); color: var(--secondary); }
.card-icon.green  { background: var(--green-100);     color: var(--green); }
.card-icon.red    { background: var(--red-100);        color: var(--red); }
.card-icon.yellow { background: var(--yellow-100);    color: var(--yellow-700); }

/* Badge de status */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.badge-success { background: var(--green-100);   color: var(--green-700); }
.badge-danger  { background: var(--red-100);      color: var(--red-700); }
.badge-warn    { background: var(--yellow-100);   color: var(--yellow-800); }

/* Mini barra de progresso */
.card-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.card-bar-bg {
  flex: 1;
  height: 4px;
  background: var(--gray-100);
  border-radius: 2px;
  overflow: hidden;
}

.card-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.card-bar-fill.blue   { background: var(--secondary); }
.card-bar-fill.green  { background: var(--green); }
.card-bar-fill.red    { background: var(--red); }
.card-bar-fill.yellow { background: var(--yellow); }

/* Mobile: empilha em colunas únicas abaixo de 480px */
@media (max-width: 479px) {
  .dash-cards { flex-direction: column; }
  .dash-card  { min-width: 100%; }
}


/* =============================================================
   25. PAGINAÇÃO — .page-paging

   Navegação entre páginas para listas, tabelas e resultados.
   Usa variáveis de superfície do MDS — funciona em dark mode
   automaticamente.

   ESTRUTURA HTML:
   ─────────────────────────────────────────────────────────────
   <div class="page-paging">
     <a href="?p=1" class="disabled">← Anterior</a>
     <a href="?p=1" class="active">1</a>
     <a href="?p=2">2</a>
     <a href="?p=3">3</a>
     <span class="dots">...</span>
     <a href="?p=9">9</a>
     <a href="?p=2">Próximo →</a>
   </div>

   ESTADOS:
     (padrão / sem classe) → borda com --border-default
     .active   → fundo --secondary, texto branco
     .disabled → fundo --bg-surface, texto --text-muted,
                 sem interação (pointer-events: none)
     .dots     → <span> sem borda, só texto --text-muted
   ============================================================= */

.page-paging {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
}

.page-paging a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: var(--text-default);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  background: var(--bg-body);
  transition: var(--transition);
}

/* Hover suave — somente em itens clicáveis */
.page-paging a:hover:not(.active):not(.disabled) {
  background: var(--bg-surface);
  border-color: var(--secondary-300);
  color: var(--secondary);
  text-decoration: none;
}

/* Página ativa */
.page-paging a.active {
  background: var(--secondary);
  color: var(--bg-body);
  border-color: var(--secondary);
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: default;
  pointer-events: none;
}

/* Desabilitado (Anterior / Próximo nos limites) */
.page-paging a.disabled {
  color: var(--text-muted);
  background: var(--bg-surface);
  border-color: var(--border-default);
  cursor: default;
  pointer-events: none;
}

/* Reticências — sem borda, sem fundo */
.page-paging .dots {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  user-select: none;
}


/* =============================================================
   26. CHECKBOX CUSTOMIZADO — .checkbox-item

   Substitui o checkbox nativo mantendo o mesmo padrão visual
   do design system: borda com --border-default, foco em
   --border-focus e cores semânticas nas variantes.

   ESTRUTURA HTML:
   ─────────────────────────────────────────────────────────────
   <label class="checkbox-item">
     <input type="checkbox">
     <div class="checkbox-box"></div>
     <span>Texto do label</span>
   </label>

   VARIANTES DE COR (adicione ao <label>):
     (padrão / sem classe) → --secondary (main)
     .green   → --green
     .red     → --red
     .yellow  → --yellow
     .default → --gray-900

   ESTADOS:
     checked    → controlado pelo atributo HTML
     disabled   → adicione disabled no <input>
     hover      → borda muda para --border-focus

   DARK MODE:
   Usa --bg-body, --border-default e --border-focus que já se
   adaptam ao tema sem ajuste adicional.
   ============================================================= */

.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-default);
}

.checkbox-item input[type="checkbox"] { display: none; }

.checkbox-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-body);
  transition: var(--transition);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Check mark via pseudo-elemento — sem depender de ícone externo */
.checkbox-box::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s ease;
  margin-top: -2px;
}

/* Estado checked — cor padrão (main / secondary) */
.checkbox-item input:checked ~ .checkbox-box {
  background: var(--secondary);
  border-color: var(--secondary);
}
.checkbox-item input:checked ~ .checkbox-box::after { transform: rotate(45deg) scale(1); }

/* Hover */
.checkbox-item:hover .checkbox-box { border-color: var(--border-focus); }

/* Estado disabled */
.checkbox-item input:disabled ~ .checkbox-box {
  background: var(--bg-surface);
  border-color: var(--border-default);
  opacity: 0.55;
  cursor: not-allowed;
}
.checkbox-item input:disabled ~ span {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Variantes de cor */
.checkbox-item.green   input:checked ~ .checkbox-box { background: var(--green);   border-color: var(--green); }
.checkbox-item.red     input:checked ~ .checkbox-box { background: var(--red);     border-color: var(--red); }
.checkbox-item.yellow  input:checked ~ .checkbox-box { background: var(--yellow);  border-color: var(--yellow); }
.checkbox-item.default input:checked ~ .checkbox-box { background: var(--gray-900); border-color: var(--gray-900); }


/* =============================================================
   27. RADIO CUSTOMIZADO — .radio-item

   Mesmo padrão do .checkbox-item — mesmas variantes de cor,
   mesmos estados, mesma lógica de estrutura HTML.
   A única diferença visual é o formato circular e o ponto
   interno no lugar do check.

   ESTRUTURA HTML:
   ─────────────────────────────────────────────────────────────
   <label class="radio-item">
     <input type="radio" name="grupo">
     <div class="radio-circle"></div>
     <span>Opção A</span>
   </label>

   Agrupe radios com o mesmo atributo name para garantir
   que apenas um fique selecionado por vez.

   VARIANTES DE COR: .green · .red · .yellow · .default
   (mesmo comportamento do .checkbox-item)
   ============================================================= */

.radio-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-default);
}

.radio-item input[type="radio"] { display: none; }

.radio-circle {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--bg-body);
  transition: var(--transition);
  position: relative;
  flex-shrink: 0;
}

/* Ponto central via pseudo-elemento */
.radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

/* Estado checked — cor padrão (main / secondary) */
.radio-item input:checked ~ .radio-circle {
  background: var(--secondary);
  border-color: var(--secondary);
}
.radio-item input:checked ~ .radio-circle::after { transform: translate(-50%, -50%) scale(1); }

/* Hover */
.radio-item:hover .radio-circle { border-color: var(--border-focus); }

/* Estado disabled */
.radio-item input:disabled ~ .radio-circle {
  background: var(--bg-surface);
  border-color: var(--border-default);
  opacity: 0.55;
  cursor: not-allowed;
}
.radio-item input:disabled ~ span {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Variantes de cor */
.radio-item.green   input:checked ~ .radio-circle { background: var(--green);    border-color: var(--green); }
.radio-item.red     input:checked ~ .radio-circle { background: var(--red);      border-color: var(--red); }
.radio-item.yellow  input:checked ~ .radio-circle { background: var(--yellow);   border-color: var(--yellow); }
.radio-item.default input:checked ~ .radio-circle { background: var(--gray-900); border-color: var(--gray-900); }


/* =============================================================
   28. RESPONSIVO
   ============================================================= */

/* Form width */
.form { display: block; }

@media (min-width: 768px) {
  .form { max-width: 650px; }

  #dlgbox { min-width: 450px; margin-left: -225px; margin-top: -70px; }
  #dlgboxbtn { text-align: right; }

  .tab_off,
  .tab_on { width: 120px; }
}

@media (min-width: 992px) {
  .form { max-width: 800px; }
}

@media (min-width: 1200px) {
  .form { max-width: 1000px; }
}

/* Mobile */
@media (max-width: 767px) {
  #dlgbox { width: 85%; margin-left: -42.5%; margin-top: -70px; overflow: hidden; }
  #dlgboxbtn { text-align: center; }

  .table-default { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }

  .button-main,
  .button-default,
  .button-green,
  .button-red,
  .button-yellow { width: 100%; margin-top: 10px; }
}


/* =============================================================
   25. DARK MODE — ajustes finos de componentes

   QUANDO ADICIONAR REGRAS AQUI:
   Use este bloco apenas para ajustes que NÃO são resolvidos
   automaticamente pelas variáveis de superfície (--bg-body,
   --bg-surface, --text-default, --border-default).

   Exemplo de quando NÃO precisa vir aqui:
     #dlgbox { background-color: var(--bg-body) }  → automático

   Exemplo de quando PRECISA vir aqui:
     Um seletor com cor hardcoded herdada de biblioteca externa,
     ou um pseudo-elemento (:before/:after) com cor fixa.

   Ordem de preferência para correção de dark mode:
     1. Trocar cor hardcoded por variável CSS no componente original
     2. Se não for possível, adicionar override aqui

   Seletores cobertos por variáveis (NÃO precisam de override):
     #bgalldiv, #dlgbox, #dlgboxtitle, #dlgboxtext,
     #modal-loader, .panel-default, .tab, fieldset, legend,
     .input-default, .select-default, .textarea-default,
     .warning-*, .table-default, .table-main
   ============================================================= */

/* Aplica a ambas as formas de ativar o dark mode */
/*[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  /* Garante que o :root:not([data-theme="light"]) seja coberto */
/*}

/*
 * Tabela — linha de hover no dark mode.
 * No light: azul (--secondary) com texto branco.
 * No dark: mantém o mesmo comportamento pois --secondary
 * não muda entre temas — apenas as superfícies mudam.
 * Se quiser suavizar o hover no dark, descomente abaixo:
 */
/*
[data-theme="dark"] .table-default tr:hover td {
  background-color: var(--secondary-800);
  color: var(--secondary-100);
}
*/

/*
 * Switch — o fundo inativo (gray-200) vira --gray-100 no dark mode
 * via a redefinição de --gray-100 em [data-theme="dark"].
 * Sem ajuste necessário aqui.
 */

/*
 * Warnings — cores semânticas (red-100, green-100 etc.) não mudam
 * no dark mode propositalmente: mantêm identidade visual de status.
 * Se quiser versões mais escuras no dark, adicione overrides aqui.
 * Exemplo:
 *
 * [data-theme="dark"] .warning-success {
 *   background-color: var(--green-900);
 *   color: var(--green-100);
 *   border-color: var(--green-700);
 * }
 */