@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #2ca87f;
  --color-primary-hover: #258f6c;
  --color-bg: #ffffff;
  --color-text: #1d2630;
  --font-family: system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

html, body, #root {
  height: 100%;
}

/* Compensar header fixo ao scrollar para seções */
section[id], footer[id] {
  scroll-margin-top: 100px;
}

#home {
  padding-top: 0 !important;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

/* Foco padrão do navegador nos elementos (sem borda verde customizada) */

.card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Estrutura padrão dos cards */
.card-header { display: block; }
.card-body { display: block; }

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 150ms ease-in-out;
}
.btn-primary:hover { background-color: var(--color-primary-hover); }

/* Compactar margens do Ant Form para reduzir espaçamento vertical */
.compact-form .ant-form-item {
  margin-bottom: 8px; /* padrão ~24px */
}
.compact-form .ant-form-item-label > label {
  margin-bottom: 0;
}

/* Breadcrumb link sem efeito de hover (mantém aparência constante) */
.breadcrumb-link-nohover,
.breadcrumb-link-nohover:visited,
.breadcrumb-link-nohover:active {
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.breadcrumb-link-nohover:hover,
.breadcrumb-link-nohover:focus {
  color: var(--color-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Garantir ausência de fundo/hover mesmo dentro do Breadcrumb do AntD */
.ant-breadcrumb .breadcrumb-link-nohover,
.ant-breadcrumb .breadcrumb-link-nohover:hover,
.ant-breadcrumb .breadcrumb-link-nohover:focus,
.ant-breadcrumb .breadcrumb-link-nohover:active,
.ant-breadcrumb .breadcrumb-link-nohover:visited {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Link genérico sem fundo no hover (para telas como Login) */
.link-no-hover,
.link-no-hover:hover,
.link-no-hover:focus,
.link-no-hover:active,
.link-no-hover:visited {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Garantir que badges fiquem por cima de outros elementos */
.ant-badge {
  position: relative;
  z-index: 10;
}
.ant-badge-count {
  z-index: 11 !important;
  position: absolute;
}

/* Seção Vídeo: remover padding gigante do tema e usar altura proporcional */
.video .player {
  padding: 0 !important;
  height: 0;
  padding-bottom: 56.25% !important; /* 16:9 */
  overflow: hidden;
}
.video .player .bg-section {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.video .player .bg-section img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Laço 25% OFF nos cards de planos anuais */
.pricing-ribbon {
  position: absolute;
  top: 12px;
  right: -4px;
  z-index: 2;
  background: #27bb15;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 0 0 0 8px;
  box-shadow: 0 2px 8px rgba(39, 187, 21, 0.4);
  letter-spacing: 0.02em;
}
.pricing-ribbon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  border-width: 0 10px 14px 0;
  border-style: solid;
  border-color: transparent #1a8f0f transparent transparent;
}
.pricing-panel {
  overflow: visible;
}

/* Botões de toggle de planos (billing-pill) não precisam de borda de foco verde */
.billing-pill .seg:focus,
.billing-pill .seg:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Borda visual para blocos de pagamento (header + body) na página Pagamento */
.payment-cards .card-header.bg-light {
  border: 1px solid #e5e7eb;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.payment-cards .card-header.bg-light + .card-body {
  border: 1px solid #e5e7eb;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.payment-cards .card-header.bg-light.mt-5 {
  margin-top: 3rem;
}

/* Card de resumo do pedido na página de pagamento */
.payment-summary {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
}
.payment-summary-body {
  padding: 24px 24px 16px;
}
.payment-summary-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background-color: #f5f5f5;
}

/* Remover borda de foco especial nos inputs do formulário de pagamento */
.payment-cards input:focus,
.payment-cards input:focus-visible,
.payment-cards select:focus,
.payment-cards select:focus-visible,
.payment-cards textarea:focus,
.payment-cards textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Overlay global para consulta de CNPJ na página de pagamento */
.cnpj-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cnpj-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner do CNPJ com cor primária do projeto */
.cnpj-loading-overlay .ant-spin-dot-item {
  background-color: var(--color-primary) !important;
}

/* Card de sucesso na página de pagamento */
.payment-success-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
  box-shadow: 0 18px 45px rgba(15, 118, 110, 0.25);
}
.payment-success-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 30px;
  font-weight: 700;
}

/* Ajustar espaçamento vertical da seção de planos na landing
   para ficar mais próximo do layout de referência */
.pricing {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.pricing .heading {
  margin-bottom: 24px !important;
}

/* Garantir que subtítulos (heading-desc) usem mesma fonte dos títulos,
   porém com peso leve, como no layout original */
.heading .heading-desc {
  font-family: "Poppins", sans-serif !important;
  color: #31274F !important;
}

/* Variante de texto descritivo leve (ex: Sob Medida) */
.heading-desc-light {
  font-family: "Poppins", sans-serif !important;
  color: #31274F !important;
  font-weight: 300 !important;
}

/* Garantir peso 300 no subtítulo de planos dentro do bloco heading */
.heading h6.fw-light {
  font-weight: 300 !important;
}

/* Garantir que o botão flutuante do WhatsApp fique sempre sobreposto,
   acima de modais Bootstrap antigos e outros elementos com z-index alto. */
#btn-fab {
  position: fixed;
  z-index: 2100 !important;
}

/* Carrossel de principais telas (screenshots) */
.screens-carousel {
  position: relative;
  width: 100%;
}

.screens-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -ms-overflow-style: none; /* IE e Edge */
  scrollbar-width: none; /* Firefox */
}

.screens-viewport::-webkit-scrollbar {
  display: none;
}

.screens-track {
  display: flex;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  padding: 20px 0;
}

.screens-slide {
  flex: 0 0 280px;
  width: 280px;
  flex-shrink: 0;
}

/* Mobile: permitir arrastar com o dedo e esconder botões */
@media (max-width: 767.98px) {
  .screens-viewport {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .screens-slide {
    flex: 0 0 220px;
    width: 220px;
    scroll-snap-align: center;
  }

  .screens-carousel .prev,
  .screens-carousel .next {
    display: none !important;
  }
}

/* Botões do carrossel de screenshots com mesma estética das setas de planos */
.screens-carousel .prev,
.screens-carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #33e61d;
  background: #fff;
  color: #33e61d;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}

.screens-carousel .prev {
  left: -60px;
}

.screens-carousel .next {
  right: -60px;
}

.screens-carousel .prev:hover,
.screens-carousel .next:hover {
  background: #33e61d;
  color: #fff;
  border-color: #33e61d;
}

/* Garantir centralização perfeita do ícone dentro das setas
   dos carrosséis de planos e de principais telas */
.pricing-nav button span[aria-hidden="true"],
.screens-carousel .prev span[aria-hidden="true"],
.screens-carousel .next span[aria-hidden="true"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Garantir que as setas do carrossel de planos fiquem sempre centralizadas
   em relação aos cards, independentemente da altura do conteúdo. */
.pricing-viewport {
  position: relative;
}

.pricing-viewport .pricing-nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Remover borda azul / highlight de foco de botões genéricos e links com classe .btn */
button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}/* stylelint-disable */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  margin: 0;
}
[tabindex='-1']:focus {
  outline: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}
address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5em;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1em;
}
dfn {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}
figure {
  margin: 0 0 1em;
}
img {
  vertical-align: middle;
  border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit;
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
mark {
  padding: 0.2em;
  background-color: #feffe6;
}
.reactEasyCrop_Container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reactEasyCrop_Image,
.reactEasyCrop_Video {
  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */
}

.reactEasyCrop_Contain {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.reactEasyCrop_Cover_Horizontal {
  width: 100%;
  height: auto;
}
.reactEasyCrop_Cover_Vertical {
  width: auto;
  height: 100%;
}

.reactEasyCrop_CropArea {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  box-shadow: 0 0 0 9999em;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.reactEasyCrop_CropAreaRound {
  border-radius: 50%;
}

.reactEasyCrop_CropAreaGrid::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 0;
  bottom: 0;
  left: 33.33%;
  right: 33.33%;
  border-top: 0;
  border-bottom: 0;
}

.reactEasyCrop_CropAreaGrid::after {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-left: 0;
  border-right: 0;
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.textLayer.selecting ~ .annotationLayer section {
  pointer-events: none;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--total-scale-factor));
  width: 100%;
  min-width: calc(180px * var(--total-scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--total-scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--total-scale-factor));
  padding: calc(6px * var(--total-scale-factor));
  margin-left: calc(5px * var(--total-scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--total-scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--total-scale-factor));
  padding-top: calc(2px * var(--total-scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::-moz-selection {
  background: transparent;
}
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}

.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
._cobrancasScrollWrap_qrjhv_1 {
  position: relative;
}

/* Indicadores de Scroll (Sombras laterais) */
._cobrancasScrollWrap_qrjhv_1::before,
._cobrancasScrollWrap_qrjhv_1::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0px; /* Alinhado acima da barra de scroll */
  width: 40px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

._cobrancasScrollWrap_qrjhv_1::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
}

._cobrancasScrollWrap_qrjhv_1::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent);
}

._cobrancasScrollWrap_qrjhv_1._canLeft_qrjhv_29::before {
  opacity: 1;
}

._cobrancasScrollWrap_qrjhv_1._canRight_qrjhv_33::after {
  opacity: 1;
}

/* Barra de rolagem horizontal (apenas 1 container) */
/* Importante: antd cria múltiplos containers para o Table com scroll-x.
   Forçar overflow-x em mais de um deles costuma gerar 2 barras de rolagem. */
._cobrancasScrollWrap_qrjhv_1 .ant-table-content {
  overflow-x: scroll !important;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  scrollbar-color: #8c8c8c #f5f5f5;
}

/* Forçar visualização no WebKit (Safari/Chrome/macOS) */
._cobrancasScrollWrap_qrjhv_1 .ant-table-content::-webkit-scrollbar {
  height: 10px;
  display: block !important;
}

._cobrancasScrollWrap_qrjhv_1 .ant-table-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

._cobrancasScrollWrap_qrjhv_1 .ant-table-content::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

._cobrancasScrollWrap_qrjhv_1 .ant-table-content::-webkit-scrollbar-thumb:hover {
  background: #555555;
}