/*
Nombre: Diseño web FOndos.gob.cl
Author: Incode.cl
Description: Diseño 2023 del portal Fondos.gob.cl
Version: 1.0
*/

/*=======================
    BASICS
=========================*/

html {scroll-behavior: smooth;}
body, body p, body ul li {font-family: Roboto;}
h1,h2,h3,h4,h5, h6{font-family: Roboto; font-weight: 500; margin-bottom: 1.3em; line-height: 1.5em}
.h1,.h2,.h3,.h4,.h5,.h6{font-family: Roboto !important; font-weight: bold; margin-bottom: 1.3em; line-height: 1.5em}
header {display: inline-block; width: 100%;}
footer, footer.footer-expand-lg {padding: 40px 0 50px;position: relative;display: block;width: 100%;height: auto;overflow: hidden;}
footer li a {display: block;color: #fff;width: 100%;}
footer .line {position: absolute;bottom: 0;width: 165px;min-width: unset;height: 5px;   margin-bottom: 0;    text-align: center; display: inline-block;}
footer .line::after {position: absolute;right: 0;left: 15px;height: 5px;content: "";background: linear-gradient(to right, #0f69b4 0, #0f69b4 50%, #e22c2c 50%, #e22c2c 100%);}
.footer {background-color: #001C41 !important; color: #fff;}
section {padding: 3em 0em; }
.text-azul {color: #093F75}
.card {border-radius: 10px !important; word-wrap: inherit;}
.accordion-button {font-weight: bold;}
.small, small {font-size: .70em;}
.barra-rojazul {background: rgb(227,76,77);background: linear-gradient(90deg, rgba(224,78,81,1) 0%, rgba(65,33,156,1) 100%);height: 3px;}
.barra-rojazul.x2 { height: 10px; }
.barra-rojazul.x3 { height: 20px; }
.badge {padding: 0.5em 0.5em !important; font-size: .9em !important;}


/*=======================
    MENU SUPERIOR
=========================*/

nav.navbar .navbar-brand img, nav.navbar .navbar-brand {height: 50px !important;margin-right: 1.5em; padding: 0px}
.navbar-dark .navbar-nav .nav-link {color: rgba(255,255,255,1); letter-spacing: 0.04em}
nav.navbar a#encuentra, nav.navbar a#encuentra-sm  {border-radius: 30px; color: #333; background-color: #FFF; margin-left: 1em; padding: 0.7em 1em; text-decoration: none; width: 280px}
nav.navbar a#encuentra-sm {margin-left: 1em; padding: 0.7em; text-decoration: none;}
nav.navbar a#acces {padding: 0.7em; text-decoration: none; width: 170px; margin: 0px 2em}
nav.navbar a#acces img {max-width: 30px; display: inline-block; float: left;}
nav.navbar a#acces span {margin: 5px; display: inline-block; float: left;}
nav.navbar.navbar-dark, nav.navbar.navbar-light .navbar-nav .nav-separator::after {background-color: #001C41 !important}
nav.navbar .btn-claveunica {
    width: 160px;
    min-width: 160px;
    max-height: 42px;
    padding: 8px 18px 8px 15px !important;
    font-size: 16px;
    line-height: 1.6em;
    vertical-align: middle;
    background-color: #0F69C4;
    color: #FFF;
}

nav#menufiltrar .dropdown-menu{min-width: 300px}

.offcanvas-top {height: fit-content;}
.offcanvas-end {width: 50%;}
.offcanvas-header {align-items: start;}

@media (max-width: 992px) {
    #navbarNavDropdown ul li ul.sub-menu {position: relative; width: auto; display: block; padding: 0px; margin-left: 20px;}
    #navbarNavDropdown .dropdown-item {padding: 10px;}
    nav.navbar > .container-fluid {flex: 0 0 auto; width: 100%;}
    .navbar-collapse {margin-top: 1em;}
    .navbar-collapse ul li {padding-left: 2em; border-bottom: 1px solid #363636}
    .navbar-collapse ul li img {max-width: 20px !important} 
    .navbar {justify-content: end}
    .offcanvas-end {width: 90%;}

}

/*=======================
    FONDOS
=========================*/

.bg-01 {background-image: url(../img/bg-01.png); background-position: bottom right; background-repeat: no-repeat;background-size: cover;} 
.bg-02 {background-image: url(../img/bg-02.png); background-position: left; background-repeat: repeat-y;}
.bg-03 {background-image: url(../img/bg-03.png); background-position: left; background-repeat: repeat-y;}
.bg-04 {background-image: url(../img/bg-04.png); background-position: left; background-repeat: repeat-y;}
.bg-05 {background-image: url(../img/bg-05.png); background-position: left; background-repeat: repeat-y;}
.bg-nosotros {background-image: url(../img/bg-nosotros.png); background-position: right; background-repeat: no-repeat;}
.bg-ayuda {background-image: url(../img/bg-ayuda.png); background-position: right; background-repeat: no-repeat;}
.bg-terminos {background-image: url(../img/bg-terminos.png); background-position: right; background-repeat: no-repeat;}

#bg-participacion {background-image: url(../img/cat/icon-participacion-ciudadana.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-comunica {background-image: url(../img/cat/icon-comunicacion-difusion.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-ciudad {background-image: url(../img/cat/icon-ciudad-vivienda-infra.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-emprendimiento {background-image: url(../img/cat/icon-emprendimiento-innovacion.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-arte {background-image: url(../img/cat/icon-arte-cultura.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-ciencia {background-image: url(../img/cat/icon-ciencia-tecnologia.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-deporte {background-image: url(../img/cat/icon-deporte-salud-vidasana.svg); background-position: bottom left; background-repeat: no-repeat;} 
#bg-ambiente {background-image: url(../img/cat/icon-medio-ambiente.svg); background-position: bottom left; background-repeat: no-repeat;} 
@media (max-width:768px){
    .bg-01 {background-size: initial;}
    .bg-nosotros { background-position: 200px;}
    .bg-ayuda {background-position: 200px;}
    .bg-terminos { background-position: 200px;}
}

.icon-categoria {position: absolute; right: 0px; top: 100px;}

/*=======================
    COLORES
=========================*/
#categorias a .card:hover {background-color: #e0f0ff}

.bg-azul {background-color: #093f75 !important;}
.bg-azuloscuro {background-color: #063162 !important;}
.bg-celeste {background-color: #D1DCF0 !important;}

.bg-primary {background-color: #006fb3!important;}
.bg-purple {background-color: #63c!important;}
.bg-orange {background-color: #e0701e!important;}
.bg-orange-light {background-color: #ffa11b!important;}
.bg-green {background-color: #018484!important;}
.bg-verde {background-color: #079465 !important}
.bg-neutral {background-color: #EEEEEE;}
.bg-danger {background-color: #fe6565!important;}
.bg-rojo {background-color: #E22C2C !important}
.bg-rosa {background-color: #F9D5D5 !important}

.text-rosa {color: #F3ABAB}

img.tinte-danger {filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);}

.btn-fondos {color: #6c757d;border-color: #6c757d;}
.btn-fondos:hover {color: #0d6efd; border-color: #0d6efd;}
.btn-fondos img {vertical-align: initial ; filter: brightness(0);}
.btn-fondos:hover img {filter: brightness(1);}
.btn-dark {color: #6c757d;border-color: #6c757d;}
.btn-dark:hover {color: #0d6efd; border-color: #0d6efd;}

#colapfondos .collapsed .vermas {display: inline-block;}
#colapfondos .collapsed .vermenos {display: none;}
#colapfondos  .vermas {display: none;}
#colapfondos  .vermenos {display: inline-block;}

#detalles-collap .collapsed .vermas {display: inline-block;}
#detalles-collap .collapsed .vermenos {display: none;}
#detalles-collap  .vermas {display: none;}
#detalles-collap  .vermenos {display: inline-block;}

footer a {color: #fff; text-decoration: none;}
footer a:hover {color: #EE8080}


/*=======================
    Sitio PUBLICO
=========================*/

#publico-home {
    min-height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    background-image: url(../img/Banner-web-Fondos.jpg);
}
@media (max-width: 992px) {
    #publico-home {
        min-height: 250px;
        background-size: cover;
        background-position: bottom !important;
        background-image: url(../img/Banner-web-Fondos-tablet.png);
    }
}
@media (max-width: 660px) {

    #publico-home {
        min-height: 160px;
        background-size: cover;
        background-position: bottom !important;
        background-image: url(../img/Banner-web-Fondos-movil2.png);
    }
}
@media (max-width: 480px) {

    #publico-home {
        min-height: 120px;
        background-size: cover;
        background-position: bottom !important;
        background-image: url(../img/Banner-web-Fondos-movil.png);
    }
}


#fondodestacado .card, #otrosfondos .card {height: 100%}
#categoriasdestacadas .card {min-height: 160px}
#otrascategorias .card {height: 90%}

#lineatiempo .linea {border-bottom: 2px dashed #ccc; margin-bottom: -22px}
#lineatiempo i {margin-top: -15px; margin-bottom: -4px; display: block;} 
#detalles-collap .flecha {margin-bottom: -25px; text-shadow: 0px 2px}
#detalles-tab .nav-pills .nav-link {padding: 2em 1em;}
.nav-pills .nav-link {color: #333; padding: 1em; border-bottom: 5px solid #ccc; border-radius: 0px }
.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {color: #0a58ca;background-color: #fff; border-bottom: 5px solid #0a58ca}
#destacados a,
#categorias a {text-decoration: none !important;}
.grilla a {text-decoration: none !important; }
.grilla .card {height: 95% }
.grilla .card:hover {transform: scale(1.03); transition: 0.2s; border: 1px solid #0d6efd}
.grilla .card:hover .border-secondary { color:#0d6efd ; border-color: #0d6efd !important}
.grilla .card .titular {border-radius: 10px; height: 100%; background-size: cover; background-image: url(../img/bg-card.svg); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; transition: 0.2s; border: 1px solid #fff}
.grilla .card.cerrados .titular{background-image: url(../img/bg-card-cerrados.svg); }

@media (max-width:768px){
    #publico-home{background-position: -50px;}
    #detalles-tab .nav-pills .nav-link {padding: 1em;}
    .grilla .card .titular {background-image: inherit; background-color: #093f75; margin-bottom: 10px; border-bottom: 8px solid #9fc3e7;}
    .grilla .card.cerrados .titular {background-image: inherit; background-color: #bbb; margin-bottom: 10px; border-bottom: 8px solid #ccd2d9;}
}

/*=======================
    Sitio  PRIVADO
=========================*/
#privado-home{background-image: url(../img/bg-privado-home.svg);background-size: cover;background-position: center;background-color: #004e95;min-height: 250px;}
#btn-ayuda {position: fixed; bottom: 2em; right: 1em; z-index: 999; display: none;}
#lineaprogreso .linea {border-bottom: 2px solid #ccc; margin-bottom: -13px; margin-left: 25%;}
#lineaprogreso .linea {}

.btn-inicio img {height: 14px;margin-top: -3px;margin-right: 5px;}
.slide-video {display: flex; height: auto; overflow-x: scroll; overscroll-behavior-x: contain; scroll-snap-type: x proximity;}
.slide-video-card {border-right: 1px solid #ccc; position: relative; width: 70%; min-width: 600px; max-width: 1000px; height: auto; padding: 0 15px;}
.dataTables_length {display: none;}
.dataTables_wrapper .dataTables_filter {float: left !important; text-align: left !important;margin-bottom: 30px;}
.dataTables_wrapper .dataTables_filter input { border-radius: 50rem!important; padding: 1rem!important; font-size: 1rem;}

@media (max-width:768px){
    #privado-home{background-position: top;min-height: 250px;}
    .slide-video {display: inline-block; overflow-x: inherit; overflow-y: scroll; height:300px }
    .slide-video-card {width: 100%; min-width: inherit; border-right: inherit; border-bottom: 1px solid #ccc; margin-bottom: 20px}
}



/*=======================
    forms detalles
=========================*/

.encuentra {position: relative;}
.lupa {color: #191919;position: absolute;width: 20px;height: 20px;right: 30px;top: 50%;transform: translateY(-50%);} 

form#RadioNaturalJuridica .form-group label .boton{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
  border: 2px #333 solid;
  border-radius: .5em;
  padding: 1em;
  font-size: 1.5em;
}
form#RadioNaturalJuridica .form-group label input[type="radio"]:checked+.boton {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  opacity: 1.0;
  border: 2px solid #3164f3;
  color: #3164f3;
}
form#RadioNaturalJuridica .form-group label img {margin-right: 10px;}
form#RadioNaturalJuridica .form-group  input[type="radio"]{display: none;}

form#EligePersonalidad .form-check label{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
  border: 2px #333 solid;
  border-radius: .5em;
  padding: 1em;
}
form#EligePersonalidad .form-check  input[type="radio"]:checked +label{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  opacity: 1.0;
  border: 2px solid #3164f3;
}
form#EligePersonalidad .form-check label {display: flex;text-align: left;}
/*form#EligePersonalidad .form-check  input[type="radio"]{display: none;}*/

.form-control, .form-select {border: 1px solid #898989;}

/*Tabla buscar*/

table#buscarfondo { 
    width: 100%; 
    border-collapse: collapse; 
        overflow-x: auto;
  }
  table#buscarfondo td:nth-child(1) {
    background-color: #ebebeb;
  }

@media (max-width: 768px) {
  table#buscarfondo thead {
    display: none;
  }
  table#buscarfondo td {
    display: block;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px dotted #ccc;
    font-weight: bold;
  }
  table#buscarfondo.no-style td {
    display: table-cell !important;

  }
  table#buscarfondo td:before {
    content: attr(data-label);
    float: right;
    text-transform: uppercase;
    font-weight: normal;
    margin-left: 100%;
    margin-bottom: 10px
  }
  table#buscarfondo tr {
   border-bottom: 20px solid #ffffff;
  }
  .filtro-2 {display: none}
}

@media (min-width: 768px) and (max-width: 1040px){
  table#buscarfondo, th { 
    padding: 3px; 
    font-size: 14px;
  }
}
