:root{
 --verde-principal:#8BA75D;
 --verde-claro:#ABC360;
 --verde-oscuro:#7E9531;
 --verde-secundario:#97B957;
 --gris:#5D5E5D;
 --fondo:#F7F8F5;
 --blanco:#FFF;
 --texto:#2B2B2B;
 --borde:#D9DDD2;
 --radio:14px;
}
*{box-sizing:border-box}
body{
 margin:0;
 background:var(--fondo);
 color:var(--texto);
 font-family:Segoe UI,Tahoma,sans-serif;
}
.container{max-width:1200px;margin:auto}
.formulario{
 border:none;
 border-radius:18px;
 overflow:hidden;
 background:#fff;
 box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.card-body{padding:2rem}
.titulo-icono{
 width:82px;height:82px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 margin:0 auto;
 background:var(--verde-principal);
 color:#fff;font-size:36px;
}
h2{font-weight:700;color:var(--verde-oscuro)}
i{color:var(--verde-oscuro)}
.text-muted{color:#666}
.pasos{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px 0}
.linea{height:3px;flex:1;max-width:120px;background:#d8d8d8}
.paso{display:flex;flex-direction:column;align-items:center;gap:6px}
.paso span{
 width:46px;height:46px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:#d8d8d8;color:#555;font-weight:bold
}

.bloque{
 background:#fff;
 border:1px solid var(--borde);
 border-radius:var(--radio);
 padding:24px;
 margin-bottom:22px;
}
.bloque h4{
 color:black;
 margin-bottom:20px;
 display:flex;align-items:center;gap:10px
}
.form-control,.form-select{
 border-radius:10px;
 border:1px solid #cfd4ca;
 padding:.75rem;
}
.form-control:focus,.form-select:focus{
 border-color:var(--verde-principal);
 box-shadow:0 0 0 .2rem rgba(139,167,93,.18);
}
.info-material{
 background:#f5f8ef;
 border-left:5px solid var(--verde-principal);
 padding:14px 18px;
 border-radius:10px;
 margin-bottom:20px;
}
.info-material ul{margin:10px 0 0 18px}
.drop-zone{
 border:2px dashed var(--verde-claro);
 border-radius:16px;
 background:#fbfcf8;
 min-height:220px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 cursor:pointer;
 transition:.25s;
}
.drop-zone:hover{
 border-color:var(--verde-oscuro);
 background:#f2f7ea;
 transform:translateY(-2px)
}
.drop-zone i{
 font-size:52px;
 color:var(--verde-principal);
 margin-bottom:16px;
}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.chip{
 background:rgba(171,195,96,.15);
 color:var(--verde-oscuro);
 border:1px solid var(--verde-claro);
 border-radius:20px;
 padding:5px 12px;
 font-size:.85rem;
 font-weight:700;
}
.estado-validacion{
 margin-top:15px;
 background:#fafafa;
 border:1px solid var(--borde);
 border-radius:10px;
 padding:15px;
}
.estado-validacion .ok{color:#2e7d32}
.estado-validacion .error{color:#c62828}
.estado-validacion .pendiente{color:#777}
.form-check{
 background:#f5f8ef;
 border:1px solid var(--verde-claro);
 border-radius:12px;
 padding:18px;
}
.btn-success{
 background:var(--verde-oscuro)!important;
 border-color:var(--verde-oscuro)!important;
 border-radius:12px;
 font-weight:700;
 padding:14px 40px;
}
.btn-success:hover{
 background:var(--verde-principal)!important;
 border-color:var(--verde-principal)!important;
}
.btn-success:disabled{
 background:#bbb!important;
 border-color:#bbb!important;
}


/* Estilo personalizado para el botón X de quitar archivo */
.btn-quitar-x {
    color: #000000 !important;
    box-shadow: none !important;
}

.btn-quitar-x:hover{
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-quitar-x:focus{
    color: #000000 !important;
    opacity: 0.7; /* Efecto suave de atenuación al pasar el cursor */
    box-shadow: none !important;
}
.btn-quitar-x:active {
    color: #ffffff !important;
    box-shadow: none !important;
}
.form-check-input:checked {
    background-color: var(--verde-oscuro); /* Color de fondo */
    border-color: var(--verde-oscuro);     /* Color del borde */
}
.form-check-input:focus {
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 0.25rem rgba(126, 149, 49, 0.25); /* Un halo suave del color verde oscuro */
}

.form-check-input{
border-color:var(--verde-principal)!important;
}

@media(max-width:768px){
 .card-body{padding:1rem}
 .pasos{display:none}
 .bloque{padding:18px}
 h2{font-size:1.6rem}

 /* Quita el espacio blanco sobrante abajo */
 .modal-dialog,
 .modal-content,
 .modal-dialog .card {
   height: auto !important;
   min-height: unset !important;
 }
}