/* ============================================================================
   CertMed — certmed-ui.css
   Design system próprio, linguagem Material 3 Expressive.

   - Cores: papéis tonais do M3 a partir do logo (azul #469BD4 + ouro #BB9743).
   - Tipo: Google Sans Flex (títulos com o eixo ROND levemente arredondado).
   - Ícones: Material Symbols Rounded, via certmed-icones.css (as views seguem
     escrevendo fa-*; a troca é feita lá).
   - Forma: moldura tingida + "folha" de conteúdo com canto de 28px, cartões
     brancos, botões em pílula que "achatam" ao pressionar, campos com contorno.

   Bootstrap 4 continua como esqueleto (grid, modal, dropdown, JS). Tudo o que é
   visual mora aqui. Os tokens antigos (--brand, --ink, --line…) continuam
   existindo e apontam para os papéis novos — as telas que usam var() herdam.
   ============================================================================ */

:root {
  /* ---- Papéis de cor (M3) ---- */
  --md-primary:                  #11609C;
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #D3E4FB;
  --md-on-primary-container:     #0B4776;
  --md-inverse-primary:          #9FCAFF;

  --md-secondary:                #526070;
  --md-secondary-container:      #DAE5F3;
  --md-on-secondary-container:   #34414F;

  /* Ouro do logo — acento, usado com parcimônia */
  --md-tertiary:                 #7A5B12;
  --md-tertiary-container:       #F6E3B4;
  --md-on-tertiary-container:    #594100;
  --brand-gold:                  #BB9743;

  --md-error:                    #BA1A1A;
  --md-error-container:          #FFDAD6;
  --md-on-error-container:       #8C0009;

  --md-success:                  #256C3C;
  --md-success-container:        #C6ECCB;
  --md-on-success-container:     #0E5127;

  --md-warning:                  #8F4C00;
  --md-warning-container:        #FFDDC2;
  --md-on-warning-container:     #6B3900;

  /* Superfícies (neutro levemente azulado) */
  --md-frame:                    #E8EDF3;   /* moldura: atrás do menu e da folha */
  --md-surface:                  #F6F8FB;   /* folha de conteúdo */
  --md-surface-lowest:           #FFFFFF;   /* cartões, campos, diálogos */
  --md-surface-low:              #F0F3F8;
  --md-surface-high:             #E3E8EF;
  --md-surface-highest:          #DCE2EA;
  --md-on-surface:               #181C21;
  --md-on-surface-variant:       #444A52;
  --md-outline:                  #747981;
  --md-outline-variant:          #C4C9D1;
  --md-field:                    #A5ABB4;   /* contorno de campo (entre outline e outline-variant) */
  --md-divider:                  #E1E6ED;
  --md-divider-soft:             #ECF0F5;
  --md-inverse-surface:          #2D3137;
  --md-inverse-on-surface:       #EEF1F6;
  --md-scrim:                    11,22,32;

  /* Camada de estado (hover/press) — sobreposição da cor do texto */
  --sl-hover: .08;
  --sl-press: .12;

  /* ---- Forma ---- */
  --r-xs: 6px;  --r-sm: 10px;  --r: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Elevação (sombra tingida, discreta) ---- */
  --sh-sm: 0 0 0 1px rgba(24,39,64,.045), 0 1px 3px rgba(24,39,64,.06);
  --sh:    0 1px 2px rgba(24,39,64,.08), 0 3px 10px 2px rgba(24,39,64,.06);
  --sh-lg: 0 4px 10px 3px rgba(24,39,64,.08), 0 16px 40px rgba(24,39,64,.14);

  /* ---- Tipografia ---- */
  --font-ui:   'Google Sans Flex', 'Google Sans', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: var(--font-ui);
  --rond-head: 'ROND' 50;

  /* ---- Movimento ---- */
  --ease:        cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --t: .2s cubic-bezier(.2, 0, 0, 1);

  --sidebar-w: 272px;
  --topbar-h: 64px;
  --sheet-gap: 14px;

  /* ---- Tokens antigos → papéis novos (as views usam estes) ---- */
  --paper:     var(--md-surface);
  --surface:   var(--md-surface-lowest);
  --surface-2: var(--md-surface-low);
  --ink:       var(--md-on-surface);
  --ink-soft:  var(--md-on-surface-variant);
  --ink-faint: var(--md-outline);
  --line:      var(--md-divider);
  --line-2:    var(--md-divider-soft);
  --brand:     var(--md-primary);
  --brand-d:   var(--md-on-primary-container);
  --brand-l:   #E4EEFB;
  --brand-rgb: 17,96,156;
  --success:   var(--md-success);   --success-l: #E1F3E3;
  --warning:   var(--md-warning);   --warning-l: #FDEEE1;
  --danger:    var(--md-error);     --danger-l:  #FDE7E4;
  --info:      var(--md-primary);   --info-l:    #E4EEFB;
}

/* ---- Tema Branco e Preto / Dark Mode / High Contrast P&B ---- */
html[data-theme="dark"] {
  /* Papéis de cor (M3 Escuro Blue Accent) */
  --md-primary:                  #3B82F6;
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #1C2D42;
  --md-on-primary-container:     #D0E1FD;
  --md-inverse-primary:          #11609C;

  --md-secondary:                #9EA9B7;
  --md-secondary-container:      #21262D;
  --md-on-secondary-container:   #DCE3EC;

  --md-tertiary:                 #F0C674;
  --md-tertiary-container:       #382C10;
  --md-on-tertiary-container:    #F6E3B4;
  --brand-gold:                  #D4AF37;

  --md-error:                    #FF8E8E;
  --md-error-container:          #4E0003;
  --md-on-error-container:       #FFDAD6;

  --md-success:                  #5BD979;
  --md-success-container:        #0B3819;
  --md-on-success-container:     #C6ECCB;

  --md-warning:                  #FFA954;
  --md-warning-container:        #3D1B00;
  --md-on-warning-container:     #FFDDC2;

  /* Superfícies e fundos escuros P&B */
  --md-frame:                    #090C10;   /* Moldura atrás da folha */
  --md-surface:                  #13171F;   /* Folha principal de conteúdo */
  --md-surface-lowest:           #1C2129;   /* Cartões, campos, diálogos e modais */
  --md-surface-low:              #181D24;
  --md-surface-high:             #242933;
  --md-surface-highest:          #2D3340;
  --md-on-surface:               #F5F8FC;   /* Texto principal (Branco) */
  --md-on-surface-variant:       #A0A8B4;   /* Texto secundário */
  --md-outline:                  #6E7681;
  --md-outline-variant:          #30363D;
  --md-field:                    #454D59;   /* Contorno de campos */
  --md-divider:                  #2B313B;
  --md-divider-soft:             #1C2129;
  --md-inverse-surface:          #F0F6FC;
  --md-inverse-on-surface:       #13171F;
  --md-scrim:                    0,0,0;

  /* Elevação e sombras no tema escuro */
  --sh-sm: 0 0 0 1px rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.5);
  --sh:    0 1px 2px rgba(0,0,0,.5), 0 3px 10px 2px rgba(0,0,0,.4);
  --sh-lg: 0 4px 10px 3px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.8);

  /* Tokens antigos redirecionados ao modo escuro */
  --paper:     var(--md-surface);
  --surface:   var(--md-surface-lowest);
  --surface-2: var(--md-surface-low);
  --ink:       var(--md-on-surface);
  --ink-soft:  var(--md-on-surface-variant);
  --ink-faint: var(--md-outline);
  --line:      var(--md-divider);
  --line-2:    var(--md-divider-soft);
  --brand:     var(--md-primary);
  --brand-d:   #FFFFFF;
  --brand-l:   #1C2D42;
  --brand-rgb: 59,130,246;
  --success-l: #0D2614;
  --warning-l: #2E1905;
  --danger-l:  #330808;
  --info-l:    #1A2533;
}

html[data-theme="mono"] {
  /* Papéis de cor (Mono P&B Alto Contraste) */
  --md-primary:                  #E6EDF3;
  --md-on-primary:               #0D1117;
  --md-primary-container:        #30363D;
  --md-on-primary-container:     #F0F6FC;
  --md-inverse-primary:          #FFFFFF;

  --md-secondary:                #8B949E;
  --md-secondary-container:      #21262D;
  --md-on-secondary-container:   #C9D1D9;

  --md-tertiary:                 #E6EDF3;
  --md-tertiary-container:       #30363D;
  --md-on-tertiary-container:    #F0F6FC;
  --brand-gold:                  #E6EDF3;

  --md-error:                    #FF7B72;
  --md-error-container:          #4C121A;
  --md-on-error-container:       #FFD8D6;

  --md-success:                  #7EE787;
  --md-success-container:        #0D381E;
  --md-on-success-container:     #AFF5B4;

  --md-warning:                  #D29922;
  --md-warning-container:        #341A00;
  --md-on-warning-container:     #F8E3B0;

  /* Superfícies e fundos escuros P&B */
  --md-frame:                    #010409;
  --md-surface:                  #0D1117;
  --md-surface-lowest:           #161B22;
  --md-surface-low:              #13171F;
  --md-surface-high:             #21262D;
  --md-surface-highest:          #30363D;
  --md-on-surface:               #F0F6FC;
  --md-on-surface-variant:       #8B949E;
  --md-outline:                  #6E7681;
  --md-outline-variant:          #30363D;
  --md-field:                    #484F58;
  --md-divider:                  #21262D;
  --md-divider-soft:             #161B22;
  --md-inverse-surface:          #F0F6FC;
  --md-inverse-on-surface:       #0D1117;
  --md-scrim:                    0,0,0;

  --sh-sm: 0 0 0 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.6);
  --sh:    0 1px 2px rgba(0,0,0,.6), 0 3px 10px 2px rgba(0,0,0,.5);
  --sh-lg: 0 4px 10px 3px rgba(0,0,0,.7), 0 16px 40px rgba(0,0,0,.9);

  --paper:     var(--md-surface);
  --surface:   var(--md-surface-lowest);
  --surface-2: var(--md-surface-low);
  --ink:       var(--md-on-surface);
  --ink-soft:  var(--md-on-surface-variant);
  --ink-faint: var(--md-outline);
  --line:      var(--md-divider);
  --line-2:    var(--md-divider-soft);
  --brand:     var(--md-primary);
  --brand-d:   #FFFFFF;
  --brand-l:   #30363D;
  --brand-rgb: 230,237,243;
  --success-l: #0D2614;
  --warning-l: #2E1905;
  --danger-l:  #330808;
  --info-l:    #1A2533;
}

/* Ajustes de Contraste e Legibilidade (Dark & Mono Theme) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="mono"] .form-control,
html[data-theme="mono"] input,
html[data-theme="mono"] select,
html[data-theme="mono"] textarea {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-field) !important;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="mono"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="mono"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="mono"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.9) hue-rotate(180deg) !important;
  cursor: pointer;
}

/* Botões */
html[data-theme="dark"] .btn-primary,
html[data-theme="mono"] .btn-primary {
  background-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border-color: var(--md-primary) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary,
html[data-theme="mono"] .btn-light,
html[data-theme="mono"] .btn-white,
html[data-theme="mono"] .btn-default,
html[data-theme="mono"] .btn-secondary {
  background-color: var(--md-surface-highest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-field) !important;
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="mono"] .btn-outline-secondary {
  color: var(--md-on-surface-variant) !important;
  border-color: var(--md-field) !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="mono"] .btn-outline-secondary:hover {
  color: var(--md-on-surface) !important;
  background-color: var(--md-surface-highest) !important;
}

html[data-theme="dark"] .btn-outline-primary,
html[data-theme="mono"] .btn-outline-primary {
  color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="mono"] .btn-outline-primary:hover {
  color: var(--md-on-primary) !important;
  background-color: var(--md-primary) !important;
}

html[data-theme="dark"] .btn-success,
html[data-theme="mono"] .btn-success {
  background-color: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="mono"] .btn-danger {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
  border-color: #DC2626 !important;
}

html[data-theme="dark"] .btn-warning,
html[data-theme="mono"] .btn-warning {
  background-color: #F59E0B !important;
  color: #000000 !important;
  border-color: #D97706 !important;
}

/* Badges e Status */
html[data-theme="dark"] .badge-warning,
html[data-theme="mono"] .badge-warning,
html[data-theme="dark"] .b-ar,
html[data-theme="mono"] .b-ar {
  background-color: #3D1B00 !important;
  color: #FFA954 !important;
  border: 1px solid #7C3D00 !important;
}

html[data-theme="dark"] .badge-success,
html[data-theme="mono"] .badge-success,
html[data-theme="dark"] .b-ok,
html[data-theme="mono"] .b-ok {
  background-color: #06331A !important;
  color: #5BD979 !important;
  border: 1px solid #0E622B !important;
}

html[data-theme="dark"] .badge-danger,
html[data-theme="mono"] .badge-danger {
  background-color: #4E0003 !important;
  color: #FF8E8E !important;
  border: 1px solid #8C1D1F !important;
}

html[data-theme="dark"] .badge-info,
html[data-theme="mono"] .badge-info {
  background-color: #0F2D4A !important;
  color: #70B8FF !important;
  border: 1px solid #1B4F80 !important;
}

html[data-theme="dark"] .badge-secondary,
html[data-theme="mono"] .badge-secondary,
html[data-theme="dark"] .badge-light,
html[data-theme="mono"] .badge-light {
  background-color: var(--md-surface-highest) !important;
  color: var(--md-on-surface) !important;
  border: 1px solid var(--md-field) !important;
}

/* Cards, Modais e Menus */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="mono"] .card,
html[data-theme="mono"] .modal-content,
html[data-theme="mono"] .dropdown-menu {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-divider) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="mono"] .card-header {
  background-color: var(--md-surface-low) !important;
  border-bottom-color: var(--md-divider) !important;
  color: var(--md-on-surface) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="mono"] .dropdown-item {
  color: var(--md-on-surface) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="mono"] .dropdown-item:hover {
  background-color: var(--md-surface-high) !important;
  color: var(--md-on-surface) !important;
}

/* Cartão do Menu Lateral (Consultas de hoje) */
html[data-theme="dark"] .cm-hoje,
html[data-theme="mono"] .cm-hoje {
  background: linear-gradient(135deg, #0F2F4C 0%, #1A4770 100%) !important;
  border: 1px solid var(--md-divider) !important;
  color: #FFFFFF !important;
}

/* Tabelas e DataTables */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="mono"] .table,
html[data-theme="mono"] .table th,
html[data-theme="mono"] .table td {
  color: var(--md-on-surface) !important;
  border-color: var(--md-divider) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="mono"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="mono"] .dataTables_wrapper {
  color: var(--md-on-surface-variant) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="mono"] .dataTables_wrapper .dataTables_length select,
html[data-theme="mono"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-field) !important;
}

html[data-theme="dark"] .page-item .page-link,
html[data-theme="mono"] .page-item .page-link {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-divider) !important;
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="mono"] .page-item.active .page-link {
  background-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border-color: var(--md-primary) !important;
}

/* Abas e Controls */
html[data-theme="dark"] .nav-pills .nav-link,
html[data-theme="mono"] .nav-pills .nav-link {
  color: var(--md-on-surface-variant) !important;
}

html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="mono"] .nav-pills .nav-link.active {
  background-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}

html[data-theme="dark"] .custom-control-label,
html[data-theme="mono"] .custom-control-label {
  color: var(--md-on-surface) !important;
}

html[data-theme="dark"] .custom-control-label::before,
html[data-theme="mono"] .custom-control-label::before {
  background-color: var(--md-surface-highest) !important;
  border-color: var(--md-field) !important;
}

html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before,
html[data-theme="mono"] .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}

html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="mono"] .select2-container--bootstrap4 .select2-selection,
html[data-theme="mono"] .select2-dropdown {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-field) !important;
}

html[data-theme="dark"] .select2-search__field,
html[data-theme="mono"] .select2-search__field {
  background-color: var(--md-surface-low) !important;
  color: var(--md-on-surface) !important;
}

/* FullCalendar (Agenda) */
html[data-theme="dark"] #calendar,
html[data-theme="mono"] #calendar {
  --fc-border-color: var(--md-divider);
  --fc-page-bg-color: var(--md-surface);
  --fc-neutral-bg-color: var(--md-surface-low);
  --fc-list-day-cushion-bg-color: var(--md-surface-lowest);
  --fc-today-bg-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] #calendar .fc-col-header-cell,
html[data-theme="dark"] #calendar .fc-timegrid-axis,
html[data-theme="dark"] #calendar .fc-timegrid-axis-frame,
html[data-theme="mono"] #calendar .fc-col-header-cell,
html[data-theme="mono"] #calendar .fc-timegrid-axis,
html[data-theme="mono"] #calendar .fc-timegrid-axis-frame {
  background-color: var(--md-surface-lowest) !important;
  color: var(--md-on-surface) !important;
}

html[data-theme="dark"] #calendar .fc-col-header-cell-cushion,
html[data-theme="mono"] #calendar .fc-col-header-cell-cushion {
  color: var(--md-on-surface) !important;
}

html[data-theme="dark"] #calendar .fc-timegrid-slot-label-cushion,
html[data-theme="dark"] #calendar .fc-timegrid-axis-cushion,
html[data-theme="mono"] #calendar .fc-timegrid-slot-label-cushion,
html[data-theme="mono"] #calendar .fc-timegrid-axis-cushion {
  color: var(--md-on-surface-variant) !important;
}

html[data-theme="dark"] #calendar .fc-theme-standard td,
html[data-theme="dark"] #calendar .fc-theme-standard th,
html[data-theme="mono"] #calendar .fc-theme-standard td,
html[data-theme="mono"] #calendar .fc-theme-standard th {
  border-color: var(--md-divider) !important;
}

html[data-theme="dark"] #calendar .fc-non-business,
html[data-theme="mono"] #calendar .fc-non-business {
  background-color: rgba(0, 0, 0, 0.25) !important;
}


/* ============================================================================
   1. BASE
   ============================================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.cm-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--md-on-surface);
  background: var(--md-frame);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { font-family: var(--font-ui); }
a { color: var(--md-primary); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--md-on-primary-container); text-decoration: none; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-head); color: var(--md-on-surface); font-weight: 500;
  letter-spacing: -.005em; font-variation-settings: var(--rond-head);
}
h1,.h1 { font-size: 1.75rem; }  h2,.h2 { font-size: 1.5rem; }  h3,.h3 { font-size: 1.35rem; }
h4,.h4 { font-size: 1.15rem; }  h5,.h5 { font-size: 1.02rem; } h6,.h6 { font-size: .9rem; font-weight: 600; }
b, strong { font-weight: 600; }
small, .small { font-size: 85%; }
hr { border: 0; border-top: 1px solid var(--md-divider); margin: 1.2rem 0; }
::selection { background: rgba(var(--brand-rgb), .18); }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.table, .info-box-number, .small-box h3, [class*="-valor"], [class*="-num"] { font-variant-numeric: tabular-nums; }

/* Scrollbar enxuta */
* { scrollbar-width: thin; scrollbar-color: #C3CAD4 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C9D0DA; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #A9B2BE; background-clip: content-box; }

/* Ondulação (ripple) — criada pelo certmed-ui.js no pointerdown */
.cm-ripple { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.cm-ripple-onda {
  position: absolute; border-radius: 50%; background: currentColor; opacity: .16;
  transform: scale(0); animation: cm-ripple .5s var(--ease) forwards;
}
.cm-ripple-onda.sai { opacity: 0; transition: opacity .35s linear; }
@keyframes cm-ripple { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cm-ripple { display: none; } }

/* ============================================================================
   2. CASCA DO APP (moldura + menu + topo + folha)
   ============================================================================ */
.cm-app { display: flex; min-height: 100vh; }

.cm-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--md-frame);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  transition: transform .3s var(--ease);
}
.cm-shell {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex; flex-direction: column;
  transition: margin-left .3s var(--ease);
}

/* Marca */
.cm-brand { height: var(--topbar-h); display: flex; align-items: center; padding: 0 20px; flex: 0 0 auto; }
.cm-brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--md-on-surface); }
.cm-brand-logo { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.cm-brand-mark {
  width: 36px; height: 36px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 1rem;
}
.cm-brand-text { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; font-variation-settings: 'ROND' 70; }
.cm-brand-text b { color: var(--md-primary); font-weight: 700; }

/* Busca de telas do menu (barra de busca M3) */
.cm-nav-busca { padding: 2px 12px 4px; flex: 0 0 auto; }
.cm-nav-busca-wrap {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  background: var(--md-surface-highest); border-radius: var(--r-pill);
  border: 1px solid transparent; transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.cm-nav-busca-wrap:hover { background: #D5DCE5; }
.cm-nav-busca-wrap:focus-within { background: var(--md-surface-lowest); border-color: var(--md-primary); box-shadow: var(--sh-sm); }
.cm-nav-busca-wrap > i { font-size: .95rem; color: var(--md-on-surface-variant); flex: 0 0 auto; }
.cm-nav-busca-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0;
  font-size: .9rem; color: var(--md-on-surface); font-family: var(--font-ui); }
.cm-nav-busca-input:focus { outline: none; }
.cm-nav-busca-input::placeholder { color: var(--md-on-surface-variant); opacity: .85; }
.cm-nav-vazio { padding: .7rem 1rem; font-size: .85rem; color: var(--md-outline); }
/* .cm-nav-link é display:flex e venceria o [hidden] do navegador — daí o !important. */
.cm-nav [hidden] { display: none !important; }

/* Navegação (gaveta M3) */
.cm-nav { padding: 6px 12px 20px; overflow-y: auto; flex: 1 1 auto; }
.cm-nav-section { font-size: .78rem; font-weight: 500; letter-spacing: .01em;
  color: var(--md-on-surface-variant); padding: 16px 16px 6px; }

.cm-nav-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 0 14px 0 16px; margin: 1px 0;
  border: 0; background: transparent; text-align: left;
  border-radius: var(--r-pill); color: var(--md-on-surface-variant);
  font-family: var(--font-ui); font-size: .9rem; font-weight: 500; cursor: pointer;
  position: relative; transition: background-color var(--t), color var(--t);
}
.cm-nav-link:hover { background: rgba(24,28,33,.07); color: var(--md-on-surface); }
.cm-nav-link:focus { outline: none; }
.cm-nav-link:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.cm-nav-icon { width: 22px; text-align: center; font-size: 16.5px; color: inherit; flex: 0 0 auto; }
.cm-nav-link > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item ativo: pílula tonal + ícone preenchido */
.cm-nav-link.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }
.cm-nav-link.active .cm-nav-icon { --icon-fill: 1; color: var(--md-primary); }

/* Grupo (treeview) */
.cm-nav-caret { margin-left: auto; font-size: .85rem; color: var(--md-outline); transition: transform .25s var(--ease); }
.cm-nav-group.open > .cm-nav-parent .cm-nav-caret { transform: rotate(90deg); }
.cm-nav-group.open > .cm-nav-parent { color: var(--md-on-surface); }
.cm-nav-sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.cm-nav-group.open > .cm-nav-sub { max-height: 640px; }
.cm-nav-sub .cm-nav-link { padding-left: 30px; min-height: 38px; font-size: .865rem; }
.cm-nav-sub .cm-nav-icon { font-size: 14.5px; }

.cm-nav-divider { height: 1px; background: var(--md-outline-variant); margin: 6px 28px; opacity: .7; }

/* Menu no plano Selo (acordo com a sociedade).
   O médico enxerga o CertMed inteiro e um cadeado no que ainda não é dele — clicar
   leva à oferta, que é servida pelo próprio filtro de rota. Os itens liberados são
   os do selo: assinar, meus dados, certificado e a assinatura dele. */
.cm-nav-selo .cm-nav-link:not(.cm-nav-parent):not([href^="/MedicoPerfil"]):not([href^="/Certificado"]):not([href^="/Assinatura"]):not([href^="/Upgrade"]) {
  color: var(--md-outline);
}
.cm-nav-selo .cm-nav-link:not(.cm-nav-parent):not([href^="/MedicoPerfil"]):not([href^="/Certificado"]):not([href^="/Assinatura"]):not([href^="/Upgrade"])::after {
  content: "lock"; font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  display: inline-block; width: 1em; overflow: hidden; line-height: 1;
  margin-left: auto; font-size: 1rem; color: var(--md-outline); opacity: .8;
}
.cm-nav-selo .cm-nav-link:not(.cm-nav-parent):not([href^="/MedicoPerfil"]):not([href^="/Certificado"]):not([href^="/Assinatura"]):not([href^="/Upgrade"]):hover::after {
  color: var(--md-primary); opacity: 1;
}

/* Rodapé do menu */
.cm-nav-rodape { padding: 6px 12px 16px; }

/* Cartão "Consultas de hoje" no rodapé do menu (ViewComponents/ConsultasHojeViewComponent).
   Único bloco escuro do menu de propósito: é o número que a pessoa procura de relance,
   e o contraste faz o olho achá-lo sem ler o resto. */
.cm-hoje {
  display: block; margin: 0 0 8px; padding: 10px 14px 11px;
  border-radius: 16px; text-decoration: none; line-height: 1.25;
  background: linear-gradient(135deg, #0F3A5F 0%, var(--md-primary) 100%);
  color: #fff; transition: filter var(--t);
}
.cm-hoje:hover { text-decoration: none; color: #fff; filter: brightness(1.08); }
.cm-hoje:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.cm-hoje-topo { display: flex; align-items: baseline; gap: 8px; }
.cm-hoje-rot { font-size: .78rem; font-weight: 500; opacity: .88; }
.cm-hoje-num { margin-left: auto; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-hoje-barra { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 8px 0 7px; overflow: hidden; }
.cm-hoje-barra > span { display: block; height: 100%; border-radius: 2px; background: var(--brand-gold); transition: width .3s var(--ease); }
.cm-hoje-pe { font-size: .72rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 7px; border-top: 1px solid rgba(255,255,255,.16); }

/* Selo do certificado digital no rodapé do menu (válido / a vencer / vencido / ausente) */
.cm-cert { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px 14px;
  border-radius: 16px; border: 0; text-decoration: none; line-height: 1.2; transition: filter var(--t); }
.cm-cert:hover { text-decoration: none; filter: brightness(.97); }
.cm-cert > i { font-size: 1.05rem; flex: 0 0 auto; }
.cm-cert > span { display: flex; flex-direction: column; min-width: 0; }
.cm-cert strong { font-size: .8rem; font-weight: 600; }
.cm-cert small { font-size: .72rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cert-ok     { background: var(--md-success-container); color: var(--md-on-success-container); }
.cm-cert-alerta { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.cm-cert-venc   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.cm-cert-sem    { background: var(--md-surface-highest);    color: var(--md-on-surface-variant); }

/* Topo (barra superior M3, sobre a moldura) */
.cm-topbar {
  height: var(--topbar-h); background: var(--md-frame);
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--sheet-gap) 0 4px; position: sticky; top: 0; z-index: 1030;
}
.cm-burger {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  color: var(--md-on-surface-variant); font-size: 1.15rem; cursor: pointer; position: relative;
  display: inline-grid; place-items: center; transition: background var(--t), color var(--t);
}
.cm-burger:hover { background: rgba(24,28,33,.08); color: var(--md-on-surface); }
.cm-topbar-spacer { flex: 1 1 auto; }
.cm-topbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cm-topbar-ip { font-size: .78rem; color: var(--md-outline); padding: 0 6px; white-space: nowrap; }
.cm-topbar-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 0; background: transparent; border-radius: var(--r-pill); position: relative;
  color: var(--md-on-surface-variant); font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.cm-topbar-btn:hover { background: rgba(24,28,33,.08); color: var(--md-on-surface); }
.cm-topbar-btn strong { font-weight: 600; color: var(--md-on-surface); }
.cm-topbar-btn > i { font-size: 1rem; }

/* Folha de conteúdo */
.content-wrapper {
  background: var(--md-surface);
  border-radius: var(--r-xl);
  margin: 0 var(--sheet-gap) var(--sheet-gap) 0;
  min-height: calc(100vh - var(--topbar-h) - var(--sheet-gap));
}
.content-wrapper > .content, section.content { padding: 20px 28px 32px; }
section.content > .container-fluid { padding: 0; }
/* Evita padding/indentação dobrada quando a view traz o próprio section.content / container-fluid */
section.content section.content { padding: 0; }
.container-fluid .container-fluid { padding-left: 0; padding-right: 0; }
.content-header { padding-left: 0; padding-right: 0; }

/* Colapsado (desktop) e off-canvas (mobile) */
.cm-app.cm-collapsed .cm-sidebar { transform: translateX(-100%); }
.cm-app.cm-collapsed .cm-shell { margin-left: 0; }
.cm-app.cm-collapsed .content-wrapper { margin-left: var(--sheet-gap); }
.cm-app.cm-collapsed .cm-topbar { padding-left: 8px; }
.cm-backdrop { display: none; position: fixed; inset: 0; background: rgba(var(--md-scrim), .38); z-index: 1035; }

@media (max-width: 991.98px) {
  .cm-sidebar { transform: translateX(-100%); background: var(--md-surface-low); border-radius: 0 var(--r-xl) var(--r-xl) 0; box-shadow: var(--sh-lg); }
  .cm-shell { margin-left: 0; }
  .cm-app.cm-open .cm-sidebar { transform: translateX(0); }
  .cm-app.cm-open .cm-backdrop { display: block; }
  .cm-topbar { padding: 0 8px; }
  .content-wrapper, .cm-app.cm-collapsed .content-wrapper { margin: 0 8px 8px; border-radius: 22px; }
  .content-wrapper > .content, section.content { padding: 18px 14px 28px; }
  .cm-topbar-ip { display: none; }
}
/* Celular: "Minha conta" vira só o ícone (com o texto a barra do topo passava da largura da tela). */
@media (max-width: 575.98px) {
  .cm-topbar-rotulo { display: none; }
}

/* ============================================================================
   3. CABEÇALHO DE PÁGINA (content-header)
   ============================================================================ */
.content-header { padding: 0 0 14px; }
.content-header h1 { font-size: 1.55rem; font-weight: 500; margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.content-header h1 i { color: var(--md-primary); }
.content-header .row.mb-2 { margin-bottom: 0 !important; align-items: center; }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .8rem; }
.content-header .breadcrumb { padding: .3rem 0 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--md-on-surface-variant); }
.breadcrumb-item a:hover { color: var(--md-primary); }
.breadcrumb-item.active { color: var(--md-outline); }
.breadcrumb-item + .breadcrumb-item { padding-left: .4rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--md-outline); padding-right: .4rem; }

/* ============================================================================
   4. CARTÕES
   ============================================================================ */
.card {
  background: var(--md-surface-lowest); border: 0; border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); margin-bottom: 16px;
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--md-divider-soft);
  padding: 14px 20px; font-weight: 500; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-header:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card-header .card-title, .card-title {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; margin: 0; color: var(--md-on-surface);
  font-variation-settings: var(--rond-head);
}
.card-header .card-title i, .card-title > i:first-child { color: var(--md-primary); }
.card-body { padding: 18px 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--md-divider-soft); padding: 14px 20px; }
.card-footer:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card-tools { float: right; display: flex; gap: 6px; align-items: center; }
/* Título + ferramentas na mesma linha (antes as ferramentas caíam para baixo do título) */
.card-header:has(> .card-tools) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.card-header:has(> .card-tools) > .card-tools { float: none; margin-left: auto; }
/* Título dentro de cabeçalho flex precisa poder encolher: item de flex nasce com
   min-width:auto e um nome/endereço longo empurrava o cabeçalho para além do card,
   criando barra horizontal na página inteira (era o caso de Agenda › Configuração). */
.card-header.d-flex > .card-title,
.card-header:has(> .card-tools) > .card-title { min-width: 0; overflow-wrap: anywhere; }
.card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }

/* Outline (AdminLTE): sem filete colorido no topo; o semântico vira contorno suave */
.card.card-outline { border-top: 0; }
.card-outline.card-danger  { box-shadow: 0 0 0 1px #F3C4BF, var(--sh-sm); }
.card-outline.card-warning { box-shadow: 0 0 0 1px #F4CFA9, var(--sh-sm); }
.card-outline.card-success { box-shadow: 0 0 0 1px #B8DDBD, var(--sh-sm); }
.card-outline.card-danger  > .card-header .card-title i { color: var(--md-error); }
.card-outline.card-warning > .card-header .card-title i { color: var(--md-warning); }
.card-outline.card-success > .card-header .card-title i { color: var(--md-success); }

/* Sólido: cabeçalho em contêiner tonal */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header {
  background: var(--md-primary-container); color: var(--md-on-primary-container); border-bottom-color: transparent;
}
.card-success:not(.card-outline) > .card-header { background: var(--md-success-container); color: var(--md-on-success-container); border-bottom-color: transparent; }
.card-warning:not(.card-outline) > .card-header { background: var(--md-warning-container); color: var(--md-on-warning-container); border-bottom-color: transparent; }
.card-danger:not(.card-outline)  > .card-header { background: var(--md-error-container);   color: var(--md-on-error-container); border-bottom-color: transparent; }
.card-secondary:not(.card-outline) > .card-header { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
[class*="card-"]:not(.card-outline) > .card-header .card-title,
[class*="card-"]:not(.card-outline) > .card-header .card-title i { color: inherit; }

/* Abas dentro de card */
.card-tabs .card-header, .card-primary.card-tabs .card-header { padding: 4px 8px 0; background: transparent; color: inherit; border-bottom: 1px solid var(--md-divider); }
.card-tabs .nav-tabs { border-bottom: 0; }

/* ============================================================================
   5. INDICADORES (info-box)
   ============================================================================ */
.info-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--md-surface-lowest); border: 0; border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--sh-sm); min-height: auto;
  transition: box-shadow var(--t);
}
a .info-box:hover, .info-box[onclick]:hover { box-shadow: var(--sh); }
.info-box .info-box-icon {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none;
}
.info-box .info-box-content { padding: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.info-box .info-box-text { display: block; font-size: .8rem; font-weight: 500; color: var(--md-on-surface-variant); text-transform: none; letter-spacing: 0; }
.info-box .info-box-number { display: block; font-family: var(--font-head); font-size: 1.45rem; font-weight: 500; color: var(--md-on-surface); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: var(--rond-head); }
/* Telas médias: ícone menor para o valor (R$ 12.345,67) caber numa linha */
@media (max-width: 1399.98px) {
  .info-box { gap: 10px; padding: 14px; }
  .info-box .info-box-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; font-size: 1.1rem; }
  .info-box .info-box-number { font-size: 1.3rem; }
}

/* O fundo colorido do AdminLTE vira: cartão branco + ícone em contêiner tonal */
.info-box[class*="bg-"] { background: var(--md-surface-lowest) !important; color: var(--md-on-surface) !important; }
.info-box.bg-primary .info-box-icon, .info-box.bg-info .info-box-icon, .info-box.bg-teal .info-box-icon,
.info-box .info-box-icon.bg-primary, .info-box .info-box-icon.bg-info, .info-box .info-box-icon.bg-teal { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.info-box.bg-success .info-box-icon, .info-box .info-box-icon.bg-success { background: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
.info-box.bg-warning .info-box-icon, .info-box .info-box-icon.bg-warning { background: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
.info-box.bg-danger  .info-box-icon, .info-box .info-box-icon.bg-danger  { background: var(--md-error-container) !important;   color: var(--md-on-error-container) !important; }
.info-box .info-box-icon.bg-secondary, .info-box .info-box-icon.bg-dark { background: var(--md-surface-high) !important; color: var(--md-on-surface-variant) !important; }

/* ============================================================================
   6. SMALL-BOX (indicador destacado) — contêiner tonal
   ============================================================================ */
.small-box, .small-box[class*="bg-"] {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 20px; box-shadow: none;
  background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important;
}
.small-box > .inner { padding: 18px 20px; position: relative; z-index: 1; }
.small-box h3 { font-family: var(--font-head); color: inherit; font-size: 2rem; font-weight: 500; margin: 0; font-variation-settings: var(--rond-head); }
.small-box p { margin: .15rem 0 0; font-size: .9rem; color: inherit; opacity: .9; }
.small-box .icon { position: absolute; top: 14px; right: 18px; font-size: 2.6rem; opacity: .28; color: inherit; }
.small-box .small-box-footer {
  display: block; padding: 8px; text-align: center; color: inherit;
  background: rgba(0,0,0,.05); font-size: .82rem; font-weight: 500; transition: background var(--t);
}
.small-box .small-box-footer:hover { background: rgba(0,0,0,.09); color: inherit; }
.small-box.bg-success[class] { background: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
.small-box.bg-warning[class] { background: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
.small-box.bg-danger[class]  { background: var(--md-error-container) !important;   color: var(--md-on-error-container) !important; }

/* ============================================================================
   7. CALLOUT — faixa tonal
   ============================================================================ */
.callout {
  background: var(--md-surface-low); border: 0; border-radius: 16px;
  padding: 14px 18px; margin-bottom: 16px; box-shadow: none; color: var(--md-on-surface);
}
.callout p:last-child { margin-bottom: 0; }
.callout h5, .callout h4 { font-size: .98rem; font-weight: 600; margin-bottom: .3rem; }
.callout-info    { background: var(--info-l); }
.callout-info h5, .callout-info h4, .callout-info > i:first-child { color: var(--md-on-primary-container); }
.callout-success { background: var(--success-l); }
.callout-success h5, .callout-success h4 { color: var(--md-on-success-container); }
.callout-warning { background: var(--warning-l); }
.callout-warning h5, .callout-warning h4 { color: var(--md-on-warning-container); }
.callout-danger  { background: var(--danger-l); }
.callout-danger h5, .callout-danger h4 { color: var(--md-on-error-container); }

/* ============================================================================
   8. BOTÕES
   Cada variante só define variáveis; as regras de estado (hover/press/ativo)
   são únicas e vencem as do Bootstrap pela mesma especificidade + ordem.
   ============================================================================ */
.btn {
  --btn-bg: transparent; --btn-fg: var(--md-primary); --btn-bd: transparent; --btn-on: 17,96,156;
  position: relative;
  font-family: var(--font-ui); font-weight: 500; font-size: .875rem; letter-spacing: .01em; line-height: 1.43;
  border-radius: var(--r-pill); padding: .5625rem 1.25rem; border: 1px solid transparent;
  box-shadow: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t),
              border-radius .4s var(--ease-spring);
}
.btn, .btn:hover, .btn:focus, .btn.focus,
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
  background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bd);
}
.btn:hover { background-image: linear-gradient(rgba(var(--btn-on), var(--sl-hover)), rgba(var(--btn-on), var(--sl-hover))); }
.btn:not(:disabled):not(.disabled):active,
.show > .btn.dropdown-toggle { background-image: linear-gradient(rgba(var(--btn-on), var(--sl-press)), rgba(var(--btn-on), var(--sl-press))); }
.btn:focus, .btn.focus, .btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus { box-shadow: none; outline: none; }
.btn:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .38); outline-offset: 2px; }
/* Expressivo: a pílula "achata" enquanto pressiona */
.btn:not(:disabled):not(.disabled):active { border-radius: 12px; }

.btn-sm, .btn-group-sm > .btn { padding: .375rem .8rem; font-size: .8125rem; border-radius: var(--r-pill); }
.btn-xs { padding: .22rem .6rem; font-size: .75rem; border-radius: var(--r-pill); line-height: 1.4; }
.btn-lg, .btn-group-lg > .btn { padding: .8rem 1.75rem; font-size: 1rem; border-radius: var(--r-pill); }
.btn-sm:not(:disabled):not(.disabled):active, .btn-xs:not(:disabled):not(.disabled):active { border-radius: 9px; }
.btn i { font-size: 1em; }

/* Preenchidos */
.btn-primary { --btn-bg: var(--md-primary); --btn-fg: #fff; --btn-on: 255,255,255; }
.btn-success { --btn-bg: var(--md-success); --btn-fg: #fff; --btn-on: 255,255,255; }
.btn-danger  { --btn-bg: var(--md-error);   --btn-fg: #fff; --btn-on: 255,255,255; }
.btn-warning { --btn-bg: var(--md-warning); --btn-fg: #fff; --btn-on: 255,255,255; }
.btn-dark    { --btn-bg: var(--md-inverse-surface); --btn-fg: #fff; --btn-on: 255,255,255; }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-dark:hover { box-shadow: 0 1px 2px rgba(24,39,64,.2), 0 1px 3px 1px rgba(24,39,64,.1); }
/* Tonais */
.btn-info      { --btn-bg: var(--md-primary-container);   --btn-fg: var(--md-on-primary-container);   --btn-on: 11,71,118; }
.btn-secondary,
.btn-default   { --btn-bg: var(--md-secondary-container); --btn-fg: var(--md-on-secondary-container); --btn-on: 52,65,79; }
.btn-light     { --btn-bg: var(--md-surface-high);        --btn-fg: var(--md-on-surface);             --btn-on: 24,28,33; }
.btn-teal      { --btn-bg: var(--md-primary);             --btn-fg: #fff;                              --btn-on: 255,255,255; }
/* Contornados */
.btn-outline-primary   { --btn-fg: var(--md-primary);            --btn-bd: var(--md-outline-variant); --btn-on: 17,96,156; }
.btn-outline-secondary { --btn-fg: var(--md-on-surface-variant); --btn-bd: var(--md-outline-variant); --btn-on: 68,74,82; }
.btn-outline-dark      { --btn-fg: var(--md-on-surface);         --btn-bd: var(--md-outline);         --btn-on: 24,28,33; }
.btn-outline-info      { --btn-fg: var(--md-primary);            --btn-bd: var(--md-outline-variant); --btn-on: 17,96,156; }
.btn-outline-success   { --btn-fg: var(--md-success);            --btn-bd: #A9CFAF;                   --btn-on: 37,108,60; }
.btn-outline-danger    { --btn-fg: var(--md-error);              --btn-bd: #EBB3AD;                   --btn-on: 186,26,26; }
.btn-outline-warning   { --btn-fg: var(--md-warning);            --btn-bd: #E8C09A;                   --btn-on: 143,76,0; }
.btn-outline-light     { --btn-fg: #fff;                         --btn-bd: rgba(255,255,255,.55);     --btn-on: 255,255,255; }
/* Texto */
.btn-link { --btn-fg: var(--md-primary); --btn-on: 17,96,156; text-decoration: none; }
.btn-link:hover { text-decoration: none; }
.btn-tool { --btn-fg: var(--md-on-surface-variant); --btn-on: 24,28,33; padding: .3rem .55rem; font-size: .9rem; }

/* Selecionado (btn-group-toggle, filtros) = segmento tonal */
.btn[class*="btn-outline-"]:not(:disabled):not(.disabled).active,
.btn-group-toggle > .btn.active {
  --btn-bg: var(--md-secondary-container); --btn-fg: var(--md-on-secondary-container); --btn-bd: var(--md-outline-variant); --btn-on: 16,50,79;
}
.btn-group > .btn { border-radius: var(--r-pill); }
.btn-group > .btn:not(:disabled):not(.disabled):active { border-radius: var(--r-pill); }
.btn-group > .btn-outline-secondary + .btn-outline-secondary,
.btn-group > .btn[class*="btn-outline-"] + .btn[class*="btn-outline-"] { margin-left: -1px; }
.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 1; }

/* Desabilitado (M3: neutro, sem cor) */
.btn.disabled, .btn:disabled {
  opacity: 1; background-color: rgba(24,28,33,.1); background-image: none;
  color: rgba(24,28,33,.4); border-color: transparent; box-shadow: none; cursor: not-allowed;
}
.btn[class*="btn-outline-"]:disabled, .btn[class*="btn-outline-"].disabled, .btn-link:disabled, .btn-link.disabled { background-color: transparent; border-color: rgba(24,28,33,.12); }
.btn-link:disabled, .btn-link.disabled { border-color: transparent; }

/* btn-app (botões quadrados do AdminLTE) */
.btn-app {
  border-radius: 18px; background: var(--md-surface-lowest); border: 1px solid var(--md-divider);
  color: var(--md-on-surface-variant); min-width: 88px; height: 80px; margin: 0 8px 8px 0;
  font-size: .78rem; padding: 12px 6px; transition: background var(--t), border-color var(--t);
}
.btn-app:hover { background: var(--md-surface-low); border-color: var(--md-outline-variant); color: var(--md-on-surface); }
.btn-app > i { display: block; font-size: 1.5rem; margin-bottom: 6px; color: var(--md-primary); }

/* Botão de fechar (×) = botão de ícone */
.close {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; display: inline-grid; place-items: center;
  font-size: 1.55rem; font-weight: 300; line-height: 1; color: var(--md-on-surface-variant);
  opacity: 1; text-shadow: none; transition: background var(--t);
}
.close:hover { color: var(--md-on-surface); background: rgba(24,28,33,.08); opacity: 1; }
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: 1; }
.alert-dismissible .close { padding: 0; top: 8px; right: 8px; width: 34px; height: 34px; font-size: 1.3rem; color: inherit; }

/* Botões de ação em tabela */
.table td .btn-xs + .btn-xs { margin-left: .2rem; }
.table td .btn, .table td .btn-group { white-space: nowrap; }
/* Badge longo (ex.: nome de sociedade) quebra em vez de esticar a coluna */
.table td .badge { white-space: normal; text-align: left; }

/* Seta do dropdown = chevron do Material */
.dropdown-toggle::after {
  border: 0; content: "expand_more"; font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  display: inline-block; width: 1em; overflow: hidden; line-height: 1; font-size: 1.25em;
  vertical-align: -.28em; margin-left: .15em; text-transform: none; letter-spacing: normal;
}
.dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after { margin-left: 0; }
.dropup .dropdown-toggle::after { border: 0; content: "expand_less"; }

/* Menu (dropdown) */
.dropdown-menu {
  background: var(--md-surface-lowest); border: 0; border-radius: 16px; box-shadow: var(--sh-lg);
  padding: 6px; font-size: .875rem; min-width: 12.5rem; color: var(--md-on-surface);
}
.dropdown-item {
  position: relative; border-radius: 10px; padding: .6rem .8rem; color: var(--md-on-surface);
  display: flex; align-items: center; gap: .1rem; font-weight: 400; transition: background var(--t);
}
.dropdown-item i { width: 1.35rem; color: var(--md-on-surface-variant); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(24,28,33,.07); color: var(--md-on-surface); }
.dropdown-item:active, .dropdown-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--md-error) !important; }
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus { background: var(--danger-l); color: var(--md-error); }
.dropdown-item-text { padding: .6rem .8rem; display: flex; align-items: center; font-size: .875rem; }
.dropdown-divider { border-top-color: var(--md-divider); margin: 6px 4px; }
.dropdown-header { color: var(--md-on-surface-variant); font-size: .75rem; font-weight: 500; padding: .5rem .8rem .3rem; }
.dropdown-toggle-split { padding-left: .6rem; padding-right: .7rem; }

/* ============================================================================
   9. FORMULÁRIOS (campo contornado M3)
   ============================================================================ */
label { font-weight: 500; font-size: .8125rem; color: var(--md-on-surface-variant); margin-bottom: 6px; }
.form-group { margin-bottom: 1.1rem; }
.form-control, .custom-select {
  border: 1px solid var(--md-field); border-radius: 12px; color: var(--md-on-surface);
  font-family: var(--font-ui); font-size: .9375rem; line-height: 1.5;
  padding: .5625rem .875rem; height: auto; min-height: 42px; background-color: var(--md-surface-lowest);
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.form-control:hover, .custom-select:hover { border-color: var(--md-on-surface-variant); }
.form-control:focus, .custom-select:focus {
  border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); background-color: var(--md-surface-lowest); color: var(--md-on-surface);
}
.form-control::placeholder { color: var(--md-outline); opacity: 1; }
.form-control-sm, .custom-select-sm { min-height: 34px; padding: .3rem .7rem; font-size: .8125rem; border-radius: 10px; }
.form-control-lg { min-height: 50px; font-size: 1.05rem; border-radius: 14px; }
.form-control:disabled, .form-control[readonly], .custom-select:disabled {
  background-color: var(--md-surface-low); border-color: var(--md-outline-variant); color: var(--md-on-surface-variant);
}
.form-control[readonly]:focus { box-shadow: none; border-color: var(--md-outline-variant); }
textarea.form-control { min-height: 96px; }
select.form-control:not([multiple]):not([size]), .custom-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444A52' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 20px;
}
select.form-control-sm:not([multiple]):not([size]) { padding-right: 2rem; background-position: right .4rem center; background-size: 18px; }
.form-text { color: var(--md-on-surface-variant); font-size: .78rem; }
.col-form-label { font-weight: 500; font-size: .8125rem; color: var(--md-on-surface-variant); }

/* Validação */
.form-control.is-invalid, .input-validation-error { border-color: var(--md-error) !important; }
.form-control.is-invalid:focus, .input-validation-error:focus { box-shadow: inset 0 0 0 1px var(--md-error); }
.form-control.is-valid { border-color: var(--md-success); }
.invalid-feedback, .field-validation-error, span.text-danger { font-size: .78rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* Grupo com ícone/botão: o conjunto se comporta como um campo só */
.input-group-text {
  background: var(--md-surface-lowest); border: 1px solid var(--md-field); color: var(--md-on-surface-variant);
  border-radius: 12px; font-size: .9rem; padding: .375rem .8rem; transition: border-color var(--t);
}
.input-group-prepend .input-group-text { border-right: 0; }
.input-group-append .input-group-text { border-left: 0; }
.input-group > .input-group-prepend + .form-control { border-left: 0; padding-left: .25rem; }
.input-group > .form-control:has(+ .input-group-append > .input-group-text) { border-right: 0; }
.input-group > .form-control:focus { box-shadow: none; z-index: 3; }
.input-group:focus-within > .form-control,
.input-group:focus-within .input-group-text { border-color: var(--md-primary); }
.input-group:focus-within { border-radius: 12px; box-shadow: 0 0 0 1px var(--md-primary); }
.input-group-sm > .form-control, .input-group-sm .input-group-text { min-height: 34px; border-radius: 10px; font-size: .8125rem; }
.input-group .btn { border-radius: 12px; z-index: 2; }
.input-group-sm .btn { border-radius: 10px; }
.input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { --btn-bd: var(--md-field); }

/* Checkbox e radio (custom-control) */
.custom-control { padding-left: 1.75rem; min-height: 1.5rem; }
.custom-control-label { font-weight: 400; font-size: .9rem; color: var(--md-on-surface); }
.custom-control-label::before, .custom-control-label::after { top: .16rem; left: -1.75rem; width: 18px; height: 18px; }
.custom-control-label::before { border: 2px solid var(--md-on-surface-variant); background-color: transparent; box-shadow: none; }
.custom-checkbox .custom-control-label::before { border-radius: 4px; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 8px rgba(var(--brand-rgb), .12); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--md-on-surface); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--md-primary); border-color: var(--md-primary); }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--md-primary-container); border-color: var(--md-primary); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-size: 14px; background-position: center; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: transparent; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: radial-gradient(circle, var(--md-primary) 0 4.5px, transparent 5px);
}
.custom-control-input:disabled ~ .custom-control-label { color: var(--md-outline); }
.custom-control-input:disabled ~ .custom-control-label::before { border-color: rgba(24,28,33,.3); background: transparent; }

/* Interruptor (custom-switch) no formato M3, um pouco mais compacto */
.custom-switch { padding-left: 3.6rem; min-height: 28px; }
.custom-switch .custom-control-label::before {
  left: -3.6rem; top: -.2rem; width: 46px; height: 28px; border-radius: var(--r-pill);
  border: 2px solid var(--md-outline); background-color: var(--md-surface-highest);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.custom-switch .custom-control-label::after {
  top: calc(-.2rem + 7px); left: calc(-3.6rem + 7px); width: 14px; height: 14px; border-radius: 50%;
  background-color: var(--md-outline);
  transition: transform .3s var(--ease-spring), width .2s var(--ease), height .2s var(--ease), top .2s var(--ease), left .2s var(--ease), background-color .2s;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--md-primary); border-color: var(--md-primary); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff; width: 20px; height: 20px; top: calc(-.2rem + 4px); left: calc(-3.6rem + 4px); transform: translateX(18px);
}
.custom-switch .custom-control-input:disabled ~ .custom-control-label::before { opacity: .45; }

/* iCheck (usado em cadastro/perfil) */
[class*="icheck-"] > input:first-child + label::before,
[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before { border: 2px solid var(--md-on-surface-variant); border-radius: 4px; }
[class*="icheck-"] > input:first-child:checked + label::before,
[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::before { background-color: var(--md-primary); border-color: var(--md-primary); }
[class*="icheck-"] > input[type="radio"]:first-child + label::before { border-radius: 50%; }

/* Upload */
.custom-file-label { border: 1px solid var(--md-field); border-radius: 12px; min-height: 42px; height: auto; padding: .5625rem .875rem; color: var(--md-on-surface-variant); font-size: .9rem; }
.custom-file, .custom-file-input { min-height: 42px; height: auto; }
.custom-file-label::after { height: auto; top: 3px; right: 3px; bottom: 3px; padding: .4rem .9rem; border: 0; border-radius: 9px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 500; font-size: .82rem; display: flex; align-items: center; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }

/* Select2 (Venda / Financeiro) */
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--md-field) !important; border-radius: 12px !important; min-height: 42px; background: var(--md-surface-lowest);
}
.select2-container--bootstrap4 .select2-selection--single { height: 42px !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; padding-left: .875rem !important; padding-right: 2.6rem !important; color: var(--md-on-surface); }
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: 40px !important; top: 1px !important; right: 8px !important; }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-primary) !important; }
.select2-dropdown { border: 0 !important; border-radius: 14px !important; box-shadow: var(--sh-lg); overflow: hidden; padding: 4px; }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; border-radius: 8px; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--md-field) !important; border-radius: 10px !important; padding: .4rem .7rem; }
/* Seta e texto do combo iguais aos dos outros campos (o tema traz um triângulo próprio).
   Os CSS do select2 entram DEPOIS deste arquivo (vêm na seção Scripts das telas) e têm a
   mesma especificidade — daí o !important, senão a seta do plugin vence e sai cortada. */
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { display: none !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  width: 2.2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444A52' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right .55rem center !important; background-size: 20px !important;
}
.select2-container--default .select2-selection__placeholder { color: var(--md-outline); }
/* O "×" de limpar é float:right dentro do texto: sem o padding acima ele caía em
   cima da seta (o tema desenha a seta com 2.2rem à direita). O tema bootstrap4
   ainda o entrega como bolinha cinza cheia (width/height/background próprios) —
   aqui ele vira o mesmo "×" discreto dos outros combos. */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
  width: auto; height: auto; padding: 0; margin: 0 .4rem 0 0;
  border-radius: 0; background: none;
  color: var(--md-on-surface-variant); font-size: 1.15rem; font-weight: 600; line-height: inherit;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover { background: none; color: var(--md-on-surface); }
.select2-results__option { padding: .5rem .7rem; border-radius: 8px; }
.select2-results__options { padding: 2px; }

/* ============================================================================
   10. TABELAS
   ============================================================================ */
.table { color: var(--md-on-surface); margin-bottom: 0; }
.table thead th {
  border-bottom: 1px solid var(--md-divider); border-top: 0;
  font-size: .8rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--md-on-surface-variant); padding: 12px 14px; vertical-align: middle; background: transparent;
}
.table td, .table th { border-top: 1px solid var(--md-divider-soft); padding: 12px 14px; vertical-align: middle; }
/* Texto sem espaço (nome colado, e-mail, código) não pode empurrar a tabela para fora
   da tela: quebra só quando não couber de outro jeito. */
.table td { overflow-wrap: anywhere; }
.table td.nowrap, .table td.acoes, .table td .btn, .table td .badge { overflow-wrap: normal; }
.table-sm td, .table-sm th { padding: 7px 10px; }
.table-hover tbody tr { transition: background-color var(--t); }
.table-hover tbody tr:hover { background-color: rgba(var(--brand-rgb), .04); color: inherit; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--md-divider-soft); }
/* sem overflow:hidden aqui — senão corta os menus de ação (dropdown) que saem da tabela */
.table-striped tbody tr:nth-of-type(odd) { background-color: #F8FAFC; }
.table .thead-light th, .table .thead-dark th, .table thead.bg-light th {
  background: var(--md-surface-low); color: var(--md-on-surface-variant); border-color: var(--md-divider);
}
.table-warning, .table-warning > td, .table-warning > th { background-color: var(--warning-l) !important; }
.table-success, .table-success > td, .table-success > th { background-color: var(--success-l) !important; }
.table-danger,  .table-danger > td,  .table-danger > th  { background-color: var(--danger-l) !important; }
.table-info,    .table-info > td,    .table-info > th,
.table-primary, .table-primary > td, .table-primary > th { background-color: var(--info-l) !important; }
.table-active, .table-active > td { background-color: var(--md-surface-low) !important; }
.table-responsive { border-radius: inherit; }
.card-body.p-0 > .table thead th:first-child, .card-body.p-0 > .table-responsive > .table thead th:first-child,
.card-body.p-0 > .table td:first-child, .card-body.p-0 > .table-responsive > .table td:first-child { padding-left: 20px; }
.card-body.p-0 > .table thead th:last-child, .card-body.p-0 > .table-responsive > .table thead th:last-child,
.card-body.p-0 > .table td:last-child, .card-body.p-0 > .table-responsive > .table td:last-child { padding-right: 20px; }

/* Números, datas e dinheiro: tabulares, alinhados e sem quebra */
.table .text-right, .table td.num, .table th.num, .table .valor { font-variant-numeric: tabular-nums; }
.table td.num, .table th.num, .table .text-right { text-align: right; }
.table td.nowrap, .table th.nowrap, .table .text-nowrap { white-space: nowrap; }
/* Coluna de ações: sempre à direita, numa linha só, sem roubar largura das outras */
.table td.acoes, .table th.acoes { white-space: nowrap; text-align: right; width: 1%; }
.table td.acoes > .btn + .btn, .table td.acoes > .btn-group + .btn { margin-left: .25rem; }
/* Texto longo em célula: corta com reticências em vez de esticar a tabela (use title no elemento) */
.table td.cortar, .table .cel-cortar { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cabeçalho que acompanha a rolagem em listas longas (opt-in: .table-fixa no wrapper) */
.table-fixa { max-height: 65vh; overflow: auto; }
.table-fixa thead th { position: sticky; top: 0; z-index: 2; background: var(--md-surface-lowest); }
/* Lista vazia */
.table .dataTables_empty, .table .sem-registro { text-align: center; color: var(--md-outline); padding: 28px 12px; }
/* Cabeçalho ordenável */
.table thead th.sorting, .table thead th.sorting_asc, .table thead th.sorting_desc { cursor: pointer; }
.table thead th.sorting:hover { color: var(--md-on-surface); }

/* --- Controles do DataTables (mostrar N / busca / paginação / info) --- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: .85rem; color: var(--md-on-surface-variant); padding: .5rem 0; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter label { text-align: left; width: 100%; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: .35rem; }
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: center; }
  .dataTables_wrapper .pagination { justify-content: center; }
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { font-weight: 400; font-size: .85rem; color: var(--md-on-surface-variant); margin-bottom: 0; }
.dataTables_wrapper .dataTables_length select {
  margin: 0 .4rem; padding: .3rem 1.9rem .3rem .8rem; height: auto; min-height: 36px;
  border: 1px solid var(--md-outline-variant); border-radius: var(--r-pill); background-color: var(--md-surface-lowest); color: var(--md-on-surface);
  font-size: .85rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444A52' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; background-size: 18px;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: .5rem; padding: .35rem .9rem .35rem 2.3rem; height: auto; min-height: 38px; width: 220px; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--r-pill); background-color: var(--md-surface-high); color: var(--md-on-surface); font-size: .875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444A52' d='M19.6 21 13.3 14.7q-.75.6-1.73.95T9.5 16q-2.73 0-4.61-1.89Q3 12.23 3 9.5t1.89-4.61Q6.77 3 9.5 3t4.61 1.89Q16 6.77 16 9.5q0 1.1-.35 2.08-.35.97-.95 1.72L21 19.6ZM9.5 14q1.88 0 3.19-1.31Q14 11.38 14 9.5t-1.31-3.19Q11.38 5 9.5 5T6.31 6.31Q5 7.63 5 9.5t1.31 3.19Q7.63 14 9.5 14Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .75rem center; background-size: 18px;
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--md-primary); outline: none; box-shadow: inset 0 0 0 1px var(--md-primary); background-color: var(--md-surface-lowest);
}
.dataTables_wrapper .dataTables_processing { background: var(--md-surface-lowest); border: 0; border-radius: 14px; box-shadow: var(--sh-lg); color: var(--md-on-surface); }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { color: var(--md-on-surface-variant); }
table.dataTable { border-collapse: collapse !important; }
table.dataTable.table-hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * { box-shadow: none; }

/* Paginação (variante padrão do DataTables) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 36px; padding: .35rem .7rem !important; margin: 0 2px; border-radius: var(--r-pill);
  border: 0 !important; background: transparent !important; color: var(--md-on-surface-variant) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(24,28,33,.07) !important; color: var(--md-on-surface) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; font-weight: 600; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--md-outline) !important; background: transparent !important; }

/* Paginação (Bootstrap 4 — é a que o DataTables usa aqui) */
.pagination { gap: 2px; flex-wrap: wrap; }
.page-link {
  min-width: 36px; height: 36px; padding: 0 .75rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant); background: transparent; border: 0; border-radius: var(--r-pill) !important;
  margin: 0; font-size: .85rem; font-weight: 500; transition: background var(--t), color var(--t);
}
.page-link:hover { background: rgba(24,28,33,.07); color: var(--md-on-surface); }
.page-link:focus { box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .35); }
.page-item.active .page-link { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }
.page-item.disabled .page-link { color: var(--md-outline); background: transparent; opacity: .7; }

/* Botão +/- do DataTables Responsive (linha expansível) */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
  background-color: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; border: 0;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  top: 50%; margin-top: -9px; left: 6px; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; box-sizing: border-box;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
  background-color: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
/* Detalhe expandido da linha */
.dtr-details { width: 100%; }
.dtr-details li { border-bottom: 1px solid var(--md-divider-soft); padding: .45rem 0; list-style: none; }
.dtr-details li:last-child { border-bottom: 0; }
.dtr-title { font-weight: 500; color: var(--md-on-surface-variant); font-size: .8rem; margin-right: .5rem; }
.dtr-data { color: var(--md-on-surface); }

/* ============================================================================
   11. BADGES → rótulos tonais
   ============================================================================ */
.badge { font-weight: 500; font-size: .75rem; padding: .3em .65em; border-radius: 8px; letter-spacing: .01em; line-height: 1.25; }
.badge-primary, .badge-info, .badge-teal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.badge-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.badge-danger  { background: var(--md-error-container);   color: var(--md-on-error-container); }
.badge-secondary { background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.badge-light { background: var(--md-surface-low); color: var(--md-on-surface-variant); }
.badge-dark { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
.badge-pill { border-radius: var(--r-pill); padding-left: .75em; padding-right: .75em; }
a.badge:hover, a.badge:focus { filter: brightness(.96); }
.btn .badge { position: relative; top: -1px; }

/* ============================================================================
   12. NAV-TABS (abas M3) / NAV-PILLS (segmentos tonais)
   ============================================================================ */
.nav-tabs { border-bottom: 1px solid var(--md-divider); gap: 2px; }
.nav-tabs .nav-link {
  position: relative; color: var(--md-on-surface-variant); font-weight: 500; font-size: .875rem;
  border: 0; border-radius: 12px 12px 0 0; padding: .75rem 1.1rem; background: transparent; margin-bottom: 0;
  transition: background var(--t), color var(--t);
}
.nav-tabs .nav-link:hover { color: var(--md-on-surface); background: rgba(24,28,33,.05); border: 0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--md-primary); background: transparent; border: 0; }
.nav-tabs .nav-link.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--md-primary);
}
.nav-tabs .nav-link.active i { --icon-fill: 1; }

.nav-pills { gap: 4px; }
.nav-pills .nav-link {
  position: relative; color: var(--md-on-surface-variant); font-weight: 500; font-size: .875rem; border-radius: var(--r-pill);
  padding: .5rem 1rem; border: 0; transition: background var(--t), color var(--t);
}
.nav-pills .nav-link:hover { background: rgba(24,28,33,.07); color: var(--md-on-surface); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.nav-pills .nav-link.active i { --icon-fill: 1; color: var(--md-primary); }

/* ============================================================================
   13. DIÁLOGOS (modais) — M3: canto 28px, sem divisórias, corpo com rolagem
   ============================================================================ */
.modal-backdrop { background-color: rgb(var(--md-scrim)); }
.modal-backdrop.show { opacity: .42; }
.modal-content {
  border: 0; border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden;
  background: var(--md-surface-lowest);
}
.modal-header { border-bottom: 0; padding: 20px 20px 10px 24px; align-items: center; }
.modal-title { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; line-height: 1.3; color: var(--md-on-surface); font-variation-settings: var(--rond-head); }
.modal-title i { color: var(--md-primary); }
.modal-body { padding: 10px 24px 18px; }
.modal-footer { border-top: 0; padding: 12px 20px 20px; gap: 4px; }
.modal-footer > * { margin: 0 .15rem; }
.modal-header .close { margin: -6px -6px -6px auto; padding: 0; }
.modal-body > .table:first-child, .modal-body > .table-responsive:first-child { margin-top: 4px; }

/* Cabeçalho colorido (bg-primary text-white…) vira cabeçalho neutro com ícone na cor */
.modal-header[class*="bg-"] { background: transparent !important; color: var(--md-on-surface) !important; border-bottom: 0; }
.modal-header.text-white, .modal-header .text-white,
.modal-header[class*="bg-"] .modal-title, .modal-header[class*="bg-"] .close { color: var(--md-on-surface) !important; }
.modal-header[class*="bg-"] .close { color: var(--md-on-surface-variant) !important; opacity: 1; }
.modal-header.bg-primary .modal-title i, .modal-header.bg-info .modal-title i, .modal-header.bg-teal .modal-title i { color: var(--md-primary) !important; }
.modal-header.bg-success .modal-title i { color: var(--md-success) !important; }
.modal-header.bg-danger .modal-title i  { color: var(--md-error) !important; }
.modal-header.bg-warning .modal-title i { color: var(--md-warning) !important; }
.modal-header.bg-secondary .modal-title i, .modal-header.bg-dark .modal-title i { color: var(--md-on-surface-variant) !important; }

/* Tamanhos: o diálogo ocupa a tela, deixando só uma faixa do fundo à mostra.
   Isso só é seguro porque o corpo rola por dentro (regra abaixo) — cabeçalho e
   ações continuam visíveis e nada fica cortado. Confirmação curta é SweetAlert,
   não modal, por isso aqui a escala começa grande. */
@media (min-width: 576px) {
  .modal-dialog { max-width: min(860px, 92vw); margin: 2.5vh auto; }
  .modal-sm { max-width: 420px; }
  .modal-dialog-centered { min-height: calc(100% - 5vh); }
}
@media (min-width: 992px) {
  .modal-lg { max-width: min(1240px, 94vw); }
  .modal-xl { max-width: 95vw; }
}
@media (min-width: 1600px) {
  .modal-xl { max-width: min(1800px, 95vw); }
}
/* Corpo rola por dentro: cabeçalho e ações ficam sempre à vista, o diálogo nunca passa da tela.
   Só vale quando o .modal-body é filho direto do .modal-content (ou do <form> dentro dele) —
   num layout próprio (ex.: modal de novidades) o limite de altura cortaria o conteúdo.
   Ficam de fora os modais com style inline (visualizadores em tela cheia do módulo de assinatura)
   e a emissão embutida do atendimento (altura própria). */
.modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content:has(> .modal-body),
.modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content:has(> form > .modal-body) { max-height: 95vh; }
.modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content > .modal-body,
.modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content > form > .modal-body { overflow-y: auto; min-height: 0; }
.modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content > form:has(> .modal-body) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; }
  .modal-content { border-radius: 24px; }
  .modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content:has(> .modal-body),
  .modal-dialog:not([style]):not(.at-modal-emissao) > .modal-content:has(> form > .modal-body) { max-height: calc(100vh - 1rem); }
  .modal-header { padding: 16px 12px 8px 18px; }
  .modal-body { padding: 8px 18px 14px; }
  .modal-footer { padding: 10px 14px 14px; }
}

/* SweetAlert2 → diálogo M3 */
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation { background: rgba(var(--md-scrim), .42); }
.swal2-popup {
  border-radius: var(--r-xl); padding: 24px 20px 20px; font-family: var(--font-ui);
  width: 28rem; max-width: calc(100vw - 1.5rem); background: var(--md-surface-lowest); color: var(--md-on-surface); box-shadow: var(--sh-lg);
}
.swal2-title { font-family: var(--font-head); font-size: 1.45rem; font-weight: 500; color: var(--md-on-surface); padding: 6px 12px 0; font-variation-settings: var(--rond-head); }
.swal2-html-container { font-size: .95rem; color: var(--md-on-surface-variant); margin: 10px 12px 2px; line-height: 1.55; }
.swal2-actions { gap: 8px; margin-top: 20px; }
.swal2-styled { margin: 0; border-radius: var(--r-pill) !important; font-family: var(--font-ui); font-weight: 500; font-size: .875rem; padding: .625rem 1.4rem; transition: filter var(--t), border-radius .4s var(--ease-spring); }
.swal2-styled:hover { background-image: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) !important; }
.swal2-styled:active { border-radius: 12px !important; }
.swal2-styled:focus, .swal2-styled.swal2-confirm:focus, .swal2-styled.swal2-cancel:focus, .swal2-styled.swal2-deny:focus { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .3); }
/* As telas passam cores antigas (teal, roxo, #d33…) em confirmButtonColor; o Swal 11 grava a cor
   inline como variável (--swal2-confirm-button-background-color: #d33). Aqui elas são traduzidas
   para os papéis novos pelo valor: vermelho = erro, verde = sucesso, âmbar = aviso, o resto = primária. */
.swal2-styled.swal2-confirm { background-color: var(--md-primary) !important; color: #fff !important; }
.swal2-styled.swal2-confirm[style*="#d33;" i], .swal2-styled.swal2-confirm[style*="#dc2626" i],
.swal2-styled.swal2-confirm[style*="#dc3545" i], .swal2-styled.swal2-confirm[style*="#b91c1c" i],
.swal2-styled.swal2-confirm[style*="221, 51, 51"], .swal2-styled.swal2-deny { background-color: var(--md-error) !important; color: #fff !important; }
.swal2-styled.swal2-confirm[style*="#16a34a" i], .swal2-styled.swal2-confirm[style*="#28a745" i],
.swal2-styled.swal2-confirm[style*="#15803d" i], .swal2-styled.swal2-confirm[style*="22, 163, 74"] { background-color: var(--md-success) !important; }
.swal2-styled.swal2-confirm[style*="#b45309" i], .swal2-styled.swal2-confirm[style*="#d97706" i],
.swal2-styled.swal2-confirm[style*="#ffc107" i], .swal2-styled.swal2-confirm[style*="180, 83, 9"] { background-color: var(--md-warning) !important; }
.swal2-styled.swal2-cancel { background-color: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; }
.swal2-styled.swal2-cancel:hover { background-image: linear-gradient(rgba(52,65,79,.08), rgba(52,65,79,.08)) !important; }
.swal2-icon { margin: 8px auto 4px; transform: scale(.82); }
.swal2-icon.swal2-success { border-color: rgba(37,108,60,.3); color: var(--md-success); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(37,108,60,.3); }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--md-success); }
.swal2-icon.swal2-error { border-color: rgba(186,26,26,.35); color: var(--md-error); }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--md-error); }
.swal2-icon.swal2-warning { border-color: rgba(143,76,0,.4); color: var(--md-warning); }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: rgba(17,96,156,.35); color: var(--md-primary); }
.swal2-input, .swal2-textarea, .swal2-select, .swal2-file {
  border: 1px solid var(--md-field); border-radius: 12px; box-shadow: none; font-family: var(--font-ui); font-size: .95rem; color: var(--md-on-surface);
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }
.swal2-validation-message { background: var(--danger-l); color: var(--md-on-error-container); border-radius: 12px; margin: 12px 8px 0; }
.swal2-close { border-radius: 50%; width: 40px; height: 40px; font-size: 1.8rem; color: var(--md-on-surface-variant); margin: 6px 6px 0 0; }
.swal2-close:hover { background: rgba(24,28,33,.08); color: var(--md-on-surface); }
.swal2-footer { border-top: 1px solid var(--md-divider-soft); color: var(--md-on-surface-variant); }
.swal2-timer-progress-bar { background: rgba(var(--brand-rgb), .35); }

/* Toastr → snackbar */
#toast-container > div {
  opacity: 1; border-radius: 16px; box-shadow: var(--sh-lg); padding: 14px 18px 14px 52px; width: 344px;
  font-family: var(--font-ui); font-size: .875rem; line-height: 1.45; background-position: 18px center;
  background-color: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
}
#toast-container > div:hover { box-shadow: var(--sh-lg); opacity: 1; }
#toast-container > .toast-success { background-color: #1F5530; }
#toast-container > .toast-error   { background-color: #8A1D17; }
#toast-container > .toast-warning { background-color: #7A4100; }
#toast-container > .toast-info    { background-color: #0F4A78; }
#toast-container .toast-title { font-weight: 600; margin-bottom: 2px; }
#toast-container .toast-close-button { opacity: .7; text-shadow: none; font-weight: 400; }
.toast-progress { opacity: .25; }

/* ============================================================================
   14. ALERTAS → faixas tonais
   ============================================================================ */
.alert { border: 0; border-radius: 16px; padding: 14px 18px; font-size: .9rem; }
.alert h5, .alert h4 { font-size: .98rem; font-weight: 600; margin-bottom: .25rem; color: inherit; }
.alert .icon { margin-right: .35rem; }
.alert-success { background: var(--success-l); color: var(--md-on-success-container); }
.alert-danger  { background: var(--danger-l);  color: var(--md-on-error-container); }
.alert-warning { background: var(--warning-l); color: var(--md-on-warning-container); }
.alert-info, .alert-primary { background: var(--info-l); color: var(--md-on-primary-container); }
.alert-secondary, .alert-light { background: var(--md-surface-low); color: var(--md-on-surface-variant); }
.alert-dark { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
.alert a:not(.btn) { color: inherit; text-decoration: underline; font-weight: 500; }

/* ============================================================================
   15. UTILITÁRIOS (cores + texto)
   ============================================================================ */
.bg-primary { background-color: var(--md-primary) !important; }
.bg-info    { background-color: var(--md-primary) !important; }
.bg-teal    { background-color: var(--md-primary) !important; }
.bg-success { background-color: var(--md-success) !important; }
.bg-warning { background-color: var(--md-warning) !important; }
.bg-danger  { background-color: var(--md-error) !important; }
.bg-secondary { background-color: var(--md-secondary) !important; }
.bg-dark    { background-color: var(--md-inverse-surface) !important; }
.bg-light   { background-color: var(--md-surface-low) !important; }
.text-primary { color: var(--md-primary) !important; }
.text-info, .text-teal { color: var(--md-primary) !important; }
.text-success { color: var(--md-success) !important; }
.text-warning { color: var(--md-warning) !important; }
.text-danger  { color: var(--md-error) !important; }
.text-secondary { color: var(--md-on-surface-variant) !important; }
.text-dark { color: var(--md-on-surface) !important; }
.text-muted { color: var(--md-on-surface-variant) !important; }
.text-bold, .font-weight-bold { font-weight: 600 !important; }
.font-weight-bolder { font-weight: 700 !important; }
.text-sm { font-size: .82rem; }
.text-lg { font-size: 1.05rem; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--md-divider) !important; }
.rounded { border-radius: var(--r) !important; }
.rounded-lg { border-radius: var(--r-lg) !important; }
.rounded-pill { border-radius: var(--r-pill) !important; }
.shadow-sm { box-shadow: var(--sh-sm) !important; }
.shadow { box-shadow: var(--sh) !important; }
.shadow-lg { box-shadow: var(--sh-lg) !important; }

/* Cartão inteiro colorido (ex.: saldo/resultado em destaque) → contêiner tonal com texto escuro */
.card.bg-success { background-color: var(--md-success-container) !important; }
.card.bg-danger  { background-color: var(--md-error-container) !important; }
.card.bg-warning { background-color: var(--md-warning-container) !important; }
.card.bg-primary, .card.bg-info, .card.bg-teal { background-color: var(--md-primary-container) !important; }
.card.bg-success, .card.bg-success .text-white { color: var(--md-on-success-container) !important; }
.card.bg-danger,  .card.bg-danger .text-white  { color: var(--md-on-error-container) !important; }
.card.bg-warning, .card.bg-warning .text-white { color: var(--md-on-warning-container) !important; }
.card.bg-primary, .card.bg-primary .text-white, .card.bg-info, .card.bg-info .text-white,
.card.bg-teal, .card.bg-teal .text-white { color: var(--md-on-primary-container) !important; }
[class*="card bg-"] h1, [class*="card bg-"] h2, [class*="card bg-"] h3, [class*="card bg-"] h4, [class*="card bg-"] h5, [class*="card bg-"] h6 { color: inherit; }
.card[class*="bg-"] { box-shadow: none; }

/* Elevações do AdminLTE → sombras suaves */
.elevation-1 { box-shadow: var(--sh-sm) !important; }
.elevation-2, .elevation-3 { box-shadow: var(--sh) !important; }
.elevation-4 { box-shadow: var(--sh-lg) !important; }

/* Progresso (indicador linear M3) */
.progress { background: var(--md-secondary-container); border-radius: var(--r-pill); font-size: .7rem; }
.progress-bar { background-color: var(--md-primary); border-radius: var(--r-pill); }
.progress-bar.bg-success { background-color: var(--md-success) !important; }
.progress-bar.bg-warning { background-color: var(--md-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--md-error) !important; }
.progress-xs, .progress-sm { height: 6px; }

/* Tooltip (simples) e popover (rico) */
.tooltip { font-family: var(--font-ui); font-size: .78rem; }
.tooltip-inner { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: 8px; padding: 6px 10px; max-width: 260px; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--md-inverse-surface); }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--md-inverse-surface); }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--md-inverse-surface); }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--md-inverse-surface); }
.popover { font-family: var(--font-ui); border: 0; border-radius: 16px; box-shadow: var(--sh-lg); }
.popover-header { background: transparent; border-bottom: 0; font-weight: 600; padding: 12px 16px 0; }
.popover-body { color: var(--md-on-surface-variant); padding: 8px 16px 14px; }

/* Overlay de carregamento */
.overlay-wrapper { position: relative; }
.overlay {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); border-radius: inherit;
}
.overlay .fa-spin, .overlay i { color: var(--md-primary); font-size: 1.8rem; }

/* Timeline (AdminLTE) */
.timeline::before { background: var(--md-divider); border-radius: 4px; }
.timeline > div > .timeline-item { background: var(--md-surface-lowest); border-radius: 16px; box-shadow: var(--sh-sm); color: var(--md-on-surface); }
.timeline > div > .timeline-item > .timeline-header { border-bottom-color: var(--md-divider-soft); color: var(--md-on-surface); }
.timeline > div > .fa, .timeline > div > .fas, .timeline > div > .far { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }

/* ============================================================================
   16. jQuery UI Autocomplete (CID / medicações / exames) → menu M3
   ============================================================================ */
.ui-autocomplete {
  position: absolute; z-index: 2000; max-height: 300px; overflow-y: auto; overflow-x: hidden;
  list-style: none; margin: 4px 0 0; padding: 6px; background: var(--md-surface-lowest);
  border: 0; border-radius: 16px; box-shadow: var(--sh-lg); font-family: var(--font-ui);
}
.ui-autocomplete .ui-menu-item { list-style: none; }
.ui-autocomplete .ui-menu-item-wrapper { display: block; padding: .55rem .75rem; border-radius: 10px; cursor: pointer; font-size: .9rem; color: var(--md-on-surface); border: 0 !important; margin: 0 !important; }
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border: none; }
.ui-helper-hidden-accessible { display: none; }

/* ============================================================================
   17. AJUDA POR TELA (FAB + diálogo)
   ============================================================================ */
.cm-help-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1029;
  display: inline-flex; align-items: center; gap: .6rem; height: 56px; padding: 0 20px 0 16px;
  border: none; border-radius: 16px; background: var(--md-primary-container);
  color: var(--md-on-primary-container); font-weight: 500; font-size: .92rem; box-shadow: var(--sh);
  cursor: pointer; transition: box-shadow var(--t), border-radius .4s var(--ease-spring);
}
.cm-help-fab:hover { box-shadow: var(--sh-lg); color: var(--md-on-primary-container); }
.cm-help-fab:active { border-radius: 24px; }
.cm-help-fab:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); }
.cm-help-fab i { font-size: 1.1rem; }
.cm-help-fab .cm-help-fab-label { line-height: 1; }
@media (max-width: 575.98px) { .cm-help-fab { right: 16px; bottom: 16px; padding: 0; width: 56px; justify-content: center; } .cm-help-fab .cm-help-fab-label { display: none; } }

.cm-help-modal .modal-header { background: transparent; color: var(--md-on-surface); }
.cm-help-modal .modal-header .close { color: var(--md-on-surface-variant); }
.cm-help-modal .modal-title { font-weight: 500; }
.cm-help-intro { color: var(--md-on-surface-variant); margin-bottom: 1.1rem; }
.cm-help-block { border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.cm-help-block:last-child { margin-bottom: 0; }
.cm-help-block-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.cm-help-block ul { margin: 0; padding-left: 1.2rem; }
.cm-help-block li { margin-bottom: .25rem; color: var(--md-on-surface); }
.cm-help-block li:last-child { margin-bottom: 0; }
.cm-help-can { background: var(--success-l); }
.cm-help-can .cm-help-block-title { color: var(--md-on-success-container); }
.cm-help-warn { background: var(--warning-l); }
.cm-help-warn .cm-help-block-title { color: var(--md-on-warning-container); }

.cm-sticky-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
@media (max-width: 991.98px) { .cm-sticky-side { position: static; } }

@media print {
  .cm-help-fab, .cm-sidebar, .cm-topbar, .cm-aviso-conta { display: none !important; }
  .cm-shell { margin-left: 0 !important; }
  body.cm-body { background: #fff; }
  .content-wrapper { margin: 0 !important; border-radius: 0; background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================================================
   18. COMPATIBILIDADE — neutraliza restos de classes AdminLTE
   ============================================================================ */
.cm-body .main-header, .cm-body .main-sidebar, .cm-body .control-sidebar { display: none !important; }
body.cm-body { padding: 0 !important; }

/* Telas embutidas (iframe da emissão dentro do atendimento) */
body.cm-embed { background: var(--md-surface); font-family: var(--font-ui); font-size: 14.5px; color: var(--md-on-surface); -webkit-font-smoothing: antialiased; }

/* ============================================================================
   19. AUTENTICAÇÃO (login / cadastro / recuperar senha)
   ============================================================================ */
.login-page, .register-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem 1rem; position: relative;
  font-family: var(--font-ui); color: var(--md-on-surface); background: var(--md-frame);
  -webkit-font-smoothing: antialiased;
}
/* Ornamento M3 Expressive: formas "cookie" do Material nas cores do logo */
.login-page::before, .login-page::after, .register-page::before, .register-page::after {
  content: ""; position: fixed; pointer-events: none; z-index: 0;
  -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; mask: url('/img/formas/cookie-9.svg') center / contain no-repeat;
}
.login-page::before, .register-page::before { width: 560px; height: 560px; right: -180px; top: -200px; background: #F3DFAA; opacity: .7; }
.login-page::after, .register-page::after { width: 440px; height: 440px; left: -160px; bottom: -170px; background: #C4D9F3;
  -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg'); }
.login-box, .register-box { width: 440px; max-width: 94vw; position: relative; z-index: 1; }
.login-box .card, .register-box .card { border: 0; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.login-card-body, .register-card-body { padding: 2.2rem 2.1rem 1.8rem; border-radius: var(--r-xl); }
.login-box-msg, .register-box-msg { text-align: center; color: var(--md-on-surface-variant); margin: .1rem 0 1.4rem; font-size: .95rem; }
.login-card-body .input-group,
.register-card-body .input-group { display: flex; align-items: stretch; }
.login-card-body .input-group .form-control,
.register-card-body .input-group .form-control {
  height: 48px;
  min-height: 48px;
  font-size: 1rem;
  border-radius: 12px 0 0 12px;
  border-right: 0;
}
.login-card-body .input-group > .input-group-append,
.register-card-body .input-group > .input-group-append { display: flex; }
.login-card-body .input-group-text,
.register-card-body .input-group-text {
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 12px 12px 0;
  border: 1px solid var(--md-field);
  border-left: 0;
  background: var(--md-surface-lowest);
  color: var(--md-on-surface-variant);
}
.login-card-body .input-group:focus-within .form-control,
.login-card-body .input-group:focus-within .input-group-text,
.register-card-body .input-group:focus-within .form-control,
.register-card-body .input-group:focus-within .input-group-text {
  border-color: var(--md-primary) !important;
}
.login-card-body .btn-block, .register-card-body .btn-block { padding: .7rem; }

/* ============================================================================
   20. PÁGINAS PÚBLICAS (validação de documento / farmácia)
   ============================================================================ */
.cm-public { min-height: 100vh; display: flex; flex-direction: column; background: var(--md-surface); font-family: var(--font-ui); color: var(--md-on-surface); -webkit-font-smoothing: antialiased; }
.cm-public-header { background: var(--md-surface-lowest); box-shadow: 0 1px 0 var(--md-divider); }
.cm-public-header .navbar-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--md-on-surface); font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; font-variation-settings: 'ROND' 70;
}
.cm-public-header .navbar-brand .cm-brand-mark { width: 32px; height: 32px; font-size: .95rem; }
.cm-public-header .navbar-brand .cm-brand-logo { width: 34px; height: 34px; }
.cm-public-header .nav-link { color: var(--md-on-surface-variant); font-weight: 500; border-radius: var(--r-pill); padding: .5rem 1rem !important; }
.cm-public-header .nav-link:hover { color: var(--md-on-surface); background: rgba(24,28,33,.06); }
.cm-public-main { flex: 1 1 auto; }
.cm-public-footer {
  margin-top: auto; background: transparent; border-top: 1px solid var(--md-divider);
  color: var(--md-on-surface-variant); padding: 1.5rem 0; text-align: center; font-size: .85rem;
}
.cm-public-footer a { color: var(--md-primary); }

/* ============================================================================
   21. LIST-GROUP (usado em dashboards / listas)
   ============================================================================ */
.list-group-item { border-color: var(--md-divider-soft); color: var(--md-on-surface); padding: 12px 18px; background: transparent; }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }
.list-group-item:first-child { border-top: 0; }
.list-group:not(.list-group-flush) { border-radius: 16px; }
.list-group-item-action { transition: background var(--t); }
.list-group-item-action:hover, .list-group-item-action:focus { background: rgba(24,28,33,.05); color: var(--md-on-surface); }
.list-group-item.active { background: var(--md-secondary-container); border-color: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.list-group-item.active .text-muted { color: var(--md-on-secondary-container) !important; }

/* Imagens de perfil */
.img-circle { border-radius: 50%; }
.profile-user-img {
  width: 100px; height: 100px; object-fit: cover;
  border: 3px solid var(--md-surface-lowest); padding: 0; background: var(--md-surface-low); box-shadow: var(--sh);
}

/* Logos das telas de auth */
.login-logo, .register-logo {
  text-align: center; font-family: var(--font-head);
  font-size: 1.9rem; font-weight: 600; margin-bottom: 1rem; font-variation-settings: 'ROND' 70;
}
.login-logo a, .register-logo a { color: var(--md-on-surface); }
.login-logo b, .register-logo b { color: var(--md-primary); }

/* ============================================================================
   22. COMPATIBILIDADE DE TOKENS — telas que ainda usam var(--cm-*)
   ============================================================================ */
:root {
  --cm-primary: var(--md-primary);
  --cm-primary-dark: var(--md-on-primary-container);
  --cm-primary-darker: #083A61;
  --cm-primary-light: var(--brand-l);
  --cm-primary-rgb: var(--brand-rgb);
  --cm-success: var(--md-success);
  --cm-info: var(--md-primary);
  --cm-warning: var(--md-warning);
  --cm-danger: var(--md-error);
  --cm-teal: var(--md-primary);
  --cm-purple: #5E5C99;
  --cm-bg: var(--md-surface);
  --cm-surface: var(--md-surface-lowest);
  --cm-text: var(--md-on-surface);
  --cm-text-soft: var(--md-on-surface-variant);
  --cm-muted: var(--md-outline);
  --cm-border: var(--md-divider);
  --cm-border-soft: var(--md-divider-soft);
  --cm-sidebar-bg: #0E2A42;
  --cm-sidebar-bg-2: #143A59;
  --cm-sidebar-text: #C9D6E3;
  --cm-sidebar-muted: #8398AC;
  --cm-radius-sm: var(--r-sm);
  --cm-radius: var(--r);
  --cm-radius-lg: var(--r-lg);
  --cm-shadow-sm: var(--sh-sm);
  --cm-shadow: var(--sh);
  --cm-shadow-lg: var(--sh-lg);
  --cm-transition: var(--t);
}

/* ============================================================================
   23. NOVIDADES (carrossel "o CertMed mudou" — login e modal pós-login)
   ============================================================================ */
.cm-slides { position: relative; }
.cm-slides-palco { position: relative; width: 100%; max-width: 100%; aspect-ratio: 520 / 340; }
.cm-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(.985); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cm-slide.ativo { opacity: 1; transform: none; pointer-events: auto; }
.cm-slide img { display: block; width: 100%; height: 100%; }
.cm-slides-legenda { min-height: 3.4em; margin-top: 12px; }
.cm-slides-legenda b { display: block; font-size: 1.02rem; font-weight: 600; }
.cm-slides-legenda span { display: block; font-size: .88rem; opacity: .85; line-height: 1.45; }
.cm-slides-pontos { display: flex; gap: 6px; margin-top: 10px; }
.cm-slides-pontos button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: currentColor; opacity: .3; transition: width .3s var(--ease), opacity .3s ease;
}
.cm-slides-pontos button.ativo { width: 24px; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .cm-slide, .cm-slides-pontos button { transition: none; } }

/* ============================================================================
   24. AVISOS DA CONTA (cobrança em atraso / cancelamento — entre o topo e a folha)
   ============================================================================ */
.cm-aviso-conta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 0 var(--sheet-gap) 10px 0; padding: 10px 12px 10px 18px; font-size: .88rem;
  border: 0; border-radius: 18px;
}
.cm-aviso-conta > i { font-size: 1.1rem; }
.cm-aviso-conta .cm-aviso-acao { margin-left: auto; }
.cm-aviso-conta.atencao { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.cm-aviso-conta.info { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cm-app.cm-collapsed .cm-aviso-conta { margin-left: var(--sheet-gap); }
@media (max-width: 991.98px) { .cm-aviso-conta, .cm-app.cm-collapsed .cm-aviso-conta { margin: 0 8px 8px; } }

/* ============================================================================
   25. TROCA DE TELA (sem piscar) + INDICADOR DE CARREGAMENTO
   O CertMed continua sendo páginas de servidor; quem tira o "branco" entre uma
   tela e outra é a transição de navegação do próprio navegador: a tela atual
   fica na frente até a próxima estar pronta e aí faz um fade. Onde o navegador
   não tem esse recurso, a navegação é a de sempre — nada quebra.
   ============================================================================ */
@view-transition { navigation: auto; }

/* Transição da tela inteira (fade curto). ⚠️ NÃO dar `view-transition-name` ao
   menu/topo/conteúdo para "congelá-los": o nome cria contexto de empilhamento e
   bloco de contenção, e todo modal que mora dentro do conteúdo passa a ficar
   ATRÁS do fundo escurecido (clique bloqueado) e preso à área rolada. */
::view-transition-old(root) { animation: cm-tela-sai .09s var(--ease) both; }
::view-transition-new(root) { animation: cm-tela-entra .2s var(--ease) both; }
@keyframes cm-tela-sai   { to { opacity: 0; } }
@keyframes cm-tela-entra { from { opacity: 0; } }

/* Indicador central enquanto o servidor prepara a próxima tela (criado pelo
   certmed-ui.js só quando a navegação demora mais que um piscar de olhos). */
.cm-carregando {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: rgba(232,237,243,.5); opacity: 0; animation: cm-load-entra .18s var(--ease) forwards;
}
.cm-carregando-anel {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid; border-color: rgba(var(--brand-rgb), .2); border-top-color: var(--md-primary);
  animation: cm-load-gira .7s linear infinite;
}
@keyframes cm-load-entra { to { opacity: 1; } }
@keyframes cm-load-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .cm-carregando-anel { animation-duration: 1.6s; }
}

/* ============================================================================
   26. MELHORIAS DATATABLES & TABELAS (Sem quebra de linha + Scroll horizontal + Master Details)
   ============================================================================ */

/* Previne quebra de linha em células e cabeçalhos de tabelas */
table.dataTable th,
table.dataTable td,
.table th,
.table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

table.dataTable td .badge,
table.dataTable td .btn,
table.dataTable td a {
  white-space: nowrap !important;
}

/* Scroll horizontal fluido para wrappers de DataTables */
.table-responsive,
.dataTables_wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

table.dataTable {
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* IMPEDIR APENAS PSEUDO-ELEMENTOS :BEFORE DENTRO DAS LINHAS FILHAS (DETALHES EXPANDIDOS) */
table.dataTable > tbody > tr.child td:before,
table.dataTable > tbody > tr.child th:before,
table.dataTable > tbody > tr.child td.child:before,
table.dataTable > tbody > tr.child *:before {
  content: none !important;
  display: none !important;
}

/* BOTÃO MASTER DETAILS (APENAS NAS LINHAS PRINCIPAIS) */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > th:first-child {
  position: relative !important;
  padding-left: 48px !important;
  vertical-align: middle !important;
  cursor: pointer;
}

/* Ícone de Expandir (+) */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > th:first-child:before,
table.dataTable.dtr-column > tbody > tr:not(.child) > td.control:before,
table.dataTable.dtr-column > tbody > tr:not(.child) > th.control:before {
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  height: 24px !important;
  width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  text-indent: 0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 0 !important;
  content: '\002B' !important;
  background-color: var(--md-primary, #0052cc) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s !important;
  transform-origin: center center !important;
}

/* Estado Expandido (-) */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent:not(.child) > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent:not(.child) > th:first-child:before,
table.dataTable.dtr-column > tbody > tr.parent:not(.child) td.control:before,
table.dataTable.dtr-column > tbody > tr.parent:not(.child) th.control:before {
  content: '\2212' !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: var(--md-error, #dc3545) !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4) !important;
}

/* Hover no botão Master Details */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > th:first-child:hover:before,
table.dataTable.dtr-column > tbody > tr:not(.child):hover td.control:before,
table.dataTable.dtr-column > tbody > tr:not(.child):hover th.control:before {
  transform: translateY(-50%) scale(1.18) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}