.elementor-kit-11{--e-global-color-primary:#5435B8;--e-global-color-secondary:#FFCE00;--e-global-color-text:#7A7A7A;--e-global-color-accent:#F6A733;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-weight:800;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 h6{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<style>
/* --- ESTILOS GERAIS PARA TODOS OS COMPONENTES --- */

/* Controles de Largura */
.editor-controls-wrapper {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.editor-controls-wrapper .control-label {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.width-buttons button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.width-buttons button:hover {
  background-color: #e9e9e9;
  border-color: #999;
}
.width-buttons button.active {
  background-color: #0073e6;
  color: white;
  border-color: #005bbd;
  font-weight: 600;
}

/* Painel de visualização do tamanho */
.dimension-display-area {
  background-color: #f0f2f5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.dimension-display-area strong {
  font-weight: 600;
}

/* Layout Principal do Editor */
.editor-layout {
  display: grid;
  grid-template-columns: 55px auto;
  grid-template-rows: 40px auto;
  gap: 10px;
  width: fit-content; /* Faz o container se ajustar ao conteúdo */
}
#v-measure-container { grid-area: 2 / 1 / 3 / 2; }
#h-measure-container { grid-area: 1 / 2 / 2 / 3; }
#textarea-container  { grid-area: 2 / 2 / 3 / 3; }

.measure-container { display: flex; }
#h-measure-container { justify-content: flex-start; align-items: center; }
#v-measure-container { justify-content: center; align-items: flex-start; }

/* Linha de Dimensão */
.dimension-line {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #000;
}
.dimension-line.horizontal { border-top: 1px solid #555; }
.dimension-line.vertical { border-left: 1px solid #555; }

.dimension-line::before, .dimension-line::after {
  content: '';
  position: absolute;
  background-color: #555;
}
.dimension-line.horizontal::before, .dimension-line.horizontal::after {
  width: 1px;
  height: 7px;
  top: -3px;
}
.dimension-line.horizontal::before { left: 0; }
.dimension-line.horizontal::after { right: 0; }

.dimension-line.vertical::before, .dimension-line.vertical::after {
  height: 1px;
  width: 7px;
  left: -3px;
}
.dimension-line.vertical::before { top: 0; }
.dimension-line.vertical::after { bottom: 0; }

.dimension-number { background-color: #fff; padding: 0 5px; }
.dimension-number.vertical { transform: rotate(-90deg); }

/* Área de Texto */
.area-texto-ajustavel {
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
  overflow-y: hidden;
  transition: border-color 0.2s ease;
}
.area-texto-ajustavel:focus {
  outline: none;
  border-color: #0073e6;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
}
</style>/* End custom CSS */