/*
https://colourcontrast.cc/
*/





:root {
    --color-prime: #2eab22;
    --color-prime2: #00796b;
    --color-prime3: #4caf5026;
    --color-aux: #f5f7fa;
    --color-aux2: #eee;
    --color-aux3: #dee2e6;
    --color-extra: #263238;
    --color-extra2: #546E7A;
    --color-extra3: #666;
    --color-extra4: #9E9E9E;
    --color-out: #CC0000;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}






body {
    margin:0;
    color: black;
    font-family: "Inter", sans-serif;
/*    font-optical-sizing: auto; */
    font-weight: normal; 
    font-style: normal;
    background-color: var(--color-aux); 
    background-image: url('/assets/image/areus-bg.png');
}



section {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 0.5em;

}

header {
    padding: 1em 0;
    margin-top: 0.3em;
    margin-bottom: 2em;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

#header-bar {
    margin: 0 auto;
    max-width: 1200px;
    display:flex;
    align-items: center ;
    justify-content: space-between;
}



section:first-of-type {
    min-height:50vh;
}



h1,h2,h3,h4,h5,h6 {
    font-family: "Montserrat", sans-serif;
/*    font-optical-sizing: auto; */
    font-weight: normal; 
    font-style: normal;
    line-height: 1.2em; 
}


hr {
    border: none;
    height: 1px;
    color: var(--color-aux3);  
    background-color: var(--color-aux3);  
    margin: 2em 0;
}

.card {
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}



article {
    padding: 1em 0;

}

footer {
    margin-top:4em;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

#footer-content {
    background-color: var(--color-extra3);
    padding: 1em;
    padding-bottom:3em;
}




#menu-main {
    padding: 1em;
    margin-bottom:1em;
}

#menu-main a {
    text-decoration: none;
    margin: 1em;
    color: black;
}

#menu-main a.active {
    color: var(--color-prime2);
}

#menu-main a:hover {
    color: var(--color-prime);
}



ul {
    /*list-style-type: square; */
}

li img {
    vertical-align: text-bottom;
}


.cardg ol {
    padding-left: 2em;
}

.cardg ol li{
    padding: 0.6em;
}

form[name="entrada"] > div {
    padding: 0.5em 0;
}


a {
    color: var(--color-prime);
    text-decoration: none; 
}


legend {
    font-weight: bold;
}

label {
    display:block;
    padding:0.3em 0;
    text-transform: uppercase;
    font-weight: bold;
}

input, select, textarea {
    border: 1px solid var(--color-aux3);
    padding: 0.75em;
    border-radius: 0.2em;
    box-shadow: inset 0 1px 11px rgba(172,172,172,0.2);
}

input {
    width: 98%;

}


input[type='checkbox'] {
    width: auto;
}

textarea {
    width:100%;
}

select {
    width:100%; 
}




fieldset {
    padding: 0 2em 0.5em 2em;
    margin: 2em 0;
}

details {
    margin: 1em 0;    

}

summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--color-prime);
}

input:invalid, select:invalid, textarea:invalid {
    border-bottom: 0.3em solid var(--color-out);
}


input[type="checkbox"]:invalid {
    border:0;
    outline: 0.2em solid var(--color-out);
}










.link-button {
    color: var(--color-prime);
    border:1px solid var(--color-prime);
    border-radius: 0em;
    padding:0.4em;

}






table {
    margin: 1em 0;
    width:100%;
    margin-bottom: 2em; 
    border-collapse: collapse;
}

table a {
    font-weight: bold;
    text-decoration: none; 
}


table a:hover {
    text-decoration: underline; 
}


table tr {
    border-bottom: 1px solid var(--color-aux3);
}

table td {
    padding: 1em;
    vertical-align:middle;
}

table th {
    padding: 1em;
    text-align: left;
}

tfoot td {
    padding: 1.5em 0.5em;
    color: var(--color-extra3);
}


.table-center td {
    text-align: center; 
}

.table-center th {
    text-align: center; 
}

table td img {
    vertical-align: text-bottom;
}




























#orcid-id-logo {
    height: 1.5em;
    vertical-align: bottom;
}






.toolbar {
    display:flex;
    flex-direction: column ;
	align-items: center;
}

.toolbar > * {
    margin: 0.2em;
}


.toolbar a {
    color: var(--color-extra2);
    padding:0.5em 1.5em;
    text-decoration: none;
    border-radius: 8px;
}

.toolbar img {
    vertical-align: text-bottom;
}


.toolbar a:hover {
    background-color: var(--color-aux);
}

a.toolbar-active {
    background-color: var(--color-prime2);
    color: white;
}

a.toolbar-active:hover {
    background-color: var(--color-prime2);
    color: white;
}



a.toolbar-disabled {
    cursor: default;
    color: var(--color-aux3);
}

a.toolbar-disabled:hover {
    background-color: white; 
    cursor: default;
}





.div-subnabs {
    margin: 1em 0;
    padding: 0 0.5em;
}


blockquote {
    border: 1px solid var(--color-aux2);
    border-radius: 0.2em; 
    padding: 1em;
    margin: 0.5em;
}


/*
.submit-gen {
    font-weight: bold;
}
.submit-gen:disabled {
    font-weight: initial; 
    background-color: var(--color-aux3);
    border-color: var(--color-aux3);
}

.submit-anexo {
    font-weight: bold;
}
.submit-anexo:disabled {
    font-weight: initial;
    background-color: var(--color-aux3);
    border-color: var(--color-aux3);
}
*/



/* filtros de color para imagenes */
/* https://cssfilterconverter.com/ */
/* https://isotropic.co/tool/hex-color-to-css-filter */
/* filter: invert(87%) sepia(32%) saturate(3860%) hue-rotate(58deg) brightness(87%) contrast(90%); */
/* filter: invert(27%) sepia(97%) saturate(1766%) hue-rotate(85deg) brightness(97%) contrast(79%); */
/* filter: invert(58%) sepia(11%) saturate(3528%) hue-rotate(69deg) brightness(88%) contrast(88%); */

.icon-green {
    filter: invert(51%) sepia(22%) saturate(1718%) hue-rotate(67deg) brightness(100%) contrast(88%);
}

.icon-grey {
    filter: invert(58%) sepia(30%) saturate(0%) hue-rotate(145deg) brightness(97%) contrast(101%);
}

.icon-white {
    filter: invert(100%) sepia(51%) saturate(95%) hue-rotate(72deg) brightness(107%) contrast(100%);
}

.icon-light {
    /* filter: brightness(0) saturate(100%) invert(80%) sepia(84%) saturate(1%) hue-rotate(172deg) brightness(101%) contrast(97%); */
    filter: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(4%) hue-rotate(154deg) brightness(96%) contrast(97%)
}







.cardg,
div.solic-elem,
div.alert-info {
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding:2em 3em;
    margin: 2em 0 ;
}




div.cardg:empty {
	display: none;
}





div.alert-info {
  border-bottom: 0.6em	solid var(--color-prime);
  border-radius: 0;  
}

div.alert-info h3 {
    font-weight: bold;
}






dialog {
    max-width: 1200px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding:2em 3em 2em 3em;
    border: 1px solid var(--color-extra);

}

/*
dialog h1,h2,h3 {
    font-weight: bold;
}
*/
dialog a {
    color: var(--color-prime);
    font-size: larger;

}

.dialog-x {
  color: var(--color-extra4);
  font-weight: bold;
  font-size: larger;
  cursor: pointer;

}

.dialog-action {
    text-align: center;
    padding: 1.5em 1em 1em 1em;
    
}

.dialog-close {
    border: 0;
    color: var(--color-prime);
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.2em;
    cursor: pointer;
    font-size: larger;
    border: 1px solid  var(--color-prime);

}




.go-back a,
.dialog-action a,
#reg-interv a,
#confirm-presentar{
    margin: 0 1.2em;
    background-color: var(--color-prime);
    color: white;
    padding:0.4em;
    border-radius: 0.2em;
}

.go-back a {
    margin: 1em 0;
}

.go-back {
    padding: 1em 0;
}

#reg-interv a{
    margin:1em 0;
}
















.field-group {
    margin: 1em 0 2em 0;

}

.field-group p{
    margin:0;
    padding:0;
/*    width:100%; */
}

.cardh {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
}

.cardh > * {
    flex: 1 1 auto;
    margin: 0.5em 0;
}



.fgroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: end;
  margin: 2em 0;
}

.fgroup > * {
    flex: 1 1 100%;
    margin:0;
}


.gap3 {
    gap:3em;
}




#sec-registro h4,
#sec-solicitud h4,
dt {
    font-weight: bold;
    margin: 0em;
    padding-bottom:0.5em;
    text-transform: uppercase;
    font-family: "Inter", sans-serif;
}



#sec-registro p,
#sec-solicitud p,
dd {
    margin: 0.3em 0 2em 0;
    background-color: var(--color-aux2);
    padding:0.5em;
    border-radius: 0.3em;
    border: 1px solid var(--color-aux3);
}

#sec-registro p:empty,
#sec-solicitud p:empty,
dd:empty {
    background-color: var(--color-aux);
    border: 1px solid var(--color-aux3);
    min-height: 1.3em;
}

#sec-convocatorias {
    font-size: medium;
}


#sec-convocatorias div > p a {

}

#sec-convocatorias div > p {
    margin: 1.5em 0;
}




#sec-presentar dt {
    font-weight: bold;
    margin-top:  1em;
    margin-bottom:  0.5em;
}

#sec-presentar dd {
    margin:  0.5em 2em;
 
}




.disabled-elem {
/*    padding: 1em; */
}
.disabled-elem, .disabled-elem * {
    pointer-events: none;
    background-color: var(--color-aux);
}







input::file-selector-button {
    margin-top: 0em;
    font-weight: bold;
    color: white;
    padding: 0.5em;
    border: thin solid var(--color-extra4);
    background-color: var(--color-extra4);
    border-radius: 0.2em;
}




input[type=submit],button[type=submit] {
    width: auto;
    box-shadow: initial;
    font-size: large;

    color: white;
    background-color: var(--color-prime);
    padding:0.5em;
    border: 1px solid var(--color-prime);  
}

input[type=submit]:hover,button[type=submit]:hover {
    transform: scale(1.04);
}







input[type=submit]:disabled,button[type=submit]:disabled {
    font-weight: initial; 
    background-color: var(--color-aux3);
    border-color: var(--color-aux3);
}

input[type=submit]:disabled:hover,button[type=submit]:disabled:hover {
    transform: none;
}





input[type="date"], input[type="number"], input[type="tel"] {
    max-width: 10em;
}
/*
input[type="email"] {
    max-width: 20em;
}
*/
input[type="tel"] {
    display: block;
}


input#fLectura {
    max-width: 95%;
}


input[type="radio"] {
    width: initial;
    margin-right: 2em;
}

#input-total {
    -moz-appearance: textfield; 
    border: 0;
}




#link-solicitud {
    padding: 0.3em;
    font-size: small;
    border: 1px solid var(--color-prime);
    margin: 0.5em;
    float: right;
}


.google-trans {
    float:right;
}


.generico {
    /*padding: 0 0 1.5em 0; */
}





/*
.nav-tabs .nav-link {
    color: var(--color-prime);
}

.nav-tabs .nav-link:hover {
    color: var(--color-prime2);
}


.nav-tabs .nav-link.active {
    color: black;
}

*/

nav.tabs {
    padding: 0;
    border:1px solid var(--color-aux3);
    border-width: 0 0 1px 0;
    display:flex;
    flex-wrap: nowrap;
}

nav.tabs button.tab-active {

    border-width: 1px 1px 0 1px;
    border-radius:0.3em 0.3em 0 0;
    border:1px solid var(--color-aux3);
    border-bottom:1px solid white;

    color: var(--color-prime2);
}


nav.tabs button {
    cursor: pointer;
    padding: 1em;
    background-color: white;
    font-size: 1em;
    border:0px solid var(--color-aux3);
    border-bottom:1px solid var(--color-aux3);
    margin-bottom: -1px;
}




nav.tabs button:hover {
    color:var(--color-prime);
}


#tabs-solic {
    font-size: small;
    margin-top: 0.5em;
}











.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown img {
    vertical-align: text-bottom;
}


.dropbtn {
    border: none;
    cursor: pointer;
    margin: 0.5em;
    color: var(--color-extra);
    background: var(--color-aux);
    border-radius: 1.2em;
    padding:0.6em;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-aux);
    min-width: 12em; 
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content div {
    padding: 0.5em;
    cursor: pointer;
}

.dropdown-content div:hover {
    background-color: var(--color-aux);
}






.login-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.login-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-prime2);
    transform: translateY(-4px);
}

.login-card ul li {
    margin: 1em 0;
}


.login-card a:hover {
    color: var(--color-prime2);
    text-decoration: underline;
}


















div.solic-elem img {
    vertical-align: text-bottom;
}





div.sconv {
    display: flex;
    justify-content: space-between;
}


h3.sconv-desc {
    font-weight: bold; 
}

h4.sconv-year,
h4.sconv-est {
    padding: 0.5em 1em;
    border-radius: 1em;
    display: inline;
    margin:0;
}

h4.sconv-year {
    background: var(--color-aux);
}

h4.sconv-est {
    color: var(--color-extra);
    background: var(--color-prime3);
    text-transform: uppercase;
}


div.solic-info {
    display: flex;
    gap: 2em;
}

div.solic-info h5 {
    font-size: 14px;
    margin: 0;
}






div.solic-view,
div.solic-edit,
div.solic-aceptar,
div.solic-aceptada,
div.solic-sol,
div.solic-cursada {
    display: inline;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    margin: 0.5em; 

}



div.solic-view,
div.solic-sol {
    color: white;
    background-color: var(--color-prime2);
}







div.solic-edit,
div.solic-aceptar,
div.solic-aceptada {
    color: var(--color-extra);
}




div.solic-edit,
div.solic-aceptar {
    background-color: var(--color-aux);
}


div.solic-edit:hover,
div.solic-aceptar:hover {
    background-color: var(--color-prime3);
}



div.solic-cursada {
    color: var(--color-extra);
    background-color: var(--color-aux);
}


#sec-convocatorias hr {
    margin: 4em 0;
}
#sec-convocatorias hr:first-of-type {
    margin: 2em 0;
    display:none; 
}


h2.prog-desc {
    margin-top: 3em;
}

/*
h2.prog-desc:first-of-type {
    margin-top: 1em;
}
*/

h3.conv-desc, h3.conv-cursada {
    font-weight: bold;
    border-bottom: 1px solid var(--color-aux2);
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}




div.conv-renov input[type=text] {
    width: 11em;
    vertical-align: bottom;
    margin-left:1em;
}

div.conv-renov input[type=submit] {
    width: 11em;
    box-shadow: initial;
    font-size: initial;
    border: initial;
    display: inline;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    color: white;
    background-color: var(--color-prime2);
    margin-left:  0.5em; 

}

div.conv-renov input[type=submit]:hover {
    transform: unset;
}

div.solic-ren {
    margin:2em 0;
}

div.gasto-importe {
    display: flex;
    gap: 1.5em;
}



span.sol-search-wrap{

}

span.sol-search-wrap img{
    vertical-align: text-bottom;
}

span.sol-search-wrap input{
    width:95%;
    margin: 0;
}





p.anexo-action img {
    vertical-align: text-bottom;
}

p.anexo-action  a{
    margin: 0.5em;
}




#sec-solicitud h3 {
    margin-top:3em;
    font-weight: bold;
}
















@media (min-width: 600px) {

    .cardh {
	flex-direction: row;
	gap: 1em;
    }



    .fgroup {
	gap: 1.5em;
	margin: 1em 0;
	align-items: end;
  
    }

    .fgroup > * {
	flex: 0 1 30%;
	margin:0;
    }


    .grp h4{
	font-weight: bold;
    }



    input, select, textarea {
	margin-bottom: 1em;
    }

    input[type="tel"] {
	display: inline;
	margin-right: 0.5em;
    }


    .toolbar
    {
	flex-direction: row ;
    }

}