/* ===== COLORES PERSONALIZADOS ===== */
:root{
  --marron:#792d2f;
  --naranja:#e98120;
  --claro:#ebe2e2;
}

/* estilo opcional moderno */
.main-header {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

body{
  background:var(--claro);
  padding:30px;
   margin-top: 70px;
}

.ui.container{
  background:white;
  padding:30px;
  border-radius:10px;
}

.ui.menu .active.item{
  background:var(--naranja)!important;
  color:white!important;
}

.ui.primary.button{
  background:var(--marron)!important;
}

/* ===== TIMELINE ===== */
/*
.timeline{
  border-left:4px solid var(--naranja);
  margin-left:20px;
  padding-left:25px;
}

.timeline .item{
  position:relative;
  margin-bottom:25px;
}

.timeline .item::before{
  content:'';
  position:absolute;
  left:-37px;
  top:4px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--naranja);
}

.timeline .completed::before{
  background:#21ba45;
}

.timeline .rejected::before{
  background:#db2828;
}*/

.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 40px 0;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #dcdcdc;
}

.timeline-step {
    text-align: center;
    width: 20%;
    position: relative;
}

.circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /*border: 3px solid #bdbdbd;*/
    background: white;
    margin: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

/* texto */
.title {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

/* estados */

.completed .circle {
    border-color: #21ba45;
    color: #21ba45;
}

.active .circle {
    border-color: #2185d0;
    box-shadow: 0 0 0 6px rgba(33,133,208,.15);
}

.rejected .circle {
    border-color: #db2828;
    color: #db2828;
    background: #fff5f5;
}

.timeline-step.completed .circle {
    border-color: #21ba45 !important;
    color: #21ba45!important;
    background-color: #21ba45!important;
}

.timeline-step.active .circle {
    border-color: #2185d0 !important;
    box-shadow: 0 0 0 6px rgba(33,133,208,.15);
}

.timeline-step.rejected .circle {
    border-color: #db2828 !important;
    color: #db2828!important;
}

.estado-box {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: white;
}

.timeline-step {
    position: relative;
    text-align: center;
}

/* TEXTO ARRIBA */
.estado-label {
    position: absolute;
    top: -28px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
}

/* colores */
.estado-aprobado {
    color: #21ba45;
}

.estado-rechazado {
    color: #db2828;
}

.observacion{
  display:none;
}

.title-section {
    margin: 35px 0;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0px;
}

/* texto superior */
.title-eyebrow {
    font-size: 12px;        /* más pequeño */
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2185d0;
    margin-bottom: 6px;
}

/* titulo principal */
.title-main {
    font-size: 28px;        /* reducido */
    font-weight: 600;
    color: #1b1c1d;
    margin: 0;
    line-height: 1.3;
}

/* Margin top */
.ui.form .fields {
    display: flex!important;
    flex-direction: row!important;
    margin: 0 -.5em 0em!important;
}

.form-container{
  background: #f7f9ef!important;
}

.colorTitulo{
    color: #44A194!important;
}

.form-actions {
    margin-top: 25px;
    text-align: right;
}

.tabs-container {
    min-height: calc(100vh - 220px);
}

/* documentos */
.upload-dropzone {
    border: 2px dashed #2185d0;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    background: #f9fbfd;
    transition: all .25s ease;
}

.upload-dropzone:hover {
    background: #eef6ff;
}

.upload-dropzone.dragover {
    background: #e3f2fd;
    border-color: #1678c2;
    transform: scale(1.02);
}

.upload-dropzone p {
    margin-top: 10px;
    font-weight: 600;
}

.file-name {
    font-weight: 600;
}

.remove-file {
    cursor: pointer;
    color: #db2828;
}

.progress {
    margin-top: 8px !important;
}

#dropZone{
    cursor:pointer;
    border:2px dashed #2185d0;
    transition:.2s;
}

#dropZone.dragover{
    background:#f1f8ff;
    border-color:#21ba45;
}

.progress-custom{
    width:100%;
    height:8px;
    background:#e0e0e0;
    border-radius:5px;
    margin-top:6px;
    overflow:hidden;
}

.progress-custom .bar{
    height:100%;
    width:0%;
    background:#2185d0;
    transition:width .4s ease;
}

.progress-success{
    background:#21ba45 !important;
}

.progress-error{
    background:#db2828 !important;
}

fieldset.ui.segment {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* recuadro de estado */
.estado-extra{
    margin-top:25px;
    border-radius:12px;
    padding:18px 22px;
    animation:fadeIn .35s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.estado-pago-extra{
    margin-top:25px;
    border-radius:12px;
    padding:18px 22px;
    animation:fadeIn .35s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.hidden{
    display:none;
}

/* RECHAZADO */
.panel-rechazado{
    background:#fff6f6;
    border-left:6px solid #db2828;
}

.panel-rechazado .titulo{
    color:#db2828;
    font-weight:700;
    font-size:16px;
}

/* APROBADO / PAGO */
.panel-pago{
    background:#f6fff8;
    border-left:6px solid #21ba45;
}

.panel-pago .titulo{
    color:#21ba45;
    font-weight:700;
    font-size:16px;
}

.panel-pago a{
    display:inline-block;
    margin-top:10px;
    background:#2185d0;
    color:white;
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
}

/* estado documentos */
.doc-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.doc-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:4px 10px;
    border-radius:10px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
    transition:.2s;
}

.doc-item:hover{
    background:#f3f4f6;
}

.doc-nombre{
    font-weight:600;
    color:#333;
}

/* ESTADOS */

.doc-estado{
    font-weight:700;
    display:flex;
    align-items:center;
    gap:6px;
}

.estado-aprobado{
    color:#21ba45;
}

.estado-rechazado{
    color:#db2828;
}

.estado-pendiente{
    color:#f2c037;
}

.colortextogeneral{
  color: #3d45aa !important;;
}

/* terminos inicio */
.beneficios-box {
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

.beneficio-item {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    transition: all .25s ease;
}

.beneficio-item:hover {
    background: #f1f5f9;
    transform: translateY(-3px);
}

.beneficio-item h4 {
    color: #1b4f72;
    margin-bottom: 6px;
}

.beneficio-item p {
    color: #555;
    line-height: 1.6;
}

.modal-alto {
    height: 80vh !important;   /* altura relativa a pantalla */
}

/* Preview modal */
/* CONTENEDOR PREVIEW */
.preview-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr); /* 👈 3 columnas */
    gap:14px 30px;
}

/* responsive */
@media (max-width:1200px){
    .preview-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:700px){
    .preview-grid{
        grid-template-columns: 1fr;
    }
}

/* fila */
.preview-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:10px 35px;
}

.preview-section{
    grid-column:1 / -1;
    font-weight:bold;
    font-size:16px;
    margin-top:15px;
    color:#1678c2;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
}

.preview-row{
    display:flex;
    gap:8px;
}

.preview-label{
    font-weight:600;
    color:#555;
    min-width:160px;
    color: brown !important;
}

.preview-value{
    font-weight:bold;
    color:#1b1c1d;
}

.input-error {
        border: 2px solid #db2828 !important; /* rojo estilo Semantic UI */
        background-color: #fff6f6;
}
.dropdown-error {
    border: 2px solid #db2828 !important;
}
.icono-campoimportante{
  color: #db2828 !important;
}
.texto-titulo-campos-imp{
  font-size: 10px!important;
}
#mensajeCMP {
    margin-top: 15px;
}
#menuTabs .item.disabled {
    opacity: .4;
    cursor: not-allowed;
}
#tabDatosCompletado {
    display: flex;
    align-items: center;
    gap: 10px;
}

#tabDatosCompletado i.icon {
    font-size: 1.6em;
}
.tab-hidden {
    display: none !important;
}
.forzar-visible {
    display: block !important;
}
#uploadList .item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#cboBanco + .ui.dropdown,
#cboBanco + .ui.dropdown .menu,
#cboBanco + .ui.dropdown .text {
    font-size: 11px !important;
}
#cboBanco {
    font-size: 12px !important;
}