html {
  /* 1rem = 16px (Tamanho Original - 100%) */
  font-size: 16px;
}

/* TELA MÉDIA (Notebook/Tablet) - Redução de 25% */
@media (max-width: 1366px) {
  html {
    /* 1rem passa a valer 12px (75% de 16px) */
    font-size: 12px;
  }
}
.hint-panel {
  display: none;
}

/* TELA PEQUENA (Mobile) - Redução de +25% sobre a média */
@media (max-width: 768px) {
  html {
    /* 1rem passa a valer 9px (75% de 12px) */
    font-size: 9px;
  }
}

body {
  margin: 0;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  /* Garante que o texto base tenha tamanho legível se não especificado */
  font-size: 1rem; 
}

* {
  box-sizing: border-box;
}

/* ===== LAYOUT PRINCIPAL ===== */

.app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ===== SIDEBAR ===== */

.editor {
  z-index: 1000;
  pointer-events: auto;
  position:relative;
  width: 31.25rem; /* 500px */
  padding: 1.875rem 1.875rem 1.25rem; /* 30px 30px 20px */
  background: white;
  box-shadow: 0.25rem 0 1.25rem rgba(0,0,0,0.08); /* 4px 0 20px */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: visible;
}

.editor h3 {
  margin-top: 1.375rem; /* 22px */
  margin-bottom: 0.5rem; /* 8px */
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111;
}

.editor p {
  margin: 0.4375rem 0 0.4375rem; /* 7px */
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== BOTÕES ===== */

.outside-decal-colors button,
.inside-decal-colors button {
  width: 1.625rem; /* 26px */
  height: 1.625rem; /* 26px */
  border-radius: 0.25rem; /* 4px */
  padding: 0;
  border: 1px solid #999; /* Bordas de 1px mantive fixas para nitidez */
}

/* ===== INPUT COLOR ===== */

input[type="color"] {
  width: 100%;
  height: 2.25rem; /* 36px */
  border: none;
  padding: 0;
  margin-bottom: 0.5rem; /* 8px */
}

/* ===== DIVISOR ===== */

hr {
  margin: 1rem 0; /* 16px */
  border: none;
  border-top: 1px solid #ccc;
}

/* ===== VIEWER ===== */

.viewer-area {
  flex: 1;
  position: relative;
  background: radial-gradient(circle at center, #f2f2f2, #bdbdbd);
  overflow: hidden;
}

/* model-viewer */
model-viewer {
  width: 100%;
  height: 100%;
}

/* garante que o picker receba clique */
.iro__wheel,
.iro__slider,
.iro__marker {
  pointer-events: auto !important;
}


/* texto embaixo */
.viewer-hint{
  position: absolute;
  bottom: 1.25rem; /* 20px */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.viewer-container{
  pointer-events: none;
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(thumbs/ditalia-thumb-ditalia-bg.png);
  background-size: cover;
  background-position: center;
  background-color: #00000002;
}

.viewer-container model-viewer,.viewer-container .print-btn, .viewer-container .viewer-hint{
  pointer-events: auto;
}

.color-palette {
  display: flex;             
  flex-wrap: nowrap;         
  width: 100%;              
  gap: 0.1875rem;            
  margin: 0;
  
  overflow: hidden; 
}

.color-swatch {

  flex: 0 1 auto;
  

  width: 1.5625rem;          
  max-width: 1.5625rem;      
  

  aspect-ratio: 1 / 1;       
  height: auto;              
  
  border-radius: 50%;
  cursor: pointer;
  
  border: 0.125rem solid #000000; 
  transition: 0.15s;
}

.color-swatch:hover {
  transform: scale(1.1); 
  border-color: #000;
  z-index: 2;
}

.color-swatch.selected {
  outline: 0.1875rem solid #000;
  outline-offset: 0.125rem;
  z-index: 1;
}

.selected-color {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 1rem; 
  font-size: 0.8125rem; 
}
.color-picker {
  width: 110px;
  max-width: 100%;
  margin: 0 auto;
}



.iro__slider {
  margin-top: 6px !important;
}

@media (max-width: 600px) {
  .color-picker {
    width: 90px;
  }
}

.color-preview {
  width: 3rem; 
  height: 3rem; 
  border-radius: 50%;
  border: 0.125rem solid #333; 
  background: #222;
}

.texture-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.625rem;
  margin-bottom: 1rem; 
}

.texture-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 0.625rem; 
  cursor: pointer;
  background: #453a3a;
  padding: 0.375rem; 
  border: 0.125rem solid #444;
  transition: 0.15s;
}

.texture-grid img:hover {
  border-color: #fff;
  transform: scale(1.05);
}

.texture-grid img.selected {
  border-color: #000;
  box-shadow: 0 0 0 0.125rem #000 inset; 
}

.texture-btn {
  width: 2.75rem; /* 44px */
  height: 2.75rem; /* 44px */
  border-radius: 0.375rem; /* 6px */
  border: 0.125rem solid #ccc; /* 2px */
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

.texture-btn.selected {
  border: 0.1875rem solid #000; /* 3px */
}

.handle-colors button {
  padding: 0.5rem 0.875rem; /* 8px 14px */
  border-radius: 1.25rem; /* 20px */
  border: 1px solid #aaa;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 0.75rem; /* 12px */
  transition: 0.15s;
}

.handle-colors button:hover {
  background: #ddd;
}

/* ===== TABS ===== */

.tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem; /* 10px */
  margin: 1.125rem 0; /* 18px */
}

.tab-btn {
  flex: 1;
  padding: 0.625rem; /* 10px */
  border: none;
  background: #11406F; /* Corrigido sintaxe inválida do original */
  cursor: pointer;
  font-weight: bold;
  border-radius: 0.5rem; /* 8px */
  font-size: 1.125rem; /* 18px */
  color: #fff;
}

.tab-btn.active {
  background: #0054b1;
  color: #fff;
}

/* ===== CONTEÚDO DAS ABAS ===== */

.tab-content {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.tab-content.active {
  visibility: visible;
  position: relative;
  pointer-events: auto;
}



.picker-wrapper {
  overflow:visible;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0.625rem 0 1.25rem; /* 10px 0 20px */
}

.picker-wrapper > div {
  max-width: 34.375rem; /* 550px - Corrigido espaço extra */
  width: 100%;
  margin: 0.625rem auto; /* 10px */
  display: flex;
  justify-content: center;
  overflow: visible;
}

.iro__colorPicker {
  border-radius: 1rem; /* 16px */
  border: 1.25rem 0; /* 20px */
  pointer-events: auto;
}

.iro__wheel,
.iro__slider,
iro__marker {
  pointer-events: auto;
}

/* ===== TOGGLE BUTTON ===== */
.toggle-panel-btn {
  pointer-events: auto !important;
  position: fixed;
  top: 2rem; /* 15px */
  left: 2rem; /* 15px */
  z-index: 999;
  background: #11406F;
  color: #ffffff;
  border: none;
  padding: 0.625rem 0.875rem; /* 10px 14px */
  border-radius: 0.625rem; /* 10px */
  font-size: 2rem; /* 20px */
  cursor: pointer;
  display: none;
}

/* ===== LAYOUT MOBILE ESPECÍFICO (COMPORTAMENTO) ===== */
/* Nota: Este media query controla a mudança de layout da barra lateral */

@media (max-width: 900px) {

  .editor {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 85%;
    max-width: 21.25rem; /* 340px */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 998;
  }

  .editor.open {
    transform: translateX(0);
  }

  .toggle-panel-btn {
    display: block;
  }

  .viewer-area {
    width: 100%;
  }
  
  .hint-panel {
    display: block;          /* Faz aparecer apenas no mobile */
    position: fixed;         /* Fixa na tela igual ao botão */
    
    /* Posicionamento ao lado do botão */
    top: 2.5rem;             /* Alinha verticalmente com o botão */
    left: 6rem;              /* Empurra para a direita do botão (2rem do botão + tamanho dele) */
    
    z-index: 999;            /* Garante que fique sobre o visualizador 3D */
    pointer-events: none;    /* Permite clicar através do texto se necessário */
    
    /* Estilo do Texto */
    color: #11406F;          /* Mesma cor azul do botão para consistência */
    font-weight: 700;
    font-size: 0.9rem;       /* Tamanho legível */
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente para leitura */
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    backdrop-filter: blur(2px); /* Efeito de desfoque moderno (opcional) */
  }
}

/* ===== TEXTOS E IDENTIDADE ===== */

.phrase-identity {
  margin: 0 0 1.25rem 0; /* 20px */
  font-size: 1.8;
}


.print-btn{
  position: absolute;
  bottom: 70px;           /* acima do texto */
  left: 50%;
  transform: translateX(-50%);
  background: #ffffffc8;
  border: none;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10;
  pointer-events: auto;
}

.print-btn img{
  width: 34px;
  height: 34px;
  pointer-events: none;
}
.editor-content{
  flex:1;
}