:root {
  --green: #4f6e5a;
  --dark-green: #3b4a40;
}

/* GLOBAL */
body {}
body * { box-sizing: border-box; }

.line{ width:100%; display:block; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(0%,1fr)); gap:20px; width:100%; }
.grid > * { width: 100%; }
.flex{ display:flex; gap:10px; flex-wrap:wrap; }
.flex > *{ flex:1;   }

/* INPUTS STYLES */
#content form { max-width: 900px; margin: 20px auto; padding: 20px;   }
#content label { display: block; margin-bottom: 10px;  width: 100%; color: #333; }
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="url"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="search"],
#content textarea,
#content select { width: 100%; padding: 10px 30px; margin: 5px 0 15px 0; border: 1px solid #69727d; border-radius: 40px; box-sizing: border-box; font-size: 16px; font-family: 'Arial', sans-serif; }


#content input[type="submit"],
#content input[type="button"],
#content .button { background-color: var(--green); color: white; padding: 10px 20px; border: none; border-radius: 40px; cursor: pointer; font-size: 16px; font-family: 'Arial', sans-serif; text-decoration: none; } 
#content button.outline, #content input[type="submit"].outline,
#content input[type="button"].outline,
#content .button.outline { background-color: transparent; color: var(--green); border: 2px solid var(--green); }
#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content .button:hover,
#content button.outline:hover,
#content input[type="submit"].outline:hover,
#content input[type="button"].outline:hover,
#content .button.outline:hover { background-color: var(--green); color: white; text-decoration: none; }

/*** ELEMENTOR IMPORT ***/
.elementor-title{font-family:"sangbleu",Sans-serif;font-size:40px;font-weight:400;line-height:45px;color:var(--e-global-color-primary);}



/*** DASHBOARD ***/
/*** VACANTES GRID ***/
.vact_grid{ display:flex; flex-wrap:wrap; gap:20px; justify-content:flex-start; }
.vact_grid > * {flex:0 1 calc(33.333% - 20px);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;max-width:calc(33.333% - 20px);box-sizing:border-box;}
@media (max-width:1024px){.vact_grid > *{flex-basis:calc(50% - 20px);max-width:calc(50% - 20px);}}
@media (max-width:600px){.vact_grid > *{flex-basis:100%;max-width:100%;}}

/*** VACANTES ICON LINK ***/
.vact_iconlink { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; 
  border: 2px solid var(--green); border-radius: 20px; text-decoration: none !important; color: var(--green); overflow: hidden;
  font-size: 1.2em; transition: background 0.2s, color 0.2s; }
.vact_iconlink:hover, .vact_iconlink:focus { background: var(--green); color: #fff; }
.vact_iconlink i{ text-align: center;  font-size:40px; }
.vact_iconlink span{ text-align: center;  font-size:18px; font-weight:bold; text-decoration:none; }

/*** VACANTES IMG LINK ***/
.vact_list_item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap:10px; }
.vact_list_item .title { width:100%; text-align:left; font-size:24px; font-family:"sangbleu"; color:#333; }

.vact_imglink { position:relative; display: flex; width:100%;flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; 
  border-radius: 20px; text-decoration: none !important; color: var(--green); 
  font-size: 1.2em; transition: background 0.2s, color 0.2s; overflow: hidden; }
.vact_imglink:hover, .vact_imglink:focus { background: var(--green); color: #fff; }
.vact_imglink img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.5s ease;}
.vact_imglink img:hover { transform: scale(1.1);  }
.vact_imglink_infos { position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:flex; flex-direction:column; justify-content:space-evenly; gap:10px; opacity:0; transition: opacity 0.3s ease; }
.vact_imglink:hover .vact_imglink_infos, .vact_imglink:focus .vact_imglink_infos { opacity:1; }
.vact_imglink_infos a { flex:1; background:rgba(255,255,255,0.8); color:var(--green); padding:5px 10px; border-radius:20px; text-decoration:none !important; font-size:0.9em; display:flex; align-items:center; gap:5px; }
.vact_imglink_infos a:hover { background:var(--green); color:white; }
.vact_imglink_infos a i { font-size:1.2em; text-decoration:none}

/*** VACANTE FORM ***/
.vact_form { display:block; max-width:900px; margin:50px auto;  background:#fff; }
.vact_form_step { display:none; margin:30px 0 70px; animation:fadeIn 0.5s ease-in-out; }
.vact_form_step.active { display:block; }

.vart_form_progress{ display:flex; justify-content:space-between; margin-bottom:20px; border-top:1px solid var(--green); }
.vart_form_progress_step{ display:block;  text-align:center; position:relative; top:-15px; border-radius: 50%; color:var(--green);  background-color: white; border:1px solid var(--green); width:30px; height:30px; line-height:30px; font-weight:bold;   }
.vart_form_progress_step.active, .vart_form_progress_step.completed { background-color: var(--green); color: white; }

.vact_form_buttons{ width:100%; margin-top:20px; display:block; overflow:hidden; }
.vact_form_buttons .next_button{ float:right;}
.vact_form_buttons .back_button{ float:left;}

.gallery-preview{min-height:110px;}
.gallery-preview img{cursor:grab;border:2px solid #eee;border-radius:6px;transition:border-color .2s;}
.gallery-preview img.dragging{opacity:.5;border-color:#2e7d32;}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}