html {
font-size: 100%;
/* Base padrão (16px) */
}
/* =========================
RESET BÁSICO
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =========================
VARIÁVEIS DE TEMA
========================= */
:root {
--bg-main: #ffffff;
--bg-dark: #000000;
--text-main: #000000;
--text-light: #ffffff;
--border-color: #e5e5e5;
--radius: 20px;
}
/* =========================
BODY
========================= */
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
min-height: 100vh;
padding-bottom: 50px;
}
.fas,
.far,
.fab {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
display: inline-block;
}
/* =========================
LINKS
========================= */
a {
color: var(--text-main);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* =========================
HEADER / MENU
========================= */
header {
background-color: var(--bg-dark);
color: var(--text-light);
padding: 10px 40px;
position: sticky;
top: 0px;
left: 0px;
width: 100%;
z-index: 999999;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
/* Logo na esquerda, Nav na direita */
width: 100%;
}
header nav .logo {
/*font-size: 20px;*/
font-size: 1.25rem;
/* Equivalente a 20px */
font-weight: 600;
}
.nav-container {
display: flex;
align-items: center;
justify-content: flex-end;
/* Todos os ícones agrupados à direita */
flex: 1;
}
/* Estilo para ambos os itens fixos */
.fixed-nav {
display: flex;
align-items: center;
padding: 0;
list-style: none;
margin: 0;
}
.fixed-nav.left {
padding-right: 20px;
border-right: none !important;
}
.fixed-nav.right {
padding-left: 12px;
}
/* Garante que o container de scroll não corte o triângulo */
.scroll-wrapper {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}
.scrollable-list {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
gap: 20px;
padding: 10px 0;
/* Sem padding lateral — o espaçamento da página é controlado pelo header */
margin: 0;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
list-style: none;
align-items: center;
}
/* Oculta barra de rolagem visual */
.scrollable-list::-webkit-scrollbar {
display: none;
}
.scrollable-list {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollable-list:active {
cursor: grabbing;
/* Mão fechada ao clicar */
}
/* Impede que cliques acidentais em links ocorram se o usuário estiver apenas arrastando */
.scrollable-list.active-drag a {
pointer-events: none;
}
/* Garante que os itens da lista não encolham */
.scrollable-list li {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
header nav ul {
display: flex;
flex-direction: row !important;
/* Força linha única */
gap: 25px;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 0 10px;
}
/* Esconde barra de rolagem */
header nav ul::-webkit-scrollbar {
display: none;
}
header nav ul {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Estilo das setas */
/* Posicionamento absoluto das setas para não empurrarem a lista */
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
background: rgba(0, 0, 0, 0.5);
/* Fundo semi-transparente ajuda a ver o ícone caso ele passe por baixo */
border: none;
color: white;
height: 100%;
width: 40px;
}
.nav-arrow.left {
left: 0;
}
.nav-arrow.right {
right: 0;
}
header nav ul li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
header nav ul li a {
color: var(--text-light);
font-weight: 400;
}
header nav ul li a.admin {
color: pink;
font-weight: 400;
}
header nav ul li a:hover {
opacity: 0.8;
}
/* O triângulo abaixo do item ativo */
header nav ul li.active::after {
content: "";
position: absolute;
bottom: -10px;
/* Ajustado para ficar dentro do padding do header */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
}
header nav ul li.active a {
opacity: 1;
transform: scale(1.5);
color: #FFBE1A;
}
header nav ul li.active a.admin {
opacity: 1;
transform: scale(1.5);
color: magenta;
}
/* Garante que o triângulo não seja cortado pelos containers */
.nav-container,
.scroll-wrapper {
overflow-y: visible !important;
}
.fixed-nav {
overflow: visible !important;
}
/* Container do item de menu */
header nav li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header nav li.active {
position: relative;
}
/* Regra universal do triângulo para qualquer ícone ativo */
header nav li.active::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
z-index: 10;
}
/* =========================
CONTEÚDO PRINCIPAL
========================= */
main {
padding: 40px;
}
/* =========================
CARDS / CONTAINERS
========================= */
.card {
background-color: rgba(255, 255, 255, 0.9);
/*#ffffff;*/
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
}
/* =========================
TÍTULOS
========================= */
h1,
h2,
h3 {
font-weight: 600;
margin-bottom: 20px;
}
h1 {
font-size: 1.75rem;
}
/* Equivalente a 28px */
h2 {
font-size: 1.375rem;
}
/* Equivalente a 22px */
h3 {
font-size: 1.125rem;
}
/* Equivalente a 18px */
/* =========================
FORMULÁRIOS
========================= */
form {
display: flex;
flex-direction: column;
gap: 20px;
}
label {
font-size: 0.875rem;
/* Equivalente a 14px */
/*font-size: 14px;*/
font-weight: 500;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea {
width: 100%;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--border-color);
font-family: 'Poppins', sans-serif;
font-size: 0.875rem;
/* Equivalente a 14px */
/*font-size: 14px;*/
}
input[type="file"] {
max-width: 350px;
}
textarea {
resize: vertical;
min-height: 120px;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #000000;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
}
.grid input {
width: 100%;
}
/* =========================
BOTÕES
========================= */
button,
.btn {
padding: 14px 20px;
border-radius: var(--radius);
border: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
/*font-size: 14px;*/
font-size: 0.875rem;
/* Equivalente a 14px */
font-weight: 500;
text-decoration: none;
}
.btn:hover {
text-decoration: none;
}
.btn-primary {
background-color: #000000;
color: #ffffff;
}
.btn-primary:hover {
opacity: 0.85;
}
.btn-secondary {
background-color: #f5f5f5;
color: #000000;
border: 1px solid var(--border-color);
}
/* =========================
TABELAS (CRUD / RELATÓRIOS)
========================= */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table thead {
background-color: #f7f7f7;
}
table th,
table td {
padding: 16px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 0.875rem;
/* Equivalente a 14px */
/*font-size: 14px;*/
}
table th {
font-weight: 600;
}
.actions {
text-align: right;
}
/* =========================
ALERTAS / MENSAGENS
========================= */
.alert {
padding: 16px 20px;
border-radius: var(--radius);
margin-bottom: 20px;
}
.alert-success {
background-color: #eaf7ef;
color: #1d6b3a;
}
.alert-error {
background-color: #fdeaea;
color: #8a1f1f;
}
/* =========================
LOGIN
========================= */
.login-container {
max-width: 420px;
margin: 80px auto;
}
.login-container .card {
padding: 40px;
}
/* =========================
FOOTER
========================= */
footer {
width: 100%;
position: fixed;
/* Alterado de sticky para fixed */
bottom: 0;
left: 0;
/* Garante que alinhe à esquerda da tela */
text-align: center;
padding: 10px;
/*font-size: 13px;*/
font-size: 0.8125rem;
/* Equivalente a 13px */
color: #666666;
z-index: 999999;
background-color: #FFF;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}
/* =========================
RESPONSIVO
========================= */
@media (max-width: 768px) {
html {
font-size: 80%;
}
/* Aplica o layout em coluna APENAS se:
1. A largura for menor que 768px
2. E a orientação for Retrato (Vertical)
*/
@media (orientation: portrait) {
header nav {
flex-direction: column;
gap: 15px;
}
.nav-container {
width: 100%;
justify-content: space-between;
flex: none;
}
}
/* Aplica o layout em linha (lado a lado) se:
1. Estiver na horizontal (landscape)
OU se a tela for larga o suficiente.
*/
@media (orientation: landscape) {
header nav {
flex-direction: row;
justify-content: space-between;
}
.nav-container {
width: 100%;
flex: 1;
align-items: center;
justify-content: flex-end;
}
/* Ajuste opcional para a logo não ocupar muito espaço na horizontal */
header nav .logo img {
width: 140px !important;
/* Diminui um pouco a logo para ganhar espaço */
height: auto !important;
}
}
.scroll-wrapper {
flex: 1;
justify-content: center;
}
.scrollable-list {
overflow-x: auto;
scrollbar-width: none;
}
.scrollable-list::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 900px) and (orientation: landscape) {
header {
padding: 10px 20px;
/* Reduz o padding vertical de 20px para 10px */
}
}
.card {
padding: 12px;
/* Reduz padding do card para otimizar espaço */
}
/* =========================
COMPONENTES DE FORMULÁRIO GLOBAIS
(Padronização baseada em enterprises/edit.php)
========================= */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.form-row {
margin-bottom: 0px;
}
label.required::after {
content: " *";
color: #dc2626;
font-weight: bold;
}
/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #28a745;
}
input:focus+.slider {
box-shadow: 0 0 1px #28a745;
}
input:checked+.slider:before {
transform: translateX(26px);
}
.toggle-label {
margin-left: 10px;
vertical-align: middle;
font-weight: normal;
}
/* Switch desabilitado (somente leitura) */
.switch input:disabled + .slider {
background-color: #e0e0e0;
cursor: not-allowed;
opacity: 0.6;
}
.switch input:disabled:checked + .slider {
background-color: #a0c4a8;
cursor: not-allowed;
opacity: 0.6;
}
/* =========================
TABLE RESPONSIVE
========================= */
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
.table-responsive>.table {
margin-bottom: 0;
}
/* Coluna Fixa no Grid Responsivo */
.table-responsive>.table th:first-child,
.table-responsive>.table td:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: var(--bg-main, #fff);
/* Usa cor do tema ou fff */
}
/* Evita conflito com o thead que possa ter z-index */
.table-responsive>.table th:first-child {
z-index: 2;
}
@media (max-width: 768px) {
span.hide-on-mobile,
.hide-on-mobile {
display: none !important;
}
.header-container {
flex-direction: column;
align-items: flex-start !important;
gap: 15px;
}
.header-container>div {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 768px) and (orientation: portrait) {
.filter-row {
flex-direction: column !important;
}
.filter-row select {
width: 100% !important;
}
}