@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
main {
    font-size: medium !important;
    height: 0px;

}

/* Oculta apenas em telas menores que 768px (celulares) */
@media (max-width: 260px) {
    .form-group {
           padding: 6px !important;
    }
    .reservation-container{
          padding: 0rem !important;
    }
.room-card-scroll{
      width: 100% !important;
}
.fade-left{
  left: 37px !important;
}
.fade-right{
  right: 37px !important;
}
.room-info {
  margin-top: 5.5rem !important;
  font-size: 12px !important;
}
.room-card-scroll input[type="radio"]{
         top: 106px !important;
        left: 15px !important;
        width: 14px !important;

}
.menu-btn-home{
  font-size: 73% !important;
        padding: 4% 2% !important;
}
.menu-btn{
  display: none !important;
}
.logo-title {
   
    height: 80%;
     content: url("/logo.png");
}

:root[data-theme="dark"] .logo-title {
  content: url("/logo-dark.png");
}


.fade-border-stop::before {
   
    left: 21px !important;
    
    width: 81% !important;

}

.room-actions {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.participant-info{
  font-size: 40% !important;
  
}

.reservation-actions {

    width: 100% !important;
}
.btn{
  padding: 4% 10% !important;
}
    .participant-info {
        font-size: 40% !important;
        height: 100% !important;
        padding: 3% !important;
        width: 7rem !important;
    }
    
.usuarios-index-btns{

  padding: 10%;
}
}


@media (max-width: 480px) {
    .participant-card {
        /* flex-direction: column;   /* empilha os blocos verticalmente */
        align-items: center;      /* centraliza na vertical */
        align-items: stretch; 
    }
    .filter-form{
      justify-content: space-evenly;
    }
    .participant-photo,
    .participant-info {
        width: 100%;              /* faz cada bloco ocupar largura total */
    }
    .participant-photo {
    flex: 0 0 100px;         /* largura fixa para foto */
}
.participant-info {
    min-width: 0;            /* permite que ele respeite o tamanho do container pai */
    flex: 1 1 200px;         /* ele pode crescer, mas tem limite mínimo */
    box-sizing: border-box;  /* garante que padding conte no tamanho total */
}

.fade-left{
 left: 33px !important;
}
.fade-right{
  right: 33px !important;
}
}

 .logo-mobile {
display: none;
        position: fixed;
        top: 44px;
        width: 81%;
    }

    /* --- colapso do filtro --- */
#filtro-toggle .filtro-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-btn);
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--color-btn--text);
    font-weight: 600;
    border-radius: 6px;
}

#filtro-toggle .filtro-chevron {
  transition: transform .22s ease, opacity .18s ease;
  font-size: 0.9rem;
  margin-left: 6px;
}

/* corpo do filtro: controlar via max-height para animação */
#filtros-salas {
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.2,.9,.2,1), opacity .24s ease, padding .24s ease;
  max-height: 999px; /* valor grande suficiente para conter o conteúdo */
  opacity: 1;
  padding: 0.6rem 0 0 0; /* ajuste conforme seu layout */
}

/* estado colapsado */
#filtros-salas.collapsed {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* quando fechado, vira a seta pra baixo */
#filtro-toggle[aria-expanded="false"] .filtro-chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}
.reservationsFilters{display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: end;
    margin: 1rem 0;}

/* Responsivo: garante que inputs ocupem toda largura no mobile quando visível */
@media (max-width: 700px) {
  #filtros-salas { padding: 0.5rem 0 0 0; }}

@media (max-width: 470px) {
  .table-salas .hide-sm-470 { display: none; }
  .reservationsFilters{display: flex;

    flex-wrap: wrap;
    align-items: end;
}

}

@media (max-width: 768px) {

  .form-control {
    margin: 2px !important;
}

.solicitacao-itens .table-salas tbody td {
    padding: 0px 0px !important;

}

.solicitacao-itens .table-salas thead th {

    padding: 5px 3px !important;

}

.solicitacao-itens .table-salas input.form-control {
    height: 32px !important;
    padding: 0px 0px !important;
        font-size: 9px !important;
}

  .table-salas .btn {
    font-size: 1.5rem !important;

    width: auto !important;

}

  .image-thumb {

    width: -webkit-fill-available !important;
    height: -webkit-fill-available !important;

}

  .filtros-encomenda .filtro-form {

    flex-wrap: wrap;
}

  #filtros-salas {
    display: flex;
    flex-direction: column;
}

  #reservationsFilters.filter-form {
    flex-direction: column !important;
    margin: 15px !important;
}
  .room-card {

    max-width: 632px !important;
}

/* container que engloba grid + setas */
.kpi-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group{

      font-size: 13px;
}


/* manter grid responsivo (a mesma lógica que você já tem) */
.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 1rem;
  margin-top: 10px;
  overflow: visible;
  padding: 0 6px;
  scroll-behavior: smooth; /* rolagem suave por padrão */
}


/* comportamento mobile: fila rolável a partir do breakpoint 800px */
@media (max-width: 800px) {

  

  .board-card .subtitle {
    font-size: small !important;
}

  #modalAvisos .modal-dialog {
width: -webkit-fill-available !important;
}

  .kpi-grid {
    display: flex !important;
    gap: 1rem;
    align-items: stretch;
    padding: 10px 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-top: 10px;
    margin-bottom: 1rem;
  }

  .kpi-grid > * {
    flex: 0 0 240px;
    scroll-snap-align: start;
    min-width: 0; /* evita overflow inesperado */
  }

  .kpi-grid::-webkit-scrollbar { height: 8px; }
  .kpi-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
  .kpi-grid { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.12) transparent; }
}

/* ---------- Animação de entrada (fade + slide up) ---------- */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* aplica animação em cada card com stagger (delay por índice) */
/* define duração e easing */
.kpi-grid > * {
  opacity: 0;
  transform: translateY(10px) scale(.995);
  animation-name: cardEnter;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.2,.9,.25,1);
  animation-fill-mode: forwards;
  /* para reduzir repetições quando reflow: */
  will-change: transform, opacity;
}

/* stagger usando nth-child — ajusta até 12 children com delay crescente */
.kpi-grid > *:nth-child(1)  { animation-delay: 0ms;   }
.kpi-grid > *:nth-child(2)  { animation-delay: 60ms;  }
.kpi-grid > *:nth-child(3)  { animation-delay: 120ms; }
.kpi-grid > *:nth-child(4)  { animation-delay: 180ms; }
.kpi-grid > *:nth-child(5)  { animation-delay: 240ms; }
.kpi-grid > *:nth-child(6)  { animation-delay: 300ms; }
.kpi-grid > *:nth-child(7)  { animation-delay: 360ms; }
.kpi-grid > *:nth-child(8)  { animation-delay: 420ms; }
.kpi-grid > *:nth-child(9)  { animation-delay: 480ms; }
.kpi-grid > *:nth-child(10) { animation-delay: 540ms; }
.kpi-grid > *:nth-child(11) { animation-delay: 600ms; }
.kpi-grid > *:nth-child(12) { animation-delay: 660ms; }

/* hover sutil para destacar card (desktop) */
@media (hover: hover) {
  .kpi-grid > * {
    transition: transform .22s ease, box-shadow .22s ease;
    border-radius: 8px;
  }
  .kpi-grid > *:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 10px 30px rgba(12, 20, 40, 0.08);
  }
}

/* ---------- Setas de navegação ---------- */
.kpi-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  cursor: pointer;
  font-size: 20px;
  color: var(--color-btn, #333);
  transition: transform .16s ease, background .12s ease, opacity .12s ease;
  user-select: none;
}

/* esconde por padrão em telas grandes sem precisar (apenas se usar o wrapper) */
.kpi-scroll-wrap .kpi-nav { display: none; }

/* mostra setas em telas pequenas quando houver overflow */
@media (max-width: 800px) {
  .kpi-scroll-wrap { gap: 6px; }
  .kpi-scroll-wrap .kpi-nav { display: inline-flex; }
  .kpi-nav[disabled] { opacity: 0.32; pointer-events: none; }
}

.kpi-nav:hover { transform: translateY(-2px) scale(1.03); }

.login-box {
        background-color: #3a3a3a;
        padding: 1.0rem 3rem 4rem 2rem;
        border-radius: 80px 12px 0px 0px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        /* backdrop-filter: blur(10px); */
        width: -webkit-fill-available;
        /* max-width: 420px; */
        color: #fff;
        margin: 0px !important;
        position: absolute;
        bottom: 0;
    }

    .login-logo {
        display: none;
    }
.logo-mobile{display: flex;}
.login-header {
    text-align: center;
     margin-bottom: 0rem; 
}

    .login-h2 {
        margin-top: 0px;
        margin-bottom: -9px;
    }

.login-field {
    margin-bottom: 5px;
}


.login-input {
    width: 100%;
    padding: 0.6rem;
    border-radius: 6px;
    border: none;
    outline: none;
    font-size: 10px;
}

.wallpaper {
    position: absolute;
    /* top: 0; */
    /* right: 0; */
    width: -webkit-fill-available;
    height: 100%;
    background: url("/srs.png") no-repeat right center;
    background-size: cover !important;
    z-index: -2;
}

  .hide-on-mobile {
    display: none !important;
  }
 .fade-left-mobile {
  left: 33px !important;
width: 12% !important;
}

.fade-right-mobile {
  right: 33px !important;
 width: 12% !important;
}
}

.fade-border {
  position: relative;
  border-radius: 12px;
  overflow: hidden; /* esconde os cantos do pseudo-elemento */
}

.fade-border::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(
    to right,
    #ff8c4100,
    #7014f1 30%,
    #7014f1 70%,
    #ff8c4100
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: loadingBar 2s linear infinite;
  z-index: 10;
  opacity: 1;
}

.fade-border-stop::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 17px;
    height: 3px;
    width: 98%;
    background: linear-gradient(to right, #6969691c, #7014f1 30%, #7014f1 70%, #69696914);
    background-position: 100% 0;
    z-index: 10;
    opacity: 1;
}

@keyframes loadingBar {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

@keyframes fadeBorderIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Conteúdo acima da borda */
.fade-border > * {
  position: relative;
  z-index: 1;
}



:root {
  
  --main-font: 'Poppins', sans-serif;
--color-text-table-salas-thead:#335570;
--color-bg-table-salas-thead:#fffffe;
--color-bg-table-salas:#f9f9f9;
  --color-bg: #f4f4f4;
  --color-header: #fbfcfc;
   --color-reservation-header: rgba(255, 255, 255, 0.45);
  --color-card: #e0e0e0;
  --color-text: #000000;
  --color-muted: #555;

  --color-accent: #8e46f3;
  --color-accent-hover: #5712b9;
  --color-span: #666;
  --color-success: #44ff44;
  --color-error: #ff4b5c;
--fade-left: linear-gradient(to right, rgb(249 249 249), rgb(255 255 255 / 0%));
    --fade-right: linear-gradient(to left, rgb(249 249 249), rgba(255, 255, 255, 0));
  --header-color:  rgb(255 255 255 / 51%);
  --foto-user-avatar: #ddd;
  --color-form-group: #ffffff;
  --color-common-space-form-group: #9a9a9a;
  --color-btn:#000000;
  --color-btn--text:#ffffff;
   --color-btn-edit-houver:#4476ff;
   --color-modal-bg: #e5e5e5;
      --color-borde-tabela: #7014f1;
    --bg-color: #dce1e5;
  --color-bg-green: #44ff44;
  --color-bg-green-20: #2da32d;
 --color-bg-sidebar: #360778;
  --btn-warning-hover: #ff4b5c;
}
:root[data-theme="dark"] {
  --color-text-table-salas-thead:#fffffe;
--color-bg-table-salas-thead:#272727;
--color-bg-table-salas:#2b2b2b;
  --color-bg: #121212;
  --color-header: #2b2b2b;
   --color-reservation-header: rgba(100, 100, 100, 0.45);
  --color-card: #393939;
  --color-text: #ffffff;
  --color-muted: #999;

  --color-accent: #7014f1;
  --color-accent-hover: #5712b9;
  --color-span: #b1b1b1;
  --color-success: #44ff44;
  --color-error: #ff4b5c;
--fade-left: linear-gradient(to right, rgb(43 43 43), rgb(255 255 255 / 0%));
    --fade-right: linear-gradient(to left, rgb(43 43 43), rgba(255, 255, 255, 0));
 --header-color: rgb(0 0 0 / 51%);
 --foto-user-avatar: #606060;
 --color-muted: #555;
 --color-form-group:#9a9a9a;
 --color-common-space-form-group: #ffffff;
 --color-btn:#ffffff;
 --color-btn--text:#000000;
 --color-btn-edit-houver:#4476ff;
 --color-modal-bg: #555;
--color-borde-tabela: #555;
  --bg-color: #1c1c1c;
  --color-text: #f4f4f4;
  --color-bg-green: #2fb32f;
  --color-bg-green-20: #1e721e;
   --color-bg-sidebar: #360778;
    --btn-warning-hover: #ff4b5c;
}

/* ===== Tokens da página de Feedbacks ===== */
:root{
  --fx-surface:            #ffffff;         /* cartões / cabeçalhos */
  --fx-surface-2:          #f7f9fc;         /* barras / toolbars */
  --fx-border:             rgba(0,0,0,.12);
  --fx-thead-bg:           #f0f3f8;         /* fundo do thead */
  --fx-thead-text:         #0e1420;
  --fx-text:               var(--color-text);
  --fx-muted:              var(--color-span);
  --fx-chip-bg:            rgba(0,0,0,.04); /* tag/btn de ícone */
  --fx-chip-border:        rgba(0,0,0,.12);
  --fx-glass-blur:         3px;
  --fx-color-scheme:       light;           /* popup nativo do <select> */
  /* Severidades (tema claro) */
  --sev-low-color:   #0b6bcb; --sev-low-bg: #e8f2ff; --sev-low-br: #b8d7ff;
  --sev-med-color:   #9a6b00; --sev-med-bg: #fff4d6; --sev-med-br: #ffe6a3;
  --sev-high-color:  #9b2c2c; --sev-high-bg:#ffe2de; --sev-high-br:#ffcfc8;
  --sev-crit-color:  #8a1c1c; --sev-crit-bg:#ffd8d8; --sev-crit-br:#ffb3b3;
}

:root[data-theme="dark"]{
  --fx-surface:            #1e2a38;
  --fx-surface-2:          rgba(255,255,255,.04);
  --fx-border:             rgba(255,255,255,.12);
  --fx-thead-bg:           rgba(10,15,22,.9);
  --fx-thead-text:         #e7eef7;
  --fx-text:               var(--color-text);
  --fx-muted:              #a8b3c7;
  --fx-chip-bg:            rgba(255,255,255,.05);
  --fx-chip-border:        rgba(255,255,255,.18);
  --fx-glass-blur:         3px;
  --fx-color-scheme:       dark;
  /* Severidades (tema escuro) – tons suaves */
  --sev-low-color:   #bfe2ff; --sev-low-bg: #0a3a6a; --sev-low-br:#6fb9ff66;
  --sev-med-color:   #ffe9b8; --sev-med-bg: #5c4300; --sev-med-br:#ffd16666;
  --sev-high-color:  #ffc5be; --sev-high-bg:#5a1f1f; --sev-high-br:#f4978e66;
  --sev-crit-color:  #ffb8b8; --sev-crit-bg:#521616; --sev-crit-br:#ff6b6b66;
}


:root, [data-theme="dark"] {
  transition: background-color 0.5s ease, color 0.5s ease;
}


body,.device-form, .form-group, .form-control, .menu, .room-card, .reservation-card, .participant-card, .participant-info {
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.d-flex{
  display: flex;
}

.btn.open-door {
    display: flex;
    align-items: center;
    background-color: var(--color-btn);
    padding: 0.5rem 1.2rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-btn--text);
    font-weight: bold;
    font-size: 65%;
    border: 2px solid;
    transition: 0.3s 
ease;
    height: -webkit-fill-available;
}

.btn.open-door:hover {
  background-color: #218838;
}

.icon-rectangle-plus {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 15px;
  background-color: rgb(255 255 255);
  border-radius: 3px;
  margin-right: 2px;
  top: 3px;
}
.icon-rectangle {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 15px;
  background-color: rgb(255 255 255);
  border-radius: 3px;
  margin-right: 2px;
  top: 3px;
}
.icon-rectangle-plus::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 83%;
  transform: translate(-50%, -50%);
  color: #030303;
  font-size: 19px;
  font-weight: bold;
}

body {
  background-image: 
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.02) 10px,
      transparent 10px,
      transparent 20px
    );
  background-color: var(--bg-color); /* Você pode controlar via tema */
  color: var(--color-text);
  margin: 0;
  padding: 0;
  font-family: var(--main-font);
}

#reservation-background {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in-out;
}

.reservation-container{
position: relative; z-index: 1; padding: 0rem;

}

.title {
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem;
  margin: 0rem auto;
  
  color: var(--color-text);
  width: -webkit-fill-available;
  z-index: 1;

}

.device-form {
  max-width: 90%;
  margin: auto;
  border-radius: 18px;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}


.form-group {
    background: var(--color-bg-table-salas);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    padding: 16px;
    margin: 10px;
}

.form-group-fixed {
    background: var(--color-bg-table-salas);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px 14px 0px 0px;
    padding: 7px;
    /* margin: 10px; */
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: -webkit-fill-available;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--color-btn);
}

.form-control {
  width: -webkit-fill-available;
  padding: 0.6rem;
  border-radius: 10px;
  border: 2px solid var(--color-accent);
  background: #f9f9f9;
  font-size: smaller;
  margin: 9px;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 5px var(--color-accent-hover);
}

.form-actions {
  text-align: center;
}

.btn.submit {
  background-color: var(--color-accent);
  color: white;
  font-weight: bold;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  margin-top: 6px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.btn.submit:hover {
  background-color:var(--color-accent-hover);
}

.menu {
display: flex !important;
    gap: 0.2rem;
    margin-bottom: 2rem;
    background: var(--color-header);
    padding-bottom: 10px;
    border-radius: 0px 0px 23px 23px;
    z-index: 4;
    position: absolute;
    width: -webkit-fill-available;
    justify-content: center !important;
    align-items: baseline !important;
}

.menu-btn {
  border-radius: 12px;
  padding: 0.6rem 0.5rem;
  font-size: 73%;
  color: var(--color-text);
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  display: flex;
    align-items: baseline;
}

.menu-btn-home {
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  font-size: 100%;
  color: #000000;
  background: #fffffffa;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid #327df4;
}
.menu-btn-home:hover {
  background: var(--color-accent);
  color: #fff;
}

.menu-btn-destaque {
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  color: #000000;
  background: #fffffffa;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid #327df4;
}
.menu-btn-destaque:hover {
  background: var(--color-accent);
  color: #fff;
}

.menu-btn-destaque-new {
   border-radius: 12px;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;

  /* Fundo interno (ex: branco) */
  background: #fffffffa;

  /* Borda degradê */
  border: 3px solid transparent;
  background-image: linear-gradient(#fffffffa, #fffffffa), 
                    linear-gradient(90deg, #00f, #0ff, #0f0, #ff0, #f00);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.menu-btn-destaque-new:hover {
  background: var(--color-accent);
  color: #fff;
}


.menu-btn:hover {
  background: var(--color-accent);
  color: #fff;
}

.subtitle {
      display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    user-select: none;
    font-size: 1.3rem;
    color: var(--color-text);
    position: relative;
    width: -webkit-fill-available;
    z-index: 1;
    /* background: var(--color-header);*/
        margin: 1.5rem 17px 0rem 17px;
}



.subtitle i {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.subtitle.collapsed i {
  transform: rotate(-90deg);
}


.room-card {
    font-size: 23px;
    text-align: center;
    border-radius: 12px;
    color: var(--color-text);
    padding: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px #00000055;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-card);
    height: 12em;
    width: 446px;
    cursor: pointer;
    transition: transform 0.2s 
ease, box-shadow 0.2s 
ease;
    max-width: 446px;
}

.room-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.room-card-link {
  text-decoration: none;
  color: inherit;
}

.room-header {
  background-color: var(--header-color);
  backdrop-filter: blur(6px);
  
  padding: 0.5rem;
  border-radius: 8px;
  color: var(--color-text);
}

.room-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

.btn {
  padding: 0.4rem 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: bold;
  font-size: 100%;
  border: none;
  transition: 0.3s ease;
  background-color: var(--color-accent);
  margin: 5px;
}

.btn:hover {
   background-color: var(--color-accent-hover)
}

.edit {
    background: var(--color-btn);
    display: flex
;
    align-items: center;
    color: var(--color-btn--text);
    font-size: 100%;

}

.edit:hover {
  background: var(--color-btn-edit-houver);
  color: var(--color-btn--text);
}

.btn-success {
    background: var(--color-btn);
    display: flex
;
    align-items: center;
    color: var(--color-btn--text);
    font-size: 100%;

}

.btn-success:hover {
  background: var(--color-btn-edit-houver);
  color: var(--color-btn--text);
}

.btn-warning {
    background-color: var(--color-btn) !important;
    display: flex
;
    align-items: center;
    color: var(--color-btn--text);
    font-size: 100%;

}

.btn-warning:hover {
   background-color: var(--btn-warning-hover) !important;
  color: var(--color-btn--text);
}


.edit_room {
    background: var(--color-btn);
    display: flex
;
    align-items: center;
    color: var(--color-btn--text);
    font-size: 1rem;
  border: 2px solid;
}

.edit_room:hover {
  background: var(--color-btn-edit-houver);
  color: var(--color-btn--text);
}


.reservation {
  background: var(--color-bg-green);
  border-color: var(--color-success);
  color: var(--color-text);
}

.reservation:hover {
  background: var(--color-bg-green-20);
  color: var(--color-btn--text);
}

.devices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
}

.device-card {
  background: var(--color-card);
  border: 2px solid var(--color-accent); 
  border-radius: 20px;
  width: 260px;
  padding: 1rem;
  display: flex
;
  flex-direction: column;
  align-items: center;
  
}

.device-header {
  background: #fff;
  color: var(--color-text);
  font-weight: bold;
  text-align: center;
  border-radius: 12px;
  padding: 0.8rem;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1rem;
  box-shadow: inset 0 0 4px #ccc;
}

.device-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

@keyframes slowZoom {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.0);
  }
}

.room-card {
  position: relative;
  overflow: hidden;
}

.room-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.5s ease;
  animation: slowZoom 30s infinite alternate;
  background-image: var(--bg-url);
}

.room-card > * {
  position: relative;
  z-index: 1;
}
.reservation-card {
  position: relative;
  overflow: hidden;
  background: var(--color-card);
  /* border: 2px solid var(--color-accent); */
  border-radius: 20px;
  height: 20em;
  width: auto;
  padding: 22px;
  display: flex
;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px #00000075;
  justify-content: space-between;
}

/* Imagem de fundo animada */
.reservation-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 0;
  background-image: var(--bg-url);
  transition: transform 0.5s ease;
  animation: slowZoom 30s infinite alternate;
  
}

.reservation-card > * {
  position: relative;
  z-index: 1;
  
}

.reservation-header {
    background: var(--color-reservation-header);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 0.8rem;
    width: 100%;
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: justify;
    color: var(--color-text);
}
.reservation-actions {
    display: flex
;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    height: 44px;
}

.cancel {
  background: #8b0000;
  border-color: #ff4444;
  display: flex
;
    align-items: center;
}

.cancel:hover {
  background: #ff4444;
  color: #000;
}

.btn.delete {
  background-color: #ff4444;
  color: var(--color-text);
}
.btn.delete:hover {
  background-color: #ac2d2d;
  color: var(--color-btn--text);
}
.participant-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-card);
  border-radius: 20px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px #00000055;
  width: 100%;
  max-width: 600px;
  gap: 1rem;
  margin-left: 9px;
  margin-right: 3px;
}

.participant-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

}

.participant-img {
  position: relative;
  width: 125px;
  height: 125px;
  z-index: 1;
}


.participant-placeholder {
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}

.participant-info {
  background: rgb(107 107 107 / 40%);
  backdrop-filter: blur(4px);
  padding: 1rem;
  border-radius: 15px;
  flex-grow: 1;
  font-size: small;
  color: var(--color-text);
   white-space: nowrap;         /* impede quebra de linha */
  overflow: hidden;            /* oculta o que ultrapassa */
  text-overflow: ellipsis;     /* adiciona "..." no final */
}
/* PARTICIPANT MODAL STYLE */
#participantModal {
    padding: 7px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    font-family: 'Segoe UI', sans-serif;
    color: var(--color-text);
    position: fixed;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 87%;
    max-width: 800px;
    height: 96%;
    background: var(--color-modal-bg);
    border-radius: 8px;
    z-index: 999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-text);
    font-size: small;
}

.modal-controll{
  
padding: 15px 20px;
border-top: 1px solid #ddd;
display: flex;
background: var(--color-header);
position: fixed;
bottom: 0;
width: -webkit-fill-available;
z-index: 1;
flex-direction: column;
left: 0;
}
#participantModal h2 {
  font-size: large;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

#participantModal hr {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid #eee;
}

#participantModal input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-top: 5px;
  box-sizing: border-box;
}

#participantModal .participant-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 8px 0;
  font-size: 0.95rem;
}

#participantModal .participant-label input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}

#participantModal .submit {
  background-color: #7014f1;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 1rem;
}
.btn-close{
  background-color: var(--color-accent)
}
.btn-close:hover{
  background-color: var(--color-accent-hover)
}
#participantModal .fechar-btn {
  margin-top: 10px;
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

#participantModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
.participant-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e0eaff;
  color: #2b4a77;
  padding: 5px 10px;
  margin: 4px 4px 0 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.participant-tag button {
  background: none;
  border: none;
  color: #777;
  font-weight: bold;
  margin-left: 6px;
  cursor: pointer;
}
.device-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.device-icon {
  width: 60px;
  height: 78px;
  background: #ffffffb5;
  border-radius: 12px;
  display: flex
;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* box-shadow: inset 0 0 4px #ccc; */
  font-size: 40px;
}

.device-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.device-info {
  flex: 1;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  padding: 0.5rem;
  font-size: 0.9rem;
  box-shadow: inset 0 0 4px #ccc;
}

.device-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.device-status {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: bold;
}

.device-status.online {
  background-color: #44ff44;
  color: #0b6400;
}

.device-status.offline {
  background-color: #ff4b5c;
  color: #640000;
}


.room-scroll-wrapper {
  display: flex
;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem 2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
  height: 252px;
}

.room-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.room-card-scroll {
  position: relative;
  background: var(--color-card);
  border-radius: 20px;
  padding: 1rem;
  width: 200px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.room-card-scroll:hover {
  transform: scale(1.03);
}

.room-meta {
    position: absolute;
    left: 12px;
    right: 12px;
    /* bottom: 12px; */
    display: grid
;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    /* backdrop-filter: blur(10px); */
    background: var(--color-header);
    /* color: var(--btn-warning-hover); */
}

/* Rádio volta ao fluxo normal (sem posição absoluta) */
.room-meta input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0;
}

/* Nome não quebra e não “desce” para baixo do rádio */
.room-name {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* se o nome for muito longo, mostra reticências */
}

/* Garanta que o label seja posicionado relativamente */
.room-card-scroll {
  position: relative;
}

.room-info {
  margin-top: 0.5rem;
    background: var(--header-color);
    padding: 0.5rem;
    border-radius: 12px;
    font-weight: bold;
    /* box-shadow: inset 0 0 4px #ccc; */
    font-size: 23px;
    backdrop-filter: blur(10px);
    color: var(--color-header);
    
}


.scroll-button {
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 50%;
  width: 50px;
  height: 42px;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
}

.scroll-button:hover {
  background-color: var(--color-accent-hover);
  color: #fff;
}

.scroll-button.left {
  margin-right: 8px;
}

.scroll-button.right {
  margin-left: 8px;
}


.room-scroll-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-left, .fade-right {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 5;
  pointer-events: none; /* deixa clicar nos botões normalmente */
}

.fade-left {
  left: 50px;
  background: var(--fade-left)
}

.fade-right {
  right: 51px;
  background: var(--fade-right)
}

.btn.delete-room {
    background-color: var(--color-btn);
    padding: 0.5rem 1.2rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-btn--text);
    font-weight: bold;
    font-size: 1rem;
    border: 2px solid;
    transition: 0.3s ease;
    height: -webkit-fill-available;
    display: flex;
    padding: 1pc;
}

.btn.delete-room:hover {
  background-color: #c0392b;
}



.filter-form .form-control {
  padding: 0.5rem;
  font-size: 1rem;
}
.loading-emoji {
  font-size: 2rem;
  position: absolute;

  animation: spin 1s linear infinite;
  color: #555; /* opcional: muda a cor */
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-filter {
    
    color: #ffffff;
    background: var(--color-accent);

}

.btn-filter:hover {
    
  color: #3a2314;
  background: var(--color-accent-hover);

}



.user-info {
  top: 7px;
  z-index: 5;
  right: 11px;
 position: fixed;
  display: flex
;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-end;
  padding: 0rem;
  font-family: 'Poppins', sans-serif;
  flex-direction: row-reverse;
}
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background:var(--foto-user-avatar);
  font-size: 1.5rem;
  display: flex
;
  align-items: center;
  justify-content: center;
}

.user-name {
  font-weight: bold;
  font-size: 1rem;
  color: var(--color-text);
}


.sidebar {
    width: 252px;
    background-color: var(--color-bg-sidebar);
    color: #fff;
    padding: 0px 15px;
    position: fixed;
    top: 59px;
    bottom: 0;
    left: 0;
    transition: transform 0.3s 
ease;
    z-index: 3;
    overflow-y: auto;
    /* max-height: calc(100vh - 120px); */
    scrollbar-width: thin;
    scrollbar-color: #7014f1 transparent;
    border-top: solid 63px var(--color-bg-sidebar);
    height: -webkit-fill-available;
}

.sidebar-hidden {
  transform: translateX(-100%);
}

.sidebar-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.sidebar-links {
  list-style: none;
  padding: 0;
}

.sidebar-links li {
  margin-bottom: 12px;
}

.sidebar-links a {
  color: #ecf0f1;
  text-decoration: none;
  display: block;
  padding: 8px;
  border-radius: 5px;
}

.sidebar-links a:hover {
  background-color: #7014f1;
}

.main-content {
  margin-left: 220px;
  padding: 20px;
  flex: 1;
}

.menu-toggle-btn {
    background: var(--color-bg-sidebar);
    color: #fff;
    border: solid var(--color-btn);
    font-size: 1.4rem;
    padding: 8px 12px;
    border-radius: 8px;
    /* margin-left: 10px; */
    cursor: pointer;
    transition: background 0.3s 
ease;
    position: fixed;
    left: 21px;
    z-index: 2;
}



.menu-toggle-btn:hover {
  background: #7014f1;
}
.sidebar-hidden {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar {
  transition: transform 0.3s ease;
}
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--color-header);
  padding: 0rem;
  border-radius: 0; /* remove cantos arredondados */
  overflow: hidden; /* impede que elementos ultrapassem */
  z-index: 5;
}
.menu,
.title-wrapper {
  transition: background-color 0.4s ease, color 0.4s ease;
}

.submenu {
  list-style: none;
  padding-left: 20px;
  margin-top: 6px;
}

.submenu li a {
  color: #ecf0f1;
  font-size: 0.95rem;
  padding: 4px 8px;
  display: block;
  border-radius: 4px;
}

.submenu li a:hover {
  background-color: #5712b9;
}

.submenu li {
  margin-bottom: 6px;
}



.has-submenu {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-weight: bold;
}

.submenu-toggle {
  display: block;
  padding: 8px;
  border-radius: 5px;
  color: #ecf0f1;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.submenu-toggle:hover {
  background-color: #7014f1;
}

.btn-exit{
  border: none;
    background-color: transparent;
    width: -webkit-fill-available;
    list-style: none;
    font-family: var(--main-font);
    font-size: 17px;
    text-align: left;
}

.menu-btn.disabled {
    pointer-events: none;
    background: #1f0347;
    color: white;
    display: block;
}

.reservation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.banner{

  position: fixed;
    width: -webkit-fill-available;
    z-index: 4;
}


/* css config */
.settings-container {
  padding: 2rem;
  font-family: 'Poppins', sans-serif;
}

.page-title {
  text-align: center;
  margin-bottom: 2rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.setting-card {
  background: var(--color-card);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.setting-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.setting-value {
  color: var(--color-muted);
}

.btn-edit {
  margin-top: 0.5rem;
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-btn--text);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
}

.btn-primary, .btn-secondary {

  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary {
  background: var(--color-accent);
  color: white;
}

.btn-secondary {
  background: #ccc;
  color: #333;
      margin-left: 15px;
}


body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  z-index: 1;
}

.wallpaper {
  position: absolute;
  top: 0;
  right: 0;
  width: -webkit-fill-available;
  height: 100%;
  background: url("/srs.png") no-repeat right center;
  background-size: contain;
  z-index: -2;
}

.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgb(0 0 0 / 0%), #00000000 60%);
  z-index: 1;
}


p {
  color: var(--color-btn) !important;
}

#senha_gerada_label{
  color: black;
  background: #eee; padding: 10px; border-radius: 8px;
}

.modal-dialog-subgrupo{
  background: var(--color-modal-bg); padding: 2rem; border-radius: 8px; width: 100%; max-width: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.btn-success{
  color: var(--color-btn--text);
}


.btn-success:hover{
  background-color: #0b6400;
}

.btn-danger{
  color: var(--color-btn--text);
}

.btn-danger:hover{
  background-color: #c0392b;
}

.small-alert{
  background-color: var(--color-btn);
    color: var(--color-btn--text);
    padding: 6px;
    border-radius: 10px;
}

.modal-btn-cadastrar-participante{
text-align: center;
}
    
.modal-btn-close {
    text-align: center;
    color: var(--color-btn--text);
    background-color: var(--color-btn);
}



#participantsTable {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-card);
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-top: 0rem;
    border: solid 3px var(--color-modal-bg);
}

#participantsTable thead {
  background-color: var(--color-accent);
  color: var(--color-btn--text);
}

#participantsTable th, 
#participantsTable td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

#participantsTable tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.03);
}

#participantsTable tbody tr:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-btn--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#participantsTable img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

#participantsTable .btn {
  padding: 4px 10px;
  font-size: 0.9rem;
  margin-right: 4px;
  margin-top: 5px;
}



#reservationsTable {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  margin-top: 1rem;
}

#reservationsTable thead {
  background-color: var(--color-accent);
  color: var(--color-btn--text);
}

#reservationsTable th, 
#reservationsTable td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

#reservationsTable tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.03);
}

#reservationsTable tbody tr:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-btn--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#reservationsTable img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

#reservationsTable .btn {
  padding: 4px 10px;
  font-size: 0.9rem;
  margin-right: 4px;
}
.reservationsTableAction{
    display: flex;
}

#toggleViewBtn{
  background-color: var(--color-accent);
  color: var(--color-text);
}
  
.face-viewfinder {
position: absolute;
    width: 85px;
    height: 91px;
    background: none;
    z-index: 5;
    top: 34px;
    right: 0;
}

.face {
    width: 32px;
    height: 34px;
    background: #11bd07;
    border-radius: 50%;
    position: absolute;
    top: 43px;
    left: 41px;
}

.eye {
width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 11px;
}

.eye.left {
    left: 6px;
}

.eye.right {
right: 7px;
}

.mouth {
width: 19px;
    height: 5px;
    border-bottom: 4px solid white;
    border-radius: 0 0 30px 30px;
    position: absolute;
    bottom: 4px;
    left: 6px;
}

.corner {
    width: 12px;
    height: 12px;
    border: 4px solid #10ff00;
    position: absolute;
}

.corner.top-left {
    top: 37px;
    left: 33px;
    border-right: none;
    border-bottom: none;
}

.corner.top-right {
    top: 37px;
    right: 6px;
    border-left: none;
    border-bottom: none;
}

.corner.bottom-left {
  bottom: 6px;
    left: 34px;
    border-right: none;
    border-top: none;
}

.corner.bottom-right {
  bottom: 6px;
    right: 7px;
    border-left: none;
    border-top: none;
}




.participant-card.participant-accessed {
  border: 2px solid #ccc;
  border-color: #4caf50; /* borda verde */
  
}


.reservation-section {
  margin-bottom: 3rem;
  width: -webkit-fill-available;
}

.section-title {
  margin: 0;
  padding-left: 1rem;
  font-size: 1.6rem;
  border-bottom: 2px solid #ccc;
  margin-bottom: 1rem;
  color: var(--color-text);
  
}

.reservation-group {
  margin-bottom: 2rem;
  
}

.group-title {
  margin-left: 1rem;
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.reservation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}



.reservation-card:hover {
  transform: scale(1.03);
}




.usuarios-index-btns{
  text-align: center; margin-bottom: 3%;

}


.srs-solid{
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  font-size: large;
  scale: 2;
}


/* tabela */
.table-salas td {
  min-height: 100px;
}

.table-salas {
    width: -webkit-fill-available;
    /* max-width: -webkit-fill-available; */
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-bg-table-salas);
    color: var(--color-text);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.9rem;
    margin-top: 1rem;
    border: solid 3px var(--color-borde-tabela);
}

.table-salas thead {
background-color: var(--color-bg-table-salas-thead);
    color: var(--color-text-table-salas-thead);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.table-salas th, .table-salas td {
      padding: 12px 7px;
  text-align: left;
  border-bottom: 1px solid #333;
}


.table-salas tbody tr:hover {
  background-color: var(--color-accent-hover);
  color: white;
}

.table-salas .btn {
    font-size: 1.2rem;
    padding: 4px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0px;
    border-radius: 4px;
    width: -webkit-fill-available; 
    text-align: left;
    justify-content: flex-start;
}

.table-responsive {
  overflow-x: auto;
}

.btn-dash{



    width: auto !important;


}
/*status de chamados dashboard*/

/* app/assets/stylesheets/dashboard.css */

/* Cores para status */
.status-andamento { color: #ffc107; }
.status-concluido { color: #28a745; }
.status-pendente { color: #dc3545; }
.status-desconhecido { color: #6c757d; }

/* Estilo extra só para dashboard */
.dashboard-table th {
  background: #333;
  color: white;
}

.dashboard-section {
  margin-top: 2rem;
  padding: 1rem;
  background: #1a1a1a;
  border-radius: 8px;
}
/*status de chamados prioridade dashboard*/
.prioridade-muito-baixo { color: #6c757d; }   /* cinza */
.prioridade-baixo       { color: #17a2b8; }   /* azul claro */
.prioridade-médio       { color: #ffc107; }   /* amarelo */
.prioridade-alto        { color: #fd7e14; }   /* laranja */
.prioridade-crítico     { color: #dc3545; }   /* vermelho */
.rounded-circle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
/* show manutenção programada*/
.show-manutencao {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f8f9fa;
  margin-bottom: 2rem;
}

.field-row {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.image-thumb {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.overlay-eye {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 8px;
  background-color: rgba(0,0,0,0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}
.overlay-eye:hover {
  background-color: rgba(0,0,0,0.6);
}
.image-thumb:hover .overlay-eye {
  opacity: 1;
}

#modal-image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#modal-image-viewer img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  border-radius: 12px;
  transition: transform 0.2s ease;
  transform-origin: center center;
}
#modal-image-viewer .close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

/* dot pulsante de atualização */
.dot-ativo {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #28a745;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(3); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}
.linha-atualizada {
  background-color: #165534   !important;
  border-left: 4px solid #28a745;
  animation: fadeHighlight 0.6s ease-in-out;
  color: var(--color-btn--text);
}
.linha-atualizada:hover {
  background-color: var(--color-accent-hover) !important; 
  color: var(--color-btn--text);
}

@keyframes fadeHighlight {
  from { background-color: #d4f8e8; }
  to { background-color: #e3fcef; }
}

.icon-stack {
  position: relative;
  display: inline-block;
}

.icon-stack .fa-eye {
  font-size: 1rem;
}

.icon-stack .check-overlay {
position: absolute;
    bottom: -0.1em;
    right: -0.3em;
    font-size: 1.0rem;
    color: #28a745;
    /* background: white; */
    border-radius: 50%;

}


.image-thumb {
  display: inline-block;
  width: 23%;
  height: 23%;
  border-radius: 8px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* feedback */

.feedback-fab {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  position: fixed;
  bottom: 26px;
  right: 25px;
  border: none;

  /* 🔑 estado inicial e animação suave */
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), 
              box-shadow .18s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  backface-visibility: hidden;
  z-index: 10;
}

.feedback-fab:hover {
  /* leve subida + scale suave */
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
}

/* toque/click, dá uma “afundadinha” */
.feedback-fab:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}

/* acessibilidade: foco visível no teclado */
.feedback-fab:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

/* respeitar usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  .feedback-fab { transition: none; }
}


.feedback-fab-icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
  /* remova se seu SVG usar fill="currentColor" */
  filter: brightness(0) invert(1);
}


.feedback-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  z-index: 10000;
}
.feedback-modal{
  background: var(--bg-main, #1e2a38);
  color: #fff;
  width: min(560px, 92%);
  margin: 8vh auto 0;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  position: relative;
}
.feedback-modal h3{ margin-top: 0; }
.feedback-modal-close{
  position: absolute;
  right: 12px; top: 10px;
  background: transparent;
  color: #fff;
  border: none; font-size: 24px; cursor: pointer;
}

/* modal do avatar*/

/* ===== Modal básico (puro) ===== */
.pmodal { position:fixed; inset:0; display:none; }
.pmodal.is-open { display:block;  position: absolute;}
.pmodal__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index: 1;}
.pmodal__dialog {   position: fixed;
    z-index: 8;
    /* margin: 12vh auto; */
    width: min(92vw, 399px);
    background: var(--color-bg);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    display: flex
;
    flex-direction: column;
    overflow: hidden;
    right: 0;
    top: 4rem;
    color: var(--color-btn);
    border: solid 2px;
}
.pmodal__header, .pmodal__footer { padding:12px 16px; display:flex; align-items:center; gap:8px; }
.pmodal__header { justify-content:space-between; border-bottom:1px solid #333; }
.pmodal__footer { justify-content:space-between; border-top:1px solid #333; }

.pmodal__body   { padding:14px 16px; display:flex; flex-direction:column; gap:14px; }
.pmodal__divider{ height:1px; border:none; background:#333; }

/* Perfil */
.profile-row { display:flex; gap:14px; align-items:center; }
.profile-avatar {
  width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--foto-user-avatar);
    display: grid
;
    place-items: center;
    font-size: 46px;
    color: #777;
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-info .muted { color: var(--color-muted);
    font-size: .92rem; }

/* Zoom */
.zoom-title { font-weight:600; margin-bottom:6px; }
.zoom-options { display:flex; flex-wrap:wrap; gap:8px; }
.btn-chip {
  background:#2a2a2a; color:#f0f0f0; border:1px solid #3a3a3a; padding:.45rem .7rem; border-radius:999px; cursor:pointer;
}
.btn-chip.active { background:#3f9142; border-color:#3f9142; }

/* Botões rodapé */
.btn-danger  { background:#d9363e; border:0; color:#fff; padding:.55rem .85rem; border-radius:.45rem; cursor:pointer; }
.btn-ghost { background:transparent; border:1px solid #aaa; color:#ddd; padding:.55rem .85rem; border-radius:.45rem; cursor:pointer; }
.pmodal__close { background: #00000091; border:1px solid #aaa; color:#ddd; padding:.55rem .85rem; border-radius:.45rem; cursor:pointer; }
.pmodal__close:hover { background: #7014f1;
    color: black;}
body.noscroll { overflow:hidden; }

/* Cursor no avatar */
.user-avatar { cursor:pointer; }

/******/

/* colapso dashboard */

.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 1rem;
  margin-top: 10px;
  overflow: visible; /* sem scroll em desktop */
  padding: 0 6px;
}
.kpi-card { background: var(--card-bg, var(--color-btn--text)); border:1px solid #2a2a2a; padding:1rem; border-radius:16px; box-shadow: 0 6px 16px rgba(0,0,0,.2); display:flex; align-items:center; gap:.75rem; }
.kpi-icon i { font-size: 1.6rem; }
.kpi-label { opacity:.65; font-size:.9rem; }
.kpi-value { font-weight:700; font-size:1.6rem; line-height:1.2; }
.kpi-subtitle {
    font-size: .8rem;
    opacity: .6;
    margin-top: .25rem;

}

.kpi-card {
  position: relative;
  overflow: hidden;
}

/* svg fica por trás do conteúdo */
.kpi-card .kpi-sparkline {
  position: absolute;
  inset: 0;           /* top/right/bottom/left: 0 */
  z-index: 1;
  pointer-events: none;
}

/* conteúdo acima do svg */
.kpi-card .kpi-icon,
.kpi-card .kpi-meta {
  position: relative;
  z-index: 2;
}

/* aparência do gráfico: usa a cor atual do card */
.kpi-sparkline-area {
  fill: currentColor;
  opacity: 0.08;
}

.kpi-sparkline-line {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.10;
}

/* onde já estão seus estilos */
.kpi-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex; /* garante área clicável inteira */
}
.kpi-card--link:hover {
  /*transform: translateY(-1px);*/
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.btn-icon i {
  margin-right: 8px; /* ou o valor que quiser */
}
/******/

/* ===== Tokens ===== */
:root{
  --trk-surface: var(--fx-surface, #fff);
  --trk-border:  var(--fx-border, rgba(0,0,0,.08));
  --trk-text:    var(--fx-text, #0e1420);
  --trk-muted:   var(--fx-muted, #7a8aa0);

  --trk-req:   #6f42c1;  /* solicitada */
  --trk-prog:  #0d6efd;  /* em andamento */
  --trk-done:  #198754;  /* finalizada */
  --trk-mutedc:#6c757d;  /* ignorado */
}
:root[data-theme="dark"]{
  --trk-surface: #1a2431;
  --trk-border:  rgba(255,255,255,.10);
  --trk-text:    #e7eef7;
  --trk-muted:   #9fb2c9;

  --trk-req:   #b992ff;
  --trk-prog:  #9ec5fe;
  --trk-done:  #75b798;
  --trk-mutedc:#adb5bd;
}

/* ===== Container ===== */
.trk {
    display: grid
;
    gap: 12px;
    background: var(--color-card);
    border: 1px solid var(--trk-border);
    border-radius: 14px;
    padding: 14px;
}

.trk-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.trk-title{ margin:0; font-size:1.1rem; display:flex; gap:8px; align-items:center; color:var(--trk-text); }
.trk-sub{ margin:.2rem 0 0; color:var(--trk-muted); font-size:.92rem; }

.trk-kpis{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.kpi{ display:flex; flex-direction:column; gap:4px; }
.kpi-label{ color:var(--trk-muted); font-size:.8rem; }
.kpi-value{ font-weight:800; font-size:1.05rem; color:var(--trk-text); }
.kpi-chip{
  display:inline-flex; gap:6px; align-items:center;
  padding:.22rem .55rem; border-radius:999px; font-weight:700; font-size:.82rem;
  border:1px solid var(--trk-border); background: transparent; color: var(--trk-text);
}
.kpi-chip small{ font-weight:600; color:var(--trk-muted); }

/* Cores */
.trk--requested{ border-color: color-mix(in srgb, var(--trk-req) 40%, transparent); color: var(--trk-req); }
.trk--progress { border-color: color-mix(in srgb, var(--trk-prog) 40%, transparent); color: var(--trk-prog); }
.trk--done     { border-color: color-mix(in srgb, var(--trk-done) 40%, transparent); color: var(--trk-done); }
.trk--muted    { border-color: color-mix(in srgb, var(--trk-mutedc) 40%, transparent); color: var(--trk-mutedc); }

/* ===== Barra segmentada ===== */
/* ===== Barra segmentada ===== */
.trk-bar {
    position: relative;
    display: flex;
    width: 100%;
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--trk-border);
    background: 
 color-mix(in srgb, var(--trk-text) 6%, transparent);
}

/* Começa em 0 (somente quando NÃO montado) */
.trk-seg{
  display:block;
  height:100%;
  width: 0;                 /* <- começa zerado */
  flex: 0 0 auto;           /* garante que width seja respeitado no flex */
  transition: width .55s ease;
  position: relative;
}
.trk-seg:hover{ filter: brightness(1.05); }
.trk-seg .trk-seg-label{ position:absolute; inset:0; opacity:0; }

/* Quando a barra estiver "montada", use a largura alvo */
.trk-bar.mounted .trk-seg{
  width: var(--seg-w);      /* <- anima até aqui */
}

/* Cores dos segmentos */
.trk-seg.trk--requested{ background: color-mix(in srgb, var(--trk-req) 55%, transparent); }
.trk-seg.trk--progress { background: color-mix(in srgb, var(--trk-prog) 55%, transparent); }
.trk-seg.trk--done     { background: color-mix(in srgb, var(--trk-done) 55%, transparent); }

/* Placeholder quando tudo = 0 */
.trk-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--trk-muted); font-size:.85rem;
}


/* ===== Legenda ===== */
.trk-legend{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.trk-leg{
  display:inline-flex; gap:8px; align-items:center;
  padding:.28rem .6rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--trk-border); color:var(--trk-text);
}
.trk-leg .trk-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--trk-text); opacity:.85;
}
.trk-leg.trk--requested .trk-dot{ background: var(--trk-req); }
.trk-leg.trk--progress  .trk-dot{ background: var(--trk-prog); }
.trk-leg.trk--done      .trk-dot{ background: var(--trk-done); }
.trk-leg.trk--muted     .trk-dot{ background: var(--trk-mutedc); }

/* infobox */

.infobox {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: 
 color-mix(in oklab, var(--bg-elev, #7014f1) 75%, #4da3ff 25%);
    border: 1px solid
 color-mix(in oklab, #4da3ff 60%, #000 10%);
    color: white;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    margin-top: 10px;
    margin-bottom: 10px;
}
.infobox__icon{
  font-size:1.25rem; line-height:1; margin-top:.15rem;
}
.infobox__title{
  display:block; font-weight:600; margin-bottom:.15rem;
}
.infobox__text{
  font-size:.95rem; opacity:.95;
}

/* Variante neutra, caso prefira: troque "infobox--info" por uma delas */
.infobox--success{
  background: color-mix(in oklab, var(--bg-elev, #fff) 75%, #17c964 25%);
  border-color: color-mix(in oklab, #17c964 60%, #000 10%);
  color:#063b25;
}
.infobox--warning{
  background: color-mix(in oklab, var(--bg-elev, #fff) 75%, #f5a524 25%);
  border-color: color-mix(in oklab, #f5a524 60%, #000 10%);
  color:#4a2e00;
}
.infobox--danger{
  background: color-mix(in oklab, var(--bg-elev, #fff) 75%, #f31260 25%);
  border-color: color-mix(in oklab, #f31260 60%, #000 10%);
  color:#4a0b1b;
}

/* Dark mode opcional, se você já usa --bg-elev/--fg */
@media (prefers-color-scheme: dark){
  .infobox{ box-shadow: 0 6px 18px rgba(0,0,0,.2); }
}

/* garante que padding/border não aumentem largura total */
*, *::before, *::after { box-sizing: border-box; }

/* wrapper do formulário: limita e mantém conteúdo dentro */
.device-form { width: 100%; max-width: 100%; position: relative; }

/* suas linhas "full-width" */
.full-width { flex: 1 1 100% !important; width: 100% !important; }

/* grupo que contém select + qty + botão — permite quebra se for pequeno */
.full-width .form-group > div[style*="display:flex"], 
.full-width > .form-group > div[style*="display:flex"] {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;          /* permite quebrar linha para caber */
}

/* evita que selects/inputs forcem overflow */
.form-control,
.device-form select,
.device-form input[type="text"],
.device-form input[type="number"],
.device-form .item-row input[type="text"] {
  max-width: 100%;
  min-width: 0;             /* importante para flex items */
}

/* item row: permite quebra interna quando a tela for estreita */
.item-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* forçar largura dos elementos de quantidade e botões sem extrapolar */
.item-row .form-control[type="number"] { width: 110px; min-width: 90px; }
.item-row input[disabled], .item-row input[readonly] { max-width: 100%; }

/* evita que o botão cause overflow */
.btn { white-space: nowrap; }

/* quando overflow acontecer, mostra scroll horizontal apenas no bloco */
#room-items { width: 100%; overflow: auto; }

/* segurança: evita que qualquer pseudo-elemento cubra campos */
.device-form .form-group::before, .device-form .form-group::after { pointer-events: none; }


/* ======= CSS do colapso suave ======= */
#filtros-salas {
  overflow: hidden;
  max-height: 9999px;        /* estado expandido padrão */
  transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, padding 220ms ease;
  opacity: 1;
  padding: .6rem 0;          /* ajuste visual */
  will-change: max-height, opacity;
  
}

/* estado colapsado */
#filtros-salas.collapsed {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  
}

/* estilo do botão e chevron */
#filtro-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    border: none;
    background: var(--color-accent-hover);
    padding: .35rem .6rem;
    font-weight: 600;
    border-radius: 6px 6px 6px 6px;
    margin: 10px 10px 0px 10px;
}

#filtro-toggle:hover {
background: var(--color-accent);
}

#filtro-toggle:focus { outline: 2px solid var(--color-accent); border-radius:6px; }

/* chevron que gira */
.filtro-chevron {
  display: inline-block;
  transition: transform 240ms ease;
  transform-origin: center;
  margin-left: .4rem;
}
#filtros-salas.collapsed + .foco-fake{} /* fallback no caso de ordem diferente */

/* botão com estado aria-expanded="false" (girado) */
#filtro-toggle[aria-expanded="false"] .filtro-chevron {
  transform: rotate(-180deg);
  border-radius: 6px 6px 0px 0px !important;
}

/* reduz animação se usuário preferir reduzida */
@media (prefers-reduced-motion: reduce) {
  #filtros-salas { transition: none; }
  .filtro-chevron { transition: none; }
}


/* css setings */

.tabs-nav {
    display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem;
    background: var(--color-header); padding:.5rem; border-radius:12px;
  }
  .tab-link{
    appearance:none; border:0; background:transparent; color:var(--color-text,#eaeaea);
    padding:.6rem .9rem; border-radius:10px; cursor:pointer; display:flex; gap:.5rem; align-items:center;
    transition:all .2s ease;
  }
  .tab-link:hover{ background: rgba(255,255,255,.06); }
  .tab-link.active{
    background: var(--color-accent, #3b82f6); color:#fff; box-shadow: 0 3px 12px rgba(0,0,0,.2);
  }
  .tab-panel[hidden]{ display:none !important; }
  .tab-panel {
    background: var(--color-bg-table-salas);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    padding: 16px;

}
  .settings-actions{ position: sticky; bottom: 0; background: transparent; padding-top: .75rem; }


/* CSS NOVO SHOW */
/* ===== Cards / sections genéricos (usam as variáveis do tema) ===== */

.chamado-section {
  margin-bottom: 2rem;
}

.section-box {
  border: 1px solid var(--fx-border);
  border-radius: 8px;
  margin-bottom: 2rem;
  background-color: var(--fx-surface);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--fx-border);
  background: var(--fx-surface-2);
}

.section-header h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fx-text);
}

.section-header h5 i {
  margin-right: 0.75rem;
  color: var(--fx-muted);
}

.section-body {
  padding: 1.5rem;
  color: var(--fx-text);
}

/* ===== Grid dos campos do chamado ===== */

.chamado-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.chamado-field {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--fx-border);
}

.chamado-field .label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fx-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chamado-field .value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fx-text);
}



@media (max-width: 1024px) {
  .chamado-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .chamado-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Fotos ===== */

.fotos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.image-thumb {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid var(--fx-border);
  overflow: hidden;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.overlay-eye {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.overlay-eye i {
  font-size: 1.8rem;
}

.image-thumb:hover .overlay-eye {
  opacity: 1;
}

/* Modal de zoom da foto */

#modal-image-viewer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;
}

#modal-image-viewer img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

#modal-image-viewer .close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

/* ===== Anexos ===== */

.lista-anexos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.anexo-item {
  display: flex;
  align-items: center;
  background-color: var(--color-accent);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  color: var(--color-btn--text);
  justify-content: space-between;
  margin-bottom: 10px;
}

.anexo-link {
  color: var(--color-btn--text);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.anexo-link i {
  font-size: 1rem;
}

.anexo-remover {
  background: none;
  border: none;
  color: var(--color-btn--text);
  font-size: 1.1rem;
  padding-left: 1rem;
  cursor: pointer;
}

.anexo-remover i {
  color: #f88;
}