/* #ADFE30 rgb(173, 255, 47)  greenyellow ->  #E5F9C0 */ /* brown -> #965916 */ /*lightgreen*/
@property --naranja-inst { syntax: "<color>"; inherits: false; initial-value: #eb8b22; }
@property --naranja-llight { syntax: "<color>"; inherits: false; initial-value: #ffa600; }

@property --sel-bgcolor { syntax: "<color>"; inherits: false; initial-value: #965916; }
@property --sel-bgcolor-g { syntax: "<color>"; inherits: false; initial-value: #965916; }


input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
    height: 2em;
    font-weight: 600;
    font-size: 1.05em;
    outline: #eb8b22;
    border: 1px solid #eb8b22;
    background-color: transparent;
    padding-left: 0.5em;
}
input[type="date"] {
    height: 2em;
    font-weight: 600;
    font-size: 1.05em;
    outline: #eb8b22;
    border: 1px solid #eb8b22;
    background-color: transparent;
    padding: 0.25em 0em 0.25em 0.25em;
}

input::placeholder { /* Most modern browsers support this now. */
   color:    #999;
   font-size: 0.69em;
   font-size: 0.8em;
   font-weight: 400;
}
input[type="text"]:focus {
    color: #FFF;
    outline: none;
    font-weight: 600;
    font-size: 1.1em;
    background-color: var(--sel-bgcolor);
    border: none;
}
input[type="date"]:focus {
    outline: none;
    font-weight: 600;
    font-size: 1.1em;
    background-color: var(--sel-bgcolor);
    border: none;
}

.checklarge {
  height: 16px;
  width: 16px;
  accent-color: #9d3039;
}

.radio {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: left;
}
.radio input {
    opacity: 0;
/*    display: snone;*/
}
.radio input + span {
  display: inline-block;
  position: relative;
}
.radio input + span:before {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: -21px;
  border-radius: 50%;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #eb8b22;
  background: transparent;
}
.radio input + span:after {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  background: #222;
  position: absolute;
  border-radius: 50%;
  top: 7px;
  left: -17.90px;
  opacity: 0;
  transform: scale(0, 0);
  transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.radio input:checked + span:after {
  opacity: 1;
  background: #000;
  transform: scale(1.1, 1.1);
}

::-webkit-datetime-edit { padding: 0.25em; }
::-webkit-datetime-edit-fields-wrapper { background: transparent; }
::-webkit-datetime-edit-text { color: #BBB; padding: 0 0.25em; }
/* ::-webkit-datetime-edit-month-field { color: #999; }
::-webkit-datetime-edit-day-field { color: #999; }
::-webkit-datetime-edit-year-field { color: #999; } */
::-webkit-inner-spin-button { display: none; }
/* ::-webkit-calendar-picker-indicator { background: orange; } */

/* ::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button */

::backdrop {
    background-image: linear-gradient( 0deg, #000, #BBB );
    opacity: 0.80;
}

.dataErr {
    background-color: #FF000033 !important;
}

.msgErr {
    color: #FF0000 !important;
}

.msg {
    color: #000000 !important;
}

input[type='radio'] {
    accent-color: #eb8b22;
    border: 2px solid #eb8b22;
}
input[type='radio']:checked:after {
    background-color: #eb8b22;
    accent-color: #eb8b22;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid red;
    border-radius: 50%;
    outline: none;
}
input[type='radio'] label:before {
    accent-color: #eb8b22;
    border: 2px solid #eb8b22;
}  
select {
    /* appearance: none; */
    color: #000;
    background-color: transparent;
    font-size: 1.05em;
}
select:focus {
    color: #FFF;
    background-color: var(--sel-bgcolor);
}
select option {
    background-color: var(--sel-bgcolor);
}
#contenidoView {
    /* flex: 1 1 0em; */
    display: flex;
    height: auto;
    min-height: 75%;
    /* min-height: 8em; */
    margin-top: 1em;
    scroll-behavior: auto;
    overflow: hidden;
    margin-bottom: 0em;
    flex-direction: column;
    /* padding:0.5em 0.5em 1em 0.5em; */
    ::-webkit-scrollbar{
        opacity:0;
        background: transparent;
    }
}
#menuToggleIcon {
    display: none;
}
.movileOnly {
    display: none;
}
#menuPerfilUsuario {
    display: none;
}
#testimonioView p {
    display: block;
    margin: 1em 1em 0em 1em;
    font-size: 1.5em; font-weight: 700;
}
.marcoLegal {
    color: #FFF;
    background-color: #000;
    text-align: center;
}
body {
    display: flex;
    margin: 0px;
    flex-direction: column;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    text-align: center;
    background: #f8f8f8; /* Old browsers */
    background: linear-gradient(to bottom,  #f8f8f8 0%,#ccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.logo {
    flex-grow: 0;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
}
.logo img {
    width: 230px;
    max-height: 6em;
    position: relative;
    bottom: -0.5em;
    filter: drop-shadow(4px 4px 10px #bbbbbb);
    /* width: 100%; */
}
header {
    display: flex;
    background-color: #FFFFFFBB;
}
.menu {
    z-index: 10;
    display: flex;
    flex-grow: 3;
    flex-direction: column;
    font-size: 1.0em;
    font-weight: 500;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.menuPrincipal {
    color: #fff;
    display: flex;
    background-color: #eb8b22;
    justify-content: space-evenly;
    vertical-align: middle;
    border-radius: 0px 5px 0px 0px;
}
.menuPrincipal p {
    margin: 0em;
    height: 2.5em;
    padding: 0em 1em;
    line-height: 2.3em;
}
.menuPrincipal p:hover {
    color: #000;
    background: linear-gradient(0deg, black, 05%, transparent 05%);
    /* filter: drop-shadow(0px 0px 6px #000); */
/*    border-bottom: #000 solid 3px; */
    /* background-color: greenyellow; */
    /* height: 100%; */
}
.menuPrincipal.menuSelected p:hover {
    color: #000;
    background: linear-gradient(0deg, black, 05%, transparent 05%);
}
.menuServicios {
    display: flex;
    justify-content: space-evenly;
    color: #FFF;
/*    color: #8f8981;*/
    background-color: #8E8E93;
/*    background-color: #e0dfe3;*/
    /* border-bottom: 1px, solid, #000; */
    border-radius: 0px 0px 5px 0px;
}
.menuServicios p {
    margin: 0em;
    padding: 0em 1em;
    height: 2.5em;
    line-height: 2.5em;
}
.menuServicios p:hover {
    color: #000;
    /* filter: drop-shadow(0px 0px 6px #000); */
    /* background-color: #333333; */
/*    border-bottom: #000 solid 3px; */
    /* background-color: greenyellow; */
    background: linear-gradient(0deg, black, 05%, transparent 05%);
}
.menuSelected {
    color: #FFF;
    background: linear-gradient(0deg, var(--sel-bgcolor) 3%, var(--sel-bgcolor), 60%, var(--sel-bgcolor-g) );
}
.menuItem.menuSelected:hover {
    color: #FFF;
    background: linear-gradient(0deg, var(--sel-bgcolor) 3%, var(--sel-bgcolor), 60%, var(--sel-bgcolor-g) );
}

#contenidoView.plusInfo {
    flex-direction: row;
}
#serviciosView {
    display: flex;
    /* flex: 0 1 0px; */
    gap: 0.9em;
    margin: 0.6em;
    align-items: flex-start;
    align-content: flex-start;
}
#contenidoView.plusInfo #serviciosView {
    width: 30%;
    flex-direction: column;
}
#contenidoView.plusInfo #infoView {
    width: 60%;
    flex-direction: column;
}
#infoView {
    width: auto;
    display: inline-block;
    padding: 1em;
    /* background-color: greenyellow;           */
}
#formulario {
    width: auto;
    margin-left: 0.6em;
    margin-right: 0.6em;
    display: inline-block;
/*    padding: 0.6em;*/
/*     background-color: greenyellow;           */
}
.servicio {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
    /* flex: 0 1 33%; */
    flex-direction: column;
    box-sizing: border-box;
    color: #FFF;
    background-color: #eb8b22;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    text-align: left;
    align-items:flex-start;
    border-radius: 9px;
    justify-content: left;
    /* min-height: 66px; */
}
.servicio:hover {
    margin-top: -10px;
    border-bottom: 6px solid #000;
}
.servicio img {
    width: 100%;
    border-radius: 9px;
}

.servicio .boton {
    display: inline-block;
    font-size: 0.8em;
    color: #FFF;
    background-color: transparent;
    margin: 0.5em 0em 1em 1em;
}
.servicio .subservicio {
    /* flex-grow: 1; */
    width: 100%;
    /* right: 0px;
    left: 0px; */
    /* padding: 0.6em; */
    background-color: #00000099;
    border-bottom: solid 0.3em #eb8b22;
    /* padding: -6px; */
    /* margin: 6px; */
    box-shadow:
            inset 0px 8px 8px -5px rgba(0, 0, 0, 0.5), /* Top inner glow */
            inset 0px -5px 5px -5px rgba(0, 0, 0, 0.5); /* Bottom inner glow */
}
.servicio:hover div img {
    /* border-bottom: 1px solid #000; */
    filter: drop-shadow(0px 4px 10px #00000066);
}
.servicio p {
    padding: 0.6em;
    margin: 0px;
}

.servicio_Img {
    text-align: left;
        flex: 1 1 25%;
        width: unset;
}
.servicio_Img img {
    width: 100%;
    /* text-align: left; */
    border-radius: 9px;
}
.servicio_Tit {
    flex: 0 1 100%;
    margin: 0.3em;
    margin-left: 0.3em;
    margin-right: 0.3em;
    width:100%;
    height: auto;
}

.servicioMini {
    flex-shrink: 1;
    flex-grow: 0;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5em;
    /* height: auto; */
    background-color: #eb8b22;
    display: none;
}
.servicioMini .servicio_Img img {
    width: 20%;
}
.servicioMini .servicio_Tit {
    font-size: 1.2em;
    flex: 0 1 100%;
    height: 1em;
}

.servicio_Des {
    vertical-align: middle;
    align-self:center;
 }
.servicioMini:hover div img {
    /* border-bottom: 1px solid #000; */
    filter: drop-shadow(0px 4px 10px #00000066);
}
/* .servicioMini .subservicio {
    display: none;
} */



.boton {
    all: unset;
    /* display: inline-block; */
    align-self: flex-start;
    /* bottom: 10px;  */
    width: auto;
    border: solid 1px #FFF;
    border-radius: 6px;
    padding: 6px;
    width: auto;
    text-align: center;
    /* margin: 0 auto; */
    /* margin-top: auto; */
    padding: 0.5em;
    color: #FFF;
    background-color: #eb8b22;
    margin: 0.5em 0em 1em 1em;
}
.boton:hover {
    color: #FFF;
    border-color: #000;
    background-color: var(--sel-bgcolor);
}
.desactivado {
    background-color: gray;
}
.desactivado:hover {
    background-color: gray;
}
.asesoriaBtn {
    background-color: transparent;
}
.cuestionario_step {
    text-align: left;
/*    width: 100%;*/
    margin: auto;
    padding: 0em 0.9em 0.9em 0.9em;
    border-radius: 0.5rem;
    border: 1px solid #999;
    /* margin-top: 1em; 
    padding-left: 25px;
    margin-right: 1em; */
    /* margin-bottom: 1em; */
}

fieldset {
    background-color: #FFFFFF99;
}
fieldset.cuestionario_step legend {
    height: 19px;
    bottom: 10px;
    position: relative;
    color: #eb8b22;
    font-weight: 700;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    text-shadow: 0 0 1px #666666FF;
    background-color: #FFFFFF99;
}
/*div .cuestionario_step legend {*/
/*    font-weight: 700;*/
/*    position: relative;*/
/*    bottom: 10px;*/
/*}*/

.inLabel {
    color: #444;
    margin-bottom: 5px;
}

#footerView {
    position: relative;
    bottom: 0;
    width: auto;
    height: 130px;
    padding: 0;
    margin: auto 1em 1em 1em;
    border-top:dashed #bbb 1px;
    font-size: 0.9em;
}
#footerView a {
color:#a798a0;
text-decoration:none;
display:block;
}
#footerView a:hover {
color:#eb8b22;
border-color:#eb8b22;
}
#footer_menu { }
#footer_menu a {
    width: 100%;
    padding: 3px;
    border-bottom: dashed #a798a0 1px;
}

#footerView > div {
    float:left;
    width:22%;
    margin:1em 1em 1em 1em;
}
#footerView > div > a {
    width: 80%;
    padding: 6px;
    border-bottom: dashed #a798a0 1px;
}

#footerView > div > img {
    display: block;
    width: 100%;
}
#footer_usuario h3, #footer_contenido h3 {
    color: #545456;
    font-size: 1.2em;
    font-weight: normal;
    margin: 3px 0;
}
#footer_usuario span{
    display:inline-block;
    width:14px;
}
#footer_usuario input{
    width:80%;
    background:none;
    color:#545456;
    border:none;
    border-bottom:dashed #a798a0 1px;
    font-size:1.2em;
    margin-left:14px;
}

#author {
    position: relative;
    bottom: 0em;
    width: auto;
    background: #8E8E93;
    color:#DDD;
    cursor:pointer;
    padding:2px;
    font-size: 0.8em;
    text-align:center;
}

dialog {
    background-color: #FFFFFF;
    box-shadow: 0 0 1em black;
}

/*
 peter makhuch (macug)
 */

@media (prefers-color-scheme: dark) {
    @property --sel-bgcolor {
      syntax: "<color>";
      inherits: false;
      initial-value:  #965916;
/*      #ADFE30;*/
    }
    input[type="text"]:focus {
        color: #FFF;
        border-width: 0.5px;
    }

    body {
        color: #BBB;
        background: #000;
    }
    header {
        display: flex;
        background-color: #000;
    }
    .logo img {
        max-height: 6em;
        position: relative;
        bottom: -1.2em;
        filter: none;
    }

    input {
        color: #FFF;
    }
    input::placeholder {
        color: #FFF;
        opacity: 0.40;
        font-size: 0.8em;
        font-weight: 400;
    }
    select {
        color: #FFF;
        border-color: #ffa600;
        padding: 5px;
/*        #FFFFFF66;*/
        -webkit-appearance: none;
    }
    fieldset.cuestionario_step {
        background-color: #FFFFFF16;
        border-color: #FFFFFF33;
    }
    fieldset.cuestionario_step legend {
        height: 19px;
        bottom: 10px;
        position: relative;
        color: #ffa600;
        font-weight: 700;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        border-radius: 0.5rem 0.5rem 0rem 0rem;
        text-shadow: 0 0 1px #666666FF;
        background-color: #FFFFFF16;
    }
    .inLabel {
        color: #666;
    }
    .radio input:checked + span:after {
      opacity: 1;
      background: #FFF;
      transform: scale(1.2, 1.2);
    }
    dialog {
        background-color: #000000;
    }
}


@media all and (max-width:960px) {
    .mobile_only{
        display:block !important;
    }
    .desktop_only{
        display:none !important;
    }
    body{
        font-size: 16px;
/*        background: #f8f8f8 !important;*/
        linear-gradient(to bottom,  #f8f8f8 0%,#dddddd 100%);
    }
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        box-shadow: rgba(0,0,0,0.3) 0 0 1em;
    }
    #contenidoView {
        margin-top: 3em;
        padding: 0;
    }
}
@media (max-width: 1080px) {
    body {
        font-size: 0.8em;
        /* display: flex wrap;
        background-color: green; */
        linear-gradient(to bottom,  #f8f8f8 0%,#dddddd 100%);
    }
    .logo {
        flex-grow: 0;
        /* padding: px; */
        padding-left: 1em;
        padding-right: 1em;
        justify-content: center;
        margin-left: auto;
    }
    .logo img {
        max-height: 60px;
    }
    /* .menu div p {
        display: none;
    } */
    #menuToggleIcon {
        height: 2.5em;
        width: 2.5em;
        margin-left: 1.5em;
        margin-top: 1em;
        display: inline-block;
    }
    #menuSpace {
        height: 6.5em;
    }

    .menu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 4.2em;
        left: 0;
/*        background-color: #111111BB;*/
        overflow-x: hidden;
/*        transition: 0.5s;*/
        text-align: left;
/*        border-right: 3px solid #000;*/
    }
    #menuPerfilUsuario {
        display: inline-block;
    }

      .menu div {
        display: flex;
        flex-direction: column;
        padding: 30px 0px 0px 0px;
        /* text-decoration: none;
        font-size: 1.3em;
        color: #818181; */
        transition: 0.3s;
      }
      .sidenav a:hover {
        color: yellowgreen;
        border-bottom: #FFF solid 3px;
        background-color: #333;
      }
      .menu a:hover {
        color: #FFF;
        background-color: var(--sel-bgcolor);
      }
      .menu .closebtn {
        position: absolute;
        top: 50;
        right: 10px;
        font-size: 36px;
        margin-left: 50px;
      }
      .menuSelected {
          color: #000;
          background: linear-gradient(90deg, var(--sel-bgcolor), 65%, #FFFFFFBB);
      }
      .menuPrincipal {
          color: #fff;
          display: flex;
          background-color: #eb8b22;
          justify-content: space-evenly;
          vertical-align: middle;
          border-radius: 0px 0px 0px 0px;
      }
      .menuPrincipal p {
          height: 3em;
          line-height: 3em;
          vertical-align: middle;
      }
      .menuPrincipal p:hover {
          color: #000;
          background: linear-gradient(90deg, black 1%, transparent 1%);
      }
      .menuPrincipal.menuSelected p:hover {
          color: #000;
          background: linear-gradient(90deg, black, 05%, #FFF 05%);
      }
      .menuServicios p:hover {
          color: #000;
          background: linear-gradient(90deg, black, 01%, transparent 1%);
      }
      .menuItem.menuSelected:hover {
          color: #000;
          background: linear-gradient(0deg, var(--sel-bgcolor), 45%, #FFF);
      }
      .menu div a.menuServicio {
        color: #ffa600;
        flex-direction: column;
        padding: 0px;
        border-radius: 0px;
      }
      .menuServicio P {
          height: 3em;
          line-height: 3em;
          vertical-align: middle;
      }

      .movileOnly {
          display: inline-block;
      }
      
      @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
      }


    #contenidoView {
        height: auto;
    }
    #testimonioView p {
        font-size: 1.2em;
        display: block;
        margin: 0em 1em 0.5em 1em;
    }
    #contenidoView.plusInfo {
        flex-direction: column;
    }
    .servicio {
        flex: 1 1 auto;
        align-items: flex-start;                
        /* min-width: 20em; */
    }
    #serviciosView {
        flex: 1 1 auto;
        gap: 1.5em;
        flex-direction: column;
        margin: 1em 0.6em 1em 0.6em;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .servicioMini {
        /* display: none; */
        flex: 0 1 100%;
        /* height: 290px; */
    }
    #contenidoView.plusInfo #serviciosView {
        width: auto;
        flex: 1 1 auto;
        gap: 1.5em;
        flex-direction: column;
        margin: 1em 0.6em 1em 0.6em;
        justify-content: flex-start;
        align-items: flex-start;
    }    
    #infoView {
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: auto;
        display: inline-block;
        /* background-color: greenyellow;           */
    }
    #contenidoView.plusInfo #info {
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: auto;
        display: inline-block;
    }
    #footerView {
        display: none;
    }
    
}