From cc3d1a4a7e431f1cb108f198028afbc06ba71264 Mon Sep 17 00:00:00 2001
From: Jessica_Faro <jessica.faro@souunit.com.br>
Date: Thu, 9 Oct 2025 11:57:47 -0300
Subject: [PATCH] =?UTF-8?q?mudan=C3=A7asestilo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrocardePerfis.jsx  |  4 +-
 src/pages/style/TrocardePerfis.css | 83 ++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/style/TrocardePerfis.css

diff --git a/src/components/TrocardePerfis.jsx b/src/components/TrocardePerfis.jsx
index 7c244d1..d340b7f 100644
--- a/src/components/TrocardePerfis.jsx
+++ b/src/components/TrocardePerfis.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { UserInfos } from "./utils/Functions-Endpoints/General";
 import { useAuth } from "./utils/AuthProvider";
-import "./Estilo/TrocardePerfis.css";
+import "../pages/style/TrocardePerfis.css";
 
 const TrocardePerfis = () => {
   const location = useLocation();
@@ -57,4 +57,4 @@ const TrocardePerfis = () => {
   );
 };
 
-export default TrocardePerfis;
+export default TrocardePerfis;
\ No newline at end of file
diff --git a/src/pages/style/TrocardePerfis.css b/src/pages/style/TrocardePerfis.css
new file mode 100644
index 0000000..29900a4
--- /dev/null
+++ b/src/pages/style/TrocardePerfis.css
@@ -0,0 +1,83 @@
+/* TrocardePerfis.css */
+.container-perfis {
+  /* certifique-se de que este arquivo esteja sendo importado corretamente */
+  position: relative;    /* evita sobrescrever posição do layout pai */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end; /* empurra o select para a direita */
+  padding-right: 24px;
+  padding-left: 16px;
+  margin-top: 20px;
+  width: auto;           /* evita que ocupe 100% */
+  z-index: 60;
+}
+
+/* Alinha o label à direita para combinar com o select */
+.container-perfis .acesso-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e2b57;
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+/* Estilo do select (mais específico para evitar overrides) */
+.container-perfis .perfil-select {
+  width: 220px;                   /* largura fixa similar ao exemplo */
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  background-color: #ffffff;
+  color: #344054;
+  font-weight: 600;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.16s ease-in-out;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+  margin-left: auto;              /* garante alinhamento à direita */
+  display: block;
+  appearance: none;               /* remove aparência nativa (melhora visual) */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, #344054 50%),
+                    linear-gradient(135deg, #344054 50%, transparent 50%); /* seta */
+  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  padding-right: 36px; /* espaço para a "seta" */
+}
+
+/* remove seta do select no IE */
+.container-perfis .perfil-select::-ms-expand {
+  display: none;
+}
+
+.container-perfis .perfil-select:hover {
+  border-color: #3366ff;
+  box-shadow: 0 4px 10px rgba(51, 102, 255, 0.06);
+}
+
+.container-perfis .perfil-select:focus {
+  border-color: #3366ff;
+  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
+}
+
+/* placeholder option */
+.container-perfis .perfil-select option[value=""] {
+  color: #9ca3af;
+  font-weight: 500;
+}
+
+/* responsivo */
+@media (max-width: 780px) {
+  .container-perfis {
+    align-items: flex-start;
+    padding-right: 8px;
+  }
+  .container-perfis .perfil-select {
+    width: 100%;
+    margin-left: 0;
+    padding-right: 14px;
+  }
+}