/* ==========================================
   CSS COMPLETO (proporcional, sem px)
   ========================================== */


/* Tokens úteis (espaços, cores, etc.) */
:root{
  --space-1: 0.375rem; /* ~6 */
  --space-2: 0.625rem; /* ~10 */
  --space-3: 1rem;     /* ~16 */
  --space-4: 1.375rem; /* ~22 */

  --brand: #0056b3;
  --ink:   #0056b3;
  --chip:  #f9f9f9;
  --line:  #e5e5e5;
}

/* ==============================
   Reset e Base
============================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  border-radius:0.3125rem; /* 5 */
}

html{ font-size:100%; }

body{
  max-width:76.25rem;             /* 1220 */
  font-family:system-ui, Arial, sans-serif;
  margin:0.6875rem auto;          /* 11 */
  padding:0 0.6875rem;            /* 11 */
  color:var(--ink);
  background:#ffffff;
  border-radius:0.625rem;          /* 10 */
  box-shadow:0 0.25rem 0.625rem rgba(0,0,0,.1); /* 0 4 10 */
  line-height:1.5;
}

/* títulos e textos básicos */
h2{
  margin:0 0 var(--space-2) 0;
  text-align:center;
  font-size:1.5rem;
}
p{ font-size:1.1rem; }

/* ==============================
   Inputs e campos
============================== */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

input[type="text"], select, textarea{
  min-height:2rem;
  font-size:1.1rem;
  width:100%;
  height:auto;
  background-clip:padding-box;
  border:0.0625rem solid #dcdcdc;  /* 1 */
  background:var(--chip);
  box-shadow:none;
  padding:0.3125rem;               /* 5 */
}

input:focus, textarea:focus{
  border-color:var(--brand);
  outline:none;
  background:#ffffff;
}

/* ==============================
   Assinaturas
============================== */
#coluna1, #coluna2{
  display:flex;
  align-items:stretch;
  gap:var(--space-1);
}

.assinatura{
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0.3125rem;                /* 5 */
  background:var(--chip);
  border:0.0625rem dashed #dcdcdc;  /* 1 */
  border-radius:0.625rem;           /* 10 */
  user-select:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.assinatura > p[id^="assinatura"]{
  flex:1;
  display:grid;
  place-items:center;
  padding:0.0625rem;                /* 1 */
  width:100%;
  min-height:9.6875rem;             /* 155 */
  background:#fff;
  border:0.0625rem solid var(--line); /* 1 */
  border-radius:0.5rem;             /* 8 */
  margin:0 0 0.1875rem 0;           /* 3 */
  overflow:hidden;
}

.assinatura > p:not([id^="assinatura"]){
  display:flex;
  align-items:center;
  gap:0.375rem;          /* 6 */
  font-size:0.875rem;
  font-weight:500;
  margin-top:0.5rem;     /* 8 */
  user-select:none;
  pointer-events:none;
}

.assinatura > p:not([id^="assinatura"]) i{
  color:var(--brand);
  font-size:1rem;        /* 16 */
}

.assinatura input[type="hidden"]{ display:none; }

.assinatura:hover{
  border-color:#b3c7e6;
  background:#fcfdff;
}
.assinatura:active{ transform:scale(.995); }
.assinatura:focus-visible{
  outline:0.125rem solid var(--brand);   /* 2 */
  outline-offset:0.125rem;               /* 2 */
}

/* ==============================
   Grid e Tipografia do Form
============================== */
.row{
  display:flex;
  justify-content:space-between;
  column-gap:var(--space-2);
  row-gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.row .form-group{ width:49%; min-inline-size:12rem; }

label{
  display:block;
  font-weight:bold;
  margin-bottom:0.3125rem; /* 5 */
  font-size:1.1rem;
}

#galeria-fortec, .radio-groups, .footer, .empresa{
  margin-bottom:var(--space-4);
}

/* textareas */
.textarea-group, textarea{
  width:100%;
  resize:none;
  min-height:6.9375rem;      /* 111 */
  height:auto;
  overflow:hidden;
  box-sizing:border-box;
  margin-bottom:0.6875rem;   /* 11 */
}

/* ==============================
   Empresa (duas colunas)
============================== */
.empresa{
  display:flex;
  gap:0.75rem;                        /* 12 */
  align-items:center;
  justify-content:space-between;
  text-align:center;
}
.empresa .contact-info{ flex:1 1 55%; }

.empresa .logo-container{
  flex:0 1 40%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.empresa .logo-container .company-logo{
  display:block;
  width:auto;
  height:clamp(4rem, 12vw, 6.875rem); /* 64–110 */
  max-width:100%;
  object-fit:contain;
  margin:0 0 0.375rem 0;              /* 6 */
}

.empresa .logo-container .company-name{
  margin:0;
  text-align:left;
  font-size:clamp(1rem, 2.8vw, 1.4rem);
}

.empresa .contact-info p{
  margin:0 0 0.25rem 0;               /* 4 */
  line-height:1.35;
}

/* ==============================
   Botão primário
============================== */
.btn{
  display:block;
  width:100%;
  padding:0.75rem;                     /* 12 */
  margin-top:1.25rem;                  /* 20 */
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:0.3125rem;             /* 5 */
  font-size:1rem;
  cursor:pointer;
  transition:background .3s;
  margin-bottom:var(--space-4);
}
.btn:hover{ background:#003d80; }

/* ==============================
   Radios tipo “chips”
============================== */
.radio-container .form-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0.25rem 0.875rem;      /* linhas x colunas — 4 14 */
  margin-bottom:var(--space-3);
}

.radio-container .form-group > label:first-child{
  flex:1 0 100%;
  text-align:center;
  margin-bottom:0.375rem;    /* 6 */
  font-weight:700;
}

.radio-container .form-group > label:not(:first-child){
  display:inline-flex;
  align-items:center;
  gap:0.375rem;              /* 6 */
  padding:0.1875rem 0.1875rem; /* 3 3 */
  border:0.0625rem solid #dcdcdc; /* 1 */
  background:var(--chip);
  cursor:pointer;
  user-select:none;
  position:relative;
}

.radio-container .form-group > label:not(:first-child):hover,
.form-group input[type="radio"]:focus-visible + span{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 0.1875rem rgba(0,86,179,.15); /* 3 */
}

.radio-container .form-group input[type="radio"]:checked + span{
  font-weight:600;
  color:var(--brand);
}

/* sem mexer no HTML: destaca o label inteiro quando checado */
.radio-container .form-group > label:not(:first-child):has(input[type="radio"]:checked){
  border-color:var(--brand);
  box-shadow:0 0 0 0.1875rem rgba(0,86,179,.15);
  color:var(--brand);
  font-weight:600;
}

/* ==============================
   SVG
============================== */
svg{ border-radius:0; }

/* ==============================
   Checkboxes (SOS)
============================== */
.checkbox-container{
  border:0.0625rem solid #dcdcdc;  /* 1 */
  padding:var(--space-2);
  margin-bottom:var(--space-4);
}

.checkbox-container .row{
  display:flex;
  align-items:flex-start;
  row-gap:0.5rem;
  margin-bottom:var(--space-2);
}

.checkbox-container label{
  display:grid;
  grid-template-columns:1.125rem 1fr; /* ~18 + flex */
  align-items:center;
  font-size:0.9rem;
  width:100%;
  cursor:pointer;
  overflow-wrap:anywhere;
  word-break:break-word;
  column-gap:0.5rem;
  padding-block:0.25rem;
}

.checkbox-container label:hover{
  background:#f0f6ff;
}

/* caixinha */
.checkbox-container input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:1.125rem;         /* 18 */
  height:1.125rem;        /* 18 */
  flex:0 0 1.25rem;       /* 20 */
  justify-self:center;
  border:0.125rem solid #999; /* 2 */
  background:#fff;
  position:relative;
  margin:0;               /* sem margem lateral, grid cuida do espaçamento */
  align-self:center;
  cursor:pointer;
}

.checkbox-container input[type="checkbox"]:checked{
  border-color:var(--brand);
  background:var(--brand);
}
.checkbox-container input[type="checkbox"]:checked::after{
  content:"✔";
  position:absolute;
  top:-0.125rem;          /* -2 */
  left:0.1875rem;         /* 3 */
  font-size:1rem;         /* 16 */
  line-height:1;
  color:#fff;
}

/* ==============================
   Declaração
============================== */
.declaro{
  border:0.0625rem solid #dcdcdc;  /* 1 */
  border-radius:0.5rem;            /* 8 */
  padding:0.75rem 0.875rem;        /* 12 14 */
  background:#fff;
  line-height:1.7;
  font-size:1rem;
  margin-bottom:var(--space-4);
}

.declaro > h2{
  margin:0 0 var(--space-2) 0;
  text-align:center;
  font-size:1.3rem;
}

/* inputs inline com linha */
.declaro input[type="text"].auto-grow{
  display:inline-block;
  vertical-align:baseline;
  background:transparent;
  border:0;
  border-bottom:0.0625rem solid currentColor; /* 1 */
  border-radius:0 !important;
  padding:0 0 0.0625rem 0;   /* 1 */
  margin:0 .35em;
  font:inherit;
  line-height:inherit;
  height:auto;
  width:auto;
  min-width:6ch;
  white-space:nowrap;
  box-shadow:none;
  outline:none;
}

.declaro input[type="text"].auto-grow::placeholder{ opacity:.6;}

#nomeDeclarante.auto-grow{ min-width:13ch; }
#CPFdeclarante.auto-grow { min-width:12ch; }
#prestadorNome.auto-grow { min-width:13ch; }

.box-declaracao{ margin-bottom:var(--space-4); }

/* ==============================
   Galeria de Fotos
============================== */
#galeria-fortec{
  max-width:100%;
  background:#f3f3f3;
}

#gf-faixa{
  display:flex;
  gap:0.75rem;                         /* 12 */
  overflow-x:auto;
  padding:0.375rem;                    /* 6 */
  background:#f8fafc;
  border:0.0625rem solid var(--line);  /* 1 */
  border-radius:0.625rem;              /* 10 */
  scroll-snap-type:x proximity;
}

.acoes{
  display:flex;
  gap:0.5rem;                          /* 8 */
  justify-content:center;
  margin-top:0.5rem;                   /* 8 */
}

.limpar{ display:flex; justify-content:center; }

.card{
  flex:0 0 auto;
  width:10.625rem;                     /* 170 */
  display:flex;
  flex-direction:column;
  gap:0.375rem;                        /* 6 */
  scroll-snap-align:start;
}

.slot{
  background:#fff;
  border:0.0625rem solid var(--line);  /* 1 */
  border-radius:0.75rem;               /* 12 */
  padding:0.625rem;                    /* 10 */
}

.slot h4{
  margin:0;
  font-size:0.8125rem;                 /* 13 */
  font-weight:700;
  text-align:center;
}

.img{
  width:100%;
  height:7.5rem;                       /* 120 */
  border:0.0625rem solid var(--line);  /* 1 */
  border-radius:0.625rem;              /* 10 */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
  margin-top:0.375rem;                 /* 6 */
}

.local-real{
  position:absolute;
  left:-200vw;   /* fora da tela, sem px fixo */
  width:0.0625rem;  /* 1 */
  height:0.0625rem; /* 1 */
  overflow:hidden;
  white-space:nowrap;
}

.acoes label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.0625rem;           /* 33 */
  min-height:2.5rem;             /* 40 */
  padding:0.5rem 0.625rem;       /* 8 10 */
  border:0.0625rem solid var(--line);  /* 1 */
  border-radius:0.625rem;        /* 10 */
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.prevews{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.btn-remov{
  min-height:2.25rem;            /* 36 */
  padding:0.375rem 0.625rem;     /* 6 10 */
  border-radius:0.625rem;        /* 10 */
  border:0.0625rem solid #ef4444;/* 1 */
  color:#b91c1c;
  background:#fff;
  cursor:pointer;
}

/* ==============================
   Ritmo extra de textos e listas
============================== */
:where(h1, h2, h3){
  margin-block: var(--space-3) var(--space-2);
  line-height:1.2;
}
:where(h4, h5, h6){
  margin-block: var(--space-2) var(--space-1);
  line-height:1.25;
}
:where(p) + :where(p){ margin-block-start: var(--space-2); }

:where(ul, ol){
  margin:0;
  padding-inline-start:1.25rem; /* indentação sem px */
}
:where(li + li){ margin-block-start:0.25em; }

/* Espaçamento vertical entre blocos grandes (quando colados em sequência) */
:where(.empresa, .checkbox-container, .declaro, #galeria-fortec, .radio-groups, .box-declaracao, .footer)
  + :where(.empresa, .checkbox-container, .declaro, #galeria-fortec, .radio-groups, .box-declaracao, .footer){
  margin-block-start: var(--space-4);
}

/* Modal de assinatura */
/* Modal full-screen */
#modalAssinatura { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); }
#modalAssinatura .wrap { position:absolute; inset:0; background:#fff; display:grid; grid-template-rows:auto 1fr auto; }
/* Topo */
#modalAssinatura .topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #e6e6e6; }
#modalAssinatura .topbar h2 { margin:0; font:600 18px/1.2 system-ui,Segoe UI,Roboto,Arial; color:#003d80; }
#modalAssinatura .btn-close { font-size:28px; line-height:1; background:none; border:0; color:#e11; cursor:pointer; }
/* Área do canvas */
#modalAssinatura .stage { position:relative; overflow:hidden; background:#f7f7f7; }
#modalAssinatura #signature-pad { display:block; width:100%; height:100%; touch-action:none; background:#fff !important; border:1px dashed #cfcfcf; border-radius:8px; }
/* Overlay de instrução (aparece em retrato) */
#modalAssinatura .overlay-hint { position:absolute; inset:0; background:rgba(255,176,0,.08); display:none; align-items:center; justify-content:center; text-align:center; padding:24px; }
#modalAssinatura.portrait .overlay-hint { display:flex; }
#modalAssinatura .overlay-box { max-width:500px; background:#fff; border:2px dashed #ff9800; border-radius:12px; padding:20px 16px; }
#modalAssinatura .phone-anim { font-size:80px; display:inline-block; margin-bottom:8px; animation:giraPhone 1.6s infinite ease-in-out; }
@keyframes giraPhone { 0%{transform:rotate(0)} 50%{transform:rotate(90deg)} 100%{transform:rotate(0)} }
#modalAssinatura .overlay-title { font:700 20px/1.2 system-ui; color:#ff9800; margin-bottom:6px; }
#modalAssinatura .overlay-desc { font:500 15px/1.35 system-ui; color:#444; }
/* Barra inferior */
#modalAssinatura .bottombar { display:flex; gap:10px; padding:10px 12px; border-top:1px solid #e6e6e6; background:#fff; }
#modalAssinatura .bottombar .grow { flex:1; }
#modalAssinatura .bottombar button { appearance:none; border:0; cursor:pointer; border-radius:8px; padding:10px 14px; font:600 16px/1 system-ui; }
.btn-clear { background:#fff3cd; color:#b45309; border:1px solid #fde68a; }
.btn-rotate { background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; }
.btn-save { background:#16a34a; color:#fff; }

/* Escondido por padrão */
#fortec-pdf-overlay{
  position: fixed;
  /* Fixado na viewport, independente do width da página */
  left: 0; top: 0; width: 100vw; height: 100vh;
  inset: 0;                     /* redundância segura */
  z-index: 2147483647;
  display: none;                /* abre com .is-open */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  pointer-events: all;

  /* Blindagens contra bugs de “fixed” quando ancestrais usam transform */
  transform: none !important;
  -webkit-transform: none !important;
  contain: paint;               /* evita interferência de layout externo */
  isolation: isolate;           /* empilha em sua própria camada */
}

/* Mostrar somente quando aberto */
#fortec-pdf-overlay.is-open { display: flex; }

/* Durante o “modo-print visual”, mantenha se já estiver aberto */
html.modo-print #fortec-pdf-overlay.is-open { display: flex !important; }

/* Caixa central do overlay */
#fortec-pdf-box{
  width: min(92vw, 560px);
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: 12px;
  font-family: system-ui, Segoe UI, Roboto, Arial;
}

#fortec-pdf-title{ font: 700 18px/1.2 system-ui; color:#0f172a; margin:0 }
#fortec-pdf-status{ font: 500 14px/1.4 system-ui; color:#334155 }

#fortec-pdf-bar{ height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden }
#fortec-pdf-bar > i{ display:block; height:100%; width:0; background:#0ea5e9; transition:width .2s ease }

#fortec-pdf-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.btn{ appearance:none; border:0; border-radius:10px; padding:10px 14px; font:600 14px/1 system-ui; cursor:pointer }
#btn-cancel{ border:1px solid #e5e7eb; background:#fff; color:#334155 }
#btn-share{ display:none; background:#0ea5e9; color:#fff }

#spinner{ width:36px; height:36px; border-radius:50%;
  border:4px solid #e5e7eb; border-top-color:#0ea5e9; animation:spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }


/* === Assinatura: padding interno e ajuste do conteúdo === */
/* ajuste aqui o respiro interno do quadro */
:root{
  --assin-pad: 0.5rem; /* experimente 0.25rem, 0.75rem, 1rem... */
}

/* aplica padding dentro do “viewport” da assinatura */
.assinatura > p[id^="assinatura"]{
  box-sizing: border-box;
  padding: var(--assin-pad);
  display: grid;
  place-items: center;
  overflow: hidden; /* nada vaza do quadro */
}

/* quando o JS troca o conteúdo por <img>, force caber no quadro */
.assinatura > p[id^="assinatura"] img{
  width: 100% !important;     /* sobrescreve width inline */
  height: 100% !important;    /* sobrescreve height:auto inline */
  object-fit: contain;        /* preserva proporção, sem recorte */
  object-position: center;
  display: block;
}

/* placeholder SVG também respeita o quadro com padding */
.assinatura > p[id^="assinatura"] svg{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

/* estilo.css — reforço de compatibilidade de gesto */
#signature-pad{ touch-action:none; -webkit-user-select:none; user-select:none; }
#modalAssinatura{ -webkit-user-select:none; user-select:none; }

canvas.assinatura {
  touch-action: none; /* evita delay por gestos de rolagem/zoom */
}