/* Full3d - base do visual em cima do Bootstrap 5 (a "ponte").
   Carregado pelo Site.Master em todas as telas, logo depois do Bootstrap 5 e antes do custom-styles.css (o Bootstrap 3 foi excluído).
   Plano: CloudeCode/docs/superpowers/plans/2026-10-11-migrar-bootstrap-5.md

   Parte 1 - ESTRUTURA: menu, topo, grade e textos com as mesmas medidas de antes (Bootstrap 3).
   Parte 2 - ACABAMENTO: detalhes modernos do Bootstrap 5 (setinha das listas, foco dos botões, linha destacada nas tabelas).

   Atenção: a letra-base (html) continua 10px, como no Bootstrap 3, porque o tema e vários ajustes medem tamanhos por ela.
   Por isso os tamanhos do Bootstrap 5 que usam "rem" são corrigidos aqui em px. */

/* ================= Parte 1 - ESTRUTURA ================= */

html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333;
    --bs-link-color: #337ab7;
    --bs-link-hover-color: #23527c;
    --bs-border-color: #ddd;
}

/* Textos */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.nav > li > a:hover, .nav > li > a:focus, .nav-link:hover, .nav-link:focus,
.navbar-brand:hover, .navbar-brand:focus, .btn:hover, .btn:focus { text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; }
small, .small { font-size: 85%; }
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; opacity: 1; color: gray; }
tr { border-style: none; border-width: medium; border-color: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.btn { white-space: nowrap; }

/* Menus .nav do tema (menu lateral e topo): lista em coluna, como no 3 */
.nav { display: block; padding-left: 0; margin-bottom: 0; list-style: none; flex-wrap: nowrap; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav::before, .nav::after { content: " "; display: table; }
.nav::after { clear: both; }
.collapse.in { display: block; }

/* Abas (Bootstrap 5: li.nav-item > a.nav-link) */
.nav.nav-tabs { display: flex; flex-wrap: wrap; }
.nav.nav-tabs::before, .nav.nav-tabs::after { content: none; }
.nav-tabs { --bs-nav-link-padding-x: 15px; --bs-nav-link-padding-y: 10px; --bs-nav-tabs-border-radius: 4px; }

/* Topo (navbar do tema) */
.navbar { display: block; position: relative; min-height: 50px; padding: 0; margin-bottom: 20px; border: 1px solid transparent; flex-wrap: nowrap; align-items: normal; justify-content: normal; }
.navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after { content: " "; display: table; }
.navbar::after, .navbar-header::after { clear: both; }
.navbar-brand { float: left; height: 50px; padding: 15px; font-size: 18px; line-height: 20px; margin-right: 0; white-space: normal; }
.navbar-brand > img { display: block; }
.navbar-toggle { position: relative; float: right; margin-right: 15px; padding: 9px 10px; margin-top: 8px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.btn-link { text-decoration: none; }
.btn-link:hover, .btn-link:focus { text-decoration: underline; }
.navbar-default .btn-link { --bs-btn-color: #777; --bs-btn-hover-color: #333; --bs-btn-active-color: #333; color: #777; text-decoration: none; }
.navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; }
@media (min-width: 768px) {
    .navbar-header { float: left; }
    .navbar-toggle { display: none; }
    .navbar-right { float: right !important; margin-right: -15px; }
}

/* btn-default: no Full3d é a classe das células das grades (fundo branco, letra #333) */
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover, .btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; }

/* Campos .form-control: tamanhos em px (o Bootstrap 5 usa rem) */
.form-control, .form-select { font-size: 14px; padding: 6px 12px; line-height: 1.42857143; border-radius: 6px; }
.form-control:disabled, .form-control[readonly], .aspNetDisabled { cursor: not-allowed; }

/* Botões do Bootstrap 5: tamanhos em px */
.btn { --bs-btn-padding-x: 12px; --bs-btn-padding-y: 6px; --bs-btn-font-size: 14px; --bs-btn-line-height: 1.42857143; --bs-btn-border-radius: 6px; }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 5px; --bs-btn-font-size: 12px; --bs-btn-border-radius: 5px; }
.btn-lg { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 10px; --bs-btn-font-size: 18px; --bs-btn-border-radius: 8px; }

/* Moldura .well (tela de login), igual ao 3 */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); }

/* Desenho dos dentes (Tratar, Cadastrar, Concluída, Consultar, Meus Pedidos): o HTML já tinha classes do Bootstrap 5
   (offset-md-2, offset-lg-4, h-25) que no 3 não faziam nada. Aqui elas continuam sem efeito, para o desenho não sair do lugar. */
.col-lg-6.offset-md-2, .col-lg-6.offset-lg-4 { margin-left: 0; }
.odontograma.h-25 { height: auto !important; }

/* Grade: .row como no 3 (bloco, não "flex"), com espaçamento de 30px.
   Filhos soltos de um .row (botão, aviso, tabela sem coluna em volta) não esticam para a largura toda. */
.row { --bs-gutter-x: 30px; --bs-gutter-y: 0; display: block; }
.row::before, .row::after { content: " "; display: table; }
.row::after { clear: both; }
.row > :not([class*="col-"]) { width: auto; max-width: none; padding-left: 0; padding-right: 0; }
.container, .container-fluid { --bs-gutter-x: 30px; }

/* Grade do Bootstrap 3 (col-xs/sm/md/lg-N): mesmas larguras e as mesmas quebras de hoje (768, 992 e 1200 px).
   Assim as 745 colunas das telas não precisam ser reescritas. */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { width: 100%; max-width: none; flex: 0 0 auto; }
.col-xs-1 { float: left; width: 8.33333333%; flex: 0 0 auto; max-width: none; }
.col-xs-2 { float: left; width: 16.66666667%; flex: 0 0 auto; max-width: none; }
.col-xs-3 { float: left; width: 25%; flex: 0 0 auto; max-width: none; }
.col-xs-4 { float: left; width: 33.33333333%; flex: 0 0 auto; max-width: none; }
.col-xs-5 { float: left; width: 41.66666667%; flex: 0 0 auto; max-width: none; }
.col-xs-6 { float: left; width: 50%; flex: 0 0 auto; max-width: none; }
.col-xs-7 { float: left; width: 58.33333333%; flex: 0 0 auto; max-width: none; }
.col-xs-8 { float: left; width: 66.66666667%; flex: 0 0 auto; max-width: none; }
.col-xs-9 { float: left; width: 75%; flex: 0 0 auto; max-width: none; }
.col-xs-10 { float: left; width: 83.33333333%; flex: 0 0 auto; max-width: none; }
.col-xs-11 { float: left; width: 91.66666667%; flex: 0 0 auto; max-width: none; }
.col-xs-12 { float: left; width: 100%; flex: 0 0 auto; max-width: none; }
.col-xs-offset-0 { margin-left: 0%; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-offset-12 { margin-left: 100%; }
@media (min-width: 768px) {
.col-sm-1 { float: left; width: 8.33333333%; flex: 0 0 auto; max-width: none; }
.col-sm-2 { float: left; width: 16.66666667%; flex: 0 0 auto; max-width: none; }
.col-sm-3 { float: left; width: 25%; flex: 0 0 auto; max-width: none; }
.col-sm-4 { float: left; width: 33.33333333%; flex: 0 0 auto; max-width: none; }
.col-sm-5 { float: left; width: 41.66666667%; flex: 0 0 auto; max-width: none; }
.col-sm-6 { float: left; width: 50%; flex: 0 0 auto; max-width: none; }
.col-sm-7 { float: left; width: 58.33333333%; flex: 0 0 auto; max-width: none; }
.col-sm-8 { float: left; width: 66.66666667%; flex: 0 0 auto; max-width: none; }
.col-sm-9 { float: left; width: 75%; flex: 0 0 auto; max-width: none; }
.col-sm-10 { float: left; width: 83.33333333%; flex: 0 0 auto; max-width: none; }
.col-sm-11 { float: left; width: 91.66666667%; flex: 0 0 auto; max-width: none; }
.col-sm-12 { float: left; width: 100%; flex: 0 0 auto; max-width: none; }
.col-sm-offset-0 { margin-left: 0%; }
.col-sm-offset-1 { margin-left: 8.33333333%; }
.col-sm-offset-2 { margin-left: 16.66666667%; }
.col-sm-offset-3 { margin-left: 25%; }
.col-sm-offset-4 { margin-left: 33.33333333%; }
.col-sm-offset-5 { margin-left: 41.66666667%; }
.col-sm-offset-6 { margin-left: 50%; }
.col-sm-offset-7 { margin-left: 58.33333333%; }
.col-sm-offset-8 { margin-left: 66.66666667%; }
.col-sm-offset-9 { margin-left: 75%; }
.col-sm-offset-10 { margin-left: 83.33333333%; }
.col-sm-offset-11 { margin-left: 91.66666667%; }
.col-sm-offset-12 { margin-left: 100%; }
}
@media (min-width: 992px) {
.col-md-1 { float: left; width: 8.33333333%; flex: 0 0 auto; max-width: none; }
.col-md-2 { float: left; width: 16.66666667%; flex: 0 0 auto; max-width: none; }
.col-md-3 { float: left; width: 25%; flex: 0 0 auto; max-width: none; }
.col-md-4 { float: left; width: 33.33333333%; flex: 0 0 auto; max-width: none; }
.col-md-5 { float: left; width: 41.66666667%; flex: 0 0 auto; max-width: none; }
.col-md-6 { float: left; width: 50%; flex: 0 0 auto; max-width: none; }
.col-md-7 { float: left; width: 58.33333333%; flex: 0 0 auto; max-width: none; }
.col-md-8 { float: left; width: 66.66666667%; flex: 0 0 auto; max-width: none; }
.col-md-9 { float: left; width: 75%; flex: 0 0 auto; max-width: none; }
.col-md-10 { float: left; width: 83.33333333%; flex: 0 0 auto; max-width: none; }
.col-md-11 { float: left; width: 91.66666667%; flex: 0 0 auto; max-width: none; }
.col-md-12 { float: left; width: 100%; flex: 0 0 auto; max-width: none; }
.col-md-offset-0 { margin-left: 0%; }
.col-md-offset-1 { margin-left: 8.33333333%; }
.col-md-offset-2 { margin-left: 16.66666667%; }
.col-md-offset-3 { margin-left: 25%; }
.col-md-offset-4 { margin-left: 33.33333333%; }
.col-md-offset-5 { margin-left: 41.66666667%; }
.col-md-offset-6 { margin-left: 50%; }
.col-md-offset-7 { margin-left: 58.33333333%; }
.col-md-offset-8 { margin-left: 66.66666667%; }
.col-md-offset-9 { margin-left: 75%; }
.col-md-offset-10 { margin-left: 83.33333333%; }
.col-md-offset-11 { margin-left: 91.66666667%; }
.col-md-offset-12 { margin-left: 100%; }
}
@media (min-width: 1200px) {
.col-lg-1 { float: left; width: 8.33333333%; flex: 0 0 auto; max-width: none; }
.col-lg-2 { float: left; width: 16.66666667%; flex: 0 0 auto; max-width: none; }
.col-lg-3 { float: left; width: 25%; flex: 0 0 auto; max-width: none; }
.col-lg-4 { float: left; width: 33.33333333%; flex: 0 0 auto; max-width: none; }
.col-lg-5 { float: left; width: 41.66666667%; flex: 0 0 auto; max-width: none; }
.col-lg-6 { float: left; width: 50%; flex: 0 0 auto; max-width: none; }
.col-lg-7 { float: left; width: 58.33333333%; flex: 0 0 auto; max-width: none; }
.col-lg-8 { float: left; width: 66.66666667%; flex: 0 0 auto; max-width: none; }
.col-lg-9 { float: left; width: 75%; flex: 0 0 auto; max-width: none; }
.col-lg-10 { float: left; width: 83.33333333%; flex: 0 0 auto; max-width: none; }
.col-lg-11 { float: left; width: 91.66666667%; flex: 0 0 auto; max-width: none; }
.col-lg-12 { float: left; width: 100%; flex: 0 0 auto; max-width: none; }
.col-lg-offset-0 { margin-left: 0%; }
.col-lg-offset-1 { margin-left: 8.33333333%; }
.col-lg-offset-2 { margin-left: 16.66666667%; }
.col-lg-offset-3 { margin-left: 25%; }
.col-lg-offset-4 { margin-left: 33.33333333%; }
.col-lg-offset-5 { margin-left: 41.66666667%; }
.col-lg-offset-6 { margin-left: 50%; }
.col-lg-offset-7 { margin-left: 58.33333333%; }
.col-lg-offset-8 { margin-left: 66.66666667%; }
.col-lg-offset-9 { margin-left: 75%; }
.col-lg-offset-10 { margin-left: 83.33333333%; }
.col-lg-offset-11 { margin-left: 91.66666667%; }
.col-lg-offset-12 { margin-left: 100%; }
}

/* ================= Parte 2 - ACABAMENTO (Bootstrap 5) ================= */

/* Listas: setinha fina no lugar da setinha do navegador (vale só para listas de uma linha) */
#page-wrapper select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f3a68' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 10px !important;
    padding-right: 30px !important;
}

/* Botões: anel azul quando recebem o foco pelo teclado */
#page-wrapper input[type=submit]:focus-visible, #page-wrapper input[type=button]:focus-visible,
#page-wrapper button.btn:focus-visible, #page-wrapper a.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47,95,179,.35) !important;
}

/* Campo desativado: fundo cinza-azulado, para ficar claro que não dá para mexer */
#page-wrapper input[type=text]:disabled, #page-wrapper input[type=password]:disabled, #page-wrapper input[type=date]:disabled,
#page-wrapper input[type=number]:disabled, #page-wrapper input:not([type]):disabled,
#page-wrapper select:disabled, #page-wrapper textarea:disabled {
    background-color: #eef1f6 !important;
    color: #667 !important;
}

/* Grades: a linha inteira fica azul-clara quando o mouse passa (antes só a célula ficava cinza) */
#page-wrapper table[rules] tr:hover > td.btn-default,
#page-wrapper table[rules] td.btn-default:hover,
#page-wrapper table[rules] tr.btn-default:not(.linha-atrasada):not(.linha-aguardando):not(.linha-total):hover > td {
    background-color: #eef3fb;
}

/* ================= Parte 3 - ANIMAÇÕES SUAVES (out/2026) =================
   Movimentos curtos (0,15 a 0,3 s), que o Bruno escolheu ("suave e elegante").
   Quem pede "menos movimento" no Windows/celular não vê as animações (prefers-reduced-motion). */

/* Botões: sobem 1px ao passar o mouse (o Site.Master já faz a sombra crescer e o "afundar" ao clicar) */
#page-wrapper input[type=submit]:hover, #page-wrapper input[type=button]:hover,
#page-wrapper button.btn:hover, #page-wrapper a.btn:not(.btn-link):hover {
    transform: translateY(-1px);
}

/* Caixas de texto e listas: borda escurece ao passar o mouse; fundo azul bem claro enquanto digita */
#page-wrapper input[type=text]:hover:not(:focus):not(:disabled), #page-wrapper input[type=password]:hover:not(:focus):not(:disabled),
#page-wrapper input[type=date]:hover:not(:focus):not(:disabled), #page-wrapper input:not([type]):hover:not(:focus):not(:disabled),
#page-wrapper select:hover:not(:focus):not(:disabled), #page-wrapper textarea:hover:not(:focus):not(:disabled) {
    border-color: #8fa8d4 !important;
}
#page-wrapper input[type=text]:focus, #page-wrapper input[type=password]:focus, #page-wrapper input[type=date]:focus,
#page-wrapper input:not([type]):focus, #page-wrapper select:focus, #page-wrapper textarea:focus {
    background-color: #fbfdff !important;
}
#page-wrapper input, #page-wrapper select, #page-wrapper textarea {
    transition: border-color .15s, box-shadow .15s, background-color .15s, transform .15s;
}
/* Lista com o foco: a setinha fica azul */
#page-wrapper select:not([multiple]):not([size]):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232f5fb3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* O rótulo em cima do campo fica azul enquanto você usa o campo */
#page-wrapper div:focus-within > label { color: #2f5fb3; transition: color .15s; }

/* Grades e abas: troca de cor suave */
#page-wrapper table[rules] td { transition: background-color .12s; }
.nav-tabs .nav-link { transition: background-color .2s, color .2s, border-color .2s; }

/* Menu lateral: ícone e texto deslizam juntos, ficam azul-claros e aparece uma faixa azul-clara à esquerda
   (text-indent empurra a linha toda sem mudar o tamanho do item) */
#wrapper #main-menu > li > a { transition: background-color .15s, color .15s, box-shadow .2s, text-indent .15s; }
#wrapper #main-menu > li > a > i { display: inline-block; transition: color .15s; }
#wrapper #main-menu > li > a:hover { box-shadow: inset 3px 0 0 #8fb3f0; text-indent: 5px; color: #9cc2ff; }
#wrapper #main-menu > li > a:hover > i { color: #9cc2ff; }
#wrapper #main-menu > li > a.menu-ativo { box-shadow: inset 4px 0 0 #9cc2ff; }

/* Detalhes de movimento (out/2026, pedido do Bruno depois do efeito do menu) */
/* 1) Lupa e ícones das grades crescem um pouquinho ao passar o mouse */
#page-wrapper table[rules] input[type=image] { transition: transform .15s ease-out; }
#page-wrapper table[rules] input[type=image]:hover { transform: scale(1.2); }
/* 2) Botões sobem 2px de forma suave (a sombra maior já vem do Site.Master); ao clicar, afundam rápido */
#wrapper #page-wrapper input[type=submit], #wrapper #page-wrapper input[type=button],
#wrapper #page-wrapper button.btn, #wrapper #page-wrapper a.btn:not(.btn-link) {
    transition: background .15s, box-shadow .15s, transform .15s ease-out;
}
#wrapper #page-wrapper input[type=submit]:hover, #wrapper #page-wrapper input[type=button]:hover,
#wrapper #page-wrapper button.btn:hover, #wrapper #page-wrapper a.btn:not(.btn-link):hover { transform: translateY(-2px); }
#wrapper #page-wrapper input[type=submit]:active, #wrapper #page-wrapper input[type=button]:active,
#wrapper #page-wrapper button.btn:active { transform: translateY(1px); transition-duration: .05s; }
/* 3) Linha da grade com o mouse em cima: faixa azul no canto esquerdo, igual à do menu */
#page-wrapper table[rules] tr:not(.f3-vazio):hover > td:first-child { box-shadow: inset 3px 0 0 #2f5fb3; }
/* 4) Ícone do título da tela entra com um giro suave quando a tela abre */
@keyframes f3-icone-titulo { from { opacity: 0; transform: translateX(-8px) rotate(-20deg) scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .titulo-pagina i { animation: f3-icone-titulo .5s ease-out .15s backwards; }
}

/* Barra de carregamento no topo: corre enquanto a próxima tela carrega (Filtrar, Buscar, lupa, menu...) */
#f3-carregando {
    position: fixed; top: 0; left: 0; z-index: 100000;
    height: 3px; width: 0; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, #5b8def, #b9d4ff, #5b8def);
    background-size: 200% 100%;
    box-shadow: 0 0 6px rgba(91,141,239,.7);
    transition: width 8s cubic-bezier(.1,.7,.2,1), opacity .3s;
}
#f3-carregando.ativo { width: 90%; opacity: 1; animation: f3-brilho 1.2s linear infinite; }
@keyframes f3-brilho { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* A tela aparece com um leve deslizar para cima ao abrir.
   "backwards": depois da animação não sobra nenhum transform (não mexe em janelas e posições fixas). */
@keyframes f3-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    #page-wrapper > * { animation: f3-entra .28s ease-out backwards; }
}
@media (prefers-reduced-motion: reduce) {
    #page-wrapper *, #wrapper #main-menu * { transition: none !important; animation: none !important; }
    #page-wrapper input[type=submit]:hover, #page-wrapper input[type=button]:hover { transform: none; }
    #f3-carregando { transition: none; animation: none; }
}

/* =====================================================================================
   PARTE 4 — base própria (out/2026). O Materialize saiu de vez: o full3d-base.css (as regras
   dele que sobravam) foi apagado. Só isto era preciso para as telas continuarem iguais
   (58 medidas e estilo calculado conferidos).
   ===================================================================================== */
/* Topo e menu lateral com letra branca */
.top-navbar, .navbar-side { color: #fff; }
.top-navbar .navbar-toggle { color: inherit; }

/* Efeito de onda ao clicar (script no Site.Master cria o .f3-onda-circulo) */
.f3-onda { position: relative; z-index: 1; overflow: hidden; vertical-align: middle; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: .3s ease-out; }
.f3-onda .f3-onda-circulo { position: absolute; z-index: -1; border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; opacity: 0; background: rgba(0, 0, 0, .2); transform: scale(0); pointer-events: none; }

/* Botão Logout do menu: só o texto */
.navbar-side input.btn-link { border: 0; background: none; font-size: inherit; font-style: normal; text-transform: inherit; }

/* Grades: sem a borda que o atributo border="1" do GridView desenharia na tabela */
table { border-style: none; }
.row { margin-bottom: 20px; }
hr { box-sizing: content-box; height: 0; }

/* Campos e listas ocupam a largura do espaço deles */
input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="time"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { width: 100%; }

/* Odontograma: esconde a caixinha do navegador; o desenho do dente é o label (CSS de cada tela).
   :where() deixa estas regras "fracas", para o CSS das telas continuar mandando. */
:where(.odontograma) [type="checkbox"]:not(:checked), :where(.odontograma) [type="checkbox"]:checked { position: absolute; left: -9999px; opacity: 0; }
:where(.odontograma) [type="checkbox"] + label { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; height: 25px; line-height: 25px; user-select: none; }
:where(.odontograma) [type="checkbox"]:checked + label::before { top: -4px; left: -5px; width: 12px; height: 22px; border-width: 2px; border-style: solid; border-color: transparent #26a69a #26a69a transparent; transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100%; }
:where(.odontograma) [type="checkbox"]:not(:checked):disabled + label::before { border: none; background-color: rgba(0, 0, 0, .26); }
:where(.odontograma) [type="checkbox"]:checked:disabled + label::before { border-right: 2px solid rgba(0, 0, 0, .26); border-bottom: 2px solid rgba(0, 0, 0, .26); }