/*tAMANHOS*/
.w-100{width:100%;}
.w-50{width:50%;}
.w-20{width:20%;}
.w-10{width:10%;}
.w-5{width:5%;}

.fw-700{font-weight:700;}
.fw-300{font-weight:300;}
.fw-400{font-weight:400;}

/*display*/
.d-block{display:block!important}
.d-inline-block{display:inline-block!important}
.d-none{display:none!important}
.d-table{display:table!important}
.d-flex{display:flex!important}

/*float*/
.float-left{float:left!important}
.float-right{float:right!important}
.float-none{float:none!important}

/*text*/
.text-center{text-align:center!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-justify{text-align:justify!important}
.text-uppercase{text-transform:uppercase!important}
.text-end{justify-content:flex-end!important}

.justify-center{justify-content: center!important;}
.justify-between{justify-content: space-between!important;}

.center-middle{align-items: center;}

/*padding*/
.p-5{padding:3rem!important}
.p-4{padding:2rem!important}
.p-3{padding:1rem!important}
.p-2{padding:.9rem!important}
.p-1{padding:.6rem!important}
.p-0{padding:0!important}

/*padding- y*/
.pt-5,.py-5{padding-top:3rem!important}
.pb-5,.py-5{padding-bottom:3rem!important}

.pt-4,.py-4{padding-top:2rem!important}
.pb-4,.py-4{padding-bottom:2rem!important}

.pt-3,.py-3{padding-top:1rem!important}
.pb-3,.py-3{padding-bottom:1rem!important}

.pt-2,.py-2{padding-top:.9rem!important}
.pb-2,.py-2{padding-bottom:.9rem!important}

.pt-1,.py-1{padding-top:.6rem!important}
.pb-1,.py-1{padding-bottom:.6rem!important}

.pt-0,.py-0{padding-top:0!important}
.pb-0,.py-0{padding-bottom:0!important}


/*padding- x*/
.pl-5,.px-5{padding-left:3rem!important}
.pr-5,.px-5{padding-right:3rem!important}

.pl-4,.px-4{padding-left:2rem!important}
.pr-4,.px-4{padding-right:2rem!important}

.pl-3,.px-3{padding-left:1rem!important}
.pr-3,.px-3{padding-right:1rem!important}

.pl-2,.px-2{padding-left:.9rem!important}
.pr-2,.px-2{padding-right:.9rem!important}

.pl-1,.px-1{padding-left:.6rem!important}
.pr-1,.px-1{padding-right:.6rem!important}

.pl-0,.px-0{padding-left:0!important}
.pr-0,.px-0{padding-right:0!important}


/*margin- y*/
.mt-5,.my-5{margin-top:3rem!important}
.mb-5,.my-5{margin-bottom:3rem!important}

.mt-4,.my-4{margin-top:2rem!important}
.mb-4,.my-4{margin-bottom:2rem!important}

.mt-3,.my-3{margin-top:1rem!important}
.mb-3,.my-3{margin-bottom:1rem!important}

.mt-2,.my-2{margin-top:.9rem!important}
.mb-2,.my-2{margin-bottom:.9rem!important}

.mt-1,.my-1{margin-top:.6rem!important}
.mb-1,.my-1{margin-bottom:.6rem!important}

.mt-0,.my-0{margin-top:0!important}
.mb-0,.my-0{margin-bottom:0!important}


/*margin- x*/
.ml-5,.mx-5{margin-left:3rem!important}
.mr-5,.mx-5{margin-right:3rem!important}

.ml-4,.mx-4{margin-left:2rem!important}
.mr-4,.mx-4{margin-right:2rem!important}

.ml-3,.mx-3{margin-left:1rem!important}
.mr-3,.mx-3{margin-right:1rem!important}

.ml-2,.mx-2{margin-left:.9rem!important}
.mr-2,.mx-2{margin-right:.9rem!important}

.ml-1,.mx-1{margin-left:.6rem!important}
.mr-1,.mx-1{margin-right:.6rem!important}

.ml-0,.mx-0{margin-left:0!important}
.mr-0,.mx-0{margin-right:0!important}

.m-auto{margin:0 auto!important}

/*border*/
.border-left{border-left:solid 1px #2e1b56!important}
.border-right{border-right:solid 1px #2e1b56!important}
.border-top{border-top:solid 1px #2e1b56!important}
.border-bottom{border-bottom:solid 1px #2e1b56!important}
.border{border:solid 1px var(--border-global)!important}
.border-0{border:0!important}

.border-bottom-dashed {border-bottom:dashed 1px #2e1b56!important}

/*fonts h*/
.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:20px;display:block;}
.h1{font-size:3.1rem!important;}
.h2{font-size:2.5rem!important;}
.h3{font-size:1.8rem!important;}
.h4{font-size:1.5rem!important;}
.h5{font-size:1.1rem!important;}
.h6{font-size:.9rem!important;}

.grande-font{font-size:4rem!important}
.medio-font{font-size:3rem!important}
.pequeno-font{font-size:2rem!important}
.minimo-font{font-size:1.2rem!important}

/*links*/
.link-azul{color:#3aa6ea!important;text-decoration:none}
.link-azul:hover{color:#57abe0!important;text-decoration:underline}

.link-vermelho{color:#ff7373!important;text-decoration:none}
.link-vermelho:hover{color:#fb9090!important;text-decoration:underline}

.link-verde{color:#4dd898!important;text-decoration:none}
.link-verde:hover{color:#59e4c2!important;text-decoration:underline}

.link-roxo{color:#4968d1!important;text-decoration:none}
.link-roxo:hover{color:#8ba2ef!important;text-decoration:underline}

/*links*/
.text-azul{color:#3aa6ea!important;}
.text-vermelho{color:#da3b3b!important}
.text-verde{color:#2cb783!important;}
.text-roxo{color:#4968d1!important;}
.text-branco{color:var(--text-light)!important;}
.text-escuro{color:#7c7878!important}
.text-padrao{color: #759f8d!important;}
.text-laranja{color: orange!important}

/*position*/
.position-relative{position:relative!important;}
.position-absolute{position:absolute!important;}
.position-inherit{position:inherit!important;}
.position-normal{position:normal!important;}
.position-fixed{position:fixed!important;}

/*border-radius*/
.radius-circulo{border-radius:50%!important;overflow:hidden!important;}
.radius-4{border-radius:4px!important;}
.radius-50{border-radius:50px!important;}
.radius-0{border-radius:0!important;}
.radius-radius-ty{border-radius:0 .5rem .5rem 0!important;}
.opaco{opacity:.8;}

/*largura*/
.width-100{width:100%!important}
.width-50{width:50%!important}
.width-30{width:30%!important}
.width-10{width:10%!important}

/*botoes*/
/* Rodapé de botões de ação de form (Cancelar/Salvar) — padrão Zeus.
   Uso:
     <div class="rows" style="margin-right:0; margin-left:0;">
         <div class="rodape-btns-form">
             <a class="btn btn-laranja btn-acao-form">Cancelar</a>
             <input class="btn btn-roxo btn-acao-form" value="Salvar">
         </div>
     </div>
   - Desktop (>=992px): container encolhe pro conteúdo, empurrado à direita; botões min 160px.
   - Mobile  (<992px):  container ocupa 100% da largura; botões flex dividem o espaço. */
.rodape-btns-form{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;   /* todos os botões IGUAIS (largura do maior conteúdo) */
    gap:.5rem;
    margin-top:.75rem;
    margin-bottom:.75rem;
    margin-left:auto;        /* fixa à direita em desktop */
    padding-right:15px;      /* compensa margin-right:-15px do .rows pai (padrão Zeus) */
    padding-left:15px;
    box-sizing:border-box;
}
.btn-acao-form{ min-width:0; }
@media (min-width:992px){
    .btn-acao-form{ min-width:160px; }
}
@media (max-width:991px){
    .rodape-btns-form{ width:100%; margin-left:0; }
}

.btn{	display:block;	padding:11px 15px;	border-radius:3px;	background:#fff;	border:solid 1px #FFFFFF;	color:#100f0f;	text-align:center;	text-transform:uppercase;	text-decoration:none;	transition:all .4s;	font-size:.9rem;	font-weight: 600;}
.btn:hover{		box-shadow:inset 0 0 7px 0 #0000007d;	transition:all .4s;	cursor:pointer;}

/* Botões — UMA base (--bg-btn) pra todos. Hover é semântico por ação.
   Hover/Focus: cor de fundo semântica + borda preta + ring azul externo. */
.btn.btn-azul,
.btn.btn-amarelo,
.btn.btn-vermelho,
.btn.btn-roxo,
.btn.btn-verde,
.btn.btn-laranja,
.btn.btn-criar,
.btn.btn-padrao   { border:2px solid var(--border-btn); background:var(--bg-btn); color:var(--text-light)!important; }

.btn.btn-roxo:hover,    .btn.btn-roxo:focus    { background:var(--btn-hover-salvar)!important;   color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-verde:hover,   .btn.btn-verde:focus   { background:var(--btn-hover-salvar)!important;   color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-laranja:hover, .btn.btn-laranja:focus { background:var(--btn-hover-cancelar)!important; color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-amarelo:hover, .btn.btn-amarelo:focus { background:var(--btn-hover-cancelar)!important; color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-vermelho:hover,.btn.btn-vermelho:focus{ background:var(--btn-hover-excluir)!important;  color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-azul:hover,    .btn.btn-azul:focus    { background:var(--btn-hover-info)!important;     color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-criar:hover,   .btn.btn-criar:focus   { background:var(--btn-hover-criar)!important;    color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }
.btn.btn-padrao:hover,  .btn.btn-padrao:focus  { background:var(--btn-hover-padrao)!important;   color:var(--btn-hover-text)!important; border:2px solid var(--btn-hover-border)!important; box-shadow:0 0 0 2px var(--btn-hover-ring)!important; outline:none; }

.btn-gradient-amarelo{
	background: linear-gradient(180deg, #fdf989, #fd8e07) fixed;
    border-color: #ffc200;
}



/*btn outline*/
.btn-outline-branco{	border:solid 1px #fff;	background:none!important;	color:#fff!important;}
.btn-outline-azul{	border:solid 1px #0c8dde;	background:none!important;	color:#0c8dde!important;}
.btn-outline-vermelho{	border:solid 1px #e86868;	background:none!important;	color:#e86868!important;}
.btn-outline-verde{	border:solid 1px #4dd898;	background:none!important;	color:#4dd898!important;}
.btn-outline-roxo{	border:solid 1px #7892ea;	background:none!important;	color:#7892ea!important;}
.btn-outline-amarelo{	border:solid 1px #e8f791;	background:none!important;	color:#e8f791!important;}
.btn.btn-grande{	font-size:1.5rem;	padding:.8rem 1.2rem}
.btn.btn-pequeno{	font-size: .8rem;    padding: .3rem .8rem;}
.btn.btn-neutro{	font-size: .8rem;    padding: .3rem .8rem;	background:#ccc;	border-color: #bababa;    color: #5e5e5e;	cursor: no-drop;}
.btn-link{	font-size: .85rem;    padding: .3rem .8rem;    color: #5e5e5e;
	padding:.35rem .29rem;	border:solid 1px #5e5e5e;	border-radius:3px;}
.btn-position{	position:absolute;	top: 33px;    right: 15px;    padding: .47rem .9rem!important;    border-radius: 0 4px 4px 0!important;}
/*embed*/
.embed-responsive {    position: relative;    height: 0;    padding-bottom: 56.5%;}

.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {  position: absolute;  top: 0;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  border: 0;  background:#000}

/*img*/
.img-fluido{max-width:100%;}
.form-campo{	width:100%; 	max-width:100%; 	box-sizing: border-box; 	padding:10px; 	background: var(--bg-input);    border:solid 1px var(--border-input);    border-radius: 4px;    box-shadow: 0 0 5px inset #00000021;	color:var(--text-light)}
.form-campo::placeholder{color:#a3a1a1dd}

input[type=date].form-campo::-webkit-calendar-picker-indicator {
	filter: invert(0.8) brightness(90%) sepia(100%) saturate(0%) hue-rotate(20deg); height: 16px;
  }
input[type=date].form-campo{padding:8px 10px; }
/* Normaliza select pra ter a mesma largura visual dos inputs:
   remove a seta nativa do navegador (que adicionava espaço/altura extras)
   e desenha uma seta SVG inline alinhada à direita. */
select.form-campo{
    padding: 10px 30px 10px 10px !important;     /* espaço extra à direita pra seta */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.form-campo.grande, input[type=date].grande, select.grande {
    padding: .8rem!important;   font-size: 1rem;}
.form-campo.neutro, input[type=date].neutro, select.neutro {        padding: .4rem 0!important;    font-size: 1.1rem;    background: none!important;    border: 0!important;    box-shadow: none!important;    color: #333;}
.text-label{	display:block;	color:var(--text-light);	padding-bottom:.3rem;	font-size:.9rem}

.bg-title {    background: none;    color: var(--text-light);    text-align: center;	display:flex;	justify-content:center;	align-items:center}
.bg-title.between {justify-content:space-between!important;}
.bg-title .icon{margin-right:10px;line-height:1;display:flex;align-items:center}
.bg-title .icon.cadastro path   { stroke: var(--icon-modulo-cadastro)!important; }
.bg-title .icon.compra path     { stroke: var(--icon-modulo-compra)!important; }
.bg-title .icon.venda path      { stroke: var(--icon-modulo-venda)!important; }
.bg-title .icon.estoque path    { stroke: var(--icon-modulo-estoque)!important; }
.bg-title .icon.financeiro path { stroke: var(--icon-modulo-financeiro)!important; }
.bg-title .icon.pdv path        { stroke: var(--icon-modulo-pdv)!important; }
.bg-title .icon.loja path       { stroke: var(--icon-modulo-loja)!important; }
.bg-title .icon.producao path   { stroke: var(--icon-modulo-producao)!important; }
.bg-title2 {   background:#5e76ca!important;}
.bg-title3 {   background: #361f6a!important;}


.bg-padrao .btn.btn-roxo {   color: #fff;}
.bg-padrao .form-campo {    background: var(--bg-input);    border-color: var(--border-input);}
.bg-branco{	background:#fff!important}
.bg-cinza{	background:#f5f4f4!important}
.card{position: relative;   display: -ms-flexbox;    display: flex;    -ms-flex-direction: column;    flex-direction: column;    min-width: 0;    word-wrap: break-word;    background-color: #fff;    background-clip: border-box;    border:1px solid rgb(203, 205, 224);    border-radius: .25rem;}

.table-bordered {	width:100%;    border: 1px solid #d3d9de;}
.table-bordered td, .table-bordered th {    border: 1px solid #e9ecef;	padding:.3rem;	font-size: .9rem;}
.table-bordered th {  background:#f2f3f5;}
.table-bordered tbody td {	color: #444;}
.table-bordered thead th {	color: #000;}

.table thead th {   vertical-align: bottom;    border-bottom: 1px solid #2e1b56;    padding: .3rem;    background:#747ea2;   color: #fff;    font-size: .89rem;    text-transform: uppercase;    letter-spacing: .03em;}

/*padroes cores*/
.rolagem-tabela { height: 250px;   overflow-y: auto;}
.table{   width:100%;}
.table th{background: var(--bg-thead)!important;    color: var(--text-light)!important;}
.table tbody td { border-bottom:1px solid var(--bg-thead); padding:.5rem; color:var(--text-light)!important; font-size:.9rem;}
.table{  border:solid 1px var(--bg-thead)!important; border-radius: 4px;}

/* Zebra padrão para todos os DataTables do sistema */
table.dataTable tbody tr.odd  { background: var(--bg-zebra-odd) !important; }
table.dataTable tbody tr.even { background: var(--bg-zebra) !important; }



/* ── Dash Cards — padrão global (financeiro) ─────────────────── */
.dash-card {
    border-radius: 14px;
    padding: 1.2rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.dash-card .dash-icon { font-size: 2.2rem; color: rgba(255,255,255,.85) !important; flex-shrink: 0; }
.dash-card small { display: block; font-size: .75rem; color: rgba(255,255,255,.82) !important; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; }
.dash-card .dash-sub { font-size: .72rem; color: rgba(255,255,255,.62) !important; text-transform: none; font-weight: 400; letter-spacing: 0; margin-top: .15rem; display: block; }
.dash-card h4 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: .15rem 0 0; line-height: 1.15; }
.dash-azul        { background: linear-gradient(135deg,#1d4ed8 0%,#60a5fa 100%); }
.dash-azul        h4 { color: #bfdbfe; }
.dash-vermelho    { background: linear-gradient(135deg,#b91c1c 0%,#f87171 100%); }
.dash-vermelho    h4 { color: #fecaca; }
.dash-amarelo     { background: linear-gradient(135deg,#b45309 0%,#fbbf24 100%); }
.dash-amarelo     h4 { color: #fef08a; }
.dash-verde-ativo { background: linear-gradient(135deg,#059669 0%,#6ee7b7 100%); }
.dash-verde-ativo h4 { color: #d1fae5; }
.dash-rosa        { background: linear-gradient(135deg,#9d174d 0%,#f9a8d4 100%); }
.dash-rosa        h4 { color: #fce7f3; }
/* ────────────────────────────────────────────────────────────── */

#tab,#tabs {padding:0}
#tab ul.tabs>li,#tabs ul>li{	display: inline-block;    background: #554189;    color: #fff;    font-size: .8rem;    text-transform: uppercase;    border-radius: 4px 4px 0 0;   border: solid 1px var(--bg-datagrid);   border-bottom: 0;}
#tab ul.tabs>li>a,#tabs ul>li>a{	display:block;	padding:10px 15px;	color:#fff;	font-weight:300}

#tab ul.tabs>li>a:focus,#tabs ul>li>a:focus{outline:none}

#tab ul.tabs>li.ui-state-active>a,
#tabs ul>li.ui-state-active>a{background: #e83c18;    color: #e6e6e7;    border-radius: 4px 4px 0 0;    border: solid 1px #e83c18;    border-bottom: 0;    font-weight: 400;    position: relative;    bottom: -1px;}
#tab .cx-tab{	margin-top:-1px;	border:solid 1px #9ca7a0;	border-radius:0 0 4px 4px;	padding:1rem;}
.ui-widget-header {   border: 1px solid #2c1b52;    background: var(--bg-datagrid);   color: #333333;	padding:.3rem .3rem 0;	border-radius:4px}
.window.load{top: 190.804px!important;}

#fundo_preto{	position:fixed;	left:0;	right:0;	bottom:0;	background:#000;	z-index:1}

.msg{	display: block;    background: #de6d6d;    border-radius: 5px;    padding: 10px;    border: solid 1px #d74e4e;    color: #7f2e2e;    font-weight: 600;	margin-bottom:15px	}
	
.msg.sucesso{	background:rgba(0, 128, 0, 0.35);    border-color: #669866;    color: #4d754d;}
.msg.sucesso .fa-times{   color: #4d754d;}	
.msg.erro{	background: #e69f9f;    border-color: #967272;    color: #9a4848;}
.msg.erro .fa-times{   color: #9a4848;}
.msg.info{	background: #aed8e6;    border-color: #5899af;    color: #5594a9;}
.msg.info .fa-times{    color: #5594a9;}	


.msg ul,
.msg ol
{	padding-left:1.8rem;	padding-top:.8rem;    border-top:solid 1px #68a3ca;    margin-top: .5rem;}
.msg ul li,
.msg ol li
{	line-height:1.8rem;	font-size:.9rem}

.msg.msg-verde{	background: #a2d6ae;    border-color: #689a74;    color: #2e634d;}
.msg.msg-vermelho{	background: #e28585;    border-color: #e05c5c;    color: #942828;}
.msg.msg-amarelo{    background: #f5f0aa;    border-color: #f1cd79;    color: #c77226;}
.msg.msg-azul {    background: #a7d4f1;    border-color: #5c9ec7;    color: #206a98;}
/*mensagens de status*/
.status{position: relative;    padding: .3rem .8rem;    margin-bottom: 1rem;    border: 1px solid transparent;    border-radius: .25rem;}
.status.status-verde{	background: #a2d6ae;    border-color: #689a74;   color: #2e634d;}
.status.status-vermelho{	background: #e28585;    border-color: #e05c5c;    color: #942828;}
.status.status-amarelo{   background: #fcf489;    border-color: #cfac5c;    color: #9f5513;}
.status.status-azul {   background: #a7d4f1;    border-color: #5c9ec7;    color: #206a98;}
.status.status-roxo {    background: #c597dd;   border-color: #9d66ba;    color: #5a2f70;}

/*table*/
.tabela-responsiva{
    width: 100%;
	padding:.5rem
}

.tabela-responsiva table {
    width: 100%;
    max-width: 100%;
    min-width: 10%; /* Define uma largura mínima para a tabela */
    margin-bottom: 1rem;
    background-color: transparent;
	border:0;
}

@media (max-width:992px){
	/*table*/
.tabela-responsiva{
	display: block;
    width: 100%;
    overflow-x: auto;
	padding:.5rem
}

}

/* Container Flexbox para os botões */
.button-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}
/* Reset de botão */
.btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 24px; /* Tamanho do ícone */
    margin: 3px; /* Espaçamento entre os botões */
    padding: 3px;
    border-radius: 5px; /* Bordas arredondadas */
    color: #fff; /* Cor do ícone (branco) */

    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Define um tamanho fixo para os botões */
    height: 40px;

}

/* Botões de ação — cores vêm do tema (tema.css) */
.btn-delete         { color: var(--icon-delete); }
.btn-delete:hover   { color: var(--icon-delete-hover); }

.btn-edit           { color: var(--icon-edit); }
.btn-edit:hover     { color: var(--icon-edit-hover); }

.btn-entrada        { color: var(--icon-entrada); }
.btn-entrada:hover  { color: var(--icon-entrada-hover); }

.btn-alert          { color: var(--icon-alert); }
.btn-alert:hover    { color: var(--icon-alert-hover); }

/* Frame de formulário — envolve conteúdo de Create/Edit em um "card" visual
   semelhante ao wrapper da DataTable (mesmas variáveis do tema). */
.frame-form {
    background: var(--bg-datagrid);
    border: 2px solid var(--bg-thead);
    border-radius: 4px;
    padding: 1.5rem;
    margin-top: 26px;
}

/* Ícone "círculo vazio com i dentro" — substitui fa-info-circle (que é solid no FA free).
   Usa currentColor pra herdar a cor do botão (.btn-alert, etc). */
.icon-info-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
    vertical-align: -0.15em;
    box-sizing: border-box;
}
.icon-info-outline::before {
    content: 'i';
    font-size: 0.7em;
    margin-top: -0.1em;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}