@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --cor0: #fff5ec;
  --cor1: #025310;
  --cor2: #007000;
  --cor3: #051945;
  --cor4: #000333;
  --cor5: #0032a0;
  --cor6: #0032a0;
  --cor7: #fff5ec;
  --cor8: #a4a2a2;
  --cor9: #ff4d00;
  --cor10: #000661;
  --cor10: #000661;
  --cor11: #0080ff;
  --cor12: #f3e412;
  --cor13: #2ce238;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  background-color: white;
  margin: 0;
  overflow-x: hidden;
}

header {
  background: radial-gradient(ellipse at center, #19882c 1%, #025310 100%);
  height: 75px;
  width: 100%;
  display: flex;
  align-items: center;
}

.painel {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.painel:hover {
  text-decoration: underline;
}

.sair {
  color: rgb(255, 255, 255);
  background-color: #08a400;
  padding: 3px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

.sair:hover {
  background-color: #047600;
  color: white;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.logo-titulo img {
  width: 30px;
  height: 40px;
}

.search-container input {
  height: 30px;
  border-radius: 5px;
  border: none;
  width: 140px;
  border: 2px solid #989898;
}

.lupa {
  position: absolute;
  left: 50%;
  top: 4%;
  color: gray;
  font-size: 16px;
}

.localifpi {
  display: flex;
  background-color: #00420c;
  margin-left: calc(50% - 50vw);
  padding: 5px;
  width: 100vw;
  height: 20px;
}

.localifpi h4 {
  color: rgb(255, 255, 255);
  font-size: 11px;
  margin-top: -2px;
}

.localifpi-logo img {
  width: 13px;
  height: auto;
  padding: 0 3px;
}

/* LOCALIZAÇÕES */
.map-container {
  position: relative;
  width: 100%;
  height: 604px;
  overflow: hidden;
  margin-bottom: 20px;
}

.marker {
  position: absolute;
  border-radius: 50%;
  transform: translate(-80%, -50%);
  cursor: pointer;
  transition: transform 0.2s;
  z-index: 10;
  width: 8px;
  height: 8px;
  border: 1px solid #000000;
}

.marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.marker-sala {
  background-color: var(--cor2);
}

.marker-quadra {
  background-color: rgb(0, 255, 191);
}

.marker-refeitorio {
  background-color: orangered;
}

.marker-cantina {
  background-color: orange;
}
.marker-administracao {
  background-color: var(--cor11);
}

.marker-banheiro {
  background-color: rgb(122, 3, 233);
}

.marker-laboratorio {
  background-color: var(--cor10);
}

.marker-biblioteca {
  background-color: var(--cor12);
}

.marker-auditorio {
  background-color: var(--cor13);
}
.marker-saude {
  background-color: red;
}

/* Controles do mapa */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
  justify-content: center;
}

.control-btn {
  flex: 0 0 calc(27% - 5px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: background 0.2s;
  height: 30px;
}

.control-btn:hover {
  background: rgb(245, 245, 245);
}

.reset-btn {
  background: rgba(0, 98, 0, 0.9);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  width: 95px;
  height: 30px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: background 0.2s;
}

.reset-btn:hover {
  background: rgba(0, 98, 0, 1);
}

/* MAPA */

main {
  background: #fff5ec;
  padding: 10px;
}

.container {
  position: relative;
  width: 100%;
  min-height: 600px;
  height: 600px;
  transition: transform 0.1s ease-out;
  /* background-image: url("/assets/images/mapa.jpg"); */
  background-color: rgb(255, 244, 224);
  border: 0px solid black;
  background-size: contain;
  background-repeat: no-repeat;
}

.elemento {
  background-color: rgb(160, 159, 159);
  position: absolute;
  margin: 0;
}

.elementos {
  position: absolute;
  top: 0%;
  left: -9%;
}

/* CORREDORES */

.elemento-1 { width: 5px; height: 370px; left: 270px; top: 150px; }

.elemento-50 { width: 38px; height: 72px; left: 244px; top: 150px; }

.elemento-2 { width: 210px; height: 5px; left: 155px; top: 150px; }

.elemento-3 {width: 210px; height: 5px; left: 155px; top: 80px; }

.elemento-4 { width: 5px; height: 68px; top: 84px; left: 170px; }

.elemento-5 { width: 5px; height: 68px; top: 84px; left: 230px; }

.elemento-6 { width: 5px; height: 68px; top: 84px; left: 290px; }

.elemento-7 { width: 5px; height: 68px; top: 84px; left: 350px; }

.elemento-8 { width: 5px; height: 68px; top: 84px; left: 260px; }

.elemento-9 { width: 5px; height: 32px; left: 263px; top: 12px }

.elemento-10 { width: 30px; height: 43px; left: 245px; top: 42px; }

.elemento-11 { width: 5px; height: 32px; left: 263px; top: 12px; }

.elemento-12 { width: 292px; height: 5px; left: 40px; top: 220px; }

.elemento-13 { width: 136px; height: 5px; left: 197px; top: 298px; }

.elemento-14 { width: 136px; height: 5px; left: 197px; top: 345px; }

.elemento-15 { width: 136px; height: 5px; left: 197px; top: 385px; }

.elemento-16 { width: 136px; height: 5px; left: 197px; top: 410px; }

.elemento-17 { width: 136px; height: 5px; left: 197px; top: 490px; }

.elemento-18 { width: 20px; height: 10px; left: 250px; top: 2px; }

.elemento-20 { width: 63px; height: 5px; left: 270px; top: 520px; }

.elemento-21 { width: 15px; height: 85px; left: 332px; top: 510px; }

.elemento-22 { width: 5px; height: 30px; left: 290px; top: 494px; }

.elemento-23 { width: 5px; height: 30px; left: 320px; top: 494px; }

.elemento-86 { width: 5px; height: 30px; left: 305px; top: 494px; }

.elemento-24 { width: 25px; height: 13px; left: 330px; top: 220px; }

.elemento-26 { width: 5px; height: 24px; left: 350px; top: 230px; }

/*SALAS*/

.elemento-27 { width: 6px; height: 3px; left: 240px; top: 70px; }

.elemento-28 { width: 3px; height: 6px; left: 158px; top: 75px; }

.elemento-29 { width: 3px; height: 6px; left: 168px; top: 75px; }

.elemento-30 { width: 3px; height: 6px; left: 200px; top: 75px; }

.elemento-31 { width: 3px; height: 6px; left: 210px; top: 75px; }

.elemento-32 { width: 3px; height: 6px; left: 290px; top: 75px; }

.elemento-33 { width: 3px; height: 6px; left: 300px; top: 75px; }

.elemento-34 { width: 3px; height: 6px; left: 340px; top: 75px; }

.elemento-35 { width: 3px; height: 6px; left: 350px; top: 75px; }

.elemento-36 { width: 6px; height: 3px; left: 174px; top: 135px; }

.elemento-37 { width: 6px; height: 3px; left: 225px; top: 135px; }

.elemento-38 { width: 6px; height: 3px; left: 225px; top: 95px; }

.elemento-39 { width: 6px; height: 3px; left: 294px; top: 95px; }

.elemento-40 { width: 6px; height: 3px; left: 294px; top: 110px; }

.elemento-41 { width: 6px; height: 3px; left: 294px; top: 125px; }

.elemento-42 { width: 6px; height: 3px; left: 345px; top: 95px; }

.elemento-43 { width: 6px; height: 3px; left: 345px; top: 110px; }

.elemento-44 { width: 6px; height: 3px; left: 345px; top: 125px; }

.elemento-45 { width: 3px; height: 6px; left: 165px; top: 154px; }

.elemento-46 { width: 3px; height: 6px; left: 175px; top: 154px; }

.elemento-47 { width: 3px; height: 6px; left: 195px; top: 154px; }

.elemento-48 { width: 3px; height: 6px; left: 212px; top: 154px; }

.elemento-49 { width: 3px; height: 6px; left: 231px; top: 154px; }

.elemento-51 { width: 3px; height: 6px; left: 291px; top: 154px; }

.elemento-52 { width: 3px; height: 6px; left: 305px; top: 154px; }

.elemento-53 { width: 3px; height: 6px; left: 338px; top: 154px; }

.elemento-54 { width: 3px; height: 6px; left: 352px; top: 154px; }

.elemento-55 { width: 3px; height: 6px; left: 70px; top: 215px; }

.elemento-56 { width: 3px; height: 6px; left: 85px; top: 215px; }

.elemento-57 { width: 3px; height: 6px; left: 205px; top: 224px; }

.elemento-58 { width: 3px; height: 6px; left: 218px; top: 224px; }

.elemento-59 { width: 3px; height: 6px; left: 240px; top: 224px; }

.elemento-60 { width: 3px; height: 6px; left: 280px; top: 224px; }

.elemento-61 { width: 3px; height: 6px; left: 300px; top: 224px; }

.elemento-62 { width: 3px; height: 6px; left: 310px; top: 224px; }

.elemento-63 { width: 6px; height: 3px; left: 274px; top: 290px; }

.elemento-64 { width: 3px; height: 6px; left: 300px; top: 293px; }

.elemento-65 { width: 3px; height: 6px; left: 315px; top: 293px; }

.elemento-66 { width: 3px; height: 6px; left: 240px; top: 293px; }

.elemento-25 { width: 3px; height: 6px; left: 218px; top: 293px; }

.elemento-67 { width: 3px; height: 6px; left: 205px; top: 293px; }

.elemento-68 { width: 3px; height: 6px; left: 210px; top: 340px; }

.elemento-69 { width: 3px; height: 6px; left: 220px; top: 340px; }

.elemento-93 { width: 3px; height: 6px; left: 297px; top: 340px; }

.elemento-70 { width: 3px; height: 6px; left: 310px; top: 340px; }

.elemento-71 { width: 3px; height: 6px; left: 225px; top: 380px; }

.elemento-72 { width: 3px; height: 6px; left: 240px; top: 380px; }

.elemento-73 { width: 3px; height: 6px; left: 283px; top: 380px; }

.elemento-74 { width: 3px; height: 6px; left: 310px; top: 380px; }

.elemento-87 { width: 3px; height: 6px; left: 320px; top: 380px; }

.elemento-75 { width: 3px; height: 6px; left: 220px; top: 413px; }

.elemento-76 { width: 3px; height: 6px; left: 230px; top: 413px; }

.elemento-77 { width: 3px; height: 6px; left: 255px; top: 413px; }

.elemento-78 { width: 3px; height: 6px; left: 285px; top: 413px; }

.elemento-79 { width: 3px; height: 6px; left: 308px; top: 413px; }

.elemento-80 { width: 3px; height: 6px; left: 318px; top: 413px; }

.elemento-94 { width: 6px; height: 3px; left: 274px; top: 470px; }

.elemento-81 { width: 6px; height: 3px; left: 274px; top: 480px; }

.elemento-82 { width: 3px; height: 6px; left: 200px; top: 485px; }

.elemento-83 { width: 3px; height: 6px; left: 225px; top: 485px; }

.elemento-84 { width: 3px; height: 6px; left: 240px; top: 485px; }

.elemento-85 { width: 3px; height: 6px; left: 260px; top: 485px; }

.elemento-92 { width: 3px; height: 6px; left: 318px; top: 485px; }

.elemento-95 { width: 3px; height: 6px; left: 294px; top: 485px; }

.elemento-96 { width: 3px; height: 6px; left: 304px; top: 485px; }

.elemento-97 { width: 3px; height: 6px; left: 304px; top: 485px; }

.elemento-98 { width: 6px; height: 3px; left: 328px; top: 530px; }

.elemento-99 { width: 6px; height: 3px; left: 328px; top: 580px; }

.elemento-100 { width: 75px; height:5px; left: 272px; top: 590px; }

.elemento-101 { width: 6px; height: 3px; left: 266px; top: 510px;}

.elemento-102 {  width: 3px; height: 6px; left: 280px; top: 585px;}

.elemento-103 { width: 3px; height: 6px; left: 77px; top: 224px;}

/* POP-UPS */

.sala-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.sala-info .card .close-btn {
  position: absolute;
  right: 10px;
  top: 25%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3em;
  color: white;
  cursor: pointer;
}

.sala-info .card .edit-btn {
  position: absolute;
  right: 10px;
  top: 70%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3em;
  cursor: pointer;
}

.edit-btn[disabled] {
  display: none;
}

.sala-info .card {
  background-color: #f3fbff;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: #333;
}

.sala-info .card .header {
  background-color: var(--cor4);
  color: white;
  text-transform: uppercase;
  padding: 20px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  position: relative;
}

/* Cores para cada tipo de sala */

.sala-info .card .header.sala {
  background: linear-gradient(90deg, #00cc1b 0%, #015a17 100%);
}

.sala-info .card .header.saude {
  background: linear-gradient(90deg, #ff0000 0%, #8a0000 100%);
}

.sala-info .card .header.quadra {
  background: linear-gradient(90deg, #00f7ff 0%, #00578a 100%);
}

.sala-info .card .header.cantina {
  background: linear-gradient(90deg, #faff6e 0%, #fff200 100%);
  color: black;
}

.sala-info .card .header.cantina .close-btn {
  color: black;
}

.sala-info .card .header.auditorio {
  background: linear-gradient(90deg, #45ff51 0%, #17ac00 100%);
  color: black;
}

.sala-info .card .header.administracao {
  background: linear-gradient(90deg, #0048ff 0%, #002b99 100%);
}

.sala-info .card .header.laboratorio {
  background: linear-gradient(90deg, #0034b7 0%, #001751 100%);
}

.sala-info .card .header.biblioteca {
  background: linear-gradient(90deg, #f3e412 0%, #ffaa00 100%);
  color: #333;
}

.sala-info .card .header.banheiro {
  background: linear-gradient(90deg, #ec00a5 0%, #0011ff 100%);
  color: rgb(255, 255, 255);
}

.sala-info .card .header.refeitorio {
  background: linear-gradient(90deg, #ff9900 0%, #ff5100 100%);
}

.sala-info .card .header.banheiro .close-btn {
  color: black;
}

.sala-info .card .info .status {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #606060;
  font-weight: bold;
}

.edit-status {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #606060;
  font-weight: bold;
}

.disp {
  display: flex;
  align-items: center;
  text-transform: capitalize;
}

.disp-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  background: #ccc;
}

.disp-ponto.disponível {
  background: #4caf50;
}

.disp-ponto.indisponível {
  background: #f44336;
}

.disp-ponto.em-manutenção {
  background: #f1f436;
}

.sala-info .card .info .capacidade {
  display: flex;
  align-items: center;
  font-size: 1em;
  color: black;
}

.cap-icon {
  width: 15px;
  height: 15px;
  margin: 10px 5px 5px 0;
}

.sala-info .card .content {
  padding: 20px;
}

.sala-info .card .content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #555;
}

.sala-info .card .content p {
  margin-bottom: 20px;
  font-size: 1em;
  color: #333;
}

.sala-info .card .content .schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.sala-info .card .content .schedule-table th,
.sala-info .card .content .schedule-table td {
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.sala-info .card .content .schedule-table td {
  font-size: 13px;
}

.sala-info .card .content .schedule-table th:first-child {
  border-top-left-radius: 8px;
}

.sala-info .card .content .schedule-table th:last-child {
  border-top-right-radius: 8px;
}

.sala-info .card .content .schedule-table td:first-child {
  border-bottom-left-radius: 8px;
}

.sala-info .card .content .schedule-table td:last-child {
  border-bottom-right-radius: 8px;
}

.sala-info .card .content .schedule-table thead th {
  background-color: #696969;
  color: rgb(0, 0, 0);
  font-weight: normal;
}

.sala-info .card .content .schedule-table tbody td {
  background-color: #d9d9d9;
}

.sala-info .card .content .schedule-table tbody td:nth-child(2) {
  -left: 1px solid #606060;
  border-right: 1px solid #606060;
}

.sala-info .editar {
  background-color: var(--cor5);
  border: 1px solid white;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: 85px;
}

.info-section {
  margin-bottom: 15px;
  text-align: left;
}

.info-section label {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.info-section input {
  background: white;
  color: black;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}

.info-section h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.info-box {
  background: white;
  color: black;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.sala-info button {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
}

/* EDIÇÃO */
.edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-card {
  background-color: #f3fbff;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: #333;
}

.edit-header {
  background-color: var(--cor4);
  text-transform: uppercase;
  padding: 20px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.edit-header.sala {
  background: linear-gradient(90deg, #00cc1b 0%, #015a17 100%);
}

.edit-header.cantina {
  background: linear-gradient(90deg, #faff6e 0%, #fff200 100%);
  color: black;
}

.edit-header.cantina .close-btn {
  color: black;
}

.edit-header.auditorio {
  background: linear-gradient(90deg, #45ff51 0%, #17ac00 100%);
  color: black;
}

.edit-header.administracao {
  background: linear-gradient(90deg, #0048ff 0%, #002b99 100%);
}

.edit-header.laboratorio {
  background: linear-gradient(90deg, #0034b7 0%, #001751 100%);
}

.edit-header.biblioteca {
  background: linear-gradient(90deg, #f3e412 0%, #ffaa00 100%);
  color: #333;
}

.edit-header.banheiro {
  background: linear-gradient(90deg, #d4c5ba 0%, #f89a6f 100%);
  color: black;
}

.edit-header.refeitorio {
  background: linear-gradient(90deg, #ff9900 0%, #ff5100 100%);
}

.edit-close-btn {
  position: absolute;
  right: 10px;
  top: 25%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3em;
  color: white;
  cursor: pointer;
}

.edit-tipo {
  background-color: transparent;
  border: none;
  color: white;
  text-transform: uppercase;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.edit-tipo option {
  background-color: white;
  color: rgb(0, 0, 0);
  border: 1px solid #606060;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.425em;
}

.edit-status {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #606060;
  font-weight: bold;
}

.edit-capacidae {
  display: flex;
  align-items: center;
  font-size: 1em;
  color: black;
}

.small {
  width: 40px;
  margin-bottom: 10px;
}

.edit-cap-icon {
  width: 15px;
  height: 15px;
  margin: 15px 5px 0 0;
}

.disponibilidade-select {
  width: 100%;
  border-radius: 5px;
  color: black;
  font-size: 15px;
}

.disponibilidade-select option {
  text-align: center;
  font-size: 13px;
}

.edit-content {
  padding: 20px;
}

.edit-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #555;
}

.edit-content .edit-field {
  width: 100%;
  margin-bottom: 15px;
}

td .edit-field {
  text-align: center;
}

td textarea {
  resize: none;
}

.edit-button {
  text-align: center;
  padding-bottom: 15px;
}

.save-button {
  background-color: transparent;
  color: #0b5101;
  border: 1px solid #0b5101;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}

.save-button:hover {
  background-color: #0b5101;
  color: white;
}

/* Media Queries */

/** NOTEBOOK **/

@media only screen and (min-width: 992px) {

  .logo-titulo {
    position: relative;
    left: -100px;
  }

  .search-container input {
    position: relative;
    left: -300px;
    width: 200%;
  }

  .lupa {
    left: 490px;
  }

  .painel {
    position: relative;
    left: 300px;
  }

  .sair {
    position: relative;
    left: 100px;
  }

  .localifpi-logo {
    position: relative;
    left: 35px;
  }

  .controls {
    padding: 10px;
    justify-content: center;
  }

  .control-btn {
    width: 100px;
    flex: none;
  }

  .map-container {
    position: relative;
    overflow: hidden;
  }

  .container {
    position: absolute;
    transform-origin: center center;
  }

  .elementos {
    position: relative;
    left: 32%;
  }

  .marker {
    margin-left: 34.2%;
  }

}