/* Inline callout for tabela combinada */
 .inline-callout {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 12px 16px;
     background: #f9fafb;
     border: 1px solid var(--border);
     border-radius: 14px;
 }

 .inline-callout .callout-icon {
     color: var(--primary-500);
     font-size: 20px;
     display: flex;
     align-items: center;
 }

 .inline-callout .callout-content h6 {
     margin: 0;
     font-weight: 600;
 }

 .inline-callout .callout-content p {
     margin: 0;
     color: #6b7280;
     font-size: 13px;
 }

 .segmented-control {
     display: flex;
     gap: 8px;
 }

 .segmented-control .segment {
     border: 1px solid var(--border);
     background: #fff;
     border-radius: 10px;
     padding: 10px 14px;
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: background-color .15s ease, box-shadow .15s ease;
 }

 .segmented-control .segment.success {
     border-color: var(--primary-500);
     color: var(--primary-500);
 }

 .segmented-control .segment.primary {
     border-color: #4f46e5;
     color: #4f46e5;
 }

 .segmented-control .segment:hover {
     background: #f3f4f6;
     box-shadow: 0 2px 6px rgba(0,0,0,0.06);
 }

 @media screen and (max-width: 768px) {
     .inline-callout {
         flex-direction: column;
         align-items: flex-start;
     }
     .segmented-control { width: 100%; }
     .segmented-control .segment { flex: 1; justify-content: center; }
 }
 /* App layout with vertical sidebar progress */
 .app-layout {
     display: grid;
     grid-template-columns: 210px 1fr;
     gap: 16px;
    align-items: center; /* center both columns vertically within container */
     height: 100%;
    flex: 1 1 auto; /* fill remaining space under brand badge */
 }

.progress-sidebar {
    padding-right: 12px;
    border-right: 1px solid var(--border);
    position: relative; /* anchor rail */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* keep sidebar above sticky footers */
}

.progress-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

 .progress-rail::before {
     content: "";
     position: absolute;
     left: 20px; /* center of the 40px column */
     top: 0;
     bottom: 0;
     width: 2px;
     background: var(--border);
     border-radius: 2px;
    z-index: 0; /* keep the line behind dots and labels */
 }

.progress-rail .step-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

 .progress-rail .dot {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: #ddd;
     display: grid;
     place-items: center;
     color: #fff;
     margin-left: 5px; /* centers dot over the rail (20px center) */
     z-index: 1;
 }

 .progress-rail .label {
     color: #374151; /* darker gray for visibility */
     font-size: 13px; /* slightly larger */
     font-weight: 600;
     position: relative;
     z-index: 1; /* ensure label is above the rail */
     display: inline-block;
 }

 .progress-rail .step-item.active .dot {
     background-color: var(--primary-500);
 }

 .progress-rail .step-item.active .label {
     color: #6b7280; /* slightly darker gray for active */
     font-weight: 600;
 }

 .app-content {
     flex: 1 1 auto;
     min-width: 0; /* prevent overflow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    overflow-y: auto; /* scroll only content when needed */
 }

 @media screen and (max-width: 768px) {
    .app-layout { display: block; }
     .progress-sidebar {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 8px;
        justify-content: flex-start;
     }
    .progress-rail {
        position: static;
        transform: none;
        gap: 12px;
    }
    .progress-rail::before { display: none; }
    .progress-rail .dot { margin-left: 0; }
    .app-content { justify-content: flex-start; }
 }
 /* Isso aplica-se a toda a barra de rolagem na página */
 ::-webkit-scrollbar {
     width: 5px;
     /* largura para barras de rolagem verticais */
     height: 5px;
     /* altura para barras de rolagem horizontais */
 }

 /* estilo da faixa de rolagem */
 ::-webkit-scrollbar-track {
     background: #f0f0f0;
 }

 /* estilo do manipulador de rolagem */
 ::-webkit-scrollbar-thumb {
     background: rgba(228, 26, 26, 0.8);

 }

 /* estilo do manipulador de rolagem ao passar o mouse */
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }

 :root {
     --primary-500: #d81818;
     --primary-600: #b31515;
     --surface: #ffffff;
     --muted: #6b7280;
     --border: #e5e7eb;
 }

 html, body {
     height: 100vh;
 }

 body {
     background-color: var(--surface);
     margin: 0;
     overflow: hidden; /* No page scroll; only inside container */
 }

/* Absolute title top-left with favicon behind */
.app-title {
    position: absolute;
    top: 20px;
    left: 24px;
    font-weight: 700;
    font-size: 18px;
    color: #111827;
    padding-left: 40px; /* space for icon behind/left */
    background-image: url('../FavIco.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 28px 28px;
    z-index: 3;
}

 .main {
     display: flex;
     width: 100vw;
     height: 100vh;
     justify-content: center;
     align-items: flex-start;
 }

 .app-container {
     width: 92vw;
     max-width: 1120px;
     background: #ffffff;
     border: 1px solid var(--border);
     border-radius: 20px;
     box-shadow: 0 12px 30px rgba(0,0,0,0.08);
     padding: 20px;
     margin: 20px auto;
     height: calc(100vh - 40px); /* 20px top + 20px bottom margin */
    overflow-y: hidden; /* No container scroll; only content area scrolls when needed */
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
    position: relative; /* allow absolute logo anchoring */
    display: flex;
    flex-direction: column;
 }

 @media screen and (max-width: 768px) {
     .app-container {
         width: 95vw;
         padding: 16px;
         border-radius: 16px;
         margin: 8px auto;
         height: calc(100vh - 16px); /* 8px top + 8px bottom margin */
     }
 }

 /* Fixed logo at bottom-left inside container */
 .app-logo-fixed {
    position: absolute;
    left: 24px;
    bottom: 24px;
     height: 32px;
     width: auto;
     object-fit: contain;
     z-index: 2;
     opacity: 0.9;
 }


 .btn-success {
     background-color: var(--primary-500) !important;
 }

 .btn-success:hover {
     background-color: var(--primary-600) !important;
 }

 .containerEtapatree {}


 #etapatree {
     display: none;
     border-radius: 50%;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 .container {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #img_logo {
     width: 5%;
 }

 @media screen and (max-width:500px) {
     #img_logo {
         width: 40%;
     }
 }

 .progress-tracker {
     display: flex;
     justify-content: space-between;
     position: relative;
 }

 .progress-tracker::before {
     content: "";
     position: absolute;
     top: 15px;
     left: 0;
     width: 100%;
     height: 1px;
     background-color: var(--primary-500);
 }

 .progress-tracker::after {
     content: "";
     position: absolute;
     top: 15px;
     left: 0;
     width: 66%;
     /* Altere isso de acordo com o progresso */
     height: 1px;
     background-color: var(--primary-500);
     z-index: 1;
 }

 .step {
     text-align: center;
     position: relative;
     z-index: 2;
 }

 .step .icon {
     display: block;
     width: 30px;
     height: 30px;
     margin: 0 auto;
     background-color: #ddd;
     border-radius: 50%;
     line-height: 30px;
     color: #fff;
     margin-bottom: 5px;
 }

 .step.active .icon {
     background-color: var(--primary-500);
 }

 /* Estilos para a área de prévia dos arquivos */
 #preview-container {
     display: flex;
     flex-wrap: wrap;
 }

 .preview {
     width: 100px;
     height: 100px;
     margin: 10px;
     overflow: hidden;
 }

 .preview img {
     max-width: 100%;
     max-height: 100%;
 }

 /* Estilo para ocultar o input depois que os arquivos forem selecionados */
 #file-input {
     display: none;
 }


 label {
     display: block!important;
     font-weight: bold!important;
     margin-bottom: 5px!important;
 }

 input, select {
    padding: 10px!important;
     box-sizing: border-box!important;
    border: 1.5px solid var(--border)!important;
    border-radius: 14px!important;
     font-size: 14px!important;
     margin-top: 5px!important;
     display: inline-block;
     vertical-align: top!important;
     background-color: #fff!important;
 }

 input:focus, select:focus {
     outline: none!important;
     border-color: var(--primary-500)!important;
     box-shadow: 0 0 0 4px rgba(216, 24, 24, 0.12)!important;
 }

 .input-group .input-group-text {
     border-radius: 12px 0 0 12px!important;
     border: 1.5px solid var(--border)!important;
     background-color: #f9fafb!important;
     color: var(--muted)!important;
 }

 .input-with-icon {
     position: relative;
 }

 .input-with-icon .input-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
    color: #9ca3af; /* muted grey */
    opacity: 0.85;
    font-size: 18px;
     pointer-events: none;
 }

 .input-with-icon input,
 .input-with-icon select {
        padding-left: 44px!important;
 }

/* No-icon variant for inputs that shouldn't reserve icon space */
.input-with-icon.no-icon .input-icon { display: none; }
.input-with-icon.no-icon input,
.input-with-icon.no-icon select { padding-left: 14px!important; }

/* Readonly display blocks for auto-completed city/state */
.readonly-field.form-control {
    background-color: #f3f4f6!important;
    border-color: var(--border)!important;
    color: #6b7280!important;
    height: auto!important;
    min-height: 40px!important;
}
.readonly-field.form-control {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 10px;
    min-height: 40px;
}

.readonly-field.form-control p {
    margin: 0;
}


 ::placeholder {
     color: #9ca3af !important;
 }

 input:hover, select:hover {
     border-color: #d1d5db !important;
 }

 input, select {
     transition: border-color .12s ease, box-shadow .12s ease;
 }

/* Show placeholder inside selects in muted gray until selection */
.form-select:invalid {
    color: var(--muted) !important;
}
.form-select {
    color: var(--muted) !important;
}
.form-select:has(option:checked:not([value=""])) {
    color: #111827 !important;
}

 .btn-success {
     color: #fff!important;
     border: none!important;
     padding: 14px 16px!important;
     text-align: center!important;
     text-decoration: none!important;
     font-size: 16px!important;
     margin: 10px 0!important;
     cursor: pointer!important;
     border-radius: 12px!important;
 }

/* Keep step action buttons visible at the bottom of the section */
.etapa-actions {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 10; /* ensure it doesn't overlay the sidebar */
    background: #ffffff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 10px rgba(0,0,0,0.04);
    padding-top: 8px;
    padding-bottom: 8px;
}




 .btn-primary {
        background-color: #4f46e5!important;
        color: #fff!important;
        border: none!important;
        padding: 14px 16px!important;
        text-align: center!important;
        text-decoration: none!important;
        font-size: 16px!important;
        margin: 10px 0!important;
        cursor: pointer!important;
        border-radius: 12px!important;
 }

 @media screen and (max-width: 768px) {
     .container {
         padding-left: 12px;
         padding-right: 12px;
     }
     .row [class^="col-"], .row [class*=" col-"] {
         margin-bottom: 12px;
     }
     #img_logo {
         width: 50%;
     }
 }