/* VARIABLES CSS */

:root {
  --bs-font-inter: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-archivo: "Archivo", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-mulish: "Mulish", Sans-serif, Arial;
  --bs-body-font-family: var(--bs-font-archivo);
  --bs-headers-font-family: var(--bs-font-mulish);
  --azul: #0d4c91;
  --azul-light: #f6eae2;
  --azul-active: #0c4583;
  --azul-light: #EAF4FE;
  --azul-secundario: #5687bc;
  --base-color-light: #eaeff5;
  --bs-azul-mid: #1976ba;
  --bs-light-orange: #ffd0a8;
  --azul-secundario: #5687BC;
  --gris-cnc: #7f878d;
  --gris-cnc-active: #6c7277;
  --bs-baby-blue: #bed5ef;
  --bs-one: #e72a50;
  --verde: #308b91;
  --verde-light: #e0f4f5;
  --verde-active: #287678;
  --bs-body-color-pyde: #575757;
  
  --bs-stepper-label-title-color-current-azul: var(--azul);
  --bs-stepper-icon-bg-color-current-azul: var(--azul);
  --bs-stepper-label-title-color-azul: var(--azul-secundario);
  --bs-stepper-icon-check-color-completed-azul: var(--azul);
  --bs-stepper-icon-border-completed-azul: 1px dashed rgb(34 75 140 / 30%);
  --bs-stepper-label-title-color-completed-azul: var(--azul);	
  --bs-stepper-line-border-azul: 1px dashed rgb(34 75 140 / 30%);
  --bs-stepper-icon-bg-color-azul: rgb(34 75 140 / 15%);
  --bs-stepper-icon-border-azul:1px dashed rgb(34 75 140 / 30%);
  --bs-stepper-icon-number-color-azul: var(--azul);
}

[data-bs-theme=light] {
  --bg-menu-azul: #0d4c91;
  --bg-azul-light: #f6eae2;
}

[data-bs-theme=dark] {
  --bg-menu-azul: #0d0e12;
  --bg-azul-light: #f6eae2;
}



/* Por si alguna demo fija directamente en body */
body {
  font-family: var(--bs-body-font-family) !important;
  color: var(--bs-body-color-pyde) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-headers-font-family) !important;
  font-weight: 700;
}

.border-color-base-color-light{
	border-color: var( --bs-baby-blue) !important;
}

.text-color-azul-light {
    color: var(--azul-light) !important;
}

/* ESTILOS GENERALES */

/*TEXT*/
.text-azul {
    color: var(--azul) !important;
}

.subtitulo-azul {
    font-family: var(--bs-headers-font-family) !important;
    font-weight: 600;
    color: var(--azul-secundario);
}

/**/

header .navbar-brand img {
    max-height: 45px;
}

/* limite de 2 lineas con puntos suspensivos */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*BOTONES*/
.btn.btn-azul {
    color: var(--bs-primary-inverse);
    background-color: var(--azul);
    border-color: var(--azul);
}

.btn.btn-azul i {
    color: var(--bs-primary-inverse) !important;
}

.btn.btn-verde {
    color: var(--bs-primary-inverse);
    background-color: var(--verde);
    border-color: var(--verde);
}

.btn.btn-verde i {
    color: var(--bs-primary-inverse) !important;
}

.btn.btn-one {
    color:  #ffffff;
    background-color: var(--bs-one);
    border-color: var(--bs-one);
}

.btn.btn-one i {
    color: var(--bs-primary-inverse) !important;
}



.btn-cnc-gris{
	color: var(--bs-primary-inverse);
    background-color: var(--gris-cnc);
     border-color: var(--gris-cnc);
}

.btn-check:active+.btn.btn-cnc-gris, .btn-check:checked+.btn.btn-cnc-gris, .btn.btn-cnc-gris.active, .btn.btn-cnc-gris.show, 
.btn.btn-cnc-gris:active:not(.btn-active), .btn.btn-cnc-gris:focus:not(.btn-active), .btn.btn-cnc-gris:hover:not(.btn-active), .show>.btn.btn-cnc-gris {
    color: var(--bs-primary-inverse);
    border-color: var(--gris-cnc-active);
    background-color: var(--gris-cnc-active);
}

.btn.btn-cnc-gris i {
    color: var(--bs-primary-inverse) !important;
}


.btn-check:active+.btn.btn-azul, .btn-check:checked+.btn.btn-azul, .btn.btn-azul.active, .btn.btn-azul.show, 
.btn.btn-azul:active:not(.btn-active), .btn.btn-azul:focus:not(.btn-active), .btn.btn-azul:hover:not(.btn-active), .show>.btn.btn-azul {
    color: var(--bs-primary-inverse);
    border-color: var(--azul-active);
    background-color: var(--azul-active);
}


.btn.btn-azul-light {
    color:  var(--azul-active);
    background-color: var(--base-color-light);
    border-color: var(--base-color-light);
}

.btn.btn-azul-light i {
    color: #171b1e !important;
}


.btn.btn-light-azul {
    color: var(--bs-azul-mid);
    border-color: var(--azul-light);
    background-color: var(--azul-light);
}

.btn-check:active+.btn.btn-light-azul, .btn-check:checked+.btn.btn-light-azul, .btn.btn-light-azul.active, .btn.btn-light-azul.show, .btn.btn-light-azul:active:not(.btn-active), .btn.btn-light-azul:focus:not(.btn-active), .btn.btn-light-azul:hover:not(.btn-active), .show>.btn.btn-light-azul {
    color: var(--bs-primary-inverse);
    border-color: var(--base-color);
    background-color: var(--base-color) !important;
}


.btn-check:active+.btn.btn-azul-light, .btn-check:checked+.btn.btn-azul-light, .btn.btn-azul-light.active, .btn.btn-azul-light.show, 
.btn.btn-azul-light:active:not(.btn-active), .btn.btn-azul-light:focus:not(.btn-active), .btn.btn-azul-light:hover:not(.btn-active), .show>.btn.btn-azul-light {
    color: #171b1e;
    border-color: var(--base-color-light);
    background-color: var(--base-color-light);
}


.btn-check:active+.btn.btn-active-azul, .btn-check:checked+.btn.btn-active-azul, .btn.btn-active-azul.active, .btn.btn-active-azul.show, .btn.btn-active-azul:active:not(.btn-active), .btn.btn-active-azul:focus:not(.btn-active), .btn.btn-active-azul:hover:not(.btn-active), .show>.btn.btn-active-azul {
    color: var(--bs-success-inverse);
    border-color: var(--azul-active);
    background-color: var(--azul-active) !important;
}

.btn-check:active+.btn.btn-active-azul .svg-icon, .btn-check:active+.btn.btn-active-azul i, .btn-check:checked+.btn.btn-active-azul .svg-icon, .btn-check:checked+.btn.btn-active-azul i, .btn.btn-active-azul.active .svg-icon, .btn.btn-active-azul.active i, .btn.btn-active-azul.show .svg-icon, .btn.btn-active-azul.show i, .btn.btn-active-azul:active:not(.btn-active) .svg-icon, .btn.btn-active-azul:active:not(.btn-active) i, .btn.btn-active-azul:focus:not(.btn-active) .svg-icon, .btn.btn-active-azul:focus:not(.btn-active) i, .btn.btn-active-azul:hover:not(.btn-active) .svg-icon, .btn.btn-active-azul:hover:not(.btn-active) i, .show>.btn.btn-active-azul .svg-icon, .show>.btn.btn-active-azul i {
    color: var(--bs-success-inverse);
}

.btn-azul-selected {
    background-color: var(--azul-active) !important;
    border-color: var(--azul-active) !important;
    color: #fff !important;
}

.btn.btn-outline.btn-outline-azul {
    color: var(--azul);
    border-color: var(--azul);
    background-color: transparent;
}


.pagination-style-01 .page-item.active .page-link{
	background: var(--base-color);
}

/* Color inicial del icono */
.btn.btn-outline.btn-outline-azul i {
    color: var(--azul);
}

/* Hover del botón */
.btn.btn-outline.btn-outline-azul:hover {
    color: var(--bs-primary-inverse);
    border-color: var(--azul);
    background-color: var(--azul);
}

/* Hover del icono dentro del botón */
.btn.btn-outline.btn-outline-azul:hover i {
    color: var(--bs-primary-inverse);
}


.btn-check:active+.btn.btn-active-azul, .btn-check:checked+.btn.btn-active-azul, .btn.btn-active-azul.active, .btn.btn-active-azul.show, .btn.btn-active-azul:active:not(.btn-active), .btn.btn-active-azul:focus:not(.btn-active), .btn.btn-active-azul:hover:not(.btn-active), .show>.btn.btn-active-azul {
    color: var(--bs-primary-inverse);
    border-color: var(--azull);
    background-color: var(--azul) !important;
}


/*RADIO ADVANCED FORM*/
.btn-check:active+.btn.btn-outline.btn-outline-dashed.btn-outline-dashed, .btn-check:checked+.btn.btn-outline.btn-outline-dashed, .btn.btn-outline.btn-outline-dashed.active, .btn.btn-outline.btn-outline-dashed.show, .btn.btn-outline.btn-outline-dashed:active:not(.btn-active), .btn.btn-outline.btn-outline-dashed:focus:not(.btn-active), .btn.btn-outline.btn-outline-dashed:hover:not(.btn-active), .show>.btn.btn-outline.btn-outline-dashed {
    border-color: var(--azul);
}
.btn-check:active+.btn.btn-active-light-azul, .btn-check:checked+.btn.btn-active-light-azul, .btn.btn-active-light-azul.active, .btn.btn-active-light-azul.show, .btn.btn-active-light-azul:active:not(.btn-active), .btn.btn-active-light-azul:focus:not(.btn-active), .btn.btn-active-light-azul:hover:not(.btn-active), .show>.btn.btn-active-light-azul {
    color: var(--azul);
    border-color: var(--azul-light);
    background-color: var(--azul-light) !important;
}

.btn-check:active+.btn.btn-active-light-azul .svg-icon, .btn-check:active+.btn.btn-active-light-azul i, .btn-check:checked+.btn.btn-active-light-azul .svg-icon, .btn-check:checked+.btn.btn-active-light-azul i, .btn.btn-active-light-azul.active .svg-icon, .btn.btn-active-light-azul.active i, .btn.btn-active-light-azul.show .svg-icon, .btn.btn-active-light-azul.show i, .btn.btn-active-light-azul:active:not(.btn-active) .svg-icon, .btn.btn-active-light-azul:active:not(.btn-active) i, .btn.btn-active-light-azul:focus:not(.btn-active) .svg-icon, .btn.btn-active-light-azul:focus:not(.btn-active) i, .btn.btn-active-light-azul:hover:not(.btn-active) .svg-icon, .btn.btn-active-light-azul:hover:not(.btn-active) i, .show>.btn.btn-active-light-azul .svg-icon, .show>.btn.btn-active-light-azul i {
    color: var(--azul);
}


/* LOGIN */
/* Estado normal */
.input-group .form-control {
    border-color: #dee2e6; /* gris por defecto */
}

.input-group .input-group-text {
    border-color: #dee2e6;
    color: #6c757d; /* gris icono */
}

/* Cuando el input está en foco */
.input-group .form-control:focus {
    border-color: var(--azul); /* azul bootstrap */
}

/* Cuando cualquier hijo tiene foco (todo el grupo reacciona) */
.input-group:focus-within .input-group-text {
    border-color: var(--azul);
    color: var(--azul); /* el icono pasa a azul */
}

.input-group:focus-within .form-control {
    border-color: var(--azul);
}

.input-group:focus-within .bi {
    border-color: var(--azul);
    color: var(--azul); /* el icono pasa a azul */
}

/*TEXT Y BADGE ORANGE*/
.text-orange {
    color: var(--bs-orange);
}

.badge-light-orange {
    background-color: var(--bs-light-orange);
    color: var(--bs-orange);
}

.bg-orange {
    background-color: var(--bs-orange);
}

.bg-light-orange {
    background-color: var(--bs-light-orange);
}

.bg-light-azul {
    background-color: var(--azul-light);
}

.bg-baby-blue {
    background-color: var(--bs-baby-blue);
}

/* STEPPER PERSONALIZADO */
.stepper.stepper-pills .stepper-item.current .stepper-label .stepper-title {
    color: var(--bs-stepper-label-title-color-current-azul);
}

.stepper.stepper-pills .stepper-item.current .stepper-icon {
    background-color: var(--bs-stepper-icon-bg-color-current-azul);
}

.stepper.stepper-pills .stepper-item .stepper-label .stepper-title {
    color: var(--bs-stepper-label-title-color-azul);
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check, .stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon .stepper-check {
    color: var(--bs-stepper-icon-check-color-completed-azul);
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon, .stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon {
    background-color: rgb(34 75 140 / 15%);
     border: var(--bs-stepper-icon-border-completed-azul);
}


.stepper.stepper-pills .stepper-item.completed .stepper-label .stepper-title, .stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-label .stepper-title {
    color: var(--bs-stepper-label-title-color-completed-azul);
}

.stepper.stepper-pills.stepper-column .stepper-line {
    border-left: var(--bs-stepper-line-border-azul);
}

.stepper.stepper-pills .stepper-item .stepper-icon {
    background-color: var(--bs-stepper-icon-bg-color-azul);
    border: var(--bs-stepper-icon-border-azul);
}

.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number {
    color: var(--bs-stepper-icon-number-color-azul);
}

/* CPV MODAL */

/* BADGES */
.progress-bar.bg-azul{
	    background-color: var(--azul) !important;
}

/*Width y Height*/
@media (min-width: 992px) {
    .min-h-lg-90vh {
        min-height: 90vh !important;
    }
}